/*
Theme Name: AutoDetail Carvo
Template: autodetail-theme
Description: Site-specific Arabic/RTL presentation for Carvo. Content stays in WordPress and Elementor.
Version: 1.0.13
Text Domain: autodetail-carvo
*/

:root {
  --ad-primary: #e9021e;
  --ad-navy: #121212;
  --ad-dark-2: #222222;
  --ad-dark-3: #333333;
  --ad-heading: #ffffff;
  --ad-text: rgba(255, 255, 255, .7);
  --ad-surface: #222222;
  --ad-container: 1240px;
  --ad-radius: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* The parent theme reserves an extra RTL scrollbar gutter on the left. */
html[dir="rtl"] { scrollbar-gutter: auto !important; }
/* Clip sideways overflow without turning body into a second vertical scroller. */
body { background: var(--ad-navy); margin: 0; color: var(--ad-text); line-height: 1.6; overflow-x: clip !important; overflow-y: visible !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
.screen-reader-text { clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.screen-reader-text:focus { clip: auto; clip-path: none; display: block; height: auto; right: 5px; padding: 12px; top: 5px; width: auto; z-index: 100000; background: #fff; color: #111; }
.ad-main-header .elementor-widget-heading .elementor-heading-title,
.ad-main-footer .elementor-widget-heading .elementor-heading-title { color: #fff; font-weight: 800; margin: 0; }
.ad-main-header .elementor-widget-heading .elementor-heading-title { font-size: clamp(27px, 2.3vw, 36px); }
.ad-main-footer .elementor-widget-heading .elementor-heading-title { font-size: 32px; }
.carvo-service-body .service-description { font-size: 18px; line-height: 1.9; }
.carvo-service-body .service-description h2 { margin: 2.2em 0 .65em; font-size: clamp(27px, 3vw, 38px); }
.carvo-service-body .service-description h2:first-child { margin-top: 0; }
.carvo-service-body .service-description h3 { margin: 1.6em 0 .55em; font-size: clamp(21px, 2.2vw, 27px); }
.carvo-service-body .service-description p { margin-bottom: 1.1em; }
.carvo-service-body .service-description ul,
.carvo-service-body .service-description ol { padding-inline-start: 1.5em; margin: 0 0 1.4em; }
.carvo-service-body .service-description li { margin-bottom: .5em; }
.carvo-service-body .service-description a { color: var(--ad-primary); text-decoration: underline; }

/* Home 03: the original video hero, with every text and media field in Elementor. */
body.home .ad-main-header { background: transparent !important; }
body.home .ad-hero-section { margin-top: -86px !important; }
body.home .elementor-710 > .e-con + .e-con { margin-block-start: 4em !important; }
.ad-video-hero { isolation: isolate; position: relative !important; min-height: calc(100vh + 66px); min-height: calc(100svh + 66px); display: flex; align-items: center; justify-content: center; background-color: #111; background-position: center; background-size: cover; }
.ad-hero-video__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ad-video-hero > .gradient-edge-bottom, .ad-video-hero > .sw-overlay { position: absolute; inset: 0; pointer-events: none; }
.ad-video-hero > .sw-overlay { background: rgba(0,0,0,.38); }
.ad-video-hero > .gradient-edge-bottom { height: 100% !important; background: linear-gradient(0deg, #111 0%, rgba(17,17,17,.88) 17%, rgba(17,17,17,.28) 48%, transparent 75%); }
.ad-hero-video__content { position: relative; z-index: 2; width: 100%; max-width: 1100px; text-align: center; padding: clamp(130px, 16svh, 170px) 24px 64px; }
.ad-hero-video__content .subtitle { margin-bottom: 12px; color: #fff; }
.ad-hero-video__title { margin: 0 auto 20px; max-width: 1000px; font-size: clamp(54px, 6vw, 84px); line-height: 1.12; font-weight: 800; }
.ad-hero-video__description { max-width: 520px; margin: 0 auto 28px; font-size: 17px; line-height: 1.75; color: rgba(255,255,255,.86); }
.ad-video-hero .btn-main.btn-line { background: transparent; border: 1px solid rgba(255,255,255,.9); }
.ad-video-hero .btn-main.btn-line:hover { background: var(--ad-primary); border-color: var(--ad-primary); }
@media (prefers-reduced-motion: reduce) { .ad-hero-video__media { display: none; } }

/* Logo carousel from the HTML demo; the images remain editable in Elementor. */
.ad-brand-carousel-section { min-height: 150px; padding: 16px 24px !important; align-items: center; background: #171717; }
.ad-brand-carousel-component { max-width: 1240px; }
.ad-brand-carousel__slide { height: 110px; display: flex; align-items: center; justify-content: center; }
.ad-brand-carousel__image { width: 110px; height: 110px; max-width: none; max-height: none; object-fit: contain; opacity: .84; transition: opacity .25s ease; }
.ad-brand-carousel__slide:hover .ad-brand-carousel__image { opacity: 1; }

/* The HTML source uses a separate background and foreground car image. */
.ad-car-showcase { min-height: 520px; background-position: center !important; background-size: cover !important; background-attachment: fixed !important; position: relative; justify-content: center; align-items: center; padding: 58px 24px !important; }
.ad-car-showcase::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #111 0%, rgba(0,0,0,.74) 24%, rgba(0,0,0,.62) 80%, #111 100%); pointer-events: none; }
.ad-car-showcase > .elementor-widget-image { width: min(100%, 1040px) !important; max-width: 1040px !important; position: relative; z-index: 1; }
.ad-car-showcase .elementor-widget-image img { width: 100%; height: auto; object-fit: contain; }

/* Bring the Why Carvo block back to the source's centered, four-card composition. */
.ad-why-section .ad-why-us-component { width: min(calc(100% - 48px), 1240px); margin: 0 auto; padding: 20px 0 8px; }
.ad-why-section .ad-why-us-component > .container { max-width: 100%; }
.ad-why-section .ad-why-us-component > .container > .row:first-child { margin-bottom: 34px !important; }
.ad-why-section .ad-why-us-component h2 { font-size: clamp(33px, 3.3vw, 52px); line-height: 1.22; margin: 8px 0 17px; }
.ad-why-section .ad-why-us-component .col-lg-6 > p { font-size: 17px; line-height: 1.85; }
.ad-why-section .ad-why-us-component > .container > .row:last-child { counter-reset: carvo-benefit; }
.ad-why-section .ad-why-us-component > .container > .row:last-child > div { counter-increment: carvo-benefit; }
.ad-why-section .ad-why-us-component > .container > .row:last-child > div > div { min-height: 230px; height: 100%; border-top: 2px solid var(--ad-primary); transition: transform .25s ease, background .25s ease; }
.ad-why-section .ad-why-us-component > .container > .row:last-child > div > div:hover { transform: translateY(-6px); background: #292929; }
.ad-why-section .ad-why-us-component > .container > .row:last-child > div .relative::before { content: '0' counter(carvo-benefit); color: var(--ad-primary); font-weight: 800; font-size: 30px; display: block; margin-bottom: 24px; }
.ad-why-section .ad-why-us-component h4 { font-size: 23px; line-height: 1.35; }

/* A compact eight-photo strip now leads straight into the footer. */
.ad-instagram-section { padding: 0 !important; }
.ad-instagram-section .ad-instagram-component { padding-top: 40px !important; }
.ad-instagram-section .ad-photo-strip__item { flex: 0 0 12.5%; max-width: 12.5%; }
.ad-instagram-section .ad-photo-strip__item img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.ad-faq-section { padding-bottom: 60px !important; }
@media (max-width: 991px) { .ad-instagram-section .ad-photo-strip__item { flex-basis: 25%; max-width: 25%; } }
@media (max-width: 767px) {
  body.home .ad-hero-section { margin-top: -68px !important; }
  .ad-video-hero { min-height: calc(100vh + 48px); min-height: calc(100svh + 48px); }
  .ad-hero-video__content { padding: 110px 20px 48px; }
  .ad-hero-video__title { font-size: clamp(36px, 9vw, 56px); line-height: 1.17; }
  .ad-hero-video__description { font-size: 15px; }
  .ad-car-showcase { min-height: 300px; padding: 32px 16px !important; }
  .ad-car-showcase { background-attachment: scroll !important; }
  .ad-brand-carousel-section { min-height: 115px; padding: 10px 12px !important; }
  .ad-brand-carousel__slide { height: 90px; }
  .ad-brand-carousel__image { width: 80px; height: 80px; }
  .ad-why-section .ad-why-us-component { width: min(calc(100% - 36px), 1240px); }
  .ad-why-section .ad-why-us-component > .container > .row:last-child > div > div { min-height: 190px; }
  .ad-instagram-section .ad-photo-strip__item { flex-basis: 25%; max-width: 25%; }
}
@media (max-width: 520px) { .ad-instagram-section .ad-photo-strip__item { flex-basis: 50%; max-width: 50%; } }

/* services.html: hero -> image grid -> full-width CTA, with no extra intro panels. */
.carvo-archive-grid { background: #171717; padding: 80px 24px; }
.carvo-archive-grid .ad-services-component { width: min(100%, 1240px); margin-inline: auto; }
.carvo-archive-grid .ad-services-component > .row { align-items: stretch; }
.carvo-archive-grid .hover { height: 100%; }
.carvo-archive-grid .hover > img { height: 360px; object-fit: cover; }
.carvo-archive-cta { background: var(--ad-primary); padding: 55px 24px; }
.carvo-archive-cta .ad-cta-box { background: transparent !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none; width: min(100%, 1240px); margin-inline: auto; }

/* service-single.html layout, built from ordinary editable Elementor sections. */
.carvo-svc-hero { display: flex !important; flex-direction: row !important; align-items: stretch !important; min-height: 590px; background: #141414; padding: 0 !important; }
.single-ad_service .ad-elementor-content { margin: 0 !important; padding: 0 !important; }
.carvo-svc-hero-media, .carvo-svc-hero-copy { flex: 1 1 50%; min-width: 0; }
.carvo-svc-hero-media { padding: 0 !important; }
.carvo-svc-hero-media .elementor-widget-image, .carvo-svc-hero-media .elementor-widget-container { height: 100%; }
.carvo-svc-hero-media img { width: 100%; height: 100%; min-height: 590px; object-fit: cover; }
.carvo-svc-hero-copy { display: flex !important; justify-content: center !important; padding: 110px max(28px, calc((100vw - 1240px) / 2)) 70px 6vw !important; }
.carvo-svc-hero-copy h1 { color: #fff; font-size: clamp(34px, 4.5vw, 66px); line-height: 1.14; }
.carvo-svc-hero-copy p { max-width: 580px; font-size: 18px; line-height: 1.8; }
.carvo-svc-hero-copy .elementor-button { background: var(--ad-primary); border-radius: 4px; padding: 16px 25px; }
.carvo-svc-features { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 45px; width: 100%; padding: 90px max(24px, calc((100vw - 1240px) / 2)) !important; }
.carvo-svc-feature h3 { color: #fff; font-size: 26px; }
.carvo-svc-feature ul { list-style: none; padding: 0; margin: 0; }
.carvo-svc-feature li { position: relative; padding-inline-start: 27px; margin: 0 0 15px; line-height: 1.7; }
.carvo-svc-feature li::before { content: '✓'; color: var(--ad-primary); position: absolute; inset-inline-start: 0; font-weight: 800; }
.carvo-svc-steps { padding: 86px max(24px, calc((100vw - 1240px) / 2)) !important; }
.carvo-svc-steps-title { align-items: center !important; text-align: center; margin-bottom: 40px; }
.carvo-svc-steps-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 28px; }
.carvo-svc-step { text-align: center; align-items: center !important; }
.carvo-svc-step-num { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--ad-primary); color: #fff; font-size: 27px; font-weight: 800; margin-bottom: 20px; }
.carvo-svc-step h4 { color: #fff; font-size: 21px; line-height: 1.5; }
.carvo-svc-article { padding: 80px max(24px, calc((100vw - 1050px) / 2)) !important; gap: 10px; }
.carvo-svc-article-section h2 { color: #fff; font-size: clamp(26px, 3vw, 36px); margin-bottom: 8px; }
.carvo-svc-article-section p { font-size: 18px; line-height: 1.9; margin-bottom: 0; }
.carvo-svc-article > .elementor-widget-heading:not(:first-child) { margin-top: 40px; }
.carvo-svc-article h2 { color: #fff; font-size: clamp(26px, 3vw, 36px); }
.carvo-svc-article .elementor-widget-text-editor { font-size: 18px; line-height: 1.9; }
.carvo-svc-article .elementor-widget-text-editor h3 { color: #fff; font-size: 23px; margin: 25px 0 12px; }
.carvo-svc-article .elementor-widget-text-editor p { margin-bottom: 17px; }
.carvo-svc-article .elementor-widget-text-editor ul,
.carvo-svc-article .elementor-widget-text-editor ol { padding-inline-start: 1.6em; margin-bottom: 22px; }
.carvo-svc-faq { background: #222; padding: 85px max(24px, calc((100vw - 1240px) / 2)) !important; }
.carvo-svc-cta { background: var(--ad-primary); padding: 55px max(24px, calc((100vw - 1240px) / 2)) !important; }
.carvo-svc-cta .ad-cta-box { background: transparent !important; padding: 0 !important; border-radius: 0 !important; }
@media (max-width: 991px) {
  .carvo-svc-hero { flex-direction: column !important; }
  .carvo-svc-hero-media img { min-height: 320px; max-height: 480px; }
  .carvo-svc-hero-copy { padding: 48px 24px !important; }
  .carvo-svc-features { grid-template-columns: 1fr 1fr; gap: 28px; padding-block: 60px !important; }
  .carvo-svc-steps-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .carvo-archive-grid { padding: 55px 18px; }
  .carvo-archive-grid .hover > img { height: 320px; }
  .carvo-svc-features, .carvo-svc-steps-grid { grid-template-columns: 1fr; }
  .carvo-svc-features, .carvo-svc-steps, .carvo-svc-article, .carvo-svc-faq { padding-block: 56px !important; }
}