body { color:#000; font-family:Lato; }
:root { --main-color:#1F2B44; --main-color-1:#04112A; --main-color-2:#037f37; }
a, i, button, .serv-box { outline:none; text-decoration:none; transition:all ease 0.5s; -webkit-transition:all ease 0.5s; }
ul { list-style:none; margin:0; padding:0; }
ul.with-bullets, .career-box ul { list-style: disc; padding-left: 25px; }
img { height:auto; object-fit:cover; width:auto; max-width:100%; }

/* Responsive utilities */
@media (max-width: 767.98px) {
  .container { padding-left: 15px; padding-right: 15px; }
  .row { margin-left: -10px; margin-right: -10px; }
  .row > * { padding-left: 10px; padding-right: 10px; }
}

/* Ensure consistent styling for service page lists */
.business-box ul {
  list-style: none;
  padding: 0 0 55px;
}

.business-box li {
  color: #000;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.6;
  margin: 0 0 3px 48px;
  position: relative;
}

.business-box li::before {
  background-color: var(--main-color);
  border-radius: 50%;
  content: '';
  height: 8px;
  left: -18px;
  position: absolute;
  top: 12px;
  width: 8px;
}

.business-box li strong {
  color: var(--main-color);
  font-size: 20px;
}

header { background-color:#fff; border-bottom:1px solid #fff; left:0; position:fixed; right:0; top:0; transition:all 500ms; z-index:111; }
header.smaller, .service-form, .about-sec.dd { background-color:var(--main-color); }
header.smaller .logo { filter:brightness(0) invert(1); }
header.smaller .cont-btn { border:1px solid #fff; color:#fff; }
header.smaller .cont-btn:hover { background-color:#fff; color:var(--main-color); }
header .col-lg-12 { align-items:center; display:flex; justify-content:space-between; }	
.cont-btn, .up-btn { border:1px solid var(--main-color-1); border-radius:4px; color:var(--main-color-1); display:inline-block; font-size:16px; padding:9px 20px; }

/**** Navbar CSS Start Here ****/
header .navbar, header .navbar-toggler, .team-info .modal-body { padding:0; }
header .navbar-expand-md .navbar-nav .nav-link { color:var(--main-color); font-size:16px; padding:30px 17px; position:relative; }
header .navbar-expand-md .navbar-nav .active .nav-link { font-weight:800; }
header .dropdown-menu { border:none; border-radius:0; min-width:max-content; padding:0; }
header .dropdown-menu li a { border-bottom:1px solid #e2e2e2; color:var(--main-color); display:block; font-size:14px; font-weight:500; padding:10px 18px; }
header .navbar-expand-md .navbar-nav .nav-link:hover, header.smaller .navbar-expand-md .navbar-nav .nav-link:hover, header .navbar-nav .nav-link:focus, header .navbar-nav .dropdown:hover .nav-link, header .navbar-nav .dropdown > .dropdown-toggle.show, header .navbar-nav .dropdown-menu li a:hover, header .navbar-nav .dropdown-toggle[aria-expanded="true"], footer li a:hover, .business-banner .breadcrumb-item a:hover, .cont-box li a:hover, .inner-banner .breadcrumb-item a:hover, .blog-box:hover h3 a { color:var(--main-color-2); }
header .dropdown-toggle::after { display:none; }
header .dropdown-menu li:last-child a { border-bottom:none; }
/**** Navbar CSS End Here ****/

.main, .inner-banner { margin:84px 0 0; position:relative; }
.main .carousel-caption { align-items:center; bottom:0; display:flex; left:0; padding:0; right:0; text-align:left; top:0; z-index:0; }
.main .carousel-caption::before { background-color:rgba(14,5,24,0.5); bottom:0; content:''; left:0; position:absolute; right:0; top:0; z-index:-1; }
.main h1, .count-list h2 { color:#fff; font-size:55px; font-weight:500; margin:0 0 14px; text-transform:capitalize; }
.main p, .count-list li { color:#fff; font-size:19px; font-weight:500; margin:0 0 15px; }

/* Mobile carousel improvements */
@media (max-width: 767.98px) {
  .main .carousel-caption { padding: 20px 15px; text-align: center; }
  .main .carousel-caption .container { padding: 0; }
  .main .carousel-caption .row { margin: 0; }
  .main .carousel-caption .col-xl-7 { padding: 0; }
}
.count-list { border-top:1px solid #ECF1F6; display:flex; gap:45px; margin:48px 0 0; padding:32px 0 0; }
.main .carousel-control-prev, .main .carousel-control-next { opacity:1; width:75px; z-index:1; }
.main .carousel-control-prev span, .main .carousel-control-next span { background-color:var(--main-color); background-size:18px; border-radius:50%; height:40px; width:40px; }
.main .carousel-control-prev span:hover, .main .carousel-control-next span:hover { background-color:var(--main-color-2); }
.main .call-btn { margin:20px 0 0; }
.call-btn { background-color:var(--main-color); border:none; border-radius:5px; color:#fff; display:inline-block; font-size:16px; padding:9px 20px; }
.call-btn:hover, .ready-sec a:hover, .see-btn:hover, .up-btn:hover { background-color:var(--main-color-2) !important; color:#fff !important; }

/* Fix: force hero carousel images to full-width to avoid layout shift
   caused by global `img { width: auto }` rules. This targets only the
   hero carousel images so other images are unaffected. */
.main .carousel-item img,
.main .carousel-item .img-fluid,
.main .carousel-inner img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
}

/* Wrapper used by HeroCarousel for Next/Image fill mode */
.carousel-img-wrapper {
  position: relative;
  width: 100%;
  /* Use 'dvh' (dynamic viewport height) for better mobile browser support */
  height: calc(100dvh - 84px); 
  min-height: 400px;
}

/* Ensure the Next.js Image inside uses object-fit */
.carousel-img-wrapper img {
  object-fit: cover;
  object-position: center;
}

@media (max-width: 991.98px) {
  .carousel-img-wrapper {
    /* Adjust for mobile header height */
    height: calc(100dvh - 56px);
    /* Lowering min-height prevents the banner from being too tall on small phones */
    min-height: 300px; 
  }
}

@media (max-width: 575.98px) {
  .carousel-img-wrapper {
    /* On very small screens, 100vh can be too much; 60-70vh often looks better */
    height: 60vh;
    min-height: 250px;
  }
}



@media (max-width: 767.98px) {
  .call-btn { font-size:14px; padding:8px 16px; }
  .ready-sec a, .see-btn { font-size:14px; padding:8px 16px; }
  .cont-btn { font-size:12px; padding:6px 12px; min-width: auto; white-space: nowrap; }
  header .cont-btn { font-size:11px; padding:5px 10px; }
  header .col-lg-12 > div:last-child { margin-left: 8px !important; }

  /* Full screen section */
  .your-section {
    height: calc(100dvh - 84px); /* modern mobile-safe viewport */
    min-height: 420px;
  }
}

.service-sec { background-color:var(--main-color); padding:80px 0; text-align:center; }
.service-sec .col-lg-6, .blog-sec .col-lg-4 { margin:0 0 24px; text-align:left; }
.service-sec h2, .blog-sec h2, .client-sec h2, .about-sec h2, .why-sec h2, .team-sec h2, .team-info h4 { color:#fff; font-size:55px; font-weight:600; margin:0 0 75px; }
.service-sec h5 { color:#fff; font-size:48px; font-weight:700; margin:0 0 75px; }
.see-btn { border-bottom:1px solid #fff; color:#fff; display:inline-block; font-size:16px; text-transform:capitalize; }
.serv-box:hover h3, .serv-box:hover p, .business-banner .breadcrumb-item a, .business-banner .breadcrumb-item::before, .business-banner .breadcrumb-item.active, .inner-banner .breadcrumb-item a, .inner-banner .breadcrumb-item::before, .inner-banner .breadcrumb-item.active, .about-sec.dd h2, .about-sec.dd p { color:#fff; }
.serv-box { background-color:#fff; border:1px solid #DAE5F0; border-radius:7px; height:100%; padding:60px; }
.serv-box h3, .blog-sec h3 { color:var(--main-color); font-size:20px; font-weight:600; line-height:1.35; margin:26px 0 14px; }
.serv-box p, .blog-sec p, .about-sec p, .why-sec p, .team-info p { color:#9A9FA0; font-size:16px; line-height:1.6; margin:0 0 20px; }
.serv-box a, .read-btn { border-bottom:1px solid var(--main-color-1); color:var(--main-color-1); display:inline-block; font-size:16px; }
.serv-box a:hover, .read-btn:hover { border-bottom:1px solid var(--main-color-2); color:var(--main-color-2); }
.serv-box strong { align-items:center; background-color:#E9F1F9; border:1px solid #DAE5F0; border-radius:50%; display:flex; height:42px; justify-content:center; width:42px; }
.serv-box:hover { background-color:transparent; }
.serv-box:hover a { border-bottom:1px solid #fff; color:#fff; }

.blog-sec { padding:80px 0; text-align:center; }
.blog-sec h2, .blog-sec h3 a, .about-sec h2, .why-sec h2, .team-sec h2, .team-info h4 { color:var(--main-color); }
.blog-sec h5 { border-bottom:1px solid #DAE5F0; color:#9A9FA0; font-size:14px; font-weight:normal; margin:0; padding:18px 0; }
.blog-img { overflow:hidden; }
.blog-img img { transition:all 0.7s ease; -webkit-transition:all 0.7s ease; }
.blog-box:hover img { transform:scale(1.08); -webkit-transform:scale(1.1); }

.client-sec { background-color:var(--main-color); padding:80px 0 0; text-align: center; }
.client-sec .col-lg-2 { margin:0 0 100px; }
.client-sec h2 { margin:0 !important; }
.client-sec h3 { color:#fff; font-size:18px; font-weight:600; line-height:1.5; margin:25px 0 0; text-align: center; max-width: 160px;}
.client-sec p { color:#fff; font-size:18px; line-height:1.6; margin:10px 0 120px; }
.client-sec img { height:80px; }
.client-sec .col-lg-2:last-child { border-right:none; }

/******************** blog page CSS ********************/
.inner-banner::before { background-color:rgba(0,0,0,0.5); bottom:0; content:''; left:0; position:absolute; right:0; top:0; }
.inner-banner img { height:400px; width: 100%; object-fit: cover; }
.inner-txt { align-items:center; bottom:0; display:flex; flex-direction:column; justify-content:center; left:0; padding:0 12px; position:absolute; right:0; text-align:center; top:0; }
.inner-txt h1 { color:#fff; font-size:55px; font-weight:600; margin:0 0 12px; }
.inner-txt .breadcrumb { font-size:20px; font-weight:600; margin:0; }
.inner-banner .breadcrumb-item a, .inner-banner .breadcrumb-item::before, .inner-banner .breadcrumb-item.active { color:#fff; }

.team-sec { background-color:#eff7fc; padding:80px 0 55px; text-align:center; }
.team-sec h2 { color:var(--main-color); font-size:55px; font-weight:600; margin:0 0 75px; }
.team-sec h3 { color:#000B14; font-size:18px; font-weight:700; margin:22px 0 10px; }
.team-sec img { border:5px solid #fff; border-radius:50%; box-shadow:0 4px 10px 4px #00000040; height:220px; margin:0 auto; width:220px; object-fit: cover; }
.team-sec a { color:var(--main-color-2); display:inline-block; font-size:16px; font-weight:600; }
.team-info .close { background-color:transparent; border:none; border-radius:50%; color:#000; font-size:35px; font-weight:500; position:absolute; right:24px; top:0; z-index:1; }
.team-info .modal-content { border:none; border-radius:0; padding:45px 50px 25px; text-align:left; }
.team-info h4 { color:var(--main-color); font-size:26px; margin:0 0 14px; }

/******************** about-us page CSS ********************/
.about-sec { overflow:hidden; padding:80px 0; }
.about-sec .col-lg-6:first-child { padding:45px 35px 45px 12px; }
.about-sec img { border-radius:15px; height:100%; width: 100%; object-fit: cover; }
.about-sec.dd .col-lg-6:first-child { padding:0 12px; }
.about-sec.dd .col-lg-6:last-child { padding:45px 12px 45px 35px; }
.about-sec.dd h3 { color:#fff; font-size:22px; font-weight:600; line-height:1.4; margin:0 0 12px; }
.about-sec.dd p { color: #fff; }
.about-sec.dd .see-btn { margin:20px 0 0; }
.about-sec h2 { color:var(--main-color); font-size:55px; font-weight:600; margin:0 0 75px; }
.about-sec h3 { color:var(--main-color); font-size:22px; font-weight:600; line-height:1.4; margin:0 0 12px; }
.about-sec p { color:#9A9FA0; font-size:16px; line-height:1.6; margin:0 0 20px; }
.about-sec .see-btn { border-bottom:1px solid var(--main-color-1); color:var(--main-color-1); display:inline-block; font-size:16px; text-transform:capitalize; margin: 20px 0 0; }
.about-sec .see-btn:hover { border-bottom:1px solid var(--main-color-2); color:var(--main-color-2); }

.why-sec { padding:0 0 40px; text-align:center; }
.why-sec .col-lg-3, .team-sec .col-lg-3 { margin:0 0 24px; }
.why-sec img { height:85px; width: 85px; object-fit: contain; margin:0 0 30px; }
.why-sec h2 strong { display:block; font-size:28px; font-weight:600; padding:0 0 12px; }
.why-sec h3 { color:var(--main-color); font-size:24px; font-weight:700; line-height:1.4; margin:0 0 12px; }
.why-sec p { color:#9A9FA0; font-size:16px; line-height:1.6; margin:0 0 20px; }

.testimonial-sec { background-color:#E9F1F9; padding:140px 0; }
.testimonial-sec h2 { color:var(--main-color); display:inline-block; font-size:70px; font-weight:normal; margin:0; padding:0 0 20px; position:relative; }
.testimonial-sec h2::before, .testimonial-sec h2::after { background-color:var(--main-color); bottom:0; content:''; height:4px; position:absolute; right:-10px; width:160px; }
.testimonial-sec h2::after { bottom:-15px; right:-25px; width:130px; }
.testimonial-sec h3 { color:#09141E; font-size:45px; font-weight:600; margin:20px 0 0; }
.testimonial-sec p { color:#09141E; font-size:20px; line-height:1.6; margin:0 0 20px; }
.comma-icon { border-bottom:1px solid #DAE5F0; margin:75px 0 60px; }
.comma-icon strong { align-items:center; background-color:#fff; border:1px solid #DAE5F0; border-radius:50%; display:flex; height:80px; justify-content:center; margin:0 0 -40px; width:80px; }
.client-img { align-items:center; display:flex; justify-content:end; gap:15px; text-align:right; }
.client-img h5 { color:#9A9FA0; font-size:14px; font-weight:normal; letter-spacing:0.5px; line-height:1.4; margin:0; text-transform:uppercase; }
.client-img h5 strong { display:block; padding:0 0 5px; }
.client-img h5 i { color:#F1D089; margin-left:5px; }
.client-img img { border:1px solid #fff; border-radius:50%; height:55px; width:55px !important; }

.ready-sec { background-color:var(--main-color); overflow:hidden; padding:100px 0; text-align:center; }
.ready-sec h2 { color:#fff; font-size:56px; margin:25px auto 18px; width:58%; }
.ready-sec h3 { border:1px solid #DAE5F0; border-radius:4px; color:#fff; display:inline-block; font-size:12px; font-weight:600; letter-spacing:0.5px; margin:0; padding:10px 13px; text-transform:uppercase; }
.ready-sec p { color:#9A9FA0; font-size:20px; font-weight:500; line-height:1.6; margin:0 0 45px; }
.ready-sec a, .see-btn { background-color:#fff; border:none; border-radius:5px; color:var(--main-color); display:inline-block; font-size:16px; font-weight:600; padding:9px 20px; }

footer { background-color:#fff; padding:85px 0 0; }
footer .logo { margin:0 0 18px; }
footer h2 { color:var(--main-color); font-size:14px; font-weight:normal; letter-spacing:0.5px; margin:0 0 25px; text-transform:uppercase; }
footer p { color:#9A9FA0; font-size:15px; font-weight:500; line-height:1.8; margin:20px 0; }
footer .col-lg-4:last-child p { color:var(--main-color); font-size:16px; font-weight:normal; }
.info-list li a { font-size:14px; letter-spacing:0.5px; text-transform:uppercase; }
.info-list li a img { margin-right:5px; }
footer li { padding:0 0 10px; }
footer li a { color:var(--main-color); font-size:16px; word-break:break-word; }
footer li a i { float:left; padding-top:5px; width:25px; }
footer li a span { display:block; padding-left:25px; }
.social-icon { display:flex; gap:35px; margin:0 0 35px; }
.box { background-color:transparent; border:none; border-bottom:1px solid #3c3c3e; border-radius:0; color:var(--main-color); font-size:14px; letter-spacing:0.5px; outline:none; padding:0 0 32px; text-transform:uppercase; width:100%; }
.box:focus::placeholder { color:transparent; }
.box::placeholder { color:var(--main-color); opacity:1; }
footer .call-btn { margin:20px 0 0; }
.copy-txt { align-items:center; border-top:1px solid #243241; display:flex; justify-content:space-between; margin:35px 0 0; padding:15px 0; }
.copy-txt h6 { color:var(--main-color); font-size:12px; font-weight:normal; letter-spacing:0.5px; margin:7px 0; text-transform:uppercase; }

/******************** service page CSS ********************/
.service-banner { background-position:top center; background-size:cover; margin:84px 0 0; padding:120px 0 250px; }
.service-banner h1 { color:#fff; font-size:75px; font-weight:700; margin:0 0 35px; min-height: 100px; display: flex; align-items: center; }
.service-banner p { color:#fff; font-size:24px; line-height:1.5; margin:0; text-align:justify; min-height: 120px; display: flex; align-items: center; }

.service-form h2 { color:#fff; font-size:50px; font-weight:700; margin:75px 0 15px; }
.service-form h3 { color:#fff; font-size:35px; margin:0 0 3px; }
.service-form p, .blog-txt p { color:#fff; font-size:16px; line-height:1.6; margin:0; }
.serv-form { background-color:#fff; box-shadow:0 0 20px #0000000D; }
.serv-head { background-color:var(--main-color); border:1px solid rgba(255,255,255,0.1); margin:-150px 0 0; padding:12px 80px 15px; text-align:center; }
.serv-form form { padding:60px; }
.serv-form .box { border:1px solid #ccc; color:#999; border-radius:2px; font-size:16px; letter-spacing:0; padding:14px 20px; text-transform:none; }
.serv-form .box:focus { border:1px solid var(--main-color); }
.serv-form .box:focus::placeholder, .cont-form .box:focus::placeholder { color:transparent; }
.serv-form .box::placeholder { color:#999; }
.in-box { margin:0 0 15px; }
.service-form .col-xl-5 img { margin:30px 0 8px; }

.business-banner { background-color:var(--main-color-1); border-radius:0 0 0 20px; margin:84px 0 0; position:relative; }
.business-banner img { border-radius:20px 0 0 20px; height:100%; }
.business-banner h1 { color:#DAE5F0; font-size:45px; font-weight:800; margin:40px 0 20px; }
.business-banner p { color:#fff; font-size:20px; font-weight:500; line-height:1.6; margin:0; }
.business-banner nav { font-size:14px; font-weight:600; margin:40px 0 0; }

.business-txt { background-color:var(--main-color); margin:-17px 0 0; padding:0 0 80px; }
.business-box { background-color:#fff; border-radius:10px; margin:-38px 0 0; padding:45px 45px 0; position:relative; }
.business-box h2 { color:var(--main-color); font-size:45px; font-weight:700; margin:0 0 30px; text-align:center; }
.business-box h3 { color:var(--main-color); font-size:27px; font-weight:700; margin:0 0 8px; }
.business-box p { color:#000; font-size:20px; font-weight:600; line-height:1.6; margin:0 0 0 28px; }
.business-box ul { padding:0 0 55px; }
.business-box li { color:#000; font-size:18px; font-weight:600; line-height:1.6; margin:0 0 3px 48px; position:relative; }
.business-box li::before { background-color:var(--main-color); border-radius:50%; content:''; height:8px; left:-18px; position:absolute; top:12px; width:8px; }
.business-box li strong { color:var(--main-color); font-size:20px; }

/******************** contact-us page CSS ********************/
.contact-sec { background-color:var(--main-color); margin:84px 0 0; }
.contact-sec .col-xl-6 { padding:0; }
.cont-form { padding:70px 120px; }
.cont-form h2 { color:#fff; font-size:44px; font-weight:bold; margin:0 0 40px; }
.cont-form .in-box { margin:0 0 35px; }
.cont-form .in-box label { color:#fff; display:block; font-size:16px; padding:0 0 12px; }
.cont-form .box { background-color:#fff; border:1px solid #575757; color:#b4b4b4; font-family:Lato; font-size:15px; letter-spacing:0; padding:12px 18px; text-transform:none; }
.cont-form .box::placeholder { color:#b4b4b4; }
.cont-form .call-btn { background-color:#fff; background-image:url(../images/arrow.svg) !important; background-position:87px center; background-repeat:no-repeat; border-radius:0; color:var(--main-color); display:flex; font-size:20px; margin-left:auto; padding:10px 60px 10px 35px; }

/* Alert styles for form submission */
.alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; }
.alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }
.alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }
.cont-box { background-image:url(../images/cont-bg.webp) !important; background-position: top bottom; background-size:cover; height:100%; padding:40px 55px 0; }
.cont-box h3 { align-items:center; color:#fff; display:flex; font-size:25px; font-weight:800; gap:14px; margin:0; }
.cont-box h3 img { width:25px; }
.cont-box ul { margin:15px 0 48px 38px; }
.cont-box li { color:#F8F8F8; font-size:20px; padding:0 0 2px; }
.cont-box li a { color:#F8F8F8; }
.cont-box .cont-list { border-top:1px solid #fff; display:flex; margin:70px -55px 0; }
.cont-list li { border-right:1px solid #fff; font-weight:600; padding:30px; text-align:center; width:33.33%; }
.cont-list li:last-child { border-right:none; }

/******************** career page CSS ********************/
.contact-sec.dd { margin:-18px 0 0; padding:0 0 80px; }
.contact-sec.dd .col-xl-6 { padding:0 12px; }
.contact-sec.dd .cont-form { background-color:#fff; border-radius:10px; margin:-20px 0 0; padding:40px 100px; position:relative; }
.contact-sec.dd h2 { color:var(--main-color); text-align:center; }
.contact-sec.dd h3 { color:var(--main-color-2); font-size:24px; font-weight:600; margin:0 0 15px; text-align:center; }
.contact-sec.dd .cont-form .in-box label, .team-sec a:hover { color:#000; }
.contact-sec.dd .cont-form .box { border:1px solid #D0D7DD; border-radius:5px; padding:8px 18px; }
.contact-sec.dd .cont-form select.box { height:40px; }
.contact-sec.dd .call-btn { background-color:var(--main-color); background-image:none !important; border-radius:3px; color:#fff; font-size:15px; padding:9px 25px; }
.filter-img { display:flex; margin:70px 0 50px auto; }

.career-box { background-color:#fff; border-radius:10px; margin:0 0 30px; padding:18px 25px; }
.career-box-top-spacing { margin-top: 30px; }
.contact-sec.dd .career-box h3 { color:var(--main-color); font-size:20px; font-weight:700; margin:0 0 15px; text-align:left; }
.career-box h4 { align-items:center; color:#000; display:flex; font-size:22px; font-weight:600; margin:15px 0 0; justify-content:space-between; }
.career-box h5 { color:#4F5665; font-size:22px; font-weight:800; margin:15px 0; }
.career-box h6 { color:#000; font-size:22px; font-weight:700; margin:28px 0; text-align:center; }
.career-box li { color:#4F5665; font-size:15px; font-weight:500; list-style:disc; margin:0 0 7px 25px; }
.btn-sec { display:flex; gap:80px; justify-content:center; }

/* Custom scrollbar for job listings */
.job-listings-scroll {
  max-height: 400px;
  overflow-y: auto;
  padding-right: 10px;
  margin-right: -10px;
  scroll-behavior: smooth;
}

.job-listings-scroll::-webkit-scrollbar {
  width: 8px;
}

.job-listings-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.job-listings-scroll::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.job-listings-scroll::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Responsive adjustments for job listings scroll container */
@media (max-width: 767.98px) {
  .job-listings-scroll {
    max-height: 300px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .job-listings-scroll {
    max-height: 350px;
  }
}

/*.................. Home-Page-Media .................. */
@media (min-width:320px) and (max-width:767.98px){
header .cont-btn, .main .count-list, .contact-sec.dd .col-xl-12 { display:none; }
.main::before { background-color:rgba(14,5,24,0.7); }
.main img { height:auto; min-height:400px; max-height:600px; }
.main .carousel-caption, .copy-txt h6 { text-align:center; }
.main h1, .ready-sec h2, .business-banner h1, .business-box h2 { font-size:28px; line-height:1.3; margin-bottom:12px; }
.main p, .ready-sec p, .service-banner p { font-size:16px; text-align:center; min-height: auto; line-height:1.5; }
.service-banner h1 { font-size:28px; min-height: auto; }
.main .carousel-control-prev, .main .carousel-control-next { width:38px; }
.main .carousel-control-prev span, .main .carousel-control-next span { background-size:15px; height:30px; width:30px; }
.count-list { border-top:none; gap:18px; justify-content:center; margin:0 0 20px; padding:0; text-align:center; flex-wrap:wrap; }
.service-sec .count-list h2 { font-size:32px; margin:0 0 7px; }
.count-list li { font-size:12px; }
.service-sec { padding:40px 0 60px; }
.service-sec h5 { font-size:28px; margin:20px 0 30px; }
.blog-sec { padding:40px 0; }
.client-sec { padding:50px 0 20px; }
.client-sec .col-lg-2 { margin:0 0 50px; width:50%; }
.client-sec h3, .business-box h3, .business-box li strong { font-size:14px; }
.client-sec p { font-size:14px; margin:10px 0 40px; }
.testimonial-sec { padding:40px 0 60px; }
.testimonial-sec h2 { font-size:32px; margin:0 0 40px; padding:0 0 20px; }
.testimonial-sec h2::before { right:10px; width:100px; }
.testimonial-sec h2::after { right:-10px; width:80px; }
.testimonial-sec h3 { font-size:28px; }
.testimonial-sec h4 { font-size:24px; }
.testimonial-sec p { font-size:16px; }
.ready-sec { padding:60px 0 50px; }
.ready-sec h3 { font-size:11px; padding:8px 12px; }
footer { padding:40px 0 0; }
footer .col-xl-3, footer .col-xl-4 { padding:20px 12px; }
.copy-txt, .career-box h4 { display:block; }
.social-icon { gap:15px; }
.serv-head { padding:12px 15px 15px; }
.service-banner { padding:50px 0 150px; text-align:center; }
.service-banner h1 { font-size:28px; }
.serv-form form { padding:40px 25px; }
.service-form h2 { font-size:28px; }
.service-form h3 { font-size:20px; }
.business-box { padding:25px 18px 0; }
.business-box p { font-size:14px; line-height:1.6; margin:12px 0 10px 15px; }
.business-box li { font-size:14px; line-height:1.6; margin:0 0 5px 28px; }
.business-box li::before { height:6px; left:-12px; top:11px; width:6px; }
.contact-sec { padding:0 20px 50px; }
.cont-form { padding:40px 20px 60px; }
.cont-form h2 { font-size:28px; }
.cont-box { padding:40px 20px 0; }
.cont-box h3 { font-size:20px; }
.cont-box h3 img { width:15px; }
.cont-box ul { margin:15px 0 48px 28px; }
.cont-box .cont-list { margin:60px -20px 0; }
.cont-list li { font-size:13px; font-weight:normal; padding:15px; }
.contact-sec.dd .cont-form { margin:-100px 0 0; padding:30px 20px 40px; }
.contact-sec.dd h2 { font-size:22px; }
.contact-sec.dd h3 { font-size:16px; }
.contact-sec.dd .col-xl-10 { margin:0 0 50px; }
.career-box h4 .call-btn { margin:20px 0 0; }
.btn-sec { gap:10px; flex-wrap:wrap; }
.btn-sec a { font-size:13px; padding:8px 15px; }
.blog-txt img { height:200px; }
.team-info .modal-content { padding:28px 18px 10px; }
.serv-box { padding:30px 20px; }
.serv-box h3 { font-size:18px; }
.serv-box p { font-size:15px; }
.blog-box h3 { font-size:18px; }
.blog-box p { font-size:15px; }
.inner-banner img { height:240px; }
.inner-txt h1 { font-size:32px; }
.about-sec { padding:50px 0; }
.about-sec h2 { font-size:32px; margin:0 0 40px; }
.about-sec h3 { font-size:20px; }
.about-sec p { font-size:15px; }
.why-sec h2 { font-size:32px; }
.why-sec h3 { font-size:20px; }
.why-sec p { font-size:15px; }
.team-sec { padding:50px 0 40px; }
.team-sec h2 { font-size:32px; margin:0 0 40px; }
.team-sec img { height:180px; width:180px; }
.team-sec h3 { font-size:16px; }
.service-sec h2, .blog-sec h2, .client-sec h2, .why-sec h2, .team-sec h2 { font-size:32px; margin:0 0 40px; }
}
@media (min-width:320px) and (max-width:991.98px){
.logo { margin:15px 0; }	
.mob-logo { margin:20px auto; width:145px; }
.mob-logo img, .business-txt .container { max-width:100%; width:100%; }
header .navbar-expand-md { order:3; padding:10px 0; }	
header .navbar-collapse { background-color:#fff; box-shadow:0 0 5px #999; height:100%; left:-15px; overflow-y:auto; position:fixed; top:0; transform:translateX(-100%); transition:0.3s cubic-bezier(0.55,0,0.1,1); width:280px; z-index:11; -webkit-transform:translateX(-100%); -webkit-transition:0.3s cubic-bezier(0.55,0,0.1,1); }
header .collapse.show { left:0; transform:translateX(0); -webkit-transform:translateX(0); } 
header .navbar-nav { display:block; padding:0 15px; }
header .navbar-toggler:focus { box-shadow:none; outline:none; }
header .navbar-toggler .icon-bar { background-color:var(--main-color); display:block; height:3px; margin:5px 0; outline:none; transition:all 500ms; width:25px; }
header.smaller .navbar-toggler .icon-bar, .inner-header .navbar-toggler .icon-bar { background-color:#000; }
header .navbar-toggler:not(.collapsed) .icon-bar { position:relative; transition:all 300ms ease-in-out 0s; }
header .navbar-toggler:not(.collapsed) .icon-bar:nth-child(2) { top:9px; transform:rotate(45deg); }
header .navbar-toggler:not(.collapsed) .icon-bar:nth-child(3) { opacity:0; }
header .navbar-toggler:not(.collapsed) .icon-bar:last-child { top:-7px; transform:rotate(-45deg); }
header .navbar-expand-md .navbar-nav .nav-link { align-items:center; display:flex; justify-content:space-between; }
header .navbar-expand-md .navbar-nav .nav-link, header .dropdown-menu li a { border-bottom:1px solid #e2e2e2; padding:10px 0; }
header .dropdown-toggle { color:var(--main-color-1); cursor:pointer; font-size:13px; height:43px; padding:15px 0; position:absolute; right:0; text-align:right; top:0; width:30px; z-index:1; }
header .dropdown-menu {	background-color:transparent; min-width:unset; padding-left:10px; }
header .cont-btn { margin:0 20px 0 auto; padding:7px 25px; }
header.smaller .navbar-toggler .icon-bar { background-color:#fff; }
.main, .service-banner, .business-banner, .contact-sec, .inner-banner, .blog-txt { margin:75px 0 0; }
.service-sec h2, .blog-sec h2, .client-sec h2, .why-sec h2, .team-sec h2 { font-size:40px; margin:0 0 50px; }
.serv-box { padding:35px; }
.ready-sec h2 { width:100%; }
.business-banner { background-image:url(../images/business-banner-mob.webp) !important; background-position:top center; border-radius:0; background-size:cover; padding:0 0 50px; }
.business-banner p { margin:0 0 70px; }
.business-banner .col-xl-6 { display:none; }
.contact-sec.dd .cont-form { padding:20px 20px 40px; }
.business-banner.dd { background-image:url(../images/career-banner.webp) !important; border-radius:0; padding:0 0 100px; }
.business-banner.dd::before { background-color:rgba(31,43,68,0.57); bottom:0; content:''; left:0; position:absolute; right:0; top:0; }
.inner-banner img { height:280px; }
.inner-txt h1, .about-sec h2 { font-size:40px; }
.about-sec .col-lg-6:first-child { padding:0 12px 35px; }
.about-sec.dd .col-lg-6:last-child { padding:35px 12px 0; }
.about-sec img { height: auto; }
footer .col-xl-4, footer .col-xl-3, footer .col-lg-4, footer .col-lg-3 { margin-bottom:30px; }
footer p { font-size:14px; }
footer h2 { font-size:13px; }
footer li a { font-size:15px; }
}
@media (min-width:480px) and (max-width:767.98px){
.main img { height:auto; min-height:450px; max-height:550px; }
.testimonial-sec h2 { font-size:36px; }
.team-sec .col-lg-3 { width:50%; }
.team-sec img { height:200px; width:200px; }
.main h1, .ready-sec h2, .business-banner h1, .business-box h2 { font-size:32px; }
.service-sec h2, .blog-sec h2, .client-sec h2, .why-sec h2, .team-sec h2 { font-size:36px; }
.serv-box { padding:35px 25px; }
}
@media (min-width:768px){
.service-sec .count-list { display:none; }
.business-box h3 strong { border-bottom:2px solid var(--main-color); font-weight:600; padding-bottom:3px; }
.team-info .modal-dialog { align-items:center; display:flex; height:100%; justify-content:center; margin:0 auto; max-width:900px; }
}
@media (min-width:768px) and (max-width:991.98px){	
header .navbar-expand-md .navbar-toggler, header .navbar-expand-md .navbar-collapse { display:block !important; }
header .navbar-expand-md .navbar-nav .dropdown-menu { position:relative; }
.testimonial-sec h2 { margin:0 0 60px; font-size:42px; }
.service-banner h1 { font-size:48px; }
.blog-txt img { height:280px; }
.main h1 { font-size:42px; }
.service-sec h2, .blog-sec h2, .client-sec h2, .why-sec h2, .team-sec h2 { font-size:42px; }
.ready-sec h2 { font-size:36px; }
.serv-box { padding:40px 30px; }
}

@media (min-width:768px) and (max-width:1449.98px){
.main img { height:800px; }
.main .carousel-caption { padding:0 60px; }
}

@media (min-width:992px){	
header .navbar-collapse { justify-content:end; }
header.smaller .navbar-expand-md .navbar-nav .nav-link { color:#fff; }
header .collapse ul li:hover > .dropdown-menu { background-color:#fff; border-top:3px solid var(--main-color-1); box-shadow:0 0 2px #333; display:block; }
header .collapse ul ul { border-top:2px solid var(--main-color-1); box-shadow:0 0 2px #333; left:17px; }
header .navbar-nav .dropdown-menu li a:hover { background-color:var(--main-color); color:#fff; }
header .dropdown-menu .dropdown .dropdown-menu { left:100%; margin-left:2px; top:0; }
header .navbar .dropdown i, .mob-logo { display:none; }
.client-sec .col-lg-2 { width:20%; }
.testimonial-sec h2 { margin:80px 0 0; }
.business-banner .col-xl-6 { padding-right:0; }
}
@media (min-width:992px) and (max-width:1199.98px){	
.service-sec h2 { font-size:65px; }
.ready-sec h2 { width:80%; }
.testimonial-sec h2 { font-size:58px; }
.testimonial-sec h2::before { right:20px; }
.testimonial-sec h2::after { right:0; }
.serv-head { padding:12px 15px 15px; }
}
@media (min-width:992px) and (max-width:1499.98px){
.business-banner .col-xl-5 { padding-bottom:120px; }	
.cont-form { padding:70px 50px; }
.contact-sec.dd .cont-form { padding:20px 20px 40px; }
}
@media (min-width:1200px) and (max-width:1399.98px){
.ready-sec h2 { width:50%; }
.testimonial-sec h2 { font-size:62px; }
.serv-head { padding:12px 40px 15px; }
}
@media (min-width:1400px){
.service-sec .col-lg-6 { margin:0 0 36px; padding:0 18px; }
.business-banner .col-xl-5 { padding-right:70px; }
}
@media (min-width: 992px) {
  header .navbar-collapse,
  header .navbar-collapse.collapse {
    display: flex !important;          
    position: static !important;       
    transform: none !important;        
    visibility: visible !important;    
    height: auto !important;           
    overflow: visible !important;     
    box-shadow: none !important;      
    left: auto !important;
    top: auto !important;
  }

  header .navbar-nav {
    display: inline-flex !important;
    gap: 18px;
    margin-left: auto; 
    align-items: center;
  }
  header .navbar-collapse[style] {
    transform: none !important;
  }
}

.navbar-collapse.collapse.show {
  display: block !important;
  visibility: visible !important;
  transform: none !important;
  position: relative !important;
  z-index: 9999 !important;
}

.navbar-toggler .icon-bar {
  display: block;
  height: 3px;
  width: 25px;
  background-color: #1F2B44 !important; 
  margin: 4px 0;
}

.offcanvas-left {
  position: fixed;
  top: 0;
  left: -360px;           
  width: 320px;          
  max-width: 78%;
  height: 100vh;
  background: #ffffff;
  z-index: 1600;
  box-shadow: 6px 0 30px rgba(13,26,40,0.12);
  transition: left 320ms cubic-bezier(.2,.8,.2,1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.offcanvas-left.open { left: 0; }

.offcanvas-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px;
  border-bottom: 1px solid #eef0f2;
}

.offcanvas-close {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 6px;
}

.offcanvas-nav { padding: 14px 0 40px; }
.offcanvas-nav ul { margin: 0; padding: 0; list-style: none; }
.offcanvas-nav li { border-bottom: 1px solid #eef0f2; }
.offcanvas-nav li > a,
.offcanvas-nav li > button.services-toggle {
  display: block;
  padding: 18px 18px;
  color: #1F2B44;               
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  background: transparent;
  width: 100%;
  text-align: left;
  border: none;
  cursor: pointer;
}

/* Mobile offcanvas button styling */
.mobile-cta-button {
  border-bottom: none !important;
  padding: 10px 0 !important;
}

.mobile-cta-link {
  display: block !important;
  padding: 14px 20px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border: none !important;
  background: var(--main-color) !important;
  color: #fff !important;
  border-radius: 6px !important;
  text-align: center !important;
  margin: 0 18px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.mobile-cta-link:hover {
  background: var(--main-color-2) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.mobile-cta-link:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

@media (max-width: 767.98px) {
  .offcanvas-nav li:last-child {
    border-bottom: none !important;
    padding: 10px 0;
  }
  .offcanvas-nav li:last-child a {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    border: none !important;
    background: var(--main-color) !important;
    color: #fff !important;
    border-radius: 4px;
  }
}

.offcanvas-nav li > a:hover,
.offcanvas-nav li > button.services-toggle:hover {
  background: transparent;
}

.services-toggle { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.chev { transition: transform 180ms ease; }
.chev.open { transform: rotate(180deg); }

.sub-menu { max-height: 0; overflow: hidden; transition: max-height 240ms ease; background: #fff; }
.sub-menu.open { max-height: 400px; }
.sub-menu li { border-bottom: none; }
.sub-menu li a { padding-left: 34px; padding-top: 12px; padding-bottom: 12px; font-weight: 500; color:#374151; }

.offcanvas-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(3, 11, 27, 0.45);
  z-index: 1500;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease;
}
.offcanvas-backdrop.show { opacity: 1; visibility: visible; }

.navbar-toggler .icon-bar {
  display: block;
  height: 3px;
  width: 25px;
  background-color: var(--main-color, #1F2B44) !important;
  margin: 4px 0;
}

@media (min-width: 992px) {
  .offcanvas-left { display: none !important; }
  .offcanvas-backdrop { display: none !important; }
}

.offcanvas-left .offcanvas-logo img { display: block; height: auto; width: 100%; max-width: 160px; }

@media (max-width: 991.98px) {
  header {
    /* top: 130%; */
    height: 56px !important;          
    min-height: 56px !important;
    line-height: 56px !important;
  }

  header .mob-logo {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 2050 !important;
    display: flex !important;
    align-items: center !important;
  }

  header .mob-logo img {
    max-height: 40px !important;      
    width: auto !important;
    display: block !important;
  }

  /* header .navbar-toggler {
    position: absolute !important;
    right: 12px !important;
    top: 130% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 6px !important;
    z-index: 2100 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  } */



  /* Default (Desktop) */
header .navbar-toggler {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 10px 12px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 6px;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Tablet & Mobile */
@media (max-width: 991px) {
  header .navbar-toggler {
    position: fixed;       /* stays visible */
    top: 16px;             /* fixed top */
    right: 12px;
    transform: none;
    z-index: 9999;
  }
}


  header .navbar-toggler .icon-bar {
    height: 3px !important;
    width: 22px !important;
    margin: 3px 0 !important;
    background-color: var(--main-color, #1F2B44) !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Show a visible logo/header inside the mobile drawer */
  .offcanvas-left .offcanvas-logo,
  .offcanvas-left .offcanvas-header .offcanvas-logo {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    padding: 12px 18px !important;
    margin: 0 !important;
  }

  /* Make the mobile drawer full-screen width so items are not cut off */
  .offcanvas-left {
    left: -100% !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
  }

  .offcanvas-left.open {
    left: 0 !important;
  }

  .offcanvas-left .offcanvas-header {
    padding: 8px 14px !important;
    border-bottom: 1px solid #eef0f2 !important;
    min-height: 36px !important;
  }
  .main, .inner-banner {
    margin-top: 64px !important; 
  }
}

@media (min-width: 992px) {
  header { height: auto !important; min-height: auto !important; }
  header .mob-logo { display: none !important; }
  header .navbar-toggler { display: none !important; transform: none !important; top: auto !important; }
  .main, .inner-banner { margin-top: 84px !important; } 
}

/* Hide desktop CTA on tablets/phones so it doesn't appear between logo and toggle */
@media (max-width: 991.98px) {
  header .cont-btn { display: none !important; }
  hi
  /* Ensure header content is centered and the toggle remains at right */
  header .col-lg-12 { justify-content: space-between !important; }
}
/* ---------- Clients section (icons + labels) ---------- */
.client-sec {
  background-color: var(--main-color);
  padding: 80px 0 40px;
  text-align: center;
  box-sizing: border-box;
}

.client-sec .col-xl-6,
.client-sec .col-lg-8,
.client-sec .col-md-10 {
  margin: 0 auto 40px;
}
.client-sec h2 {
  margin: 0 0 16px !important;
  font-size: 55px;
  font-weight: 600;
  color: #fff;
}
.client-sec p {
  color: #fff;
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 45px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.client-sec .row[data-aos] {
  gap: 0;
}

.client-sec .row > .col-lg-2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 12px;
  box-sizing: border-box;
  margin-bottom: 48px;
}

.client-sec .row > .col-lg-2 img {
  display: block;
  height: 80px;       
  width: auto;
  margin: 0 auto 14px;
}

.client-sec .row > .col-lg-2 h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  margin: 0;
  text-align: center;
  max-width: 180px;   
}


@media (min-width: 1400px) {
  .client-sec .row > .col-lg-2 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .client-sec .row > .col-lg-2 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .client-sec .row > .col-lg-2 {
    flex: 0 0 20%;
    max-width: 20%;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .client-sec .row > .col-lg-2 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    margin-bottom: 36px;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .client-sec .row > .col-lg-2 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
    margin-bottom: 32px;
  }
}

@media (max-width: 575.98px) {
  .client-sec .row > .col-lg-2 {
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 26px;
    padding: 12px;
  }
  .client-sec .row > .col-lg-2 img {
    height: 72px;
    margin-bottom: 10px;
  }
  .client-sec h2 {
    font-size: 28px;
    margin-bottom: 12px !important;
  }
  .client-sec p { font-size: 14px; margin-bottom: 28px; }
}