/*==================================================
QMS Corporate Website
responsive.css
==================================================*/

/*==============================
XXL
==============================*/

@media (max-width:1400px){

.container-custom{

max-width:1140px;

}

.hero h1{

font-size:58px;

}

}


/*==============================
LG
==============================*/

@media (max-width:1200px){

section{

padding:100px 0;

}

.hero{

padding-top:120px;

}

.hero h1{

font-size:52px;

}

.hero p{

font-size:18px;

}

.section-title h2{

font-size:42px;

}

.about-badge{

right:10px;
bottom:20px;

}

.workflow::before{

display:none;

}

}


/*==============================
TABLET
==============================*/

@media (max-width:991px){

.header{

background:rgba(9,20,31,.98);

}

.navbar{

padding:15px 0;

}

.navbar-collapse{

background:#09141F;

padding:25px;

margin-top:20px;

border-radius:20px;

}

.navbar-nav{

gap:0;

}

.navbar-nav .nav-link{

padding:14px 0;

}

.hero{

text-align:center;

padding-top:140px;

}

.hero h1{

font-size:44px;

}

.hero-buttons{

justify-content:center;

}

.hero-subtitle{

margin:auto;

margin-bottom:30px;

}

.about-image{

margin-bottom:50px;

}

.about-badge{

position:relative;

right:auto;

bottom:auto;

margin-top:25px;

display:inline-block;

}

.counter-box{

margin-bottom:40px;

}

.footer{

text-align:center;

}

.footer-social{

justify-content:center;

}

.footer-contact li{

justify-content:center;

}

.contact-form{

padding:35px;

}

.google-map iframe{

height:450px;

}

}


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

@media (max-width:767px){

section{

padding:80px 0;

}

.hero{

min-height:auto;

padding-top:160px;

padding-bottom:120px;

}

.hero h1{

font-size:36px;

}

.hero p{

font-size:17px;

}

.section-title{

margin-bottom:50px;

}

.section-title h2{

font-size:34px;

}

.section-title p{

font-size:16px;

}

.about-content h2{

font-size:34px;

}

.about-badge{

padding:20px;

}

.about-badge h2{

font-size:36px;

}

.expertise-card{

padding:30px;

}

.service-card{

padding:30px;

}

.consultancy-card{

padding:30px;

}

.contact-form{

padding:30px;

}

.btn-primary-custom,

.btn-secondary-custom,

.btn-outline-custom{

width:100%;

justify-content:center;

}

.hero-buttons{

flex-direction:column;

}

.counter-box h2{

font-size:44px;

}

.workflow-item{

margin-bottom:40px;

}

.footer{

padding-top:70px;

}

.footer-bottom{

margin-top:40px;

}

}


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

@media (max-width:576px){

.container-custom{

padding:0 20px;

}

.hero h1{

font-size:30px;

}

.hero-subtitle{

font-size:14px;

padding:10px 18px;

}

.section-title span{

font-size:13px;

}

.section-title h2{

font-size:30px;

}

h2{

font-size:30px;

}

h3{

font-size:24px;

}

.card-custom,

.glass-card,

.service-card,

.expertise-card,

.training-card,

.consultancy-card,

.contact-card{

border-radius:20px;

}

.contact-form{

padding:25px;

border-radius:20px;

}

.google-map{

border-radius:20px;

}

.back-top{

width:48px;

height:48px;

right:20px;

bottom:20px;

}

.footer-logo img{

height:50px;

}

}


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

@media (max-width:420px){

.hero h1{

font-size:28px;

}

.hero p{

font-size:15px;

}

.hero-buttons{

gap:15px;

}

.btn-primary-custom,

.btn-secondary-custom,

.btn-outline-custom{

padding:16px 25px;

font-size:15px;

}

.counter-box h2{

font-size:36px;

}

.expertise-icon,

.service-icon{

width:70px;

height:70px;

font-size:26px;

}

.contact-card i{

width:60px;

height:60px;

font-size:24px;

}

}


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

@media (max-height:600px){

.hero{

padding-top:120px;

padding-bottom:80px;

}

.hero h1{

font-size:40px;

}

.hero-video{

height:100%;

}

}