:root{
  --bg:#0b1218;
  --bg2:#0f1b26;
  --panel:#16222e;
  --panel2:#1a2836;
  --text:#0b1218;
  --muted:#8c98a6;
  --line:rgba(255,255,255,.08);
  --accent:#f2b23b;
  --accent2:#d89b2d;
  --radius:18px;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 700px at 30% 0%, #ffffff 0%, #ffffff 55%, #ffffff 100%);
  color:var(--text);
}

a{color:inherit; text-decoration:none}
button{font-family:inherit}

.container{max-width:1480px; margin:0 auto; padding:0 22px}
.Herocontainer {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 22px
}
ul {
  list-style: none;  /* This removes the dots */
  padding: 0;        /* Removes default left indentation */
  margin: 0;
  display: flex;     /* Keeps items in a horizontal line like your image */
  gap: 20px;         /* Adds space between the menu items */
}
/* HEADER */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.88));
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(8px);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; height:72px}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.06em; font-size:28px; color:var(--accent)}
.brand-logo{height:90px; width:auto; display:block; object-fit:contain}

.nav{display:flex; gap:34px; align-items:center}
.nav-link{font-size:16px; color:#0b1218; position:relative; padding:10px 2px;font-weight:600;}
    .nav-link:hover {
        color: #f2b23b;
        border-bottom: 3px solid #f2b23b;
    }
.nav-link.is-active{color:var(--accent)}
.nav-link.is-active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-4px;
  margin:auto;
  width:78px;
  height:2px;
  background:var(--accent);
  border-radius:2px;
}

/* HERO */
.hero{padding:0 0 24px}
.hero-inner{position:relative; height:550px}
.hero-slides{height:100%}
.hero-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .55s ease;
}
.hero-slide.is-active{opacity:1}
.hero-bg{
  position:absolute;
  inset:0;
  background-image: var(--hero-img);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
}
.hero-left-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(5,10,14,.98) 0%, rgba(5,10,14,.92) 33%, rgba(5,10,14,.2) 58%, rgba(5,10,14,0) 70%);
}
.hero-content{position:relative; height:100%; display:flex; flex-direction:column; justify-content:center; padding-top:40px}
.hero-title{margin:0 0 18px; line-height:1}
.hero-title-1{
  display:block;
  font-size:66px;
  font-weight:800;
  color:rgb(255, 255, 255);
}
.hero-title-2{
  display:block;
  font-size:66px;
  font-weight:800;
  color:rgb(242, 178, 59);
  margin-top:6px;
}
.hero-sub{max-width:520px; margin:0 0 26px; color:rgba(192, 201, 212, 0.745); font-size:14px; line-height:1.7}

.btn{border:none; border-radius:14px; padding:14px 18px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px}
.btn-primary{
  box-shadow: 0 14px 28px rgba(242,178,59,.18);
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 16px;
}
.btn-primary:hover{background: var(--accent);
  color: #05090d;}

.btn-outline{
  background: rgba(255,255,255,.03);
  border:1px solid #05090d;
  color:#0b1218;
  padding:10px 14px;
  border-radius:12px;
}
.btn-outline:hover{border-color:rgba(242,178,59,.4)}
.btn-hero{width:240px; justify-content:center}
.btn-arrow{font-size:18px}
.hero-slides {
    position: relative;
    overflow: hidden;
    height: 500px; /* Adjust as needed */
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
    pointer-events: none;
    z-index: 1;
}

    .hero-slide.is-active {
        opacity: 1;
        pointer-events: auto;
        z-index: 2;
    }

.hero-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:46px;
  height:46px;
  border-radius:999px;
  border:2px solid rgba(242,178,59,.75);
  background: rgba(0,0,0,.15);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
}
.hero-nav span{font-size:22px; line-height:1}
.hero-prev{left:30px}
.hero-next{right:30px}
.hero-nav:hover{background: rgba(242,178,59,.12)}

/* SECTIONS */
.section{padding:44px 0}

.stats-band{padding-top:0px}
.stats-panel {
    margin-top: -8px;
    background-color: #002152;
    /*background: linear-gradient(180deg, #002152 0%, #05090d 100%);*/
    border:1px solid rgba(242,178,59,.18);
    border-radius: 22px;
    padding: 28px 30px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    box-shadow: var(--shadow);
}
.stat{text-align:center}
.stat-value{font-size:40px; font-weight:800; color:var(--accent)}
.stat-label{margin-top:6px; font-size:13px; color:#9aa7b6}

.story{padding-top:36px}
.story-grid{display:grid; grid-template-columns: 1.15fr .85fr; gap:42px; align-items:start}
.h2{font-size:34px; margin:0 0 16px}
.accent{color:var(--accent)}
.muted{color:#495d73; line-height:1.85; font-size:16px}
.story-right{display:flex; flex-direction:column; gap:14px; padding-top:12px}
.info-card{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  padding:16px 18px;
  display:flex;
  gap:16px;
  align-items:center;
}
.icn-square{
  width:44px; height:44px;
  border-radius:12px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent2) 100%);
  color:#121212;
  display:grid; place-items:center;
  font-weight:800;
}
.info-title{font-weight:700; color: #f2b23b;}
.info-sub{margin-top:4px; color:#0b1218; font-size:13px}

/* ABOUT */
.about-top{padding-top:34px}
.two-cards{display:grid; grid-template-columns:1fr 1fr 1fr; gap:22px}
.big-card{
  background: linear-gradient(180deg, #002152 0%, #05090d 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:30px 32px;
  min-height:265px;
}
.big-icn{
  width:56px; height:56px;
  border-radius:14px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent2) 100%);
  color:#111;
  display:grid; place-items:center;
  font-weight:900;
}
.big-title{margin:22px 0 10px;color: #f2b23b; font-size:28px}
.big-text{margin:0; color: #c8d2de; line-height:1.8; font-size:14px}

.band{
  background-color: #fff;
  border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.center{text-align:center}
.band-title{margin:0; font-size:44px; font-weight:800}
.band-sub{margin:10px 0 0; color:#0b1218; font-size:14px}

.leader-carousel{margin-top:38px; position:relative}
.leader-track {
    position: relative;
    min-height: 260px;
   /* animation: scroll 20s linear infinite;*/
}
.leader-slide {
   /* position: absolute;*/
    flex-wrap: nowrap;
    inset: 0;
    opacity: 0;
    transition: opacity .35s ease;
    display: flex;
    justify-content: center;
    gap: 90px;
    align-items: center
}
.leader-slide.is-active{opacity:1}
.leader{display:flex; flex-direction:column; align-items:center; gap:12px}
.leader-circle{
  width:132px; height:132px;
  border-radius:999px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent2) 100%);
  color:#111;
  font-weight:900;
  display:grid; place-items:center;
  font-size:32px;
  box-shadow: 0 14px 30px rgba(242,178,59,.16);
}
.leader-name{font-weight:800}
.leader-role{color:#0b1218; font-size:13px}
.leader-controls{display:flex; justify-content:center; gap:14px; margin-top:22px}
.round-btn{
  width:44px; height:44px;
  border-radius:999px;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  cursor:pointer;
}
.round-btn:hover{border-color:rgba(242,178,59,.35)}

/* SERVICES */
.services-hero{height:210px; background: linear-gradient(180deg, rgba(34,62,86,.92) 0%, rgba(14,26,37,.92) 100%); border-bottom:1px solid rgba(255,255,255,.06)}
.services-hero-inner{height:100%; display:flex; align-items:flex-start; justify-content:center; padding-top:64px}
.services-tagline{margin:0; font-size:20px; color:#aeb9c6}

.services-grid-wrap{padding-top:22px}
.services-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px}
.service-pill{
  background: transparent;
  border:none;
  text-align:center;
  padding:0;
  cursor:pointer;
}
.service-circle{
  width:120px; height:120px;
  margin:0 auto 14px;
  border-radius:999px;
  background: radial-gradient(70px 70px at 50% 40%, #002152 0%, #05090d 100%);
  border:2px solid rgba(242,178,59,.18);
  display:grid; place-items:center;
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}
.service-pill:hover .service-circle{border-color:rgba(242,178,59,.55)}
.service-pill.is-highlight .service-circle{border-color:rgba(242,178,59,.9); box-shadow: 0 22px 50px rgba(242,178,59,.10), 0 18px 44px rgba(0,0,0,.55)}
.svc-icn{color:var(--accent); font-weight:800; font-size:28px}
.service-name{font-weight:700; margin-top:6px; color: #0b1218;}
.service-sub{margin-top:6px; color:#8f9cad; font-size:12px}
.service-pill--icononly .service-name, .service-pill--icononly .service-sub{opacity:0}

/* MODAL */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:100}
.modal.is-open{display:flex}
.modal-backdrop{position:absolute; inset:0; background: rgba(0,0,0,.62); backdrop-filter: blur(2px)}
.modal-card{
  position:relative;
  width:min(640px, calc(100% - 40px));
  border-radius:20px;
  background: linear-gradient(180deg, rgba(22,34,46,.98) 0%, rgba(10,17,24,.98) 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  padding:26px;
}
.modal-close{
  position:absolute;
  top:16px; right:18px;
  width:34px; height:34px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: transparent;
  color:#d9e2ee;
  cursor:pointer;
  font-size:20px;
}
.modal-head{display:flex; gap:16px; align-items:flex-start}
.modal-icn{
  width:56px; height:56px;
  border-radius:14px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent2) 100%);
  color:#111;
  display:grid; place-items:center;
  font-weight:900;
}
.modal-title{font-size:28px; font-weight:800; margin-top:4px; color: #f2b23b;}
.modal-desc{margin-top:10px; color:#9aa7b6; line-height:1.7}
.modal-section{margin-top:18px}
.modal-section-title {
    font-weight: 800;
    margin-bottom: 10px;
    color: #f2b23b;
    text-align:left;
}
.modal-list{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.modal-list li{color:#96a3b2; font-size:13px; display:flex; gap:10px; align-items:center}
.chev{color:var(--accent); font-weight:900}
.pill-row{display:flex; flex-wrap:wrap; gap:10px}
.pill{background: rgba(242,178,59,.18); color:var(--accent); border-radius:999px; padding:7px 12px; font-size:12px}
.btn-modal{width:100%; margin-top:18px; padding:14px 18px; border-radius:14px; font-weight:800}
.margin-top {
margin-top:1em;}
/* INDUSTRY */
.industry{padding-top:26px}
.industry-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.industry-card{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(242, 178, 59, 1);
  border-radius:20px;
  padding:28px;
  min-height:240px;
}
.square-icn{
  width:60px; height:60px;
  border-radius:14px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent2) 100%);
  color:#111;
  display:grid; place-items:center;
  font-weight:900;
  font-size:22px;
}
.industry-title{margin-top:18px; font-weight:800; font-size:22px}
.industry-text{margin-top:12px; color:#97a4b3; line-height:1.75; font-size:14px}

/* CAREER */
.career-why{padding-top:38px}
.career-title{margin:0 0 26px; font-size:44px; font-weight:900; text-align:center}
.why-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:18px}
.why-card{
  background:  linear-gradient(180deg, #002152 0%, #05090d 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:26px 18px;
  text-align:center;
  min-height:150px;
}
.why-icn{
  width:54px; height:54px;
  border-radius:14px;
  margin:0 auto 16px;
  background: linear-gradient(180deg, var(--accent) 0%, var(--accent2) 100%);
  color:#111;
  display:grid; place-items:center;
  font-weight:900;
}
.why-name{font-weight:800; color: #ffc000;margin-top: 15px;}
.why-sub{margin-top:8px; color:#9aa7b6; font-size:13px}
.openings{margin-top:24px; display:grid; gap:14px; text-align:left}
.job-card{background: rgba(255,255,255,.03); border:2px solid #ffc000; border-radius:18px; padding:18px}
.job-head{display:flex; justify-content:space-between; gap:16px; align-items:center}
.job-title{font-weight:900; font-size:18px}
.job-meta{margin-top:4px; color:#9aa7b6; font-size:13px}
.job-desc{margin-top:10px; color:#97a4b3; line-height:1.6; font-size:13px}
.right-role{padding-top:26px;}
.right-title{margin:0; font-size:44px; font-weight:900}
.right-sub{margin:10px 0 26px; color:#9aa7b6}
.right-btn{width:240px}

/* FOOTER */
.footer{margin-top:0}
.footer-top{background: linear-gradient(180deg, #002152 0%, #05090d 100%);; border-top:1px solid rgba(255,255,255,.06)}
.footer-grid{display:grid; grid-template-columns:1.1fr .7fr .9fr 1fr; gap:34px; padding:52px 22px;padding-bottom:0px;}
.footer-brand{font-weight:900; color:var(--accent); letter-spacing:.06em; font-size:22px}
.footer-text{color:#9aa7b6; line-height:1.75; font-size:14px; margin-top:14px; max-width:260px}
.footer-title{font-weight:800; margin-bottom:14px; color:#ffc000;}
.footer-link{display:block; color:#9aa7b6; margin:10px 0; font-size:14px}
.footer-link:hover{color:#e7eef7}
.contact-row{display:flex; gap:12px; align-items:flex-start; color:#9aa7b6; margin:12px 0; font-size:14px}
.contact-icn{width:30px; height:30px; border-radius:10px; border:1px solid rgba(242,178,59,.22); display:grid; place-items:center; color:var(--accent)}

.footer-form{display:flex; flex-direction:column; gap:14px}
.input,.textarea{
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:12px 14px;
  color:#dbe4ee;
  outline:none;
}
.textarea{resize:none}
.input:focus,.textarea:focus{border-color:rgba(242,178,59,.32)}
.btn-footer{justify-content:center; gap:10px; border-radius:16px}
.plane{margin-right:2px}

.footer-bottom{background: #05090d; border-top:1px solid #05090d}
.footer-bottom-inner{display:flex; justify-content:space-between; align-items:center; padding:20px 22px}
.social{display:flex; gap:12px}
.social-btn{
  width:46px; height:46px;
  border-radius:12px;
  background: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.08);
  color:#c8d2de;
  display:grid; place-items:center;
  font-weight:800;
}
.social-btn:hover{color:#ffc000;border-color: #ffc000;}
.copy{color:#9aa7b6; font-size:13px}

/* PAGE HERO (small hero on internal pages) */
.page-hero{position:relative; height:240px; overflow:hidden}
.page-hero-bg{position:absolute; inset:0; background:var(--page-hero-img) center/cover no-repeat; filter:saturate(1.05) contrast(1.05)}
.page-hero-overlay{position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.55) 42%,rgba(0,0,0,.18) 100%)}
.page-hero-content{position:relative; height:240px; display:flex; flex-direction:column; justify-content:center; gap:10px}
.page-hero-title{color: #f2b23b; font-size:48px; line-height:0; font-weight:800; letter-spacing:-.02em}
.page-hero-sub{color: #f2b23b; max-width:720px;}
.page-hero-img{position:absolute; inset:0; background:var(--page-hero-img) center/cover no-repeat; filter:saturate(1.05) contrast(1.05)}

/* ABOUT HOME */
.about-home-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:30px; align-items:stretch}
.about-home-points{display:grid; gap:10px; margin:18px 0 22px}
.about-home-points .point{display:flex; align-items:center; gap:10px; color:#485a6e}
    .about-home-points .dot {
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: #f2b23b;
    }
.about-home-card{position:relative; border-radius:18px; overflow:hidden; min-height:280px; border:1px solid rgba(255,255,255,.08)}
.about-home-card-bg{position:absolute; inset:0; background:var(--card-img) center/cover no-repeat; filter:saturate(1.02) contrast(1.04)}
.about-home-card-inner {
    position: relative;
    padding:2em;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    align-items: flex-end;
}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; width:max-content; border-radius:999px; border:1px solid rgba(242,178,59,.28); background:rgba(0,0,0,.35); color:#fff; font-weight:600; font-size:12px}
.about-home-card-title{color:#ffc000; font-size:26px; font-weight:800}
.about-home-card-sub{color:#cfd8e2}
.about-home-card-img{position:absolute; inset:0; background:var(--card-img) center/cover no-repeat; filter:saturate(1.02) contrast(1.04); border-radius:0em;width:100%; border:1px}
/* ICON IMAGES */
.card-icn{width:22px; height:22px; object-fit:cover; filter:brightness(1.05) saturate(1.1)}
.svc-icon{width:32px; height:32px; border-radius:10px; object-fit:cover}
.square-icn .card-icn{width:26px; height:26px}
.why-icn-img{width:24px; height:24px; border-radius:10px; object-fit:cover}

/* CORE VALUES */
.section-head{display:flex; flex-direction:column; gap:10px; margin-bottom:18px}
.values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.value-card{border:1px solid rgba(255,255,255,.08); background-color: #1a2836; border-radius:16px; padding:18px; display:flex; flex-direction:column; gap:10px}
.value-icn{width:29px; height:29px; border-radius:0px; object-fit:cover; border:0px solid rgba(242,178,59,.22)}
.value-title{font-weight:800; color:#fff}
.value-sub{color:#b8c4d2}

/* RESPONSIVE */
@media (max-width: 1040px){
  .stats-panel{grid-template-columns:repeat(2,1fr); gap:14px}
  .story-grid{grid-template-columns:1fr;}
  .about-home-grid{grid-template-columns:1fr;}
  .values-grid{grid-template-columns:repeat(2,1fr)}
  .two-cards{grid-template-columns:1fr}
  .leader-slide{gap:40px}
  .industry-grid{grid-template-columns:repeat(2,1fr)}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .values-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 640px){
  .nav{gap:16px}
  .nav-link.is-active::after{width:54px}
  .hero-inner{height:520px}
  .hero-title-1,.hero-title-2{font-size:46px}
  .page-hero{height:210px}
  .page-hero-content{height:210px}
  .page-hero-title{font-size:38px}
  .values-grid{grid-template-columns:1fr}
  .hero-prev{left:12px}
  .hero-next{right:12px}
  .industry-grid{grid-template-columns:1fr}
  .leader-slide{flex-direction:column; gap:26px}
  .footer-bottom-inner{flex-direction:column; gap:14px}
  .page-hero{height:210px}
  .page-hero-content{height:210px}
  .page-hero-title{font-size:40px}
  .values-grid{grid-template-columns:1fr}
}

.hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:right center;
  display:block;
}

/* STORIES SECTION - Full-screen and side-by-side layout */
.stories.full-screen {
  height: 55vh; /* Full screen */
  display: flex;
  align-items: flex-start; /* Vertically center the content */
  justify-content: flex-start;
  background: linear-gradient(180deg, #002152 0%, #05090d 100%);
}

.stories-container {
  display: flex;
  width: 90%;
  height: 80%; /* Adjust based on your preference */
}

.stories-content {
  flex: 1; /* This will take up 50% of the screen */
  padding: 20px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cssstories-content {
    flex: 1;
    padding: 20px;
    color: white;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: flex-start;
}
.stories-content h2 {
  font-size: 42px;
  margin:0 0 16px;
}
.cssstories-img {
    border-radius: 5%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.stories-content p {
    font-size: 18px;
    margin: 0 0 40px;
}

.stories-content-btn{
padding:14px 18px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px;
}
.stories-content .btn-primary {
 margin:0 200px 250px 0;
  
}

.stories-content .btn-outline:hover {
  background: var(--accent);
  color: #fff;
}
.cssstories-carousel {
    flex: 1;
    position: relative;
    overflow: visible;
}
.cssstroiesimgcontainer {
    width: 300px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #f2b23b;
    box-shadow: 0px 10px 20px rgba(242, 178, 59, 0.3);
}
.stories-carousel {
  flex: 1; /* This will take up 50% of the screen */
  position: relative;
  overflow: hidden;
}

.carousel-container {
  display: flex;
  width: 300%; /* Three images will be displayed in a row */
  transition: transform 0.5s ease-in-out;
}

.carousel-slide {
  width: 33.333%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: opacity 0.5s ease;
  opacity: 0.5;
}

.carousel-slide.is-active {
  opacity: 1;
}

.carousel-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 25px;
  cursor: pointer;
  padding: 20px;
  width:46px;
  height:46px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  
}

.carousel-nav.prev {
  left: 10px;
}

.carousel-nav.next {
  right: 10px;
}

.carousel-nav:hover {
  background: rgba(0, 0, 0, 0.7);
}

.carousel-slide-img {
  border-radius: 20%;
}

/* About -About*/
.about-about-card{position:relative; border-radius:18px; overflow:hidden; min-height:280px; border:1px solid rgba(255,255,255,.08)}
.about-about-card-bg{position:absolute; inset:0; background:var(--card-img) center/cover no-repeat; filter:saturate(1.02) contrast(1.04)}
.about-about-card-inner{position:relative; padding:26px; height:100%; display:flex; flex-direction:column; justify-content:flex-end; gap:10px}
.badge{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; width:max-content; border-radius:999px; border:1px solid rgba(242,178,59,.28); background:rgba(0,0,0,.35); color:#fff; font-weight:600; font-size:12px}
.about-about-card-title{color:#ffc000; font-size:26px; font-weight:800}
.about-about-card-sub{color:#cfd8e2}
.about-about-card-img{position:absolute; inset:0; background:var(--card-img) center/cover no-repeat; filter:saturate(1.02) contrast(1.04); border-radius:0px; border:1px}
.aboutcolorcss {
    background: #f2b23b;
    /*rgba(255, 205, 51, 0.9);*/
    font-size: 18px;
    font-weight: bold;
}
.badgeblackbackground {
    background-color:#000;
}
/* CORE VALUES SECTION */
.core-values {
    padding-top: 50px;
    background: linear-gradient(180deg, #002152 0%, #05090d 100%);
}

.section-head {
  text-align: center;
  margin-bottom: 40px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3-column grid */
  gap: 0px;
}

.value-card {
  background: #05090d; /* Slightly lighter dark background for the cards */
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; /* Hover effect */
}

.value-card:hover {
  transform: translateY(-10px); /* Card raises on hover */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.value-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

.value-icn-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px; /* Icon size */
  height: 60px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: rgba(242, 178, 59, 0.2);
  transition: background 0.3s ease;
}

.value-icn {
  width: 35px; /* Icon size */
  height: 35px;
  object-fit: contain;
}

.value-title {
  font-size: 20px;
  font-weight: 700;
  color: #f2b23b; /* Accent color */
}

.value-sub {
  font-size: 14px;
  color: #b8c4d2;
  line-height: 1.6;
  max-width: 240px;
  margin: 0 auto;
}

.value-card:hover .value-icn-wrapper,
.value-card:hover .value-title,
.value-card:hover .value-sub {
  display: none; /* Hide icon and text when hovered */
}

.value-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 10px;
  transition: opacity 0.3s ease;
}

.value-card:hover .value-image {
  opacity: 0; /* Hide image when hovered */
}

.value-card .hover-overlay {
  position: absolute;
  inset: 0;
  background: rgba(242, 178, 59, 0.4); /* Light yellow overlay */
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: opacity 0.3s ease-in-out;
}

.value-card:hover .hover-overlay {
  opacity: 1;
}

.hover-title {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}

.hover-description {
  font-size: 16px;
  color: #fff;
  text-align: center;
  max-width: 250px;
}

@media (max-width: 1040px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr); /* 2-column grid on medium screens */
  }
}

@media (max-width: 640px) {
  .values-grid {
    grid-template-columns: 1fr; /* 1-column grid on small screens */
  }
}
/* Hide hamburger icon on desktop */
.nav-wrap .icon {
    display: none;
}

@media screen and (max-width: 768px) {
    /* Hide the horizontal nav links by default on mobile */
    .nav-wrap ul.nav {
        display: none;
    }

    /* Show the hamburger icon on mobile */
    .nav-wrap .icon {
        display: block;
        float: right;
        padding: 15px;
    }

    /* Class added by JavaScript to show the vertical menu */
    .nav-wrap.responsive ul.nav {
        
        display: block;
        position: absolute;
        top: 100%; /* Positions it directly under the header */
        right: 0;
        width: 100%;
        background-color: #ffffff; /* Solid background so text doesn't overlap */
        box-shadow: 0px 8px 16px rgba(0,0,0,0.1);
        z-index: 1000;
        padding: 0;
        margin: 0;
        list-style: none;
    }

        .nav-wrap.responsive ul.nav li {
            width: 100%;
            border-bottom: 1px solid #eee;
        }

            .nav-wrap.responsive ul.nav li a {
                padding: 15px 20px;
                display: block;
                color: #333;
                text-decoration: none;
            }
}
@media (min-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}

@media (min-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
    }
}
.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr; /* Stacked on mobile */
    gap: 40px;
}

/* Responsive Grid for Desktop */
@media (min-width: 992px) {
    .footer-container {
        grid-template-columns: repeat(4, 1fr); /* 4 Columns on desktop */
    }
}

/* Typography */
.footer-brand, .footer-heading {
    color: #ffcc00; /* Gold/Yellow accent */
    margin-bottom: 20px;
    font-size: 1.25rem;
    font-weight: 700;
}

.footer-description, .footer-nav, .contact-item {
    color: #b0c4de; /* Light blue-grey for readability */
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Links & Lists */
.footer-nav { list-style: none; padding: 0; }
.footer-nav li { margin-bottom: 10px; }
.footer-nav a, .contact-item a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}
.footer-nav a:hover { color: #ffcc00; }

/* Contact Items */
.contact-item { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }

/* Form Elements */
.footer-form input, .footer-form textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.footer-btn {
    width: 100%;
    background: transparent;
    border: 1px solid #ffcc00;
    color: #ffcc00;
    padding: 12px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
}
.footer-btn:hover { background: #ffcc00; color: #000; }

/* Bottom Section */
.footer-bottom {
    max-width: 1200px;
    margin: 40px auto 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.social-links { display: flex; gap: 15px; }
.social-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
}
.copyright { font-size: 0.85rem; color: #888; }
.highlight { color: #ffcc00; }

/* Footer Container & Background */
.site-footer {
    background: linear-gradient(to bottom, #001f3f, #000a1a); /* Deep blue gradient */
    color: #ffffff;
    padding: 60px 20px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr; /* Stacked on mobile */
    gap: 40px;
}

/* Responsive Grid for Desktop */
@media (min-width: 992px) {
    .footer-container {
        grid-template-columns: repeat(4, 1fr); /* 4 Columns on desktop */
    }
}

/* Typography */
.footer-brand, .footer-heading {
    color: #ffcc00; /* Gold/Yellow accent */
    margin-bottom: 20px;
    font-size: 1.25rem;
    font-weight: 700;
}

.footer-description, .footer-nav, .contact-item {
    color: #b0c4de; /* Light blue-grey for readability */
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Links & Lists */
.footer-nav {
    list-style: none;
    padding: 0;
}

    .footer-nav li {
        margin-bottom: 10px;
    }

    .footer-nav a, .contact-item a {
        color: inherit;
        text-decoration: none;
        transition: color 0.3s;
    }

        .footer-nav a:hover {
            color: #ffcc00;
        }

/* Contact Items */
.contact-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

/* Form Elements */
.footer-form input, .footer-form textarea {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.footer-btn {
    width: 100%;
    background: transparent;
    border: 1px solid #ffcc00;
    color: #ffcc00;
    padding: 12px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
}

    .footer-btn:hover {
        background: #ffcc00;
        color: #000;
    }

/* Bottom Section */
.footer-bottom {
    max-width: 100%;
    margin: 0px auto 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-icon {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
}

.copyright {
    font-size: 0.85rem;
    color: #888;
}

.highlight {
    color: #ffcc00;
}
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
    
}
/* --- MOBILE OPTIMIZATIONS --- */
@media (max-width: 600px) {
    .leader {
        flex: 0 0 200px; /* Slightly narrower on small phones */
    }
}
@media (max-width: 768px) {
    /* 1. Change card width so 1.5 - 2 members are visible instead of 6 */
    .leader {
        flex: 0 0 200px; /* Slightly narrower for mobile */
        padding: 0 10px;
    }

    .leader-circle {
        width: 100px; /* Smaller circles for mobile */
        height: 100px;
        font-size: 1.5rem;
    }

    /* 2. Slower speed for better readability on small screens */
    .leader-track {
       /* animation: scroll 30s linear infinite;*/ /* Increased from 20s to 30s */
    }

    /* 3. Reduce font size for long titles */
    .leader-role {
        font-size: 0.75rem;
        line-height: 1.2;
    }
}

/* --- SMALL MOBILE (Extra small screens) --- */

@media (max-width: 480px) {
    .leader {
        flex: 0 0 160px; /* Fits comfortably on very small phones */
    }
}
.leader-track:hover {
    animation-play-state: paused;
}
.Subhero-section {
    /* Replace with your actual image path */
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/Content/assets/subpagebanner.jpg');
    background-size: cover;
    background-position: center;
    height: 300px; /* Adjust height as needed */
    display: flex;
    align-items: center;
    color: #ffffff;
    padding: 0 10%;
}

.subhero-content {
    text-align: left;
}

    .subhero-content h1 {
        font-size: 3rem;
        font-weight: bold;
        color: #f2b23b;
        margin-bottom: 10px;
        text-transform: capitalize;
    }

.subbreadcrumb {
    font-size: 1rem;
    font-weight: 500;
}

    .subbreadcrumb a {
        color: #ffffff;
        text-decoration: none;
    }

    .subbreadcrumb p {
        color: #ffffff;
        text-decoration: none;
    }

    .subbreadcrumb span {
        margin: 0 10px;
    }

.subcontainer {
    max-width: 1180px;
    padding: 0 22px;
}

.about-section {
    padding: 80px 0;
    background-color: #ffffff;
    font-family: 'Arial', sans-serif;
}

.Subpagecontainer {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.about-content {
    display: flex;
    align-items: center;
    gap: 50px; /* Space between text and image */
}

/* Text Column Styles */
.text-column {
    flex: 1;
}

    .text-column h2 {
        font-size: 2.5rem;
        color: #1a1a1a;
        margin-bottom: 25px;
        font-weight: bold;
    }

    .text-column p {
        font-size: 1rem;
        line-height: 1.6;
        color: #666666;
        margin-bottom: 20px;
    }



/* Image Column Styles */
.image-column {
    flex: 1;
}

    .image-column img {
        width: 100%;
        height: auto;
        border-radius: 8px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .about-content {
        flex-direction: column;
        text-align: center;
    }
}

.values-section {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 50px;
    /*  background-color: #f9f9f9;*/
    background-color: #002152;
    /*background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/Content/assets/banner1.jpg');*/
    font-family: 'Arial', sans-serif;
}

.values-sectioncard {
    background: #fff;
    padding: 40px 30px;
    text-align: center;
    width: 350px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    border: 1px solid #f2b23b;
}

    .values-sectioncard:hover {
        transform: translateY(-10px);
    }

.values-sectionicon {
    /*font-size: 40px;
        color: #f39c12;*/ /* Matching the orange in your image */
    margin-bottom: 1em;
    background-color: #f2b23b;
    border: 1px solid #0d6efd;
    padding: 5px;
    border-radius: 2px;
}

.values-sectioncard h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #002152;
}

.values-sectioncard p {
    line-height: 1.8;
    color: #002152;
    margin-bottom: 25px;
}

.values-sectioncard:hover {
    transform: translateY(-10px);
    background-color: #f2b23b;
    border: 1px solid #f39c12;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.values-sectioncard p:hover {
    line-height: 1.6;
    color: #fff;
    margin-bottom: 25px;
}
/* Optional: Make the icon pulse slightly on hover */
.values-sectioncard:hover .icon {
    transform: scale(1.1);
    transition: transform 0.3s ease;
}


/* Responsive for mobile */
@media (max-width: 992px) {
    .values-section {
        flex-direction: column;
        align-items: center;
    }
}

.features-section {
    padding: 60px 0;
    background-color: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.featurescontainer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.featuressection-header {
    text-align: center;
    margin-bottom: 50px;
}

    .featuressection-header h1 {
        font-size: 2.5rem;
        font-weight: bold;
        margin-bottom: 15px;
    }

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns */
    gap: 40px;
}

.feature-item {
    display: flex; /* Aligns icon next to text content */
    align-items: flex-start;
    gap: 20px;
    box-shadow: 0 3px 16px rgba(0, 0, 0, 0.2);
    padding: 2em;
    border: 1px solid #f2b23b;
}

.featuresicon-box {
    background-color: #fff;
    color: #fff;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    border: 1px solid #f2b23b;
    border-radius: 3px;
}

.featurescontent h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 10px;
}

.featurescontent p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
}



/* Responsive adjustment for small screens */
@media (max-width: 768px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
}
.team-section {
    padding: 60px 20px;
    text-align: center;
    background-color: #fff;
}

.team-title {
    font-size: 2rem;
    margin-bottom: 80px; /* Space for overlapping images */
    letter-spacing: 2px;
}

.team-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.team-card {
    background: #fff;
    border: 1px solid #000;
    width: 260px;
    position: relative;
    padding-top: 60px; /* Offset for the circular image */
    padding-bottom: 30px;
}

.image-wrapper {
    position: absolute;
    top: -50px; /* Pulls image up to overlap header */
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #002152;
    color: #f2b23b;
    font-size:24px;
    font-weight:bold;
}
    .image-wrapper p {
    margin-top:1.2em;}
    .image-wrapper img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
}

.card-content {
    padding: 0 20px;
}

.name {
    color: #f1c40f; /* Yellow accent */
    margin: 10px 0;
    font-size: 1.4rem;
}

.bio {
    font-size: 0.85rem;
    line-height: 1.6;
    color: #333;
    margin-bottom: 20px;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.social-icon {
    width: 35px;
    height: 35px;
    background: #002152;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: bold;
}

/* Mobile Specific Fix */
@media (max-width: 768px) {
    .team-grid {
        gap: 80px; /* More vertical space for overlapping images */
    }
    .team-card {
        width: 100%; /* Full width on small screens */
        max-width: 300px;
    }
}
.services-grid {
    display: grid;
    /* Automatically creates as many columns as fit, at least 280px wide each */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    padding: 20px;
}

.service-card {
    background: #ffffff;
    padding: 30px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    /* Hover effect to make it feel interactive */
    .service-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }

.icon-box {
    font-size: 40px;
    margin-bottom: 20px;
    background: #f0f4ff; /* Light accent background */
    width: 80px;
    height: 80px;
    line-height: 80px;
    border-radius: 50%;
}

.service-card h3 {
    margin-bottom: 12px;
    font-size: 1.25rem;
    color: #333;
}

.service-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.service-link {
    color: #007bff;
    text-decoration: none;
    font-weight: 600;
}

.details {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #8b949e;
    border-top: 1px solid #30363d;
    padding-top: 10px;
    /* Optional: Add a fade-in animation */
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.learn-more-btn {
    margin-top: 20px;
    background: none;
    border: 1px solid #58a6ff;
    color: #58a6ff;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: 0.3s;
}

    .learn-more-btn:hover {
        background: #58a6ff;
        color: #fff;
    }

.cssstories-section {
    padding: 20px 20px;
    background-color: #002152;
    /*background: linear-gradient(180deg, #002152 0%, #05090d 100%);*/
    /* #0b0e14; /* Dark theme for impact */
    color: #fff;
}

.cssstories-header {
    text-align: center;
    margin-bottom: 50px;
}

.cssstories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns on desktop */
    grid-auto-rows: 300px;
    gap: 20px;
    max-width: 1100px;
    margin: 0 auto;
}

.cssstory-card {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    background: #161b22;
}

    /* Make the first card span 2 rows (Tall/Large) */
    .cssstory-card.featured {
        grid-row: span 2;
    }

.story-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
    opacity: 0.6;
}

.story-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 30px;
    background: linear-gradient(transparent, rgba(0,0,0,0.9));
    width: 100%;
}

.category {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #f1c40f;
    display: block;
    margin-bottom: 10px;
}

.cssstory-card h3 {
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.cssstory-card:hover .story-image {
    transform: scale(1.1);
    opacity: 0.8;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .cssstories-grid {
        grid-template-columns: 1fr; /* Stack vertically */
        grid-auto-rows: 400px;
    }

    .cssstory-card.featured {
        grid-row: span 1; /* Reset featured card size on mobile */
    }
}