/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

/* Volkhov font for headings */
.section-title,
.booking-title,
.testimonials-title,
.statement-content h2,
.about-text h2,
.destination-info h3,
.trip-info h3,
.service-card h3,
.partnerships h3,
.media-recognition h3,
.collaborations h3 {
    font-family: 'Volkhov', serif;
}

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

/* Background Patterns */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 80%, rgba(66, 152, 211, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(27, 60, 135, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(100, 181, 246, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* Header Styles */
.header {
    background: transparent;
    box-shadow: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: all 0.3s ease;
}

.header.scrolled {
    background: #1B3C87;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 20px;
}

.logo {
    font-size: 2rem;
    font-weight: 800;
    color: #1B3C87;
    text-decoration: none;
    transition: all 0.3s ease;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo:hover {
    transform: scale(1.05);
}

.header.scrolled .logo {
    text-shadow: none;
}

.nav-brand {
    display: flex;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
}

.logo-image {
    height: 40px;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.logo-image:hover {
    transform: scale(1.05);
}

.five-star-image {
    height: 40px;
    width: auto;
    object-fit: contain;
    margin-left: 1.5rem;
}

/* Footer Logo */
.footer-logo-image {
    height: 60px;
    width: auto;
    object-fit: contain;
    margin-bottom: 1rem;
    display: block;
}

.nav-menu ul {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-menu a {
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.nav-menu a:hover {
    color: #4298d3;
    transform: translateY(-2px);
}

.header.scrolled .nav-menu a {
    text-shadow: none;
    color: #fff;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}


.cta-btn {
    background: #4298d3;
    color: white;
    text-decoration: none;
    font-weight: 600;
    padding: 0.7rem 1.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(66, 152, 211, 0.3);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.cta-btn:hover {
    background: #2c7bb8;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(66, 152, 211, 0.4);
}

.header.scrolled .cta-btn {
    text-shadow: none;
}




/* Hero Section */
.hero {
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -2;
    overflow: hidden;
    /* Ensure slides don't overflow */
}

/* Individual slide */
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    z-index: 1;
    /* Below overlay */
}

.hero-slide.active {
    opacity: 1;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
}

.hero-content {
    max-width: 900px;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.hero-title {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7), 0 0 20px rgba(0, 0, 0, 0.5);
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
}

.hero-description {
    font-size: 1.2rem;
    margin-bottom: 2.5rem;
    line-height: 1.6;
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.8), 0 0 15px rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-weight: 500;
    font-family: 'Montserrat', sans-serif;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Buttons */
.btn {
    padding: 15px 30px;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.btn-primary {
    background: #1B3C87;
    color: white;
    box-shadow: 0 4px 15px rgba(27, 60, 135, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(27, 60, 135, 0.4);
    background: #153270;
    /* Slightly darker on hover */
}

.btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid #1B3C87;
}

.btn-secondary:hover {
    background: #1B3C87;
    color: white;
    transform: translateY(-2px);
}

/* Remove old decorative & puzzle styles */
.hero::after,
.hero::before,
.hero-image,
.floating-elements {
    display: none;
}

/* Responsive adjustments for Hero */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-buttons {
        gap: 1rem;
    }

    .btn {
        width: 100%;
        max-width: 300px;
    }
}

/* Section Styles */
.section-header {
    text-align: center;
    margin-bottom: 5rem;
    position: relative;
}

.section-category {
    font-size: 1rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.section-title {
    font-size: 3rem;
    font-weight: 700;
    color: #1B3C87;
    margin-bottom: 1.5rem;
    position: relative;
    font-family: 'Volkhov', serif;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #4298d3, #64b5f6);
    border-radius: 2px;
}

/* Services Section */
.services {
    padding: 80px 0 0 0;
    background: #fff;
    position: relative;
    overflow: hidden;
}

.services-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    /* Align to the bottom to match the standing person */
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.services-grid {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 2rem;
    /* Give some space if bottom aligned */
}

.service-card {
    background: linear-gradient(135deg, #0D4A8E 0%, #09102E 100%);
    /* Logo-matched blue gradient */
    color: white;
    padding: 2.5rem 2rem;
    border-radius: 20px;

    box-shadow: 0 15px 40px rgba(27, 60, 135, 0.3);
    transition: transform 0.3s ease;
    position: relative;
    overflow: hidden;
    width: 320px;
    /* Slightly smaller to fit layout */
    display: flex;
    flex-direction: column;
}

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

/* Remove the top border strip */
.service-card::before {
    display: none;
}

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

.service-card h3 {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    /* White text */
    margin-bottom: 0.5rem;
    font-family: 'Volkhov', serif;
}

.header-line {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.3);
    margin-top: 10px;
}

.service-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
    /* Allow list to take up space */
}

.service-list li {
    display: flex;
    align-items: flex-start;
    /* Align icon to top of multiline text */
    margin-bottom: 1.2rem;
    font-size: 1.1rem;
    font-weight: 400;
}

.service-list li:last-child {
    margin-bottom: 0;
}

.service-list i {
    color: white;
    /* White checkmark */
    margin-right: 1rem;
    margin-top: 4px;
    /* Slight top adjust for alignment */
    font-size: 1.2rem;
    min-width: 24px;
    /* Ensure icon alignment */
}

/* Specific curve for the bottom-left of the first card */
.b2b-card {
    border-bottom-left-radius: 80px;
}

/* Specific curve for the bottom-left of the second card (match design? usually symmetry or B2C also has curve) */
/* Looking at the image, B2B has a big curve on bottom left. B2C seems standard or maybe bottom right? 
   Let's keep B2B unique as per explicit visible feature. */

.services-image {
    flex-shrink: 0;
    z-index: 10;
    /* Negative margin to pull it closer if needed, 
       or just rely on flex gap */
}

.services-image img {
    max-height: 500px;
    /* Limit height to keep it proportional */
    width: auto;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.15));
}

/* Responsive */
@media (max-width: 1024px) {
    .services-wrapper {
        flex-direction: column;
        align-items: center;
    }

    .services-image {
        margin-top: 2rem;
    }

    .services-image img {
        max-height: 400px;
    }
}

@media (max-width: 768px) {
    .service-card {
        width: 100%;
        max-width: 350px;
    }

    .b2b-card {
        border-bottom-left-radius: 20px;
        /* Reset for mobile stack */
    }
}

/* Destinations Section */
.destinations {
    padding: 80px 0;
    background: #f8f9fa;
}

.destinations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.destination-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

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

.destination-image {
    position: relative;
    overflow: hidden;
}

.destination-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.destination-card:hover .destination-image img {
    transform: scale(1.05);
}

.destination-info {
    padding: 1.5rem;
}

.destination-info h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1B3C87;
    margin-bottom: 1rem;
    font-family: 'Volkhov', serif;
}

.destination-details {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    /* Align to bottom for label/amount stack */
}

.price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.price-label {
    font-size: 0.85rem;
    color: #888;
    font-weight: 500;
}

.price-amount {
    font-size: 1.25rem;
    font-weight: 800;
    color: #4298d3;
    font-family: 'Volkhov', serif;
    /* Match headers for elegance */
}

.rating {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #1B3C87;
    /* Dark blue number */
    font-size: 0.9rem;
    background: #f4f6f8;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-weight: 700;
}

.rating i {
    color: #4298d3;
    /* Gold star */
}

/* Booking Steps Section */
.booking-steps {
    padding: 80px 0;
    background: #fff;
}

.booking-content {
    display: flex;
    justify-content: center;
    width: 100%;
}

.booking-text {
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.booking-category {
    font-size: 1rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    display: block;
}

.booking-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1B3C87;
    margin-bottom: 2rem;
    font-family: 'Volkhov', serif;
}

.steps-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: white;
    padding: 3rem 2rem;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    /* Soft shadow like image */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.02);
    min-height: 100%;
    /* Equal height */
}

.step-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 50px rgba(27, 60, 135, 0.1);
}

.step-icon {
    width: 80px;
    /* Larger icon circle */
    height: 80px;
    border-radius: 50%;
    /* Perfect circle */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    flex-shrink: 0;
    margin-bottom: 2rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.step-1 {
    background: linear-gradient(135deg, #0D4A8E 0%, #09102E 100%);
}

.step-2 {
    background: linear-gradient(135deg, #0D4A8E 0%, #09102E 100%);
}

.step-3 {
    background: linear-gradient(135deg, #0D4A8E 0%, #09102E 100%);
}

.step-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1B3C87;
    margin-bottom: 0.5rem;
    font-family: 'Volkhov', serif;
}

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

.booking-card {
    position: relative;
}

.trip-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
    position: relative;
}

/* Consistent colors for icons or unified blue? 
   Reference image has blue icons. Let's make them all theme blue or keep variety.
   Current variety looks good but user asked to look like image (blue circles).
   Let's standardise to Blue for "like image" request, 
   OR keep the existing colors but in circle shape.
   The image shows distinct blue circles. Let's try to match that clean look.
*/
.step-1,
.step-2,
.step-3 {
    background: #2D74C4;
    /* Matching the blue in the reference image approx */
    /* Or use the theme color #1B3C87 */
    background: #1B3C87;
}

.trip-info {
    padding: 1.5rem;
}

.trip-info h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #1B3C87;
    margin-bottom: 0.5rem;
    font-family: 'Volkhov', serif;
}

.trip-info p {
    color: #666;
    margin-bottom: 1rem;
}

.trip-icons {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.trip-icons i {
    color: #4298d3;
    font-size: 1.2rem;
}

.trip-participants {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.trip-participants span {
    color: #666;
    font-size: 0.9rem;
}

.trip-participants i {
    color: #4298d3;
    font-size: 1.2rem;
}

.floating-card {
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: white;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    min-width: 200px;
}

.ongoing-trip h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1B3C87;
    margin-bottom: 0.5rem;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-fill {
    height: 100%;
    background: #4298d3;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-text {
    font-size: 0.8rem;
    color: #666;
}

/* About Section */
.about {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
    overflow: hidden;
}

.about::before {
    content: '';
    position: absolute;
    top: 20%;
    left: -10%;
    width: 300px;
    height: 300px;
    background: linear-gradient(135deg, rgba(66, 152, 211, 0.1), rgba(100, 181, 246, 0.05));
    border-radius: 50%;
    z-index: 0;
}

.about::after {
    content: '';
    position: absolute;
    bottom: 10%;
    right: -5%;
    width: 250px;
    height: 250px;
    background: linear-gradient(135deg, rgba(27, 60, 135, 0.1), rgba(74, 144, 226, 0.05));
    border-radius: 50%;
    z-index: 0;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
    position: relative;
    z-index: 1;
}

.about-text {
    position: relative;
}

.about-text h2 {
    font-size: 3rem;
    font-weight: 700;
    color: #1B3C87;
    margin-bottom: 2rem;
    position: relative;
    font-family: 'Volkhov', serif;
}

.about-text h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #4298d3, #64b5f6);
    border-radius: 2px;
}

.about-text p {
    font-size: 1.2rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 2rem;
}

.about-image {
    position: relative;
}

.about-image::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #4298d3, #64b5f6);
    border-radius: 20px;
    z-index: -1;
    opacity: 0.1;
}

.about-image img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease;
}

.about-image:hover img {
    transform: scale(1.02);
}


/* Reputation Section */
.reputation {
    padding: 120px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
    overflow: hidden;
}

.reputation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 20%, rgba(66, 152, 211, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(27, 60, 135, 0.08) 0%, transparent 50%);
    z-index: 0;
}

.reputation::after {
    content: '★';
    position: absolute;
    top: 10%;
    right: 10%;
    font-size: 3rem;
    color: rgba(66, 152, 211, 0.1);
    animation: floatStar 6s ease-in-out infinite;
    z-index: 0;
}

@keyframes floatStar {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

.reputation-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
}

.partnerships,
.media-recognition,
.collaborations {
    background: white;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.partnerships:hover,
.media-recognition:hover,
.collaborations:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.partnerships::before,
.media-recognition::before,
.collaborations::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #4298d3, #64b5f6, #1B3C87);
    border-radius: 24px 24px 0 0;
}

.partnerships h3,
.media-recognition h3,
.collaborations h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1B3C87;
    margin-bottom: 1rem;
    position: relative;
    font-family: 'Volkhov', serif;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.partnerships h3::after,
.media-recognition h3::after,
.collaborations h3::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 50px;
    height: 3px;
    background: linear-gradient(90deg, #4298d3, #64b5f6);
    border-radius: 2px;
}

.partnerships p,
.media-recognition p,
.collaborations p {
    color: #666;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 600px;
}

.logo-carousel-container {
    overflow: hidden;
    padding: 20px 0;
    position: relative;
    width: 100%;
    /* Gradient fade effect on edges */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.logo-wall {
    display: flex;
    flex-wrap: nowrap;
    gap: 3rem;
    width: max-content;
    animation: scroll 40s linear infinite;
}

.logo-wall:hover {
    animation-play-state: paused;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-50%));
    }
}


.logo-item {
    background: white;
    /* Clean white background */
    border-radius: 16px;
    /* Rounded rectangle, better for varied logo shapes */
    padding: 1rem 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    /* Soft shadow */
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);

    position: relative;
    overflow: hidden;

    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Size */
    height: 100px;
    /* Increased height */
    min-width: 180px;
    /* Increased width */
    max-width: 220px;
    flex-shrink: 0;
    /* Prevent shrinking */
}

.logo-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    border-color: #4298d3;
}

.logo-item img {
    max-height: 70%;
    /* Give it some breathing room */
    max-width: 80%;
    object-fit: contain;
    /* Removed grayscale */
    opacity: 1;
    transition: all 0.3s ease;
}

.logo-item:hover img {
    transform: scale(1.05);
    /* Just scale on hover */
}

.media-recognition {
    background: linear-gradient(135deg, #fff, #f8f9fa);
}

.media-recognition p {
    color: #666;
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 0 2rem 0;
    line-height: 1.7;
    font-style: italic;
}

.collaborator-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    max-width: 800px;
    margin: 0 auto;
}

.collaborator-item {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative;
    border: 2px solid transparent;
}

.collaborator-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(241, 165, 1, 0.8), rgba(27, 60, 135, 0.8));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    border-radius: 50%;
}

.collaborator-item:hover::before {
    opacity: 1;
}

.collaborator-item:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: rgba(66, 152, 211, 0.5);
}

.collaborator-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.collaborator-item:hover img {
    transform: scale(1.05);
}

/* New Elements Styling */
.section-icon {
    font-size: 1.5rem;
    margin-right: 0.5rem;
    display: inline-block;
}



.media-highlight {
    background: linear-gradient(135deg, #4298d3, #64b5f6);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-weight: 600;
    font-size: 1rem;
    margin-top: 1.5rem;
    box-shadow: 0 4px 15px rgba(66, 152, 211, 0.3);
    transition: all 0.3s ease;
}

.media-highlight:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(66, 152, 211, 0.4);
}

.media-highlight i {
    font-size: 1.2rem;
}

.collaborator-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(66, 152, 211, 0.9), rgba(27, 60, 135, 0.9));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 2;
    border-radius: 50%;
}

.collaborator-item:hover .collaborator-overlay {
    opacity: 1;
}

.collaborator-overlay i {
    font-size: 1.5rem;
    color: white;
}

/* Statement Section */
/* Statement Section */
.statement {
    padding: 80px 0;
    background: transparent;
    /* Clear section background */
}

.statement-content {
    background: linear-gradient(90deg, #09204A 0%, #09204A 35%, rgba(9, 32, 74, 0.85) 60%, transparent 100%),
        url('assets/images/final.webp');
    background-size: cover;
    background-position: center right;
    border-radius: 20px;
    padding: 2.5rem 3rem;
    /* Reduced padding */
    color: white;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Left align */
    justify-content: center;
    min-height: 480px;
    /* Reduced height */
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.statement-content h2 {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 2rem;
    font-family: 'Volkhov', serif;
    max-width: 600px;
    text-align: left;
    line-height: 1.2;
}

.statement-content h2::after {
    display: none;
    /* Remove underline */
}

.btn-white {
    background: white;
    color: #09204A;
    font-size: 1.1rem;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.btn-white:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    background: #f8f9fa;
}

/* Specific overrides if needed */
.statement .btn-primary {
    display: none;
}

/* Testimonials Section */
.testimonials {
    padding: 80px 0;
    background: #f8f9fa;
}

.testimonials-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.testimonials-category {
    font-size: 1rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    display: block;
}

.testimonials-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1B3C87;
    margin-bottom: 2rem;
    font-family: 'Volkhov', serif;
}

.testimonials-dots {
    display: flex;
    gap: 0.5rem;
}

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

.dot.active {
    background: #4298d3;
}

.testimonials-cards {
    position: relative;
    /* width: 100%; removed width 100% to fit grid */
}

.testimonial-card {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: none;
    /* height: 100%; removed height */
}

.testimonial-card.active {
    display: block;
}

.testimonial-content p {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 2rem;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.testimonial-author img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.author-info h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1B3C87;
    margin-bottom: 0.25rem;
}

.author-info span {
    color: #666;
    font-size: 0.9rem;
}

.testimonial-navigation {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.nav-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #666;
}

.nav-arrow:hover {
    background: #4298d3;
    color: white;
    border-color: #4298d3;
}

/* Partners Section */
.partners {
    padding: 60px 0;
    background: #fff;
}

.partners-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    flex-wrap: wrap;
}

.partner-logo {
    font-size: 1.5rem;
    font-weight: 600;
    color: #999;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.partner-logo:hover {
    opacity: 1;
}

/* Newsletter Section */
.newsletter {
    padding: 80px 0;
    background: linear-gradient(135deg, #8B5CF6, #A855F7);
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.newsletter::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    z-index: 0;
}

.newsletter-content {
    position: relative;
    z-index: 1;
}

.newsletter-content h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.3;
}

.newsletter-form {
    display: flex;
    justify-content: center;
    gap: 1rem;
    max-width: 500px;
    margin: 0 auto;
}

.input-group {
    position: relative;
    flex: 1;
}

.input-group i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}

.input-group input {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    outline: none;
}

.btn-subscribe {
    background: #4298d3;
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
}

.btn-subscribe:hover {
    background: #2c7bb8;
}

.newsletter-decoration {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.3);
    z-index: 0;
}

/* Footer */
.footer {
    background: #1B3C87;
    color: white;
    padding: 60px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-brand h3 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 1rem;
}

.footer-brand p {
    color: white;
    line-height: 1.6;
    font-size: 0.95rem;
    margin-top: 1rem;
    max-width: 300px;
}

.footer-column h4 {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: white;
}

.footer-links-list,
.contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links-list li {
    margin-bottom: 0.8rem;
}

.footer-links-list a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 0.95rem;
}

.footer-links-list a:hover {
    color: #4298d3;
    text-decoration: underline;
}

.contact-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    color: white;
    font-size: 0.95rem;
}

.contact-list i {
    font-size: 1rem;
    margin-top: 4px;
    width: 20px;
    /* Fixed width for alignment */
    text-align: center;
}

.contact-list a {
    color: white;
    text-decoration: none;
}

.contact-list a:hover {
    color: #4298d3;
}

.footer-bottom-line {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin: 2rem 0;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1rem;
}

.footer-bottom p {
    color: white;
    font-size: 0.9rem;
}

.footer-bottom-social {
    display: flex;
    gap: 1rem;
}

.footer-bottom-social a {
    width: 35px;
    height: 35px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-bottom-social a:hover {
    background: white;
    color: #3fa1e3;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 900px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .footer-brand {
        text-align: center;
    }

    .footer-brand p {
        margin: 1rem auto;
    }
}


/* Additional Decorative Elements */
.services::after {
    content: '+';
    position: absolute;
    top: 20%;
    right: 10%;
    font-size: 3rem;
    color: rgba(66, 152, 211, 0.1);
    font-weight: 300;
    z-index: 0;
    animation: floatPlus 8s ease-in-out infinite;
}


/* Floating Plus Icons */
.hero::after {
    content: '+';
    position: absolute;
    top: 30%;
    right: 5%;
    font-size: 2rem;
    color: rgba(66, 152, 211, 0.2);
    font-weight: 300;
    animation: floatPlus 6s ease-in-out infinite;
    z-index: 0;
}

/* Additional floating elements */
.about::after {
    content: '✈';
    position: absolute;
    top: 10%;
    right: 15%;
    font-size: 2rem;
    color: rgba(27, 60, 135, 0.1);
    z-index: 0;
    animation: floatPlane 10s ease-in-out infinite;
}

.reputation::after {
    content: '★';
    position: absolute;
    bottom: 15%;
    right: 20%;
    font-size: 2.5rem;
    color: rgba(66, 152, 211, 0.1);
    z-index: 0;
    animation: floatStar 7s ease-in-out infinite;
}

@keyframes floatPlus {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-15px) rotate(90deg);
    }
}

@keyframes floatStar {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

@keyframes floatPlane {

    0%,
    100% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }

    25% {
        transform: translateY(-10px) translateX(5px) rotate(5deg);
    }

    50% {
        transform: translateY(-20px) translateX(0px) rotate(0deg);
    }

    75% {
        transform: translateY(-10px) translateX(-5px) rotate(-5deg);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .header .container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .nav-menu ul {
        gap: 1.5rem;
        flex-direction: column;
        width: 100%;
        text-align: center;
    }

    .nav-actions {
        display: none !important;
    }


    .cta-btn {
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
    }

    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 4rem;
    }

    .hero-text {
        max-width: 100%;
    }

    .hero-title {
        font-size: 2.8rem;
        font-family: 'Volkhov', serif;
        margin-bottom: 1.5rem;
    }

    .hero-description {
        margin-bottom: 2.5rem;
    }

    .hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
        gap: 2rem;
    }

    .hero-image {
        max-width: 100%;
        margin: 0 auto;
    }

    .puzzle-grid {
        height: 350px;
        gap: 4px;
    }

    .puzzle-piece {
        border-radius: 6px;
    }

    .piece-1 {
        border-radius: 12px 6px 6px 6px;
    }

    .piece-2 {
        border-radius: 6px 12px 6px 6px;
    }

    .piece-3 {
        border-radius: 6px 6px 6px 12px;
    }

    .piece-4 {
        border-radius: 6px 6px 12px 6px;
    }

    .puzzle-grid {
        height: 400px;
        gap: 6px;
    }

    .puzzle-piece {
        border-radius: 8px;
    }

    .piece-1 {
        border-radius: 16px 8px 8px 8px;
    }

    .piece-2 {
        border-radius: 8px 16px 8px 8px;
    }

    .piece-3 {
        border-radius: 8px 8px 8px 16px;
    }

    .piece-4 {
        border-radius: 8px 8px 16px 8px;
    }

    .booking-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .steps-list {
        gap: 1.2rem;
    }

    .step-content h3 {
        font-size: 1rem;
    }

    .step-content p {
        font-size: 0.85rem;
    }

    .testimonials-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .about-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }



    .footer-social {
        text-align: center;
    }

    .social-icons {
        justify-content: center;
    }

    .app-buttons {
        justify-content: center;
    }

    .newsletter-form {
        flex-direction: column;
        gap: 1rem;
    }

    .reputation-content {
        gap: 3rem;
    }

    .partnerships,
    .media-recognition,
    .collaborations {
        padding: 2rem 1.5rem;
    }

    .logo-wall {
        gap: 0.8rem;
        flex-wrap: wrap;
        /* Ensure logos wrap */
        justify-content: center;
        overflow-x: visible;
        /* Disable horizontal scroll */
    }

    .logo-item {
        padding: 0.6rem 1rem;
        min-width: 100px;
    }

    .collaborator-grid {
        gap: 0.8rem;
    }

    .collaborator-item {
        width: 70px;
        height: 70px;
    }

    .section-title {
        font-size: 2.2rem;
        font-family: 'Volkhov', serif;
    }

    .hero-description {
        font-size: 1.1rem;
    }

    .partners-logos {
        gap: 2rem;
    }

    .testimonial-navigation {
        position: static;
        transform: none;
        flex-direction: row;
        justify-content: center;
        margin-top: 2rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2.2rem;
        font-family: 'Volkhov', serif;
        margin-bottom: 1rem;
    }

    .hero-description {
        margin-bottom: 2rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .btn-primary {
        width: 100%;
        max-width: 300px;
        justify-content: center;
        height: 55px;
    }

    .btn-demo {
        width: 55px;
        height: 55px;
    }

    .section-title {
        font-size: 1.8rem;
        font-family: 'Volkhov', serif;
    }

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

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

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

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .nav-actions {
        flex-direction: column;
        gap: 0.8rem;
        width: 100%;
    }


    .cta-btn {
        width: 100%;
        text-align: center;
        padding: 0.8rem 1rem;
    }

    .btn-primary {
        width: 100%;
        max-width: 300px;
        height: 50px;
    }

    .btn-demo {
        width: 50px;
        height: 50px;
    }

    .newsletter-form {
        padding: 0.5rem;
    }

    .input-group input {
        padding: 1rem 1rem 1rem 3rem;
    }

    .btn-subscribe {
        padding: 1rem 2rem;
    }

    .partners-logos {
        gap: 1.5rem;
    }

    .partner-logo {
        font-size: 1.2rem;
    }

    .floating-card {
        position: static;
        margin-top: 1rem;
    }

    .reputation-content {
        gap: 2rem;
    }

    .partnerships,
    .media-recognition,
    .collaborations {
        padding: 1.5rem 1rem;
    }

    .partnerships h3,
    .media-recognition h3,
    .collaborations h3 {
        font-size: 1.4rem;
    }

    .logo-wall {
        gap: 0.6rem;
    }

    .logo-item {
        padding: 0.5rem 0.8rem;
        min-width: 80px;
        font-size: 0.8rem;
    }

    .collaborator-grid {
        gap: 0.6rem;
    }

    .collaborator-item {
        width: 60px;
        height: 60px;
    }

    .section-icon {
        font-size: 1.2rem;
    }

    .logo-item i {
        font-size: 1rem;
    }

    .media-highlight {
        padding: 0.8rem 1.2rem;
        font-size: 0.9rem;
        margin-top: 1rem;
    }

    .media-highlight i {
        font-size: 1rem;
    }
}

/* Floating Chat Button */
.floating-chat {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

.chat-button {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 50px;
    box-shadow: 0 8px 25px rgba(37, 211, 102, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 1rem;
    animation: chatPulse 2s ease-in-out infinite;
}

.chat-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(37, 211, 102, 0.6);
    background: linear-gradient(135deg, #128C7E, #25D366);
}

.chat-button i {
    font-size: 1.5rem;
}

.chat-text {
    white-space: nowrap;
}

.chat-options {
    position: absolute;
    bottom: 70px;
    right: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 450px;
    max-height: 700px;
    overflow: hidden;
    transform: translateY(20px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.chat-options.active {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
}

.chat-header {
    background: linear-gradient(135deg, #1B3C87, #4A90E2);
    color: white;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header h4 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    font-family: 'Volkhov', serif;
}

.close-chat {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.close-chat:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.chat-content {
    padding: 1.5rem;
}

.chat-content p {
    margin: 0 0 1.5rem 0;
    color: #666;
    font-size: 0.95rem;
    text-align: center;
}

.contact-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 12px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.contact-item:hover {
    background: #f8f9fa;
    transform: translateX(5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border-color: rgba(37, 211, 102, 0.3);
}

.contact-icon {
    width: 45px;
    height: 45px;
    background: linear-gradient(135deg, #25D366, #128C7E);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.contact-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: #1B3C87;
}

.contact-number {
    font-size: 0.85rem;
    color: #666;
    font-family: monospace;
}

@keyframes chatPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

/* Responsive Chat Button */
@media (max-width: 768px) {
    .floating-chat {
        bottom: 20px;
        right: 20px;
    }

    .chat-button {
        padding: 0.8rem 1.2rem;
        font-size: 0.9rem;
    }

    .chat-options {
        width: 300px;
        right: -10px;
    }

    .chat-text {
        display: none;
    }
}

@media (max-width: 480px) {
    .floating-chat {
        bottom: 15px;
        right: 15px;
    }

    .chat-button {
        padding: 0.7rem;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        justify-content: center;
    }

    .chat-options {
        width: 280px;
        right: -20px;
    }

    .contact-item {
        padding: 0.8rem;
    }

    .contact-icon {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
}

/* Team Photos in Chat */
.team-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.contact-icon {
    padding: 0;
    /* Remove padding if any to let image fill */
    overflow: hidden;
    /* Ensure circle clip */
    background: transparent;
    /* Remove green bg if we want just photo, or keep as fallback */
    border: 2px solid #e9ecef;
    /* Optional border */
}