@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
    --primary: #064a9b;
    --secondary: #e2a51c;
    --dark: #071a33;
    --light: #f5f8fc;
}
* { box-sizing: border-box; }
body { font-family: 'Montserrat', sans-serif; color: #172033; line-height: 1.7; }
.navbar { padding: 10px 0; }
.brand-logo { width: 105px; height: 65px; object-fit: cover; object-position: center; border-radius: 50%; }
.nav-link { font-weight: 600; color: #25364d !important; margin: 0 5px; }
.nav-link:hover, .nav-link.active { color: var(--primary) !important; }
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: #043873; border-color: #043873; }
.hero-section {
    position: relative; min-height: 75vh; display: flex; align-items: center;
    background: linear-gradient(110deg, rgba(4,33,72,.95), rgba(6,74,155,.72)), url('../images/cplus-travel-logo.jpg') center/cover no-repeat;
}
.hero-overlay { position: absolute; inset: 0; background: radial-gradient(circle at 85% 35%, rgba(226,165,28,.25), transparent 35%); }
.min-vh-75 { min-height: 75vh; }
.hero-section h1 span { color: #f0b72d; }
.hero-badge { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); padding: 10px 16px; }
.hero-card { background: rgba(255,255,255,.95); padding: 35px; border-radius: 24px; box-shadow: 0 25px 60px rgba(0,0,0,.2); }
.hero-card i { font-size: 55px; color: var(--primary); }
.hero-card h3 { color: var(--dark); font-weight: 800; }
.section-heading span, .eyebrow { color: var(--secondary); font-weight: 800; letter-spacing: 2px; font-size: .85rem; }
.section-heading h2 { font-weight: 800; color: var(--dark); margin-top: 8px; }
.service-card { background: #fff; border-radius: 18px; padding: 30px; border: 1px solid #e9eef5; transition: .3s; }
.service-card:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(8,49,96,.12); border-color: transparent; }
.icon-box { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 16px; background: #eaf3ff; color: var(--primary); font-size: 28px; margin-bottom: 20px; }
.service-card h4 { font-weight: 700; color: var(--dark); }
.service-card p { color: #667085; }
.read-more { color: var(--primary); font-weight: 700; text-decoration: none; }
.feature { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.feature i { color: var(--primary); }
.cta-section { background: linear-gradient(110deg, var(--dark), var(--primary)); }
.page-banner { padding: 85px 0; background: linear-gradient(110deg, #061a35, #0755a5); color: white; }
.page-banner h1 { font-size: 3rem; font-weight: 800; }
.page-banner p { margin: 0; opacity: .85; }
.info-card { height: 100%; background: white; padding: 35px; border-radius: 18px; box-shadow: 0 10px 35px rgba(0,0,0,.06); }
.info-card i { font-size: 40px; color: var(--primary); }
.info-card h4 { margin-top: 15px; font-weight: 700; }
.destination-card { display: flex; gap: 20px; height: 100%; padding: 30px; border-radius: 20px; background: #fff; border: 1px solid #e8edf4; transition: .3s; }
.destination-card:hover { box-shadow: 0 15px 35px rgba(0,0,0,.08); transform: translateY(-5px); }
.destination-card h3 { font-weight: 800; margin-bottom: 0; }
.destination-card small { color: var(--secondary); font-weight: 700; }
.destination-icon { min-width: 65px; height: 65px; border-radius: 50%; background: #eaf3ff; color: var(--primary); display: grid; place-items: center; font-size: 28px; }
.form-card { background: white; border-radius: 20px; padding: 35px; box-shadow: 0 12px 45px rgba(8,40,80,.08); border: 1px solid #edf1f6; }
.form-control, .form-select { padding: 13px 15px; border-radius: 10px; }
.form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(6,74,155,.12); }
.contact-item { display: flex; gap: 18px; margin-top: 25px; }
.contact-item > i { color: var(--primary); font-size: 25px; }
.contact-item h6 { font-weight: 800; margin: 0; }
.contact-item p { margin: 0; color: #667085; }
.footer { background: #06172d; color: white; }
.footer h5 { font-weight: 700; margin-bottom: 18px; }
.footer-logo { width: 110px; height: 70px; object-fit: cover; border-radius: 50%; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: rgba(255,255,255,.65); text-decoration: none; }
.footer-links a:hover { color: white; }
@media(max-width: 767px) {
    .hero-section h1 { font-size: 2.5rem; }
    .page-banner { padding: 55px 0; }
    .page-banner h1 { font-size: 2.2rem; }
    .form-card { padding: 22px; }
}
/* Google Map */
.map-section {
    background: #f5f8fc;
}

.map-wrapper {
    width: 100%;
    height: 450px;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.10);
    background: #ffffff;
}

.map-wrapper iframe {
    width: 100%;
    height: 100%;
    display: block;
}


/* Contact Links */
.contact-item a {
    color: #064a9b;
    text-decoration: none;
    font-weight: 500;
}

.contact-item a:hover {
    color: #e2a51c;
    text-decoration: underline;
}


/* Mobile Google Map */
@media (max-width: 767px) {

    .map-wrapper {
        height: 350px;
        border-radius: 15px;
    }

}
/* ==========================================
   Full Width About Us / Contact Banner
========================================== */

.page-banner.contact-banner {
    width: 100%;
    height: 400px;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.page-banner.contact-banner img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}


/* Desktop */
@media (min-width: 1200px) {
    .page-banner.contact-banner {
        height: 450px;
    }
}


/* Tablet */
@media (min-width: 768px) and (max-width: 1199px) {
    .page-banner.contact-banner {
        height: 350px;
    }
}


/* Mobile */
@media (max-width: 767px) {
    .page-banner.contact-banner {
        height: 220px;
    }

    .page-banner.contact-banner img {
        object-position: center;
    }
}

/* ==========================================
   About Us Banner
========================================== */

.page-banner.about-banner {
    width: 100%;
    height: 250px;

    background-image: url('../images/bannersabout.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;

    position: relative;
    overflow: hidden;

    color: #ffffff;
}


/* Dark overlay */
.page-banner.about-banner::before {
    content: "";
    position: absolute;
    inset: 0;

    background: rgba(3, 28, 60, 0.35);

    z-index: 1;
}


/* Content */
.page-banner.about-banner .container {
    position: relative;
    z-index: 2;
}


/* Heading */
.page-banner.about-banner h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 10px;
}


/* Subtitle */
.page-banner.about-banner p {
    font-size: 1.2rem;
    margin: 0;
}


/* Tablet */
@media (max-width: 991px) {

    .page-banner.about-banner {
        height: 380px;
    }

    .page-banner.about-banner h1 {
        font-size: 2.5rem;
    }

}


/* Mobile */
@media (max-width: 767px) {

    .page-banner.about-banner {
        height: 300px;
        background-position: center;
    }

    .page-banner.about-banner h1 {
        font-size: 2rem;
    }

    .page-banner.about-banner p {
        font-size: 1rem;
    }

}

/* ==========================================
   Services Page Banner
========================================== */

.services-banner {
    width: 100%;
    height: 250px;

    display: flex;
    align-items: center;

    background-image: url('../images/services-banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    position: relative;
    overflow: hidden;
}


/* Dark overlay for text readability */
.services-banner::before {
    content: "";
    position: absolute;
    inset: 0;

    background: rgba(3, 28, 60, 0.45);
}


/* Center content */
.services-banner .banner-content {
    position: relative;
    z-index: 2;

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

    text-align: center;

    color: #ffffff;
}


/* Banner title */
.services-banner h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 10px;
}


/* Banner subtitle */
.services-banner p {
    font-size: 1.2rem;
    margin-bottom: 0;
}


/* Responsive */
@media (max-width: 768px) {

    .services-banner {
        height: 320px;
    }

    .services-banner h1 {
        font-size: 2.3rem;
    }

    .services-banner p {
        font-size: 1rem;
    }

}

/* ==========================================
   Destinations Banner
========================================== */

.destinations-banner {
    width: 100%;
    height: 250px;

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

    text-align: center;

    background-image: url('../images/destinations-banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    position: relative;
    overflow: hidden;
}


/* Dark overlay */
.destinations-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(3, 28, 60, 0.50);
}


/* Center Content */
.destinations-banner .container {
    position: relative;
    z-index: 2;

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

    text-align: center;

    color: #ffffff;
}


/* Heading */
.destinations-banner h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 10px;
}


/* Subtitle */
.destinations-banner p {
    font-size: 1.2rem;
    margin: 0;
}


/* Responsive */
@media (max-width: 768px) {

    .destinations-banner {
        height: 320px;
    }

    .destinations-banner h1 {
        font-size: 2.3rem;
    }

    .destinations-banner p {
        font-size: 1rem;
    }

}