/* ============================================================
   HOME.CSS — page-specific styles for index.php:
   the hero background image, and the Products teaser's image
   icons + "View All Products" CTA (the shared .products-grid /
   .product-tile card design itself lives in components.css and
   is left untouched).
   ============================================================ */
:root{
  --hero-bg-image: url('../img/hero_banner.jpg');
}

/* ===== PRODUCTS TEASER — image icons (replacing the previous SVG icons) ===== */
.product-tile .icon img{width:100%; height:100%; object-fit:contain; border-radius:inherit;}

/* ===== PRODUCTS TEASER — "View All Products" CTA ===== */
.products-cta{text-align:center; margin-top:40px;}

/* ===== SERVICES SLIDER =====
   Scoped under #services so the shared .service-card component
   (also used as-is by about/contact/offers/direct-plus.php) is
   never modified — only the homepage's slider context changes. */
.services-slider-wrap{position:relative;}
#services .services-track{
  display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:4px 4px 12px; margin:0 -4px -8px;
  scrollbar-width:none; -ms-overflow-style:none;
}
#services .services-track::-webkit-scrollbar{display:none;}
#services .services-track .service-card{
  flex:0 0 calc((100% - 2 * 24px) / 3); min-width:0; scroll-snap-align:start;
}
/* .service-card-image / .service-card-actions / .service-whatsapp-btn now
   live in components.css — services.php's static grid reuses them too. */

@media(max-width:1100px){
  #services .services-track .service-card{flex:0 0 calc((100% - 24px) / 2);}
}
@media(max-width:700px){
  #services .services-track .service-card{flex:0 0 100%;}
}

.slider-arrows{display:flex; justify-content:center; gap:14px; margin-top:28px;}
.slider-arrow{
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--line); background:#fff; color:var(--teal);
  display:flex; align-items:center; justify-content:center;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.slider-arrow svg{width:18px; height:18px;}
.slider-arrow:hover{background:var(--teal); border-color:var(--teal); color:#fff;}

/* ===== SERVICES TEASER — "View All Services" CTA ===== */
.services-cta{text-align:center; margin-top:32px;}

/* ===== ARABIC / RTL ===== */
html[dir="rtl"] #services .services-track{direction:rtl;}
html[dir="rtl"] .slider-arrow svg{transform:rotate(180deg);}

.offer-bg{
    background-color: #063335;
    inset: 0;
    position: absolute;
    opacity: 0.5;
    z-index: 1;
}

.offer-content{
    z-index:2;
}