:root {

    --primary: #007c83;
    --primary-dark: #005b61;

    --dark: #102d30;

    --text: #53676a;

    --light: #f3f8f8;

    --white: #ffffff;

    --border: #dfeaea;

}


* {
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--text);

    line-height: 1.7;

    background: var(--white);

}


h1,
h2,
h3 {

    color: var(--dark);

    font-weight: 700;

    line-height: 1.2;

}


h2 {

    font-size:
        clamp(
            2rem,
            4vw,
            3rem
        );

}


p {

    margin-bottom: 1rem;

}


a {

    text-decoration: none;

}



/* =====================================================
   NAVBAR
===================================================== */

.navbar {

    background:
        rgba(
            5,
            22,
            25,
            .94
        );

    backdrop-filter:
        blur(12px);

    padding:
        14px 0;

}


.navbar-brand {

    color: white;

    font-size: 1.25rem;

    letter-spacing: .5px;

}


.navbar-brand strong {

    color: #6bd6d9;

}


.nav-link {

    color:
        rgba(
            255,
            255,
            255,
            .85
        ) !important;

    margin-left: 18px;

}


.nav-link:hover {

    color: white !important;

}


.nav-button {

    padding:
        9px 20px;

}



/* =====================================================
   BUTTONS
===================================================== */

.btn {

    border-radius: 8px;

    font-weight: 700;

    padding:
        11px 22px;

}


.btn-primary {

    background:
        var(--primary);

    border-color:
        var(--primary);

}


.btn-primary:hover {

    background:
        var(--primary-dark);

    border-color:
        var(--primary-dark);

}



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

.hero {

    min-height: 750px;

    position: relative;

    display: flex;

    align-items: center;

    background-image:

        url(
            "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=2200&q=85"
        );

    background-size: cover;

    background-position: center;

}


.hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(3, 21, 24, .86),
            rgba(3, 21, 24, .58),
            rgba(3, 21, 24, .25)
        );

}


.hero-content {

    position: relative;

    z-index: 2;

    padding-top: 70px;

}


.eyebrow {

    display: inline-block;

    color:
        #75dadd;

    font-size:
        .78rem;

    font-weight:
        700;

    letter-spacing:
        2px;

    margin-bottom:
        18px;

}


.hero h1 {

    color:
        white;

    font-size:

        clamp(
            2.7rem,
            6vw,
            5rem
        );

    max-width:
        900px;

    margin-bottom:
        25px;

}


.hero-description {

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

    max-width:
        760px;

    font-size:
        1.18rem;

}


.hero-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        30px;

}


.hero-trust {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        25px;

    margin-top:
        35px;

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

    font-size:
        .9rem;

}


.hero-trust i {

    color:
        #73dadd;

    margin-right:
        5px;

}



/* =====================================================
   SECTION GENERAL
===================================================== */

.section-label {

    display:
        inline-block;

    color:
        var(--primary);

    font-size:
        .78rem;

    font-weight:
        700;

    letter-spacing:
        2px;

    margin-bottom:
        14px;

}


.section-heading {

    max-width:
        850px;

    margin:
        0 auto;

}


.section-heading p {

    font-size:
        1.08rem;

}



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

.intro-section {

    background:
        white;

}


.intro-section p {

    font-size:
        1.07rem;

}



/* =====================================================
   EXPERIENCES
===================================================== */

.experience-section {

    background:
        var(--light);

}


.experience-card {

    height:
        100%;

    background:
        white;

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

    border-radius:
        16px;

    padding:
        32px;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.experience-card:hover {

    transform:
        translateY(-6px);

    box-shadow:
        0 18px 45px
        rgba(
            0,
            0,
            0,
            .08
        );

}


.experience-icon {

    width:
        58px;

    height:
        58px;

    border-radius:
        13px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #e1f4f4;

    color:
        var(--primary);

    font-size:
        1.55rem;

    margin-bottom:
        22px;

}


.experience-card h3 {

    font-size:
        1.35rem;

    margin-bottom:
        14px;

}


.experience-card a {

    display:
        inline-block;

    margin-top:
        10px;

    color:
        var(--primary);

    font-weight:
        700;

}


.experience-card a:hover {

    color:
        var(--primary-dark);

}



/* =====================================================
   COUPLES
===================================================== */

.couples-section {

    background:
        white;

}


.couples-box {

    background:
        var(--light);

    padding:
        35px;

    border-radius:
        18px;

}


.couples-item {

    display:
        flex;

    gap:
        18px;

    padding:
        20px 0;

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

}


.couples-item:last-child {

    border-bottom:
        none;

}


.couples-item > i {

    font-size:
        1.7rem;

    color:
        var(--primary);

}


.couples-item h3 {

    font-size:
        1.1rem;

    margin-bottom:
        5px;

}


.couples-item p {

    margin:
        0;

}



/* =====================================================
   DESTINATION
===================================================== */

.destination-section {

    background:
        #edf6f6;

}


.destination-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        25px;

}


.destination-tags span {

    background:
        white;

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

    border-radius:
        50px;

    padding:
        8px 15px;

    color:
        var(--dark);

    font-size:
        .9rem;

    font-weight:
        600;

}



/* =====================================================
   WHY US
===================================================== */

.why-section {

    background:
        white;

}


.features-grid {

    display:
        grid;

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

    gap:
        18px;

}


.feature {

    display:
        flex;

    gap:
        15px;

    padding:
        24px;

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

    border-radius:
        13px;

}


.feature > i {

    color:
        var(--primary);

    font-size:
        1.7rem;

}


.feature h3 {

    font-size:
        1.05rem;

    margin-bottom:
        5px;

}


.feature p {

    margin:
        0;

    font-size:
        .9rem;

}



/* =====================================================
   INTERNAL LINKS
===================================================== */

.links-section {

    background:
        var(--light);

}


.link-card {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    background:
        white;

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

    border-radius:
        12px;

    padding:
        20px;

    color:
        var(--dark);

    font-weight:
        700;

    transition:
        all .2s ease;

}


.link-card:hover {

    transform:
        translateY(-3px);

    border-color:
        var(--primary);

    color:
        var(--primary);

}


.link-card i {

    color:
        var(--primary);

    font-size:
        1.4rem;

}



/* =====================================================
   FAQ
===================================================== */

.faq-section {

    background:
        white;

}


.accordion-item {

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

    margin-bottom:
        10px;

    border-radius:
        10px !important;

    overflow:
        hidden;

}


.accordion-button {

    color:
        var(--dark);

    font-weight:
        700;

}


.accordion-button:not(.collapsed) {

    background:
        #edf6f6;

    color:
        var(--primary);

    box-shadow:
        none;

}


.accordion-button:focus {

    box-shadow:
        none;

}



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

.cta-section {

    padding:
        90px 0;

    background:
        #e4f2f2;

}


.cta-box {

    max-width:
        850px;

    margin:
        auto;

}


.cta-box p {

    max-width:
        650px;

    margin:
        15px auto 0;

    font-size:
        1.08rem;

}


.cta-buttons {

    display:
        flex;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        30px;

}



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

.footer {

    background:
        var(--dark);

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

    padding:
        60px 0 25px;

}


.footer-brand {

    color:
        white;

    font-size:
        1.4rem;

}


.footer-brand strong {

    color:
        #73dadd;

}


.footer h3 {

    color:
        white;

    font-size:
        1rem;

    margin-bottom:
        18px;

}


.footer ul {

    padding:
        0;

    margin:
        0;

    list-style:
        none;

}


.footer li {

    margin-bottom:
        8px;

}


.footer a {

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

}


.footer a:hover {

    color:
        white;

}


.footer hr {

    border-color:
        rgba(
            255,
            255,
            255,
            .12
        );

    margin:
        40px 0 20px;

}


.footer-bottom {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    flex-wrap:
        wrap;

    font-size:
        .85rem;

}


.footer-note {

    margin-top:
        20px;

    font-size:
        .75rem;

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

}



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

@media (max-width: 991px) {

    .navbar {

        background:
            rgba(
                5,
                22,
                25,
                .98
            );

    }


    .nav-link {

        margin-left:
            0;

        padding:
            10px 0;

    }


    .hero {

        min-height:
            700px;

    }

}


@media (max-width: 767px) {

    .hero {

        min-height:
            720px;

    }


    .hero h1 {

        font-size:
            2.65rem;

    }


    .hero-description {

        font-size:
            1rem;

    }


    .hero-trust {

        flex-direction:
            column;

        gap:
            8px;

    }


    .features-grid {

        grid-template-columns:
            1fr;

    }


    .experience-card {

        padding:
            27px;

    }


    .footer-bottom {

        flex-direction:
            column;

        gap:
            8px;

    }

}