body{
  margin:0;
  background:#f6f1e8;
  color:#1e1e1e;
}

.logo-card::before{
      background: transparent;
}

.navbar-brand img {
    max-height: 80px;
}


.app-inner{
  background:
linear-gradient(
180deg,
#F7F4EC 0%,
#F0E7D5 100%
);
}

.app-inner::before {
  content: "";
  position: fixed;
  bottom: 0px;
  left: 0;

  width: 120%;
  height: 280px;

  background: linear-gradient(
    90deg,
    rgba(255,215,120,0),
    rgba(255,215,120,0.9),
    rgba(255,255,255,0.7),
    rgba(255,215,120,0)
  );

  border-radius: 50% 50% 0 0;
  filter: blur(35px);
  opacity: 0.7;

  pointer-events: none;
  z-index: 0;

  transform: rotate(-4deg);
    transform: translateY(var(--waveY)) rotate(-4deg);
}



/* =========================================
   Header
========================================= */ 
@media (max-width: 768px){

  .bg-no-repeat{
        background-size: 100%;
  }
  
    
  
  [component-name="medical-departments"]{
    padding-top: 0px;
  }
  
    .h-\[58dvh\] {
      height: 55dvh;
  }

.s-block--bundle-medical-departments {
    margin-top: -60px;
}
  
}


[component-name="medical-departments"]{
  padding-top: 5px;
}

.main-nav-container.has-bg, .main-nav-container.has-bg .sub-menu{
  background-color: #4d4084;
}

.top-navbar{
    background-color: #4d4084;
}


/* =========================================
   Categories
========================================= */ 

.xl\:text-5xl{
 line-height: 1.7;
  font-size: 23px;
}

.header h2{
 margin-top: 0px;
}

.s-block--bundle-medical-departments{
   padding-top: 0;
}

/* =========================================
   categories
========================================= */
.border-\[var\(--color-primary-light\)\]{
  border-color:#f6f1e7;
}

.s-block--categories{
      background: transparent;
}

.s-block--bundle-medical-departments .content{
    padding-top: 5px;
}

/* =========================================
   الزر
========================================= */

.s-button-btn{
    position: relative;

    overflow: hidden;

    border: none !important;

    border-radius: 100px !important;

    height: 58px;

    font-size: 17px;
    font-weight: 700;

    color: #fff !important;

    background:
    linear-gradient(
        135deg,
        #241255 0%,
        #4d2ea0 100%
    ) !important;

    box-shadow:
        0 12px 25px rgba(77,46,160,0.28);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

/* تأثير لامع داخل الزر */

.s-button-btn::before{
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.28),
        transparent
    );

    transform: skewX(-20deg);

    transition: .8s;
}

.s-button-btn:hover::before{
    left: 140%;
}

/* حركة الزر */

.s-button-btn:hover{
    transform: translateY(-3px);

    box-shadow:
        0 18px 40px rgba(77,46,160,0.35);
}


.s-product-card-entry{
  border-radius: 0px 40px 0px 40px !important;
}

/* =========================================
   Footer
========================================= */

.gradient-view-product-footer{
      background:
radial-gradient(circle at top left, rgba(120, 80, 255, 0.25), transparent 35%),
linear-gradient(135deg, #1e1645 0%, #250187 50%, #3b11b8 100%) !important;
}

.store-footer .footer-title-color h3,.text-\[var\(--color-footer-titles\)\] {
    color:#dfd0a5;
}


footer img{
  background-color: white;
    border-radius: 35px;
    margin-bottom: 20px;
  
}



/* =========================
   Custom Category
========================= */
.custom-category-page{
    width:min(1400px,92%);
    margin:auto;
    padding:30px 0 80px;
}

/* =========================
   Hero Banner
========================= */

.custom-hero{
    position:relative;
    overflow:hidden;
    min-height:520px;
    border-radius:35px;
    padding:70px;
    display:flex;
    align-items:center;
    background:
    linear-gradient(135deg,rgba(30,22,69,.95),rgba(37,1,135,.88)),
    url('https://images.unsplash.com/photo-1523381210434-271e8be1f52b?q=80&w=2000&auto=format&fit=crop') center/cover;
    margin-bottom:60px;
}

.custom-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 35%),
    radial-gradient(circle at bottom left, rgba(255,255,255,.10), transparent 40%);
}

.hero-content{
    position:relative;
    z-index:2;
    max-width:700px;
    color:#fff;
}

.hero-badge{
    display:inline-block;
    padding:12px 20px;
    border-radius:100px;
    margin-bottom:25px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.15);
    backdrop-filter:blur(6px);
    font-size:14px;
}

.hero-content h1{
    font-size:clamp(40px,5vw,72px);
    line-height:1.1;
    margin-bottom:22px;
    font-weight:800;
}

.hero-content p{
    font-size:18px;
    line-height:2;
    color:rgba(255,255,255,.85);
}

/* =========================
   Products
========================= */

.medical-hero{
  position:relative;
  overflow:hidden;
  padding:120px 40px;
  background:
  linear-gradient(
    135deg,
    #f7f4ec 0%,
    #efe5d3 100%
  );
}

.medical-hero::before{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  background:radial-gradient(
    circle,
    rgba(170,151,103,.25),
    transparent 70%
  );
  top:-200px;
  left:-120px;
  filter:blur(20px);
}

.hero-container{
  max-width:1300px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:50px;
  position:relative;
  z-index:2;
}

.hero-content h1{
  font-size:58px;
  line-height:1.2;
  margin-bottom:20px;
  color:#2f2b24;
}

.hero-content p{
  font-size:18px;
  line-height:2;
  color:#5e584d;
  margin-bottom:35px;
}

.hero-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 34px;
  border-radius:999px;
  background:#aa9767;
  color:white;
  text-decoration:none;
  font-weight:700;
  transition:.3s;
}

.hero-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(0,0,0,.1);
}

.hero-image img{
  width:100%;
  border-radius:32px;
  object-fit:cover;
  box-shadow:0 25px 60px rgba(0,0,0,.12);
}

/* CATEGORIES */

.medical-sections{
  padding:80px 20px;
}

.section-title{
  text-align:center;
  font-size:38px;
  margin-bottom:50px;
  color:#2f2b24;
}

.category-grid{
  max-width:1300px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:25px;
}

.category-card{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  padding:35px;
  min-height:260px;
  background:white;
  box-shadow:
  0 10px 30px rgba(0,0,0,.05);
  transition:.35s;
}

.category-card:hover{
  transform:translateY(-8px);
}

.category-card::before{
  content:"";
  position:absolute;
  width:220px;
  height:220px;
  background:
  radial-gradient(
    circle,
    rgba(170,151,103,.16),
    transparent 70%
  );
  top:-90px;
  left:-60px;
}

.category-card h3{
  position:relative;
  z-index:2;
  font-size:28px;
  margin-bottom:12px;
}

.category-card p{
  position:relative;
  z-index:2;
  line-height:1.9;
  color:#666;
}

.category-link{
  position:relative;
  z-index:2;
  display:inline-block;
  margin-top:20px;
  color:#aa9767;
  text-decoration:none;
  font-weight:700;
}

/* PRODUCTS */

.products-section{
  padding:90px 20px;
}

.products-grid{
  max-width:1300px;
  margin:auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:24px;
}

.product-card{
  background:white;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.product-card img{
  width:100%;
  height:260px;
  object-fit:cover;
}

.product-info{
  padding:20px;
}

.product-info h4{
  margin:0 0 10px;
  font-size:18px;
}

.product-price{
  color:#aa9767;
  font-weight:700;
  font-size:20px;
}

@media(max-width:900px){

  .hero-container{
    grid-template-columns:1fr;
  }

  .hero-content h1{
    font-size:40px;
  }

}

.lg\:p-8{
      width: 100%;
}