/* Styles for tablets (600px to 1024px) */
@media (min-width: 600px) and (max-width: 1024px) {

}

/* Styles for phones (600px or less) */
@media (max-width: 600px) {
    .top-div {
        display: none;
    }
    .totop{
        display: none;
    }

    .top-hr {
        display: none;
    }
    /*navbar styling*/
.main-nav {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative; /* Ensure navbar is positioned correctly */
      width: 100%; /* Ensure navbar takes full width */
      max-width: 100vw; /* Ensure navbar does not extend beyond viewport width */
  }
  .main-logo{
    position: absolute;
    left: 2%;
    top: 50%;
    flex-direction: row;
  }

  .nav-list {
    flex-direction: column;
    position: absolute;
    background-color: hsl(0, 0%, 90%); /* Semi-transparent black */
    width: 100%;
    z-index: 1000 !important; /* Ensure it appears above other content */
    transform: translate(-5%, 25%);
    transition: opacity 0.5s ease-in-out;
    pointer-events: none;
    opacity: 0; /* Initially hidden */

}
  
    .nav-list li {
      text-align: center; /* Center the text */
      font-size: 1.5em; /* Adjust font size for mobile */
      padding: 10px;


  }

.nav-list.active {
    display: flex !important;
    opacity: 1; /* Show the list when active */
    pointer-events: auto;
    
   
}

    .hamburger {
      position: absolute;
      display: block !important; /* Ensure it is displayed on phones */
      transform: translate(300%, 75%); /* Adjust position */
  }

  .hamburger.active .bar:nth-child(2) {
      opacity: 0;
  }

  .hamburger.active .bar:nth-child(1) {
      transform: translateY(8px) rotate(45deg);
  }

  .hamburger.active .bar:nth-child(3) {
      transform: translateY(-8px) rotate(-45deg);
  }
  .main-nav-btn{
    display: none;
  }
   
    /*end of navbar styling*/
    .heroimg{
        height: 60vh;

    }
    .maindivh1 h1{
        font-size: 0.8em;
    }
    .maindivh1{
        top: 10em;
        width: 90%;
        height: 5.5em;
  
    }
    .herobtn{
        font-size: 0.7em;;
    }
    .herobtn:hover{
        background-color: hsl(0, 0%, 90%);
    }

    /*hide extra home images*/
    .mediaimg{
        display: none;
    }
    /*end of hiding extra home images*/
    .home-span2{
        font-size: 1.3em;
    }
    .about-h22{
        font-size: 3em;
    }

    /*suppliers styling*/
    .suppliers-ul{
        animation: slide 18s linear infinite !important;
        gap: 1em;
    }
    @keyframes slide {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-100%);
        }
    }
    /*end of suppliers styling*/

    /* our services styling*/
    .service-div{
        display: flex;
        flex-direction: column;
    }

    .ourservicesimg{
        position:relative;
        left: -4.5em;
        display: block;
    }

    .service-ul-wrapper{
        width: 100%;
        overflow: hidden; /* Prevents extra content from showing */
        position: relative;
    }

    .service-ul{
        display:flex;
        align-items: center;
        text-align: center;
        justify-content: center;
        align-content: center;
        left: -10em;
        font-size: 1em;
        list-style-type: none;
        animation: slider 20s linear infinite;
        gap: 1em;
        transform: translateX(0);
    }

    .service-img{
        transform: translate(18%, 0%);
        object-fit:fill
        
    }

    @keyframes slider {
        0% {
            transform: translateX(-100%);
        }
        100% {
            transform: translateX(100%);
        }
    }
    /*end of our services styling*/

    /*contact us styling*/
    .contact-img{
        display: none;
    }
    .contact-btn{
        background-color: hsl(193, 100%, 50%);;
        transform: translate(0em, 0em);
    }
    .contact-span{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: center;
        transform: translate(0em, 4.5em);
        gap: 1.3em;
    }
    #contact-span{
        justify-content: center;
        display: flex;
        font-family: helvetica;
    }
    /*end of contact us styling*/
    /* aboutus styling */

    .about-h2{
        font-size: 2em;
        transform: translate(-5.5em, -5em);
    }
    .about-span{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        align-content: center;
    }
    .about-img{
        display: none;
    }

    .about-us-section2{
        width: 100vw;
    }

    .about-us-section3{
        width: 100vw;

    }

    .about-us-section4{
        width: 100vw;

    }
    .about-button-contact2{
        transform: translate( -3em,-0em);
    }
    .footer-spans{
        display: none;
    }
    /*terms page*/
    .terms-container{
        position: absolute;
        height: 110em;
        width: 80%;
        top:70%;
    }
    #terms-link{
        display: none;
    }



}