/* Navabr Media */
@media screen and (max-width: 912px) {
    
    .topnav a:not(.logo) {display: none;}
    .topnav a.icon {
        float: left;
        display: block;
        display: flex;
        justify-content: flex-end;
    }
    .menu-items{
        display: flex;
        flex-direction: column;
        gap:0.2rem;
    }
    .menu-items{
        display: flex;
        justify-content: flex-end;
    }
    }
    @media (max-width:768px){
        .topnav {
            margin-left: 1%;
            margin-right: 4%;
            }
     }
    @media (min-width:900px)and (max-width:975px) {
        .menu-items{
         gap:0.2rem;
        }
     
     }
     @media (min-width:913px)and (max-width:1028px) {
        .topnav a{
         font-size: 1rem;
        }
     
     }
  
     /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
     @media screen and (max-width: 912px) {
        .topnav.responsive {position: relative;}
        .topnav.responsive a.icon {
            position: absolute;
            right: 0;
            top: 0;
            z-index: 2;
        }
        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
        }
        }
/* End Navabr */

/*Hero Section*/
    @media screen and (max-width: 768px) {
        .navbar-hero{
             background-image: url(https://raw.githubusercontent.com/httpsadnankhan/hosting-landing-page/main/assets/images/hero-bg.png);
            background-size: cover;
        }
        .hero{
            margin: 2%;
         }
         .hero-heading{
            margin-right: 1rem;
            margin-top: 2rem;
         }
         .hero-title{
            font-size: 2.7rem;
         }
         .hero-description{
            margin-right: 0rem;
         }
    }

    @media (min-width:769px)and (max-width:900px) {
        .hero-heading{
            margin-right: 18rem;
            margin-top: -2rem;
         }
    }
    @media (min-width:901px)and (max-width:1100px) {
        .hero-heading{
            margin-right: 25rem;
            margin-top: -2rem;
         }
    }
    @media (min-width:1101px)and (max-width:1300px) {
        .hero-heading{
            margin-top: 1rem;
         }
    }
/* End Hero Section */

/* Hosting Section */
   @media (max-width:768px) {
    .hosting{
        margin-left: 2%;
        margin-right: 2%;
    }
   }
   @media (max-width:500px) {
    .hosting-item{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        justify-items: center;
        gap: 0.3rem;
    }
   }
   @media (min-width:501px)and (max-width:700px) {
    .hosting-item{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        justify-items: center;
        gap: 0.3rem;
    }
    .hosting-item-list {
        width: 240px;
    }
    .hosting-description{
        margin: 0 0.2rem;
    }
   }
   @media (min-width:701px)and (max-width:900px) {
    .hosting-item{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
        gap: 0.3rem;
    }
    .hosting-item-list {
        width: 230px;
    }
    .hosting-description{
        margin: 0 0.2rem;
    }
   }
   @media (min-width:901px)and (max-width:1200px) {
    .hosting-item{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
        gap: 0.3rem;
    }
    .hosting-item-list {
        width: 240px;
    }
    .hosting-description{
        margin: 0 0.2rem;
    }
   }
   @media (min-width:769px)and (max-width:1300px) {
    .hosting{
        position: relative;
        margin-top: -2rem;
        margin-left: 8%;
        margin-right: 8%;
    }
   }
   @media (max-width:345px) {
    .hosting-item-list {
        width: 260px;
    }
   }
/*End Hosting Section */

/* Choose-us Section */

@media (max-width:768px) {
    .choose-container{
        margin: 2%;
        grid-template-columns: repeat(1, 1fr);
    }
    .choose-title{
        margin-right: 2rem;
        font-size: 1.8rem;
    }

}
@media (max-width:500px) {
    .choose-item{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 0.7rem;
        justify-items: center;
    }
    .choose-title{
        margin-right: 1.2rem;
        font-size: 1.8rem;
    }
    .choose-description{
        margin-right: 1rem;
        margin-top: -1rem;
    }
    .choose-btn{
        margin-top: -0.5rem;
    }
    .choose-item-list:nth-child(3){
        order: 3;
    }
}
@media (min-width:501px)and (max-width:555px) {
    .choose-title{
        margin-right: 1.2rem;
        font-size: 1.8rem;
    }
    .choose-description{
        margin-right: 1rem;
        margin-top: -1rem;
    }
    .choose-btn{
        margin-top: -0.5rem;
    }
    .choose-item-list{
        width: 230px;
        height: auto;
        color: #000;
    }
    .choose-item-title{
        font-size: 1rem;
    }
}
@media (min-width:769px)and (max-width:949px) {
    .choose-container{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        align-items: center;
    }
    .choose-item{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.3rem;
    }
    .choose-item-list{
        width: 230px;
        height: auto;
        color: #000;
    }
    .choose-item-title{
        font-size: 1rem;
    }
    .choose-item-list:nth-child(3){
        order: 3;
    }
    .choose-title{
        font-size: 3rem;
        margin-right: 18rem;
        color: #000;
    }
    .choose-description{
        margin-top: -1.2rem;
    }
    .choose-btn{
        margin-top: 0rem;
    }
}
@media (min-width:950px)and (max-width:1235px) {
    .choose-title{
        font-size: 2.1rem;
        margin-right: 1rem;
        color: #000;
    }
    .choose-description{
        font-size: 1rem;
        margin-right: 5rem;
    }
}
/* End Choose-us Section */

/* Services Section */
@media (max-width:768px) {
    .services-container{
        margin: 2%;
    }
}
@media (max-width:500px) {
    .services-list{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
}
@media (min-width:501px)and (max-width:800px) {
    .services-list{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .services-list-item{
        width: 220px;
    }
}
@media (min-width:801px)and (max-width:1000px) {
    .services-list{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    .services-list-item{
        width: 240px;
    }
}
@media (min-width:1001px)and (max-width:1250px) {
    .services-list{
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }
    .services-list-item{
        width: 230px;
    }
}
@media (min-width:530px)and (max-width:700px) {
    .services-list-item{
        width: 260px;
    }
}
@media (min-width:701px)and (max-width:800px) {
    .services-list-item{
        width: 290px;
    }
}
@media (min-width:801px)and (max-width:1000px) {
    .services-list-item{
        width: 250px;
    }
}
/* End Services Section */

/* Testimonail Section */
@media (max-width:768px) {
    .testimonial-container{
        margin: 4% 2%;
    }
}
@media (max-width:500px) {
    .testimonial-item{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1rem;
    }
    .testimonial-item-list{
        width: 300px;
    }
}
@media (min-width:501px)and (max-width:800px) {
    .testimonial-item{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .testimonial-item-list{
        width: 240px;
    }
}
@media (min-width:801px)and (max-width:1450px) {
    .testimonial-item{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    .testimonial-item-list{
        width: 240px;
    }
}
@media (min-width:550px)and (max-width:700px) {
    .testimonial-item-list{
        width: 270px;
    }
}
@media (min-width:701px)and (max-width:800px) {
    .testimonial-item-list{
        width: 290px;
    }
}
@media (min-width:901px)and (max-width:1050px) {
    .testimonial-item-list{
        width: 260px;
    }
}
@media (min-width:1051px)and (max-width:1250px) {
    .testimonial-item-list{
        width: 290px;
    }
}
@media (min-width:1251px)and (max-width:1350px) {
    .testimonial-item-list{
        width: 320px;
    }
}
@media (min-width:1351px)and (max-width:1450px) {
    .testimonial-item-list{
        width: 340px;
    }
}
/* End Testimonail Section */

/* Domain Section */
@media (max-width:768px) {
    .domain-container{
        margin: 2%;
    }
    .domain-title{
        font-size: 2.2rem;
        color: #fff;
        font-weight: 600;
    }
}
/* End Domain Section */

/* Faq Section */
@media (max-width:768px) {
    .faq-container{
        margin: 2%;
        overflow-x: hidden;
    }
}

@media (min-width:700px)and (max-width:1350px) {
    .faq-item-sub-title{
        margin-right: 2rem;
    }
    .faq-description{
        margin-right: 4rem;
    }
}
@media (max-width:699px) {
    .faq-item{
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        align-items: center;
    }
    .accordion {
        width: 95vw;
      }
      .faq-item-sub-title{
        margin-right: 2rem;
    }
    .faq-description{
        margin-right: 6rem;
    }
}
/* End Faq Section */

/* Footer Session */
@media (max-width:450px) {
    .footer-container{
      display: grid;
      grid-template-columns: 1fr;
      justify-content: center;
    }
  }
  @media (min-width:450px)and (max-width:768px) {
    .footer-container{
      display: grid;
      grid-template-columns: 1fr 1fr;
      justify-content: center;
    }
    .footer-icon{
      padding: 0.5rem;
    }
    .footer{
      overflow-x: hidden;
      margin: 0 1% 0 1%;
    }
  }
  @media (min-width:769px)and (max-width:1000px) {
    .footer-container{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      justify-content: center;
    }
    .footer-icon{
      padding: 0.7rem;
    }
  }
  @media (min-width:1001px)and (max-width:1100px) {
    .footer-icon{
      padding: 0.8rem;
    }
  }
  
  @media (max-width:786px){
   .footer-underline-menu{
     display: flex;
     flex-direction: column;
     text-align: center;
     margin-right: 1rem;
     gap: 1rem;
   }
    .footer-container{
        margin: 2% 2% 0 2%;
    }
  }
/* End Footer Section */