@font-face {
  font-family: 'Lato-Bold';
  src: url('../fonts/Lato-Bold.ttf') format('truetype');
  font-style: normal;
}

        @font-face {
  font-family: 'Lato-Light';
  src: url('../fonts/Lato-Light.ttf') format('truetype');
  font-style: normal;
}

        @font-face {
  font-family: 'Lato-Regular';
  src: url('../fonts/Lato-Regular.ttf') format('truetype');
  font-style: normal;
}

  @font-face {
  font-family: 'OpenSans';
  src: url('../fonts/OpenSans-Bold.ttf') format('truetype');
  font-style: normal;
}

  @font-face {
  font-family: 'Courgette';
  src: url('../fonts/Courgette-Regular.ttf') format('truetype');
  font-style: normal;
}

  @font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.otf') format('opentype');
  font-style: normal;
}
    
    /* RESET */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Lato-Regular';
      overflow-x: hidden;
      width: 100%;
    }

 .header{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem 2rem;
  position:relative;
  background:#eee;
  height: 12vh;
}

.logo-left{
  position:absolute;
  left:2rem;
  height:4.2rem;
}

.logo-center{
  height:3rem;
}
.hero-content {
    max-width: 65%;
    width: 100%;
}
.hero-form {
    max-width: 35%;
    width: 100%;
}
/* MOBILE HEADER */
@media(max-width:768px){
     .header {
        justify-content: center;
    }

  .logo-left{
display: none;
}

.logo-center{
  height:4rem;
}
}

/* ================= HERO ================= */
 /* HERO SECTION */
  /*.hero {*/
  /*  width: 100%;*/
  /*  min-height: 88vh;*/
  /*  background-image: url('../images/desktop common (2).png');*/
  /*  background-size: cover;*/
  /*  background-position: center;*/
  /*  background-repeat: no-repeat;*/
  /*  display: flex;*/
  /*  align-items: center;*/
  /*  justify-content: center;*/
  /*  text-align: center;*/
  /*  padding: 3vh 5vw;*/
  /*  position: relative;*/
  /*}*/
  .hero {
    width: 100%;
    min-height: 100vh;
    background-image: url('../images/desktop common (2).png');
    /* background-size: cover; */
    background-size: contain;
    background-position: inherit;
    background-repeat: no-repeat;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    /* text-align: center; */
    padding: 3vh 5vw;
    position: relative;
}
.hero-content {
    max-width: 70vw;
    margin-top: 30px;
    text-align: left;
}
.hero-form {
    max-width: 35%;
    width: 100%;
    margin-top: -30px;
}
  
   @media (max-width: 768px) {
    .hero {
      background-image: url('../images/mobile common size (1) (3).png');
      padding: 6vh 5vw;
      min-height: 80vh;
    }
  }

  /* CONTENT */
  .hero-content {
    max-width: 70vw;
  }

  @media (max-width: 768px) {
    .hero-content {
      max-width: 97vw;
    }
  }

  /* HEADING */
  .hero h1 {
    font-size: 2.4rem;
    font-weight: 900;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 0.5vh 1vh rgba(0,0,0,0.2);
    line-height: 1.2;
      font-family: 'OpenSans';
          margin-bottom: 3rem;
  }

  @media (max-width: 768px) {
    .hero h1 {
      font-size: 2.8rem;
      margin-bottom: 1.5rem;
    }
  }

  /* SUBTEXT */
  .highlight-line {
    margin-top: 3vh;
       font-size: 2rem;
    color: #b9f6c3;
    font-family: 'Courgette';
   
  }

  .highlight-line span {
    background: #1e4ed8;
    color: #fff;
    padding: 0.3em 0.6em;
    border-radius: 0.3em;
    font-style: normal;
  }

  .hero p {
    margin-top: 2vh;
    font-size: 1.2vw;
    color: #333;
    font-family: 'Inter';
  }

  .hero p.bold {
    font-weight: bold;
    font-family: 'Inter';
  }

  @media (max-width: 768px) {
    .highlight-line {
              font-size: 1.65rem;
    }
    .hero p {
     font-size: 1.15rem;
    }
  }

  /* BUTTON GROUP */
  .btn-group {
    margin-top: 4vh;
    display: flex;
    gap: 2vw;
    justify-content: left;
    flex-wrap: wrap;
  }



  /* BUTTON STYLE */
  .btn {
    position: relative;
    padding: 1.2em 2.5em;
    background: #fff;
    border-radius: 3em;
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none;
    color: #000;
    display: inline-block;
    box-shadow: 0 0.6vh 1.2vh rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    cursor: pointer;
  }

  /* OUTER BORDER */
  .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 3em;
    border: 0.15em solid #000;
  }


  .btn span {
    position: relative;
    z-index: 2;
  }

  /* HOVER EFFECT */
  .btn:hover {
    transform: scale(1.05);
    box-shadow: 0 1vh 2vh rgba(0,0,0,0.25);
  }
  
    @media (max-width: 768px) {
    .btn-group {
             /* flex-direction: column; */
        flex-wrap: wrap;
        gap: 2vh;
    }
    
      .btn {
    padding: 1em 1.5em;
    background: #fff;
    border-radius: 3em;
    font-weight: bold;
    font-size: 1.5rem;
    text-decoration: none;
    color: #000;
    display: inline-block;
    box-shadow: 0 0.6vh 1.2vh rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    width: 60vw;
  }
  
  .feature-box {
    min-width: 65%;
}
  }

  /* WAVE SHAPE */
  .wave {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 12vh;
    background: #fff;
    border-top-left-radius: 50% 100%;
    border-top-right-radius: 50% 100%;
  }
  
  
      .feature-strip {
      width: 100%;
      background:  #fbc2d2;
      padding: 4vh 6vw;
    
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 3vw;
    
      flex-wrap: wrap;
    }
    
    .feature-box {
      flex: 1;
      min-width: 25%;
    }
    
    .feature-box h3 {
      font-size: 1rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 0.6em;
      margin-bottom: 1vh;
      color: #222;
    }
    
    .feature-box p {
        margin-top: 1.15rem;
      font-size: 1rem;
      color: #444;
      line-height: 1.5em;
      font-weight: 300;
    }
    
    /* Pink Vertical Line */
    .line {
      width: 0.25em;
      height: 1.3em;
      background: #ff4f7b;
      display: inline-block;
    }
        

    
    
 /* ================= FOOTER ================= */
    footer {
      height: 7vh;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      background: #000;
    }

    footer a {
      color: #fff;
      text-decoration: none;
    }
    
      @media (max-width: 768px) {
     footer {
      height: 8vh;
      font-size: 1.4rem;
    }
      }
    
    
    @media(max-width:381px){
        
          .header {
        justify-content: center;
    }
  
  .logo-left{
  display: none;
}

.logo-center{
  height:3rem;
}
        
        .hero {
    min-height: 88vh;
 
  }
  
      .hero h1 {
        font-size: 2.5rem;
        margin-bottom: 1.5rem;
    }
    
        .highlight-line {
        font-size: 1.4rem;
    }
    
     .hero p {
     font-size: 1rem;
    }
    
     .btn-group {
             /* flex-direction: column; */
        flex-wrap: nowrap;
        gap: 2vh;
    }
    
      .btn {
    padding: 1em 1.5em;
    background: #fff;
    border-radius: 3em;
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none;
    color: #000;
    display: inline-block;
    box-shadow: 0 0.6vh 1.2vh rgba(0,0,0,0.15);
    transition: all 0.3s ease;
  }
    }