@media screen and (max-width:787px) {
    #hero h1{
        width: auto !important;
        text-align: start !important;
        padding: 20px !important;
    }
  .sht,.sht2{
    text-align: start !important;
    padding: 0px 20px !important;
  }
  #hero{
    align-items: start;
  }

  .ctabtn{
    align-self: center;
  }
    
}


@media screen and (max-width:449px) {
    .ctabtn{
        width: 100vw;
        border-radius: 0;
    }

    .images img{
        max-width: 320px !important;
    }

    .apadding{
        padding: 50px 20px !important;
    }
    
    .icon-btn{
        margin-left: 0px !important;
    }
    .topbar{
        padding: 10px 10px !important;
        overflow-x: hidden;
        
    }
    .formp{
        padding:10px 10px !important;
    }
}


@media screen and (max-width:787px) {
    #hero h1{
        width: auto !important;
        text-align: start !important;
        padding: 20px !important;
    }
  .sht,.sht2{
    text-align: start !important;
    padding: 0px 20px !important;
  }
  #hero{
    align-items: start;
  }

  .ctabtn{
    align-self: center;
  }

.modal-dialog{
    margin-top: 0 !important;
}
   
   .logoimg{
       max-width:140px;
   }
}


.offer-section {
      background-color: #f8f9fa; /* light background — change as needed */
      padding: 3rem 1rem;
      position: relative;
    }
    .offer-section h2 {
      font-size: 1.75rem;
      margin-bottom: 1rem;
    }
    .offer-section h3 {
      font-size: 1.5rem;
      margin-bottom: 1rem;
    }
    .offer-section .btn-offer {
      margin-top: 1.5rem;
    }
    /* Optional: add subtle background effect or overlay */
    .offer-section::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.05);
      pointer-events: none;
    }

@media screen and (max-width:449px) {
    .ctabtn{
        width: 100vw;
        border-radius: 0;
    }

    .images img{
        max-width: 320px !important;
    }

    .apadding{
        padding: 50px 20px !important;
    }
    
    .icon-btn{
        margin-left: 0px !important;
    }
    .topbar{
        padding: 10px 10px !important;
        overflow-x: hidden;
        
    }
    .formp{
        padding:10px 10px !important;
    }
}

@media screen and (max-width:554px){
    .btn-close{
    position:absolute;
    right: -2%;
    top: -7px;
    
    
}
}