@media screen and (max-width: 320px) 
{
   /* Index Code */
    main {
        flex-direction: column;
    }

    .hero {
        height: auto;
    }

    .websites {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    .wcol-1 {
        flex: 1;
        height: 100%;
        align-items: center;
        justify-content: center;
    }

    .wcol-1 img {
        max-width: 100%;
        max-height: 100%;
    }

    .wcol-2  {
        flex: 1;
        height: 100%;
        gap: 2%;
    }

    .hosting {
        display: flex;
        flex-direction: column-reverse;

    }

    .hcol-1 {
        flex: 1;
        height: 100%;
    }

.hcol-2 {
    flex: 1;
    height: 100%;
}

    .hcol-2 img {
        max-width: 100%;
        max-height: 100%;
    }

    .calendar {
        display: flex;
        flex-direction: column;
        height: auto;
    }

    .ccol-1 img {
        max-width: 100%;
        max-height: 100%;
    }

    .nav-bar .logo {
        width: 20%;
    }

    .hpButtons {
        justify-content: center;
    }
    /* End of index Code*/

    /* Services Code*/
    .services {
        flex-direction: column;
        margin-left: 5px;
    }
    /* End of Services Code */

    .brand-pairs label {
        display: none;
    }

    #about-page main {
        height: auto;
    }

    .aboutUs {
        display: flex;
        flex-direction: column;
    }

    .acol-2 {
        display: none;
    }

    .swh, .lnm, .hh {
         height: 400px;
        overflow-y: auto;
    }

    footer {
        display: flex;
        flex-direction: column;



    }
    

}

@media screen and (max-width: 376px) 
{
   main {
       flex-direction: column;
   }

   .websites {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    align-items: center;
    justify-content: center;
}

.wcol-1 {
    flex: 1;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.wcol-1 img {
    max-width: 100%;
    max-height: 100%;
}

.wcol-2  {
    flex: 1;
    height: 100%;
    gap: 2%;
}


.hosting {
    display: flex;
    flex-direction: column-reverse;

}

.hcol-1 {
    flex: 1;
    height: 100%;
}


.hcol-2 {
flex: 1;
height: 100%;
}

.hcol-2 img {
    max-width: 100%;
    max-height: 100%;
}

.calendar {
    display: flex;
    flex-direction: column;
    height: auto;
}

.ccol-1 img {
    max-width: 100%;
    max-height: 100%;
}

   .nav-bar .logo {
       width: 20%;
   }

  
   .hpButtons {
       justify-content: center;
   }

   /* End of index Code*/

   .services {
       flex-direction: column;
       margin-left: 5px;
       
   }
   /* End of Services Code */

   .brand-pairs label {
       display: none;
   }

   #Nextlevel-logo{
       display: none;
   }

  .aboutUs {
    display: flex;
    flex-direction: column;
 
  }

    .acol-1 {
        display: flex;
        flex-direction: column;
       font-size: 18px
    }

    .acol-2 {
        display: none;
    }
    /* End of About Us code*/
   footer {
       display: flex;
       flex-direction: column;
   }
   
}

@media screen and (max-width: 426px){

    main {
        flex-direction: column;
    }

    .websites {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
    }
    
    .wcol-1 {
        flex: 1;
        height: 100%;
        align-items: center;
        justify-content: center;
    }
    
    .wcol-1 img {
        max-width: 100%;
        max-height: 100%;
    }
    
    .wcol-2  {
        flex: 1;
        height: 100%;
        gap: 2%;
    }
    
    
    .hosting {
        display: flex;
        flex-direction: column-reverse;
    
    }
    
    .hcol-1 {
        flex: 1;
        height: 100%;
    }
    
    .hcol-2 {
    flex: 1;
    height: 100%;
    }
    
    .hcol-2 img {
        max-width: 100%;
        max-height: 100%;
    }
    
    .calendar {
        display: flex;
        flex-direction: column;
        height: auto;
    }
    
    .ccol-1 img {
        max-width: 100%;
        max-height: 100%;
    }
    

    .nav-bar .logo {
        width: 20%;
    }


    .hpButtons {
        justify-content: center;
    }

    .services {
    display: flex;
    flex-direction: column;
    }

    .aboutUs {
        display: flex;
        flex-direction: column;
    }

    .acol-1 {
        margin: 2%;
    }

    .acol-2 {
        display: none;
    }

    footer {
        gap: 6%;
        flex-direction: column;
    }


    
}

@media screen and (max-width: 768px){

    .websites {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
    }
    
    .wcol-1 {
        flex: 1;
        height: 100%;
        align-items: center;
        justify-content: center;
    }
    
    .wcol-1 img {
        max-width: 100%;
        max-height: 100%;
    }
    
    .wcol-2  {
        flex: 1;
        height: 100%;
        gap: 2%;
    }
    
    
    .hosting {
        display: flex;
        flex-direction: column-reverse;
    
    }
    
    .hcol-1 {
        flex: 1;
        height: 100%;
    }
    
    
    .hcol-2 {
    flex: 1;
    height: 70%;
    }
    
    .hcol-2 img {
        
        max-width: 100%;
        max-height: 70%;
    }
    
    .calendar {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        padding: 2rem 0;
    }

    
    .ccol-1 {
        max-height: 50%;
        padding: 1rem;
        width: 100%;
    }

    .ccol-1 img {
        max-width: 100%;
        max-height: 100%;
    }

    .ccol-2 {
        max-height: 50%;
    }

    .hpButtons {
        justify-content: center;
    }

    .aboutUs {
        display: flex;
        max-height: 100%;
        max-width: 100%;
    }
    
    .acol-1 {
        gap: 2px;
    }

}

@media screen and (max-width: 1024px) {
     .websites {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        align-items: center;
        justify-content: center;
    }
    
    .wcol-1 {
        flex: 1;
        height: 100%;
        align-items: center;
        justify-content: center;
    }
    
    .wcol-1 img {
        max-width: 100%;
        max-height: 100%;
    }
    
    .wcol-2  {
        flex: 1;
        height: 100%;
        gap: 2%;
    }
    
    
    .hosting {
        display: flex;
        flex-direction: column-reverse;
    
    }
    
    .hcol-1 {
        flex: 1;
        height: 100%;
    }
    
    .hcol-2 {
    flex: 1;
    height: 60%;
    }
    
    .hcol-2 img {
        
        max-width: 100%;
        max-height: 70%;
    }

    

}


@media  screen and (max-width: 1440px) {
   

    #service-page main {
        justify-content: center;
    }

}