@import "./variables.css";

/* ==========================================
   RESET
========================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

#root{
    width:100%;
    min-height:100%;
    
}

html{
    
    width:100%;
    min-height:100%;
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
}

body{
    width:100%;
    min-height:100%;
    /*font-family:Inter,sans-serif;*/
    font-family:Montserrat,sans-serif;
    background:#fff;
    color:#202B45;
    line-height:1.6;
    /*overflow-x:hidden;*/
}

a{
    text-decoration:none;
    color:inherit;
}

ul,
ol{
    list-style:none;
}

img{
    display:block;
    max-width:100%;
    height:auto;
}

button,
input,
select,
textarea{
    font-family:inherit;
}

button{
    cursor:pointer;
    border:none;
}

/* ==========================================
   RESPONSIVE TYPOGRAPHY
========================================== */

h1{
    line-height:1.1;
}

h2{
    line-height:1.2;
}

h3,
h4,
h5,
h6{
    line-height:1.3;
}

p{
    font-size:16px;
    line-height:1.7;
    /*color:#667085;*/
    margin-bottom:10px;
}


/* ==========================================
   CONTAINER SYSTEM
========================================== */

.container{
    width:100%;
    margin:0 auto;
    padding:0 20px;
}

/* ==========================================
   4K DISPLAY (3840px)
========================================== */

@media (min-width:3000px){

    .container{
        max-width:2400px;
    }

    html{
        font-size:20px;
    }
    
    p{
        font-size:24px;
        line-height:2;
    }
}

/* ==========================================
   2560px
========================================== */

@media (min-width:2200px) and (max-width:2999px){

    .container{
        max-width:1800px;
    }

    html{
        font-size:18px;
    }
    
    p{
        font-size:20px;
        line-height:1.9;
    }

}

/* ==========================================
   1920px
========================================== */

@media (min-width:1600px) and (max-width:2199px){

    .container{
        max-width:1500px;
    }
    
    p{
        font-size:18px;
        line-height:1.8;
    }
}

/* ==========================================
   1440px
========================================== */

@media (min-width:1400px) and (max-width:1599px){

    .container{
        max-width:1320px;
    }
    
    p{
        font-size:18px;
        line-height:1.8;
    }
}

/* ==========================================
   1366px
========================================== */

@media (min-width:1281px) and (max-width:1399px){

    .container{
        max-width:1240px;
    }
    
    p{
        font-size:17px;
        line-height:1.8;
    }
}

/* ==========================================
   1280px
========================================== */

@media (min-width:1201px) and (max-width:1280px){

    .container{
        max-width:1180px;
    }
    
    p{
        font-size:16px;
        line-height:1.8;
    }
}

/* ==========================================
   1024px
========================================== */

@media (max-width:1200px){

    .container{
        max-width:100%;
        padding:0 25px;
    }
    
    p{
        font-size:16px;
        line-height:1.8;
    }
}

/* ==========================================
   TABLET
========================================== */

@media (max-width:1024px){

    .container{
        padding:0 22px;
    }

    html{
        font-size:15px;
    }
    
    p{
        font-size:16px;
        line-height:1.8;
    }
}

/* ==========================================
   768px
========================================== */

@media (max-width:768px){

    .container{
        padding:0 18px;
    }

    html{
        font-size:15px;
    }
    
    p{
        font-size:16px;
        line-height:1.8;
    }
}

/* ==========================================
   576px
========================================== */

@media (max-width:576px){

    .container{
        padding:0 16px;
    }

    html{
        font-size:14px;
    }
    
    p{
        font-size:15px;
        line-height:1.8;
    }
}

/* ==========================================
   480px
========================================== */

@media (max-width:480px){

    .container{
        padding:0 15px;
    }

    html{
        font-size:14px;
    }
    
    p{
        font-size:15px;
        line-height:1.8;
    }
}

/* ==========================================
   375px
========================================== */

@media (max-width:375px){

    .container{
        padding:0 14px;
    }

    html{
        font-size:13px;
    }
    
    p{
        font-size:14px;
        line-height:1.8;
    }
}

/* ==========================================
   320px
========================================== */

@media (max-width:320px){

    .container{
        padding:0 12px;
    }

    html{
        font-size:12px;
    }
    
    p{
        font-size:12px;
        line-height:1.7;
    }
}

/* ==========================================
   GLOBAL ELEMENT PROTECTION
========================================== */

section{
    width:100%;
    position:relative;
}

.swiper,
.swiper-wrapper,
.swiper-slide{
    max-width:100%;
}

.hero,
.partners,
.hosting-solutions,
.why-dnh,
.testimonials,
.cta-section,
.footer{
    width:100%;
}

.hero-image img{
    max-width:100%;
    height:auto;
}

/* ==========================================
   PREVENT HORIZONTAL SCROLL
========================================== */

.row,
.grid,
[class*="grid"]{
    min-width:0;
}

input,
textarea,
select{
    max-width:100%;
}

table{
    width:100%;
    display:block;
    overflow-x:auto;
}

/* ==========================================
   IMAGE OPTIMIZATION
========================================== */

img{
    max-width:100%;
    object-fit:cover;
}