/* ============================================================
   BABICHA SECTION — Full CSS
   Compatible with Bootstrap 5 + AOS
   ============================================================ */

/* ── Section wrapper ── */
.babicha-section {
  background-color: #ffffff;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.babicha-relative {
  position: relative;
  z-index: 5;
}


/* ── Feature Icon Hover Effect ── */
.feature-icon {
    width: 70px;
    height: 70px;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #fff;
    border: 1.5px solid transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.feature-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.feature-title {
  font-weight: 600;
  color: #1a1a1a;
  cursor: default;
}

/* Hover Effect: Circle + Primary Shadow */
.feature-wrapper:hover .feature-icon {
  box-shadow: 0 8px 24px rgba(209, 50, 57, 0.4);
  transform: translateY(-4px);
}

.feature-wrapper:hover .feature-icon img {
  transform: scale(1.1);
}

/* ============================================================
   PIXEL-PERFECT COMPOSITION (Final Attempt)
   ============================================================ */
.babicha-composition {
    position: relative;
    width: 100%;
    max-width: 370px;
    height: 370px; /* Fixed height container */
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.comp-item {
    position: absolute;
    bottom: 0; /* SAARI IMAGES KA BASE EK HI HAI */
    object-fit: contain;
}

/* 1. Ground Shadow (Sabse piche) */
.comp-shadow { width: 122%;
    left: -14.5%;
    z-index: 1;
    bottom: -3%; }

/* 2. Boy (Left Side, thoda upar) */
.comp-boy { width: 45%;
    left: 1%;
    bottom: 15%;
    z-index: 1; }

/* 3. Fries (Boy ke peeche aur center mein) */
.comp-fries { 
    width: 40%;
    right: 30%;
    bottom: 40px;
    z-index: 2; 
}

/* 6. Brown Shake (Main focus - Center Front) */
.comp-shake-brown { width: 35%; left: 44%; bottom: 0; z-index: 6; }

/* 5. Matcha Shake (Right Side - Brown shake ke thoda piche) */
.comp-shake-green {     width: 32%;
    right: 3%;
    bottom: 25px;
    z-index: 4;}

/* 5. Ice Cream Cups (Left Front - Boy ke pairon ke aage) */
.comp-icecream { width:70%; left: 2%; bottom: 5px; z-index: 5; }

/* Mobile Screens */
@media (max-width: 767.98px) {
    .babicha-composition {
        max-width: 270px;
        height: 270px; 
        left: 5px;
    }

}