/* ==========================================================
   ThunderPixels v2
   Responsive Styles
========================================================== */


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

@media (max-width:1200px){

    .hero__container{

        gap:3rem;

    }

    .hero-system{

        width:460px;
        height:460px;

    }

}


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

@media (max-width:992px){

    .navbar__container{

        height:80px;

    }

    .navbar__nav,
    .navbar__cta{

        display:none;

    }

    .navbar__toggle{

        display:flex;

    }

    .hero{

        padding-top:140px;
        text-align:center;

    }

    .hero__container{

        grid-template-columns:1fr;

    }

    .hero__content{

        order:1;

    }

    .hero__visual{

        order:2;

        margin-top:3rem;

    }

    .hero__description{

        margin-inline:auto;

    }

    .hero__buttons{

        justify-content:center;

    }

    .hero__features{

        justify-content:center;

    }

}


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

@media (max-width:768px){

    section{

        padding:80px 0;

    }

    .hero{

        min-height:auto;

    }

    .hero__title{

        font-size:3rem;

    }

    .hero-system{

        width:360px;
        height:360px;

    }

    .hero-system__center{

        width:150px;
        height:150px;

        font-size:1rem;

    }

    .hero-system__node{

        width:120px;

        font-size:.8rem;

        padding:12px;

    }

}


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

@media (max-width:576px){

    .container{

        width:92%;

    }

    .hero{

        padding-top:120px;

    }

    .hero__title{

        font-size:2.4rem;

    }

    .hero__description{

        font-size:1rem;

    }

    .hero__buttons{

        flex-direction:column;

    }

    .hero__buttons .btn{

        width:100%;

    }

    .hero__features{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }

    .hero-system{

        width:300px;
        height:300px;

    }

    .hero-system__center{

        width:120px;
        height:120px;

        font-size:.9rem;

    }

    .hero-system__node{

        width:100px;

        font-size:.7rem;

        padding:10px;

    }

}


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

@media (max-width:400px){

    html{

        font-size:15px;

    }

    .hero-system{

        width:260px;
        height:260px;

    }

}

/* ==========================================================
   TRUSTED TECHNOLOGIES
========================================================== */

@media (max-width: 992px) {

    .technologies__grid {

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

    }

}

@media (max-width: 576px) {

    .technologies {

        padding: 80px 0;

    }

    .technologies__header {

        margin-bottom: 3rem;

    }

    .technologies__grid {

        grid-template-columns: 1fr;

        gap: 1rem;

    }

    .technology-card {

        padding: 1.5rem;

    }

    .technology-card img {

        width: 48px;
        height: 48px;

    }

}
/* ==========================================================
   SOLUTIONS
========================================================== */

@media (max-width: 992px) {

    .solutions__grid {

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

        gap: 1.5rem;

    }

}

@media (max-width: 768px) {

    .solutions {

        padding: 80px 0;

    }

    .solutions__header {

        margin-bottom: 3rem;

    }

    .solution-card {

        padding: 2rem;

    }

}

@media (max-width: 576px) {

    .solutions__grid {

        grid-template-columns: 1fr;

    }

    .solution-card {

        padding: 1.75rem;

    }

    .solution-card__icon {

        width: 60px;
        height: 60px;

        font-size: 1.6rem;

        margin-bottom: 1.25rem;

    }

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

@media (max-width: 992px) {

    .industries__grid {

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

        gap: 1.5rem;

    }

}

@media (max-width: 768px) {

    .industries {

        padding: 80px 0;

    }

    .industries__header {

        margin-bottom: 3rem;

    }

    .industry-card {

        padding: 2rem;

    }

}

@media (max-width: 576px) {

    .industries__grid {

        grid-template-columns: 1fr;

    }

    .industry-card {

        padding: 1.75rem;

    }

    .industry-card__icon {

        width: 60px;

        height: 60px;

        margin-bottom: 1.25rem;

        font-size: 1.6rem;

    }

}

@media (max-width:991px){

    .about-hero__container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .about-company__grid{

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

    }
    .industries-grid{

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

}

}

@media (max-width:767px){

    .about-company__grid{

        grid-template-columns:1fr;

    }

    .about-hero{

        padding:150px 0 80px;

    }

    .about-hero__content h1{

        font-size:3.6rem;

    }
    .industries-grid{

    grid-template-columns:1fr;

}

}

@media(max-width:991px){

.story__timeline::before{

left:20px;

}

.story-item{

width:100%;

left:0 !important;

padding-left:60px;

padding-right:0;

text-align:left !important;

margin-bottom:40px;

}

}

@media(max-width:991px){

.mission-grid{

grid-template-columns:1fr;

}

}
@media(max-width:991px){

.values-grid{

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

}

}

@media(max-width:767px){

.values-grid{

grid-template-columns:1fr;

}

}
@media(max-width:991px){

.why-us__grid{

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

}

}

@media(max-width:767px){

.why-us__grid{

grid-template-columns:1fr;

}

}

@media(max-width:991px){

.process-grid{

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

}

}

@media(max-width:767px){

.process-grid{

grid-template-columns:1fr;

}

}
@media(max-width:991px){

.stats-grid{

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

}

}

@media(max-width:767px){

.stats-grid{

grid-template-columns:1fr;

}

}
@media(max-width:767px){

.about-cta-box{

padding:60px 30px;

}

.about-cta-box h2{

font-size:3rem;

}

.about-cta-buttons{

flex-direction:column;

align-items:center;

}

.about-cta-buttons .btn{

width:100%;

max-width:320px;

}

}
@media (max-width:991px){

    .industries-hero .container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .industries-hero__buttons{

        justify-content:center;

    }

    .industries-dashboard{

        max-width:550px;

        margin:0 auto;

    }
    .industry-layout{

    grid-template-columns:1fr;

    text-align:center;

}

.industry-features{

    max-width:420px;

    margin:0 auto 40px;

    text-align:left;

}

.restaurant-dashboard{

    max-width:500px;

    margin:0 auto;

}
.industry-layout.reverse{

    grid-template-columns:1fr;

}

.travel-dashboard{

    max-width:500px;

    margin:0 auto;

}
.benefits-grid{

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

}
.process-grid{

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

}
.faq-grid{

    grid-template-columns:1fr;

}
}

@media (max-width:767px){

    .industries-dashboard{

        grid-template-columns:1fr;

    }
    .restaurant-dashboard{

    grid-template-columns:1fr;

}
.travel-dashboard{

    grid-template-columns:1fr;

}
.benefits-grid{

    grid-template-columns:1fr;

}
.process-grid{

    grid-template-columns:1fr;

}
.industries-cta .cta-box{

    padding:50px 30px;

}
.cta-stats{

    gap:30px;

}

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

@media (max-width:1024px){

.portfolio-layout{

grid-template-columns:1fr;

gap:60px;

}

.projects-grid{

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

}

.grid-layout{

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

}

.process-grid{

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

}

}


@media (max-width:768px){

.hero-title{

font-size:4.8rem;

}

.projects-grid{

grid-template-columns:1fr;

}

.grid-layout{

grid-template-columns:1fr;

}

.process-grid{

grid-template-columns:1fr;

}

.portfolio-dashboard{

grid-template-columns:1fr 1fr;

}

.cta-box{

padding:50px 30px;

}

.cta-box h2{

font-size:3.6rem;

}

}
@media(max-width:992px){

.contact-layout,
.contact-grid{

grid-template-columns:1fr;

}

.info-grid{

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

}

}

@media(max-width:768px){

.info-grid{

grid-template-columns:1fr;

}

.contact-form-wrapper{

padding:30px;

}

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

@media(max-width:1024px){

.contact-layout,
.contact-grid{

grid-template-columns:1fr;

gap:50px;

}

.info-grid{

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

}

}

@media(max-width:768px){

.contact-content .hero-title{

font-size:4.8rem;

}

.info-grid{

grid-template-columns:1fr;

}

.contact-form-wrapper{

padding:30px;

}

.contact-cta .cta-box{

padding:50px 30px;

}

.contact-cta .cta-box h2{

font-size:3.6rem;

}

}