/* =========================================================
   TOKENS / RESET
   ========================================================= */

:root{
  /* Brand palette */
  --brand:#FF4F0F;
  --brand-rgba: 255,79,15; /* for rgba(...) usage */
  --dark:#0F1E37;

  /* Papers / borders / ink */
  --paper:#FFFFFF;
  --paper-2:#E9EFEF;
  --light:#E9EFEF;    /* alias used across sections */
  --ink:#0F1E37;

  /* Neutrals */
  --muted:#696666;
  --ring: rgba(255,79,15,.25);

  /* Rounding / shadow / containers */
  --radius:18px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --container:100%;
  --maxw:94%;
}



*{ box-sizing:border-box }

/* ##### Common Helpers ##### */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/Poppins/Poppins-Regular.woff2') format('woff2'),
       url('assets/fonts/Poppins/Poppins-Regular.woff') format('woff');
  /* you can add .ttf as fallback if you want */
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('assets/fonts/Poppins/Poppins-Bold.woff2') format('woff2'),
       url('assets/fonts/Poppins/Poppins-Bold.woff') format('woff');
}

/* Similarly for italic or other weights if needed */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url('assets/fonts/Poppins/Poppins-Italic.woff2') format('woff2'),
       url('assets/fonts/Poppins/Poppins-Italic.woff') format('woff');
}

@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/Quicksand/Quicksand-Regular.woff2') format('woff2'),
       url('assets/fonts/Quicksand/Quicksand-Regular.woff') format('woff');
  /* you can add .ttf as fallback if you want */
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('assets/fonts/Open_Sans/OpenSans-Regular.woff2') format('woff2'),
       url('assets/fonts/Open_Sans/OpenSans-Regular.woff') format('woff');
  /* optionally add .ttf or .otf fallback if desired */
  font-display: swap;
}

html,body{ height:100%;}
body{
  margin:0;
  font-family: var(--font-sans);
  color:var(--ink);
  background:var(--paper);

  /*font-family: 'Poppins', sans-serif;
  font-family: 'Quicksand', Open Sans;*/
  font-family: 'Inter', sans-serif;
}


img{ max-width:100%; display:block;}
a{ color:inherit; text-decoration:none }
.container{ max-width:var(--maxw); margin-inline:auto;}
.spacer-8{height:8px} .spacer-16{height:16px} .spacer-24{height:24px}
.mt-8{ margin-top:8px }
.sec-top-p{
  padding: clamp(30px, 8vw, 20px) 0;
}
.sec-eyebrow{
  display:inline-block; 
  font-weight:600; 
  font-size:16px; 
  letter-spacing:.02em;
  color:var(--brand); 
  margin-bottom:10px; 
  text-transform:uppercase; 
  position:relative; 
  animation:ku-pop .5s ease both;
}
.sec-title{
  margin:0 0 14px;
  line-height:1.18;
  font-weight:700;
  font-style: Regular;
  font-size: clamp(18px, 3.2vw, 28px);
  --reveal:0%;
  letter-spacing:.02em;
  background: linear-gradient(90deg, var(--dark) 0 0) no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: var(--reveal) 100%;
  animation: ku-reveal 900ms cubic-bezier(.2,.8,.2,1) .15s forwards;
}
.sec-text{
  font-family: 'Open Sans', Quicksand !important;
  margin: 24px 0 0;
  color: var(--muted);
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 14px);
  line-height: 1.5;
  animation: ku-fadeup .7s ease .25s both;
}
.item-title {
  margin: 0 0 8px;
  color: var(--dark);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .2px;
}
/* ---------- Gradient BUTTON ---------- */
.btn-gradient {
  background: linear-gradient(90deg, #FFA24B, #FF4F0F, #FF7A3D);
  background-size: 200% 100%;
  animation: moveGradient 4s ease infinite;
  transition: transform 0.3s ease;
}
.btn-gradient:hover {
  transform: translateY(-2px);
}
/* Banner */
.inner_banner{
  width: 100%;
  padding: 0;
}
.inner_banner img{
  width: 100%;
}
/* ---------- CTA BUTTON ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  /*background: var(--brand);
  transition:background .2s, transform .2s;
  */
  color: #fff;
  padding: 10px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  transition: all .3s ease;
}
.cta-arrow {
  transform: rotate(0deg);
  transition: transform .3s ease;
  margin-top:1px;
}
.cta:hover .cta-arrow {
  transform: rotate(45deg);
}

@keyframes moveGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}



/* ---------------------------
   WebKit browsers (Chrome, Edge, Opera, Safari desktop)
   --------------------------- */
/* ---------- WebKit (Chrome, Edge, Opera, Safari desktop) ---------- */
/* Scoped: .attach-list -> hidden scrollbar, thin translucent thumb on hover */
.attach-list {
  overflow: auto;
  scrollbar-width: thin;
  --sb-thumb-r: 200;
  --sb-thumb-g: 200;
  --sb-thumb-b: 200;
  --sb-thumb-op: 0;
  --sb-thumb-min: 50px; /* minimum thumb height you requested */
}

/* WebKit */
.attach-list::-webkit-scrollbar { width: 6px; height: 6px; }
.attach-list::-webkit-scrollbar-track { background: transparent; }
.attach-list::-webkit-scrollbar-thumb {
  background: rgba(var(--sb-thumb-r), var(--sb-thumb-g), var(--sb-thumb-b), var(--sb-thumb-op));
  border-radius: 999px;
  border: 0;
  min-height: var(--sb-thumb-min);   /* <- ensures thumb is at least 50px tall */
  transition: background .18s linear;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.attach-list::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--sb-thumb-r), var(--sb-thumb-g), var(--sb-thumb-b), calc(var(--sb-thumb-op) * 1.2));
}
.attach-list:hover { --sb-thumb-op: 0.95; }

/* Firefox */
.attach-list { scrollbar-color: rgba(var(--sb-thumb-r),var(--sb-thumb-g),var(--sb-thumb-b),0) transparent; }
.attach-list:hover { scrollbar-color: rgba(var(--sb-thumb-r),var(--sb-thumb-g),var(--sb-thumb-b),0.95) transparent; }

/* For Firefox there is no direct min-height control; the browser decides thumb size based on content.
   The min-height above affects WebKit browsers (Chrome, Edge, Safari). */





/* ###### Form Css ###### */

/*.form-title{ margin:0 0 24px; font-size:20px; font-weight:600; color:var(--dark) }
.row{ display:grid; gap:16px; margin-bottom:16px }
.row.two{ grid-template-columns:1fr 1fr; gap:22px }

.field label{ font-weight:500; color:var(--muted); font-size:14px }
.field input,.field textarea{
  width:100%; border:none; border-bottom:1px solid var(--muted); outline:none; padding:5px 0; border-radius:0;
  font-size:15px; background:#fff; color:#0f223a; transition:border-color .2s, background .2s;
}
.field textarea{ border:1px solid #e7edf6; background:#F1F5FA; border-radius:10px; padding:12px }
.field input:focus{ border-color:#9cb4d1 }
.field textarea:focus{ border-color:#9cb4d1; background:#eef4fb }
.field .err{ color:#d03030; font-size:12px; min-height:14px }
.field.invalid input{ border-color:#e16a6a }
.field.invalid textarea{ border-color:#e16a6a; background:#fff5f5 }
.subject{ margin:6px 0 8px; border:0; padding:0 }
.subject legend{ font-weight:900; margin-bottom:10px; color:var(--dark) }
.radio-row{ display:flex; flex-wrap:wrap; gap:10px }
.radio{ display:inline-flex; align-items:center; gap:5px; font-size: 12px; font-weight:400; color:#6b768c; cursor:pointer }
.radio input{ accent-color:var(--brand); width:12px; height:12px }
.subject .err{ color:#d03030; font-size:12px; margin-top:6px }
.subject.invalid .radio span{ color:#b94a4a }*/

.form-panel {
  flex: 0 0 55%;
  min-width: 300px;
  background: #0b1c36;
  color: var(--white);
  padding: 56px 64px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column; /* so we can push the button to the bottom */
  justify-content: flex-start;
  position: relative;
  /* subtle interactive polish */
  transition: transform 280ms cubic-bezier(.2,.8,.2,1), box-shadow 280ms ease;
  will-change: transform, box-shadow;
}

/* optional lift on hover (remove if unwanted) */


/* eyebrow/title */
.form-eyebrow {
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.form-title {
  font-size: 24px;
  line-height: 1.05;
  font-weight: 500;
  margin: 6px 0 18px;
  color: #fff;
}

/* ---------- input grid ---------- */
.form-p-fr{
  overflow-y:scroll;
  max-height: 400px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 22px;
  margin-top: 10px;
}
.input-pill {
  width: 100%;
  border-radius: 12px;
  padding: 14px 20px;
  border: none;
  font-size: 15px;
  color: var(--dark-navy);
  outline: none;
  box-shadow: none;
  background: #fff; /* ensure visible on dark panel — adjust if you want transparent */
}
.mobile{
  display: grid;
  grid-template-columns: .25fr 1fr;    
}

.mobile .input-pill {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}
.mobile select{
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  border-top: 1px;
  border-bottom: 1px;
  border-left: 1px;
  padding: 10px;
  color: var(--muted);
  
}
.input-pill::placeholder { color: var(--muted); }

/* radio */
.subject{ margin: 15px 0; border:0; padding:0;     grid-column: 1 / -1;
    display: block; }
.subject legend{ font-weight:600; margin-bottom:10px; color:var(--light) }
.radio-row{ display:flex; flex-wrap:wrap; gap:10px }
.radio{ display:inline-flex; align-items:center; gap:5px; font-size: 12px; font-weight:400; color:#6b768c; cursor:pointer }
.radio input{ accent-color:var(--brand); width:12px; height:12px }
.subject .err{ color:#d03030; font-size:12px; margin-top:6px }
.subject.invalid .radio span{ color:#b94a4a }

/* message textarea spans full width */
.msg {
  grid-column: 1 / -1;
  display: block;
  border-radius: 12px;
  padding: 10px;
  min-height: 100px;
  resize: vertical;
  border: none;
  font-size: 15px;
  resize: none;
  resize: none;
}


/* ---------- Connect button pinned bottom-right ---------- */
/* change: margin-top:auto pushes this block to bottom of flex column */
.connect-wrap {
  display: flex;
  justify-content: flex-end;
}
.btn-connect {
  background: linear-gradient(90deg,#FFA24B,#FF4F0F);
  color: white;
  padding: 12px 26px;
  border-radius: 28px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(255,79,15,0.18);
}
/* Attachment section */
.attachment-section { margin-top: 10px; }

.btn-attach {
  background: transparent;
  color: #fff;
  font-weight: 600;
  border: 2px dashed rgba(255,255,255,0.28);
  border-radius: 10px;
  padding: 10px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.btn-attach:hover { background: rgba(255,255,255,0.06); border-color: #fff; }
.plus-icon { font-size: 18px; line-height: 1; transition: transform .25s ease; }
.btn-attach.active .plus-icon { transform: rotate(45deg); }

/* attachment fields panel (smooth open/close) */
.attachment-fields {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .36s cubic-bezier(.2,.9,.2,1), opacity .22s ease, margin .22s ease;
  margin-top: 8px;
}
.attachment-fields.open {
  max-height: 360px; /* large enough to show file list */
  opacity: 1;
  margin-top: 12px;
}

/* label + input */
.attachment-fields label { color: rgba(255,255,255,0.88); display:block; margin-bottom:8px; }
.attach-input {
  display:block;
  width:100%;
  background:#fff;
  color:#222;
  padding:10px;
  border-radius:8px;
  border: none;
  cursor: pointer;
}

/* selected file list */
.attach-list { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; max-height:460px; overflow:auto; }
.attach-item { display:flex; gap:10px; align-items:center; padding:8px; background: rgba(255,255,255,0.04); border-radius:8px; color:#fff; }
.attach-name { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:14px; color: #fff; }
.attach-size { font-size:12px; color: rgba(255,255,255,0.7); margin-left:8px; }
.attach-remove { background:transparent; border:0; color:#ffb4a1; cursor:pointer; font-weight:700; padding:6px 8px; border-radius:6px; }
/* Button */
.frm-btn{
  border: none;
}
.subject textarea:focus{
  border: none;
}

.form-error {
  color: #ff3b30;
  font-size: 14px;
  text-align: left;
  margin-top: 8px;
  margin-bottom: 10px;
  display: none;
}

#submitBtn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}





/* Animations (used across sections) */
@keyframes fadeUp{ from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none} }
@keyframes popIn{ from{opacity:0; transform:scale(.96) translateY(8px)} to{opacity:1; transform:none} }
@keyframes sheen{ 0%{background-position:-200% 0} 100%{background-position:200% 0} }
@keyframes ku-pop{ from{transform:translateY(8px); opacity:0} to{transform:none; opacity:1} }
@keyframes ku-underline{ from{width:0} to{width:72px} }
@keyframes ku-reveal{ to{ --reveal:100% } }
@keyframes ku-fadeup{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ku-eyebrow,.ku-title,.ku-text{ animation:none }
  .ku-eyebrow::after{ width:72px }
  .ku-title{ color:var(--dark); background:none }
}

/* =========================================================
   GENERIC NAV / HEADER (kept minimal)
   ========================================================= */
.nav-container{ max-width:var(--maxw); margin-inline:auto;}
.navbar{ background:#333; color:#fff; padding:10px 0 }
.navbar .container{ display:flex; justify-content:space-between; align-items:center }
.navbar .nav-links{ list-style:none; display:flex; gap:15px }
.navbar a{ color:#fff }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e9edef;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 80px;
  position: relative;
}
/* ---------- LOGO ---------- */

/*.brand{ display:flex; align-items:center; gap:12px; color:var(--dark) }
.brand-text strong{ display:block; font-weight:800; letter-spacing:.2px; font-size:14px }
.brand-text span{ display:block; font-weight:600; opacity:.8; font-size:12px }*/

.brand {
  width: 220px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--dark);
}
.brand-text strong {
  display: block; 
  font-weight: 600;
  font-size: 14px;
  letter-spacing:.2px;
}
.brand-text span {
  display: block;
  font-weight: 600;
  opacity: .8;
  font-size: 12px;
}

/* ---------- CENTER NAV LINKS ---------- */
.nav-links {
  position: absolute;
  left: 48%;
  transform: translateX(-50%);
  /*display: flex;
  gap: 30px;*/
  align-items: center;
  text-align: center;
}
.nav-links a {
  margin-right:20px; 
}
.nav-links a:last-child {
  margin-right:0px;
}
.nav-link {
    font-size: 14px;
    position: relative;
    font-weight: 500;
    color: black;
    position: relative;
    padding: 20px 0;
    transition: color .3s, transform .3s;
    text-transform: uppercase;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  width: 0%;
  background: var(--brand);
  transition: width .3s ease;
  border-radius: 2px;
}

.nav-link:hover,.nav-link.active{ border-bottom:3px solid var(--brand) !important; color:var(--brand); font-weight: 700; padding: 31px 0; border:none;}
.nav-link.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-10px; height:2px;
  background:var(--brand); border-radius:2px;
}




/* ---------- MOBILE MENU ---------- */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 26px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.menu-toggle span {
  display: block;
  height: 3px;
  width: 100%;
  background: var(--dark);
  border-radius: 2px;
  transition: all 0.3s ease;
}
.brand-mbl{
  display: none;
}

/* ---------- RESPONSIVE ---------- */
/* ------ Mobile menu: slide + fade animation (use at <=1120px) ------ */
@media (max-width: 1120px) {

  /* ---------- hamburger (left) ---------- */
  .menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 8px;
    z-index: 130;
  }
  .menu-toggle span {
    display: block;
    height: 3px;
    width: 22px;
    background: var(--dark);
    border-radius: 2px;
    transition: transform .28s cubic-bezier(.2,.9,.2,1), opacity .18s, background .18s;
  }
  .menu-toggle span + span { margin-top: 5px; }
  .menu-toggle span + span + span { margin-top: 5px; }

  .menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
  }
  .menu-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(.2);
  }
  .menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
  }

  /* ---------- brand centered, CTA right ---------- */
  .brand {
    position: absolute;
    left: 44%;
    transform: translateX(-50%);
    z-index: 120; /* above menu */
  }



  /* ---------- mobile panel (slide + fade) ---------- */
  .nav-links {
    position: fixed;
    top: 10vh;                /* start a little off top of viewport */
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    /* IMPORTANT: left-align items so link text aligns on left */
    align-items: flex-start;
    justify-content: flex-start; /* start from top for natural list reading */
    gap: 12px;
    padding-top: 92px;         /* room so logo/cta don't overlap the top */
    background: var(--paper);
    transform: translateY(-18px);
    opacity: 0;
    pointer-events: none;
    z-index: 110;
    transition:
      top .38s cubic-bezier(.2,.9,.2,1),
      transform .38s cubic-bezier(.25,.9,.2,1),
      opacity .28s ease;
  }

  /* active: slide down and reveal */
  .nav-links.active {
    top: 5vh;
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    /* breathing on small screens */
    padding: 0 18px 28px 18px;
  }

  /* ---------- mobile nav items (left aligned) ---------- */
  .nav-links .nav-link {
    /* full-width items so text left aligns */
    width: 100%;
    max-width: 820px;
    display: block;
    text-align: left;             /* left aligned text as requested */
    font-size: 18px;
    color: var(--dark);
    font-weight: 700;
    padding: 12px 18px;
    border-radius: 10px;
    transition: background .18s, transform .18s, color .18s;
    position: relative;           /* keep underline pseudo working */
    margin-left: 0;               /* ensure no accidental offsets */
  }

  /* Hover / focus: same as desktop (lift + underline) */
  .nav-links .nav-link:hover,
  .nav-links .nav-link:focus {
    transform: translateY(-3px);
    background: rgba(15,30,55,.04);
    color: var(--brand);
    outline: none;
  }

  /* ---------------------
     Underline behavior: adapt desktop underline to left-aligned items
     We'll use the same ::after bar but anchor it to left padding instead of centered
     --------------------- */
  .nav-links .nav-link::after{
    content: "";
    position: absolute;
    left: 18px;                 /* align underline with left text padding */
    bottom: 6px;
    height: 3px;
    width: 0%;
    background: var(--brand);
    border-radius: 3px;
    transition: width .28s cubic-bezier(.25,.9,.2,1);
  }

  /* on hover/focus show underline same as desktop */
  .nav-links .nav-link:hover::after,
  .nav-links .nav-link:focus::after {
    width: 56px;                /* underline length — same visual weight as desktop */
  }

  /* Active link: highlight exactly like desktop (brand + underline) */
  .nav-links .nav-link.active {
    color: var(--brand);
  }
  .nav-links .nav-link.active::after {
    width: 56px;
  }

  /* Slight spacing between groups if needed */
  .nav-links .nav-link + .nav-link { margin-top: 6px; }

  /* prevent background scroll while menu open — toggled by JS via body.menu-open */
  body.menu-open { overflow: hidden; }
}
@media (max-width: 768px) {
  .brand {
    width: 180px;
    left: 40%;
  }
}
@media (max-width: 440px) {
  .brand {
    width: auto;
    left: 36%;
  }
  .brand-web{
    display: none;
  }
  .brand-mbl{
    width: 50px;
    display: block;
  }
  
}


/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nav-links,
  .nav-links.active,
  .menu-toggle span,
  .menu-toggle.active span {
    transition: none !important;
    animation: none !important;
  }
}



/* =========================================================
   HERO (banner/slider)
   ========================================================= */
.hero{ position:relative; text-align:center; padding-bottom: 20px;}
.hero-slider{ position:relative; height:94vh; overflow:hidden }
.slide{
  position:absolute; inset:0; opacity:0; transition:opacity .6s ease;
  background-image:var(--bg); background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
}
.slide.is-active{ opacity:1 }
.slide .overlay{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(121, 119, 121, 0.28), rgba(143, 142, 142, 0)) }
.hero-content{ position:relative; padding:0 20px; max-width:980px; margin-inline:auto }
.headline{
  margin:0 0 18px; font-size:clamp(28px,5.2vw,42px);
  letter-spacing: 1px; font-weight:700; 
  text-shadow:0 2px 0 rgba(0,0,0,.15);
}
.subcopy{ margin:0 auto; color:#fff; opacity:.95; font-size:clamp(16px,2.1vw,24px); line-height:1.55; max-width:980px }
.dots{ position:absolute; left:0; right:0; bottom:28px; display:flex; gap:10px; justify-content:center }
.dot{ width:9px; height:12px; border-radius:50%; background:rgba(255,255,255,.35); border:none; cursor:pointer; transition:transform .2s, background .2s }
.dot.is-active{ background:#fff; transform:scale(1.12) }

/* ===== WHO YOU ARE SECTION ===== */
/* ===== SECTION BACKGROUND ===== */
/* ================= SECTION ================= */

.who-section{
  padding:80px 0;
  position:relative;
  font-family:'Poppins',sans-serif;
  overflow:hidden;
}

/* watermark */
.who-section::before{
  content:"";
  position:absolute;
  left:150px;
  top:150px;
  width:400px;
  height:400px;
 
}

/* MAIN GRID (small left + big right) */
.who-container{
  width: 85%;
  margin: 0 auto;
  display:grid;
  grid-template-columns:100px 1fr;
  gap:40px;

}
.who-left{
  width: 400px;
  padding: 100px;
}
.who-left img{
  width: 100%;
  margin-top: 100px;
}
/* ================= LEFT SMALL LABEL ================= */

.who-tag{
  font-size:14px;
  letter-spacing:4px;
  color:#6f6f6f;
  font-weight:600;
  text-align: left;
  margin-left: 0;
  display: block;
}
.who-tag span{
  font-weight: 600;
  font-size: 20px;
}
/* ================= RIGHT CONTENT ================= */

.who-right{
  width: calc(100% - 280px);
  display:flex;
  flex-direction:column;
  justify-self:end;
}

/* HEADING */
.who-heading{
  width: 100%;
  font-size:20px;
  line-height:1.2;
  font-weight:700;
  color:#111;
  margin-top: 0;
  font-family: 'Inter', sans-serif;
}

.who-heading span{
  color:#666464;
  font-weight:500;
  font-size: 25px;
}

.who-heading b{
  font-size: 42px;
}
.who-heading c{
  font-size: 40px;
  color: #111;
  font-weight: 800;
}

/* CONTENT ROW (stats + image) */
.who-content{
  align-items:center;
}

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

.who-stats{
  width:40%;
  float:left;  
  margin-top:20px;
}

/* card width */
.who-card{
  width:280px;             
  max-width:360px;
  background:#ffffff;
  padding:18px 22px;
  border-radius:18px;
  display:flex;
  align-items:center;
  gap:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  margin-bottom: 20px;
}

/* ICON BOX */
.who-icon{
  width:58px;
  height:58px;
  border-radius:14px;
  background:#e8f7f9;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  color:#16a3b8;
}

.who-card h3{
  font-size:25px;
  margin:0;
  color:#0f172a;
}

.who-card p{
  margin:3px 0 0;
  font-size:14px;
  color:#7c7c7c;
}

/* ================= IMAGE ================= */

.who-image {
  width:60%;
  float: right;
   
}

.who-image img{
  border-radius:24px;
  margin-top:30px;
  
}
.who-left img{
   opacity:.04;
}


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

@media(max-width:1100px){

  .who-container{
    grid-template-columns:1fr;
  }

  .who-left{
    text-align:center;
    margin-bottom:20px;
  }

  .who-heading{
    text-align:center;
    margin:auto auto 40px;
  }

  .who-content{
    grid-template-columns:1fr;
    justify-items:center;
  }

  .who-image img{
    width:90%;
  }
}



/* =========================================================
    NATURE OF FIRM
========================================================= */
.Nature-of-firm{
   background:#F8F9FD;

}
.wrapper{
  width:85%;
  margin:0px auto;
  background:#F8F9FD;
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:60px;
  border-radius:6px;
  margin-bottom: 20px;
  padding:60px 0;
}
.Nature-of-firm-left{
  padding: 35px 35px;
  margin-top: 13%;
}
.Nature-of-firm-left img{
 
  object-fit:cover;
  border-radius:4px;
}

.Nature-of-firm-right{
  margin-top: 20px;
} 

.small-title{
  color:#FF4F0F;
  font-size:18px;
  font-weight:600;
  letter-spacing:1.2px; 
}

.main-title{
  font-size:30px;
  font-weight:700;
  color:#222;
  line-height:1.3;
  margin: 5px 0 50px 0;
}

.feature{
  display:flex;
  align-items:flex-start;
  margin-bottom:24px;
}

.icon{
  min-width:62px;
  height:62px;
  border-radius:50%;
  background:#FF4F0F;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-right:16px;
  color:white;
  font-size:38px;  
}

.feature h4{
  font-size:20px;
  color:#1c1c1c;
  font-weight:600;
  margin-bottom:0;
  margin-top: 0;

}

.feature p{
  font-size:14px;
  color:#6c757d;
  line-height:1.5;
 margin-top: 10px;
 font-weight: 500;
}

/* =========================
   Project Statistics
/* =========================================================

  /* ------------------ LEFT ------------------ */
.project-stats .container {
  width: 90%;
  margin: auto;
  display: flex;
  gap: 80px;
  padding: 80px 0;
}

.project-stats .left { width: 45%; }
.project-stats .right { width: 55%; }

.small-head { color:#FF4F0F; margin-bottom: -15px; }
.lead { color:#A8A8A8; }
#slideDesc{margin-top: -15px;}
.left-points ul { padding-left: 30px; }
.slide-footer{color:#6c757d; font-size:12px;}
.left-points li {
  position: relative;
  margin: 25px 0;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  opacity: .5;
  transition: .3s ease;
}

.left-points li::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 0;
  width: 0px;
  height: 40px;
  background: #fff;
}

.left-points li.active {
  opacity: 1;
  transform: translateX(6px);
}

.left-points li.active::before { background: #111; }

/* Multiple Lines */
.slider-lines {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.slider-lines .line {
  flex: 1;
  height: 4px;
  background: #e5e5e5;
  transition: .3s ease;
  border-radius: 4px;
}

.slider-lines .line.active {
  background: #111;
}

.project-stats .slider {
  position: relative;
  height: 350px;
  overflow: hidden;
  border-radius: 12px;
}

.project-stats .slide {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 100%;
  opacity: 0;
  transition: .6s ease;
}

.project-stats .slide.active {
  left: 0;
  opacity: 1;
}

.project-stats .slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stats { display: flex; gap: 40px; margin-top: 25px; }
.stats strong { font-size: 28px; }

@media(max-width:900px){
  .project-stats .container { flex-direction: column; }
  .project-stats .left,
  .project-stats .right { width: 100%; }
}

/* =========================================================
       SELECTED WORK
 ========================================================= */
  
.work-section {
  padding: 90px 20px;
  background: linear-gradient(180deg, #000000 0%, #1a1a1a 100%);
  color: var(--text);
}

.work-container{max-width:950px;margin:auto;text-align:center}

.work-title{
  font-size:40px;
  font-weight:700;
  margin-bottom:60px;
  color:#fff;
}

.work-grid{
  align-items:start;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0 80px;
}

.work-card,.rightwork-card{text-align:left}

.work-image,.right-image,.image{
  width:100%;
  aspect-ratio:1/1;
  border-radius:22px;
  overflow:hidden;
}

.work-image img,.right-image img,.image img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:.5s ease;
}

.work-card:hover img{transform:scale(1.06)}

.work-card h3{
  font-size:18px;
  font-weight:700;
  margin:15px 12px 9px;
  color:#fff;
}

.rightwork-card h3{
  font-size:18px;
  font-weight:700;
  margin:15px 12px 9px;
  color:#fff;
}


.tags{display:flex;gap:8px;flex-wrap:wrap}

.tag{
  font-size:13px;
  padding:0px 10px;
  border-radius:20px;
  border:1px solid var(--border);
  color:var(--muted);
}

.btn-workwrap{margin-top:60px; color:#fff;}


.btn{
  display:inline-block;
  padding:10px 22px;
  border-radius:999px;
  border:1px solid #3a3644;
  font-size:12px;
  text-decoration:none;
  transition:.25s;
}

.btn:hover{background:#fff;color:#000}

/* stagger effect on desktop */
.work-grid > :nth-child(2n){
  margin-top:60px;
}

@media(max-width:1100px){
  .work-container{max-width:900px}
  .work-title{font-size:34px}
  .work-grid{gap:0 60px}
}

@media(max-width:900px){
  .work-container{max-width:700px}
  .work-title{font-size:30px;margin-bottom:50px}
  .work-grid{gap:40px 40px}
  .work-grid > :nth-child(2n){margin-top:60px}
}

@media(max-width:700px){
  .work-section{padding:70px 18px}
  .work-title{font-size:26px;margin-bottom:40px}
  .work-grid{grid-template-columns:1fr;gap:45px}
  .work-grid > :nth-child(2n){margin-top:0}
  .work-card h3,.rightwork-card h3{font-size:16px}
}

@media(max-width:420px){
  .work-title{font-size:22px}
  .tag{font-size:10px;padding:4px 9px}
}

/* remove stagger on mobile */
@media(max-width:700px){
  .work-grid > :nth-child(2n){margin-top:0}
}


@media(max-width:900px){
  .work-grid{gap:45px 40px}
}

@media(max-width:700px){
  .work-grid{grid-template-columns:1fr;max-width:420px;margin:auto}
  .work-section{padding:70px 18px}
}
/* =========================================================
  END OF
========================================================= */


/* =========================================================
  RESPONSIVE
   ========================================================= */
@media (max-width:1200px){

  .wrapper{
    max-width:95%;
    gap:40px;
  }

  .main-title{
    line-height:1.25;
  }

}

@media (max-width:992px){

  .wrapper{
    grid-template-columns:1fr;
    margin:40px auto;
    gap:40px;
  }

  .Nature-of-firm-left img{
    height:auto;
    max-height:500px;
    object-fit:cover;
  }

  .Nature-of-firm-right{
    margin-top:0;
  }

  .feature{
    margin-bottom:20px;
  }

}


@media (max-width:768px){

  .wrapper{
    gap:30px;
    margin:30px auto;
  }

  .small-title{
    letter-spacing:1px;
  }

  .feature{
    align-items:flex-start;
  }

  .icon{
    min-width:60px;
    height:60px;
    font-size:30px;
    margin-right:14px;
  }

}


@media (max-width:480px){

  .wrapper{
    margin:20px auto;
    gap:25px;
  }

  .feature{
    flex-direction:row;
  }

  .icon{
    min-width:52px;
    height:52px;
    font-size:26px;
    margin-right:12px;
  }

  .feature p{
    line-height:1.6;
  }
}

/* =====endof ====*/

/* ====== animations ====== */
@keyframes ku-pop{
  from{ transform: translateY(8px); opacity:0 }
  to  { transform: none; opacity:1 }
}
@keyframes ku-underline{ from{ width:0 } to{ width:72px } }
@keyframes ku-reveal{ to{ --reveal: 100% } }
@keyframes ku-fadeup{
  from{ opacity:0; transform: translateY(14px) }
  to  { opacity:1; transform:none }
}



/* =========================================================
   WHY CHOOSE US
   ========================================================= */
.choose-section{
  padding: 20px 60px 20px 90px;
  font-family: 'Inter', sans-serif;
}

/* container */
.choose-container{
  margin:auto;
  display:flex;
  gap:80px;
  align-items:flex-start;
  flex-wrap:nowrap;
}

/* =========================
   LEFT SIDE
========================= */

.choose-left{
  width:40%;
  float:left;
  display:flex;
  flex-direction:column;
}

.choose-image-card{
  position:relative;
  border-radius:32px;
}

.choose-image-card img{
  width:100%;
  height:100%;
  display:block;
  border-radius:32px;
}

/* =========================
   RIGHT SIDE
========================= */

.choose-right{
  width:55%;
  margin-top:20px;
  float:right;
  margin-left: 5%;
}

.choose-left h1{
  font-size:30px;
  font-weight:800;
  margin-bottom:10px;
  color:#111;
  margin-top: 43px;
}

.choose-subtitle{
  color:#8a8a8a;
  font-size:16px;
  margin-bottom:40px;
  font-weight:500;
}

/* =========================
   ACCORDION
========================= */

.choose-accordion details:first-child{
  border-top:none;
}

.choose-accordion details{
  border-top:1px solid #ddd;
  padding:22px 0;
}

.choose-accordion details:last-child{
  border-bottom:1px solid #ddd;
}

/* TITLE */
.choose-accordion summary{
  list-style:none;
  cursor:pointer;
  font-size:20px;
  position:relative;
  padding-right:40px;
  font-weight:600;
}

/* REMOVE DEFAULT ARROW */
.choose-accordion summary::-webkit-details-marker{
  display:none;
}

/* PLUS ICON */
.choose-accordion summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:0;
  font-size:28px;
  transition:.25s;
}

/* OPEN STATE (X ICON) */
.choose-accordion details[open] summary::after{
  content:"×";
}

/* CONTENT */
.choose-accordion p{
  margin-top:12px;
  color:#777;
  font-size:14px;
  line-height:1.2;
  margin-bottom:0;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:1200px){

  .choose-section{
    padding:20px 40px;
  }

  .choose-container{
    gap:50px;
  }

}

@media (max-width:992px){

  .choose-section{
    padding:20px 30px;
  }

  .choose-container{
    flex-direction:column;
    gap:60px;
  }

  .choose-left,
  .choose-right{
    width:100%;
  }

  .choose-image-card{
    margin-top:0;
  }

  .video-text{
    max-width:650px;
  }

}

@media (max-width:768px){

  .choose-section{
    padding:20px;
  }

  .choose-container{
    gap:40px;
  }

  .choose-right h1{
    line-height:1.1;
  }

  .choose-accordion summary{
    padding-right:30px;
  }

  .choose-accordion summary::after{
    right:0;
  }

}

@media (max-width:480px){

  .choose-section{
    padding:15px;
  }

  .video-text{
    word-break:break-word;
  }

  .choose-accordion summary{
    line-height:1.3;
  }

  .choose-accordion p{
    max-width:100%;
  }
}
/* =========================================================
   EMPANELMENTS + BANKS MARQUEE SLIDER
   ========================================================= */

/* ================= SECTION ================= */

/* container */
.empanelment-container{
  width: 100%;
  position:relative;
  margin:auto;
  height:820px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ================= PERSON ================= */

.bg-person{
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  height:95%;
  object-fit:contain;
  opacity:.95;
  z-index:2;
}

/* ================= GLASS CARD ================= */

.empanel-card{
  position:relative;
  z-index:5;
  width:650px;
  text-align:center;
  padding:60px 40px;
  border-radius:30px;
  overflow:hidden;
  background:rgba(255,255,255,0.18);
  border:1px solid rgba(255,255,255,0.35);
  box-shadow:0 25px 60px rgba(0,0,0,.12);
  margin-top: 400px;
}

/* blur layer */
.empanel-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.25);
  z-index:-1;
}

/* glossy edge */
.empanel-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:30px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.4),
    inset 0 30px 60px rgba(255,255,255,0.25);
  pointer-events:none;
}

.empanel-card h2{
  font-size:80px;
  font-weight:900;
  color:#0f172a;
  margin-top: 0;
  margin-bottom: 0;
}

.empanel-card p{
  font-size:24px;
  line-height:1.4;
  color:#2f2f2f;
  font-weight: 800;
}

/* ================= LOGOS ================= */
body {
  overflow-x: hidden;
}
.empanel-logos img{
  position:absolute;
  width: 50%;
  height:85px;
  z-index:6;
  object-fit:contain;
  transition:.3s;
}

/* LEFT SIDE */
.sbi{ top:245px; left:7.5%; }
.union{ top:330px; left:-7.50%; }
.karnataka{ top:498px; left:-2.5%; }
.canara{ top:666px; left:-2.4%; }
.paschim{ top:582px; left:-12.5%; }

/* RIGHT SIDE */
.pnb{ top:249px; right:7.6%; }
.uco{ top:330px; right:-7.6%; }
.boi{ top:498px; right:-2.53%; }
.hdfc{ top:667px; right:-2.5%; }
.bccb{ top:582px; right:-12.4%; }


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

@media (max-width:1400px){

  .empanelment-container{
    height:900px;
  }

  .empanel-card{
    width:560px;
    margin-top:320px;
  }

  .empanel-card h2{ font-size:64px; }
  .empanel-card p{ font-size:20px; }

  .empanel-logos img{
    height:70px;
  }
}

@media (max-width:1200px){

  .empanelment-container{
    height:820px;
  }

  .empanel-card{
    width:500px;
    margin-top:280px;
    padding:50px 30px;
  }

  .empanel-card h2{ font-size:52px; }
  .empanel-card p{ font-size:18px; }

  .empanel-logos img{
    height:60px;
  }

  /* bring logos inside screen */
  .union,.uco{ left:2%; right:2%; }
  .paschim,.bccb{ left:2%; right:2%; }

}

@media (max-width:992px){

  .empanelment-container{
    height:auto;
    padding:120px 20px 80px;
  }

  .bg-person{
    height:80%;
    opacity:.25;
  }

  .empanel-card{
    margin-top:0;
    width:100%;
    max-width:520px;
    padding:40px 25px;
  }

  .empanel-card h2{ font-size:42px; }
  .empanel-card p{ font-size:16px; }

  /* hide far logos */
  .union,.uco,.paschim,.bccb{
    display:none;
  }

  .empanel-logos img{
    height:55px;
  }
}

@media (max-width:768px){

  .bg-person{
    height:65%;
    opacity:.15;
  }

  .empanel-card{
    border-radius:22px;
  }

  .empanel-card h2{ font-size:32px; }
  .empanel-card p{ font-size:15px; line-height:1.5; }

  /* hide all floating logos */
  .empanel-logos img{
    display:none;
  }
}
@media (max-width:480px){

  .empanelment-container{
    padding:90px 15px 60px;
  }

  .empanel-card{
    padding:30px 18px;
  }

  .empanel-card h2{ font-size:26px; }
  .empanel-card p{ font-size:14px; }

}

/* =========================================================
  END OF
   ========================================================= */


/* =========================================================
   EMPANELMENTS + BANKS MARQUEE SLIDER
   ========================================================= */
/*.empanel {
  /*background: #fff;*/
  /*padding: clamp(60px, 6vw, 100px) 0;*/
/*}*/
/*.emp-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(30px, 3vw, 60px);
  align-items: center;
}*/
/* .emp-media {
  margin: 0;
}*/
/* .emp-media img {
  width: 100%;
  border-radius: 20px;
  box-shadow: var(--shadow);
  object-fit: cover;
}*/
/* .emp-copy {
  max-width: 640px;
}*/
/* .emp-eyebrow {
  display: inline-block;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--brand);
  margin-bottom: 12px;
  text-transform: uppercase;
  position: relative;
}*/
/* .emp-eyebrow::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  border-radius: 3px;
  background: var(--brand);
  margin-top: 8px;
  transform-origin: left;
  transform: scaleX(0);
  animation: emp-underline 0.6s 0.1s forwards ease;
}*/
/* @keyframes emp-underline {
  to { transform: scaleX(1); }
}*/

/* .emp-title {
  margin: 0 0 12px;
  color: var(--dark);
  font-weight: 900;
  line-height: 1.2;
  font-size: clamp(24px, 3vw, 40px);
}*/
/* .emp-text {
  margin: 10px 0 20px;
  color: var(--muted);
  line-height: 1.75;
  font-size: clamp(14px, 1.1vw, 16px);
}*/
/* .emp-cta {
  margin-top: 20px;
}*/
/* .emp-cta:hover {
  background: #ff5f27;
}*/
/* .emp-cta-arrow {
  transform: rotate(0deg);
  transition: transform 0.25s;
}*/
/* .emp-cta:hover .emp-cta-arrow {
  transform: translateX(3px);
}*/

/* ====== Banks Marquee Slider ====== */
/* .b-shell-container {
  width: 80%;
  margin: -30px auto 0 auto;
  overflow: hidden;
}*/
/*.banks-shell {
  position: relative;
  background: #fff;
  border-radius: 18px;
  /*padding: clamp(16px, 2vw, 24px) 0 ;
  box-shadow: var(--shadow);*/
  /*background: rgb(256, 256, 256, 0);
  overflow: hidden;
}*/

/*.banks-track {
  display: flex;
  align-items: center;
  gap: clamp(10px, 2.5vw, 10px);
  animation: scroll-marquee 35s linear infinite;
  width: max-content;
}*/

/*.bank-card {
  width: 200px;
  height: auto;
  flex: 0 0 auto;
  background: #f7f8fb;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  /*padding: clamp(8px, 1vw, 12px) clamp(24px, 2vw, 36px);
  min-width: clamp(120px, 10vw, 180px);
  height: clamp(60px, 7vw, 100px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);*/
  /*transition: transform 0.3s ease, box-shadow 0.3s ease;
}*/
/*.bank-card:hover {
  transform: scale(1.09);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}*/
/*.bank-card img {
  width: 100%;
  object-fit: contain;
}*/

/* marquee animation */
/*@keyframes scroll-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}*/

/* pause on hover */
/*.banks-shell:hover .banks-track {
  animation-play-state: paused;
}*/

/* ========== Responsive ========== */
/* @media (max-width: 1024px) {
  .emp-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .emp-copy { margin: 0 auto; }
  .emp-media img {
    max-height: 400px;
    object-fit: cover;
  }
  .banks-track {
    animation-duration: 25s;
  }
}*/

/* @media (max-width: 768px) {
  .b-shell-container { width: 92%; }
  .bank-card {
    min-width: 120px;
  }
  .banks-track {
    gap: 20px;
    animation-duration: 20s;
  }
}*/

/* @media (max-width: 480px) {
  .empanel { padding: 60px 0; }
  .bank-card {
    min-width: 100px;
    height: 60px;
  }
  .banks-track {
    animation-duration: 18s;
  }
}*/

/*.banks-dots{ display:flex; justify-content:center; gap:10px; margin-top:14px }
.banks-dots .dot{ width:10px; height:10px; border-radius:50%; background:rgba(15,30,55,.25); border:none; cursor:pointer; transition:transform .2s, background .2s }
.banks-dots .dot.is-active{ background:#0F1E37; transform:scale(1.15) }*/

/* =========================================================
   SERVICES (dark band carousel)
   ========================================================= */
.srv{ position:relative; overflow:hidden }
#services .container{ max-width:100%; padding:0 }
.srv-head{ text-align:center; margin-bottom:28px }
.srv-eyebrow{ display:block; font-size:12px; font-weight:800; letter-spacing:.08em; color:var(--brand); margin-bottom:8px }
.srv-title{ margin:0; color:var(--dark); font-weight:900; line-height:1.15; font-size:clamp(26px,3vw,42px) }

.srv-shell{
  position:relative; margin-top:18px;
  /*background: linear-gradient(0deg, rgba(15,30,55,.90), rgba(15,30,55,.90)), url("images/home/our_services bg.webp") center/cover no-repeat;*/
  background: url("/innovus_management/assets/images/home/our_services bg.webp") center/cover no-repeat;
  padding:60px 0;
}
.srv-slider{ overflow:hidden; padding: 10px 0; padding: 10px 0; width: 84%; margin: 0 auto;}
.srv-track{ display:flex; gap:28px; will-change:transform; transform:translateX(0); transition:transform .55s ease }
.srv-card{
  flex:0 0 calc((100% - 56px) / 3);
  background:rgba(255,255,255,.06);
  border:2px solid rgba(255,255,255,.65);
  border-radius:18px; padding:22px; transition:background .25s, color .25s, box-shadow .25s, transform .25s;
}
.srv-card:hover{ background:#fff; color:#5A6475; box-shadow:var(--shadow); transform:translateY(-3px) }
.srv-media{ margin:0 0 16px; border-radius:12px; overflow:hidden; background:#fff }
.srv-media img{ width:100%; height:220px; object-fit:cover }
.srv-copy{ display:grid; gap:10px }
.srv-item-title{ margin:0; font-weight:500; font-size:18px; color:#EAF0FF; letter-spacing:.4px }
.srv-text{ margin:0; line-height:1.5; font-size:16px; color:#B7C3D6; font-weight: 400; }
.srv-more{ color: var(--brand); font-weight:700 }
.srv-card:hover .srv-item-title{ color:var(--dark) }
.srv-card:hover .srv-text{ color:#5A6475 }
.srv-card:hover .srv-more{ color:var(--brand) }
.srv-nav{
  position:absolute; top:50%; transform:translateY(-50%); width:32px; height:32px; display:grid; place-items:center;
  border:1px solid var(--light); border-radius:999px; background:#fff; color:#7b879b; box-shadow:0 8px 24px rgba(0,0,0,.18); cursor:pointer; z-index: 1; opacity: .6;
}
.srv-nav:hover{ color:var(--brand); border-color:#ffd7c9 }
.srv-nav.prev{ left: 6.9%; } .srv-nav.next{ right: 6.9%; }

/* =========================================================
   PROJECT STATISTICS
   ========================================================= */
.pst{ background:#fff;}
.pst-top{ display:grid; grid-template-columns: 1.4fr 1fr; gap:30px; align-items:center }
.pst-media{margin: 0;}
.pst-media img{ width:100%; border-radius:24px; box-shadow:var(--shadow); object-fit:cover }
.pst-copy{ max-width:680px }
.pst-eyebrow{ display:inline-block; color:var(--brand); font-weight:800; font-size:12px; letter-spacing:.08em; margin-bottom:10px; text-transform:uppercase }
.pst-title{ margin:0 0 12px; color:var(--dark); font-weight:900; line-height:1.2; font-size:clamp(26px,3.2vw,40px) }
.pst-text{ margin:0 0 20px; color:#6F7E98; line-height:1.75; font-size:16px }
.pst-cta{ margin-top: 20px;}
.pst-cta:hover{ background:#ff5f27; transform:translateY(-1px) }

.pst-container{
  margin-top: -40PX;
}
.pst-snap{
  width: 90%;
  padding: 20px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  background-color: #fff;
  position: relative;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.pst-snap-left{
  padding-right: 15px;
}
.pst-item-copy{
   border-bottom:1px solid var(--muted);
   padding-bottom: 10px;
}
.pst-snap-left h3{ margin:0 0 10px; color:var(--dark); font-size:clamp(20px,2.4vw,28px); font-weight:600; line-height:1.25 }
.pst-snap-left p{ margin:0; color:#6F7E98; line-height:1.75; font-size: 14px; font-weight: 400; }
.pst-snap-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px 28px; align-content:start; padding-bottom: 15px; }
.pst-item{ display:grid; grid-template-columns:1fr 1.8fr; gap:12px; align-items:center; padding-bottom:16px;}
.pst-item:nth-child(2n){ padding-left:18px }
.pst-thumb{border-radius:10px; object-fit:cover }
.pst-item-copy h4{ margin:0 0 6px; color:var(--dark); font-size:16px; font-weight:600; line-height:24px; }
.pst-item-copy small{ color:#8C98AC; font-size:14px; font-weight: 400; }
.pst-item-copy small strong{ color:#5E6C81 }
.pst-link{ position:absolute; right:20px; bottom:14px; color:var(--brand); font-weight:500; font-size: 14px; }
.pst-link:hover{ text-decoration:underline }

/* =========================================================
   CITIES GRID (dark image band)
   ========================================================= */
.cities{ background:#fff;}
#top-cities{
  padding-bottom: 0;
}
.cities-head{ text-align:center }
.cities .eyebrow{ display:inline-block; color:var(--brand); font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px }
.cities .title{ margin:0; color:var(--dark); font-weight:900; line-height:1.15; font-size:clamp(26px,3.2vw,40px) }
.cities-band{
  margin-top:18px;
  background:url("/innovus_management/assets/images/service_cities/service_cities_bg.webp") center/cover no-repeat;
  padding:48px 0 40px;
}
.cities-grid{ display:grid; gap:30px; grid-template-columns:repeat(12,1fr) }
.city-card{
  grid-column:span 4; background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.7);
  border-radius:var(--radius); padding:12px; transition:box-shadow .25s, transform .25s, background .25s;
}
.city-card:hover{ background:rgba(41, 39, 39, 0.09); transform:translateY(-3px); box-shadow:var(--shadow) }
.img-wrap{ border-radius:var(--radius); overflow:hidden; background:#1e2a3f; margin-bottom:14px }
.img-wrap img{ width:100%; height:220px; object-fit:cover; border-radius:10px; transform:scale(1); transition:transform .45s ease }
.city-card:hover .img-wrap img{ transform:scale(1.06) }
.city-copy h3{ margin:0 0 6px; color:#EAF0FF; font-weight:500; font-size:16px }
.city-copy p{ margin:0; color:#C9D4E6; font-size:12px; font-weight: 500; }
.city-copy p span{ color:var(--brand); font-weight:700 }
.more-wrap{ display:flex; justify-content:center; margin-top:26px }
.btn-more{}
.btn-more:hover{ background:#ff5f27; transform:translateY(-1px) }

/* =========================================================
   SUCCESS STORIES (cards with sliding panel)
   ========================================================= */
.stories{ background:#FDF3EF; padding:80px 0 40px }
.ss-head{ text-align:center; margin-bottom:26px }
.ss-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:28px }

.ss-card{
  grid-column:span 4; position:relative;
  overflow:hidden; border:1px solid var(--light); background:#fff;
  transition:transform .28s, box-shadow .28s, border-color .28s;
  isolation:isolate;
  --slide:140px;
}
.ss-card:hover{ transform:translateY(-4px); box-shadow:0 22px 54px rgba(0,0,0,.16); border-color:#FFD7C9 }

.ss-media{
  margin: 0;
}
.ss-media img{ width:100%; object-fit:cover }
.ss-panel{
  background:linear-gradient(0deg, rgba(255,255,255,.98), rgba(255,255,255,.92));
  backdrop-filter:saturate(150%) blur(2px);
  border-top:1px solid #F1F3F7; padding:16px 18px;
  transform:translateY(0); transition:transform .35s ease, margin-bottom .35s ease;
}
.ss-panel:hover, .ss-card:focus-within .ss-panel{
  transform:translateY(calc(-.5 * var(--slide)));
  margin-bottom:calc(-.5 * var(--slide));
}
.ss-item-title{ margin:0 0 8px; color:var(--dark); font-weight:600; font-size:20px; letter-spacing:.2px }
.ss-text{
  margin:0 0 12px; color:var(--muted); font-size:14px; line-height:1.7; font-weight: 400;
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; -webkit-line-clamp:2;
}
.ss-panel:hover .ss-text, .ss-panel:focus-within .ss-text{ -webkit-line-clamp:4 }
.ss-more{
  display:inline-block; color:var(--brand); font-weight:500; font-size: 14px;
  opacity:0; transform:translateY(6px); pointer-events:none; position: relative; transition:opacity .25s, transform .25s;
}
.ss-more svg{ position: absolute;}
.ss-card:hover .ss-more, .ss-card:focus-within .ss-more{ opacity:1; transform:translateY(0); pointer-events:auto }

/* =========================================================
   CONTACT (left info card + right form)
   ========================================================= */

.contact{
  background-color: var(--dark);
 }
.contact-grid{
  display:grid; grid-template-columns:1.05fr 1fr; gap:28px; padding: 20px; border-radius: var(--radius); box-shadow: var(--shadow);
}
.info-card{
  position:relative; border-radius:16px; overflow:hidden;
  background:url("/innovus_management/assets/images/home/let_s start.webp") center/cover no-repeat;
}
.info-body{ position:relative; z-index:1; color:#fff; padding:26px 24px 22px }
.info-body h2{ margin:0 0 10px; font-size:36px; line-height:1.1; font-weight:700 }
.tagline{ margin:20px 0 22px; opacity:.95 }
.info-list{ list-style:none; margin:0; padding:0; display:grid; gap:16px; margin-top: 80px; }
.info-list li{ display:grid; grid-template-columns:24px 1fr; gap:12px; align-items:start; color:#fff; line-height: 26px; }
.info-list .line-icon,.cta .line-icon{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.socials{ display:flex; gap:12px; margin-top: 25%; }
.sc{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:#FF6A33; color:#fff }



/* =========================================================
   TESTIMONIALS (3-up slider)
   ========================================================= */
.tms{padding: 0 0 40px 0;}
.tms-band{ background:#E9EEF5; padding:40px 0 80px; background: #ECEFF2; }
.tms-eyebrow{ display:inline-block; color:var(--brand); font-weight:900; letter-spacing:.08em;  font-size:12px }
.tms-title{ margin:8px 0 8px; color:var(--dark); font-weight:900; font-size:clamp(26px,3.2vw,40px); line-height:1.15 }
.tms-sub{ margin:0; color:#8EA0B7; max-width:760px }
.tms-shell{ position:relative; width: 75%; margin: -50px auto 0 auto; }
.tms-slider{ overflow:hidden; padding: 10px; }
.tms-track{ display:flex; gap:24px; will-change:transform; transform:translateX(0); transition:transform .55s ease }
.tms-card{
  flex:0 0 calc((100% - 48px) / 3);
  background:#fff; border:1px solid var(--light); transition: transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 4px 3px rgba(34, 33, 33, 0.3);
  border-radius: 10px;
  padding:18px; display:flex; flex-direction:column; gap:12px;
}

.tms-head{ display:flex; align-items:center; gap:12px }
.tms-ava{ width:42px; height:42px; border-radius:50%; object-fit:cover }
.tms-name{ margin:0; font-size:16px; font-weight:700; color:var(--dark); letter-spacing:.2px }
.tms-role{ display:block; margin-top:2px; color:var(--brand); font-weight:400; font-size:12px; letter-spacing: .4px; }
.tms-text{ margin:0; color:#7B8CA6; line-height:1.8; font-size:12px; letter-spacing: .4px; }
.tms-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border-radius:8px; border:1px solid var(--light);
  background:#fff; color:#7c8aa0; display:grid; place-items:center; box-shadow:0 10px 26px rgba(0,0,0,.08); cursor:pointer; z-index: 1; opacity: .5;
}
.tms-nav:hover{ color:var(--brand); border-color:#ffd7c9 }
.tms-nav.prev{ left:-6px } .tms-nav.next{ right:-6px }



/* base card (merge with your existing properties if needed) */
.srv-card {
  position: relative; /* required for the ::before layer */
  flex: 0 0 calc((100% - 56px) / 3);
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.65);
  border-radius: 18px;
  overflow: visible; /* Do NOT clip the shadow */
  z-index: 0;
  transition: opacity .35s ease, transform .25s ease, background .5s ease, color .25s ease, box-shadow .25s ease;
  opacity: 1;
  -webkit-font-smoothing: antialiased;
}

/* This pseudo-element controls the animated radial highlight and box-shadow */
/* Note: use a semi-transparent radial so the fade looks smooth on different backgrounds */
.srv-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;        /* match the card radius */
  z-index: -1;
  pointer-events: none;

  background: radial-gradient(
    circle at center,
    rgba(255,255,255,0.12) 0%,
    rgba(255,255,255,0.04) 30%,
    rgba(255,255,255,0) 60%
  );

  /* start small + invisible for a smooth fade-in */
  background-size: 0% 0%;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;                     /* fade target */
  box-shadow: 0 0 0 rgba(0, 0, 0, 0); /* initial no shadow */

  /* transitions:
     - background-size grows
     - opacity fades in/out
     - box-shadow animates for the shadow*/
  
  transition:
    background-size 0.5s cubic-bezier(.22,.9,.2,1),
    opacity 0.2s ease,
    box-shadow 0.5s ease;
}

/* Hover (same shadow pattern) with fade-in for the bg highlight */
.srv-card:hover::before,
.srv-card:focus-within::before {
  background-size: 200% 200%;
  opacity: 1; /* fade in the radial highlight */
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.1),
    2px 0 10px rgba(0, 0, 0, 0.1),
    0 -2px 10px rgba(0, 0, 0, 0.1),
    -2px 0 10px rgba(0, 0, 0, 0.1);
}

/* Optional — subtle lift to pair with the shadow (remove if you want only the shadow) 
.srv-card:hover,
.srv-card:focus-within {
  transform: translateY(-4px);
}*/
.srv-card:hover{
  border: 2px solid rgba(254, 254, 254, 0.001);
}
/* Respect reduced motion preferences: disable animations for those users */
@media (prefers-reduced-motion: reduce) {
  .srv-card::before,
  .srv-card {
    transition: none !important;
  }
  .srv-card::before {
    opacity: 1;
    background-size: 200% 200%;
    box-shadow:
      0 2px 10px rgba(0, 0, 0, 0.1),
      2px 0 10px rgba(0, 0, 0, 0.1),
      0 -2px 10px rgba(0, 0, 0, 0.1),
      -2px 0 10px rgba(0, 0, 0, 0.1);
  }
}


/* ================= TESTIMONIAL ================= */
.testimonial{
  background:linear-gradient(#7fb3b5 58%, #e9e9ea 58%);
  padding:90px 0;
  text-align:center;
  overflow:hidden;
}


.testimonial-wrapper{
  max-width:1180px;
  width:92%;
  margin:auto;
}
.testimonial .sub{
  letter-spacing:4px;
  font-size:13px;
  font-weight:600;
  margin-bottom:10px;
}

.testimonial .heading{
  font-size:44px;
  font-weight:800;
  margin-bottom:70px;
  margin-top: 0;
}

/* SLIDER */
.tst-slider{overflow:hidden; position:relative; padding: 30px 0 50px 0;}
.tst-track{display:flex; transition:transform .6s ease;}

.tst-slide{
  min-width:100%;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:30px;
  justify-items:center;
}

/* CARD */
.testimonial .card{
  width: 100%;
  width:350px;
  height:250px;
  background:#f3f3f3;
  padding:40px 25px 30px 25px;
  border-radius:8px;
  position:relative;
  text-align:left;
  margin:auto;
}

.testimonial .card p{
  color:#6f6f6f;
  line-height:1.4;
  margin-bottom:30px;
  margin-top: 0;
}


/* QUOTE */
.testimonial .quote{
  position:absolute;
  top:-25px;
  left:30px;
  width:50px;height:50px;
  background:#1ea43c;
  border-radius:50%;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  font-weight:bold;
}

/* PROFILE */
.testimonial .profile{
  display:flex;
  align-items:center;
  gap:16px;
}

.testimonial .profile img{
  width:70px;height:70px;
  border-radius:50%;
}

/* DOTS */

.tst-dots span{
  width:12px;height:12px;border-radius:50%;
  background:#cfcfcf;display:inline-block;margin:6px;cursor:pointer;
}
.tst-dots .active{background:#1ea43c;}
.profile h4{
  font-size: 20px;
  font-weight: 700;
  margin-top: 0;
  margin-bottom: 0;
}
.profile span{
  font-weight: 500;
  color: gray;
  font-size: 14px;
 line-height: 2;
}

/*=======================
RESPONSIVE
=========================*/
@media (min-width:1400px){
  .testimonial{
    padding:50px 0;
  }
  .testimonial .heading{
    font-size:52px;
  }
}

@media (max-width:1399px){
  .testimonial .heading{
    font-size:42px;
  }
}

@media (max-width:1199px){

  .tst-slide{
    grid-template-columns: repeat(2, 1fr);
    gap:25px;
  }

  .testimonial .heading{
    font-size:36px;
    margin-bottom:50px;
  }

}

@media (max-width:991px){

  .testimonial{
    padding:70px 0;
  }

  .tst-slide{
    grid-template-columns: repeat(2, 1fr);
    gap:20px;
  }

  .testimonial .heading{
    font-size:30px;
  }

  .testimonial .card{
    padding:30px 20px;
  }

}

@media (max-width:767px){

  .tst-slide{
    grid-template-columns: 1fr;
  }

  .testimonial .heading{
    font-size:26px;
  }

  .testimonial .sub{
    font-size:12px;
    letter-spacing:3px;
  }

  .testimonial .profile img{
    width:60px;
    height:60px;
  }

}

@media (max-width:575px){

  .testimonial{
    padding:60px 0;
  }

  .testimonial .heading{
    font-size:22px;
    margin-bottom:40px;
  }

  .testimonial .card{
    padding:25px 18px;
  }

  .testimonial .card p{
    font-size:14px;
    line-height:1.5;
  }

  .profile h4{
    font-size:16px;
  }

  .profile span{
    font-size:13px;
  }

  .testimonial .quote{
    width:40px;
    height:40px;
    font-size:20px;
    top:-20px;
  }

}





/* =========================================================
   RESPONSIVE (all breakpoints at the end)
   ========================================================= */
.container{
  width: 100%;
  max-width: 100%;
  padding: 0 80px;
}
/* HERO + NAV */
@media (max-width:980px){
  .nav-links{ gap:18px }
  .headline{ font-size:clamp(28px,7vw,48px) }
  .hero-slider{ min-height:460px }
}

/* Know us */
@media (max-width:768px){
  .ku-grid {
    grid-template-columns:1fr;
  }
  .ku-media img {
    width: 100%;
  }
}
@media (max-width:460px){
  .ku-visual {
    padding: 40px 0 40px 40px;
  }
  .ku-deco{
    left: clamp(0px, -2vw, -14px);
  }
}
/* EMPANELMENTS */
@media (max-width:1100px){
  .bank-card {
        flex-basis: calc((100% - 24px) / 10);
    }
}
@media (max-width:1024px){ .emp-grid{ grid-template-columns:1fr; gap:24px } }
@media (max-width:900px){
  .banks-shell{ padding:16px 46px }
}
@media (max-width:600px){
  .bank-card{ flex-basis:100% }
  .banks-shell{ padding:16px 42px }
  .bank-card {
    flex-basis: calc((100% - 24px) / 14);
  }
}
@media (max-width:480px){
  .empanel{ padding:56px 0 }
  .banks-shell{ padding:14px 38px }
}
@media (max-width:350px){
  .emp-title{ font-size:22px }
  .emp-text{ font-size:14px }
  .banks-shell{ padding:12px 36px }
  .bank-card {
      flex-basis: calc((100% - 24px) / 18);
    }
  .banks-nav{ width:32px; height:32px }
}

/* SERVICES */
@media (max-width:1280px){ .srv-media img{ height:200px } }
@media (max-width:1100px){
  .srv-media img{ height:190px }
}
@media (max-width:680px){
  .srv{ padding:42px 0 56px }
  .srv-card{ flex-basis:100% }
  .srv-media img{ height:200px }
  .srv-nav.prev{ left:2px } .srv-nav.next{ right:2px }
}
@media (max-width:480px){
  .srv-media img{ height:180px }
  .srv-title{ font-size:clamp(22px,5.3vw,30px) }
}

/* PROJECT STATS */
@media (max-width:1100px){
  .pst-top{ grid-template-columns:1fr; gap:24px }
  .pst-snap{ grid-template-columns:1fr; margin-top:18px }
}
@media (max-width:720px){
  .pst-snap{ padding:18px }
  .pst-snap-list{ grid-template-columns:1fr }
  .pst-item:nth-child(2n){ padding-left:0 }
  .pst-link{ position:static; margin-top:8px; display:block; text-align:right }
}
@media (max-width:480px){
  .pst{ padding:48px 0 32px }
  .pst-title{ font-size:clamp(22px,6vw,28px) }
  .pst-text{ font-size:14px }
  .pst-thumb{ width:56px; height:56px }
}
@media (max-width:350px){
  .pst-snap{ padding:14px }
  .pst-item{ grid-template-columns:56px 1fr }
  .pst-item-copy h4{ font-size:16px }
  .pst-item-copy small{ font-size:13px }
}

/* CITIES */
@media (max-width:1100px){
  .city-card{ grid-column:span 6 }
  .img-wrap img{ height:200px }
}
@media (max-width:680px){
  .cities-band{ padding:40px 0 34px }
  .city-card{ grid-column:span 12 }
  .img-wrap img{ height:210px }
}
@media (max-width:480px){ .img-wrap img{ height:190px } }
@media (max-width:350px){
  .city-card{ padding:14px }
  .img-wrap{ padding:8px }
  .img-wrap img{ height:170px }
  .city-copy h3{ font-size:16px }
  .city-copy p{ font-size:13px }
}

/* SUCCESS STORIES */
@media (max-width:1100px){
  .ss-card{ grid-column:span 6 }
  .ss-media img{ height:280px }
}
@media (max-width:720px){
  .ss-card{ grid-column:span 12 }
  .ss-media img{ height:260px }
}
@media (max-width:480px){
  .stories{ padding:44px 0 52px }
  .ss-title{ font-size:clamp(22px,6vw,28px) }
  .ss-media img{ height:230px }
}
@media (max-width:350px){
  .ss-media img{ height:210px }
  .ss-panel{ transform:translateY(0) }
  .ss-text{ -webkit-line-clamp:4 }
}

/* CONTACT */
@media (max-width:1024px){
  .contact-grid{ grid-template-columns:1fr; gap:22px }
  .info-card{ min-height:380px }
}
@media (max-width:560px){
  .attach-list {
    max-height: 600px;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width:480px){ .info-body h2{ font-size:32px } }
@media (max-width:350px){
  .row.two{ grid-template-columns:1fr; gap:14px }
  .info-body h2{ font-size:28px }
}

/* TESTIMONIALS */
@media (max-width:1100px){ .tms-card{ flex-basis:calc((100% - 24px) / 2) } }
@media (max-width:680px){
  .tms-card{ flex-basis:100% }
  .tms-nav.prev{ left:2px } .tms-nav.next{ right:2px }
}

@media(max-width:900px){
  .testimonial-wrapper{width:92%;}
  .slide{flex-direction:column;gap:25px;align-items:center;}
  .card{width:100%;}
}


/* FOOTER */
@media (max-width:1200px){
  .iv-brand-title .line1,.iv-brand-title .line2{ font-size:46px }
  /*.iv-brand-row{ grid-template-columns:188px 1fr }*/
  .iv-logo{ width:188px }
}
@media (max-width:992px){
  .iv-grid{ grid-template-columns:1.25fr 1fr }
  .iv-brand-title .line1,.iv-brand-title .line2{ font-size:42px }
}
@media (max-width:720px){
  .iv-container{ padding:0 16px }
  .iv-grid{ grid-template-columns:1fr }
  .iv-brand-row{ grid-template-columns:170px 1fr }
  .iv-brand-title .line1,.iv-brand-title .line2{ font-size:40px }
  .iv-col-title{ font-size:28px }
}
@media (max-width:480px){
  .iv-brand-row{ grid-template-columns:150px 1fr }
  .iv-brand-title .line1,.iv-brand-title .line2{ font-size:34px }
}
@media (max-width:350px){
  .iv-container{ padding:0 12px }
  .iv-mid .iv-container{ padding:0 12px }
  .iv-mid .iv-legal{ margin-top:6px }
  .iv-mid-row{ flex-direction:column; text-align:center; gap:6px }
}

/**Inner page banner related css**/

.inner_banner {
  position: relative; /* IMPORTANT */
  width: 100%;
}

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

/* Center text on the image */
.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  width: 80%;
  padding: 20px;
}

.headline {
  font-size: 60px;
  font-weight: 900;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
  text-shadow: #474747 3px 3px 10px;
}

.subcopy {
  font-size: 24px;
  line-height: 1.6;
  text-shadow: #474747 3px 3px 5px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .headline {
    font-size: 28px;
  }
  .subcopy {
    font-size: 16px;
  }
}

/**eof Inner page banner related css**/

/** Header Button Css**/
@media (max-width:768px){
  .brand {
    width: 40px;
    left: 50% ;
  }
  .brand-web{
    display: none;
  }
  .brand-mbl{
    display: block;
  }
  .cta{
    width: 80px;
    padding: 5px 10px;
    font-size: 12px;
    text-align: center;

  }
  .cta-arrow{
    display: none;
  }
}