/* ============================================
   Responsive
   DOKHANI
============================================ */


/************* Large Monitor *************/

@media(max-width:1600px){

.hero h1{

    font-size:95px;

}

.container{

    gap:60px;

}

}


/************* Laptop *************/

@media(max-width:1200px){

nav{

    padding:0 40px;

}

section{

    padding:90px 40px;

}

.hero h1{

    font-size:80px;

}

.hero p{

    font-size:20px;

}

.cards{

    grid-template-columns:repeat(2,1fr);

}

.counter{

    grid-template-columns:repeat(2,1fr);

}

.timeline{

    flex-wrap:wrap;

}

.timeline div{

    flex:0 0 calc(50% - 10px);

}

.container{

    grid-template-columns:1fr;

}

.contact-box{

    grid-template-columns:1fr;

}

.left{

    text-align:center;

}

.left img{

    max-width:650px;

}

}


/************* Tablet *************/

@media(max-width:992px){

nav{

    height:75px;

    padding:0 25px;

}

.logo{

    font-size:26px;

    letter-spacing:5px;

}

nav ul{

    gap:18px;

}

nav a{

    font-size:15px;

}

.hero{

    padding-top:140px;

}

.hero h3{

    font-size:18px;

}

.hero h1{

    font-size:65px;

    letter-spacing:5px;

}

.hero p{

    font-size:18px;

}

.buttons{

    flex-direction:column;

    align-items:center;

}

.btn{

    width:260px;

}

.right h2{

    font-size:38px;

}

.title{

    font-size:34px;

}

.cards{

    gap:20px;

}

.card{

    padding:35px;

}

.counter{

    gap:15px;

}

.item{

    padding:30px;

}

.item h2{

    font-size:45px;

}

footer h2{

    font-size:34px;

}

}


/************* Mobile *************/

@media(max-width:768px){

nav{

    flex-direction:column;

    justify-content:center;

    height:auto;

    padding:20px;

}

.logo{

    margin-bottom:20px;

}

nav ul{

    flex-wrap:wrap;

    justify-content:center;

    gap:12px;

}

.hero{

    min-height:95vh;

    padding:170px 20px 80px;

}

.hero h1{

    font-size:50px;

    letter-spacing:2px;

}

.hero h3{

    font-size:16px;

    letter-spacing:2px;

}

.hero p{

    font-size:16px;

    line-height:2;

}

section{

    padding:80px 20px;

}

.title{

    font-size:30px;

}

.cards{

    grid-template-columns:1fr;

}

.timeline{

    flex-direction:column;

}

.timeline div{

    width:100%;

}

.counter{

    grid-template-columns:1fr;

}

.container{

    gap:35px;

}

.right h2{

    font-size:32px;

}

.right p{

    font-size:15px;

}

.left img{

    width:100%;

}

.info,
.form{

    padding:25px;

}

.form button{

    font-size:16px;

}

footer{

    padding:50px 20px;

}

footer h2{

    font-size:30px;

}

}


/************* Small Mobile *************/

@media(max-width:480px){

.hero h1{

    font-size:38px;

}

.hero h3{

    font-size:14px;

}

.hero p{

    font-size:15px;

}

.logo{

    font-size:22px;

}

nav ul{

    gap:8px;

}

nav a{

    font-size:13px;

}

.btn{

    width:100%;

}

.card{

    padding:25px;

}

.card h3{

    font-size:22px;

}

.title{

    font-size:26px;

}

.right h2{

    font-size:28px;

}

.item h2{

    font-size:38px;

}

footer h2{

    font-size:24px;

}

}


/************* Ultra Small *************/

@media(max-width:360px){

.hero h1{

    font-size:32px;

}

.hero p{

    font-size:14px;

}

.title{

    font-size:24px;

}

.right h2{

    font-size:24px;

}

.card{

    padding:20px;

}

.info,
.form{

    padding:20px;

}

}
.logo img{

    height:55px;

}

.footer-logo img{

    width:220px;

}
.logo img{

    height:55px;

}

.footer-logo img{

    width:220px;

}
.logo img{

    height:48px;

}

.footer-logo img{

    width:180px;

}
.logo img{

    height:48px;

}

.footer-logo img{

    width:180px;

}
.logo img{

    height:42px;

}

.footer-logo img{

    width:150px;

}
.logo img{

    height:42px;

}

.footer-logo img{

    width:150px;

}