/*=====================================================
                RESPONSIVE CSS
        ZORKIN Engineering Website
=====================================================*/


/*=====================================================
                1400px
=====================================================*/

@media (max-width:1400px){

.container{

    max-width:1200px;

}

.hero-content h1{

    font-size:58px;

}

.page-content h1{

    font-size:52px;

}

}


/*=====================================================
                1200px
=====================================================*/

@media (max-width:1200px){

.section-padding{

    padding:90px 0;

}

.hero-content h1{

    font-size:50px;

}

.page-content h1{

    font-size:46px;

}

.section-title h2{

    font-size:40px;

}

.timeline{

    padding-left:20px;

    padding-right:20px;

}

}


/*=====================================================
                992px
=====================================================*/

@media (max-width:992px){

.navbar{

    background:#061423;

}

.navbar-collapse{

    background:#061423;

    padding:25px;

    border-radius:15px;

    margin-top:20px;

}

.navbar-nav{

    text-align:center;

}

.navbar-nav .nav-link{

    padding:12px 0;

}

.theme-btn{

    margin-top:20px;

    display:inline-block;

}

.hero{

    min-height:auto;

    padding:170px 0 120px;

}

.hero-content{

    text-align:center;

}

.hero-content h1{

    font-size:42px;

}

.hero-content p{

    margin:auto;

    margin-bottom:30px;

}

.hero-buttons{

    justify-content:center;

}

.page-header{

    min-height:350px;

}

.page-content h1{

    font-size:40px;

}

.section-title{

    text-align:center;

}

.section-title p{

    margin:auto;

}

.about-image,

.services-image,

.project-image{

    margin-bottom:40px;

}

.mission-card,

.value-card,

.feature-box,

.contact-card,

.service-detail-card{

    margin-bottom:30px;

}

.contact-map{

    min-height:450px;

    margin-top:40px;

}

}


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

@media (max-width:768px){

.section-padding{

    padding:70px 0;

}

.hero{

    padding-top:150px;

}

.hero-content h1{

    font-size:36px;

    line-height:1.3;

}

.page-content h1{

    font-size:34px;

}

.page-content p{

    font-size:17px;

}

.section-title h2{

    font-size:32px;

}

.timeline::before{

    left:20px;

}

.timeline-item{

    width:100%;

    left:0 !important;

    padding-left:60px;

    padding-right:0;

    margin-bottom:35px;

}

.timeline-item::after{

    left:11px !important;

}

.project-filter{

    gap:10px;

}

.project-filter button{

    padding:10px 18px;

    font-size:14px;

}

.contact-form{

    padding:30px;

}

.contact-map{

    min-height:380px;

}

.footer{

    text-align:center;

}

.footer-links{

    margin-top:35px;

}

}


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

@media (max-width:576px){

.hero-content h1{

    font-size:30px;

}

.page-content h1{

    font-size:28px;

}

.section-title h2{

    font-size:28px;

}

.hero-buttons{

    flex-direction:column;

}

.hero-buttons .theme-btn{

    width:100%;

}

.hero-features{

    grid-template-columns:1fr;

}

.contact-form{

    padding:25px;

}

.service-detail-card,

.value-card,

.feature-box,

.contact-card,

.hse-card{

    padding:30px 22px;

}

.project-item img{

    height:260px;

}

.mission-icon,

.value-card i,

.feature-box i{

    width:70px;

    height:70px;

    font-size:28px;

}

}


/*=====================================================
                400px
=====================================================*/

@media (max-width:400px){

.hero-content h1{

    font-size:26px;

}

.page-content h1{

    font-size:24px;

}

.section-title h2{

    font-size:24px;

}

.theme-btn{

    width:100%;

    text-align:center;

}

.navbar-brand img{

    max-height:45px;

}

.contact-form{

    padding:20px;

}

.footer{

    font-size:14px;

}

}