/*==========================================
RESPONSIVE
Power Visual Data
===========================================*/

@media(max-width:1200px){

.hero-grid{

grid-template-columns:1fr;

text-align:center;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

}

.solution-grid{

grid-template-columns:1fr;

}

.contact-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

.timeline{

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

}

}

@media(max-width:992px){

.dashboard-grid{

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

}

.tech-grid{

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

}

.sector-grid{

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

}

.benefits-grid{

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

}

.cards{

grid-template-columns:1fr;

}

.success-grid{

grid-template-columns:1fr;

}

.kpis .container{

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

}

.timeline{

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

}

nav{

display:none;

}

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

.hero{

padding-top:130px;

}

.hero h1{

font-size:42px;

}

.section-title h2{

font-size:34px;

}

.hero p{

font-size:18px;

}

.dashboard-grid{

grid-template-columns:1fr;

}

.tech-grid{

grid-template-columns:1fr;

}

.sector-grid{

grid-template-columns:1fr;

}

.benefits-grid{

grid-template-columns:1fr;

}

.kpis .container{

grid-template-columns:1fr;

}

.timeline{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

}

.hero-buttons{

flex-direction:column;

}

.hero-stats{

flex-direction:column;

gap:20px;

}

.btn-primary,

.btn-secondary{

display:block;

text-align:center;

}

.logo{

font-size:24px;

}

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

.container{

width:94%;

}

.hero h1{

font-size:34px;

}

.section-title h2{

font-size:30px;

}

.contact-form{

padding:25px;

}

.hero{

padding-bottom:70px;

}

section{

padding:70px 0;

}

.step{

padding:25px;

}

.dashboard-content{

padding:20px;

}

.benefit-card{

padding:25px;

}

.cards article{

padding:25px;

}

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

    .header .container{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:15px;
        padding:15px 0;
    }

    nav ul{
        gap:15px;
    }

    .btn-header{
        width:100%;
        max-width:280px;
        text-align:center;
    }

}