@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Playfair+Display:wght@600;700&display=swap");
body {
    font-family: "Montserrat", Arial, sans-serif;
}

h1,
h2,
h3 {
    font-family: "Playfair Display", Georgia, serif;
}

nav,
button,
.hero-button,
.footer-button {
    font-family: "Montserrat", Arial, sans-serif;
}


* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    background-color: #ffffff;
    color: #252525;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

h1,
h2,
h3,
p {
    overflow-wrap: normal;
    word-break: normal;
}


/* ==================================================
   2. HEADER AND NAVIGATION
   ================================================== */

.site-header {
    width: 100%;
    min-height: 120px;
    padding: 18px 6%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;

    background-color: #202945;
    color: white;
}

.site-logo,
.site-header .logo {
    flex-shrink: 0;
}

.site-logo img,
.site-header .logo img {
    display: block;
    width: 155px;
    height: auto;
}

.navigation,
.site-header .nav-links {
    margin-left: auto;

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 70px;

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

.navigation-link,
.site-header .nav-link {
    color: white;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    white-space: nowrap;
}

.navigation-link:hover,
.navigation-link:focus,
.site-header .nav-link:hover,
.site-header .nav-link:focus {
    color: #f1c40f;
}


/* ==================================================
   3. HOME PAGE HERO
   ================================================== */

.hero {
    width: 100%;
    min-height: 500px;
    padding: 70px 7%;

    position: relative;

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

    background-image: url("../images/HOME.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-top: 10px solid white;
    border-bottom: 10px solid white;

    color: white;
    overflow: hidden;
}

.hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background: linear-gradient(
        to right,
        rgba(15, 25, 48, 0.92) 0%,
        rgba(15, 25, 48, 0.68) 32%,
        rgba(15, 25, 48, 0) 68%
    );
}

.hero-content {
    width: 46%;
    max-width: 600px;

    position: relative;
    z-index: 1;
}

.hero h1 {
    margin: 0 0 18px;

    color: white;

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

    text-shadow: 0 3px 7px rgba(0, 0, 0, 0.7);
}

.hero p {
    margin: 0 0 25px;

    color: white;
    font-size: 17px;

    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

.hero-button {
    display: inline-block;
    padding: 13px 25px;

    border: 2px solid #f1c40f;
    background-color: #f1c40f;
    color: #202945;

    text-decoration: none;
    font-weight: bold;
}

.hero-button:hover,
.hero-button:focus {
    background-color: #202945;
    color: white;
}


/* ==================================================
   4. HOME PAGE CONTENT
   ================================================== */

.home-intro,
.about-section {
    width: 100%;
    padding: 65px 8%;

    background-color: #ffffff;
    text-align: center;
}

.intro-text,
.about-content {
    max-width: 1000px;
    margin: 0 auto;
}

.home-intro h2,
.about-section h2 {
    margin: 0 0 20px;

    color: #202945;
    font-size: 32px;
}

.home-intro p,
.about-section p {
    max-width: 900px;
    margin: 0 auto;

    color: #555555;
    font-size: 16px;
    line-height: 1.8;
}

/* CENTRE THE SECTION DIRECTLY AFTER THE HOME HERO */

.hero + section {
    width: 100% !important;
    padding: 60px 8% !important;
    text-align: center !important;
}

.hero + section h2 {
    width: 100% !important;
    margin: 0 auto 20px !important;
    text-align: center !important;
}

.hero + section p {
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    text-align: center !important;
    line-height: 1.8 !important;
}


/* ---------- WHY CHOOSE US ---------- */

.why-choose,
.why-section {
    width: 100%;
    padding: 65px 7%;

    background-color: #fafafa;
    text-align: center;
}

.why-choose h2,
.why-section h2 {
    margin: 0 0 35px;

    color: #202945;
    font-size: 32px;
}

.why-grid,
.benefits-grid {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 35px;
}

.why-card,
.benefit-card {
    padding: 30px 25px;

    border-top: 4px solid #d4af37;
    background-color: #ffffff;

    text-align: center;
}

.why-card h3,
.benefit-card h3 {
    margin: 0 0 15px;

    color: #202945;
    font-size: 18px;
}

.why-card p,
.benefit-card p {
    margin: 0;

    color: #555555;
    line-height: 1.7;
}


/* ==================================================
   5. SERVICES PAGE HERO
   ================================================== */

.services-hero {
    width: 100%;
    min-height: 420px;
    padding: 70px 7%;

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

    background-image:
        linear-gradient(
            to right,
            rgba(20, 30, 55, 0.88) 0%,
            rgba(20, 30, 55, 0.62) 35%,
            rgba(20, 30, 55, 0) 70%
        ),
        url("../images/AdobeStock_991079985.jpg");

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

    border-top: 10px solid white;
    border-bottom: 10px solid white;

    color: white;
}

.services-hero-content {
    width: 46%;
    max-width: 600px;
    margin: 0;

    text-align: left;
}

.services-hero h1 {
    margin: 0 0 15px;

    color: white;

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

    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.services-hero p {
    margin: 0;

    color: white;
    font-size: 17px;
    line-height: 1.6;

    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}


/* ==================================================
   6. SERVICES CONTENT AND TABLES
   ================================================== */

.services-section,
.membership-section {
    width: 100%;
    padding: 60px 8%;

    background-color: #ffffff;
}

.membership-section {
    background-color: #fafafa;
}

.services-section h2,
.membership-section h2 {
    margin: 0 0 15px;

    color: #202945;
    font-size: 28px;
}

.services-section > p,
.membership-section > p {
    margin: 0 0 25px;

    color: #555555;
}

.services-table {
    width: 100%;
    max-width: 1100px;
    margin: 25px auto 0;

    border-collapse: collapse;
    background-color: white;
}

.services-table th,
.services-table td {
    padding: 15px 18px;

    border: 1px solid #d1d1d1;

    text-align: left;
    vertical-align: top;
}

.services-table th {
    background-color: #304b82;
    color: white;

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

.services-table tr:nth-child(even) {
    background-color: #f2f4f8;
}

.membership-table th {
    background-color: #274a96;
}


/* ==================================================
   7. SERVICES IMAGE GALLERY
   ================================================== */

.travel-gallery {
    width: 100%;
    padding: 60px 6%;

    background-color: #ffffff;
    text-align: center;
}

.travel-gallery h2 {
    margin: 0 0 10px;

    color: #202945;
    font-size: 28px;
}

.travel-gallery > p {
    margin: 0 0 30px;

    color: #555555;
}

.gallery-grid {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.gallery-item,
.travel-card {
    margin: 0;
}

.gallery-item img,
.travel-card img {
    display: block;
    width: 100%;
    height: 230px;

    object-fit: cover;
}

.gallery-item figcaption,
.travel-card h3 {
    margin: 10px 0 0;

    color: #202945;
    font-size: 17px;
    font-weight: bold;
}


/* ==================================================
   8. CONTACT PAGE HERO
   ================================================== */

.contact-hero {
    width: 100%;
    min-height: 420px;
    padding: 70px 7%;

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

    background-image:
        linear-gradient(
            to right,
            rgba(20, 30, 55, 0.88) 0%,
            rgba(20, 30, 55, 0.62) 35%,
            rgba(20, 30, 55, 0) 70%
        ),
        url("../images/AdobeStock_1087353328.jpg");

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

    border-top: 10px solid white;
    border-bottom: 10px solid white;

    color: white;
}

.contact-hero-content {
    width: 46%;
    max-width: 600px;
    margin: 0;

    text-align: left;
}

.contact-hero h1 {
    margin: 0 0 15px;

    color: white;

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

    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7);
}

.contact-hero p {
    margin: 0;

    color: white;
    font-size: 17px;
    line-height: 1.6;

    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}


/* ==================================================
   9. CONTACT DETAILS AND FORM
   ================================================== */

.contact-section {
    width: 100%;
    padding: 70px 7%;

    background-color: #ffffff;
}

.contact-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 80px;
    align-items: start;
}

.contact-details,
.contact-form-container {
    width: 100%;
    min-width: 0;
}

.contact-details h2,
.contact-form-container h2 {
    margin: 0 0 20px;

    color: #202945;
    font-size: 26px;
    line-height: 1.3;
}

.contact-details > p {
    margin: 0 0 35px;

    color: #555555;
    line-height: 1.7;
}

.contact-item {
    margin-bottom: 25px;
}

.contact-item h3 {
    margin: 0 0 7px;

    color: #202945;
    font-size: 16px;
}

.contact-item p {
    margin: 0;

    color: #555555;
    line-height: 1.7;
}

.contact-item a {
    color: #555555;
    text-decoration: none;
}

.contact-item a:hover,
.contact-item a:focus {
    color: #c89b2c;
    text-decoration: underline;
}


/* ---------- CONTACT FORM ---------- */

.contact-form-container {
    padding-top: 22px;
    border-top: 4px solid #c89b2c;
}

.contact-form {
    width: 100%;
}

.form-group {
    width: 100%;
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;

    color: #202945;
    font-weight: bold;
}

.form-group input,
.form-group textarea {
    display: block;

    width: 100%;
    padding: 12px;

    border: 1px solid #bbbbbb;
    border-radius: 0;

    background-color: white;
    color: #222222;

    font-family: inherit;
    font-size: 16px;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #c89b2c;
    outline: 2px solid rgba(200, 155, 44, 0.25);
}

.form-group textarea {
    min-height: 170px;
    resize: vertical;
}

.submit-button {
    display: inline-block;
    padding: 13px 28px;

    border: 2px solid #d4af37;
    background-color: #202945;
    color: white;

    font-family: inherit;
    font-size: 14px;
    font-weight: bold;

    cursor: pointer;
}

.submit-button:hover,
.submit-button:focus {
    background-color: #d4af37;
    color: #202945;
}


/* ==================================================
   10. FOOTER
   ================================================== */

.site-footer {
    width: 100%;
    margin: 0;

    background-color: #121f4a;
    color: white;
}


/* ---------- LIGHTER BLUE JOIN-CLUB BANNER ---------- */

.site-footer .footer-cta {
    width: 100%;
    padding: 25px 7%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    background-color: #274a96;
    color: white;

    border-top: 1px solid rgba(255, 255, 255, 0.4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.site-footer .footer-cta-text h2 {
    margin: 0 0 8px;

    color: white;
    font-size: 22px;
}

.site-footer .footer-cta-text p {
    margin: 0;

    color: white;
    font-size: 15px;
}

.site-footer .footer-button {
    display: inline-block;
    flex-shrink: 0;

    padding: 13px 35px;

    border: 2px solid #d4af37;
    background-color: #202945;
    color: white;

    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
}

.site-footer .footer-button:hover,
.site-footer .footer-button:focus {
    background-color: #d4af37;
    color: #121f4a;
}


/* ---------- DARK NAVY MAIN FOOTER ---------- */

.site-footer .footer-main {
    width: 100%;
    padding: 45px 7%;

    display: grid;
    grid-template-columns: 1.1fr 1fr 1.3fr 1fr;
    gap: 55px;
    align-items: start;

    background-color: #121f4a;
    color: white;
}

.site-footer .footer-brand {
    display: block;
}

.site-footer .footer-brand img {
    display: block;
    width: 155px;
    max-width: 100%;
    height: auto;
}

.site-footer .footer-column {
    min-width: 0;
}

.site-footer .footer-column h3 {
    margin: 0 0 18px;

    color: white;
    font-size: 18px;
}

.site-footer .footer-column > a {
    display: block;
    margin-bottom: 12px;

    color: white;
    text-decoration: none;
    font-size: 15px;
}

.site-footer .footer-column > a:hover,
.site-footer .footer-column > a:focus {
    color: #d4af37;
}

.site-footer .footer-contact p {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    margin: 0 0 14px;

    color: white;
    font-size: 15px;
}

.site-footer .footer-contact p span {
    color: #f1c40f;
    flex-shrink: 0;
}

.site-footer .footer-contact p a {
    display: inline;
    margin: 0;

    color: white;
    text-decoration: none;
}

.site-footer .footer-contact p a:hover,
.site-footer .footer-contact p a:focus {
    color: #d4af37;
}


/* ---------- SOCIAL MEDIA BUTTONS ---------- */

.site-footer .footer-socials {
    display: flex;
    align-items: center;
    gap: 14px;
}

.site-footer .footer-socials a {
    width: 46px;
    height: 46px;
    margin: 0;

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

    border-radius: 50%;

    background-color: white;
    color: #121f4a;

    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}

.site-footer .footer-socials a:hover,
.site-footer .footer-socials a:focus {
    background-color: #d4af37;
    color: #121f4a;
}


/* ---------- FOOTER WHITE AND GOLD LINES ---------- */

.site-footer .footer-wave {
    width: 100%;
    padding: 0;

    background-color: #121f4a;
}

.site-footer .footer-white-line {
    width: 100%;
    height: 5px;

    background-color: white;

    transform: rotate(0.5deg);
    transform-origin: left center;
}

.site-footer .footer-gold-line {
    width: 100%;
    height: 5px;
    margin-top: 7px;

    background-color: #f1c40f;

    transform: rotate(-0.4deg);
    transform-origin: left center;
}


/* ---------- FOOTER BOTTOM ---------- */

.site-footer .footer-bottom {
    width: 100%;
    padding: 30px 7%;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;

    background-color: #121f4a;
    color: white;
}

.site-footer .footer-bottom p {
    margin: 0;

    color: white;
    font-size: 14px;
}

.site-footer .footer-legal {
    display: flex;
    align-items: center;
    gap: 30px;
}

.site-footer .footer-legal a {
    color: white;
    text-decoration: none;
    font-size: 14px;
}

.site-footer .footer-legal a:hover,
.site-footer .footer-legal a:focus {
    color: #d4af37;
}


/* ==================================================
   11. TABLET
   ================================================== */

@media (max-width: 900px) {

    .navigation,
    .site-header .nav-links {
        gap: 30px;
    }

    .hero-content,
    .services-hero-content,
    .contact-hero-content {
        width: 60%;
    }

    .contact-container {
        gap: 45px;
    }

    .site-footer .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px;
    }

}


/* ==================================================
   12. MOBILE
   ================================================== */

@media (max-width: 700px) {

    /* HEADER */

    .site-header {
        padding: 20px 6%;

        flex-direction: column;
        align-items: flex-start;
    }

    .navigation,
    .site-header .nav-links {
        width: 100%;
        margin: 0;

        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }


    /* HERO SECTIONS */

    .hero,
    .services-hero,
    .contact-hero {
        min-height: 360px;
        padding: 50px 6%;
    }

    .hero-content,
    .services-hero-content,
    .contact-hero-content {
        width: 100%;
        max-width: 500px;
    }

    .hero h1,
    .services-hero h1,
    .contact-hero h1 {
        font-size: 32px;
    }

    .hero p,
    .services-hero p,
    .contact-hero p {
        font-size: 16px;
    }


    /* HOME */

    .why-grid,
    .benefits-grid {
        grid-template-columns: 1fr;
    }


    /* SERVICES */

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-item img,
    .travel-card img {
        height: 250px;
    }

    .services-table {
        font-size: 14px;
    }

    .services-table th,
    .services-table td {
        padding: 10px;
    }


    /* CONTACT */

    .contact-section {
        padding: 50px 6%;
    }

    .contact-container {
        grid-template-columns: 1fr;
        gap: 45px;
    }


    /* FOOTER */

    .site-footer .footer-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-footer .footer-main {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .site-footer .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .site-footer .footer-legal {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

}

/* ==================================================
   CENTRE HOME PAGE CONTENT
   ================================================== */


/* ABOUT THE TRAVEL CURATORS */

.hero + section {
    width: 100% !important;
    padding: 60px 8% !important;
    text-align: center !important;
}

.hero + section h2 {
    width: 100% !important;
    margin: 0 auto 20px !important;
    text-align: center !important;
}

.hero + section p {
    width: 100% !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    text-align: center !important;
    line-height: 1.8 !important;
}


/* WHY CHOOSE US */

.hero + section + section {
    width: 100% !important;
    padding: 60px 7% !important;
    text-align: center !important;
}

.hero + section + section > h2 {
    width: 100% !important;
    margin: 0 auto 35px !important;
    text-align: center !important;
}

.hero + section + section h3 {
    text-align: center !important;
}

.hero + section + section p {
    text-align: center !important;
}