/* ======================================== */
/* FINAL MOBILE FIX */
/* ======================================== */

@media screen and (max-width:768px){

html,
body{
  overflow-x:hidden;
  width:100%;
}

/* HEADER */

header{
  padding:14px 16px !important;
  flex-wrap:wrap;
}

/* LOGO */

.logo-wrap{
  gap:8px !important;
  max-width:80%;
}

.logo-box{
  width:52px !important;
  height:52px !important;
}

.logo-text h1{
  font-size:22px !important;
  letter-spacing:4px !important;
}

.logo-text p{
  font-size:10px !important;
  letter-spacing:4px !important;
}

/* NAV */

nav{
  width:100%;
  left:0;
  top:100%;
  padding:24px 0 !important;
}

nav a{
  margin:12px 0 !important;
  font-size:17px !important;
}

/* HERO */

.hero{
  padding:110px 18px 60px !important;
  min-height:auto !important;
}

.hero h2{
  font-size:38px !important;
  line-height:1.2 !important;
}

.hero p{
  font-size:15px !important;
  line-height:1.8 !important;
}

/* BUTTONS */

.hero-btns{
  flex-direction:column;
  gap:14px;
}

.btn{
  width:100% !important;
  max-width:240px;
  margin:auto !important;
}

/* SECTIONS */

.section{
  padding:60px 18px !important;
}

/* GRID */

.grid,
.stats,
.footer-grid,
.timeline-grid,
.team-grid,
.contact-wrap{
  grid-template-columns:1fr !important;
}

/* CARDS */

.card,
.story,
.why,
.cta,
.team-card,
.timeline-card,
.stat-box{
  padding:24px !important;
  border-radius:24px !important;
}

/* TITLES */

.title,
.timeline h2,
.team h2,
.story h2,
.why h2,
.cta h2{
  font-size:30px !important;
  line-height:1.2 !important;
}

/* SERVICE IMAGE */

.service-image{
  height:180px !important;
}

/* CONTACT PAGE */

input,
textarea{
  font-size:16px;
}

/* WHATSAPP */

.whatsapp{
  width:54px !important;
  height:54px !important;
  bottom:14px !important;
  right:14px !important;
}

/* CURSOR */

.cursor{
  display:none !important;
}

}