/* cards section */
.section-title {text-align: center; font-size: 2rem; font-weight: 800; margin-bottom: 48px; position: relative;}
.section-title span { background: linear-gradient(120deg, var(--primary), var(--secondary)); background-clip: text; -webkit-background-clip: text; color: transparent;}
.cards-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin: 40px 0;}
.service-card {background: white; border-radius: 28px; padding: 28px 20px; transition: 0.25s; box-shadow: var(--shadow-sm); border: 1px solid #f1e6e0; text-align: center;}
.service-card:hover {transform: translateY(-6px); box-shadow: 0 25px 35px -12px rgba(0,0,0,0.1); border-color: var(--tertiary);}
.service-icon {background: rgba(238,122,39,0.1); width: 70px; height: 70px; border-radius: 30px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px;}
.service-icon i { font-size: 32px; color: var(--primary);}
.service-card h3 { font-size: 1.4rem; margin-bottom: 12px; font-weight: 700;}
.service-card p { color: #4a5568; line-height: 1.5;}
.service-card a {text-decoration: none;}
/* trust & value sections */
.value-row {display: flex; flex-wrap: wrap; gap: 40px; background:#ffebf3; border-radius: 48px; padding: 48px 32px; margin: 60px 0; align-items: center;}
.value-text { flex: 1;}
.value-text h2 { font-size: 1.8rem; margin-bottom: 16px;}
.highlight-price {background: var(--tertiary); color: #2c2c2c; padding: 6px 12px; border-radius: 40px; font-weight: bold; display: inline-block;}
.speciality-tag {background: white; border-radius: 32px; padding: 10px 18px; display: inline-flex; align-items: center; gap: 12px; margin: 6px 8px 0 0;}
/* testimonial & FAQ */
#testimonials {background:#fff3e8; max-width: 100%; padding:32px; margin-top: 60px;}
.testimonial-grid {display: flex; overflow-x: auto; gap: 28px; padding: 20px 4px 40px; scroll-snap-type: x mandatory;}
.testimonial-card {min-width: 320px; background: white; border-radius: 32px; padding: 30px; box-shadow: var(--shadow-sm); border: 1px solid #ffe5d9; scroll-snap-align: start;}
.testimonial-card p {margin: 15px 0;}
.stars i { color: #ffb83b; margin-right: 2px;}
.faq-item {background: #ffffff; border-radius: 24px; margin-bottom: 18px; border: 1px solid #f0e2da; overflow: hidden;}
.faq-question {padding: 22px 28px; font-weight: 700; font-size: 1.1rem; display: flex; justify-content: space-between; cursor: pointer; background: white; transition: 0.2s;}
.faq-question i { transition: 0.2s; color: var(--secondary);}
.faq-answer {padding: 0 28px 22px 28px; color: #4a5568; line-height: 1.5; display: none;}
.faq-item.active .faq-answer { display: block; }
.faq-item.active .faq-question i { transform: rotate(180deg); }
#faq {margin-top: 60px;}
/* footer & contacts */
.contact-bar {background: linear-gradient(110deg, var(--primary), var(--secondary));border-radius: 48px;padding: 30px 36px;margin: 60px 0 40px;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;color: white;}
.contact-details a {color: white;text-decoration: none;font-weight: 600;margin: 0 12px;display: inline-flex;align-items: center;gap: 8px;}
.blog-footer{background:#2c2826;padding:0}
/* Recommended posts row */
.footer-posts{background:#232120; padding:32px 0; border-bottom:1px solid #3a3835;}
.footer-posts-inner{max-width:1280px;margin:0 auto;padding:0 24px;}
.fp-label{font-size:16px;letter-spacing:2.5px;text-transform:uppercase; color:var(--rose-mid);font-weight:500;margin-bottom:16px;}
.fp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fp-card{background:#2c2826;border-radius:8px; padding:16px 18px;border:1px solid #3a3835; transition:border-color .15s;}
.fp-card:hover{border-color:var(--rose-mid)}
.fp-tag{font-size:10px;letter-spacing:1.5px;text-transform:uppercase; color:var(--rose-mid);font-weight:500;margin-bottom:7px;}
.fp-card h4{font-size:18px;font-weight:500;color:#e8e0dc;line-height:1.45;margin-bottom:8px}
.fp-card p{font-size:16px;color:#7a7470;line-height:1.6;margin-bottom:10px}
.fp-read{font-size:16px;color:var(--rose-mid);font-weight:500}
.fp-read:hover{color:#E8A0A4}
/* Main footer grid */
.footer-main{max-width:1280px;margin:0 auto; padding:40px 24px 32px; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px;}
.f-logo{font-family:'Playfair Display',serif;font-size:22px;color:var(--rose);margin-bottom:5px}
.f-logo span{color:#ccc;font-weight:400}
.f-tagline{font-size:16px;color:#888;margin-bottom:16px;line-height:1.65}
/* NAP */
.f-nap{background:#232120;border-radius:8px;padding:16px 18px;border:1px solid #3a3835;margin-bottom:14px}
.f-nap-name{font-size:16px;font-weight:500;color:#ddd;margin-bottom:4px}
.f-nap-phone{font-size:20px;font-weight:500;margin-bottom:6px}
.f-nap-phone a{color:var(--rose-mid)}
.f-nap-addr{font-size:14px;color:#888;line-height:1.65}
.f-gmb{display:inline-flex;align-items:center;gap:5px;background:var(--rose);color:#fff;font-size:11.5px;padding:6px 14px;border-radius:5px;margin-top:10px;font-weight:500;}
.f-gmb:hover{background:var(--rose-dark)}
.footer-col h4{color:#ddd;font-size:16px;font-weight:500;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid #3a3835}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:7px}
.footer-col a{font-size:16px;color:#888; text-decoration: none; transition:color .15s}
.footer-col a:hover{color:#fff;}
.footer-col li.area-item{font-size:16px;color:#666}
/* Footer bottom */
.footer-bottom{background:#1a1816; padding:14px 24px; max-width:100%;}
.footer-bottom-inner{max-width:1280px;margin:0 auto; display:flex;justify-content:space-between;align-items:center; gap:12px;flex-wrap:wrap;}
.footer-bottom p{font-size:16px;color:#555;line-height:1.6}
.footer-links{display:flex;gap:16px}
.footer-links a{font-size:16px;color:#555}
.footer-links a:hover{color:#888}
/* floating whatsapp */
.floating-wa {position: fixed; bottom: 26px; right: 26px; background: #25D366; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(0,0,0,0.2); z-index: 99; transition: 0.2s;}
.floating-wa a {color: white; font-size: 32px; }
.floating-wa:hover {transform: scale(1.05);}
/* Stats And Number */
.statsNumber {background:#ffebf3; border-radius: 48px; padding: 40px 20px; margin: 30px 0; display: flex; flex-wrap: wrap; justify-content: space-around; gap: 24px; text-align: center;}
.statsNumber div {margin-bottom: 24px;} .statsNumber div h2 {font-size: 2rem; margin: 12px 0;}
/* Google review button */
.review-btn {display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px; font-size: 16px; font-weight: 600; color: #fff; text-decoration: none; border-radius: 50px; background: linear-gradient(45deg, #4285F4, #34A853, #FBBC05, #EA4335); background-size: 300% 300%; box-shadow: 0 6px 15px rgba(0,0,0,0.15); transition: all 0.3s ease;}
.review-btn:hover {transform: translateY(-3px) scale(1.05); box-shadow: 0 10px 25px rgba(0,0,0,0.25); animation: gradientMove 3s ease infinite;}
.review-btn svg {width: 20px; height: 20px; fill: white;}
@keyframes gradientMove {0% { background-position: 0% 50%;}50% { background-position: 100% 50%;}100% { background-position: 0% 50%;}}
 /* MARQUEE */
.marquee { background:#e41c69; overflow: hidden; padding: .8rem 0; }
.mtrack { display: inline-flex; gap: 2.5rem; animation: slide 24s linear infinite; white-space: nowrap; }
.mtrack s { text-decoration: none; font-size: .75rem; font-weight: 500; color: rgba(255,255,255,.85); letter-spacing: .1em; text-transform: uppercase; }
.mtrack b { color: rgba(255,255,255,.35); font-weight: 400; font-size: 1.1rem; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 780px) {
.menu-toggle {display: block;}
.nav-item {width: 100%; text-align: center;}
.dropdown {width: 100%;}
.nav-links {position: absolute; top: 100px; right: 0; background: white; width: 100%; flex-direction: column; align-items: center; display: none;}
.nav-links a {padding: 15px 0; width: 100%; text-align: center; border-top: 1px solid #eee;}
.nav-links.active {display: flex;}
.hero-content h1 { font-size: 2rem; }
.hero-grid { flex-direction:column; }
.hero-content .btn-primary, .hero-content .btn-secondary {width:100%;}
.contact-bar { flex-direction: column; gap: 20px; text-align: center;}
.value-row {flex-direction: column; padding: 32px 24px;} .statsNumber div { width:40%; padding: 12px;} .statsNumber div h2 {font-size: 1.5rem;}
.footer-main{grid-template-columns:1fr}
.blog-cta-strip{flex-direction:column;align-items:flex-start}
.footer-bottom-inner{flex-direction:column;gap:8px}
}