/*==========================================================
NACHARELIST SEO UI
Webflow Enterprise Style
==========================================================*/

:root{

--brand:#4F7B45;
--brand2:#84A98C;
--accent:#E6C79C;
--dark:#111827;
--light:#ffffff;
--gray:#64748B;
--border:#E5E7EB;
--bg:#F8FAFC;

--radius:22px;

--shadow:
0 18px 45px rgba(0,0,0,.08);

}

/*==========================================================*/

.seo-brand,
.seo-content,
.product-categories,
.faq-section{

padding:90px 0;

background:#fff;

position:relative;

overflow:hidden;

}

/*==========================================================*/

.seo-brand::before,
.seo-content::before{

content:"";

position:absolute;

width:520px;

height:520px;

right:-250px;

top:-250px;

background:

radial-gradient(circle,
rgba(79,123,69,.08),
transparent);

border-radius:50%;

}

/*==========================================================*/

.seo-brand .container,
.seo-content .container,
.product-categories .container,
.faq-section .container{

max-width:1280px;

margin:auto;

padding:0 30px;

}

/*==========================================================*/

.seo-brand h1,
.seo-content h2,
.product-categories h2,
.faq-section h2{

font-size:44px;

font-weight:700;

line-height:1.15;

margin-bottom:22px;

color:var(--dark);

font-family:"Playfair Display",serif;

letter-spacing:-1px;

}

/*==========================================================*/

.seo-brand p,
.seo-content p{

font-size:18px;

line-height:1.9;

color:var(--gray);

max-width:920px;

}

/*==========================================================*/

.product-categories ul{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(220px,1fr));

gap:18px;

margin-top:40px;

padding:0;

list-style:none;

}

/*==========================================================*/

.product-categories li{

transition:.35s;

}

/*==========================================================*/

.product-categories a{

display:block;

padding:18px 22px;

background:#fff;

border:1px solid var(--border);

border-radius:18px;

color:var(--dark);

font-weight:600;

text-decoration:none;

box-shadow:

0 10px 35px rgba(0,0,0,.04);

transition:.35s;

}

/*==========================================================*/

.product-categories a:hover{

background:linear-gradient(
135deg,
var(--brand),
var(--brand2));

color:#fff;

transform:translateY(-6px);

box-shadow:

0 18px 45px rgba(79,123,69,.28);

}

/*==========================================================*/

.faq-section{

background:

linear-gradient(
180deg,
#fff,
#F8FAFC);

}

/*==========================================================*/

.faq-item{

background:#fff;

border-radius:22px;

padding:30px;

margin-bottom:20px;

border:1px solid var(--border);

box-shadow:var(--shadow);

transition:.35s;

}

/*==========================================================*/

.faq-item:hover{

transform:translateY(-5px);

}

/*==========================================================*/

.faq-item h3{

font-size:22px;

margin-bottom:12px;

color:var(--dark);

font-weight:700;

}

/*==========================================================*/

.faq-item p{

font-size:17px;

line-height:1.8;

color:var(--gray);

}

/*==========================================================*/

.footer-seo-links{

margin-top:60px;

padding-top:35px;

border-top:1px solid rgba(255,255,255,.12);

display:flex;

flex-wrap:wrap;

gap:14px;

justify-content:center;

}

/*==========================================================*/

.footer-seo-links a{

padding:11px 18px;

border-radius:999px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(18px);

color:#fff;

text-decoration:none;

font-size:14px;

font-weight:600;

transition:.35s;

}

/*==========================================================*/

.footer-seo-links a:hover{

background:#fff;

color:var(--brand);

transform:translateY(-3px);

}

/*==========================================================*/

.seo-highlight{

display:inline-block;

padding:8px 18px;

border-radius:999px;

background:

rgba(79,123,69,.08);

color:var(--brand);

font-weight:700;

font-size:13px;

letter-spacing:1px;

text-transform:uppercase;

margin-bottom:20px;

}

/*==========================================================*/

.seo-grid{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(280px,1fr));

gap:28px;

margin-top:55px;

}

/*==========================================================*/

.seo-card{

background:#fff;

border-radius:22px;

padding:35px;

border:1px solid var(--border);

box-shadow:var(--shadow);

transition:.35s;

}

.seo-card:hover{

transform:translateY(-8px);

}

.seo-card h3{

font-size:24px;

margin-bottom:18px;

color:var(--dark);

}

.seo-card p{

font-size:16px;

line-height:1.8;

color:var(--gray);

}

/*==========================================================*/

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

.seo-card{

animation:float 8s ease-in-out infinite;

}

/*==========================================================*/

@media(max-width:991px){

.seo-brand,
.seo-content,
.product-categories,
.faq-section{

padding:70px 0;

}

.seo-brand h1,
.seo-content h2,
.product-categories h2,
.faq-section h2{

font-size:34px;

}

}

/*==========================================================*/

@media(max-width:768px){

.seo-brand h1,
.seo-content h2,
.product-categories h2,
.faq-section h2{

font-size:28px;

}

.seo-brand p,
.seo-content p{

font-size:16px;

}

.product-categories ul{

grid-template-columns:1fr;

}

.footer-seo-links{

display:flex;

flex-wrap:wrap;

gap:12px;

margin-top:35px;

}

.footer-seo-links a{

padding:10px 18px;

border-radius:999px;

background:#1E293B;

border:1px solid rgba(255,255,255,.08);

color:#CBD5E1;

text-decoration:none;

transition:.3s;

}

.footer-seo-links a:hover{

background:#4F7B45;

color:#fff;

border-color:#4F7B45;

}

}

/* ===== Footer Extra ===== */

.footer-extra{
margin-top:60px;
padding:60px 0;
border-top:1px solid rgba(255,255,255,.08);
}

.footer-extra-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:40px;
}

.footer-tags{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:20px;
}

.footer-tags a,
.footer-tags span{
padding:10px 16px;
border-radius:999px;
background:#1E293B;
color:#CBD5E1;
text-decoration:none;
font-size:14px;
transition:.3s;
}

.footer-tags a:hover{
background:#4F7B45;
color:#fff;
}

.footer-small{
margin-top:20px;
color:#94A3B8;
line-height:1.8;
}

/* ===== Newsletter ===== */
/*==================================================
Premium Newsletter
==================================================*/

.footer-newsletter{

padding:90px 0;

position:relative;

overflow:hidden;

}

/*========================*/

.newsletter-wrapper{

background:

linear-gradient(135deg,
#355E3B,
#4F7B45,
#7AA17A);

border-radius:36px;

padding:70px;

display:grid;

grid-template-columns:1.2fr .8fr;

gap:70px;

align-items:center;

position:relative;

overflow:hidden;

box-shadow:
0 40px 80px rgba(0,0,0,.18);

}

/*========================*/

.newsletter-wrapper:before{

content:"";

position:absolute;

width:520px;

height:520px;

right:-250px;

top:-180px;

background:

radial-gradient(circle,
rgba(255,255,255,.12),
transparent);

border-radius:50%;

}

/*========================*/

.newsletter-wrapper:after{

content:"";

position:absolute;

left:-150px;

bottom:-150px;

width:400px;

height:400px;

background:

radial-gradient(circle,
rgba(255,255,255,.08),
transparent);

border-radius:50%;

}

/*========================*/

.newsletter-left{

position:relative;

z-index:2;

}

.newsletter-badge{

display:inline-block;

padding:10px 20px;

background:rgba(255,255,255,.14);

backdrop-filter:blur(15px);

border-radius:999px;

font-size:14px;

font-weight:600;

color:#fff;

margin-bottom:24px;

}

.newsletter-left h2{

font-size:54px;

line-height:1.1;

font-family:"Playfair Display",serif;

color:#fff;

margin-bottom:24px;

}

.newsletter-left h2 span{

color:#FDE68A;

}

.newsletter-left p{

font-size:18px;

line-height:1.9;

color:rgba(255,255,255,.88);

max-width:620px;

}

/*========================*/

.newsletter-features{

display:flex;

gap:18px;

flex-wrap:wrap;

margin-top:35px;

}

.newsletter-features span{

padding:12px 18px;

border-radius:999px;

background:rgba(255,255,255,.12);

backdrop-filter:blur(12px);

color:#fff;

font-size:14px;

}

/*========================*/

.newsletter-right{

position:relative;

z-index:2;

}

.newsletter-form{

display:flex;

flex-direction:column;

gap:22px;

}

.newsletter-input{

display:flex;

align-items:center;

background:#fff;

padding:0 22px;

height:72px;

border-radius:18px;

box-shadow:
0 20px 40px rgba(0,0,0,.12);

}

.newsletter-input i{

font-size:22px;

color:#4F7B45;

margin-right:16px;

}

.newsletter-input input{

flex:1;

border:none;

background:none;

font-size:17px;

outline:none;

}

.newsletter-form button{

height:72px;

border:none;

border-radius:18px;

background:#111827;

color:#fff;

font-size:17px;

font-weight:700;

cursor:pointer;

transition:.35s;

display:flex;

align-items:center;

justify-content:center;

gap:12px;

}

.newsletter-form button:hover{

background:#fff;

color:#355E3B;

transform:translateY(-3px);

}

.newsletter-trust{

display:flex;

justify-content:center;

gap:20px;

margin-top:24px;

color:rgba(255,255,255,.85);

font-size:14px;

}

/*========================*/

@media(max-width:991px){

.newsletter-wrapper{

grid-template-columns:1fr;

padding:45px;

text-align:center;

gap:45px;

}

.newsletter-left h2{

font-size:38px;

}

.newsletter-features{

justify-content:center;

}

}

@media(max-width:600px){

.newsletter-wrapper{

padding:30px;

border-radius:24px;

}

.newsletter-left h2{

font-size:30px;

}

.newsletter-input{

height:60px;

}

.newsletter-form button{

height:60px;

}

}

.newsletter-message{

margin-bottom:20px;

padding:15px 20px;

background:#ffffff;

border-radius:14px;

color:#355E3B;

font-weight:600;

text-align:center;

box-shadow:0 10px 25px rgba(0,0,0,.08);

}
/* ===== Bottom ===== */

.footer-bottom{
margin-top:50px;
padding-top:30px;
border-top:1px solid rgba(255,255,255,.08);
display:flex;
justify-content:space-between;
align-items:center;
gap:25px;
flex-wrap:wrap;
}

.footer-bottom-center{
display:flex;
gap:18px;
flex-wrap:wrap;
color:#CBD5E1;
}

.footer-bottom-right{
display:flex;
gap:20px;
}

.footer-bottom-right a{
color:#CBD5E1;
text-decoration:none;
}

.footer-bottom-right a:hover{
color:#fff;
}

@media(max-width:768px){



.footer-bottom{
flex-direction:column;
text-align:center;
}

}