/* GETCAB modern skin (Oct 2026).
   One override stylesheet. Everything sits inside body.gc-modern, so it only applies on pages where
   app/Views/website/layouts/header.php adds that class. It restyles the existing markup (type, colour,
   spacing, cards, booking bar, header, footer) without changing any HTML or scripts.
   Rules under &.gc-home apply to the homepage only. Uses CSS nesting: browsers without it keep the old look. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");
:root{
  --gc-navy:#0c2545;
  --gc-blue:#155ead;
  --gc-orange:#f58a1f;
  --gc-orange-dk:#dc7410;
  --gc-sky:#eef4fb;
  --gc-line:#dbe5f1;
  --gc-text:#3f4d63;
  --gc-radius:16px;
  --gc-font:"Plus Jakarta Sans","Poppins",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
body.gc-modern{
/* ---------- 1. Type ---------- */
&,a,p,li,h1,h2,h3,h4,h5,h6,strong,label,input,select,button,textarea{font-family:var(--gc-font)}
&{background:#fff!important;color:var(--gc-text);-webkit-font-smoothing:antialiased}
p{line-height:1.75;letter-spacing:0!important}
h1,h2,h3,h4{letter-spacing:-.015em;text-wrap:balance}
h2{font-weight:800}
.text-justify,.text-justify p,.slider-left-text-side,.slider-left-text-side p,.top-three-boxes-setting-1,.top-three-boxes-setting-1 p,[style*="justify"]{text-align:left!important}
p.text-center,.text-center>p,.text-center p,.heading.text-center p,.links1{text-align:center!important}
p.text-right,.text-right>p{text-align:right!important}
.slider-left-text-side p{line-height:1.75;letter-spacing:0;font-size:16px}
h1.Setting-custom,h2.Setting-custom{text-transform:none;font-weight:800;text-align:left!important;font-size:clamp(26px,3vw,36px)!important;line-height:1.2!important;margin-bottom:18px}
a:hover{color:var(--gc-orange-dk)}
:focus-visible{outline:3px solid #7fb2f0;outline-offset:2px}
::selection{background:#ffd9ae;color:var(--gc-navy)}

}
/* Header and footer are also applied on booking-flow and account pages (body.gc-lite), which otherwise keep the previous design. */
body:is(.gc-modern,.gc-lite){
/* ---------- 2. Top bar and navigation ---------- */
section#top-header{background:var(--gc-navy);border-bottom:0}
section#top-header ul li{border-right:1px solid rgba(255,255,255,.14);padding:9px 16px}
section#top-header ul li a{color:#fff;font-size:14px;font-weight:500}
section#top-header ul li a:hover,.center-side li a:hover{color:#ffc27d!important}
section#top-header ul li a i{font-size:15px;padding-right:8px;color:#ffc27d}
nav.navbar.bg-white{position:sticky;top:0;z-index:1030;box-shadow:0 1px 0 var(--gc-line),0 8px 24px rgba(12,37,69,.06);padding-top:0;padding-bottom:0}
nav.navbar .container.n-1{padding:12px 0!important}
nav.navbar .nav-link{font-weight:600;font-size:15px;color:var(--gc-navy)!important;padding:9px 13px!important;border-radius:10px}
nav.navbar .nav-link:hover,nav.navbar .nav-item.show>.nav-link{background:var(--gc-sky);color:var(--gc-blue)!important}
nav.navbar .dropdown-menu{border:1px solid var(--gc-line);border-radius:14px;box-shadow:0 18px 40px rgba(12,37,69,.14);padding:8px;overflow:hidden}
nav.navbar a.dropdown-item{border-radius:9px;padding:9px 14px;font-size:14px;font-weight:500}
.dropdown-item.active,.dropdown-item:active,.dropdown-item:hover{background:var(--gc-sky)!important;color:var(--gc-blue)!important}
.desk-logos img{border-radius:10px}

}
body.gc-modern{
/* ---------- 3. Homepage hero and booking bar ---------- */
&.gc-home section#slider-area{
  background-image:linear-gradient(100deg,rgba(12,37,69,.94) 0%,rgba(12,37,69,.78) 42%,rgba(12,37,69,.25) 100%),url(../images/getcab-se.webp?v=2)!important;
  background-size:cover!important;background-position:center!important;padding:76px 0 96px!important}
&.gc-home section#slider-area>.container::before{
  content:"Your airport taxi, booked in a minute";display:block;max-width:15ch;margin:0 0 14px;
  font:800 clamp(34px,5.2vw,62px)/1.04 var(--gc-font);letter-spacing:-.03em;color:#fff}
&.gc-home section#slider-area>.container>.row:first-child::before{
  content:"See your price before you book. Cars on the road 24 hours a day.";flex:0 0 100%;max-width:100%;padding:0 15px;margin-bottom:84px;
  font:500 clamp(16px,1.6vw,19px)/1.5 var(--gc-font);color:#d7e3f3}
&.gc-home form.form-inline1{border:0!important;border-radius:0 18px 18px 18px!important;box-shadow:0 26px 60px rgba(4,16,34,.38)!important;padding:22px 22px 14px!important}
&.gc-home #form1 label{font-size:13px!important;font-weight:600!important;color:var(--gc-navy)!important;margin-bottom:6px}
&.gc-home form.form-inline1 input,&.gc-home form.form-inline1 select{height:46px!important;background:#f2f6fb!important;border:1px solid transparent!important;border-radius:10px!important;font-size:14px!important;color:var(--gc-navy)}
&.gc-home form.form-inline1 input:focus,&.gc-home form.form-inline1 select:focus{border-color:var(--gc-blue)!important;background:#fff!important;box-shadow:0 0 0 3px rgba(21,94,173,.16)!important;outline:0}
&.gc-home .oneway-div,&.gc-home .return-div{box-shadow:none!important;border-radius:14px 0 0 0!important;padding:11px 18px 2px!important;background:#e6edf6}
&.gc-home .return-div{border-radius:0 14px 0 0!important}
&.gc-home .return-div.active,&.gc-home .oneway-div.active{background:var(--gc-orange)!important}
&.gc-home #form1 .radio{font-size:15px!important;font-weight:700!important}
&.gc-home a.viabtn{background:var(--gc-navy)!important;border-radius:10px!important;font-size:14px!important;font-weight:700;padding:11px 12px 11px 2px!important}
.tabbg .btn-default,#submitbtn.btn{background:var(--gc-orange)!important;border-radius:12px!important;text-transform:none;font-weight:800;font-size:16px;letter-spacing:0;box-shadow:0 10px 22px rgba(245,138,31,.35)}
.tabbg .btn-default:hover,.tabbg .btn-default:focus{background:var(--gc-orange-dk)!important;border-color:transparent!important}
ul.list{border-radius:12px;box-shadow:0 18px 40px rgba(12,37,69,.2);padding:6px;min-width:min(340px,86vw)}
ul.list li{padding-right:96px}
ul.list li{border-radius:8px}
ul.list li:hover{background:var(--gc-sky);color:var(--gc-navy)}
/* other pages keep their own hero photo and form layout; only the frame is softened */
form.form-inline1{border:0!important;border-radius:18px!important;box-shadow:0 20px 48px rgba(4,16,34,.3)!important}
section#slider-area h1.main-title{font-weight:800;letter-spacing:-.02em;line-height:1.1}

/* ---------- 4. Three promise boxes ---------- */
section#below-banner-area{padding:72px 0 36px;border-radius:0}
.top-three-boxes-setting{border:1px solid var(--gc-line);border-radius:var(--gc-radius);box-shadow:none;height:100%;min-height:0;padding:26px!important;margin-top:0!important}
section#below-banner-area .row>[class*="col-"]{margin-bottom:24px}
section#below-banner-area div img{background:transparent;padding:0;width:64px;height:64px;object-fit:contain;margin-bottom:6px}
.top-three-boxes-setting>div:first-child{height:auto!important}
h3.main-part-two{font-size:18px;font-weight:800;color:var(--gc-navy);text-transform:none;margin-bottom:8px}
.top-three-boxes-setting p{margin:0;font-size:15px}

/* ---------- 5. Content sections: flat bands instead of wave artwork ---------- */
section.about-us{background:#fff!important;padding-top:56px!important;padding-bottom:56px!important}
section.about-us.about-us-sec,section.about-us.book-taxi-div{background:var(--gc-sky)!important}
.image-settingarea{padding-top:0!important;margin-top:0!important}
.image-settingarea img{border-radius:22px}
a.abt,.abt,.btn1{border-radius:999px!important;background:var(--gc-orange)!important;color:#fff!important;font-weight:700!important;font-size:14px!important;width:auto;display:inline-block;margin-bottom:18px;box-shadow:none}
a.abt:hover,.btn1:hover{background:var(--gc-orange-dk)!important;color:#fff!important}
a.btn1{display:block}
section#below-banner-area-1{background:var(--gc-navy)!important;background-image:radial-gradient(900px 420px at 85% 0%,rgba(21,94,173,.55),transparent 65%)!important;padding:84px 0 60px!important;margin-top:0!important}
section#below-banner-area-1 .heading h2{color:#fff!important;font-size:clamp(26px,3vw,36px)!important;line-height:1.2!important;margin-bottom:12px!important;width:auto!important}
section#below-banner-area-1 .heading p{color:#c9d8ec!important;margin-bottom:36px}
section#below-banner-area-1 .feature{display:flex;margin-bottom:30px!important}
.top-three-boxes-setting-1{background:#fff;border-radius:var(--gc-radius);padding:28px!important;width:100%;box-shadow:none;border:0}
.top-three-boxes-setting-1 img{height:52px;width:auto;margin-bottom:14px}
.top-three-boxes-setting-1>div:first-child{height:auto!important}
.top-three-boxes-setting-1 p.main-part-two{color:var(--gc-navy)!important;font-size:18px!important;font-weight:800!important;margin-bottom:8px}
.top-three-boxes-setting-1 p{font-size:15px;line-height:1.65}
#myCarousel .card.card-body{border:1px solid var(--gc-line);border-radius:var(--gc-radius);box-shadow:none;padding:20px!important;transition:border-color .15s,box-shadow .15s}
#myCarousel .card.card-body:hover{border-color:#b8cbe4;box-shadow:0 14px 30px rgba(12,37,69,.1)}
#myCarousel .card h4{font-size:19px;font-weight:800;color:var(--gc-navy)!important}
.carousel-item img:hover{box-shadow:none}
#myCarousel .carousel-control-prev-icon,#myCarousel .carousel-control-next-icon{background-color:var(--gc-navy)}
section h2.text-center{font-weight:800;letter-spacing:-.02em}
.mySwiper .swiper-slide div{border-radius:var(--gc-radius);overflow:hidden;border:1px solid var(--gc-line);background:#fff}
.mySwiper .swiper-slide h5{background:var(--gc-navy);font-size:16px;font-weight:700;margin:0;padding:12px}
.s1{border-radius:24px!important}
.testimonial-card{background:#fff;border:1px solid var(--gc-line);border-radius:var(--gc-radius);padding:24px;height:calc(100% - 10px)}
.testimonial-card p{font-size:15px;line-height:1.65}
.raiting-div-inner{border-radius:var(--gc-radius)!important;background:var(--gc-navy)!important}
.raiting-div-inner a{border-radius:999px!important}
section>.container>.row>[class*="col-"]>div[style*="box-shadow"]{border:1px solid var(--gc-line);border-radius:var(--gc-radius);box-shadow:none!important;padding:28px!important}

/* ---------- 6. Inner pages ---------- */
>section.call-to-action{background:linear-gradient(100deg,var(--gc-navy),var(--gc-blue))!important;padding:52px 0 44px!important}
>section.call-to-action h1,>section.call-to-action h2,>section.call-to-action .call-to-action-heading{color:#fff!important;font-weight:800;font-size:clamp(28px,3.4vw,42px);letter-spacing:-.02em;text-transform:none;margin:0 0 10px}
/* some page titles carry their own inline colour (navy, black, orange); the fill colour keeps them readable on the navy band */
>section.call-to-action h1,>section.call-to-action h2{-webkit-text-fill-color:#fff}
>section.call-to-action h1 span,>section.call-to-action h2 span{color:#ffc27d!important;-webkit-text-fill-color:#ffc27d}
.fleet-boxes-setting a[href*="quote"]{display:block;background:var(--gc-orange);color:#fff!important;font-weight:700;border-radius:12px;padding:12px;text-align:center}
.fleet-boxes-setting a[href*="quote"]:hover{background:var(--gc-orange-dk)}
.fleet-boxes-setting :has(>a[href*="quote"]){background:transparent!important;padding:0!important}
>section.call-to-action hr{display:none}
>section.call-to-action p{color:#d7e3f3!important;font-size:16px;margin:0}
.fleet-boxes-setting{border:1px solid var(--gc-line);border-radius:var(--gc-radius);box-shadow:none!important;overflow:hidden;background:#fff}
.boxes-setting-area{border:1px solid var(--gc-line);border-radius:var(--gc-radius);margin:20px 0}
.boxes-setting-area h4{font-weight:800}
.faq button.accordion{border-radius:12px;margin-bottom:8px;font-weight:600;font-family:var(--gc-font)}
section.section-1 h2,section.section-2 h2,section.section-3 h2,section#counts h2,section.faq h2{font-weight:800;letter-spacing:-.02em}
section.section-1 video,section.section-2 img,section.section-1 img{border-radius:20px}

}
body:is(.gc-modern,.gc-lite){
/* ---------- 7. Footer ---------- */
.links1{padding:8px 0 0}
.links1 a{display:inline-block;border:1px solid var(--gc-line)!important;border-radius:999px;padding:6px 14px!important;margin:4px 3px;font-size:13px;font-weight:500;color:var(--gc-navy);background:#fff}
.links1 a:hover{border-color:var(--gc-orange)!important;color:var(--gc-orange-dk)}
footer#main-footer-area-start>div.mt-5{background:var(--gc-sky)!important;padding-top:56px!important}
footer#main-footer-area-start .call-to-action{background:transparent!important;padding:0 0 12px!important}
.r1{background:linear-gradient(100deg,var(--gc-navy),var(--gc-blue))!important;border-radius:24px!important;padding:44px!important}
footer#main-footer-area-start h2.call-to-action-heading{font-size:clamp(24px,2.6vw,34px);font-weight:800;line-height:1.2;text-transform:none}
.r1 a.abt{margin-bottom:0!important;padding:13px 26px!important;font-size:15px!important}
section.footer-part-area{background:transparent;padding:44px 0}
h4.footer-heading{font-size:15px;font-weight:800;color:var(--gc-navy);margin-bottom:16px}
ul.footer-navigation li a{font-weight:500;font-size:15px;color:var(--gc-text);line-height:2}
ul.footer-navigation li a:hover{color:var(--gc-orange-dk)}
section.copy-rigth-footer-part-area{background:var(--gc-navy)}

}
body.gc-modern{
/* ---------- 8. Small screens ---------- */
@media (max-width:991px){
  &.gc-home section#slider-area{padding:48px 0 64px!important}
  &.gc-home section#slider-area>.container>.row:first-child::before{margin-bottom:72px}
}
@media (max-width:767px){
  &.gc-home section#slider-area{padding:36px 0 40px!important}
  &.gc-home section#slider-area>.container::before{max-width:none}
  section#below-banner-area{padding:44px 0 12px}
  section#below-banner-area-1{padding:56px 0 30px!important}
  section.about-us{padding-top:40px!important;padding-bottom:40px!important}
  .about-us-sec,.book-taxi-div{padding-bottom:40px!important}
  .r1{padding:28px!important}
  .links1 a{font-size:12px;padding:5px 11px!important}
  >section.call-to-action{padding:36px 0 30px!important}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}
}