/* =========================
           GLOBAL
        ========================= */

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: 'Lato', Arial, sans-serif;
            font-size: 15px;
            font-weight: 400;
            line-height: 1.65;
            color: #222;
            background: #fff;
            -webkit-font-smoothing: antialiased;
        }

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

        a {
            text-decoration: none;
        }


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

        .edu-container {
            width: 90%;
            max-width: 1180px;
            margin: 0 auto;
        }


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

        .edu-hero {
            position: relative;
            width: 100%;
            height: 480px;
            overflow: hidden;
        }

        .edu-hero img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .edu-hero-overlay {
            position: absolute;
            inset: 0;

            background:
                linear-gradient(
                    90deg,
                    rgba(0,0,0,.62),
                    rgba(0,0,0,.30),
                    rgba(0,0,0,.12)
                );
        }

        .edu-hero-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

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

            text-align: center;
            color: #fff;
        }

        .edu-hero-small {
            margin-bottom: 12px;

            font-size: 12px;
            font-weight: 400;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        .edu-hero-content h1 {
            margin: 0 0 18px;

            font-size: 43px;
            font-weight: 400;
            line-height: 1.2;
            letter-spacing: .5px;

            color: #fff;
        }

        .edu-hero-content p {
            max-width: 750px;
            margin: 0 auto 28px;

            font-size: 16px;
            font-weight: 400;
            line-height: 1.7;

            color: #fff;
        }


        /* =========================
           BUTTON
        ========================= */

        .edu-btn {
            display: inline-block;

            padding: 12px 27px;

            font-size: 12px;
            font-weight: 400;
            letter-spacing: 1px;
            text-transform: uppercase;

            color: #fff;
            background: #a4774d;

            border: 1px solid #a4774d;

            transition: .3s ease;
        }

        .edu-btn:hover {
            color: #8f633d;
            background: #fff;
            border-color: #fff;
        }


        /* =========================
           COMMON SECTION
        ========================= */

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

        .edu-light {
            background: #f8f6f3;
        }


        /* =========================
           SECTION HEADING
        ========================= */

        .edu-section-heading {
            max-width: 850px;
            margin: 0 auto 45px;
            text-align: center;
        }

        .edu-section-heading span {
            display: block;
            margin-bottom: 9px;

            font-size: 12px;
            font-weight: 400;
            letter-spacing: 2px;
            text-transform: uppercase;

            color: #a4774d;
        }

        .edu-section-heading h2 {
            position: relative;

            margin: 0 0 20px;
            padding-bottom: 18px;

            font-size: 32px;
            font-weight: 400;
            line-height: 1.3;
            letter-spacing: .4px;

            color: #333;
        }

        .edu-section-heading h2:after {
            content: "";

            position: absolute;
            left: 50%;
            bottom: 0;

            transform: translateX(-50%);

            width: 55px;
            height: 1px;

            background: #c59b6b;
        }

        .edu-section-heading p {
            max-width: 760px;
            margin: 0 auto;

            font-size: 15px;
            font-weight: 400;
            line-height: 1.7;

            color: #555;
        }


        /* =========================
           TWO COLUMN
        ========================= */

        .edu-two-column {
            display: grid;

            grid-template-columns: 1fr 1fr;

            gap: 55px;

            align-items: center;
        }

        .edu-image {
            overflow: hidden;
        }

        .edu-image img {
            width: 100%;
            height: 390px;
            object-fit: cover;
        }


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

        .edu-content-small {
            display: block;
            margin-bottom: 9px;

            font-size: 12px;
            font-weight: 400;
            letter-spacing: 2px;
            text-transform: uppercase;

            color: #a4774d;
        }

        .edu-content h2 {
            position: relative;

            margin: 0 0 20px;
            padding-bottom: 17px;

            font-size: 32px;
            font-weight: 400;
            line-height: 1.3;

            color: #333;
        }

        .edu-content h2:after {
            content: "";

            position: absolute;
            left: 0;
            bottom: 0;

            width: 50px;
            height: 1px;

            background: #c59b6b;
        }

        .edu-content p {
            margin: 0 0 15px;

            font-size: 15px;
            font-weight: 400;
            line-height: 1.7;

            color: #222;
        }


        /* =========================
           WHY CHAIL CARDS
        ========================= */

        .edu-cards {
            display: grid;

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

            gap: 22px;
        }

        .edu-card {
            background: #fff;

            border: 1px solid #e8e1d9;

            transition: .3s ease;
        }

        .edu-card:hover {
            transform: translateY(-4px);

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

        .edu-card img {
            width: 100%;
            height: 205px;
            object-fit: cover;
        }

        .edu-card-content {
            padding: 22px;
        }

        .edu-card h3 {
            margin: 0 0 9px;

            font-size: 21px;
            font-weight: 400;
            line-height: 1.4;

            color: #333;
        }

        .edu-card p {
            margin: 0;

            font-size: 14px;
            font-weight: 400;
            line-height: 1.7;

            color: #555;
        }


        /* =========================
           PLACES
        ========================= */

        .edu-place {
            display: flex;
            gap: 16px;

            padding: 14px 0;

            border-bottom: 1px solid #e5ddd4;
        }

        .edu-place:last-child {
            border-bottom: none;
        }

        .edu-place-number {
            flex: 0 0 34px;

            width: 34px;
            height: 34px;

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

            border: 1px solid #b18a61;

            font-size: 11px;
            font-weight: 400;

            color: #9b7048;
        }

        .edu-place h3 {
            margin: 0 0 4px;

            font-size: 17px;
            font-weight: 700;
            line-height: 1.4;

            color: #333;
        }

        .edu-place p {
            margin: 0;

            font-size: 14px;
            font-weight: 400;
            line-height: 1.65;

            color: #555;
        }


        /* =========================
           ACTIVITIES
        ========================= */

        .edu-activity-grid {
            display: grid;

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

            gap: 18px;
        }

        .edu-activity {
            padding: 25px 27px;

            background: #fff;

            border: 1px solid #e7dfd6;

            transition: .3s ease;
        }

        .edu-activity:hover {
            transform: translateY(-3px);

            box-shadow:
                0 7px 20px rgba(0,0,0,.06);
        }

        .edu-activity h3 {
            margin: 0 0 7px;

            font-size: 20px;
            font-weight: 400;
            line-height: 1.4;

            color: #333;
        }

        .edu-activity p {
            margin: 0;

            font-size: 14px;
            font-weight: 400;
            line-height: 1.7;

            color: #555;
        }


        /* ==================================================
           GALLERY
           4 IMAGES TOP + 4 IMAGES BOTTOM
        ================================================== */

        .edu-gallery-section {
            padding: 75px 0;

            background: #fff;
        }

        .edu-gallery-heading {
            max-width: 800px;

            margin: 0 auto 42px;

            text-align: center;
        }

        .edu-gallery-heading span {
            display: block;

            margin-bottom: 9px;

            font-size: 12px;
            font-weight: 400;

            letter-spacing: 2px;

            text-transform: uppercase;

            color: #a4774d;
        }

        .edu-gallery-heading h2 {
            position: relative;

            margin: 0 0 20px;

            padding-bottom: 18px;

            font-size: 32px;
            font-weight: 400;

            line-height: 1.3;

            color: #333;
        }

        .edu-gallery-heading h2:after {
            content: "";

            position: absolute;

            left: 50%;
            bottom: 0;

            transform: translateX(-50%);

            width: 55px;
            height: 1px;

            background: #c59b6b;
        }

        .edu-gallery-heading p {
            max-width: 700px;

            margin: 0 auto;

            font-size: 15px;
            font-weight: 400;

            line-height: 1.7;

            color: #555;
        }


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

        .edu-gallery-grid {

            display: grid;

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

            gap: 18px;

        }

        .edu-gallery-item {

            position: relative;

            width: 100%;
            height: 250px;

            overflow: hidden;

            background: #eee;

        }

        .edu-gallery-item img {

            width: 100%;
            height: 100%;

            object-fit: cover;

            transition:
                transform .5s ease;

        }

        .edu-gallery-item:after {

            content: "";

            position: absolute;

            inset: 0;

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

            transition: .4s ease;

        }

        .edu-gallery-item:hover img {

            transform: scale(1.07);

        }

        .edu-gallery-item:hover:after {

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

        }


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

        .edu-resort-image img {
            height: 410px;
        }


        /* =========================
           FINAL CTA
        ========================= */

        .edu-final-cta {

            padding: 80px 20px;

            text-align: center;

            background:
                linear-gradient(
                    rgba(0,0,0,.62),
                    rgba(0,0,0,.62)
                ),
                url('https://www.vistaresort.in/images/slider/slider4.jpg')
                center center / cover no-repeat;

        }

        .edu-final-cta h2 {

            margin: 0 0 15px;

            font-size: 36px;
            font-weight: 400;

            line-height: 1.3;

            color: #fff;
        }

        .edu-final-cta p {

            max-width: 760px;

            margin: 0 auto 27px;

            font-size: 15px;
            font-weight: 400;

            line-height: 1.7;

            color: #fff;
        }


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

        @media (max-width: 991px) {

            .edu-cards {
                grid-template-columns: repeat(2, 1fr);
            }

            .edu-gallery-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .edu-hero-content h1 {
                font-size: 38px;
            }

        }


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

        @media (max-width: 767px) {

            .edu-container {
                width: 90%;
            }

            .edu-section,
            .edu-gallery-section {
                padding: 55px 0;
            }

            .edu-hero {
                height: 143px;
            }

            .edu-hero-content h1 {
                font-size: 31px;
                line-height: 1.25;
            }

            .edu-hero-content p {
                font-size: 14px;
                line-height: 1.65;
            }

            .edu-two-column {
                grid-template-columns: 1fr;

                gap: 35px;
            }

            .edu-image img {
                height: 300px;
            }

            .edu-content h2 {
                font-size: 28px;
            }

            .edu-section-heading h2,
            .edu-gallery-heading h2 {
                font-size: 28px;
            }

            .edu-section-heading p,
            .edu-gallery-heading p {
                font-size: 14px;
            }

            .edu-content p {
                font-size: 14px;
            }

            .edu-cards {
                grid-template-columns: 1fr;
            }

            .edu-activity-grid {
                grid-template-columns: 1fr;
            }

            /* MOBILE GALLERY */

            .edu-gallery-grid {
                grid-template-columns: repeat(2, 1fr);

                gap: 10px;
            }

            .edu-gallery-item {
                height: 170px;
            }

            .edu-final-cta {
                padding: 60px 20px;
            }

            .edu-final-cta h2 {
                font-size: 29px;
            }

        }

    </style>