body {
    font-family:'Baloo 2';
    margin: 0;
    padding: 0;
  }
  .button-0{
    display:inline-flex;
      font-family:'Baloo 2';
      font-size:14px;
      letter-spacing:0px;
      font-weight:600;
      line-height:16px;
      text-decoration:none !important;
      color:#df4b38 !important;
      border:none;
      border-radius:2px;
      cursor:pointer;
      justify-content:center;
      padding:12px 25px;
      text-align:center;
      white-space:nowrap
  }
  .button
  {
      display:inline-flex;
      font-family:'Baloo 2';
      font-size:14px;
      letter-spacing:0px;
      font-weight:600;
      line-height:16px;
      text-decoration:none !important;

      background-color:#E9EDF3;
      color:#df4b38 !important;
      border:none;
      border-radius:2px;
      cursor:pointer;
      justify-content:center;
      padding:12px 25px;
      text-align:center;
      white-space:nowrap
  }
  #header .main-nav{
    row-gap: 10px;
  }
  .start-btn{
    margin-left: 10px;
  }

  .button-1:hover
  {
      background:#26609f;
      color: #ecf0f5 !important;
  }
  .button:hover
  {
      background:#ecf0f5;
  }
  .button-primary{color:#fff !important;background-color:#df4b38; border-radius: 5px;}.button-primary:hover{background:#252b42}.button-primary.button-shadow::before{box-shadow:0 8px 16px rgba(83,95,215,0.25);mix-blend-mode:normal}.button-primary.button-shadow:hover::before{box-shadow:0 8px 16px rgba(83,95,215,0.35)}.button-primary .button-sm.button-shadow::before{box-shadow:0 4px 16px rgba(83,95,215,0.25)}
  .button-primary .button-sm.button-shadow:hover::before{box-shadow:0 4px 16px rgba(83,95,215,0.35)}
  .button-block{display:flex}
  #header {

      transition: all 0.5s;
      z-index: 997;
      transition: all 0.5s;
      /*padding: 20px 0 */
      /* position: fixed; */
      left: 0;
      top: 0;
      right: 0;
      transition: all 0.5s;
      z-index: 997;
    }
    #header .logo img {
      padding: 0;
      margin: 1px 0;
      max-height: 82px;
   }
  #header .head-style{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .hero-section {
    background-color: #fdece4;
    padding: 30px 20px;
  }
  .hero-section .content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }
  .hero-section .text {
    max-width: 41%;
  }
  .hero-section h1 {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 20px;
    font-family:'Baloo 2';
  }
  .hero-section .main-text {
    font-size: 1.2rem;
    margin-bottom: 30px;
    font-family:'Baloo 2';
  }
  .hero-section .btn {
    margin-right: 10px;
  }
  .hero-section .download-buttons {
    margin-top: 20px;
  }
  .hero-section .phone-mockup {
    max-width: 55%;
    position: relative;
  }
  .hero-section .phone-mockup img {
    width: 100%;
    height: auto;
  }
  .hero-section .phone-mockup .tooltip {
    position: absolute;
    background: #fff;
    border-radius: 5px;
    padding: 10px;
    font-size: 0.9rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  .hero-section .phone-mockup .tooltip-1 {
    top: 10%;
    left: -10%;
  }
  .hero-section .phone-mockup .tooltip-2 {
    bottom: 10%;
    right: -10%;
  }
  .features-section {
      text-align: center;
      padding: 60px 20px;
    }
    .features-section h2 {
      font-size: 2.5rem;
      font-weight: bold;
      color: #df4b38;
      font-family:'Baloo 2';
    }
    .bold{
      color: black;
    }
    .features-section p {
      font-size: 1.1rem;
      margin-bottom: 40px;
      font-family:'Baloo 2';
    }
    .feature-card {
      text-align: center;
    }
    .feature-number {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fdece4;
      color: black;
      max-width: 60px;
      height: 60px;
      border-radius: 50%;
      font-size: 1.5rem;
      margin: 0 auto 20px;
      font-family:'Baloo 2';
    }
  .features-section .feature-row{
    justify-content: space-between;
  }
  .features-section .feature-number{
    max-width: 60px;
  }
  .f-title{
      font-weight:700;
      font-family:'Baloo 2';
  }
  .feature-row{
      margin-top: 80px;
  }
    .feature-text {
      font-size: 1rem;
      color: #555;
      font-family:'Baloo 2';
    }
    .explore-section {
      text-align: center;
      padding: 60px 20px;
    }
    .explore-section h2 {
      font-size: 2.5rem;
      font-weight: bold;
      font-family:'Baloo 2';
    }
    .explore-section h2 span {
      color: #df4b38;
      font-family:'Baloo 2';
    }
    .explore-section p {
      font-size: 1.1rem;
      margin-bottom: 40px;
      font-family:'Baloo 2';
    }
    .explore-card {
      text-align: center;
    }
    .explore-number {
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #fdece4;
      color: black;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      font-size: 1.5rem;
      margin: 0 auto 20px;
      font-family:'Baloo 2';
    }
    .cta-section {
      background-color: #252b42;
      color: white;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      border-radius: 24px;
      margin-bottom:  30px !important;
    }
    .cta-section .text-content {
      max-width: 50%;
    }
    .cta-section h2 {
      font-size: 2.5rem;
      font-weight: bold;
      margin-bottom: 20px;
      font-family:'Baloo 2';
    }
    .cta-section p {
      font-size: 1rem;
      margin-bottom: 30px;
      line-height: 1.6;
      font-family:'Baloo 2';
    }
    .cta-section .btn-primary {
      background-color: #df4b38;
      border: none;
      padding: 10px 20px;
      font-size: 1rem;
      font-family:'Baloo 2';
    }
    .cta-section img {
      max-width: 80%;
      border-radius: 12px;
    }
  .download-buttons .button-text{
      font-size: 17px;
      font-family:'Baloo 2';
      align-items: center;
      padding-left: 20px;
      padding-right: 20px;
      gap: 10px;

  }
  .btn-text{
    font-size: 13px;
    margin-bottom: 0;
  }
    @media (max-width: 641px)
  {
      .phone-mockup-explore{
          max-width: 60%;
      }
      .hero-section .content{
          display: flex;
          flex-direction: column;
          gap: 55px;
          }

      .hero-section .text {
           max-width: 100%;
      }
      .hero-section .phone-mockup {
          max-width: 100%;
          position: relative;
      }
      .download-buttons .button-text{
          font-size: 14px;
      }
      .hero-section h1 {
          font-size: 2rem;
      }
      .hero-section p{
          font-size: 1rem;
      }
      .cta-section .footer{
          flex-direction: column;
      }
      .cta-section .text-content {
          max-width: 100%;
      }
      .cta-section h2 {
          font-size: 2rem;
          font-weight: bold;
          margin-bottom: 20px;
      }
  }