* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --primary: #e14a42;
      --heading: #102542;
      --text: #334155;
      --muted: #7b8794;
      --light: #f3f5f7;
      --border: #e5e7eb;
      --dark: #081f3d;
      --white: #ffffff;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: #fff;
      color: var(--heading);
      overflow-x: hidden;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    img {
      max-width: 100%;
      display: block;
    }

    .container {
      width: min(1180px, 92%);
      margin: 0 auto;
    }

    header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(255,255,255,0.96);
      border-bottom: 1px solid rgba(0,0,0,0.05);
      backdrop-filter: blur(10px);
    }

    .navbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 76px;
      gap: 2rem;
    }

    .logo {
      font-size: 1.55rem;
      font-weight: 600;
      color: var(--heading);
      letter-spacing: -0.6px;
    }

    .logo span {
      color: var(--primary);
    }
    .logo img{
      width: 100%;
    }
    

    .nav-links {
      display: flex;
      align-items: center;
      gap: 1.4rem;
    }

    .nav-links a {
      font-size: 0.80rem;
      font-weight: 500;
      color: #23324d;
      transition: 0.25s ease;
    }

    .nav-links a:hover {
      color: var(--primary);
      text-decoration: none;
    }
    .nav-links a.btn-primary {
      color: white;
      text-decoration: none;
    }
    .nav-links a.active{
  color:#e51b2d;
  position:relative;
}

.nav-links a.active::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-10px;
  width:100%;
  height:2px;
  background:#e51b2d;
}
    .gcc-focus-page section ,.padding-4{ 
      padding: 1rem 0 1rem 0 !important;
    }
    .feature-strip{
    display:grid;
    grid-template-columns: repeat(7,1fr);
    gap:12px;
    margin-top:18px;
    position:relative
    /* max-width:650px; */
  }
  .mini{
    display:flex;
    gap:10px;
    align-items:flex-start;
    background:#fff;
    border:1px solid var(--line);
    border-radius:10px;
    padding:10px 12px;
    min-height:68px;
  }
  .mini .ic{
    width:28px;height:28px;color:#2a3346;flex:0 0 auto;margin-top:1px;
  }
  .mini strong{
    display:block;
    font-size:12px;
    line-height:1.1;
    font-weight:700;
    margin-bottom:2px;
  }
  .mini span{
    display:block;
    font-size:11px;
    line-height:1.2;
    color:#5f6877;
  }
  .gcc-focus-page .quote{
    position: absolute;
    right: 5%;
    top: -35%;
    width:305px;
    background:rgba(10,31,61,0.87);
    color:#fff;
    border-radius:10px;
    padding:16px 18px 16px 18px;
    box-shadow:0 8px 18px rgba(0,0,0,.12);
  }
  .gcc-focus-page .quote .mark{
    color:#ff5252;
    font-size:34px;
    line-height:0.8;
    display:block;
    font-weight:900;
    margin-bottom:4px;
  }
  .gcc-focus-page .quote p{
    margin:0;
    font-size:14px;
    line-height:1.42;
    font-weight:600;
  }

    @media(max-width:768px){
      .expertise-grid {grid-template-columns:repeat(2,1fr)!important;}
.gcc-success-grid,.impact {grid-template-columns:1fr!important;}
.gcc-focus-page .feature-strip{grid-template-columns:unset!important}
.gcc-focus-page .feature-strip .quote{position:unset!important;width:100%!important;margin-top:12px!important}
.impact .head{grid-column: unset!important;}
.gcc-focus-page h2 br{display:none;}
.gcc-focus-page .container.hero-grid.gcc {background:none;}
}
@media(max-width:768px){.gcc-success-grid {grid-template-columns:1fr}}
    a.btn.btn-primary i{padding-left:5px}
    a.btn-outline{border-color: #282727; color: var(--heading); background: transparent;}
    a.btn-outline i{padding-left:5px;transform: rotate(-45deg);}
    a.btn-outline:hover{background: #000000;color: white;}
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.5rem 1rem;
      border-radius: 0px;
      font-size: 0.92rem;
      font-weight: 600;
      transition: all 0.25s ease;
      border: 1px solid transparent;
      cursor: pointer;
    }

    .btn-primary {
      background: var(--primary);
      color: white;
    }

    .btn-primary:hover {
      background: #cb3f38;
      color: white;
    }

    .btn-outline {
      border-color: #cfd6df;
      color: var(--heading);
      background: transparent;
    }

    .btn-outline:hover {
      background: #f8fafc;
    }

    .hero {
      padding: 6.5rem 0 5.5rem;
      background: #fff;
    }

    .hero-grid {
      /*display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 5rem;
      align-items: center;*/
      display: flex;
    }
.container.hero-grid.gcc {padding: 30px 0px;background:url(images/gcc-main-banner.jpg) right bottom no-repeat;background-size: cover;}
.container.hero-grid.services-hero {padding:30px 0px;background:url(images/services-main-banner.jpg) right bottom no-repeat ;background-size: cover;}
div.hero-divider {
            width: 40px;
            height: 5px;
            background-color: var(--primary);
            margin-bottom: 24px;
        }
        div.footer-column ul li{margin-bottom:0px!important}
        div.footer-grid ul{gap:0;}
.eyebrow {
      font-size: 1rem;
      font-weight: 700;
      color: var(--primary);
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 1rem;
    }
    .tcontainer {
  display: grid;
  grid-template-columns: 40% 60%;
}
a.btn-outline .fa-arrow-right:before{position:relative;top:3px;}
@media(min-width:992px){.container.navbar .logo{width:33%}}
@media (max-width: 768px) {
  .tcontainer {
    grid-template-columns: 1fr;
  }
}
   .hero .eyebrow {
      margin-bottom: 2.3rem;
    }
    .hero h1 {
      font-size: clamp(3rem, 5vw, 5.3rem);
      line-height: 1.03;
      letter-spacing: -2.5px;
      font-weight: 500;
      max-width: none;
      margin-bottom: 1.6rem;
      color: var(--heading);
    }

    .hero h1 span {
      color: var(--primary);
    }

    .hero p {
      max-width: 640px;
      color: var(--muted);
      font-size: 1.05rem;
      margin-bottom: 1rem;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
    }

    .hero-card {
      border: 1px solid var(--border);
      border-radius: 18px;
      background: linear-gradient(180deg,#fff,#f8fafc);
      padding: 2rem;
      box-shadow: 0 18px 40px rgba(15,23,42,0.06);
    }

    .hero-stat {
      padding: 1rem 0;
      border-bottom: 1px solid var(--border);
    }

    .hero-stat:last-child {
      border-bottom: none;
    }

    .hero-stat h3 {
      color: var(--primary);
      font-size: 2.4rem;
      line-height: 1;
      font-weight: 500;
      margin-bottom: 0.4rem;
    }

    .hero-stat p,
    .card p,
    .service-box p,
    .process-step p,
    .stat-box p,
    footer p,
    .footer-grid li,
    .check-item p {
      color: var(--muted);
      font-size: 1.05rem;
    }

    .section {
      padding: 6rem 0;
    }

    .gray {
      background: var(--light);
    }

    .section-title {
      max-width: 100%;
      margin-bottom: 3.5rem;
    }

    .section-title h2 {
      font-size: clamp(2.1rem,4vw,3rem);
      line-height: 1.08;
      letter-spacing: -1.4px;
      font-weight: 600;
      color: var(--heading);
      margin-bottom: 1rem;
    }

    
    .service-grid,
    .engagement-grid,
    .process {
      display: grid;
      grid-template-columns: repeat(4,1fr);
      gap: 1.4rem;
    }
    .service-grid {gap:unset}
    .cards,.engagement-grid{
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: unset;
    }
    .split-grid {
      gap:unset!important;
    }
    .split-grid h3{font-size: 2.2rem!important;}
.engagement-grid h3 {font-size: 2.9rem !important;margin-bottom: 0px!important;}
.engagement-grid span{margin-bottom:0.9rem;display:inline-block;/* border:1px solid; */}

.readengage{margin-top: 1rem; display: inline-flex; 
  align-items: center; color: var(--heading); font-weight: 600; font-size: 0.92rem;}
.readengage:hover {color: var(--primary);}
.readengage i {padding-left:5px;transform: rotate(-45deg);position:relative;top:3px;}

    .card,
    .service-box,
    .process-step,
    .stat-box {
      background: white;
      border: 1px solid var(--border);
      border-radius: 0px;
      padding: 2rem;
      transition: 0.25s ease;
    }
    .engagement-grid .card:hover{
      transform: unset!important;
      box-shadow: none!important;
    }
    .max-width-100{max-width: 100%;}
    .card:hover,
    .service-box:hover,
    .process-step:hover,
    .stat-box:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 30px rgba(15,23,42,0.05);
    }
    .process{border:1px solid #d9d9d9}
.process-step{border:0px }
.process-step:hover{transform:unset!important;box-shadow:none!important;}


    .card-number {
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 1rem;
    }

    .card h3,
    .service-box h4,
    .process-step h3,
    .check-item h4 {
      font-size: 1.2rem;
      line-height: 1.3;
      margin-bottom: 0.9rem;
      font-weight: 700;
      color: var(--heading);
    }

    .split-grid,
    .two-col {
      display: grid;
      grid-template-columns: repeat(2,1fr);
      gap: 2rem;
    }

    .learn-more {
      margin-top: 1rem;
      display: inline-flex;
      align-items: center;
      color: var(--heading);
      font-weight: 600;
      font-size: 0.92rem;
    }

    .check-list {
      display: flex;
      flex-direction: column;
      gap: unset;
    }

    .check-item {
      background: white;
      border: 1px solid var(--border);
      padding: 1.4rem;
      display: flex;
      gap: 1rem;
      border-radius: 4px;
    }

    .check-icon {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(225,74,66,0.1);
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      flex-shrink: 0;
    }

    .process-step {
      position: relative;
    }

    .process-step::after {
      content: '→';
      position: absolute;
      top: 50%;
      right: -0.9rem;
      transform: translateY(-50%);
      color: var(--primary);
      font-size: 1.4rem;
      font-weight: 700;
    }

    .process-step:last-child::after {
      display: none;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(3,1fr);
      gap: 1.5rem;
    }

    .stat-box h3 {
      font-size: 3.4rem;
      line-height: 1;
      color: var(--heading);
      margin-bottom: 0.7rem;
      font-weight: 500;
    }

    .stat-box h3::after {
      content: '+';
      color: var(--primary);
    }

    .cta {
      background: var(--dark);
      padding: 6rem 0;
      color: white;
    }

    .cta-grid {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: unset;
      flex-wrap: wrap;
    }

    .cta h2 {
      font-size: clamp(2.5rem,5vw,4.6rem);
      line-height: 1.05;
      letter-spacing: -2px;
      max-width: 720px;
      font-weight: 500;
    }

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

    footer {
      background: #06172d;
      color: rgba(255,255,255,0.75);
      padding: 4rem 0 2rem;
    }
    footer .logo img{
      width: 60%;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 2rem;
      margin-bottom: 3rem;
    }

    .footer-grid h4 {
      color: white;
      margin-bottom: 1rem;
      font-size: 1rem;
    }

    .footer-grid ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.7rem;
    }

    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,0.08);
      padding-top: 1.5rem;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
    }
    footer ul li a {
      color: rgba(255,255,255,0.75);
      transition: 0.25s ease;
    }
    footer p{color: rgba(255,255,255,0.75);margin-bottom: 0.9rem;}
    .seolinks{margin-top: 1rem; display: flex; flex-direction: column; gap: 0.5rem;}
    .seolinks p{display: flex; color: var(--light); align-items: center; gap: 0.5rem;}
    .seolinks p a{color: var(--light);}
    .seolinks p a:hover{color: var(--primary);}
    .seolinks p i{color: var(--primary);}
    .seolinks span{color: var(--light);}
    .mobile-toggle {
      display: none;
      flex-direction: column;
      gap: 4px;
      cursor: pointer;
    }

    .mobile-toggle span {
      width: 24px;
      height: 2px;
      background: var(--heading);
      border-radius: 50px;
    }

    @media (max-width: 1100px) {
      .hero-grid,
      .two-col,
      .split-grid,
      .footer-grid,
      .stats {
        grid-template-columns: 1fr;
      }

      .cards,
      .service-grid,
      .engagement-grid,
      .process {
        grid-template-columns: repeat(2,1fr);
      }
    }

    @media (max-width: 991px) {
      .mobile-toggle {
        display: flex;
      }

      .nav-links {
        position: absolute;
        top: 76px;
        left: 0;
        right: 0;
        background: white;
        flex-direction: column;
        align-items: flex-start;
        padding: 1.5rem 5%;
        border-bottom: 1px solid var(--border);
        display: none;
      }

      .nav-links.active {
        display: flex;
      }

      


      .cards,
      .service-grid,
      .engagement-grid,
      .process,
      .stats {
        grid-template-columns: 1fr;
      }

      .hero {
        padding-top: 4rem;
      }

      .hero-actions,
      .cta-grid {
        flex-direction: column;
        align-items: stretch;
      }

      .btn {
        width: 100%;
      }

      .process-step::after {
        display: none;
      }

      .hero h1,
      .section-title h2,
      .cta h2 {
        letter-spacing: -1px;
      }
    }
    .dp-none {
      display: none;
    }
    /*success stories css*/
    cta{
  background:#051433;
  padding:45px 0;
  margin-top:60px;
}

.cta-flex{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:30px;
}

.cta h2{
  color:#fff;
  font-size:44px;
}

.cta h2 span{
  color:#eb1d2f;
}

.cta p{
  color:#fff;
  margin-top:10px;
}

.cta-buttons{
  display:flex;
  gap:18px;
}
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  background:#fff;
  border-radius:18px;
  box-shadow:0 15px 40px rgba(0,0,0,0.08);
  overflow:hidden;
  border:1px solid #f1f1f1;
}

.stat{
  padding:34px 18px;
  text-align:center;
  border-right:1px solid #eee;
}

.stat:last-child{
  border-right:none;
}

.stat-icon{
  font-size:34px;
  color:#ef233c;
  margin-bottom:14px;
}

.stat h3{
  font-size:38px;
  color:#081b49;
  margin-bottom:8px;
  font-weight:800;
}

.stat p{
  font-size:14px;
  margin:0;
  font-weight:600;
  color:#555;
  line-height:1.5;
}

.expertise{
  padding-bottom:50px;
}

.expertise-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px;
}

.expert-card{
  border:1px solid #ededed;
  border-radius:18px;
  padding:28px 20px;
  text-align:center;
}

.expert-icon{
  width:60px;
  height:60px;
  background:#fff1f3;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:auto auto 18px;
  color:#ef233c;
  font-size:28px;
}

.expert-card h4{
  font-size:18px;
  line-height:1.4;
  margin-bottom:12px;
}

.expert-card p{
  color:#666;
  line-height:1.7;
  font-size:14px;
}
.gcc-success{
  padding-bottom:50px;
}

.gcc-success-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px;
}

.gcc-success-grid .expert-card{
  border:none;
  border-radius:18px;
  padding:28px 20px;
  text-align:center;
}

.gcc-success-grid .expert-icon{
  width:60px;
  height:60px;
  background:#fff1f3;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:auto auto 18px;
  color:#ef233c;
  font-size:28px;
}

.gcc-success-grid .expert-card h4{
  font-size:18px;
  line-height:1.4;
  margin-bottom:12px;
}


.gcc-success-grid .expert-card p{
  color:#666;
  line-height:1.7;
  font-size:14px;
}
.gcc-focus-page a.btn.btn-primary i {
    transform: rotate(-45deg);
}

.gcc-focus-page section#contact {
    width: 92%;
    margin: 0 auto 3% auto;
    border-radius: 10px;
    padding:1rem 0;
}
.gcc-focus-page section.cta.gray {
    width: 92%;
    margin: 0 auto 3%;
    border-radius: 10px;
    padding:1rem 0;
    background:#dedcdc;
} 
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;position:relative;z-index:1}
  .metric{display:flex;gap:8px;align-items:flex-start}
  .metric .ic{width:18px;height:18px;color:var(--primary);flex:0 0 auto;margin-top:1px}
  .metric b{display:block;font-size:13px;line-height:1.15;color:#081b49;font-weight:800}
  .metric em{display:block;font-style:normal;font-size:10px;line-height:1.2;color:#5e6673;margin-top:2px}

  .story-head{display:flex;gap:10px;align-items:center;position:relative;z-index:1}
  .story-head .logo{width:30px;height:30px;flex:0 0 auto}
  .story-head strong{display:block;font-size:14px;font-weight:800}
  .story-head span{display:block;color:var(--primary);font-size:12px;font-weight:800;margin-top:3px}
#gccfocus p{margin:10px 0 14px;position:relative;z-index:1;max-width:320px;font-size:12px;line-height:1.5;color:#505b69}
  #gccfocus .card:first-child{background:url(svg_icons/gcc/Deutsche.jpg) top right/contain no-repeat;position:relative;z-index:1;color:#fff}
#gccfocus .card:last-child{background:url(svg_icons/gcc/Apisero.jpg) top right/contain no-repeat;position:relative;z-index:1;color:#fff}
.gcc-focus-page .cta h2{font-size:24px;line-height:1.2;color:#081b49;font-weight:800}
.impact{
    margin-top:14px;
    background:#0a1d3c;
    color:#fff;
    border-radius:12px;
    padding:16px 18px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:10px;
    align-items:center;
  }
  .impact .head{
    grid-column: span 5;
    font-size:15px;
    font-weight:800;
    letter-spacing:-0.03em;
  }
  .impact .item{
    display:flex;
    gap:10px;
    align-items:flex-start;
    color:#fff;
  }
  .impact .item svg{
    width:28px;height:28px;flex:0 0 auto;color:var(--primary);
  }
  .impact .item b{
    display:block;
    font-size:14px;
    line-height:1.1;
  }
  .impact .item span{
    display:block;
    font-size:10px;
    line-height:1.25;
    margin-top:3px;
    color:#d6e1f2;
  }

  .cta-bar{
    margin-top:12px;
    background:var(--light);
    border:1px solid var(--line);
    border-radius:12px;
    padding:14px 18px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
  }
  .cta-bar h3{
    margin:0;
    font-size:16px;
    font-weight:800;
  }
  .cta-bar p{
    margin:6px 0 0;
    font-size:12px;
    color:var(--muted);
  }
  .gcc-focus-page .actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
  }
  .gcc-focus-page .btn-secondary{
    background:#fff;
    border:1px solid #cdd6e1;
    color:#1d2a3a;
    padding:10px 16px;
    border-radius:4px;
    font-size:12px;
    font-weight:700;
  }  
.gcc-focus-page .cta{
    background:var(--primary);
    color:#fff;
    border:0;
    padding:10px 16px;
    border-radius:3px;
    font-size:12px;
    font-weight:700;
  }

.section-heading{
  text-align:center;
  margin-bottom:36px;
}

.section-heading h2{
  /*font-size:42px;*/
  font-weight:800;
  margin-bottom:12px;
}

.heading-line{
  width:70px;
  height:3px;
  background:#ef233c;
  margin:auto;
}
.footer-grid ul li,.footer-brand p,.footer-bottom p,.footer-links-bottom a{font-size:12px}
/*popup css*/
.custom-modal-overlay {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Dimmed background */
    z-index: 9999;
    justify-content: center;
    align-items: center;
    zoom:0.8; 
}

/* The actual modal box */
.custom-modal-box {
    background: #ffffff;
    /*padding: 20px;*/
    border-radius: 8px;
    max-width: 700px;
    width: 90%;
    position: relative;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);
}

/* Close button (X) top right */
.custom-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333;
}

/* Class helper to trigger visibility */
.custom-modal-overlay.is-active {
    display: flex;
}
/*popup css*/
:root {
            --primary-color: #002B49;
            --secondary-color: #E31B23;
            --text-color: #333333;
            --bg-color: #f8f9fa;
            --card-bg: #ffffff;
            --border-color: #cccccc;
            --focus-color: #0056b3;
        }

      

       #hiring-modal  body {
            background-color: var(--bg-color);
            color: var(--text-color);
            padding: 40px 20px;
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }

       #hiring-modal  .container,#consultation-modal .container {
            display: flex;
            gap: 30px;
            max-width: 1200px;
            width: 100%;
            flex-wrap: wrap;
            justify-content: center;
        }

        .form-card {
            background: var(--card-bg);
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            padding: 30px;
            flex: 1;
            min-width: 320px;
            /*max-width: 560px;*/
            position: relative;
            border-top: 4px solid var(--primary-color);
        }
        @media (min-width: 768px) {
            .form-card {
                border-top: 0px solid var(--primary-color);
            }
        }

        .close-btn {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 20px;
            color: #999;
            cursor: pointer;
            background: none;
            border: none;
        }

        .brand-header {
            margin-bottom: 15px;
        }

        .logo {
            font-size: 28px;
            font-weight: 800;
            color: var(--primary-color);
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .logo-icon {
            display: inline-block;
            width: 20px;
            height: 15px;
            border-top: 3px solid var(--primary-color);
            border-bottom: 3px solid var(--primary-color);
            position: relative;
        }
        .logo-icon::before {
            content: '';
            position: absolute;
            top: 3px;
            left: 0;
            width: 14px;
            height: 3px;
            background-color: var(--primary-color);
        }

        .tagline {
            font-size: 12px;
            color: var(--secondary-color);
            font-weight: 600;
            margin-top: -2px;
        }

        .form-title-area {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 8px;
        }

        .icon-circle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--border);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
        }

        .icon-circle.alt {
            background-color: var(--secondary-color);
        }

        .form-card h2 {
            font-size: 22px;
            color: var(--primary-color);
            font-weight: 700;
        }

        .form-subtitle {
            font-size: 13px;
            color: #666;
            margin-bottom: 15px;
            margin-left: 55px;
        }

        .form-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }

        .full-width {
            grid-column: span 3;
        }
        .full-width1 {
            grid-column: span 2;
        }

        .form-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .form-group label {
            font-size: 13px;
            font-weight: 600;
            color: #444;
        }

        .form-group label span {
            color: var(--secondary-color);
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 14px;
            color: var(--text-color);
            background-color: #fff;
            outline: none;
            transition: border-color 0.2s;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            border-color: var(--focus-color);
        }

        .form-group textarea {
            resize: vertical;
            min-height: 80px;
        }

        .submit-btn {
            width: 100%;
            padding: 12px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            margin-top: 20px;
            transition: background-color 0.2s;
        }

        .submit-btn:hover {
            background-color: #001a30;
        }

        .form-card:last-child .submit-btn {
            background-color: var(--secondary-color);
        }

        .form-card:last-child .submit-btn:hover {
            background-color: #b81117;
        }

        .footer-note {
            text-align: center;
            font-size: 12px;
            color: #666;
            margin-top: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
        }

        .footer-company {
            text-align: center;
            font-size: 12px;
            font-weight: 600;
            color: #888;
            margin-top: 5px;
        }

        /* Responsive Breakpoints */
        @media (max-width: 768px) {
            .form-grid {
                grid-template-columns: 1fr;
            }
            .full-width {
                grid-column: span 1;
            }
            .form-subtitle {
                margin-left: 0;
                margin-top: 10px;
            }
            .form-title-area {
                /*flex-direction: column;*/
                align-items: flex-start;
                gap: 10px;
            }
            body {
                padding: 20px 10px;
            }
        }
        /* STAY CONNECTED */
        .custom-modal-box section.stay-connected {
           /* margin: 0 auto 40px auto;*/
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 15px 15px !important;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: var(--light);
           /* width: min(1180px, 92%);*/
        }

        .connect-left {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .linkedin-icon {
            background: #0077b5;
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

        .connect-text h4 {
            font-size: 1rem;
            margin-bottom: 5px;
        }

        .connect-text p {
            font-size: 0.8rem;
            color: var(--text-light);
        }

        .btn-outline {
            border: 1px solid var(--border-color);
            background: transparent;
            padding: 10px 20px;
            border-radius: 4px;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
        }

 .custom-modal-box .linkedin-icon {width:65px}
.custom-modal-box section.stay-connected {margin-top:30px}
.custom-modal-box {height:100vh;overflow-y:auto}
/* Target the scrollable container of your modal */
.modal-popup-container, .modal-content ,.custom-modal-box{
    /* For WebKit browsers (Chrome, Safari, Edge) */
    ::-webkit-scrollbar {
        width: 6px; /* or keep your width */
        background: transparent; /* Makes the scrollbar track transparent */
    }
    
    ::-webkit-scrollbar-thumb {
        background: transparent; /* Makes the scrollbar thumb transparent */
    }

    /* For Firefox */
    scrollbar-color: transparent transparent;
    scrollbar-width: thin;
}
/*fix for tablets*/
@media(min-width:768px) and (max-width:991px){section.hero {padding:0!important}
section.contact-info-bar{grid-template-columns: repeat(3,1fr);}
.custom-modal-box{height:85vh;overflow-y:auto}

}
@media (max-width:767px){.custom-modal-box{height:100vh;overflow-y:auto}
.stay-connected { flex-direction: column; gap: 20px; text-align: center; }
            .connect-left { flex-direction: column; }
            .custom-modal-box .linkedin-icon {width:50px}
            .custom-modal-box .form-grid{display:flex;flex-direction:column;gap:10px}
}