/* ================================
   RESET
================================ */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html, body{
height:100%;
overflow:hidden;
}

/* ================================
   FONT LOAD
================================ */
@font-face{
  font-family:'Google Sans Flex';
  src:url('./fonts/GoogleSansFlex.woff2') format('woff2'),
      url('./fonts/GoogleSansFlex.ttf') format('truetype');
  font-weight:400 500 700;
  font-style:normal;
}

/* ================================
   ROOT RESPONSIVE SCALE
================================ */

html{
  font-size:14px; /* default mobile size */
}

/* ================================
   TYPOGRAPHY SYSTEM
================================ */
:root{
  --h1: clamp(2.5rem, 7vw, 4rem);
  --h2: clamp(2.5rem, 7vw, 4rem);
  --h3: clamp(1.8rem, 3vw, 2.2rem);
  --body: clamp(1rem, 3vw, 1.2rem);
  --small: clamp(.95rem, .9vw, 1rem);

  --primary:#21339C;
}

/* ================================
   BASE
================================ */
body{
  overflow-x:hidden;
  font-family:'Google Sans Flex', sans-serif;
  color:#000;
}
/* h1,h2,h3{
  line-height: 2.4rem;
} */
/* ================================
   HEADINGS
================================ */
h1,h2,h3,h4,h5,h6{
  font-family:'Google Sans Flex', sans-serif;
  color:var(--primary);
  font-weight:700;
  line-height: 130%;
}

h1{font-size:var(--h1);}
h2{font-size:var(--h2);}
h3{font-size:var(--h3);}

/* ================================
   BODY TEXT
================================ */
p,a,span,ul,li{
  font-size:var(--body);
  font-weight:400;
  letter-spacing:-0.02em;
  line-height:1.5;
  color:#000;
}

small{
  font-size:var(--small);
}
.compare-table{
  border-collapse:collapse;
  width:100%;
  border:1px solid #000;
}

.compare-table th,
.compare-table td{
  border:none;
  padding:18px;
  vertical-align:top;
}

.compare-table thead th{
  font-weight:700;
  background:var(--primary);
  color: #fff;
}
/* Alternate row colors */
tr:nth-child(even) td{
  background-color: #F7F7F7;
}

tr:nth-child(odd) td{
  background-color: #ffffff;
}

/* Header styling */
th {
  background-color: #333;
  color: white;
}
strong {
    color: #000;
    font-weight: 700;
}
/* ================================
   HEADER
================================ */
header{
  position:fixed;
  top:0;
  width:100%;
  padding:5px 0;
  z-index:1000;
  background: #fff;
}

img.logo{
  max-height:72px;
}

.nav-item ul{
  display:flex;
  justify-content:center;
  gap:40px;
  list-style:none;
}

.nav-item a{
  color:#494949;
  text-decoration:none;
  transition:.3s;
}

.nav-item a.active{
  color:var(--primary);
}

/* ================================
   SCROLL SECTIONS
================================ */
main{
  padding-top:70px;
  height:100vh;
  overflow-y:auto;
  scroll-snap-type:y mandatory;
}

.panel{
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  color:#fff;
  scroll-snap-align:start;
  transition:.7s cubic-bezier(.22,1,.36,1);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  position:relative;
}

.panel *{
  position:relative;
  z-index:1;
}
main{
-webkit-overflow-scrolling:touch;
}

/* ================================
   NAV STATES
================================ */
.nav-link:focus,
.nav-link:hover,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show{
  color:var(--primary);
  font-weight:600;
}
.navbar-toggler{
border:none;
}
.navbar-toggler-icon {
    width: 2em;
    height: 2em;
  }
.navbar-toggler-icon{
filter:invert(1);
}
/* ================================
   BACKGROUND SECTIONS
================================ */
.home{
  background-image:url("./assets/Hero-section-bg.png");
}

.clients{
  background-image:url("./assets/client-section-bg.png");
  background-position: inherit;
  background-size: cover;
}

/* ================================
   HERO CONTENT SPACING
================================ */
.hero{
  display:flex;
  flex-direction:column;
  gap:clamp(20px,4vw,44px);
}

/* ================================
   WIDTH HELPERS
================================ */
.mx-906{max-width:906px;}
.mx-750{max-width:750px;}

/* ================================
   BUTTON
================================ */
.btn-primary{
  background-color:var(--primary);
  padding:1.4rem 2rem;
  line-height:1.5rem;
  border:none;
  border-radius:999px;
  transition:.3s;
}

.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 25px rgba(0,0,0,.2);
}

/* ================================
   LIST
================================ */
.list-unstyled{
  padding-left:20px;
  list-style:disc;
}

/* ================================
   OUTCOMES SECTION
================================ */
#outcomes .container,
#outcomes .row{
  height:100%;
}

/* #outcomes{
  min-height:100vh;
  display:flex;
  align-items:center;
} */

/* ================================
   CAREERS SECTION
================================ */
#careers{
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:stretch;
}

#careers>.container{
  width:100%;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

#careers .site-footer{
  width:100%;
}

/* ================================
   GRID GUTTER FIX
================================ */
.row.g-4{
  --bs-gutter-x:1.5rem;
  --bs-gutter-y:1.5rem;
}

/* ================================
   CARD
================================ */
.card{
  background:#f8f9fa;
}

.card img{
  max-width:36px;
  margin-right:10px;
}

/* ================================
   FOOTER
================================ */
.footer-menu a{
  color:#fff;
  font-size:var(--small);
  letter-spacing:0;
      text-decoration: none;
}
.ft-bottom {
  color: #c2c2c2;
  font-size: 12px;
}

.form-control {
    padding: 1rem .75rem;
    margin-bottom: 1.3rem;
    color: #212529;
}

.breadcrumb-wrap{
padding:10px 0px 0px 0px;
}

.breadcrumb{
font-size:14px;
}

.breadcrumb a{
text-decoration:none;
color:#000000;
font-size: 14px;
}

.breadcrumb a:hover{
color:#21339C;
}

.breadcrumb-item.active{
color:#000000;
font-weight:600;
}

.breadcrumb-item + .breadcrumb-item::before{
content:"›";
color:#999;
}
.form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
        border-color: #21339c !important;
    outline: 0;
    box-shadow: none;
}
.hiring-panel .careers-list img {
      max-height: 60px;
}
.footer-panel {
  margin-top: 80px !important;
}
.agentic-title {
  font-size: 3rem !important;
}
/* ================================
   MOBILE OPTIMIZATION
================================ */
@media(max-width:576px){
  .card img {
    max-width: 30px;
    margin-right: 6px;
  }
  .breadcrumb{
    font-size:13px;
    flex-wrap:wrap;
    row-gap:5px;
    padding-left: 20px;
  }
  img.logo {
    max-height: 50px;
  }
  .panel {
    align-items: start;
  }
  .hero {
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 4vw, 44px);
  }
   .list-unstyled {
    text-align: left;
  }
  .clients {
    background-image: url(./assets/client-section-bg.png);
        background-size: 179%;
        background-position: 0% 117%;
  }
  .career-panel {
    padding: 0 20px;
  }
  .footer-menu {
    flex-wrap: wrap;
  }
      header {
        padding: 0px 0px !important;
    }
    header .container{
        padding: 10px 0px !important;
    }
    .navbar-brand {
      padding-left: 20px;
    }
    .compare-table th, .compare-table td {
    padding: 6px;
  }
}
@media(max-width:768px){
  html{
    font-size:clamp(14px,0.9vw,18px);
  }
  html, body{
    overflow:hidden;
    height:100%;
  }
  header{
    padding:10px 20px;
  }

  .nav-item ul{
    gap:20px;
  }

  .panel{
    height:100vh;
    padding:60px 20px;
    text-align:center;
  }


  main{
    height:100vh;
    overflow-y:auto;
    scroll-snap-type:y mandatory;
  }

  #careers{
    padding: 78px 0px 0px 0px!important;
    height: auto;
  }
 

}

/* ================================
   ULTRA WIDE SCREENS
================================ */
@media(min-width:1800px){
  html{
    font-size:20px;
  }
}
/* =================================
   TABLET ONLY (Disable Snap)
================================= */
@media (min-width:768px) and (max-width:992px){

  html, body{
    overflow:auto;
    height:auto;
  }

  main{
    height:auto;
    overflow:visible;
    scroll-snap-type:none;
  }

  .panel{
    height:auto;
    min-height:auto;
    padding:80px 20px;
  }
  .container, .container-md, .container-sm {
        max-width: 100%;
    }
}


/* =================================
   TABLET + MOBILE SECTION HEIGHT
================================= */
@media (max-width: 992px){
  
  #careers {
    padding: 80px 0px 0px 0px;
  }
  footer {
    margin-top: 30px;
  }
   .navbar-collapse {
          flex-basis: 100%;
        flex-grow: 1;
        align-items: center;
        background: #fff;
        width: 100%;
        position: absolute;
        right: 0;
        top: 82px;
        padding: 20px 35px;
  }
  ul.navbar-nav.gap-lg-4.text-center {
    text-align: left !important;
  }
  .navbar-nav .nav-item {
    padding: 10px 0px;
  }
  .navbar {
    margin: 0px;
  }
}
@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1200px;
    }
}