.explore-page {
    --eg: #5f9100;
    --cream: #fffcec;
    --sage: #d4e3d1;
    color: #10110d;
    font-family: Montserrat, Arial, sans-serif
}

.explore-page .site-header {
    position: relative
}

.explore-page .nav-link.active {
    color: var(--eg) !important;
    font-weight: 700
}

.explore-hero {
    position: relative;
    height: 634px;
    background: url('../assets/explore-ha-giang/ex-1.png') center/cover no-repeat;
    color: #fff
}

.explore-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(26, 65, 8, .56), rgba(26, 65, 8, .04) 70%)
}

.explore-hero .container {
    position: relative;
    padding-top: 100px
}

.explore-hero p {
    margin: 0 0 2px;
    font-size: 24px;
    font-weight: 500;
}

.explore-hero h1 {
    font-size: 48px;
    font-weight: 500;
    text-transform: uppercase
}

.explore-hero h1 span {
    color: #ffe900;
    font-weight: 700
}

.explore-hero .hero-copy {
    max-width: 520px;
    margin: 0 0 48px;
    font-size: 16px;
    font-weight: 500;
    /*line-height: 1.45*/
}

.explore-hero .grt-btn {
    min-width: 260px;
    margin-right: 28px;
    font-size: 24px;
    font-weight: 600;
    padding: 22px 50px;
}

.hero-outline, .cta-outline {
    border-color: #fff;
    color: #fff
}

.highland-intro {
    padding: 44px 0 58px
}

.highland-intro p:first-child {
    margin: 0;
    font-size: 24px
}

.highland-intro h2 {
    margin: 0px 0 8px;
    font-size: 48px;
    font-weight: 500
}

.highland-intro p:not(:first-child) {
    margin: 8px 0;
    font-size: 16px;
    font-weight: 500;
}

.emotion-journey {
    padding: 40px 0 72px;
    background: var(--eg);
    color: #fff
}

.emotion-journey .eyebrow {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    text-transform: uppercase
}

.emotion-journey h2 {
    margin: 5px 0 36px;
    font-size: 48px;
    font-weight: 700
}

.emotion-layout {
    display: grid;
    grid-template-columns:365px 1fr;
    min-height: 708px
}

.emotion-tabs {
    display: grid;
    grid-template-rows:repeat(4, 1fr);
    border-left: 1px solid rgba(255, 255, 255, 1);
    border-top: 1px solid rgba(255, 255, 255, 1)
}

.emotion-tabs button {
    padding: 0 65px;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 1);
    background: transparent;
    color: #fff;
    font: 24px Montserrat;
    text-align: left
}

.emotion-tabs button.active {
    background: #ffe900;
    color: #111
}
.emotion-image .tab {
    display: none;
}
.emotion-image .show {
    display: block;
}
.emotion-image {
    position: relative;
    overflow: hidden
}

.emotion-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.emotion-image:after {
    content: "";
    position: absolute;
    inset: 35% 0 0;
    background: linear-gradient(transparent, rgba(16, 47, 3, .72))
}

.emotion-image > div {
    position: absolute;
    z-index: 2;
    left: 38px;
    right: 34px;
    bottom: 35px
}

.emotion-image small {
    font-size: 20px;
    text-transform: uppercase
}

.emotion-image h3 {
    margin: 0 0 5px 0;
    font-size: 48px;
    line-height: 1.05;
    font-weight: 700
}

.emotion-image p {
    max-width: 420px;
    font-size: 16px;
    margin-right: 15px;
}

.emotion-image span {
    float: right;
    font-size: 16px;
    text-transform: uppercase;
    padding: 13px 14px;
    border: 1px solid #000;
    white-space: nowrap;
}

.human-story {
    display: grid;
    grid-template-columns:41% 59%;
    min-height: 696px;
    padding-top: 35px;
}

.human-photo {
    overflow: hidden;
    border-radius: 0 170px 0 0
}

.human-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.human-story-copy {
    padding: 52px 110px 40px 28px
}

.human-story-copy > p:first-child {
    font-size: 24px;
    text-transform: capitalize;
    margin: 0 0 10px 0;
}

.human-story-copy h2 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 15px;
}

.human-story-copy h2 span {
    color: var(--eg)
}

.human-story-copy > p:not(:first-child) {
    margin-top: 28px;
    font-size: 24px;
    line-height: 27px;
}

.human-story-copy strong {
    display: block;
    margin: 22px 0 30px 0;
    color: var(--eg);
    font-size: 24px;
    font-weight: 600;
}

.story-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 15px
}

.story-tags span {
    padding: 6px 10px;
    border: 2px solid var(--eg);
    background: #EAFBC4;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 2px;
}

.human-story-copy > a {
    display: block;
    margin-top: 30px;
    color: var(--eg);
    font-size: 24px;
    font-weight: 700
}

.landscape-stories {
    padding: 45px 0 58px
}

.landscape-stories > div > p {
    margin: 0;
    font-size: 24px
}

.landscape-stories h2 {
    margin: 4px 0 26px;
    font-size: 48px;
    font-weight: 500
}

.landscape-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 24px
}

.landscape-grid article {
    position: relative;
    height: 344px;
    overflow: hidden
}

.landscape-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.landscape-grid article:after {
    content: "";
    position: absolute;
    inset: 32% 0 0;
    background: linear-gradient(transparent, rgba(21, 47, 8, .82))
}

.landscape-grid article > div {
    position: absolute;
    z-index: 2;
    left: 14px;
    right: 14px;
    bottom: 26px;
    color: #fff;
}

.landscape-grid small {
    font-size: 16px;
    font-style: italic;
    line-height: 32px;
}

.landscape-grid h3 {
    margin: 0px 0 10px 0;
    font-size: 24px;
    font-weight: 500;
    text-transform: uppercase
}

.landscape-grid p {
    margin: 0;
    font-size: 16px;
}

.season-section {
    padding: 42px 0;
    background: var(--cream)
}

.season-heading {
    text-align: right
}

.season-heading p {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
}

.season-heading h2 {
    font-size: 48px;
    font-weight: 600;
    margin: 0;
}

.season-heading h2 span {
    color: var(--eg)
}

.season-heading small {
    font-size: 16px
}

.season-content {
    display: grid;
    grid-template-columns:40% 60%;
    align-items: center;
    margin-top: 28px
}

.season-content ol {
    margin: 0;
    padding: 0;
    list-style: none
}

.season-content li {
    display: grid;
    align-items: center;
    grid-template-columns:90px 1fr;
    padding: 13px 0;
    border-bottom: 1px solid #ddd
}

.season-content li b {
    font-size: 12px;
    font-weight: 400;
}

.season-content li span {
    color: var(--eg);
    font-size: 20px;
    font-weight: 600;
}

.season-content article {
    padding: 45px 65px;
    background: var(--eg);
    border-radius: 0 0 70px 0;
    color: #fff
}

.season-bar {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    height: 54px
}

.season-bar i:nth-child(1) {
    background: #E4B7C4
}

.season-bar i:nth-child(2) {
    background: #F2DCA8
}

.season-bar i:nth-child(3) {
    background: #C5D6C4
}

.season-content article > p {
    margin: 16px 0 2px;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase
}

.season-content article h3 {
    font-size: 48px;
    font-weight: 400;
    text-transform: uppercase
}

.season-content article > p:nth-of-type(2) {
    margin: 12px 0 24px 0;
    padding-bottom: 30px;
    font-size: 16px;
    font-weight: 400;
    text-transform: none;
    border-bottom: 1px solid #fff;
}

.season-content article small {
    font-size: 13px
}

.geology {
    padding: 170px 0;
    background: url('../assets/explore-ha-giang/ex-10.png') center/cover no-repeat;
    color: #fff
}

.geology .container > p:first-child {
    font-size: 24px;
    font-weight: 500;
    margin: 0 0 3px 0;
}

.geology h2 {
    font-size: 48px;
    font-weight: 600;
}

.geology h2 span {
    color: #ffe900
}

.geology .container > p:nth-of-type(2) {
    max-width: 620px;
    font-size: 16px;
    line-height: 1.45
}

.geology a {
    display: inline-block;
    margin-top: 30px;
    padding: 19px;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 24px;
    text-transform: uppercase;
    line-height: 1.25;
    font-weight: 600;
    border-left: 1px solid #FFE900;
}

.geology a small {
    display: block;
    margin-top: 4px;
    font-size: 16px;
    text-transform: none;
    font-weight: 400;
}

.certainty {
    padding: 34px 0 45px;
    background: var(--sage)
}

.certainty header {
    text-align: center
}

.certainty header p {
    margin: 0;
    font-size: 24px
}

.certainty h2 {
    color: var(--eg);
    font-size: 48px;
    font-weight: 600;
}

.certainty-grid {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 30px;
    margin-top: 32px
}
.certainty-grid article{
    display: grid;
    grid-template-columns: 177px 1fr;
    gap: 15px;
    border-bottom: 1px solid #bbb;
}
.certainty-grid h3 {
    padding-bottom: 10px;
    line-height: 20px;
    color: var(--eg);
    font-size: 16px;
    font-weight: 600;
}

.certainty-grid p {
    font-size: 16px;
}

.explore-cta {
    padding: 48px 0 36px 0;
    background: url('../assets/explore-ha-giang/ex-11.png') center/cover no-repeat;
    color: #fff
}

.explore-cta p {
    margin: 0 0 4px;
    font-size: 24px
}

.explore-cta h2 {
    font-size: 48px;
    font-weight: 600;
}

.explore-cta > div > p:nth-of-type(2) {
    margin: 18px 0 35px;
    font-size: 16px;
}

.explore-cta .grt-btn {
    margin-right: 60px;
    font-size: 20px;
    font-weight: 600;
    padding: 20px;
}
.explore-cta .grt-btn + .grt-btn{
    margin-right: 0;
}

@media (max-width: 991.98px) {
    .explore-page .site-header {
        position: fixed
    }

    .explore-hero {
        padding-top: 64px
    }

    .emotion-layout {
        grid-template-columns:250px 1fr
    }

    .human-story {
        grid-template-columns:1fr
    }

    .human-photo {
        height: 560px
    }

    .human-story-copy {
        padding: 45px 30px
    }

    .season-content {
        grid-template-columns:1fr;
        gap: 25px
    }

    .certainty-grid {
        grid-template-columns:1fr 1fr
    }

    .grt-container {
        padding-left: 24px;
        padding-right: 24px
    }
}

@media (max-width: 575.98px) {
    .explore-hero {
        height: 640px
    }

    .explore-hero .container {
        padding-top: 50px
    }

    .explore-hero h1 {
        font-size: 37px
    }

    .explore-hero .grt-btn {
        width: 100%;
        margin: 8px 0;
        padding: 12px 20px;
    }

    .highland-intro h2, .emotion-journey h2, .human-story-copy h2, .landscape-stories h2, .season-heading h2, .geology h2, .certainty h2, .explore-cta h2, .season-content article h3 {
        font-size: 32px
    }

    .emotion-layout {
        grid-template-columns:1fr;
        min-height: auto;
    }

    .emotion-tabs {
        grid-auto-flow: column;
        grid-auto-columns: minmax(280px, 1fr);
        gap: 0px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        grid-template-rows:auto
    }

    .emotion-tabs button {
        /*min-height: 70px;*/
        padding: 16px;
        white-space: nowrap;
        scroll-snap-align: start;
        border-right: 1px solid rgba(255, 255, 255, 1)
    }
    .emotion-tabs button:last-child{

        border-right: none;
    }

    .emotion-image {
        height: 510px
    }

    .emotion-image h3 {
        font-size: 29px
    }

    .human-photo {
        height: 480px
    }

    .landscape-grid {
        grid-template-columns:1fr
    }

    .story-tags span{
        margin: 0;
    }
    .season-heading {
        text-align: left
    }

    .season-content article {
        padding: 28px 22px
    }

    .certainty-grid {
        grid-template-columns:1fr
    }

    .geology {
        height: 620px;
        padding: 75px 0
    }
    .certainty-grid article{
        grid-template-columns: auto;
        gap: 0;
    }

    .explore-cta {
        height: auto;
        min-height: 420px
    }

    .explore-cta .grt-btn {
        width: 100%;
        margin: 7px 0
    }
}