/*==========================================
GOOGLE FONTS & VARIABLES
==========================================*/

:root {

    --primary: #1F4D3A;
    --secondary: #5E8C46;
    --accent: #B89A4A;

    --cream: #F8F5EE;
    --beige: #EEE7DA;

    --text: #202020;
    --light-text: #666;

    --white: #ffffff;

    --border: #ded8ca;

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

    --transition: .35s ease;

}

/* background */


body {
    margin: 0;
    min-height: 100vh;
    background: #f8f5ef;
    position: relative;
    overflow-x: hidden;
}

/* Decorative Leaf Background */
body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
}

/* Top Left & Bottom Right */
body::before {
    background:
        radial-gradient(circle at 8% 10%, rgba(67, 112, 52, 0.08) 0 55px, transparent 56px),
        radial-gradient(circle at 18% 18%, rgba(96, 138, 71, 0.07) 0 42px, transparent 43px),
        radial-gradient(circle at 92% 88%, rgba(67, 112, 52, 0.08) 0 55px, transparent 56px),
        radial-gradient(circle at 82% 80%, rgba(96, 138, 71, 0.07) 0 42px, transparent 43px);
}

/* Leaf Shapes */
body::after {
    background:
        radial-gradient(ellipse 35px 80px at 12% 12%, rgba(66, 110, 52, 0.06) 0%, rgba(66, 110, 52, 0.04) 60%, transparent 61%),
        radial-gradient(ellipse 30px 70px at 18% 18%, rgba(93, 145, 73, 0.05) 0%, transparent 60%),

        radial-gradient(ellipse 35px 80px at 88% 15%, rgba(66, 110, 52, 0.06) 0%, rgba(66, 110, 52, 0.04) 60%, transparent 61%),
        radial-gradient(ellipse 30px 70px at 82% 20%, rgba(93, 145, 73, 0.05) 0%, transparent 60%),

        radial-gradient(ellipse 35px 80px at 12% 88%, rgba(66, 110, 52, 0.06) 0%, rgba(66, 110, 52, 0.04) 60%, transparent 61%),
        radial-gradient(ellipse 30px 70px at 18% 82%, rgba(93, 145, 73, 0.05) 0%, transparent 60%),

        radial-gradient(ellipse 35px 80px at 88% 88%, rgba(66, 110, 52, 0.06) 0%, rgba(66, 110, 52, 0.04) 60%, transparent 61%),
        radial-gradient(ellipse 30px 70px at 82% 82%, rgba(93, 145, 73, 0.05) 0%, transparent 60%);
}

/*==========================================
RESET
==========================================*/

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

html {
    scroll-behavior: smooth;
}

/* Reusable arrow animation */
.eco-arrow {
    width: 24px;
    height: 24px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg);
    animation: ecoArrowBounce 1s infinite alternate;
}

/* Keyframes only for this arrow */
@keyframes ecoArrowBounce {
    from {
        transform: translateY(0) rotate(-45deg);
    }

    to {
        transform: translateY(10px) rotate(-45deg);
    }
}

body {

    font-family: 'Montserrat', sans-serif;

    background: var(--cream);

    color: var(--text);

    overflow-x: hidden;

    line-height: 1.7;

}

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

a {
    text-decoration: none;
}

button,
input {

    font-family: inherit;

    border: none;

    outline: none;

}

/*==========================================
LOADER
==========================================*/

#loader {

    position: fixed;

    inset: 0;

    background: var(--cream);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 9999;

    transition: .8s;

}

.loader-logo {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 15px;

}

.loader-logo i {

    font-size: 55px;

    color: var(--secondary);

}

.loader-logo h2 {

    font-family: 'Playfair Display', serif;

    color: var(--primary);

    letter-spacing: 2px;

}

/*==========================================
BACKGROUND
==========================================*/

.bg-circle {

    position: fixed;

    border-radius: 50%;

    filter: blur(90px);

    z-index: -2;

}

.bg1 {

    width: 380px;
    height: 380px;

    background: #8fb27f55;

    top: -100px;
    left: -100px;

}

.bg2 {

    width: 300px;
    height: 300px;

    background: #d7c48b55;

    bottom: -70px;
    right: -70px;

}

/*==========================================
FLOATING LEAVES
==========================================*/

.floating-leaf {

    position: fixed;
    border-radius: 20px;
    z-index: -1;

    opacity: .12;

    /* animation: floatLeaf 8s ease-in-out infinite; */

}

.leaf1 {

    width: 50%;
    height: 5 00px;
    top: 70px;

    left: 40px;

}

.leaf2 {

    width: 200px;

    right: 40px;

    bottom: 80px;

    animation-delay: 3s;

}

@keyframes floatLeaf {

    0% {

        transform: translateY(0px) rotate(0deg);

    }

    50% {

        transform: translateY(-20px) rotate(4deg);

    }

    100% {

        transform: translateY(0px) rotate(0deg);

    }

}

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

header {

    width: 100%;

    padding: 28px 8%;

}

.logo {

    display: flex;

    align-items: center;

    gap: 15px;

}

.logo-icon {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: linear-gradient(135deg, var(--secondary), var(--primary));

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 22px;

    box-shadow: var(--shadow);

}

.logo-text h2 {

    font-family: 'Playfair Display', serif;

    color: var(--primary);

    font-size: 20px;

}

.logo-text span {

    color: var(--light-text);

    font-size: 10px;

}

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

.hero {

    min-height: 75vh;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 40px;

    width: 90%;

    max-width: 1400px;

    margin: auto;
    /* padding-top: 10px; */

}

.hero-left {

    animation: fadeUp 1s ease;

}

.badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    background: #ffffff;

    padding: 10px 18px;

    border-radius: 50px;

    color: var(--primary);

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

    font-size: 14px;

    margin-bottom: 16px;

}

.badge i {

    color: var(--secondary);

}

.hero h1 {

    font-family: 'Playfair Display', serif;

    font-size: 72px;

    color: var(--primary);

    line-height: 1.05;

    margin-bottom: 25px;

}

.hero h1 span {

    color: var(--accent);

}

.hero p {

    max-width: 580px;

    color: var(--light-text);

    font-size: 18px;

    margin-bottom: 1px;

}

/*==========================================
COUNTDOWN
==========================================*/

.countdown {

    display: flex;

    gap: 18px;

    margin-bottom: 19px;

    flex-wrap: wrap;

}

.time-box {

    width: 100px;

    height: 100px;

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

    backdrop-filter: blur(10px);

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

    border-radius: 18px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    box-shadow: var(--shadow);

    transition: var(--transition);

}

.time-box:hover {

    transform: translateY(-8px);

}

.time-box h2 {

    font-size: 34px;

    color: var(--primary);

    margin-bottom: 5px;

}

.time-box span {

    font-size: 13px;

    color: var(--light-text);

    text-transform: uppercase;

    letter-spacing: 1px;

}

/*==========================================
SUBSCRIBE
==========================================*/

.subscribe-box {

    display: flex;

    background: #fff;

    border-radius: 60px;

    overflow: hidden;

    box-shadow: var(--shadow);

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

    max-width: 560px;

    margin-bottom: 18px;

}

.subscribe-box input {

    flex: 1;

    padding: 20px 25px;

    font-size: 16px;

    background: transparent;

}

.subscribe-box button {

    padding: 0 35px;

    background: linear-gradient(135deg, var(--secondary), var(--primary));

    color: #fff;

    font-weight: 600;

    cursor: pointer;

    transition: var(--transition);

}

.subscribe-box button:hover {

    background: linear-gradient(135deg, var(--primary), var(--secondary));

}

.hero-left small {

    color: var(--light-text);

}

/*==========================================
RIGHT SIDE IMAGE
==========================================*/

.hero-right {

    display: flex;

    justify-content: center;

    align-items: center;

}

.hero-image {

    width: 520px;

    border-radius: 35px;

    overflow: hidden;

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

    animation: floatImage 5s ease-in-out infinite;

}

.hero-image img {

    width: 100%;

    display: block;
    height: 700px;

}

@keyframes floatImage {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0);

    }

}

/*==========================================
FEATURES
==========================================*/

.features {

    width: 90%;

    max-width: 1300px;

    margin: 100px auto;

    display: grid;

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

    gap: 30px;

}

.feature-card {

    background: #fff;

    padding: 40px;

    border-radius: 25px;

    text-align: center;

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

    box-shadow: var(--shadow);

    transition: var(--transition);

}

.feature-card:hover {

    transform: translateY(-10px);

}

.feature-card i {

    font-size: 42px;

    color: var(--secondary);

    margin-bottom: 25px;

}

.feature-card h3 {

    color: var(--primary);

    margin-bottom: 15px;

    font-size: 24px;

}

.feature-card p {

    color: var(--light-text);

}

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

footer {

    padding: 70px 20px;

    text-align: center;

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

}

.footer-logo {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 12px;

    margin-bottom: 20px;

}

.footer-logo i {

    color: var(--secondary);

    font-size: 24px;

}

.footer-logo h3 {

    font-family: 'Playfair Display', serif;

    color: var(--primary);

}

footer p {

    color: var(--light-text);

}

.socials {

    margin: 30px 0;

    display: flex;

    justify-content: center;

    gap: 18px;

}

.socials a {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    background: #fff;

    color: var(--primary);

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

    transition: var(--transition);

}

.socials a:hover {

    background: var(--primary);

    color: #fff;

    transform: translateY(-5px);

}

.copyright {

    font-size: 14px;

}

/*==========================================
ANIMATIONS
==========================================*/

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/*==========================================
RESPONSIVE
==========================================*/

@media(max-width:1100px) {

    .hero {

        grid-template-columns: 1fr;

        text-align: center;

        gap: 60px;

    }

    .hero p {

        margin: auto auto 40px;

    }

    .badge {

        margin: auto auto 30px;

    }

    .subscribe-box {

        margin: auto auto 18px;

    }

    .countdown {

        justify-content: center;

    }

    .hero-image {

        width: 420px;

    }

    .features {

        grid-template-columns: 1fr;

    }

}

@media(max-width:768px) {

    .hero h1 {

        font-size: 48px;

    }

    .hero {

        width: 92%;

    }

    .logo {

        flex-direction: column;

        text-align: center;

    }

    .hero-image {

        width: 100%;

    }

    .subscribe-box {

        flex-direction: column;

        border-radius: 20px;

    }

    .subscribe-box input {

        text-align: center;

    }

    .subscribe-box button {

        padding: 18px;

    }

    .time-box {

        width: 85px;

        height: 85px;

    }

    .time-box h2 {

        font-size: 28px;

    }

    .feature-card {

        padding: 30px;

    }

}