:root {
      --bg:#ffffff;
      --muted:#fff7e6;
      --accent:#fdba2b;        /* GOLDEN YELLOW FROM LOGO */
      --blue-primary:#3b58a4;  /* DEEP BLUE FROM LOGO */
      --card-bg:rgba(255,255,255,0.03);
      --maxw:1200px;
      font-family:'Inter', sans-serif;
    }

    * {
      box-sizing: border-box;
      color: #3b58a4;
    }

    body{
      background:var(--bg);
      color:#000;
      overflow-x:hidden;
      margin:0;
      font-family:'Inter', sans-serif;
      /* space so content is not hidden behind fixed navbar */
      padding-top:90px;
    }

    #bg-canvas{
      position:fixed;
      inset:0;
      z-index:0;
    }

    /* INTRO OVERLAY */
    #logo-intro{
      position:fixed;
      inset:0;
      background:radial-gradient(circle at top, #ffffff 0%, #ffffff 55%, #ffffff 100%);
      display:flex;
      align-items:center;
      justify-content:center;
      z-index:9999;
    }

    #logo-intro img{
      max-width:220px;
      width:45vw;
      height:auto;
      filter:drop-shadow(0 0 18px rgba(0,0,0,0.65));
    }

    /* NAVBAR (FIXED TOP) */
    .navbar-custom {
      background:#ffffff;
      backdrop-filter: blur(10px);
      padding:12px 0;
      position:fixed;
      top: var(--hc-topbar-h);
      left:0;
      right:0;
      z-index:20;
      padding-bottom: 0px;
      margin-top:-3em;
    }

    .navbar-brand img{
      height:60px;
      width:auto;
      object-fit:contain;
    }

    .nav-link{
      color:var(--muted) !important;
      font-weight:600;
      font-size:14px;
    }

    .nav-link:hover{
      color:#fff !important;
    }

    .hc-btn{
      border:1px solid rgba(255,255,255,0.15);
      padding:10px 18px;
      border-radius:10px;
      color:#fff;
      font-weight:700;
      text-decoration:none;
      backdrop-filter:blur(6px);
      transition:.2s;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      font-size:14px;
    }

    .hc-btn-primary{
      background:linear-gradient(90deg, var(--accent), #fdba2b);
      color:#ffffff;
      border:none;
      box-shadow:0 6px 20px rgba(0,0,0,0.4);
    }

    .hc-btn:hover{ transform:translateY(-3px); }

    /* HERO */
    .hero-section{
      position:relative;
      z-index:10;
    }

    .eyebrow{
      color:var(--accent);
      font-weight:600;
      letter-spacing:1px;
      font-size:12px;
      margin-bottom:12px;
      text-transform:uppercase;
    }

    .hero-title{
      font-size:48px;
      font-weight:800;
      line-height:1.05;
      margin-bottom:18px;
      color:#fff;
    }

    .hero-lead{
      color:var(--muted);
      margin-bottom:28px;
      max-width:560px;
    }

    .hero-card{
      background:var(--card-bg);
      padding:20px;
      border-radius:16px;
      box-shadow:0 6px 30px rgba(0,0,0,0.6);
      backdrop-filter:blur(6px);
    }

    /* PROJECTS */
    .project-card{
      padding:20px;
      border-radius:14px;
      background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
      min-height:160px;
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
    }

    .project-card h3{
      font-size:16px;
      margin-bottom:6px;
    }

    .project-card p{
      color:var(--muted);
      font-size:14px;
      margin:0;
    }
      
    /* -------------Contact Us Start --------------------------*/

    /* CONTACT SECTION --------------------------------------------------- */
    #contact-us{
      position:relative;
      padding:4rem 0 4rem;
      background:var(--bg);
      color:var(--text);
      overflow:hidden;
    }

    #contact-us::before{
      /* subtle moving gradient just for depth */
      content:"";
      position:absolute;
      inset:-40%;
      background:
        radial-gradient(circle at 10% 0,rgba(255,201,51,.12),transparent 55%),
        radial-gradient(circle at 90% 100%,rgba(148,163,184,.18),transparent 55%);
      opacity:.7;
      pointer-events:none;
      animation:bgFloat 18s linear infinite;
    }

    @keyframes bgFloat{
      0%{transform:translate3d(0,0,0);}
      50%{transform:translate3d(-20px,15px,0);}
      100%{transform:translate3d(0,0,0);}
    }

    .contact-inner{
      position:relative;
      z-index:2;
    }

    .contact-heading{
      text-align:center;
      margin-bottom:2.2rem;
    }

    .contact-heading h2{
      text-transform:uppercase;
      letter-spacing:.14em;
      font-size:1.5rem;
      font-weight:700;
    }

    .contact-heading span{
      color:var(--accent);
    }

    .contact-heading p{
      max-width:40rem;
      margin:.7rem auto 0;
      color:var(--muted);
      font-size:.95rem;
    }

    /* MAP CARD ---------------------------------------------------------- */
    .contact-map-card{
      background:#ffffff;
      border-radius:var(--radius);
      box-shadow:0 20px 60px rgba(0,0,0,.9);
      border:1px solid rgba(148,163,184,.35);
      overflow:hidden;
      opacity:0;
      transform:translateX(-30px);
      transition:opacity .8s ease, transform .8s cubic-bezier(.19,1,.22,1);
    }

    .contact-map-card.in-view{
      opacity:1;
      transform:translateX(0);
    }

    .contact-map-card iframe{
      display:block;
      width:100%;
      height:100%;
      min-height:320px;
      border:0;
      filter:warmscale(.1) contrast(1.05) saturate(1.2);
    }

    /* FORM CARD --------------------------------------------------------- */
    .contact-form-card{
      background:var(--card);
      border-radius:var(--radius);
      box-shadow:0 20px 60px rgba(0,0,0,.9);
      border:1px solid rgba(148,163,184,.35);
      padding:2.1rem 2rem 1.9rem;
      opacity:0;
      transform:translateX(30px);
      transition:opacity .8s ease, transform .8s cubic-bezier(.19,1,.22,1);
      position:relative;
      overflow:hidden;
    }

    .contact-form-card::before{
      /* glowing strip right side */
      content:"";
      position:absolute;
      top:-20%;
      right:-40%;
      width:50%;
      height:140%;
      background:radial-gradient(circle at left,rgba(255,201,51,.35),transparent 60%);
      opacity:.3;
    }

    .contact-form-card.in-view{
      opacity:1;
      transform:translateX(0);
    }

    .contact-form-card h3{
      font-size:1.35rem;
      margin-bottom:1.4rem;
    }

    .form-label{
      font-size:.85rem;
      color:var(--muted);
    }

    .form-control.contact-input{
      background:transparent;
      border-radius:0;
      border-width:0 0 2px 0;
      border-color:rgba(148,163,184,.7);
      color:var(--text);
      padding-left:0;
      padding-right:0;
      font-size:.93rem;
    }

    .form-control.contact-input:focus{
      box-shadow:none;
      border-color:var(--accent);
    }

    .btn-contact{
      background:var(--accent);
      border:none;
      color:#3b58a4;
      font-weight:600;
      padding:.6rem 2.6rem;
      border-radius:.4rem;
      margin-top:1.1rem;
      position:relative;
      overflow:hidden;
    }

    .btn-contact::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(120deg,transparent,rgba(255,255,255,.6),transparent);
      transform:translateX(-130%);
      pointer-events:none;
    }

    .btn-contact.glow{
      animation:btnGlow 4s ease-in-out infinite;
    }

    @keyframes btnGlow{
      0%{box-shadow:0 0 0 rgba(255,201,51,0);}
      40%{box-shadow:0 0 22px rgba(255,201,51,.9);}
      100%{box-shadow:0 0 0 rgba(255,201,51,0);}
    }

    .btn-contact.glow::after{
      animation:btnShine 4s ease-in-out infinite;
    }

    @keyframes btnShine{
      0%{transform:translateX(-130%);}
      45%{transform:translateX(130%);}
      100%{transform:translateX(130%);}
    }

    @media (max-width:991.98px){
      #contact-us{padding-inline:1.1rem;}
      .contact-map-card{margin-bottom:2rem;}
    }
  /* -------------------Contact Us End ----------------------------*/







        /* ================= SERVICES STRIP SECTION ================= */

    
        /* SECTION BACKGROUND (tech style) */
    .services-section{
      position:relative;
      padding:4.5rem 0;
      overflow:hidden;
      color:#fff;
    }
    .services-section::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:url("https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=1600&q=80");
      opacity: 0.2;
      background-size:cover;
      background-position:center;
      filter:brightness(0.6) saturate(1.3);
      z-index:-2;
    }
    .services-section::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(to bottom,rgba(0,0,0,.35),rgba(0,0,0,.9));
      z-index:-1;
    }

    .services-inner{
      position:relative;
      z-index:1;
    }

    .section-label{
      text-transform:uppercase;
      letter-spacing:.18em;
      font-size:.78rem;
      color:#fff7e6;
    }
    .section-title{
      font-size:clamp(1.8rem,3vw,2.2rem);
      font-weight:700;
      margin-top:.5rem;
    }
    .section-sub{
      max-width:36rem;
      font-size:.96rem;
      color:#fff7e6;
    }

    /* SERVICE CARDS */
    .service-card{
      background:var(--card-bg);
      border-radius:var(--radius);
      border:1px solid var(--border);
      box-shadow:0 0 0 rgba(250,204,21,0);
      padding:1.7rem 1.6rem 1.4rem;
      height:100%;
      display:flex;
      flex-direction:column;
      justify-content:space-between;

      /* fade-in start */
      opacity:0;
      transform:translateY(40px);
      transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.19,1,.22,1),
        border-color .4s ease,
        box-shadow .4s ease;
    }

    /* when card enters view: fade in / move up */
    .service-card.in-view{
      opacity:1;
      transform:translateY(0);
    }

    /* glowing + soft fade in/out loop */
    .service-card.glow{
      animation:cardGlow 5.5s ease-in-out infinite;
    }
    @keyframes cardGlow{
      0%{
        box-shadow:0 0 0 rgba(250,204,21,0);
        border-color:var(--border);
        opacity:1;
      }
      40%{
        box-shadow:0 0 32px rgba(250,204,21,.9);
        border-color:rgba(250,204,21,1);
        opacity:.96;
      }
      80%{
        box-shadow:0 0 14px rgba(250,204,21,.4);
        border-color:rgba(250,204,21,.7);
        opacity:1;
      }
      100%{
        box-shadow:0 0 0 rgba(250,204,21,0);
        border-color:var(--border);
        opacity:1;
      }
    }

    .service-icon{
      width:2.6rem;
      height:2.6rem;
      border-radius:50%;
      border:2px solid var(--accent);
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:1.3rem;
      margin-bottom:1.1rem;
    }

    .service-title{
      font-size:1.05rem;
      font-weight:700;
      margin-bottom:.4rem;
      color: #000 !important;
    }

    .service-desc{
      font-size:.9rem;
      color:#fff7e6;
      margin-bottom:1.3rem;
    }

    .service-footer{
      border-top:1px solid rgba(55,65,81,.9);
      padding-top:.7rem;
      display:flex;
      justify-content:space-between;
      align-items:center;
      font-size:.8rem;
      color:var(--muted);
    }

    .service-tag{
      display:flex;
      align-items:center;
      gap:.35rem;
    }
    .service-tag span.dot{
      width:.45rem;
      height:.45rem;
      border-radius:50%;
      border:1px solid var(--accent);
    }

    .service-link{
      display:inline-flex;
      align-items:center;
      gap:.25rem;
      text-decoration:none;
      color:#fff7e6;
      font-weight:500;
    }
    .service-link-icon{
      font-size:.8rem;
    }

    @media (max-width:991.98px){
      .services-section{
        padding-inline:1.2rem;
      }
    }
    @media (max-width:575.98px){
      .service-card{
        padding:1.5rem 1.4rem 1.3rem;
      }
    }

    

  

   
     /* ====== SERVICES SECTION WRAPPER ====== */




    #hc-services{
      padding:80px 12px;
    }
    #hc-services .section-eyebrow{
      text-transform:uppercase;
      letter-spacing:.2em;
      font-size:.78rem;
      color:var(--hc-muted);
      text-align:center;
      margin-bottom:.4rem;
    }
    #hc-services .section-title{
      text-align:center;
      font-size:1.4rem;
      font-weight:800;
      letter-spacing:.08em;
      margin-bottom:1rem;
    }
    #hc-services .section-sub{
      text-align:center;
      color:var(--hc-muted);
      max-width:640px;
      margin:0 auto 2.2rem;
      font-size:.9rem;
    }

    /* ====== CARDS LAYOUT ====== */
    .hc-services-deck{
      max-width:1100px;
      margin:0 auto;
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:18px;
    }
    @media (max-width:991.98px){
      .hc-services-deck{
        grid-template-columns:repeat(2,minmax(0,1fr));
      }
    }
    @media (max-width:575.98px){
      .hc-services-deck{
        grid-template-columns:1fr;
      }
    }

    /* ====== SINGLE CARD ====== */
    .hc-service-card{
      position:relative;
      background:var(--hc-card-bg);
      border-radius:22px;
      padding:20px 18px 18px;
      border:1px solid var(--hc-border);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      min-height:190px;
      overflow:hidden;
      cursor:pointer;

      /* enter animation initial state */
      opacity:0;
      transform:translateY(24px) scale(.96);
      transition:
        opacity .6s ease,
        transform .6s cubic-bezier(.19,1,.22,1),
        box-shadow .25s ease,
        border-color .25s ease,
        background .25s ease;
    }

    /* glowing border using gradient mask */
    .hc-service-card::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      padding:1px;
      background:radial-gradient(circle at 0 0,
                  rgba(255,255,255,.9),
                  rgba(255,178,0,.9),
                  rgba(59,130,246,.8),
                  transparent 80%);
      -webkit-mask:
        linear-gradient(#ffffff 0 0) content-box,
        linear-gradient(#ffffff 0 0);
      -webkit-mask-composite:xor;
              mask-composite:exclude;
      opacity:0;
      transition:opacity .25s ease;
      pointer-events:none;
    }

    .hc-service-card:hover{
      transform:translateY(-6px) scale(1.02);
      box-shadow:0 20px 60px rgba(0,0,0,.7);
      border-color:rgba(255,255,255,.15);
      background:#ffffff;
    }
    .hc-service-card:hover::before{
      opacity:1;
    }

    /* card content */
    .hc-service-icon{
      width:44px;
      height:44px;
      border-radius:14px;
      background:#3b58a4;
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--hc-accent);
      font-size:1.25rem;
      margin-bottom:10px;
      position:relative;
      overflow:hidden;
    }

    /* small pulsing halo inside icon */
    .hc-service-icon::after{
      content:"";
      position:absolute;
      width:120%;
      height:120%;
      border-radius:inherit;
      border:1px solid rgba(255,178,0,.4);
      inset:auto;
      animation:hcPulse 2.6s infinite;
    }

    @keyframes hcPulse{
      0%   { transform:scale(.2); opacity:0; }
      30%  { transform:scale(1);   opacity:.8; }
      60%  { transform:scale(1.4); opacity:0; }
      100% { transform:scale(1.4); opacity:0; }
    }

    .hc-service-title{
      font-size:.98rem;
      font-weight:700;
      margin-bottom:4px;
    }
    .hc-service-text{
      font-size:.86rem;
      color:var(--hc-muted);
      margin-bottom:12px;
    }

    .hc-service-footer{
      font-size:.8rem;
      color:var(--hc-muted);
      display:flex;
      justify-content:space-between;
      align-items:center;
    }
    .hc-service-footer span:last-child{
      color:var(--hc-accent);
      font-weight:600;
    }

    /* highlight last card slightly */
    .hc-service-card--highlight{
      background:#ffffff;
      border-color:rgba(255,255,255,.18);
    }

   
    




               /* ================== INDUSTRIES – MINIMAL RICH LOOK ================== */




    






    /* About us */

    
    /* SECTION */
    .hc-tabs-section{
      padding:80px 12px 90px;
    }
    .hc-tabs-container{
      max-width:1200px;
      margin:0 auto;
    }

    .hc-eyebrow{
      text-transform:uppercase;
      letter-spacing:.2em;
      font-size:.78rem;
      color:var(--muted);
      text-align:center;
      margin-bottom:6px;
    }
    .hc-heading{
      text-align:center;
      font-weight:800;
      letter-spacing:.09em;
      font-size:1.02rem;
      margin-bottom:26px;
    }

    /* TAB BAR */
    .hc-tab-bar-wrap{
      display:flex;
      justify-content:center;
      margin-bottom:24px;
    }

    .hc-tab-bar{
      position:relative;
      display:inline-flex;
      border-radius:999px;
      padding:4px;
      background:rgba(255,255,255,0.02);
      border:1px solid rgba(255,255,255,0.16);
      backdrop-filter:blur(14px);
      box-shadow:0 16px 40px rgba(0,0,0,0.7);
    }

    .hc-tab-highlight{
      position:absolute;
      top:4px;
      bottom:4px;
      border-radius:999px;
      background:linear-gradient(90deg,var(--accent-soft),var(--accent));
      box-shadow:0 0 22px rgba(255,178,0,0.9);
      z-index:1;
      transition:all .24s cubic-bezier(.32,.72,.29,1);
    }

    .hc-tab-bar .nav-link{
      border-radius:999px;
      border:none;
      background:transparent;
      padding:9px 26px;
      position:relative;
      z-index:2;
      font-size:.88rem;
      font-weight:600;
      color:#fff7e6;
      white-space:nowrap;
      transition:color .18s ease, transform .18s ease;
    }
    .hc-tab-bar .nav-link:hover{
      color:#000 !important;
      transform:translateY(-1px);
    }
    .hc-tab-bar .nav-link.active{
      color:#000 !important;
    }

    /* PANEL SHELL (transparent / glass) */
    .hc-panel-shell{
      border-radius:26px;
      padding:1px;
      background:radial-gradient(circle at top left, rgba(255,178,0,0.55), rgba(0,87,183,0.7), rgba(0,0,0,0.9));
      box-shadow:0 24px 70px rgba(0,0,0,0.9);
      backdrop-filter:blur(20px);
    }
    .hc-panel-inner{
      border-radius:25px;
      background:linear-gradient(145deg, rgba(11,14,35,0.97), rgba(4,5,17,0.96));
      border:1px solid rgba(255,255,255,0.08);
      padding:24px 22px 14px;
    }

    .hc-subtitle{
      font-size:.86rem;
      text-transform:uppercase;
      letter-spacing:.16em;
      color:var(--muted);
      margin-bottom:4px;
    }
    .hc-title{
      font-size:1.18rem;
      font-weight:700;
      margin-bottom:18px;
    }

    /* FEATURE ROWS */
    .feature-row{
      border-radius:18px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,0.08);
      background:rgba(0,0,0,0.12);
      margin-bottom:10px;
    }

    .feature-box{
      position:relative;
      padding:16px 16px 14px;
      background:radial-gradient(circle at top left, rgba(255,255,255,0.04), rgba(0,0,0,0.85));
      display:flex;
      align-items:flex-start;
      gap:12px;
      opacity:0; /* animated in by GSAP */
    }
    .feature-box::before{
      content:"";
      position:absolute;
      inset:-1px;
      border-radius:inherit;
      background:linear-gradient(135deg, rgba(255,255,255,0), rgba(255,178,0,0.6), rgba(0,87,183,0.7));
      mix-blend-mode:screen;
      opacity:0;
      transition:opacity .25s ease;
      pointer-events:none;
    }
    .feature-box:hover::before{
      opacity:.55;
    }
    .feature-box:hover{
      box-shadow:0 18px 50px rgba(0,0,0,0.8);
    }

    .feature-icon{
      flex:0 0 40px;
      width:40px;
      height:40px;
      border-radius:14px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:1.2rem;
      background:radial-gradient(circle at 20% 0,#ffffff 0,#fff7e6 18%,var(--blue) 100%);
      box-shadow:0 0 18px rgba(0,140,255,0.85);
    }

    .feature-title{
      font-size:.96rem;
      font-weight:700;
      margin-bottom:2px;
    }
    .feature-text{
      font-size:.86rem;
      color:var(--muted);
      margin:0;
      line-height:1.6;
    }

    /* borders between cells */
    .feature-divider{
      border-left:1px solid rgba(255,255,255,0.08);
    }
    .feature-divider-row{
      border-top:1px solid rgba(255,255,255,0.08);
    }


    /* FOOTER */

         /* bottom bar */
    .hc-footer-bottom{
      max-width:1200px;
      margin:0 auto;
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      color:var(--muted);
      font-size:.82rem;
    }

    .hc-footer-social a{
      text-decoration:none;
      color:var(--muted);
      font-size:1.1rem;
      margin-right:10px;
      display:inline-flex;
      width:32px;
      height:32px;
      border-radius:999px;
      align-items:center;
      justify-content:center;
      border:1px solid rgba(255,255,255,0.12);
      transition:background .25s ease, color .25s ease, transform .25s ease;
    }
    .hc-footer-social a:hover{
      background:#ffffff;
      color:#ffffff;
      transform:translateY(-2px);
    }

    .hc-footer-links a{
      text-decoration:none;
      color:var(--muted);
      margin-left:14px;
    }
    .hc-footer-links a:hover{
      color:#ffffff;
    }


    footer{
      padding:40px 0;
      color:var(--muted);
      position:relative;
      z-index:10;
    }

    /* RESPONSIVE */
    @media (max-width:992px){
      .hero-title{ font-size:38px; }
    }

    @media (max-width:576px){
      .hero-title{ font-size:30px; }
      body{ padding-top:78px; } /* smaller nav height on mobile */
    }
        
    /*-----footer------*/

     @media (max-width:991.98px){
      .hc-footer-brand-block{
        border-right:none;
        border-bottom:1px solid #fff7e6;
        margin-bottom:18px;
        padding-bottom:18px;
      }
    }
    @media (max-width:575.98px){
      .hc-footer-card{
        padding:24px 18px 20px;
      }
    }




       /*---- Our-Services---*/

        /* MOBILE stacking (optional) */
    @media (max-width: 575.98px){
      .services-strip-wrapper{
        padding-inline:1.2rem;
      }
      .service-card{
        flex:0 0 82%;
         padding:1.6rem 1.3rem 1.2rem;
      }
      .service-card.active{
        flex-basis:100%;
         padding:1.6rem 1.3rem 1.2rem;
      }
    }



     /* Industries Responsive */

     /* responsive spacing */
@media (max-width: 991.98px) {
  .industries-clean {
    padding: 70px 10px 80px;
  }
}
@media (max-width: 575.98px) {
  .industries-clean-title {
    font-size: .95rem;
  }
}


    /* About us Responsive */

     /* responsive */
    @media (max-width:991.98px){
      .hc-tabs-section{ padding:70px 10px 80px; }
      .feature-divider{
        border-left:none;
        border-top:1px solid rgba(255,255,255,0.08);
      }
    }
    @media (max-width:575.98px){
      .hc-heading{
        font-size:.95rem;
      }
      .hc-panel-inner{
        padding-inline:16px;
      }
      .hc-tab-bar .nav-link{
        padding-inline:18px;
      }
    }



/* ===================== LOGO PALETTE PREMIUM OVERRIDE =====================
   Palette requested:
   Primary: #3b58a4
   Accent : #fdba2b
   Background: white
   Adds luxury animations + shimmer + animated gradient text
   ===================================================================== */

:root{
  --hc-primary:#3b58a4;
  --hc-accent:#fdba2b;

  /* White-first UI tokens */
  --hc-bg:#ffffff;
  --hc-surface:#ffffff;
  --hc-surface2:#fff7e6; /* warm off-white, not warm */
  --hc-ink:#3b58a4;      /* text color per logo */
  --hc-ink-soft:#3b58a4; /* still blue family */
  --hc-border: rgba(59, 88, 164, .18);
  --hc-border2: rgba(253, 186, 43, .35);

  --hc-shadow: 0 18px 55px rgba(59, 88, 164, .18);
  --hc-shadow2: 0 18px 55px rgba(253, 186, 43, .16);

  --hc-radius: 18px;
}

/* Global */
html, body{
  background: var(--hc-bg) !important;
  color: var(--hc-ink) !important;
}

body{
  /* soft luxury halos on white */
  background:
    radial-gradient(900px 520px at 10% 8%, rgba(253,186,43,.22), transparent 60%),
    radial-gradient(900px 520px at 92% 12%, rgba(59,88,164,.18), transparent 60%),
    radial-gradient(900px 520px at 55% 92%, rgba(253,186,43,.12), transparent 62%),
    #ffffff !important;
}

/* Navbar */
.navbar-custom{
  background: rgba(255,255,255,.78) !important;
  border-bottom: 1px solid var(--hc-border) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.navbar-custom .nav-link{
  color: var(--hc-ink) !important;
  opacity: .92;
}
.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active{
  color: var(--hc-primary) !important;
}

/* Base muted text (no warm) */
:where(.hero-lead, .section-sub, .industries-clean-eyebrow, .hc-eyebrow, .hc-subtitle, p){
  color: var(--hc-ink-soft) !important;
}

/* Headings with animated luxury gradient */
:where(.hero-title, .section-title, .industries-clean-title, .hc-heading, h1, h2, h3){
  color:#fff !important;
}
.hero-title{
  background: linear-gradient(90deg, var(--hc-primary), var(--hc-accent), var(--hc-primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  background-size: 220% 100%;
  animation: hcTextShift 6s ease-in-out infinite;
  text-shadow: 0 10px 30px rgba(253,186,43,.12);
}
@keyframes hcTextShift{
  0%,100%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
}

/* Cards / tiles: premium glass-on-white with animated border glow */
:where(.hero-card, .project-card, .ind-tile, .service-card, .hc-panel-shell, .hc-panel-inner,
       .contact-map-card, .contact-form-card, .feature-box){
  position: relative;
  background: rgba(255,255,255,.82) !important;
  border: 1px solid var(--hc-border) !important;
  border-radius: var(--hc-radius) !important;
  box-shadow: var(--hc-shadow) !important;
  overflow: hidden;
}

:where(.hero-card, .project-card, .ind-tile, .service-card, .feature-box)::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  background: conic-gradient(from 180deg,
    rgba(253,186,43,.0),
    rgba(253,186,43,.55),
    rgba(59,88,164,.55),
    rgba(253,186,43,.0)
  );
  opacity:.65;
  filter: blur(10px);
  animation: hcBorderSpin 7.5s linear infinite;
  pointer-events:none;
  z-index:0;
}
@keyframes hcBorderSpin{
  to{ transform: rotate(360deg); }
}

:where(.hero-card, .project-card, .ind-tile, .service-card, .feature-box)::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius: inherit;
  background: rgba(255,255,255,.90);
  pointer-events:none;
  z-index:0;
}
:where(.hero-card, .project-card, .ind-tile, .service-card, .feature-box) > *{
  position: relative;
  z-index: 1;
}

/* Hover lift + glow */
:where(.project-card, .ind-tile, .service-card, .feature-box){
  transition: transform .22s ease, box-shadow .22s ease;
}
:where(.project-card:hover, .ind-tile:hover, .service-card:hover, .feature-box:hover){
  transform: translateY(-6px);
  box-shadow: var(--hc-shadow), var(--hc-shadow2) !important;
}

/* Buttons: gold shimmer sweep */
.hc-btn{
  position: relative;
  border-radius: 999px !important;
  border: 1px solid rgba(59,88,164,.35) !important;
  color: var(--hc-primary) !important;
  background: rgba(255,255,255,.85) !important;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 12px 35px rgba(59,88,164,.12);
}
.hc-btn::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width: 50%;
  height: 180%;
  background: linear-gradient(90deg, transparent, rgba(253,186,43,.55), transparent);
  transform: rotate(18deg);
  animation: hcShimmer 2.8s ease-in-out infinite;
  opacity:.85;
}
@keyframes hcShimmer{
  0%{ left:-60%; }
  60%{ left:120%; }
  100%{ left:120%; }
}
.hc-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 46px rgba(253,186,43,.18), 0 16px 46px rgba(59,88,164,.16);
}

.hc-btn-primary{
  border: 1px solid rgba(253,186,43,.70) !important;
  background: linear-gradient(90deg, rgba(253,186,43,.95), rgba(253,186,43,.70)) !important;
  color: #ffffff !important;
}
.hc-btn-primary::before{
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.70), transparent);
}

/* Links */
a{ color: var(--hc-primary) !important; }
a:hover{ color: var(--hc-accent) !important; }

/* Service link underline + arrow glow */
.service-link{
  position: relative;
}
.service-link span{
  color: var(--hc-primary) !important;
}
.service-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0%;
  height:2px;
  background: linear-gradient(90deg, var(--hc-accent), var(--hc-primary));
  transition: width .22s ease;
  border-radius: 999px;
}
.service-card:hover .service-link::after{
  width:100%;
}

/* Footer */
footer{
  background: rgba(255,255,255,.90) !important;
  border-top: 1px solid var(--hc-border) !important;
  color: var(--hc-primary) !important;
}



#logo-intro{
  background: radial-gradient(700px 420px at 50% 40%, rgba(253,186,43,.22), transparent 62%),
              linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,247,230,.98)) !important;
}
#logo-intro img{
  filter: drop-shadow(0 18px 40px rgba(59,88,164,.22)) drop-shadow(0 18px 40px rgba(253,186,43,.18));
}




/* =========================
   Premium White Theme Tweaks
   Requested fixes:
   1) Topbar fixed at very top (no gap)
   2) Navbar fixed directly under topbar
   3) Remove grey frame behind industries
   4) Industries headings gold + tile text black
   5) Nav underline animation on hover
   6) Services technology banner (animated)
   ========================= */

:root{
  --hc-topbar-h: 38px;
  --hc-gold: #fdba2b;
  --hc-blue: #3b58a4;
}

/* Topbar */
.hc-topbar{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid rgba(59,88,164,.15);
}
.hc-topbar-wrap{
  height: var(--hc-topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.hc-topbar-left{
  display:flex;
  gap: 16px;
  align-items:center;
  flex-wrap: wrap;
  font-size: 13px;
  color:#000;
}
.hc-topbar-left i{ color: var(--hc-gold); margin-right:6px; }
.hc-topbar-right{
  display:flex;
  gap: 12px;
  align-items:center;
}
.hc-topbar-right a{
  color:#000;
  text-decoration:none;
  font-size: 15px;
  transition: transform .25s ease, color .25s ease;
}
.hc-topbar-right a:hover{ color: var(--hc-blue); transform: translateY(-1px); }

/* Navbar: stick below topbar, no negative top */
.navbar-custom{
  top: var(--hc-topbar-h) !important;
  background:#ffffff !important;
  border-bottom: 1px solid rgba(59,88,164,.12);
  box-shadow: 0 16px 50px rgba(59,88,164,.08);
}
body{
  padding-top: calc(var(--hc-topbar-h) + 92px) !important; /* topbar + navbar space */
  background:#ffffff !important;
  color:#000 !important;
}

/* Nav links: black + luxury underline */
.navbar .nav-link{
  color:#000 !important;
  font-weight: 700;
  position: relative;
}
.navbar .nav-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-7px;
  width:0%;
  height:2px;
  background: linear-gradient(90deg, var(--hc-blue), var(--hc-gold));
  transition: width .35s ease;
  border-radius: 999px;
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after{
  width:100%;
}

/* Keep CTA button crisp */
.hc-btn{
  color:#000 !important;
  border:1px solid rgba(59,88,164,.25) !important;
  background: #ffffff !important;
}
.hc-btn:hover{
  border-color: rgba(253,186,43,.65) !important;
  box-shadow: 0 18px 40px rgba(253,186,43,.18) !important;
}

/* ===== Services Technology Banner ===== */
.hc-services-banner{
  background:
    radial-gradient(circle at 15% 30%, rgba(59,88,164,.10), transparent 55%),
    radial-gradient(circle at 85% 70%, rgba(253,186,43,.22), transparent 55%),
    #ffffff;
  padding: 82px 0 40px;
}
.hc-services-banner-inner{
  text-align:center;
  padding: 22px 18px;
}
.hc-services-eyebrow{
  margin:0;
  font-weight: 800;
  letter-spacing: .24em;
  font-size: .78rem;
  color: var(--hc-blue);
  animation: hcFadeUp .75s ease both;
}
.hc-services-title{
  margin: 12px 0 10px;
  font-weight: 900;
  font-size: clamp(32px, 4.3vw, 56px);
  line-height: 1.05;
  color: #000;
  background: linear-gradient(90deg, var(--hc-blue), var(--hc-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: hcTitleGlow 2.8s ease-in-out infinite alternate;
}
.hc-services-sub{
  margin: 0 auto;
  max-width: 760px;
  font-size: 17px;
  color: #000;
  opacity: .78;
  animation: hcFadeUp 1.05s ease both;
}
@keyframes hcFadeUp{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}
@keyframes hcTitleGlow{
  from{ filter: drop-shadow(0 0 0 rgba(253,186,43,0)); }
  to{ filter: drop-shadow(0 0 18px rgba(253,186,43,.35)); }
}

/* ===== Industries fixes: remove grey frame, make heading gold, text black ===== */
.industries-frame{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.industries-clean-eyebrow{
  color: var(--hc-blue) !important;
}
.industries-clean-title{
  color: var(--hc-gold) !important;
}
.ind-tile{
  background: #ffffff !important;
  color: #000 !important;
  border: 1px solid rgba(253,186,43,.55) !important;
  box-shadow: 0 18px 55px rgba(59,88,164,.10) !important;
}
.ind-tile-label,
.ind-tile-title,
.ind-tile-copy{
  color:#000 !important;
}
.ind-tile:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 80px rgba(253,186,43,.18) !important;
}

/* Mobile spacing for topbar + navbar */
@media (max-width: 768px){
  :root{ --hc-topbar-h: 58px; }
  .hc-topbar-wrap{ align-items:flex-start; padding: 8px 0; height: auto; }
  body{ padding-top: 150px !important; }
}

/* =========================
   INDUSTRIES: REMOVE ALL BOX ANIMATIONS
   (Paste at END of main.css)
   ========================= */

/* Stop any animation/transition on the 9 tiles and their children */
.ind-tile,
.ind-tile *{
  animation: none !important;
  transition: none !important;
}

/* Stop hover lift/scale/transform (no movement) */
.ind-tile:hover{
  transform: none !important;
}

/* If any pseudo-element effects are animating (glow/shine/spin), kill them */
.ind-tile::before,
.ind-tile::after{
  animation: none !important;
  transition: none !important;
}

/* Optional: keep hover looking same as normal (no extra glow change) */
.ind-tile:hover{
  box-shadow: 0 18px 55px rgba(59,88,164,.10) !important;
  border-color: rgba(253,186,43,.55) !important;
}

/* =========================
   INDUSTRIES: REMOVE BACKGROUND COLORS / GRADIENTS
   ========================= */

/* Main industry tile background */
.ind-tile{
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.08) !important;
}

/* Remove any animated / gradient overlays */
.ind-tile::before,
.ind-tile::after{
  display: none !important;
  content: none !important;
}

/* Ensure hover does not re-add color */
.ind-tile:hover{
  background: #ffffff !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.10) !important;
}

/* If wrapper frame is adding tint */
.industries-frame{
  background: transparent !important;
  border: none !important;
}

/* =========================================================
   CORE STRENGTHS BOXES -> MATCH INDUSTRIES BOX STYLE
   Paste at END of main.css
   Targets: .feature-box cards (Core Strengths section)
   ========================================================= */

/* Make the outer rows look clean (optional but helps match) */
.feature-row{
  background: transparent !important;
  border: none !important;
  border-radius: 18px !important;
  overflow: visible !important;
}

/* MAIN CARD */
.feature-box{
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(253,186,43,.55) !important;  /* gold border */
  border-radius: 18px !important;
  box-shadow: 0 18px 55px rgba(59,88,164,.10) !important; /* soft shadow */
  opacity: 1 !important;         /* remove hidden/animated state */
  transform: none !important;    /* remove lift/slide */
  transition: none !important;   /* remove animation */
}

/* Remove glow/gradient overlays from earlier styles */
.feature-box::before,
.feature-box::after{
  display: none !important;
  content: none !important;
}

/* Text colors (black like Industries) */
.feature-title{
  color: #000 !important;
}
.feature-text{
  color: #000 !important;
  opacity: .78;
}

/* Make the mini label (if any) black-ish */
.hc-subtitle{
  color: #000 !important;
  opacity: .70;
}

/* Icon style to match the Industries icon chip */
.feature-icon{
  background: #ffffff !important;
  box-shadow: none !important;
  /* border: 1px solid rgba(253,186,43,.75) !important; */
  color: #000 !important;
}

/* Remove hover glow/lift if present */
.feature-box:hover{
  transform: none !important;
  box-shadow: 0 18px 55px rgba(59,88,164,.10) !important;
}
.feature-box:hover::before{
  opacity: 0 !important;
}

/* Remove internal dividers that make it look “panel-like” */
.feature-divider{
  border-left: none !important;
}
.feature-divider-row{
  border-top: none !important;
}

/* =========================================================
   HOME HERO BANNER + NAVBAR FIX (MOBILE RESPONSIVE)
   Paste ONCE at the VERY END of main.css
   ========================================================= */

/* Navbar height variables (desktop/mobile) */
:root{
  --hc-topbar-h: 0px !important;   /* topbar disabled */
  --hc-nav-h: 110px;              /* desktop navbar height */
  --hc-nav-h-m: 78px;             /* mobile navbar height */
}

/* Keep canvas behind everything */
#bg-canvas{
  position: fixed;
  inset: 0;
  z-index: 0;
}

/* Ensure all page sections sit above the canvas */
body > *:not(#bg-canvas):not(#logo-intro){
  position: relative;
  z-index: 2;
  /* padding-top: 0;
  padding-bottom: 0; */
}

/* FORCE NAVBAR AT TOP (NO GAP) */
.navbar-custom{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin-top: 0 !important;
  z-index: 9999 !important;
}

/* Keep page content from hiding behind fixed navbar */
body{
  padding-top: var(--hc-nav-h) !important;
}

/* =========================
   VIDEO HERO OVERRIDES
   Paste at END of main.css
   ========================= */

.hero-section.hero-video{
  position: relative;
  overflow: hidden;

  /* FULL WIDTH */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);

  /* FULL HEIGHT (CRITICAL FIX) */
  min-height: 75vh;

  /* remove any image background from older hero rules */
  background: none !important;
  background-image: none !important;
}

/* Video element full cover */
.hero-video-bg{
  position: absolute;
  inset: 0;

  width: 100vw;
  height: 100vh;

  object-fit: cover;
  object-position: center;

  z-index: 0;

  /* subtle polish */
  filter: saturate(1.05) contrast(1.05);
  transform: scale(1.02);
}

/* Overlay for text readability */
.hero-section.hero-video .hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.25),
    rgba(0,0,0,0.15),
    rgba(0,0,0,0.35)
  );
}

/* Content above overlay (optional, safe if empty) */
.hero-section.hero-video .hero-content{
  position: relative;
  z-index: 2;

  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Disable old image banner overlay */
.hero-section.hero-video::before{
  content: none !important;
}

/* Prevent horizontal scroll from 100vw */
html, body{
  overflow-x: hidden;
}

/* Mobile optimization */
@media (max-width: 575.98px){
  .hero-section.hero-video{
    min-height: 90vh;
  }
  .hero-video-bg{
    transform: scale(1.05);
  }
}

/* Accessibility: reduced motion */
@media (prefers-reduced-motion: reduce){
  .hero-video-bg{
    display: none;
  }
  .hero-section.hero-video{
    background: #0b0f1a;
  }
}


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

/* Tablets */
@media (max-width: 991.98px){
  body{
    padding-top: 92px !important; /* slightly smaller on tablet */
  }

  .hero-section{
    padding-top: 2.6rem;
    padding-bottom: 2.8rem;
    background-position: center top;
  }

  .hero-title{
    font-size: clamp(28px, 4.8vw, 40px) !important;
    line-height: 1.08 !important;
  }

  .hero-lead{
    font-size: 15px !important;
  }

  .hero-right{
    margin-top: 14px;
  }
}

/* Mobile */
@media (max-width: 575.98px){
  body{
    padding-top: var(--hc-nav-h-m) !important;
  }

  /* Improve banner composition on small screens */
  .hero-section{
    padding-top: 2.2rem;
    padding-bottom: 2.4rem;
    background-position: center top;
  }

  /* Center align hero content on mobile */
  .hero-left{
    text-align: center;
  }

  .hero-left .d-flex{
    justify-content: center;
  }

  .hero-title{
    font-size: 28px !important;
    line-height: 1.10 !important;
  }

  .hero-lead{
    font-size: 14px !important;
    max-width: 100% !important;
    margin-left: auto;
    margin-right: auto;
  }

  /* Make buttons full width */
  .hero-left .hc-btn{
    width: 100%;
    justify-content: center;
  }

  /* Card spacing */
  .hero-card{
    padding: 16px !important;
  }
}

/* Ensure both columns stretch equally */
#contact-us .row > [class*="col-"] {
  display: flex;
}

/* Map & Form cards take full height */
.contact-map-card,
.contact-form-card {
  width: 100%;
  height: 100%;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08);
}

/* Map iframe fills card */
.contact-map-card iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 18px;
}

/* Form card layout */
.contact-form-card {
  display: flex;
  flex-direction: column;
  padding: 32px;
}

/* Push button to bottom if content is less */
.contact-form-card form {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.contact-form-card button {
  margin-top: auto;
}

/* ========== INDUSTRIES MARQUEE (BOOTSTRAP 5 RESPONSIVE) ========== */
    .hc-logo-marquee{
      background: linear-gradient(180deg, #ffffff, #fafafa);
      border-top: 1px solid rgba(0,0,0,.06);
      border-bottom: 1px solid rgba(0,0,0,.06);
      overflow: hidden;
    }

    .hc-marquee-wrapper{
      position: relative;
      width: 100%;
      overflow: hidden;
    }

    /* Soft fade edges (premium look) */
    .hc-marquee-wrapper::before,
    .hc-marquee-wrapper::after{
      content:"";
      position:absolute;
      top:0;
      width: 80px;
      height: 100%;
      z-index: 2;
      pointer-events:none;
    }
    .hc-marquee-wrapper::before{
      left:0;
      background: linear-gradient(90deg, #fff, rgba(255,255,255,0));
    }
    .hc-marquee-wrapper::after{
      right:0;
      background: linear-gradient(270deg, #fff, rgba(255,255,255,0));
    }

    .hc-marquee-track{
      display:flex;
      align-items:center;
      width:max-content;
      gap: clamp(1.25rem, 3vw, 4rem);
      padding: 0.75rem 0;
      animation: hc-marquee 35s linear infinite;
      will-change: transform;
    }

    /* Logo item */
    .hc-logo{
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .hc-logo a{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding: .25rem;
      border-radius: 14px;
      text-decoration: none;
      outline: none;
      transition: transform .25s ease, box-shadow .25s ease;
    }

    .hc-logo img{
      height: clamp(42px, 6vw, 92px); /* responsive height */
      width: auto;
      display:block;
      object-fit: contain;
      transition: transform .25s ease, filter .25s ease, opacity .25s ease;
      opacity: .95;
    }

    /* Hover effects */
    .hc-logo a:hover img{
      transform: scale(1.06);
      opacity: 1;
      filter: saturate(1.05);
    }

    /* Pause on hover (desktop) */
    @media (hover:hover){
      .hc-marquee-wrapper:hover .hc-marquee-track{
        animation-play-state: paused;
      }
    }

    @keyframes hc-marquee{
      from{ transform: translateX(0); }
      to{ transform: translateX(-50%); } /* because we duplicate the list */
    }

    /* Reduce motion accessibility */
    @media (prefers-reduced-motion: reduce){
      .hc-marquee-track{ animation: none; }
      .hc-marquee-wrapper::before,
      .hc-marquee-wrapper::after{ display:none; }
    }

    /* Mobile fine-tuning */
    @media (max-width: 576px){
      .hc-marquee-wrapper::before,
      .hc-marquee-wrapper::after{
        width: 46px;
      }
      .hc-marquee-track{
        animation-duration: 55s; /* slower on small screens */
      }
    }

    /* Remove excessive gap between Core Strengths and Industries */
.core-strengths,
.hc-core-strengths,
.section-core-strengths {
  margin-bottom: 0 !important;
  padding-bottom: 40px !important;
}

/* Reduce top space of Industries section */
.industries,
.industries-section,
#industries {
  margin-top: 0 !important;
  padding-top: 40px !important;
}

/* Digital Marketing page - video in place of image (NO STRETCH) */
.dm-media{
  border-radius: 22px;
  overflow: hidden;
  background: #0b0f1a;          /* helps if video has letterboxing */
  box-shadow: 0 18px 45px rgba(10, 22, 60, 0.12);
}

/* Keep video natural ratio and avoid stretching */
.dm-video{
  width: 100%;
  height: auto;                /* key: prevents vertical stretch */
  display: block;
  object-fit: cover;           /* fills frame nicely */
  object-position: center;
  aspect-ratio: 16 / 9;        /* choose a clean frame */
  max-height: 420px;           /* prevents it becoming too tall */
}

/* Adjust heights for different screens */
@media (max-width: 991.98px){
  .dm-video{ max-height: 360px; }
}
@media (max-width: 575.98px){
  .dm-video{ max-height: 260px; }
}

/* Business / Brand page: video should behave like existing image */
.page-media-video{
  width: 50%;
  height: 50%;
  display: block;

  /* prevents stretch */
  object-fit: cover;
  object-position: center;

  /* match your image card look */
  border-radius: inherit;
}

/* If your image wrapper doesn't have overflow hidden, force it safely */
.page-media-video{
  border-radius: 22px;
}

/* =========================
   INDEX HERO VIDEO — MOBILE RESPONSIVE FIX
   Paste at END of main.css
   ========================= */

/* Hero wrapper controls height (NOT the video) */
.hero-section.hero-video{
  position: relative;
  overflow: hidden;

  /* keep your full-width breakout */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);

  background: none !important;
  background-image: none !important;

  /* desktop/tablet default height */
  min-height: 70vh;
}

/* Modern mobile browsers: use "small viewport height" to avoid iOS jump */
@supports (height: 100svh){
  .hero-section.hero-video{
    min-height: 70svh;
  }
}

/* Mobile tuning */
@media (max-width: 991.98px){
  .hero-section.hero-video{
    min-height: 58vh;
  }
  @supports (height: 100svh){
    .hero-section.hero-video{ min-height: 58svh; }
  }
}

/* Small phones */
@media (max-width: 575.98px){
  .hero-section.hero-video{
    min-height: 52vh;
  }
  @supports (height: 100svh){
    .hero-section.hero-video{ min-height: 52svh; }
  }
}

/* Video should fill the hero section */
.hero-video-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;          /* IMPORTANT: match section height, not 100vh */
  object-fit: cover;
  object-position: center;
  z-index: 0;

  /* optional polish */
  transform: scale(1.01);
}

/* Overlay stays full cover */
.hero-section.hero-video .hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Content above */
.hero-section.hero-video .hero-content{
  position: relative;
  z-index: 2;
}

/* ================================
   CT HERO VIDEO BACKGROUND FIX
   Paste at END of your CSS
   ================================ */

.ct-hero.ct-hero--video{
  position: relative !important;
  overflow: hidden !important;
  padding: 110px 0 90px !important;  /* keeps text readable */
  min-height: 72vh !important;
  display: grid !important;
  place-items: center !important;
  background: #0b1220 !important; /* fallback if video fails */
}

/* BG wrapper fills the whole section */
.ct-hero.ct-hero--video .ct-hero__bg{
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}

/* Video covers the entire hero */
.ct-hero.ct-hero--video .ct-hero__video{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  transform: scale(1.02) !important;
  display: block !important;
}

/* Overlay for readability */
.ct-hero.ct-hero--video .ct-hero__overlay{
  position: absolute !important;
  inset: 0 !important;
  background:
    radial-gradient(900px 520px at 15% 25%, rgba(253,186,43,.20), transparent 55%),
    radial-gradient(900px 520px at 85% 65%, rgba(59,88,164,.18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.86)) !important;
  z-index: 1 !important;
}

/* Content always above the video */
.ct-hero.ct-hero--video .ct-hero__content{
  position: relative !important;
  z-index: 2 !important;
}

/* Title styling (prevents the cut-off look) */
.ct-hero.ct-hero--video .ct-hero__title{
  color: #0b1220 !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  font-size: clamp(28px, 3.6vw, 52px) !important;
  line-height: 1.08 !important;
  margin-left: auto;
  margin-right: auto;
  max-width: 980px;
  text-wrap: balance;
}

/* Mobile tuning */
@media (max-width: 575.98px){
  .ct-hero.ct-hero--video{
    padding: 86px 0 70px !important;
    min-height: 62vh !important;
  }
}

/* ===== CT HERO VIDEO BACKGROUND (FULL EDGE-TO-EDGE) ===== */
.ct-hero.ct-hero--bgvideo{
  position: relative !important;
  min-height: 72vh !important;
  padding: 0 !important;
  overflow: hidden !important;

  width: 100vw !important;                 /* FULL WIDTH */
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important; /* BREAK OUT of container pages */
  margin-right: calc(-50vw + 50%) !important;

  display: grid !important;
  place-items: center !important;
  background: #000 !important;
}

/* Remove old hero pseudo layers if any */
.ct-hero.ct-hero--bgvideo::before,
.ct-hero.ct-hero--bgvideo::after{
  content: none !important;
}

/* Video must fill the hero */
.ct-hero__video{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  z-index: 0 !important;
}

.ct-hero__bg img{
  width:1584px;
  height:396px;
}


/* Overlay above video */
.ct-hero__overlay{
  margin-bottom:-2rem;
}

/* Content above overlay */
.ct-hero.ct-hero--bgvideo .wrap{
  position: relative !important;
  z-index: 2 !important;
  padding: 90px 12px !important;
}

/* Make text readable on video */
.ct-hero.ct-hero--bgvideo h1{
  color: #fff !important;
}

@media (max-width: 576px){
  .ct-hero.ct-hero--bgvideo{ min-height: 60vh !important; }
  .ct-hero.ct-hero--bgvideo .wrap{ padding: 70px 12px !important; }
}

@media (min-width: 992px) {
    .page-media-video. {
        flex: 0 0 auto;
        width-fitcontent:;