@font-face {
    font-family: Caveat;
    src: url("./fonts/Caveat-Medium.ttf");
  }
  @font-face {
    font-family: Comfortaa;
    src: url("./fonts/Comfortaa-Regular.ttf");
  }
  
  .color-primary {
      color: #705383;
  }
  
  
  .background-primary {
      background-color: #705383;
  }
  
  .color-secondary {
      color: #b2c1d4;
  }
  
  .background-secondary {
      background-color: #b2c1d4;
  }
  
  .color-tertiary {
      color: #F4F4EF;
  }
  
  .background-tertiary {
      background-color: #FAFAEF;
  }

  .background-tertiary-alternative{
    background-color: #F5F5F5
}

  
  
  .color-gray{
      color: #C3C3C3;
  }
  
  
  body{
    font-family: 'Comfortaa'; 
    padding-top: 60px;
  }
  
  .btn-custom {
      color: #F4F4EF;
      background-color: #120056;
      border-color: #120056
  }
  
  .btn-custom:hover {
      color: #F4F4EF;
      background-color: #120056DD;
      border-color: #120056;
  }
  
  a {
      text-decoration: none;
  }
  
  .nav-link.active{
      color: white !important;
  }
  
  .flex-text{
    font-size: clamp(1rem, 1vw + 1rem, 4rem);
  }
  
  .flex-text-small{
    font-size: clamp(0.8rem, 0.5vw + 0.8rem, 1.2rem);
  }
  
  .flex-text-alignment{
    text-align: center;
  }
  
  .align-items-flex{
    align-items: center;
  }
  
  .font-caveat{
    font-family: "Caveat";
  }
  
  
  /* Navbar */

  .navbar {
    border-bottom: 2px solid #ccc;
  }
  
  .nav-link{
      font-size: 18px;
      color: #120056;
  }

  .nav-link:hover{
        color: white;
    }

  /* Home */

.hero-section{
    min-height: 60svh;
  }

  /* Use cases */


  
.diagonal-background {
  background: #F5F5F5;
  clip-path: polygon(0 2%, 100% 0, 100% 100%, 0 98%);
  padding-top: 2rem;
  padding-bottom: 2rem;
}
  
.wave-background {
  height: 50px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='50' preserveAspectRatio='none' viewBox='0 0 1440 50'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1012%26quot%3b)' fill='none'%3e%3cpath d='M 0%2c23 C 96%2c26 288%2c39.8 480%2c38 C 672%2c36.2 768%2c14.6 960%2c14 C 1152%2c13.4 1344%2c30.8 1440%2c35L1440 50L0 50z' fill='rgba(245%2c 245%2c 245%2c 1)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1012'%3e%3crect width='1440' height='50' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
}

.wave-background-inversed {
  height: 50px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' width='1440' height='50' preserveAspectRatio='none' viewBox='0 0 1440 50'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1012%26quot%3b)' fill='none'%3e%3cpath d='M 0%2c23 C 96%2c26 288%2c39.8 480%2c38 C 672%2c36.2 768%2c14.6 960%2c14 C 1152%2c13.4 1344%2c30.8 1440%2c35L1440 50L0 50z' fill='rgba(245%2c 245%2c 245%2c 1)'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1012'%3e%3crect width='1440' height='50' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
  transform: rotate(180deg);
}

/* Pricing */

.pricing-content{position:relative;}
.pricing_design{
    position: relative;
    margin: 0px 15px;
}
.pricing_design .single-pricing{
    background:#b2c1d4;
    padding: 60px 40px;
    border-radius:30px;
    box-shadow: 0 10px 40px -10px rgba(0,64,128,.2);
    position: relative;
    z-index: 1;
    height: 500px;
}

.features-pricing {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.features-pricing ul {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    width: 100%; /* Optional: ensure the ul takes full width if needed */
}

.pricing_design .single-pricing:before{
    content: "";
    background-color: #fff;
    width: 100%;
    height: 100%;
    border-radius: 18px 18px 190px 18px;
    border: 1px solid #eee;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: -1;
}
.price-head{}
.price-head h2 {
    margin-bottom: 20px;
    font-size: 26px;
    font-weight: 600;
}
.price-head h1 {
    font-weight: 600;
    margin-top: 30px;
    margin-bottom: 5px;
}
.price-head span{}

.single-pricing ul{list-style:none;margin-top: 30px;}
.single-pricing ul li {
    line-height: 36px;
}
.single-pricing ul li i {
    background: #554c86;
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 30px;
    font-size: 11px;
    text-align: center;
    line-height: 20px;
    margin-right: 6px;
}
.pricing-price{}

/* FAQs */

.accordion {
  --bs-accordion-active-bg: rgb(178, 193, 212);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgb(178, 193, 212, 0.25);
}