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

body {
    background-color: #F8F7EF;
    font-family: 'Quicksand', sans-serif;
}

/* Sticky Navbar */
.NavBar {
    position: relative;
    top: 0;
    z-index: 999;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0 4rem;
    background-color: #F8F7EF;
    min-height: 9rem;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
    opacity: 0;
    transform: translateY(-10px);
    animation: fadeInDown 0.5s ease forwards;
}

/* Left section: About, Blog, Contact */
.nav-left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
}

/* Center: Logo */
.logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo img {
    height: 8rem;
    transition: transform 0.4s ease;
}

.logo img:hover {
    transform: scale(1.14);
}

/* Right section: Icons + Shop */
.nav-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
}

/* Nav Links */
.nav-left a {
    font-size: 1.00rem;
    color: #2B2B2B;
    text-decoration: none;
    transition: color 0.3s ease;
}

.nav-left a:hover {
    color: #6B8E23;
}

/* Social Icons */
.nav-right i {
    font-size: 1.75rem;
    color: #2B2B2B;
    transition: color 0.3s ease, transform 0.3s ease;
}

.nav-right i:hover {
    color: #6B8E23;
    transform: scale(1.1);
}

.nav-right a {
    text-decoration: none !important;
}

/* Shop Button */
.shop-btn {
    background-color: #6B8E23;
    color: white !important;
    padding: 0.5rem 1rem;
    border-radius: 0;
    font-weight: 400;
    font-family: "Quicksand", sans-serif;
    font-size: 1rem;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border-radius:0.50rem;
    display: inline-block;
    text-decoration: none;
}

.shop-btn:hover {
    background-color: #5E7B1E;
    transform: translateY(-2px);
    color: white !important;
}

/* Fade-in Animation */
@keyframes fadeInDown {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .NavBar {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        padding: 1rem;
        gap: 1rem;
    }

    .nav-left, .nav-right, .logo {
        justify-content: center;
        flex-direction: column;
        gap: 1rem;
    }

    .logo img {
        height: 70px;
    }

    .shop-btn {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }

    .nav-left a {
        font-size: 1rem;
    }

    .nav-right i {
        font-size: 1.5rem;
    }
}


.Home.grid-container{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(640px,1fr));
    grid-template-rows: repeat( auto-fit, minmax(250px, 1fr) );
    gap: 75px;
    background-color:  #F8F7EF;
}
.Microgreens > div > h1{
    font-family: 'Quicksand';
    font-weight: 500;
    font-size: 420%;
    color: #F8F7EF;
    text-align: center;
}

.Paragraph{
    width: 65%;
}

.Microgreens>div>p{
    font-family: "Quicksand";
    font-size: 1.75rem;
    color: #F8F7EF;
    text-align: center;
}

.tagline {
    font-family: "Quicksand";
    font-size: 2.5rem;
    color: #F8F7EF;
    text-align: center;
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}
.tagline.fade-out {
    opacity: 0;
}

/* Keyframes for Text Change */
@keyframes fadeText {
    0%, 20%   { content: "Pesticide Free"; }
    25%, 40%  { content: "Nutrient Rich"; }
    45%, 60%  { content: "Grown Sustainably"; }
    65%, 80%  { content: "Zero Chemicals"; }
    85%, 100% { content: "Pesticide Free"; }
}

/* Hero Section Container */
.hero-container {
    position: relative;
    height: 720px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: span 2!important;
}

/* Slideshow Background */
.hero-container::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    animation: slideShow 20s infinite ease-in-out;
    z-index: 0;
    opacity: 0.9;
}

/* Bring Microgreens Content Forward */
.Microgreens {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    gap: 5px;
    height: 70%;
}


.hero-container::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 0;
}


/* Slideshow Keyframes */
@keyframes slideShow {
    0%   { background-image: url('Background/image_1.jpg'); }
    25%  { background-image: url('Background/image_2.jpg'); }
    50%  { background-image: url('Background/image_3.jpg'); }
    75%  { background-image: url('Background/image_4.jpg'); }
    100% { background-image: url('Background/image_1.jpg'); }
}

.LocalMicrogreens {
    padding: 4rem 6rem;
    grid-column: span 2!important;
    background-color: #ECEBDF;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-evenly;
    align-content: center;
    gap:15px;
    transition: background-color 1s ease;
}

.LocalMicrogreens h1 {
    font-family: 'Quicksand';
    font-weight: 700;
    font-size: 2.5rem;
}

.LocalMicrogreens p {
    font-family: "Quicksand";
    font-size: 1.2rem;
    width: 80%;
}

.scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 1rem;
    width: 80vw;
    scrollbar-width: none;           /* Firefox */
    -ms-overflow-style: none;        /* IE */
}
.scroll-container::-webkit-scrollbar {
    display: none;                   /* Chrome/Safari/Edge */
}

.scroll-container img {
    width: 32.2%;
    height: 70vh;
    object-fit: cover;
    flex-shrink: 0;
    border-radius: 0.75rem;
}

.scroll-controls {
    display: flex;
    justify-content: flex-start;
    gap: 0rem;
}

.scroll-arrow {
    width: 5%;
    height: auto;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.scroll-arrow:hover {
    transform: scale(1.1);
}



.WhatMicrogreens2{
    align-content: center;
}
.collage{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr,1fr;
    gap: 0.25rem;
    align-items: flex-end;
}
.Image1{
    text-align: right;
}
.Image3{
    text-align: right;
}

.Image4{
    align-self: flex-start;
}

.Image1>img{
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
    width: 85%;
    height: 85%;
}
.Image2>img{
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    width: 65%;
    height: 65%;
}
.Image3>img{
    border-top-left-radius: 50%;
    border-bottom-right-radius: 50%;
    width: 75%;
    height: 75%;
}
.Image4>img{
    border-top-right-radius: 50%;
    border-bottom-left-radius: 50%;
    width: 50%;
    height: 50%;

}

/* Main section container */
.WhatMicrogreens1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* aligns text left nicely */
    padding: 4rem 6rem;
    gap: 1.75rem;
}

/* Heading */
.WhatMicrogreens1 h1 {
    font-family: 'Quicksand';
    font-weight: 700;
    font-size: 2.5rem;
    color: #2B2B2B;
    margin: 0;
}

/* Paragraph */
.WhatMicrogreens1 p {
    font-family: 'Quicksand', sans-serif;
    font-size: 1.2rem;
    color: #555;
    max-width: 750px;
    line-height: 1.6;
    margin: 0;
}

/* CTA Button - matches Shop Now style */
.WhatMicrogreens1 .cta-button {
    background-color: #6B8E23;
    color: white !important;
    padding: 0.85rem 2rem;
    font-family: "Quicksand", sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 1.5rem;
    border-radius: 0.75rem;
}

.WhatMicrogreens1 .cta-button:hover {
    background-color: #5E7B1E;
    transform: translateY(-2px);
    color: white !important;
}

@media (max-width: 768px) {
    .WhatMicrogreens1 {
        padding: 2rem;
        align-items: center;
        text-align: center;
    }

    .WhatMicrogreens1 h1,
    .WhatMicrogreens1 p {
        text-align: center;
        margin: 0;
    }
}

.TipsSection {
    grid-column: span 2!important;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.5rem 4rem;
    font-family: 'Quicksand', sans-serif;
    flex-wrap: wrap;
    gap: 3rem;
}

.TipsIntro {
    max-width: 40rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap:2rem;
}

.TipsIntro h1 {
    font-family: 'Quicksand';
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.4;
}

.highlight {
    color: #6B8E23;
}

.TipsIntro p {
    font-size: 1.1rem;
}

.read-more {
    border: none;
    font-family: "Quicksand";
    font-weight: 600;
    font-size: 1rem;
    padding: 0.75rem 2rem;
    cursor: pointer;
    background-color: #6B8E23;
    color: white !important;
    font-weight: 400;
    font-family: "Quicksand";
    transition: background-color 0.3s ease, transform 0.2s ease;
    border-radius:0.50rem;
    display: inline-block;
    text-decoration: none;
}

.read-more:hover {
    background-color: #5E7B1E;
    transform: translateY(-2px);
    color: white !important;
}

.BlogCards {
    display: flex;
    gap: 2rem;
    flex: 2;
    flex-wrap: nowrap;
    justify-content: center;
}

.card {
    max-width: 17rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background-color: transparent!important; /* Ensure no white box */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 0.5rem;
    border-color: transparent !important;
}

.card:hover {
    transform: scale(1.03);
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1); /* soft shadow */
}


.card img {
    width: 100%;
    height: 60vh;
    object-fit: cover;
    border-radius: 0.5rem;
    transition: transform 0.3s ease;
}

.card:hover img {
    transform: scale(1.02);
}
.card p {
    font-size: 1rem;
    text-align: center;
    font-family: 'Quicksand';
}

.icons_line{
    grid-column: span 2!important;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 1rem 7rem;
    gap:20px;
    background-color: #ECEBDF;
}
.icons_line>p{
    font-size: 2rem;
    text-align: center;
    font-family: 'Quicksand';
    font-weight: 700;
}
.icons_line>div{
    text-align: center;
    display: flex;
    justify-content: center;
    align-content: center;
    gap:1rem;
    flex-wrap: wrap;
}

.icons_line>div>div{
    align-items: center;
}
.icons_line>div>div>img{
    width:3rem;
    height:3rem;
    object-fit: cover;
}

.icons_line>div>div>p{
    font-size: 1.15rem;
    font-family: 'Quicksand';
    text-wrap: nowrap;
}


.copywrite{
    flex:0.5;
    text-align: center;
    position: relative;
    top: 60px;
}

footer {
    background-color: #F8F7EF;
    padding: 3rem 2rem;
    font-family: "Quicksand", sans-serif;
    color: #3E4735;
}

.Footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 2rem;
    
}

.footer-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.social-icons a {
    margin-right: 1rem;
    font-size: 1.5rem;
    color: #7F886B;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #198754; /* match navbar hover green */
}

.footer-logo {
    text-align: center;
}

.FooterImg {
    height: 8rem;
    transition: transform 0.4s ease;
}

.footer-links {
    display: flex;
    justify-content: space-around;
    gap: 2rem;
}

.footer-links a {
    text-decoration: none;
    color: #7F886B;
    font-weight: 500;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #198754;
}
/* ========== MOBILE RESPONSIVENESS ========== */
@media (max-width: 768px) {
    /* General Grid Fix */
    .Home.grid-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    /* Hero Section */
    .hero-container {
        height: 500px;
    }

    .Microgreens > div > h1 {
        font-size: 2.2rem;
        padding: 0 1rem;
    }

    .Microgreens>div>p {
        font-size: 1.1rem;
        padding: 0 1rem;
    }

    .tagline {
        font-size: 1.5rem;
    }

    /* What Are Microgreens */
    .WhatMicrogreens1 {
        padding: 2rem 1rem;
        align-items: center;
    }

    .WhatMicrogreens1 h1 {
        font-size: 1.75rem;
    }

    .WhatMicrogreens1 p {
        font-size: 1rem;
        max-width: 100%;
    }

    /* Image Collage Section */
    .collage {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        justify-items: center;
    }

    .collage div img {
        width: 70% !important;
        height: auto !important;
    }

    /* Local Microgreens */
    .LocalMicrogreens {
        padding: 2rem 1rem;
        align-items: center;
    }

    .LocalMicrogreens h1 {
        text-align: center;
        font-size: 1.75rem;
    }

    .LocalMicrogreens p {
        font-size: 1rem;
        width: 100%;
        text-align: center;
    }

    .scroll-container {
        width: 100%;
    }

    .scroll-container img {
        height: 40vh;
        width: 70%;
    }

    .scroll-arrow {
        width: 12%;
    }

    /* Tips Section */
    .TipsSection {
        flex-direction: column;
        padding: 2rem 1rem;
        align-items: center;
    }

    .TipsIntro {
        max-width: 100%;
        align-items: center;
        text-align: center;
    }

    .TipsIntro h1 {
        font-size: 2rem;
    }

    .TipsIntro p {
        font-size: 1rem;
    }

    .BlogCards {
        flex-direction: column;
        align-items: center;
    }

    .card {
        max-width: 90%;
    }

    .card img {
        height: 35vh;
    }

    /* Icons Line */
    .icons_line {
        padding: 2rem 1rem;
    }

    .icons_line > p {
        font-size: 1.5rem;
    }

    .icons_line > div {
        gap: 1rem;
    }

    .icons_line > div > div > img {
        width: 2.5rem;
        height: 2.5rem;
    }

    .icons_line > div > div > p {
        font-size: 1rem;
    }

    /* Footer */
    .Footer {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
        text-align: center;
    }

    .footer-links {
        flex-direction: column;
        gap: 1rem;
    }

    .footer-left {
        font-size: 0.85rem;
    }

    .FooterImg {
        height: 5rem;
    }
}
/* ========== TABLET / IPAD RESPONSIVENESS ========== */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Grid Layout */
    .Home.grid-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    /* Hero Section */
    .hero-container {
        height: 600px;
    }

    .Microgreens > div > h1 {
        font-size: 3rem;
        padding: 0 2rem;
        text-align: center;
    }

    .Microgreens > div > p {
        font-size: 1.3rem;
        padding: 0 2rem;
        text-align: center;
    }

    .tagline {
        font-size: 1.8rem;
    }

    /* What Are Microgreens */
    .WhatMicrogreens1 {
        padding: 3rem 2rem;
        align-items: center;
        text-align: center;
    }

    .WhatMicrogreens1 h1 {
        font-size: 2.25rem;
    }

    .WhatMicrogreens1 p {
        font-size: 1.1rem;
        max-width: 100%;
    }

    /* Image Collage Section */
    .collage {
        grid-template-columns: 1fr 1fr;
        justify-items: center;
    }

    .collage div img {
        width: 85% !important;
        height: auto !important;
    }

    /* Local Microgreens */
    .LocalMicrogreens {
        padding: 3rem 2rem;
        align-items: center;
    }

    .LocalMicrogreens h1 {
        font-size: 2.25rem;
        text-align: center;
    }

    .LocalMicrogreens p {
        font-size: 1.1rem;
        width: 100%;
        text-align: center;
    }

    .scroll-container img {
        height: 50vh;
        width: 60%;
    }

    .scroll-arrow {
        width: 8%;
    }

    /* Tips Section */
    .TipsSection {
        flex-direction: column;
        padding: 3rem 2rem;
        align-items: center;
    }

    .TipsIntro {
        max-width: 100%;
        align-items: center;
        text-align: center;
    }

    .TipsIntro h1 {
        font-size: 2.25rem;
    }

    .TipsIntro p {
        font-size: 1.1rem;
    }

    .BlogCards {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .card {
        max-width: 85%;
    }

    .card img {
        height: 40vh;
    }

    /* Icons Section */
    .icons_line {
        padding: 2rem 2rem;
    }

    .icons_line > p {
        font-size: 1.75rem;
    }

    .icons_line > div {
        justify-content: center;
        gap: 1rem;
    }

    .icons_line > div > div > img {
        width: 2.75rem;
        height: 2.75rem;
    }

    .icons_line > div > div > p {
        font-size: 1.1rem;
    }

    /* Footer */
    .Footer {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    .footer-links {
        flex-direction: row;
        gap: 2rem;
        flex-wrap: wrap;
    }

    .FooterImg {
        height: 6rem;
    }
}