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

html, body{
  max-width:100%;
  overflow-x:hidden;
  font-family: 'Poppins', sans-serif;
}



/* WhatsApp Icon */
#whatsapp-icon {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

#whatsapp-icon img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25D366;
  padding: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}



/* ========================
   Top Bar
======================== */
/* ========================
   Top Bar FIX
======================== */
.top-bar{
    background:#1f4ea3;
    color:#fff;
    font-size:14px;
    padding:6px 0;
}

/* full width layout */
.top-bar .container{
    max-width:1400px;
    width:95%;
    margin:auto;
}

/* keep everything in one row */
.flex-between{
    display:flex;
    justify-content:space-between;
    align-items:center;
    white-space:nowrap; /* 🔥 prevents wrapping */
}

/* spacing */
.top-left,
.top-right{
    display:flex;
    align-items:center;
    gap:18px;
}


/* ========================
   Navbar
======================== */
.navbar{
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

.nav-wrapper{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:40px 0;
}


/* Logo */
.logo img{
    height:48px;
}


/* Menu */
.nav-menu{
    display:flex;
    align-items:center;
    gap:28px;
    list-style:none;
}

.nav-menu li a{
    text-decoration:none;
    color:#333;
    font-weight:500;
    transition:0.3s;
}

.nav-menu li a:hover{
    color:#1f4ea3;
}

/* ===== Dropdown Fix ===== */

.dropdown{
    position:relative;
}

/* keep navbar visible for dropdown */
/* Navbar height control */
.navbar{
    background:#fff;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);

    min-height:90px;   /* 🔥 increase white bar height */
    display:flex;
    align-items:center;
}

/* spacing inside */
.nav-wrapper{
    padding:0;  /* remove old padding */
}

/* submenu */
.dropdown-menu{
    position:absolute;
    top:100%;
    left:0;

    min-width:230px;
    background:#fff;
    border-radius:10px;

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

    padding:10px 0;

    opacity:0;
    visibility:hidden;
    transform:translateY(10px);

    transition:all .25s ease;

    z-index:9999;
}

/* items */
.dropdown-menu li{
    list-style:none;
}

.dropdown-menu li a{
    display:block;
    padding:10px 18px;
    color:#333;
    text-decoration:none;
    font-size:14px;
}

.dropdown-menu li a:hover{
    background:#f5f7fb;
    color:#1f4ea3;
}


/* 🔥 SHOW ON HOVER */
.dropdown:hover .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* ========================
   Button
======================== */
.btn-start{
    background:#ff7a00;
    color:#fff !important;
    padding:10px 20px;
    border-radius:25px;
    font-weight:600;
}

.btn-start:hover{
    background:#e56700;
}


/* ========================
   Hamburger
======================== */
.hamburger{
    display:none;
    font-size:26px;
    cursor:pointer;
    margin-right: 30px;
}


/* ========================
   Mobile Drawer
======================== */
.mobile-menu{
    position:fixed;
    top:0;
    right:-100%;
    width:75%;
    height:100vh;
    background:#fff;
    box-shadow:-4px 0 20px rgba(0,0,0,0.1);
    padding:30px;
    display:flex;
    flex-direction:column;
    gap:18px;
    transition:0.4s;
    z-index:999;
}

.mobile-menu a,
.mobile-dropdown button{
    text-decoration:none;
    color:#333;
    font-size:16px;
    background:none;
    border:none;
    text-align:left;
    cursor:pointer;
}

.mobile-menu.active{
    right:0;
}

.close-menu{
    font-size:24px;
    align-self:flex-end;
    cursor:pointer;
}


/* mobile submenu */
.mobile-submenu{
    display:none;
    padding-left:15px;
    display:flex;
    flex-direction:column;
    gap:10px;
}



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

    .nav-menu{
        display:none;
    }

    .hamburger{
        display:block;
    }

    /* hide blue bar on mobile */
    .top-bar{
        display:none;
    }
}

/* =========================
   WHO WE HELP SECTION
========================= */

.who-help{
  padding:90px 8%;
  font-family:'Poppins',sans-serif;
  background:linear-gradient(135deg,#2f6de0,#1f56c9);
  text-align:center;
  color:#fff;
}

/* container */
.who-help .container{
  max-width:1200px;
  margin:auto;
}

/* badge */
.who-badge{
  display:inline-block;
  background:#ffffff25;
  padding:6px 18px;
  border-radius:30px;
  font-size:14px;
  margin-bottom:18px;
}

/* title */
.who-title{
  font-size:36px;
  font-weight:700;
  margin-bottom:60px;
  line-height:1.4;
}

.who-title span{
  color:#ff8a00;
}

/* ================= GRID ================= */

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

/* ================= CARD ================= */

.who-card{
  background:#ffffff14;
  backdrop-filter: blur(10px);
  padding:35px 28px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.2);
  transition:all .35s ease;
  text-align:left;
}

/* hover zoom effect */
.who-card:hover{
  transform:translateY(-8px) scale(1.05);
  background:#ffffff20;
}

/* icon */
.who-icon{
  width:60px;
  height:60px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  margin-bottom:18px;
}

/* icon colors */
.blue{
  background:#3b82f6;
}

.orange{
  background:#ff8a00;
}

/* text */
.who-card h3{
  font-size:18px;
  font-weight:600;
  margin-bottom:10px;
}

.who-card p{
  font-size:14px;
  color:#e5e7eb;
  margin-bottom:16px;
  line-height:1.5;
}

.who-card a{
  font-size:14px;
  font-weight:600;
  color:#ffb347;
  text-decoration:none;
}

.who-card a:hover{
  text-decoration:underline;
}

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

/* tablet */
@media(max-width:1000px){
  .who-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

/* mobile */
@media(max-width:600px){
  .who-grid{
    grid-template-columns:1fr;
  }

  .who-title{
    font-size:24px;
  }
}



.career-services{
  padding:90px 8%;
  background:#f7f9fc;
  font-family:'Poppins',sans-serif;
}

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

/* Header */
.services-header{
  text-align:center;
  margin-bottom:60px;
}

.badge{
  background:#e8f0ff;
  color:#2563eb;
  padding:6px 16px;
  border-radius:30px;
  font-weight:600;
  display:inline-block;
  margin-bottom:15px;
}

.services-header h2{
  font-size:36px;
  font-weight:700;
  margin-bottom:10px;
}

.services-header span{
  color:#ff7a00;
}

.services-header p{
  max-width:700px;
  margin:auto;
  color:#6b7280;
}

/* Layout */
.services-wrapper{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:50px;
  align-items:center;
}

/* LEFT IMAGE */
.services-image{
  position:relative;
  animation:float 4s ease-in-out infinite;
}

.services-image img{
  width:100%;
  border-radius:22px;
  box-shadow:0 25px 50px rgba(0,0,0,.15);
}

/* Floating animation */
@keyframes float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-15px); }
}

/* Satisfaction badge */
.satisfaction{
  position:absolute;
  bottom:-20px;
  right:20px;
  background:#fff;
  padding:12px 18px;
  border-radius:12px;
  box-shadow:0 10px 25px rgba(0,0,0,.12);
  text-align:center;
}

.satisfaction strong{
  font-size:20px;
  color:#2563eb;
  display:block;
}

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

/* CARD */
.service-card{
  background:#fff;
  padding:20px;
  border-radius:14px;
  box-shadow:0 10px 25px rgba(0,0,0,.07);
  transition:.3s;
}

.service-card:hover{
  transform:translateY(-6px) scale(1.03);
  box-shadow:0 20px 40px rgba(0,0,0,.12);
}

.icon{
  font-size:24px;
  margin-bottom:10px;
}

.service-card h4{
  font-weight:600;
  margin-bottom:6px;
}

.service-card p{
  font-size:14px;
  color:#6b7280;
}

/* Responsive */
@media(max-width:1000px){
  .services-wrapper{
    grid-template-columns:1fr;
  }

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

@media(max-width:600px){
  .services-grid{
    grid-template-columns:1fr;
  }

  .services-header h2{
    font-size:24px;
  }
}

/* ======================
   HOW SECTION
====================== */
.how{
  padding:90px 20px 0;
  background:#f7f9fc;
  text-align:center;
}

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

/* badge */
.how-badge{
  background:#e9f0ff;
  color:#2f6bff;
  padding:6px 18px;
  border-radius:30px;
  font-size:13px;
  font-weight:600;
}

/* title */
.how h2{
  font-size:40px;
  font-weight:800;
  margin:18px 0 12px;
}

.how h2 span{
  color:#ff7a00;
}

.how-sub{
  color:#666;
  max-width:700px;
  margin:auto;
  margin-bottom:55px;
}

/* ======================
   GRID
====================== */
.how-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:25px;
}

.how-card{
  opacity:0;
  transform:translateY(60px);
  transition:all .7s ease;
}

/* when visible */
.how-card.show{
  opacity:1;
  transform:translateY(0);
}

.how-card:hover{
  transform:translateY(-8px) scale(1.03);
}

/* number bubble */
.step-no{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  background:#2f6bff;
  color:#fff;
  font-size:13px;
  padding:6px 10px;
  border-radius:20px;
  font-weight:600;
}

/* icon */
.how-icon{
  width:60px;
  height:60px;
  background:#e9f0ff;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:10px auto 20px;
}

.how-icon svg{
  width:28px;
  fill:#2f6bff;
}

/* text */
.how-card h3{
  font-size:18px;
  font-weight:700;
  margin-bottom:10px;
}

.how-card p{
  font-size:14px;
  color:#666;
  line-height:1.5;
}

/* ======================
   STATS BAR
====================== */
.how-stats{
  margin-top:70px;
  background:linear-gradient(135deg,#2f6bff,#1e4fd8);
  color:#fff;
  padding:40px 20px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  text-align:center;
}

.how-stats div{
  font-size:28px;
  font-weight:800;
}

.how-stats span{
  display:block;
  font-size:14px;
  font-weight:400;
  margin-top:6px;
}

/* ======================
   RESPONSIVE
====================== */
@media(max-width:992px){
  .how-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .how-stats{
    grid-template-columns:repeat(2,1fr);
    gap:20px;
  }
}

@media(max-width:600px){
  .how-grid{
    grid-template-columns:1fr;
  }

  .how h2{
    font-size:28px;
  }

  .how-stats{
    grid-template-columns:1fr;
  }
}

/* ================= SECTION ================= */
.testimonial{
  padding:90px 8%;
  background:#f8faff;
  font-family:system-ui, sans-serif;
}

.testimonial-container{
  max-width:1200px;
  margin:auto;
}


/* ===== Heading ===== */
.testimonial-head{
  text-align:center;
  margin-bottom:60px;
}

.testimonial-badge{
  background:#e8efff;
  color:#2b5cff;
  padding:6px 16px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
}

.testimonial-title{
  font-size:38px;
  margin:18px 0 10px;
  font-weight:700;
}

.testimonial-title span{
  color:#ff7a00;
}

.testimonial-sub{
  color:#666;
  max-width:650px;
  margin:auto;
}


/* ===== Grid ===== */
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}


/* ===== Card ===== */
.t-card{
  background:#fff;
  padding:28px;
  border-radius:16px;
  box-shadow:0 10px 28px rgba(0,0,0,.07);
  transition:.3s;
}

.t-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 40px rgba(0,0,0,.12);
}


/* quote icon */
.t-quote{
  font-size:22px;
  color:#2b5cff;
  margin-bottom:12px;
}


/* stars */
.t-stars{
  color:#ff8c2f;
  font-size:14px;
  margin-bottom:12px;
}


/* text */
.t-text{
  font-size:14px;
  color:#555;
  line-height:1.7;
  margin-bottom:18px;
}


/* user row */
.t-user{
  display:flex;
  align-items:center;
  gap:12px;
}

.t-user img{
  width:42px;
  height:42px;
  border-radius:50%;
  object-fit:cover;
}

.t-avatar{
  width:42px;
  height:42px;
  background:#2b5cff;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
}

.t-user h4{
  font-size:14px;
  margin:0;
}

.t-user span{
  font-size:12px;
  color:#777;
}


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

/* tablet */
@media(max-width:992px){
  .testimonial-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

/* mobile */
@media(max-width:600px){
  .testimonial-grid{
    grid-template-columns:1fr;
  }

  .testimonial-title{
    font-size:26px;
  }

  .t-card{
    padding:22px;
  }
}

/* ================= SECTION ================= */
.contact-section{
  padding:90px 8%;
  background:linear-gradient(135deg,#0f1c2e,#08111f);
  color:#fff;
  font-family:system-ui, sans-serif;
}


/* ===== Heading ===== */
.contact-head{
  text-align:center;
  margin-bottom:60px;
}

.contact-badge{
  background:#1b2a42;
  padding:6px 14px;
  border-radius:20px;
  font-size:13px;
}

.contact-head h2{
  font-size:38px;
  margin:14px 0;
  font-weight: 700;
}

.contact-head span{
  color:#ff7a00;
}

.contact-head p{
  color:#c8d2e2;
  max-width:650px;
  margin:auto;
}


/* ===== Grid ===== */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:50px;
  align-items:center;
}


/* ================= LEFT ================= */
.contact-left{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.contact-card{
  background:#1a2638;
  padding:22px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  transition:.3s;
}

.contact-card:hover{
  transform:scale(1.05);
  background:#22314a;
}

.c-icon{
  width:42px;
  height:42px;
  background:#ff7a00;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
}

.contact-card h4{
  font-size:14px;
  margin-bottom:6px;
}

.contact-card p{
  font-size:13px;
  color:#cbd5e1;
  line-height:1.5;
}


/* ================= RIGHT FORM ================= */
.contact-form{
  background:#fff;
  padding:28px;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  color:#000;
}

.contact-form input,
.contact-form textarea{
  padding:12px;
  border-radius:8px;
  border:1px solid #ddd;
  font-size:14px;
}

.contact-form textarea{
  min-height:110px;
  resize:none;
}

.contact-form button{
  margin-top:10px;
  background:#2b5cff;
  color:#fff;
  padding:12px;
  border:none;
  border-radius:8px;
  font-weight:600;
  cursor:pointer;
  transition:.3s;
}

.contact-form button:hover{
  transform:scale(1.04);
}


/* ================= ANIMATIONS ================= */
.slide-left{
  transform:translateX(-80px);
  opacity:0;
  transition:1s;
}

.slide-right{
  transform:translateX(80px);
  opacity:0;
  transition:1s;
}

.show{
  transform:translateX(0);
  opacity:1;
}


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

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

  .contact-left{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:600px){

  .contact-left{
    grid-template-columns:1fr;
  }

  .contact-head h2{
    font-size:26px;
  }
}


/* ===============================
   HERO SECTION
================================ */
.career-hero{
  padding:80px 8%;
  background:#f6f9ff;
  overflow:hidden;
}

.career-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
  max-width:1300px;
  margin:auto;
}

/* ===============================
   LEFT SIDE
================================ */
.career-left{
  flex:1;
  transform:translateX(-80px);
  opacity:0;
  transition:1s ease;
}

.career-left.show{
  transform:translateX(0);
  opacity:1;
}

/* logo card */
.logo-card{
  background:#fff;
  width:220px;
  padding:20px;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  margin-bottom:40px;
}

.logo-card img{
  width:100%;
}

/* title */
.career-title{
  font-size:52px;
  font-weight:800;
  line-height:1.15;
  margin-bottom:18px;
  color:#0b1220;
}

/* renamed classes (no override now) */
.career-blue-text{
  color:#2f63ff;
}

.career-orange-text{
  color:#ff7a00;
}

/* paragraph */
.career-desc{
  color:#555;
  font-size:16px;
  margin-bottom:30px;
  max-width:500px;
}

/* buttons */
.hero-btns{
  display:flex;
  gap:16px;
  margin-bottom:40px;
}

.btn-primary{
  background:#2f63ff;
  color:#fff;
  padding:14px 26px;
  border-radius:30px;
  border:none;
  cursor:pointer;
  transition:.3s;
}

.btn-outline{
  background:transparent;
  border:2px solid #2f63ff;
  color:#2f63ff;
  padding:12px 26px;
  border-radius:30px;
  cursor:pointer;
  transition:.3s;
}

.hero-btns button:hover{
  transform:scale(1.05);
}

/* stats */
.hero-stats{
  display:flex;
  gap:30px;
}

.stat{
  font-weight:700;
  font-size:18px;
}

.stat span{
  display:block;
  font-size:13px;
  color:#666;
  font-weight:500;
}

/* ===============================
   RIGHT SIDE IMAGE
================================ */
.career-right{
  flex:1;
  position:relative;

  transform:translateX(80px);
  opacity:0;
  transition:1s ease;
}

.career-right.show{
  transform:translateX(0);
  opacity:1;
}

/* floating image card */
.image-box{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 20px 45px rgba(0,0,0,.12);

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

.image-box img{
  width:100%;
  display:block;
}

/* floating effect */
@keyframes float{
  0%{transform:translateY(0)}
  50%{transform:translateY(-15px)}
  100%{transform:translateY(0)}
}

/* ===============================
   TAGS
================================ */
.tag{
  position:absolute;
  padding:8px 14px;
  border-radius:20px;
  color:#fff;
  font-size:13px;
  font-weight:600;

  opacity:0;
  transform:translateY(20px);
  transition:.5s;
}

.tag.show{
  opacity:1;
  transform:translateY(0);
}

.blue-tag{ background:#2f63ff; }
.orange-tag{ background:#ff7a00; }

/* positions */
.tag1{ top:20px; left:40%; }
.tag2{ top:60px; right:30px; }
.tag3{ top:110px; right:40px; }
.tag4{ bottom:70px; left:40%; }
.tag5{ bottom:25px; right:50px; }

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

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

  .career-left{
    align-items:center;
  }

  .career-desc{
    margin:auto;
  }

  .hero-btns{
    justify-content:center;
  }

  .hero-stats{
    justify-content:center;
    flex-wrap:wrap;
  }

  .career-title{
    font-size:34px;
  }
}

/* =============================
   Footer
============================= */
.bv-footer{
    background:#1f4ea3;
    color:#fff;
    padding-top:60px;
    font-size:14px;
}

/* container */
.footer-container{
    width:90%;
    max-width:1300px;
    margin:auto;

    display:grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap:50px;
}

/* logo */
.footer-logo{
    height:90px;
    margin-bottom:18px;
    margin-left: 20px;
}

/* about text */
.footer-about p{
    line-height:1.7;
    margin-bottom:20px;
    opacity:0.9;
}

/* headings */
.footer-col h3{
    margin-bottom:18px;
    font-size:16px;
    font-weight:600;
    position:relative;
}

/* list */
.footer-col ul{
    list-style:none;
}

.footer-col ul li{
    margin-bottom:10px;
}

/* links */
.footer-col a{
    color:#fff;
    text-decoration:none;
    opacity:0.9;
    transition:0.3s;
}

.footer-col a:hover{
    opacity:1;
    padding-left:6px;
}

/* social icons */
.social-icons{
    display:flex;
    gap:10px;
}

.social-icons a{
    width:36px;
    height:36px;
    border-radius:50%;
    background:rgba(255,255,255,0.15);

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

    transition:0.3s;
}

.social-icons a:hover{
    background:#ff7a00;
}

/* contact icons */
.contact-info i{
    margin-right:8px;
}

/* bottom bar */
.footer-bottom{
    border-top:1px solid rgba(255,255,255,0.2);
    margin-top:50px;
    padding:20px 5%;

    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:13px;
}

.footer-links{
    display:flex;
    gap:20px;
}


/* =============================
   Mobile Responsive
============================= */
@media(max-width:992px){

    .footer-container{
        grid-template-columns: 1fr 1fr;
        gap:40px;
    }
}

@media(max-width:600px){

    .footer-container{
        grid-template-columns: 1fr;
        text-align:center;
    }

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

    .footer-bottom{
        flex-direction:column;
        gap:10px;
        text-align:center;
    }
}