/* About Hero Section Background with Gradient */
.about-hero-bg {
	position: relative;
	min-height: 70vh;
	overflow: hidden;
	background: linear-gradient(90deg, #fff 10%, var(--base-sv-color) 110%);
}

/* Background Image - في الزاوية السفلية اليسرى بحجم متوسط */
.about-section-bg-image {
	position: absolute;
	bottom: 0;
	left: 0;
	width: auto;
	height: 90%;
	max-width: 45%;
	object-fit: contain;
	object-position: left bottom;
	z-index: 0;
}



/* About page spacing and cards */



.branch-square-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  border-color: var(--base-sv-color);
}
.branch-square-card {
  background: #fff;
  border-radius: 0;
  transition: all 0.3s ease;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.sticky-wrapper {
    position: sticky;
    top: 100px; /* المسافة من الأعلى */
  }
  
  .sticky-img {
    max-height: 450px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    border: 2px solid #eee;
    transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
    will-change: transform;
    width: 80%;
    
  }
  
/* Ensure sticky works inside the flex row */
.row.align-items-start { overflow: visible; }

/* Apply sticky to the Bootstrap column for reliable behavior on desktops */
@media (min-width: 768px) {
  .row.align-items-start .col-md-4 { position: sticky; top: 100px; align-self: flex-start; }
  .sticky-wrapper { position: static; top: auto; }
}

@media (min-width: 992px) {
  .sticky-img { width: 72%; max-height: 380px; }
}

/* Progressive enhancement: subtle scale while scrolling (supported browsers only) */
@supports (animation-timeline: scroll()) {
  @keyframes stickyScale {
    from { transform: scale(1.05); }
    to { transform: scale(1); }
  }
  .sticky-img {
    animation: stickyScale linear both;
    animation-timeline: scroll(root block);
    animation-range: 0% 30%;
  }
}

/* Fancy card styles for Services section */
.fancy-card {
  background: #eee;
  width: 100%;
  display: block;
  position: relative;
  box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transition: all 250ms ease-in;
  min-height: 260px;
  background-size: cover;
  background-position: center center;
  border-radius: 0;
  overflow: hidden;
}
.fancy-card .bg-overlay {
  background: rgba(0,0,0,0.25);
  position: absolute;
  inset: 0;
  transition: all 200ms linear;
}
.fancy-card .content {
  padding: 24px 28px;
  color: #fff;
  text-align: center;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fancy-card .content .primary {
  text-transform: none;
  width: 100%;
  transition: all 250ms ease-out 200ms;
  opacity: 1;
  transform: translate3d(0,0,1px);
}

.fancy-card .content .secondary {
  position: absolute;
  opacity: 0;
  left: 0;
  right: 0;
  transform: translate3d(0,30px,1px);
  transition: all 200ms linear 0ms;
  padding-inline: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.fancy-card .button {
  border: 1px solid #fff;
  padding: 6px 10px;
  display: inline-block;
  border-radius: 3px;
  margin: 10px auto 0;
  color: #fff;
}
.fancy-card .v-border,
.fancy-card .h-border {
  position: absolute;
  inset: 0;
}
.fancy-card .v-border:before,
.fancy-card .v-border:after {
  width: 0%;
  height: 1px;
  left: 50%;
  transition: all 250ms ease-out;
  background: #fff;
  content: '';
  position: absolute;
}
.fancy-card .v-border:before { top: 10%; }
.fancy-card .v-border:after { bottom: 10%; }
.fancy-card .h-border:before,
.fancy-card .h-border:after {
  height: 0%;
  top: 50%;
  width: 1px;
  transition: all 250ms ease-out;
  background: #fff;
  content: '';
  position: absolute;
}
.fancy-card .h-border:before { left: 10%; }
.fancy-card .h-border:after { right: 10%; }

.fancy-card:hover .v-border:before,
.fancy-card:hover .v-border:after,
.fancy-card:active .v-border:before,
.fancy-card:active .v-border:after { width: 90%; left: 5%; }

.fancy-card:hover .h-border:before,
.fancy-card:hover .h-border:after,
.fancy-card:active .h-border:before,
.fancy-card:active .h-border:after { height: 90%; top: 5%; }


.fancy-card:hover .content .primary,
.fancy-card:active .content .primary {
  opacity: 0;
  transform: translate3d(0,20px,1px);
  transition: all 200ms linear 0ms;
}
.fancy-card:hover .content .secondary,
.fancy-card:active .content .secondary {
  opacity: 1;
  transform: translate3d(0,0,1px);
  transition: all 200ms linear 200ms;
}
.fancy-card:hover .bg-overlay,
.fancy-card:active .bg-overlay { background: rgba(0,0,0,0.55); }

/* Background variants for services */
/* 
 * قياس الصور الموصى به للخدمات (fancy-card):
 * 
 * القياس المثالي: 800×600 بكسل (نسبة 3:2)
 * أو: 1000×600 بكسل للحصول على جودة أفضل
 * أو: 1200×800 بكسل للجودة العالية
 * 
 * ملاحظات:
 * - البطاقة المدمجة (fancy-compact): min-height: 160px
 * - Grid: 4 بطاقات على desktop (25% عرض)، 3 على tablet، 2 على mobile
 * - background-size: cover - الصورة تغطي كامل البطاقة
 * - الصورة يجب أن تكون أكبر من البطاقة لضمان جودة عالية عند التكبير
 * 
 * القياسات الفعلية للبطاقات:
 * - Desktop (lg): ~285px عرض × 160px ارتفاع
 * - Tablet (md): ~240px عرض × 160px ارتفاع  
 * - Mobile: ~270px عرض × 160px ارتفاع
 */
.fancy-bg-car { background-image: url('/static/car.jpg'); }
.fancy-bg-health { background-image: url('/static/health.jpg'); }
.fancy-bg-about { background-image: url('/static/about.jpg'); }
.fancy-bg-fire { background-image: url('/static/bnr_3.png'); }
.fancy-bg-travel { background-image: url('/static/slider-3.jpg'); }
.fancy-bg-reins { background-image: url('/static/bnr_4.png'); }

/* Read more link styling */
.fancy-card .secondary .read-more {
  display: block;
  margin-top: 12px;
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(10px);
}

.fancy-card:hover .secondary .read-more,
.fancy-card:active .secondary .read-more {
  opacity: 1;
  transform: translateY(0);
  transition: all 200ms linear 300ms;
}

.fancy-card .secondary .read-more .arrow {
  display: inline-block;
  margin-right: 0.5rem;
  transition: transform 0.3s ease;
}

.fancy-card .secondary .read-more:hover {
  color: var(--base-color, #5AB848);
}

.fancy-card .secondary .read-more:hover .arrow {
  transform: translateX(-4px);
}

/* Compact variant for denser grids */
.fancy-card.fancy-compact { min-height: 160px; }
.fancy-card.fancy-compact .content { padding: 14px 0px; }
.fancy-card.fancy-compact h5 { font-size: 0.95rem; }
.fancy-card.fancy-compact h6 { font-size: 0.85rem; }
.fancy-card.fancy-compact .secondary .read-more {
  font-size: 0.8rem;
  margin-top: 8px;
}