/* ==========================================================
   MetaTechX Enterprise Appointment Platform
   Responsive Stylesheet
   Version 2.0
========================================================== */

/* ==========================================================
   LARGE DESKTOP (1600px+)
========================================================== */

@media (min-width:1600px){

.container{

    max-width:1500px;

}

.hero h1{

    font-size:76px;

}

.hero p{

    font-size:22px;

}

.services-grid{

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

}

.industry-grid{

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

}

.features-grid{

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

}

}

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

@media (max-width:1400px){

.hero .container{

    gap:50px;

}

h1{

    font-size:58px;

}

.container{

    width:92%;

}

}

/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width:1200px){

.hero .container{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-buttons{

    justify-content:center;

}

.hero-right{

    margin-top:40px;

}

.stats .container{

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

}

.timeline::before{

    left:30px;

}

.timeline-item{

    width:100%;

    padding-left:80px;

    padding-right:20px;

    left:0!important;

    text-align:left!important;

}

.timeline-number{

    left:5px!important;

}

}

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

@media (max-width:992px){

.nav-links{

    display:none;

}

.hamburger{

    display:block;

}

.mobile-menu{

    position:fixed;

    top:82px;

    left:-100%;

    width:300px;

    height:100vh;

    background:#071B36;

    transition:.35s;

    padding:30px;

    z-index:9999;

}

.mobile-menu.active{

    left:0;

}

.mobile-menu ul{

    list-style:none;

}

.mobile-menu li{

    margin:20px 0;

}

.mobile-menu a{

    color:#fff;

    font-size:18px;

}

.hero{

    padding-top:130px;

}

.hero h1{

    font-size:48px;

}

.hero p{

    font-size:18px;

}

.services-grid,

.industry-grid,

.features-grid,

.contact-grid,

.footer-grid{

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

}

#bookingForm{

    grid-template-columns:1fr;

}

#bookingForm textarea,

#bookingForm button,

#slotContainer{

    grid-column:auto;

}

.glass-card{

    padding:30px;

}

}

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

@media (max-width:768px){

section{

    padding:70px 0;

}

.container{

    width:94%;

}

h1{

    font-size:40px;

}

h2{

    font-size:34px;

}

h3{

    font-size:22px;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.btn-primary,

.btn-outline{

    width:100%;

    max-width:320px;

}

.services-grid,

.industry-grid,

.features-grid,

.contact-grid,

.footer-grid,

.stats .container{

    grid-template-columns:1fr;

}

.stat{

    padding:25px;

}

.timeline{

    margin-top:40px;

}

.timeline::before{

    left:25px;

}

.timeline-item{

    padding-left:70px;

}

.timeline-card{

    padding:25px;

}

.service-card{

    padding:30px;

}

.feature{

    flex-direction:column;

    align-items:flex-start;

}

.feature i{

    margin-bottom:15px;

}

.contact-card{

    padding:25px;

}

.modal-content{

    padding:30px;

}

.toast{

    width:300px;

}

}

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

@media (max-width:576px){

body{

    font-size:15px;

}

.navbar{

    height:72px;

}

.logo{

    font-size:24px;

}

.hero{

    min-height:auto;

}

.hero h1{

    font-size:34px;

    line-height:1.2;

}

.hero p{

    font-size:16px;

}

.glass-card{

    padding:22px;

}

.btn-primary,

.btn-outline{

    padding:14px 20px;

    font-size:15px;

}

#bookingForm input,

#bookingForm select,

#bookingForm textarea{

    padding:16px;

    font-size:15px;

}

.slot-btn{

    width:100%;

    text-align:center;

}

.whatsapp-float{

    width:58px;

    height:58px;

    right:18px;

    bottom:18px;

    font-size:26px;

}

#scrollTop{

    right:18px;

    bottom:90px;

    width:50px;

    height:50px;

}

.toast{

    width:calc(100vw - 30px);

}

.modal-content{

    width:95%;

    padding:22px;

}

}

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

@media (max-width:420px){

h1{

    font-size:30px;

}

h2{

    font-size:28px;

}

.hero-buttons{

    gap:15px;

}

.service-card{

    padding:25px;

}

.industry-card{

    padding:25px;

}

.feature{

    padding:22px;

}

.contact-card{

    padding:22px;

}

.footer-grid{

    gap:25px;

}

}

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

@media (max-width:360px){

.container{

    width:96%;

}

.logo{

    font-size:20px;

}

.hero h1{

    font-size:27px;

}

.hero p{

    font-size:15px;

}

.btn-primary,

.btn-outline{

    font-size:14px;

}

.service-card i{

    font-size:42px;

}

.feature i{

    width:60px;

    height:60px;

    font-size:22px;

}

}

/* ==========================================================
   LANDSCAPE PHONE
========================================================== */

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

.hero{

    min-height:auto;

    padding:120px 0 80px;

}

}

/* ==========================================================
   PRINT
========================================================== */

@media print{

header,

footer,

.whatsapp-float,

#scrollTop,

.hero-buttons,

.toast-container{

    display:none!important;

}

body{

    background:#fff;

    color:#000;

}

section{

    padding:20px 0;

}

.container{

    width:100%;

}

}

.nav-links.active{

display:flex;

flex-direction:column;

position:absolute;

top:80px;

left:0;

width:100%;

background:#071B36;

padding:20px;

box-shadow:0 10px 30px rgba(0,0,0,.25);

z-index:1000;

}

header.sticky{

background:rgba(7,27,54,.95);

backdrop-filter:blur(12px);

box-shadow:0 5px 20px rgba(0,0,0,.25);

}

.nav-links a.active{

color:#ff7a00;

}