/* 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;
    } */

}






/* 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: 43.5rem;
    }
    #hero{
        margin-top: 10rem;
    }
    .hero__wrapper{
        max-width:51rem;
        flex-wrap: nowrap;
        margin: auto;
        justify-content: space-between;

    }
    .hero--heading{
        max-width: 27.24rem;
    }

    .hero--heading h1{
        font-size: 2.5rem;

    }
    .hero__image img{
        max-width: 100%;
        height: fit-content;
    }
   
    #features{
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
    .features__heading h2{
       
        color: #006C80;
    }
    .features__heading p{
        display: none;
    }
    .features__offers{
        margin-top: 4rem;
    }
    
    .features__offers--cards{
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        grid-template-rows: repeat(2, auto); 
        gap: 0.5rem; 
        width: 50%;
        height: 27rem;
        margin: auto;

    }
    .card{
        width: 22.94rem;
        height: 13rem;
    }
    .features__account__wrapper{
        display: flex;
        justify-content: space-between;
        padding:  0rem 0rem 0rem 2rem;
        
    }
    .features__account__wrapper{
        max-width:55rem;
    }
    .features--account{
        justify-content: center;
        width: 30%;
    }
    .features--account--card{
        width: 110%;

    }
    .features--account--card h2{
        font-size: 1.5rem;
    }
    .image--dtt{
        display: block;
        border-top-right-radius: 1.25rem;
        border-bottom-right-radius: 1.25rem;
    }
    #contacts{
        max-width:51rem;
    }
    .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__wrapper{
        width: 78%;
        max-width:70.5rem;
        flex-wrap: nowrap;
        margin: auto;
        justify-content: space-between;

    }
    .hero--heading{
        max-width:30rem ;
    }

    .hero--heading h1{
        font-size: 3rem;

    }
 
    .hero__image img{
        padding-bottom: 4rem ;
        max-width: 29.75rem;
        height: 35rem;
    }
    #features{
        padding-top: 10rem;
        padding-bottom: 10rem;
    }
    .features__heading h2{
       
        color: #006C80;
    }
    .features__heading p{
        display: none;
    }
    .features__offers{
        margin-top: 4rem;
    }
    
    .features__offers--cards{
        display: grid;
        grid-template-columns: repeat(2, 1fr); 
        grid-template-rows: repeat(2, auto); 
        gap: 0.625rem; 
        width: fit-content;
        height: 25rem;
        margin: auto;

    }
    .card{
        width: 22.94rem;
        height: 13rem;
    }
    .features__account__wrapper{
        display: flex;
        justify-content: space-between;
        padding:  0rem 0rem 0rem 2rem;
        
    }
    .features__account__wrapper{
        max-width:70.5rem;
        padding:  0rem 0rem 0rem 3rem;
    }
    .features--account{
        justify-content: center;
        width: 30%;
    }
    .features--account--card h2{
        font-size: 2rem;
    }
    .image--dtt{
        display: block;
        border-top-right-radius: 1.25rem;
        border-bottom-right-radius: 1.25rem;
    }
    #contacts{
        max-width: 70.5rem;
    }
    .logo1{
        width: 50%;
    }
    .contacts__wrapper{
        flex-direction: row;
        justify-content: space-between;
    }
    .wrap--box{
        display: flex;
        justify-content: space-between;
        gap: 4rem;
    }
    .bux {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }


}