*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
     
}
html{
  width: 100%!important;
  max-width: 100%!important;
  overflow-x: hidden!important;
}
:root{
    --primary:#004A99;
    --primary-light:#39C4FF;
    --ternery:#FF6600;
    --body-text:#54657A;
    --heading:#0F1C2E;
    --fonthead:'Outfit', sans-serif;
    --fontbody:'Plus Jakarta Sans', sans-serif;;
}
body{
  font-family: var(--fontbody);
  margin:0;
  width: 100%!important;
  max-width: 100%!important;
 overflow-x: hidden!important;
 
}
h1{
    font-size: calc(3.6rem + 0.5vw);
}
h2{
    font-size: calc(3rem + 0.5vw);
}
h3{
    font-size: calc(2rem + 0.5vw);
}
h4{
    font-size: calc(1.5rem + 0.5vw);
}
h5{
    font-size: calc(1.1rem + 0.5vw);
}
h6{
    font-size: calc(1rem + 0.5vw);
}
h1,h2,h3,h4,h5,h6,
.navbar-brand{
  font-family: var(--fonthead);
}
.hero-banner h2{
    font-size: calc(3.3rem + 0.5vw);

}
.dropdown-menu .dropdown-item{
      padding: 0.8rem 1rem;
      font-weight: 500;
}
.dropdown-item:hover{
  color: var(--primary);
}
.dropdown-item:active{
  background-color: var(--ternery);
  color: #fff;
}
/* Floating header wrapper */
.header-wrapper{
  position:absolute;
  top:20px;              /* space above banner */
  left:0;
  width:100%;
  z-index:999;
  transition:all .35s ease;
}
@media (min-width: 1400px) {
   .header-wrapper .container {
        max-width: 1420px!important;
    }
}
.search-overlay{
  position:fixed;
  inset:0;
  background:rgba(10,20,35,0.92);
  backdrop-filter: blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:.3s;
  z-index:9999;
}

.search-overlay.active{
  opacity:1;
  visibility:visible;
}

/* close button */
.search-close{
  position:absolute;
  top:30px;
  right:40px;
  background:none;
  border:none;
  color:#fff;
  font-size:28px;
  cursor:pointer;
}

/* centered search box */
.search-box{
  width:100%;
  max-width:600px;
  display:flex;
  border-radius:50px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 20px 60px rgba(0,0,0,17);
}

.search-box input{
  flex:1;
  border:none;
  padding:18px 24px;
  font-size:18px;
  outline:none;
}

.search-box button{
  border:none;
  padding:0 26px;
  background:var(--primary);
  color:#fff;
  font-size:18px;
  cursor:pointer;
}

/* mobile */
@media(max-width:575px){
  .search-box{
    margin:0 15px;
  }
}

/* White rounded box */
.header-box{
  background:#ffffffea;
  border-radius:8px;
  padding:12px 22px;
  box-shadow:0 12px 30px rgba(0,0,0,0.08);
  transition:all .35s ease;
}
#mainHeader.is-sticky .container{
  max-width:100%!important;
  width: 100%!important;
  padding-left:0;
  padding-right:0;
}

#mainHeader.is-sticky .header-box{
  border-radius:0;
  margin-top:0;
  padding-left: 40px;
  padding-right: 40px;
}
#mainHeader.is-sticky .mega-menu .dropdown-menu{
  border-radius: 0px;
  margin-top: 0px;
  
}

/* Nav links */
.navbar .nav-link{
  font-weight:600;
  color:var(--heading);
  font-size:1rem;
}

.navbar .nav-link:hover{
  color:#0d6efd;
}

/* Button style */
.btn{
 padding: .575rem 1rem!important;
}
.btn-primary{
  background:var(--primary);
  border:none;
  font-weight:600;
}

.btn-primary:hover{
  background:#083a85;
}
.search{
    margin-right: 20px;
}
/* Sticky state */
.header-wrapper.sticky{
  position:fixed;
  top:0;
  animation:slideDown .35s ease;
}

.header-wrapper.sticky .header-box{
  border-radius:0 0 12px 12px;
}

/* Smooth slide animation */
@keyframes slideDown{
  from{transform:translateY(-100%); opacity:0;}
  to{transform:translateY(0); opacity:1;}
}
.navbar-nav .nav-link.active{
    font-weight: 700;
    color: var(--primary);
}
/* Mobile */
@media(max-width:991px){
  .header-box{
    border-radius:10px;
  }

  .navbar-collapse{
    margin-top:10px;
    background:none;
    border-radius:10px;
    padding:10px 0;
    box-shadow:none;
  }

  .navbar-nav .nav-link{
    padding:10px 20px;
  }
}

/* base dropdown animation */
@media (min-width: 992px){

  .navbar .dropdown-menu{
    display:block;
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:all .25s ease;
    margin-top:10px;
    border:none;
    box-shadow:0 15px 35px rgba(0,0,0,0.08);
  }

  .navbar .dropdown:hover .dropdown-menu{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
}
/* hero section */
.hero-banner{
  position:relative;
  height:100vh;
  min-height:720px;
  overflow:hidden;
  background-color: var(--heading);
}

/* each slide full size */
.heroSwiper,
.heroSwiper .swiper-slide{
  height: 100% !important;;
}

.slide-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  z-index:-1;
}
.btn-outline-light{
  font-weight: 600;
}
/* centered slide content */
.slide-content{
  position:relative;
  z-index:2;
  transform: translateY(-50%);
  top: 60%;
  display:flex;
  flex-direction:column;
  justify-content:center!important;
  align-items:center!important;
  color:#fff;
  padding-top:140px; 
}
.slide-content h2 span{
    color: var(--primary-light);
    font-weight: 700;
}
/* bottom → top gradient (common for all slides) */
.hero-overlay{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    to top,
    rgba(15,28,46,0.95) 0%,
    rgba(15,28,46,0.75) 40%,
    rgba(15,28,46,0.25) 75%,
    rgba(15,28,46,0) 100%
  );
  pointer-events:none;
}

/* tags */
.hero-tags{
  font-family:var(--fonthead);
  font-size: 1.1rem;
  font-weight: 500;
  color:#e6eef7;
  margin-bottom:20px;
  position: relative;
  z-index: 2;
}

.hero-tags span{
  display: inline-block;
  line-height: 0px!important;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--primary-light);
  margin:0 6px;
  padding: 0.3rem;
}
.hero-tags span:nth-child(even){
    background-color: var(--ternery);
}

/* slide title image */
.slide-title-img{
  max-width:820px;
  width:100%;
  height:auto;
  display:block;
  margin:auto;
}

/* buttons */
.hero-actions .btn-primary{
  background:var(--primary);
  border:none;
}

.hero-actions .btn-primary:hover{
  background:var(--ternery);
}

/* right reviews */
.hero-reviews{
  position:absolute;
  right:60px;
  top:50%;
  transform:translateY(-50%);
  z-index:4;
}

.hero-reviews img{
  max-width:150px;
  display:block;
  margin-bottom:15px;
}

/* responsive */
@media(max-width:991px){
  .slide-title-img{ max-width:95%; }
  .hero-reviews{ display:none; }
}
.stats-section{ 
  padding:90px 0; 
  background:#f7f9fc; 
  position:relative; } /* light texture (optional) */ 

.stats-section::before{ 
  content:""; 
  position:absolute; 
  inset:0; background:url('../img/trust-bg.jpg'); 
  background-position: center; background-size: cover; 
  opacity:0.3; pointer-events:none; } /* base item */ 
  .stat-item{ position:relative; padding:30px 10px; } /* shared arc style */ 
  .stat-item::after{ 
    content:""; 
    position:absolute; 
    left:50%; 
    transform:translateX(-50%);
     width:260px; /* bigger so they touch */ 
     height:126px; 
     pointer-events:none; 
    } /* left and right : top half circle */ 
.stat-top::after{ 
  top:-45px; 
  border:2px dashed var(--primary); 
  border-bottom:none; 
  border-radius:200px 200px 0 0; 
} /* middle : bottom half circle */ 
.stat-bottom::after{ 
  bottom:-45px; 
  border:2px dashed var(--ternery); 
  border-top:none;
   border-radius:0 0 200px 200px; } /* text styles */ 
.stat-sub{ 
  font-family:var(--fonthead);
   color:var(--body-text);
   font-size: 1.4rem; 
   margin-bottom:6px; 
  } 
.stat-title{ 
  font-family:var(--fontbody); 
  font-weight:700; 
  font-size:22px; 
  color:var(--heading);
   line-height:1.4; 
  } 
  .stat-highlight{
     color:var(--primary);
     font-weight:800; 
    } 
  .stat-highlight.orange{ 
    color:var(--ternery); 
  } /* alignment fix so arcs visually connect */ 
  .stats-section .col-md-4{ 
    display:flex; 
    justify-content:center;
   } /* responsive */ 
   @media(max-width:991px){ 
    .stat-item::after{ 
      width:200px; 
      height:100px; 
    } 
    .stat-top::after{ 
      top:-50px; 
    } 
    .stat-bottom::after{ 
      bottom:-50px; 
    } }

.services-section{
  padding:90px 0;
  background:#eef2f6;
}

/* headings */
.sec-title{
  font-family:var(--fonthead);
  color:var(--heading);
  font-size:36px;
  font-weight:700;
  margin-bottom:8px;
}

.sec-subtitle{
  font-family:var(--fontbody);
  color:var(--primary);
  font-size:20px;
  margin-bottom:6px;
}

.sec-desc{
  font-family:var(--fontbody);
  color:var(--body-text);
  font-size:15px;
}

/* card */
.service-card{
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
  height:100%;
  transition:.3s;
}

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

/* image area */
.service-img{
  position:relative;
}

.service-img img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
}

/* number badge */
.service-num{
  position:absolute;
  top:15px;
  right:15px;
  background:rgba(255, 255, 255, 0.8);
  color:#d9a98d;
  font-family:var(--fonthead);
  font-size: 1.3rem;
  font-weight:700;
  padding:10px 15px;
  border-radius:5px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
}

/* body */
.service-body{
  padding:22px;
  text-align:center;
}

.service-body h6{
  font-family:var(--fonthead);
  color:var(--heading);
  font-weight:600;
  margin-bottom:8px;
}

.service-body p{
  font-family:var(--fontbody);
  color:var(--body-text);
  font-size:14px;
  margin-bottom:12px;
}

/* read more link */
.read-more{
  font-family:var(--fontbody);
  color:var(--primary);
  font-weight:600;
  text-decoration:none;
  transition: all 0.3s ease-in-out;
}

.read-more:hover{
  color:var(--ternery);
}

/* bottom button */
.btn-view-all{
  display:inline-block;
  background:var(--primary);
  color:#fff;
  padding:12px 28px;
  border-radius:30px;
  font-family:var(--fontbody);
  text-decoration:none;
  font-weight:600;
  transition: all 0.3s ease-in-out;
}

.btn-view-all:hover{
  background:var(--ternery);
  color: #ffff;
}

/* responsive */
@media(max-width:767px){
  .sec-title{font-size:28px;}
  .service-img img{height:200px;}
}
.trusted-section{
  padding:90px 0;
  background:#f4f6f9;
}

.trusted-title{
  font-family:var(--fonthead);
  color:var(--heading);
  font-size:34px;
  font-weight:700;
  margin-bottom:6px;
}

.trusted-subtitle{
  font-family:var(--fontbody);
  color:var(--primary);
  font-size:16px;
}

/* video card */
.video-card{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
}

/* thumbnail */
.video-thumb{
  display:block;
  position:relative;
}

.video-thumb img{
  width:100%;
  height:260px;
  object-fit:cover;
  display:block;
  transition:.4s;
}

/* play button */
.play-btn{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:70px;
  height:50px;
  background:#ff0000;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:22px;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
  transition:.3s;
}

/* hover effect */
.video-card:hover img{
  transform:scale(1.05);
}

.video-card:hover .play-btn{
  background:var(--ternery);
}
.clients-section{
  padding:70px 0;
  background:#f7f9fc;
}

.sec-title{
  font-family:var(--fonthead);
  font-size:32px;
  color:var(--heading);
}

.sec-sub{
  color:var(--body-text);
  margin-top:6px;
}

.client-logo{
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.7;
  transition:.3s;
}

.client-logo img{
  max-height:80px;
  width:auto;
  filter:grayscale(100%);
  transition:.3s;
}

.client-logo:hover{
  opacity:1;
}

.client-logo:hover img{
  filter:grayscale(0%);
  transform:scale(1.05);
}

/* client text */
.client-name{
  font-family:var(--fonthead);
  color:var(--heading);
  font-weight:600;
  margin-top:18px;
  margin-bottom:2px;
}

.client-role{
  font-family:var(--fontbody);
  color:var(--body-text);
  font-size:14px;
  margin:0;
}

/* responsive */
@media(max-width:767px){
  .video-thumb img{
    height:220px;
  }
}

.why-section{
  position:relative;
  height:550px;
  background:url('../img/why-code9.jpg') center/cover no-repeat;
  overflow:hidden;
}

/* shared box */
.why-box{
  position:absolute;
  width:50%;
  padding:48px;
  backdrop-filter: blur(2px);
}

/* LEFT – top half */
.why-box-left{
  top:0;
  left:0;
  height:50%;
  background:rgba(5,30,60,.88);
  color:#fff;
  border-bottom-right-radius:28px;

  /* center content */
  display:flex;
  justify-content:center;
  align-items:center;
}

.why-left-inner{
  max-width:480px;
}

/* RIGHT – bottom half */
.why-box-right{
  bottom:0;
  right:0;
  height:50%;
  background:rgba(255,255,255,.92);
  color:var(--heading);
  border-top-left-radius:28px;
  overflow:auto;
}

/* typography */
.why-box-left h2{
  font-family:var(--fonthead);
  font-size:40px;
  line-height:1.2;
  margin:0 0 12px;
}

.why-box-left h2 span{
  color:var(--primary-light);
}

.why-box-left .lead{
  font-family:var(--fontbody);
  font-size:18px;
  margin:14px 0 6px;
}

.why-box-left .highlight{
  font-family:var(--fontbody);
  font-size:20px;
  color:var(--primary-light);
}

/* accordion */
.why-item{
  border-bottom:1px dashed #d6dde6;
  padding:16px 0;
}
.why-item:last-child{
  border-bottom: 0px;
}
.why-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:var(--fonthead);
  font-size:20px;
  font-weight: 600;
  cursor:pointer;
}

.why-head b{
  font-size:22px;
  color:var(--primary);
}
.why-head span i{
  color: var(--primary);
  margin-right: 8px;
  line-height: 0px;
}
.why-body{
  font-family:var(--fontbody);
  color:var(--body-text);
  margin-top:10px;
  height:0;
  overflow:hidden;
  opacity:0;
}

/* expanded full columns after scroll */
.why-section.expanded .why-box-left,
.why-section.expanded .why-box-right{
  height:100%;
  border-radius:0;
}

/* responsive: stack */
@media(max-width:991px){
  .why-section{
    height:auto;
  }

  .why-box{
    position:relative;
    width:100%;
    height:auto !important;
    border-radius:0 !important;
  }
}
.case-section{
  background:#ffff;
  padding:80px 0;

}

.case-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
  margin-bottom:40px;
}

.case-head h2{
  font-family:var(--fonthead);
  font-size:34px;
  margin:0;
}

.case-head p{
  font-family:var(--fontbody);
  margin:6px 0 0;
}

.case-btn{
  background:rgba(255,255,255,.1);
  padding:10px 18px;
  
  border: 1px solid var(--primary);
  color:var(--heading);
  text-decoration:none;
  font-family:var(--fontbody);
  font-weight: 600;
}

.case-grid .case-card{
  overflow:hidden;
  height:100%;
  transition:.3s;
}

.case-card:hover{
  transform:translateY(-8px);
}

.case-img{
  position:relative;
  border-radius:20px;
  overflow: hidden;
}

.case-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: center;
}

.case-tag{
  position:absolute;
  top:14px;
  right:14px;
  background:rgba(255,255,255,.8);
  color:var(--primary);
  padding:4px 10px;
  border-radius:12px;
  font-size:13px;
  font-weight: 600;
  font-family:var(--fontbody);
}

.case-body{
  padding:20px;
}

.case-body h4{
  font-family:var(--fonthead);
  margin-bottom:8px;
}

.case-body p{
  font-family:var(--fontbody);
  color:var(--body-text);
  font-size:16px;
}

.case-body a{
  color:var(--primary-light);
  text-decoration:none;
  font-family:var(--fontbody);
  font-weight:600;
}

/* responsive */
@media(max-width:767px){
  .case-img img{height:300px;}
  .case-head{flex-direction:column; align-items:flex-start;}
}
.cta-section{
  position:relative;
  background:#0b1e3c;
  padding:80px 0;
  overflow:hidden;
  text-align:center;
}

/* abstract patterns */
.cta-pattern{
  position:absolute;
  top:0;
  bottom:0;
  width:260px;
  background:url('images/pattern.svg') center/contain no-repeat;
  opacity:.08;
  pointer-events:none;
}

.cta-pattern-left{ 
  left:0; 
}
.cta-pattern-left img, .cta-pattern-right img{
  max-width: 500px;
}
.cta-pattern-right{ right:0; transform:scaleX(-1); }

/* title */
.cta-title{
  font-family:var(--fonthead);
  font-size:34px;
  color:#fff;
  margin-bottom:24px;
  line-height:1.3;
}

/* button */
.cta-btn{
  display:inline-block;
  background:var(--ternery);
  color:#fff;
  padding:14px 28px;
  border-radius:30px;
  font-family:var(--fontbody);
  font-weight:600;
  text-decoration:none;
  transition: all 0.3s ease-in-out;
}

.cta-btn:hover{
  background:#ff7a1a;
  transform:translateY(-2px);
  color: #ffff;
}

/* responsive */
@media(max-width:767px){
  .cta-title{font-size:24px;}
  .cta-section{padding:60px 0;}
  .cta-pattern{width:160px;}
}
.site-footer{
  background:#0d3b66;
  color:#cfe0f2;
  font-family:var(--fontbody);
}

.footer-top{
  padding:70px 0 40px;
}

.footer-brand img{
  width:150px;
  margin-bottom:10px;
}

.footer-brand p{
  margin:0;
  font-size:14px;
  color:#a9c2db;
}

.site-footer h5{
  font-family:var(--fonthead);
  color:#fff;
  margin-bottom:18px;
}

.footer-links{
  list-style:none;
  padding:0;
  margin:0;
}

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

.footer-links a{
  color:#cfe0f2;
  text-decoration:none;
  font-size:14px;
  transition: all 0.3s ease-in-out;
}

.footer-links a:hover{
  color:var(--primary-light);
}

.footer-text{
  font-size:14px;
  line-height:1.6;
  margin-bottom:12px;
}

.follow-title{
  margin-top:16px;
  margin-bottom:10px;
  font-family:var(--fonthead);
  color:#fff;
}

.footer-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:#1c548a;
  color:#fff;
  margin-right:8px;
  text-decoration:none;
  font-size:14px;
  transition:all 0.3s ease-in-out;
}

.footer-social a:hover{
  background:var(--primary-light);
}

/* bottom bar */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding:16px 0;
  font-size:13px;
}

.footer-bottom-inner{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}

.footer-bottom a{
  color:#cfe0f2;
  text-decoration:none;
}

.footer-bottom a:hover{
  color:var(--primary-light);
}
.footer-text i{
  margin-right: 5px;
}
.footer-text a{
  color:#cfe0f2;
  text-decoration:none;
}
/* responsive */
@media(max-width:767px){
  .footer-bottom-inner{
    flex-direction:column;
    text-align:center;
  }
}

.inner-banner{
  position:relative;
  min-height:520px;
  display:flex;
  align-items:center;
  color:#fff;
  overflow:hidden;
}

/* background image */
.inner-banner-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  z-index:1;
}

/* gradient overlay */
.inner-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(6,22,43,0.9) 0%,
    rgba(6,22,43,0.75) 45%,
    rgba(6,22,43,0.3) 100%
  );
  z-index:2;
}

.inner-banner .container{
  position:relative;
  z-index:3;
}

.inner-banner-content{
  max-width:520px;
  margin-top: 100px;
}

.inner-title{
  font-family:var(--fonthead);
  font-size:42px;
  font-weight:700;
  margin-bottom:15px;
}

.inner-desc{
  font-family:var(--fontbody);
  font-size:18px;
  color:#dbe6f4;
  line-height:1.6;
  margin-bottom:28px;
}

.inner-actions{
  display:flex;
  gap:15px;
  flex-wrap:wrap;
}

/* buttons */
.inner-actions .btn{
  padding:12px 26px;
  border-radius:30px;
  font-weight:600;
}

/* responsive */
@media(max-width:768px){
  .inner-banner{
    min-height:360px;
    text-align:center;
  }
  .inner-actions{
    align-items: center;
    justify-content: center;
  }
  .inner-banner::before{
    background:linear-gradient(
      180deg,
      rgba(6,22,43,0.9) 0%,
      rgba(6,22,43,0.7) 60%,
      rgba(6,22,43,0.5) 100%
    );
  }

  .inner-banner-content{
    margin:100px auto 10px auto;
  }

  .inner-title{
    font-size:32px;
  }
  .inner-desc{
    margin-bottom: 15px;
  }
}
.service-intro-section{
  padding:90px 0;
  background:#f7f9fc;
}

/* text block */
.service-text h2{
  font-family:var(--fonthead);
  font-size:32px;
  font-weight:700;
  color:var(--heading);
  margin-bottom:18px;
}

.service-text p{
  font-family:var(--fontbody);
  font-size:16px;
  color:var(--body-text);
  line-height:1.7;
  margin-bottom:14px;
}

/* image block */
.service-image{
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,0.08);
}

.service-image img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

/* spacing tweaks */
.service-intro-section .row{
  gap:30px 0;
}

/* responsive */
@media(max-width:991px){
  .service-text{
    text-align:center;
  }

  .service-text h2{
    font-size:26px;
  }
}

.benefits-section{
  padding:100px 0;
  background:
    url('../img/benefits-of-website-redesign.jpg'),
    linear-gradient(rgba(6,22,43,0.92), rgba(6,22,43,0.92));
  background-size:cover;
  background-position:center;
  color:#fff;
}

.benefits-head h2{
  font-family:var(--fonthead);
  font-size:36px;
  font-weight:700;
  color:#fff;
}

/* cards */
.benefit-card{
  height:100%;
  padding:28px 26px;
  border-radius:14px;
  transition:.35s ease;
  position:relative;
}

/* light card */
.benefit-card.light{
  background:#f2f5f9;
  color:var(--heading);
}

/* outline card */
.benefit-card.outline{
  background:transparent;
  border:1px solid rgba(255,255,255,0.25);
}

/* icon */
.benefit-card .icon{
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  background:var(--primary);
  color:#fff;
  border-radius:50%;
  font-size:14px;
  margin-bottom:15px;
}

/* headings */
.benefit-card h4{
  font-family:var(--fonthead);
  font-size:18px;
  font-weight:600;
  margin-bottom:8px;
}

/* text */
.benefit-card p{
  font-family:var(--fontbody);
  font-size:15px;
  line-height:1.6;
  opacity:0.9;
}

/* hover */
.benefit-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(0,0,0,0.15);
}

/* responsive */
@media(max-width:768px){
  .benefits-head h2{
    font-size:28px;
  }
}
.why-choose-section{
  padding:90px 0;
  background:#f4f7fb;
}

/* image */
.why-image{
  max-width:880px;
  margin:0 auto 40px;
  border-radius:18px;
  overflow:hidden;
  /* box-shadow:0 30px 60px rgba(0,0,0,0.12); */
  position: relative;
}

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

/* heading */
.why-content h2{
  font-family:var(--fonthead);
  font-size:34px;
  font-weight:700;
  color:var(--heading);
  margin-bottom:14px;
}

.why-content h2 span{
  color:var(--primary);
}

.why-desc{
  max-width:760px;
  margin:0 auto;
  font-size:16px;
  color:var(--body-text);
  line-height:1.7;
}

/* pill cards */
.why-pill{
  background:#fff;
  border-radius:50px;
  padding:14px 22px;
  display:flex;
  align-items:center;
  gap:14px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  transition:all .3s ease;
  cursor:default;
}

/* icon */
.why-pill .icon{
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  transition:all .3s ease;
}

/* text */
.why-pill span{
  font-family:var(--fontbody);
  font-size:15px;
  font-weight:500;
  color:var(--heading);
}

/* hover interaction */
.why-pill:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 45px rgba(0,0,0,0.12);
}

.why-pill:hover .icon{
  background:var(--ternery);
  transform:translateX(4px);
}

/* responsive */
@media(max-width:768px){
  .why-content h2{
    font-size:26px;
  }

  .why-pill{
    border-radius:16px;
  }
}
.why-img-ov{
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #F4F7FB;
background: linear-gradient(180deg, rgba(244, 247, 251, 0) 0%, rgba(244, 247, 251, 1) 100%);
}
.faq-section{
  padding:90px 0;
  background:#eef4ff;
}

.faq-head h2{
  font-family:var(--fonthead);
  font-size:34px;
  font-weight:700;
  color:var(--heading);
  margin-bottom:40px;
}

/* list */
.faq-list{
  max-width:900px;
  margin:0 auto;
}

/* item */
.faq-item{
  background:#f8fafc;
  border-radius:14px;
  padding:18px 22px;
  margin-bottom:18px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  overflow:hidden;
  transition:.3s;
}

/* question row */
.faq-question{
  display:flex;
  align-items:center;
  gap:16px;
  cursor:pointer;
}

.faq-num{
  width:36px;
  height:36px;
  background:var(--primary);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:14px;
}

.faq-question h4{
  flex:1;
  font-size:16px;
  font-weight:600;
  color:var(--heading);
  margin:0;
}

.faq-toggle{
  font-size:20px;
  font-weight:600;
  color:var(--primary);
}

/* answer */
.faq-answer{
  height:0;
  opacity:0;
  transition:.3s ease;
}

.faq-answer p{
  margin-top:14px;
  font-size:15px;
  color:var(--body-text);
  line-height:1.7;
}

/* active */
.faq-answer{
  height:0;
  overflow:hidden;
  opacity:0;
  transition:height .35s ease, opacity .25s ease;
}


.faq-item.active .faq-toggle{
  content:"−";
}

/* responsive */
@media(max-width:768px){
  .faq-head h2{
    font-size:26px;
  }

  .faq-question h4{
    font-size:15px;
  }
}

/* ABOUT HERO SECTION */
.about-hero{
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0b1f3a;
}

/* background image + gradient */
.about-hero-bg{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(11,31,58,0.75),
      rgba(11,31,58,1)
    ),
    url("../img/about-banner.jpg"); /* replace image */
  background-size: cover;
  background-position: center right;
  z-index: 1;
}

/* content */
.about-hero-content{
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 15px;
}

.about-hero h1{
  font-family: var(--fonthead);
  font-size: 42px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
}

.about-hero-lead{
  font-size: 18px;
  line-height: 1.7;
  color: rgba(255,255,255,0.9);
  margin-bottom: 18px;
}

.about-hero-desc{
  font-size: 15.5px;
  line-height: 1.8;
  color: rgba(255,255,255,0.75);
}

/* responsive */
@media (max-width: 991px){
  .about-hero{
    min-height: 490px;
  }

  .about-hero h1{
    font-size: 34px;
  }
  .about-hero-content{
    padding: 120px 20px 20px 20px;
  }
}

@media (max-width: 575px){
  .about-hero h1{
    font-size: 28px;
  }

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

  .about-hero-desc{
    font-size: 14.5px;
  }
}

/* WHO WE ARE SECTION */
.who-section{
  padding: 90px 0;
  background: #f7f9fc;
}

.who-title{
  font-family: var(--fonthead);
  font-size: 32px;
  font-weight: 700;
  color: var(--heading);
  margin-bottom: 18px;
}

.who-content p{
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--body-text);
  margin-bottom: 14px;
}

/* highlight pills */
.who-points{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.who-points span{
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 50px;
  background: rgba(0,74,153,0.08);
  color: var(--primary);
  font-weight: 500;
  transition: all .25s ease;
}

.who-points span:hover{
  background: var(--primary);
  color: #fff;
}

/* image card */
.who-image{
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(0,0,0,0.08);
}

.who-image img{
  width: 100%;
  height: auto;
  display: block;
}

/* responsive */
@media(max-width: 991px){
  .who-title{
    font-size: 28px;
  }

  .who-section{
    padding: 40px 0;
  }
}

@media(max-width: 575px){
  .who-title{
    font-size: 24px;
  }

  .who-points span{
    font-size: 12.5px;
  }
}
/* WHY CHOOSE CODE9 */
.why-code9{
  padding: 90px 0;
  background: #ffffff;
}

.section-head h2{
  font-family: var(--fonthead);
  font-size: 34px;
  font-weight: 700;
  color: var(--heading);
}

.section-sub{
  font-size: 15px;
  color: var(--body-text);
  margin-top: 8px;
}

.section-sub .dot{
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--ternery);
  border-radius: 50%;
  margin: 0 6px;
  transform: translateY(-1px);
}

/* card */
.why-card{
  background: #fff;
  border-radius: 14px;
  padding: 24px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  transition: all .25s ease;
}

.why-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.1);
}

/* icon */
.why-card .icon{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
}

.why-card .icon.blue{
  background: var(--primary);
}

.why-card .icon.orange{
  background: var(--ternery);
}

/* content */
.why-card h5{
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--heading);
}

.why-card p{
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--body-text);
}

/* responsive */
@media(max-width: 991px){
  .section-head h2{
    font-size: 28px;
  }
}

@media(max-width: 575px){
  .why-code9{
    padding: 70px 0;
  }
}
.growth-section{
  padding: 90px 0;
  background: linear-gradient(135deg,#081a3d,#0b2b5c);
  color:#fff;
}

.growth-section .section-head h2{
  font-size:32px;
  font-weight:700;
  color: #fff;
}

.growth-section .section-head p{
  font-size:14.5px;
  opacity:.85;
}

.growth-card{
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.15);
  border-radius:14px;
  padding:26px 20px;
  text-align:center;
  transition:.25s ease;
}

.growth-card:hover{
  transform:translateY(-6px);
  background:rgba(255,255,255,.12);
}

.growth-card h3{
  font-size:40px;
  font-weight:700;
}

.growth-card p{
  font-size:14px;
  opacity:.85;
}

.dot{
  width:35px;
  height:35px;
  border-radius:50%;
  display:inline-block;
  margin-bottom:-30px;
}

.dot.orange{background:var(--ternery);}
.dot.blue{background:var(--primary-light);}

.vision-mission-section{
  padding:90px 0;
  background:#f7f9fc;
}

.vision-image{
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 20px 45px rgba(0,0,0,.08);
}

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

.vm-content{
  border-radius:20px;
  padding:0px 40px;
}

.vm-block{
  display:flex;
  gap:16px;
  margin-bottom:28px;
}

.vm-icon{
  width:54px;
  height:54px;
  min-width: 54px;   
  border-radius:50%;
  background:var(--primary);
  color:#fff;
  display: inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 18px;
  line-height: 1; 
}

.vm-block h4{
  font-size:20px;
  font-weight:600;
  margin-bottom:6px;
}

.vm-block p{
  font-size:14.5px;
  line-height:1.7;
  color:var(--body-text);
}
.growth-card h3::after{
  content:"+";
}

.per h3::after{
  content:"%";
}
.vm-item:hover .vm-icon{
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,74,153,.25);
}
.vm-item{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  margin-bottom: 30px;
}

/* ========================================
   CASE STUDY BANNER
======================================== */

.case-banner{
  position:relative;
  height:620px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#0a2a4a;
}

/* bg */
.case-bg{
  position:absolute;
  inset:0;
  z-index:0;
}

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

/* gradient overlay */
.case-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    #0a2a4a 0%,
    rgba(10,42,74,0.95) 40%,
    rgba(10,42,74,0.2) 75%,
    rgba(10,42,74,0) 100%
  );
}

/* content */
.case-content{
  position:relative;
  z-index:2;
  color:#fff;
}

.case-logo{
  width:220px;
  margin-bottom:20px;
}

.case-desc{
  font-size:17px;
  line-height:1.6;
  color:#dbe7f5;
  max-width:460px;
  margin-bottom:25px;
}

/* button */
.btn-orange{
  background:#ff6a00;
  color:#fff;
  padding:14px 26px;
  border-radius:30px;
  font-weight:600;
  display:inline-block;
  transition:.3s;
}

.btn-orange:hover{
  background:#ff7f1a;
  color:#fff;
}

/* laptop image */
.case-device{
  position:relative;
  z-index:2;
}

.case-device img{
  width:100%;
  max-width:760px;
  transform: perspective(1200px) rotateY(-12deg);
}

/* responsive */
@media(max-width:991px){

  .case-banner{
    height:auto;
    padding:140px 0 80px;
  }

  .case-device{
    margin-top:40px;
    text-align:center;
  }

  .case-device img{
    transform:none;
    max-width:100%;
  }

  .case-logo{
    width:180px;
  }
}

/* ================================
   PROJECT OVERVIEW
================================ */

.case-overview{
  background:#f4f6f8;
  position: relative;
}

.section-space{
  padding:80px 0;
}

.section-title{
  font-size:28px;
  font-weight:700;
  color:var(--heading);
  margin-bottom:20px;
}

.overview-text{
  font-size:16px;
  line-height:1.8;
  color:var(--body-text);
  margin-bottom:18px;
  max-width:100%;
}

/* responsive */
@media(max-width:991px){
  .section-space{
    padding:60px 0;
  }

  .section-title{
    font-size:24px;
  }
}
/* ================================
   CLIENT GOALS
================================ */

.client-goals{
  background:#f4f6f8;
}

.goal-item{
  background:#fff;
  border-radius:60px;
  padding:16px 22px 16px 70px;
  position:relative;
  margin-bottom:18px;
  box-shadow:0 8px 18px rgba(0,0,0,0.05);
  transition:all .25s ease;
  display:flex;
  align-items:center;
}

.goal-item:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 24px rgba(0,0,0,0.08);
}

.goal-item p{
  margin:0;
  font-weight:500;
  color:var(--heading);
  font-size:15px;
}

/* icon circle */
.goal-icon{
  position:absolute;
  left:7px;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:14px;
}

/* colors */
.goal-icon.orange{ background:#ff6b00; }
.goal-icon.blue{ background:#0b4ea2; }

/* responsive */
@media(max-width:991px){

  .goal-item{
    padding:16px 18px 16px 60px;
  }

}

.case-approach{
  padding:80px 0;
  background:#f5f7fb;
}

.approach-card{
  background:#dfe7f1;
  padding:40px;
  border-radius:18px;
  height:100%;
  transition:0.3s;
}

.approach-card:hover{
  transform:translateY(-6px);
}

.approach-card h3{
  font-family:var(--fonthead);
  font-size:26px;
  color:var(--heading);
  margin-bottom:10px;
}

.approach-card p{
  color:var(--body-text);
  margin-bottom:20px;
}

.approach-list{
  list-style:none;
  padding:0;
  margin:0;
}

.approach-list li{
  position:relative;
  padding-left:40px;
  margin-bottom:14px;
  font-weight:500;
  color:var(--heading);
}

.approach-list li::before{
  font-family:"Font Awesome 6 Free";
  content:"\f00c"; /* check icon */
  font-weight:900;
  position:absolute;
  left:0;
  top:0;
  width:26px;
  height:26px;
  background:var(--primary);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
}

/* responsive */
@media(max-width:991px){
  .approach-card{
    padding:30px;
  }
}
.design-highlights{
  padding:80px 0;
  background:#f4f6fa;
}

.section-title{
  font-family:var(--fonthead);
  font-size:34px;
  color:var(--heading);
}

/* card */
.shot-card{
  border-radius:16px;
  overflow:hidden;
  background:#000;
  box-shadow:0 20px 50px rgba(0,0,0,.1);
}

/* visible window */
.shot-frame{
  height:420px;
  overflow:hidden;
  position:relative;
}

/* scrolling image container */
.shot-scroll{
  position:absolute;
  top:0;
  left:0;
  width:100%;
}

/* image */
.shot-scroll img{
  width:100%;
  display:block;
  transform:translateY(0);
  transition:transform 4s linear;
}

/* HOVER SCROLL */
.shot-card:hover .shot-scroll img{
  transform:translateY(calc(-100% + 420px));
}

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

  .shot-frame{
    height:auto;
  }

  .shot-scroll{
    position:relative;
  }

  .shot-scroll img{
    transform:none !important;
  }

}
.design-highlights{
  padding:80px 0;
  background:#f4f6fa;
}

.section-title{
  font-family:var(--fonthead);
  font-size:34px;
  color:var(--heading);
}

/* card */
.shot-card{
  border-radius:16px;
  overflow:hidden;
  background:#000;
  box-shadow:0 20px 50px rgba(0,0,0,.1);
}

/* visible window */
.shot-frame{
  height:420px;
  overflow:hidden;
  position:relative;
}

/* scrolling image container */
.shot-scroll{
  position:absolute;
  top:0;
  left:0;
  width:100%;
}

/* image */
.shot-scroll img{
  width:100%;
  display:block;
  transform:translateY(0);
  transition:transform 4s linear;
}

/* HOVER SCROLL */
.shot-card:hover .shot-scroll img{
  transform:translateY(calc(-100% + 420px));
}

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

  .shot-frame{
    height:auto;
  }

  .shot-scroll{
    position:relative;
  }

  .shot-scroll img{
    transform:none !important;
  }

}
.devtech-section{
  padding:60px 0;
  background:#f5f7fb;
}

.sec-title{
  font-size:28px;
  font-weight:700;
  color:#0F1C2E;
  margin-bottom:10px;
}

.sec-text{
  color:#54657A;
  font-size:15px;
}

.devtechSwiper{
  padding:20px 0;
}

.devtechSwiper .swiper-slide{
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:.9;
  transition:.3s;
}

.devtechSwiper img{
  height:55px;
  object-fit:contain;
  filter:grayscale(100%);
  transition:.3s;
}

.devtechSwiper .swiper-slide:hover img{
  filter:grayscale(0);
  transform:scale(1.08);
}
.related-case-section{
  padding:70px 0;
  background:#eef3f8;
}

.section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:30px;
}

.section-head h3{
  font-size:28px;
  font-weight:700;
  color:#0F1C2E;
}

.case-nav{
  display:flex;
  gap:10px;
}

.case-prev,
.case-next{
  width:44px;
  height:44px;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  transition:.3s;
}

.case-prev:hover,
.case-next:hover{
  background:var(--primary);
  color:#fff;
}

.case-card{
  display:block;
  text-align:center;
  text-decoration: none;
}

.case-img{
  border-radius:14px;
  overflow:hidden;
  margin-bottom:14px;
}

.case-img img{
  width:100%;
  height:330px;
  object-fit:cover;
  transition:.5s;
}

.case-card:hover img{
  transform:scale(1.05);
}
.relatedCaseSwiper .case-card:hover {
    transform: unset;
}
.case-card h5{
  font-size:16px;
  font-weight:600;
  color:#0F1C2E;
}
.contact-banner{
  background:url("../img/cont-banner.jpg") center/cover no-repeat;
}
.redesign-banner{
  background:url("../img/redesign-banner.jpg") center/cover no-repeat;
}
/* responsive */
@media(max-width:991px){
  .case-img img{ height:250px; }
}
.contact-main{
  background:#f5f7fb;
  padding:70px 0;
}

.contact-title{
  font-size:42px;
  font-weight:700;
  line-height:1.2;
  margin-bottom:20px;
}

.contact-desc{
  color:#6b7a90;
  margin-bottom:25px;
  max-width:420px;
}

.contact-social a{
  width:40px;
  height:40px;
  text-decoration: none;
  background:#0d3b66;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  margin-right:10px;
  transition:.3s;
}

.contact-social a:hover{
  background:var(--primary);
}

.contact-form-box{
  background:#eef3f9;
  padding:40px;
  border-radius:18px;
}

.form-group{
  margin-bottom:20px;
}

.contact-form-box input,
.contact-form-box textarea{
  width:100%;
  border:none;
  border-bottom:1px solid #cfd7e6;
  padding:14px 0;
  background:transparent;
  outline:none;
  font-size:15px;
}

.contact-form-box button{
  margin-top:15px;
  padding:12px 30px;
  border:none;
  background:#ff6a00;
  color:#fff;
  border-radius:30px;
  font-weight:600;
}

@media(max-width:991px){
  .contact-title{
    font-size:32px;
  }
  .contact-form-box{
    padding:25px;
  }
}
.contact-info{
  margin:70px 0px; 
  position:relative;
  z-index:2;
}

.contact-card{
  background:#eaf1f8;
  padding:30px;
  border-radius:16px;
  display:flex;
  gap:18px;
  align-items:flex-start;
  height:100%;
  transition:.3s;
}

.contact-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 30px rgba(0,0,0,0.08);
}

.contact-icon{
  width:60px;
  height:60px;
  background:#0d3b66;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:22px;
  flex-shrink:0;
}

.contact-text h4{
  font-size:18px;
  font-weight:600;
  margin-bottom:6px;
}

.contact-text p{
  color:#6c7a92;
  margin:0;
  line-height:1.6;
}


.map-wrap{
  width:100%;
  height:450px;
  overflow:hidden;
  border-radius:0;
}

.map-wrap iframe{
  width:100%;
  height:100%;
  display:block;
  filter:grayscale(10%);
}


/* =============================
   BLOG GRID
============================= */
.blog-section{
  padding:80px 0;
  background:var(--bg);
}

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

/* =============================
   BLOG CARD
============================= */
.blog-card{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 15px 35px rgba(0,0,0,0.06);
  transition:.3s;
  display:flex;
  flex-direction:column;
}

.blog-card:hover{
  transform:translateY(-8px);
}

.blog-img{
  height:220px;
  overflow:hidden;
}

.blog-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.4s;
}

.blog-card:hover img{
  transform:scale(1.05);
}

.blog-content{
  padding:22px;
  flex:1;
  display:flex;
  flex-direction:column;
}

.blog-meta{
  margin-top: 15px;
  font-size:14px;
  font-weight: 500;
  color:#4a4a4a;
  margin-bottom:15px;

}

.blog-title{
  font-size:25px;
  font-weight:600;
  margin-bottom:10px;
  line-height:1.4;
}
.blog-title-xl{
  font-size:40px;
  font-weight:600;
  margin-bottom:10px;
  line-height:1.3;
}
.blog-title-md{
  font-size:30px;
  font-weight:600;
  margin-bottom:10px;
  line-height:1.3;
}
.blog-title-sm{
  font-size:25px;
  font-weight:600;
  margin-bottom:10px;
  line-height:1.3;
}
.blog-desc{
  font-size:16px;
  margin-bottom:18px;
}

.blog-btn{
  margin-top:auto;
  color:var(--primary);
  font-weight:600;
  text-decoration:none;
}

/* =============================
   SIDEBAR
============================= */
.blog-layout{
  display:grid;
  grid-template-columns:3fr 1.2fr;
  gap:40px;
}

.sidebar{
  background:#fff;
  padding:25px;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
  height:fit-content;
}

.sidebar h4{
  margin-bottom:20px;
}

.sidebar ul{
  list-style:none;
  padding:0;
  margin:0;
}

.sidebar li{
  margin-bottom:12px;
}

.sidebar a{
  text-decoration:none;
  color:var(--body-text);
  font-weight: 600;
}

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

/* =============================
   PAGINATION
============================= */
.pagination{
  margin-top:50px;
  text-align:center;
}

.pagination a{
  display:inline-block;
  padding:10px 16px;
  margin:0 4px;
  background:#fff;
  border-radius:6px;
  text-decoration:none;
  color:var(--heading);
  font-weight: 600;
}

.pagination a.active{
  background:var(--primary);
  color:#fff;
}

/* =============================
   RESPONSIVE
============================= */
@media(max-width:1024px){
  .blog-layout{
    grid-template-columns:1fr;
  }
}

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

  .blog-hero h1{
    font-size:32px;
  }
}

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

  .search-box{
    flex-direction:column;
  }
}
.whatsapp-float{
  position:fixed;
  right:22px;
  bottom:22px;
  width:58px;
  height:58px;
  background:#25D366;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  box-shadow:0 10px 25px rgba(0,0,0,0.2);
  z-index:9999;
  transition:.3s;
  text-decoration: none;
}

.whatsapp-float:hover{
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 14px 30px rgba(0,0,0,0.25);
  color:#fff;
}

/* pulse */
.whatsapp-float::after{
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  border-radius:50%;
  background:#25D366;
  opacity:.4;
  z-index:-1;
  animation:waPulse 2s infinite;
}

@keyframes waPulse{
  0%{ transform:scale(1); opacity:.5;}
  70%{ transform:scale(1.6); opacity:0;}
  100%{ opacity:0;}
}

/* mobile */
@media(max-width:768px){
  .whatsapp-float{
    width:52px;
    height:52px;
    font-size:24px;
    right:16px;
    bottom:16px;
  }
}
.error-404-section{
  padding:150px 0;
  background:#f7f9fc;
  text-align:center;
}

.error-404-inner{
  max-width:720px;
  margin:auto;
}

.error-code{
  font-size:140px;
  font-weight:800;
  line-height:1;
  background:linear-gradient(135deg,#004A99,#39C4FF);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:20px;
}

.error-title{
  font-size:34px;
  font-weight:700;
  color:var(--heading);
  margin-bottom:10px;
}

.error-text{
  color:var(--body-text);
  font-size:16px;
  max-width:520px;
  margin:0 auto 30px;
}

.error-actions{
  display:flex;
  gap:15px;
  justify-content:center;
  flex-wrap:wrap;
}

/* buttons reuse */
.btn-primary{
  background:var(--primary);
  color:#fff;
  padding:14px 26px;
  border-radius:30px;
  font-weight:600;
  text-decoration:none;
  transition:.3s;
}

.btn-primary:hover{
  background:#003a7a;
}

.btn-outline{
  border:2px solid var(--primary);
  color:var(--primary);
  padding:12px 24px;
  border-radius:30px;
  font-weight:600;
  text-decoration:none;
  transition:.3s;
}

.btn-outline:hover{
  background:var(--primary);
  color:#fff;
}

/* responsive */
@media(max-width:768px){
  .error-code{ font-size:90px; }
  .error-title{ font-size:26px; }
  .error-404-section{ padding:130px 0; }
}
.footer-bottom-inner p{
  margin-bottom: 0px;
}
.case-listing{
  padding:90px 0;
  background:#f5f7fb;
}

.case-card{
  display:block;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  text-decoration:none;
  box-shadow:0 15px 40px rgba(0,0,0,0.06);
  transition:.35s;
  height:100%;
}

.case-card:hover{
  transform:translateY(-8px);
}

.case-thumb{
  height:240px;
  overflow:hidden;
  position: relative;
}

.case-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:.4s;
}

.case-card:hover img{
  transform:scale(1.05);
}

.case-content{
  padding:22px;
}

.case-tag{
  font-size:12px;
  color:var(--primary);
  font-weight:600;
}

.case-content h4{
  margin:8px 0;
  font-size:20px;
  font-weight:600;
  color:var(--heading);
}

.case-card .case-content p{
  color:var(--body-text);
  font-size:14px;
}
.pagination a{
  display:inline-block;
  padding:10px 16px;
  margin:0 4px;
  background:#fff;
  border-radius:6px;
  text-decoration:none;
  color:#0F1C2E;
}

.pagination a.active{
  background:var(--primary);
  color:#fff;
}
.case-list-banner{
  background:url("../img/case-study-banner.jpg") center/cover no-repeat;
}
.quote-section{
  padding:90px 0;
  background:#f5f7fb;
}

.quote-info h2{
  font-size:40px;
  font-weight:700;
  margin-bottom:15px;
  color:var(--heading);
}

.quote-info p{
  color:var(--body-text);
  margin-bottom:25px;
  max-width:420px;
}

.quote-points{
  list-style:none;
  padding:0;
  margin:0;
}

.quote-points li{
  margin-bottom:20px;
  position:relative;
  padding-left:32px;
  color:var(--heading);
  font-weight:500;
}
.quote-points li::before{
 font-family:"Font Awesome 6 Free";
  content:"\f00c"; /* check icon */
  font-weight:900;
  position:absolute;
  left:0;
  top:0;
  width:26px;
  height:26px;
  background:var(--primary);
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
}

/* form box */
.quote-form-box{
  background:#ffffff;
  padding:40px;
  border-radius:18px;
  box-shadow:0 15px 40px rgba(0,0,0,0.06);
}

/* inputs */
.quote-form-box input,
.quote-form-box select,
.quote-form-box textarea{
  width:100%;
  padding:14px 0;
  border:none;
  border-bottom:1px solid #d8e0ec;
  background:transparent;
  outline:none;
  font-size:15px;
}

/* button */
.btn-quote{
  background:var(--primary);
  color:#fff;
  border:none;
  padding:14px 30px;
  border-radius:30px;
  font-weight:600;
  transition:.3s;
}

.btn-quote:hover{
  background:#003a7a;
}

/* responsive */
@media(max-width:991px){
  .quote-info h2{
    font-size:32px;
  }
  .quote-form-box{
    padding:25px;
  }
}

.services-list-section{
  padding:80px 0;
  background:#f4f6f9;
}

/* CARD */
.service-card{
  background:#fff;
  border-radius:18px;
  padding:22px;
  text-align:center;
  height:100%;
  transition:.3s;
  box-shadow:0 10px 25px rgba(0,0,0,0.06);
}

.service-card:hover{
  transform:translateY(-6px);
}

/* IMAGE */
.service-img{
  position:relative;
  border-radius:12px;
  overflow:hidden;
  margin-bottom:22px;
}

.service-img img{
  width:100%;
  height:210px;
  object-fit:cover;
}

/* NUMBER BADGE */
.service-num{
  position:absolute;
  top:12px;
  right:12px;
  background:#ffffffcc;
  backdrop-filter: blur(6px);
  padding:8px 14px;
  border-radius:10px;
  font-weight:700;
  color:#ff7a00;
}

/* CONTENT */
.service-content h3{
  font-size:22px;
  font-weight:700;
  margin-bottom:10px;
  color:#0f1c2e;
}

.service-content p{
  color:#54657A;
  font-size:15px;
  margin-bottom:14px;
}

.service-link{
  color:#004A99;
  font-weight:600;
  text-decoration:none;
}

.navbar .dropdown > .nav-link{
  pointer-events:auto;
}


.navbar .dropdown-toggle::after{
  pointer-events:none;
}
/* hidden by default */
.mobile-quote-bar{
  position:fixed;
  bottom:-100px;
  left:0;
  width:100%;
  z-index:100;
  transition:all .35s ease;
}

/* button style */
.mobile-quote-btn{
  display:block;
  width:100%;
  text-align:center;
  background:var(--ternery);
  color:#fff;
  padding:16px 20px;
  font-weight:600;
  font-family:var(--fonthead);
  font-size:16px;
  text-decoration:none;
}

/* show when active */
.mobile-quote-bar.show{
  bottom:0;
}

/* ONLY MOBILE */
@media(min-width:992px){
  .mobile-quote-bar{
    display:none;
  }
}

@media(max-width:768px){

.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler:focus-visible {
  outline: none;
  box-shadow: none;
}
.header-wrapper .btn-primary{
  display: none;
}
.openSearchwr{
  display: none!important;
}
.dropdown-menu{
  background-color: #f1f8ff;
  border: none;
  max-width: 95%;
  margin-left: auto;
  margin-right: auto;
}
.hero-banner h2 {
    font-size: calc(2.3rem + 0.5vw);
}
.slide-content{
  top: 50%;
}
.stats-section{
  padding: 90px 0 40px 0px;
}
.services-section{
  padding: 40px 0;
}
.trusted-section{
      padding: 40px 0;
}
.why-box-left h2{
  font-size: 35px;
}
.case-section{
  padding: 40px 0;
}
.btn{
  font-size: 0.9rem;
}
.cta-btn{
  font-size: 0.9rem;
}
.clients-section{
  padding: 40px 0;
}
.section-head{
  flex-direction: column;
}
.clients-section .mb-5{
  margin-bottom: 1rem!important;
}
.footer-top {
    padding: 40px 0 40px;
}
.why-box{
  padding: 25px 20px;
}
.growth-section{
  padding: 40px 0;
}
.growth-card h3{
  font-size: 30px;
}
.vm-content{
  padding: 0px 20px;
}
.vision-mission-section{
  padding: 40px 0;
}
.vm-item:last-child{
  margin-bottom: 0px;
}
.case-listing{
  padding: 40px 0;
}
.case-bg img{
  object-position: right;
}
.case-overlay{
  background: unset;
  background-color: rgba(0, 74, 153, 0.9)!important;
}
.case-approach{
  padding: 40px 0;
}
.approach-list li{
  font-size: 1rem;
  font-weight: 600;
}
.design-highlights .mb-5{
  margin-bottom: 1rem!important;
}
.inner-desc{
  font-size: 16px;
}
.service-intro-section{
  padding: 40px 0;
}
.benefits-section{
  padding: 40px 0;
}
.why-choose-section{
  padding: 40px 0;
}
.faq-section{
  padding: 40px 0;
}
.why-pill .icon{
  min-width:40px;  
  min-height:40px;
  flex-shrink:0;
}
.blog-section{
  padding: 40px 0;
}
.contact-info{
  margin: 40px 0px;
}
.contact-card{
  padding: 20px;
}
.contact-main{
  padding: 40px 0;
}
.stat-bottom::after{
   top: -50px;
}
.stat-bottom::after{
   border-radius:200px 200px 0 0;
   border-bottom: none;
}
.why-box-left .highlight{
  font-size: 18px;
}
.btn-quote{
  font-size: 0.9rem;
}
.quote-section{
  padding: 40px 0;
}
.sidebar{
  margin-top: 20px;
}
.blog-detail{
  padding: 40px 0;
}
.blog-title-xl{
  font-size: 30px;
  margin-bottom: 10px;
  line-height: 1.3;
}
.blog-title-md{
  font-size: 25px;
  font-weight: 600;
  line-height: 1.1;
}
.design-highlights{
  padding: 40px 0;
}
.devtech-section{
  padding: 40px 0;
}
}
@media only screen and (min-width: 769px) and (max-width: 991px){
  .openSearchwr {
    display: none!important;
  }

.dropdown-menu{
  background-color: #f1f8ff;
  border: none;
  max-width: 95%;
  margin-left: auto;
  margin-right: auto;
}
.why-box-left{
  justify-content: flex-start;
}
.cta-section{
  padding: 40px 0;
}
.case-img img{
  height: 350px;
}
}

.blog-detail{padding:80px 0;}
.blog-meta{color:#7a8a9a;margin-bottom:15px;}
.blog-featured img{width:100%;border-radius:12px;margin:20px 0;}
.blog-image img{width:100%;border-radius:12px;margin:25px 0;}

.blog-list{padding-left:18px;}
.blog-list li{margin-bottom:8px;}

blockquote{
  background:#f4f7fb;
  padding:20px;
  border-left:4px solid var(--primary);
  margin:25px 0;
  border-radius:8px;
}

.blog-share{
  margin-top:30px;
  display:flex;
  align-items:center;
  gap:12px;
}

.sidebar .sidebar-box{
  background:#f6f8fb;
  padding:20px;
  border-radius:12px;
  margin-bottom:25px;
}

.blog-search{
  width:100%;
  padding:12px;
  border:1px solid #ddd;
  border-radius:8px;
}

.recent-post{
  display:flex;
  gap:10px;
  margin-bottom:20px;
}

.recent-post img{
  width:70px;
  border-radius:6px;
}
.re-post-cont a{
  font-weight: 600;
  font-size: 1.1rem;
}
.re-post-cont{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* floating case card */
.case-highlight-card{
  position:absolute;
  right:80px;
  bottom:70px;
  width:260px;
  padding:22px;
  border-radius:14px;

  background:rgba(255,255,255,0.06);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,0.15);
   animation:floatCard 4s ease-in-out infinite;
  box-shadow:0 20px 40px rgba(0,0,0,0.25);
  z-index:3;
}

.highlight-item{
  margin-bottom:14px;
}

.highlight-item:last-child{
  margin-bottom:0;
}

.highlight-item span{
  font-size:12px;
  color:#c7d3e0;
  display:block;
  margin-bottom:2px;
}

.highlight-item strong{
  color:#fff;
  font-size:16px;
  font-weight:600;
}

.highlight-item.result strong{
  color:#ff7a00;
  font-size:18px;
}


@keyframes floatCard{
  0%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
  100%{transform:translateY(0);}
}

@media(max-width:991px){

  .case-highlight-card{
    position:static;
    margin-top:25px;
    width:100%;
    background:rgba(255,255,255,0.08);
    animation: none;
  }

}
.blog-breadcrumb .current{
  font-weight: 600;
}
/* ================================
   MEGA MENU WRAPPER
================================ */

.mega-menu{
  position:static !important;
}

.mega-menu .dropdown-menu{
  width:100%;
  left:0;
  right:0;
  margin-top:5px;
  border:none;
  border-radius:10px;
  padding:35px 30px;
  box-shadow:0 25px 60px rgba(0,0,0,0.08);
  background:#ffffff;
}

/* grid */
.mega-menu-wrap .row{
  row-gap:25px;
}

/* column title */
.mega-title{
  font-size:18px;
  font-weight:700;
  margin-bottom:15px;
  margin-top: 15px;
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--primary);
  background-color: #e7f1ff;
  padding: 0.5rem;
}

/* icon */
.mega-title i{
  font-size:18px;
  color:var(--primary);
}
.mega-subgroup{
  width: 100%;
}
/* list */
.mega-list,
.mega-subgroup ul{
  list-style:none;
  padding:0;
  margin:0;
  display: flex;
  flex-wrap: wrap;
}

.mega-list li,
.mega-subgroup li{
  width: 50%!important;
  margin-bottom:8px;
}

.mega-list a,
.mega-subgroup a{
  color:#5b6b7a;
  text-decoration:none;
  font-size:15px;
  transition:.2s;
  display: block!important;
}

.mega-list a:hover,
.mega-subgroup a:hover{
  color:var(--primary);
  padding-left:6px;
  display: block!important;
}

/* subgroup title */
.mega-subtitle{
  font-weight:600;
  margin:15px 0 8px;
  color:#111;
}

/* reduce height by splitting */
.mega-col-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
}

/* =========================================
MEGA MENU HOVER DESKTOP
=========================================*/

@media(min-width:992px){

.navbar .dropdown-menu{
  display:block;
  opacity:0;
  visibility:hidden;
  transform:translateY(15px);
  transition:.25s;
}

.navbar .dropdown:hover > .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

}


/* =========================================
MOBILE MEGA MENU
=========================================*/
@media(max-width:700px){
  .mega-menu-wrap .row {
    row-gap: 0px;

}
.mega-title{
  font-size: 1rem;
  margin-top: 15px;
  margin-bottom: 0px!important;
}
.mega-block{
  margin-bottom: 0px!important;
}
}

@media(max-width:991px){
  .navbar{
    overflow-y: auto;
  }
  

/* keep inside container */
.navbar .dropdown-menu{
  position:relative !important;
  transform:none !important;
  width:100%;
  margin-top:10px;
  border:none;
  box-shadow:none;
  background:#f5f7fb;
  border-radius:16px;
  padding:14px;
}

/* hide lists */
.mega-list,
.mega-subgroup ul{
  display:none;
}

/* block spacing */
.mega-block{
  margin-bottom:10px;
}

/* main title */
.mega-title{
  background:#e9eef6;
  padding:14px 16px;
  border-radius:12px;
  font-weight:600;
  cursor:pointer;
  position:relative;
}

/* plus icon */
.mega-title::after{
  content:"+";
  position:absolute;
  right:16px;
  font-size:18px;
}

/* open main */
.mega-block.open .mega-title::after{
  content:"−";
}

.mega-block.open .mega-list{
  display:block;
  padding:12px 10px;
}

/* inner group */
.mega-subtitle{
  padding:10px 0;
  font-weight:600;
  cursor:pointer;
  position:relative;
}

.mega-subtitle::after{
  content:"+";
  position:absolute;
  right:0;
}

.mega-subgroup.open .mega-subtitle::after{
  content:"−";
}

.mega-subgroup.open ul{
  display:block;
  padding-left:12px;
}

/* spacing */
.mega-list li{
  padding:6px 0;
}

}

/* =========================================
SMOOTH ANIMATION
=========================================*/

.mega-list,
.mega-subgroup ul{
  animation:fadeDown .25s ease;
}

@keyframes fadeDown{
  from{
    opacity:0;
    transform:translateY(-6px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}
@media only screen and (max-width: 700px){
  .navbar{
    max-height: 100vh;
  }
  .header-wrapper{
     max-height: 100%;
  }
  .mega-list li, .mega-subgroup li{
    width: 100%!important;
  }
  .mega-menu-wrap .set-brd{
  border-right: none;
}
}
.mega-menu-wrap .set-brd{
  border-right: 1px solid #f5f5f5;
}
.mega-menu-wrap .set-brd:last-child{
  border-right: none;
}
@media(max-width:991px){

.mega-menu .dropdown-menu{
  display:none;
}

.mega-menu.show .dropdown-menu{
  display:block;
}

.mega-list,
.mega-subgroup ul{
  display:none;
}

.mega-block.open .mega-list{
  display:block;
}

.mega-subgroup.open ul{
  display:block;
}

.mega-title::after,
.mega-subtitle::after{
  content:"+";
  float:right;
}

.mega-block.open .mega-title::after,
.mega-subgroup.open .mega-subtitle::after{
  content:"−";
}
}
.services-filter-section{
padding:100px 0;
}

/* category menu */
.service-categories{
display:flex;
flex-direction:column;
gap:10px;
position:sticky;
top:120px;
}

.service-cat{
border:none;
background:#f5f7fb;
padding:12px 18px;
text-align:left;
border-radius:8px;
font-weight:600;
color:var(--heading);
transition:0.3s;
}

.service-cat.active{
background:var(--primary);
color:#fff;
}

.service-cat:hover{
background:var(--primary-light);
color:#fff;
}
.service-item{
transition:all .3s ease;
}
.service-items .service-card{
  padding: 13px;
}
/* mobile */
@media(max-width:991px){

.service-categories{
flex-direction:row;
overflow:auto;
margin-bottom:25px;
}

.service-cat{
white-space:nowrap;
}

}
#scroll-to-top {display:none;}