@charset "UTF-8";
/* =====================================================================
   Qode — EY-style refinement layer
   ---------------------------------------------------------------------
   Load this file AFTER style.css (and after the responsive file).
   It only refines TYPOGRAPHY, SPACING, MOTION, BUTTONS and CARDS.
   Brand colors are NOT changed — it reuses your existing variables
   (--primaryColor, --SecondaryColor, --ThirdColor, --mainColor*).
   ===================================================================== */

/* Plus Jakarta Sans is already in your main @import — kept here so the
   file also works if loaded on its own. Remove if you want to avoid
   double-loading. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

:root {
  --heading-font: "Plus Jakarta Sans", "Lato", sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-soft: 0 10px 30px -12px rgba(16, 24, 32, 0.18);
  --shadow-hover: 0 20px 40px -16px rgba(16, 24, 32, 0.28);
  --section-space: clamp(4rem, 8vw, 8rem);
  --radius-clean: 14px;
}

html[lang="ar"] {
  --heading-font: "Cairo", sans-serif;
}

/* ------------------------------------------------------------------ */
/* 1) TYPOGRAPHY — confident hierarchy, tight leading (EY signature)    */
/* ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6,
.h4-home, .h5-home, .h5, .h6,
.header h2, .Discover, .card h4, .card .h4 {
  font-family: var(--heading-font);
  letter-spacing: -0.015em;
}

/* Arabic must NOT use negative tracking (it breaks letter joining) */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] h4, html[lang="ar"] h5, html[lang="ar"] h6,
html[lang="ar"] .h4-home, html[lang="ar"] .h5-home,
html[lang="ar"] .h5, html[lang="ar"] .h6,
html[lang="ar"] .header h2, html[lang="ar"] .card h4 {
  letter-spacing: 0;
}

/* Big hero heading */
.h4-home {
   font-size: 3.25rem;;
  line-height: 1.06;
  font-weight: 700;
}

.h5-home {
  line-height: 1.1 !important;
  font-weight: 700;
}

/* Tighten the very loose leading coming from the base file */
h3 {
  line-height: 1.18 !important;
  text-transform: none; /* EY uses sentence case, not Capitalize */
  font-weight: 700;
}

.header h2 {
  line-height: 1.12;
  font-weight: 700;
}

h4, .card h4, .card .h4 {
  line-height: 1.3;
  font-weight: 600;
}

h6, .h6 {
  line-height: 1.35 !important;
  font-weight: 600;
}

/* Eyebrow / small label above a heading */
h3.small-title {
  line-height: 1.4 !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
html[lang="ar"] h3.small-title {
  letter-spacing: 0;
}

/* Body: comfortable leading. Add .lead-measure on long paragraphs */
p { line-height: 1.7; }

/* ------------------------------------------------------------------ */
/* 2) SPACING RHYTHM — more breathing room around sections             */
/* ------------------------------------------------------------------ */
.section { padding-block: var(--section-space); }

/* helpers you can drop on any <section> in the HTML later */
.ey-space    { padding-block: var(--section-space); }
.ey-space-sm { padding-block: clamp(2.5rem, 5vw, 4rem); }

/* ------------------------------------------------------------------ */
/* 3) BUTTONS — clean, calm, purposeful (no jumpy hover)               */
/* ------------------------------------------------------------------ */
a.btn, button.btn {
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding-inline: 1.6rem;
  padding-block: 0.7rem;
  transition: transform 0.25s var(--ease-out),
              box-shadow 0.25s var(--ease-out),
              background-color 0.25s var(--ease-out),
              color 0.25s var(--ease-out) !important;
}

/* replaces the base 0.9s transition + translateY(-15%) jump */
.btn:not(.btn-service, .btn-login):hover,
button.bg-primary-color:not(.btn-service, .btn-login):hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-hover);
  /* hover state = a slightly deeper shade of YOUR primary, not a new color */
  background-color: color-mix(in srgb, var(--primaryColor) 88%, black) !important;
  color: var(--mainColor4) !important;
}

/* ------------------------------------------------------------------ */
/* 4) CARDS — unified, minimal, soft shadow                            */
/* ------------------------------------------------------------------ */
.card {
  border: 1px solid rgba(16, 24, 32, 0.08);
  border-radius: var(--radius-clean);
  box-shadow: var(--shadow-soft);
  transition: transform 0.35s var(--ease-out),
              box-shadow 0.35s var(--ease-out) !important;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover) !important;
}
/* If an image-only card looks boxed, add class .no-frame to it */
.card.no-frame { border: 0; box-shadow: none; }

/* ------------------------------------------------------------------ */
/* 5) MOTION — subtler, faster image zoom (scale 1.1 -> 1.04)          */
/* ------------------------------------------------------------------ */
.img-card img,
.img-card-container img,
.img-container img {
  transition: transform 0.6s var(--ease-out) !important;
}
.img-card:hover img,
.img-card-container img:hover,
.img-container img:hover {
  transform: scale(1.04) !important;
}
.gray-div:hover { transform: scale(1.02); }

/* ------------------------------------------------------------------ */
/* 6) HERO — readable text, optional EY-style left gradient            */
/* ------------------------------------------------------------------ */
.carousel-caption { text-shadow: 0 1px 20px rgba(0, 0, 0, 0.25); }

/* Add class .hero-gradient to the hero image wrapper for legible text */
.hero-gradient { position: relative; }
.hero-gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
              rgba(0, 0, 0, 0.55) 0%,
              rgba(0, 0, 0, 0.15) 45%,
              transparent 75%);
  z-index: 0;
  pointer-events: none;
}
html[lang="ar"] .hero-gradient::after {
  background: linear-gradient(270deg,
              rgba(0, 0, 0, 0.55) 0%,
              rgba(0, 0, 0, 0.15) 45%,
              transparent 75%);
}
/* ------------------------------------------------------------------ */
/* 7) HERO CONTROLS — grouped circular buttons (EY-style)              */
/* ------------------------------------------------------------------ */
.hero-controls , .dots-slider {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  cursor:pointer;
  gap: 0.6rem;
  bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.hero-controls {
  inset-inline-end: clamp(1rem, 5vw, 4rem); 
}
 .dots-slider {
margin-inline:103.2px
}

.hero-controls .ctrl {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(20, 22, 22, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.hero-controls .ctrl:hover {
  background: var(--primaryColor);
  transform: translateY(-2px);
}

.hero-controls .ctrl svg { width: 20px; height: 20px; }

html[lang="ar"] .hero-controls .ctrl-arrow svg { transform: scaleX(-1); }
body:has(button.scroll-to-top) .navbar-expand-lg .navbar-brand img{
    transform: scale(1.3);
}
body:has(button.scroll-to-top.visible) .navbar-expand-lg .navbar-brand img{
    transform: scale(1);
}
body:has(button.scroll-to-top) .navbar-expand-lg .navbar-brand{
    -webkit-transition: all .8s ease-in-out;
    transition: all .8s ease-in-out;
}
div:not(.text-center) p:not(.text-center){
    text-align: justify;
}

.object-fit-contain{
    object-fit:contain
}

@media only screen and (max-width: 991px) {
.dots-slider {

    margin-inline:unset;
    bottom: unset;
    top:20%;
}
.hero-controls {
    inset-inline-start: clamp(1rem, 5vw, 1rem);

}
}


.carousel-indicators.dots-slider [data-bs-target] {
    box-sizing: content-box;
    flex: unset;
     width:unset; 
     height:unset; 
    padding: 0;
     margin-right:unset; 
    margin-left: unset;
     text-indent:unset; 
    cursor: pointer;
    background-color: unset;
    background-clip: unset;
    border: 0;
    border-top: unset;
    border-bottom: unset;
    transition: opacity .6s ease
}
 .dots-slider button{
position:relative;

}
 .dots-slider button::after{
  content: '';
  position: absolute;
  width: 0%;
  height: 3px;
  top: -5px;
  background: var(--primaryColor);
  transition: all 0.5s ease-out;
  z-index: 111;
  display: flex;
}
 .dots-slider.carousel-indicators.dots-slider [data-bs-target]{
  opacity:0.9;
}
 .dots-slider button.active{
  opacity:1;
}
 .dots-slider button.active::after{
  width: 80%;
}
.carousel-indicators.dots-slider .active {
     width: auto !important; 
}
.carousel-indicators.dots-slider .active {
    background-color: unset !important;
}
.ctrl-play .icon-play {
    display: none;
}

.ctrl-play .icon-pause {
    display: block;
}

.hero-controls.is-paused .icon-pause {
    display: none;
}

.hero-controls.is-paused .icon-play {
    display: block;
}