/*
Theme Name: Travel WP Theme
Theme URI: https://example.com/
Author: Gemini
Author URI: https://google.com
Description: A custom WordPress theme for the Travel Website.
Version: 1.0
*/





/* ============================================ */
/* PACKAGE DETAILS PAGE STYLES */
/* ============================================ */

/* --- 1. Package Hero Section --- */
/* --- 1. Package Hero Section - FIX APPLIED --- */
#package-hero {
    /* FIX: Added large top padding to push content down past a fixed navbar.
       Adjust 8rem (approx 128px) if your navbar is taller or shorter. */
    padding: 8rem 2rem 3rem; 
    
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

#package-hero .package-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
/* ... (rest of the package-hero styles remain the same) ... */

#package-hero .package-name {
    font-size: 2.2rem;
    color: #333;
    font-weight: 700;
}

#package-hero .duration {
    font-size: 1.4rem;
    font-weight: 400;
    color: #ff6347;
    margin-left: 15px;
}

#package-hero .rating {
    font-size: 1.1rem;
    color: #fdd835;
}

#package-hero .rating span {
    font-size: 0.9rem;
    color: #666;
    margin-left: 5px;
}

.gallery-main {
    display: flex;
    gap: 20px;
}

.main-photo {
    flex-basis: 75%;
    height: 500px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.gallery-thumbs {
    flex-basis: 25%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gallery-thumbs .thumb {
    width: 100%;
    height: 117.5px; /* (500px - 30px gap) / 4 */
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s, border 0.2s;
    border: 3px solid transparent;
}

.gallery-thumbs .thumb.active,
.gallery-thumbs .thumb:hover {
    opacity: 1;
    border-color: #ff6347;
}

.booking-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: #f9f9f9;
    border-radius: 10px;
    border: 1px solid #eee;
}

.price-box .label {
    display: block;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 5px;
}

.price-box .price {
    font-size: 2.5rem;
    font-weight: 800;
    color: #ff6347;
}

.price-box .per-person {
    font-size: 1rem;
    color: #666;
    margin-left: 10px;
}

.cta-actions button {
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-left: 15px;
}

.btn-book-now {
    background-color: #ff6347;
    color: #fff;
}

.btn-enquiry {
    background-color: #eee;
    color: #333;
}


/* --- 2. Package Details Content --- */
#package-content {
    padding: 3rem 2rem;
    background-color: #fcfcfc;
}

.package-grid {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.details-main {
    flex: 3;
}

.details-sidebar {
    flex: 1;
}

.details-main h2 {
    font-size: 1.8rem;
    color: #0d1e44;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #ff6347;
    padding-bottom: 5px;
}

.description-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 2rem;
}

.highlights {
    padding: 2rem;
    background-color: #eff3f7;
    border-left: 5px solid #ff6347;
    border-radius: 8px;
    margin-bottom: 3rem;
}

.highlights h3 {
    font-size: 1.4rem;
    color: #0d1e44;
    margin-bottom: 1rem;
}

.highlights ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.highlights li {
    font-size: 1rem;
    color: #333;
}

.highlights li i {
    color: #4CAF50; /* Green checkmark */
    margin-right: 8px;
}

/* Itinerary */
.itinerary-day {
    border-left: 3px solid #ccc;
    padding-left: 20px;
    position: relative;
    margin-bottom: 30px;
}

.itinerary-day::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    width: 15px;
    height: 15px;
    background-color: #ff6347;
    border-radius: 50%;
}

.itinerary-day .day-number {
    display: block;
    font-weight: 700;
    color: #ff6347;
    font-size: 0.9rem;
}

.itinerary-day h4 {
    font-size: 1.2rem;
    color: #333;
    margin: 5px 0;
}

.itinerary-day p {
    color: #555;
}

/* Sidebar Info Box (Sticky) */
.sticky-box {
    position: sticky;
    top: 20px; /* Adjust sticky position */
    background-color: #fff;
    border: 1px solid #e0e0e0;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.sticky-box h2 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #0d1e44;
}

.info-list {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.info-list li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    color: #333;
}

.info-list li i {
    color: #ff6347;
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

.btn-book-sidebar {
    width: 100%;
    padding: 1rem;
    background-color: #0d1e44;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}


/* --- 3. Reviews Section --- */
#customer-reviews {
    padding: 3rem 2rem;
    background-color: #f5f5f5;
}

.review-form-box {
    background-color: #fff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 3rem;
}

.review-form-box h3 {
    margin-bottom: 1.5rem;
    color: #0d1e44;
    font-size: 1.5rem;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
}

textarea {
    width: 100%;
    min-height: 120px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: vertical;
}

/* Star Rating System CSS */
.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
}
.star-rating input {
    display: none;
}
.star-rating label {
    font-size: 30px;
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s;
}
.star-rating input:checked ~ label {
    color: #fdd835;
}
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: #fdd835;
}

.btn-submit-review {
    background-color: #ff6347;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
}


.reviews-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.review-card {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 10px;
    border: 1px solid #eee;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.review-header h4 {
    color: #333;
    font-size: 1.1rem;
}

.review-stars i {
    color: #fdd835;
    font-size: 0.9rem;
}

.reviewer-name {
    font-style: italic;
    color: #888;
    font-size: 0.85rem;
    margin-bottom: 10px;
}

/* --- 4. Suggested Packages (Reuses deal-grid CSS) --- */
#suggested-packages {
    padding: 4rem 2rem;
    background-color: #fff;
}
#suggested-packages .deal-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 packages across */
    gap: 30px;
}


/* --- Responsive Adjustments for Package Page --- */
@media screen and (max-width: 1024px) {
    .package-grid {
        flex-direction: column;
    }
    .details-sidebar {
        width: 100%;
    }
    .sticky-box {
        position: static;
        top: 0;
    }
    .highlights ul {
        grid-template-columns: 1fr;
    }
    #suggested-packages .deal-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    #package-hero .package-header {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 1rem;
    }
    #package-hero .duration {
        margin-left: 0;
        margin-top: 5px;
    }
    #package-hero .rating {
        margin-top: 10px;
    }
    .gallery-main {
        flex-direction: column;
    }
    .main-photo {
        height: 300px;
    }
    .gallery-thumbs {
        flex-direction: row;
        overflow-x: auto;
    }
    .gallery-thumbs .thumb {
        min-width: 80px;
        height: 80px;
    }
    .booking-summary {
        flex-direction: column;
        text-align: center;
    }
    .cta-actions {
        margin-top: 15px;
    }
    .cta-actions button {
        margin: 5px 10px;
        width: 90%;
    }
    #suggested-packages .deal-grid {
        grid-template-columns: 1fr;
    }
}




















/* ============================================ */
/* 1. GLOBAL STYLES (Applies to all screens)    */
/* ============================================ */
#main-header {
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 80px;
}

.header-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-logo img { height: 50px; width: auto; }

/* --- HAMBURGER ICON (Defined Globally) --- */
/* We define this here so it is visible by default on mobile/tablets */
.mobile-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    cursor: pointer;
    z-index: 10001;
}

.mobile-toggle span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: #0d1e44; /* Dark Blue Color */
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* --- NAVIGATION BASE --- */
.nav-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: center;
}

.nav-list a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
}

/* ============================================ */
/* 2. DESKTOP STYLES (Min Width 1025px)         */
/* ============================================ */
@media screen and (min-width: 1025px) {
    
    /* HIDE HAMBURGER ON DESKTOP */
    .mobile-toggle { 
        display: none !important; 
    }

    /* Desktop Nav Layout */
    .main-nav {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .nav-list { gap: 25px; }
    .nav-list a { padding: 10px 0; }

    /* Desktop Dropdown */
    .nav-list li { position: relative; }
    
    .nav-list .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        min-width: 220px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        list-style: none;
        padding: 10px 0;
        border-top: 3px solid #000078;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.3s ease;
        z-index: 1000;
    }

    .nav-list .menu-item-has-children:hover > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* ============================================ */
/* 3. MOBILE STYLES (Max Width 1024px)          */
/* ============================================ */
@media screen and (max-width: 1024px) {

    /* MOBILE MENU CONTAINER */
    .main-nav {
        position: fixed;
        top: 80px;
        left: 0;
        width: 100%;
        height: 0; /* Closed by default */
        background-color: #fff;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        overflow-y: auto;
        transition: height 0.4s ease;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        display: flex;
        overflow: hidden;
    }

    /* Open State */
    #main-header.nav-open .main-nav {
        height: calc(100vh - 80px);
    }

    /* List Styles */
    .nav-list {
        flex-direction: column;
        width: 100%;
        gap: 0;
        padding-top: 10px;
    }
    .nav-list li { width: 100%; }
    
    .nav-list a {
        padding: 15px 25px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        font-size: 1.1rem;
    }

    /* Submenu (Mobile Accordion) */
    .nav-list .sub-menu {
        position: static;
        box-shadow: none;
        border-top: none;
        background-color: #f8f9fa;
        display: none; /* Hidden */
        padding-left: 20px;
        opacity: 1; 
        visibility: visible; 
        transform: none;
    }
    
    .nav-list .menu-item-has-children.active > .sub-menu {
        display: block;
    }

    /* Hamburger Animation (Changes to X) */
    #main-header.nav-open .mobile-toggle span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
    #main-header.nav-open .mobile-toggle span:nth-child(2) { opacity: 0; }
    #main-header.nav-open .mobile-toggle span:nth-child(3) { transform: rotate(-45deg) translate(5px, -7px); }
}























/* --- Banner Section --- */
#banner {
    height: 100vh;
    position: relative;
    overflow: hidden; /* Hides the images waiting to slide in */
    color: #fff;
}

/* --- Image Slider Container --- */
#image-slider {
    display: flex; /* Lines images up in a row */
    height: 100%;
    width: 100%;
    /* We slide this container left/right */
    transition: transform 1.5s ease-in-out;
}

#image-slider img {
    min-width: 100%; /* Forces image to take full screen width */
    flex-shrink: 0;  /* Prevents images from squishing */
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Banner Content --- */
.banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    width: 90%;
    max-width: 1000px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.banner-content h1 {
    font-size: 4rem;
    margin-bottom: 0.5rem;
    white-space: normal; /* Allows text wrap on mobile */
    line-height: 1.2;
}

.banner-content p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

/* --- Search Bar Styles --- */
.hero-search-container {
    margin: 1.5rem auto 2rem auto;
    max-width: 600px;
    width: 100%;
}

.hero-search-form {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 3px solid rgba(255, 255, 255, 0.6);
    padding: 8px;
    border-radius: 50px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.hero-search-form:hover,
.hero-search-form:focus-within {
    background: rgba(255, 255, 255, 0.95);
    border-color: #fff;
    transform: translateY(-2px);
}

.search-icon-inside {
    color: #666;
    margin-left: 15px;
    font-size: 1.1rem;
}

.hero-search-form input {
    flex-grow: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 12px 15px;
    font-size: 1rem;
    color: #333;
    font-family: 'Poppins', sans-serif;
    min-width: 0;
}

.hero-search-form button {
    background-color: #000078;
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

.hero-search-form button:hover { background-color: #000099; }

/* --- Buttons --- */
.banner-buttons .btn {
    padding: 0.8rem 2rem;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    margin: 0 0.5rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-primary { background-color: #000078; color: #fff; }
.btn-secondary { background-color: transparent; color: #fff; border: 2px solid #fff; }
.btn-secondary:hover { background-color: #fff; color: #333; }

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .banner-content h1 { font-size: 2.2rem; }
    .banner-content p { font-size: 1.1rem; }
    .hero-search-form input { font-size: 0.9rem; padding: 10px; }
    .hero-search-form button { padding: 10px 20px; font-size: 0.9rem; }
    .banner-buttons .btn { padding: 0.7rem 1.5rem; font-size: 0.9rem; margin: 5px; }
}

@media screen and (max-width: 480px) {
    .banner-content h1 { font-size: 1.8rem; }
    .banner-buttons .btn { display: block; width: 100%; margin: 10px 0; }
}
















/* --- Banner Section --- */
#banner {
    height: 100vh;
    position: relative;
    overflow: hidden; /* Hides the images waiting to slide in */
    color: #fff;
}

/* --- Image Slider Container --- */
#image-slider {
    display: flex; /* Lines images up in a row */
    height: 100%;
    width: 100%;
    /* We slide this container left/right */
    transition: transform 1.5s ease-in-out;
}

#image-slider img {
    min-width: 100%; /* Forces image to take full screen width */
    flex-shrink: 0;  /* Prevents images from squishing */
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Banner Content --- */
.banner-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    width: 90%;
    max-width: 1000px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);
}

.banner-content h1 {
    font-size: 4rem;
    margin-bottom: 0.5rem;
    white-space: normal; /* Allows text wrap on mobile */
    line-height: 1.2;
}

.banner-content p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

/* --- Search Bar Styles --- */
.hero-search-container {
    margin: 1.5rem auto 2rem auto;
    max-width: 600px;
    width: 100%;
}

.hero-search-form {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 3px solid rgba(255, 255, 255, 0.6);
    padding: 8px;
    border-radius: 50px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.hero-search-form:hover,
.hero-search-form:focus-within {
    background: rgba(255, 255, 255, 0.95);
    border-color: #fff;
    transform: translateY(-2px);
}

.search-icon-inside {
    color: #666;
    margin-left: 15px;
    font-size: 1.1rem;
}

.hero-search-form input {
    flex-grow: 1;
    background: transparent;
    border: none;
    outline: none;
    padding: 12px 15px;
    font-size: 1rem;
    color: #333;
    font-family: 'Poppins', sans-serif;
    min-width: 0;
}

.hero-search-form button {
    background-color: #000078;
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

.hero-search-form button:hover { background-color: #000099; }

/* --- Buttons --- */
.banner-buttons .btn {
    padding: 0.8rem 2rem;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    margin: 0 0.5rem;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.btn-primary { background-color: #000078; color: #fff; }
.btn-secondary { background-color: transparent; color: #fff; border: 2px solid #fff; }
.btn-secondary:hover { background-color: #fff; color: #333; }

/* --- Responsive --- */
@media screen and (max-width: 768px) {
    .banner-content h1 { font-size: 2.2rem; }
    .banner-content p { font-size: 1.1rem; }
    .hero-search-form input { font-size: 0.9rem; padding: 10px; }
    .hero-search-form button { padding: 10px 20px; font-size: 0.9rem; }
    .banner-buttons .btn { padding: 0.7rem 1.5rem; font-size: 0.9rem; margin: 5px; }
}

@media screen and (max-width: 480px) {
    .banner-content h1 { font-size: 1.8rem; }
    .banner-buttons .btn { display: block; width: 100%; margin: 10px 0; }
}


















/* ============================================ */
/* Service that we offer                        */
/* ============================================ */
#services {
    padding: 5rem 2rem;
    background-color: #f9f9f9;
    text-align: center;
}

#services .container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    font-size: 2.5rem;
    color: #333;
    margin-bottom: 4rem;
    position: relative;
}

/* Underline for section title */
.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background-color: #000078;
}

.services-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    position: relative;
    flex-wrap: wrap; /* Allows items to wrap on smaller screens if needed */
}

/* The dotted connector line (Desktop Only) */
.services-connector {
    position: absolute;
    top: 35px;
    left: 10%;
    width: 80%;
    height: 2px;
    background-image: linear-gradient(to right, #bbb 60%, transparent 40%);
    background-size: 20px 2px;
    background-repeat: repeat-x;
    z-index: 1;
}

.service-item {
    flex-basis: 22%;
    padding: 1rem;
    z-index: 2;
    background-color: #f9f9f9;
    position: relative; /* Ensures z-index works */
}

.service-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem auto;
    background-color: #fff;
    border: 2px solid #000078;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: #000078;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.service-item:hover .service-icon {
    transform: scale(1.1) rotate(10deg);
    background-color: #000078;
    color: #fff;
}

.service-item h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: #333;
}

.service-item p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6; /* Better readability */
}

/* ============================================ */
/* 📱 RESPONSIVE MEDIA QUERIES                  */
/* ============================================ */

/* Tablet (max-width: 1024px) */
@media screen and (max-width: 1024px) {
    .service-item {
        flex-basis: 45%; /* Show 2 items per row */
        margin-bottom: 2rem;
    }
    
    /* Hide the line on tablet/mobile because items are wrapping */
    .services-connector {
        display: none; 
    }
}

/* Mobile (max-width: 600px) */
@media screen and (max-width: 600px) {
    #services {
        padding: 3rem 1rem; /* Reduce padding */
    }

    .services-container {
        flex-direction: column; /* Stack vertically */
        align-items: center;
    }

    .service-item {
        flex-basis: 100%; /* Full width */
        width: 100%;
        margin-bottom: 2.5rem; /* Space between stacked items */
        padding: 0;
    }

    .section-title {
        font-size: 2rem; /* Smaller title */
        margin-bottom: 2.5rem;
    }
}
























/* ============================================ */
/* POPULAR DEALS - HOVER REVEAL STYLE           */
/* ============================================ */
#popular-deals {
    padding: 4rem 0;
    background-color: #f4f7fa;
    overflow: hidden;
}

.section-header-left {
    text-align: center;
    margin-bottom: 2rem;
    padding-left: 10px;
}

#popular-deals .section-title {
    font-size: 2rem;
    color: #0d1e44;
    font-weight: 800;
    margin-bottom: 0.5rem;
    text-align: center;
}

#popular-deals .section-title::after {
    display: none;
}

.deals-carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 10px 0 40px 0; 
}

.deals-carousel {
    display: flex;
    gap: 20px;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- Card Container --- */
.landscape-card {
    min-width: calc(33.333% - 14px); /* Desktop: 3 cards */
    background-color: #000; /* Black background to hide glitches */
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    display: block; /* Changed from flex to block */
    height: 220px; /* Increased height slightly for better image view */
    position: relative; /* Vital for absolute positioning inside */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}

.landscape-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

/* --- Image Layer (Visible Always) --- */
.landscape-card .deal-image {
    width: 100%;  /* Full Width */
    height: 100%; /* Full Height */
    position: relative;
}

.landscape-card .deal-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Zoom image slightly on hover */
.landscape-card:hover .deal-image img {
    transform: scale(1.15);
}

/* Airline Logo (Always Visible on top left) */
.airline-logo {
    position: absolute;
    top: 15px;
    left: 15px;
    background: rgba(255, 255, 255, 0.95);
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #0d1e44;
    z-index: 5; /* Above everything */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* --- Content Layer (Hidden until Hover) --- */
.landscape-card .deal-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 30, 68, 0.85); /* Dark Blue transparent overlay */
    
    /* Flexbox to center content */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    
    /* Animation State: Hidden */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* Start slightly down */
    transition: all 0.4s ease-in-out;
    z-index: 4;
}

/* Reveal on Hover */
.landscape-card:hover .deal-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Slide up to position */
}

/* --- Typography inside the hover overlay --- */
.deal-tag {
    font-size: 0.8rem;
    font-weight: 700;
    color: #ffd700; /* Gold/Yellow color for offer */
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.landscape-card h3 {
    font-size: 1.4rem;
    color: #fff; /* White Text */
    margin-bottom: 8px;
    font-weight: 700;
}

.deal-validity {
    font-size: 0.9rem;
    color: #ddd; /* Light Grey */
    margin-bottom: 20px;
}

.btn-book-sm {
    background-color: #000078;
    color: #fff;
    border: none;
    padding: 10px 25px;
    border-radius: 30px; /* Rounder button */
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, background-color 0.2s;
}

.btn-book-sm:hover {
    background-color: #000078;
    transform: scale(1.05);
}

/* --- Slider Dots --- */
.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 0;
    margin-bottom: 20px;
    z-index: 10;
    position: relative;
}

.dot {
    width: 12px;
    height: 12px;
    background-color: #ddd;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dot.active {
    background-color: #3b82f6;
    transform: scale(1.2);
}

/* --- Responsive --- */
@media screen and (max-width: 1024px) {
    .landscape-card {
        min-width: calc(50% - 10px); /* 2 cards on tablet */
    }
}

@media screen and (max-width: 768px) {
    .landscape-card {
        min-width: 100%; /* 1 card on mobile */
    }
    /* Optional: On mobile, maybe show text always? 
       Uncomment below if you want text visible on mobile without hover 
    */
    /*
    .landscape-card .deal-content {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
        justify-content: flex-end;
        padding-bottom: 30px;
    }
    */
}














/* --- How We Work Section --- */
/* --- How We Work Section (NEW HORIZONTAL LAYOUT) --- */
#how-we-work {
    padding: 4rem 2rem;
    background-color: #fff; /* Changed background for contrast */
    overflow: hidden;
}

/* Wrapper to ensure title and description are centered */
.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

#how-we-work .section-description {
    font-size: 1.1rem;
    color: #666;
    max-width: 600px;
    margin: -3rem auto 0 auto;
}

.horizontal-process-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px; /* Space between items */
}

.h-process-step {
    flex: 1; /* Each step takes equal space */
    max-width: 250px;
    text-align: center;
    position: relative; /* For the connecting arrow */
    padding: 1rem;
}

.h-step-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem auto;
    background-color: #fff;
    border: 3px solid #000078;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: #000078;
    transition: all 0.4s ease;
}

.h-process-step:hover .h-step-icon {
    background-color: #000078;
    color: #fff;
    transform: scale(1.1) rotate(10deg);
}

.h-process-step h3 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    color: #333;
}

.h-process-step p {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
}

/* The connecting arrow using a pseudo-element */
.h-process-step:not(:last-child)::after {
    /* Using Font Awesome icon as the arrow */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f061"; /* Icon code for arrow-right */
    
    position: absolute;
    top: 40px; /* Vertically aligns with the icon center */
    right: 0;
    transform: translateX(calc(50% + 20px)); /* Positions it in the middle of the gap */
    font-size: 1.5rem;
    color: #ddd;
}

/* --- Animation for the new layout --- */
/* (The existing JS will work, we just change the CSS animation style) */
.h-process-step {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.h-process-step.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* This adds a slight delay to each subsequent item for a nice stagger effect */
.h-process-step:nth-child(2) { transition-delay: 0.1s; }
.h-process-step:nth-child(3) { transition-delay: 0.2s; }
.h-process-step:nth-child(4) { transition-delay: 0.3s; }


/* --- Responsive Design for Horizontal Layout --- */
@media screen and (max-width: 992px) {
    .horizontal-process-container {
        flex-direction: column; /* Stack vertically on smaller screens */
        align-items: center;
        gap: 50px; /* Increase gap for vertical layout */
    }

    /* Change the arrow to point down */
    .h-process-step:not(:last-child)::after {
        content: "\f063"; /* Icon code for arrow-down */
        top: auto;
        bottom: 0;
        left: 50%;
        right: auto;
        transform: translate(-50%, calc(100% + 15px)); /* Position it below the step */
    }
}





/* ============================================ */
/* OUR DEALS SECTION STYLES           */
/* ============================================ */
#our-deals {
    padding: 5rem 2rem;
    background-color: #fff;
    
}

#our-deals .section-title {
     text-align: center;
}

#our-deals .section-description {
    font-size: 1.1rem;
    color: #666;
    max-width: 800px;
    margin: 1rem auto 3rem auto;
    text-align: center
}

.deal-grid {
    display: grid;
    /* Grid setup: 4 columns, even width */
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px;
    margin-top: 3rem;
}

.deal-card {
    background-color: #f9f9f9;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;         /* Added */
    flex-direction: column; /* Added */
}

.deal-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.deal-card img {
    width: 100%;
    height: 200px; /* Fixed height for consistent look */
    object-fit: cover;
    display: block;
}

.card-content {
    padding: 1.2rem;
    text-align: left;
    flex-grow: 1;          /* Added: pushes the price and buttons to the bottom */
    display: flex;
    flex-direction: column;
}

.card-content h3 {
    font-size: 1.3rem;
    color: #333;
    margin-bottom: 0.5rem;
}

.card-content .description {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1rem;
    
    /* Fix starts here */
    display: -webkit-box;
    display: -webkit-box;
    display: box; /* Add this if you want to be extra safe */
    -webkit-box-orient: vertical;  
    overflow: hidden;
    line-height: 1.4;      /* Gives enough vertical space for the font */
    height: 2.8em;         /* (1.4 line-height * 2 lines) ensures alignment */
}

.price-row {
    margin-bottom: 1.2rem;
    border-top: 1px solid #eee;
    padding-top: 1rem;
    margin-top: auto;
}

.price {
    font-size: 1.6rem;
    font-weight: 700;
    color: #000078; /* Primary color */
}

.card-buttons {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.card-buttons button {
    flex: 1;
    padding: 0.6rem 0.5rem;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 700;
    transition: background-color 0.3s;
}

.btn-details {
    background-color: #ddd;
    color: #333;
}

.btn-details:hover {
    background-color: #ccc;
}

.btn-book {
    background-color: #000078;
    color: #fff;
}

.btn-book:hover {
    background-color: #000078;
}

/* Responsive adjustments for the grid */
@media screen and (max-width: 1200px) {
    .deal-grid {
        /* On medium screens, show 3 deals per row */
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .deal-grid {
        /* On smaller screens, show 2 deals per row */
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 500px) {
    .deal-grid {
        /* On mobile, stack deals vertically */
        grid-template-columns: 1fr;
    }
}








/* ============================================ */
/* FOOTER STYLES               */
/* ============================================ */
footer {
    background-color: #424242; /* Dark background for high contrast */
    color: #f4f4f4;
    padding: 3rem 2rem 0;
    font-size: 0.95rem;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap; /* Allows columns to wrap on smaller screens */
    padding-bottom: 2rem;
    border-bottom: 1px solid #444; /* Separator for the bottom row */
}

.footer-col {
    width: 20%; /* Distribute space evenly among 4 columns */
    min-width: 200px; /* Minimum width before wrapping */
    margin-bottom: 2rem;
}

.footer-branding {
    width: 30%;
    min-width: 250px;
}

.footer-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3d3dee; /* Use your primary color */
    display: block;
    margin-bottom: 1rem;
}

.footer-branding p {
    margin-bottom: 1.5rem;
    color: #bbb;
    line-height: 1.6;
}

.footer-col h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #fff;
    text-transform: uppercase;
}

/* Footer Links */
.footer-links ul li {
    margin-bottom: 0.8rem;
}

.footer-links a {
    color: #bbb;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #2b89f3;
    text-decoration: underline;
}

/* Social Links */
.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    color: #fff;
    font-size: 1.2rem;
    width: 35px;
    height: 35px;
    border: 1px solid #0a0ad4;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s, color 0.3s;
}

.social-links a:hover {
    background-color: #2b89f3;
    color: #fff;
}

/* Contact and Newsletter */
.footer-contact p {
    color: #bbb;
    margin-bottom: 0.8rem;
    display: flex;
    align-items: center;
}

.footer-contact i {
    margin-right: 10px;
    color: #2b89f3;
    font-size: 1rem;
}

.newsletter {
    display: flex;
    margin-top: 1.5rem;
}

.newsletter input[type="email"] {
    padding: 0.7rem;
    border: none;
    border-radius: 5px 0 0 5px;
    outline: none;
    flex-grow: 1;
}

.newsletter .btn-primary {
    padding: 0.7rem 1rem;
    border: none;
    border-radius: 0 5px 5px 0;
    background-color: #000078;
    color: #fff;
    cursor: pointer;
    font-weight: 400;
}

/* Footer Bottom Bar */
.footer-bottom {
    text-align: center;
    padding: 1.5rem 0;
    font-size: 0.85rem;
    color: #aaa;
}

.footer-bottom a {
    color: #bbb;
    margin: 0 5px;
}

.footer-bottom a:hover {
    color: #000078;
}


/* Responsive adjustments for footer */
@media screen and (max-width: 900px) {
    .footer-container {
        justify-content: space-around;
    }
    .footer-branding {
        width: 100%;
        text-align: center;
        margin-bottom: 3rem;
    }
    .footer-branding p {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    .social-links {
        justify-content: center;
        margin-top: 1.5rem;
    }
    .footer-col {
        width: 45%;
        min-width: 180px;
        text-align: left;
    }
    .footer-contact {
        width: 90%;
        margin-top: 1rem;
        text-align: left;
    }
    .newsletter {
        justify-content: flex-start;
        max-width: 400px;
    }
}

@media screen and (max-width: 550px) {
    .footer-col {
        width: 100%;
        min-width: auto;
        margin-bottom: 2rem;
    }
    .newsletter {
        flex-direction: column;
    }
    .newsletter input[type="email"] {
        border-radius: 5px;
        margin-bottom: 10px;
    }
    .newsletter .btn-primary {
        border-radius: 5px;
    }
}















/* ============================================ */
/* WHY CHOOSE US SECTION - FIXED & RESPONSIVE   */
/* ============================================ */
#why-choose-us {
    position: relative;
    /* FIX 1: Create the gap on Left/Right */
    width: 94%; 
    max-width: 1400px; /* Limit max width for huge screens */
    margin: 4rem auto; /* Center the section and add vertical spacing */
    
    /* FIX 2: Prevent text cut-off on laptops */
    height: auto;       /* Allow height to grow with content */
    min-height: 600px; /* Minimum height to keep it looking substantial */
    
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    
    /* Internal spacing */
    padding: 5rem 2rem; 
    
    /* Rounded corners for the whole block (image included) */
    border-radius: 30px; 
}

#why-choose-us .why-choose-us-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#why-choose-us .why-choose-us-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.6); /* Darkened slightly more for readability */
}

#why-choose-us .why-choose-us-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Stronger gradient to ensure text pops */
    background: linear-gradient(to right, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.1) 100%);
    z-index: 2;
}

#why-choose-us .why-choose-us-content {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center; /* Vertically center */
    justify-content: space-between;
    width: 100%;
    gap: 60px; /* Increased gap between text and grid */
}

#why-choose-us .left-content {
    flex: 1; 
    text-align: left;
}

#why-choose-us .pre-headline {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 1rem;
    color: #369eff; 
    text-transform: uppercase;
}

#why-choose-us h1 {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

#why-choose-us .sub-headline {
    font-size: 1.1rem;
    font-weight: 400;
    color: #ddd;
    line-height: 1.6;
    max-width: 500px; /* Limit line length for readability */
}

#why-choose-us .right-content {
    flex: 1.2; /* Give right side slightly more space */
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.main-text-card {
    /* Removed background box for cleaner look, or keep if preferred */
    text-align: left;
    color: #fff;
    margin-bottom: 10px;
}

.main-text-card h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: #fff;
    font-weight: 700;
}

.main-text-card p {
    font-size: 1rem;
    line-height: 1.7;
    color: #eee;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px;
    width: 100%;
}

.feature-card {
    background-color: rgba(255, 255, 255, 0.1); 
    backdrop-filter: blur(5px); 
    border-radius: 12px;
    padding: 1.5rem;
    text-align: left;
    color: #fff;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    background-color: rgba(255, 255, 255, 0.15);
}

.feature-number {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 2rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.2); 
}

.feature-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    color: #369eff;
    font-weight: 700;
}

.feature-card p {
    font-size: 0.85rem;
    color: #ddd;
    line-height: 1.5;
}

.learn-more-btn {
    display: inline-flex;
    align-items: center;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    margin-top: 10px;
    transition: color 0.3s;
    text-decoration: none;
}

.learn-more-btn i {
    margin-left: 10px;
    transition: transform 0.3s;
}

.learn-more-btn:hover {
    color: #000078;
}

.learn-more-btn:hover i {
    transform: translateX(5px);
}


/* --- Responsive Design --- */

/* Laptop / Tablet Landscape (Max Width 1200px) */
@media screen and (max-width: 1200px) {
    #why-choose-us {
        padding: 4rem 2rem; /* More padding to prevent cut-off */
    }
    
    #why-choose-us h1 {
        font-size: 2.8rem;
    }
    
    /* Stack them earlier to prevent squishing */
    #why-choose-us .why-choose-us-content {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    #why-choose-us .left-content {
        text-align: center;
        padding-right: 0;
    }

    #why-choose-us .sub-headline {
        margin: 0 auto;
    }

    .main-text-card {
        text-align: center;
    }
    
    /* Ensure features don't get too wide on stack */
    .feature-grid {
        max-width: 700px;
        margin: 0 auto;
    }
}

/* Mobile (Max Width 768px) */
@media screen and (max-width: 768px) {
    #why-choose-us {
        width: 95%; /* Slightly wider on mobile */
        border-radius: 20px;
        padding: 3rem 1.5rem;
    }

    #why-choose-us h1 {
        font-size: 2.2rem;
    }

    .feature-grid {
        grid-template-columns: 1fr; /* Single column features */
    }
    
    .feature-card {
        text-align: center;
    }
    
    .feature-number {
        right: 50%;
        transform: translateX(50%);
        top: 5px;
        font-size: 3rem;
        opacity: 0.1;
    }
}









/* ============================================ */
/* POPULAR AIRLINES SECTION STYLES              */
/* ============================================ */
#popular-airlines {
    padding: 5rem 2rem;
    background-color: #f8faff; /* Light background to make it stand out */
    text-align: center;
}

#popular-airlines .section-title {
    color: #0d1e44; /* Dark blue, similar to image */
    margin-bottom: 0.8rem;
}

#popular-airlines .section-description {
    font-size: 1.05rem;
    color: #6a7e9e; /* Muted blue-grey */
    max-width: 800px;
    margin: 0 auto 3rem auto;
    line-height: 1.6;
}

.airline-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns per row */
    gap: 15px; /* Smaller gap between items */
    max-width: 1000px; /* Constrain the overall width of the grid */
    margin: 0 auto;
    padding: 0 1rem; /* Padding for the grid itself */
}

.airline-item {
    display: flex;
    align-items: center;
    background-color: #fff;
    border: 1px solid #e0e6f0; /* Subtle border */
    border-radius: 8px;
    padding: 1rem 1.2rem;
    text-align: left;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}

.airline-item:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    border-color: #000078; /* Highlight border on hover */
}

.airline-item img {
    width: 30px; /* Fixed logo size */
    height: 30px;
    object-fit: contain; /* Ensures logo isn't cropped */
    margin-right: 15px;
    border-radius: 3px; /* Slightly rounded corners for logos */
}

.airline-item span {
    flex-grow: 1; /* Allows airline name to take up available space */
    font-size: 0.95rem;
    color: #333;
    font-weight: 500;
}

.airline-item .fas.fa-chevron-right {
    color: #a0a0a0; /* Muted color for the chevron */
    font-size: 0.8rem;
    margin-left: 10px;
}

/* Responsive adjustments for the airline grid */
@media screen and (max-width: 1024px) {
    .airline-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns on medium screens */
        max-width: 900px;
    }
}

@media screen and (max-width: 768px) {
    .airline-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
        gap: 10px;
        padding: 0;
    }
    .airline-item {
        padding: 0.8rem 1rem;
    }
    .airline-item span {
        font-size: 0.9rem;
    }
}

@media screen and (max-width: 500px) {
    .airline-grid {
        grid-template-columns: 1fr; /* Stack vertically on mobile */
        max-width: 350px; /* Constrain width for mobile cards */
    }
    .airline-item {
        justify-content: space-between; /* Space out items if stacked */
    }
}










/* ============================================ */
/* PACKAGE DETAILS PAGE STYLES */
/* ============================================ */

/* --- 1. Package Hero Section --- */
/* --- 1. Package Hero Section - FIX APPLIED --- */
#package-hero {
    /* FIX: Added large top padding to push content down past a fixed navbar.
       Adjust 8rem (approx 128px) if your navbar is taller or shorter. */
    padding: 8rem 2rem 3rem; 
    
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

#package-hero .package-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}
/* ... (rest of the package-hero styles remain the same) ... */

#package-hero .package-name {
    font-size: 2.2rem;
    color: #333;
    font-weight: 700;
}

#package-hero .duration {
    font-size: 1.4rem;
    font-weight: 400;
    color: #000078;
    margin-left: 15px;
}

#package-hero .rating {
    font-size: 1.1rem;
    color: #fdd835;
}

#package-hero .rating span {
    font-size: 0.9rem;
    color: #666;
    margin-left: 5px;
}

.gallery-main {
    display: flex;
    gap: 20px;
}

.main-photo {
    flex-basis: 75%;
    height: 500px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.gallery-thumbs {
    flex-basis: 25%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gallery-thumbs .thumb {
    width: 100%;
    height: 117.5px; /* (500px - 30px gap) / 4 */
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s, border 0.2s;
    border: 3px solid transparent;
}

.gallery-thumbs .thumb.active,
.gallery-thumbs .thumb:hover {
    opacity: 1;
    border-color: #000078;
}

.booking-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding: 1.5rem;
    background-color: #f9f9f9;
    border-radius: 10px;
    border: 1px solid #eee;
}

.price-box .label {
    display: block;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 5px;
}

.price-box .price {
    font-size: 2.5rem;
    font-weight: 800;
    color: #000078;
}

.price-box .per-person {
    font-size: 1rem;
    color: #666;
    margin-left: 10px;
}

.cta-actions button {
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-left: 15px;
}

.btn-book-now {
    background-color: #000078;
    color: #fff;
}

.btn-enquiry {
    background-color: #eee;
    color: #333;
}


/* --- 2. Package Details Content --- */
#package-content {
    padding: 3rem 2rem;
    background-color: #fcfcfc;
}

.package-grid {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.details-main {
    flex: 3;
}

.details-sidebar {
    flex: 1;
}

.details-main h2 {
    font-size: 1.8rem;
    color: #0d1e44;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #000078;
    padding-bottom: 5px;
}

.description-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 2rem;
}

.highlights {
    padding: 2rem;
    background-color: #eff3f7;
    border-left: 5px solid #000078;
    border-radius: 8px;
    margin-bottom: 3rem;
}

.highlights h3 {
    font-size: 1.4rem;
    color: #0d1e44;
    margin-bottom: 1rem;
}

.highlights ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.highlights li {
    font-size: 1rem;
    color: #333;
}

.highlights li i {
    color: #4CAF50; /* Green checkmark */
    margin-right: 8px;
}

/* Itinerary */
.itinerary-day {
    border-left: 3px solid #ccc;
    padding-left: 20px;
    position: relative;
    margin-bottom: 30px;
}

.itinerary-day::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    width: 15px;
    height: 15px;
    background-color: #000078;
    border-radius: 50%;
}

.itinerary-day .day-number {
    display: block;
    font-weight: 700;
    color: #000078;
    font-size: 0.9rem;
}

.itinerary-day h4 {
    font-size: 1.2rem;
    color: #333;
    margin: 5px 0;
}

.itinerary-day p {
    color: #555;
}

/* Sidebar Info Box (Sticky) */
.sticky-box {
    position: sticky;
    top: 20px; /* Adjust sticky position */
    background-color: #fff;
    border: 1px solid #e0e0e0;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.sticky-box h2 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #0d1e44;
}

.info-list {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.info-list li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    color: #333;
}

.info-list li i {
    color: #000078;
    margin-right: 10px;
    width: 20px;
    text-align: center;
}

.btn-book-sidebar {
    width: 100%;
    padding: 1rem;
    background-color: #0d1e44;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}


/* --- 3. Reviews Section --- */
#customer-reviews {
    padding: 3rem 2rem;
    background-color: #f5f5f5;
}

.review-form-box {
    background-color: #fff;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 3rem;
}

.review-form-box h3 {
    margin-bottom: 1.5rem;
    color: #0d1e44;
    font-size: 1.5rem;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
}

textarea {
    width: 100%;
    min-height: 120px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    resize: vertical;
}

/* Star Rating System CSS */
.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
}
.star-rating input {
    display: none;
}
.star-rating label {
    font-size: 30px;
    color: #ccc;
    cursor: pointer;
    transition: color 0.2s;
}
.star-rating input:checked ~ label {
    color: #fdd835;
}
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: #fdd835;
}

.btn-submit-review {
    background-color: #000078;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
}


.reviews-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.review-card {
    background-color: #fff;
    padding: 1.5rem;
    border-radius: 10px;
    border: 1px solid #eee;
}

.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.review-header h4 {
    color: #333;
    font-size: 1.1rem;
}

.review-stars i {
    color: #fdd835;
    font-size: 0.9rem;
}

.reviewer-name {
    font-style: italic;
    color: #888;
    font-size: 0.85rem;
    margin-bottom: 10px;
}

/* --- 4. Suggested Packages (Reuses deal-grid CSS) --- */
#suggested-packages {
    padding: 4rem 2rem;
    background-color: #fff;
}
#suggested-packages .deal-grid {
    grid-template-columns: repeat(3, 1fr); /* 3 packages across */
    gap: 30px;
}


/* --- Responsive Adjustments for Package Page --- */
@media screen and (max-width: 1024px) {
    .package-grid {
        flex-direction: column;
    }
    .details-sidebar {
        width: 100%;
    }
    .sticky-box {
        position: static;
        top: 0;
    }
    .highlights ul {
        grid-template-columns: 1fr;
    }
    #suggested-packages .deal-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    #package-hero .package-header {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 1rem;
    }
    #package-hero .duration {
        margin-left: 0;
        margin-top: 5px;
    }
    #package-hero .rating {
        margin-top: 10px;
    }
    .gallery-main {
        flex-direction: column;
    }
    .main-photo {
        height: 300px;
    }
    .gallery-thumbs {
        flex-direction: row;
        overflow-x: auto;
    }
    .gallery-thumbs .thumb {
        min-width: 80px;
        height: 80px;
    }
    .booking-summary {
        flex-direction: column;
        text-align: center;
    }
    .cta-actions {
        margin-top: 15px;
    }
    .cta-actions button {
        margin: 5px 10px;
        width: 90%;
    }
    #suggested-packages .deal-grid {
        grid-template-columns: 1fr;
    }
}












/* ============================================ */
/* VISA SERVICE PAGE STYLES - FIXED LAYOUT      */
/* ============================================ */

/* --- Global Container Fix --- */
/* This ensures all content inside a 'container' has safe spacing from edges */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem; /* 32px gap on left and right */
}

/* --- Intro Section --- */
#visa-intro {
    padding: 4rem 0;
    background-color: #fff;
}

#visa-intro h1 {
    font-size: 3rem;
    color: #2c0b4a;
    margin-bottom: 2rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
}

.visa-subtitle {
    font-size: 1.3rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1.5rem;
}

.visa-text {
    max-width: 900px; /* Improves readability so lines aren't too long */
}

.visa-text p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 1.5rem;
}

/* Layout for the 4 features */
.visa-features-grid {
    display: grid;
    /* Forces exactly 4 columns of equal width */
    grid-template-columns: repeat(4, 1fr); 
    gap: 15px; /* Reduced gap slightly to fit better on one line */
    margin-top: 40px;
    width: 100%;
    align-items: start; /* Ensures all icons stay at the top level */
}

.v-feature-item {
    background: #fff;
    padding: 15px; /* Reduced padding slightly */
    border-radius: 8px;
    text-align: left;
    display: flex;
    flex-direction: column;
}

.v-icon {
    font-size: 2rem; /* Slightly smaller to save space */
    color: #6a1b9a;
    margin-bottom: 12px;
}

.v-content h3 {
    font-size: 1rem; /* Smaller font ensures title doesn't wrap too much */
    color: #6a1b9a;
    margin-bottom: 8px;
    min-height: 2.5em; /* Keeps titles aligned even if one is 2 lines long */
}

.v-content p {
    font-size: 0.85rem;
    color: #555;
    line-height: 1.4;
}

/* To ensure it doesn't look broken on small screens */
@media (max-width: 992px) {
    .visa-features-grid {
        grid-template-columns: repeat(2, 1fr); /* 2x2 grid on tablets */
    }
}

@media (max-width: 600px) {
    .visa-features-grid {
        grid-template-columns: 1fr; /* 1 column on phones */
    }
}


/* --- Visa Guides Section (Updated Flag Styles) --- */
#visa-guides {
    padding: 4rem 0;
    background-color: #fdfdfd; /* Slight contrast */
}

.section-title-left {
    font-size: 2.5rem;
    color: #2c0b4a;
    margin-bottom: 2.5rem;
}

.guides-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.country-list {
    list-style: none;
    padding: 0;
}

.country-list li {
    margin-bottom: 18px;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    border-bottom: 1px dashed #eee; /* Adds a nice separator line */
    padding-bottom: 10px;
}

.flag-img { /* NEW STYLE FOR IMAGE FLAGS */
    width: 30px; /* Fixed width */
    height: 20px; /* Fixed height for consistency */
    object-fit: cover; /* Ensures image covers area without stretching */
    border: 1px solid #ccc; /* Subtle border for definition */
    border-radius: 3px; /* Slightly rounded corners */
    margin-right: 15px;
    flex-shrink: 0; /* Prevent image from shrinking on smaller screens */
}

.country-list strong {
    color: #000;
    margin-right: 8px;
    min-width: 120px; /* Aligns the visa types neatly */
}

.country-list a {
    color: #e91e63;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.country-list a:hover {
    text-decoration: underline;
    color: #c2185b;
}

/* --- How to Apply (Centered Box Design) --- */
#how-to-apply-section {
    padding: 4rem 0 6rem 0; /* Bottom padding for space before footer */
    background-color: #fff;
}

.apply-box {
    background-color: #e3f2fd; /* Light Blue Background */
    border-radius: 20px; /* Round corners */
    padding: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Soft shadow */
    max-width: 1100px; /* Constrain width so it looks like a box */
    margin: 0 auto; /* Center the box itself */
}

.apply-text h2 {
    font-size: 2.5rem;
    color: #2c0b4a;
    margin-bottom: 0.5rem;
}

.apply-text p {
    font-size: 1.2rem;
    color: #444;
    font-weight: 500;
}

.btn-call-action {
    background-color: #fff;
    color: #0d1e44;
    font-weight: 700;
    padding: 16px 32px;
    border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    font-size: 1.1rem;
    display: inline-block;
}

.btn-call-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    color: #000078;
}


/* --- Responsive Design for Visa Page --- */
@media screen and (max-width: 900px) {
    .visa-features-grid {
        grid-template-columns: 1fr; /* Stack icons vertically */
        gap: 40px;
    }
    
    .guides-wrapper {
        grid-template-columns: 1fr; /* Single column for countries */
    }
    
    .apply-box {
        flex-direction: column; /* Stack text and button */
        text-align: center;
        gap: 2rem;
        padding: 2rem;
    }
    
    #visa-intro h1 {
        font-size: 2.2rem;
    }
}














/* ============================================ */
/* VISA DETAILS PAGE (NEW ZEALAND STYLE)        */
/* ============================================ */

#visa-details-page {
    padding: 3rem 0 5rem;
    background-color: #fff;
}

/* --- Header with Flag --- */
.vd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 1.5rem;
    margin-bottom: 3rem;
}

.vd-header h1 {
    font-size: 2.2rem;
    color: #2c0b4a; /* Dark Theme Color */
    margin: 0;
}

.vd-flag {
    height: 40px;
    width: auto;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* --- Icon Info Row --- */
.vd-info-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Equal columns */
    gap: 30px;
    margin-bottom: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid #eee;
}

.vd-info-item {
    display: flex;
    align-items: flex-start;
}

.vd-icon {
    font-size: 2rem;
    margin-right: 15px;
    color: #000;
    min-width: 40px; /* Keeps icon alignment steady */
}

.vd-text h4 {
    color: #5c2b2b; /* Brownish/Red title color from image */
    margin-bottom: 5px;
    font-size: 1.1rem;
    font-weight: 700;
}

.vd-text p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.4;
}

/* --- Sections (Eligibility & Docs) --- */
.vd-section {
    margin-bottom: 3rem;
}

.vd-section h2 {
    font-size: 1.8rem;
    color: #2c0b4a;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

/* --- Custom List with Arrow Bullets --- */
.vd-list {
    list-style: none; /* Remove default dots */
    padding: 0;
}

.vd-list li {
    position: relative;
    padding-left: 25px; /* Space for the arrow */
    margin-bottom: 10px;
    font-size: 1rem;
    color: #333;
    line-height: 1.6;
}

.vd-list li::before {
    content: '→'; /* The arrow symbol */
    position: absolute;
    left: 0;
    color: #5c2b2b; /* Match the header color */
    font-weight: bold;
}

/* --- Footer Note --- */
.vd-footer-note {
    margin-top: 4rem;
    padding-top: 1rem;
    border-top: 2px solid #eee;
    font-style: italic;
    font-size: 0.85rem;
    color: #777;
}

/* --- Responsive --- */
@media screen and (max-width: 900px) {
    .vd-header {
        flex-direction: column-reverse; /* Flag on top on mobile, or keep as is */
        align-items: flex-start;
        gap: 15px;
    }
    
    .vd-info-row {
        grid-template-columns: 1fr; /* Stack icons */
        gap: 30px;
    }
    
    .vd-header h1 {
        font-size: 1.8rem;
    }
}














/* ============================================ */
/* COMPANY PROFILE PAGE STYLES                  */
/* ============================================ */

/* --- Hero Section --- */
#cp-hero {
    position: relative;
    height: 60vh; /* Takes up 60% of screen height */
    background-image: url('https://images.unsplash.com/photo-1488646953014-85cb44e25828?q=80&w=2070&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.cp-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 30, 68, 0.6); /* Navy overlay */
    z-index: 1;
}

.cp-hero-content {
    position: relative;
    z-index: 2;
}

.cp-hero-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    letter-spacing: 1px;
}

.cp-hero-content p {
    font-size: 1.2rem;
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto;
}

/* --- Our Story Section --- */
#cp-story {
    padding: 6rem 0;
    background-color: #fff;
}

.story-grid {
    display: flex;
    align-items: center;
    gap: 60px;
}

.story-images {
    flex: 1;
    position: relative;
    height: 450px;
}

.img-main {
    width: 80%;
    height: 85%;
    object-fit: cover;
    border-radius: 15px;
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.img-sub {
    width: 60%;
    height: 60%;
    object-fit: cover;
    border-radius: 15px;
    position: absolute;
    bottom: 0;
    right: 0;
    border: 5px solid #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 3;
}

.story-text {
    flex: 1;
}

.pre-title {
    color: #118cff;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.story-text h2 {
    font-size: 2.5rem;
    color: #118cff;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.story-text p {
    color: #666;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.signature-text {
    font-family: 'cursive', sans-serif; /* Or use an actual font if loaded */
    font-size: 1.5rem;
    color: #118cff;
    font-weight: 600;
}

/* --- Stats Bar --- */
#cp-stats {
    background-color: #0d1e44; /* Dark Navy */
    padding: 3rem 0;
    color: #fff;
}

.stats-wrapper {
    display: flex;
    justify-content: space-around;
    text-align: center;
    flex-wrap: wrap;
}

.stat-number {
    display: block;
    font-size: 3rem;
    font-weight: 800;
    color: #118cff; /* Orange accent */
    margin-bottom: 5px;
}

.stat-label {
    font-size: 1.1rem;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Mission & Vision --- */
#cp-mission-vision {
    padding: 6rem 0;
    background-color: #f4f7fa;
}

.mv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.mv-card {
    background-color: #fff;
    padding: 3rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.mv-card:hover {
    transform: translateY(-5px);
}

.mv-card .mv-icon {
    font-size: 2.5rem;
    color: #118cff;
    margin-bottom: 1.5rem;
}

.mv-card h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #118cff;
}

.mv-card p {
    color: #666;
    line-height: 1.6;
}

.highlight-card {
    background-color: #0d1e44; /* Navy bg for Vision */
    color: #fff;
}

.highlight-card .mv-icon, 
.highlight-card h3 {
    color: #118cff; /* Orange accents on dark card */
}

.highlight-card p {
    color: #ddd;
}

/* --- Team Section --- */
#cp-team {
    padding: 6rem 0;
    background-color: #fff;
}

.section-header-center {
    text-align: center;
    margin-bottom: 4rem;
}

.section-header-center h2 {
    font-size: 2.5rem;
    color: #0d1e44;
    margin-bottom: 10px;
}

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

.team-card {
    background-color: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    text-align: center;
    transition: transform 0.3s ease;
}

.team-card:hover {
    transform: translateY(-10px);
}

.team-img {
    height: 300px;
    overflow: hidden;
}

.team-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.team-card:hover .team-img img {
    transform: scale(1.1);
}

.team-info {
    padding: 1.5rem;
}

.team-info h3 {
    font-size: 1.3rem;
    color: #0d1e44;
    margin-bottom: 5px;
}

.team-info span {
    display: block;
    color: #000078;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.team-socials a {
    color: #888;
    margin: 0 8px;
    font-size: 1.1rem;
    transition: color 0.3s;
}

.team-socials a:hover {
    color: #0d1e44;
}

/* --- Responsive Profile Page --- */
@media screen and (max-width: 900px) {
    .story-grid {
        flex-direction: column;
    }
    .story-images {
        width: 100%;
        margin-bottom: 20px;
    }
    .mv-grid {
        grid-template-columns: 1fr;
    }
    .team-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
    .cp-hero-content h1 {
        font-size: 2.5rem;
    }
    .stat-item {
        flex-basis: 50%;
        margin-bottom: 20px;
    }
}















/* ============================================ */
/* MISSION PAGE STYLES                          */
/* ============================================ */

/* --- Hero Section --- */
#mission-hero {
    position: relative;
    height: 50vh; /* 50% viewport height */
    background-image: url('https://images.unsplash.com/photo-1469474968028-56623f02e42e?q=80&w=2074&auto=format&fit=crop'); /* Hiking image */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.mission-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Dark overlay for text pop */
    z-index: 1;
}

.mission-hero-content {
    position: relative;
    z-index: 2;
}

.hero-subtitle {
    display: block;
    font-size: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #4cacfa; /* Orange Accent */
    font-weight: 700;
    margin-bottom: 10px;
}

.mission-hero-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin: 0;
}

/* --- Mission Statement Section --- */
#mission-statement {
    padding: 5rem 0;
    background-color: #fff;
}

.statement-box {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

.quote-icon {
    font-size: 3rem;
    color: #e3f2fd; /* Very light blue background icon */
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

.statement-box h2 {
    position: relative;
    z-index: 1;
    font-size: 1.8rem;
    font-weight: 600; /* Semi-bold */
    line-height: 1.6;
    color: #0d1e44;
    font-style: italic;
}

.divider-line {
    width: 80px;
    height: 4px;
    background-color: #000078;
    margin: 30px auto 0;
    border-radius: 2px;
}

/* --- Core Values Grid --- */
#core-values {
    padding: 5rem 0;
    background-color: #f8f9fa; /* Light Grey */
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 3rem;
}

.value-card {
    background-color: #fff;
    padding: 2.5rem;
    border-radius: 15px;
    border: 1px solid #eee;
    transition: transform 0.3s, box-shadow 0.3s;
}

.value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-color: #000078; /* Orange border on hover */
}

.v-icon-box {
    width: 60px;
    height: 60px;
    background-color: #fff0ec; /* Light orange bg */
    color: #000078;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.value-card h3 {
    font-size: 1.4rem;
    color: #0d1e44;
    margin-bottom: 10px;
}

.value-card p {
    color: #666;
    line-height: 1.6;
}

/* --- What Drives Us (Split Layout) --- */
#mission-drive {
    padding: 6rem 0;
    background-color: #fff;
}

.drive-container {
    display: flex;
    align-items: center;
    gap: 60px;
}

.drive-content {
    flex: 1;
}

.drive-content h3 {
    font-size: 2.5rem;
    color: #0d1e44;
    margin-bottom: 1.5rem;
}

.drive-content p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
}

.drive-list {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.drive-list li {
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 12px;
    font-weight: 600;
}

.drive-list li i {
    color: #27ae60; /* Green Checkmark */
    margin-right: 12px;
    background-color: #e8f8f5;
    padding: 5px;
    border-radius: 50%;
    font-size: 0.8rem;
}

.drive-image {
    flex: 1;
    height: 450px;
}

.drive-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px; /* Different rounding for visual interest */
    box-shadow: 20px 20px 0px rgba(255, 99, 71, 0.1); /* Abstract shadow effect */
}

/* --- Responsive Mission Page --- */
@media screen and (max-width: 900px) {
    .values-grid {
        grid-template-columns: 1fr; /* Stack cards */
    }
    .drive-container {
        flex-direction: column-reverse; /* Image on top on mobile */
        gap: 30px;
    }
    .drive-image {
        width: 100%;
        height: 300px;
    }
    .mission-hero-content h1 {
        font-size: 2.5rem;
    }
    .statement-box h2 {
        font-size: 1.4rem;
    }
}















/* ============================================ */
/* CEO MESSAGE PAGE STYLES                      */
/* ============================================ */

/* --- Simple Header --- */
#ceo-header {
    background-color: #f4f7fa;
    padding: 3rem 0;
    border-bottom: 1px solid #e0e0e0;
}

#ceo-header h1 {
    font-size: 2.5rem;
    color: #0d1e44;
    margin-bottom: 5px;
}

.breadcrumb {
    font-size: 0.9rem;
    color: #666;
}

/* --- Main Content Area --- */
#ceo-content {
    padding: 5rem 0;
    background-color: #fff;
}

.ceo-grid {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

/* Left Column: Image & Tag */
.ceo-profile-col {
    flex: 0.8; /* Takes slightly less width */
    position: sticky; /* Keeps image visible while scrolling text */
    top: 100px;
}

.image-frame {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 20px 20px 0px rgba(13, 30, 68, 0.05); /* Subtle offset shadow */
    margin-bottom: 30px;
}

.image-frame img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.ceo-tag {
    background-color: #0d1e44;
    color: #fff;
    padding: 20px;
    text-align: center;
}

.ceo-tag h3 {
    font-size: 1.4rem;
    margin-bottom: 5px;
}

.ceo-tag span {
    font-size: 0.9rem;
    color: #3bbaff; /* Orange accent */
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ceo-quote-card {
    background-color: #fff;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.ceo-quote-card i {
    color: #000078;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.ceo-quote-card p {
    font-family: 'Georgia', serif;
    font-style: italic;
    color: #555;
}

/* Right Column: Text */
.ceo-text-col {
    flex: 1.2;
}

.welcome-text {
    color: #000078;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: 0.9rem;
    margin-bottom: 10px;
    display: block;
}

.ceo-text-col h2 {
    font-size: 2.5rem;
    color: #0d1e44;
    line-height: 1.2;
    margin-bottom: 2rem;
}

.letter-body p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 1.5rem;
}

/* Blockquote styling */
.highlight-quote {
    border-left: 4px solid #000078;
    padding-left: 20px;
    margin: 2rem 0;
    font-size: 1.3rem;
    font-weight: 600;
    color: #0d1e44;
    font-style: italic;
    background-color: #fffbfb;
    padding: 20px;
    border-radius: 0 10px 10px 0;
}

/* Signature Styling */
.signature-block {
    margin-top: 3rem;
}

.signature-font {
    font-family: 'Great Vibes', cursive; /* Handwritten style */
    font-size: 2.5rem;
    color: #70a2ff;
    margin-bottom: 5px;
}

.designation {
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    font-size: 0.85rem;
}

/* --- Promises Section (Bottom Bar) --- */
#ceo-promises {
    padding: 4rem 0;
    background-color: #0d1e44;
    color: #fff;
    margin-top: 2rem;
}

.promise-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    text-align: center;
}

.promise-item i {
    font-size: 2.5rem;
    color: #3989f1;
    margin-bottom: 1rem;
}

.promise-item h4 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.promise-item p {
    color: #ccc;
    font-size: 0.9rem;
}

/* --- Responsive --- */
@media screen and (max-width: 900px) {
    .ceo-grid {
        flex-direction: column;
    }
    
    .ceo-profile-col {
        position: static; /* Remove sticky on mobile */
        width: 100%;
        margin-bottom: 2rem;
    }
    
    .promise-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .ceo-text-col h2 {
        font-size: 2rem;
    }
}















/* ============================================ */
/* VISION PAGE STYLES                           */
/* ============================================ */

/* --- Hero Section --- */
#vision-hero {
    position: relative;
    height: 60vh;
    background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=2072&auto=format&fit=crop'); /* Futuristic/Earth view */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.vision-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(13, 30, 68, 0.9), rgba(255, 99, 71, 0.3)); /* Creative Gradient */
    z-index: 1;
}

.vision-hero-content {
    position: relative;
    z-index: 2;
}

.vision-tag {
    background-color: #000078;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-bottom: 15px;
    display: inline-block;
}

.vision-hero-content h1 {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.vision-hero-content p {
    font-size: 1.3rem;
    font-weight: 300;
    max-width: 700px;
    margin: 0 auto;
}

/* --- Vision Statement Box --- */
#vision-statement {
    padding: 6rem 0;
    background-color: #fff;
}

.vision-box-center {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    border: 2px solid #f0f0f0;
    padding: 4rem 2rem;
    border-radius: 20px;
    position: relative;
    background: #fff;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

.icon-crown {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    background-color: #0d1e44;
    color: #ffd700; /* Gold */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    border: 5px solid #fff;
}

.vision-box-center h2 {
    font-size: 2rem;
    color: #0d1e44;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.vision-text {
    font-size: 1.5rem;
    line-height: 1.6;
    color: #555;
    font-weight: 300;
    font-style: italic;
}

/* --- Strategic Pillars --- */
#vision-pillars {
    padding: 6rem 0;
    background-color: #f9f9f9;
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 3rem;
}

.pillar-card {
    background-color: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s;
    position: relative;
}

.pillar-card:hover {
    transform: translateY(-10px);
}

.pillar-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    filter: brightness(0.5);
}

.pillar-content {
    padding: 2rem;
    text-align: center;
    margin-top: -40px;
    position: relative;
}

.pillar-content i {
    width: 60px;
    height: 60px;
    background-color: #000078;
    color: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    margin: 0 auto 1.5rem;
    border: 4px solid #fff;
}

.pillar-content h3 {
    font-size: 1.3rem;
    margin-bottom: 10px;
    color: #0d1e44;
}

.pillar-content p {
    font-size: 0.9rem;
    color: #666;
}

/* --- Roadmap / Timeline --- */
#vision-roadmap {
    padding: 6rem 0;
    background-color: #fff;
}

.roadmap-header {
    text-align: center;
    margin-bottom: 4rem;
}

.roadmap-header h2 {
    font-size: 2.5rem;
    color: #0d1e44;
    position: relative;
    display: inline-block;
}

.timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

/* The Central Line */
.timeline::after {
    content: '';
    position: absolute;
    width: 4px;
    background-color: #000078;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
}

.timeline-item {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
}

/* Left and Right Containers */
.timeline-item.left {
    left: 0;
}

.timeline-item.right {
    left: 50%;
}

/* The Dots */
.timeline-item::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    right: -10px; /* Fix for left items */
    background-color: #fff;
    border: 4px solid #0d1e44;
    top: 25px;
    border-radius: 50%;
    z-index: 1;
}

/* Fix dot for right items */
.timeline-item.right::after {
    left: -10px;
}

.timeline-item .content {
    padding: 20px 30px;
    background-color: #fff;
    position: relative;
    border-radius: 10px;
    border: 1px solid #eee;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}

.timeline-item:hover .content {
    transform: scale(1.03);
    border-color: #000078;
}

.timeline-item h3 {
    color: #000078;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 5px;
}

.timeline-item h4 {
    color: #0d1e44;
    margin-bottom: 10px;
}

/* --- Responsive Timeline --- */
@media screen and (max-width: 768px) {
    .vision-hero-content h1 {
        font-size: 2.5rem;
    }
    
    .pillars-grid {
        grid-template-columns: 1fr;
    }

    /* Timeline Mobile Fix */
    .timeline::after {
        left: 31px;
    }
    
    .timeline-item {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }
    
    .timeline-item.left, .timeline-item.right {
        left: 0;
    }
    
    .timeline-item.left::after, .timeline-item.right::after {
        left: 21px;
    }
}
















/* ============================================ */
/* AIR TICKETS PAGE STYLES                      */
/* ============================================ */

/* --- Hero Section --- */
#flight-hero {
    position: relative;
    height: 450px;
    background-image: url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?q=80&w=2074&auto=format&fit=crop'); /* Airplane wing */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.flight-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(13,30,68,0.4), rgba(13,30,68,0.8));
    z-index: 1;
}

.flight-hero-content {
    position: relative;
    z-index: 1;
    margin-bottom: 60px; /* Push text up to make room for search box */
}

.flight-hero-content h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 10px;
}

.flight-hero-content p {
    font-size: 1.2rem;
    opacity: 0.9;
}



/* --- Flight Features Row --- */
#flight-features {
    padding: 2rem 0 4rem;
    border-bottom: 1px solid #eee;
}

.features-row {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 20px;
}

.f-item {
    display: flex;
    align-items: center;
    gap: 15px;
}

.f-icon {
    width: 50px;
    height: 50px;
    background-color: #e3f2fd;
    color: #0d1e44;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
}

.f-text h4 {
    font-size: 1.1rem;
    color: #0d1e44;
    margin-bottom: 2px;
}

.f-text p {
    font-size: 0.9rem;
    color: #666;
}

/* --- Trending Routes Grid --- */
#trending-flights {
    padding: 4rem 0;
    background-color: #f9f9f9;
}

.flight-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 2rem;
}

.flight-card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
}

.flight-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.fc-image {
    height: 180px;
    position: relative;
}

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

.fc-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #000078;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
}

.fc-details {
    padding: 1.2rem;
    flex-grow: 1;
}

.fc-route h3 {
    font-size: 1.1rem;
    color: #0d1e44;
    margin-bottom: 5px;
}

.fc-route span {
    font-size: 0.85rem;
    color: #888;
    display: block;
    margin-bottom: 15px;
}

.fc-price p {
    font-size: 0.8rem;
    color: #666;
}

.fc-price h4 {
    font-size: 1.4rem;
    color: #000078;
    font-weight: 800;
}

.fc-btn {
    display: block;
    text-align: center;
    background-color: #f0f4f8;
    color: #0d1e44;
    padding: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s;
}

.fc-btn:hover {
    background-color: #0d1e44;
    color: #fff;
}

/* --- Airline Partners Row --- */
#airline-partners-row {
    padding: 3rem 0;
    background-color: #fff;
    text-align: center;
    color: #ccc;
}

#airline-partners-row h3 {
    color: #ddd;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

.logos-wrapper {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    align-items: center;
    font-weight: 700;
    font-size: 1.2rem;
}

/* --- Responsive --- */
@media screen and (max-width: 1024px) {
    .form-grid {
        grid-template-columns: 1fr 1fr; /* Stack inputs */
    }
    .search-action {
        margin-top: 20px;
        text-align: center;
    }
    .flight-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr; /* Single column inputs */
    }
    .features-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .flight-grid {
        grid-template-columns: 1fr;
    }
    .flight-hero-content h1 {
        font-size: 2.5rem;
    }
}


/* ============================================ */
/* FLIGHT CONSULTATION FORM STYLES            */
/* ============================================ */

#flight-query-form {
    /* CHANGED: Removed top padding so the card can move up freely */
    padding: 0 0 6rem 0; 
    
    /* Keep the background color, this will appear nicely behind the bottom half of the card */
    background-color: #f4f7fa; 
    
    /* REQUIRED: Ensures this section has a stacking context */
    position: relative; 
}

.query-card {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 15px 40px rgba(13, 30, 68, 0.1);
    padding: 3rem;

    /* NEW: This pulls the card UP over the previous section */
    margin-top: -120px; 
    
    /* NEW: Ensures the card sits ON TOP of the banner image */
    position: relative; 
    z-index: 10; 
}

/* ... (Keep your internal form styles below as they were) ... */

.query-header {
    text-align: center;
    margin-bottom: 2rem;
}

.query-header h2 {
    font-size: 2rem;
    color: #0d1e44;
    margin-bottom: 10px;
}

.query-header p {
    color: #666;
    font-size: 1.1rem;
}

.form-section-title {
    font-size: 1.25rem;
    color: #000078;
    font-weight: 700;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin: 2rem 0 1.5rem;
}

.form-section-title i {
    margin-right: 10px;
}

.consultation-form .form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.consultation-form .input-group {
    margin-bottom: 0; 
}

.consultation-form .input-group.full-width {
    grid-column: 1 / -1; 
}

.consultation-form label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #0d1e44;
    margin-bottom: 5px;
}

.consultation-form input[type="text"],
.consultation-form input[type="tel"],
.consultation-form input[type="email"],
.consultation-form input[type="date"],
.consultation-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    color: #333;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.consultation-form input:focus,
.consultation-form textarea:focus {
    border-color: #000078;
    box-shadow: 0 0 0 3px rgba(255, 99, 71, 0.15);
    outline: none;
}

.consultation-form textarea {
    resize: vertical;
}

.submit-action {
    margin-top: 2rem;
    text-align: center;
}

.btn-submit-query {
    background-color: #0d1e44;
    color: #fff;
    border: none;
    padding: 15px 40px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.btn-submit-query:hover {
    background-color: #000078;
    transform: translateY(-2px);
}

/* --- Responsive Query Form --- */
@media screen and (max-width: 768px) {
    .query-card {
        padding: 1.5rem;
        /* OPTIONAL: On mobile, you might want to reduce the overlap 
           so it doesn't cover important text */
        margin-top: -60px; 
    }
    
    .consultation-form .form-grid-2 {
        grid-template-columns: 1fr; 
    }
    
    .query-header h2 {
        font-size: 1.6rem;
    }
    
    .btn-submit-query {
        width: 100%;
    }
}












/* ============================================ */
/* BLOG PAGE STYLES - GLASSMORPHISM             */
/* ============================================ */

/* --- Blog Hero --- */
#blog-hero {
    background-color: #0d1e44;
    color: #fff;
    padding: 4rem 0;
    text-align: center;
}

#blog-hero h1 {
    font-size: 3rem;
    margin-bottom: 10px;
}

#blog-hero p {
    font-size: 1.2rem;
    color: #ccc;
}

/* --- Blog Grid Section --- */
#blog-grid-section {
    position: relative;
    padding: 5rem 0;
    /* Colorful gradient background to show off the glass effect */
    background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
    overflow: hidden;
}

/* Background Blobs for Glass Effect */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    z-index: 0;
}

.blob-1 {
    top: 10%;
    left: 10%;
    width: 300px;
    height: 300px;
    background: rgba(255, 99, 71, 0.4); /* Orange */
}

.blob-2 {
    bottom: 20%;
    right: 10%;
    width: 400px;
    height: 400px;
    background: rgba(13, 30, 68, 0.3); /* Navy */
}

/* Grid Layout */
.glass-grid {
    display: grid;
    /* 4 Columns as requested */
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    position: relative;
    z-index: 1; /* Above blobs */
}

/* --- The Liquid Crystal / Glass Card --- */
.glass-card {
    /* Glass Effect Properties */
    background: rgba(255, 255, 255, 0.4); /* Semi-transparent white */
    backdrop-filter: blur(12px);          /* The "Frost" effect */
    -webkit-backdrop-filter: blur(12px);  /* Safari support */
    
    border: 1px solid rgba(255, 255, 255, 0.8); /* Subtle white border */
    border-radius: 16px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1); /* Soft color shadow */
    
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.glass-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px 0 rgba(31, 38, 135, 0.2);
    background: rgba(255, 255, 255, 0.6); /* Lighter on hover */
}

.glass-img {
    height: 180px;
    overflow: hidden;
    position: relative;
}

.glass-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.glass-card:hover .glass-img img {
    transform: scale(1.1);
}

.glass-content {
    padding: 1.5rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.blog-date {
    font-size: 0.75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 600;
}

.glass-content h3 {
    font-size: 1.2rem;
    color: #0d1e44;
    margin-bottom: 10px;
    line-height: 1.3;
}

/* Single line description logic */
.glass-content p {
    font-size: 0.9rem;
    color: #444;
    margin-bottom: 15px;

    /* Truncate to 2 lines max */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; /* <--- ADD SEMICOLON HERE */
    flex-grow: 1;
}

.read-more {
    font-size: 0.9rem;
    color: #000078;
    font-weight: 700;
    text-decoration: none;
    align-self: flex-start;
    transition: color 0.3s;
}

.read-more i {
    font-size: 0.8rem;
    margin-left: 5px;
    transition: transform 0.3s;
}

.read-more:hover {
    color: #e55337;
}

.read-more:hover i {
    transform: translateX(5px);
}

/* Pagination */
.pagination {
    margin-top: 3rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.pagination a {
    display: inline-block;
    padding: 8px 16px;
    margin: 0 5px;
    border: 1px solid #ddd;
    background: rgba(255,255,255,0.5);
    border-radius: 5px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s;
    backdrop-filter: blur(5px);
}

.pagination a.active, .pagination a:hover {
    background-color: #000078;
    color: #fff;
    border-color: #000078;
}

/* --- Responsive Blog Grid --- */
@media screen and (max-width: 1200px) {
    .glass-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 Cols */
    }
}

@media screen and (max-width: 900px) {
    .glass-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 Cols */
    }
}

@media screen and (max-width: 600px) {
    .glass-grid {
        grid-template-columns: 1fr; /* 1 Col */
    }
    #blog-hero h1 {
        font-size: 2.5rem;
    }
}

#load-more-btn {
    background: #000078;
    color: #fff;
    border: none;
    padding: 12px 25px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.3s;
}

#load-more-btn:hover {
    background: #e55337;
}












/* ============================================ */
/* GLOBAL STYLES & RESET                        */
/* ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fcfcfc;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* Global Container Utility */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================ */
/* NAVBAR STYLES                                */
/* ============================================ */
#main-header {
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 80px;
}

.header-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-logo {
    font-size: 1.8rem;
    font-weight: 800;
    color: #0d1e44;
    display: flex;
    align-items: center;
    gap: 8px;
}

.brand-logo i { color: #8c9eff; font-size: 1.4rem; transform: rotate(-45deg); }

.main-nav { flex-grow: 1; display: flex; justify-content: center; }

.nav-list { display: flex; gap: 25px; align-items: center; }

.nav-list li { position: relative; }

.nav-list a {
    color: #333;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.3s ease;
    padding: 10px 0;
    display: block;
}

.nav-list a:hover { color: #000078; }

/* Dropdown Menu */
.dropdown-trigger i { font-size: 0.75rem; margin-left: 4px; transition: transform 0.3s ease; }
.dropdown-item:hover .dropdown-trigger { color: #000078; }
.dropdown-item:hover .dropdown-trigger i { transform: rotate(180deg); }



.btn-study-abroad {
    background-color: #000078;
    color: #fff !important;
    padding: 0 30px;
    height: 80px;
    display: flex;
    align-items: center;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.95rem;
    margin-right: -20px;
    transition: background-color 0.3s ease;
}
.btn-study-abroad:hover { background-color: #e55337; }
.mobile-toggle { display: none; font-size: 1.5rem; color: #333; cursor: pointer; }

/* ============================================ */
/* GLOBAL STYLES & RESET                        */
/* ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fcfcfc;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ============================================ */
/* NAVBAR STYLES                                */
/* ============================================ */
#main-header {
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    height: 80px;
}

.header-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-logo {
    font-size: 1.8rem;
    font-weight: 800;
    color: #0d1e44;
    display: flex;
    align-items: center;
    gap: 8px;
}

.brand-logo i { color: #8c9eff; font-size: 1.4rem; transform: rotate(-45deg); }

.main-nav { flex-grow: 1; display: flex; justify-content: center; }

.nav-list { display: flex; gap: 25px; align-items: center; }

.nav-list li { position: relative; }

.nav-list a {
    color: #333;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.3s ease;
    padding: 10px 0;
    display: block;
}

.nav-list a:hover { color: #000078; }

/* Dropdown Menu */
.dropdown-trigger i { font-size: 0.75rem; margin-left: 4px; transition: transform 0.3s ease; }
.dropdown-item:hover .dropdown-trigger { color: #000078; }
.dropdown-item:hover .dropdown-trigger i { transform: rotate(180deg); }



.btn-study-abroad {
    background-color: #000078;
    color: #fff !important;
    padding: 0 30px;
    height: 80px;
    display: flex;
    align-items: center;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.95rem;
    margin-right: -20px;
    transition: background-color 0.3s ease;
}
.btn-study-abroad:hover { background-color: #e55337; }
.mobile-toggle { display: none; font-size: 1.5rem; color: #333; cursor: pointer; }









/* ============================================ */
/* CONTACT PAGE SPECIFIC STYLES                 */
/* ============================================ */

/* --- Hero Section --- */
#contact-hero {
    background-color: #0d1e44;
    color: #fff;
    padding: 4rem 0;
    text-align: center;
    /* FIX: Removes the top gap */
    margin-top: 0; 
    width: 100%;
}

/* FIX: Removes default browser margin from pushing content down */
#contact-hero h1 { 
    font-size: 3rem; 
    margin-bottom: 10px; 
    margin-top: 0; 
}

#contact-hero p { 
    font-size: 1.2rem; 
    color: #ccc; 
}

/* --- Contact Info Cards --- */
#contact-info { 
    padding: 5rem 0; 
    background-color: #f9f9f9; 
}

/* FIX: Ensures the container is wide enough for 4 cards */
#contact-info .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.info-grid {
    display: grid;
    /* FIX: Forces 4 columns in one line */
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px; /* Reduced gap slightly to fit all 4 comfortably */
    align-items: stretch; /* Ensures all cards are the same height */
}

.info-card {
    background-color: #fff;
    padding: 2.5rem 1.5rem;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
    border-bottom: 4px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%; /* Fills the grid height */
}

.info-card:hover {
    transform: translateY(-5px);
    border-bottom-color: #000078;
}

.icon-circle {
    width: 60px;
    height: 60px;
    background-color: #fff0ec;
    color: #000078;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    flex-shrink: 0; /* Prevents icon from squashing */
}

.info-card h3 { 
    font-size: 1.2rem; 
    color: #0d1e44; 
    margin-bottom: 15px; 
}

.info-card p { 
    color: #666; 
    font-size: 0.95rem; 
    margin-bottom: 5px; 
}

/* NEW: Blue Action Button Style */
.btn-action-blue {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #007bff; /* Standard Bright Blue */
    color: #fff !important;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: auto; /* Pushes button to bottom of card */
    transition: background-color 0.3s, transform 0.2s;
    text-decoration: none;
}

.btn-action-blue:hover {
    background-color: #0056b3; /* Darker blue on hover */
    transform: translateY(-2px);
}

.btn-action-blue i { font-size: 0.9rem; }

/* Social Icons */
.social-icons-row { 
    display: flex; 
    justify-content: center; 
    gap: 15px; 
    margin-top: auto; /* Pushes icons to bottom */
    padding-top: 15px;
}

.social-btn {
    width: 40px; 
    height: 40px; 
    border-radius: 50%;
    display: flex; 
    justify-content: center; 
    align-items: center;
    color: #fff; 
    font-size: 1.1rem; 
    transition: transform 0.2s;
}

.social-btn:hover { transform: scale(1.1); }
.social-btn.fb { background-color: #3b5998; }
.social-btn.inst { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.social-btn.x { background-color: #000; }
.social-btn.wa { background-color: #25D366; }

/* --- Contact Form Section --- */
#contact-form-section { 
    padding: 5rem 0 7rem; 
    background-color: #fff; 
}

.form-wrapper {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    border: 1px solid #f0f0f0;
}

.form-header { text-align: center; margin-bottom: 3rem; }
.form-header h2 { font-size: 2.2rem; color: #0d1e44; margin-bottom: 10px; }
.form-header p { color: #666; max-width: 600px; margin: 0 auto; }

/* Form Inputs */
.clean-form .input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 20px;
}

.clean-form .input-group { margin-bottom: 20px; }

.clean-form label {
    display: block;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.clean-form input, .clean-form select, .clean-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    color: #333;
    background-color: #fcfcfc;
    font-family: inherit;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.clean-form input:focus, .clean-form select:focus, .clean-form textarea:focus {
    border-color: #000078;
    outline: none;
    box-shadow: 0 0 0 4px rgba(255, 99, 71, 0.1);
    background-color: #fff;
}

.clean-form textarea { resize: vertical; }

.btn-submit-contact {
    display: block;
    width: 100%;
    background-color: #0d1e44;
    color: #fff;
    padding: 15px;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-top: 10px;
}

.btn-submit-contact:hover { background-color: #000078; }

/* ============================================ */
/* RESPONSIVE ADJUSTMENTS (REQUIRED)            */
/* ============================================ */

/* Tablet: 2 Cards per row */
@media (max-width: 992px) {
    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: 1 Card per row (Stacking) */
@media (max-width: 768px) {
    #contact-hero h1 { font-size: 2.2rem; }
    
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .clean-form .input-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .form-wrapper {
        padding: 1.5rem;
    }
}





/* 1. HIDE THE DEFAULT WORDPRESS PAGE TITLE */
/* This hides the text "Contact Us" that the theme creates automatically */
.page-header, 
.entry-header, 
.entry-title, 
.page-title, 
h1.page-title {
    display: none !important;
}

/* 2. REMOVE THEME CONTAINER PADDING */
/* Themes often put padding on the main container. We need to zero it out. */
#content, 
.site-content, 
.site-main, 
main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 3. ENSURE HERO SECTION TOUCHES THE TOP */
#contact-hero {
    margin-top: 0 !important;
    width: 100vw; /* Forces full width of the viewport */
    max-width: 100%;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw; /* This trick forces full-width even inside a container */
    margin-right: -50vw;
}

/* 4. RESET YOUR CARDS (Include this to keep them in one row) */
.info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Force 4 columns */
    gap: 15px;
    width: 100%;
}

/* Mobile Fix for Cards */
@media (max-width: 768px) {
    .info-grid { grid-template-columns: 1fr; }
    #contact-hero { 
        margin-left: 0; 
        margin-right: 0; 
        left: auto; 
        right: auto;
        width: 100%; 
    }
}



body.page-template-default #page {
    margin-top: 0 !important;
}
header.site-header {
    margin-bottom: 0 !important;
}










/* PREFIX: .hp- 
   This ensures these styles only apply to the Holiday Package section 
*/



/* Holiday Packages Hero Section */
#hp-hero {
    background-color: #0d1e44; /* The Navy Blue from your screenshot */
    color: #ffffff;
    padding: 4rem 0; /* Adjust padding for height */
    text-align: center;
    width: 100%;
}

.hp-hero-container h1 {
    font-size: 3rem;
    margin-bottom: 10px;
}

.hp-hero-container p {
    font-size: 1.2rem;
    color: #ccc;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
    .hp-hero-container h1 {
        font-size: 2.5rem;
    }
    #hp-hero {
        padding: 50px 15px;
    }
}




/* --- Global Wrapper --- */
.hp-main-wrapper {
    padding: 60px 0;
    background-color: #f9f9f9;
}

.hp-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}


/* --- Grid Layout --- */
.hp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Columns */
    gap: 25px;
}

/* --- Card Style --- */
.hp-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    border: 1px solid #eee;
    flex-direction: column;
}

.hp-card:hover { transform: translateY(-5px); }

.hp-card-img-wrap { height: 200px; overflow: hidden; }
.hp-card-img { width: 100%; height: 100%; object-fit: cover; }

.hp-card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}




.hp-card-content {
    flex-grow: 1; /* Pushes the button group to the very bottom */
    display: flex;
    flex-direction: column;
}

.hp-card-price {
    margin-top: auto; /* This acts as a spacer to keep buttons at the bottom */
    padding-top: 10px;
}




.hp-card-title {
    font-size: 1.25rem;
    line-height: 1.4;
    height: 2.8em; /* (1.4 line-height * 2 lines) ensures fixed height even if 1 line */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
}

.hp-duration {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 10px;
}

.hp-card-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    height: 4.5em; /* (1.5 line-height * 3 lines) ensures fixed height */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 15px;
    color: #555;
}

.hp-card-price {
    font-size: 1.3rem;
    font-weight: 800;
    color: #0d1e44; /* Match your brand navy */
    margin-top: auto; /* Pushes price to bottom */
    margin-bottom: 15px;
}

/* --- Buttons --- */
.hp-btn-group {
    display: flex;
    gap: 10px;
}

.hp-btn {
    flex: 1;
    text-align: center;
    padding: 10px 5px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: 0.3s;
}

.hp-btn-details {
    background: #f0f0f0;
    color: #333;
    border: 1px solid #ddd;
}

.hp-btn-details:hover { background: #e2e2e2; }

.hp-btn-book {
    background: #0d1e44; /* Branding Navy */
    color: #fff;
}

.hp-btn-book:hover { background: #e55337; } /* Reddish hover for action */

/* --- Pagination --- */
.hp-pagination {
    margin-top: 40px;
    text-align: center;
}

.hp-pagination a, .hp-pagination span {
    display: inline-block;
    padding: 8px 16px;
    margin: 0 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #0d1e44;
    background: #fff;
}

.hp-pagination .current {
    background: #0d1e44;
    color: #fff;
    border-color: #0d1e44;
}

/* --- Responsive --- */
@media (max-width: 1100px) { .hp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 850px) { .hp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 550px) { .hp-grid { grid-template-columns: 1fr; } }


@media (max-width: 900px) {
    .package-details-page .hp-container {
        grid-template-columns: 1fr !important; /* Stack columns */
    }
    
    .package-sidebar {
        order: 2;
    }
    
    .package-main-content {
        order: 1;
    }
}












/* =========================
   BLOG DETAILS PAGE
========================= */

.blog-details-wrapper {
    max-width: 1100px;
    margin: auto;
    padding: 40px 20px;
}

.blog-title {
    font-size: 36px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.blog-meta {
    font-size: 14px;
    color: #777;
    margin-bottom: 20px;
}

.blog-featured-image img {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 25px;
}

.blog-content {
    line-height: 1.8;
    font-size: 17px;
}


/* Headings inside blog ONLY */
.blog-content h1 {
    font-size: 34px;
    margin: 30px 0 15px;
}

.blog-content h2 {
    font-size: 28px;
    margin: 28px 0 14px;
}

.blog-content h3 {
    font-size: 22px;
    margin: 24px 0 12px;
}

.blog-content p {
    margin-bottom: 18px;
}

/* Gutenberg default blocks support */
.blog-content img {
    max-width: 100%;
    height: auto;
}

.blog-share {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.blog-share a,
.blog-share button {
    background: #222;
    color: #fff;
    padding: 8px 14px;
    border-radius: 5px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.blog-share a:hover,
.blog-share button:hover {
    background: #0073aa;
}



/* Gutenberg lists */
.blog-content ul,
.blog-content ol {
    padding-left: 20px;
    margin-bottom: 20px;
}

/* Gutenberg block spacing */
.blog-content .wp-block {
    margin-bottom: 25px;
}



/* Latest blogs */
.latest-blogs {
    margin-top: 70px;
}

.latest-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.latest-blog-card img {
    width: 100%;
    border-radius: 8px;
}

.latest-blog-card h3 {
    font-size: 18px;
    margin: 10px 0 5px;
}

.latest-blog-card span {
    font-size: 13px;
    color: #777;
}

/* =========================
   BLOG SHARE ICONS
========================= */

.blog-share {
    margin-top: 40px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.share-label {
    font-weight: 600;
    margin-right: 5px;
}

.share-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #222;
    color: #fff;
    font-size: 16px;
    transition: all 0.3s ease;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

/* Brand hover colors */
.share-icon.fb:hover { background: #1877f2; }
.share-icon.x:hover { background: #000; }
.share-icon.linkedin:hover { background: #0a66c2; }
.share-icon.whatsapp:hover { background: #25d366; }
.share-icon.instagram:hover {
    background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af);
}
.share-icon.copy-link:hover { background: #08e600; }

.share-icon i {
    pointer-events: none;
}














/* --- Blog Grid Layout --- */
.custom-blog-wrapper .container {
    max_width: 1400px; /* Wide container like the image */
    margin: 0 auto;
    padding: 0 20px;
}

.custom-blog-grid {
    display: grid;
    /* This creates the 4-column layout responsive */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 30px;
    margin-bottom: 50px;
}

/* --- Card Design --- */
.custom-card {
    background: #fff; /* White background */
    border-radius: 20px; /* High border radius like image */
    overflow: hidden; /* Keeps image inside rounded corners */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Soft shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.custom-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

/* --- Image Section --- */
.card-image-wrapper {
    width: 100%;
    height: 220px; /* Fixed height for uniformity */
    overflow: hidden;
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers area without stretching */
    transition: transform 0.5s ease;
}

.custom-card:hover .card-img {
    transform: scale(1.05); /* Slight zoom on hover */
}

/* --- Content Section --- */
.card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Pushes content to fill height */
    background: linear-gradient(to bottom, #fff 0%, #f9f9fa 100%); /* Subtle gradient like image */
}

/* Date */
.card-date {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

/* Title */
.card-title {
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
    margin: 0 0 15px 0;
    color: #1a1a2e; /* Dark blue/black */
}

.card-title a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s;
}

.card-title a:hover {
    color: #2c3e50;
}

/* Excerpt */
.card-excerpt {
    font-size: 15px;
    color: #555;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1; /* Ensures button stays at bottom */
}

/* Button / Link */
.card-btn {
    font-size: 16px;
    font-weight: 700;
    color: #0f1c4d; /* Dark blue from image */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: gap 0.3s ease;
}

.card-btn i {
    font-size: 14px;
}

.card-btn:hover {
    gap: 12px; /* Arrow moves slightly on hover */
    color: #000;
}

/* --- Pagination Style --- */
.custom-pagination {
    text-align: center;
    margin-top: 40px;
}
.custom-pagination .page-numbers {
    padding: 10px 15px;
    margin: 0 5px;
    background: #fff;
    border-radius: 5px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
}
.custom-pagination .current {
    background: #0f1c4d;
    color: #fff;
}