/* ==================================================
   HERO SECTION
================================================== */

.hero-section{
  position: relative;
  min-height: 80vh;
  padding: 180px 0 120px;
  background-size: cover;
  background-position: center;
}

.hero-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
}

/* ==================================================
   HERO GRID
================================================== */

.hero-cards{
  max-width:1200px;
  margin:auto;
  padding:80px 32px;

  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px;

  position:relative;
  z-index:1;
}

/* ==================================================
   HERO CARD – BASE
================================================== */

.hero-card{
  position:relative;
  border-radius:28px;

  background: #000000a1;
  border:1px solid rgba(255,255,255,.18);

  transition:border-radius .25s ease;
}

/* ==================================================
   CARD MAIN
================================================== */
.card-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
}


.card-main-icon {
  width: 100%;
  height: 220px; /* عدّلها حسب الذوق */
  object-fit: cover;
  border-radius: 20px 20px 0 0;
  display: block;
}
.card-main h3{
  margin:25px;
  font-size:25px;
  font-weight:600;
  color:#e7f9da;
  margin-top: 16px;

}


/* ==================================================
   ARROW
================================================== */

.card-arrow{
  width:50px;
  height:50px;
  margin-top:18px;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  position:relative;
  transition:transform .25s ease;
}

.card-arrow::before{
  content:"";
  position:absolute;
  top:7px;
  left:11px;
  width:25px;
  height:25px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(45deg);
}

/* ==================================================
   DROPDOWN – BASE
================================================== */

.card-dropdown{
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
    border-radius:0 0 22px 22px;
}

/* ==================================================
   DROPDOWN GRID
================================================== */

.dropdown-grid{
  padding:24px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.dropdown-grid a{
  height:90px;
  background:#ffffff;
  border-radius:18px;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:0 8px 24px rgba(0,0,0,.12);
  transition:transform .2s ease;
}

.dropdown-grid a:hover{
  transform:scale(1.06);
}

.dropdown-grid img{
  max-width:70px;
  max-height:70px;
  object-fit:contain;
}

/* ==================================================
   DESKTOP ONLY (Hover Dropdown)
================================================== */

@media (min-width: 993px){

  .hero-card{
    height:400px;
    overflow:visible;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .card-dropdown{
    position:absolute;
    left:-1px;
    right:-1px;
    top:100%;

    opacity:0;
    pointer-events:none;

    transform:translateY(-8px) scaleY(.96);
    transform-origin:top;

    transition:
      opacity .25s ease,
      transform .35s cubic-bezier(.4,0,.2,1);

    z-index:5;
  }

  .hero-card:hover{
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
  }

  .hero-card:hover .card-arrow{
    transform:rotate(180deg);
  }

  .hero-card:hover .card-dropdown{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0) scaleY(1);
  }
}

/* ==================================================
   MOBILE ONLY – TRUE ACCORDION
================================================== */
@media (max-width: 992px){

  .hero-section{
    padding: 120px 0 60px;
    min-height: auto;
  }

  .hero-cards{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 20px;
  }

  .hero-card{
    height: auto;
    overflow: visible;
  }

  /* DROPDOWN – ANIMATED (SAFE) */
  .card-dropdown{
    position: relative;
    margin-top: 16px;

    background: rgba(255,255,255,.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    border-radius: 0 0 22px 22px;

    max-height: 0;
    overflow: hidden;

    opacity: 0;
    transform: translateY(-6px);

    transition:
      max-height .45s cubic-bezier(.4,0,.2,1),
      opacity .25s ease,
      transform .35s ease;
  }

  .hero-card.is-open .card-dropdown{
    max-height: 500px; /* عدّلها لو عندك صفوف أكثر */
    opacity: 1;
    transform: translateY(0);
  }

  .dropdown-grid{
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .dropdown-grid a{
    height: 72px;
    background: #0b160329;
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
  }

  .dropdown-grid img{
    max-width: 54px;
    max-height: 54px;
    opacity: 1;
    filter: none;
  }
}

/* ==================================================
   HEADER OFFSET
================================================== */

:root{
  --sk-header-height:105px;
}

.hero-section{
  margin-top:calc(var(--sk-header-height) * -1);
  padding-top:calc(30px + var(--sk-header-height));
}

html,body{
  margin:0;
  padding:0;
}