/* =========================================
   PRODUCT INNER  PAGE
========================================= */

:root {
      --green: #084523;
    --green-dark: #084523;
    --green-light: #28583D;

    --gold: #fcd305;
    --gold-light: #fcd305;

    --cream: #F8F5EC;
    --cream-dark: #EFE9D8;

    --text: #27382D;
    --muted: #27382D;

    --white: #FFFFFF;
}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    font-family: "DM Sans", sans-serif;

    color: var(--text);

    background: var(--cream);
}


.container {
    width: min(1280px, 92%);

    margin: auto;
}





/* =========================================
   INTRO SECTION
========================================= */

.intro-section {
    position: relative;

    width: 100%;

    padding: 70px 0;

    background: #fffef9;

    overflow: hidden;
}


/* =========================================
   CONTAINER
========================================= */

.intro-container {
    width: min(1400px, 92%);

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(420px, 1fr)
        minmax(520px, 1.15fr);

    align-items: center;

    gap: clamp(55px, 6vw, 100px);
}


/* =========================================
   IMAGE
========================================= */

.intro-image {
    width: 100%;
}

.intro-image-wrap {
    position: relative;

    width: 100%;

    aspect-ratio: 1.18 / 1;

    overflow: hidden;

    border-radius: 30px;

    background: #f1eee3;

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

.intro-image-wrap::after {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

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

    pointer-events: none;
}

.intro-image-wrap img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .8s cubic-bezier(.16,1,.3,1);
}

.intro-image-wrap:hover img {
    transform: scale(1.04);
}


/* =========================================
   CONTENT
========================================= */

.intro-content {
    max-width: 720px;
}


/* =========================================
   MAIN HEADING
========================================= */

.intro-heading {
       display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    color: #07533d;
    /* font-family: Georgia, "Times New Roman", serif; */
    font-size: clamp(30px, 3vw, 47px);
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -1px;
     font-family: "Poppins", sans-serif;
}

.intro-heading i {
    color: #4a9b28;

    font-size: .72em;
}

.intro-heading strong {

    font-weight: 600;
}


/* =========================================
   SUB HEADING
========================================= */

.intro-content h2 {
       margin: 0 0 20px;
    color: #07533d;
    /* font-family: Georgia, "Times New Roman", serif; */
    font-size: clamp(20px, 2vw, 24px);
    line-height: 1.2;
    font-weight: 600;
    letter-spacing: 0;
}


/* =========================================
   PARAGRAPHS
========================================= */

.intro-content p {
    margin: 0 0 19px;

    color: #315d50;

    font-size: 18px;

    line-height: 1.7;
}


/* =========================================
   LIST TITLE
========================================= */

.intro-content h3 {
    margin: 15px 0 17px;

    color: #07533d;

       font-family: "Poppins", sans-serif;
    font-size: 20px;

    font-weight: 600;
}


/* =========================================
   LIST GRID
========================================= */

.intro-list {
    display: grid;

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

    gap: 25px;
        margin: 0 0 15px;
}

.intro-list ul {
    list-style: none;

    padding: 0;
    margin: 0;
}

.intro-list li {
    position: relative;

    padding-left: 26px;

    margin-bottom: 13px;

    color: #315d50;

    font-size: 17px;

    line-height: 1.35;
}

.intro-list li::before {
    content: "\f058";

    position: absolute;

    left: 0;
    top: 1px;

    font-family:
        "Font Awesome 6 Free";

    font-weight: 900;

    color: #4d9b2d;

    font-size: 15px;
}


/* =========================================
   REVEAL ANIMATION
========================================= */

.reveal-left,
.reveal-right {

    opacity: 0;

    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.16,1,.3,1);
}

.reveal-left {
    transform: translateX(-60px);
}

.reveal-right {
    transform: translateX(60px);
}

.reveal-left.show,
.reveal-right.show {
    opacity: 1;

    transform: translateX(0);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1050px) {

    .intro-section {
        padding: 75px 0;
    }

    .intro-container {
        grid-template-columns:
            1fr 1fr;

        gap: 45px;
    }

    .intro-heading {
        font-size: 34px;
    }

    .intro-content p {
        font-size: 16px;
    }

    .intro-list {
        gap: 15px;
    }

    .intro-list li {
        font-size: 16px;
    }

}


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

@media (max-width: 768px) {

    .intro-image {
   order: 2;
}

    .intro-section {
        padding: 60px 0;
    }

    .intro-container {

        width: min(92%, 600px);

        grid-template-columns: 1fr;

        gap: 40px;
    }


    /* IMAGE */

    .intro-image-wrap {
        aspect-ratio: 1.15 / 1;

        border-radius: 22px;
    }


    /* CONTENT */

    .intro-content {
        max-width: 100%;
    }


    .intro-heading {
        font-size: 30px;

        margin-bottom: 20px;

        letter-spacing: -.5px;
    }

    .intro-content h2 {
        font-size: 25px;
    }

    .intro-content p {
        font-size: 17px;

        line-height: 1.65;
    }


    /* LIST */

    .intro-list {
        grid-template-columns: 1fr 1fr;

        gap: 8px 25px;
    }

    .intro-list li {
        font-size: 16px;

        margin-bottom: 11px;
    }


    /* MOBILE ANIMATION */

    .reveal-left {
        transform: translateY(40px);
    }

    .reveal-right {
        transform: translateY(40px);
    }

}


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

@media (max-width: 480px) {

    .intro-section {
        padding: 50px 0;
    }

    .intro-container {
        width: 90%;

        gap: 32px;
    }

    .intro-image-wrap {
        border-radius: 18px;
    }

    .intro-heading {
        font-size: 27px;

        align-items: flex-start;
    }

    .intro-heading i {
        margin-top: 3px;
    }

    .intro-content h2 {
        font-size: 23px;

        margin-bottom: 15px;
    }

    .intro-content p {
        font-size: 16px;
    }

    .intro-content h3 {
        font-size: 17px;
    }


    .intro-list {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .intro-list li {
        font-size: 16px;

        margin-bottom: 10px;
    }

}