@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
    --primary: #272560;
    --secondary: #0fb7bd;
    --subtile: #4b4f63;
    --heading:#07091f;
    --body:#555a70;
    --lavender:#f0edff;
    --lavender-dark:#e6e1ff;
    --border:#d9d3fb;
    --text:#12142c;
    --muted:#55586d;
    --white:#ffffff;
  }
  .row {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
  }
  a{
      text-decoration: none;
      color: var(--body);
  }
  a:hover{
    color: var(--primary);
  }
  body {
    margin: 0;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: rgb(85, 90, 112);
    font-weight: 400;
  }
  .container{
      padding: 0px;
      max-width: 1600px;
      width: 90%;
  }
  .image{
    max-width: 100%;
  }
  h1{
    color: var(--heading);
    font-size:60px;
    line-height: 1.13;
    font-weight: 600;
    letter-spacing: -1px;
  }
  h1 span {
    color: var(--primary);
  }
  h2, .h2 {
    font-size: 40px;
    line-height: 1.14;
    font-weight:600;
    color: var(--heading);
    margin: 0;
    letter-spacing:0px;
  }
  h2 span {
    color: var(--primary);
  }
  h3, .h3 {
    font-size: 26px;
    line-height: 1.25;
    font-weight: 500;
    color: #080b20;
  }
  h4{
    font-size: 24px;
    line-height: 1.25;
    font-weight: 500;
    color: #080b20;
  }
.subtitle {
    color: var(--subtile);
    font-size: 18px;
    line-height: 1.45;
    font-weight: 400;
    margin: 15px auto 25px;
}
.hero-subtitle {
  max-width: 560px;
  color: #4b4f63;
  font-size: 22px;
  line-height: 1.45;
  font-weight: 400;
  margin-bottom: 34px;
}
section.hero-wrap-inner h1 {
  font-size:50px;
}
/* Buttons */
.btn-gradient {
    background: var(--primary);
    color: #fff;
    border-radius: 50px;
    padding: 10px 20px 10px 28px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 28px;
    box-shadow: 0 15px 35px rgba(49,26,246,.22);
    transition: background-color 0.4s ease;
    border: none;
  }
  .btn-gradient span {
    width: 42px;
    height: 42px;
    background: #fff;
    color: var(--primary);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 18px;
    transition: transform 0.25s ease;
  }
  .btn-gradient:hover{
    color: #fff;
    background: #1b1a45;
  }
  .btn-gradient:hover span{
    transform: translateX(5px);
  }

  /* OUTLINE BUTTON */
  .btn-outline-light {
    margin-top: 34px;
    display: inline-flex;
    align-items: center;
    gap: 28px;
    border: 1px solid #cbc8e8;
    border-radius: 50px;
    padding: 10px 14px 10px 28px;
    color: #080b20;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    transition: background-color 0.4s ease;
  }
  .btn-outline-light span {
    width: 42px;
    height: 42px;
    background: #e5e0ff;
    color: var(--primary);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 18px;
    transition: transform 0.25s ease;
  }
  .btn-outline-light:hover{
    background-color: #cbc8e8;
  }
  .btn-outline-light:hover span{
    transform: translateX(5px);
  }
.inner-section{
  background: radial-gradient(circle at top center, #ffffff 0%, #f7f6ff 55%, #f2f0ff 100%);
  padding: 70px 0;
}
.inner-mb-2{
  margin-bottom: 30px;
}
.inner-box-width{
  max-width: 650px;
}
.inner-content-box{
  max-width: 650px;
  margin: auto;
}
.inner-full-width{
  width: 100%;
}
.inner-image-center {
  text-align: center;
}
.m-width-550{
  max-width: 600px;
  margin: auto;
}
.product-page .inner-section{
  background: transparent;
  border-bottom:1px solid #f2f0ff;
}
.product-page .inner-section .container, .product-page .inner-container{
  max-width: 1400px;;
}
.product-page .partners-section.inner-section{
  background: radial-gradient(circle at top center, #ffffff 0%, #f7f6ff 55%, #f2f0ff 100%);
}
.product-image .images {
  width: 100%;
}
@media(max-width:1450px){
  h1{
      font-size: 50px;
  }
  .hero-subtitle, .subtitle {
    font-size: 20px;
  }
  h2, .h2{
    font-size:36px;
  }
  h3, .h3{
    font-size: 24px;
  }
  h4{
    font-size: 22px;
}
}
@media(max-width:992px){
    h1{
        font-size: 42px;
    }
    h2, .h2{
        font-size:32px;
    }
    h5{
        font-size: 20px;
    }
    h6{
        font-size: 18px;
    } 
    .subtitle {
        font-size: 18px;
    } 
    section.hero-wrap-inner h1 {
      font-size:36px;
    }
    .hero-subtitle{
      font-size: 22px;
    }
    .container{
      width: 95%;
    }
}
@media(max-width:767px){
    h1{
        font-size: 36px;
    }
    h2, .h2{
      font-size: 28px;
  }
    h3, .h3{
        font-size: 22px;
    }
    h4{
        font-size: 20px;
    }
    h5{
        font-size: 18px;
    } 
    .subtitle {
        font-size: 16px;
    } 
    section.hero-wrap-inner h1 {
      font-size:32px;
    } 
    .hero-subtitle{
      font-size: 18px;
    }
    .inner-full-width {
      width: auto;
  }
  .inner-section{
      padding: 40px 0;
  }
}