/* =========================================================
   Cosmetic Laser Centre – main stylesheet
   ========================================================= */
:root{
  --blue:#1aa2e0;
  --blue-dark:#0d84bd;
  --navy:#0e2a47;
  --navy-2:#13375c;
  --text:#555;
  --heading:#222;
  --light:#f5f7f9;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'PT Sans',Arial,sans-serif;color:var(--text);font-size:15px;line-height:1.7;background:#fff}
img{max-width:100%;display:block}
a{color:var(--blue);text-decoration:none}
h1,h2,h3,h4,h5{font-family:'Montserrat',Arial,sans-serif;color:var(--heading);line-height:1.3}
.container{max-width:1170px;margin:0 auto;padding:0 15px}

/* ---------- Header ---------- */
.middle-header{padding:20px 0;background:#fff}
.middle-header .container{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.logo img{max-height:85px;width:auto}
.header-info{display:flex;gap:40px;flex-wrap:wrap}
.header-info h3{font-size:14px;text-transform:uppercase;color:var(--heading);margin-bottom:4px}
.header-info h3 i{color:var(--blue);margin-right:6px}
.header-info p{font-size:14px;line-height:1.5}

/* ---------- Nav ---------- */
.menu-block{background:var(--blue);position:sticky;top:0;z-index:100;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.menu-block .container{display:flex;align-items:center;justify-content:space-between}
.nav{list-style:none;display:flex}
.nav li a{display:block;padding:18px 22px;color:#fff;font-family:'Montserrat',sans-serif;font-size:13px;text-transform:uppercase;font-weight:700;transition:background .2s}
.nav li a:hover,.nav li.active a{background:var(--blue-dark)}
.nav-toggle{display:none;background:none;border:1px solid rgba(255,255,255,.6);color:#fff;font-size:20px;padding:6px 12px;margin:10px 0;cursor:pointer;border-radius:3px}


/* ---------- Slider ---------- */
.hero{position:relative;overflow:hidden;background:#000}
.slides{display:flex;transition:transform .7s ease}
.slide{min-width:100%;position:relative}
.slide img{width:100%;height:auto;max-height:620px;object-fit:cover}
.caption{position:absolute;top:50%;left:8%;transform:translateY(-50%);max-width:480px;color:#fff}
.caption h3{color:#fff;font-size:40px;font-family:'Raleway',sans-serif;font-weight:700;margin-bottom:12px;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.caption p{font-size:17px;margin-bottom:22px;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.btn{display:inline-block;padding:12px 28px;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;border-radius:3px;transition:all .2s}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-dark)}
.btn-border{border:2px solid #fff;color:#fff;padding:9px 22px}
.btn-border:hover{background:#fff;color:var(--navy)}
.btn i{margin-left:8px}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.35);color:#fff;border:0;width:46px;height:46px;font-size:22px;cursor:pointer;z-index:5}
.slider-arrow:hover{background:var(--blue)}
.slider-arrow.prev{left:15px}
.slider-arrow.next{right:15px}

/* ---------- Message board ---------- */
.message-board{background:var(--navy);padding:40px 0;color:#d6e2ee}
.message-board .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.message-board h5{color:#fff;font-size:17px;text-transform:uppercase;margin-bottom:14px;padding-bottom:10px;border-bottom:2px solid var(--blue);display:inline-block}
.message-board p{margin-bottom:12px;font-size:14px}
.message-board h4{color:#fff;font-size:15px;margin-bottom:8px}
.hours{list-style:none;font-size:14px}
.hours li{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed rgba(255,255,255,.2)}
.hours li span{color:#fff;font-weight:700}
.message-board .wa{color:#fff;font-weight:700}

/* ---------- What we do ---------- */
.what-we-do{display:grid;grid-template-columns:1fr 2fr}
.what-we-do-left img{width:100%;height:100%;object-fit:cover}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.service{position:relative;overflow:hidden;aspect-ratio:4/3}
.service img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.service:hover img{transform:scale(1.08)}
.service-content{position:absolute;inset:0;background:linear-gradient(to top,rgba(14,42,71,.92) 0%,rgba(14,42,71,.35) 60%,rgba(14,42,71,.05) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:18px;color:#e4edf5}
.service-content i{color:var(--blue);font-size:20px;margin-bottom:6px}
.service-content h5{color:#fff;font-size:14px;text-transform:uppercase;margin-bottom:4px}
.service-content p{font-size:13px;line-height:1.5}

/* ---------- Call out ---------- */
.call-out{background:var(--blue);padding:30px 0;color:#fff}
.call-out .container{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.call-out h3{color:#fff;font-size:24px;margin-bottom:6px}
.call-out p{max-width:800px}

/* ---------- Testimonials ---------- */
.testimonials{padding:70px 0 60px;text-align:center;background:var(--light)}
.section-title{font-size:26px;text-transform:uppercase;margin-bottom:45px;position:relative;padding-bottom:16px}
.section-title:after{content:"";position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:60px;height:3px;background:var(--blue)}
.t-slider{max-width:800px;margin:0 auto;overflow:hidden}
.t-track{display:flex;transition:transform .6s ease}
.t-item{min-width:100%;padding:0 20px}
.t-item>p{font-size:17px;font-style:italic;color:#666;margin-bottom:25px}
.t-item .quote{color:var(--blue);font-size:30px}
.t-item h4{font-size:17px;margin-top:6px}
.t-item small{color:var(--blue);text-transform:uppercase;font-weight:700;font-size:12px;letter-spacing:1px}
.dots{display:flex;justify-content:center;gap:8px;margin-top:28px}
.dots button{width:11px;height:11px;border-radius:50%;border:0;background:#c5ced6;cursor:pointer}
.dots button.active{background:var(--blue)}

/* ---------- Footer ---------- */
.footer{background:var(--navy);color:#b9c7d5;font-size:14px}
.contact-details{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--navy-2);margin-bottom:50px}
.detail-box{padding:30px 25px;text-align:center;border-right:1px solid rgba(255,255,255,.08)}
.detail-box:last-child{border-right:0}
.detail-box i{font-size:30px;color:var(--blue);margin-bottom:10px}
.detail-box h4{color:#fff;font-size:15px;text-transform:uppercase;margin-bottom:8px}
.footer-widgets{display:grid;grid-template-columns:1.3fr 1.3fr .8fr .8fr;gap:30px;padding-bottom:40px}
.widget-title{color:#fff;font-size:16px;text-transform:uppercase;margin-bottom:18px;padding-bottom:10px;border-bottom:2px solid var(--blue);display:inline-block}
.footer p{margin-bottom:12px}
.fb-box{display:flex;gap:12px;align-items:center;margin-bottom:15px}
.fb-box .fb-icon{width:50px;height:50px;background:#4080ff;color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px;border-radius:4px;flex-shrink:0}
.fb-box a{color:#fff;font-weight:700}
.rating{color:#fff}
.rating b{font-size:16px;margin-right:4px}
.rating .fa{color:#4080ff}
.fb-review{padding:10px 0;border-top:1px solid rgba(255,255,255,.08)}
.fb-review strong{color:#fff;display:block}
.fb-review .stars{color:#4080ff;font-size:12px}
.fb-review p{margin:4px 0 0;font-size:13px}
.quick-links{list-style:none}
.quick-links li{padding:5px 0}
.quick-links a{color:#b9c7d5}
.quick-links a:before{content:"\f105";font-family:FontAwesome;margin-right:8px;color:var(--blue)}
.quick-links a:hover{color:#fff}
.social{list-style:none;display:flex;gap:10px}
.social a{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);color:#fff;border-radius:50%;font-size:17px;transition:background .2s}
.social a:hover{background:var(--blue)}
.bottom-footer{background:#091d32;text-align:center;padding:18px 15px;font-size:13px}
.bottom-footer a{color:var(--blue)}

/* ---------- WhatsApp float ---------- */
.wa-float{position:fixed;right:20px;bottom:20px;width:54px;height:54px;border-radius:50%;background:#25d366;color:#fff;font-size:30px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.25);z-index:200}

/* ---------- Responsive ---------- */
@media (max-width:991px){
  .message-board .grid{grid-template-columns:repeat(2,1fr)}
  .what-we-do{grid-template-columns:1fr}
  .what-we-do-left{display:none}
  .footer-widgets{grid-template-columns:repeat(2,1fr)}
  .caption h3{font-size:28px}
}
@media (max-width:767px){
  .nav-toggle{display:block}
  .menu-block .container{flex-wrap:wrap}
  .nav{display:none;flex-direction:column;width:100%}
  .nav.open{display:flex}
  .nav li a{padding:12px 10px;border-top:1px solid rgba(255,255,255,.15)}
  .middle-header .container{justify-content:center;text-align:center}
  .header-info{justify-content:center}
  .caption{left:5%;right:5%;max-width:none}
  .caption h3{font-size:20px}
  .caption p{display:none}
  .caption .btn{padding:8px 16px;font-size:11px}
  .slider-arrow{width:34px;height:34px;font-size:16px}
  .message-board .grid,.services-grid,.contact-details,.footer-widgets{grid-template-columns:1fr}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .detail-box{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
}
@media (max-width:480px){.services-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* =================== INNER PAGES (shared) =================== */
/* ---------- Page banner ---------- */
.page-banner{position:relative;background-size:cover;background-position:center;padding:70px 0 80px;text-align:center;color:#fff}
.page-banner:before{content:"";position:absolute;inset:0;background:rgba(14,42,71,.72)}
.page-banner .container{position:relative}
.page-banner h1{color:#fff;font-size:38px;font-family:'Raleway',sans-serif;font-weight:700;margin-bottom:16px}
.page-banner p{max-width:760px;margin:0 auto 22px;font-size:14px;color:#dce7f1}
.breadcrumb{list-style:none;display:inline-flex;gap:8px;background:rgba(255,255,255,.12);padding:8px 18px;border-radius:3px;font-size:13px}
.breadcrumb a{color:#fff}
.breadcrumb li+li:before{content:"/";margin-right:8px;color:var(--blue)}
.breadcrumb .current{color:var(--blue)}
@media (max-width:767px){.page-banner h1{font-size:28px}}

/* ---------- Form status (shared) ---------- */
.form-status{display:none;margin-top:12px;padding:10px 14px;border-radius:2px;font-size:13px}
.form-status.show{display:block}
.form-status.ok{background:#e6f6ec;color:#1e7b3d;border:1px solid #b9e3c7}
.form-status.err{background:#fdecea;color:#b3261e;border:1px solid #f5c2bd}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
button[disabled]{opacity:.65;cursor:wait}


/* =================== ABOUT =================== */
/* ---------- Who we are ---------- */
.who{padding:80px 0 70px;text-align:center}
.who h4{font-family:'PT Sans',sans-serif;font-weight:400;font-size:17px;line-height:1.8;color:#666;max-width:960px;margin:0 auto}

/* ---------- Welcome + features + form ---------- */
.welcome{background:#f5f6f7;padding:70px 0}
.welcome-grid{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:start}
.welcome-intro h3{font-size:24px;text-transform:uppercase;margin-bottom:14px;position:relative;padding-bottom:14px}
.welcome-intro h3:after{content:"";position:absolute;left:0;bottom:0;width:60px;height:3px;background:var(--blue)}
.welcome-intro p{margin-bottom:45px}
.features{display:grid;grid-template-columns:1fr 1fr;gap:40px 30px}
.feature{display:flex;gap:16px}
.feature-icon{flex-shrink:0;width:54px;height:54px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px}
.feature h3{font-size:16px;margin-bottom:6px}
.feature p{font-size:14px}

.appointment-form{background:var(--navy);color:#fff;padding:30px 26px;border-top:4px solid var(--blue);margin-top:-130px;box-shadow:0 10px 30px rgba(0,0,0,.15)}
.appointment-form h3{color:#fff;font-size:18px;margin-bottom:20px}
.appointment-form h3 i{color:var(--blue);margin-right:8px}
.appointment-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.appointment-form input,.appointment-form select,.appointment-form textarea{width:100%;padding:11px 12px;margin-bottom:12px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#fff;font-family:inherit;font-size:14px;border-radius:2px}
.appointment-form select option{color:#222}
.appointment-form ::placeholder{color:#a9bbcc}
.appointment-form input:focus,.appointment-form select:focus,.appointment-form textarea:focus{outline:2px solid var(--blue);outline-offset:-1px}
.appointment-form .check{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:14px;color:#c9d6e3}
.appointment-form .check input{width:auto;margin:0}
.appointment-form .btn-submit{width:100%;border:0;cursor:pointer;background:var(--blue);color:#fff}
.appointment-form .btn-submit:hover{background:var(--blue-dark)}
.appointment-form .form-note{font-size:12px;color:#a9bbcc;margin-top:10px;text-align:center}

@media (max-width:991px){
  .welcome-grid{grid-template-columns:1fr}
  .appointment-form{margin-top:0}
}
@media (max-width:767px){
  .features,.appointment-form .form-row{grid-template-columns:1fr}
  
}

/* =================== SERVICES =================== */
/* ---------- Service tabs ---------- */
.services-section{background:#f8fbff;padding:70px 0}
.tabs-wrap{background:#fff;padding:20px 10px;display:grid;grid-template-columns:300px 1fr;gap:0 30px;align-items:start}
.tab-list{list-style:none;position:sticky;top:70px}
.tab-list button{display:block;width:100%;text-align:left;background:#fff;border:1px solid #ececec;border-top:0;color:#0c0c0c;padding:15px 18px;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.tab-list li:first-child button{border-top:1px solid #ececec}
.tab-list button:hover{color:var(--blue)}
.tab-list button[aria-selected="true"]{background:#1089d1;border-color:#0070b8;color:#fff}
.tab-list button:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.tab-panel{padding:0 10px 10px;animation:fadeIn .35s ease}
.tab-panel[hidden]{display:none}
@keyframes fadeIn{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.tab-panel h2{font-size:24px;padding-bottom:15px;margin:5px 0 18px;border-bottom:1px solid #000}
.tab-panel img{margin-bottom:22px;max-width:100%;height:auto}
.tab-panel p{margin-bottom:14px;line-height:1.75;color:#333}
.tab-panel strong.hl{color:#2198df;display:block;margin-bottom:2px}
.tab-panel .cta{margin-top:10px;font-weight:700;color:var(--heading)}
.tab-panel .cta a{color:var(--blue);text-decoration:underline}
@media (prefers-reduced-motion:reduce){.tab-panel{animation:none}}
@media (max-width:991px){
  .tabs-wrap{grid-template-columns:1fr}
  .tab-list{position:static;display:flex;overflow-x:auto;gap:0;margin-bottom:24px;-webkit-overflow-scrolling:touch}
  .tab-list li{flex:0 0 auto}
  .tab-list button,.tab-list li:first-child button{border:1px solid #ececec;white-space:nowrap;font-size:12px;padding:12px 14px}
}
@media (max-width:767px){.tab-panel h2{font-size:20px}}

/* =================== BEFORE AFTER =================== */
/* ---------- Portfolio ---------- */
.portfolio-section{padding:70px 0}
.filters{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:40px}
.filters button{background:#fff;border:1px solid #d6dde3;color:var(--heading);font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;padding:10px 18px;cursor:pointer;border-radius:3px;transition:all .2s}
.filters button:hover{border-color:var(--blue);color:var(--blue)}
.filters button.active{background:var(--blue);border-color:var(--blue);color:#fff}
.filters button:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.portfolio-item{position:relative;overflow:hidden;aspect-ratio:4/3;background:#eef1f4;cursor:pointer;border:0;padding:0;display:block;width:100%}
.portfolio-item.hide{display:none}
.portfolio-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.portfolio-item:hover img,.portfolio-item:focus-visible img{transform:scale(1.06)}
.portfolio-item:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.portfolio-hover{position:absolute;inset:0;background:rgba(14,42,71,.82);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;opacity:0;transition:opacity .3s}
.portfolio-item:hover .portfolio-hover,.portfolio-item:focus-visible .portfolio-hover{opacity:1}
.portfolio-hover i{font-size:26px;color:var(--blue);margin-bottom:10px}
.ph-title{display:block;font-family:'Montserrat',sans-serif;font-weight:700;color:#fff;font-size:17px;margin-bottom:4px}
.ph-sub{display:block;color:#b9c7d5;font-size:13px;font-weight:400;font-family:'PT Sans',sans-serif}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;background:rgba(5,15,28,.94);z-index:500;display:none;align-items:center;justify-content:center;padding:60px 70px}
.lightbox.open{display:flex}
.lightbox figure{max-width:1100px;width:100%;text-align:center}
.lightbox img{max-width:100%;max-height:78vh;margin:0 auto;object-fit:contain}
.lightbox figcaption{color:#fff;margin-top:14px;font-family:'Montserrat',sans-serif;font-size:15px}
.lb-btn{position:absolute;background:rgba(255,255,255,.1);border:0;color:#fff;width:48px;height:48px;font-size:24px;cursor:pointer;border-radius:50%}
.lb-btn:hover{background:var(--blue)}
.lb-close{top:18px;right:18px}
.lb-prev{left:14px;top:50%;transform:translateY(-50%)}
.lb-next{right:14px;top:50%;transform:translateY(-50%)}

@media (max-width:991px){.portfolio-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){
  
  .portfolio-grid{grid-template-columns:1fr}
  .lightbox{padding:60px 10px}
  .lb-prev,.lb-next{top:auto;bottom:14px;transform:none}
}

/* =================== FAQ =================== */
/* ---------- FAQ ---------- */
.faq-section{padding:70px 0}
.faq-wrap{max-width:960px;margin:0 auto}
.faq-item{border:1px solid #e1e6ea;margin-bottom:12px;border-radius:3px;background:#fff}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 56px 18px 22px;position:relative;font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;color:var(--heading);text-transform:uppercase;background:#f5f7f9;transition:background .2s,color .2s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"\f067";font-family:FontAwesome;position:absolute;right:20px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--blue);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}
.faq-item[open] summary{background:var(--blue);color:#fff}
.faq-item[open] summary:after{content:"\f068";background:#fff;color:var(--blue)}
.faq-item summary:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.faq-body{padding:22px 24px 8px}
.qa{margin-bottom:20px}
.qa .q{display:block;color:#46b1f0;font-weight:700;margin-bottom:4px}
.qa p{margin-bottom:8px}
.qa ul{margin:6px 0 10px 20px}
.qa .a{font-weight:700;color:var(--heading)}
@media (max-width:767px){.faq-item summary{font-size:13px}}

/* =================== CONTACT =================== */
/* ---------- Contact blocks ---------- */
.contact-blocks{padding:70px 0 60px}
.contact-blocks .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.contact-block{text-align:center;padding:34px 24px;border:1px solid #e1e6ea;border-radius:3px;transition:border-color .2s}
.contact-block:hover{border-color:var(--blue)}
.contact-block i{width:66px;height:66px;border-radius:50%;background:var(--blue);color:#fff;font-size:28px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:16px}
.contact-block span{display:block;font-family:'Montserrat',sans-serif;font-weight:700;color:var(--heading);text-transform:uppercase;font-size:15px;margin-bottom:8px}
.contact-block a{color:var(--text)}
.contact-block a:hover{color:var(--blue)}

/* ---------- Map ---------- */
.map-wrap{line-height:0;margin-bottom:60px}
.map-wrap iframe{width:100%;height:450px;border:0;filter:saturate(.9)}

/* ---------- Enquiry form ---------- */
.enquiry{padding-bottom:70px}
.enquiry h3{font-size:24px;text-transform:uppercase;margin-bottom:28px;position:relative;padding-bottom:14px}
.enquiry h3:after{content:"";position:absolute;left:0;bottom:0;width:60px;height:3px;background:var(--blue)}
.enquiry-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 30px}
.enquiry label{display:block;font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;color:var(--heading);margin-bottom:6px}
.enquiry input,.enquiry textarea{width:100%;padding:12px 14px;border:1px solid #d6dde3;border-radius:2px;font-family:inherit;font-size:14px;margin-bottom:18px;background:#fff;color:var(--heading)}
.enquiry textarea{height:213px;resize:vertical}
.enquiry input:focus,.enquiry textarea:focus{outline:2px solid var(--blue);outline-offset:-1px;border-color:var(--blue)}
.enquiry .btn-submit{border:0;cursor:pointer;background:var(--blue);color:#fff;padding:14px 34px}
.enquiry .btn-submit:hover{background:var(--blue-dark)}
.enquiry .form-note{font-size:12px;color:#888;margin-top:10px}

@media (max-width:767px){
  
  .contact-blocks .grid,.enquiry-grid{grid-template-columns:1fr}
  .map-wrap iframe{height:320px}
  .enquiry textarea{height:150px}
}

/* =========================================================
   MESSAGE BOARD
   ========================================================= */

.message-board {
    position: relative;

    /*
     * Pull the V-shaped section upward over the slider image.
     */
    margin-top: -185px;

    /*
     * 180px = V depth
     * Remaining space positions content below the V.
     */
    padding: 245px 0 42px;

    min-height: 520px;

    color: #fff;

    overflow: hidden;

    /*
     * Left = light blue
     * Right = dark blue
     * Split exactly at center.
     */
    background: linear-gradient(
        to right,
        #35a9e0 0%,
        #35a9e0 50%,
        #168fca 50%,
        #168fca 100%
    );

    /*
     * V shape.
     */
    clip-path: polygon(
        0 0,
        50% 150px,
        100% 0,
        100% 100%,
        0 100%
    );
}


/* =========================================================
   V-SHAPED DARK BLUE TOP BORDER
   ========================================================= */

.message-board::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 188px;

    /* LEFT V = DARK BLUE
       RIGHT V = LIGHT BLUE */
    background: linear-gradient(
        to right,
        #168fca 0%,
        #168fca 50%,
        #35a9e0 50%,
        #35a9e0 100%
    );

    clip-path: polygon(
        0 0,
        50% 150px,
        100% 0,
        100% 7px,
        50% 188px,
        0 7px
    );

    z-index: 2;

    pointer-events: none;
}


.message-board::after {
    display: none;
}


/* =========================================================
   CONTENT GRID
   ========================================================= */

.message-board .container.grid {
    position: relative;

    z-index: 5;

    width: calc(100% - 30px);

    max-width: 1150px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding: 0 !important;

    display: grid;

    grid-template-columns:
        1.12fr
        1.08fr
        1.08fr
        1.08fr;

    column-gap: 30px;
}



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

@media (max-width: 991px) {

    .message-board {
        margin-top: -120px;

        padding: 175px 0 45px;

        min-height: auto;

        clip-path: polygon(
            0 0,
            50% 110px,
            100% 0,
            100% 100%,
            0 100%
        );
    }


    .message-board::before {
        height: 118px;

        clip-path: polygon(
            0 0,
            50% 110px,
            100% 0,
            100% 7px,
            50% 118px,
            0 7px
        );
    }


    .message-board .container.grid {
        width: 88%;

        max-width: 760px !important;

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

        column-gap: 45px;

        row-gap: 35px;
    }
}


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

@media (max-width: 767px) {

    .message-board {
        margin-top: -65px;

        padding: 110px 0 40px;

        min-height: auto;

        clip-path: polygon(
            0 0,
            50% 60px,
            100% 0,
            100% 100%,
            0 100%
        );
    }


    .message-board::before {
        height: 67px;

        clip-path: polygon(
            0 0,
            50% 60px,
            100% 0,
            100% 6px,
            50% 67px,
            0 6px
        );
    }


    .message-board .container.grid {
        width: 85%;

        max-width: none !important;

        grid-template-columns: 1fr;

        row-gap: 30px;

        column-gap: 0;
    }


    .message-board h5 {
        font-size: 12px;
    }


    .message-board p {
        font-size: 11px;

        line-height: 1.55;
    }


    .hours {
        font-size: 10px;
    }
}


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

@media (max-width: 480px) {

    .message-board {
        margin-top: -50px;

        padding-top: 90px;

        clip-path: polygon(
            0 0,
            50% 45px,
            100% 0,
            100% 100%,
            0 100%
        );
    }


    .message-board::before {
        height: 52px;

        clip-path: polygon(
            0 0,
            50% 45px,
            100% 0,
            100% 6px,
            50% 52px,
            0 6px
        );
    }


    .message-board .container.grid {
        width: 84%;
    }
}


/* =========================================================
   WHAT WE DO
   ========================================================= */

.what-we-do {
    display: grid;

    grid-template-columns: 1fr 2fr;

    width: 100%;

    background: #f7f8f9;
}


/* =========================================================
   LARGE LEFT IMAGE
   ========================================================= */

.what-we-do-left {
    position: relative;

    overflow: hidden;
}


.what-we-do-left img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;
}


/* =========================================================
   RIGHT SERVICES GRID
   ========================================================= */

.services-grid {
    display: grid;

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

    grid-template-rows: repeat(3, 160px);

    background: #f7f8f9;
}


/* =========================================================
   INDIVIDUAL SERVICE
   ========================================================= */

.service {
    position: relative;

    overflow: hidden;

    /* Remove your old aspect ratio */
    aspect-ratio: auto;

    min-width: 0;

    background: #f7f8f9;

    border-right: 1px solid #e7eaed;
    border-bottom: 1px solid #e7eaed;

    cursor: pointer;
}


/* Remove right border from every third card */

.service:nth-child(3n) {
    border-right: 0;
}


/* =========================================================
   SERVICE BACKGROUND IMAGE
   ========================================================= */

.service > img {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    /*
     * Images are hidden normally.
     */
    opacity: 0;

    transform: scale(1);

    transition:
        opacity .35s ease,
        transform .5s ease;

    z-index: 1;
}


/* =========================================================
   SERVICE CONTENT
   ========================================================= */

.service-content {
    position: absolute;

    inset: 0;

    z-index: 3;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 18px 14px;

    /*
     * IMPORTANT:
     * Remove your previous dark gradient.
     */
    background: transparent;

    color: #999;

    transition:
        background .35s ease,
        color .35s ease;
}


/* =========================================================
   CHECK ICON
   ========================================================= */

.service-content i {
    display: block;

    color: #42ade8;

    font-size: 39px;

    line-height: 1;

    margin: 0 0 13px;

    transition: color .35s ease;
}


/* =========================================================
   SERVICE HEADING
   ========================================================= */

.service-content h5 {
    color: #292929;

    font-family: 'Montserrat', sans-serif;

    font-size: 17px;

    line-height: 1.25;

    font-weight: 500;

    text-transform: uppercase;

    margin: 0 0 9px;

    transition: color .35s ease;
}


/* =========================================================
   SERVICE DESCRIPTION
   ========================================================= */

.service-content p {
    color: #999;

    font-family: 'Montserrat', sans-serif;

    font-size: 13px;

    line-height: 1.45;

    font-weight: 400;

    margin: 0;

    max-width: 280px;

    transition: color .35s ease;
}


/* =========================================================
   HOVER EFFECT
   ========================================================= */

/* Show background image */

.service:hover > img {
    opacity: 1;

    transform: scale(1.05);
}


/*
 * Blue overlay.
 * The image remains visible underneath.
 */

.service:hover .service-content {
    background: rgba(0, 137, 202, 0.78);

    color: #fff;
}


/* Icon becomes white */

.service:hover .service-content i {
    color: #fff;
}


/* Heading becomes white */

.service:hover .service-content h5 {
    color: #fff;

    font-weight: 600;
}


/* Description becomes white */

.service:hover .service-content p {
    color: #fff;
}



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

@media (max-width: 991px) {

    .what-we-do {
        grid-template-columns: 1fr;
    }


    .what-we-do-left {
        height: 450px;
    }


    .what-we-do-left img {
        width: 100%;
        height: 100%;

        object-fit: cover;

        object-position: center;
    }


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

        grid-template-rows: repeat(3, 170px);
    }


    .service-content h5 {
        font-size: 15px;
    }


    .service-content p {
        font-size: 12px;
    }
}


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

@media (max-width: 767px) {

    .what-we-do-left {
        height: 380px;
    }


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

        grid-template-rows: none;
    }


    .service {
        min-height: 180px;

        border-right: 1px solid #e7eaed;
    }


    /* Reset desktop third-card border rule */

    .service:nth-child(3n) {
        border-right: 1px solid #e7eaed;
    }


    /* Remove right border from every second card */

    .service:nth-child(2n) {
        border-right: 0;
    }


    .service-content {
        padding: 18px 12px;
    }


    .service-content i {
        font-size: 34px;

        margin-bottom: 11px;
    }


    .service-content h5 {
        font-size: 14px;
    }


    .service-content p {
        font-size: 11px;

        line-height: 1.5;
    }
}


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

@media (max-width: 480px) {

    .what-we-do-left {
        height: 320px;
    }


    .services-grid {
        grid-template-columns: 1fr;
    }


    .service {
        min-height: 175px;

        border-right: 0;
    }


    .service:nth-child(3n),
    .service:nth-child(2n) {
        border-right: 0;
    }


    .service-content i {
        font-size: 36px;
    }


    .service-content h5 {
        font-size: 15px;
    }


    .service-content p {
        font-size: 12px;

        max-width: 300px;
    }
}
/* =========================================================
   PAGE BANNER
   ========================================================= */

.page-banner {
    position: relative;

    /*
     * Extra bottom space is needed because
     * the banner finishes in a large V shape.
     */
    padding: 40px 0 105px;

    min-height: 400px;

    text-align: center;

    color: #fff;

    background-size: cover;

    background-position: center;

    /*
     * Main downward V shape.
     */
    clip-path: polygon(
        0 0,
        100% 0,
        100% calc(100% - 190px),
        50% 100%,
        0 calc(100% - 190px)
    );

    overflow: hidden;
}


/* =========================================================
   DARK IMAGE OVERLAY
   ========================================================= */

.page-banner::before {
    content: "";

    position: absolute;

    inset: 0;

    /*
     * Brown/gray dark overlay like reference image.
     */
    background: rgba(45, 42, 37, 0.67);

    z-index: 1;
}


/* =========================================================
   BLUE V BORDER
   ========================================================= */

.page-banner::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 198px;

    /*
     * LEFT = dark blue
     * RIGHT = light blue
     */
    background: linear-gradient(
        to right,
        #168fca 0%,
        #168fca 50%,
        #35a9e0 50%,
        #35a9e0 100%
    );

    /*
     * Creates only the blue V strip.
     */
    clip-path: polygon(
        0 0,
        50% 160px,
        100% 0,

        100% 10px,
        50% 200px,
        0 10px
    );

    z-index: 2;

    pointer-events: none;
}


/* =========================================================
   BANNER CONTENT
   ========================================================= */

.page-banner .container {
    position: relative;

    z-index: 5;

    width: calc(100% - 40px);

    max-width: 850px;

    margin: 0 auto;

    padding: 0;
}


/* =========================================================
   TITLE
   ========================================================= */

.page-banner h1 {
    position: relative;

    display: inline-block;

    color: #fff;

    font-family: 'Raleway', sans-serif;

    font-size: 38px;

    line-height: 1.2;

    font-weight: 400;

    text-transform: uppercase;

    letter-spacing: 2px;

    margin: 0 0 28px;

    padding-bottom: 17px;
}


/* Small blue line below title */

.page-banner h1::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 0;

    transform: translateX(-50%);

    width: 40px;
    height: 2px;

    background: #19a9ee;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.page-banner p {
    max-width: 760px;

    margin: 0 auto 24px;

    color: #fff;

    font-family: 'Montserrat', sans-serif;

    font-size: 12px;

    line-height: 2.15;

    font-weight: 500;

    letter-spacing: 0.25px;
}


/* =========================================================
   BREADCRUMB
   ========================================================= */

.page-banner .breadcrumb {
    list-style: none;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0;

    /*
     * Remove old gray breadcrumb box.
     */
    background: transparent;

    padding: 0;

    margin: 0;

    border-radius: 0;

    font-family: 'Montserrat', sans-serif;

    font-size: 11px;

    line-height: 1;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: .3px;
}


/* HOME */

.page-banner .breadcrumb a {
    color: #fff;

    text-decoration: none;
}


.page-banner .breadcrumb a:hover {
    color: #35a9e0;
}


/* Arrow separator */

.page-banner .breadcrumb li + li::before {
    content: "\203A";

    display: inline-block;

    margin: 0 14px;

    color: #fff;

    font-size: 18px;

    font-weight: 300;

    vertical-align: -1px;
}


/* Current page */

.page-banner .breadcrumb .current {
    color: #fff;
}


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

@media (max-width: 991px) {

    .page-banner {
        padding: 45px 0 100px;

        min-height: 380px;

        clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - 130px),
            50% 100%,
            0 calc(100% - 130px)
        );
    }


    .page-banner::after {
        height: 138px;

        clip-path: polygon(
            0 0,
            50% 130px,
            100% 0,

            100% 8px,
            50% 138px,
            0 8px
        );
    }


    .page-banner h1 {
        font-size: 34px;
    }


    .page-banner p {
        max-width: 720px;

        line-height: 1.9;
    }
}


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

@media (max-width: 767px) {

    .page-banner {
        padding: 40px 0 85px;

        min-height: auto;

        clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - 70px),
            50% 100%,
            0 calc(100% - 70px)
        );
    }


    .page-banner::after {
        height: 77px;

        clip-path: polygon(
            0 0,
            50% 70px,
            100% 0,

            100% 7px,
            50% 77px,
            0 7px
        );
    }


    .page-banner .container {
        width: 88%;
    }


    .page-banner h1 {
        font-size: 28px;

        letter-spacing: 1.5px;

        margin-bottom: 22px;

        padding-bottom: 14px;
    }


    .page-banner h1::after {
        width: 34px;
    }


    .page-banner p {
        font-size: 11px;

        line-height: 1.8;

        margin-bottom: 20px;
    }


    .page-banner .breadcrumb {
        font-size: 10px;
    }
}


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

@media (max-width: 480px) {

    .page-banner {
        padding: 35px 0 70px;

        clip-path: polygon(
            0 0,
            100% 0,
            100% calc(100% - 45px),
            50% 100%,
            0 calc(100% - 45px)
        );
    }


    .page-banner::after {
        height: 51px;

        clip-path: polygon(
            0 0,
            50% 45px,
            100% 0,

            100% 6px,
            50% 51px,
            0 6px
        );
    }


    .page-banner h1 {
        font-size: 25px;
    }


    .page-banner p {
        font-size: 10px;

        line-height: 1.75;
    }
}