/* === BEGIN styles.css === */
/* ==============================================
   DIPR - Custom Styles
   ============================================== */

:root{
  --accent: #F3B21C; /* yellow bar */
  --text: #1a1a1a;
  --muted: #6b6b6b;
  --border: #F3B21C;
}

html {
  overflow-x: hidden;
  width: 100%;
}

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; 
  color: var(--text); 
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

/* ==============================================
   NAVIGATION
   ============================================== */

.navbar{
  font-size:.9rem; 
  letter-spacing:.2px; 
  z-index: 1050;
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #fff;
}

.navbar.sticky-top {
  position: sticky !important;
  top: 0 !important;
  z-index: 1050 !important;
}

.navbar .nav-link{
  padding:.5rem .8rem
}

.brand-small{
  font-weight:800; 
  letter-spacing:.5px
}

.navbar.scrolled {
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

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

/* === Desktop hero: keep exact 16:9 ratio === */
@media (min-width: 992px){
  .hero{
    position: relative;
    width: 100%;
    /* kill the old vh sizing on desktop */
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden;
  }

  /* Aspect ratio shim (16:9) */
  .hero::before{
    content: "";
    display: block;
    padding-top: 56.25%; /* 9/16 = 0.5625 */
  }

  /* Make the video fill that ratio box */
  .hero > video{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* use 'contain' if you want no cropping with letterbox */
    transform: none;     /* cancel any translate used for vh-centering */
  }

  /* Keep your existing gradient overlay working above the video */
  .hero::after{
    position: absolute;  /* ensure it's positioned over the ratio box */
    inset: 0;
    z-index: 1;
  }
}


/* ==============================================
   TYPOGRAPHY & SECTIONS
   ============================================== */

.section-title{ 
  font-weight:900; 
  letter-spacing:.5px; 
  text-transform:uppercase; 
  font-size: clamp(1.5rem, 5vw, 3rem); 
  color:#333
}

.lead-big{
  font-weight:900; 
  font-size: clamp(2rem, 8vw, 4rem); 
  text-transform:uppercase; 
  letter-spacing:.4px
}

.testimonial-heading {
  font-size: clamp(1.5rem, 5vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 2rem;
  letter-spacing: 0.5px;
  color: #333;
}

/* Work in Focus heading consistency */
.work-focus-heading {
  font-size: clamp(1.5rem, 5vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #333;
  margin-bottom: 2rem;
}

/* ==============================================
   KPI SECTION - ELEGANT REDESIGN
   ============================================== */

.kpi-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #fafafa 0%, #ffffff 50%, #f8f8f8 100%);
  position: relative;
  overflow: hidden;
}

.kpi-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
  opacity: 0.3;
}

.kpi-section::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
  opacity: 0.3;
}

/* Elegant Section Titles */
.section-title-elegant {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #d4af37;
  margin-bottom: 16px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

.section-title-elegant.in {
  opacity: 1;
  transform: translateY(0);
}

.lead-elegant {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #1a1a1a;
  margin-bottom: 60px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s cubic-bezier(0.16, 0.68, 0.43, 0.99) 0.1s;
}

.lead-elegant.in {
  opacity: 1;
  transform: translateY(0);
}

/* KPI Grid Layout */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 768px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

@media (min-width: 1024px) {
  .kpi-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}

/* KPI Card Design */
.kpi-card {
  opacity: 0;
  transform: translateY(40px) scale(0.9);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kpi-card.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.kpi-card-inner {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(212, 175, 55, 0.15);
  border-radius: 12px;
  padding: 40px 30px;
  text-align: center;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.kpi-card-inner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.kpi-card:hover .kpi-card-inner::before {
  opacity: 1;
}

.kpi-card-inner::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.kpi-card:hover .kpi-card-inner::after {
  width: 300px;
  height: 300px;
}

/* KPI Icon */
.kpi-icon {
  margin-bottom: 24px;
  color: #d4af37;
  opacity: 0;
  transform: scale(0) rotate(-180deg);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.kpi-card.in .kpi-icon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  transition-delay: 0.2s;
}

.kpi-icon svg {
  filter: drop-shadow(0 2px 8px rgba(212, 175, 55, 0.2));
  animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

.kpi-card:hover .kpi-icon svg {
  animation: iconPulse 1.5s ease-in-out infinite;
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* KPI Number */
.kpi-number {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}

.kpi-card.in .kpi-number {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.kpi-card:hover .kpi-number {
  color: #d4af37;
  transform: scale(1.05);
}

/* KPI Label */
.kpi-label {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #666;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.16, 0.68, 0.43, 0.99);
  max-width: 90%;
  margin: 0 auto;
}

.kpi-card.in .kpi-label {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

/* Shine Effect */
.kpi-shine {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 70%
  );
  transform: translateX(-100%) translateY(-100%) rotate(45deg);
  transition: transform 0.8s ease;
}

.kpi-card:hover .kpi-shine {
  transform: translateX(100%) translateY(100%) rotate(45deg);
}

/* Hover Effects */
.kpi-card:hover .kpi-card-inner {
  transform: translateY(-8px);
  border-color: rgba(212, 175, 55, 0.3);
  box-shadow: 0 12px 40px rgba(212, 175, 55, 0.15);
}

/* Mobile Optimizations */
@media (max-width: 767px) {
  .kpi-section {
    padding: 60px 0;
  }
  
  .lead-elegant {
    margin-bottom: 40px;
  }
  
  .kpi-grid {
    gap: 24px;
    padding: 0 16px;
  }
  
  .kpi-card-inner {
    padding: 32px 24px;
  }
  
  .kpi-number {
    font-size: 2rem;
  }
  
  .kpi-label {
    font-size: 0.85rem;
  }
  
  /* Mobile: Reduce animation intensity */
  .kpi-card:hover .kpi-card-inner {
    transform: translateY(-4px);
  }
  
  .kpi-icon svg {
    animation: none; /* Disable floating on mobile */
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  .kpi-card:active .kpi-card-inner {
    transform: scale(0.98);
  }
  
  .kpi-card:active .kpi-number {
    color: #d4af37;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .kpi-card,
  .kpi-icon,
  .kpi-number,
  .kpi-label,
  .section-title-elegant,
  .lead-elegant {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }
  
  .kpi-icon svg {
    animation: none !important;
  }
}

/* OLD KPI CLASSES - Kept for backward compatibility */

.kpi{
  border:1px solid var(--border); 
  padding: 20px; 
  margin-top: 20px; 
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.kpi:hover{
  transform: translateY(-5px); 
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.kpi .num{
  font-weight:700; 
  font-size: clamp(1.1rem, 4vw, 1.5rem);
}

.kpi .sub{
  font-size: clamp(0.7rem, 3vw, 0.78rem); 
  color:var(--muted); 
  line-height: 1.4;
}

.kpi.in:hover {
  transform: translateY(-6px); 
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* ==============================================
   SERVICES SECTION
   ============================================== */

.service{
  padding-block: 3.25rem; 
  padding: 30px; 
  margin-top: 60px;
}

.service h5{
  font-weight:700; 
  margin-bottom:.35rem; 
  font-size: clamp(1.5rem, 5vw, 3rem);
}

.service p{
  font-size: clamp(0.85rem, 3vw, 0.92rem); 
  color:#363636; 
  line-height: 1.6;
}

.service .btn{
  --bs-btn-padding-y:.3rem; 
  --bs-btn-padding-x:.85rem; 
  --bs-btn-border-radius:2rem; 
  transition: all 0.3s ease;
}

.service .btn:hover{
  transform: translateY(-2px); 
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.img-cover{
  width: 100%;
  height: 100%;
  object-fit: cover; 
  border-radius: .25rem; 
  transition: transform 0.3s ease;
  display: block;
}

.img-frame{
  overflow:hidden; 
  border-radius:.25rem;
  width: 500px;
  height: 500px;
  max-width: 100%;
}

.img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.img-frame:hover .img-cover{
  transform: scale(1.05);
}

/* ==============================================
   BUTTONS
   ============================================== */

.btn-outline-dark{
  color:#000; 
  background:none; 
  border-color:#F3B21C;
}

.btn-outline-dark:hover, .btn-outline-dark:focus{
  color:#fff; 
  background:#F3B21C; 
  border-color:#F3B21C;
}

/* ==============================================
   CLIENTS SECTION
   ============================================== */

.clients-wrap{
  padding: 2rem 0; 
  margin: 150px 0;
}

.clients-wrap h6{
  letter-spacing:.2px
}

.logo-tile{
  opacity:.75; 
  filter: grayscale(1); 
  transition:.3s; 
  max-width: 150px; 
  height: auto;
}

.logo-tile:hover{
  opacity:1; 
  filter:none; 
  transform: scale(1.1);
}

/* ==============================================
   CTA BAR
   ============================================== */

.cta-bar{
  background:var(--accent); 
  color:#000; 
  padding: 3rem 0; 
  text-align:center; 
  font-weight:700; 
  letter-spacing:.4px; 
  font-size: clamp(1.9rem, 3vw, 1.2rem);
}

.cta-bar:hover{
  color:#fff; 
  background:black; 
  border-color:#F3B21C;
}

/* ==============================================
   WORK PORTFOLIO GRID
   ============================================== */

.work-grid .ratio{
  border-radius:.35rem; 
  overflow:hidden; 
  background:#f3f3f3
}

.work-item {
  position: relative;
  overflow: hidden;
  border-radius: .35rem;
  cursor: pointer;
}

.work-item .work-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(243, 178, 28, 0.9), rgba(0, 0, 0, 0.8));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.work-item:hover .work-overlay {
  opacity: 1;
}

.work-overlay-content {
  text-align: center;
  color: white;
  padding: 1rem;
}

.work-overlay h6 {
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-size: clamp(0.9rem, 3vw, 1.1rem);
}

.work-overlay p {
  font-size: clamp(0.75rem, 2.5vw, 0.85rem);
  margin: 0;
  opacity: 0.9;
}

/* ==============================================
   TESTIMONIALS SECTION
   ============================================== */

.testi{
  padding: 3rem 0;
}

.testi .avatar{
  width: clamp(120px, 20vw, 200px); 
  height: clamp(120px, 20vw, 200px); 
  border-radius:.35rem; 
  object-fit:cover; 
  display:block; 
  margin-inline:auto
}

.testi h6{
  font-size: clamp(1rem, 3vw, 1.2rem); 
  margin-top:.65rem; 
  margin-bottom:.15rem; 
  font-weight: 700;
}

.testi .role{
  font-size: clamp(0.75rem, 2.5vw, 0.84rem); 
  color:var(--muted)
}

.quote{
  font-size: clamp(0.9rem, 3vw, 1.1rem); 
  color:#333; 
  line-height: 1.6; 
  text-align: center;
}

.dots{
  font-size:1.25rem
}

/* Testimonial Slider */
.testimonial-slider {
  position: relative;
  overflow: hidden;
}

.testimonial-track {
  display: flex;
  transition: transform 0.5s ease;
  width: 500%; /* 5 slides = 500% */
  touch-action: pan-y;
}

.testimonial-slide {
  width: 20%; /* 100% / 5 slides */
  flex-shrink: 0;
  padding: 0 1rem;
}

/* Testimonial Indicators */
.testimonial-indicators {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2rem;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ddd;
  cursor: pointer;
  transition: background 0.3s ease;
}

.indicator.active {
  background: var(--accent);
}

/* ==============================================
   FOOTER & MISC
   ============================================== */

.note{
  font-size: clamp(0.8rem, 2.5vw, 0.9rem); 
  color:#3b3b3b; 
  line-height: 1.6;
}

.note small{
  color:var(--muted)
}

/* ==============================================
   SCROLL ANIMATIONS
   ============================================== */

.reveal {
  opacity: 0; 
  transform: translateY(30px); 
  transition: transform .8s cubic-bezier(.16,.68,.43,.99), opacity .8s ease;
  will-change: transform, opacity;
}

.reveal.in {
  opacity: 1; 
  transform: none;
}

.reveal-zoom {
  opacity: 0; 
  transform: translateY(20px) scale(.95);
  transition: transform .7s cubic-bezier(.16,.68,.43,.99), opacity .7s ease;
  will-change: transform, opacity;
}

.reveal-zoom.in {
  opacity: 1; 
  transform: none;
}

/* Enhanced Animation Utilities */
.reveal-fade {
  opacity: 0;
  transition: opacity .9s ease;
}

.reveal-fade.in {
  opacity: 1;
}

.reveal-slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: transform .8s cubic-bezier(.16,.68,.43,.99), opacity .8s ease;
}

.reveal-slide-left.in {
  opacity: 1;
  transform: translateX(0);
}

.reveal-slide-right {
  opacity: 0;
  transform: translateX(40px);
  transition: transform .8s cubic-bezier(.16,.68,.43,.99), opacity .8s ease;
}

.reveal-slide-right.in {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(.9);
  transition: transform .7s cubic-bezier(.34,1.56,.64,1), opacity .7s ease;
}

.reveal-scale.in {
  opacity: 1;
  transform: scale(1);
}

/* KPI Counter Animation Enhancement */
.kpi .num {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: transform .3s ease;
}

.kpi.in .num {
  animation: bounceIn .6s cubic-bezier(.68,-0.55,.265,1.55);
}

@keyframes bounceIn {
  0% { transform: scale(.8); opacity: 0; }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); opacity: 1; }
}

/* Subtle hover effects for animated elements */
.kpi.in {
  transition: transform .3s ease, box-shadow .3s ease;
}

.kpi.in:hover {
  transform: translateY(-4px);
}

.service.in {
  transition: transform .5s ease;
}

.service.in:hover {
  transform: translateX(8px);
}

.work-item.in {
  transition: transform .4s ease, box-shadow .4s ease;
}

.work-item.in:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* ==============================================
   IMAGE OPTIMIZATIONS
   ============================================== */

.img-cover, .logo-tile {
  transition: opacity 0.3s ease;
}

.img-cover, .logo-tile, .avatar {
  image-rendering: auto;
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}

/* ==============================================
   MOBILE RESPONSIVE STYLES
   ============================================== */

@media (max-width: 991.98px){
  .hero{
    height: 50vh; 
    min-height: 300px;
  }
  
  .kpi{
    margin-bottom: 1rem; 
    padding: 15px;
  }
  
  .service{
    margin-top: 40px; 
    padding: 20px 0;
  }
  
  .clients-wrap{
    padding: 1.5rem 0; 
    margin: 20px 0;
  }
  
  #about{
    margin-top: 0 !important; 
    padding-top: 3rem !important;
  }
}

@media (max-width: 767.98px){
  /* Ensure navbar stays sticky on all mobile/tablet devices */
  .navbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 1050 !important;
    background-color: #fff !important;
  }
  
  .hero{
    height: auto;
    min-height: 0;
    aspect-ratio: unset;  /* Remove aspect ratio that causes blank space */
    max-height: 50vh;     /* Limit height on mobile */
  }
  .hero > video,
  .hero > img#heroPoster{
    position: static;
    width: 100%;
    height: auto;
    max-height: 50vh;     /* Match parent max height */
    object-fit: cover;
    transform: none;
  }
  
  .service{
    margin-top: 30px; 
    padding: 15px 0;
  }
  
  /* Fix image frame on mobile */
  .img-frame {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;  /* Keep square ratio */
    max-width: 500px;
    margin: 0 auto;       /* Center on mobile */
  }
  
  .img-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Fix service section alignment */
  .service .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  .service .col-md-5,
  .service .col-md-7 {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  .kpi{
    padding: 12px;
  }
  
  .clients-wrap{
    padding: 1rem 0;
  }
  
  .logo-tile{
    max-width: 80px;
  }
  
  .testimonial-slide{
    padding: 0 0.5rem;
  }
  
  .testi{
    padding: 2rem 0;
  }
  
  .work-grid{
    margin-top: 1rem;
  }
  
  #about{
    margin-top: 0 !important; 
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }
  
  /* Consistent spacing between sections */
  section {
    margin-bottom: 1rem;
  }

  /* Video fallback styles */
  #heroFallback {
    background: linear-gradient(135deg, #f3b21c, #000);
  }
  
  #videoPlayButton {
    animation: pulse 2s infinite;
  }
  
  @keyframes pulse {
    0% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
    100% { transform: translate(-50%, -50%) scale(1); }
  }
}

@media (max-width: 575.98px){
  .navbar{
    font-size: 0.8rem;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1050 !important;
    background-color: #fff !important;
    width: 100%;
  }
  
  .navbar.sticky-top {
    position: sticky !important;
    -webkit-position: sticky !important;  /* Safari fix */
  }
  
  .navbar-brand {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  
  .navbar-brand img {
    height: 35px !important;
  }
  
  .navbar-toggler {
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
  }
  
  .kpi{
    padding: 10px; 
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  /* Fix row gutters on mobile for consistent spacing */
  .row.gy-3 {
    --bs-gutter-y: 0.75rem;
  }
  
  /* Remove top margin from KPI since row gutter handles it */
  .kpi {
    margin-top: 0 !important;
  }
  
  .service{
    margin-top: 20px; 
    margin-bottom: 20px;
    padding: 10px 0;
  }
  
  .clients-wrap{
    padding: 0.8rem 0;
  }
  
  .testi{
    padding: 1.5rem 0;
  }
  
  .work-grid{
    margin-top: 0.5rem;
  }
  
  .testimonial-slide{
    padding: 0 0.25rem;
  }
  
  #about{
    margin-top: 0 !important; 
    padding-top: 1.5rem !important;
  }
  
  /* Better mobile spacing */
  .container{
    padding-left: 15px; 
    padding-right: 15px;
    max-width: 100%;
  }
  
  .row{
    margin-left: 0; 
    margin-right: 0;
  }
  

}

@media (max-width: 480px){
  #about{
    margin-top: 0 !important; 
    padding-top: 1rem !important;
  }
  
  .hero{
    height: auto;          /* stop forcing vh on phones */
    min-height: 0;
    aspect-ratio: 16 / 9;  /* keeps a proper video rectangle */
  }
  .hero > video{
    position: static;      /* no absolute centering needed now */
    width: 100%;
    height: 100%;
    object-fit: cover;     /* or 'contain' if you prefer no crop + letterbox */
    transform: none;
  }
  
  .testi{
    padding: 1rem 0;
  }
  
  .service{
    margin-top: 15px;
  }

  /* Reduce image sizes on mobile */
  .work-item img, .service img {
    max-width: 100%;
    height: auto;
  }
}

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

/* Parallax Container */
.parallax-container {
  position: relative;
  height: 60vh;
  min-height: 400px;
  overflow: hidden;
}

.parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  will-change: transform;
}

.hero-overlay, .section-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3));
  z-index: 1;
}

/* About Hero */
.about-hero {
  height: 70vh;
  min-height: 500px;
  display: flex;
  align-items: center;
  color: white;
}

.about-hero .container {
  position: relative;
  z-index: 2;
}

.hero-title {
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 1rem;
}

.hero-subtitle {
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  opacity: 0.9;
  font-weight: 400;
}

/* About Story Section */
.about-story {
  padding: 5rem 0;
}

.story-content {
  text-align: center;
}

.story-text {
  font-size: clamp(1.1rem, 3vw, 1.3rem);
  line-height: 1.8;
  color: #333;
  font-weight: 400;
}

/* What We Do Section */
.what-we-do {
  height: 40vh;
  min-height: 300px;
  display: flex;
  align-items: center;
  text-align: center;
}

.what-we-do .container {
  position: relative;
  z-index: 2;
}

.section-subtitle {
  font-size: clamp(1rem, 3vw, 1.2rem);
  opacity: 0.9;
  font-weight: 400;
  margin-top: 1rem;
}

/* Team Section */
.team-section {
  padding: 6rem 0;
  background: #fafafa;
}

.team-intro {
  font-size: clamp(1rem, 3vw, 1.1rem);
  color: #666;
  margin-top: 1rem;
}

.team-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

.team-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.team-image {
  position: relative;
  overflow: hidden;
  height: 300px;
}

.team-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.team-card:hover .team-image img {
  transform: scale(1.05);
}

.team-content {
  padding: 2rem;
}

.team-name {
  font-size: clamp(1.3rem, 4vw, 1.5rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #333;
}

.team-role {
  font-size: 0.95rem;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
}

.team-description {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #666;
}

/* Objectives Section */
.objectives-section {
  padding: 6rem 0;
  background: #1a1a1a;
  color: white;
}

.objective-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 2.5rem;
  margin-bottom: 2rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: transform 0.3s ease, background 0.3s ease;
}

.objective-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.15);
}

.objective-number {
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--accent);
  margin-bottom: 1rem;
  display: block;
}

.objective-title {
  font-size: clamp(1.2rem, 4vw, 1.4rem);
  font-weight: 700;
  margin-bottom: 1rem;
  color: white;
}

.objective-description {
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
}

/* CTA Section */
.cta-section {
  background: white;
  padding: 5rem 0;
}

.cta-title {
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 700;
  margin-bottom: 1rem;
  color: #333;
}

.cta-subtitle {
  font-size: clamp(1rem, 3vw, 1.2rem);
  color: #666;
  margin-bottom: 2rem;
}

/* Enhanced Reveal Animations for About Page */
.reveal-up {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.2, 0.65, 0.2, 1);
}

.reveal-up.in {
  opacity: 1;
  transform: translateY(0);
}

.reveal-fade {
  opacity: 0;
  transition: opacity 1s ease;
}

.reveal-fade.in {
  opacity: 1;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.8s cubic-bezier(0.2, 0.65, 0.2, 1);
}

.reveal-scale.in {
  opacity: 1;
  transform: scale(1);
}

/* Delay Classes for Staggered Animations */
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }

/* Mobile Responsiveness for About Page */
@media (max-width: 991.98px) {
  .about-hero {
    height: 50vh;
    min-height: 400px;
  }
  
  .parallax-container {
    height: 40vh;
    min-height: 300px;
  }
  
  .parallax-bg {
    background-attachment: scroll;
  }
  
  .team-section {
    padding: 4rem 0;
  }
  
  .objectives-section {
    padding: 4rem 0;
  }
}

@media (max-width: 767.98px) {
  .about-hero {
    height: 45vh;
    min-height: 350px;
  }
  
  .what-we-do {
    height: 35vh;
    min-height: 250px;
  }
  
  .team-image {
    height: 250px;
  }
  
  .team-content {
    padding: 1.5rem;
  }
  
  .objective-card {
    padding: 2rem;
  }
  
  .objective-number {
    font-size: 2rem;
  }
}

@media (max-width: 575.98px) {
  .about-hero {
    height: 40vh;
    min-height: 300px;
    text-align: center;
  }
  
  .story-text {
    text-align: left;
  }
  
  .team-image {
    height: 200px;
  }
  
  .team-content {
    padding: 1.25rem;
  }
  
  .objective-card {
    padding: 1.5rem;
  }
}

/* ==============================================
   NEW ABOUT PAGE STYLES - CONSISTENT WITH HOME
   ============================================== */

/* Hero Section with Image and Overlay Box */
.about-hero-section {
  position: relative;
  height: 70vh;
  min-height: 500px;
  overflow: hidden;
}

.hero-image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
}

.who-we-are-overlay {
  position: absolute;
  bottom: 10%;
  left: 0;
  right: 0;
  z-index: 2;
}

.who-we-are-box {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 2.5rem;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.who-we-are-title {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 900;
  color: #333;
  margin-bottom: 1.5rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.who-we-are-text {
  font-size: clamp(0.85rem, 3vw, 0.92rem);
  line-height: 1.7;
  color: #363636;
  margin: 0;
}

/* What We Do Section */
.what-we-do-section {
  padding: 5rem 0;
  background: white;
}

.what-we-do-title {
  font-size: clamp(1.5rem, 5vw, 3rem);
  font-weight: 900;
  color: #333;
  margin-bottom: 1.5rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.what-we-do-text {
  font-size: clamp(0.85rem, 3vw, 0.92rem);
  line-height: 1.6;
  color: #363636;
  max-width: 600px;
  margin: 0 auto;
}

/* Meet Our Team Section */
.meet-team-section {
  padding: 5rem 0;
  background: #f8f9fa;
}

.team-section-title {
  font-size: clamp(1.5rem, 5vw, 3rem);
  font-weight: 900;
  color: #333;
  margin-bottom: 3rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.team-member-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  border: 1px solid var(--border);
}

.team-member-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

.team-member-image {
  height: 250px;
  overflow: hidden;
}

.team-member-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.team-member-card:hover .team-member-image img {
  transform: scale(1.05);
}

.team-member-info {
  padding: 2rem;
  text-align: center;
}

.team-member-name {
  font-size: clamp(1.5rem, 5vw, 1.8rem);
  font-weight: 700;
  color: #333;
  margin-bottom: 0.5rem;
}

.team-member-role {
  font-size: 0.95rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.team-member-description {
  font-size: clamp(0.85rem, 3vw, 0.92rem);
  line-height: 1.6;
  color: #363636;
  text-align: left;
}

/* Our Approach Section - Using brand colors */
.our-approach-section {
  padding: 5rem 0;
  background: #1a1a1a;
  color: white;
}

.approach-title {
  font-size: clamp(1.5rem, 5vw, 3rem);
  font-weight: 900;
  color: white;
  margin-bottom: 3rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.approach-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(243, 178, 28, 0.3);
  border-radius: 8px;
  padding: 2rem;
  margin-bottom: 2rem;
  transition: transform 0.3s ease, background 0.3s ease;
}

.approach-card:hover {
  transform: translateY(-3px);
  background: rgba(243, 178, 28, 0.1);
  border-color: var(--accent);
}

.approach-card-title {
  font-size: clamp(1.2rem, 4vw, 1.4rem);
  font-weight: 700;
  color: white;
  margin-bottom: 1rem;
}

.approach-card-text {
  font-size: clamp(0.85rem, 3vw, 0.92rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
}

/* Mobile Responsiveness */
@media (max-width: 991.98px) {
  .about-hero-section {
    height: 60vh;
    min-height: 450px;
  }
  
  .who-we-are-box {
    padding: 2rem;
  }
  
  .what-we-do-section,
  .meet-team-section,
  .our-approach-section {
    padding: 4rem 0;
  }
}

@media (max-width: 767.98px) {
  .about-hero-section {
    height: 50vh;
    min-height: 400px;
  }
  
  .who-we-are-overlay {
    bottom: 5%;
  }
  
  .who-we-are-box {
    padding: 1.5rem;
  }
  
  .what-we-do-section,
  .meet-team-section,
  .our-approach-section {
    padding: 3rem 0;
  }
  
  .team-member-image {
    height: 200px;
  }
  
  .team-member-info {
    padding: 1.5rem;
  }
  
  .approach-card {
    padding: 1.5rem;
  }
}

@media (max-width: 575.98px) {
  .about-hero-section {
    height: 45vh;
    min-height: 350px;
  }
  
  .who-we-are-box {
    margin: 0 1rem;
    padding: 1.25rem;
  }
  
  .team-member-info {
    padding: 1.25rem;
  }
  
  .approach-card {
    padding: 1.25rem;
  }
}

/* ==============================================
   SERVICES PAGE STYLES - PROPER SPACING
   ============================================== */

/* Services Hero Section with Video */
.services-hero-video {
  position: relative;
  height: 70vh;
  min-height: 500px;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  width: 100%;
}

.services-hero-title {
  font-size: clamp(1.5rem, 5vw, 3rem);
  font-weight: 900;
  color: white;
  margin-bottom: 1.5rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.services-hero-subtitle {
  font-size: clamp(1rem, 3vw, 1.3rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.5rem;
}

.services-hero-description {
  font-size: clamp(0.85rem, 3vw, 1rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  max-width: 700px;
  margin: 0 auto;
}

/* Service Sections - Proper Spacing */
.service-section {
  padding: 0;
  margin: 0;
}

.service-content {
  padding: 6rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 80vh;
}

.service-image {
  min-height: 80vh;
  overflow: hidden;
  position: relative;
}

.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.service-title {
  font-size: clamp(1.2rem, 4vw, 1.6rem);
  font-weight: 700;
  color: #333;
  margin-bottom: 2.5rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.2;
}

.service-description {
  font-size: clamp(0.9rem, 3vw, 1rem);
  line-height: 1.8;
  color: #555;
  max-width: 450px;
  font-weight: 400;
}

/* Background Color Variations - Matching Image */
.service-white {
  background: #ffffff;
}

.service-beige {
  background: #f8f5f1;
}

.service-beige .service-title {
  color: #2c2c2c;
}

.service-beige .service-description {
  color: #4a4a4a;
}

.service-teal {
  background: #2d4f4f;
}

.service-teal .service-title,
.service-teal .service-description {
  color: #ffffff;
}

.service-pink {
  background: #f2e8e8;
}

.service-pink .service-title {
  color: #2c2c2c;
}

.service-pink .service-description {
  color: #4a4a4a;
}

.service-blue {
  background: #e3f0f5;
}

.service-blue .service-title {
  color: #2c2c2c;
}

.service-blue .service-description {
  color: #4a4a4a;
}

.service-mint {
  background: #e5f4f0;
}

.service-mint .service-title {
  color: #2c2c2c;
}

.service-mint .service-description {
  color: #4a4a4a;
}

.service-dark {
  background: #1a1a1a;
}

.service-dark .service-title,
.service-dark .service-description {
  color: #ffffff;
}

/* Mobile Responsiveness */
@media (max-width: 991.98px) {
  .services-hero-video {
    height: 60vh;
    min-height: 400px;
  }
  
  .service-content {
    padding: 4rem 2.5rem;
    min-height: 60vh;
  }
  
  .service-image {
    min-height: 50vh;
  }
}

@media (max-width: 767.98px) {
  .services-hero-video {
    height: 50vh;
    min-height: 350px;
  }
  
  .service-content {
    padding: 3rem 2rem;
    min-height: auto;
  }
  
  .service-image {
    min-height: 40vh;
  }
  
  .service-description {
    max-width: none;
  }
  
  .service-title {
    margin-bottom: 2rem;
  }
}

@media (max-width: 575.98px) {
  .services-hero-video {
    height: 45vh;
    min-height: 300px;
  }
  
  .service-content {
    padding: 2.5rem 1.5rem;
  }
  
  .service-image {
    min-height: 35vh;
  }
}

/* ==============================================
   CLIENTS PAGE STYLES WITH EXCELLENT ANIMATIONS
   ============================================== */

/* Clients Hero Section */
.clients-hero-section {
  padding: 8rem 0 6rem 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  position: relative;
  overflow: hidden;
}

.clients-hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 20% 50%, rgba(243, 178, 28, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(243, 178, 28, 0.05) 0%, transparent 50%);
  pointer-events: none;
}

.clients-main-title {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 900;
  color: #333;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: 3rem;
  opacity: 0;
  transform: translateY(50px);
  animation: titleReveal 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

.clients-subtitle-wrapper {
  opacity: 0;
  transform: translateY(30px);
  animation: subtitleReveal 1s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards;
}

.clients-subtitle-line {
  font-size: clamp(1rem, 3vw, 1.2rem);
  font-weight: 600;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.clients-subtitle-line:last-child {
  margin-bottom: 0;
}

/* Animation Keyframes */
@keyframes titleReveal {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes subtitleReveal {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Clients Logos Section */
.clients-logos-section {
  padding: 6rem 0;
  background: white;
  position: relative;
  overflow: hidden;
}

.clients-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  margin-bottom: 3rem;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateX(-50px);
}

/* Staggered row animations */
.clients-row[data-row="1"] {
  animation: slideInLeft 1s cubic-bezier(0.4, 0, 0.2, 1) 1.2s forwards;
}

.clients-row[data-row="2"] {
  animation: slideInRight 1s cubic-bezier(0.4, 0, 0.2, 1) 1.4s forwards;
}

.clients-row[data-row="3"] {
  animation: slideInLeft 1s cubic-bezier(0.4, 0, 0.2, 1) 1.6s forwards;
}

.clients-row[data-row="4"] {
  animation: slideInRight 1s cubic-bezier(0.4, 0, 0.2, 1) 1.8s forwards;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Client Logo Wrapper */
.client-logo-wrapper {
  width: clamp(200px, 15vw, 300px);
  height: clamp(80px, 10vw, 300px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.client-logo-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(243, 178, 28, 0.2), transparent);
  transition: left 0.6s;
}

.client-logo-wrapper:hover::before {
  left: 100%;
}

.client-logo-wrapper:hover {
  transform: translateY(-8px) scale(1.05);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  background: rgba(243, 178, 28, 0.1);
}

.client-logo-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1) opacity(0.7);
  transition: all 0.4s ease;
}

.client-logo-wrapper:hover .client-logo-img {
  filter: grayscale(0) opacity(1);
  transform: scale(1.1);
}

/* Floating Animation Elements */
.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.floating-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(243, 178, 28, 0.1);
  animation: float 6s ease-in-out infinite;
}

.floating-circle-1 {
  width: 60px;
  height: 60px;
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.floating-circle-2 {
  width: 40px;
  height: 40px;
  top: 60%;
  right: 15%;
  animation-delay: 2s;
}

.floating-circle-3 {
  width: 80px;
  height: 80px;
  bottom: 20%;
  left: 20%;
  animation-delay: 4s;
}

.floating-triangle {
  position: absolute;
  width: 0;
  height: 0;
  animation: float 8s ease-in-out infinite;
}

.floating-triangle-1 {
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 43px solid rgba(243, 178, 28, 0.08);
  top: 30%;
  right: 10%;
  animation-delay: 1s;
}

.floating-triangle-2 {
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 35px solid rgba(243, 178, 28, 0.06);
  bottom: 40%;
  right: 25%;
  animation-delay: 3s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

/* Pulse Animation for Logos */
@keyframes logoPulse {
  0% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  }
  50% {
    box-shadow: 0 8px 30px rgba(243, 178, 28, 0.2);
  }
  100% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  }
}

/* Random pulse animation applied to logos */
.client-logo-wrapper:nth-child(odd) {
  animation: logoPulse 4s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* Sparkle effect */
.client-logo-wrapper::after {
  content: '✦';
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 12px;
  color: var(--accent);
  opacity: 0;
  transition: all 0.3s ease;
}

.client-logo-wrapper:hover::after {
  opacity: 1;
  transform: scale(1.2) rotate(90deg);
}

/* Mobile Responsiveness */
@media (max-width: 991.98px) {
  .clients-hero-section {
    padding: 6rem 0 4rem 0;
  }
  
  .clients-logos-section {
    padding: 4rem 0;
  }
  
  .clients-row {
    gap: clamp(1.5rem, 4vw, 3rem);
    margin-bottom: 2rem;
  }
  
  .client-logo-wrapper {
    width: clamp(100px, 20vw, 280px);
    height: clamp(70px, 15vw, 200px);
    padding: 1rem;
  }
}

@media (max-width: 767.98px) {
  .clients-hero-section {
    padding: 4rem 0 3rem 0;
  }
  
  .clients-logos-section {
    padding: 3rem 0;
  }
  
  .clients-row {
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  
  .client-logo-wrapper {
    width: clamp(80px, 25vw, 160px);
    height: clamp(60px, 18vw, 120px);
    padding: 0.75rem;
  }
  
  .floating-circle,
  .floating-triangle {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .clients-row {
    gap: 0.75rem;
    justify-content: center;
  }
  
  .client-logo-wrapper {
    width: clamp(70px, 28vw, 100px);
    height: clamp(50px, 20vw, 75px);
    padding: 0.5rem;
  }
}

/* ==============================================
   CLASSY CONTACT PAGE STYLES
   ============================================== */

/* Contact Hero Section */
.contact-hero-section {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  color: white;
}

.contact-hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(243, 178, 28, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(243, 178, 28, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
}

.contact-hero-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(50px);
  animation: contactHeroReveal 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}

.contact-hero-subtitle {
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  font-weight: 300;
  opacity: 0.9;
  margin-bottom: 0;
  opacity: 0;
  transform: translateY(30px);
  animation: contactHeroReveal 1s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards;
}

@keyframes contactHeroReveal {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Floating Decorative Elements */
.contact-floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.contact-float-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(243, 178, 28, 0.1);
  animation: contactFloat 8s ease-in-out infinite;
}

.contact-float-square {
  position: absolute;
  background: rgba(255, 255, 255, 0.05);
  transform: rotate(45deg);
  animation: contactFloat 10s ease-in-out infinite reverse;
}

.contact-float-triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 35px solid rgba(243, 178, 28, 0.08);
  animation: contactFloat 12s ease-in-out infinite;
}

.contact-float-1 {
  width: 80px;
  height: 80px;
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.contact-float-2 {
  width: 60px;
  height: 60px;
  top: 60%;
  right: 15%;
  animation-delay: 2s;
}

.contact-float-3 {
  width: 40px;
  height: 40px;
  top: 40%;
  right: 25%;
  animation-delay: 4s;
}

.contact-float-4 {
  top: 70%;
  left: 20%;
  animation-delay: 6s;
}

@keyframes contactFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

/* Contact Content Section */
.contact-content-section {
  padding: 8rem 0;
  background: #f8f9fa;
}

/* Contact Information Styles */
.contact-info-wrapper {
  padding: 0 2rem;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 4rem;
  opacity: 0;
  transform: translateX(-30px);
  animation: contactInfoReveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.contact-info-item:nth-child(1) { animation-delay: 0.2s; }
.contact-info-item:nth-child(2) { animation-delay: 0.4s; }

@keyframes contactInfoReveal {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.contact-info-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent) 0%, #f0c655 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  margin-right: 2rem;
  flex-shrink: 0;
  box-shadow: 0 8px 25px rgba(243, 178, 28, 0.3);
  transition: transform 0.3s ease;
}

.contact-info-item:hover .contact-info-icon {
  transform: translateY(-3px) scale(1.05);
}

.contact-info-title {
  font-size: 1.1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #333;
  margin-bottom: 0.75rem;
}

.contact-info-detail {
  font-size: 1rem;
  color: #666;
  text-decoration: none;
  transition: color 0.3s ease;
}

.contact-info-detail:hover {
  color: var(--accent);
}

.contact-address p {
  margin-bottom: 0.25rem;
  line-height: 1.4;
}

/* Contact Quote */
.contact-quote {
  background: white;
  padding: 2.5rem;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  margin-top: 2rem;
  position: relative;
  opacity: 0;
  transform: translateY(30px);
  animation: contactInfoReveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
}

.contact-quote::before {
  content: '"';
  position: absolute;
  top: -10px;
  left: 20px;
  font-size: 4rem;
  color: var(--accent);
  font-weight: 900;
  line-height: 1;
}

.contact-quote p {
  font-size: 1.1rem;
  font-style: italic;
  color: #333;
  margin-bottom: 1rem;
  line-height: 1.6;
}

.contact-quote-author {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Contact Form Wrapper */
.contact-form-wrapper {
  background: white;
  border-radius: 20px;
  padding: 3rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(40px);
  animation: contactFormReveal 1s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
}

@keyframes contactFormReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.contact-form-header {
  margin-bottom: 3rem;
  text-align: center;
}

.contact-form-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #333;
  margin-bottom: 1rem;
}

.contact-form-subtitle {
  font-size: 1.1rem;
  color: #666;
  line-height: 1.6;
  max-width: 400px;
  margin: 0 auto;
}

/* Custom Form Controls */
.form-floating-custom {
  position: relative;
  margin-bottom: 1.5rem;
}

.form-control-custom {
  width: 100%;
  padding: 1.25rem 1rem 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #333;
  background-color: #f8f9fa;
  border: 2px solid transparent;
  border-radius: 12px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}

.form-control-custom:focus {
  background-color: white;
  border-color: var(--accent);
  box-shadow: 0 0 0 0.25rem rgba(243, 178, 28, 0.1);
}

.form-textarea-custom {
  min-height: 120px;
  resize: vertical;
  padding-top: 1.5rem;
}

.form-floating-custom label {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  font-size: 1rem;
  color: #666;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

.form-textarea-custom + label {
  top: 1.25rem;
  transform: translateY(0);
}

.form-control-custom:focus + label,
.form-control-custom:not(:placeholder-shown) + label,
.form-control-custom:valid + label {
  top: 0.5rem;
  transform: translateY(0);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
}

.form-focus-border {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(-50%);
}

.form-control-custom:focus ~ .form-focus-border {
  width: 100%;
}

/* Submit Button */
.contact-submit-btn {
  position: relative;
  background: linear-gradient(135deg, #333 0%, #1a1a1a 100%);
  color: white;
  border: none;
  padding: 1rem 2.5rem;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 50px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 200px;
  justify-content: center;
}

.contact-submit-btn:hover {
  background: linear-gradient(135deg, var(--accent) 0%, #f0c655 100%);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.btn-icon {
  transition: transform 0.3s ease;
}

.contact-submit-btn:hover .btn-icon {
  transform: translateX(5px);
}

.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Success Message */
.contact-success-message {
  display: none;
  text-align: center;
  padding: 3rem;
  background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
  color: white;
  border-radius: 16px;
  margin-top: 2rem;
  animation: successSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes successSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.contact-success-message .success-icon {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.contact-success-message h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
}

.contact-success-message p {
  font-size: 1.1rem;
  opacity: 0.9;
  margin-bottom: 0;
}

/* Mobile Responsiveness */
@media (max-width: 991.98px) {
  .contact-hero-section {
    min-height: 50vh;
  }
  
  .contact-content-section {
    padding: 6rem 0;
  }
  
  .contact-form-wrapper {
    padding: 2.5rem;
  }
  
  .contact-info-wrapper {
    padding: 0 1rem;
    margin-bottom: 3rem;
  }
}

@media (max-width: 767.98px) {
  .contact-hero-section {
    min-height: 45vh;
  }
  
  .contact-content-section {
    padding: 4rem 0;
  }
  
  .contact-form-wrapper {
    padding: 2rem;
  }
  
  .contact-info-icon {
    width: 50px;
    height: 50px;
    margin-right: 1.5rem;
  }
  
  .contact-quote {
    padding: 2rem;
  }
  
  .contact-floating-elements {
    display: none;
  }
}

@media (max-width: 575.98px) {
  .contact-form-wrapper {
    padding: 1.5rem;
  }
  
  .contact-quote {
    padding: 1.5rem;
  }
  
  .contact-submit-btn {
    width: 100%;
  }
}

/* Advanced Animation Effects for Clients Page */
.logo-visible {
  animation: logoReveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes logoReveal {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Ripple Effect */
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(243, 178, 28, 0.3);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Click Explosion Effect */
.click-explosion {
  position: absolute;
  pointer-events: none;
  width: 0;
  height: 0;
}

.explosion-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
  animation: explode 1s ease-out forwards;
  transform-origin: center;
}

@keyframes explode {
  0% {
    transform: rotate(var(--angle)) translateX(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: rotate(var(--angle)) translateX(50px) scale(0);
    opacity: 0;
  }
}

/* Mouse Trail Effect */
.mouse-trail {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  transform-origin: center;
}

/* Enhanced Sparkle Animation */
@keyframes sparkle {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(180deg);
    opacity: 1;
  }
}

.client-logo-wrapper:hover::after {
  animation: sparkle 0.6s ease-in-out;
}

/* Performance Optimizations */
.client-logo-wrapper,
.floating-circle,
.floating-triangle {
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
  .clients-main-title,
  .clients-subtitle-wrapper,
  .clients-row,
  .client-logo-wrapper,
  .floating-circle,
  .floating-triangle {
    animation: none !important;
    transition: none !important;
  }
  
  .client-logo-wrapper:hover {
    transform: none !important;
  }
}

/* Hide floating elements on mobile to prevent layout issues and blank space */
@media (max-width: 767.98px) {
  .floating-elements {
    display: none !important;
  }
  
  /* Prevent horizontal overflow on mobile */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  
  .container, .container-fluid {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
  
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  
  img, video {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ==============================================
   REVISED SERVICES PAGE STYLES - MATCHING DESIGN
   ============================================== */

/* Services Hero Section */
.services-hero-revised {
  position: relative;
  height: 100vh;
  min-height: 400px;
  background: url('https://images.unsplash.com/photo-1469334031218-e382a71b716b?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80') center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-overlay-revised {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.hero-content-revised {
  position: relative;
  z-index: 2;
  color: white;
  text-align: center;
}

.hero-title-revised {
  font-size: clamp(1.5rem, 5vw, 5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 1.5rem;
}

.hero-subtitle-revised {
  font-size: clamp(0.9rem, 3vw, 1.2rem);
  font-weight: 600;
  margin-bottom: 1.5rem;
  opacity: 0.9;
}

.hero-description-revised {
  font-size: clamp(0.8rem, 2.5vw, 1rem);
  line-height: 1.6;
  opacity: 0.8;
  max-width: 600px;
  margin: 0 auto;
}

/* Service Sections */
.service-section-revised {
  padding: 5rem 0;
  text-align: center;
}

.service-title-revised {
  font-size: clamp(1.5rem, 5vw, 3rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2rem;
  color: #333;
}

.service-description-revised {
  font-size: clamp(0.9rem, 3vw, 1.1rem);
  line-height: 1.7;
  color: #555;
  margin-bottom: 3rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Service Profile Images */
.service-profiles-revised {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
  position: relative;
}

.profile-image-revised {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #ddd;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px) scale(0.8);
}

/* Profile reveal animation */
.profile-image-revised.profile-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Hover effects */
.profile-image-revised:hover {
  transform: scale(1.99);
  border-color: var(--accent);
  border-width: 4px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.profile-image-revised img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.4s ease;
}

.profile-image-revised:hover img {
  transform: scale(1.95);
}

/* Mobile expanded state */
.profile-image-revised.expanded-mobile {
  transform: scale(1.5);
  border-color: var(--accent);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

/* Service section animations */
.service-section-revised {
  opacity: 1;  /* Changed from 0 - show by default */
  transform: translateY(0);  /* Changed from 30px - no offset by default */
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-section-revised.section-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered profile animation */
@keyframes profileFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.profile-reveal {
  animation: profileFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Enhanced button animation */
.service-btn-revised {
  background: #333;
  color: white;
  border: 2px solid #333;
  padding: 0.75rem 2rem;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.service-btn-revised:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.service-btn-revised::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.service-btn-revised:hover::before {
  left: 100%;
}

/* Service Button */
.service-btn-revised {
  background: #333;
  color: white;
  border: 2px solid #333;
  padding: 0.75rem 2rem;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: 0;
  transition: all 0.3s ease;
  cursor: pointer;
}

.service-btn-revised:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
  transform: translateY(-2px);
}

/* Background Color Variations */
.service-white-revised {
  background: #ffffff;
}

.service-beige-revised {
  background: #F5E6D3;
}

.service-pink-revised {
  background: #F4D4D4;
}

.service-mint-revised {
  background: #D4F4F1;
}

/* Mobile Responsiveness */
@media (max-width: 991.98px) {
  .services-hero-revised {
    height: 50vh;
    min-height: 350px;
  }
  
  .service-section-revised {
    padding: 4rem 0;
  }
  
  .service-profiles-revised {
    gap: 1rem;
  }
  
  .profile-image-revised {
    width: 70px;
    height: 70px;
  }
}

@media (max-width: 767.98px) {
  .services-hero-revised {
    height: 45vh;
    min-height: 300px;
  }
  
  .service-section-revised {
    padding: 3rem 0;
  }
  
  .service-profiles-revised {
    gap: 0.75rem;
  }
  
  .profile-image-revised {
    width: 60px;
    height: 60px;
  }
  
  .service-btn-revised {
    padding: 0.6rem 1.5rem;
    font-size: 0.8rem;
  }
}

@media (max-width: 575.98px) {
  .services-hero-revised {
    height: 40vh;
    min-height: 250px;
  }
  
  .service-section-revised {
    padding: 2.5rem 0;
  }
  
  .service-profiles-revised {
    gap: 0.5rem;
    justify-content: center;
  }
  
  .profile-image-revised {
    width: 50px;
    height: 50px;
  }
  
  .service-btn-revised {
    padding: 0.5rem 1.25rem;
  }
}

/* ==============================================
   REVISED ABOUT PAGE STYLES - MATCHING UPLOADED DESIGN
   ============================================== */

/* Hero Section - Simple image */
.about-hero-revised {
  height: 70vh;
  min-height: 900px;
  overflow: hidden;
}

.about-hero-revised .hero-image {
  width: 100%;
  height: 100%;
}

.about-hero-revised .hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Section Headings */
.section-heading-revised {
  font-size: clamp(1.5rem, 5vw, 3rem);
  font-weight: 900;
  color: #333;
  margin-bottom: 2rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.section-description-revised {
  font-size: clamp(0.9rem, 3vw, 1.1rem);
  line-height: 1.7;
  color: #555;
  max-width: 700px;
  margin: 0 auto;
}

/* Who We Are Section */
.who-we-are-revised {
  background: white;
  padding: 5rem 0;
}

/* Our Impact Section with Counters */
.our-impact-section {
  background: #f8f9fa;
  padding: 5rem 0;
  margin-top: 100px;
}

.impact-card {
  padding: 3rem 2rem;
  text-align: center;
  height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.impact-yellow {
  background: var(--accent);
}

.impact-orange {
  background: #FF8C42;
}

.impact-number {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
  color: #000;
  margin-bottom: 1rem;
  line-height: 1;
}

.impact-label {
  font-size: clamp(0.9rem, 3vw, 1.1rem);
  font-weight: 600;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* We're Trusted By Section */
.trusted-by-section {
  background: white;
  padding: 5rem 0;
  margin-top: 100px;
}

.trusted-subtitle {
  font-size: clamp(1.2rem, 4vw, 2rem);
  font-weight: 900;
  color: #333;
  margin-bottom: 3rem;
  letter-spacing: 0.5px;
}

.client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  padding: 1rem;
}

.client-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.client-logo:hover img {
  opacity: 1;
}

/* What We Do Section */
.what-we-do-revised {
  background: #f8f9fa;
  padding: 5rem 0;
  margin-top: 100px;
}

/* Meet Our Team Section */
.meet-team-revised {
  background: white;
  padding: 5rem 0;
  margin-top: 100px;
}

.team-member-revised {
  text-align: center;
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.team-member-revised:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.team-image-revised {
  overflow: hidden;
}

.team-image-revised img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.team-member-revised:hover .team-image-revised img {
  transform: scale(1.05);
}

.team-info-revised {
  padding: 2rem;
}

.team-name-revised {
  font-size: clamp(1.1rem, 3vw, 1.3rem);
  font-weight: 700;
  color: #333;
  margin-bottom: 0.5rem;
}

.team-role-revised {
  font-size: 0.9rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}

.team-desc-revised {
  font-size: 0.85rem;
  line-height: 1.6;
  color: #666;
}

/* Our Approach Section - Grid Layout */
.our-approach-revised {
  background: #f8f9fa;
  padding: 5rem 0;
  margin-top: 100px;
}

.approach-item {
  height: 500px;
  display: flex;
  text-align: right;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.approach-item-left {
  height: 500px;
  display: flex;
  text-align: left;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.approach-yellow-revised {
  background: var(--accent);
  padding: 3rem;
}

.approach-image-revised {
  position: relative;
}

.approach-image-revised img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.approach-content {
  text-align: center;
}

.approach-title-revised {
  font-size: clamp(1.1rem, 3vw, 3.5rem);
  font-weight: 900;
  color: #000;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.approach-desc-revised {
  font-size: clamp(0.85rem, 2.5vw, 1rem);
  line-height: 1.6;
  color: #333;
}

/* Mobile Responsiveness */
@media (max-width: 991.98px) {
  .about-hero-revised {
    height: 60vh;
    min-height: 400px;
  }
  
  .impact-card {
    height: 180px;
    padding: 2.5rem 1.5rem;
  }
  
  .team-image-revised {
    height: 250px;
  }
  
  .approach-item {
    height: 250px;
  }
  
  .approach-yellow-revised {
    padding: 2rem;
  }
}

@media (max-width: 767.98px) {
  .about-hero-revised {
    height: 50vh;
    min-height: 350px;
  }
  
  .impact-card {
    height: 150px;
    padding: 2rem 1rem;
  }
  
  .team-image-revised {
    height: auto;
  }
  
  .team-info-revised {
    padding: 1.5rem;
  }
  
  .approach-item {
    height: 200px;
  }
  
  .approach-yellow-revised {
    padding: 1.5rem;
  }
}

@media (max-width: 575.98px) {
  .about-hero-revised {
    height: 45vh;
    min-height: 300px;
  }
  
  .impact-card {
    height: 120px;
    padding: 1.5rem 0.75rem;
  }
  
  .team-info-revised {
    padding: 1.25rem;
  }
  
  .approach-yellow-revised {
    padding: 1.25rem;
  }
}

/* Mobile touch improvements */
@media (hover: none) and (pointer: coarse) {
  .work-item .work-overlay {
    opacity: 0.8;
  }
  
  .kpi:hover, 
  .service .btn:hover, 
  .img-frame:hover .img-cover,
  .team-card:hover,
  .objective-card:hover,
  .team-member-card:hover,
  .approach-card:hover {
    transform: none;
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  .parallax-bg {
    background-attachment: scroll !important;
  }
  
  body {
    scroll-snap-type: none !important;
  }
  
  .service-section {
    scroll-snap-align: none !important;
  }
  
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ==============================================
   APPROACH SECTION ANIMATIONS
   ============================================== */

/* Initial hidden state */
.approach-item,
.approach-item-left {
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Slide in from left */
.approach-item {
  transform: translateX(-80px);
}

/* Slide in from right */
.approach-item-left {
  transform: translateX(80px);
}

/* Visible state */
.approach-item.approach-visible,
.approach-item-left.approach-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Image zoom effect on reveal */
.approach-image-revised {
  overflow: hidden;
}

.approach-image-revised img {
  transform: scale(1.1);
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.approach-visible .approach-image-revised img {
  transform: scale(1);
}

/* Text content animation */
.approach-content-right,
.approach-content-left {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}

.approach-visible .approach-content-right,
.approach-visible .approach-content-left {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger animation for title and description */
.approach-title-revised {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
}

.approach-visible .approach-title-revised {
  opacity: 1;
  transform: translateY(0);
}

.approach-desc-revised {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
}

.approach-visible .approach-desc-revised {
  opacity: 1;
  transform: translateY(0);
}

/* Hover enhancement */
.approach-yellow-revised {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.approach-visible.approach-yellow-revised:hover {
  background: #f0c655;
  transform: scale(1.02);
}

/* Mobile animations adjustments */
@media (max-width: 767.98px) {
  .approach-item,
  .approach-item-left {
    transform: translateY(30px);
  }
  
  .approach-visible {
    transform: translateY(0);
  }
}

/* ==============================================
   OUR WORK PAGE STYLES
   ============================================== */

/* Our Work Hero Section */
.our-work-hero {
  padding: 8rem 0 4rem 0;
  background: white;
  text-align: center;
}

.our-work-title {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 900;
  color: #333;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.our-work-subtitle {
  font-size: clamp(1rem, 3vw, 1.3rem);
  color: #666;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Work Categories Section */
.work-categories-section {
  background: white;
}

.work-category-block {
  margin-bottom: 4rem;
  padding: 2rem 0;
}

.work-category-block:nth-child(odd) {
  background: #fafafa;
}

/* Category Header */
.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding: 0 1rem;
}

.category-title {
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  font-weight: 900;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
  background: var(--accent);
  padding: 1rem 2rem;
  border-radius: 0;
  display: inline-block;
}

.view-all-btn {
  background: #333;
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 0;
}

.view-all-btn:hover {
  background: var(--accent);
  color: #000;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Gallery Wrapper */
.category-gallery-wrapper {
  overflow: hidden;
  padding: 0 1rem;
}

.category-gallery {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 1rem 0 2rem 0;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) #f0f0f0;
}

.category-gallery::-webkit-scrollbar {
  height: 8px;
}

.category-gallery::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 4px;
}

.category-gallery::-webkit-scrollbar-thumb {
  background: var(--accent);
  border-radius: 4px;
}

.category-gallery::-webkit-scrollbar-thumb:hover {
  background: #f0c655;
}

/* Work Items */
.work-item {
  flex: 0 0 300px;
  height: 200px;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.work-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.work-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.work-item:hover .work-image {
  transform: scale(1.1);
}

/* Work Overlay */
.work-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(243, 178, 28, 0.9), rgba(0, 0, 0, 0.7));
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.work-item:hover .work-overlay {
  opacity: 1;
}

.work-info {
  text-align: center;
  color: white;
  padding: 1rem;
}

.work-info h4 {
  font-size: clamp(1rem, 3vw, 1.2rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.work-info p {
  font-size: clamp(0.8rem, 2.5vw, 0.9rem);
  opacity: 0.9;
  margin: 0;
}

/* ==============================================
   LIGHTBOX MODAL STYLES
   ============================================== */

.lightbox-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  display: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lightbox-modal.active {
  display: flex;
  opacity: 1;
}

.lightbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.lightbox-container {
  position: relative;
  width: 90%;
  max-width: 1200px;
  height: 90%;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.lightbox-close {
  position: absolute;
  top: -50px;
  right: 0;
  background: none;
  border: none;
  color: white;
  font-size: 3rem;
  cursor: pointer;
  z-index: 10001;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.lightbox-close:hover {
  color: var(--accent);
  transform: scale(1.1);
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10001;
}

.lightbox-prev {
  left: -80px;
}

.lightbox-next {
  right: -80px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background: var(--accent);
  color: #000;
  transform: translateY(-50%) scale(1.1);
}

.lightbox-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  max-height: 80vh;
}

.lightbox-content img {
  max-width: 100%;
  max-height: 70%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.lightbox-info {
  color: white;
  text-align: center;
  margin-top: 2rem;
  max-width: 600px;
}

.lightbox-info h3 {
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
}

.lightbox-info p {
  font-size: clamp(0.9rem, 3vw, 1.1rem);
  opacity: 0.9;
  margin: 0;
  line-height: 1.6;
}

/* Lightbox Thumbnails */
.lightbox-thumbnails {
  display: flex;
  gap: 0.5rem;
  margin-top: 2rem;
  overflow-x: auto;
  padding: 0.5rem;
  max-width: 100%;
}

.lightbox-thumbnail {
  width: 60px;
  height: 40px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0.6;
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.lightbox-thumbnail:hover,
.lightbox-thumbnail.active {
  opacity: 1;
  border-color: var(--accent);
  transform: scale(1.1);
}

/* Mobile Responsiveness for Our Work */
@media (max-width: 991.98px) {
  .our-work-hero {
    padding: 6rem 0 3rem 0;
  }
  
  .work-category-block {
    margin-bottom: 3rem;
    padding: 1.5rem 0;
  }
  
  .category-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  
  .category-title {
    text-align: center;
    padding: 0.75rem 1.5rem;
  }
  
  .work-item {
    flex: 0 0 250px;
    height: 180px;
  }
  
  .lightbox-prev {
    left: -60px;
  }
  
  .lightbox-next {
    right: -60px;
  }
}

@media (max-width: 767.98px) {
  .our-work-hero {
    padding: 4rem 0 2rem 0;
  }
  
  .work-category-block {
    margin-bottom: 2rem;
    padding: 1rem 0;
  }
  
  .category-gallery-wrapper {
    padding: 0 0.5rem;
  }
  
  .work-item {
    flex: 0 0 200px;
    height: 150px;
  }
  
  .lightbox-container {
    width: 95%;
    height: 95%;
  }
  
  .lightbox-prev,
  .lightbox-next {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }
  
  .lightbox-prev {
    left: -25px;
  }
  
  .lightbox-next {
    right: -25px;
  }
  
  .lightbox-close {
    top: -40px;
    font-size: 2rem;
    width: 40px;
    height: 40px;
  }
  
  .lightbox-content img {
    max-height: 60%;
  }
  
  .lightbox-info {
    margin-top: 1rem;
  }
  
  .lightbox-thumbnails {
    margin-top: 1rem;
  }
  
  .lightbox-thumbnail {
    width: 50px;
    height: 35px;
  }
}

@media (max-width: 575.98px) {
  .work-item {
    flex: 0 0 180px;
    height: 130px;
  }
  
  .category-title {
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }
  
  .view-all-btn {
    padding: 0.5rem 1.5rem;
    font-size: 0.8rem;
  }
  
  .lightbox-prev,
  .lightbox-next {
    display: none;
  }
  
  .lightbox-content img {
    max-height: 50%;
  }
  
  .lightbox-thumbnails {
    display: none;
  }
}

/* Touch device improvements */
@media (hover: none) and (pointer: coarse) {
  .work-overlay {
    opacity: 0.8;
  }
  
  .work-item:hover .work-overlay {
    opacity: 1;
  }
}



/* === BEGIN celebrities-styles.css === */
/* ==============================================
   CELEBRITIES PAGE STYLES - MOBILE OPTIMIZED
   ============================================== */

/* Celebrities Hero Section */
.celebrities-hero-section {
  margin-top: 0;
}

.celebrities-hero-banner {
  background: linear-gradient(135deg, #B8860B 0%, #DAA520 100%);
  padding: 2rem 0;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.celebrities-hero-title {
  font-size: clamp(1.8rem, 6vw, 4rem);
  font-weight: 900;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
  padding: 0 1rem;
}

/* Celebrities Grid Section */
.celebrities-grid-section {
  background: #ffffff;
  min-height: 100vh;
  padding: 2rem 0.5rem;
}

.celebrities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Celebrity Card - Responsive */
.celebrity-item {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  max-width: 350px;
  margin: 0 auto;
}

.celebrity-item.celebrity-visible {
  opacity: 1;
  transform: translateY(0);
}

.celebrity-card {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
  width: 100%;
  aspect-ratio: 1;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: #f5f5f5;
}

.celebrity-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.celebrity-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.celebrity-card:hover .celebrity-image {
  transform: scale(1.05);
}

/* Celebrity Overlay - Mobile Optimized */
.celebrity-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.85) 100%);
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.celebrity-card:hover .celebrity-overlay,
.celebrity-card:focus .celebrity-overlay,
.celebrity-card:active .celebrity-overlay {
  opacity: 1;
}

.celebrity-info {
  color: white;
  width: 100%;
}

.celebrity-info h4 {
  font-size: clamp(1rem, 3vw, 1.2rem);
  font-weight: 700;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

.celebrity-info p {
  font-size: clamp(0.85rem, 2.5vw, 0.95rem);
  opacity: 0.9;
  margin: 0;
  font-weight: 400;
  line-height: 1.3;
}

/* ==============================================
   LIGHTBOX MOBILE OPTIMIZATION
   ============================================== */

.lightbox-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  display: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lightbox-modal.active {
  display: flex;
  opacity: 1;
}

.lightbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.lightbox-container {
  position: relative;
  width: 95%;
  max-width: 1200px;
  height: 95%;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* Mobile-friendly close button */
.lightbox-close {
  position: absolute;
  top: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  z-index: 10001;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border-radius: 50%;
}

.lightbox-close:hover {
  background: rgba(243, 178, 28, 0.9);
  color: #000;
  transform: scale(1.1);
}

/* Mobile navigation arrows - ALWAYS VISIBLE */
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  border: none;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10001;
}

.lightbox-prev {
  left: 10px;
}

.lightbox-next {
  right: 10px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(243, 178, 28, 0.9);
  color: #000;
  transform: translateY(-50%) scale(1.1);
}

.lightbox-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  max-height: 85vh;
}

.lightbox-content img {
  max-width: 100%;
  max-height: 65%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.lightbox-info {
  color: white;
  text-align: center;
  margin-top: 1.5rem;
  max-width: 90%;
  padding: 0 1rem;
}

.lightbox-info h3 {
  font-size: clamp(1.1rem, 4vw, 1.5rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent, #F3B21C);
}

.lightbox-info p {
  font-size: clamp(0.9rem, 3vw, 1rem);
  opacity: 0.9;
  margin: 0;
  line-height: 1.5;
}

/* Mobile Thumbnails */
.lightbox-thumbnails {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  overflow-x: auto;
  padding: 0.5rem;
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: var(--accent, #F3B21C) #333;
}

.lightbox-thumbnails::-webkit-scrollbar {
  height: 4px;
}

.lightbox-thumbnails::-webkit-scrollbar-track {
  background: #333;
  border-radius: 2px;
}

.lightbox-thumbnails::-webkit-scrollbar-thumb {
  background: var(--accent, #F3B21C);
  border-radius: 2px;
}

.lightbox-thumbnail {
  width: 50px;
  height: 35px;
  object-fit: cover;
  cursor: pointer;
  border-radius: 4px;
  opacity: 0.6;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  flex-shrink: 0;
}

.lightbox-thumbnail:hover,
.lightbox-thumbnail.active {
  opacity: 1;
  border-color: var(--accent, #F3B21C);
  transform: scale(1.1);
}

/* ==============================================
   MOBILE RESPONSIVE BREAKPOINTS
   ============================================== */

/* Large tablets and small desktops */
@media (max-width: 991.98px) {
  .celebrities-hero-banner {
    padding: 2.5rem 0;
  }
  
  .celebrities-grid-section {
    padding: 3rem 1rem;
  }
  
  .celebrities-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
  }
  
  .lightbox-prev {
    left: 15px;
  }
  
  .lightbox-next {
    right: 15px;
  }
}

/* Tablets */
@media (max-width: 767.98px) {
  .celebrities-hero-banner {
    padding: 2rem 0;
  }
  
  .celebrities-grid-section {
    padding: 2rem 0.75rem;
  }
  
  .celebrities-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
  }
  
  .celebrity-overlay {
    padding: 1rem;
  }
  
  .lightbox-container {
    width: 98%;
    height: 98%;
    padding: 0.5rem;
  }
  
  .lightbox-close {
    width: 45px;
    height: 45px;
    font-size: 1.8rem;
  }
  
  .lightbox-prev,
  .lightbox-next {
    width: 45px;
    height: 45px;
    font-size: 1.3rem;
  }
  
  .lightbox-content img {
    max-height: 60%;
  }
  
  .lightbox-info {
    margin-top: 1rem;
  }
  
  .lightbox-thumbnails {
    margin-top: 0.75rem;
  }
  
  .lightbox-thumbnail {
    width: 45px;
    height: 32px;
  }
}

/* Mobile phones */
@media (max-width: 575.98px) {
  .celebrities-hero-banner {
    padding: 1.5rem 0;
  }
  
  .celebrities-hero-title {
    letter-spacing: 1px;
  }
  
  .celebrities-grid-section {
    padding: 2rem 0.5rem;
  }
  
  .celebrities-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    padding: 0 0.5rem;
  }
  
  .celebrity-overlay {
    padding: 0.75rem;
  }
  
  .lightbox-close {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    top: 5px;
    right: 5px;
  }
  
  .lightbox-prev,
  .lightbox-next {
    width: 40px;
    height: 40px;
    font-size: 1.2rem;
  }
  
  .lightbox-prev {
    left: 5px;
  }
  
  .lightbox-next {
    right: 5px;
  }
  
  .lightbox-content img {
    max-height: 55%;
  }
  
  .lightbox-info {
    margin-top: 0.75rem;
  }
  
  .lightbox-thumbnails {
    margin-top: 0.5rem;
    gap: 0.25rem;
  }
  
  .lightbox-thumbnail {
    width: 40px;
    height: 28px;
  }
}

/* Very small screens */
@media (max-width: 375px) {
  .celebrities-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  
  .celebrity-overlay {
    padding: 0.5rem;
  }
  
  .celebrity-info h4 {
    font-size: 0.85rem;
  }
  
  .celebrity-info p {
    font-size: 0.75rem;
  }
}

/* ==============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================== */

@media (hover: none) and (pointer: coarse) {
  .celebrity-overlay {
    opacity: 0.8;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.9) 100%);
  }
  
  .celebrity-card:active .celebrity-overlay {
    opacity: 1;
  }
  
  .celebrity-card:hover {
    transform: none;
  }
  
  .celebrity-card:active {
    transform: scale(0.98);
  }
  
  /* Make buttons larger for touch */
  .lightbox-close,
  .lightbox-prev,
  .lightbox-next {
    min-width: 48px;
    min-height: 48px;
  }
  
  .lightbox-thumbnail {
    min-width: 44px;
    min-height: 32px;
  }
}

/* ==============================================
   LOADING AND PERFORMANCE
   ============================================== */

/* Lazy Loading State */
.celebrity-image[data-src] {
  background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
}

.celebrity-image.loaded {
  animation: fadeIn 0.6s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Loading Skeleton Animation */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.celebrity-image[data-src]::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

/* ==============================================
   ACCESSIBILITY AND REDUCED MOTION
   ============================================== */

@media (prefers-reduced-motion: reduce) {
  .celebrity-item,
  .celebrity-card,
  .celebrity-image,
  .celebrity-overlay,
  .lightbox-modal,
  .lightbox-close,
  .lightbox-prev,
  .lightbox-next {
    animation: none !important;
    transition: none !important;
  }
  
  .celebrity-item {
    opacity: 1;
    transform: none;
  }
  
  .celebrity-image[data-src]::before {
    animation: none;
  }
}

/* Focus states for keyboard navigation */
.celebrity-card:focus {
  outline: 3px solid var(--accent, #F3B21C);
  outline-offset: 2px;
}

.lightbox-close:focus,
.lightbox-prev:focus,
.lightbox-next:focus {
  outline: 2px solid var(--accent, #F3B21C);
  outline-offset: 2px;
}

/* Improve contrast for better readability */
.celebrity-info {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* Safe area for notched devices */
@supports (padding: max(0px)) {
  .lightbox-container {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* ===== Lightbox: mobile-friendly arrows & close positioning ===== */
@media (max-width: 767.98px){
  /* Keep modal contents comfortably inside on small screens */
  .lightbox-modal { padding: 0 8px; }

  /* Bring the close button inside the viewport */
  .lightbox-close{
    top: 10px !important;
    right: 10px !important;
    background: rgba(0,0,0,.6);
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color:#fff; z-index: 10002;
  }

  /* Make prev/next visible and tappable on phones */
  .lightbox-prev,
  .lightbox-next{
    position: absolute !important;
    top: 50% !important; transform: translateY(-50%) !important;
    width: 44px !important; height: 44px !important; border-radius: 50% !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    background: rgba(0,0,0,.7) !important; color: #fff !important; border: 0 !important;
    z-index: 10002 !important;
  }

  .lightbox-prev{ left: 10px !important; }
  .lightbox-next{ right: 10px !important; }

  /* Slightly reduce image height on very small screens so arrows aren't on top of content */
  .lightbox-content img{ max-height: 65vh !important; }
}

/* ===== OUR APPROACH (mobile fixes for your current markup) ===== */
@media (max-width: 767.98px){

  /* 1) Make images actually show on mobile */
  .our-approach-revised .approach-image-revised img{
    width: 100%;
    height: auto !important;   /* override any height:100% rules */
    display: block;
  }

  /* 2) Restore vertical spacing between stacked items */
  .our-approach-revised .row.g-4{
    --bs-gutter-y: 1rem;       /* vertical gap */
    display: flex;             /* enable reordering below */
    flex-wrap: wrap;
  }
  .our-approach-revised .row.g-4 > .col-lg-6{
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* 3) Force each pair to render as yellow → image on phones
     Pair 2 (your 3rd and 4th columns) */
  .our-approach-revised .row.g-4 > .col-lg-6:nth-child(3){ order: 4; }
  .our-approach-revised .row.g-4 > .col-lg-6:nth-child(4){ order: 3; }

  /* Pair 4 (your 7th and 8th columns) */
  .our-approach-revised .row.g-4 > .col-lg-6:nth-child(7){ order: 8; }
  .our-approach-revised .row.g-4 > .col-lg-6:nth-child(8){ order: 7; }

  /* 4) Mobile typography polish for yellow cards */
  .our-approach-revised .approach-yellow-revised{
    padding: 16px 14px;
    text-align: left;
    height: 200px;
  }
  .our-approach-revised .approach-title-revised{
    font-size: clamp(1.1rem, 4.8vw, 1.35rem);
    line-height: 1.25;
    margin-bottom: .4rem;
  }
  .our-approach-revised .approach-desc-revised{
    font-size: clamp(.95rem, 3.8vw, 1rem);
    line-height: 1.55;
    margin: 0;
  }
}
/* === SERVICES: centered hover preview (~60% viewport) === */
@media (hover: hover) and (pointer: fine){
  .service-hover-preview{
    position: fixed;
    top: 40%; left: 50%;
    transform: translate(-50%, -50%) scale(.10);
    width: 30vw;
    max-height: 60vh;
    z-index: 9500;            /* below your lightbox (9999) */
    pointer-events: none;
    opacity: 0;
    transition: opacity .99s ease, transform .18s ease;
  }
  .service-hover-preview.in{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  .service-hover-preview img{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 18px 60px rgba(0,0,0,.35);
  }
}
/* === SERVICES (touch): tap-to-enlarge preview (~60% of viewport) === */
@media (hover: none){
  .service-touch-modal{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.9);
    display: none;                 /* shown via .active */
    align-items: center;
    justify-content: center;
    z-index: 9800;                 /* below your lightbox (usually 9999) */
  }
  .service-touch-modal.active{ display: flex; }

  .service-touch-modal img{
    width: 60vw;                   /* ~60% of screen width */
    max-height: 60vh;              /* cap at ~60% of screen height */
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 18px 60px rgba(0,0,0,.5);
  }

  .service-touch-close{
    position: absolute;
    top: 12px; right: 12px;
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.6); color: #fff; font-size: 22px;
  }
}
/* === SERVICES (touch): tap-to-enlarge preview (~60% of viewport) === */
@media (hover: none){
  .service-touch-modal{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.9);
    display: none;                 /* shown via .active */
    align-items: center;
    justify-content: center;
    z-index: 9800;                 /* below your lightbox (usually 9999) */
  }
  .service-touch-modal.active{ display: flex; }

  .service-touch-modal img{
    width: 60vw;                   /* ~60% of screen width */
    max-height: 60vh;              /* cap at ~60% of screen height */
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 18px 60px rgba(0,0,0,.5);
  }

  .service-touch-close{
    position: absolute;
    top: 12px; right: 12px;
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.6); color: #fff; font-size: 22px;
  }
}/* ==============================================
   ELEGANT LUXURY KPI SECTION - PREMIUM DESIGN
   Yesterday's classy white cards with subtle elegance
   ============================================== */

/* Main KPI Section */
.kpi {
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

/* Subtle background pattern */
.kpi::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(212, 175, 55, 0.02) 0%, transparent 50%);
  pointer-events: none;
}

/* Section Title */
.kpi .section-title {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: #1a1a1a;
  text-align: center;
  margin-bottom: 80px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  position: relative;
  z-index: 1;
}

/* ==============================================
   ELEGANT LUXURY CARDS
   ============================================== */

.kpi-luxury {
  position: relative;
  background: #ffffff;
  padding: 50px 35px;
  text-align: center;
  border: none;
  border-radius: 0;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 4px 20px rgba(0, 0, 0, 0.02);
  overflow: hidden;
}

/* Animated entrance */
.kpi-luxury.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Subtle top border accent */
.kpi-luxury::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #d4af37 50%, transparent);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.kpi-luxury:hover::before {
  opacity: 1;
}

/* Inner content wrapper */
.kpi-luxury-inner {
  position: relative;
  z-index: 1;
}

/* ==============================================
   NUMBER STYLING
   ============================================== */

.kpi-luxury .num {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 20px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  opacity: 0;
  transform: translateY(20px);
  line-height: 1.1;
}

.kpi-luxury.in .num {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.kpi-luxury:hover .num {
  color: #d4af37;
  transform: translateY(-5px) scale(1.05);
  letter-spacing: 0;
  text-shadow: 0 4px 15px rgba(212, 175, 55, 0.15);
}

/* ==============================================
   SUBTITLE STYLING
   ============================================== */

.kpi-luxury .sub {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  font-size: 0.95rem;
  font-weight: 400;
  color: #666666;
  line-height: 1.6;
  margin: 0;
  transition: all 0.4s ease;
  opacity: 0;
  transform: translateY(15px);
  max-width: 90%;
  margin: 0 auto;
}

.kpi-luxury.in .sub {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

.kpi-luxury:hover .sub {
  color: #888888;
}

/* ==============================================
   DECORATIVE LINE
   ============================================== */

.kpi-luxury .num::before {
  content: '—';
  display: block;
  font-size: 1.5rem;
  color: #d4af37;
  margin-bottom: 15px;
  opacity: 0.4;
  transition: all 0.4s ease;
}

.kpi-luxury:hover .num::before {
  opacity: 1;
  transform: scale(1.2);
}

/* ==============================================
   HOVER EFFECTS
   ============================================== */

.kpi-luxury:hover {
  transform: translateY(-12px);
  box-shadow: 
    0 8px 25px rgba(212, 175, 55, 0.12),
    0 15px 45px rgba(0, 0, 0, 0.06);
}

/* Subtle glow effect */
.kpi-luxury::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: all 0.6s ease;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}

.kpi-luxury:hover::after {
  width: 400px;
  height: 400px;
  opacity: 1;
}

/* ==============================================
   SPARKLE EFFECTS (OPTIONAL)
   ============================================== */

/* Light sparkle on hover */
.kpi-luxury-inner::before {
  content: '✨';
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 1.2rem;
  opacity: 0;
  transition: all 0.4s ease;
  pointer-events: none;
}

.kpi-luxury:hover .kpi-luxury-inner::before {
  opacity: 0.6;
  transform: translateY(-5px) rotate(15deg);
}

/* ==============================================
   RESPONSIVE DESIGN
   ============================================== */

@media (max-width: 991px) {
  .kpi {
    padding: 80px 0;
  }
  
  .kpi .section-title {
    margin-bottom: 60px;
    font-size: 2.5rem;
  }
  
  .kpi-luxury {
    min-height: 250px;
    padding: 40px 30px;
  }
  
  .kpi-luxury .num {
    font-size: 2.5rem;
    margin-bottom: 18px;
  }
  
  .kpi-luxury .sub {
    font-size: 0.9rem;
  }
}

@media (max-width: 767px) {
  .kpi {
    padding: 60px 0;
  }
  
  .kpi .section-title {
    margin-bottom: 40px;
    font-size: 2rem;
  }
  
  .kpi-luxury {
    min-height: 220px;
    padding: 35px 25px;
    margin-bottom: 20px;
  }
  
  .kpi-luxury .num {
    font-size: 2.2rem;
    margin-bottom: 15px;
  }
  
  .kpi-luxury .sub {
    font-size: 0.85rem;
  }
  
  .kpi-luxury:hover {
    transform: translateY(-8px);
  }
}

/* ==============================================
   CMS EDITING COMPATIBILITY
   ============================================== */

.kpi-luxury .num[contenteditable="true"],
.kpi-luxury .sub[contenteditable="true"] {
  outline: 2px dashed rgba(212, 175, 55, 0.7);
  outline-offset: 4px;
  cursor: text;
}

.cms-editable-text:hover {
  outline: 1px dashed rgba(212, 175, 55, 0.5);
  outline-offset: 3px;
}

/* ==============================================
   ACCESSIBILITY
   ============================================== */

@media (prefers-reduced-motion: reduce) {
  .kpi-luxury,
  .kpi-luxury .num,
  .kpi-luxury .sub,
  .kpi-luxury::before,
  .kpi-luxury::after {
    transition-duration: 0.01ms !important;
  }
}

/* ==============================================
   GRID LAYOUT (3 columns, 2 rows)
   ============================================== */

.kpi .row {
  position: relative;
  z-index: 1;
}

.kpi .col-md-4 {
  margin-bottom: 30px;
}

/* Staggered animation delays */
.kpi-luxury:nth-child(1) { transition-delay: 0.1s; }
.kpi-luxury:nth-child(2) { transition-delay: 0.2s; }
.kpi-luxury:nth-child(3) { transition-delay: 0.3s; }
.kpi-luxury:nth-child(4) { transition-delay: 0.4s; }
.kpi-luxury:nth-child(5) { transition-delay: 0.5s; }
.kpi-luxury:nth-child(6) { transition-delay: 0.6s; }
/* ==============================================
   HERO SLIDESHOW WITH PUZZLE EFFECT
   10 slides with WOW puzzle transitions
   ============================================== */

.hero-slideshow {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  background: #000;
}

/* Slideshow Container */
.slideshow-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Individual Slide */
.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.hero-slide.active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}

.hero-slide.transitioning {
  z-index: 3;
}

/* ==============================================
   PUZZLE GRID - 5x5 Grid of Pieces
   ============================================== */

.puzzle-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  z-index: 1;
}

/* Individual Puzzle Piece */
.puzzle-piece {
  position: relative;
  overflow: hidden;
  background-size: 500% 500%;
  background-position: center;
  opacity: 0;
  transform: scale(0) rotate(0deg);
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Puzzle piece states */
.puzzle-piece.animate-in {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

.puzzle-piece.animate-out {
  opacity: 0;
  transform: scale(0) rotate(180deg);
}

/* Staggered animation for each piece */
.puzzle-piece:nth-child(1)  { transition-delay: 0.00s; }
.puzzle-piece:nth-child(2)  { transition-delay: 0.05s; }
.puzzle-piece:nth-child(3)  { transition-delay: 0.10s; }
.puzzle-piece:nth-child(4)  { transition-delay: 0.15s; }
.puzzle-piece:nth-child(5)  { transition-delay: 0.20s; }
.puzzle-piece:nth-child(6)  { transition-delay: 0.05s; }
.puzzle-piece:nth-child(7)  { transition-delay: 0.10s; }
.puzzle-piece:nth-child(8)  { transition-delay: 0.15s; }
.puzzle-piece:nth-child(9)  { transition-delay: 0.20s; }
.puzzle-piece:nth-child(10) { transition-delay: 0.25s; }
.puzzle-piece:nth-child(11) { transition-delay: 0.10s; }
.puzzle-piece:nth-child(12) { transition-delay: 0.15s; }
.puzzle-piece:nth-child(13) { transition-delay: 0.20s; }
.puzzle-piece:nth-child(14) { transition-delay: 0.25s; }
.puzzle-piece:nth-child(15) { transition-delay: 0.30s; }
.puzzle-piece:nth-child(16) { transition-delay: 0.15s; }
.puzzle-piece:nth-child(17) { transition-delay: 0.20s; }
.puzzle-piece:nth-child(18) { transition-delay: 0.25s; }
.puzzle-piece:nth-child(19) { transition-delay: 0.30s; }
.puzzle-piece:nth-child(20) { transition-delay: 0.35s; }
.puzzle-piece:nth-child(21) { transition-delay: 0.20s; }
.puzzle-piece:nth-child(22) { transition-delay: 0.25s; }
.puzzle-piece:nth-child(23) { transition-delay: 0.30s; }
.puzzle-piece:nth-child(24) { transition-delay: 0.35s; }
.puzzle-piece:nth-child(25) { transition-delay: 0.40s; }

/* ==============================================
   SLIDE CONTENT OVERLAY
   ============================================== */

.slide-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
  padding: 20px;
}

.slide-content-inner {
  text-align: center;
  max-width: 900px;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.hero-slide.active .slide-content-inner {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

/* Slide Title */
.slide-title {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 900;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
  text-shadow: 
    0 2px 10px rgba(0, 0, 0, 0.5),
    0 4px 20px rgba(0, 0, 0, 0.3);
  line-height: 1.1;
}

/* Slide Subtitle */
.slide-subtitle {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0.02em;
  line-height: 1.6;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  margin: 0;
}

/* ==============================================
   NAVIGATION ARROWS
   ============================================== */

.slide-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.slide-nav:hover {
  background: rgba(212, 175, 55, 0.8);
  border-color: #d4af37;
  transform: translateY(-50%) scale(1.1);
}

.slide-prev {
  left: 30px;
}

.slide-next {
  right: 30px;
}

/* ==============================================
   SLIDE INDICATORS (DOTS)
   ============================================== */

.slide-indicators {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 100;
}

.slide-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0;
}

.slide-dot:hover {
  background: rgba(255, 255, 255, 0.7);
  transform: scale(1.2);
}

.slide-dot.active {
  background: #d4af37;
  border-color: #d4af37;
  width: 40px;
  border-radius: 6px;
}

/* ==============================================
   PROGRESS BAR
   ============================================== */

.slide-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  z-index: 100;
}

.slide-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #d4af37, #f3c850);
  transition: width 5s linear;
}

.slide-progress-bar.active {
  width: 100%;
}

/* ==============================================
   CMS EDITING COMPATIBILITY
   ============================================== */

.slide-title[contenteditable="true"],
.slide-subtitle[contenteditable="true"] {
  outline: 2px dashed rgba(212, 175, 55, 0.7);
  outline-offset: 4px;
  cursor: text;
}

.cms-editable-text:hover {
  outline: 1px dashed rgba(212, 175, 55, 0.5);
  outline-offset: 3px;
}

/* ==============================================
   RESPONSIVE DESIGN
   ============================================== */

@media (max-width: 991px) {
  .hero-slideshow {
    min-height: 500px;
  }
  
  .slide-title {
    font-size: 2.5rem;
  }
  
  .slide-subtitle {
    font-size: 1.2rem;
  }
  
  .slide-nav {
    width: 40px;
    height: 40px;
  }
  
  .slide-prev {
    left: 15px;
  }
  
  .slide-next {
    right: 15px;
  }
}

@media (max-width: 767px) {
  .hero-slideshow {
    height: 70vh;
    min-height: 400px;
  }
  
  .slide-title {
    font-size: 2rem;
    margin-bottom: 15px;
  }
  
  .slide-subtitle {
    font-size: 1rem;
  }
  
  .slide-nav {
    width: 35px;
    height: 35px;
  }
  
  .slide-prev {
    left: 10px;
  }
  
  .slide-next {
    right: 10px;
  }
  
  .slide-indicators {
    bottom: 20px;
    gap: 8px;
  }
  
  .slide-dot {
    width: 8px;
    height: 8px;
  }
  
  .slide-dot.active {
    width: 30px;
  }
  
  /* Reduce puzzle grid on mobile for performance */
  .puzzle-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
}

/* ==============================================
   LOADING STATE
   ============================================== */

.hero-slideshow.loading {
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

.hero-slideshow.loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border: 4px solid rgba(212, 175, 55, 0.3);
  border-top-color: #d4af37;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ==============================================
   ACCESSIBILITY
   ============================================== */

@media (prefers-reduced-motion: reduce) {
  .puzzle-piece,
  .slide-content-inner,
  .slide-nav,
  .slide-dot {
    transition-duration: 0.01ms !important;
  }
  
  .puzzle-piece {
    transition-delay: 0s !important;
  }
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ==============================================
   CMS IMAGE EDITING FIX
   ============================================== */

/* Slide background - always visible, behind everything */
.slide-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
}

/* Image wrapper - hidden by default, visible in edit mode */
.slide-image-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  max-width: 600px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Show editable images in edit mode */
body[data-edit-mode="true"] .slide-image-wrapper,
.slide-image-wrapper:hover {
  opacity: 1;
  pointer-events: auto;
}

/* Editable image styling */
.slide-image-editable {
  width: 100%;
  height: auto;
  display: block;
  border: 3px dashed rgba(212, 175, 55, 0.6);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.slide-image-editable:hover {
  border-color: #d4af37;
  box-shadow: 0 6px 30px rgba(212, 175, 55, 0.4);
  transform: scale(1.02);
}

/* Edit mode indicator */
body[data-edit-mode="true"] .slide-image-wrapper::before {
  content: '📷 Click to edit image';
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(212, 175, 55, 0.95);
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Hide image wrapper on non-active slides in normal mode */
.hero-slide:not(.active) .slide-image-wrapper {
  display: none;
}

/* Show on all slides in edit mode */
body[data-edit-mode="true"] .hero-slide .slide-image-wrapper {
  display: block;
}
/* ==============================================
   ELEGANT FOOTER - CLASSY DESIGN
   ============================================== */

.footer-elegant {
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2520 100%);
  color: #e0e0e0;
  padding-top: 80px;
  position: relative;
  overflow: hidden;
}

/* Subtle pattern overlay */
.footer-elegant::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(212, 175, 55, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

/* Top border accent */
.footer-elegant::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d4af37 50%, transparent);
}

/* ==============================================
   FOOTER MAIN CONTENT
   ============================================== */

.footer-main {
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1;
}

.footer-section {
  margin-bottom: 30px;
}

/* ==============================================
   LOGO & TAGLINE
   ============================================== */

.footer-logo {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto;
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 16px;
  letter-spacing: 0.5px;
}

.footer-tagline {
  font-size: 0.9rem;
  color: #b0b0b0;
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 250px;
}

/* ==============================================
   SOCIAL MEDIA LINKS
   ============================================== */

.footer-social {
  display: flex;
  gap: 12px;
}

.social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b0b0b0;
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-link:hover {
  background: #d4af37;
  border-color: #d4af37;
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.social-link svg {
  transition: transform 0.3s ease;
}

.social-link:hover svg {
  transform: scale(1.1);
}

/* ==============================================
   FOOTER HEADINGS
   ============================================== */

.footer-heading {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 12px;
}

.footer-heading::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: #d4af37;
}

/* ==============================================
   FOOTER LINKS
   ============================================== */

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #b0b0b0;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  display: inline-block;
  position: relative;
}

.footer-links a::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: #d4af37;
  transition: width 0.3s ease;
}

.footer-links a:hover {
  color: #d4af37;
  padding-left: 8px;
}

.footer-links a:hover::before {
  width: 100%;
}

/* ==============================================
   CONTACT INFO
   ============================================== */

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-contact li {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  color: #b0b0b0;
  font-size: 0.9rem;
  line-height: 1.6;
}

.footer-contact svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #d4af37;
}

.footer-contact a {
  color: #b0b0b0;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-contact a:hover {
  color: #d4af37;
}

/* ==============================================
   FOOTER BOTTOM
   ============================================== */

.footer-bottom {
  padding: 30px 0;
  position: relative;
  z-index: 1;
}

.footer-copyright {
  color: #808080;
  font-size: 0.85rem;
  margin: 0;
}

.footer-bottom-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-bottom-links a {
  color: #808080;
  text-decoration: none;
  font-size: 0.85rem;
  transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
  color: #d4af37;
}

.footer-bottom-links .separator {
  color: #505050;
  user-select: none;
}

/* ==============================================
   BACK TO TOP BUTTON
   ============================================== */

.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: #d4af37;
  border: none;
  border-radius: 50%;
  color: #ffffff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 1000;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: #f3c850;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

.back-to-top svg {
  transition: transform 0.3s ease;
}

.back-to-top:hover svg {
  transform: translateY(-2px);
}

/* ==============================================
   CMS EDITING
   ============================================== */

.footer-elegant [data-cms-text]:hover {
  outline: 1px dashed rgba(212, 175, 55, 0.5);
  outline-offset: 3px;
}

.footer-elegant [data-cms-text]:focus {
  outline: 2px solid rgba(212, 175, 55, 0.7);
  outline-offset: 3px;
}

/* ==============================================
   RESPONSIVE DESIGN
   ============================================== */

@media (max-width: 991px) {
  .footer-elegant {
    padding-top: 60px;
  }
  
  .footer-main {
    padding-bottom: 40px;
  }
  
  .footer-section {
    margin-bottom: 40px;
  }
  
  .footer-bottom-links {
    justify-content: center;
    margin-top: 15px;
  }
}

@media (max-width: 767px) {
  .footer-elegant {
    padding-top: 50px;
  }
  
  .footer-logo {
    font-size: 1.3rem;
  }
  
  .footer-heading {
    font-size: 0.95rem;
  }
  
  .footer-section {
    text-align: center;
  }
  
  .footer-tagline {
    max-width: 100%;
  }
  
  .footer-social {
    justify-content: center;
  }
  
  .footer-links,
  .footer-contact {
    text-align: center;
  }
  
  .footer-contact li {
    justify-content: center;
  }
  
  .footer-heading::after {
    left: 50%;
    transform: translateX(-50%);
  }
  
  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
  }
  
  .footer-bottom-links {
    flex-direction: column;
    gap: 8px;
  }
  
  .footer-bottom-links .separator {
    display: none;
  }
}

/* ==============================================
   PRINT STYLES
   ============================================== */

@media print {
  .footer-elegant {
    background: #ffffff;
    color: #000000;
  }
  
  .back-to-top {
    display: none;
  }
}

/* ==============================================
   CAREERS PAGE - ELEGANT DESIGN
   ============================================== */

/* Careers Hero Section */
.careers-hero {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  padding: 120px 0 80px;
  position: relative;
  overflow: hidden;
}

.careers-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(212, 175, 55, 0.03) 0%, transparent 50%);
  pointer-events: none;
}

.careers-title {
  font-family: Inter, system-ui, sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  color: #1a1a1a;
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.careers-subtitle {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  color: #666666;
  line-height: 1.8;
  max-width: 700px;
  margin: 0 auto;
}

/* ==============================================
   WHY JOIN US SECTION
   ============================================== */

.why-join {
  padding: 80px 0;
  background: #ffffff;
}

.benefit-card {
  text-align: center;
  padding: 40px 30px;
  background: #ffffff;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.benefit-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.12);
}

.benefit-icon {
  font-size: 3rem;
  margin-bottom: 20px;
}

.benefit-title {
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 12px;
}

.benefit-text {
  font-size: 0.95rem;
  color: #666666;
  line-height: 1.6;
  margin: 0;
}

/* ==============================================
   CAREERS FORM SECTION
   ============================================== */

.careers-form-section {
  padding: 80px 0 100px;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
}

.form-card {
  background: #ffffff;
  padding: 50px 40px;
  border-radius: 8px;
  box-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.04);
}

.form-heading {
  font-family: Inter, system-ui, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 12px;
  text-align: center;
}

.form-subheading {
  font-size: 1rem;
  color: #666666;
  text-align: center;
  margin-bottom: 40px;
}

/* ==============================================
   FORM STYLING
   ============================================== */

.careers-form {
  max-width: 100%;
}

.form-group {
  margin-bottom: 28px;
}

.form-label {
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8px;
  display: block;
}

.required {
  color: #d4af37;
}

.form-control {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  font-family: Inter, system-ui, sans-serif;
  color: #1a1a1a;
  background: #f8f9fa;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.form-control:focus {
  outline: none;
  border-color: #d4af37;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.form-control::placeholder {
  color: #999999;
}

select.form-control {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}

textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

.form-text {
  font-size: 0.85rem;
  color: #888888;
  margin-top: 6px;
  display: block;
}

/* ==============================================
   FILE UPLOAD STYLING
   ============================================== */

.file-upload-wrapper {
  position: relative;
}

.file-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.file-upload-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: #f8f9fa;
  border: 2px dashed #d0d0d0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 8px;
}

.file-upload-label:hover {
  border-color: #d4af37;
  background: #ffffff;
}

.file-upload-label svg {
  color: #d4af37;
  margin-bottom: 12px;
}

.file-upload-text {
  font-size: 1rem;
  color: #666666;
  font-weight: 500;
}

.file-name {
  font-size: 0.9rem;
  color: #d4af37;
  margin-top: 8px;
  font-weight: 600;
}

.file-upload-wrapper.has-file .file-upload-label {
  border-color: #d4af37;
  background: #fffef8;
}

/* ==============================================
   SUBMIT BUTTON
   ============================================== */

.btn-submit {
  width: 100%;
  padding: 16px 32px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #ffffff;
  background: linear-gradient(135deg, #d4af37 0%, #f3c850 100%);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 12px;
  position: relative;
  overflow: hidden;
}

.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}

.btn-submit:active {
  transform: translateY(0);
}

.btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

.btn-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ==============================================
   ALERT MESSAGES
   ============================================== */

.alert {
  padding: 16px 20px;
  border-radius: 6px;
  margin-bottom: 24px;
  font-size: 0.95rem;
  font-weight: 500;
}

.alert-success {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.alert-danger {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

/* ==============================================
   RESPONSIVE DESIGN
   ============================================== */

@media (max-width: 991px) {
  .careers-hero {
    padding: 100px 0 60px;
  }
  
  .why-join {
    padding: 60px 0;
  }
  
  .careers-form-section {
    padding: 60px 0 80px;
  }
  
  .form-card {
    padding: 40px 30px;
  }
}

@media (max-width: 767px) {
  .careers-hero {
    padding: 80px 0 50px;
  }
  
  .careers-title {
    font-size: 2rem;
  }
  
  .careers-subtitle {
    font-size: 1rem;
  }
  
  .why-join {
    padding: 50px 0;
  }
  
  .benefit-card {
    padding: 30px 20px;
    margin-bottom: 20px;
  }
  
  .careers-form-section {
    padding: 50px 0 60px;
  }
  
  .form-card {
    padding: 30px 20px;
  }
  
  .form-heading {
    font-size: 1.75rem;
  }
  
  .form-control {
    padding: 12px 14px;
    font-size: 0.95rem;
  }
  
  .file-upload-label {
    padding: 30px 15px;
  }
  
  .btn-submit {
    padding: 14px 28px;
    font-size: 1rem;
  }
}

/* ==============================================
   CMS EDITING
   ============================================== */

[data-cms-text]:hover {
  outline: 1px dashed rgba(212, 175, 55, 0.5);
  outline-offset: 3px;
}

[data-cms-text]:focus {
  outline: 2px solid rgba(212, 175, 55, 0.7);
  outline-offset: 3px;
}

/* ==============================================
   FIX: Remove CMS Edit Outline from Frontend
   Add this to your styles.css
   ============================================== */

/* Only show edit outlines when in actual edit mode */
[data-cms-text]:hover,
[data-cms-image]:hover,
[contenteditable="true"]:hover {
  outline: none !important;
}

/* Only show outlines when CMS editor is active */
body.cms-editing [data-cms-text]:hover,
body.cms-editing [data-cms-image]:hover,
body.cms-editing [contenteditable="true"]:hover {
  outline: 2px dashed rgba(243, 178, 28, 0.7) !important;
  outline-offset: 4px;
  cursor: pointer;
}

/* Alternative: Check if cms_editor.js is loaded */
.cms-editor-active [data-cms-text]:hover,
.cms-editor-active [data-cms-image]:hover {
  outline: 2px dashed rgba(243, 178, 28, 0.7) !important;
  outline-offset: 4px;
  cursor: pointer;
}

/* Remove any default CMS hover effects on frontend */
[data-cms-text],
[data-cms-image] {
  outline: none !important;
}

/* ================================================
   MOBILE FIX 1: BIGGER STATS TEXT
   ================================================ */

/* Make stats text MUCH bigger on mobile */
@media (max-width: 768px) {
  .kpi .num {
    font-size: clamp(2rem, 8vw, 3rem) !important;
    font-weight: 900 !important;
  }
  
  .kpi .sub {
    font-size: clamp(0.9rem, 4vw, 1.1rem) !important;
    line-height: 1.5 !important;
  }
}

@media (max-width: 480px) {
  .kpi .num {
    font-size: clamp(1.8rem, 7vw, 2.5rem) !important;
  }
  
  .kpi .sub {
    font-size: clamp(0.85rem, 3.5vw, 1rem) !important;
  }
}


/* ================================================
   MOBILE FIX 2: SERVICE IMAGES FILL CONTAINER
   ================================================ */

/* Service section - uniform container, images fill */
.service {
  margin-bottom: 2rem;
}

.service-image {
  width: 100%;
  height: 400px; /* Fixed height for desktop */
  overflow: hidden;
  border-radius: 8px;
  position: relative;
  background: #f0f0f0;
}

.service-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Mobile - smaller but still uniform */
@media (max-width: 768px) {
  .service-image {
    height: 300px; /* Uniform height on mobile */
  }
  
  .service-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

@media (max-width: 480px) {
  .service-image {
    height: 250px; /* Uniform height on small mobile */
  }
  
  .service-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* Work items - uniform containers */
.work-item {
  margin-bottom: 2rem;
}

.work-item img {
  width: 100% !important;
  height: 350px !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  border-radius: 8px;
}

@media (max-width: 768px) {
  .work-item img {
    height: 280px !important;
  }
}

@media (max-width: 480px) {
  .work-item img {
    height: 220px !important;
  }
}
/* ================================================
   SERVICE IMAGES - UNIFORM SIZE FIX
   ALL containers SAME size, images FILL them
   ================================================ */

/* Force all service containers to be SAME aspect ratio */
.service {
  margin-bottom: 2rem;
}

/* CRITICAL: Service image container - UNIFORM SIZE */
.service-image {
  width: 100% !important;
  aspect-ratio: 4/3 !important; /* Same ratio for ALL */
  overflow: hidden !important;
  border-radius: 8px !important;
  position: relative !important;
  background: #f0f0f0 !important;
}

/* Image FILLS container completely */
.service-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
}

/* Service content - consistent spacing */
.service-content {
  padding-top: 1.5rem !important;
}

.service-title {
  margin-bottom: 1rem !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
}

.service-description {
  margin-bottom: 1rem !important;
  line-height: 1.6 !important;
}

/* Mobile - still uniform */
@media (max-width: 768px) {
  .service-image {
    aspect-ratio: 4/3 !important;
  }
  
  .service-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  
  /* Consistent spacing between items */
  .service {
    margin-bottom: 2rem !important;
  }
}

@media (max-width: 480px) {
  .service-image {
    aspect-ratio: 4/3 !important;
  }
  
  .service {
    margin-bottom: 1.5rem !important;
  }
}

/* Remove any conflicting styles */
.service img {
  max-width: 100% !important;
  height: auto !important;
}

/* Override mobile reduction */
@media (max-width: 480px) {
  .work-item img, 
  .service img {
    max-width: 100% !important;
  }
  
  .service-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}