/* =========================
   EDEN FRESH STYLE SYSTEM
========================= */

:root{

--green:#164d3b;
--green-light:#3f8068;
--gold:#d5a947;
--cream:#faf8f1;
--white:#ffffff;
--text:#19352b;

}


*{
margin:0;
padding:0;
box-sizing:border-box;
}


html{
scroll-behavior:smooth;
overflow-x:hidden;
}


body{

font-family:"Inter",sans-serif;
color:var(--text);
background:var(--cream);
overflow-x:hidden;
width:100%;

}


img{
max-width:100%;
display:block;
}


h1,h2,h3{

font-family:"Playfair Display",serif;

}


a{

text-decoration:none;
color:inherit;

}



/* =========================
 HEADER
========================= */


header{

position:fixed;
top:0;
left:0;
width:100%;
z-index:1000;
transition:.3s;

}


header.scrolled{

background:rgba(22,77,59,.95);
backdrop-filter:blur(10px);
box-shadow:0 5px 20px rgba(0,0,0,.15);

}



.nav{

width:100%;
max-width:1200px;
margin:auto;

padding:20px;

display:flex;
justify-content:space-between;
align-items:center;

}



.logo{

    display:flex;
    align-items:center;

}

.logo a{

    display:flex;
    align-items:center;

}

.logo img{

    height:125px;
    width:auto;
    display:block;
    transition:.3s ease;
    margin-top: -20px !important;

}

.logo img:hover{

    transform:scale(1.05);

}



.desktop-nav{

display:flex;
align-items:center;
gap:35px;

}



.desktop-nav a{

color:white;
font-weight:600;

}



.btn{

background:var(--gold);
color:var(--green)!important;
padding:12px 25px;
border-radius:30px;

}



/* =========================
 MOBILE MENU
========================= */


.menu-button{

display:none;
background:none;
border:none;
color:white;
font-size:30px;
cursor:pointer;

}



#mobileMenu{

display:none;

}



/* =========================
 HERO
========================= */


.hero{

height:100vh;
min-height:650px;

position:relative;

display:flex;
justify-content:center;
align-items:center;

overflow:hidden;

}



.hero img{

position:absolute;

width:100%;
height:100%;

object-fit:cover;

animation:farmZoom 18s infinite alternate ease-in-out;

}



@keyframes farmZoom{

from{
transform:scale(1);
}

to{
transform:scale(1.12);
}

}



.overlay{

position:absolute;
inset:0;

background:
linear-gradient(
rgba(22,77,59,.75),
rgba(22,77,59,.55)
);

}



.hero-content{

position:relative;
z-index:2;

width:100%;
max-width:900px;

padding:20px;

text-align:center;
color:white;

animation:heroFade 1.5s ease;

}



@keyframes heroFade{

from{

opacity:0;
transform:translateY(40px);

}

to{

opacity:1;
transform:translateY(0);

}

}



.hero-content p{

color:var(--gold);
letter-spacing:4px;
font-weight:bold;

}



.hero h1{

font-size:90px;
margin:20px 0;

}



.hero h2{

font-family:"Inter";
font-weight:400;
font-size:25px;
color:var(--gold);

}




.gold-btn,
.outline-btn{

display:inline-block;

margin:30px 8px 0;

padding:15px 35px;

border-radius:40px;

font-weight:bold;

transition:.3s;

}



.gold-btn{

background:var(--gold);
color:var(--green);

}



.outline-btn{

border:2px solid white;
color:white;

}


.gold-btn:hover,
.btn:hover{

transform:scale(1.05);

}



.outline-btn:hover{

background:white;
color:var(--green);

}




.hero-tagline{

    font-family:"Monotype Corsiva", cursive !important;
    font-size:42px;
    font-weight:normal;
    font-style:normal;
    color:white !important;
    line-height:1.5;

}
/* =========================
 SECTIONS
========================= */


section{

width:100%;
padding:100px 8%;

}



section h2{

text-align:center;

font-size:45px;

color:var(--green);

margin-bottom:40px;

}



.cream{

background:var(--cream);

}



.cream>p{

max-width:800px;

margin:auto;

text-align:center;

line-height:1.8;

}



/* =========================
 CARDS
========================= */


.card{

background:white;

max-width:850px;

margin:50px auto;

padding:50px;

border-radius:20px;

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

text-align:center;

}



.card strong{

display:block;

margin-top:30px;

font-size:22px;

color:var(--gold);

}



/* =========================
 PRODUCTS
========================= */


.products{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:30px;

margin-bottom:80px;

}



.product{

background:var(--cream);

border-radius:20px;

overflow:hidden;

box-shadow:0 8px 20px rgba(0,0,0,.1);

}



.product img{

width:100%;
aspect-ratio:1;

object-fit:cover;

transition:.5s;

}



.product:hover img{

transform:scale(1.05);

}



.product h3,
.product p{

padding:10px 20px;

}



.product h3{

color:var(--green);

}



/* =========================
 CERTIFICATIONS
========================= */


.dark-section{

background:var(--green);
color:white;

}



.dark-section h2{

color:white;

}



.cert-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:25px;

}



.cert{

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

padding:25px;

border-radius:15px;

}



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


.process-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:30px;

}



.process-card{

background:white;

padding:35px;

border-radius:20px;

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

}



.process-card span{

font-size:40px;

color:var(--gold);

}



/* =========================
 CONTACT
========================= */


.contact{

background:white;
text-align:center;

}



.contact-buttons a{

display:inline-block;

margin:15px;

padding:15px 30px;

background:var(--green);

color:white;

border-radius:40px;

}



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


footer{

background:#123c2d;

color:white;

padding:70px 8% 30px;

}



.footer-container{

max-width:1200px;

margin:auto;

display:grid;

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

gap:60px;

}



footer h2{

font-size:36px;
color:white;

}



footer h3{

color:var(--gold);

margin-bottom:20px;

}



.footer-brand p{

color:#ddd;

line-height:1.8;

}



.footer-links{

display:flex;
flex-direction:column;
gap:15px;

}



.footer-links a:hover{

color:var(--gold);

}



.footer-contact p{

margin-bottom:12px;

color:#ddd;

}



.footer-button{

display:inline-block;

margin-top:20px;

background:var(--gold);

color:var(--green)!important;

padding:14px 30px;

border-radius:40px;

font-weight:bold;

}



.footer-line{

height:1px;

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

margin:50px 0 25px;

}



.footer-bottom{

text-align:center;

color:#aaa;

font-size:14px;

}


/* =========================
   PARALLAX
========================= */

.parallax{

    position:relative;
    overflow:hidden;
    margin-top: -120px !important;
    height:500px;

    display:flex;
    justify-content:center;
    align-items:center;

}

/* Animated Background */

.parallax::before{

    content:"";

    position:absolute;
    inset:-8%;

    background-image:url("../images/logo.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    animation:parallaxMove 18s ease-in-out infinite alternate;

    z-index:0;

}

/* Dark Overlay */

.parallax-overlay{

    position:absolute;
    inset:0;

    background:rgba(22,77,59,.72);

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    padding:20px;

    z-index:2;

}

/* Optional logo inside */

.parallax-logo{

    width:180px;
    margin-bottom:30px;

    filter:drop-shadow(0 10px 30px rgba(0,0,0,.35));

}

/* Text */

.parallax h2{

    color:white;
    font-size:52px;
    margin-bottom:15px;

    text-shadow:0 5px 20px rgba(0,0,0,.35);

}

.parallax p{

    color:var(--gold);
    font-size:20px;
    letter-spacing:3px;

    text-shadow:0 3px 12px rgba(0,0,0,.35);

}

/* Background Animation */

@keyframes parallaxMove{

    0%{
        transform:scale(1) translateY(0) rotate(-1deg);
    }

    50%{
        transform:scale(1.08) translateY(-12px) rotate(0deg);
    }

    100%{
        transform:scale(1.15) translateY(12px) rotate(1deg);
    }

}

/* Mobile */

@media(max-width:768px){

    .parallax{

        height:350px;

    }

    .parallax::before{

        inset:-12%;

        animation:parallaxMoveMobile 16s ease-in-out infinite alternate;

    }

    .parallax-logo{

        width:120px;

    }

    .parallax h2{

        font-size:34px;

    }

    .parallax p{

        font-size:15px;
        letter-spacing:1px;

    }

}

/* Smaller movement on phones */

@keyframes parallaxMoveMobile{

    0%{
        transform:scale(1) translateY(0);
    }

    100%{
        transform:scale(1.08) translateY(8px);
    }

}



/* =========================
 MOBILE
========================= */


@media(max-width:768px){


.nav{

padding:15px 20px;

}


.logo{

font-size:22px;

}


.desktop-nav{

display:none;

}


.menu-button{

display:block;

}



#mobileMenu.open{

display:flex;

position:fixed;

top:65px;

left:0;

width:100vw;

height:auto;

overflow: hidden !important;

background:var(--green);

padding:30px;

flex-direction:column;

align-items:center;

gap:25px;

color: #d5a947 !important;

}


.hero{

min-height:650px;

}



.hero h1{

font-size:52px;

}



.hero h2{

font-size:18px;

line-height:1.5;

}



.hero-content p{

font-size:12px;

letter-spacing:2px;

}



.gold-btn,
.outline-btn{

display:block;

width:90%;

margin:15px auto;

}



section{

padding:70px 5%;

}



section h2{

font-size:34px;

}



.card{

padding:30px 20px;

}



.products{

grid-template-columns:1fr;

}



.footer-container{

grid-template-columns:1fr;

text-align:center;

}


footer h2{

font-size:30px;

}



/* =========================
   MOBILE CONTACT FIX
========================= */

.contact-buttons a{

    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;

}


@media(max-width:768px){

.contact-buttons{

    width:95%;
    padding:0 10px;

}


.contact-buttons a{

    display:flex;
    justify-content:center;
    align-items:center;

    width:100%;

    font-size:12px;
    font-weight: bold !important;

    padding:15px 18px;

    text-align:center;

}




}




}