/*
Theme Name: California Supreme Salt
Theme URI: https://wpastra.com/
Template: astra
Author: California Supreme Salt
Description: Child Theme
Tags: #child-theme
Version: 1.0.0.1763530703
Updated: 2025-11-19 05:38:23

*/


@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap"); 
:root {--primary-color:#000000; --secondary-color:#0495CA; --font-NotoSansJP-family:"Noto Sans JP", sans-serif; --font-weight-light:300; --font-weight-regular:400; --font-weight-medium:500; --font-weight-semibold:600; --font-weight-bold:700; --font-weight-extrabold:800; --font-weight-black:900; --c-black:#000000; --c-white:#ffffff; --c-blue:#0495CA; --c-yellow:#FED03D; --c-darkgray:#3c3c3c; --c-transparent-black-80:rgba(0, 0, 0, 0.8); --ff-noto:"Noto Sans JP", sans-serif;}

/* Global */

* {margin:0px; padding:0px; outline:none;}
body {font-size:20px; line-height:34px; font-family:var(--ff-noto) !important;}
body p { font-size:20px; line-height:34px}
a {text-decoration:none; transition:all 0.3s ease;}
a:hover {transition:all 0.3s ease;}
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 , body a , body p , body li , body li a , body .elementor-widget  {font-family:var(--ff-noto) !important;}

#content h1 {font-size:82px; line-height:92px; font-weight:900; text-transform:uppercase;}
#content h2 {font-size:50px; line-height:60px; font-weight:700;}
#content h3 {font-size:45px; line-height:55px;}
#content h4 {font-size:24px; line-height:36px;}
#content h5 {font-size:22px; line-height:32px;}
#content h6 {font-size:20px; line-height:30px;}

#content .elementor-widget-text-editor {font-family:var(--ff-noto);}
#content .elementor-widget-text-editor p {font-size:20px; line-height:34px; font-weight:400;}
#content .elementor-widget-text-editor p:last-child {margin-bottom:0;}
#content .primary-btn a {font-size:18px; font-weight:700; line-height:1; background-color:var(--c-yellow); color:var(--c-black); padding:20px 30px; text-transform:uppercase; border-radius:0;}
#content .primary-btn a:hover {background-color:var(--c-black); color:var(--c-yellow);}
#content .secondary-btn a {font-size:18px; font-weight:700; line-height:1; background-color:var(--c-darkgray); color:var(--c-white); padding:20px 30px; text-transform:uppercase; border-radius:0;}
#content .secondary-btn a:hover {background-color:var(--c-black); color:var(--c-yellow);}

/* Global Ends */

#header .logo-col:before {content:""; position:absolute; left:-50px; top:0; width:390px; height:calc(100% + 10px); background-image:url(/wp-content/uploads/2025/11/logo-bg.webp); background-size:cover; background-position:right center;}
#header .header-btn a {position:relative;}
#header .header-btn a:before {content:""; position:absolute; width:38px; height:38px; background-image:url(/wp-content/uploads/2025/11/btn-edit.webp); background-repeat:no-repeat; background-size:contain; left:4px; transform:translateY(-50%); top:50%;}
.hero-banner:after {content:""; position:absolute; left:0; width:100%; height:100%; background:url(/wp-content/uploads/2025/11/pattern.webp) center center; background-size:contain; background-repeat:repeat}
.hero-banner a {color:var(--c-blue);}
.hero-banner a:hover {text-decoration:underline; text-underline-offset:5px;}
#content .client-box img {aspect-ratio:1; object-fit:contain;}
#content .client-box .elementor-heading-title {font-weight:900;}
#content .client-box .description {min-height:60px;}
#content .client-box .secondary-btn {margin-bottom:0; margin-top:auto;}
#content .partner-slider .swiper-slide-inner {background:var(--c-white); min-height:160px; display:flex; justify-content:center; align-items:center;}
/* #content .partner-slider .swiper-slide-inner img { object-fit:contain;} */
#content .partner-slider .swiper-slide-inner img { object-fit: cover; height: 240px; width: 345px; }
#content ul li, #content ol li, #content .elementor-widget {font-family:var(--ff-noto);}
.project-slider .elementor-loop-container {padding:20px 10px;}
.project-slider .project-item:after {content:""; position:absolute; left:0; bottom:0; height:40%; width:100%; background: linear-gradient(0deg,rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); opacity:0.8;}
#content .project-slider .project-item h5 {font-weight:900; margin:0;}
#content .project-slider .project-item .desc, #content .project-slider .project-item .desc p {font-size:18px; line-height:28px; font-weight:700; margin-bottom:0;}
#content .blog-item .read-more a {text-decoration:underline; text-underline-offset:8px; text-decoration-color:var(--c-blue);}
#content .blog-item .read-more a:hover {text-decoration-color:var(--c-yellow);}
#content .elementor-field {box-shadow:none;}
#content .elementor-field::-webkit-input-placeholder {color:rgba(0, 0, 0, 0.6) !important; opacity:1 !important; font-family:var(--ff-noto);}
#content .elementor-field:focus {outline:1px solid var(--c-blue); box-shadow:none;}
#content .elementor-field-type-submit .elementor-button {font-size:18px; font-weight:700; line-height:1; background-color:var(--c-yellow); color:var(--c-black); padding:20px 30px; text-transform:uppercase; border-radius:0; margin-top:20px; min-width:210px;}
#content .elementor-field-type-submit .elementor-button:hover {background-color:var(--c-black); color:var(--c-yellow);}

/* Blogs Archive  */

#content .elementor-pagination { margin-top:50px; display:flex; gap:10px; justify-content:center }
#content .elementor-pagination .page-numbers { width:30px; height:30px; aspect-ratio:1; display:flex; justify-content:center; align-items:center; margin:0; background-color:var(--secondary-color); color:var(--c-white); font-family:var(--font-NotoSansJP-family);}
#content .elementor-pagination .page-numbers.current,#content .elementor-pagination .page-numbers:hover { background-color:var(--c-yellow); color:var(--c-black);}

#content .blog-category h5 { display:none; }
#content .blog-category ul { margin:0; padding:0; list-style-type:square; list-style-position:inside;}
#content .blog-category ul li::marker { color:var(--secondary-color)}
#content .blog-category ul li a { color:var(--secondary-color)}
#content .blog-category ul li a:hover { text-decoration:underline; text-underline-offset:5px;}

#content .recent-posts article { border-bottom:1px solid rgb(0 0 0 / 12%);}
#content .recent-posts article .elementor-post__read-more:hover { color:var(--c-yellow); text-decoration:underline; text-underline-offset:5px;}

/* Blog Single */

#content .single-post h2, #content .single-post h3, #content .single-post h4, #content .single-post h5, #content .single-post h6 { margin-top:0}
#content .single-post a{ color:var(--secondary-color); font-weight:400;}
#content .single-post a:hover { text-decoration:underline; text-underline-offset:5px;}

#content .single-post ul { margin:0; padding:0; list-style-type:square; list-style-position:inside; margin-bottom:20px;}
#content .single-post ul li::marker { color:var(--secondary-color)}
#content .single-post ul li a { color:var(--secondary-color)}

@media (min-width: 1500px) and (max-width:1699px) {
#header .logo-col:before {max-width:380px;}
#header .header-menu ul.elementor-nav-menu li a {margin:0 15px;}
}

@media (min-width: 1367px) and (max-width:1499px) {
#header .logo-col:before {max-width:350px;}
#header .header-menu ul.elementor-nav-menu li a {margin:0 12px; font-size:15px;}
#header .menu-col {gap:20px;}
}

@media (max-width: 1366px) and (min-width:1025px) {
#content h1 {font-size:60px; line-height:72px;}
#content h2 {font-size:45px; line-height:55px;}
#content h3 {font-size:38px; line-height:48px;}
#content h4 {font-size:22px; line-height:32px;}
#content h5 {font-size:20px; line-height:30px;}
}

@media (min-width: 1200px) and (max-width:1399px) {
#header .logo-col:before {max-width:300px;}
#header .logo-col {max-width:300px;}
#header .logo-col img {max-width:130px;}
#header .menu-col {gap:20px;}
}

@media (min-width: 1200px) and (max-width:1299px) {
#header .header-menu ul.elementor-nav-menu li a {font-size:15px;}
}

@media (min-width: 1025px) and (max-width:1199px) {
#header .logo-col:before {max-width:250px;}
}

@media (min-width: 1025px) and (max-width:1099px) {
#header .header-menu ul.elementor-nav-menu li a  { font-size:13px;}
}

@media (min-width: 1025px) {
#header .header-menu ul li.current-menu-item a, #header .header-menu ul li a:hover {text-decoration:underline; text-underline-offset:5px; text-decoration-color:var(--c-blue);}
#content .contact-form .elementor-field-textual.elementor-size-xl { min-height:82px }
#content .contact-form .elementor-field-type-textarea .elementor-field-textual { padding-block:50px;}	
#content .contact-form .elementor-field	{ padding-inline: 30px; }
}

@media (max-width: 1024px) {
#content .get-touch {background:none;}
#content .elementor-field {min-height:50px;}
#content .elementor-field-type-submit .elementor-button {font-size:16px; padding:18px 26px;}
#header .logo-col:before {height:100%; max-width:280px;}
#content .primary-btn a, #content .secondary-btn a {font-size:16px; padding:18px 26px;}
#content h1 {font-size:45px; line-height:55px;}
#content h2 {font-size:40px; line-height:50px;}
#content h3 {font-size:30px; line-height:40px;}	
#content .partner-slider .swiper-slide-inner { min-height:100px;} 
/* #content .partner-slider .swiper-slide-inner img { max-width:130px;} */
#content .partner-slider .swiper-slide-inner img { max-width:100%;}
#content .elementor-widget-text-editor p, #content .elementor-widget-text-editor {font-size:16px; line-height:26px;}
#content .elementor-pagination { margin-top:30px;}
body , body p { font-size:16px; line-height:26px}	
	
}

@media (max-width: 767px) {
#content .elementor-field-type-submit .elementor-button {font-size:14px; padding:16px 22px;}
#header .logo-col:before {max-width:220px;}
#header .header-btn a:before {width:25px; height:25px;}
#content h1 {font-size:35px; line-height:45px;}
#content h2 {font-size:30px; line-height:40px;}
#content h3 {font-size:26px; line-height:36px;}	
#content .primary-btn a, #content .secondary-btn a {font-size:14px; padding:16px 22px;}
#content .client-box .description {min-height:auto;}
#content .partner-slider .swiper-slide-inner {min-height:75px;}	
/* #content .partner-slider .swiper-slide-inner img {padding:5px; width:100px} */
#content .partner-slider .swiper-slide-inner img {padding:5px; width:100%}
#content .elementor-widget-text-editor p, #content .elementor-widget-text-editor {font-size:14px; line-height:24px;}
body , body p   { font-size:14px; line-height:24px}	
}