/*==================================================
                1600px
==================================================*/

@media (max-width:1600px){

.hero h1{

font-size:64px;

}

.section-title h2{

font-size:44px;

}

.cta-box h2{

font-size:44px;

}

}

/*==================================================
                1400px
==================================================*/

@media (max-width:1400px){

.hero{

padding-top:130px;

}

.hero h1{

font-size:58px;

}

.hero p{

font-size:18px;

}

.hero-image img{

max-width:85%;

}

.glass-card{

padding:15px 20px;

font-size:14px;

}

.about-images{

padding-right:40px;

}

.floating-img{

width:240px;

}

}

/*==================================================
                1200px
==================================================*/

@media (max-width:1200px){

.hero h1{

font-size:52px;

}

.section-title h2{

font-size:40px;

}

.hero-info{

gap:18px;

}

.info-box{

min-width:145px;

padding:18px;

}

.timeline-content{

padding:24px;

}

.contact-form{

padding:40px;

}

}

/*==================================================
                992px
==================================================*/

@media (max-width:992px){

.section-padding{

padding:90px 0;

}

.navbar{

padding:15px 0;

}

.navbar-collapse{

margin-top:20px;

padding:20px;

background:#0d132b;

border-radius:20px;

border:1px solid rgba(255,255,255,.08);

}

.navbar-nav{

gap:10px;

}

.navbar .btn{

margin-top:20px;

width:100%;

}

.hero{

text-align:center;

padding-top:150px;

}

.hero h1{

font-size:46px;

}

.hero p{

margin:auto auto 40px;

}

.hero-buttons{

justify-content:center;

}

.hero-info{

justify-content:center;

}

.hero-image{

margin-top:70px;

}

.glass-card{

display:none;

}

.about-images{

padding-right:0;

margin-bottom:70px;

}

.floating-img{

display:none;

}

.contact-info{

padding-right:0;

margin-bottom:60px;

}

.timeline-wrapper{

padding-left:0;

}

.timeline-wrapper::before{

display:none;

}

.timeline-item{

flex-direction:column;

text-align:center;

}

.timeline-year{

left:0;

margin-bottom:20px;

}

.timeline-content{

margin-left:0;

}

.footer{

text-align:center;

}

.footer-social{

justify-content:center;

}

.newsletter{

max-width:450px;

margin:auto;

margin-top:25px;

}

.footer-bottom{

text-align:center;

}

.footer-bottom .text-md-end{

margin-top:10px;

text-align:center!important;

}

}

/*==================================================
                768px
==================================================*/

@media (max-width:768px){

.hero{

min-height:auto;

padding:150px 0 80px;

}

.hero h1{

font-size:40px;

line-height:1.2;

}

.hero p{

font-size:17px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.hero-buttons .btn{

width:240px;

}

.info-box{

width:100%;

}

.section-title h2{

font-size:34px;

}

.section-title{

text-align:center;

}

.about-text{

text-align:center;

}

.feature-box{

flex-direction:column;

text-align:center;

}

.feature-box i{

margin:auto;

}

.service-card{

padding:35px 25px;

}

.why-card{

padding:35px 25px;

}

.cta-box{

padding:70px 30px;

}

.cta-box h2{

font-size:38px;

}

.contact-form{

padding:35px 25px;

}

.footer{

padding-top:80px;

}

}

/*==================================================
                576px
==================================================*/

@media (max-width:576px){

.hero h1{

font-size:34px;

}

.hero-tag{

font-size:13px;

padding:8px 18px;

}

.section-title h2{

font-size:30px;

}

.stat-card{

padding:35px 20px;

}

.stat-card h2{

font-size:42px;

}

.service-icon{

width:75px;

height:75px;

font-size:28px;

}

.why-icon{

width:75px;

height:75px;

font-size:28px;

}

.timeline-year{

width:75px;

height:75px;

font-size:20px;

}

.contact-info h2{

font-size:34px;

}

.cta-box h2{

font-size:32px;

}

.newsletter input{

padding-right:60px;

}

}

/*==================================================
                480px
==================================================*/

@media (max-width:480px){

.hero{

padding-top:130px;

}

.hero h1{

font-size:30px;

}

.hero p{

font-size:16px;

}

.btn{

width:100%;

}

.hero-buttons .btn{

width:100%;

}

.contact-form{

padding:25px 18px;

}

.form-control{

height:55px;

font-size:15px;

}

textarea.form-control{

height:150px;

}

#backToTop{

right:18px;

bottom:18px;

width:50px;

height:50px;

}

}

/*==================================================
                390px
==================================================*/

@media (max-width:390px){

.hero h1{

font-size:28px;

}

.section-title h2{

font-size:27px;

}

.info-box{

padding:16px;

}

.info-box h3{

font-size:28px;

}

.hero-tag{

font-size:12px;

}

.footer-logo{

height:50px;

}

}

/*==================================================
                360px
==================================================*/

@media (max-width:360px){

.hero{

padding-top:120px;

}

.hero h1{

font-size:26px;

}

.hero p{

font-size:15px;

}

.section-padding{

padding:70px 0;

}

.service-card,

.why-card,

.stat-card{

padding:28px 18px;

}

.contact-item{

flex-direction:column;

text-align:center;

align-items:center;

}

.contact-item div{

padding-top:0;

}

.social-icons{

justify-content:center;

flex-wrap:wrap;

}

}

/*==================================================
                320px
==================================================*/

@media (max-width:320px){

.hero h1{

font-size:24px;

}

.hero-buttons .btn{

font-size:14px;

height:50px;

}

.section-title h2{

font-size:24px;

}

.stat-card h2{

font-size:34px;

}

.contact-info h2{

font-size:28px;

}

.footer h5{

font-size:18px;

}

.newsletter input{

font-size:14px;

}

}