/* small tablet styles */
@media screen and (min-width: 768px){
    html{
        overflow-x: hidden;}
      /*  scroll-padding-top: 9rem;
        scroll-behavior:smooth;
    }
    html::-webkit-scrollbar{
        width: .3rem;
    }
    html::-webkit-scrollbar-track{
        background: transparent;  
    }
    html::-webkit-scrollbar-thumb{
        background: #fff;
        border-radius: 5rem;
    } */


    .card{
        width: 70%;
        height: 38rem;
    }



}






/* large tablet & small laptop styles */
@media screen and (min-width: 1024px){
    html{
        overflow-x: hidden;}
      /*  scroll-padding-top: 9rem;
        scroll-behavior:smooth;
    }
    html::-webkit-scrollbar{
        width: .3rem;
    }
    html::-webkit-scrollbar-track{
        background: transparent;  
    }
    html::-webkit-scrollbar-thumb{
        background: #fff;
        border-radius: 5rem;
    } */
    
    #hamburger-nav{
        display: none;
    }
    #navbar{
        display: flex;
        width:73% ;
    }
    #hero{
        margin-top: 10rem;
    }
    .hero__heading{
        width: 75%;
     
    }
    .hero__heading h1{
        font-size: 3rem;
    }

    .txt1{
        color:#006C80 ;
    }
    .txt2{
        color: #00161A;
    }
    .grid__wrapper{
        position: relative;
        top: 5rem;
        height: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        grid-template-rows: repeat(3, auto ); 
        gap: 0.625rem;
        width: 50%;
        margin: auto;

}
    .card{
        gap: 1.3rem;
        width: 29rem;
        height: 31.25rem;

}
    .card img{
            width: 100%;
            object-fit: contain;
}   



    .features__account__wrapper{
        display: flex;
        justify-content: space-between;
        padding:  0rem 0rem 0rem 3rem;
        margin-top: 12.5rem;
        
    }
    .features--account{
        justify-content: center;
        width: 40%;
    }
    .features--account--card h2{
        font-size: 2rem;
    }
    .image--dtt{
        display: block;
        border-top-right-radius: 1.25rem;
        border-bottom-right-radius: 1.25rem;
    }
    #contacts{
        width: fit-content;
        padding-inline:7.75rem ;
    }
    .logo1{
        width: 50%;
    }
    .contacts__wrapper{
        flex-direction: row;
        justify-content: space-between;
    }
    .bux {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }


}







/* big desktop styles */
@media screen and (min-width: 1440px){
    html{
        overflow-x: hidden;}
       /* scroll-padding-top: 9rem;
        scroll-behavior:smooth;
    }
    html::-webkit-scrollbar{
        width: .3rem;
    }
    html::-webkit-scrollbar-track{
        background: transparent;
        
    }
    html::-webkit-scrollbar-thumb{
        background: #fff;
        border-radius: 5rem;
    } */

    #hamburger-nav{
        display: none;
    }
    #navbar{
        display: flex;
        width: 46.5rem;
    }
    #hero{
        margin-top: 10rem;
    }
    .hero__heading{
        max-width: 46.625rem;
     
    }
    .hero__heading h1{
        font-size: 3rem;
    }
    .hero__heading p{
        font-size: 1rem;
    }
    .txt1{
        color:#006C80 ;
    }
    .txt2{
        color: #00161A;
    }
    .grid__wrapper{
       position: relative;
       top: 8rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        grid-template-rows: repeat(3, auto ); 
        max-width: 58.5rem;
        height:95rem ;
        gap: 0.625rem;
       margin: auto;
    }
    .card{
        gap: 1.7rem;
        width: 29rem;
        height: 31.25rem;
        padding: 1.25rem;

    }
     .card img{
        width: 100%;
        object-fit: contain;
    }   
    .img--stu{
        margin-top: 1.5rem;
    }

    
    .img--stx{
        margin-top: 2rem;
    }
    .features__account__wrapper{
        display: flex;
        justify-content: space-between;
        padding:  0rem 0rem 0rem 3rem;
        margin-top: 12.5rem;
        max-width:70.5rem;
    }
    .features--account{
        justify-content: center;
        width: 32%;
    }
    .features--account--card h2{
        font-size: 2rem;
    }
    .image--dtt{
        display: block;
        border-top-right-radius: 1.25rem;
        border-bottom-right-radius: 1.25rem;
    }
    #contacts{
        width:100vw;
        padding-inline:10rem ;
    }
    .contacts__container{
        max-width:70.5rem;
        margin: auto;

   }
    .logo1{
        width: 50%;
    }
    .contacts__wrapper{
        flex-direction: row;
        justify-content: space-between;
        max-width: 70rem;
        margin: auto;
    }
    .contacts__wrapper--about{
        position: relative;
        top: 3rem;
        max-width: 70.5rem;
        margin: auto;
    }
    .contacts__wrapper--push{
        position: relative;
        top: 4rem;
        max-width: 70.5rem;
        margin: auto;

    }
    .wrap--box{
        display: flex;
        justify-content: space-between;
        gap: 4rem;
    }
    .bux {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }


}