html,body{overflow-x:hidden;max-width:100%}
   a:hover{text-decoration:none;color:#57cbff}
   a:focus,button:focus,input{outline:0!important;text-decoration:none}
   ul{margin:0!important;padding:0!important;list-style:none}

   a{text-decoration:none!important;}
   section{position:relative;padding:50px 0}
   strong{color:#050505}
   .form-select:focus{box-shadow:none;border:1px solid #ccc}

   /* =========================================================
      THEME TOKENS
      ========================================================= */
     :root{
       --color-bg:            #060613;
       --color-bg-alt:        #0d0d24;
       --color-primary:       #ff7a1a;   /* orange accent (logo/badge) */
       --color-primary-dark:  #e2670f;
       --color-secondary:     #106AF7;   /* blue accent (buttons) */
       --color-white:         #fff;   /* blue accent (buttons) */
       --color-secondary-dark:#0f83d1;
       --color-navy:          #1c1580;/* blue dark */
       --color-black:         #000000;
       --color-whatsapp:      #25d366;
       --color-text:          #f5f6fa;
       --color-text-muted:    #b6b8c9;
       --color-border:        rgba(255,255,255,.12);
       --font-heading:'Sora', sans-serif;
       --font-body:'Sora', sans-serif;
     }

   *{box-sizing:border-box}
   body{background:var(--color-bg);font-family:var(--font-body)!important;font-size:16px!important}
   a{text-decoration:none}
   .common-btn:hover{color:#fff;background-color:#000;border-color:#000}
   .common-btn{padding:13px 20px}
   .common-btn{ border: none; padding:8px 24px;display:inline-flex;align-items:center;color:#fff;font-size:15px;font-weight:500;overflow:hidden;background:var(--color-secondary);border-radius:50px;transition:all .3s ease-in-out;position:relative;justify-content:center;z-index:1}
   .common-btn:hover:after{height:450%;transition:all 1s ease 0s;background:#000}
   .common-btn:after{content:"";position:absolute;height:0%;left:50%;top:50%;width:150%;z-index:-1;transition:all .35s ease 0s;background:#fff;transform:translateX(-50%) translateY(-50%) rotate(-25deg)}
   .common-btn i.bi{margin-left:10px}


   /* =========================================================
      TOP CONTACT BAR
      ========================================================= */

   .topbar-link{color:var(--color-text);font-size:14px;display:flex;align-items:center;gap:.4rem}
   .topbar-link:hover{color:var(--color-text-muted)}
   .topbar-link.whatsapp i{color:var(--color-whatsapp)}
   .topbar-link.mail i,.topbar-link.phone i{color:var(--color-text);background:var(--color-primary);width:27px;height:27px;display:flex;align-items:center;justify-content:center;border-radius:50px}
     
   /* =========================================================
      MAIN NAVBAR
      ========================================================= */

   .main-nav{background:var(--color-bg);padding:1rem 0}
   .logo-mark{width:42px;height:42px;border-radius:10px;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:700;color:#fff;font-size:1.4rem;flex-shrink:0}
   .logo-text{font-family:var(--font-heading);font-weight:700;font-size:1.25rem;color:var(--color-text);line-height:1.1;display:flex;flex-direction:column}
   .logo-text small{font-size:.55rem;letter-spacing:.18em;color:var(--color-primary);font-weight:600}
   .nav-link{color:var(--color-text)!important;font-weight:500;margin:0 .5rem;position:relative}
   .nav-link.active{color:var(--color-primary)!important}
   .nav-link.active::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--color-primary)}
   .dropdown-menu{background:var(--color-bg-alt);border:1px solid var(--color-border);--bs-dropdown-link-color:var(--color-text);--bs-dropdown-link-hover-color:#fff;--bs-dropdown-link-hover-bg:var(--color-secondary)}
   .navbar-toggler{border:none;color:var(--color-text);font-size:1.6rem;padding:0}
   .navbar-toggler:focus{box-shadow:none}
   .offcanvas{background:#000!important;color:var(--color-text);width:300px}
   .offcanvas .nav-link{padding:.6rem 0}
   .offcanvas .dropdown-menu{position:absolute;float:none;margin-top:.25rem}
   .navbar-toggler{color:#fff!important}
   .btn-brand{display:inline-flex;align-items:center;gap:.5rem;background:var(--color-secondary);color:#fff;padding:.6rem 1.4rem;border-radius:2rem;font-weight:600;font-size:.95rem;border:none;transition:background .25s ease,transform .25s ease}
   .btn-brand:hover{background:var(--color-secondary-dark);color:#fff;transform:translateY(-2px)}
   .btn-brand-outline{background:0 0;border:1px solid var(--color-secondary);color:var(--color-secondary)}
   .btn-brand-outline:hover{background:var(--color-secondary);color:#fff}

     
   /* =========================================================
      HERO
      ========================================================= */

   #Bannerslider.owl-carousel{display:block;min-height:100vh;overflow:hidden}
   #Bannerslider.owl-carousel:not(.owl-loaded)>div:not(:first-child){display:none}
   #Bannerslider.owl-carousel:not(.owl-loaded)>div:first-child{height:100vh}
   #Bannerslider-section #Bannerslider .owl-dots{justify-content:center;position:absolute;display:flex;right:-75px;flex-flow:column;top:0;bottom:0}
   #Bannerslider .owl-item img{border-radius:40px 0 40px 0;margin:auto;width:100%;box-shadow:0 0 35px rgb(0 0 0 / 40%);height:500px;object-fit:cover}
   #Bannerslider .owl-item video{border-radius:40px 0 40px 0}
   #Bannerslider .owl-item{padding:0}
   #Bannerslider .p-05{padding-left:84px}
   .sport-txt{padding-left:28px}
   #Bannerslider-section #Bannerslider .owl-dots .owl-dot.active{margin-right:20px}
   #Bannerslider-section #Bannerslider .owl-dots .owl-dot{margin:0 0 7px 0}
   #Bannerslider-section .heading-bg::before{z-index:1}
   .owl-item.active .slide-tex_2{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}
   .owl-item.active .slide-tex_2{-webkit-animation-duration:1s;animation-duration:1.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
   .owl-item.active .display-1{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}
   .owl-item.active .display-1{-webkit-animation-duration:1s;animation-duration:1.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
   .owl-item.active .silde-text{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}
   .owl-item.active .silde-text{-webkit-animation-duration:1s;animation-duration:1.2s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
   .bbox{position:absolute;bottom:6rem;z-index:1;left:0}

   #Bannerslider .bannerNrml{height:100vh;color:var(--white-color);background-repeat:no-repeat;background-size:cover;background-position:center;align-items:center;display:flex}
   #Bannerslider .owl-item{-webkit-backface-visibility:hidden;backface-visibility:hidden}
   #Bannerslider .owl-item{opacity:1}
   #Bannerslider .owl-dots{display:flex;width:100%;justify-content:center;position:absolute;bottom:1rem}
   #Bannerslider .owl-dot button span{background:#fff;border:none;padding:0;cursor:pointer;margin:0 10px;width:15px;height:15px;color:#000;display:flex;align-items:center;justify-content:center}
   #Bannerslider .owl-dots .owl-dot button:focus{outline:0}
   #Bannerslider .owl-dots button.owl-dot.active span{border-radius:8px;width:8px;height:8px;background:var(--color-primary)}
   #Bannerslider .owl-dots .owl-dot span{background-color:var(--color-text-muted);width:8px;transition:.5s;border-radius:8px;height:8px;margin:0 3px;display:block}
   .hero-content{position:relative;z-index:2;padding:0}
   .hero-eyebrow{font-family:var(--font-heading);font-weight:bold;font-size:35px;color:var(--color-text);margin-bottom:.25rem}
   .hero-title{font-family:var(--font-heading);font-weight:bold;font-size:35px;line-height:1.25;color:var(--color-text)}
   .hero-badge{color:var(--color-primary);}
   .hero-desc{color:var(--color-text);max-width:620px;margin:1.1rem 0 2rem}
   .hero-trust{margin-top:2.5rem}
   .trust-item strong{color:var(--color-text)}
   .trust-item{display:flex;align-items:center;gap:.6rem}
   .trust-rating{font-size:1rem}
   .trust-rating .stars{color:#fbbf24;letter-spacing:1px}
   .trust-rating .stars .half-star{background:linear-gradient(to right,#fbbf24 50%,#fff 50%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

   .trust-sub{color:var(--color-text-muted);font-size:.8rem}
   .trust-item.anim-in img {width: 70px;}
   .trust-item.anim-in .g-icon img {width: 40px; height: 40px;}
   .anim-in{opacity:0;transform:translateY(24px)}
   .anim-in.anim-play{animation:fadeSlideUp .7s ease forwards}
   .hero-trust {}
   @keyframes floatImg{0%,100%{transform:translateY(0);}50%{transform:translateY(-15px);}}
   @keyframes floatCard{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
   @keyframes floatUp{0%,100%{transform:translateY(0);}50%{transform:translateY(-20px);}}
   @keyframes fadeSlideUp{to{opacity:1;transform:translateY(0)}
   }

   @media (max-width:991.98px){
   .hero{min-height:auto;padding:2.5rem 0 3.5rem}
   .hero-overlay{background:linear-gradient(180deg,rgba(6,6,19,.55),var(--color-bg) 85%)}
   }

   /* =========================================================
    STATS BAR
    ========================================================= */

   .stats-section .stat-item {flex-direction: column;}
   .stats-section{padding:30px 0;}
   .stat-item{text-align:center;position:relative}
   .stat-item+.stat-item::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:1px;background:#ccc}
   .stat-icon-wrap{position:relative; height:80px;margin:0 auto 10px;transition: .4s ease;}
   .stat-icon-wrap:hover{transform:rotate(-10deg) scale(1.1);}
   .stat-icon-wrap img {width: 85px;}
   .stat-number{font-family:Sora,sans-serif;font-weight:700;font-size:30px;color:var(--icon-color,var(--color-primary));line-height:1}
   .stat-label{    font-weight: 600; color:var(--color-black);font-size:14px;margin-top:8px}
   .stat-underline{width:36px;height:3px;background:var(--icon-color,var(--color-primary));margin:14px auto 0;border-radius:2px}

   /* =========================================================
    WHY CHOOSE US CSS
    ========================================================= */

   .why-section{font-family:var(--font-body); background: #F6F6F6;}
   .section-tag{text-align:center;letter-spacing:0;font-size:14px;text-transform: uppercase;color:var(--color-black);margin-bottom:8px}
   .section-heading{font-family:var(--font-heading);font-weight:700;font-size:30px;color:var(--color-black);margin-bottom: 16px;}
   .section-heading span{color:var(--color-primary)}
   .why-card{background:#ffffff;border-radius:14px;padding:40px 28px 32px;text-align:center;height:100%;position:relative;overflow:hidden;box-shadow:0 4px 18px rgba(0,0,0,.05);transition:transform .35s ease,box-shadow .35s ease}
   .why-card::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:6px;background:linear-gradient(90deg,var(--color-primary),transparent);transform:scaleX(1);transform-origin:left;transition:transform .35s ease}
   .why-card:hover{transform:translateY(-8px);box-shadow:0 16px 32px rgba(0,0,0,.12)}

   .why-card:hover::after{transform:scaleX(0);background:linear-gradient(90deg,var(--color-black),transparent);transform:scaleX(1);transform-origin:left;transition:transform .35s ease }

   .why-icon{width:96px;height:96px;margin:0 auto 24px;border-radius:50%;background:rgba(255,122,26,.1);display:flex;align-items:center;justify-content:center;transition:background .35s ease}
   .why-card:hover .why-icon{background:var(--color-bg);}
   .why-icon i{font-size:2.5rem;color:var(--color-primary)}
   .why-card:hover .why-icon i{color:var(--color-text)}
   .why-title{font-weight:700;font-size:1.15rem;color:var(--color-black);margin-bottom:12px}
   .why-text{color:var(--color-black);font-size:.92rem;line-height:1.6;margin-bottom:0}

   /* =========================================================
    SERVICE CSS
    ========================================================= */

   .services-section{
     background: url(../images/service-bg.jpg) no-repeat center / cover; position: relative;
     font-family:var(--font-body);color:var(--color-text);}
   .services-tag,.tag-white{letter-spacing:0;font-size:14px; color:var(--color-text);margin-bottom:6px;text-transform: uppercase;}
   .services-nav-btn{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--color-border);color:var(--color-white);display:flex;align-items:center;justify-content:center;font-size:1.3rem;cursor:pointer;transition:background .25s ease}
   .services-nav-btn:hover{background:var(--color-secondary)}
   .service-card,.zibal-box{background:var(--color-bg-alt);border:1px solid var(--color-border);border-radius:14px;padding:22px 16px;height:100%;min-height:400px;display:flex;flex-direction:column;transition: all .35s ease;}
   .services-carousel .service-card {min-height:470px;}
   .service-card{box-shadow:0 5px 25px rgba(0,0,0,.06);overflow:hidden;transition:all .35s ease}
   .service-card:hover,.zibal-box:hover{transform:translateY(-10px);box-shadow:0 25px 45px rgba(107,33,168,.18)}
   .service-card:hover .service-icon,.zibal-box:hover .zibal-icon{transform:rotate(-10deg) scale(1.1);border:1px solid #fff;background:#fff;color:#fff}

   .wwu-section.keyfeatures .service-card {min-height: 300px; position: relative;}
   .wwu-section.keyfeatures .service-card .card-underline {margin-left: 0;}
   .keyfeatures .service-number{position:absolute;top:20px;right:30px;font-size:24px;font-weight:600;line-height:1;color:#2453b5;letter-spacing:1px}
   .service-icon,.zibal-icon{border:1px solid #2b2b53;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,rgba(31,159,240,.25),transparent 70%);display:flex;align-items:center;justify-content:center;transition:.4s ease;margin-bottom:24px}
   .service-icon i,.zibal-icon i{font-size:1.9rem;color:var(--color-secondary)}
   .service-title,.zibal-box-title{font-weight:600;font-size:1.3rem;color:var(--color-white);margin-bottom:14px}
   .service-text,.zibal-box-text{color:var(--color-text-muted);font-size:.95rem;line-height:1.65;flex-grow:1}
   .service-link{color:var(--color-secondary);font-weight:600;text-decoration:none;font-size:.95rem;display:inline-flex;align-items:center;gap:6px;margin-top:16px}
   .service-link:hover{color:var(--color-secondary-dark)}
   .owl-carousel .owl-stage-outer{overflow:visible}
   .zibal-wrapper{display:flex;width:100%}
   .zibal-section .zibal-box{min-height:270px;padding:20px}
   .zibal-section{background:url(../images/service-bg.jpg) no-repeat center/cover;padding:40px 60px;width:50%;display:flex;align-items:center}
   .zibal-image-side{width:50%}
   .zibal-image-side img{width:100%;height:100%;object-fit:cover;display:block}


   /* =========================================================
    CLIENTS SECTION CSS
    ========================================================= */

   .clients-section{font-family:var(--font-body);--purple-main:#3a2a9c;--purple-dark:#0b0c2a;}
   .clients-heading{text-align:center;font-family:var(--font-heading);font-weight:700;font-size:30px;color:var(--color-black);margin-bottom:16px}
   .clients-heading span{color:var(--color-primary)}
   .heading-subtext{font-family: var(--font-body);text-align:center;color:var(--color-black);font-size:1rem;max-width:560px;margin:0 auto 50px}
   .client-item{position:relative;text-align:center;padding:0 18px}
   .client-item::after{content:"";position:absolute;right:10px;top:0;bottom:34px;width:1px;background:#efefef}
   .client-logo{height:90px;display:flex;align-items:center;justify-content:center;transition: .4s ease;margin-bottom:14px}
   .client-logo:hover{transform:rotate(-10deg) scale(1.1);}
   .client-logo img{max-height:95px;max-width:100%;object-fit:contain}
   .client-item::before{content:"";position:absolute;right:6px;top:42px;bottom:auto;width:10px;height:10px;border-radius:50%;background:var(--color-primary);z-index:1}
   .client-name{font-size:.95rem;color:var(--color-black);font-weight:500}
   .clients-nav-wrap{border-top:1px solid var(--color-border);margin-top:30px;padding-top:26px;display:flex;justify-content:center;gap:12px}
   .clients-nav-btn{width:44px;height:44px;border-radius:50%;background:var(--purple-main);border:none;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;transition:opacity .25s ease}
   .clients-nav-btn:hover{background:var(--color-secondary)}
   .owl-carousel .owl-item:last-child .client-item::after{display:none}
   .our-products{display:flex;gap:0;justify-content:space-evenly}
   .our-products .client-logo:hover{transform:translateY(-6px)}
   .our-products .client-name{font-size:18px;margin-top:25px}
   .our-products .client-logo img{max-height:120px}
   .our-products .client-item{padding:0 5rem}

   /* =========================================================
    INDUSTRIES SLIDER CSS
    ========================================================= */

   .industries-section{background: url(../images/service-bg.jpg) no-repeat center / cover;font-family:var(--font-body)}
   .heading-white{font-family:var(--font-heading);font-weight:700;font-size:30px;color:var(--color-white);margin-bottom:40px}
   .industry-card{position:relative;height:315px;border-radius:10px;overflow:hidden;cursor:pointer}
   .industry-bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1.05) rotate(0);filter:blur(0px) brightness(.9);transition:transform .5s ease,filter .5s ease}
   .industry-card:hover .industry-bg{transform:scale(1.15) rotate(2deg);filter:blur(5px) brightness(.45)}
   .industry-overlay{transition: .4s ease; position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:16px;background:linear-gradient(180deg,transparent 40%,rgb(0 0 0 / 40%) 100%);bottom: -40px;}
   .industry-card:hover .industry-overlay {bottom: 0;}
   .industry-title{color:var(--color-white);font-weight:700;font-size:1.3rem;margin-bottom:0;transition:margin .4s ease}
   .industry-desc{color:var(--color-text-muted);font-size:.9rem;line-height:1.5;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease,opacity .4s ease,margin .4s ease;margin-top:0}
   .industry-arrow{width:42px;height:42px;border-radius:50%;background:var(--color-secondary);color:var(--color-white);display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin-top:0;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease}
   .industry-card:hover .industry-title{margin-bottom:10px}
   .industry-card:hover .industry-desc{max-height:100px;opacity:1;margin-top:6px;margin-bottom:14px}
   .industry-card:hover .industry-arrow{opacity:1;transform:translateY(0)}
   .more-industries-btn{background:var(--color-secondary);color:var(--color-white);border:none;padding:13px 30px;border-radius:50px;font-weight:600;display:inline-flex;align-items:center;gap:10px;text-decoration:none;transition:background .25s ease}
   .more-industries-btn:hover{background:#0f83d1;color:#fff}

   /* =========================================================
    OUR WORK CSS
    ========================================================= */

   .ow-section{--purple-main:#7c3aed;--purple-light:#a855f7; margin:0 auto;}
   .head-section{text-align:center;margin-bottom:40px}

   .ow-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
   .ow-left{grid-row:span 2}
   .ow-right{display:flex;flex-direction:column;gap:20px}
   .ow-card{position:relative;border-radius:14px;overflow:hidden;min-height:260px;display:flex;align-items:flex-end;cursor:pointer}
   .ow-left .ow-card{min-height:540px}
   .ow-card .ow-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .5s ease}
   .ow-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 0,rgba(0,0,0,.75) 100%);z-index:1;transition:background .4s ease}
   .ow-logo{position:absolute;top:20px;     margin: auto;   right: 0; left:0;z-index:2;max-width:250px;background:#fff;border-radius:30px;padding:6px 12px;box-shadow:0 4px 12px rgba(0,0,0,.2);transition:transform .4s ease}
   .ow-badge{position:absolute;z-index:2;top:14px;left:50%;transform:translateX(-50%);width:130px;transition:transform .4s ease}
   .ow-left .ow-badge{top:150px;width:170px}
   .ow-text{position:relative;z-index:2;width:100%;padding:24px 24px 28px;color:#fff;text-align: center;}
   .ow-text h3{margin:0 0 6px;font-size:1.5rem;font-weight:700}
   .ow-text p{margin:0;font-size:.95rem;color:#e5e5e5;line-height:1.4}
   .ow-card:hover .ow-bg{transform:scale(1.08);filter:brightness(.9)}
   .ow-card:hover::after{background:linear-gradient(180deg,rgba(124,58,237,.15) 0,rgba(0,0,0,.85) 100%)}
   .ow-card:hover .ow-badge,.ow-card:hover .ow-logo{transform:translateY(-4px)}
   .ow-card:hover .ow-badge{transform:translateX(-50%) translateY(-4px)}
   .ow-card{box-shadow:0 4px 14px rgba(0,0,0,.12);transition:box-shadow .4s ease}
   .ow-card:hover{box-shadow:0 14px 30px rgba(124,58,237,.25)}

   .ow-extra-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
   .ow-extra-grid .ow-card{min-height:260px}
   .ow-extra{display:none}
   .ow-extra.show{display:contents}
   .ow-loadmore-wrap{text-align:center;margin-top:36px}
   .ow-loadmore-btn:disabled{opacity:.5;cursor:default;transform:none}


   /* =========================================================
   CTA SECTION CSS
    ========================================================= */

   .cta-section.abt-cta{background: url("../images/cta_bg.jpg") no-repeat center / cover; position:relative;}
   .cta-section.abt-cta .container{z-index:2;position:relative}
   .cta-section.abt-cta::after{content:"";background:rgb(0 0 0 / 80%);position:absolute;display:inline-block;width:100%;margin:auto;left:0;right:0;height:100%;z-index:1;top:0}
   .cta-section{background: url(../images/cta-bg.jpg) no-repeat center / cover; --blue-main:#1e9bf0;--blue-light:#3ec1ff;--orange:#f7941d;position:relative;text-align:center;overflow:hidden;}
   .cta-section .head-section {margin-bottom: 26px;}
   .cta-text{max-width:900px;margin:0 auto 40px;color:#d7d9ee; line-height:1.7}
   .cta-box{position:relative;z-index:2;max-width:695px;margin:0 auto;display:flex;align-items:center;justify-content:center;gap:24px;background:#0a0a18;border:2px dashed var(--blue-main);border-radius:60px;padding:16px 32px;flex-wrap:wrap;transition:border-color .4s ease,box-shadow .4s ease,transform .4s ease}
   .cta-box:hover{border-color:#fb5700;box-shadow:0 0 30px rgba(30,155,240,.35);transform:translateY(-4px)}
   .cta-icon{width:60px;height:60px;flex-shrink:0;border-radius:50%;background:linear-gradient(135deg,var(--blue-main),var(--blue-light));display:flex;align-items:center;justify-content:center;transition:transform .4s ease,box-shadow .4s ease}
   .cta-icon svg{width:26px;height:26px;fill:#fff}
   .cta-box:hover .cta-icon{transform:rotate(-10deg) scale(1.1);box-shadow:0 0 20px rgba(62,193,255,.7)}
   .cta-question{text-align:left}
   .cta-question p{margin:0 0 4px;color:#b9bdd6;font-size:.8rem;letter-spacing:1.5px;text-transform:uppercase}
   .cta-question h4{margin:0;color:#fff;font-size:1.4rem;font-weight:700}
   .cta-divider{width:1px;height:44px;background:rgba(255,255,255,.25)}
   .cta-btn{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--blue-main),var(--blue-light));color:#fff;font-weight:700;font-size:1rem;text-decoration:none;padding:14px 28px;border-radius:40px;transition:transform .3s ease,box-shadow .3s ease,gap .3s ease}
   .cta-btn svg{width:16px;height:16px;transition:transform .3s ease}
   .cta-btn:hover {transform: translateY(-3px); gap: 14px; background: #fb5700; color: white;}
   .cta-btn:hover svg{transform:translate(3px,-3px)}

   /* =========================================================
    Technology CSS
    ========================================================= */

   .ts-section{--purple-main:#3a2a9c;--purple-dark:#0b0c2a;position:relative;background:url(../images/cta-bg.jpg) no-repeat center/cover;overflow:hidden}
   .ts-head{display:flex;align-items:flex-end;justify-content:space-between;margin:0 auto 20px;flex-wrap:wrap;gap:20px}
   .ts-head .ts-label{color:#9aa0d0;font-size:.85rem;letter-spacing:4px;margin:0 0 10px}
   .ts-slider{max-width:1400px;margin:0 auto}
   .ts-card{background:#fff;border-radius:14px;min-height:120px;display:flex;align-items:center;justify-content:center;padding:14px;box-shadow:0 6px 18px rgba(0,0,0,.25);transition:transform .35s ease,box-shadow .35s ease}
   .ts-card img{max-width:100%;height:85px;object-fit:contain}
   .ts-slider .owl-dots,.ts-slider .owl-nav{display:none}
   .ts-section.service-page{background:0 0}
   .ts-section.service-page .heading-white{color:var(--color-black)}
   .ts-section.service-page .tag-white{color:var(--color-black)}
   .ts-section.service-page .ts-card{min-height:140px;padding:10px 20px;box-shadow:none;margin:20px 0;border:1px solid #ccc}
   .ts-section.service-page .ts-card:hover{transform:translateY(-8px);box-shadow:0 8px 10px rgb(0 0 0 / 11%)}
   .ts-section.service-page .ts-card img{max-width:100%;max-height:120px;object-fit:contain}

   /* =========================================================
    PROCESS SECTION CSS
    ========================================================= */

   .op-head{text-align:center;margin-bottom:40px}
   .op-head h2{font-size:2.2rem;margin:0;color:#111}
   .op-head h2 span{color:#f7941d}
   .op-head p{color:#555;font-size:1.05rem;margin-top:8px}
   .op-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start}
   .op-detail{background:#eef1fb;border-radius:16px;padding:30px}
   .op-num-line{display:flex;align-items:center;gap:14px;margin-bottom:20px}
   .op-num-line .op-num{font-size:1.6rem;font-weight:800;color:#c3c9e6;transition:color .3s ease}
   .op-num-line .op-line{flex:1;height:2px;background:#c3c9e6;transition:background .3s ease}
   .op-detail img{width:100%;border-radius:12px;display:block;margin-bottom:24px;max-height:340px;object-fit:cover}
   .op-detail h3{font-size:1.6rem;margin:0 0 10px;color:#111;font-weight: 700;}
   .op-detail p.op-desc{color:#444;line-height:1.6;margin:0 0 20px}
   .op-sub{display:flex;gap:16px;background:#dbe3fb;border-radius:12px;padding:20px;flex-wrap:wrap}
   .op-sub-item{display:flex;gap:12px;flex:1;min-width:220px}
   .op-sub-icon{width:40px;height:40px;flex-shrink:0;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
   .op-sub-item h4{margin:0 0 4px;font-size:.95rem;color:#2952e3}
   .op-sub-item p{margin:0;font-size:.85rem;color:#333;line-height:1.4}
   .op-steps{display:flex;flex-direction:column;gap:28px}
   .op-step{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:1px solid #eee;border-left:4px solid var(--c);border-radius:12px;padding:20px;cursor:pointer;transition:background .3s ease,transform .3s ease,box-shadow .3s ease}
   .op-step::before{content:"";position:absolute;left:-7px;top:50%;transform:translateY(-50%);width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--c)}
   .op-step:hover{transform:translateX(-4px);box-shadow:0 8px 20px rgba(0,0,0,.1)}
   .op-step.active{background:color-mix(in srgb,var(--c) 14%,#fff)}
   .op-step-left .op-step-num{font-size:1.5rem;font-weight:800;color:var(--c);display:block}
   .op-step-left .op-step-name{font-size:1.15rem;font-weight:700;color:#111}
   .op-step-icon{width:52px;height:52px;border-radius:50%;background:#fff;border:1px solid #eee;display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--c);transition:transform .3s ease}
   .op-step:hover .op-step-icon{transform:rotate(-8deg) scale(1.08)}

   /* =========================================================
    Testimonials CSS
    ========================================================= */

   .tst-section{background: url(../images/tst-bg.jpg) no-repeat center / cover;position:relative; overflow:hidden;}
   .tst-inner{max-width:900px;margin-left:auto;position:relative;z-index:2}
   .tst-inner h2{color:#fff;font-size:35px;font-weight:700;margin:0 0 24px}
   .tst-slider .item{outline:0}
   .tst-quote{color:#dfe3f7;font-size:16px;line-height:1.75;margin:0 0 34px}
   .tst-profile{display:flex;align-items:center;gap:16px}
   .owl-carousel .tst-profile img{width:68px!important;height:68px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.3)}
   .tst-name{color:#3ec1ff;font-size:16px;font-weight:700;margin:0 0 2px}
   .tst-role{color:#e2e4f5;font-size:14px;margin:0;}
   .tst-nav{position:absolute;right:0;bottom:0;display:flex;gap:12px;z-index:3}
   .tst-nav button{width:48px;height:48px;border-radius:50%;border:none;background:#3a2a9c;color:#fff;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s ease,transform .3s ease}
   .tst-nav button:hover{background:#ff7a00;transform:translateY(-3px)}
   .tst-slider .owl-dots,.tst-slider .owl-nav{display:none}

   .why-section.government-p .why-card::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:5px;background:linear-gradient(90deg,var(--color-black),transparent);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
   .why-section.government-p .why-card:hover::after{transform:scaleX(1)}

   /* =========================================================
      ABOUT US - HERO SECTION
      ========================================================= */


  .about-hero-section {
    background: url(../images/about-bg.jpg) no-repeat right bottom;
    background-size: 100%;

}
  .about-hero-section.ai-consulting {
    background: url(../images/ai-consulting-bg.jpg) no-repeat right bottom;
    background-size: cover;
}
  .about-hero-section.ai-development {
    background: url(../images/ai-development-bg.jpg) no-repeat right bottom;
    background-size: cover;
}
  .about-hero-section.ai-generative {
    background: url(../images/ai-generative-bg.jpg) no-repeat right bottom;
    background-size: cover;
}
  .about-hero-section.ai-automation {
    background: url(../images/ai-automation-bg.jpg) no-repeat right bottom;
    background-size: cover;
}
  .about-hero-section.ai-chatbots {
    background: url(../images/ai-chatboard-bg.jpg) no-repeat right bottom;
    background-size: cover;
}
  .about-hero-section.android-development {
    background: url(../images/android-development-bg.jpg) no-repeat right bottom;
    background-size: cover;
}


   .about-hero-section.web-app{background:url(../images/web-app-bg.jpg) no-repeat center/cover}
   .about-hero-section.ded-dovelop{background:url(../images/ded-dovelop-bg.jpg) no-repeat top/cover}
   .about-hero-section.project-cost{background:url(../images/project-cost-bg.jpg) no-repeat top/cover}
   .about-hero-section.support-hero{background:url(../images/support-bg.jpg) no-repeat top/cover}
   
   .about-hero-section.portfolio{background:url(../images/portfolio-bg.jpg) no-repeat top/cover}
   .about-hero-section{position:relative;overflow:hidden;height:600px;display:flex;padding:100px 0 0;align-items:center}

   .about-hero-title{font-family:var(--font-heading);font-weight:700;font-size:35px;color:var(--color-text);margin-bottom:14px}
   .about-hero-title span{color:var(--color-primary)}
   .about-hero-desc{color:var(--color-text-muted);font-size:1.05rem;line-height:1.7; margin-bottom:36px}
   .about-hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
   .watch-story-btn{display:inline-flex;align-items:center;gap:12px;background:transparent;border:1px solid var(--color-border);color:var(--color-text);font-weight:500;font-size:15px;padding:8px 24px 8px 8px;border-radius:50px;cursor:pointer;transition:.3s ease}
   .watch-story-btn:hover{border-color:var(--color-text);background:rgba(255,255,255,.05)}
   .watch-story-icon{width:38px;height:38px;border-radius:50%;background:var(--color-secondary);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;flex-shrink:0}

   .about-hero-media{position:relative;border-radius:20px;overflow:hidden}
   .about-hero-media img{width:100%;height:100%;object-fit:cover;border-radius:20px;display:block}

   /* Video Modal */
   .video-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease}
   .video-modal.active{opacity:1;visibility:visible}
   .video-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.85)}
   .video-modal-inner{position:relative;width:100%;max-width:900px;background:#000;border-radius:12px;overflow:hidden;z-index:1;transform:scale(.9);transition:transform .35s ease}
   .video-modal.active .video-modal-inner{transform:scale(1)}
   .video-modal-inner video{width:100%;display:block;max-height:80vh}
   .video-modal-close{position:absolute;top:14px;right:14px;background:rgba(0,0,0,.6);border:1px solid #fff;color:#fff;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;z-index:2}

   /* WHO WE ARE - About Section */

   .about-whoweare-section{background:#fff}
   .text-accent{color:var(--color-primary)}
   .whoweare-desc {
       margin: 20px auto 40px;
       line-height: 1.8;
       border-bottom: 1px solid #eee;
       padding: 0 0 30px 0;
   }
   .whoweare-stats{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;border-top:1px solid #eee;padding-top:40px;margin-bottom:60px}
   .stat-item{display:flex; align-items:center;text-align:center;padding:0 30px}
   .stat-icon{width:48px;height:48px;border-radius:10px;background:rgba(16,106,247,.1);display:flex;align-items:center;justify-content:center;color:var(--color-secondary);font-size:20px;margin-bottom:10px}
   .stat-value{font-size:1.8rem;font-weight:700;color:var(--color-black)}
   .stat-divider{width:1px;height:60px;background:#e2e2e2}
   .stat-box {text-align: left; margin-left: 14px;}
   .stat-box .stat-label{margin-top: 0;}

   .whoweare-card,.perk-item{background:#fff;border:1px solid #eee;border-radius:14px;padding:36px 28px;text-align:center;height:100%;transition:.3s ease}
   .whoweare-card:hover,.perk-item:hover{box-shadow:0 10px 30px rgba(0,0,0,.08);transform:translateY(-4px)}
   .whoweare-card-icon{width:64px;height:64px;border-radius:50%;background:rgba(16,106,247,.1);display:flex;align-items:center;justify-content:center;color:var(--color-secondary);font-size:26px;margin:0 auto 20px}
   .whoweare-card h3{font-size:1.15rem;font-weight:700;color:var(--color-black);margin-bottom:12px}
   .whoweare-card p{ font-size:.92rem;line-height:1.6;margin-bottom:20px}
   .card-underline{display:block;width:36px;height:3px;background:var(--color-secondary);margin:0 auto;border-radius:2px}

   /* WHY WORK WITH US */

   .wwu-section{background: url(../images/service-bg.jpg) no-repeat center / cover;}
   .section-tag-left{letter-spacing:0; margin-bottom:12px; text-transform: uppercase; font-size:14px;}
   .wwu-heading,.zibal-heading{font-family:var(--font-heading);font-weight:700;font-size:35px;line-height:1.15;color:var(--color-text);margin-bottom:20px}
   .wwu-heading span,.zibal-heading span{color:var(--color-primary)}
   .wwu-desc,.zibal-desc{color:var(--color-text-muted);font-size:1rem;line-height:1.7;margin-bottom:30px; }
   .wwu-media img{max-width:100%}
   .wwu-section .service-card{ min-height: 380px;}

   .hiring-process-slider .item{padding:4px}
   .hiring-process-slider .owl-stage{display:flex}

   .join-img-wrap{border-radius:20px;overflow:hidden}
   .join-img-wrap img{width:100%;display:block;transition:transform .5s ease}
   .join-img-wrap:hover img{transform:scale(1.08)}


   /* =========================================================
      TEAM CAROUSEL
      ========================================================= */
   .team-heading{font-family:var(--font-heading);font-weight:700;font-size:2rem;color:var(--color-black);margin:0}
   .team-heading span{color:var(--color-primary)}

   /* breaks the carousel out to the viewport's right edge, left stays aligned with container/heading */
   .team-carousel-wrap{margin-right:calc((100vw - 100%) / -2)}
   .team-card:hover .team-overlay{opacity:1;transform:translateY(0);pointer-events:auto}
   .team-item{padding:0 4px}
   .team-card{position:relative;border-radius:16px;overflow:hidden;height:400px;background:#0b1a3a; border: 1px solid #ccc;}
   .team-photo{width:100%;height:400px;object-fit:cover;display:block;transition:opacity .35s ease}
   .team-card:hover .team-photo{opacity:0}

   .team-basic{position:absolute;left:0;right:0;bottom:0;padding:22px;background:linear-gradient(to top,rgba(0,0,0,.75),transparent);color:#fff;transition:opacity .3s ease}
   .team-card:hover .team-basic{opacity:0}
   .team-basic h4{margin:0;font-size:1.15rem;font-weight:700}
   .team-basic span{font-size:.88rem;opacity:.85}

   .team-overlay{position:absolute;inset:0;background:#0b1a3a;color:#fff;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;opacity:0;transform:translateY(18px);transition:opacity .35s ease .05s,transform .35s ease .05s;pointer-events:none}
   .team-card:hover .team-overlay{opacity:1;transform:translateY(0)}
   .team-overlay h4{margin:0 0 2px;font-size:1.2rem;font-weight:700}
   .team-overlay .team-role{opacity:.8;display:block;margin-bottom:10px}
   .team-overlay p{font-size:.9rem;line-height:1.6;opacity:.9;margin-bottom:16px}

   .team-social{display:flex;gap:12px}
   .team-social a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;color:#fff;transition:.3s ease;flex-shrink:0}
   .team-social a:hover{background:var(--color-secondary);border-color:var(--color-secondary)}

   .team-intro-card{background:#0b1a3a;border-radius:16px;height:460px;padding:32px;color:#fff;display:flex;flex-direction:column}
   .team-intro-card h3{font-size:1.4rem;font-weight:700;margin-bottom:4px}
   .team-intro-card .team-role{opacity:.8;margin-bottom:24px;display:block}
   .team-intro-card p{opacity:.85;line-height:1.7;flex:1}
   .team-intro-card .team-social{margin-top:auto}
   .team-intro-card .team-social a{border-color:rgba(255,255,255,.3)}

   .team-section .services-nav-btn{background: rgb(21 19 48); border: 1px solid rgb(202 202 202 / 12%);     transition: background .25s ease;}
   .team-section .services-nav-btn:hover {background: #106af7;}


   /* =========================================================
      CAREERS HERO
      ========================================================= */

   .careers-hero-section{background:#eef1fb;}
   .careers-heading{font-family:var(--font-heading);font-weight:700;font-size:35px;line-height:1.2;color:var(--color-black);margin-bottom:18px}
   .careers-heading span{color:var(--color-primary);display:block}
   .careers-desc{line-height:1.7;max-width:460px;margin-bottom:40px}

   .careers-actions{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
   .careers-contact{display:flex;align-items:center;gap:14px}
   .careers-contact-icon{width:56px;height:56px;border-radius:50%;background:var(--color-secondary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;transition:transform .35s ease,box-shadow .35s ease;flex-shrink:0}
   .careers-contact:hover .careers-contact-icon{transform:scale(1.1) rotate(-8deg);box-shadow:0 0 0 8px rgba(16,106,247,.15)}
   .careers-contact-label{display:block;font-size:.78rem;letter-spacing:1px;color:#777;font-weight:600}
   .careers-contact-number{display:block;font-size:1.15rem;font-weight:700;color:var(--color-black)}
   .careers-contact-number:hover{color:var(--color-secondary)}

   .careers-media{position:relative;width:100%;max-width:520px;aspect-ratio:1/1;margin:0 auto}
   .careers-media-img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;position:relative;z-index:1}
   .careers-media-ring{position:absolute;inset:-22px;border-radius:50%;border:2px dashed var(--color-secondary);animation:careersRingSpin 18s linear infinite}

   @keyframes careersRingSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}


   /* Resume Modal */
   .resume-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease}
   .resume-modal.active{opacity:1;visibility:visible}
   .resume-modal-overlay{position:absolute;inset:0;background:rgba(0,0,0,.6)}
   .resume-modal-inner{position:relative;width:100%;max-width:560px;background:var(--color-bg-alt);border-radius:16px;padding:40px;z-index:1;max-height:90vh;overflow-y:auto;transform:scale(.92);transition:transform .35s ease}
   .resume-modal.active .resume-modal-inner{transform:scale(1)}
   .resume-modal-close{position:absolute;top:16px;right:16px;background:#f2f2f2;border:0;color:#333;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px}
   .resume-modal-title{font-family:var(--font-heading);font-weight:700;font-size:1.5rem;color:var(--color-text-muted);margin-bottom:6px}
   .resume-modal-sub{color:#777;margin-bottom:24px;font-size:.95rem}
   .resume-form .form-control:focus{border-color:var(--color-secondary);box-shadow:none}
   .resume-upload{display:flex;align-items:center;gap:10px;border:1.5px dashed #ccc;border-radius:8px;padding:10px;cursor:pointer;color:#777;font-size:.9rem;transition:.3s ease;background:var(--color-text)}
   .resume-upload:hover{border-color:var(--color-secondary);color:var(--color-secondary)}
   .resume-upload i{font-size:1.2rem}


   /* =========================================================
      CONTACT US - HERO SECTION
      ========================================================= */

   .wpcf7 form .wpcf7-response-output{font-size: 14px!important;}
   .blog-hero, .contact-hero-section{background:url(../images/cta-bg.jpg) no-repeat center/cover;position:relative;overflow:hidden;height:450px;display:flex;align-items:center}
   .contact-hero-section .text-center,.career-txt{margin-top:5rem}
   .contact-section{background:var(--color-text);font-family:var(--font-body)}
   .contact-card{background:var(--color-white);border-radius:16px;padding:44px;box-shadow:0 10px 30px rgba(0,0,0,.05);height:100%}
   .contact-heading{font-family:var(--font-heading);font-weight:700;font-size:30px;color:var(--color-black);margin-bottom:10px}
   .contact-heading span{color:var(--color-primary)}
   .contact-subtext{margin-bottom:28px}
   .form-label{font-weight:400;color:var(--color-black);margin-bottom:6px; font-size: 14px;}
   .contact-card .form-control{border:1px solid #dcdcdc;border-radius:8px;padding:.775rem .75rem;font-size:.95rem}
   .contact-card .form-control:focus{border-color:var(--color-secondary);box-shadow:0 0 0 3px rgba(31,159,240,.15)}
   .send-btn{background:var(--color-secondary);color:#fff;border:none;padding:12px 26px;border-radius:50px;font-weight:600;display:inline-flex;align-items:center;gap:10px;transition:background .25s ease}
   .send-btn:hover{background:#0f83d1;color:#fff}
   .talk-heading{font-family:var(--font-heading);font-weight:700;font-size:30px;color:var(--color-black);margin-bottom:14px}
   .talk-heading span{color:var(--color-primary)}
   .talk-subtext{margin-bottom:34px}
   .info-card{background:var(--color-white);border:1px solid var(--color-border);border-radius:14px;padding:22px;display:flex;align-items:center;gap:20px;margin-bottom:20px;box-shadow:0 4px 14px rgba(0,0,0,.04);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
   .info-card:hover{transform:translateY(-6px);box-shadow:0 14px 28px rgba(31,159,240,.15);border-color:var(--color-secondary)}
   .info-card:hover .info-icon{background:var(--color-secondary);transform:scale(1.08) rotate(-6deg)}
   .info-icon{transition:background .3s ease,transform .3s ease}
   .info-icon{width:64px;height:64px;min-width:64px;border-radius:50%;background:var(--color-navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem}
   .info-title{font-weight:700;font-size:1.1rem;color:var(--color-black);margin-bottom:4px}
   .info-text{color:var(--color-black);font-size:.92rem;margin-bottom:0;line-height:1.5}
   .maps-link{display:flex;align-items:center;gap:14px;font-weight:700;margin-top:30px;font-size:1.15rem;color:var(--color-black);text-decoration:none}
   .maps-arrow{width:44px;height:44px;border-radius:50%;background:var(--color-secondary);color:#fff;display:flex;align-items:center;justify-content:center;transition:background .25s ease,transform .3s ease}
   .maps-arrow i{transition:transform .3s ease}
   .maps-link:hover .maps-arrow{background:#0f83d1}
   .maps-link:hover .maps-arrow i{transform:translate(3px,-3px)}
   .maps-link:hover{color:var(--color-black)}
   .findus-section{background:radial-gradient(circle at 90% 10%,#241a6b 0,var(--color-bg) 55%);font-family:var(--font-body);position:relative;overflow:hidden}
   .findus-section::before{content:"";position:absolute;top:-120px;right:-120px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(31,159,240,.15),transparent 70%)}
   .findus-section::after{content:"";position:absolute;bottom:-100px;left:-100px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,26,.12),transparent 70%)}
   .findus-tag{text-align:center;letter-spacing:0;font-size:14px; color:var(--color-text);margin-bottom:10px}
   .findus-heading{text-align:center;font-family:var(--font-heading);font-weight:700;font-size:30px;color:var(--color-text);margin-bottom:14px}
   .findus-heading span{color:var(--color-primary)}
   .findus-subtext{text-align:center;color:var(--color-text-muted);font-size:1.05rem;margin-bottom:50px}
   .map-frame-wrap{position:relative;max-width:1200px;margin:0 auto;border-radius:26px;padding:6px;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary),var(--color-navy));box-shadow:0 25px 60px rgba(20,20,60,.18)}
   .map-frame-inner{border-radius:22px;overflow:hidden;position:relative}
   .map-frame-inner iframe{width:100%;height:480px;border:0;display:block;filter:grayscale(.15) contrast(1.05)}
   .map-float-card{position:absolute;top:24px;left:24px;background:#fff;border-radius:16px;padding:20px 22px;box-shadow:0 18px 40px rgba(0,0,0,.18);max-width:320px;z-index:5;animation:floatCard 4s ease-in-out infinite}
   @keyframes floatCard{
   0%,100%{transform:translateY(0)}
   50%{transform:translateY(-8px)}
   }
   .map-float-title{font-weight:700;font-size:1.05rem;color:var(--color-black);margin-bottom:6px}
   .map-float-text{font-size:.88rem;line-height:1.5;margin-bottom:10px}
   .map-float-rating{display:flex;align-items:center;gap:6px;font-size:.9rem;color:var(--color-black);font-weight:600;margin-bottom:0}
   .map-float-rating i{color:#ffb400}
   .map-float-actions{position:absolute;top:22px;right:22px;display:flex;gap:8px}
   .map-action-btn{width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:0 6px 16px rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;color:var(--color-secondary);text-decoration:none;transition:transform .25s ease,background .25s ease}
   .map-action-btn:hover{transform:translateY(-3px);background:var(--color-secondary);color:#fff}
   .pulse-pin{position:absolute;bottom:60px;right:110px;width:20px;height:20px;z-index:4;display:none}

   /* ===== Common Card Box Classes===== */

   .section-desc{font-size:16px;line-height:1.8; margin-bottom:10px}
   .feature-card{background:#fff;border:1px solid #eaecf0;border-radius:14px;padding:30px 24px;height:100%;transition:all .35s ease}
   .feature-card:hover{transform:translateY(-8px);border-color:transparent;box-shadow:0 20px 40px rgba(16,24,40,.12)}
   .feature-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#eaf1ff;color:#2563eb;font-size:24px;margin-bottom:18px;transition:all .35s ease}
   .feature-card:hover .feature-icon{background:#2563eb;color:#fff;transform:scale(1.1) rotate(-5deg)}
   .feature-card h5{font-size:18px;font-weight:700;color:#101828;margin-bottom:10px}
   .feature-card p{font-size:14.5px;color:#667085;margin-bottom:0}
   .featured-nav {display: flex;}

   /* ===== Section Specific ===== */

   .service-image-wrap{display:flex;justify-content:center}
   .service-image{position:relative;border-radius:16px;overflow:hidden;max-width:550px}
   .service-image img{width:100%;display:block;border-radius:16px}

   /* =========================================================
    FAQ CSS
    ========================================================= */

   .call-to-action .careers-heading{font-size:2.4rem;color:var(--color-text)}
   .call-to-action .careers-desc{color:var(--color-text);font-size:1.05rem;line-height:1.7;max-width:460px;margin-bottom:24px}
   .call-to-action{width:100%;background:url(../images/bg-01.jpg) no-repeat;background-size:cover;background-position:center center;padding:60px 0;position:relative;color:#fff}
   .call-to-action:after{content:"";background:rgb(0 0 0 / 70%);position:absolute;left:0;right:0;top:0;bottom:0;z-index:1}
   .call-action-txt{backdrop-filter:blur(2px);background:#000000c7;padding:34px;border-radius:16px}
   .faq-section-main{display:flex;width:100%;align-items:center}
   .faq-section{padding:0 60px;width:55%}
   .faq-section .accordion-button:not(.collapsed){background:0 0}
   .faq-image-wrap{width:45%}
   .accordion-item{border:1px solid #e2e2e2!important;border-radius:10px!important;margin-bottom:16px;overflow:hidden}
   .accordion-button{font-size:17px;font-weight:700;color:#111;padding:18px 22px;box-shadow:none!important}
   .accordion-button:not(.collapsed){background:#fff;color:#111}
   .accordion-button::after{display:none}
   .faq-icon{width:34px;height:34px;min-width:34px;border-radius:50%;background:#1a3fd6;color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;transition:.3s ease}
   .accordion-button:not(.collapsed) .faq-icon{background:#111}
   .accordion-body{color:#555;font-size:15px;line-height:1.7;padding:0 22px 22px 22px}
   .faq-image-side{position:relative;height:100%;min-height:600px;border-radius:100px 0 0 100px;overflow:hidden}
   .faq-image-side img{width:100%;height:100%;object-fit:cover;display:block}
   .faq-icon .icon-minus{display:none}
   .accordion-button:not(.collapsed) .faq-icon .icon-plus{display:none}
   .accordion-button:not(.collapsed) .faq-icon .icon-minus{display:block}
   .wpcf7-not-valid-tip {font-size: 12px!important;}

   /* =========================================================
    CSS
    ========================================================= */

   .why-hire-section .feature-card{gap:16px;align-items:flex-start}
   .why-hire-section .feature-icon{margin-bottom:0}
   .why-hire-section .feature-content h5{margin-bottom:6px}

   .get-started-section{background:#0a0f24;}
   .get-started-section.creative-cta {background: #050c23;}
   .get-started-section .form-control{border:none;border-radius:6px;padding:.9rem 1rem;font-size:.95rem}
   .get-started-section .form-control:focus{box-shadow:0 0 0 3px rgba(31,159,240,.2)}
   .get-started-image img{width:100%;display:block}

   /* =========================================================
    UNDER CONSTRUCTION CSS
    ========================================================= */

   .up-construction{background:radial-gradient(circle at 90% 10%,#241a6b 0,var(--color-bg) 55%);padding:50px 0 100px 0;min-height:100vh;display:flex;align-items:center}
   .up-warning-icon{font-size:3.2rem;color:var(--color-primary);margin:20px 0}
   .up-construction-heading{font-family:var(--font-heading);font-weight:800;font-size:3rem;line-height:1.25;letter-spacing:2px;color:var(--color-text);margin-bottom:24px}
   .up-dots{display:flex;justify-content:center;gap:8px;margin-bottom:24px}
   .up-dots::after,.up-dots::before{content:none}
   .up-dots{background:0 0}
   .up-construction-sub{font-family:var(--font-heading);font-weight:700;letter-spacing:2px;color:var(--color-text-muted);margin:36px 0;}
   .up-dots span{width:8px;height:8px;border-radius:50%; background:var(--color-primary); animation:up-dot-pulse 1.4s ease-in-out infinite;}
   .up-dots span:nth-child(1){animation-delay:0s}
   .up-dots span:nth-child(2){animation-delay:.1s}
   .up-dots span:nth-child(3){animation-delay:.2s}
   .up-dots span:nth-child(4){animation-delay:.3s}
   .up-dots span:nth-child(5){animation-delay:.4s}
   .up-dots span:nth-child(6){animation-delay:.5s}
   .up-dots span:nth-child(7){animation-delay:.6s}
   .up-dots span:nth-child(8){animation-delay:.7s}
   .up-dots span:nth-child(9){animation-delay:.8s}
   .up-dots span:nth-child(10){animation-delay:.9s}
   .up-dots span:nth-child(11){animation-delay:1s}
   .up-dots span:nth-child(12){animation-delay:1.1s}
   .up-dots span:nth-child(13){animation-delay:1.2s}
   .up-dots span:nth-child(14){animation-delay:1.3s}
   .up-dots span:nth-child(15){animation-delay:1.4s}

   @keyframes up-dot-pulse{
       0%,100%{transform:scale(1);opacity:.5}
       50%{transform:scale(1.6);opacity:1;background:var(--color-secondary)}
   }

   @media (prefers-reduced-motion: reduce){
       .up-dots span{animation:none;opacity:1}
   }
/* ===== VIDEO HERO ===== */

.vh-section{position:relative;min-height:600px;display:flex;align-items:center;padding: 100px 0 0; overflow:hidden}
.vh-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vh-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg, rgb(6 10 30 / 39%) 0%, rgb(6 10 30 / 40%) 45%, rgb(6 10 30 / 0%) 100%)}
.vh-content{position:relative;z-index:2;max-width:620px;}

@media(max-width:991.98px){
.vh-heading{font-size:2.25rem}
.vh-content{padding:70px 0}
}
@media(max-width:575px){
.vh-section{min-height:auto}
.vh-heading{font-size:1.8rem}
.vh-desc{font-size:.95rem}
.vh-overlay{background:rgba(6,10,30,.82)}
}
   /* =========================================================
    CAREERS PAGE CSS
    ========================================================= */

   .careers-page-section .resume-upload{background: var(--color-white);}
   .resume-form .form-select{padding: 0.875rem 2.25rem 0.875rem .75rem; font-size: 14px;}
   .openings-label{font-weight:700;font-size:.85rem;letter-spacing:1px;color:var(--color-black)}
   .job-list{display:flex;flex-direction:column;gap:14px}

   .job-card{border:1px solid #eceef3;border-radius:14px;overflow:hidden;background:var(--color-text);transition:.2s ease}
   .job-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.06);background: #fff;}

   .job-item{display:flex;align-items:center;gap:16px;padding:18px 20px; cursor:pointer}
   .job-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
   .job-icon.bg-blue{background:#e6edfe;color:var(--color-secondary)}
   .job-icon.bg-orange{background:#fdece0;color:var(--color-primary)}
   .job-icon.bg-green{background:#e3f7e9;color:#1fa055}
   .job-icon.bg-purple{background:#efe7fb;color:#8b5cf6}
   .job-title{font-weight:700;color:var(--color-black);font-size:1rem;margin-bottom:2px}
   .job-dept{color:#8b8f9c;font-size:.85rem}
   .job-meta{margin-left:auto;display:flex;align-items:center;gap:18px;flex-shrink:0}
   .job-loc{color:#5c6273;font-size:.85rem;display:flex;align-items:center;gap:4px;white-space:nowrap}
   .job-tag{padding:5px 14px;border-radius:20px;font-size:.78rem;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
   .job-tag.blue{background:#e6edfe;color:var(--color-secondary)}
   .job-tag.orange{background:#fdece0;color:#e2670f}
   .job-tag.green{background:#e3f7e9;color:#1fa055}
   .job-tag.purple{background:#efe7fb;color:#8b5cf6}
   .job-item .bi-chevron-right{color:#c2c5cf;transition:transform .25s ease}
   .job-item[aria-expanded="true"] .bi-chevron-right{transform:rotate(90deg)}

   /* details panel */

   .job-details{padding:0 20px 24px 84px;border-top:1px solid #eceef3}
   .job-details-inner{padding-top:18px}
   .job-details h6{font-weight:700;font-size:.9rem;color:var(--color-black);margin-bottom:8px}
   .job-details p,.job-details li{color:#5c6273;font-size:.9rem;line-height:1.6}
   .job-details ul{margin:0 0 16px 0!important;padding-left:18px!important;list-style:disc!important}
   .view-less-btn{border:1px solid #dcdcdc;background:var(--color-secondary);color:var(--color-text);font-size:14px;font-weight:600;padding:7px 18px;border-radius:20px;display:inline-flex;align-items:center;gap:6px;transition:.2s ease}
   .view-less-btn:hover{background:var(--color-primary);color: var(--color-text);}
   .view-less-btn i{transition:transform .25s ease}
   .contact-card.resume-form{padding: 24px; background: var(--color-text);border: 1px solid #eceef3; box-shadow: none;}
   .careers-page-section .col.perk-item {padding: 16px 14px; height: auto; margin: 12px 6px;}
   .perk-icon{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:1.3rem}
   .perk-icon.bg-blue{background:#e6edfe;color:var(--color-secondary)}
   .perk-icon.bg-orange{background:#fdece0;color:var(--color-primary)}
   .perk-icon.bg-green{background:#e3f7e9;color:#1fa055}
   .perk-icon.bg-purple{background:#efe7fb;color:#8b5cf6}
   .perk-title{font-weight:700;color:var(--color-black);font-size:1rem;margin-bottom:6px}
   .perk-desc{color:#8b8f9c;font-size:.85rem;line-height:1.5}

   .apply-card-icon{width:52px;height:52px;border-radius:50%;background:var(--color-secondary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
   .apply-card-title{font-family:var(--font-heading);font-weight:700;font-size:1.4rem;color:var(--color-black);margin-bottom:2px}
   .apply-card-sub{color:#8b8f9c;font-size:.85rem}

   .career-hero-section{background:url(../images/career-bg.jpg) no-repeat center/cover;position:relative;overflow:hidden;height:450px;display:flex;align-items:center}
   .career-hero-section::after{content:"";background:rgb(0 0 0 / 80%);position:absolute;display:inline-block;width:100%;margin:auto;left:0;right:0;height:100%;z-index:1;top:0}
   sup{color:red;font-size:14px!important;top:auto!important}
   .careers-page-section .resume-upload,.careers-page-section .form-control{font-size:14px;}

   /* =========================================================
    BLOG CSS
    ========================================================= */

   :root{--orange:#ff5800;--orange-dark:#D6480F;--ink:#090c22;--cream:#FFF9F2;--paper:#FFFFFF;--line:#EFE6DA;--grey:#7A7168}

   .blog-hero-inner {position: relative;  z-index: 2; max-width: 650px; margin: 5rem auto 0;text-align: center;}
   .blog-hero p{margin-top:18px; max-width:520px;line-height:1.6;    color: var(--color-text-muted);}

   /* ===== FEATURED POST ===== */

   .featured{background:var(--ink);color:#fff;border-radius:22px;overflow:hidden}
   .featured-img{position:relative;background:#000;min-height:320px}
   .featured-img img{width:100%;height:100%;object-fit:cover;opacity:.85; inset:0}
   .featured-tag{position:absolute;top:20px;left:20px;background:var(--orange);color:#fff;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:6px 14px;border-radius:100px;z-index:2}
   .featured-body{padding:34px;display:flex;flex-direction:column;justify-content:center}
   .blog-section-main .common-btn{width: fit-content;}


   /* ===== Pagination ===== */

   .pagination-area .nav-links{display:flex;padding:11px 0;margin:0 auto;justify-content:center}
   .pagination-area .nav-links span.current{background:var(--orange);font-size:16px;text-align:center;color:#fff;border:1px solid var(--orange);border-radius:4px;font-weight:500;width:43px;height:43px;line-height:42px;margin:0 3px}
   .pagination-area .nav-links a:hover{background:var(--orange);color:#fff;border-radius:3px;border:1px solid var(--orange)}
   .pagination-area .nav-links a{line-height:42px;color:#000;font-size:16px;transition:.3s;text-align:center;border-radius:4px;opacity:.96;border:1px solid #ddd;font-weight:500;width:43px;margin:0 3px;height:43px;background:#fff;display:inline-block}

   /* ===== Blog cards — grid replaced by bootstrap row-cols ===== */

   .blog-grid .card{background:var(--cream);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.25s}
   .blog-grid .card:hover{transform:translateY(-6px);box-shadow:0 18px 34px rgba(22,19,17,.1)}
   .blog-grid .card-img{position:relative;aspect-ratio:4/3;overflow:hidden;background:#eee}
   .blog-grid .card-img img{width:100%;height:100%;object-fit:cover;transition:.4s}
   .blog-grid .card:hover .card-img img{transform:scale(1.06)}
   .card-tag{position:absolute;top:14px;left:14px;background:#fff;color:var(--orange);font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:5px 12px;border-radius:100px}
   .blog-grid .card-body{padding:22px 22px 26px;display:flex;flex-direction:column;flex:1}
   .card-meta{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
   .blog-grid .card-body h4{font-size:17.5px;line-height:1.35;margin-bottom:10px;color:var(--orange)}
   .blog-grid .card-body p{font-size:16px;line-height:1.6;margin-bottom:18px;flex:1}
   .blog-grid .card-link{font-size:16px;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
   .blog-grid .card-link:hover{color:var(--orange)}
   .blog-grid .card-link svg{transition:.2s}
   .card:hover .card-link svg{transform:translateX(4px)}

   /* =========================================================
    PORTFOLIO PAGE CSS
    ========================================================= */


/* ===== FEATURED PROJECTS ===== */

section.fp-section {padding: 30px 0;}
.fp-heading{color:#0c1f52}
.fp-nav-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--color-secondary);background:#fff;color:var(--color-secondary);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.3s ease}
.fp-nav-btn:hover{background:var(--color-primary); color:#fff; border:1px solid var(--color-primary);}

.fp-carousel.owl-carousel{display:block}
.fp-carousel .owl-stage-outer{border-radius:20px}
.fp-slide .row{border-radius:20px;overflow:hidden;min-height:460px}
.fp-tags {font-size: 14px; margin: 0 0 14px;}
.fp-media{position:relative;height:100%;min-height:360px;overflow:hidden;background:#eef1fb}
.fp-media img{width:100%;height:100%;object-fit:cover;display:block}
.fp-content{position:relative;height:100%;padding:44px 40px;display:flex;flex-direction:column;justify-content:center;color:#fff;background:radial-gradient(circle at 90% 10%,#241a6b 0,var(--color-bg) 75%)}
.fp-text{color:#c7d1ea;font-size:15px;line-height:1.7;margin-bottom:28px}
.fp-btn{align-self:flex-start}
.fp-pagination{position:absolute;bottom:24px;right:40px;font-size:14px;color:#8f9dc4}
.fp-pagination .fp-current{color:var(--color-primary);font-weight:700}

/* ===== FILTER BY SERVICES ===== */

.fs-section{background:#f7f8fc}
.fs-filter{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 36px}
.fs-filter-btn{border:1px solid #dde1ef;background:#fff;color:#1b2559;padding:10px 24px;border-radius:50px;font-size:14.5px;font-weight:500;cursor:pointer;transition:.3s ease}
.fs-filter-btn:hover{border-color:var(--color-secondary);color:var(--color-secondary)}
.fs-filter-btn.active{background:var(--color-secondary);border-color:var(--color-secondary);color:#fff}

.fs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.fs-card{position:relative;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 6px 20px rgba(16,24,64,.07);transition:transform .35s ease,box-shadow .35s ease}
.fs-card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(16,24,64,.15)}
.fs-card.fs-hide{display:none}

.fs-media{height:230px;overflow:hidden}
.fs-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.fs-card:hover .fs-media img{transform:scale(1.08)}
.fs-overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:flex-start;padding:22px;color:#fff;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;background:linear-gradient(180deg,rgba(8,14,40,.2) 0%,rgba(6,10,30,.96) 60%,rgba(6,10,30,.98) 100%)}
.fs-card:hover .fs-overlay{opacity:1;visibility:visible;transition:opacity .3s ease}
.fs-badge{margin-bottom:auto;background:var(--color-secondary);color:#fff;font-size:12.5px;font-weight:600;padding:5px 14px;border-radius:50px}
.fs-overlay-title{font-family:var(--font-heading);font-size:1.25rem;font-weight:700;margin:0 0 2px}
.fs-overlay-sub{font-size:.85rem;color:#d7dcf2;margin-bottom:8px}
.fs-overlay-tags{font-size:.78rem;text-transform:uppercase;letter-spacing:.3px;color:#9fb2e0;margin-bottom:18px}
.fs-body{padding:18px 20px}
.fs-title{font-family:var(--font-heading);font-size:1.05rem;font-weight:700;color:#0c1f52;margin:0 0 4px}
.fs-tags{font-size:.82rem;color:#7783a1}

.fs-empty{text-align:center;color:#7783a1;margin-top:30px}


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

   @media (max-width:1450px) {
   .services-carousel .service-card{min-height: 520px;}
   .hero-content {padding: 0;}
   .bbox {bottom: 3rem;}
   }

   @media (max-width:1250px) {
   #Bannerslider .owl-dots {bottom: 1rem;}
   .bbox {bottom: 1rem;}
   }

   @media (max-width:1199px){
   .bbox {bottom: 5rem;}    
   .hero-content{padding:0}    
   .ts-card{min-height: auto; height: 135px;} 
   .hero-title,.hero-eyebrow{font-size: 35px;}
   #Bannerslider .bannerNrml {height: 640px;}
   .about-hero-section{height: 500px;}
   #Bannerslider.owl-carousel{min-height: auto;}
   .topbar-link{font-size: 14px;}
   .about-hero-title,.section-heading{font-size: 30px;}
   .stat-item {padding: 0 30px;}
   .whoweare-card {padding: 26px 18px;}
   .service-card, .zibal-box{padding: 24px 18px;}
   .careers-heading,.wwu-heading, .zibal-heading {font-size: 35px;}
   .careers-heading span{margin-left: 10px ;display:inline;}
   }
    
   @media (max-width:991.98px){
   .fs-grid{grid-template-columns:repeat(2,1fr)}   
   .contact-card {padding: 26px;} 
   .fp-heading{font-size:26px}
   .fp-slide .row{min-height:auto}
   .fp-media,.fp-media img{min-height:380px;height:380px}
   .fp-content{padding:30px 24px}
   .fp-num{font-size:60px} 
   .wh-image-wrap{margin-bottom:30px}  
   .about-hero-section{height:400px;padding-top:7rem}
   .contact-hero-section {height: 400px;}
   .faq-image-side{border-radius:20px;min-height:350px;margin-top:30px}
   .faq-wrapper{flex-direction:column}
   .faq-image-wrap,.faq-section{width:100%}
   .stat-item{padding:0 14px}
   .faq-image-side{border-radius:20px;min-height:350px;margin-top:30px}
   .faq-wrapper{flex-direction:column}
   .faq-image-wrap,.faq-section{width:100%}
   .section-heading,.service-heading,.team-heading{font-size:30px}
   .service-image-wrap{margin-top:40px}
   .whoweare-stats{flex-wrap:inherit;padding-top:24px;margin-bottom:24px}
   .stat-value{font-size:22px}
   .stat-icon{width:40px;height:40px;border-radius:4px;font-size:17px}
   .stat-box .stat-label{font-size:13px}
   .hero{min-height:auto;padding:2.5rem 0 3.5rem}
   .hero-overlay{background:linear-gradient(180deg,rgba(6,6,19,.55),var(--color-bg) 85%)}
   .about-hero-title,.heading-white,.hero-eyebrow,.hero-title,.section-heading,.stat-number,.contact-heading,.talk-heading,.findus-heading{font-size:24px}
   #Bannerslider .bannerNrml{height:600px;background-position: right;}
   .lets-talk-wrap .common-btn,.op-step-icon{display:none}
   .site-nav .nav-item-first .lets-talk-wrap .common-btn{display:inline-flex;margin:18px 18px 0}
   .ow-extra-grid{grid-template-columns:1fr}
   .ow-grid{grid-template-columns:1fr}
   .ow-left{grid-row:auto}
   .ow-left .ow-card{min-height:600px}
   .ow-card,.ow-extra-grid .ow-card{min-height:360px}
   .ow-extra.show{display:inline-block;margin-top:24px}
   .tst-section{padding:50px 20px 90px;background-position:center}
   .tst-inner{margin:0}
   .tst-inner h2{font-size:1.7rem}
   .tst-nav{bottom:20px;left:20px;right:auto}
   section{padding:40px 0}
   .ts-head{margin:0 auto 28px}
   .op-step{padding:14px}
   .tst-section .tst-nav{bottom:auto;right:0;left:auto}
   .zibal-wrapper{flex-direction:column}
   .zibal-image-side,.zibal-section{width:100%}
   .faq-image-side{border-radius:20px;min-height:350px;margin-top:30px}
   .watch-story-btn{border: 0 solid var(--color-border);}
   .about-hero-desc{font-size:18px}
   .wwu-media,.wwu-heading br {display: none;}
   .wwu-desc {max-width: max-content; margin-bottom: 0;}
   .careers-heading, .wwu-heading, .zibal-heading {font-size: 30px;}
   .wwu-heading span {margin-left: 10px;}
   .service-title, .zibal-box-title {font-size:20px}
   .careers-heading{font-size:2.1rem}
   .careers-media{max-width:360px;margin-top:20px}
   .featured-nav {position: absolute; right: 40px; top: 50px}
   .get-started-section .row {flex-direction: column-reverse;}
   }
   @media(max-width:820px){
   .op-grid{grid-template-columns:1fr}
   .op-steps{flex-direction:row;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
   .op-step{min-width:170px;flex-shrink:0;border-left:none;border-top:4px solid var(--c)}
   .op-step::before{left:50%;top:-7px;transform:translateX(-50%)}
   .head-section,.tst-inner h2{margin-bottom: 20px;}
   .op-detail{order:2;margin-top:20px}
   .op-steps{order:1}
   .bbox {bottom: 4rem;}
   .stat-item+.stat-item::before{display: none;}
   .ts-card {height: 100px;}
   .tst-quote{padding: 0;}
   }

   @media (max-width:767px){
   .tst-nav button,.clients-nav-btn,.services-nav-btn{height: 38px; width: 38px; font-size: 14px;}    
   .services-heading{font-size:1.9rem}
   .client-item::after,p.hero-desc br{display:none}
   .clients-nav-wrap {margin-top: 0;}
   .cta-heading{font-size:1.8rem}
   .hero-content{text-align: center;}
   .cta-box{flex-direction:column;border-radius:24px;padding:24px}
   .cta-divider{width:80%;height:1px}
   .clients-heading,.heading-white,.hero-eyebrow,.hero-title,.op-detail h3,.section-heading,.stat-number,.tst-inner h2{font-size:24px}
   .site-logo img{height:34px}
   .cta-text,.heading-subtext,.our-products .client-name,.topbar-link,.tst-quote,.zf-contact strong{font-size:14px}
   .cta-section .head-section{margin-bottom:0}
   .our-products .client-item{padding:0 2rem}
   .our-products .client-name{margin-top:0}
   .op-step{min-width:130px}
   .op-detail p.op-desc,.op-step-left .op-step-name,.op-step-left .op-step-num{font-size:16px}
   .industry-title,.ow-text h3{font-size:18px}
   .ow-left .ow-badge{top:120px;width:100px}
   .ow-card,.ow-extra-grid .ow-card{min-height:290px}
   .ow-left .ow-card{min-height:446px}
   .our-products .client-logo img{max-height:56px}
   .op-detail{padding:14px}
   .tst-quote{padding:0}
   .tst-section{padding:50px 20px 70px}
   .stat-divider,.about-hero-desc br {display:none}
   .stat-item{padding:12px 20px}
   .whoweare-stats{gap:20px}
   .map-float-card{ position:static; max-width:100%; margin:16px; animation:none;}
   .map-float-actions{top:16px;right:16px}
   .services-section .d-flex.gap-2{position:absolute;text-align:center;top:50px;right:18px}
   .services-section .text-center.mt-5,.card-underline{display:none}
   .service-card,.zibal-box{padding:20px}
   .service-title,.zibal-box-title{font-size:18px}
   .careers-heading, .wwu-heading, .zibal-heading{font-size:20px}
   .service-card,.zibal-box{min-height:360px}
   .service-text,.zibal-box-text,.about-hero-desc,.whoweare-desc,.contact-card .form-label,.services-section p,.industries-section p,.client-name,.sectioncustmm{font-size:14px}
   .services-section{padding:40px 0 70px 0}
   section{padding:30px 0}
   .ts-card{height:75px}
   .op-section .heading-subtext{margin:0 auto 20px}
   .op-grid{gap:0}
   .tst-section .tst-nav{margin:auto;text-align:center;width:65%}
   .about-hero-desc {margin-bottom: 16px;}
   .wwu-section .service-card {min-height: inherit;}
   .team-card {height: 300px;}
   .careers-desc {font-size: 14px; max-width: inherit;}
   .careers-hero-section .row {flex-direction: column-reverse;}
   button.zf-send-btn{width:100%;display:flex;align-items:center;justify-content:center}
   .watch-story-btn{gap:8px;font-size:13px;padding:8px}
   .common-btn{padding:8px 20px;font-size:13px}
   .talk-subtext{margin-bottom:24px;font-size:14px}
   .about-hero-section{height:400px;padding-top:4rem;text-align: center;}
   .about-hero-title,.contact-heading,.findus-heading,.heading-white,.hero-eyebrow,.hero-title,.section-heading,.stat-number,.talk-heading{font-size:24px}
   .about-hero-title,.heading-white,.hero-eyebrow,.hero-title,.section-heading,.service-heading,.stat-number,.team-heading{font-size:24px}
   .findus-subtext{font-size:16px;margin-bottom:24px} 
   #Bannerslider .owl-dots {bottom: 1rem;}  
   .ts-section .heading-white {margin-bottom: 0;}
   .input-group.zf-input-group {flex-wrap: nowrap;}
   .zf-send-btn {font-size: 14px; width: 100%;}
   .hero-trust.row.mt-3 {margin-top: 0rem !important;}
   p.hero-desc {text-shadow: 1px 2px 6px #000000; color: #fff; margin-bottom: 18px; margin-top: 0;font-size: 14px;}
   .about-hero-title {margin-bottom: 10px;}    
   .heading-subtext {margin: 0 auto 24px;}
   .about-hero-section.project-cost, .about-hero-section.web-app, .about-hero-section.ded-dovelop, .about-hero-section.support-hero, .about-hero-section.ai-consulting {background-position: right center; background-size: cover; text-align: center;}
   .about-hero-section.web-app,.about-hero-section,{background-position: right center; background-size: cover;}
   .about-hero-desc {color: var(--color-text);text-shadow: 1px 1px 2px #000;}
   .contact-hero-section {height: 350px;}
   .stat-value{font-size:18px}
   .about-hero-actions {justify-content: center;}
   .hero-trust {justify-content: center;}
   #Bannerslider .bannerNrml { height: 540px;}
   .hero-trust {margin-top: 4px !important;}
   .head-section.custmmstatee {margin-bottom: 0;}
   .head-section.custmmstatee h2.section-heading {margin-bottom: 5px;}
   .job-meta{margin-left:0;flex-wrap:wrap}.job-item{flex-wrap:wrap}
   .head-section.custmmstatee {margin-bottom: 0;}
   .heading-white {margin-bottom: 25px;}
   section.fp-section{padding:30px 0 60px 0}
.custom-breadcrumb-wrap{padding:15px 10px}
.fs-filter-btn{padding:10px 16px;font-size:13px}
.fp-content{padding:24px;height:auto}
.featured-nav.d-lg-flex.justify-content-end{right:0;top:auto;bottom:0;left:0;margin:18px auto 0;text-align:center;justify-content:center!important}
.fs-media{height:170px}
.fp-content h3{font-size:20px}
.fs-overlay{padding:14px}
.fs-overlay-title,.fs-title{font-size:15px}
.ts-section.service-page .ts-card{min-height:inherit;padding:0}
   }
   @media(max-width:575px){
   .heading-white,.hero-eyebrow,.hero-title,.section-heading,.stat-number,.tst-name{font-size:18px}
   .topbar a{font-size:0}
   .job-details{padding-left:20px}
   .topbar a .bi{font-size:16px;background:0 0}
   .hero-desc,.op-detail p.op-desc,.ow-text p,.tst-role,.why-text,.wwu-desc,.zibal-desc,.whoweare-card p{font-size:14px}
   .trust-item.anim-in img{height:50px;width:50px}
   .our-products .client-item{padding:0 1rem}
   .op-detail img{border-radius:6px;margin-bottom:14px;max-height:none;height:190px}
   .clients-heading,.heading-white,.hero-eyebrow,.hero-title,.op-detail h3,.section-heading,.stat-number{font-size:20px}
   #Bannerslider .bannerNrml{height:500px}
   .bbox{left:10px;bottom: 4rem;}
   .careers-media{max-width:290px}
   .section-tag-left{font-size:12px}
   .about-hero-title,.contact-heading,.findus-heading,.heading-white,.hero-eyebrow,.hero-title,.section-heading,.stat-number,.talk-heading{font-size:20px}
   .services-section .d-flex.gap-2{right:0;margin:auto;text-align:center;width:30%;bottom:20px;top:auto}
   .stat-item{padding:12px 0}
   .stat-box .stat-label{font-size:12px}
   .whoweare-stats{gap:0;display:grid;grid-template-columns:1fr 1fr}
   .about-hero-section{height:350px;padding-top:6rem}
   .career-hero-section{height:350px;}
   p.hero-eyebrow.anim-in.anim-play,.hero-title {line-height: 23px; font-size: 18px;}
   .services-carousel .service-card {min-height: inherit;}
   .fp-eyebrow::after{display:none}
   .fp-title{font-size:18px}
   .fs-grid{grid-template-columns:1fr}
   .fs-filter{gap:8px}
   .fs-filter-btn{padding:8px 18px;font-size:13px}
   .fp-media, .fp-media img {min-height: inherit; height: auto;}
   .fs-media {height: auto;}
   .about-hero-title, .heading-white, .hero-eyebrow, .hero-title, .section-heading, .service-heading, .stat-number, .team-heading {font-size: 18px;}
   }