/* =========================================================
   VISIT CHAMOLI
   MAPS PAGE
   FULLY ISOLATED CSS
========================================================= */


/* =========================================================
   PAGE
========================================================= */

.chamoli-maps-page {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: #ffffff;
}


/* =========================================================
   COMMON WRAPPER
========================================================= */

.chamoli-maps-page .chamoli-maps-wrapper {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
}


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

.chamoli-maps-page .chamoli-maps-hero {
    position: relative;
    width: 100%;
    min-height: 410px;
    display: flex;
    align-items: center;
    overflow: hidden;
}


.chamoli-maps-page .chamoli-maps-hero-bg {
    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            90deg,
            rgba(4, 30, 50, 0.96) 0%,
            rgba(4, 30, 50, 0.84) 35%,
            rgba(4, 30, 50, 0.48) 65%,
            rgba(4, 30, 50, 0.10) 100%
        ),
        url("../../images/maps/maps-hero.jpg");

    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}


.chamoli-maps-page .chamoli-maps-hero-inner {
    position: relative;
    z-index: 2;

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

    margin: 0 auto;

    padding-left: 20px;
    padding-right: 20px;
}


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

.chamoli-maps-page .chamoli-maps-hero-content {
    max-width: 670px;
    padding-top: 80px;
    padding-bottom: 80px;
}


.chamoli-maps-page .chamoli-maps-kicker {
    display: block;

    margin-bottom: 13px;

    color: #d5ae38;

    font-size: 12px;
    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 2.5px;
}


.chamoli-maps-page .chamoli-maps-hero-content h1 {
    margin: 0 0 18px;

    color: #ffffff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 64px;
    line-height: 1.05;

    font-weight: 600;
}


.chamoli-maps-page .chamoli-maps-gold-line {
    display: block;

    width: 55px;
    height: 3px;

    margin-bottom: 20px;

    background: #d5ae38;
}


.chamoli-maps-page .chamoli-maps-hero-content p {
    max-width: 590px;

    margin: 0;

    color: rgba(255,255,255,.88);

    font-size: 16px;
    line-height: 1.75;
}


/* =========================================================
   MAP SECTION
========================================================= */

.chamoli-maps-page .chamoli-maps-section {
    width: 100%;

    padding-top: 90px;
    padding-bottom: 100px;

    background:
        linear-gradient(
            180deg,
            #f8faf9 0%,
            #f2f7f4 100%
        );
}


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

.chamoli-maps-page .chamoli-maps-heading {
    width: 100%;
    max-width: 760px;

    margin: 0 auto 55px;

    text-align: center;
}


.chamoli-maps-page .chamoli-maps-heading-kicker {
    display: block;

    margin-bottom: 10px;

    color: #527b3b;

    font-size: 11px;
    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 2px;
}


.chamoli-maps-page .chamoli-maps-heading h2 {
    margin: 0;

    color: #082f54;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 46px;
    line-height: 1.15;

    font-weight: 600;
}


.chamoli-maps-page .chamoli-maps-heading-line {
    display: block;

    width: 52px;
    height: 3px;

    margin: 19px auto;

    background: #d5ae38;
}


.chamoli-maps-page .chamoli-maps-heading p {
    margin: 0;

    color: #6b7b84;

    font-size: 15px;
    line-height: 1.75;
}


/* =========================================================
   IMPORTANT
   THREE MAPS IN ONE ROW
========================================================= */

.chamoli-maps-page .chamoli-maps-three-grid {

    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr)) !important;

    grid-template-rows: auto !important;

    gap: 25px !important;

    width: 100% !important;

    max-width: 1240px !important;

    margin: 0 auto !important;

    padding: 0 !important;

    align-items: stretch !important;
}


/* =========================================================
   MAP ITEM
========================================================= */

.chamoli-maps-page .chamoli-map-item {

    position: relative;

    display: flex !important;

    flex-direction: column !important;

    width: 100% !important;

    min-width: 0 !important;

    height: 100% !important;

    margin: 0 !important;

    padding: 0 !important;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e0e8e3;

    border-radius: 14px;

    box-shadow:
        0 10px 32px rgba(8,47,84,.07);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.chamoli-maps-page .chamoli-map-item:hover {
    transform: translateY(-7px);

    box-shadow:
        0 20px 45px rgba(8,47,84,.13);
}


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

.chamoli-maps-page .chamoli-map-image {

    position: relative;

    width: 100% !important;

    height: 270px !important;

    min-height: 270px !important;

    overflow: hidden;

    margin: 0 !important;

    padding: 0 !important;

    background: #dfe8e2;
}


.chamoli-maps-page .chamoli-map-image img {

    display: block !important;

    width: 100% !important;

    height: 100% !important;

    max-width: none !important;

    object-fit: cover !important;

    object-position: center !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    transition: transform .6s ease;
}


.chamoli-maps-page .chamoli-map-item:hover
.chamoli-map-image img {
    transform: scale(1.045);
}


/* =========================================================
   MAP IMAGE DARK GRADIENT
========================================================= */

.chamoli-maps-page .chamoli-map-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(4,29,49,.02) 30%,
            rgba(4,29,49,.60) 100%
        );

    pointer-events: none;
}


/* =========================================================
   NUMBER
========================================================= */

.chamoli-maps-page .chamoli-map-number {

    position: absolute;

    top: 17px;
    left: 17px;

    z-index: 3;

    width: 46px;
    height: 46px;

    display: flex;

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

    border-radius: 50%;

    color: #ffffff;

    background:
        rgba(5,36,61,.86);

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

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 17px;

    font-weight: 600;
}


/* =========================================================
   ICON
========================================================= */

.chamoli-maps-page .chamoli-map-icon {

    position: absolute;

    right: 17px;
    bottom: 17px;

    z-index: 3;

    width: 50px;
    height: 50px;

    display: flex;

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

    border-radius: 50%;

    background: #ffffff;

    color: #527b3b;

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

    font-size: 18px;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;
}


.chamoli-maps-page .chamoli-map-item:hover
.chamoli-map-icon {

    background: #527b3b;

    color: #ffffff;

    transform: rotate(5deg);
}


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

.chamoli-maps-page .chamoli-map-content {

    display: flex !important;

    flex-direction: column !important;

    flex: 1 !important;

    width: 100% !important;

    min-height: 255px;

    margin: 0 !important;

    padding: 25px 24px 24px !important;

    box-sizing: border-box !important;
}


/* =========================================================
   CATEGORY
========================================================= */

.chamoli-maps-page .chamoli-map-category {

    display: block;

    margin-bottom: 9px;

    color: #527b3b;

    font-size: 10px;
    line-height: 1.4;

    font-weight: 700;

    letter-spacing: 1.5px;
}


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

.chamoli-maps-page .chamoli-map-content h3 {

    margin:
        0 0 12px !important;

    padding: 0 !important;

    color: #082f54;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 22px;

    line-height: 1.3;

    font-weight: 600;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.chamoli-maps-page .chamoli-map-content p {

    flex: 1 !important;

    margin:
        0 0 21px !important;

    padding: 0 !important;

    color: #6b7b84;

    font-size: 13px;

    line-height: 1.7;
}


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

.chamoli-maps-page .chamoli-map-button {

    display: flex !important;

    align-items: center;

    justify-content: space-between;

    width: 100% !important;

    min-height: 45px;

    box-sizing: border-box;

    margin: 0 !important;

    padding: 11px 14px !important;

    border:
        1px solid #e0e8e3 !important;

    border-radius: 5px;

    background: #f7faf8;

    color: #082f54 !important;

    text-decoration: none !important;

    font-size: 11px;

    line-height: 1.3;

    font-weight: 700;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease;
}


.chamoli-maps-page .chamoli-map-button:hover {

    background: #527b3b;

    border-color: #527b3b !important;

    color: #ffffff !important;
}


.chamoli-maps-page .chamoli-map-button i {

    color: #527b3b;

    transition:
        transform .25s ease,
        color .25s ease;
}


.chamoli-maps-page .chamoli-map-button:hover i {

    color: #ffffff;

    transform: translateX(4px);
}


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

.chamoli-maps-page .chamoli-maps-cta {

    width: 100%;

    padding:
        60px 0;

    background:
        linear-gradient(
            135deg,
            #062a48 0%,
            #0b466b 58%,
            #365f42 100%
        );
}


/* =========================================================
   CTA INNER
========================================================= */

.chamoli-maps-page .chamoli-maps-cta-inner {

    display: flex;

    align-items: center;

    width: 100%;

    gap: 25px;
}


/* =========================================================
   CTA ICON
========================================================= */

.chamoli-maps-page .chamoli-maps-cta-icon {

    flex: 0 0 auto;

    width: 68px;
    height: 68px;

    display: flex;

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

    border-radius: 50%;

    color: #d5ae38;

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

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

    font-size: 24px;
}


/* =========================================================
   CTA TEXT
========================================================= */

.chamoli-maps-page .chamoli-maps-cta-text {

    flex: 1;

    min-width: 0;
}


.chamoli-maps-page .chamoli-maps-cta-text > span {

    display: block;

    margin-bottom: 6px;

    color: #d5ae38;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


.chamoli-maps-page .chamoli-maps-cta-text h2 {

    margin:
        0 0 7px !important;

    color: #ffffff;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 30px;

    line-height: 1.2;

    font-weight: 600;
}


.chamoli-maps-page .chamoli-maps-cta-text p {

    max-width: 680px;

    margin: 0 !important;

    color:
        rgba(255,255,255,.76);

    font-size: 14px;

    line-height: 1.7;
}


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

.chamoli-maps-page .chamoli-maps-cta-button {

    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    min-height: 46px;

    padding:
        12px 20px;

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

    border-radius: 5px;

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;
}


.chamoli-maps-page .chamoli-maps-cta-button i {

    color: #d5ae38;

    transition:
        transform .25s ease;
}


.chamoli-maps-page .chamoli-maps-cta-button:hover {

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

    border-color:
        rgba(255,255,255,.60);
}


.chamoli-maps-page .chamoli-maps-cta-button:hover i {

    transform:
        translateX(4px);
}


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

@media (max-width: 1050px) {

    .chamoli-maps-page .chamoli-maps-three-grid {

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

    }

}


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

@media (max-width: 767px) {

    .chamoli-maps-page .chamoli-maps-wrapper {

        padding-left: 16px;
        padding-right: 16px;
    }


    .chamoli-maps-page .chamoli-maps-hero {

        min-height: 350px;
    }


    .chamoli-maps-page .chamoli-maps-hero-inner {

        padding-left: 16px;
        padding-right: 16px;
    }


    .chamoli-maps-page .chamoli-maps-hero-content {

        padding-top: 65px;
        padding-bottom: 65px;
    }


    .chamoli-maps-page .chamoli-maps-hero-content h1 {

        font-size: 45px;
    }


    .chamoli-maps-page .chamoli-maps-section {

        padding-top: 65px;
        padding-bottom: 75px;
    }


    .chamoli-maps-page .chamoli-maps-heading {

        margin-bottom: 38px;
    }


    .chamoli-maps-page .chamoli-maps-heading h2 {

        font-size: 34px;
    }


    .chamoli-maps-page .chamoli-maps-three-grid {

        grid-template-columns:
            1fr !important;

        gap: 20px !important;
    }


    .chamoli-maps-page .chamoli-map-image {

        height: 260px !important;

        min-height: 260px !important;
    }


    .chamoli-maps-page .chamoli-map-content {

        min-height: 0;
    }


    .chamoli-maps-page .chamoli-maps-cta {

        padding:
            50px 0;
    }


    .chamoli-maps-page .chamoli-maps-cta-inner {

        flex-direction:
            column;

        align-items:
            flex-start;

        gap:
            22px;
    }


    .chamoli-maps-page .chamoli-maps-cta-text {

        width:
            100%;
    }


    .chamoli-maps-page .chamoli-maps-cta-button {

        width:
            100%;

        box-sizing:
            border-box;
    }

}


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

@media (max-width: 480px) {

    .chamoli-maps-page .chamoli-maps-hero-content h1 {

        font-size:
            39px;
    }


    .chamoli-maps-page .chamoli-map-image {

        height:
            230px !important;

        min-height:
            230px !important;
    }


    .chamoli-maps-page .chamoli-map-content h3 {

        font-size:
            21px;
    }


    .chamoli-maps-page .chamoli-maps-cta-text h2 {

        font-size:
            27px;
    }

}