/*==========================================================
    responsive.css
    WaveAccent Technologies
==========================================================*/

/*==========================================================
        LARGE DESKTOPS
==========================================================*/

@media (max-width:1400px){

.hero h1{

font-size:64px;

}

.hero-visual{

height:600px;

}

.section-padding{

padding:110px 0;

}

.container{

max-width:1200px;

}

}

/*==========================================================
        DESKTOP
==========================================================*/

@media (max-width:1200px){

.hero h1{

font-size:56px;

}

.hero p{

font-size:18px;

}

.hero-visual{

height:560px;

}

.section-title{

font-size:42px;

}

.technology-grid{

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

gap:25px;

}

.counter-box h2{

font-size:52px;

}

.cta-box{

padding:55px;

}

}

/*==========================================================
        TABLETS
==========================================================*/

@media (max-width:991px){

body{

text-align:left;

}

.section-padding{

padding:90px 0;

}

.navbar{

background:#07162D;

padding:18px 0;

}

.navbar-collapse{

padding-top:20px;

}

.nav-link{

margin:10px 0;

}

.hero{

padding-top:110px;

text-align:center;

}

.hero-content{

padding-top:0;

}

.hero h1{

font-size:48px;

}

.hero p{

margin:auto;

margin-bottom:35px;

}

.hero-buttons{

justify-content:center;

flex-wrap:wrap;

}

.hero-metrics{

justify-content:center;

gap:30px;

margin-top:40px;

flex-wrap:wrap;

}

.hero-visual{

margin-top:60px;

height:500px;

}

.about-image-wrapper{

margin-top:70px;

}

.experience-card{

position:relative;

margin:0 auto 35px;

right:auto;

top:auto;

}

.timeline{

padding-left:20px;

}

.timeline-item{

padding-left:45px;

}

.timeline-number{

left:-10px;

}

.cta-box{

text-align:center;

padding:50px 35px;

}

.footer{

text-align:center;

}

.footer-links,

.footer-contact{

align-items:center;

}

.social-links{

justify-content:center;

}

.footer .text-md-end{

text-align:center !important;

margin-top:15px;

}

}

/*==========================================================
        MOBILE DEVICES
==========================================================*/

@media (max-width:767px){

.section-padding{

padding:70px 0;

}

.section-title{

font-size:34px;

line-height:1.3;

}

.section-text{

font-size:16px;

}

.hero{

min-height:auto;

padding-top:120px;

padding-bottom:70px;

}

.hero h1{

font-size:38px;

line-height:1.2;

}

.hero p{

font-size:17px;

line-height:1.8;

}

.hero-buttons{

flex-direction:column;

align-items:center;

gap:18px;

}

.hero-buttons .btn{

width:100%;

max-width:320px;

}

.hero-metrics{

flex-direction:column;

align-items:center;

gap:25px;

}

.metric{

text-align:center;

}

.hero-visual{

height:360px;

margin-top:50px;

}

.center-logo{

width:110px;

height:110px;

}

.center-logo img{

width:65px;

}

.about-image-wrapper{

padding:0;

}

.feature-mini{

flex-direction:column;

align-items:flex-start;

}

.feature-icon{

margin-bottom:15px;

}

.capability-card{

padding:30px 25px;

}

.timeline{

padding-left:0;

}

.timeline::before{

left:20px;

}

.timeline-item{

padding-left:65px;

}

.timeline-number{

left:0;

width:40px;

height:40px;

font-size:14px;

}

.timeline-content{

padding:25px;

}

.technology-grid{

grid-template-columns:1fr;

}

.tech-column{

padding:30px;

}

.solution-card{

padding:30px;

}

.counter-box{

margin-bottom:25px;

}

.counter-box h2{

font-size:46px;

}

.cta-box{

padding:40px 25px;

}

.cta-box h2{

font-size:34px;

}

.footer-logo{

margin:auto;

}

.footer h5{

margin-top:20px;

}

.footer-divider{

margin:40px 0 25px;

}

.back-to-top{

right:20px;

bottom:20px;

width:46px;

height:46px;

font-size:18px;

}

}

/*==========================================================
        SMALL MOBILE DEVICES
==========================================================*/

@media (max-width:575px){

.container{

padding-left:20px;

padding-right:20px;

}

.logo{

height:44px;

}

.hero-label{

font-size:11px;

padding:8px 16px;

}

.hero h1{

font-size:32px;

}

.hero p{

font-size:16px;

}

.section-title{

font-size:30px;

}

.section-subtitle{

font-size:11px;

letter-spacing:2px;

}

.capability-icon{

width:70px;

height:70px;

font-size:30px;

}

.solution-icon{

width:70px;

height:70px;

font-size:30px;

}

.industry-card{

padding:35px 25px;

}

.industry-card i{

font-size:42px;

}

.experience-card{

width:100%;

padding:25px;

}

.experience-card h2{

font-size:42px;

}

.cta-box{

padding:35px 20px;

}

.cta-box h2{

font-size:30px;

}

.footer{

padding-top:70px;

}

.footer-links{

gap:12px;

}

.footer-contact{

gap:18px;

}

.social-links a{

width:42px;

height:42px;

font-size:16px;

}

}

/*==========================================================
        EXTRA SMALL DEVICES
==========================================================*/

@media (max-width:380px){

.hero h1{

font-size:28px;

}

.hero-buttons .btn{

font-size:15px;

padding:13px 22px;

}

.metric h3{

font-size:32px;

}

.section-title{

font-size:26px;

}

.counter-box h2{

font-size:38px;

}

.cta-box h2{

font-size:26px;

}

.footer p{

font-size:14px;

}

}

/*==========================================================
        LANDSCAPE MOBILE
==========================================================*/

@media (max-height:700px) and (orientation:landscape){

.hero{

min-height:auto;

padding-top:120px;

padding-bottom:80px;

}

.hero-visual{

height:320px;

}

}

/*==========================================================
        END OF responsive.css
==========================================================*/