.v-m-bx{
    border: 3px solid var(--c1);
    border-radius: 10px;
}
/* ----------------- number section ------------ */
.num-bx{
  text-align: center;
  height: 100%;
  width: 100%;
}
.num{
  font-size: 58px;
}
.nun-bg{
  background-color: #f1ede1;
}

.btn-ph-num{
  display: flex !important;
}
 .cc-calto-action-ripple {
	background: var(--c1);
	width: 4rem;
	height: 4rem;
	padding: 1rem;
	border-radius: 100%;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	color: #ffffff;
	-webkit-animation: cc-calto-action-ripple 0.6s linear infinite;
	animation: cc-calto-action-ripple 0.6s linear infinite;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	justify-items: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	text-decoration: none; }
.cc-calto-action-ripple i {
	  -webkit-transition: 0.3s ease;
	  transition: 0.3s ease;
	  font-size: 2.2rem; }
 .cc-calto-action-ripple:hover i {
	  -webkit-transform: rotate(135deg);
	  transform: rotate(135deg); }
  
@-webkit-keyframes cc-calto-action-ripple {
  0% {
    -webkit-box-shadow: 0 4px 10px rgba(126, 72, 132, 0.2), 0 0 0 0 rgba(126, 72, 132, 0.2), 0 0 0 5px rgba(126, 72, 132, 0.2), 0 0 0 10px rgba(126, 72, 132, 0.2);
    box-shadow: 0 4px 10px rgba(126, 72, 132, 0.2), 0 0 0 0 rgba(126, 72, 132, 0.2), 0 0 0 5px rgba(126, 72, 132, 0.2), 0 0 0 10px rgba(126, 72, 132, 0.2);
  }
  100% {
    -webkit-box-shadow: 0 4px 10px rgba(126, 72, 132, 0.2), 0 0 0 5px rgba(126, 72, 132, 0.2), 0 0 0 10px rgba(126, 72, 132, 0.2), 0 0 0 20px rgba(126, 72, 132, 0);
    box-shadow: 0 4px 10px rgba(126, 72, 132, 0.2), 0 0 0 5px rgba(126, 72, 132, 0.2), 0 0 0 10px rgba(126, 72, 132, 0.2), 0 0 0 20px rgba(126, 72, 132, 0);
  }
}

@keyframes cc-calto-action-ripple {
  0% {
    -webkit-box-shadow: 0 4px 10px rgba(126, 72, 132, 0.2), 0 0 0 0 rgba(126, 72, 132, 0.2), 0 0 0 5px rgba(126, 72, 132, 0.2), 0 0 0 10px rgba(126, 72, 132, 0.2);
    box-shadow: 0 4px 10px rgba(126, 72, 132, 0.2), 0 0 0 0 rgba(126, 72, 132, 0.2), 0 0 0 5px rgba(126, 72, 132, 0.2), 0 0 0 10px rgba(126, 72, 132, 0.2);
  }
  100% {
    -webkit-box-shadow: 0 4px 10px rgba(126, 72, 132, 0.2), 0 0 0 5px rgba(126, 72, 132, 0.2), 0 0 0 10px rgba(126, 72, 132, 0.2), 0 0 0 20px rgba(126, 72, 132, 0);
    box-shadow: 0 4px 10px rgba(126, 72, 132, 0.2), 0 0 0 5px rgba(126, 72, 132, 0.2), 0 0 0 10px rgba(126, 72, 132, 0.2), 0 0 0 20px rgba(126, 72, 132, 0);
  }
}

/* ============================================================
   ABOUT PAGE CUSTOM STYLES
   ============================================================ */

/* Global Variables (Fallback if index.css missing) */
:root {
    --bg-soft: #FAF7F8;
    --text-primary: #111111;
    --text-secondary: #666666;
}

/* Base Utility Classes */
.py-6 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
@media (min-width: 992px) {
    .py-6 {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
}
.bg-light-soft {
    background-color: var(--bg-soft);
}
.letter-spacing-1 { letter-spacing: 1px; }
.letter-spacing-2 { letter-spacing: 2px; }
.transition-all { transition: all 0.3s ease-in-out; }

/* Typography Overrides */
.font-sans {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* 1. Hero Section */
.about-hero {
    min-height: 80vh;
    background-color: #111;
}
.about-hero-overlay {
    background: linear-gradient(to bottom, rgba(17,17,17,0.7) 0%, rgba(17,17,17,0.4) 100%);
    z-index: 0;
}
.about-hero .breadcrumb-item a {
    transition: color 0.3s ease;
}
.about-hero .breadcrumb-item a:hover {
    color: var(--c1) !important;
}
.about-hero-title {
    font-size: 3.5rem;
    letter-spacing: 2px;
}
@media (min-width: 768px) {
    .about-hero-title { font-size: 5rem; }
}

/* 2. Our Story Section */
.story-image-grid {
    height: 100%;
    min-height: 400px;
}
.story-img-main img {
    border-radius: 4px;
}
.story-img-small-1 {
    position: absolute;
    bottom: -30px;
    right: -20px;
    width: 60%;
    z-index: 2;
}
.story-img-small-2 {
    position: absolute;
    top: 50%;
    left: -30px;
    width: 50%;
    transform: translateY(-50%);
    z-index: 3;
}
@media (max-width: 991px) {
    .story-image-grid {
        margin-bottom: 3rem;
    }
    .story-img-small-1 { right: 10px; bottom: -20px; }
    .story-img-small-2 { left: 10px; }
}
@media (max-width: 576px) {
    .story-image-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: 12px;
    }
    .story-img-main { 
        grid-column: 1 / -1; 
        position: relative; 
    }
    .story-img-main img { 
        height: 280px !important; 
    }
    .story-img-small-1 {
        grid-column: 1 / 2;
        position: relative;
        width: 100%;
        top: auto; right: auto; bottom: auto;
    }
    .story-img-small-2 {
        grid-column: 2 / 3;
        position: relative;
        width: 100%;
        top: auto; left: auto; transform: none;
    }
    .story-img-small-1 img, .story-img-small-2 img {
        height: 160px !important;
        border-width: 2px !important;
    }
}

/* 3. Why AS Mahal */
.why-block {
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.4s ease;
}
.why-block:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
    border-color: rgba(233, 23, 94, 0.1);
}

/* 4. Facilities */
.facility-item {
    cursor: default;
}
.facility-item:hover .facility-icon-wrapper {
    background: var(--c1) !important;
    transform: scale(1.1);
}
.facility-item:hover .facility-img {
    filter: brightness(0) invert(1);
    opacity: 1 !important;
}

/* 5. Our Venue */
.venue-info-block {
    padding-left: 20px;
    border-left: 3px solid rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
.venue-info-block:hover {
    border-left-color: var(--c1);
}
.venue-img-wrapper {
    position: relative;
    cursor: pointer;
}
.venue-img-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(17,17,17,0.2);
    transition: opacity 0.3s ease;
    opacity: 0;
}
.venue-img-wrapper:hover::after {
    opacity: 1;
}
.venue-img-wrapper:hover img {
    transform: scale(1.05);
}
.transition-transform {
    transition: transform 0.6s ease;
}

/* 6. Cinematic Section */
.cinematic-section {
    box-shadow: inset 0 0 100px rgba(0,0,0,0.5);
}

/* 7. Location Section */
.location-card {
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}
.location-card:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
    transform: translateY(-5px);
}

/* Buttons */
.btn-hover-lift {
    transition: all 0.3s ease;
}
.btn-hover-lift:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(233, 23, 94, 0.2);
}
.btn-hover-c1:hover {
    background-color: var(--c1);
    border-color: var(--c1);
    color: white;
}