* {
	padding: 0;
	margin: 0 auto;
}

a, a:hover, a:focus {
    text-decoration: none;
    outline: none;
    border:0;
}
ul{list-style:none}

.btn.focus, .btn:focus {
    outline: 0;
    box-shadow: none;
}

:focus{
    text-decoration: none;
    outline: none;
    border:0;
}

img:focus {
    text-decoration: none;
    outline: none;
}

button:focus {
    outline: 1px dotted;
    outline: 0;
}

:root{--red:#E8000D;--dark:#0A0A0A;--dark2:#111111;--dark3:#1A1A1A;--gray:#2A2A2A;--light:#F0F0F0;--muted:#888;}

html, body {
  overflow-x: hidden !important;
}

/*@font-face {
    font-family: 'Altform';
    src: url('../fonts/Altform-Black.woff2') format('woff2'),
        url('../fonts/Altform-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}*/

@font-face {
    font-family: "Altform Black";
    src: url("../fonts/5c47a80c630e538ca5c07c36d564a849.eot");
    src: url("../fonts/5c47a80c630e538ca5c07c36d564a849.eot?#iefix")format("embedded-opentype"),
    url("../fonts/5c47a80c630e538ca5c07c36d564a849.woff2")format("woff2"),
    url("../fonts/5c47a80c630e538ca5c07c36d564a849.woff")format("woff"),
   
}

body {
font-family: 'Poppins', sans-serif;
color:#141414;
font-size: 16px;
font-weight:400;
line-height: 1.625;
overflow-x: hidden;
background:#f5f4eb;

}
.smooth-scroll-container {
  overflow-x: hidden;
  position: relative;
}
.mt-100{margin-top:100px}

h1,h2,h3{  font-family: 'Altform Black';}
.hero-title{font-size:143px;line-height: 130px;color:#0069b5}
.pd80{padding:80px 0;}
/*.heading{font-size:45px;font-weight: 700;margin-bottom:30px;line-height:70px;letter-spacing:1px;color:#0a0a0a}*/

.container{max-width:1280px}
.mt-100{margin-top:80px}

nav.navbar-expand-lg{z-index:9999999}
nav.navbar-expand-lg.navbar-light.fixed {/*background: #fff;box-shadow: 0 1px 6px rgba(0, 0, 0, .1607843137254902); transition: background 0.3s, box-shadow 0.3s;*/}
.navigation_black nav.navbar-expand-lg.navbar-light {background:#fff;box-shadow: 0 0 15px #0b0b0b12;}
.navigation_black nav.navbar-expand-lg.navbar-light .nav-link{color:#000}


@-webkit-keyframes slide-down{ 0%{opacity:0;
    -webkit-transform:translateY(-100%);
    transform:translateY(-100%)
    }
    100%{opacity:.9;
    -webkit-transform:translateY(0);
    transform:translateY(0)
        
    }}
    
    @keyframes slide-down{
        0%{opacity:0;
        -webkit-transform:translateY(-100%);
        transform:translateY(-100%)}
        100%{opacity:.9;
        -webkit-transform:translateY(0);
        transform:translateY(0)
            
}}
.navbar-brand{width:80px;margin:10px 0 10px 20px;}
.navbar-brand img{width:100%}
.navbar-expand-lg{width: 100%;top: 0;position: relative;
    z-index: 9999999;background:transparent;position: fixed;}
.main-nav {width: 65%;float: left;flex-wrap: wrap;}
.navbar-expand-lg .navbar-nav{margin-right:0;}
.navbar-expand-lg .nav-link{padding:0px;color:#0069b5;font-size: 15px;text-transform:capitalize;letter-spacing:1px;font-weight:500}
.navigation_black nav.navbar-expand-lg.navbar-light.fixed .nav-link{color:#0069b5;transition: all .7s ease-in-out;}
nav.navbar-expand-lg.navbar-light.fixed  .nav-link{color:#000}
nav.navbar-expand-lg.navbar-light.fixed .dropdown-menu .nav-link{color:#000}
.nav-item{margin-right:30px}

.nav-link:hover{color:#de3a25}
/*nav.navbar-expand-lg.navbar-light.fixed .nav-link:hover{color:#ffcd39}*/
.navbar-expand-lg .nav-link{position:relative}
.navbar-expand-lg .nav-item:hover .nav-link:after{width:100%}

ul.navbar-nav li { position: relative;}
.navbar-expand-lg .navbar-nav .dropdown-menu  {margin: 0;padding: 10px 20px;background: #fff;display: block;position: absolute;visibility: hidden;left:0px;top: 130%;opacity: 0;transition: 0.5s;border-radius:0;border:0;z-index: 99;min-width:315px;-webkit-box-shadow: 0px 12px 30px -2px rgba(0, 0, 0, 0.1);-moz-box-shadow: 0px 12px 30px -2px rgba(0, 0, 0, 0.1);-o-box-shadow: 0px 12px 30px -2px rgba(0, 0, 0, 0.1);box-shadow: 0px 12px 30px -2px rgba(0, 0, 0, 0.1);-webkit-transition: all 0.5s ease-in-out;}

 ul.navbar-nav li:hover .dropdown-menu  {opacity: 1;top: 100%;visibility: visible;} 
.dropdown-menu li a:hover {padding-left: 8px !important;}

.dropdown-menu li{margin-left:0} 
.dropdown-menu .nav-link{padding:10px 0;text-transform: uppercase;}
.dropdown-menu .nav-link {transition: all .8s ease-in-out;text-transform: capitalize;border-bottom: 1px solid #ccc;color:#000}

.company-overview p {text-align:justify}
.header-bg{display: flex;align-items: center;margin: 15px 0;}
.header-bg2{background: #e7e2d5;display: flex;align-items: center;border-radius: 10px;    width: 100%;}
a.hd-btn{width:155px;background:#0069b5;padding:22px 25px;color:#fff;margin-left:15px;border-radius:8px;font-size: 14px;text-align:center}
a.hd-btn:hover{background:#e7e2d5;color:#0069b5}
/*.video-section{height:600px;}*/
.banner-video {width: 100%;object-fit: cover;}
.bg-grey{background:#f6f6f6}
.bg-black{background:#000}
.pd100{padding:100px 0}
.hero-section{padding:100vh;padding:150px 0 }
.hero-switch{width:250px;}
.blu-bg{background:#0065b2}
.overview-title{font-size:70px;color:#fff;line-height:70px;position: relative;text-transform: uppercase;}
.overview-section span{font-size:15px;text-transform:uppercase;color:#fff;display:block;margin-bottom:10px;letter-spacing:1px}
.overview-section p{color:#fff;opacity: .8;font-size:16px;margin-bottom:0;max-width:800px;letter-spacing: 0.3px;}
.heading{font-size:50px;color:#363535;font-weight: 500;font-family: 'Poppins', sans-serif;}
.product-thumbnail{border-radius:15px;overflow:hidden}
/*.product-thumbnail img{height:420px;object-fit:cover;border-radius:15px}*/
.product-text h3{font-size:70px;color:#0065b2;line-height:70px;margin-bottom:50px;text-transform:uppercase}
.pl-70{padding-left:70px;}
.pr-70{padding-right:70px;}
.wire-line {opacity: 0.2; position: absolute;left: -23%;top: -35px;width: 946px;}
.wire-line2 {opacity: 0.2; position: absolute;right: -27%;top: -15px;width: 946px;}

.overview-section{position:relative;overflow: hidden;}
.svg-line,.svg-line2{margin: 0;}
.svg-line svg,.svg-line2 svg{width:100%;height:100%}

.product-sec{margin-top:100px}
.product-text .product-btn{margin-top:40px;display:inline-block;border: 1px solid #ccc;color: #464545;font-size: 9px;width: 60px;height: 60px;line-height: 60px;padding: 0;text-align: center;border-radius:5px;transition:all ease-in-out .5s}
.product-text .product-btn:hover{background:#0065b2;color:#fff;border: 1px solid #0065b2}
.product-btns{background: linear-gradient(45deg, #e75e22, #f38b1e);padding: 10px 30px;border-radius: 10px;color: #fff;display:inline-block}
.contact-banner{margin-top:70px}
.product-marge img{width:100%}
.stack-section,.product-section2{
  position:relative;
}

.stack-wrapper{
  position:relative;
  height:100vh;
    overflow: visible;

}
.product-marge{display:flex;align-items:center}
.stack-card,.product-marge{
  position:absolute;
  top:0;
  left:0;
  width:100%;
}

.card-inner{
  display:flex;
 /* align-items:center;*/
  justify-content:space-between;
  padding:60px;
  gap:0px;
  height: 100vh;
}

.left{
  width:50%;
  background:#0065b2;
  padding:80px;
  
}
.left-radius{
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    overflow: hidden;
}

.right-radius{
   border-top-right-radius: 20px;
    border-bottom-right-radius: 20px; 
    overflow: hidden;
}

.right{
  width:50%;
 
}

.left h2{font-size:45px;color:#fff;margin-bottom:20px}

.left p{color:#fff;opacity:.7}

.right img,.left img{
  width:100%;
height: calc(100vh + -120px);

    object-fit: cover;

}

.left .product-btn{margin-top:40px;display:inline-block;border: 1px solid #ccc;background:#fff;color: #000;font-size: 9px;width: 60px;height: 60px;line-height: 60px;padding: 0;text-align: center;border-radius:5px;transition:all ease-in-out .5s}
.left .product-btn:hover{background:#fff;color:#000;border: 1px solid #fff}
  .whychose-thumb{border: 1px solid #ccc;border-radius:15px;padding: 30px;margin-top:40px;height:calc(80% + 30px);transition: background-position 0.5s ease;}
     .whychose-thumb:hover{background:linear-gradient(45deg, #006bb7, #00aced)}
     .whychose-thumb:hover h5{border-bottom:1px solid #fff;color:#fff}
      .whychose-thumb:hover p{color:#fff}
    .whychose-thumb h5{margin:50px 0 20px;font-size:20px;color:#0068b4;border-bottom:1px solid #ccc;padding-bottom:15px}
    .icons img {opacity:.7}
    .whychose-thumb .icons{
            width: 70px;
    height: 70px;
     transition: all ease .5s;
    border-radius: 9px;
    line-height: 55px;
    text-align: center;
    margin: 0;
    padding: 5px;
    }
    
.whychose-thumb:hover .icons{background: #f0f5f7;}    
.banner-caption{
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
}

.hero-title{
opacity: 1;
  margin:0;
}

.para{opacity:1;    width: 250px;
    position: absolute;
    right:100px;
    /* top: 100px; */
    padding-top:100px;
}

.hero-switch{
  width:350px;
  margin-top:30px;
}

.hero-switch img{
  width:100%;
  display:block;
  transform-origin:center center;
}



#smooth-content {
  overflow: visible;
  width: 100%;
}

.spacer {
      height: 80px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #888;
      font-size: 14px;
      letter-spacing: 2px;
      text-transform: uppercase;
    }

    /* ── Banner wrapper ── */
    .banner-wrap {
      width: 100%;
      max-width: 1160px;
      position: relative;
      border-radius: 28px;
      overflow: visible;   /* person overflows upward */
      margin-bottom:80px;
    z-index: 9;
    }

    .banner {
      background:#0068b4;
      border-radius: 28px;
      min-height: 340px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      padding: 56px 64px;
      box-shadow: 0px 6px 19px 1px #f2efef4a;
    }

    /* Decorative concentric circles */
    .circles {
      position: absolute;
      right:0;
      top: 50%;
      transform: translateY(-50%);
      width: 520px;
      height: 520px;
      pointer-events: none;
    }
    .circles span {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      border: 1.5px solid rgba(255,255,255,0.10);
    }
    .circles span:nth-child(1) { width: 140px; height: 140px; }
    .circles span:nth-child(2) { width: 240px; height: 240px; }
    .circles span:nth-child(3) { width: 340px; height: 340px; }
    .circles span:nth-child(4) { width: 440px; height: 440px; }
    .circles span:nth-child(5) { width: 540px; height: 540px; }

    /* ── Text content ── */
    .content {
      position: relative;
      z-index: 2;
      max-width: 440px;
      margin: 0;
    }

    .content h2 {
    font-family: 'Poppins', sans-serif;
      font-size: clamp(32px, 4vw, 50px);
      color: #ffffff;
      line-height: 1.15;
      margin-bottom: 20px;
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.7s ease, transform 0.7s ease;
    }

    .content p {
      font-size: 16px;
      color: rgba(255,255,255,0.80);
      line-height: 1.65;
      margin-bottom: 36px;
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.7s ease 0.15s, transform 0.7s ease 0.15s;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background:#de3a25;
      color: #fff;
      font-family: 'Sora', sans-serif;
      font-weight: 700;
      font-size: 15px;
      padding: 14px 30px;
      border-radius: 50px;
      border: none;
      cursor: pointer;
      text-decoration: none;
      letter-spacing: 0.02em;
      opacity: 0;
      transform: translateY(20px);
      transition:
        opacity 0.7s ease 0.3s,
        transform 0.7s ease 0.3s,
        background 0.25s,
        box-shadow 0.25s;
      box-shadow: 0 4px 20px rgba(168,230,61,0.25);
    }
    .btn:hover {
        background: #e75e22;
    box-shadow: 0 6px 28px rgb(249 199 143);
    color:#fff;

    }
    .btn svg {
      transition: transform 0.25s;
    }
    .btn:hover svg {
      transform: translateX(4px);
    }

    /* Visible state after scroll trigger */
    .banner.visible .content h2,
    .banner.visible .content p,
    .banner.visible .btn {
      opacity: 1;
      transform: translateY(0);
    }

    /* ── Person image ── */
    .person-wrap {
      position: absolute;
      right: 40px;
      bottom: 0px;
      width:600px;
      z-index: 3;
      pointer-events: none;
      /* Start hidden for entrance animation */
      opacity: 0;
      transform: translateY(40px);
      transition: opacity 0.8s ease 0.2s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
    }

    .banner.visible .person-wrap {
      opacity: 1;
      transform: translateY(0px);
    }

    .person-wrap img {
      width: 100%;
      height: auto;
      display: block;
      /* Continuous float animation after entrance */
    }

    /* Float keyframe */
    @keyframes float {
      0%   { transform: translateY(0px); }
      50%  { transform: translateY(-18px); }
      100% { transform: translateY(0px); }
    }

    /* Once visible, also float */
    .banner.visible .person-wrap img {
      animation: float 4s ease-in-out infinite;
    }

    /* Scroll hint */
    .scroll-hint {
      color: #aaa;
      font-size: 13px;
      letter-spacing: 1px;
      text-align: center;
      animation: bounce 1.8s ease-in-out infinite;
    }
    @keyframes bounce {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(6px); }
    }

    /* ── Responsive ── */
    @media (max-width: 720px) {
      .banner { padding: 44px 32px; min-height: auto; padding-bottom: 260px; }
      .person-wrap { width: 260px; right: 50%; transform: translateX(50%) translateY(40px); }
      .banner.visible .person-wrap { transform: translateX(50%) translateY(0); }
      .circles { right: 50%; transform: translate(50%, -50%); }
    }
    


.overview-section2{
  height:130vh;          /* MUST for sticky */
  position:relative;
}

.mission-sticky{
  height:100vh;          /* MUST */
  display:flex;
  align-items:center;
  justify-content:center;
}

.mission-text{
  

  -webkit-mask-image: linear-gradient(to right, white 0%, transparent 0%);
  mask-image: linear-gradient(to right, white 0%, transparent 0%);
}    
.form-control {display: block;width: 100%;color: #000;height: auto !important;padding: 10px;border-radius:5px;border: none;font-size: 14px;border: 1px solid #ced4da;resize: none;background:#fff;}
.form-group{margin-bottom:20px}
.form-secion{margin-top:80px}
.contact-box{padding-left:100px}
.address-box strong{color:#0069b5;display:block;margin-bottom: 10px;}
.address-box a{color:#000}
.add-one{border: 1px solid #ccc;padding: 40px;border-radius: 15px;text-align: center;margin-top:80px;height: calc(60% + 30px);}
.add-one strong{color:#0069b5;font-size:20px;margin-bottom:25px;display:block}
.add-one:hover{background:linear-gradient(45deg, #006bb7, #00aced)}
.add-one:hover p {color:#fff;}
.add-one:hover strong{color:#fff}
.contact-top h1 {font-size: 70px;color: #0065b2;line-height: 70px;margin-bottom: 50px;text-transform: uppercase;}
.contact-banner {margin-top: 70px;padding: 300px 0;background-attachment: fixed!important;background-position: center!important;background-size: cover!important;}
.headings{font-size:143px;color:#0069b5;text-transform:uppercase}
.heading3 {font-size:70px;color:#0065b2;line-height:70px;margin-bottom:50px;text-transform:uppercase}
.about-top{display:flex;margin-top:50px}
.about-top h2{font-size:16px;font-weight:500;width:300px;margin:0;font-family: 'Poppins', sans-serif;text-transform: uppercase;}
.about-para{width:700px;margin-right:0}
 .about-slider{margin-top:100px;} 
.vission-para{padding-left:100px}
.number-part{display:flex;margin-top:100px}
.number-thumb span{font-family: 'Altform Black';font-size:60px;color:#0069b5;}
.number-thumb p{font-size: 20px;line-height: 25px;padding-left:20px;margin-left: 20px;border-left: 1px solid #ccc;margin-bottom: 0;color:#5f5d5d}
.number-thumb{display:flex;align-items:center}
.sub-title{font-size:15px;text-transform:uppercase;color:#000;display:block;margin-bottom:10px;letter-spacing:1px}
.team-thumb h5{margin-top:20px;color:#303030}
.team-thumb p{color:#706f6f}
.certi-thumb h5{margin-top:20px;color:#303030;text-align:center}
.key-thumb{margin:20px 0}
.key-thumb h5{font-size:20px;font-weight:600;color:#0069b5;margin-bottom:15px}
.key-icon{margin-bottom:25px}
.table td{font-size:14px;padding:10px}
.certificate-box{display:flex;align-items:center}
.certificate{width: 18%;height: 150px;align-items: center;display: flex;}
.certificate img{width:100%}
.certificate{
    background: white;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: all 0.3s;
  
}

.certificate:hover{
        transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
}

.certi-thumb{border:2px solid #0065b2}

.certi-thumb{margin:0 8px}

.clients-logo{background: #fff;border-radius: 10px;padding: 15px;box-shadow:0px 1px 24.5px -6px rgba(0, 0, 0, .08);transition:all 0.3s ease;margin-top:20px}
 .clients-logo:hover {transform: translateY(-8px);box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);}
 
.breadcrumb {
max-width:1280px;
margin: 0 auto;
font-size: 0.9rem;
color:#6b7280;
}

.breadcrumb a {
color:#0069b5;
text-decoration: none;
margin:0;
padding:0 5px;
}

.breadcrumb a:hover {
text-decoration: underline;
}
.breadcrumb strong{margin:0 0px 0 10px}    
.breadcrumb-section {
background:#e2e2e2;
padding: 1rem 2rem;
}



.page-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 2rem;
color: var(--text-dark);
position: relative;
padding-bottom: 1rem;
}

.page-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 4px;
background: linear-gradient(45deg, #0068b4, #58b4f7);
border-radius: 2px;
}

/* Product Grid */
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}

.product-card {
background:#fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
text-align: center;
}

.brush-gradient {
  background: radial-gradient(
    circle at center,
    #f2f2f2 0%,
    #e6e6e6 30%,
    #cccccc 60%,
    #b3b3b3 80%,
    #9e9e9e 100%
  );
}

.product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

  .product-thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

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

        .product-badge {
            position: absolute;
            top: 1rem;
            right: 1rem;
            background: var(--secondary);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
        }

        .product-content {
            padding: 1.5rem;
        }

        .product-card h3 {
            font-size:18px;
            margin-bottom: 1rem;
            color:#000;
            font-family: 'Poppins', sans-serif;
        }

        .product-features {
            list-style: none;
            margin-bottom: 1.5rem;
        }

        .product-features li {
            padding: 0.5rem 0;
            color: var(--text-light);
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }


        .explore-btn {
            display: inline-block;
            padding:7px 15px;
            background:linear-gradient(45deg, #0068b4, #58b4f7);
            color: white;
            text-decoration: none;
            border-radius: 8px;
            transition: all 0.3s;
          font-size: 13px;
    letter-spacing: 1px
        }

        .explore-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(30, 64, 175, 0.3);
            color:#fff;
        }
        
.m-0{margin:0}

.sidebar-menu{margin:0;padding:0}
.sidebar{padding-right:40px}

.sidebar-menu li a{
font-size: 14px;
color: #000;
padding: 8px 0;
display: block;
transition: all 0.3s;
opacity:.6;
}

.sidebar-menu li a:hover{transform: translateX(5px);color:#0069b5;opacity:1;}
.sidebar-menu li a.active{color:#0069b5;opacity:1;font-weight:600}
.sidebar h5{border-bottom: 2px solid #0069b5;padding-bottom: 10px;margin-bottom: 30px;}
.list{list-style:disc;padding-left:20px}
.list li{margin-top:8px}

.middle-text{font-size:17px;margin-bottom:30px}
.table-sec img{border:1px solid #ccc}

.table td, .table td ul li{font-size:14px}
.table td ul{list-style:disc;margin:0}
.variant-card{background:#2a2a2b;border:1px solid rgba(255,255,255,0.05);padding:2.5rem 2rem;position:relative;overflow:hidden;transition:border-color .3s}
.variant-card::before{content:'';position:absolute;left:0;top:0;width:3px;height:0;background:#0069b5;transition:height .3s}
.variant-card:hover{border-color:rgb(0 105 181)}.variant-card:hover::before{height:100%}
.variant-length{font-size:3.5rem;color:#0069b5;line-height:1;letter-spacing:2px}
.variant-unit{font-size:1rem;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:#a7a6a6;margin-bottom:1rem}
.variant-dims{font-size:0.8rem;color:#a7a6a6;letter-spacing:1px;margin-bottom:1.5rem;font-weight:300}
.variant-badge{display:inline-block;background:rgb(0 105 181 / 11%);border:1px solid rgb(0 105 181 / 16%);padding:4px 12px;font-size:0.65rem;letter-spacing:2px;text-transform:uppercase;color:#0069b5}
.variant-tape-vis{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);opacity:0.15;transition:opacity .3s}
.variant-card:hover .variant-tape-vis{opacity:0.35}
.colours-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--gray);border:1px solid var(--gray)}
.colour-card{background:var(--dark);padding:2rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:1.2rem;cursor:default;transition:background .25s;position:relative;overflow:hidden;margin: 0;}
.colour-card:hover{background:var(--dark3)}
.colour-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;transition:opacity .25s}
.colour-card:hover::after{opacity:1}
.colour-dot{width:64px;height:64px;border-radius:50%;border:3px solid rgba(255,255,255,0.08);position:relative;transition:transform .3s,box-shadow .3s}
.colour-card:hover .colour-dot{transform:scale(1.12)}
.colour-dot::after{content:'';position:absolute;inset:6px;border-radius:50%;background:rgba(255,255,255,0.08)}
.colour-name{font-family:'Barlow Condensed',sans-serif;font-size:0.9rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--light)}
.c-white{background:#e8e8e8;box-shadow:0 0 20px rgba(232,232,232,0.2)}
.c-yellow{background:#f5c518;box-shadow:0 0 20px rgba(245,197,24,0.3)}
.c-green{background:#2ea84e;box-shadow:0 0 20px rgba(46,168,78,0.3)}
.c-red{background:#E8000D;box-shadow:0 0 20px rgba(232,0,13,0.3)}
.c-blue{background:#1a6bdc;box-shadow:0 0 20px rgba(26,107,220,0.3)}
.c-black{background:#1a1a1a;border:3px solid #333;box-shadow:0 0 20px rgba(0,0,0,0.5)}
.colour-card:hover .c-white{box-shadow:0 0 30px rgba(232,232,232,0.5)}
.colour-card:hover .c-yellow{box-shadow:0 0 30px rgba(245,197,24,0.6)}
.colour-card:hover .c-green{box-shadow:0 0 30px rgba(46,168,78,0.6)}
.colour-card:hover .c-red{box-shadow:0 0 30px rgba(232,0,13,0.7)}
.colour-card:hover .c-blue{box-shadow:0 0 30px rgba(26,107,220,0.6)}
.colour-card:hover .c-black{box-shadow:0 0 30px rgba(80,80,80,0.5)}
.specs-table{width:100%;border-collapse:collapse}
.specs-table tr{border-bottom:1px solid rgb(36 36 36 / 13%)}
.specs-table tr:last-child{border-bottom:none}
.specs-table td{padding:1rem 1.2rem;font-size:0.88rem}
.specs-table td:first-child{color:#888;font-size:0.75rem;letter-spacing:1px;text-transform:uppercase;width:42%}
.specs-table td:last-child{color:#767575;font-weight:500}
.specs-table tr:nth-child(odd) td{background:rgb(208 206 206 / 18%)}
.specs-table tr:hover td{background:rgb(3 107 183 / 14%)}
.specs-table tr:hover td:first-child{color:#0069b5}
 .variants2{background:#0A0A0A}
.variants-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--gray);border:1px solid var(--gray)}
.variant2 .variant-card{background:#0A0A0A;padding:2rem 1.2rem;display:flex;flex-direction:column;align-items:center;gap:1rem;cursor:pointer;transition:background .25s;position:relative;margin:0}
.variant2 .variant-card:hover{background:#1A1A1A;border:0}
.variant2 .variant-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:#0069b5;transform:scaleX(0);transition:transform .25s;width: auto;}
.variant2 .variant-card:hover::before{transform:scaleX(1)}
.variant2 .variant-icon{width:56px;height:56px}
.variant2 .variant-icon svg{width:100%;height:100%}
.variant2 .variant-name{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--light);text-align:center}
.applications{background:var(--dark)}
.app-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem}
.app-card{background:var(--dark3);border:1px solid rgba(255,255,255,0.05);padding:2.5rem 1.5rem;display:flex;flex-direction:column;align-items:center;gap:1.2rem;transition:all .3s}
.app-card:hover{border-color:rgba(232,0,13,0.4);transform:translateY(-4px)}
.app-icon{width:52px;height:52px}
.app-icon svg{width:100%;height:100%}
.app-name{font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--light);text-align:center}

:root {
    --blue: #0065b2;
    --blue-dark: #004d8a;
    --blue-light: #e6f0fa;
    --blue-mid: #cce0f4;
    --accent: #f0a500;
    --bg: #f4f7fb;
    --white: #ffffff;
    --text: #1a2740;
    --muted: #6b7f99;
    --border: #dce6f0;
  }
    /* FEATURES */
  .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .feature-item { background: var(--white); border: 1px solid var(--border); border-radius: 12px; padding: 36px 28px; position: relative; overflow: hidden; transition: all 0.3s; }
  .feature-item:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,101,178,0.12); border-color: var(--blue-mid); }
  .feature-item::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--blue); transform: scaleX(0); transition: transform 0.3s; border-radius: 12px 12px 0 0; }
  .feature-item:hover::after { transform: scaleX(1); }
  .feature-num { position: absolute; top: 40px; right: 18px; font-weight: 700; font-size: 40px; line-height: 1;  transition: color 0.3s;color: var(--blue-mid);  }
  .feature-item:hover .feature-num { color: var(--blue-light);}
  .feature-icon { width: 50px; height: 50px; background: #e6f0fa; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; transition: background 0.3s;margin-left:0; }
  .feature-item:hover .feature-icon { background: var(--blue); }
  .feature-icon svg { width: 23px; height: 23px; stroke: var(--blue); fill: none; stroke-width: 1.6; transition: stroke 0.3s; }
  .feature-item:hover .feature-icon svg { stroke: #fff; }
  .feature-name {  font-weight: 500; font-size: 18px;color: var(--text); margin-bottom: 10px; letter-spacing: 0.5px; }
  .feature-desc { font-size: 14px; line-height: 1.75; color: var(--muted); }
  .career-form span.file-name {
  font-size: 12px;
  display: flex;
  margin: 0;
  margin-left: 10px;
}
.career-form .btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  opacity: 0;
  outline: 0;
  background: #f46c21 !important;
  color: #fff !important;
  cursor: inherit;
  display: block
}


.btn-file {
  cursor: pointer;
  padding-left: 0;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 14px;
}
.btn-file i {
  margin-right: 10px !important;
  color: #000;
  border: 1px solid #000;
  font-size: 15px;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0
}

.form-btn{background: #0069b5;
    color: #fff;
    padding: 10px 30px;
    border-radius: 10px;
    outline: 0;
    border: 0;
    font-size: 15px}
    
.video-md{margin-bottom:70px}    

.footer{background:linear-gradient(0deg, #0068b4, #58b4f7);padding:60px 0 0;position:relative}
.footer:after{content:'';position:absolute;top:0;left:0;width:400px;height:100%;background:linear-gradient(0deg, #0068b4, #42a6ef)}
.ft-logo,.ft-disc{position: relative;z-index: 9;}
.ft-disc{margin-top:30px;}
.ft-middle{border-top: 1px solid #ffffff4a;padding:50px 0 ;color: #fff;}
.ft-middle,.copy-right{margin-left:80px}
.ft-inner{color:#df4635}
.ft-disc p{color:#fff;margin-bottom:0;font-size:14px}
.ft-inner h5{color:#fff;font-size:20px;margin-bottom:20px}
.footer .ft-inner ul{margin:0;padding:0}
.footer .ft-inner ul li a {font-size: 14px;margin-bottom: 10px;display: inline-block;transition: all .4s ease-in-out;position:relative;}
.footer p {font-size:15px}
.footer .footer-grid ul li a:hover:after{width:100%}
.footer ul li a, .footer p {color:#fff;}
.ft-add a{color:#fff;margin-bottom:10px;display:inline-block}
.copy-right{border-top: 1px solid #ffffff4a;padding-top:20px}
.social-icon{margin:0}
.social-icon a{width: 30px;height: 30px;display:inline-block;border:1px solid #e9ebed;border-radius: 100%;text-align: center;line-height: 30px;border: 1px solid #e9ebed;color: #e9ebed;margin-left:5px}
.social-icon .fa svg {fill: #e9ebed;}
.mb-dw{display:none}
.mt-48{margin-top:48px}
.contact-section{margin-top:100px}

.sidebar span{display:none}
.sidebar h5{display:flex}
  .sidebar {
    position: relative;
}

.sidebar.fixed {
    position: fixed;
    top: 50px; /* GSAP jaisa offset */
    width: 250px;
}

.sidebar.stop {
    position: absolute;
    bottom: 0;
    top: auto;
}

#menuIcon {font-size:25px}

.hero-mobile{display:none}

@media(max-width:991px){
    button.navbar-toggler {width:50px;padding:0px;border-radius: 0;margin-left: auto;margin-right: 0;float: right;height: 61px;}
    .navbar-light .navbar-toggler-icon {background-image: url('../images/humberger.svg');width: 30px;}
.navbar-light .navbar-toggler-icon.cross {background-image: url(../images/close.svg)!important;width:40px;background-position: center !important;}
.navbar-expand-lg .navbar-nav{padding:20px 30px 30px}
.navbar-expand-lg .nav-link{padding:10px 0 10px}
.nav-item{margin:0}
.header-bg2 {display:inline-block;}
.navbar-brand{width:80px;display:inline-block;}
.sidebar{padding-right:0}
.mb-dws{display:none}
.mb-dw{display:inline-block;float:right;margin-right: 15px;border-radius: 5px;margin-top: 10px;}
a.hd-btn {
    width: 120px;
    background: #0069b5;
    padding: 10px 16px;
    color: #fff;
    margin-left: 15px;
    border-radius: 5px;
}
    .container {max-width:95%;}
    .headings,.heading3,.contact-top h1 {font-size:40px;line-height:50px;margin-bottom:20px;margin-top:0!important}
    .about-top{display:inline-block}
    .about-para{width:100%}
    .about-top{margin-top:20px}
    .about-top h2{font-size:22px;margin-bottom:20px}
    .vission-para{padding-left:0;margin-top:30px}
    .number-thumb span{font-size:28px}
    .number-thumb p{font-size:18px}
    .number-part{margin-top:50px}
    
    .pd80,.pd100{padding:60px 0}
     .about-slider{margin-top:50px;} 
     .footer:after{display:none}
     .ft-middle, .copy-right { margin-left: 0;}
     .ft-middle{margin-top:40px}
     .client-section .client-logo-item{width:25%}
     .clients-logo{padding:3px}
     .video-md{margin-bottom:10px}
     .ft-disc {margin-top:0px;width: 80%;display: inline-block;padding-left: 30px;}
     .ft-logo{width: 80px;display: inline-block;vertical-align:top}
     .contact-top{margin-top:80px}
     .contact-banner{padding:150px 0}
     .mt-100 .contact-top{margin-top:0px}
     .expand-title{color:#fff!important;font-size:18px!important}
     .expand-card, .expand-card.active {
        flex: unset;
        height: auto;
    }
    
    .switch-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    max-width: 390px;
}

.mt-48{margin-top:0px}
.contact-sec{margin-top:0}
.sidebar-menu {
        display: none;
    }

.sidebar-menu.active {
    display: block;
}

/* Toggle style */
.menu-toggle {
    cursor: pointer;
    background:#0069b5;
    color: #fff;
    padding: 12px;
    margin: 0;
}
.sidebar span{display:inline-block;margin-right:0}
.sidebar.stop{position:relative}
.para{display:none}
.overview-title{font-size:50px;line-height:60px}
.wire-line,.wire-line2{display:none}
.left{padding:30px}
.whychose-thumb {
    border: 1px solid #ccc;
    border-radius: 15px;
    padding: 20px;
    margin-top: 20px;
    
}

.whychose-thumb h5 {margin: 20px 0 20px}
.person-wrap {
    position: absolute;
    right: 40px;
    bottom: 0px;
    width: 420px;
}

}

@media(max-width:560px){
    .contact-box {
    padding-left: 0;
    margin-top: 30px;
}
.add-one {
    border: 1px solid #ccc;
    padding: 25px;
    border-radius: 15px;
    text-align: center;
    margin-top: 30px;
    height: auto;

}
.ft-disc {
    margin-top: 0px;
    width: 69%;
}

.ft-inner{margin-top:30px;padding-top: 0;}

.inner-banner img{height:210px;object-fit:cover}
.hero-title {
    font-size: 40px;
    line-height: 50px;
}
.hero-switch {width: 250px;}
.card-inner{display:inline-block;padding:10px 20px}
.left,.right{width:100%}
.mission-sticky>div{width:100%}
.overview-title {font-size: 35px;line-height:50px;mask-image: inherit!important;}
.right img, .left img{height:auto}
.banner-wrap {width: 90%;}
.person-wrap {
    position: absolute;
    right: 0;
    bottom: 0px;
    width: 100%;
}

 .hero-title{display:none}
.hero-mobile{display:block;padding:160px 0 100px}
 .hero-titles {font-size: 40px;line-height: 50px;color: #0069b5;font-family: 'Altform Black';text-transform:uppercase;margin-bottom:10px;display:block}
 .hero-section{display:none}
 .stack-section,.stack-wrapper{height:auto!important;max-height:inherit!important;}
 .stack-section{transform:none !important;}
 .stack-card, .product-marge {position: relative!important;top: 0;left: 0!important;width: 100%;right: 0!important;}

.revers-sec {display: flex!important;flex-direction:column-reverse;height:auto!important;border-radius: 15px;overflow: hidden;}
.right-radius2 {border-top-right-radius: 20px;border-bottom-right-radius: 0;border-bottom-left-radius: 0;border-top-left-radius: 20px;}
.left-radius1{border-radius:0;border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;border-top-left-radius: 0px!important;}
 
   .left h2{font-size: 30px;}
     .stack-card,.mission-sticky {
    transform: none !important;
  }

.video-section{margin-top:60px}
.banner.visible .person-wrap{transform: translateY(0px)!important;}
.overview-section2 {height: auto;}
.overview-section2 .pin-spacer,.range-sec .pin-spacer,#oci-journey .pin-spacer{padding:0!important;height: auto!important;}
.mission-sticky,.card-inner{height: auto!important;}
#oci-journey{display: inline-block!important;}
#oci-left{ transform: none !important;height: auto!important;}
.number-part {display: inline-block;}
.number-thumb {
    display: inline-block;
    align-items: center;
    width: 100%;
    justify-content: center;
    text-align: center;
}
    .number-thumb p {
        font-size: 18px;
        border: 0;
        border-bottom: 1px solid #ccc;
        margin: 15px 0;
        padding-bottom: 15px;
    }
.number-thumb p br{display:none;padding-left: 0;}  
.client-section .col-md-2{width:50%}
.digital{text-align: center;margin: auto;display: block;}
#oci-right {margin-left: 0;padding: 36px 18px 0px;}
.colours-grid {grid-template-columns: repeat(2, 3fr);}
.app-grid,.variants-grid {grid-template-columns: repeat(2, 1fr);}
.copy-right {margin-left:inherit;text-align:center;}
.copy-right p{text-align:center}
}