*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:Inter,sans-serif;

background:#f7f3ea;

color:#1b1b1b;

}

.container{

width:92%;

max-width:1320px;

margin:auto;

}

a{

text-decoration:none;

}

ul{

list-style:none;

}

.header{

position:absolute;

top:0;

left:0;

width:100%;

z-index:1000;

padding:28px 0;
height: 10rem;

}

.header .container{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo h4{

font-size:13px;

letter-spacing:4px;

font-weight:500;

color:white;

}

.logo p{

font-size:12px;

color:#ddd;

margin-top:3px;

}

nav ul{

display:flex;

gap:40px;


}

nav a{

color:white;

font-size:13px;

letter-spacing:2px;

text-transform:uppercase;

transition:.4s;


}

nav a:hover{

opacity:.7;

}

.quote-btn{

padding:13px 28px;

border-radius:40px;

background:#2d6d55;

color:white;

font-size:13px;

letter-spacing:2px;

transition:.3s;

}

.quote-btn:hover{

background:#204f3f;

}

.hero{
    position:relative;
    height:130vh;
    overflow:hidden;
    display:flex;
    align-items:center;
}

.hero-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-2;
}

.overlay{
    position:absolute;
    inset:0;
    background:rgba(8, 39, 26, 0.438);
    z-index:-1;
}

.hero-content{
    position:relative;
    z-index:5;
    width:620px;
    margin-left:8%;
}

.hero{

height:100vh;

background:url("../images/hero.jpg") center center/cover;

position:relative;

display:flex;

align-items:center;

}

.overlay{

position:absolute;

width:100%;

height:100%;

background:rgba(8,39,26,.72);

}

.hero-content{

position:relative;

z-index:3;

max-width:780px;

margin-left:10%;

}

.hero-content span{

color:#d8d8d8;

letter-spacing:4px;

font-size:11px;

}

.hero-content h1{

font-family:'Cormorant Garamond',serif;

font-size:116px;

line-height:.95;

font-weight:700;

color:white;

margin:30px 0;

}

.hero-content p{

color:#d6d6d6;

font-size:16px;

line-height:34px;

max-width:620px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-top:45px;

}

.btn{

padding:16px 32px;

font-size:13px;

letter-spacing:2px;

text-transform:uppercase;

}

.btn1{

background:#91c59b;

color:#18331d;

}

.btn2{

border:1px solid white;

color:white;

}

.hero-bottom{

margin-top:65px;

display:flex;

gap:20px;

flex-wrap:wrap;

font-size:12px;

letter-spacing:2px;

color:#cfcfcf;

}

/*=========================
ABOUT
=========================*/

.about-section{

padding:140px 0;

background:#f7f3ea;

}

.about-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:90px;

}

.about-image{

overflow:hidden;

}

.about-image img{

width:500px;
height: 650px;

display:block;

}

.small-title{

font-size:11px;

letter-spacing:4px;

text-transform:uppercase;

color:#8c8c8c;

display:block;

margin-bottom:25px;

}

.about-content h2{

font-family:'Cormorant Garamond',serif;

font-size:66px;

font-weight:400;

line-height:1.05;

color:#22352d;

margin-bottom:20px;

}

.line{

width:55px;

height:2px;

background:#82b88e;

margin-bottom:35px;

}

.about-content p{

font-size:15px;

line-height:34px;

color:#666;

margin-bottom:30px;

}

.story-btn{

display:inline-block;

margin-top:15px;

font-size:12px;

letter-spacing:3px;

text-transform:uppercase;

color:#295542;

font-weight:600;

position:relative;

}

.story-btn::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:1px;

background:#295542;

transition:.35s;

}

.story-btn:hover::after{

width:100%;

}

@media(max-width:991px){

.about-grid{

grid-template-columns:1fr;

gap:60px;

}

.about-content{

text-align:center;

}

.line{

margin:auto;

margin-bottom:35px;

}

.about-content h2{

font-size:52px;

}

}

/*=========================
CATEGORIES
=========================*/

.categories{

padding:130px 0;

background:white;

}

.section-head{

text-align:center;

max-width:760px;

margin:auto;

margin-bottom:80px;

}

.section-head span{

letter-spacing:4px;

font-size:12px;

color:#8b8b8b;

text-transform:uppercase;

}

.section-head h2{

font-family:'Cormorant Garamond',serif;

font-size:72px;

font-weight:400;

line-height:1.05;

margin:25px 0;

color:#23392d;

}

.section-head p{

font-size:16px;

line-height:34px;

color:#666;

}

.category-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

}

.category-card{

background:#fff;

overflow:hidden;

transition:.45s;

box-shadow:0 15px 40px rgba(0,0,0,.06);

}

.category-card img{

width:100%;

height:420px;

object-fit:cover;

transition:.6s;

display:block;

}

.category-card:hover img{

transform:scale(1.08);

}

.card-content{

padding:28px;

}

.card-content h3{

font-family:'Cormorant Garamond',serif;

font-size:34px;

font-weight:500;

margin-bottom:12px;

color:#243a2e;

}

.card-content a{

font-size:12px;

letter-spacing:3px;

text-transform:uppercase;

color:#2b664e;

font-weight:600;

}

@media(max-width:1100px){

.category-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.category-grid{

grid-template-columns:1fr;

}

.section-head h2{

font-size:52px;

}

}


/*=========================
BESTSELLERS
=========================*/

.bestseller{

padding:140px 0;

background:#23392d;

}

.bestseller-heading{

text-align:center;

margin-bottom:70px;

}

.bestseller-heading span{

color:#b4cdbb;

letter-spacing:4px;

font-size:12px;

}

.bestseller-heading h2{

font-family:'Cormorant Garamond',serif;

font-size:70px;

font-weight:400;

color:white;

margin-top:20px;

line-height:1;

}

.best-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

}

.best-card{

background:#fff;

overflow:hidden;

transition:.45s;

}

.best-image{

overflow:hidden;

}

.best-image img{

width:100%;

height:430px;

object-fit:cover;

transition:.6s;

display:block;

}

.best-card:hover img{

transform:scale(1.08);

}

.best-content{

padding:30px;

}

.best-content h3{

font-family:'Cormorant Garamond',serif;

font-size:34px;

font-weight:500;

margin-bottom:15px;

color:#203328;

}

.best-content p{

font-size:15px;

line-height:28px;

color:#666;

margin-bottom:25px;

}

.best-content a{

display:inline-block;

padding:14px 28px;

background:#2d6d55;

color:#fff;

font-size:12px;

letter-spacing:2px;

text-transform:uppercase;

transition:.3s;

}

.best-content a:hover{

background:#193d30;

}

@media(max-width:1100px){

.best-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.best-grid{

grid-template-columns:1fr;

}

.bestseller-heading h2{

font-size:52px;

}

}

/*=====================================
EXPORT CTA
======================================*/

.export-section{

padding:150px 0;

background:#f4efe5;

}

.export-box{

max-width:900px;

margin:auto;

text-align:center;

}

.export-box span{

font-size:12px;

letter-spacing:4px;

color:#7d7d7d;

text-transform:uppercase;

}

.export-box h2{

font-family:'Cormorant Garamond',serif;

font-size:72px;

font-weight:400;

line-height:1.08;

margin:30px 0;

color:#21362b;

}

.export-box p{

font-size:17px;

line-height:34px;

color:#666;

max-width:700px;

margin:auto;

margin-bottom:50px;

}

.export-btns{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.primary-btn{

background:#2d6d55;

color:white;

padding:18px 42px;

letter-spacing:2px;

font-size:12px;

text-transform:uppercase;

transition:.4s;

}

.primary-btn:hover{

background:#1d4838;

}

.secondary-btn{

padding:18px 42px;

border:1px solid #2d6d55;

color:#2d6d55;

font-size:12px;

letter-spacing:2px;

text-transform:uppercase;

transition:.4s;

}

.secondary-btn:hover{

background:#2d6d55;

color:white;

}

@media(max-width:768px){

.export-box h2{

font-size:48px;

}

.export-btns{

flex-direction:column;

align-items:center;

}

.primary-btn,
.secondary-btn{

width:260px;

text-align:center;

}

}

/*==========================
FOOTER
==========================*/

.footer{

background:#203328;

padding-top:90px;

color:white;

}

.footer-top{

display:grid;

grid-template-columns:2fr 1fr 1fr 1fr;

gap:60px;

padding-bottom:70px;

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

}

.footer-logo h2{

font-family:'Cormorant Garamond',serif;

font-size:42px;

font-weight:400;

margin-bottom:20px;

}

.footer-logo p{

line-height:32px;

color:#cfd8d3;

}

.footer-links h4,
.footer-contact h4{

margin-bottom:25px;

font-size:18px;

}

.footer-links ul{

padding:0;

}

.footer-links li{

margin-bottom:14px;

}

.footer-links a{

color:#cfd8d3;

transition:.3s;

}

.footer-links a:hover{

color:white;

padding-left:6px;

}

.footer-contact p{

margin-bottom:14px;

color:#cfd8d3;

}

.footer-bottom{

display:flex;

justify-content:space-between;

align-items:center;

padding:35px 0;

flex-wrap:wrap;

}

.footer-bottom p{

color:#cfd8d3;

}

.footer-social{

display:flex;

gap:30px;

}

.footer-social a{

color:white;

transition:.3s;

}

.footer-social a:hover{

opacity:.7;

}

@media(max-width:991px){

.footer-top{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.footer-top{

grid-template-columns:1fr;

text-align:center;

}

.footer-bottom{

flex-direction:column;

gap:20px;

}

.footer-social{

justify-content:center;

}

}

.header{

position:fixed;

top:0;

left:0;

width:100%;

padding:25px 0;

z-index:9999;

transition:.4s;

}

.header.scrolled{

background:#203328;

box-shadow:0 10px 30px rgba(0,0,0,.18);

padding:18px 0;

backdrop-filter:blur(15px);

}
@media(max-width:991px){

.menu-toggle{

display:block;

}

nav{

position:fixed;

right:-100%;

top:0;

height:100vh;

width:300px;

background:#203328;

display:flex;

justify-content:center;

align-items:center;

transition:.45s;

}

nav.active{

right:0;

}

nav ul{

flex-direction:column;

gap:35px;

}

.quote-btn{

display:none;

}

}

.fade{

opacity:0;

transform:translateY(60px);

transition:1s;

}

.fade.active{

opacity:1;

transform:translateY(0);

}

.btn,
.primary-btn,
.quote-btn{

position:relative;

overflow:hidden;

}

.btn::before,
.primary-btn::before,
.quote-btn::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;

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

transition:.5s;

}

.btn:hover::before,
.primary-btn:hover::before,
.quote-btn:hover::before{

left:100%;

}

.category-card,
.best-card{

transition:.45s;

}

.category-card:hover,

.best-card:hover{

transform:translateY(-12px);

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

}

.progress-bar{

position:fixed;

top:0;

left:0;

height:3px;

background:#89b593;

width:0;

z-index:999999;

}

.hero{

background-attachment:fixed;

}

.hero h1{

animation:up 1.2s ease;

}

.hero p{

animation:up 1.6s ease;

}

@keyframes up{

0%{

opacity:0;

transform:translateY(70px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

section{

position:relative;

}

section::after{

content:"";

position:absolute;

bottom:0;

left:50%;

transform:translateX(-50%);

width:90%;

height:1px;

background:rgba(0,0,0,.05);

}

/*=========================
TESTIMONIALS
=========================*/

.testimonial{

padding:140px 0;

background:#ffffff;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

letter-spacing:4px;

font-size:12px;

color:#8c8c8c;

}

.section-title h2{

font-family:'Cormorant Garamond',serif;

font-size:68px;

font-weight:400;

margin-top:20px;

color:#22352d;

}

.testimonial-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:35px;

}

.testimonial-card{

background:#f8f5ee;

padding:45px;

transition:.4s;

}

.testimonial-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.testimonial-card p{

line-height:34px;

color:#666;

margin-bottom:35px;

}

.testimonial-card h4{

font-size:22px;

margin-bottom:8px;

font-family:'Cormorant Garamond',serif;

}

.testimonial-card span{

font-size:13px;

letter-spacing:2px;

color:#888;

}
@media(max-width:991px){

.testimonial-grid{

grid-template-columns:1fr;

}

.section-title h2{

font-size:50px;

}

}

.faq{

padding:120px 0;

background:#f7f3ea;

}

.faq-item{

margin-bottom:20px;

border:1px solid #ddd;

background:white;

}

.faq-btn{

width:100%;

padding:28px;

font-size:18px;

background:none;

border:none;

cursor:pointer;

text-align:left;

font-weight:600;

}

.faq-content{

display:none;

padding:0 28px 28px;

line-height:32px;

color:#666;

}

.faq-item.active .faq-content{

display:block;

}

.contact-banner{

position:relative;

padding:180px 0;

background:url(images/contact-banner.jpg) center/cover;

}

.contact-banner .overlay{

position:absolute;

inset:0;

background:rgba(15,40,30,.70);

}

.contact-content{

position:relative;

z-index:5;

text-align:center;

color:white;

}

.contact-content span{

letter-spacing:4px;

font-size:12px;

}

.contact-content h2{

font-family:'Cormorant Garamond',serif;

font-size:74px;

font-weight:400;

margin:25px 0 45px;

}

.contact-content a{

display:inline-block;

padding:18px 45px;

background:#89b593;

color:#203328;

letter-spacing:2px;

font-size:12px;

}


.difference{

padding:140px 0;

background:#ffffff;

}

.difference .container{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:start;

}

.difference-left span{

letter-spacing:4px;

font-size:12px;

color:#888;

}

.difference-left h2{

font-family:'Cormorant Garamond',serif;

font-size:66px;

margin:20px 0;

font-weight:400;

color:#22352d;

}

.difference-left p{

line-height:34px;

color:#666;

}

.difference-right{

display:grid;

grid-template-columns:1fr 1fr;

gap:30px;

}

.feature-box{

padding:35px;

background:#f7f3ea;

transition:.35s;

}

.feature-box:hover{

transform:translateY(-8px);

box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.feature-box h3{

font-family:'Cormorant Garamond',serif;

font-size:30px;

margin-bottom:15px;

font-weight:500;

}

.feature-box p{

line-height:30px;

color:#666;

}

@media(max-width:991px){

.difference .container{

grid-template-columns:1fr;

}

.difference-right{

grid-template-columns:1fr;

}

.difference-left h2{

font-size:48px;

}

}

/*==========================
PROCESS
==========================*/

.process-section{

padding:140px 0;

background:#f7f3ea;

}

.process-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:35px;

margin-top:80px;

}

.process-card{

background:white;

padding:45px;

transition:.4s;

border:1px solid #ece7de;

}

.process-card:hover{

transform:translateY(-12px);

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

}

.number{

font-family:'Cormorant Garamond',serif;

font-size:64px;

color:#89b593;

margin-bottom:25px;

}

.process-card h3{

font-family:'Cormorant Garamond',serif;

font-size:32px;

margin-bottom:20px;

font-weight:500;

color:#203328;

}

.process-card p{

line-height:32px;

color:#666;

}

@media(max-width:1100px){

.process-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.process-grid{

grid-template-columns:1fr;

}

}

.counter-section{

background:#203328;

padding:110px 0;

}

.counter-grid{

display:grid;

grid-template-columns:repeat(4,1fr);

text-align:center;

gap:30px;

}

.counter h2{

font-size:72px;

font-family:'Cormorant Garamond',serif;

font-weight:400;

color:white;

}

.counter p{

margin-top:15px;

letter-spacing:2px;

font-size:13px;

text-transform:uppercase;

color:#cfd8d3;

}


@media(max-width:900px){

.counter-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.counter-grid{

grid-template-columns:1fr;

}

}

/*==========================
GALLERY
==========================*/

.gallery-section{

padding:150px 0;

background:#fff;

}

.gallery-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

grid-auto-rows:320px;

gap:30px;

margin-top:70px;

}

.gallery-item{

position:relative;

overflow:hidden;

}

.gallery-item.large{

grid-column:span 2;

}

.gallery-item img{

width:100%;

height:100%;

object-fit:cover;

transition:1s;

display:block;

}

.gallery-overlay{

position:absolute;

left:0;

bottom:0;

width:100%;

padding:35px;

background:linear-gradient(transparent,rgba(0,0,0,.75));

color:white;

}

.gallery-overlay h3{

font-family:'Cormorant Garamond',serif;

font-size:36px;

font-weight:400;

}

.gallery-overlay p{

margin-top:8px;

letter-spacing:2px;

font-size:13px;

}

.gallery-item:hover img{

transform:scale(1.08);

}

@media(max-width:992px){

.gallery-grid{

grid-template-columns:1fr 1fr;

}

.gallery-item.large{

grid-column:span 2;

}

}

@media(max-width:768px){

.gallery-grid{

grid-template-columns:1fr;

}

.gallery-item.large{

grid-column:span 1;

}

}

.premium-cta{

padding:140px 0;

background:#234132;

text-align:center;

color:white;

}

.premium-cta h2{

font-size:72px;

font-family:'Cormorant Garamond',serif;

font-weight:400;

margin-bottom:25px;

}

.premium-cta p{

max-width:700px;

margin:auto;

line-height:34px;

color:#d7d7d7;

margin-bottom:45px;

}

.premium-cta a{

display:inline-block;

padding:18px 45px;

background:#89b593;

color:#203328;

letter-spacing:2px;

font-size:13px;

transition:.4s;

}

.premium-cta a:hover{

transform:translateY(-5px);

}

.whatsapp{

position:fixed;

right:30px;

bottom:30px;

width:62px;

height:62px;

background:#25D366;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

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

z-index:999;

transition:.4s;

}

.whatsapp img{

width:34px;

}

.whatsapp:hover{

transform:translateY(-8px);

}


.top-btn{

position:fixed;

left:30px;

bottom:30px;

width:55px;

height:55px;

background:#203328;

color:white;

display:flex;

justify-content:center;

align-items:center;

cursor:pointer;

font-size:22px;

opacity:0;

visibility:hidden;

transition:.4s;

z-index:999;

}

.top-btn.show{

opacity:1;

visibility:visible;

}


#loader{

position:fixed;

inset:0;

background:#f7f3ea;

display:flex;

justify-content:center;

align-items:center;

z-index:999999;

transition:.6s;

}

.spinner{

width:70px;

height:70px;

border:4px solid #ddd;

border-top:4px solid #2d6d55;

border-radius:50%;

animation:spin 1s linear infinite;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

.cursor{

position:fixed;

width:18px;

height:18px;

border-radius:50%;

background:#89b593;

pointer-events:none;

transform:translate(-50%,-50%);

z-index:99999;

mix-blend-mode:difference;

transition:.08s;

}

.footer{

animation:fadeFooter 1.5s ease;

}

@keyframes fadeFooter{

from{

opacity:0;

transform:translateY(60px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.reveal{

opacity:0;

transform:translateY(80px);

transition:1s;

}

.reveal.show{

opacity:1;

transform:translateY(0);

}

img{

max-width:100%;

display:block;

}

.container{

width:min(1320px,92%);

margin:auto;

}

body{

overflow-x:hidden;

}


.footer{

background:#1d3127;

padding:120px 0 30px;

color:white;

}

.footer-grid{

display:grid;

grid-template-columns:2fr 1fr 1fr 1.4fr;

gap:60px;

}

.footer h2{

font-size:42px;

font-family:'Cormorant Garamond',serif;

font-weight:400;

margin-bottom:20px;

}

.footer h3{

margin-bottom:25px;

font-size:22px;

font-family:'Cormorant Garamond',serif;

font-weight:500;

}

.footer p{

line-height:30px;

color:#cfd8d3;

}

.footer ul{

padding:0;

list-style:none;

}

.footer li{

margin-bottom:15px;

}

.footer a{

color:#d7e0dc;

transition:.3s;

}

.footer a:hover{

color:#89b593;

padding-left:6px;

}

.socials{

display:flex;

gap:15px;

margin-top:30px;

}

.socials a{

width:45px;

height:45px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

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

}

.footer form{

margin-top:20px;

}

.footer input{

width:100%;

padding:18px;

border:none;

margin-bottom:15px;

outline:none;

}

.footer button{

width:100%;

padding:18px;

background:#89b593;

border:none;

cursor:pointer;

letter-spacing:2px;

text-transform:uppercase;

}

.footer hr{

margin:70px 0 30px;

border:none;

height:1px;

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

}

.copyright{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

}
@media(max-width:992px){

.footer-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.socials{

justify-content:center;

}

.copyright{

justify-content:center;

gap:15px;

}

}

.quote-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

.country-flags {
    display: flex;
    align-items: center;
    gap: 6px;
}

.country-flags span {
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.25s ease;
}

.country-flags span:hover {
    transform: scale(1.15);
}

.quote-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

.country-flags {
    display: flex;
    align-items: center;
    gap: 6px;
}

.country-flags img {
    width: 24px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
    transition: transform 0.2s ease;
}

.country-flags img:hover {
    transform: scale(1.15);
}



@media(max-width: 991px) {
  .quote-wrapper {
    display: none;
  }
  
  .hero-content {
    margin-left: 5% !important;
    margin-top: 0 !important;
    width: 90% !important;
    
  }

  .hero-content h1 {
    font-size: 50px !important;
    margin: 15px 0;
  }

  .about-image img {
    width: 100% !important;
    height: auto !important;
  }

  .section-head h2,
  .bestseller-heading h2,
  .export-box h2,
  .difference-left h2,
  .section-title h2,
  .contact-content h2,
  .premium-cta h2 {
    font-size: 40px !important;
  }
}

@media(max-width: 576px) {
  .hero-content h1 {
    font-size: 38px !important;
    margin-top: -30rem;
  }
  
  .hero-buttons {
    flex-direction: column;
  }
  
  .btn {
    width: 100%;
    text-align: center;
  }
}




@media(max-width: 991px) {
  .menu-toggle {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    z-index: 10001;
  }

  .menu-toggle span {
    width: 28px;
    height: 3px;
    background-color: white;
    display: block;
    transition: 0.3s;
  }

  nav.active {
    right: 0 !important;
  }
}




@media(max-width: 991px) {
  nav {
    position: fixed;
    right: -100%;
    top: 0;
    height: 100vh;
    width: 280px;
    background: #203328;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.45s ease;
    z-index: 9999;
  }

  nav.active {
    right: 0 !important;
  }

  nav ul {
    flex-direction: column !important;
    align-items: center !important;
    gap: 25px !important;
    margin-left: 0 !important;
    padding: 0 !important;
  }

  nav ul li {
    margin-left: 0 !important;
  }

  nav a {
    font-size: 16px !important;
  }
}