@import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css');


* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;


}


img{
   max-width:100%;
   height:auto;
   display:block;
}


html {
 scroll-behavior: smooth;
}




html,
body{
   background: #000;
   width:100%;


   overflow-x:clip;


}




.section-container{


   width:min(1400px,92%);


   margin-inline:auto;


}
/* responsive spacing variable */
:root{


   --space-xs:clamp(8px,.8vw,12px);


   --space-sm:clamp(16px,1.5vw,22px);


   --space-md:clamp(24px,2vw,36px);


   --space-lg:clamp(40px,4vw,70px);


}


button,
a{


   transition:
       background .25s,
       color .25s,
       border-color .25s,
       transform .2s;


}


.nav-links a:hover,
.barber-book-btn:hover,
.banner-btn:hover,
.footer-links a:hover{
   transform:translateY(-2px);
}




:focus-visible{


   outline:2px solid #DEA037;


   outline-offset:4px;


}


section{


   width:100%;


   position:relative;


}


/* ════════════════════════════════
  SKIP LINK (ADA)
════════════════════════════════ */
.skip-link {
 position: absolute;
 top: -100px;
 left: 0;
 background: #DEA037;
 color: #000;
 padding: 10px 20px;
 font-family: 'Bebas Neue', sans-serif;
 font-size: 18px;
 z-index: 9999;
 transition: top 0.2s;
}
.skip-link:focus {
 top: 0;
}


/* ════════════════════════════════
  NAVBAR
════════════════════════════════ */


.navbar{
   position:fixed;
   top:0;
   left:0;
   width:100%;
   height:clamp(90px,8vw,124px);


   display:flex;
   align-items:center;
   justify-content:space-between;


   padding-inline:clamp(20px,4vw,40px);


   background:#000;
   border-bottom:2px solid #DEA037;


   z-index:999;
}


.logo-img{
   width:clamp(190px,20vw,317px);
   height:auto;
   margin:0;
}


.nav-links{


   display:flex;
   align-items:center;


   gap:clamp(16px,2vw,30px);


   margin-left:auto;


   list-style:none;
}


.nav-links a{


   font-family:'Bebas Neue',sans-serif;


   font-size:clamp(18px,1.35vw,25px);


   letter-spacing:.11em;


   color:#F0EDE2;


   text-decoration:none;


   white-space:nowrap;


   transition:.25s;
}


.nav-links a:hover{


   color:#DEA037;


}


.btn-booknow{


   width:clamp(120px,9vw,146px);


   height:clamp(38px,3vw,43px);


   display:flex;


   align-items:center;


   justify-content:center;


   border:1px solid #DEA037;


   color:#DEA037!important;


}


.nav-links a.active{


   color:#DEA037;


   position:relative;


}


.nav-links a.active::after{


   content:"";


   position:absolute;


   left:50%;


   bottom:-8px;


   transform:translateX(-50%);


   width:65px;


   height:2px;


   background:#DEA037;


}


/* hamburger — hidden on desktop */
.hamburger {
 display: none;
 flex-direction: column;
 gap: 5px;
 background: none;
 border: none;
 cursor: pointer;
 margin-left: auto;
 padding: 8px;
}
.hamburger span {
 display: block;
 width: 26px;
 height: 3px;
 background: #DEA037;
 border-radius: 2px;
}
.hamburger:focus-visible {
 outline: 2px solid #DEA037;
 outline-offset: 4px;
}


/* mobile nav drawer — hidden by default */
.mobile-nav {
 display: none;
 position: fixed;
 top: 50px;
 left: 0;
 width: 100%;
 background: #000;
 border-bottom: 2px solid #DEA037;
 z-index: 998;
 flex-direction: column;
 padding: 20px 24px;
 gap: 0;
}
.mobile-nav.open {
 display: flex;
}
.mobile-nav a {
 font-family: 'Bebas Neue', sans-serif;
 font-size: 28px;
 color: #F0EDE2;
 text-decoration: none;
 letter-spacing: 0.11em;
 padding: 14px 0;
 border-bottom: 1px solid #222;
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav a.gold { color: #D3A306; }
.mobile-nav a:focus-visible {
 outline: 2px solid #DEA037;
 outline-offset: 4px;
}


/* ════════════════════════════════
  HERO
════════════════════════════════ */
/* ════════════════════════════════
  HERO
════════════════════════════════ */


.hero {
   width:100%;
   min-height:calc(100vh - clamp(90px,8vw,124px));


   margin-top:clamp(90px,8vw,124px);


   background:url("assets/images/hero.png") center/cover no-repeat;


   position:relative;
   overflow:hidden;
}




.hero-container {
    position: absolute;
    left: clamp(30px, 5vw, 90px);
    top: 45%;
    transform: translateY(-50%);
}






.black{
   position:absolute;


   right:0;
   top:0;


 width:clamp(600px,50vw,850px);
   height:100%;


   object-fit:cover;
}


.hero-logo {
   position:absolute;
   right: clamp(20px, 5vw, 90px);
   top:50%;
   transform:translateY(-50%);
   width:clamp(400px, 38vw, 650px);
}




.hero-title-black {
 font-family: 'Bebas Neue', sans-serif;
 font-size: clamp(52px, 6vw, 96px);
 line-height: .85;
 letter-spacing: .11em;
 color: #000;
}


.hero-title-gold {
 font-family: 'Bebas Neue', sans-serif;
 font-size: clamp(48px, 5.5vw, 91px);
 letter-spacing: .11em;
 color: #AB7921;
 position: relative;
}


.hero-title-gold::after {
 content: '';
 position: absolute;
 bottom: -8px;
 left: 0;
 width: 100px;
 height: 6px;
 background: #DEA037;
}


.book-appointent2 {
text-decoration: none;
 color: inherit;
 left:clamp(30px,5vw,90px);
 bottom:15%;
 align-items: center;
 gap: 12px;
 padding: 16px 22px;
 background: #000;
 border: 3px solid #DEA037;
 border-radius: 7px;
 cursor: pointer;

    position: static;
    display: inline-flex;
    margin-top: 35px;
}

.book-appointent2:hover {
 background: #1a1a1a;
}


.book-appointment-online {
 font-family: 'Big Shoulders Display', sans-serif;
 font-size: clamp(20px, 2vw, 30px);
 color: #DEA037;
}


.book-appointment-child {
 width: 28px;
}


.hero-phone {
 position: absolute;
 left:clamp(20px,4vw,70px);
 top:77%;
 display: flex;
 align-items: center;
 gap: 12px;
}


.phone-icon {
 width: clamp(50px, 6vw, 90px);
 height: auto;
}


.phone-text {
 display: flex;
 flex-direction: column;
}


.phone-number {
 font-family: 'Big Shoulders Display', sans-serif;
 font-size: clamp(16px, 1.5vw, 23px);
 letter-spacing: .15em;
 color: #000;
 text-decoration: none;
}


.phone-sub {
 font-family: 'Big Shoulders Display', sans-serif;
 font-size: clamp(10px, .9vw, 12px);
 color: #000;
}


/* ════════════════════════════════
  SECOND PAGE — BARBERS
════════════════════════════════ */
.second-page {
 width: 100%;
 min-height: 80vh;
 background: linear-gradient(160deg, #666666 0%, #000000 20%);
 display: flex;
 flex-direction: column;
 align-items: center;
 padding-top: 40px;
 padding-bottom: 0;
}


.barbers-header{
   display:flex;
   align-items:center;


   gap:clamp(15px,2vw,25px);


   width:min(1100px,90%);


   margin:0 auto clamp(25px,3vw,40px);
}


.header-line {
 flex: 1;
 height: 2px;
 background: #DEA037;
}


.barbers-title{
   font-family:'Big Shoulders Display',sans-serif;


   font-size:clamp(30px,3vw,45px);


   color:#DEA037;


   letter-spacing:.11em;


   white-space:nowrap;
}


.barbers-grid{


   display:flex;


   justify-content:center;


   flex-wrap:wrap;


   gap:clamp(20px,3vw,40px);


   width:min(1400px,92%);


   margin:auto;


}


.barber-card{


   display:flex;


   flex-direction:column;


   align-items:center;


   background:#000;


   border:2px solid #DEA037;


   border-radius:8px;


   padding:clamp(20px,2vw,30px);


   gap:20px;


   flex:1 1 320px;


   max-width:390px;


   min-width:280px;


}


.barber-img{


   width:clamp(120px,10vw,146px);


   height:clamp(120px,10vw,146px);


   border-radius:50%;


   object-fit:cover;
  
   margin-top: 3px;
}


.barber-name {
 font-family: 'Big Shoulders Display', sans-serif;
 font-size:clamp(26px,2vw,32px);
 color: #F0EDE2;
 letter-spacing: 0.11em;
}


.barber-book-btn {
 border: 2px solid #DEA037;
 color: #DEA037;
 background: #000000;
 font-family: 'Big Shoulders Display', sans-serif;
 font-size:clamp(22px,1.8vw,28px);
 letter-spacing: 0.11em;
 padding:clamp(10px,1vw,14px)
        clamp(22px,2vw,30px);
 border-radius: 6px;
 text-decoration: none;
 cursor: pointer;
 display: inline-block;
 text-align: center;
}


.barber-book-btn:hover { background: #1a1a1a; }
.barber-book-btn:focus-visible {
 outline: 2px solid #fff;
 outline-offset: 3px;
}


.barber-img-wrapper{


   position:relative;


   width:clamp(124px,10vw,150px);


   height:clamp(124px,10vw,150px);


}


.outline-img{


   position:absolute;


   top:50%;


   left:48.5%;


   transform:translate(-50%,-50%);


   width:100%;


   height:100%;


   z-index: 1;
}


/* ════════════════════════════════
  HOW IT WORKS
════════════════════════════════ */
.booking-instructions{
   width:100%;


   background:url("assets/images/hero.png") center/cover no-repeat;


   padding:
       clamp(60px,6vw,80px)
       clamp(20px,4vw,40px)
       clamp(20px,2vw,30px);
}


.how-it-works-header{


   display:flex;


   align-items:center;


   gap:clamp(15px,2vw,25px);


   width:min(700px,90%);


   margin:0 auto 20px;


}


.how-it-works-title {
 font-family: 'Bebas Neue', sans-serif;
 font-weight: 200;
font-size:clamp(30px,3vw,45px);  color: #AB7921;
 letter-spacing: 0.11em;
 white-space: nowrap;
}


.booking-easy-title {
 font-family: 'Big Shoulders Display', sans-serif;
 font-size:clamp(34px,4vw,55px);
 color: #000000;
 letter-spacing: 0.11em;
 text-align: center;
}


.steps-grid{
   list-style: none;
   display:flex;
   justify-content:center;
   align-items:flex-start;
   flex-wrap:nowrap;


   gap:clamp(20px,3vw,35px);


}


.step {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
  flex:1 1 0;
   max-width:260px;




   padding:0 clamp(10px,2vw,20px)
            clamp(20px,2vw,30px);


 position: relative;
}


.step-number {
 position: absolute;
 top: 15px;
 left: 68%;
 transform: translateX(-50%) translateX(30px);
 width: 36px;
 height: 36px;
 background: #DEA037;
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: 'Big Shoulders Display', sans-serif;
 font-size: 20px;
 font-weight: 700;
 color: #000000;
 z-index: 2;
}


.step-icon,
.step-icon1,
.step-icon2 {
    width:150px;
   height:150px;
   object-fit:contain;
   margin-bottom:20px;
}




.step-title {
 font-family: 'Big Shoulders Display', sans-serif;
 font-size:clamp(22px,2vw,28px);
 color: #000000;
 letter-spacing: 0.05em;
 line-height: 1.2;
 margin-bottom: 10px;
}


.step-desc {
 font-family: 'Big Shoulders Display', sans-serif;
 font-size:clamp(17px,1.6vw,22px); 
 font-weight: 400;
 color: #333333;
 letter-spacing: 0.03em;
}


.step-divider {
 width: 3px;
 background: #DEA037;
 align-self: stretch;
 margin-top: 20px;
 margin-bottom: 40px;
 opacity: 0.4;
}


/* BOOK ONLINE BANNER */
.book-online-banner {
 display: flex;
 align-items: center;
 gap: 15px;
 background: #000000;
 border-radius: 10px;
 width:min(900px,90%);
  padding:
       clamp(16px,2vw,20px)
       clamp(20px,3vw,40px);


 margin: 10px auto 60px auto;
}


.banner-phone-icon {
 width: 60px;
 height: auto;
 flex-shrink: 0;
}


.banner-text {
 display: flex;
 flex-direction: column;
 gap: 4px;
 flex: 1;
 margin-left: -20px;
}


.banner-title {
 font-family: 'Big Shoulders Display', sans-serif;
font-size:clamp(22px,2vw,26px); 
font-weight: 700;
 color: #DEA037;
 letter-spacing: 0.08em;
}


.banner-sub {
 font-family: 'Big Shoulders Display', sans-serif;
font-size:clamp(14px,1.2vw,16px); 
color: #F0EDE2;
 letter-spacing: 0.04em;
}


.banner-btn {
 border: 2px solid #DEA037;
 color: #DEA037;
 background: transparent;
 font-family: 'Big Shoulders Display', sans-serif;
font-size:clamp(16px,1.5vw,20px); 
font-weight: 700;
 letter-spacing: 0.1em;
 padding:
   clamp(12px,1vw,14px)
   clamp(18px,2vw,28px);
 border-radius: 6px;
 text-decoration: none;
 white-space: nowrap;
 flex-shrink: 0;
}


.banner-btn:hover { background: #1a1a1a; }
.banner-btn:focus-visible {
 outline: 2px solid #fff;
 outline-offset: 3px;
}








/* FOOTER */
.footer {
 padding: 20px 40px;
}


.footer-content {
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 gap: 8px;
}


.footer-phone,
.footer-address {
 font-family: 'Big Shoulders Display', sans-serif;
 color: #F0EDE2;
 font-size: 16px;
 letter-spacing: 0.05em;
}


.footer-links {
 display: flex;
 gap: 20px;
}


.footer-links a {
 font-family: 'Big Shoulders Display', sans-serif;
 color: #DEA037;
 text-decoration: none;
 font-size: 16px;
 letter-spacing: 0.05em;
}


.footer-links a:hover { text-decoration: underline; }
.footer-links a:focus-visible {
 outline: 2px solid #DEA037;
 outline-offset: 3px;
}


.rights{
 display: flex;
 flex-direction: column;
 align-items: center;
 text-align: center;
 gap: 8px;
 font-family: 'Big Shoulders Display', sans-serif;
 color: #F0EDE2;
 font-size: 12px;
 letter-spacing: 0.05em;
}


/* DROPDOWN */
.dropdown { position: relative; }


.dropdown-menu {
 display: none;
 position: absolute;
 border-radius: 2px;
 top: 100%;
 right: 0;
 background: #3f3e3e;
 min-width: 147px;
 z-index: 9999;
 flex-direction: column;
}


.dropdown-menu a {
 font-family: 'Bebas Neue', sans-serif;
 font-size: 15px;
 border: 1px solid #000000;
 color: #F0EDE2;
 padding: 14px 20px;
 text-decoration: none;
 display: block;
 letter-spacing: 0.11em;
}


.dropdown-menu a:hover {
 background: #1a1a1a;
 color: #DEA037;
}


/* CONTACT INFORMATION */
.contact-modal {
 display: none;
 position: fixed;
 inset: 0;
 background: rgba(0,0,0,0.75);
 z-index: 9999;
 justify-content: center;
 align-items: center;
}


.contact-modal.show {
 display: flex;
}


.contact-box {
 background: #111;
 border: 2px solid #DEA037;
 padding: 30px;
 width: 90%;
 max-width: 400px;
 text-align: center;
 border-radius: 10px;
}


.contact-box h2 {
 color: #DEA037;
 font-family: 'Bebas Neue', sans-serif;
 letter-spacing: 0.1em;
 margin-bottom: 20px;
}


.contact-option {
 display: block;
 margin: 15px 0;
 padding: 12px;
 border: 1px solid #DEA037;
 color: #F0EDE2;
 text-decoration: none;
 font-family: 'Big Shoulders Display', sans-serif;
}


.contact-option:hover {
 background: #DEA037;
 color: #000;
}


.close-btn {
 margin-top: 15px;
 background: none;
 border: none;
 color: #aaa;
 cursor: pointer;
}








.dropdown:hover .dropdown-menu { display: flex; }










/* DESKTOP ONLY */
@media (min-width:1025px)
{
 .hero-container {
     left: clamp(40px,5vw,90px);
     top: 45%;
     transform: translateY(-50%);
 }


.book-appointent2 {
     margin-top: 55px;
     margin-left: 60px;
}

 




 .hero-logo {
     right: 0;
     width: clamp(550px,50vw,750px);
     top: 45%;
 }




}




/* ════════════════════════════════
  LARGE DESKTOP 1440px+
════════════════════════════════ */


@media (min-width:1440px) {


 /* NAVBAR */
 .navbar {
   height: 130px;
   padding-inline: 50px;
 }


 .logo-img {
   width: 330px;
 }


 .nav-links {
   gap: 35px;
 }


 .nav-links a {
   font-size: 28px;
 }


 .btn-booknow {
   width: 160px;
   height: 48px;
 }




 /* HERO TEXT */
 .hero-container {
   left: clamp(30px, 3vw, 70px);
 }


 .hero-title-black {
   font-size: 90px;
 }


 .hero-title-gold {
   font-size: 85px;
 }




 /* HERO LOGO */
 .hero-logo {
   width: 800px;
   right: 60px;
 }




 /* BLACK ANGLE */
 .black {
   width: 950px;
 }




 /* BOOK BUTTON */
 


 .book-appointment-online {
   font-size: 36px;
 }


 .book-appointment-child {
   width: 35px;
 }


}




/* EXTRA LARGE DESKTOP */
@media (min-width:1900px) {


 .hero-title-black {
     font-size:135px;
 }


 .hero-title-gold {
     font-size:130px;
 }


 .hero-container {
     left: 5%;
 }


 .hero-logo {
     width:950px;
     right:-20px;
 }

 .book-appointent2 {
     margin-top: 70px;
     margin-left: 100px;
 }


 .book-appointment-online {
     font-size:42px;
 }


 .book-appointment-child {
     width:42px;
 }





}








/* ════════════════════════════════
  TABLET  768px – 1024px
════════════════════════════════ */
@media (max-width: 1024px) and (min-width: 768px) {




 /* NAV */
 .navbar {
 height: clamp(80px, 9vw, 90px);
 padding-inline: clamp(20px, 3vw, 24px);
}
 .logo-img {
 width: clamp(180px, 24vw, 240px);
}
 .nav-links{


   gap:20px;


}


.nav-links a{


   font-size:20px;


}
 .btn-booknow { width: 120px; height: 38px; }


 .hero {
 margin-top: 50px;
 height: 900px;
 min-height: 900px;
 background-position: center top;
 position: relative;
 width: 100%;
}






/* black angled piece */
.black {
    position:absolute;


   top:-8%;


   left:-80%;


   width:220%;


   height:55%;


   max-width:none;


   object-fit:cover;


   transform:rotate(7deg);


}


/* logo / clippers */
.hero-logo {
width: clamp(550px, 15vw, 750px);
left: 48%;
top: 2%;
 transform: translateX(-55%) translateY(-18.5%);
}


/* headline container */
.hero-container {
   left:18%;
   top:67%;
   transform:translateY(-50%);
}




.hero-title-black {
 font-size: 75px;
 transform: translateY(90%);
}


.hero-title-gold {
 font-size: 85px;
 transform: translateY(35%);
}


.book-appointent2 {
        margin-top: 70px;
        margin-left: 38px;
       

    }




.book-appointment-online {
 font-size: 34px;
 letter-spacing: 0.09em;
 margin-left: 15px;
}


.book-appointment-child {
 width: 24px;
 margin-left: 5px;
 margin-top: 4px;
}


 /* BARBERS */
.barbers-grid {
 gap: clamp(20px,3vw,30px);
}
.barber-card { padding: 20px 14px; }
 .barbers-title { font-size: 36px; }


 /* STEPS */
.step-icon,
.step-icon1,
.step-icon2{
   width: 110px;
   height: 110px;
}


.step{
   flex: 1;
   max-width: 200px;
   padding: 0 10px 20px;
}
.step-title{
   font-size: 20px;
} 
.steps-grid{
   flex-direction: row;
   flex-wrap: nowrap;
   justify-content: center;
   align-items: flex-start;
   gap: 18px;
}
.step-desc{
   font-size: 16px;
}


.step-number{
   width: 32px;
   height: 32px;
   font-size: 18px;
}


.step-divider{
   display:block;
   width:3px;
   margin:20px 0 30px;
}
 .booking-easy-title { font-size: 44px; }




 .banner-title { font-size: 22px; }
 .banner-sub { font-size: 14px; }
 .banner-btn { font-size: 17px; padding: 12px 20px; }
 .how-it-works-header { width: 50%; }


 .footer-links{


   gap:16px;


   flex-wrap:nowrap;


}


}




/* ════════════════════════════════
  MOBILE  ≤ 768px
════════════════════════════════ */
@media (max-width: 430px) {



 /* NAV */
 .navbar {
   height:60px;
   padding-inline:16px;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
   width: 100%;
 }
 .logo-img {
   width:170px;  
   min-width: unset;
   margin: 0;
   margin-top: 8px;
 }


 .nav-links {
   display: none;
   flex-direction: row;
   flex-wrap: nowrap;
   align-items: center;
   gap: 6px;
   margin-left: auto;
   justify-content: flex-start;
   max-width: calc(100% - 100px);
 }


 .hamburger {
 display: flex;
}


 .nav-links a {
   font-size: 7px;
   padding: 2px 3px;
   letter-spacing: 0.05em;
   white-space: nowrap;
 }
 .btn-booknow {
   width: auto;
   height: auto;
   padding: 3px 8px;
   font-size: 10px;
   min-width: auto;
 }




 /* HERO — matches your Figma mobile */
 /* HERO */




.hero {
 margin-top: 50px;
min-height:100svh; 
height: auto;
 background-position: center top;
 position: relative;
 width: 100%;
}


.book-appointent2 {
        margin-top: 30px;
        padding: 8px 14px;
        gap: 8px;
        justify-content: center;

    }






/* black angled piece */
.black {
    position:absolute;


   top:-8%;


   left:-85%;


   width:220%;


   height:55%;


   max-width:none;


   object-fit:cover;


   transform:rotate(5deg);


}


/* logo / clippers */
.hero-logo {
 width: clamp(430px, 120vw, 650px); 
 right: auto;
 left: 42%;
 transform: translateX(-50%);
 top: -5%;
 height: auto;
}


/* headline container */
.hero-container {
 justify-content: center;


   top:68%;
}


.hero-title-black {
 font-size: 44px;
 line-height: 90%;
 color: #000;
 margin-bottom: 10px;
}


.hero-title-gold {
 font-size: 48px;
 color: #AB7921;
}





.book-appointment-online {
 font-size: 20px;
 font-family: 'Bebas Neue', sans-serif;
 letter-spacing: 0.11em;
}


.book-appointment-child {
 width: 8%;
}


/* phone section */
.hero-phone {
 left: 52%;
 transform: translateX(-70%) translateY(23%);
 bottom: 4%;
 white-space: nowrap;
}


.phone-icon {
   width:48px;
 right: 0;
}


.phone-number {
 font-size: 18px;
}






 /* Hide online banner on mobile */
 .book-online-banner {
   display: none;
 }


 /* BARBERS */
 .second-page { padding-top: 30px; padding-bottom: 20px; width: 100%; }
 .barbers-grid { flex-direction: column; align-items: center; gap: 50px; }
 .barber-card { width: 85%; }
 .barbers-header { width: 90%; }
 .barbers-title { font-size: 26px; }


 /* STEPS */
 .booking-instructions { padding: 100px 50px 50px 30px; }
 .steps-grid { flex-direction: column; align-items: center; }
 .step{
   display:flex;
   flex-direction:column;
   align-items:center;
   justify-content:flex-start;
   text-align:center;
}
 .step-divider { width: 81%; height: 3px; margin: 0 auto; }
 .step-icon,
.step-icon1,
.step-icon2{
   width:150px;
   height:150px;
   object-fit:contain;
   display:block;
   margin:0 auto 20px;
   position:relative;
   top:20px;
}
 .step-title { font-size: 20px; max-width:280px; margin-left: 15px; margin-top: 5px; padding-top: 3px;}
 .step-desc { font-size: 16px; width: 100%; margin-left: 15px; }
 .booking-easy-title { font-size: 34px; margin-top: 20px; }
 .how-it-works-header { width: 80%; margin-right: 25px;}












 /* FOOTER */
 .footer-links { margin-bottom: 5px; flex-wrap: wrap; justify-content: center; gap:clamp(10px,3vw,16px); }
 .footer-phone {
   padding-right: 6px;
 }


 .rights{  margin-bottom: 5px; flex-wrap: wrap; justify-content: center; gap:clamp(10px,3vw,16px); }


 }