/* RESET (FIXED) */
* {
    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: 110vh;
    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: 1200px;
    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;
}

.btn-primary: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: 15px;
    min-width: 120px;

    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: 15px;
    margin-top: 15px;

    flex-wrap: wrap;           /* allow wrapping */
    justify-content: flex-start; /* stick LEFT */
}



/* 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;
    }
}


/* Passport Section */

/* ================= PASSPORT SECTION ================= */

.passport-section {
    display: flex;
    flex-wrap: wrap;
    padding: 60px;
    gap: 40px;

    background-image: url("../images/bg2.jpg");
    background-size: cover;
    background-position: center;
}

/* LEFT SIDE */
.passport-left {
    flex: 1;
}
  
/* IMAGE WRAPPER */
.passport-image-wrapper {
    position: relative;
    display: inline-block;
}


/* IMAGE */
.passport-image-wrapper img {
    width: 100%;
    max-width: 400px;
    height: 400px;          /* 👈 increase this */
    object-fit: cover;      /* 👈 prevents distortion */
    border-radius: 20px;
    display: block;
}

/* OVERLAY BOX (ON IMAGE TOP RIGHT) */
.passport-overlay-box {
    position: absolute;
    top: 50%;
    right: -100px;   /* 👈 overflow outside image */
    transform: translateY(-50%);

    width: 240px;
    padding: 10px;

    background: #ffffff;
    border-radius: 12px;

    /* 🔥 BLUE FRAME */
    border-left: 5px solid #007bff;

    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    color:black;
}

/* CONTACT BUTTON */
.passport-contact-btn {
    margin-top: 20px;
    padding: 12px 25px;

    background: linear-gradient(135deg, #007bff, #00c6ff);
    border: none;
    color: white;
    border-radius: 30px;

    font-size: 15px;
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    box-shadow: 0 8px 20px rgba(0,123,255,0.3);
}


.passport-contact-btn:hover {
    transform: translateY(-3px);
}

/* RIGHT SIDE */
.passport-right {
    flex: 0 0 55%;
    max-width: 55%;
}

/* TITLE */
.passport-title {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 25px;
    color: black;
}

/* SERVICES GRID */
.passport-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* SERVICE BOX */
.passport-service-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.passport-service-box span {
    margin-top: 10px;
    color: black;
    font-weight: 500;
}

/* 3D ICON STYLE */
.passport-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;

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

    color: white;
    font-size: 22px;

    box-shadow: 
        0 10px 20px rgba(0,0,0,0.15),
        inset 0 2px 5px rgba(255,255,255,0.2);
}

/* GRADIENT COLORS */
.gradient1 { background: linear-gradient(135deg, #667eea, #764ba2); }
.gradient2 { background: linear-gradient(135deg, #43cea2, #185a9d); }
.gradient3 { background: linear-gradient(135deg, #f7971e, #ffd200); }
.gradient4 { background: linear-gradient(135deg, #ff6a00, #ee0979); }
.gradient5 { background: linear-gradient(135deg, #00c6ff, #0072ff); }
.gradient6 { background: linear-gradient(135deg, #f953c6, #b91d73); }

/* ================= RESPONSIVE ================= */

@media(max-width: 992px) {
    .passport-left,
    .passport-right {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media(max-width: 768px) {
    .passport-section {
        flex-direction: column;
        padding: 20px;
    }

    .passport-services {
        grid-template-columns: repeat(2, 1fr);
    }

    /* overlay becomes normal block */
    .passport-overlay-box {
        position: static;
        margin-top: 15px;
        width: 100%;

        backdrop-filter: blur(10px);
        background: rgba(255,255,255,0.7);
    }

    .passport-contact-btn {
        margin-top: 15px;
    }
}


/* ================= SERVICES SECTION ================= */

.services-section {
    padding: 100px 60px;
    background: url("../images/bg3.jpg") center/cover no-repeat;
    background-attachment: fixed;
}

/* LAYOUT */
.services-container {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    align-items: center;
}

/* LEFT & RIGHT */
.services-left,
.services-right {
    flex: 1;
}

/* ================= LEFT SIDE ================= */

.services-left h2 {
    font-size: 38px;
    margin-bottom: 30px;
}

.services-left span {
    color: #ff6600;
}

/* GRID */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* SERVICE CARD */
.service-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

/* 🔥 3D ICON STYLE */
.service-card i {
    width: 60px;
    height: 60px;
    border-radius: 18px;

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

    color: white;
    font-size: 22px;

    margin-bottom: 10px;

    box-shadow:
        0 10px 20px rgba(0,0,0,0.15),
        inset 0 2px 6px rgba(255,255,255,0.3);

    transition: 0.3s;
}

/* TEXT */
.service-card p {
    color: black;
    font-weight: 500;
}

/* HOVER */
.service-card:hover i {
    transform: translateY(-5px) scale(1.08);
}

/* MULTICOLOR GRADIENTS */
.blue i { background: linear-gradient(135deg, #667eea, #764ba2); }
.green i { background: linear-gradient(135deg, #43cea2, #185a9d); }
.orange i { background: linear-gradient(135deg, #f7971e, #ffd200); }
.red i { background: linear-gradient(135deg, #ff6a00, #ee0979); }
.purple i { background: linear-gradient(135deg, #a18cd1, #fbc2eb); }
.cyan i { background: linear-gradient(135deg, #00c6ff, #0072ff); }
.pink i { background: linear-gradient(135deg, #ff9a9e, #fad0c4); }
.yellow i { background: linear-gradient(135deg, #fce38a, #f38181); }
.teal i { background: linear-gradient(135deg, #11998e, #38ef7d); }
.indigo i { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.dark i { background: linear-gradient(135deg, #434343, #000000); }

/* ================= RIGHT SIDE ================= */

/* IMAGE WRAPPER */
.services-image-wrapper {
    position: relative;
    display: inline-block;
}

/* IMAGE */
.services-image-wrapper img {
    width: 100%;
    max-width: 500px;
    height: 400px;
    object-fit: cover;
    border-radius: 20px;
}

/* 🔥 OVERLAY BOX (TOP CENTER FLOAT) */
.services-overlay-box {
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);

    width: 260px;
    padding: 20px;

    background: rgba(255,255,255,0.95);
    border-radius: 12px;

    border-top: 5px solid #007bff;

    text-align: center;

    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    color:black;
}

/* CONTACT BUTTON */
.services-contact-btn {
    margin-top: 20px;
    padding: 12px 25px;

    background: linear-gradient(135deg, #007bff, #00c6ff);
    border: none;
    color: white;
    border-radius: 30px;

    font-size: 15px;
    cursor: pointer;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    box-shadow: 0 8px 20px rgba(0,123,255,0.3);
}

.services-contact-btn:hover {
    transform: translateY(-3px);
}

/* ❌ REMOVE OLD FLOAT ICON SYSTEM COMPLETELY */
/* (deleted .float-icon, .icon1, etc.) */

/* ================= RESPONSIVE ================= */

@media(max-width: 992px) {
    .services-left,
    .services-right {
        flex: 100%;
    }
}

@media(max-width: 768px) {
    .services-section {
        padding: 60px 20px;
    }

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

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* overlay becomes normal */
    .services-overlay-box {
        position: static;
        transform: none;
        margin-bottom: 15px;
        width: 100%;
    }

    .services-image-wrapper img {
        width: 100%;
        height: auto;
    }
}


/* ================= ABOUT SECTION ================= */

.travel-about-section {
    padding: 100px 60px;
    background: #f9fbff;
}

/* LAYOUT */
.travel-about-container {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    align-items: center;
}

.travel-about-left,
.travel-about-right {
    flex: 1;
}

.travel-about-section p {
    font-size: 20px;
    color: #f1f1f1;
    margin-top: 10px;
    font-weight: 400;
}

/* ================= LEFT CONTENT ================= */

.travel-about-left h2 {
    font-size: 36px;
    margin-bottom: 20px;
    color:black;
}

.travel-about-left span{
    color: #ff6600;
    font-weight: 700;
}

.travel-about-left p {
    font-size: 15px;
    line-height: 1.7;
    color: #444;
}

/* ================= RIGHT IMAGE ================= */

.travel-image-wrapper {
    position: relative;
    display: inline-block;
}

/* IMAGE */
.travel-image-wrapper img {
    width: 100%;
    max-width: 500px;
    height: 420px;
    object-fit: cover;

    border-radius: 20px;

    /* 🔥 STYLISH FRAME */
    border: 4px solid #fff;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

/* ================= FLOATING ICONS ================= */

.travel-icon {
    position: absolute;

    width: 55px;
    height: 55px;
    border-radius: 16px;

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

    color: white;
    font-size: 20px;

    box-shadow: 0 10px 25px rgba(0,0,0,0.2);

    animation: float 3s infinite ease-in-out;
}

/* ICON COLORS */
.icon-passport {
    top: -20px;
    left: 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.icon-flight {
    top: 40%;
    right: -25px;
    background: linear-gradient(135deg, #00c6ff, #0072ff);
}

.icon-globe {
    bottom: 20px;
    left: -20px;
    background: linear-gradient(135deg, #43cea2, #185a9d);
}

.icon-map {
    bottom: -20px;
    right: 40px;
    background: linear-gradient(135deg, #ff6a00, #ee0979);
}

/* FLOAT ANIMATION */
@keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0); }
}

/* ================= RESPONSIVE ================= */

@media(max-width: 768px) {

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

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

    .travel-image-wrapper img {
        height: auto;
    }

    .travel-icon {
        display: none; /* hide icons on mobile for clean UI */
    }
}

/* membership Section */

/* =========================
   MEMBERSHIP SECTION
========================= */
.membership-section {
  padding: 60px 20px;
  text-align: center;
  background: linear-gradient(to right, #fff, #fff5ec);
}

.membership-section h4 {
  font-size: 24px;
  margin-bottom: 30px;
  color: #ff6600;
  font-weight: 600;
}

/* =========================
   SWIPER
========================= */
.mySwiper {
  width: 100%;
  padding: 20px 10px;
}

/* =========================
   CARD DESIGN
========================= */
.member-card {
  width: 140px;
  height: 120px;

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

  background: #fff;
  border-radius: 16px;

  /* ORANGE FRAME */
  border: 2px solid #ff6b00;

  /* SHADOW */
  box-shadow: 0 6px 18px rgba(255, 107, 0, 0.2);

  padding: 15px;
  transition: all 0.3s ease;
}

/* HOVER EFFECT */
.member-card:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 10px 25px rgba(255, 107, 0, 0.4);
}

/* LOGO IMAGE */
.member-card img {
  max-width: 100%;
  max-height: 70px;
  object-fit: contain;

  filter: grayscale(100%);
  transition: all 0.3s ease;
}

/* LOGO HOVER */
.member-card:hover img {
  filter: grayscale(0%);
  transform: scale(1.1);
}

/* =========================
   SLIDE ALIGNMENT
========================= */
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* =========================
   NAV BUTTONS
========================= */
.swiper-button-next,
.swiper-button-prev {
  color: #ff6b00;
  background: #fff;
  padding: 18px;
  border-radius: 50%;
  box-shadow: 0 5px 15px rgba(0,0,0,0.15);
  transition: 0.3s;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  transform: scale(1.1);
}


/* FIX SLIDER SPACING */
.mySwiper {
  width: 100%;
  padding: 30px 0;
}

/* CENTER SLIDES PROPERLY */
.swiper-wrapper {
  align-items: center;
}

/* SPACE BETWEEN CARDS */
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* FIX CUT-OFF ISSUE */
.membership-section {
  overflow: hidden;
}



/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {
  .member-card {
    width: 120px;
    height: 100px;
  }
}

@media (max-width: 480px) {
  .member-card {
    width: 100px;
    height: 90px;
  }
}




/* ===============================
   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;
  }
}

/* packages */

/* ================= HERO ================= */
.packages-hero {
    height: 90vh;
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.6)),
                url('../images/tour_hero.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

.packages-hero h1 {
    font-size: 48px;
    font-weight: 700;
}

.packages-hero p {
    margin: 15px 0;
    font-size: 18px;
}

/* BUTTONS */
.btn-primary, .btn-secondary {
    padding: 12px 25px;
    border-radius: 30px;
    margin: 10px;
    display: inline-block;
    font-weight: 600;
    transition: 0.3s;
}

.btn-primary {
    background: linear-gradient(45deg, #ff6600, #ff3300);
    color: #fff;
}

.btn-secondary {
    background: #fff;
    color: #333;
}

.btn-primary:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 25px rgba(255,102,0,0.5);
}

.btn-secondary:hover {
    background: #ff6600;
    color: #fff;
}

/* ================= FILTER ================= */
.filter-bar {
    text-align: center;
    margin: 40px 0;
}

.filter-bar select {
    padding: 10px 20px;
    border-radius: 30px;
    border: none;
    background: #f3f3f3;
}


/* FILTER PILLS */
.filter-pills {
    text-align: center;
    margin: 30px 0;
}

.pill {
    border: none;
    padding: 10px 22px;
    margin: 6px;
    border-radius: 30px;
    background: #f1f1f1;
    color: #333;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s;
}

/* ACTIVE */
.pill.active {
    background: linear-gradient(45deg, #ff6600, #ff3300);
    color: #fff;
    box-shadow: 0 5px 15px rgba(255, 102, 0, 0.3);
}

/* HOVER */
.pill:hover {
    transform: translateY(-2px);
    background: #ff6600;
    color: #fff;
}




/* ================= GRID ================= */
.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 0 80px 80px;
    margin-top: 60px;
    background: #fff;
}

/* ================= CARD ================= */
.package-card {
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    position: relative;
    transition: 0.4s;
}

/* COLORFUL FRAME */
.package-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 3px;
    background: linear-gradient(135deg, #ff6600, #ffcc00, #ff3300);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
}

/* HOVER */
.package-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

/* IMAGE */
.image-box {
    position: relative;
    height: 220px;
    overflow: hidden;
    z-index: 1;
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.4s;
}

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

/* BADGE */
.badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ff6600;
    color: #fff;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
}

/* SHARE ICON */
/* SHARE BOX */
.share-box {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}

/* MAIN BUTTON */
.share-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 16px;

    background: linear-gradient(45deg, #ff6600, #ff3300);

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

    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transition: 0.3s;
}

.share-btn:hover {
    transform: scale(1.15) rotate(10deg);
}

/* SHARE MENU */
.share-menu {
    position: absolute;
    top: 50px;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: 0.3s;
}

/* SHOW MENU */
.share-box:hover .share-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ICON BUTTONS */
.share-menu a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;

    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    transition: 0.3s;
}

.share-menu a:hover {
    transform: scale(1.2);
}

/* COLORS */
.whatsapp { background: #25D366; }
.facebook { background: #1877F2; }
.telegram { background: #0088cc; }
.copy { background: #333; }



/* CONTENT */
.card-content {
    padding: 20px;
    position: relative;
    z-index: 5;
}

/* ENGLISH TITLE */
.card-content h3 {
    font-size: 20px;
    font-weight: 700;
}

/* TAMIL TITLE */
.card-content .tamil {
    color: #ff6600;
    font-weight: 600;
    margin-bottom: 8px;
}

/* DESCRIPTION */
.card-content .desc {
    font-size: 14px;
    color: #666;
}

/* PRICE */
.price {
    font-size: 22px;
    font-weight: bold;
    color: #28a745;
    margin: 10px 0;
}

/* BUTTONS */
.actions {
    display: flex;
    gap: 10px;
}

.actions a {
    position: relative;
    z-index: 10;
}

/* VIEW BUTTON */
.btn-view {
    flex: 1;
    padding: 10px;
    border-radius: 25px;
    background: linear-gradient(45deg, #007bff, #00c6ff);
    color: #fff;
    text-align: center;
    transition: 0.3s;
}

.btn-view:hover {
    transform: scale(1.05);
}

/* BOOK BUTTON */
.btn-book {
    flex: 1;
    padding: 10px;
    border-radius: 25px;
    background: linear-gradient(45deg, #ff6600, #ff3300);
    color: #fff;
    text-align: center;
    transition: 0.3s;
}

.btn-book:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(255,102,0,0.4);
}

/* ENGLISH TITLE */
.title-en {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    margin-bottom: 5px;
}

/* TAMIL TITLE */
.title-ta {
    font-size: 16px;
    font-weight: 600;
    color: #ff6600;
    margin-bottom: 10px;
}

/* RESPONSIVE */
@media(max-width:768px){
    .packages-hero h1 {
        font-size: 28px;
    }

    .packages-grid {
        padding: 20px;
    }
}




/* Certificate Section */
.cta-parallax {
  background-image: url('../images/contact.jpg');
  min-height: 550px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cta-overlay {
  background: rgba(0,0,0,0.5);
  padding: 40px;
  border-radius: 15px;
  text-align: center;
  color: #fff;
  max-width: 600px;
}

.cta-overlay h2 {
  margin-bottom: 10px;
  font-size: 28px;
}

.cta-overlay p {
  margin-bottom: 20px;
}

.cta-btn {
  background: #ffcc00;
  color: #000;
  padding: 12px 25px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

.cta-btn:hover {
  background: #ffaa00;
}

/* Mobile Fix (Parallax issue on mobile) */
@media (max-width: 768px) {
  .cta-parallax {
    background-attachment: scroll;
  }
}


/* about us */

.about-hero {
    position: relative;
    height: 90vh;
    background: url('images/about-banner.jpg') no-repeat center center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
}

.about-overlay {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.about-hero-content {
    color: #fff;
    max-width: 700px;
    padding: 20px;
    animation: fadeIn 1.5s ease-in-out;
}

.about-hero-content h1 {
    font-size: 48px;
    margin-bottom: 15px;
    font-weight: 700;
}

.about-hero-content p {
    font-size: 18px;
    margin-bottom: 30px;
    line-height: 1.6;
}

.about-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ff7a00;
    color: #fff;
    padding: 12px 25px;
    font-size: 16px;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.3s ease;
}

.about-btn i {
    transition: transform 0.3s ease;
}

.about-btn:hover {
    background: #e56b00;
}

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

/* Animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .about-hero-content h1 {
        font-size: 32px;
    }

    .about-hero-content p {
        font-size: 16px;
    }
}

.mission-section {
  background: #f8f9fa;
}

/* IMAGE */
.mission-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
}

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

/* TITLE */
.section-title {
  font-weight: 700;
}

/* WRAPPER */
.mission-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* CARDS */
.mission-card,
.vision-card {
  padding: 30px;
  border-radius: 20px;
  color: #fff;
  position: relative;
  transition: 0.4s;
}

/* GRADIENT COLORS */
.mission-card {
  background: linear-gradient(135deg, #ff7a00, #f36c21);
}

.vision-card {
  background: linear-gradient(135deg, #007bff, #00c6ff);
}

/* HOVER */
.mission-card:hover,
.vision-card:hover {
  transform: translateY(-10px);
}

/* ICON */
.icon {
  font-size: 30px;
  margin-bottom: 10px;
}

/* CONNECTOR LINE */
.connector {
  position: absolute;
  left: 50%;
  top: 120px;
  width: 4px;
  height: 80px;
  background: #ddd;
  transform: translateX(-50%);
  z-index: 0;
}

/* CHAIN DOTS */
.connector::before,
.connector::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: #f36c21;
  border-radius: 50%;
}

.connector::before {
  top: -10px;
}

.connector::after {
  bottom: -10px;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .mission-wrapper {
    gap: 20px;
  }

  .connector {
    display: none;
  }

  .mission-card,
  .vision-card {
    text-align: center;
  }
}


/* timeline */

.timeline-image-section {
    padding: 80px 20px;
    background: #fff;
}

/* MAIN LAYOUT */
.timeline-layout {
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 50px;
}

/* LEFT TIMELINE AREA */
.timeline-modern {
    flex: 2;
}

/* RIGHT IMAGE */
.timeline-image {
    flex: 1;
    display: flex;
    justify-content: center;
}

.timeline-image img {
    width: 100%;
    max-width: 400px;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    transition: 0.4s;
}

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

/* ===== TIMELINE CORE ===== */

.timeline-line {
    position: relative;
}

.timeline-line::after {
    content: '';
    position: absolute;
    width: 4px;
    background: #ff7a00;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

/* BLOCK */
.timeline-block {
    position: relative;
    margin: 40px 0;
}

.timeline-content.left {
    margin-right: auto;
}

.timeline-content.right {
    margin-left: auto;
}

/* CENTER DOT */
.timeline-block::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 20px;
    width: 18px;
    height: 18px;
    background: #fff;
    border: 4px solid #ff7a00;
    border-radius: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(255,122,0,0.5);
    z-index: 2;
}

/* CONTENT */
.timeline-content {
    width: 45%;
    max-width: 500px; /* prevents overflow */
    padding: 20px;
    background: #f9f9f9;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: 0.3s;
}

/* LEFT */
.timeline-content.left {
    text-align: right;
    color:black;
}

/* RIGHT */
.timeline-content.right {
    margin-left: 55%;
     color:black;
}

/* ARROWS */
.timeline-content.left::after {
    content: '';
    position: absolute;
    right: -10px;
    top: 20px;
    border: 10px solid transparent;
    border-left-color: #f9f9f9;
}

.timeline-content.right::after {
    content: '';
    position: absolute;
    left: -10px;
    top: 20px;
    border: 10px solid transparent;
    border-right-color: #f9f9f9;
}

/* HOVER */
.timeline-content:hover {
    transform: scale(1.05);
}

/* MOBILE */
@media (max-width: 992px) {
    .timeline-layout {
        flex-direction: column;
    }

    .timeline-image {
        order: -1;
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .timeline-line::after {
        left: 10px;
    }

    .timeline-block::before {
        left: 10px;
    }

    .timeline-content {
        width: 100%;
        margin-left: 30px !important;
        text-align: left;
    }

    .timeline-content::after {
        display: none;
    }
}

/* testimonal */
/* =========================
   TESTIMONIAL SECTION
========================= */
.testimonial-section {
  padding: 60px 20px;
  text-align: center;
  background: linear-gradient(to right, #ffffff 0%, #fff5ec 40%, #ffe8d6 100%);
}

/* TITLE */
.testimonial-title {
  color: #222;
  font-size: 28px;
  margin-bottom: 30px;
}

/* CONTAINER */
.testimonial-carousel-container {
  overflow: hidden;
  max-width: 1200px;
  margin: auto;
}

/* TRACK */
.testimonial-track {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: scroll 25s linear infinite;
}

/* =========================
   CARD DESIGN
========================= */
.testimonial-card {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #ffffff;
  padding: 15px;
  margin: 10px;
  border-radius: 12px;

  /* ORANGE FRAME */
  border: 2px solid #ff6b00;
  box-shadow: 0 5px 15px rgba(255, 107, 0, 0.2);

  min-width: 280px;
  max-width: 320px;
  text-align: left;

  transition: all 0.3s ease;
}

/* HOVER EFFECT */
.testimonial-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 10px 25px rgba(255, 107, 0, 0.4);
}

/* IMAGE */
.testimonial-card img {
  width: 60px;
  height: 60px;
  border-radius: 50%;

  /* ORANGE BORDER */
  border: 2px solid #ff6b00;
}

/* TEXT */
.testimonial-card h4 {
  margin: 0;
  font-size: 16px;
  color: #222;
}

.testimonial-card p {
  margin: 5px 0 0;
  font-size: 14px;
  color: #555;
}

/* =========================
   BUTTONS
========================= */
.testimonial-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 35px;
  flex-wrap: wrap;
}

.btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 30px;
  text-decoration: none;
  color: #fff;
  font-weight: 600;
  transition: all 0.3s ease;
}

/* BUTTON COLORS */
.review-btn {
  background: linear-gradient(45deg, #ff6b00, #ff3c00);
}

.contact-btn {
  background: linear-gradient(45deg, #ff9a00, #ff6b00);
}

/* BUTTON HOVER */
.btn:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}

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

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 900px) {
  .testimonial-card {
    min-width: 260px;
  }
}

@media (max-width: 600px) {
  .testimonial-card {
    flex-direction: column;
    text-align: center;
    min-width: 220px;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }
}