/* Homepage additions: stats, clients, about/cta, footer */

/* Section headings already styled in styles.css; we add card-like rows */
.stats{
  display:grid; 
  grid-template-columns:repeat(3,1fr); 
  gap:20px;
}
@media (max-width: 900px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 600px){.stats{grid-template-columns:1fr}}
.stat-card{padding:32px 24px; text-align:center; border-radius:16px; position:relative; overflow:hidden; transition:all 0.4s ease}
.stat-card::before{content:''; position:absolute; inset:-100%; background:radial-gradient(circle, rgba(118,199,66,0.15), transparent 70%); opacity:0; transition:opacity 0.4s ease}
.stat-card:hover::before{opacity:1}
.stat-card:hover{transform:translateY(-6px); box-shadow:inset 0 0 0 2px rgba(118,199,66,0.3), 0 12px 40px rgba(118,199,66,0.2)}
.stat-icon{width:60px; height:60px; margin:0 auto 20px; background:linear-gradient(135deg, var(--mavam-light), var(--mavam-primary)); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(118,199,66,0.4), 0 0 40px rgba(118,199,66,0.2); transition:all 0.4s ease; position:relative}
.stat-icon::before{content:''; position:absolute; inset:-4px; border-radius:50%; background:linear-gradient(135deg, var(--mavam-primary), var(--mavam-glow)); opacity:0; filter:blur(8px); transition:opacity 0.4s ease}
.stat-card:hover .stat-icon::before{opacity:0.4}
.stat-icon svg{width:30px; height:30px; stroke:#0b1220; stroke-width:2.5; position:relative; z-index:1}
.stat-card:hover .stat-icon{transform:scale(1.15) rotate(8deg); box-shadow:0 8px 32px rgba(118,199,66,0.6), 0 0 60px rgba(118,199,66,0.3)}
.stat-value{font-size:56px; font-weight:900; letter-spacing:-2px; background:linear-gradient(135deg, var(--mavam-light), var(--mavam-primary), var(--mavam-dark)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; background-size:200% 200%; animation:gradientShift 3s ease infinite; margin:12px 0; line-height:1.1; position:relative; display:inline-block; filter:drop-shadow(0 0 20px rgba(118,199,66,0.3))}
.stat-value::after{content:''; position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); width:40px; height:3px; background:linear-gradient(90deg, transparent, var(--mavam-primary), transparent); border-radius:2px; animation:lineGlow 2s ease-in-out infinite}
@keyframes gradientShift{0%, 100%{background-position:0% 50%} 50%{background-position:100% 50%}}
@keyframes lineGlow{0%, 100%{opacity:0.6; width:40px} 50%{opacity:1; width:50px}}
.stat-label{margin-top:12px; color:#94a3b8; font-weight:600; font-size:15px; text-transform:uppercase; letter-spacing:0.5px; transition:all 0.3s ease}
.stat-card:hover .stat-label{color:var(--mavam-light); transform:scale(1.05)}
@media (max-width:700px){.stat-icon{width:48px; height:48px; margin:0 auto 16px} .stat-icon svg{width:24px; height:24px} .stat-value{font-size:42px} .stat-label{font-size:13px}}

/* Key Clients grid */
.clients-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:12px; padding:16px}
@media (max-width: 1100px){.clients-grid{grid-template-columns:repeat(4,1fr)}}
@media (max-width: 700px){.clients-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width: 480px){.clients-grid{grid-template-columns:repeat(2,1fr)}}
.client-logo{height:64px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); border-radius:12px; color:#e2e8f0; font-weight:600}

/* About / CTA */
.about-cta{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px}
.about-copy h3{margin:0 0 6px}
.about-actions{flex-shrink:0}
@media (max-width: 700px){
  .about-cta{flex-direction:column; align-items:stretch}
  .about-actions .btn{width:100%}
}

/* Footer redesign */
.site-footer{margin-top:24px}
.footer-cta{margin:0 auto 18px; padding:18px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.footer-cta h4{margin:0; font-size:20px}
.footer-cta p{margin:4px 0 0; color:#94a3b8}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:16px; padding:18px}
@media (max-width: 900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width: 600px){.footer-grid{grid-template-columns:1fr}}
.footer-brand .logo{font-size:18px}
.footer-links a{display:block; color:#e2e8f0; text-decoration:none; padding:6px 0}
.footer-links a:hover{opacity:.9}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; border-top:1px solid rgba(255,255,255,0.12)}
@media (max-width: 600px){.footer-bottom{flex-direction:column; text-align:center}}

/* Minor helpers */
.section .glass-card{border-radius:16px}

/* MAVAM Brand Identity - Fresh Green + Purple-Gray Premium Theme */
:root{
  --mavam-primary: #76c742;    /* MAVAM fresh green */
  --mavam-light: #a8e063;      /* light lime accent */
  --mavam-dark: #4a9128;       /* deep forest green */
  --mavam-glow: #56ab2f;       /* glow green */
  --mavam-purple: #444069;     /* premium purple-gray accent */
  --mavam-violet: #504b78;     /* soft purple-gray */
  /* Legacy compatibility */
  --nf-purple: #444069;
  --nf-magenta: #76c742;
  --nf-cyan: #a8e063;
}

/* Prefer Poppins where available */
body{font-family:'Poppins','Inter','Cairo',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

/* MAVAM Logo styling */
.logo{font-weight:800; font-size:22px; letter-spacing:0.5px; background:linear-gradient(135deg, var(--mavam-light), var(--mavam-primary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text}

/* Animated light waves backdrop - MAVAM Green + Purple-Gray blend */
.bg-waves{position:fixed; inset:0; z-index:-1; opacity:.55; pointer-events:none; overflow:hidden}
.bg-waves::before,
.bg-waves::after{
  content:""; position:absolute; inset:-20% -10%;
  background: radial-gradient(60% 40% at 10% 30%, rgba(118,199,66,.35), transparent 60%),
              radial-gradient(50% 35% at 90% 70%, rgba(68,64,105,.32), transparent 60%),
              radial-gradient(40% 30% at 50% 100%, rgba(168,224,99,.30), transparent 60%),
              radial-gradient(45% 35% at 70% 40%, rgba(80,75,120,.28), transparent 60%);
  filter: blur(24px);
  animation: waveFlow 18s linear infinite;
}
.bg-waves::after{animation-duration: 26s; mix-blend-mode: screen; opacity:.6}
@keyframes waveFlow{from{transform:translate3d(0,0,0) rotate(0deg)} to{transform:translate3d(0,0,0) rotate(360deg)}}

/* Glass cards: stronger glow, subtle 3D hover - MAVAM Green */
.glass-card{background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%);
  box-shadow: 0 20px 40px rgba(10,14,25,.45), inset 0 1px 0 rgba(255,255,255,.08);
  position:relative; transition: transform .25s ease, box-shadow .3s ease, filter .25s ease;
}
.glass-card:hover{transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 40px rgba(10,14,25,.45), inset 0 0 0 1.5px rgba(118,199,66,0.35), 0 0 20px rgba(118,199,66,0.15);
}

/* Sheen highlight on hover */
.card{position:relative}
.card::after{content:""; position:absolute; inset:-1px; pointer-events:none; border-radius:16px;
  background: linear-gradient(120deg, rgba(255,255,255,.08) 10%, rgba(255,255,255,0) 30%);
  opacity:0; transition:opacity .25s ease; mix-blend-mode: screen;
}
.card:hover::after{opacity:1}

/* Buttons: MAVAM Green gradient */
.btn-primary{background: linear-gradient(135deg, var(--mavam-light), var(--mavam-primary)); color:#0b1220;
  border:1px solid transparent;
  font-weight:600;
  transition: all .3s ease;
  box-shadow: 0 4px 12px rgba(118,199,66,0.2);
}
.btn-primary:hover{filter: brightness(1.08); box-shadow: inset 0 0 0 1px rgba(168,224,99,0.4), 0 6px 16px rgba(118,199,66,0.3);}

/* Overlay info on masonry cards: softer glass and glow edge */
.grid.masonry .overlay-info{background:rgba(11,18,32,.45); border:1px solid rgba(255,255,255,.16);
  box-shadow: 0 12px 24px rgba(2,6,23,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
}

/* Reveal on scroll */
.reveal.in{opacity:1; transform:none}

/* Footer polish */
.footer-brand p{color:#94a3b8; margin:.25rem 0 0}
.footer-grid h5{margin:.25rem 0 .5rem; font-size:14px; color:#cbd5e1}

/* Testimonials Slider */
.testimonials-wrapper{padding:24px; position:relative}
.testimonials-slider{overflow:hidden; position:relative; min-height:140px}
.testimonial-slide{display:none; padding:16px; text-align:center; animation:fadeInSlide .5s ease}
.testimonial-slide.active{display:block}
.testimonial-text{font-size:18px; line-height:1.6; margin:0 0 12px; font-style:italic}
.testimonial-author{color:var(--mavam-light); font-weight:600}
.slider-controls{display:flex; align-items:center; justify-content:center; gap:16px; margin-top:20px}
.slider-btn{background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); color:#e5e7eb; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; cursor:pointer; transition:all .3s ease}
.slider-btn:hover{background:rgba(255,255,255,0.15); transform:scale(1.1)}
.slider-dots{display:flex; gap:8px}
.slider-dots .dot{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.3); cursor:pointer; transition:all .3s ease}
.slider-dots .dot.active{background:linear-gradient(135deg, var(--mavam-light), var(--mavam-primary)); width:24px; border-radius:5px}
@keyframes fadeInSlide{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}

/* Featured Projects Grid */
.featured-grid{
  display:grid; 
  grid-template-columns:repeat(3,1fr); 
  gap:18px;
}
@media (max-width:1024px){.featured-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.featured-grid{grid-template-columns:1fr}}
.featured-card{position:relative; overflow:hidden; border-radius:16px; border:1px solid rgba(255,255,255,0.18); transition:transform .4s ease, box-shadow .3s ease; transform-style:preserve-3d; will-change:transform}
.featured-card:hover{box-shadow: inset 0 0 0 1.5px rgba(118,199,66,0.4), 0 0 16px rgba(118,199,66,0.12);}
.featured-image{aspect-ratio:16/10; overflow:hidden; background:#1a1a2e}
.featured-image img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(0.16, 1, 0.3, 1)}
.featured-card:hover .featured-image img{transform:scale(1.08)}
.featured-overlay{position:absolute; bottom:0; left:0; right:0; padding:16px; background:linear-gradient(to top, rgba(11,18,32,0.95), rgba(11,18,32,0.7), transparent); transform:translateY(100%); transition:transform .4s cubic-bezier(0.16, 1, 0.3, 1)}
.featured-card:hover .featured-overlay{transform:translateY(0)}
.featured-title{font-size:16px; font-weight:700; margin:0 0 4px; color:#fff}
.featured-category{font-size:13px; color:var(--mavam-light); margin:0}

/* CTA Banner */
.cta-banner{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:32px; position:relative; overflow:hidden; min-height:140px}
.cta-banner::before{content:""; position:absolute; inset:-30%; background:radial-gradient(circle at 30% 50%, rgba(118,199,66,.38), transparent 50%), radial-gradient(circle at 70% 50%, rgba(68,64,105,.32), transparent 50%), radial-gradient(circle at 50% 80%, rgba(168,224,99,.28), transparent 50%); filter:blur(40px); animation:waveFlow 20s ease-in-out infinite; z-index:0}
.cta-content{position:relative; z-index:1}
.cta-content h3{margin:0 0 8px; font-size:24px}
.cta-banner .btn{position:relative; z-index:1}
@media (max-width:700px){.cta-banner{flex-direction:column; text-align:center}}

/* Partners Carousel */
.partners-carousel{padding:20px; overflow:hidden}
.marquee-track{display:flex; gap:20px; animation:marqueeScroll 30s linear infinite; will-change:transform}
.partner-logo{min-width:140px; height:70px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.15); border-radius:12px; color:#cbd5e1; font-weight:600; font-size:14px}
@keyframes marqueeScroll{0%{transform:translateX(0)} 100%{transform:translateX(-50%)}}
.partners-carousel:hover .marquee-track{animation-play-state:paused}

/* Newsletter Signup */
.newsletter-box{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px; flex-wrap:wrap}
.newsletter-content h3{margin:0 0 6px; font-size:20px}
.newsletter-form{display:flex; gap:12px; flex-wrap:wrap}
.newsletter-form input[type="email"]{background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); color:#e5e7eb; padding:12px 16px; border-radius:10px; min-width:260px; outline:none; transition:border-color .3s ease}
.newsletter-form input[type="email"]:focus{border-color:var(--mavam-primary)}
@media (max-width:700px){.newsletter-box{flex-direction:column; align-items:stretch} .newsletter-form{width:100%} .newsletter-form input,.newsletter-form button{flex:1}}

/* Contact Section */
.contact-wrapper{display:grid; grid-template-columns:1.5fr 1fr; gap:20px; padding:20px; overflow:hidden}
@media (max-width:900px){.contact-wrapper{grid-template-columns:1fr}}
.contact-map{border-radius:12px; overflow:hidden; min-height:300px}
.contact-map iframe{width:100%; height:100%; min-height:300px}
.contact-info h4{margin:0 0 8px; font-size:18px}
.social-links{display:flex; gap:12px; margin-top:16px; flex-wrap:wrap}
.social-icon{width:48px; height:48px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.18); border-radius:12px; font-size:20px; text-decoration:none; transition:all .3s ease}
.social-icon:hover{background:rgba(255,255,255,0.15); transform:translateY(-3px); box-shadow: inset 0 0 0 1px rgba(118,199,66,0.35), 0 0 12px rgba(118,199,66,0.1);}

/* Floating WhatsApp Button */
.whatsapp-float{position:fixed; bottom:30px; right:30px; width:60px; height:60px; background:linear-gradient(135deg, #25d366, #128c7e); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 20px rgba(37,211,102,0.4); z-index:1000; cursor:pointer; transition:all .3s ease; animation:whatsappPulse 2s infinite}
.whatsapp-float:hover{transform:scale(1.1); box-shadow:0 6px 30px rgba(37,211,102,0.6)}
.whatsapp-float svg{width:32px; height:32px; fill:#fff}
.whatsapp-float::before{content:''; position:absolute; inset:-8px; border:2px solid rgba(37,211,102,0.3); border-radius:50%; animation:whatsappRing 2s infinite}
@keyframes whatsappPulse{0%, 100%{transform:scale(1)} 50%{transform:scale(1.05)}}
@keyframes whatsappRing{0%{transform:scale(1); opacity:1} 100%{transform:scale(1.3); opacity:0}}
[dir="rtl"] .whatsapp-float{right:auto; left:30px}
@media (max-width:700px){.whatsapp-float{width:56px; height:56px; bottom:20px; right:20px} [dir="rtl"] .whatsapp-float{right:auto; left:20px}}

/* Scroll Progress Bar */
.scroll-progress{position:fixed; top:0; left:0; width:0%; height:4px; background:linear-gradient(90deg, var(--mavam-light), var(--mavam-primary), var(--mavam-glow)); z-index:9999; transition:width 0.1s ease; box-shadow:0 0 10px rgba(118,199,66,0.5)}
.scroll-progress::after{content:''; position:absolute; right:0; top:0; width:20px; height:4px; background:rgba(255,255,255,0.8); filter:blur(8px)}

/* FAQ Accordion */
.faq-container{padding:24px; max-width:800px; margin:0 auto}
.faq-item{border-bottom:1px solid rgba(255,255,255,0.1); padding:16px 0}
.faq-item:last-child{border-bottom:none}
.faq-question{width:100%; background:none; border:none; color:var(--text); text-align:left; padding:12px 0; font-size:18px; font-weight:600; display:flex; justify-content:space-between; align-items:center; cursor:pointer; transition:all 0.3s ease}
.faq-question:hover{color:var(--mavam-primary)}
.faq-icon{font-size:24px; font-weight:300; transition:transform 0.3s ease; color:var(--mavam-primary)}
.faq-item.active .faq-icon{transform:rotate(45deg)}
.faq-answer{max-height:0; overflow:hidden; transition:max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease; padding:0 0}
.faq-item.active .faq-answer{max-height:500px; padding:16px 0 8px}
.faq-answer p{margin:0; color:var(--muted); line-height:1.7}
[dir="rtl"] .faq-question{text-align:right}

/* Before/After Comparison Slider */
.before-after-container{padding:24px; max-width:900px; margin:0 auto}
.before-after-slider{position:relative; width:100%; max-width:100%; aspect-ratio:16/10; overflow:hidden; border-radius:12px; cursor:col-resize; user-select:none; box-shadow:0 8px 32px rgba(0,0,0,0.4)}
.before-image, .after-image{position:absolute; top:0; left:0; width:100%; height:100%}
.before-image img, .after-image img{width:100%; height:100%; object-fit:cover; display:block}
.after-image{clip-path:inset(0 50% 0 0)}
.image-label{position:absolute; top:20px; background:rgba(11,18,32,0.85); color:#fff; padding:10px 18px; font-weight:700; font-size:15px; border-radius:8px; backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.15); box-shadow:0 4px 16px rgba(0,0,0,0.3); text-transform:uppercase; letter-spacing:1px}
.before-image .image-label{left:20px; background:linear-gradient(135deg, rgba(200,50,50,0.9), rgba(150,30,30,0.9))}
.after-image .image-label{right:20px; background:linear-gradient(135deg, rgba(118,199,66,0.9), rgba(86,171,47,0.9))}
.slider-handle{position:absolute; top:0; bottom:0; left:50%; width:4px; background:var(--mavam-primary); transform:translateX(-50%); cursor:col-resize; display:flex; flex-direction:column; align-items:center; justify-content:center}
.handle-line{flex:1; width:4px; background:var(--mavam-primary); box-shadow:0 0 10px rgba(118,199,66,0.5)}
.handle-button{width:48px; height:48px; background:var(--mavam-primary); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(118,199,66,0.4); color:#0b1220; transition:transform 0.3s ease}
.handle-button:hover{transform:scale(1.1)}
.handle-button svg{width:24px; height:24px}
@media (max-width:700px){.before-after-slider{aspect-ratio:4/3} .image-label{font-size:12px; padding:6px 12px}}

/* Process Timeline */
.process-timeline{max-width:800px; margin:0 auto; position:relative; padding:20px 0}
.process-timeline::before{content:''; position:absolute; left:30px; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--mavam-primary), var(--mavam-glow)); border-radius:2px}
.timeline-item{position:relative; padding:0 0 40px 80px; opacity:0; transform:translateX(-30px); transition:all 0.6s ease}
.timeline-item.in{opacity:1; transform:translateX(0)}
.timeline-number{position:absolute; left:0; width:60px; height:60px; background:linear-gradient(135deg, var(--mavam-light), var(--mavam-primary)); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; color:#0b1220; box-shadow:0 4px 16px rgba(118,199,66,0.3); z-index:2}
.timeline-content{padding:20px; border-left:3px solid var(--mavam-primary)}
.timeline-content h3{margin:0 0 8px; font-size:20px; color:var(--mavam-light)}
.timeline-content p{margin:0; color:var(--muted)}
@media (max-width:700px){.process-timeline::before{left:20px} .timeline-item{padding-left:60px} .timeline-number{width:40px; height:40px; font-size:16px}}

/* Interactive Services Grid */
.services-grid{
  display:grid; 
  grid-template-columns:repeat(3,1fr); 
  gap:20px;
}
@media (max-width:1024px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.services-grid{grid-template-columns:1fr}}
.service-card{padding:32px 28px; text-align:center; transition:all 0.4s ease; position:relative; overflow:hidden; opacity:0; transform:translateY(30px); min-height:420px; display:flex; flex-direction:column; justify-content:space-between}
.service-card.in{opacity:1; transform:translateY(0)}
.service-card::before{content:''; position:absolute; inset:-100%; background:radial-gradient(circle, rgba(118,199,66,0.15), transparent 70%); opacity:0; transition:opacity 0.4s ease}
.service-card:hover::before{opacity:1}
.service-card:hover{transform:translateY(-8px); box-shadow:inset 0 0 0 2px rgba(118,199,66,0.3), 0 8px 32px rgba(118,199,66,0.15)}
.service-icon{font-size:48px; margin-bottom:16px; filter:grayscale(0.3); transition:all 0.3s ease}
.service-card:hover .service-icon{filter:grayscale(0); transform:scale(1.1) rotate(5deg)}
.service-card h3{margin:0 0 12px; font-size:22px; color:var(--text)}
.service-card p{margin:0 0 24px; color:var(--muted); line-height:1.6}
.service-features{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:100%}
.service-features span{background:rgba(118,199,66,0.15); color:var(--mavam-light); padding:8px 14px; border-radius:20px; font-size:12px; font-weight:600; border:1px solid rgba(118,199,66,0.3); transition:all 0.3s ease; cursor:default; white-space:nowrap}
.service-features span:hover{background:rgba(118,199,66,0.25); border-color:rgba(118,199,66,0.5); transform:translateY(-2px); box-shadow:0 4px 12px rgba(118,199,66,0.2)}

/* Marketing Services Detailed */
.marketing-detailed-grid{
  display:grid; 
  grid-template-columns:repeat(3,1fr); 
  gap:20px;
}
.marketing-grid-5{grid-template-columns:repeat(3,1fr)}
.marketing-grid-5 .marketing-detail-card:nth-child(4),
.marketing-grid-5 .marketing-detail-card:nth-child(5){grid-column:span 1}
@media (max-width:1024px){
  .marketing-detailed-grid{grid-template-columns:repeat(2,1fr)}
  .marketing-grid-5{grid-template-columns:repeat(2,1fr)}
  .marketing-grid-5 .marketing-detail-card:nth-child(4),
  .marketing-grid-5 .marketing-detail-card:nth-child(5){grid-column:span 1}
}
@media (max-width:700px){
  /* Hero Section */
  .hero{
    padding:80px 0 60px;
  }
  .hero-content{
    padding:32px 24px;
  }
  .hero-headline{
    font-size:28px !important;
    line-height:1.3;
    margin-bottom:16px;
  }
  .hero-tagline{
    font-size:16px !important;
    line-height:1.6;
  }
  .hero-cta{
    flex-direction:column;
    gap:12px;
    margin-top:24px;
  }
  .hero-btn-main, .hero-btn-alt{
    width:100%;
    min-height:52px;
    font-size:16px;
  }
  .hero-categories{
    gap:8px;
    margin-top:24px;
  }
  .category-pill{
    font-size:13px;
    padding:10px 16px;
    min-height:40px;
  }
  
  /* Portfolio Filters */
  .portfolio-filters{
    gap:8px;
    flex-wrap:wrap;
    justify-content:center;
  }
  .filter-btn{
    font-size:14px;
    padding:10px 18px;
    min-height:42px;
  }
  
  /* Grid */
  .grid{
    gap:12px;
  }
  .card-media{
    height:220px;
  }
  .card-content{
    padding:20px;
  }
  .card-title{
    font-size:18px;
  }
  
  /* Marketing Grid */
  .marketing-detailed-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  .marketing-grid-5{
    grid-template-columns:1fr;
  }
  
  /* Service Cards */
  .service-card{
    padding:28px 20px;
    min-height:auto;
  }
  .service-icon{
    font-size:48px;
  }
  
  /* Stats */
  .stats-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:16px;
  }
  .stat-card{
    padding:24px 16px;
  }
  
  /* FAQ */
  .faq-question{
    font-size:16px;
    padding:16px 0;
  }
  .faq-answer{
    font-size:15px;
  }
  
  /* Contact */
  .contact-wrapper{
    grid-template-columns:1fr;
    padding:0;
  }
  .contact-map{
    height:250px;
    border-radius:12px;
  }
  .contact-info{
    padding:24px;
  }
  
  /* Section Titles */
  .section-title{
    font-size:26px !important;
    margin-bottom:12px;
  }
  .section-head{
    margin-bottom:32px;
  }
}
.marketing-detail-card{padding:28px 24px; border-radius:16px; transition:all 0.4s ease; position:relative; text-align:center}
.marketing-detail-card:hover{transform:translateY(-6px); box-shadow:inset 0 0 0 2px rgba(118,199,66,0.3), 0 8px 32px rgba(118,199,66,0.15)}
.marketing-detail-icon{width:64px; height:64px; margin:0 auto 20px; background:linear-gradient(135deg, rgba(118,199,66,0.2), rgba(118,199,66,0.1)); border:2px solid rgba(118,199,66,0.3); border-radius:50%; display:flex; align-items:center; justify-content:center; transition:all 0.4s ease}
.marketing-detail-icon svg{width:32px; height:32px; stroke:var(--mavam-primary); stroke-width:2}
.marketing-detail-card:hover .marketing-detail-icon{background:linear-gradient(135deg, var(--mavam-light), var(--mavam-primary)); border-color:var(--mavam-primary); transform:scale(1.1) rotate(5deg); box-shadow:0 8px 24px rgba(118,199,66,0.4)}
.marketing-detail-card:hover .marketing-detail-icon svg{stroke:#0b1220}
.marketing-detail-card h3{margin:0 0 12px; font-size:19px; color:var(--text); font-weight:700}
.marketing-detail-card p{margin:0; color:var(--muted); line-height:1.6; font-size:14px}

/* Portfolio Filters */
.portfolio-filters{
  display:flex; 
  gap:12px; 
  justify-content:center; 
  flex-wrap:wrap; 
  margin:32px 0;
}
.filter-btn{background:rgba(255,255,255,0.06); color:var(--text); border:1px solid rgba(255,255,255,0.18); padding:10px 24px; border-radius:999px; font-size:15px; font-weight:600; cursor:pointer; transition:all 0.3s ease}
.filter-btn:hover{background:rgba(255,255,255,0.1); transform:translateY(-2px)}
.filter-btn.active{background:linear-gradient(135deg, var(--mavam-light), var(--mavam-primary)); color:#0b1220; border-color:transparent; box-shadow:0 4px 12px rgba(118,199,66,0.3)}
.grid.masonry .card{transition:all 0.4s ease, opacity 0.4s ease, transform 0.4s ease}
.grid.masonry .card.hide{opacity:0; transform:scale(0.8); height:0; margin:0; pointer-events:none}

/* Mobile Fix - Force Proper Spacing on All Mobile Devices */
@media (max-width: 700px) {
  /* Force Container Padding */
  .container, .hero-content, .section {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100vw !important;
  }
  
  /* Glass Cards Spacing */
  .glass-card, .glass-inner {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 24px 20px !important;
  }
  
  /* Cards Grid */
  .card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Portfolio & Service Cards */
  .featured-card, .service-card, .marketing-detail-card {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Stats, Clients, Grids */
  .stats-row, .clients-grid, .featured-grid, .services-grid, .marketing-grid-5 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* CTA Banner */
  .cta-banner {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 32px 20px !important;
  }
  
  /* Carousel & Sliders */
  .partners-carousel, .testimonials-carousel {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Newsletter */
  .newsletter-box {
    padding: 24px 20px !important;
  }
  
  /* Contact */
  .contact-wrapper {
    margin: 0 !important;
  }
  
  /* Process Timeline */
  .process-timeline {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  /* Before/After Slider */
  .before-after-slider {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Hero Bar */
  .hero-bar {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  
  .pill-tabs, .input-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}