* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* GLOBAL FONT */
body {
    font-family: 'Poppins', sans-serif;
}

/* HEADINGS FONT (Premium Look) */
h1, h2, h3, h4, h5 {
    font-family: 'Playfair Display', serif;
}


body {
    font-family: 'Open Sans', sans-serif;
    background: #0f172a;
    color: #fff;
    overflow-x: hidden;
    width: 100%;
}

/* HERO SECTION */
.hero {
    position: relative;
    height: 130vh;
    width: 100%;
    overflow: hidden;
    padding-top: 100px;
}

/* VIDEO */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    object-fit: cover;
    z-index: 1;
}

/* LEFT GRADIENT OVERLAY */
.overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

    background: linear-gradient(
        to right,
        rgba(0,0,0,0.85) 30%,
        rgba(0,0,0,0.6) 50%,
        rgba(0,0,0,0.3) 70%,
        rgba(0,0,0,0.1) 85%,
        transparent 100%
    );
}

/* CONTENT */
.hero-content {
    position: relative;
    z-index: 3;
    padding-top: 40px;
    height: 100%;
    display: flex;
    align-items: center;

    max-width: 1400px;
    margin: auto;
    padding: 0 60px;
}

/* LEFT SIDE TEXT */
.hero-left {
    max-width: 600px;
    animation: fadeUp 1s ease forwards;
    max-width: 550px;   /* LIMIT WIDTH */
    width: 100%;
}

.hero-left h1 {
    font-size: 56px;
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    line-height: 1.2;

    background: linear-gradient(to right, #ffffff, #ff7a00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-left span {
    color: #F36C21;
    font-family: 'Playfair Display', serif;

}

.hero-left p {
    margin: 20px 0;
    color: #eee;
    font-size: 17px;
}

/* BUTTON */
.btn-primary {
    background: linear-gradient(135deg, #F36C21, #ff8c42);
    color: #fff;
    padding: 14px 30px;
    border-radius: 50px;
    font-weight: 600;
    border: none;
    transition: 0.3s;
    text-decoration: none; /* This removes the underline */
    display: inline-block;  /* Required for padding/margins to work correctly on links */
    margin-top: 20px;         /* Space above the button */
    margin-bottom: 20px;      /* Space below the button */
}

.btn-primary:hover {
    color: #fff;              /* Ensures text stays white on hover */
    text-decoration: none;    /* Keeps underline off on hover */
    
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(243,108,33,0.4);
}

.counter-box {
   backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 12px; /* Slightly reduced padding */
    min-width: 120px; /* Reduced from 150px to fit 4 in a row */
    flex: 1; /* Allows boxes to grow/shrink equally */
    border: 1px solid rgba(255,255,255,0.2);
    transition: 0.3s;
}

.counter-box:hover {
    transform: translateY(-8px) scale(1.05);
    background: rgba(255, 255, 255, 0.15);
}

/* ICON */
.counter-box .icon {
    font-size: 22px;
    color: #F36C21;
    margin-bottom: 8px;
}

/* NUMBER */
.counter-box h3 {
    color: #F36C21;
    font-size: 26px;
    font-weight: 700;
}

/* TEXT */
.counter-box p {
    font-size: 16px;
    color: #ddd;
}

/* HOVER */
.counter-box:hover {
    transform: translateY(-6px) scale(1.05);
    background: rgba(255, 255, 255, 0.15);
}

.mini-counter {
    display: flex;
    gap: 12px; /* Slightly reduced gap to save space */
    margin-top: 25px;
    flex-wrap: nowrap; /* Forces them to stay in one line */
    justify-content: flex-start;
}


/* MOBILE */
@media (max-width: 768px) {
    .counter-box {
        text-align: center;
    }
}

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

    .hero {
        height: auto;
        padding: 120px 0 60px;
    }

    .hero-content {
        padding: 0 20px;
        justify-content: center;
        text-align: center;
    }

    .hero-left h1 {
        font-size: 30px;
    }

    .hero-left p {
        font-size: 15px;
    }

    .mini-counter {
        justify-content: center;
        gap: 10px;
    }

    .counter-box {
        flex: 1 1 45%;
        text-align: center;
    }
}


/* SECTION */
/* SECTION */
.passport-section{
    position: relative;
    background: white;
    padding: 80px 20px 140px;
    overflow: hidden;
}

/* FULL WIDTH WAVE */
.passport-wave{
    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    line-height: 0;
}

/* SVG */
.passport-wave svg{
    display: block;
    width: 100%;
    height: 90px;
}

/* TOP RIGHT ORANGE CIRCLE */
.passport-section::before {
    content: "";
    position: absolute;
    top: -140px;
    right: -140px;
    width: 350px;
    height: 350px;
    background: linear-gradient(135deg, #ff7a00, #ff9d2f);
    border-radius: 50%;
    opacity: 0.12;
    z-index: 0;
}

/* TITLE */
.section-title {
  text-align: center;
  margin-bottom: 60px;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  color :black;
  font-family: 'Playfair Display', serif;
}

/* GRID */
.passport-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 30px;
}

/* CARD BASE */
.passport-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  text-align: center;
  background: #fff;
  border: 3px solid transparent;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  transition: 0.3s;
}

/* HOVER */
.passport-card:hover {
  transform: translateY(-6px);
}

/* HEADER (TOP COLOR BAR) */
.card-header {
  padding: 18px 10px 45px;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  font-family: 'Playfair Display', serif;
 
  letter-spacing: 0.3px;
}

.card-body p {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
}

/* ICON */
.icon-circle {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 55px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* BODY */
.card-body {
  padding: 50px 15px 15px;
  font-size: 16px;
  color: #555;
  line-height: 1.6;
}

/* ===== MULTI COLORS WITH BORDER FRAME ===== */

.pink {
  border-color: #ff5f87;
}
.pink .card-header,
.pink .icon-circle {
  background: linear-gradient(135deg, #ff5f87, #ff7eb3);
}

.blue {
  border-color: #5b86e5;
}
.blue .card-header,
.blue .icon-circle {
  background: linear-gradient(135deg, #36d1dc, #5b86e5);
}

.purple {
  border-color: #a18cd1;
}
.purple .card-header,
.purple .icon-circle {
  background: linear-gradient(135deg, #a18cd1, #fbc2eb);
}

.red {
  border-color: #ff416c;
}
.red .card-header,
.red .icon-circle {
  background: linear-gradient(135deg, #ff416c, #ff4b2b);
}

/* Glow effect */
.passport-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* Icon animation */
.passport-card:hover .icon-circle {
  transform: translateX(-50%) scale(1.1);
}

/* Smooth transition */
.icon-circle,
.passport-card {
  transition: all 0.3s ease;
}

.yellow {
  border-color: #f7971e;
}
.yellow .card-header,
.yellow .icon-circle {
  background: linear-gradient(135deg, #f7971e, #ffd200);
}

.teal {
  border-color: #11998e;
}
.teal .card-header,
.teal .icon-circle {
  background: linear-gradient(135deg, #11998e, #38ef7d);
}

.indigo {
  border-color: #667eea;
}
.indigo .card-header,
.indigo .icon-circle {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

/* ORANGE */
.orange {
  border-color: #f7971e;
}
.orange .card-header,
.orange .icon-circle {
  background: linear-gradient(135deg, #f7971e, #ffd200);
}

/* GREEN */
.green {
  border-color: #00c9ff;
}
.green .card-header,
.green .icon-circle {
  background: linear-gradient(135deg, #00c9ff, #92fe9d);
}

/* CYAN */
.cyan {
  border-color: #43e97b;
}
.cyan .card-header,
.cyan .icon-circle {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
}

/* DARK */
.dark {
  border-color: #333;
}
.dark .card-header,
.dark .icon-circle {
  background: linear-gradient(135deg, #434343, #000000);
}





/* SECTION BACKGROUND */
/* SECTION */
.passport-assist-section {
  position: relative;
  padding: 100px 20px 120px;
  background: white;
  overflow: hidden;
}

/* TOP LEFT ORANGE CIRCLE */
.bg-circle {
  position: absolute;
  width: 350px;
  height: 350px;
  background: #ff7a00;
  top: -120px;
  left: -120px;
  border-radius: 50%;
  opacity: 0.4;
}

/* CONTAINER */
.passport-assist-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}

/* HEADING */
.passport-heading {
  font-family: 'Playfair Display', serif;
  font-size: 38px;
  font-weight: 700;
  color: #222;
  margin-bottom: 25px;
}

/* SHINING LINE */
.passport-underline {
  display: block;
  width: 100px;
  height: 4px;
  margin-top: 10px;
  background: linear-gradient(90deg, #ff7a00, #ffb347, #ff7a00);
  background-size: 200%;
  animation: shine 3s linear infinite;
  border-radius: 5px;
}

@keyframes shine {
  to { background-position: 200% center; }
}

/* TEXT */
.passport-left p {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  line-height: 1.9;
  color: #444;
  margin-bottom: 18px;
}

/* RIGHT SIDE IMAGE */
.passport-right {
  display: flex;
  justify-content: center;
}

/* IMAGE BOX (EMBEDDED STYLE) */
.image-box {
  width: 100%;
  max-width: 350px;
  height: 480px;
  background: #fff;
  padding: 10px;
  border-radius: 20px;
  border-top-right-radius: 120px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.15);
  
  position: relative;
  overflow: visible; /* IMPORTANT FIX */
  z-index: 1;
}

/* LEFT ORANGE STRIP */
.image-box::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 30px;
  width: 12px;
  height: 80%;
  background: linear-gradient(to bottom, #ff7a00, #e65100);
  border-radius: 10px;
  z-index: 2;
}

/* DASHED FRAME (BACKGROUND) */
.image-box::after {
  content: "";
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border-radius: 22px;
  border-top-right-radius: 125px;
  border: 2px dashed #ff7a00;
  z-index: 0;
}

/* IMAGE */
.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15px;
  border-top-right-radius: 110px;
  position: relative;
  z-index: 1;
}


/* RESPONSIVE */
@media (max-width: 992px) {
  .passport-assist-container {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .passport-heading {
    font-size: 28px;
  }

  .image-box {
    height: 400px;
  }
}

/* wave */

.passport-wave {
    position: absolute;
    bottom: 0;

    width: 100vw;

    left: 50%;
    transform: translateX(-50%);

    overflow: hidden;
    line-height: 0;
}

.passport-wave svg {
    display: block;
    width: 100%;
    height: 120px;
}

/* SECTION BASE */
.travel-section {
    position: relative;
    padding: 90px 60px;
    background: #f8f9fb;
    overflow: hidden;

    margin-top: -80px;
}

/* TOP BORDER */
.travel-section::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: #ff6a00;
}

/* LEFT GRADIENT */
.travel-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(135deg, #ff6a00, #6a11cb);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 0% 100%);
    z-index: 0;
}

/* CONTAINER */
.travel-container {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    align-items: flex-start;
    position: relative;
    z-index: 2;
}

/* LEFT */
.travel-left {
    flex: 1;
    color: #fff;
    max-width: 550px;
}

.travel-left h2 {
    font-size: 36px;
    font-family: 'Playfair Display', serif;
    margin-bottom: 10px;
}

/* SHINE LINE */
.shine-line {
    width: 130px;
    height: 4px;
    margin: 15px 0;
    background: linear-gradient(90deg, #fff, #ffb347, #fff);
    background-size: 200%;
    animation: shine 3s linear infinite;
}

@keyframes shine {
    0% {
        background-position: 200%;
    }

    100% {
        background-position: -200%;
    }
}

.travel-left p {
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 12px;
    font-family: 'Poppins', sans-serif;
}

/* RIGHT SIDE */
.travel-right {
    flex: 1;
    margin-top: 10px;
    position: relative;
    z-index: 5;
}

/* GRID */
.service-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* CARD */
.service-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #eee;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
    transition: 0.3s;
}

/* HOVER */
.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

/* IMAGE */
.service-card img {
    width: 100%;
    height: 110px;
    object-fit: cover;
}

/* TITLE */
.service-card h4 {
    font-size: 15px;
    margin: 12px 12px 6px;
    color: #111;
}

/* TEXT */
.service-card p {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    padding: 0 12px 14px;
}

/* RESPONSIVE */
@media (max-width: 992px) {

    .travel-container {
        flex-direction: column;
        text-align: center;
    }

    .travel-section::before {
        width: 100%;
        height: 50%;
        clip-path: none;
    }

    .travel-left,
    .travel-right {
        width: 100%;
        max-width: 100%;
    }

    .travel-right {
        margin-top: 30px;
    }

}

@media (max-width: 576px) {

    .service-card-grid {
        grid-template-columns: 1fr;
    }

    .travel-section {
        padding: 60px 20px;
    }

    .travel-left h2 {
        font-size: 26px;
    }

}

.wave {
    position: relative;
    width: 100%;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
    line-height: 0;
}

.wave svg {
    display: block;
    width: 100vw;
    height: 120px;
}

/* ===============================
   WHY CHOOSE US
================================ */
.why-choose-us {
  padding: 70px 20px;
  text-align: center;
  background: #fff;
  background: url("../images/bg1.jpg") center/cover no-repeat;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}


.why-choose-us h2 {
  font-size: 34px;
  font-weight: 700;
  color: #0b2c5d;
}

.why-choose-us .subtitle {
  color: #6c757d;
  margin-bottom: 50px;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 35px;
  max-width: 1100px;
  margin: auto;
}

.why-box h4 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #0b2c5d;
}

.why-box p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

/* Cordoba Brand 3D Icons */
.brand-blue {
  background: linear-gradient(145deg, #1E6FAE, #0B3C5D);
}

.brand-green {
  background: linear-gradient(145deg, #A8E063, #7BC043);
}

.brand-teal {
  background: linear-gradient(145deg, #2BBBAD, #1E8E8E);
}

/* Icon base (same as before) */
.icon-3d {
  width: 70px;
  height: 70px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #fff;
  margin: 0 auto 20px;
  box-shadow:
    0 12px 28px rgba(0,0,0,0.35),
    inset 0 -6px 10px rgba(0,0,0,0.25);
  transform: perspective(600px) rotateX(8deg);
  transition: all 0.4s ease;
}

.icon-3d:hover {
  transform: perspective(600px) rotateX(0deg) translateY(-6px) scale(1.05);
  box-shadow:
    0 20px 40px rgba(0,0,0,0.45),
    inset 0 -8px 14px rgba(0,0,0,0.3);
}

/* ===============================
   WHY CHOOSE US - RESPONSIVE
================================ */
@media (max-width: 1200px) {
  .why-choose-us h2 {
    font-size: 30px;
  }
  .why-choose-us .subtitle {
    margin-bottom: 40px;
  }
  .why-grid {
    gap: 25px;
  }
  .icon-3d {
    width: 60px;
    height: 60px;
    font-size: 32px;
  }
}

@media (max-width: 992px) {
  .why-choose-us h2 {
    font-size: 28px;
  }
  .why-box h4 {
    font-size: 18px;
  }
  .why-box p {
    font-size: 14px;
  }
  .icon-3d {
    width: 55px;
    height: 55px;
    font-size: 28px;
  }
}

@media (max-width: 768px) {
  .why-choose-us {
    padding: 50px 15px;
  }
  .why-choose-us h2 {
    font-size: 26px;
  }
  .why-grid {
    gap: 20px;
  }
  .icon-3d {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
}


/* SECTION */
.testimonial-section {
    padding: 80px 20px;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    text-align: center;
    color: #fff;
    overflow: hidden;
}

/* TITLE */
.testimonial-title {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 50px;
    position: relative;
}

.testimonial-title::after {
    content: "";
    width: 60px;
    height: 3px;
    background: #e11d48;
    display: block;
    margin: 10px auto 0;
    border-radius: 5px;
}

/* CAROUSEL */
.testimonial-carousel-container {
    overflow: hidden;
    position: relative;
}

.testimonial-track {
    display: flex;
    gap: 25px;
    animation: scroll 25s linear infinite;
}

/* CARD */
.testimonial-card {
    min-width: 320px;
    max-width: 320px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border-radius: 20px;
    padding: 25px;
    text-align: left;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    transition: 0.4s;
    border: 1px solid rgba(255,255,255,0.1);
}

.testimonial-card:hover {
    transform: translateY(-10px) scale(1.02);
}

/* HEADER */
.testimonial-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.testimonial-header img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #e11d48;
}

/* NAME */
.testimonial-header h4 {
    margin: 0;
    font-size: 16px;
}

/* STARS */
.stars {
    color: #facc15;
    font-size: 14px;
}

/* TEXT */
.testimonial-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #e2e8f0;
}

/* ANIMATION */
@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* BUTTONS */
.testimonial-buttons {
    margin-top: 40px;
}

.testimonial-buttons .btn {
    padding: 12px 22px;
    margin: 10px;
    border-radius: 30px;
    font-size: 14px;
    transition: 0.3s;
    text-decoration: none;
}

.review-btn {
    background: #e11d48;
    color: #fff;
}

.contact-btn {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
}

.review-btn:hover {
    background: #be123c;
}

.contact-btn:hover {
    background: #fff;
    color: #000;
}

/* WAVE BOTTOM */
.wave-bottom {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  line-height: 0;
  z-index: 2;
}

.wave-bottom svg {
  display: block;
  width: 100%;
  height: 80px;
}

.wave-bottom path {
  fill: #e11d48;
}

/* about Section */

:root {
            --primary-color: #ff7a00;
            --text-dark: #2d2d2d;
            --text-light: #555555;
            --bg-white: #ffffff;
        }

        body { margin: 0; padding: 0; font-family: 'Poppins', sans-serif; }

        /* --- About Section Styling --- */
        .about-section {
            padding: 80px 10% 120px 10%;
            background-color: var(--bg-white);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 50px;
            position: relative;
            overflow: hidden;
        }

        /* Responsive Layout */
        @media (max-width: 992px) {
            .about-section {
                flex-direction: column-reverse;
                text-align: center;
                padding: 60px 5%;
            }
        }

        /* Left Content Area */
        .about-content { flex: 1; }

        .small-title {
            color: var(--primary-color);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 2px;
            font-size: 14px;
            display: block;
            margin-bottom: 10px;
        }

        .main-title {
            font-family: 'Playfair Display', serif;
            font-size: 32px;
            color: var(--text-dark);
            margin-bottom: 30px;
            position: relative;
            display: inline-block;
        }

        /* Shining Bottom Line */
        .main-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), #ffcc00, var(--primary-color));
            background-size: 200% auto;
            border-radius: 2px;
            animation: shine 3s linear infinite;
        }

        @keyframes shine {
            to { background-position: 200% center; }
        }

        .description {
            color: var(--text-light);
            line-height: 1.8;
            font-size: 16px;
            margin-bottom: 30px;
        }

        .highlight-text {
            color: var(--text-dark);
            font-weight: 600;
        }

        /* Right Image Area */
        .about-image {
            flex: 1;
            position: relative;
        }

        .about-image img {
            width: 100%;
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }

        .about-image:hover img {
            transform: translateY(-5px);
        }

        /* Read More Button */
        .btn-read-more {
            display: inline-flex;
            align-items: center;
            padding: 15px 35px;
            background-color: var(--primary-color);
            color: white;
            text-decoration: none;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 10px 20px rgba(255, 122, 0, 0.3);
        }

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

        .btn-read-more:hover {
            background-color: #e66e00;
            transform: scale(1.05);
        }

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

        /* Bottom SVG Wave */
        .wave-container {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            line-height: 0;
        }

        .wave-container svg {
            width: 100%;
            height: 80px;
        }

        .wave-fill {
            fill: var(--primary-color);
        }


/* --- Packages Section Styling --- */
    /* Ensure the section is the relative parent */
.packages-section {
    position: relative; 
    padding: 80px 10% 150px 10%; /* Increased bottom padding to make room for the wave */
    background-color: #ffffff;
    text-align: center;
    overflow: hidden; /* Keeps the wave from creating horizontal scrollbars */
}

/* Position the wave container at the very bottom */
.wave-container {
    position: absolute;
    bottom: -1px; /* Avoids a tiny white line at the bottom */
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 1;
}

.wave-container svg {
    display: block;
    width: 100%;
    height: 100px; /* Adjust height as needed */
}

/* Ensure the wave color matches your branding */
.wave-fill {
    fill: #ff7a00;
}

/* Make sure the button stays ABOVE the wave */
.btn-view-more {
    position: relative;
    z-index: 2;
}

    .section-header {
        margin-bottom: 50px;
    }

    /* Reuse Title Styles */
    .packages-section .small-title {
        color: #ff7a00;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 14px;
        display: block;
        margin-bottom: 10px;
    }

    .packages-section .main-title {
        font-family: 'Playfair Display', serif;
        font-size: 32px;
        color: #2d2d2d;
        position: relative;
        display: inline-block;
        margin-bottom: 20px;
    }

    /* Shining line effect */
    .packages-section .main-title::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 25%;
        width: 50%;
        height: 4px;
        background: linear-gradient(90deg, #ff7a00, #ffd200, #ff7a00);
        background-size: 200% auto;
        border-radius: 2px;
        animation: shine 3s linear infinite;
    }

    .package-intro-text {
    color: #555555;
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    font-size: 16px;
}

   /* --- THE GRID ENGINE --- */
.package-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal halves */
    gap: 20px;
    margin-bottom: 50px;
}

/* Left side 2x2 sub-grid */
.left-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
}

.package-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.package-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

/* UNIQUE OVERLAY - Won't affect Hero Section */
.package-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.7));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: all 0.4s ease;
}

.package-overlay h3 {
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: clamp(16px, 2vw, 22px);
    text-transform: uppercase;
    text-align: center;
    margin: 0;
    line-height: 1.2;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}

/* Hover States */
.package-card:hover img { 
    transform: scale(1.1); 
}

.package-card:hover .package-overlay { 
    background: rgba(255, 122, 0, 0.5); /* Brand color tint */
}

/* Button */
.btn-view-more {
    display: inline-flex;
    align-items: center;
    padding: 14px 40px;
    background-color: #2d2d2d;
    color: #ffffff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-view-more i { margin-left: 12px; color: #ff7a00; }
.btn-view-more:hover { 
    background-color: #ff7a00; 
    transform: translateY(-3px); 
}
.btn-view-more:hover i { color: #ffffff; }

.right-feature {
    height: 100%;
    min-height: 580px; /* Adjust this to match your left-grid total height */
}

.left-grid {
    height: 100%;
}



/* Responsive Adjustments */
@media (max-width: 1024px) {
    .package-container { grid-template-columns: 1fr; }
    .right-feature { height: 450px; }
}

@media (max-width: 600px) {
    .left-grid { grid-template-columns: 1fr; }
    .package-card { height: 280px; }
}


/* --- Recognition Section Styling --- */
    .recognition-section {

        margin-top: -120px; /* Adjust this value to move it further up */
       position: relative; 
        z-index: 5; /* Ensures it stays on top of any background elements */
        padding: 100px 10%;
        background-color: #f9f9f9; /* Slight off-white to distinguish from sections above */
        text-align: center;
    }

    .recognition-section .small-title {
        color: #ff7a00;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 14px;
        display: block;
        margin-bottom: 10px;
    }

    .recognition-section .main-title {
        font-family: 'Playfair Display', serif;
        font-size: 42px;
        color: #2d2d2d;
        position: relative;
        display: inline-block;
        margin-bottom: 25px;
    }

    /* Shining line effect */
    .recognition-section .main-title::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 25%;
        width: 50%;
        height: 4px;
        background: linear-gradient(90deg, #ff7a00, #ffd200, #ff7a00);
        background-size: 200% auto;
        border-radius: 2px;
        animation: shine 3s linear infinite;
    }

    .recognition-content {
        max-width: 800px;
        margin: 0 auto 50px auto;
        color: #555555;
        font-family: 'Poppins', sans-serif;
        line-height: 1.8;
    }

    /* Logo Carousel Styling */
    .member-swiper {
        padding: 20px 0 50px 0;
    }

    .member-card {
        background: #ffffff;
        padding: 20px;
        border-radius: 15px;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        transition: transform 0.3s ease;
        margin: 10px; /* Space for shadow */
    }

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

    .member-card img {
        max-width: 80%;
        max-height: 80%;
        object-fit: contain;
        filter: grayscale(100%); /* Elegant grayscale look */
        opacity: 0.7;
        transition: all 0.3s ease;
    }

    .member-card:hover img {
        filter: grayscale(0%); /* Color on hover */
        opacity: 1;
    }