/*=========================================
    SGenova Technologies
    Responsive Stylesheet
==========================================*/

/* ===============================
   Large Devices (1200px)
================================ */

@media (max-width:1200px){

.container{
    width:95%;
}

.hero-text h1{
    font-size:46px;
}

section h2{
    font-size:34px;
}

}

/* ===============================
   Tablets (992px)
================================ */

@media(max-width:992px) {

    .process-flow {

        width: 100%;

        height: auto;

        display: grid;

        grid-template-columns: 1fr;

        gap: 30px;

    }

    .process-flow::before,
    .process-flow::after {

        display: none;

    }

    .step {

        position: static;

        width: 180px;
        height: 180px;

        margin: auto;

    }

}

.hero{

    padding-top:130px;

}

.hero-image{

    order:-1;

}

.hero-text h1{

    font-size:42px;

}

.about-preview img,
.about-company img{

    margin:auto;

}

.features{

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

}

.footer-grid{

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

}


/* ===============================
   Mobile Navigation (768px)
================================ */

@media (max-width:768px){

header{

    position:relative;

}

nav{

    flex-direction:column;
    height:auto;
    padding:20px 0;

}

.logo{

    margin-bottom:20px;

}

nav ul{

    flex-direction:column;
    gap:15px;
    margin:20px 0;
    text-align:center;

}

.btn{

    padding:12px 25px;

}

.hero{

    padding:80px 0;

}

.hero-text h1{

    font-size:34px;

}

.hero-text p{

    font-size:16px;

}

.page-banner{

    padding:80px 0;

}

.page-banner h1{

    font-size:34px;

}

section{

    padding:70px 0;

}

section h2{

    font-size:30px;

}
/* Portfolio Slider */

.slider-track .card{

    flex:0 0 85%;
    min-width:85%;
    max-width:85%;

}

.slider-btn{

    width:45px;
    height:45px;
    font-size:22px;

}

.features{

    grid-template-columns:1fr;

}

.tech-grid{

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

}

.contact{

    text-align:center;

}

.contact-form{

    padding:25px;

}

.footer-grid{

    grid-template-columns:1fr;
    text-align:center;

}

}

/* ===============================
   Small Phones (576px)
================================ */

@media (max-width:576px){

.container{

    width:92%;

}

.hero-text h1{

    font-size:28px;

}

.hero-text p{

    font-size:15px;

}

.page-banner h1{

    font-size:28px;

}

.page-banner p{

    font-size:15px;

}

section h2{

    font-size:26px;

}

.card{

    padding:20px;

}

/* Portfolio Slider */

.slider-track .card {

    flex: 0 0 100%;
    min-width: 100%;
    max-width: 100%;

}

.card h3{

    font-size:20px;

}

.tech-grid{

    grid-template-columns:1fr;

}

.features h3{

    font-size:32px;

}

.contact-form input,
.contact-form textarea{

    padding:12px;

}

.btn,
.btn-outline{

    display:block;
    width:100%;
    text-align:center;

}

.map iframe{

    height:300px;

}

}

/* ===============================
   Very Small Devices (400px)
================================ */

@media (max-width:400px){

.hero-text h1{

    font-size:24px;

}

.hero-text p{

    font-size:14px;

}

section{

    padding:50px 0;

}

.card{

    padding:15px;

}

.logo img{

    width:140px;

}

.page-banner{

    padding:60px 0;

}

}

/* ===============================
   Landscape Phones
================================ */

@media (max-height:500px){

.hero{

    padding:60px 0;

}

.page-banner{

    padding:60px 0;

}

}