/* =========================================================
   RESPONSIVE
========================================================= */

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

@media (max-width:1200px){

.container{

    width:min(100%,calc(100% - 40px));

}

.hero-grid,
.company-grid{

    gap:50px;

}

.hero-content h1{

    font-size:3.5rem;

}

.section-title h2{

    font-size:2.8rem;

}

.footer-content{

    grid-template-columns:1.5fr 1fr 1fr;

}

}

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

@media (max-width:992px){

section{

    padding:90px 0;

}

.nav-links{

    display:none;

}

.menu-toggle{

    display:flex;

    align-items:center;

    justify-content:center;

}

.hero{

    padding-top:150px;

}

.hero-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-content p{

    margin-inline:auto;

}

.hero-buttons{

    justify-content:center;

}

.hero-stats{

    justify-content:center;

}

.hero-image{

    order:-1;

}

.company-grid{

    grid-template-columns:1fr;

}

.company-image{

    order:-1;

}

.vision-grid{

    grid-template-columns:1fr;

}

.statistics-grid{

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

}

.contact-grid{

    grid-template-columns:1fr;

}

.footer-content{

    grid-template-columns:1fr 1fr;

}

}

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

@media (max-width:768px){

section{

    padding:80px 0;

}

.navbar{

    height:78px;

}

.logo img{

    width:44px;

    height:44px;

}

.logo span{

    font-size:1.2rem;

}

.hero{

    padding-top:130px;

}

.hero-content h1{

    font-size:2.6rem;

}

.hero-content p{

    font-size:1rem;

}

.hero-buttons{

    flex-direction:column;

    align-items:stretch;

}

.hero-buttons .btn-primary,
.hero-buttons .btn-secondary{

    width:100%;

    justify-content:center;

}

.hero-stat{

    width:100%;

    min-width:unset;

}

.section-title{

    margin-bottom:55px;

}

.section-title h2{

    font-size:2.2rem;

}

.solutions-grid,
.features-grid,
.testimonials-grid{

    grid-template-columns:1fr;

}

.statistics-grid{

    grid-template-columns:1fr 1fr;

    gap:20px;

}

.cta-buttons{

    flex-direction:column;

    align-items:stretch;

}

.cta-buttons .btn-primary,
.cta-buttons .btn-secondary{

    width:100%;

    justify-content:center;

}

.footer-content{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-logo{

    justify-content:center;

}

.social-icons{

    justify-content:center;

}

}

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

@media (max-width:576px){

.container{

    width:calc(100% - 28px);

}

section{

    padding:70px 0;

}

.header{

    backdrop-filter:blur(14px);

}

.navbar{

    height:72px;

}

.logo{

    gap:10px;

}

.logo img{

    width:40px;

    height:40px;

}

.logo span{

    font-size:1.05rem;

}

.hero{

    padding-top:115px;

}

.hero-badge{

    font-size:.82rem;

    padding:8px 18px;

}

.hero-content h1{

    font-size:2.15rem;

    line-height:1.3;

}

.hero-content p{

    font-size:.95rem;

}

.hero-image img{

    max-width:320px;

}

.company-item{

    flex-direction:column;

    text-align:center;

    align-items:center;

}

.company-item i{

    margin-bottom:8px;

}

.solution-card{

    border-radius:22px;

}

.solution-content{

    padding:24px;

}

.vision-card{

    padding:30px 24px;

}

.feature-card{

    padding:30px 24px;

}

.contact-card{

    padding:30px 24px;

}

.statistics-grid{

    grid-template-columns:1fr;

}

.stat-item{

    padding:28px 10px;

}

.cta-box h2{

    font-size:2rem;

}

.cta-box p{

    font-size:.95rem;

}

.footer{

    padding-top:70px;

}

.footer-bottom{

    font-size:.9rem;

}

.back-to-top{

    width:52px;

    height:52px;

    left:18px;

    bottom:18px;

}

}

/* ===========================
   420px
=========================== */

@media (max-width:420px){

.hero-content h1{

    font-size:1.9rem;

}

.hero-content p{

    font-size:.92rem;

}

.section-title h2{

    font-size:1.8rem;

}

.section-title p{

    font-size:.92rem;

}

.hero-buttons{

    gap:14px;

}

.hero-stat{

    padding:22px;

}

.hero-stat h3{

    font-size:1.6rem;

}

.company-item{

    padding:24px 20px;

}

.company-item h3{

    font-size:1.2rem;

}

.solution-content h3{

    font-size:1.3rem;

}

.solution-content{

    padding:22px;

}

.vision-card i{

    width:70px;

    height:70px;

    font-size:1.7rem;

}

.feature-card img{

    width:65px;

    height:65px;

}

.contact-card i{

    width:70px;

    height:70px;

    font-size:1.7rem;

}

.testimonial-card{

    padding:28px 22px;

}

.testimonial-card img{

    width:75px;

    height:75px;

}

.faq-question{

    padding:20px;

    font-size:1rem;

}

.faq-answer p{

    padding:0 20px 20px;

}

.cta-box{

    padding:0 10px;

}

.social-icons{

    gap:10px;

}

.social-icons a{

    width:44px;

    height:44px;

}

}

/* ===========================
   360px
=========================== */

@media (max-width:360px){

.container{

    width:calc(100% - 22px);

}

.navbar{

    height:68px;

}

.logo span{

    display:none;

}

.hero{

    padding-top:105px;

}

.hero-content h1{

    font-size:1.65rem;

}

.hero-content p{

    font-size:.9rem;

}

.hero-badge{

    font-size:.78rem;

    padding:8px 16px;

}

.hero-image img{

    max-width:260px;

}

.section-title{

    margin-bottom:45px;

}

.section-title h2{

    font-size:1.6rem;

}

.section-title p{

    font-size:.9rem;

}

.company-item,
.solution-content,
.feature-card,
.vision-card,
.contact-card,
.testimonial-card{

    padding:20px;

}

.hero-stat{

    padding:20px;

}

.hero-stat h3{

    font-size:1.4rem;

}

.stat-item h3{

    font-size:2.2rem;

}

.footer{

    padding-top:60px;

}

.footer h4{

    font-size:1.05rem;

}

.footer-links{

    gap:10px;

}

.footer-links a{

    font-size:.92rem;

}

.back-to-top{

    width:48px;

    height:48px;

    left:14px;

    bottom:14px;

    font-size:1.1rem;

}

}