@media screen and (max-width: 768px) {
  .navbar{
    padding: 15px 30px 15px;
  }
  
}

/* Add a media query for smaller screens */
@media screen and (max-width: 768px) {
    .ham-icon {
      display: flex;
    }
    .ham-icon1 {
      display: inline-block;
    }
    .navbar ul {
      display: none;
    }
    .navbar1.show {
      display: flex;
      flex-direction: column;
    }
    .nav-links {
      gap: 20px;
    }
    button {
      font-size: 14px;
    }
  }

/*landing*/
@media screen and (max-width: 768px) {
    .landing h1 {
       /* Adjust font size for smaller screens */
    }
  }
  
  @media screen and (max-width: 480px) {
    .landing h1 {
       /* Adjust font size for even smaller screens */
    }
    h1 {
      font-size: 1.9rem; /* Adjust font size for even smaller screens */
    }
    h2 {
      font-size: 1.3rem;
      font-size: x-large;
    }
    .land2 h2 {
      font-size: x-large;
    }
    h3, .landh3 {
      /*font-size: 1.0rem;*/
      font-family: "Figtree", serif;
    }
  }
  
@media screen and (max-width: 769px) {
.land-img {
    width: 100%;
    height: auto;
}  
}
  
@media screen and (max-width: 769px) {
    .land-text-img {
      width: fit-content;
    }
    .bland-text-img {
      padding: 120px 40px 50px;
    }
    .land-text-img h1 {
    }
  
    .bbr {
      display: none; /* Hide <br> tag when screen size is less than 769px */
    }
  }
  @media screen and (min-width: 1025px) {
    
  }
  @media screen and (max-width: 1025px) {
    .bland-text-img {
      flex-direction: column;
      padding-top: 150px;
    }
    .land-text-img, .land-text-img h1, .land-text-img h3, .land-text-img  {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
    .img-holder {
      margin-top: 50px;
    }
    .land-h4 {
      text-align: center;
    }
  }
    
  @media screen and (max-width: 830px) {
    
    .span1 {
      font-size: 1.8rem;
    }
    .landing h3,h3 {
    }
    .land {
      margin: 0px;
    }
    .land2 {
      margin: 0px;
    }
    
  }
  @media screen and (max-width: 828px) {
    .img-holder {
      justify-content: center;
    }
  }
  @media screen and (max-width: 1210px) {
    
  }
  @media screen and (max-width: 700px) {
    .bbr {
      display: none; /* Hide <br> tag when screen size is less than 769px */
    }
  }
  @media screen and (max-width: 400px) {
     
    .landing h3,h3 {
    }
    .bbr {
      display: none; /* Hide <br> tag when screen size is less than 769px */
    }
  }
  @media screen and (max-width: 300px) {
     
    .landing h3,h3 {
    }
    .bbr {
      display: none; /* Hide <br> tag when screen size is less than 769px */
    }
  }

/*features page styling*/
  @media screen and (max-width: 769px) {
    .illustration-1, .illustration-2, .illustration-3, .illustration-4 {
      margin: 0;
      padding: 40px;
      flex-direction: column;
      height: fit-content;
      gap: 50px;
    }
    .illustration-2{
      flex-direction: column;
    }
    .illustration-3{
      flex-direction: column-reverse;
    }
    .illustration-3 .illustration {
      width: 100%;
    }
  
    .api-expo .mmm {
      flex-direction: column-reverse;
    }
    .api-expo .mmm-img {
      width: 100%;
      display: none;
    }
  }
  .illustration-4 {
    background-color: #011b33;
    color: #FFFFFF;
  }
  
  .illustration h3 {
    color:#000000;
  }
/*how it works page styling*/
  @media (max-width: 768px) {
    .steps-section {
        flex-direction: column;
        align-items: center;
        gap: 50px;
    }
  
    .steps {
        width: 70%;
        justify-content: center;
    }
    .step {
      max-width: 250px;
    }
    .phone {
      max-width: 100%;
    }
  }

  @media (max-width: 768px) {
    .cards {
        flex-direction: column;
        align-items: center;
    }
  }

  @media screen and (max-width: 768px) {
    .cta .cta-main {
      flex-direction: column-reverse;
      gap: 0px;
    }
    .illustration-111 {
      flex-direction: column;
    }
    .api-div {
      flex-direction: column;
      gap: 20px;
    }
  }

  

  @media screen and (max-width: 768px) {
    .footer-container {
      flex-direction: column;
    }
  }


  /*other and pricing page styling*/
  @media screen and (max-width: 768px) {
    .scc-refer {
      flex-direction: column-reverse;
    }
    .scc-refer-img {
      display: none;
    }
  }

  @media screen and (max-width: 768px) {
    .cquestions1 {
      flex-direction: column-reverse;
    }
    .quest-img {
      display: none;
    }
  }

  @media screen and (max-width: 768px) {
    .cquest {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }  


/*start of detailing*/

/* illustrations */
/* Responsive Fix for Smaller Screens */
@media (max-width: 768px) {
  .illustration-2 .illus-img-envelope {
      padding: 7vw 15vw; /* Adjust padding dynamically */
  }
  .illustration-2 .illus-img-envelope img {
      max-width: 80%; /* Prevents full-width stretching */
  }

  .illustration-3 .illus-img-envelope {
    padding: 15vw 6vw; /* Adjust padding dynamically */
  }
  .illustration-3 .illus-img-envelope img {
      max-width: 80%; /* Prevents full-width stretching */
  }

  .illustration-1 .illus-img-envelope {
    padding: 10vw 13vw 0; /* Adjust padding dynamically */
  }
  .illustration-1 .illus-img-envelope img {
      max-width: 80%; /* Prevents full-width stretching */
  }
  .illust {
    gap: 5px;
  }
}


@media screen and (max-width:1240px) {
  section {
    padding: 50px 0px 0px 0px;
    margin: auto;
  }
}


/*monitor section*/
/*ipad screen*/
@media screen and (max-width: 1024px) {
  
} 
/*phone section*/
@media screen and (max-width: 768px) {
  .card {
    padding: 30px 40px;
  }
  .container {
    padding: 30px;
    text-align: center;
  }  
  
}


/*faq*/
/*ipad screen*/
@media screen and (max-width: 1024px) {
  .faq {
    padding: 50px 50px 100px;
  }
} 
/*phone section*/
@media screen and (max-width: 768px) {
  .faq {
    padding: 50px 30px 100px;
  }
  
} 


/*footer*/
/*ipad screen*/
@media screen and (max-width: 1024px) {
  .site-footer .device {
    display: none;
  }
  .cta {
    padding: 45px;
    justify-content: center;
  }
  .cta-div {
    margin-top: 0;
  }
} 
/*phone screen*/
@media screen and (max-width: 768px) {
  .site-footer {
    padding: 90px 30px 0;
  }
  .copyandsocial {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
  }
  .site-footer .device {
    display: none;
  }
  .cta {
    padding: 40px;
    justify-content: center;
  }
  .cta-div {
    margin-top: 0;
  }
  .site-footer button {
    align-self: center;
  }
} 
@media screen and (max-width: 420px) {
  .footer div {
    align-items: center;
    width:auto;
  }
}

/*pricing page*/
@media screen and (max-width: 1024px) {
  .price-cuff {
    flex-direction: column;
  }
} 
@media screen and (max-width: 820px) {
  .cost-estimator {
    flex-direction: column;
    gap: 50px;
  }
} 
@media screen and (max-width: 480px) {
  .price-sect {
    padding: 200px 30px 90px;
  }
  .price-box {
    min-width: auto;
    padding: 40px;
  }
  .calculator {
    min-width: auto;
  }
  .benefit {
    flex-direction: column;
    align-items: flex-start;
  }
  .benefit-text p{
    text-align: left;
    padding-left: 40px;
  }
  .faq-container, .currency-container {
    padding: 60px 30px;
  }
  .price-div .div-p {
    padding: 0px 24px;
  }
} 


  /*@media screen and (min-width: 768px) {
    .wrap-text {
      word-wrap: break-word; /* Fallback for older browsers 
      overflow-wrap: break-word; /* For newer browsers 
    }
  }
*/