/*====================================================
SOFTOGRID RESPONSIVE CSS
DESKTOP + TABLET + MOBILE
====================================================*/


/*==============================
GLOBAL RESPONSIVE FIX
==============================*/


*{
    box-sizing:border-box;
}


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


html,body{

    width:100%;

    overflow-x:hidden;

}


/*====================================================
TABLET DEVICES
768px - 1100px
====================================================*/


@media(max-width:1100px){


.header{

    width:94%;

}



.navbar{

    padding:0 20px;

}



/* NAVIGATION */

.nav-links{

    gap:18px;

}


.nav-links a{

    font-size:14px;

}



/* HERO */


.hero{

    padding-top:150px;

}


.hero h1{

    font-size:55px;

}


.hero p{

    max-width:600px;

    font-size:17px;

}



/* ABOUT */


.about-container{

    gap:40px;

}



/* SERVICES */


.services-grid{

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

}



/* INDUSTRIES */


.industry-grid{

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

}



/* PORTFOLIO */


.portfolio-grid{

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

}



/* CONTACT */


.contact-container{

    gap:30px;

}



}



/*====================================================
MOBILE DEVICES
max-width 767px
====================================================*/


@media(max-width:767px){


/*==============================
HEADER
==============================*/


.header{

    width:94%;

    top:10px;

}



.navbar{

    height:auto;

    padding:12px 15px;

    flex-direction:column;

    gap:12px;

    border-radius:22px;

}



/* LOGO */


.brand img{

    width:35px;

}



.brand-text h2{

    font-size:20px;

}



.brand-text span{

    font-size:9px;

}



/* NAV LINKS */


.nav-links{

    width:100%;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:10px 14px;

}



.nav-links a{

    font-size:12px;

}



/*==============================
HERO
==============================*/


.hero{

    padding-top:160px;

    text-align:center;

}



.hero h1{

    font-size:36px;

    line-height:1.2;

}



.hero p{

    font-size:15px;

    line-height:1.6;

}



/* BUTTONS */


.hero-buttons{

    display:flex;

    flex-direction:column;

    gap:15px;

}



.hero-buttons a{

    width:100%;

}



/*==============================
COMMON SECTION
==============================*/


section{

    padding:60px 0;

}



.container{

    width:90%;

}



.section-title{

    font-size:30px;

    text-align:center;

}


.section-subtitle{

    font-size:15px;

    text-align:center;

}



/*==============================
ABOUT SECTION
==============================*/


.about-container{

    display:flex;

    flex-direction:column;

    text-align:center;

}



.about-content{

    width:100%;

}


.about-image{

    width:100%;

}



/*==============================
SERVICES
==============================*/


.services-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:20px;

}



.service-card{

    width:100%;

    padding:25px;

}



/*==============================
INDUSTRIES
==============================*/


.industry-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:20px;

}



/*==============================
PORTFOLIO
==============================*/


.portfolio-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:25px;

}



.project-card{

    width:100%;

}



/*==============================
CONTACT
==============================*/


.contact-container{

    display:flex;

    flex-direction:column;

    width:100%;

}



.contact-card{

    width:100%!important;

    max-width:350px;

    margin:auto;

}



.contact-form{

    width:100%;

}



input,
textarea{

    width:100%;

}



/*==============================
FOOTER
==============================*/


.footer-content{

    display:flex;

    flex-direction:column;

    text-align:center;

    gap:20px;

}



}





/*====================================================
SMALL PHONES
320px - 400px
====================================================*/


@media(max-width:400px){


.nav-links{

    gap:8px 10px;

}


.nav-links a{

    font-size:11px;

}



.hero h1{

    font-size:32px;

}



.section-title{

    font-size:26px;

}



.service-card,
.contact-card{

    padding:20px;

}



}