/* ==========================================================================
   Limo Car Miami — brand override
   Adapts the base theme palette/typography to the client identity without
   touching the original theme files (style.css, module-css/*).
   ========================================================================== */

:root{
  --theme-color: #C9A24C;
  --theme-color2: #ffffff;
  --theme-color-dark: #A9822E;
  --secondary-color: #000000;
  --text-color: #6b6b6b;
  --title-color: #171717;
}

.handle-preloader{
  background: var(--secondary-color) !important;
}


/* header
   ========================================================================== */

.header-top{
  background: var(--secondary-color) !important;
}

/* header-lower: black bar behind the logo/nav (theme default is white).
   Nav links go white, with only the active/hovered item shown in gold
   (handled by the .main-menu .navigation rules further down). */
.main-header .header-lower{
  background: var(--secondary-color) !important;
}

/* logo box: dark panel spanning both header rows (theme structure kept,
   recolored from the accent gold to the brand's black).
   The theme's diagonal ":after"/".shape" chevrons are hidden — the
   design (diseños/header.jpg) uses a plain straight vertical edge.
   The ":before" bleeds the color 5000px across the whole header-lower
   bar and must stay transparent or the white nav bar goes black. */
.main-header .outer-box .logo-box{
  background: var(--secondary-color) !important;
  margin-top: -74px;
  padding: 12px 55px 12px 0px;
  z-index: 2;
}

.main-header .outer-box .logo-box:before{
  background: #000000 !important
}

.main-header .outer-box .logo-box:after,
.main-header .outer-box .logo-box .shape{
  display: none !important;
}

.main-header .outer-box .logo-box .logo img{
  max-height:180px;
  width: auto;
}

.main-header .sticky-header .outer-box .logo-box{
  margin-top: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.main-header .sticky-header .outer-box .logo-box .logo img{
  max-height: 46px;
  width: auto;
}

/* mobile header: theme's stacked top-bar (phone/email/social) plus a
   full-height gold logo panel reads cluttered on small screens, so the
   top bar is dropped, the logo is pinned to a fixed 135px height, and
   its panel forced to pure black (matches diseños/header mobile) */
@media only screen and (max-width: 1200px){
  .header-top{
    display: none !important;
  }

  .main-header .outer-box .logo-box{
    background: #000000 !important;
  }

  .main-header .outer-box .logo-box .logo img{
    height: 135px;
    max-height: none;
    width: auto;
  }

  .menu-area .mobile-nav-toggler .icon-bar{
    background-color: #ffffff;
  }

  /* sticky header on mobile: responsive.css hides .sticky-header
     entirely below 1200px, so scrolling down just loses the header.
     Re-enabled here, but stripped down to only the hamburger toggler —
     no logo, no nav links, no CTA buttons — so scrolling shows a
     single small black square that opens the same off-canvas menu. */
  .sticky-header{
    display: block !important;
  }

  .sticky-header .outer-box{
    justify-content: flex-end;
  }

  .sticky-header .outer-box .logo-box,
  .sticky-header .outer-box .menu-right-content{
    display: none !important;
  }

  .sticky-header .mobile-nav-toggler{
    display: block;
  }
}

/* sticky header: black bar, white nav text, gold active/hover
   (already handled globally by theme-color.css), white "Get A Quote"
   button keeping its existing gold border */
.sticky-header{
  background-color: var(--secondary-color) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sticky-header .main-menu .navigation > li > a{
  color: #fff;
}

.sticky-header .main-menu .navigation > li.current > a:after,
.sticky-header .main-menu .navigation > li:hover > a:after{
  bottom: 20px;
}

.main-header .sticky-header .menu-right-content .theme-btn.btn-two{
  background: #fff;
}

.main-header .sticky-header .menu-right-content .theme-btn.btn-two:hover{
  background: var(--theme-color);
}

.header-top .links-list li a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.header-top .links-list li a i{
  color: var(--theme-color);
  font-size: 18px;
}

.header-top .info-list.social li{
  margin-right: 12px;
  padding-left: 0px;
}

.header-top .info-list.social li a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--theme-color);
  border-radius: 50%;
  color: var(--theme-color);
  line-height: 1;
}

.header-top .info-list.social li a i{
  /* the theme's base rule absolutely-positions icons inside .info-list
     li (left:0; top:5px) for icon+text rows; that breaks the flex
     centering here, so it must be reset back to normal flow */
  position: static;
  top: auto;
  left: auto;
  font-size: 18px;
}

.header-top .info-list.social li a:hover{
  background: var(--theme-color2);
  color: #fff;
}

.main-menu .navigation > li > a{
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 0.3px;
  color: #ffffff;
}

.main-menu .navigation > li.current > a,
.main-menu .navigation > li:hover > a{
  color: var(--theme-color) !important;
}

.theme-btn.btn-one{
  text-transform: uppercase;
}

/* header's "Book Now" (btn-one is shared with several other CTAs
   site-wide, so this is scoped to the header button only): the theme's
   default hover reveal is var(--secondary-color) (pure black) — swapped
   to a dark grey here per request. */
.main-header .menu-right-content .theme-btn.btn-one:before,
.main-header .menu-right-content .theme-btn.btn-one:after{
  background: #444444;
}

/* "Contact Us" stays on a solid white pill until hover (readable against
   the black header-lower/logo-box bleed at every breakpoint), then
   swaps to the gold fill it already had. */
.theme-btn.btn-two,
.main-header .menu-right-content .theme-btn.btn-two{
  background: #ffffff;
  border: 1px solid var(--theme-color);
  color: var(--title-color) !important;
  text-transform: uppercase;
}

.theme-btn.btn-two:hover,
.main-header .menu-right-content .theme-btn.btn-two:hover{
  color: #fff !important;
  background: var(--theme-color);
}

/* "Call Our Office" phone icon sits to the left of the label */
.main-header .menu-right-content .theme-btn.btn-two i{
  margin-right: 8px;
}

.main-menu .navigation > li{
  position: relative;
}

.main-menu .navigation > li.current > a:after,
.main-menu .navigation > li:hover > a:after{
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 30px;
  height: 2px;
  background: var(--theme-color);
}


/* banner (static image — video not in use)
   ========================================================================== */

.banner-section.video-banner{
  height: 640px;
  overflow: hidden;
  background: #000;
}

.banner-section.video-banner .bg-layer{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

@media only screen and (max-width: 767px){
  .banner-section.video-banner{
    height: 166px;
  }
}

/* laptop screens (1366x768, 1440x900, etc.) are short enough that the
   fixed 640px banner + header push the fold well past the viewport,
   forcing a scroll just to see the rest of the video — sized by
   viewport HEIGHT (not width) since that's what actually decides
   whether it fits, independent of how wide the laptop's screen is */
@media only screen and (max-height: 820px) and (min-width: 768px){
  .banner-section.video-banner{
    height: 560px;
  }
}

@media only screen and (max-height: 740px) and (min-width: 768px){
  .banner-section.video-banner{
    height: 460px;
  }
}

/* intro overlay: static dark tint over the banner photo (no video, no
   fade) so the headline stays readable against any part of the image */
.banner-section.video-banner .intro-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 40px;
  pointer-events: none;
}

.banner-section.video-banner .intro-overlay .intro-text{
  margin: 0;
  max-width: 1200px;
  color: #fff;
  font-size: 65px;
  line-height: 1.2;
  font-weight: 700;
}

@media only screen and (max-width: 991px){
  .banner-section.video-banner .intro-overlay .intro-text{
    font-size: 42px;
  }
}

@media only screen and (max-width: 575px){
  .banner-section.video-banner .intro-overlay .intro-text{
    font-size: 28px;
  }
}


/* page-title (internal pages)
   ========================================================================== */

/* diseños/FLEET.jpg and diseños/ABOUT.jpg render the page heading in
   full caps with wide tracking; the theme's page-title.css leaves h1
   in whatever case the markup uses */
.page-title h1{
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* shared content width for every internal page (fleet.php, services.php,
   and any page built after them) — both the page-title/breadcrumb and
   the section below it use this class on their .auto-container so the
   left/right edges line up instead of each section picking its own
   width (fleet.php's grid used the theme's default 1320px while
   services.php used services-home's 1530px, so the fleet cards read
   noticeably narrower/misaligned next to services.php). */
/* 1530px is only safely wide on large desktop monitors — on laptop
   screens (1280–1440px wide, very common) it's close enough to the
   full viewport width that the 15px .auto-container padding is all
   the side margin left, so content reads as glued to the browser
   edges (reported on special-events-transportation-service.php and
   any other page using this class). min() keeps a real side margin
   at any width instead of just hard-coding another breakpoint. */
.inner-container-lg{
  max-width: min(1530px, 92vw);
}


/* about / quienes-home
   ========================================================================== */

/* icono1.jpg / icono2.jpg already come as gold outline-circle glyphs on a
   transparent background, so the theme's soft gold-tint fill behind them
   is dropped in favor of a thin gold ring, matching the plain circle
   outline around each icon in diseños/about-index.jpg */
.content_block_one .content-box .inner-box .single-item .icon-box:before{
  display: none;
}

.content_block_one .content-box .inner-box .single-item .icon-box{
  border: 1px solid var(--theme-color);
}

.content_block_one .content-box .inner-box .single-item .icon-box img{
  vertical-align: middle;
    margin-top: -14px !important;
}

/* "25+ Years Experience" badge: diseños/about-index.jpg uses a dark
   circle with gold text/ring instead of the theme's default solid-gold
   circle with white text. theme-color.css sets this background with
   !important, so the override needs !important too or it's silently
   dropped (which is what was happening — a solid-gold circle with
   invisible gold-on-gold text). */
.about-section .image_block_one .image-box .experience-box{
  background: var(--secondary-color) !important;
}

.about-section .image_block_one .image-box .experience-box h2,
.about-section .image_block_one .image-box .experience-box h6{
  color: var(--theme-color);
}

/* diseños/about-index.jpg keeps this ring tight against the badge and
   fully inside the photo; the theme's default offsets it 55px out on
   every side, which bleeds it past the image's right edge here */
.about-section .image_block_one .image-box .experience-box:before{
  width: 220px;
  height: 220px;
  left: -20px;
  top: -20px;
  border-width: 10px;
  border-color: rgba(201, 162, 76, 0.35);
}

/* "Learn More About Us" reuses the outline btn-two component, but this
   particular button keeps gold text on white instead of btn-two's
   default dark text (used for the header's Get A Quote button), and
   diseños/about-index.jpg uses title case / regular weight instead of
   btn-two's default bold uppercase (used for the header button) */
.about-section .btn-box .theme-btn.btn-two{
  color: var(--theme-color) !important;
  text-transform: none;
  font-weight: 600;
}

.about-section .btn-box .theme-btn.btn-two:hover{
  color: #fff !important;
}


/* about.php (About Us detail page)
   ========================================================================== */

/* diseños/ABOUT.jpg uses a solid dark filled circle here instead of the
   thin gold ring the home about-section's 2-item list uses just above
   (content_block_one's .icon-box is shared markup, so this needs to be
   scoped to the about.php section specifically) */
.about-detail-section .inner-box{
  list-style: none;
  margin: 0;
  padding: 0;
}

.about-detail-section .single-item .icon-box{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: none;
  background: var(--secondary-color);
  color: var(--theme-color);
  font-size: 20px;
}

.about-detail-section .single-item .icon-box:before{
  display: none;
}

/* icono7/8/9.jpg (car / chauffeur / diamond) already ship as flat near-
   black tiles — near enough to --secondary-color that they blend into
   the circle with no visible seam, so they're sized down slightly
   inside it rather than stretched edge-to-edge */
.about-detail-section .single-item .icon-box img{
  width: 28px;
  height: auto;
}

.about-detail-section .single-item p{
  color: var(--text-color);
}

/* two offset photos + a dark stat badge under the left one, per
   diseños/ABOUT.jpg — about-interna1.jpg/about-interna2.jpg are already
   sized so the right column naturally runs a little taller than the
   left photo + badge stack, matching the offset in the design */
.about-dual-image{
  position: relative;
  display: flex;
  gap: 24px;
}

.about-dual-image:before{
  content: '';
  position: absolute;
  top: -20px;
  right: -16px;
  width: 130px;
  height: 130px;
  background-image: radial-gradient(rgba(201, 162, 76, 0.3) 2px, transparent 2px);
  background-size: 14px 14px;
  z-index: -1;
}

.about-dual-image .image-one{
  flex: 0 0 56%;
}

.about-dual-image .image-two{
  flex: 1;
  margin-top: 40px;
}

.about-dual-image figure{
  margin: 0;
  overflow: hidden;
  border-radius: 6px;
}

.about-dual-image figure img{
  width: 100%;
  display: block;
}

.about-dual-image .experience-badge{
  background: var(--secondary-color);
  padding: 22px 24px;
  margin-top: 20px;
}

.about-dual-image .experience-badge h2{
  color: var(--theme-color);
  font-size: 46px;
  line-height: 1;
  font-weight: 800;
  margin-bottom: 8px;
}

.about-dual-image .experience-badge p{
  color: #fff;
  font-size: 15px;
  line-height: 22px;
  margin: 0;
}

.about-dual-image .experience-badge p span{
  color: var(--theme-color);
}

/* mission / vision */
.mission-vision-section .mission-image{
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
}

.mission-vision-section .mission-image img{
  width: 100%;
  display: block;
}

.mission-vision-section .mv-card{
  background: #F7F7F7;
  padding: 34px 40px;
  margin-bottom: 24px;
}

.mission-vision-section .mv-card:last-child{
  margin-bottom: 0px;
}

.mission-vision-section .mv-card h3{
  font-size: 26px;
  margin-bottom: 14px;
}

.mission-vision-section .mv-card p{
  color: var(--text-color);
  margin: 0;
}

@media only screen and (max-width: 991px){
  .mission-vision-section .image-column{
    margin-bottom: 40px;
  }
}

@media only screen and (max-width: 767px){
  .about-dual-image{
    flex-direction: column;
  }

  .about-dual-image .image-two{
    margin-top: 0px;
  }
}

/* "Why Choose Us" (feature-style-three): icono10/11/12.jpg (shield /
   24hr / chart) ship as gold tiles matching --theme-color almost
   exactly, so on the icon-box's default gold circle background
   (feature.css) they blend seamlessly the same way the dark about
   icons do above. The theme's own icon-box sizing assumes a font
   glyph (line-height:80px), so the <img> needs its own centering. */
.feature-style-three .icon-box img{
  width: 40px;
  height: auto;
  vertical-align: middle;
  margin-top: -20px;
}


/* fleet images — hover UX (home carousel + fleet.php grid)
   ========================================================================== */

/* .card-block-one is shared markup between the home "Our Fleet" carousel
   (includes/fleet-home.php) and the fleet.php internal grid, so one rule
   set covers both. Signals the photo is clickable with just a slow zoom
   + a slight dim on the photo itself — no overlay/icon pseudo-elements,
   since an absolutely-positioned layer on top of the <a><img></a> (the
   earlier version used a :before scrim) intercepts the click and makes
   the image stop navigating on hover. */
.card-block-one .inner-box .image-box{
  overflow: hidden;
}

.card-block-one .inner-box .image-box img{
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.card-block-one .inner-box .image-box:hover img{
  transform: scale(1.08);
  opacity: 0.85;
}


/* fleet (card-section)
   ========================================================================== */

.card-section.fleet-home{
  position: relative;
  overflow: hidden;
}

.card-section.fleet-home .bg-layer{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.card-section.fleet-home .bg-layer:before{
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(9, 9, 10, 0.78);
}

/* diseños/fleet-index.jpg shows each car photo at its native ~390x325
   size, uncropped — the theme's 1320px container only leaves ~300px
   per card at the 4-items breakpoint, forcing a crop to fill the box.
   Widened so 4 cards + 3 gutters land close to the native image width
   (390px item content + 60px inner-box padding = 450px/item;
   4*450 + 3*30 margin + 30 container padding = 1920px). */
.card-section.fleet-home .auto-container{
  position: relative;
  z-index: 1;
  max-width: 1920px;
}

/* keeps the card body dark to match the night bg-layer instead of the
   theme's default white card, with left-aligned copy instead of the
   section's .centred text-align:center cascading into the cards */
.card-section.fleet-home .card-block-one .inner-box:before{
  background: #171512;
}

.card-section.fleet-home .card-block-one .inner-box .lower-content{
  text-align: left;
}

.card-section.fleet-home .card-block-one .inner-box .lower-content h3 a{
  color: #fff;
}

.card-section.fleet-home .card-block-one .inner-box .lower-content p{
  color: rgba(255, 255, 255, 0.65);
}

.card-block-one .inner-box .lower-content .passengers{
  position: relative;
  display: inline-block;
  font-size: 14px;
  color: var(--theme-color);
  font-weight: 600;
  margin-bottom: 10px;
}

.card-block-one .inner-box .lower-content .passengers i{
  margin-right: 6px;
}

.card-block-one .inner-box .lower-content .btn-box .theme-btn{
  width: 100%;
  text-align: left;
}

.card-section.fleet-home .card-block-one .inner-box .btn-box .theme-btn.btn-one{
  color: var(--secondary-color) !important;
}

.card-section.fleet-home .card-block-one .inner-box .btn-box .theme-btn.btn-one:hover{
  color: #fff !important;
}

.card-section.fleet-home .owl-dots{
  margin-top: 20px;
}

.card-section.fleet-home .owl-dots .owl-dot span{
  background: rgba(255, 255, 255, 0.3);
}

.card-section.fleet-home .owl-dots .owl-dot.active span{
  background: var(--theme-color);
}


/* counter (funfact-style-two)
   ========================================================================== */

/* the theme's .bg-layer/opacity:0.15 rule (funfact.css) was already set
   up for this, but clientes-home.php never included the bg-layer div,
   so the section rendered as flat black. .bg-layer is position:absolute
   with no z-index, which paints above static in-flow content per the
   stacking spec, so .auto-container needs z-index:1 or the photo would
   cover the icons/numbers instead of sitting behind them. */
.funfact-style-two .auto-container{
  position: relative;
  z-index: 1;
}

.funfact-style-two .funfact-block-one .inner-box p{
  font-size: 16px;
  line-height: 22px;
}

/* icono14/15/16.jpg replace the fa-users/fa-calendar-check/fa-car-side
   glyphs; sized to sit inside the existing 90px circle the same way
   icono1/icono2.jpg do in the about section */
.funfact-style-two .funfact-block-one .inner-box .icon-box img{
  height: 40px;
  width: auto;
  vertical-align: middle;
  margin-top: -15px;
}

/* mobile: theme's default layout pins the icon absolutely at left:50px
   with the number/label text padded out to its right (padding-left:170px),
   which reads left-shoved and off-balance once the columns stack full
   width on small screens — icon, number and label are centered instead */
@media only screen and (max-width: 767px){
  .funfact-style-two .funfact-block-one .inner-box{
    padding-left: 30px;
    padding-right: 30px;
    text-align: center;
  }

  .funfact-style-two .funfact-block-one .inner-box .icon-box{
    position: relative;
    left: 0px;
    top: 0px;
    margin: 0 auto 20px;
  }
}


/* testimonials (testimonial-style-two)
   ========================================================================== */

/* diseños/testimonos.jpg uses the theme's own nav-style-one look as-is
   (white circle / dark arrow, gold on hover via theme-color.css) — no
   override needed here, the section just needed to go back to the
   theme's original testimonial-style-two markup (about.html) instead of
   the different testimonial-section variant it had drifted to. */

/* header nav's "Testimonials" link jumps here (id="testimonials"); the
   fixed .sticky-header would otherwise cover the top of the section
   once it scrolls into place, so the landing spot is pushed down by
   roughly the sticky header's height. */
#testimonials{
  scroll-margin-top: 110px;
}


/* services (news-section)
   ========================================================================== */

/* diseños/index.jpg (Our Services carousel) sizes each card at 480x580
   instead of the theme's default ~410x410 (content padding-top pushed
   the box's height, no explicit size) — widened so 3 cards + 2 gutters
   land at 480/card (3*480 + 2*30 margin + 30 container padding = 1530) */
.services-home .auto-container{
  max-width: 1530px;
}

.services-home .news-block-one .inner-box{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 580px;
  padding: 30px;
}

/* the description was left on the theme's default grey body-text
   color, which is nearly invisible against the dark photo overlay */
.services-home .news-block-one .inner-box .content-box p{
  color: #fff;
}

/* "Read More" sat flush under the description with no breathing room */
.services-home .news-block-one .inner-box .btn-box{
  display: inline-block;
  margin-top: 22px;
}

/* the carousel's nav arrows rendered left-aligned under the cards
   (not centered) using icon-6/icon-7 from the custom icon font, which
   no longer map to arrow glyphs in the current icon set (they showed
   an unrelated globe/building icon) — swapped for Font Awesome arrows
   and centered the row */
.services-home .owl-nav{
  text-align: center;
  margin-top: 30px;
}

.services-home .owl-nav button{
  margin: 0 8px;
  background: var(--theme-color) !important;
  color: #ffffff !important;
}

.services-home .owl-nav button:hover{
  background: #000000 !important;
  color: #ffffff !important;
}

/* services.php grid re-uses .services-home for card sizing, but the grid
   itself is a plain bootstrap row/col (no owl-carousel), so the nav
   arrows never render there — no extra rule needed for that.

   "Cancelation and Refund Policy" is the one grid card with no matching
   product photo (img/ only has lifestyle shots for the transport
   services), so diseños/services.jpg's clipboard photo is swapped for a
   dark gradient + a gold document glyph, kept inside the same
   .news-block-one card so grid spacing/hover stay identical. */
.news-block-one .policy-icon{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  border-radius: 50%;
  border: 1px solid var(--theme-color);
  color: var(--theme-color);
  font-size: 24px;
  z-index: 1;
}


/* fleet & services detail pages (fleet-detalle.php + the 4 individual
   service pages) — all re-use the theme's about-style-two/content_block_
   three/image_block_two components (originally the "About" section on
   service-details.html) for the image + checklist + dual-button layout
   diseños/detalle-FLEET.jpg and diseños/detalle-SERVICIOS.jpg both use.
   ========================================================================== */

/* diseños shows a light dotted grid tucked behind the top-left corner of
   the product photo — drawn with a CSS dot pattern instead of a new
   image asset */
.detail-section .image_block_two .image-box{
  position: relative;
}

.detail-section .image_block_two .image-box:before{
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  width: 140px;
  height: 140px;
  background-image: radial-gradient(rgba(201, 162, 76, 0.35) 2px, transparent 2px);
  background-size: 14px 14px;
  z-index: -1;
}

/* the product photos (car-big*.jpg) are studio shots on a plain white
   background, so they're framed in a light card instead of bleeding
   full-width like the theme's default photo-only about images */
.detail-section .image_block_two .image-box .image{
  background: #f7f5f2;
  padding: 30px;
  box-shadow: 0px 20px 80px 0px rgba(0, 0, 0, 0.1);
}

.detail-section .image_block_two .image-box .image img{
  width: 100%;
  display: block;
}

.detail-section .advisor-btn i{
  margin-right: 8px;
  font-size: 18px;
  vertical-align: middle;
}

@media only screen and (max-width: 991px){
  .detail-section .content_block_three .content-box{
    margin-bottom: 50px;
  }
}


/* footer (main-footer)
   ========================================================================== */

/* diseños/footer.jpg uses a very dark navy-black rather than the
   site's pure-black --secondary-color used elsewhere (header, etc.) */
.main-footer{
  background: #0a0e11;
}

.main-footer .widget-section{
  border-bottom-color: rgba(201, 162, 76, 0.25);
}

/* widget titles are gold/uppercase with a short gold underline,
   instead of the theme's default white title-case text */
.main-footer .widget-title h4{
  color: var(--theme-color);
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: 0.5px;
}

.main-footer .widget-title:after{
  content: '';
  display: block;
  width: 36px;
  height: 2px;
  background: var(--theme-color);
  margin-top: 14px;
}

/* diseños/footer.jpg marks each link with a small gold arrow instead
   of the theme's plain white dot */
.main-footer .links-widget .links-list li a:before{
  content: '\f105';
  font-family: 'Font Awesome 5 Pro';
  font-weight: 900;
  background: none;
  width: auto;
  height: auto;
  border-radius: 0;
  color: var(--theme-color);
  font-size: 13px;
  top: 1px;
}

.main-footer .links-widget .links-list li a:hover:before{
  background: none;
}

/* logo column: diseños/footer.jpg replaces the description paragraph
   and social icons with the phone/email/address contact-block list
   (moved here from the old standalone footer-bottom-widget strip,
   which no longer exists as a separate section) */
.main-footer .logo-widget .contact-block{
  display: flex;
  align-items: flex-start;
  gap: 15px;
  color: #fff;
  margin-bottom: 20px;
}

.main-footer .logo-widget .contact-block:last-child{
  margin-bottom: 0px;
}

.main-footer .logo-widget .contact-block i{
  font-size: 20px;
  color: var(--theme-color);
  width: 20px;
  text-align: center;
  margin-top: 4px;
}

.main-footer .logo-widget .contact-block a{
  display: block;
  color: #fff;
  font-weight: 600;
}

.main-footer .logo-widget .contact-block a:hover{
  color: var(--theme-color);
}

.main-footer .logo-widget .contact-block span{
  display: block;
  font-size: 13px;
  color: #999;
}

/* copyright row: text + "Designed by" credit on the left, social
   icons on the right, instead of the theme's centered copyright-only
   line; the separating line above it goes gold instead of white */
.footer-bottom{
  border-top: 1px solid rgba(201, 162, 76, 0.25);
}

.footer-bottom-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
}

.footer-bottom .copyright p{
  font-size: 15px;
}

.footer-bottom .copyright .sep{
  color: var(--theme-color);
  margin: 0 6px;
}

.footer-bottom .copyright .credit{
  color: var(--theme-color);
}

.footer-bottom .social-links li a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--theme-color);
  border-radius: 50%;
  background: transparent;
  color: var(--theme-color) !important;
  font-size: 14px;
}

.footer-bottom .social-links li a:hover{
  background: var(--theme-color);
  color: #fff !important;
}


/* whatsapp floating button
   ========================================================================== */

.whatsapp-widget{
  position: relative;
}

/* now a <button> (it opens the chat popup instead of navigating
   directly to wa.me), so the browser's default button chrome
   (border/background/font) is stripped back to how the plain <a>
   version looked */
.whatsapp-float{
  position: fixed;
  left: 25px;
  bottom: 25px;
  width: 60px;
  height: 60px;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.25s ease;
}

.whatsapp-float:hover{
  transform: scale(1.06);
}

.whatsapp-float img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* whatsapp chat popup
   ========================================================================== */

/* diseños/ejemplo-whastapp.jpg is a generic green WhatsApp-widget
   screenshot found for reference; kept the same anatomy (header with
   agent identity + close button, message bubble, text input + send)
   but restyled in the brand's black/gold instead of stock WhatsApp
   green, and made it fully functional: typing a message and hitting
   send opens a real wa.me chat with that text pre-filled, since a
   browser widget can't hold an actual WhatsApp conversation itself. */
.whatsapp-chat-popup{
  position: fixed;
  left: 25px;
  bottom: 100px;
  width: 340px;
  max-width: calc(100vw - 50px);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.96);
  transform-origin: bottom left;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.whatsapp-chat-popup.active{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.whatsapp-chat-popup .wcp-header{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #14110c 0%, #000000 100%);
  border-bottom: 2px solid var(--theme-color);
}

.whatsapp-chat-popup .wcp-avatar{
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--theme-color);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.whatsapp-chat-popup .wcp-avatar img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
}

.whatsapp-chat-popup .wcp-info{
  flex: 1;
}

.whatsapp-chat-popup .wcp-info h4{
  color: #fff;
  font-size: 16px;
  line-height: 20px;
  margin: 0 0 3px;
}

.whatsapp-chat-popup .wcp-info span{
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
}

.whatsapp-chat-popup .wcp-dot{
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #25D366;
  flex-shrink: 0;
}

.whatsapp-chat-popup .wcp-dot:before{
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.4);
  animation: wcpPulse 1.8s infinite ease-out;
}

@keyframes wcpPulse{
  0%   { transform: scale(0.6); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

.whatsapp-chat-popup .wcp-close{
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}

.whatsapp-chat-popup .wcp-close:hover{
  color: var(--theme-color);
}

.whatsapp-chat-popup .wcp-body{
  padding: 20px 18px;
  min-height: 110px;
  background-color: #f4f1ea;
  background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 16px 16px;
}

.whatsapp-chat-popup .wcp-message{
  position: relative;
  display: inline-block;
  max-width: 88%;
  background: #fff;
  border-radius: 2px 12px 12px 12px;
  padding: 10px 14px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.whatsapp-chat-popup .wcp-message-author{
  display: block;
  color: var(--theme-color);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 3px;
}

.whatsapp-chat-popup .wcp-message p{
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: #222;
}

.whatsapp-chat-popup .wcp-footer{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border-top: 1px solid #ececec;
}

.whatsapp-chat-popup .wcp-footer input{
  flex: 1;
  border: 1px solid #e2e2e2;
  border-radius: 30px;
  padding: 10px 16px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s ease;
}

.whatsapp-chat-popup .wcp-footer input:focus{
  border-color: var(--theme-color);
}

.whatsapp-chat-popup .wcp-footer button{
  flex-shrink: 0;
  height: 40px;
  padding: 0 20px;
  border-radius: 20px;
  border: none;
  background: #25D366;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.whatsapp-chat-popup .wcp-footer button:hover{
  background: #1da851;
}

@media only screen and (max-width: 499px){
  .whatsapp-chat-popup{
    left: 20px;
    bottom: 95px;
    width: calc(100vw - 40px);
  }
}


/* reservation-section (book-now.php)
   ========================================================================== */

/* the MyLimoBiz ORES widget-loader.js script (loaded at the end of
   book-now.php, exactly as on the live site's formulario_reservacion.php)
   replaces/expands this anchor into the actual booking widget once it
   runs — kept as a real link with its original href/data attributes
   untouched so it still works as a fallback if the script is slow or
   blocked. min-height avoids a layout jump once the widget mounts. */
.reservation-widget{
  min-height: 480px;
  text-align: center;
}


/* contact form consent checkbox (contact.php)
   ========================================================================== */

.consent-check{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
  line-height: 24px;
  color: var(--text-color);
}

.consent-check input[type="checkbox"]{
  width: 18px;
  height: 18px;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--theme-color);
  cursor: pointer;
}

.consent-check a{
  color: var(--theme-color);
  text-decoration: underline;
}

.consent-check a:hover{
  color: var(--title-color);
}

/* required-field error state (contact.php): the form is validated by
   the jQuery Validation plugin (assets/js/script.js calls
   $('#contact-form').validate({...})), which sets novalidate on the
   form — so the browser's own validation/bubble never runs at all.
   The plugin's defaults already do the real work: it adds class
   "error" to an invalid field and inserts a <label class="error">
   with the message (jQuery Validate's stock text is literally "This
   field is required.") right after it — these rules just recolor
   that plugin-generated markup instead of reinventing it. */
#contact-form input.error,
#contact-form textarea.error{
  border-color: #e63946 !important;
}

#contact-form label.error{
  display: block;
  color: #e63946;
  font-size: 13px;
  line-height: 18px;
  margin-top: 6px;
  font-weight: 400;
}

/* consent checkbox: errorPlacement (script.js) puts the message after
   the whole .consent-check row instead of jamming it between the
   checkbox and its label text */
#contact-form .consent-check input.error{
  outline: 1px solid #e63946;
}


/* legal-section (cancellation-and-terms.php, data-privacy-policy.php)
   ========================================================================== */

/* long-form policy text reads better in a narrower column than the
   site's usual 1320/1530px content width */
.legal-content{
  max-width: 860px;
  margin: 0 auto;
}

.legal-content .legal-updated{
  color: var(--theme-color);
  font-weight: 600;
  margin-bottom: 30px;
}

.legal-content h2{
  font-size: 26px;
  line-height: 34px;
  margin: 45px 0 18px;
}

.legal-content h2:first-child{
  margin-top: 0px;
}

/* sub-headings inside a policy block (e.g. per vehicle type) */
.legal-content h3{
  font-size: 20px;
  line-height: 28px;
  margin: 32px 0 14px;
}

.legal-content p{
  color: var(--text-color);
  margin-bottom: 0px;
}

/* blocks can run several paragraphs; keep them apart without adding a
   trailing gap after the last one */
.legal-content p + p{
  margin-top: 16px;
}

.legal-content ul.list-style-one{
  margin: 20px 0 0;
}


/* notice-hero — full-photo hero with centred message (mensaje-enviado.php,
   error.php). Same bg-layer/dark-overlay anatomy as .page-title, just
   taller and with no breadcrumb, per diseños/mensaje-enviado.jpg and
   diseños/error.jpg.
   ========================================================================== */

.notice-hero{
  position: relative;
  padding: 200px 0px;
  text-align: center;
}

.notice-hero .bg-layer{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.notice-hero .bg-layer:before{
  position: absolute;
  content: '';
  background: #000;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  opacity: 0.55;
}

.notice-hero .content-box{
  position: relative;
  z-index: 1;
}

.notice-hero h1{
  color: #fff;
  font-size: 46px;
  line-height: 56px;
  font-weight: 700;
  margin-bottom: 6px;
}

.notice-hero h1.accent{
  color: var(--theme-color);
}

.notice-hero .divider{
  width: 70px;
  height: 2px;
  background: var(--theme-color);
  margin: 28px auto;
}

.notice-hero p{
  color: rgba(255, 255, 255, 0.75);
  font-size: 17px;
  max-width: 560px;
  margin: 0 auto 30px;
}

.notice-hero .theme-btn{
  margin-top: 10px;
}

@media only screen and (max-width: 767px){
  .notice-hero{
    padding: 120px 0px;
  }

  .notice-hero h1{
    font-size: 32px;
    line-height: 40px;
  }
}


.main-menu .navigation > li a{font-size: 20px!important};


/* about-us-photo — rounded photo under the "Learn More About Us" button
   on the homepage About Us section (includes/quienes-home.php).
   ========================================================================== */

.about-us-photo{
  margin-top: 30px;
}

.about-us-photo img{
  width: 100%;
  display: block;
  border-radius: 20px;
  box-shadow: 0px 20px 60px 0px rgba(0, 0, 0, 0.12);
}


/* intro-section — full-photo intro banner under the homepage video banner
   (includes/intro-home.php). Same bg-layer/dark-overlay anatomy as
   .page-title/.notice-hero, with larger centred white type.
   ========================================================================== */

.intro-section{
  position: relative;
}

.intro-section .bg-layer{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.intro-section .bg-layer:before{
  position: absolute;
  content: '';
  background: #000;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  opacity: 0.6;
}

.intro-section .auto-container{
  position: relative;
  z-index: 1;
}

.intro-section .sec-title h2{
  color: #fff;
  font-size: 48px;
  line-height: 58px;
}

.intro-section .sec-title p{
  color: rgba(255, 255, 255, 0.85);
  font-size: 20px;
  line-height: 32px;
}

@media only screen and (max-width: 767px){
  .intro-section .sec-title h2{
    font-size: 32px;
    line-height: 40px;
  }

  .intro-section .sec-title p{
    font-size: 17px;
    line-height: 28px;
  }
}


/* video-loading — "Loading Video" overlay shown over the vehicle detail
   video (fleet-detalle.php) until the Vimeo iframe finishes loading.
   ========================================================================== */

.video-loading{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 2;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #101010;
}

.video-loading span{
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  animation: video-loading-pulse 1.3s ease-in-out infinite;
}

@keyframes video-loading-pulse{
  0%, 100% {
    opacity: 0.35;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}


/* vehicle-detail-copy — tighter spacing for the fleet-detalle.php content
   column (features list and description directly under the video).
   ========================================================================== */

.vehicle-detail-copy .list-style-one li{
  margin-bottom: 0px;
}

.vehicle-detail-copy .text-box p{
  margin-bottom: 8px;
}

h2.titprin {
    display: block;
    font-size: 28px;
    line-height: 35px;
    font-weight: 800;
}

.colortrue{
  color: #000000!important;
  padding-bottom: 10px;
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25), 0px 0px 24px rgba(201, 162, 76, 0.35);
  letter-spacing: 0.5px;
  animation: colortrue-twinkle 1s ease-in-out infinite;
}

@keyframes colortrue-twinkle{
  0%, 80%, 100% {
    text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25), 0px 0px 24px rgba(201, 162, 76, 0.35);
  }
  90% {
    text-shadow: 0px 3px 10px rgba(0, 0, 0, 0.3), 0px 0px 36px rgba(201, 162, 76, 0.9), 0px 0px 55px rgba(201, 162, 76, 0.5);
  }
}