@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --primary: #00b8d4;
  --primary-dark: #0097b2;
  --accent: #e91e63;
  --dark: #0d1b2a;
}

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



body {
  font-family: "Roboto", sans-serif;
  overflow-x: hidden;
}

/* start css */
/* ===== LOGO ===== */
.navbar-logo {
  height: 54px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  display: block;
  transition: height 0.35s ease;
}

#mainNavbar.scrolled .navbar-logo {
  height: 44px;
}


/*  */
/* ===== LOGO SCROLL EFFECT — DESKTOP ONLY ===== */

.navbar {
  transition: padding 0.4s ease, box-shadow 0.4s ease;
  padding-top: 12px;
  padding-bottom: 12px;
  position: relative; /* ← এটা যোগ করো */
}

/* লোগো নেভবারের উপরে ভাসবে — নেভবার নামবে না */
#logo-link {
  position: absolute;  /* ← এটাই মূল সমাধান */
  top: 0px;
  left: 20px;
  z-index: 999;
  transition: top 0.4s ease;
}

/* Default বড় লোগো */
#navbar-logo {
  height: 90px;
  width: auto;
  transition: height 0.4s ease;
  display: block;
}

/* স্ক্রোল করলে ছোট */
#navbar-logo.logo-scrolled {
  height: 48px;
}

.navbar.navbar-scrolled {
  padding-top: 6px;
  padding-bottom: 6px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

@media (max-width: 991px) {
  #logo-link {
    position: static !important;
  }
  #navbar-logo {
    height: 50px !important;
    transition: none;
  }
}
/*  */
/* ===== NAVBAR ===== */
#mainNavbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 22px 0;
  background: transparent;
  transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}

#mainNavbar.scrolled {
  background: #ffffff;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12);
  padding: 14px 0;
}

#mainNavbar.slide-in {
  animation: navSlideDown 0.45s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes navSlideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}


/*LOGO SCROLL EFFECT — DESKTOP ONLY end  */
@media (max-width: 991px) {
  .navbar-inner {
    flex-direction: row-reverse;
  }
}

/* Layout: logo left | nav center | phone right */
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* Nav links sit absolutely centered */
.navbar-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0;
}

#mainNavbar .nav-link {
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: #ffffff !important;
  padding: 8px 10px !important;
  transition: color 0.2s;
  text-transform: uppercase;
  white-space: nowrap;
}

#mainNavbar .nav-link.active {
  color: var(--primary) !important;
}

#mainNavbar .nav-link:hover {
  color: var(--primary) !important;
}

#mainNavbar.scrolled .nav-link {
  color: #333 !important;
}

#mainNavbar.scrolled .nav-link.active,
#mainNavbar.scrolled .nav-link:hover {
  color: var(--primary) !important;
}

.btn-apply-custom {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 30px;
  border-radius: 50px;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  color: #fff;
  /* Default color black */
  background: #024465;
  border: #024465;
  text-decoration: none;
  transition: all 0.5s ease-in-out;
  z-index: 1;
}

/* apply batton css */
/* Hover background sweep (Right to Left) */
.sweep-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #00B8D4;
  border-color: #00B8D4;
  /* Sky-600 color */
  transform: translateX(101%);
  /* Shuru te thakbe baire (right e) */
  transition: transform 0.5s ease-in-out;
  z-index: -1;
  /* Text er niche thakbe */
}

/* Button Text and Arrow */
.btn-text,
.btn-arrow {
  position: relative;
  z-index: 10;
  transition: all 0.5s ease-in-out;
}

.btn-arrow {
  width: 18px;
  height: 18px;
}

/* --- HOVER EFFECTS --- */

.btn-apply-custom:hover {
  color: #000 !important;
  /* Text white hoye jabe */
  border-color: #024465;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.btn-apply-custom:hover .sweep-bg {
  transform: translateX(0);
  /* Sweep background vitore ashbe */
}

.btn-apply-custom:hover .btn-arrow {
  transform: translateX(4px);
  /* Arrow ektu right e move korbe */
}

/* Scrolled Navbar e default border ektu visible korar jonno */
#mainNavbar.scrolled .btn-apply-custom {
  border-color: rgba(0, 0, 0, 0.2);
  color: #fff;
}

/* Transparent Navbar thakle text white thaka lagle eta bebohar koro */
#mainNavbar:not(.scrolled) .btn-apply-custom {
  color: #ffff;
  border-color: #024465;
  background-color: #024465;
}


/* Hamburger */
/* Hamburger Custom Design (Matching Image) */
.navbar-toggler {
  border: none;
  background: transparent;
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  /* Bar gulo ke right side e align korbe */
  gap: 4px;
  /* Bar gulor moddhe soman distance rakhar jonno */
  cursor: pointer;
}

.navbar-toggler .bar {
  display: block;
  height: 3px;
  /* Barer thickness */
  background: #fff;
  border-radius: 10px;
  transition: all 0.3s ease;
}

/* Stepped Widths: Image er moto choto-boro size */
.navbar-toggler .bar:nth-child(1) {
  width: 18px;
  /* Shobar uporer bar ta choto */
}

.navbar-toggler .bar:nth-child(2) {
  width: 28px;
  /* Majher bar ta shobar boro */
}

.navbar-toggler .bar:nth-child(3) {
  width: 14px;
  /* Shobar nicher bar ta shobar choto */
}

/* Scrolled Navbar e barer color kalo hoye jabe */
#mainNavbar.scrolled .navbar-toggler .bar {
  background: #333;
}

/* ===== MOBILE SIDEBAR ===== */
#mobileSidebar {
  position: fixed;
  top: 0;
  left: -280px;
  width: 280px;
  height: 100vh;
  background: #0d1b2a;
  z-index: 2000;
  transition: left 0.35s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 30px rgba(0, 0, 0, 0.4);
}

#mobileSidebar.open {
  left: 0;
}

#sidebarOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1999;
  display: none;
  backdrop-filter: blur(2px);
}

#sidebarOverlay.show {
  display: block;
}

.sidebar-header {
  background: #162336;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-logo {
  height: 40px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}

.sidebar-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  transition: color 0.2s;
}

.sidebar-close:hover {
  color: var(--primary);
}

.sidebar-nav {
  padding: 16px 0;
  flex: 1;
  overflow-y: auto;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #cdd8e3;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 13px 24px;
  border-left: 3px solid transparent;
  transition: all 0.2s;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
  color: var(--primary);
  border-left-color: var(--primary);
  background: rgba(0, 184, 212, 0.08);
}

.sidebar-phone {
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-phone a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  border-radius: 50px;
  padding: 12px 20px;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  transition: background 0.2s;
}

.sidebar-phone a:hover {
  background: #c0165a;
}

/* ===== HERO SLIDER ===== */
#heroSlider {
  position: relative;
  height: 100vh;
  min-height: 580px;
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
  display: flex;
  align-items: center;
}

.slide.active {
  opacity: 1;
  z-index: 2;
}

.slide-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.0);
  transition: transform 8s ease;
}

.slide.active .slide-bg {
  transform: scale(1.08);
}

.slide-overlay {
  position: absolute;
  inset: 1;
  background: linear-gradient(to right, rgba(10, 30, 50, 0.83) 40%, rgba(10, 30, 50, 0.28) 100%);
}

.slide-content {
  position: relative;
  z-index: 3;
  max-width: 620px;
  padding: 0 20px;
}

/* TEXT ANIMATIONS */
.slide-content .badge-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 184, 212, 0.18);
  border: 1px solid rgba(0, 184, 212, 0.4);
  color: #F98E14;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 18px;
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s;
}

.slide-content h1 {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.15;
  color: #ffffff;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease 0.3s, transform 0.7s ease 0.3s;
}

.slide-content h1 span {
  color: var(--primary);
}

.slide-content .text-divider {
  width: 0;
  height: 2px;
  background: var(--primary);
  margin-bottom: 20px;
  opacity: 0;
  border-radius: 2px;
  transition: width 0.7s ease 0.45s, opacity 0.3s ease 0.45s;
}

.slide-content p {
  font-size: clamp(0.9rem, 1.8vw, 1.05rem);
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.7;
  margin-bottom: 36px;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease 0.55s, transform 0.7s ease 0.55s;
}

.slide-content .btn-consult {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease 0.75s, transform 0.7s ease 0.75s;
}

.slide.active .slide-content .badge-line {
  opacity: 1;
  transform: translateX(0);
}

.slide.active .slide-content h1 {
  opacity: 1;
  transform: translateY(0);
}

.slide.active .slide-content .text-divider {
  opacity: 1;
  width: 60px;
}

.slide.active .slide-content p {
  opacity: 1;
  transform: translateY(0);
}

.slide.active .slide-content .btn-consult {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================
       BUTTON — clock icon style (matches image)
       Dark teal pill: [clock icon] | text | [→]
    ============================================= */
.btn-consult {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: #024465;
  color: #fff;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  border-radius: 50px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  transition: border-color 0.25s, background 0.25s, transform 0.25s,
    opacity 0.7s ease 0.75s;
}

.btn-consult:hover {
  background: #024465;
  border-color: #024465;
  color: #fff;
  transform: translateY(-2px);
}

.btn-clock-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.btn-clock-wrap svg {
  width: 24px;
  height: 24px;
}

.btn-consult-text {
  padding: 0 20px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

.btn-arrow-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  flex-shrink: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent;
  transition: background 0.25s;
}

.btn-consult:hover .btn-arrow-wrap {
  background: #024465;
}

.btn-arrow-wrap svg {
  width: 18px;
  height: 18px;
}

/* Slider controls — prev/next only (dots removed) */
.slider-controls {
  position: absolute;
  bottom: 36px;
  right: 40px;
  z-index: 10;
  display: flex;
  gap: 10px;
}

.slider-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
  backdrop-filter: blur(4px);
}

.slider-btn:hover {
  background: #024465;
  border-color: #024465;
  transform: scale(1.08);
}

/* ===== 22-INCH / LARGE MONITOR ===== */
@media (min-width: 1600px) {
  .navbar-logo {
    height: 60px;
  }

  #mainNavbar.scrolled .navbar-logo {
    height: 50px;
  }

  #mainNavbar .nav-link {
    font-size: 0.85rem;
    padding: 8px 13px !important;
  }

  .slide-content {
    max-width: 740px;
  }
}

@media (min-width: 1920px) {
  .navbar-logo {
    height: 66px;
  }

  .slide-content h1 {
    font-size: 4rem;
  }

  .slide-content p {
    font-size: 1.15rem;
  }
}

/* Mid-range desktop (1200–1600) */
@media (max-width: 1400px) {
  #mainNavbar .nav-link {
    font-size: 0.78rem;
    padding: 8px 9px !important;
  }
}

/* RESPONSIVE */
@media (max-width: 991px) {
  #desktopNav {
    display: none !important;
  }

  .navbar-center {
    display: none !important;
  }

  .d-none.d-lg-flex {
    display: none !important;
  }
}

@media (min-width: 992px) {
  .mobile-toggler-wrap {
    display: none !important;
  }
}

@media (max-width: 767px) {
  #heroSlider {
    height: 100svh;
    min-height: 500px;
  }

  .slide-overlay {
    background: linear-gradient(to bottom, rgba(10, 30, 50, 0.72) 0%, rgba(10, 30, 50, 0.78) 100%);
  }

  .slide-content h1 {
    font-size: clamp(1.6rem, 7vw, 2.4rem);
  }

  .slider-controls {
    bottom: 24px;
    right: 20px;
  }

  .btn-clock-wrap,
  .btn-arrow-wrap {
    width: 46px;
    height: 46px;
  }

  .btn-consult-text {
    font-size: 0.76rem;
    padding: 0 14px;
  }
}

/* end css  */

/* about css start */
/* Header Desktop 2-line Fix */
.main-heading {
  font-size: 42px;
  line-height: 1.2;
  max-width: 550px;
  /* Desktop e text ke 2 line e rakhe */
  color: #0d1b2a;
}

/* Highlight Color */
.highlight {
  color: #e91e63;
  /* Tomar theme color */
}

/* Glassmorphism Stat Cards - Highlighting er jonno */
/* --- Premium Box Styling --- */
.stat-card {
  background: #ffffff;
  padding: 10px 7px;
  border-radius: 20px;
  text-align: center;
  transition: all 0.4s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Hover Effect */
.stat-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Icon Design */
.stat-icon-wrap {
  width: 60px;
  height: 60px;
  line-height: 60px;
  background: #f8f9fa;
  border-radius: 50%;
  margin: 0 auto 15px;
  font-size: 1.5rem;
  transition: 0.4s;
}

.stat-card:hover .stat-icon-wrap {
  transform: rotateY(360deg);
}

/* --- 3 Unique Colors --- */

/* 1. Countries (Deep Blue Theme) */
.color-1 {
  border-top: 5px solid #00b8d4;
}

.color-1 .stat-icon-wrap {
  background: rgba(0, 184, 212, 0.1);
  color: #00b8d4;
}

.color-1 h3 {
  color: #00b8d4;
}

/* 2. Students (Royal Pink/Red Theme) */
.color-2 {
  border-top: 5px solid #e91e63;
}

.color-2 .stat-icon-wrap {
  background: rgba(233, 30, 99, 0.1);
  color: #e91e63;
}

.color-2 h3 {
  color: #e91e63;
}

/* 3. Experience (Golden Orange Theme) */
.color-3 {
  border-top: 5px solid #ffab00;
}

.color-3 .stat-icon-wrap {
  background: rgba(255, 171, 0, 0.1);
  color: #ffab00;
}

.color-3 h3 {
  color: #ffab00;
}

/* Text Styling */
.stat-card h3 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 5px;
}

.stat-card p {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #666;
  letter-spacing: 1px;
  margin-bottom: 0;
}

/* Mobile responsive fix */
@media (max-width: 768px) {
  .stat-card {
    padding: 20px 10px;
  }

  .stat-card h3 {
    font-size: 1.2rem;
  }

  .stat-icon-wrap {
    width: 45px;
    height: 45px;
    line-height: 45px;
    font-size: 1.1rem;
  }
}

/* Mobile Responsive Fixes (No Overflow) */
@media (max-width: 991px) {
  .main-heading {
    font-size: 2.2rem;
    max-width: 100%;
  }

  .about-content {
    ps-lg-0;
    text-align: left;
  }

  .stat-card h3 {
    font-size: 1.2rem;
  }

  .stat-card p {
    font-size: 0.6rem;
  }

  .experience-badge {
    right: 0;
    scale: 0.8;
  }
}

/* 22-inch Monitor Fix */
@media (min-width: 1600px) {
  .custom-container {
    max-width: 1550px;
  }

  .main-heading {
    font-size: 4rem;
  }
}


/* --- About Button Customization --- */
.about-btn {
  /* Default State Settings */
  background: #024465 !important;
  color: #fff !important;
  /* Default Text Color */
  border: 2px solid #024465!important;
  /* Default Border Color */
  padding: 14px 40px !important;
  font-weight: 700;
  transition: all 0.5s ease-in-out;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Default Arrow Color */
.about-btn .btn-arrow {
  stroke: #fff;
  transition: all 0.5s ease-in-out;
}

/* Sweep Background (Hover korle je color ta ashbe) */
.about-btn .sweep-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #18e0ff;
  /* Hover Sweep Color (Sky-600) */
  transform: translateX(101%);
  /* Shuru te baire thakbe */
  transition: transform 0.5s ease-in-out;
  z-index: -1;
  border-radius: 50px;
}

/* --- HOVER STATE --- */

.about-btn:hover {
  color: #000 !important;
  border-color: #18e0ff !important;
  box-shadow: 0 10px 20px rgba(2, 132, 199, 0.2);
}

.about-btn:hover .sweep-bg {
  transform: translateX(0);
}

.about-btn:hover .btn-arrow {
  stroke: black;
  transform: translateX(5px);
  /* Arrow ektu move korbe */
}

/* Text and Icon Layering Fix */
.about-btn .btn-text,
.about-btn .btn-arrow {
  position: relative;
  z-index: 2;
}

/* image */
/* Image Column Scale Update */
.image-wrapper {
  position: relative;
  padding: 10px;
  /* Image-ke boro dekhate boro screen-e ektu negative margin deya hoyeche */
  margin-left: -20px;
}

.main-about-img {
  width: 100%;
  /* Boro monitor-e image-er height auto thakbe kintu container full rakbe */
  min-height: 500px;
  object-fit: cover;
  border-radius: 30px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
  transition: all 0.5s ease;
}

/* 22-inch ba Large Desktop-er jonno Extra Scaling */
@media (min-width: 1400px) {
  .main-about-img {
    min-height: 600px;
    /* Image-er height ekhane boro kora hoyeche */
    transform: scale(1.05);
    /* Ektu zoom thakbe jate boro dekhay */
  }

  .image-wrapper {
    padding-right: 40px;
    /* Content theke ektu gap barano holo */
  }
}


/* ── About Section Mobile Image Fix ── */
@media (max-width: 991.98px) {
    .about-section .image-wrapper {
        padding: 0 !important;
        margin: 0 !important;
    }

    .about-section .main-about-img {
        width: 100% !important;
        height: 260px !important;
        min-height: unset !important;
        object-fit: cover !important;
        object-position: center top !important;
        border-radius: 12px !important;
        transform: none !important;
        display: block !important;
    }

    .about-section .decorative-shape,
    .about-section .experience-badge {
        display: none !important;
    }
}



/* Decorative shape-er size-o ektu boro kora holo image-er sathe mil rekhe */
.decorative-shape {
  position: absolute;
  bottom: -30px;
  left: -30px;
  width: 250px;
  height: 250px;
  background: rgba(0, 184, 212, 0.08);
  border-radius: 40px;
  z-index: -1;
}

/* about css end */


/* DESTINATION start css */
.section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.title-select {
  color: #1a7a7a;
}

.title-your {
  color: #e03050;
}

.title-dest {
  color: #e03050;
}

.dest-wrapper {
  position: relative;
  overflow: hidden;
  /* Popup কে কার্ডের ভেতরে রাখতে সাহায্য করবে */
  border-radius: 18px;
}

.dest-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
  aspect-ratio: 4/3;
  display: block;
  text-decoration: none;
}

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

.dest-wrapper:hover .dest-card img.card-photo {
  transform: scale(1.06);
}

.dest-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, transparent 55%);
  pointer-events: none;
}

.dest-label {
  position: absolute;
  bottom: 14px;
  left: 16px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
  border-radius: 50px;
  padding: 6px 16px 6px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 1.2px;
  color: #222;
  text-transform: uppercase;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  transition: opacity 0.2s ease;
}

/* Hover করলে লেবেল হাইড হবে যাতে পপআপ ক্লিয়ার দেখা যায় */
.dest-wrapper:hover .dest-label {
  opacity: 0;
}

.dest-label img.flag {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
}

/* ── Full Box Hover Info ── */
.dest-popup {
  position: absolute;
  inset: 0;
  /* কার্ডের একদম সমান করবে */
  z-index: 10;
  background: linear-gradient(160deg, rgba(13, 122, 122, 0.95) 0%, rgba(10, 90, 110, 0.95) 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  text-align: left;
}

.dest-wrapper:hover .dest-popup {
  opacity: 1;
  pointer-events: auto;
}

.dest-popup h3 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  color: #ffffff;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.dest-popup p {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.85rem;
  color: #fff;
  line-height: 1.5;
  margin-bottom: 15px;
}

.dest-popup .btn-discover {
  display: inline-block;
  width: fit-content;
  background: #ffffff;
  color: #0d7a7a;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-radius: 50px;
  padding: 8px 20px;
  text-decoration: none;
  transition: 0.2s;
}

.dest-popup .btn-discover:hover {
  background: #e0f5f5;
  transform: scale(1.05);
}

/* end */

/* services start css */

/* ──────────────────────────────────────
   OUR SERVICES — #FAFAFA Background
────────────────────────────────────── */
.services-section {
  background: #FAFAFA;
  padding: 72px 0 80px;
}

/* Header */
.section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 800;
  color: #024465;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.1;
}

/* View Services Button — image style (outline) */
.btn-view-services {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border: 1.5px solid #024465;
  border-radius: 50px;
  color: #ffffff;                        /* default white text */
  background-color: #024465;            /* default dark background */
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  transition: color 0.5s, border-color 0.5s;
}

/* Sweep — hover-এ #18e0ff আসবে */
.btn-view-services .sweep-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #18e0ff;
  transform: translateX(101%);
  transition: transform 0.5s ease-in-out;
  z-index: 0;
}

/* Text ও arrow উপরে থাকবে */
.btn-view-services .btn-text,
.btn-view-services::after {
  position: relative;
  z-index: 1;
}

.btn-view-services::after {
  content: '›';
  font-size: 1.2rem;
  line-height: 1;
}

/* Hover */
.btn-view-services:hover .sweep-bg {
  transform: translateX(0);
}

.btn-view-services:hover {
  color: #024465;                        /* hover-এ dark text */
  border-color: #18e0ff;
}
/* ──────────────────────────────────────
   SERVICE CARDS — white, shadowed
────────────────────────────────────── */
.service-card {
  background: #ffffff;
  border: 1px solid #e4eaee;
  border-radius: 16px;
  padding: 28px 24px 52px;  /* bottom বড় — arrow button এর জায়গা */
  height: 100%;
  min-height: 300px;
  box-shadow: 0 2px 14px rgba(2, 68, 101, 0.07);
  transition: box-shadow 0.25s, transform 0.25s;
  position: relative;
  overflow: hidden;
}

.service-card:hover {
  box-shadow: 0 10px 36px rgba(2, 68, 101, 0.14);
  transform: translateY(-4px);
}

/* ── Icon circle ── */
.service-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}

.service-icon svg {
  width: 34px;
  height: 34px;
}

/* Card 1 — Blue */
.col-12.col-sm-6:nth-child(1) .service-icon {
  background: #e3f2fb;
}
.col-12.col-sm-6:nth-child(1) .service-icon svg path {
  fill: #1a7fc1;
  fill-opacity: 1;
}
.col-12.col-sm-6:nth-child(1) .service-title::before { background: #1a7fc1; }
.col-12.col-sm-6:nth-child(1) .service-card-arrow { background: #1a7fc1; }

/* Card 2 — Green */
.col-12.col-sm-6:nth-child(2) .service-icon {
  background: #e3f9ef;
}
.col-12.col-sm-6:nth-child(2) .service-icon svg path {
  fill: #1aad6e;
  fill-opacity: 1;
}
.col-12.col-sm-6:nth-child(2) .service-title::before { background: #1aad6e; }
.col-12.col-sm-6:nth-child(2) .service-card-arrow { background: #1aad6e; }

/* Card 3 — Orange */
.col-12.col-sm-6:nth-child(3) .service-icon {
  background: #fff3e3;
}
.col-12.col-sm-6:nth-child(3) .service-icon svg path {
  fill: #f07c1a;
  fill-opacity: 1;
}
.col-12.col-sm-6:nth-child(3) .service-title::before { background: #f07c1a; }
.col-12.col-sm-6:nth-child(3) .service-card-arrow { background: #f07c1a; }

/* Card 4 — Purple */
.col-12.col-sm-6:nth-child(4) .service-icon {
  background: #f0e8fd;
}
.col-12.col-sm-6:nth-child(4) .service-icon svg path {
  fill: #7c3aed;
  fill-opacity: 1;
}
.col-12.col-sm-6:nth-child(4) .service-title::before { background: #7c3aed; }
.col-12.col-sm-6:nth-child(4) .service-card-arrow { background: #7c3aed; }

/* ── Title with colored top-line ── */
.service-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #024465;
  margin-top: 18px;
  margin-bottom: 10px;
  padding-top: 12px;
  position: relative;
  transition: none;
}

.service-title::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 3px;
  border-radius: 2px;
}

/* ── Description ── */
.service-desc {
  font-size: 0.855rem;
  color: #5a6e7f;
  line-height: 1.65;
  margin: 0;
  transition: none;
}

/* ── Arrow button — bottom right ── */
.service-card-arrow {
  position: absolute;
  bottom: 18px;
  right: 20px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: opacity 0.2s;
}

.service-card-arrow:hover {
  opacity: 0.85;
}

/* ── Hover — card stays white ── */
.service-card:hover {
  background: #ffffff;
}

/* ──────────────────────────────────────
   RIGHT IMAGE
────────────────────────────────────── */
.services-image {
  width: 100%;
  height: 100%;
  min-height: 500px;
  object-fit: cover;
  object-position: center top;
  border-radius: 16px;
  display: block;
}

/* ──────────────────────────────────────
   RESPONSIVE
────────────────────────────────────── */
@media (max-width: 991.98px) {
  .row.g-4.align-items-stretch {
    flex-direction: column-reverse;
  }
  .services-image {
    min-height: 360px;
  }
  .service-card {
    min-height: 260px;
  }
}

@media (max-width: 767.98px) {
  .services-section {
    padding: 48px 0 56px;
  }
  .service-card {
    padding: 24px 18px 48px;
    min-height: 220px;
  }
  .services-image {
    min-height: 260px;
  }
}
/* searves end css */


/* Your Journey start css  */

/* ── SECTION ── */
.steps-section {
  padding: 56px 0 70px;
  background: var(--bg);
}

/* ── HEADING ── */
.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #7c8abf;
  margin-bottom: 10px;
}

.eyebrow-line {
  display: inline-block;
  width: 30px;
  height: 2px;
  background: #7c8abf;
  border-radius: 2px;
}

.eyebrow-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7c8abf;
}

.main-title {
  font-size: clamp(1.4rem, 5vw, 2.625rem);
  font-weight: 900;
  color: #131d3b;
  line-height: 1.08;
  margin-bottom: 16px;
}

.main-title em {
  font-style: normal;
  color: #e84545;
}

.title-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 44px;
}

.title-rule .ln {
  width: 64px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #7c8abf);
}

.title-rule .ln.r {
  background: linear-gradient(270deg, transparent, #7c8abf);
}

.title-rule .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #5b4fd8;
}

/* ── CARD ── */
.step-card {
  background: #fff;
  border-radius: 20px;
  padding: 26px 14px 28px;
  text-align: center;
  position: relative;
  height: 100%;
  border-bottom: 3px solid transparent;
  box-shadow: 0 4px 24px rgba(79, 70, 229, .07);
  transition: transform .25s, box-shadow .25s;
}

.step-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(79, 70, 229, .13);
}

/* icon circle */
.icon-circle {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  position: relative;
  background: #fff;
}

.icon-circle::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.8px dashed;
  opacity: .3;
}

.icon-circle::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid;
  opacity: .25;
}

/* number badge */
.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 11px;
}

.step-label {
  font-size: 14.5px;
  font-weight: 800;
  color: #131d3b;
  line-height: 1.25;
  margin-bottom: 8px;
}

.step-desc {
  font-size: 12px;
  font-weight: 400;
  color: #7b8ab8;
  line-height: 1.55;
}

/* bottom colored dot */
.card-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  border: 2.5px solid var(--bg);
}

/* ── ARROW BETWEEN CARDS ── */
.arrow-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 43px;
  flex-shrink: 0;
  width: 52px;
}

.arr-inner {
  display: flex;
  align-items: center;
  gap: 0;
}

.arr-dash {
  width: 14px;
  height: 0;
  border-top: 1.5px dashed #b0bbdd;
}

.arr-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #dde3f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 900;
  color: #8896c8;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(79, 70, 229, .09);
  flex-shrink: 0;
}

/* ── SNAKE CONNECTORS ── */
.snake-right {
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 100px;
  border-right: 3px solid #14b8a6;
  border-top: 3px solid #14b8a6;
  border-bottom: 3px solid #14b8a6;
  border-radius: 0 22px 22px 0;
  pointer-events: none;
  z-index: 2;
}

.snake-left {
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 100px;
  border-left: 3px dashed #7c3aed;
  border-top: 3px dashed #7c3aed;
  border-bottom: 3px dashed #7c3aed;
  border-radius: 22px 0 0 22px;
  pointer-events: none;
  z-index: 2;
}

/* ── COLOR PALETTE ── */
.ic1 .icon-circle {
  background: #f0eeff;
}

.ic1 .icon-circle::before,
.ic1 .icon-circle::after {
  border-color: #5b4fd8;
}

.ic1 svg {
  color: #5b4fd8;
}

.ic1 .step-badge {
  background: linear-gradient(135deg, #7c6ff7, #4f46e5);
}

.ic1 .step-card {
  border-bottom-color: #5b4fd8;
}

.ic1 .card-dot {
  background: #5b4fd8;
}

.ic2 .icon-circle {
  background: #e0f8ff;
}

.ic2 .icon-circle::before,
.ic2 .icon-circle::after {
  border-color: #00b4e0;
}

.ic2 svg {
  color: #00b4e0;
}

.ic2 .step-badge {
  background: linear-gradient(135deg, #38d1f0, #0095cc);
}

.ic2 .step-card {
  border-bottom-color: #00b4e0;
}

.ic2 .card-dot {
  background: #00b4e0;
}

.ic3 .icon-circle {
  background: #e8fdf1;
}

.ic3 .icon-circle::before,
.ic3 .icon-circle::after {
  border-color: #22c55e;
}

.ic3 svg {
  color: #22c55e;
}

.ic3 .step-badge {
  background: linear-gradient(135deg, #4ade80, #16a34a);
}

.ic3 .step-card {
  border-bottom-color: #22c55e;
}

.ic3 .card-dot {
  background: #22c55e;
}

.ic4 .icon-circle {
  background: #fff4e6;
}

.ic4 .icon-circle::before,
.ic4 .icon-circle::after {
  border-color: #f97316;
}

.ic4 svg {
  color: #f97316;
}

.ic4 .step-badge {
  background: linear-gradient(135deg, #fb923c, #ea6200);
}

.ic4 .step-card {
  border-bottom-color: #f97316;
}

.ic4 .card-dot {
  background: #f97316;
}

.ic5 .icon-circle {
  background: #e0f5ff;
}

.ic5 .icon-circle::before,
.ic5 .icon-circle::after {
  border-color: #0ea5e9;
}

.ic5 svg {
  color: #0ea5e9;
}

.ic5 .step-badge {
  background: linear-gradient(135deg, #38bdf8, #0284c7);
}

.ic5 .step-card {
  border-bottom-color: #0ea5e9;
}

.ic5 .card-dot {
  background: #0ea5e9;
}

.ic6 .icon-circle {
  background: #f3eeff;
}

.ic6 .icon-circle::before,
.ic6 .icon-circle::after {
  border-color: #8b5cf6;
}

.ic6 svg {
  color: #8b5cf6;
}

.ic6 .step-badge {
  background: linear-gradient(135deg, #a78bfa, #6d28d9);
}

.ic6 .step-card {
  border-bottom-color: #8b5cf6;
}

.ic6 .card-dot {
  background: #8b5cf6;
}

.ic7 .icon-circle {
  background: #ede9ff;
}

.ic7 .icon-circle::before,
.ic7 .icon-circle::after {
  border-color: #7c3aed;
}

.ic7 svg {
  color: #7c3aed;
}

.ic7 .step-badge {
  background: linear-gradient(135deg, #9d5cf7, #5b21b6);
}

.ic7 .step-card {
  border-bottom-color: #7c3aed;
}

.ic7 .card-dot {
  background: #7c3aed;
}

.ic8 .icon-circle {
  background: #e8fdf1;
}

.ic8 .icon-circle::before,
.ic8 .icon-circle::after {
  border-color: #22c55e;
}

.ic8 svg {
  color: #22c55e;
}

.ic8 .step-badge {
  background: linear-gradient(135deg, #4ade80, #16a34a);
}

.ic8 .step-card {
  border-bottom-color: #22c55e;
}

.ic8 .card-dot {
  background: #22c55e;
}

.ic9 .icon-circle {
  background: #fce7f6;
}

.ic9 .icon-circle::before,
.ic9 .icon-circle::after {
  border-color: #ec4899;
}

.ic9 svg {
  color: #ec4899;
}

.ic9 .step-badge {
  background: linear-gradient(135deg, #f472b6, #be185d);
}

.ic9 .step-card {
  border-bottom-color: #ec4899;
}

.ic9 .card-dot {
  background: #ec4899;
}

.ic10 .icon-circle {
  background: #ede9ff;
}

.ic10 .icon-circle::before,
.ic10 .icon-circle::after {
  border-color: #7c3aed;
}

.ic10 svg {
  color: #7c3aed;
}

.ic10 .step-badge {
  background: linear-gradient(135deg, #9d5cf7, #5b21b6);
}

.ic10 .step-card {
  border-bottom-color: #7c3aed;
}

.ic10 .card-dot {
  background: #7c3aed;
}

/* ── LAYOUT ── */
.row-box {
  position: relative;
}

.steps-flex {
  display: flex;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  justify-content: center;
}

.step-col {
  flex: 1;
  min-width: 0;
  padding: 0 6px;
}

/* ── RESPONSIVE ── */
@media (max-width: 991px) {
  .steps-flex {
    flex-wrap: wrap;
  }

  .step-col {
    flex: 0 0 calc(33.33% - 12px);
    padding: 6px;
  }

  .arrow-wrap {
    display: none !important;
  }

  .snake-right,
  .snake-left {
    display: none;
  }
}

@media (max-width: 600px) {
  .step-col {
    flex: 0 0 calc(50% - 10px);
    padding: 5px;
  }

  .icon-circle {
    width: 70px;
    height: 70px;
  }

  .icon-circle svg {
    width: 32px !important;
    height: 32px !important;
  }

  .step-label {
    font-size: 12.5px;
  }

  .step-desc {
    font-size: 11px;
  }

  .step-card {
    padding: 18px 10px 22px;
  }
}

/* 22-inch / large monitors */
@media (min-width: 1400px) {
  .icon-circle {
    width: 100px;
    height: 100px;
  }

  .icon-circle svg {
    width: 50px !important;
    height: 50px !important;
  }

  .step-label {
    font-size: 15.5px;
  }

  .step-desc {
    font-size: 13px;
  }

  .step-card {
    padding: 30px 16px 32px;
  }

  .arr-btn {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  .arrow-wrap {
    width: 60px;
    padding-top: 50px;
  }
}

@media (min-width: 1920px) {
  .icon-circle {
    width: 114px;
    height: 114px;
  }

  .icon-circle svg {
    width: 58px !important;
    height: 58px !important;
  }

  .step-label {
    font-size: 17px;
  }

  .step-desc {
    font-size: 14.5px;
  }
}

/* Your Journey end css  */


/* testimonial-section css start */
.testimonial-section {
  background-color: #f0f0f0;
  font-family: 'Inter', sans-serif;
}

/* Image Wrapper with shadow/border like the sample */
.image-grid-container {
  padding: 15px;
  background: #c2b79a;
  /* Light brownish background from your image */
  border-radius: 20px;
}

.main-img-wrapper {
  height: 400px;
  /* Apne soto korte cheyesilen */
  overflow: hidden;
  border-radius: 15px;
}

.main-img-wrapper img {
  width: 100%;
  object-fit: cover;
  transition: 0.5s ease;
}

/* Text Stylings */
.text-light-gray {
  color: #e0e0e0;
}

.lh-lg {
  line-height: 1.8 !important;
}

/* Next Button Styling */
.btn-next-simple {
  background: none;
  border: none;
  color: #888;
  font-weight: 600;
  transition: 0.3s;
  font-size: 18px;
}

.btn-next-simple:hover {
  color: #e84545;
  transform: translateX(5px);
}

/* Slide Animation */
.slide-animation {
  animation: fadeInRight 0.6s ease-in-out;
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Highlight "SATISFACTION" */
.text-danger {
  color: #e84545 !important;
}

/* testimonial-section css end */

/* OUR PARTNER start css */
/* ── Section ── */
.partner-section {
  padding: 64px 0 72px;
  overflow: hidden;
  background: #EDEAE4;
}

/* ── Heading ── */
.section-heading {
  text-align: center;
  margin-bottom: 48px;
  letter-spacing: 0.06em;
  font-size: clamp(1.4rem, 3vw, 2.625rem);
  font-weight: 800;
  text-transform: uppercase;
  color: #1a2340;
}

.section-heading span {
  color: #C0392B;
}

/* ── Marquee outer ── */
.marquee-outer {
  width: 100%;
  overflow: hidden;
  position: relative;
  margin-bottom: 28px;
}

.marquee-outer::before,
.marquee-outer::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 130px;
  z-index: 2;
  pointer-events: none;
}

.marquee-outer::before {
  left: 0;
  background: linear-gradient(to right, #EDEAE4, transparent);
}

.marquee-outer::after {
  right: 0;
  background: linear-gradient(to left, #EDEAE4, transparent);
}

/* ── Marquee track ── */
.marquee-track {
  display: flex;
  width: max-content;
  gap: 32px;
  padding: 10px 0;
  will-change: transform;
  align-items: center;
}

.marquee-track.rtl {
  animation: scrollRTL 40s linear infinite;
}

.marquee-track.ltr {
  animation: scrollLTR 40s linear infinite;
}

.marquee-outer:hover .marquee-track {
  animation-play-state: paused;
}

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

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

@keyframes scrollLTR {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

/* ── Logo card — NO background, NO border, NO shadow ── */
.logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  min-width: 160px;
  flex-shrink: 0;
  cursor: default;
  transition: transform 0.28s ease, opacity 0.28s ease;
  padding: 0 10px;
}

.logo-card:hover {
  transform: translateY(-3px) scale(1.06);
  opacity: 0.85;
}

/* ── Logo image — transparent, natural colors ── */
.logo-card img.logo-img {
  max-height: 50px;
  max-width: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* ── Fallback text badge ── */
.logo-card .fallback-badge {
  display: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: #444;
  text-align: center;
  line-height: 1.35;
  max-width: 120px;
  text-transform: uppercase;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .marquee-track {
    gap: 20px;
  }

  .logo-card {
    height: 56px;
    min-width: 120px;
  }

  .logo-card img.logo-img {
    max-height: 38px;
    max-width: 110px;
  }

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

  .marquee-outer::before,
  .marquee-outer::after {
    width: 50px;
  }
}

/* OUR PARTNER end css */

/* from css start */
 /* ── Form Card ── */
.form-card {
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.10);
    overflow: visible;
    position: relative;
}

/* blob গুলো card এর ভেতরে clip করা — আলাদা wrapper দিয়ে */
.form-card-inner {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
}

.form-card::before,
.form-card::after { display: none; } /* পুরনো blob বন্ধ */

/* নতুন blob — form-card-inner এর ভেতরে */
.form-card-inner::before {
    content: '';
    position: absolute;
    width: 260px; height: 260px;
    background: #024465;
    opacity: .05;
    border-radius: 50%;
    top: -80px; right: -80px;
    pointer-events: none;
    z-index: 0;
}
.form-card-inner::after {
    content: '';
    position: absolute;
    width: 380px; height: 380px;
    background: #024465;
    opacity: .04;
    border-radius: 50%;
    bottom: -120px; left: -150px;
    pointer-events: none;
    z-index: 0;
}
 
    /* ── Badge pill ── */
    .badge-pill {
      display: inline-block;
      background: rgba(2, 68, 101, 0.10);
      color: #024465;
      padding: .35rem 1.25rem;
      border-radius: 999px;
      font-size: .8rem;
      font-weight: 600;
      letter-spacing: .02em;
    }
 
    /* ── Input wrapper ── */
    .input-wrapper {
      display: flex;
      align-items: center;
      border: 2px solid #e5e7eb;
      border-radius: .75rem;
      padding: .85rem 1rem;
      background: #fff;
      box-shadow: 0 1px 4px rgba(0,0,0,.05);
      transition: border-color .25s, box-shadow .25s;
      cursor: default;
    }
    .input-wrapper:hover {
      border-color: rgba(2, 68, 101, 0.45);
    }
    .input-wrapper:focus-within,
    .input-wrapper.active {
      border-color: #024465;
      box-shadow: 0 4px 14px rgba(2, 68, 101, 0.12);
    }
 
    .icon-box {
      width: 44px; height: 44px;
      background: rgba(2, 68, 101, 0.10);
      border-radius: .5rem;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      margin-right: .85rem;
    }
    .icon-box i {
      color: #024465;
      font-size: 1rem;
    }
 
    .input-wrapper input {
      border: none;
      outline: none;
      width: 100%;
      font-weight: 500;
      color: #1f2937;
      background: transparent;
      font-size: .95rem;
    }
    .input-wrapper input::placeholder {
      color: #9ca3af;
      font-weight: 400;
    }
 
    /* dropdown trigger text */
    .dropdown-label {
      width: 100%;
      font-weight: 500;
      color: #9ca3af;
      font-size: .95rem;
      user-select: none;
    }
    .dropdown-label.selected { color: #1f2937; }
 
    /* ── Custom Dropdown ── */
    .custom-dropdown-menu {
      display: none;
      position: absolute;
      top: calc(100% + .5rem);
      left: 0; right: 0;
      background: #fff;
      border: 1px solid #f0f0f0;
      border-radius: .75rem;
      box-shadow: 0 10px 40px rgba(0,0,0,.12);
      z-index: 999;
      overflow: hidden;
    }
    .custom-dropdown-menu.show { display: block; }
 
    .custom-dropdown-menu li {
      list-style: none;
      padding: .7rem 1.25rem;
      cursor: pointer;
      font-size: .92rem;
      font-weight: 500;
      color: #374151;
      transition: background .18s, color .18s;
    }
    .custom-dropdown-menu li:hover {
      background: rgba(2, 68, 101, 0.08);
      color: #024465;
    }
 
    /* search inside dropdown */
    .dropdown-search-wrap {
      padding: .6rem .75rem;
      border-bottom: 1px solid #f0f0f0;
      background: #fff;
      position: sticky;
      top: 0;
    }
    .dropdown-search-inner {
      display: flex;
      align-items: center;
      background: #f9fafb;
      border-radius: .5rem;
      padding: .4rem .75rem;
    }
    .dropdown-search-inner i { color: #9ca3af; font-size: .82rem; margin-right: .5rem; }
    .dropdown-search-inner input {
      border: none; outline: none;
      background: transparent;
      font-size: .85rem;
      color: #374151;
      width: 100%;
    }
 
    .country-scroll { max-height: 220px; overflow-y: auto; }
 
    /* ── Submit Button ── */
    .btn-submit {
      background: linear-gradient(135deg, #024465, #035a84);
      color: #fff;
      font-weight: 700;
      font-size: 1.05rem;
      padding: 1rem;
      border-radius: .75rem;
      border: none;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .6rem;
      box-shadow: 0 8px 24px rgba(2, 68, 101, 0.30);
      transition: transform .2s, box-shadow .2s, filter .2s;
    }
    .btn-submit:hover {
      transform: scale(1.015);
      box-shadow: 0 12px 32px rgba(2, 68, 101, 0.40);
      filter: brightness(1.06);
      color: #fff;
    }
 
    /* chevron rotate */
    .chevron { transition: transform .25s; }
    .chevron.open { transform: rotate(180deg); }
 
    /* no results */
    .no-results { display: none; padding: 1rem; text-align: center; color: #9ca3af; font-size: .85rem; }
/* from css END */



/* footer start */
 /* Hover effects */
  .footer-contact-link:hover { color: #0EA5E9 !important; }
  .footer-contact-link:hover .footer-icon-box {
    background: #0EA5E9 !important;
  }
  .footer-contact-link:hover .footer-icon-box i { color: white !important; }

  .footer-nav-link:hover {
    color: #0EA5E9 !important;
    transform: translateX(6px);
    transition: all 0.3s;
  }

  .social-icon:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  }

  /* 22 inch monitor */
  @media (min-width: 1600px) {
    .container-xl { max-width: 1400px; }
  }
/* footer end */