/* ===== GLOBAL ===== */
html, body {
overflow-x: hidden;
}
* {margin:0; padding:0; box-sizing:border-box; font-family: 'Arial', sans-serif;}
body {line-height:1.6; color:#333; background:#f9f9f9;}
a {text-decoration:none; color:inherit;}
.container {width:90%; max-width:1200px; margin:0 auto; padding:40px 0;}
/* ===========================
GLOBAL STYLES
=========================== */
/* HEADER */
header { width: 100%; background: #fff; color: #333; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 5px rgba(0,0,0,0.15); }
/* HEADER CONTAINER */
.header-container { width: 90%; max-width: 1200px; margin: 0 auto; height: 70px; display: flex; align-items: center; justify-content: space-between; position: relative; }
/* LOGO */
.logo-img { height: 120px; display: block; }
/* DESKTOP NAV */
.desktop-nav ul { display: flex; align-items: center; list-style: none; gap: 25px; }
.desktop-nav ul li a { color: #333; font-weight: 600; padding: 8px 12px; transition: 0.3s; }
.desktop-nav ul li a:hover { color: #ff3c78; }
/* DROPDOWN MENU */
.dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; padding: 10px 0; border-radius: 5px; min-width: 180px; }
.dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu li a { display: block; padding: 10px 18px; color: #333; }
.dropdown-menu li a:hover { background: #333; color: #fff; }
/* GET A QUOTE BUTTON */
.btn-quote { background: #ff3c78; color: #fff !important; padding: 8px 20px; border-radius: 25px; font-weight: 600; transition: 0.3s ease; }
.btn-quote:hover { background: #fff; color: #333 !important; }
/* Dropdown parent */
.desktop-nav ul li.dropdown { position: relative; }
.desktop-nav .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; padding: 10px 0; border-radius: 5px; min-width: 180px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); z-index: 1000; }
/* PROFESSIONAL HAMBURGER */
.menu-toggle { display: none; flex-direction: column; align-items: center; cursor: pointer; width: 30px; height: auto; z-index: 10001; margin-top: 0; }
.menu-toggle span { display: block; width: 100%; height: 3px; background-color: #333 !important; border-radius: 2px; margin: 3px 0; transition: all 0.3s ease; }
/* MOBILE NAV */
.mobile-nav { position: fixed; top: 0; left: -270px; width: 270px; height: 100%; background: #fff; color: #333; transition: left 0.4s ease; padding: 20px; display: flex; flex-direction: column; z-index: 9998; }
.mobile-nav.active { left: 0; }
/* MOBILE LOGO */
.mobile-logo { text-align: center; margin-bottom: 30px; }
.mobile-logo .logo-img { max-width: 150px; height: 120px; max-width: 100%; object-fit: contain; display: block; margin: 0 auto; margin-left: -25px; }
/* CLOSE BUTTON */
.close-btn { font-size: 30px; color: #333; cursor: pointer; position: absolute; top: 15px; right: 15px; }
/* MENU ITEMS */
.mobile-nav ul { list-style: none; padding: 0; }
.mobile-nav ul li { margin-bottom: 20px; }
.mobile-nav ul li a { color: #333; font-size: 16px; font-weight: 600; }
.mobile-nav ul li a:hover { color: #ff3c78; }
.mobile-nav ul li a i { margin-right: 10px; color: #ff3c78; width: 20px; text-align: center; }
/* THIN SEPARATOR LINE */
.menu-separator { height: 1px; background-color: #ddd; margin: 15px 0; list-style: none; pointer-events: none; }
/* RESPONSIVE */
@media (max-width: 900px) { .desktop-nav { display: none; } .menu-toggle { display: flex; } }
/* ===== HERO / TOP ABOUT ===== */
/* ===== ABOUT HERO SECTION ===== */
.about-hero { position: relative; min-height: 70vh !important; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; overflow: hidden; }
.about-hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.about-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0,0,0,0.9), rgba(37, 3, 14, 0.7)); z-index: 2; }
.about-hero-content { position: relative; z-index: 3; max-width: 800px; padding: 20px; }
.about-hero-content h1 { font-size: 3rem; font-weight: 900; line-height: 1.2; margin-bottom: 15px; }
.about-hero-content h1 span {background: linear-gradient(90deg, #ff3c78, #f7d200); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.about-hero-content p { font-size: 1.1rem; color: #f8f8f8; line-height: 1.7; margin-bottom: 30px; }
.btn-hero { display: inline-block; background: #ff3c78; color: #fff; padding: 14px 34px; border-radius: 10px; text-decoration: none; font-weight: 600; box-shadow: 0 6px 20px rgba(255,60,120,0.4); transition: all 0.3s ease; }
.btn-hero:hover { background: #333; transform: translateY(-3px); }
@media (max-width: 768px) { .about-hero { min-height: 80vh; padding: 60px 15px; } .about-hero-content h1 { font-size: 2rem; } .about-hero-content p { font-size: 1rem; } }
/* ========================== Hero Text Reveal Animation ========================== */
.about-hero-content h1, .about-hero-content p, .btn-hero { opacity: 0; transform: translateY(20px); animation: popUp 1s ease-out forwards; }
/* Staggered animation timing for a nice effect */
.about-hero-content h1 { animation-delay: 0.2s; }
.about-hero-content p { animation-delay: 0.5s; }
.btn-hero { animation-delay: 0.8s; }
/* Keyframes for smooth fade-up reveal */
@keyframes popUp { 0% { opacity: 0; transform: translateY(20px); } 60% { opacity: 1; transform: translateY(-5px); } 100% { opacity: 1; transform: translateY(0); } }
/* WHO WE ARE SECTION */
/* ===== WHO WE ARE / ABOUT INTRO SECTION ===== */
.about-intro{background:#fff;padding:60px 15px;text-align:center;font-family:'Poppins',sans-serif;color:#333;}
.about-intro .section-title{font-size:2rem !important;font-weight:800;margin-bottom:15px;line-height:1.2;}
.about-intro .section-title .highlight{background:linear-gradient(90deg,#ff3c78,#ff6899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.about-intro .section-subtitle{color:#555;font-size:1rem;line-height:1.5;max-width:700px;margin:0 auto;text-align:left;}
@media(max-width:768px){.about-intro{padding:50px 15px;text-align:center;}.about-intro .section-title{font-size:1.8rem;}.about-intro .section-subtitle{font-size:.95rem;line-height:1.4;}}
@media(max-width:480px){.about-intro{padding:40px 10px;text-align:center;}.about-intro .section-title{font-size:1.5rem;}.about-intro .section-subtitle{font-size:.9rem;line-height:1.3;}}
/* MISSION & VISION SECTION */
/* ===== MISSION & VISION SECTION ===== */
.mission-vision{background:#fef5f8;padding:70px 15px;text-align:center;font-family:'Poppins',sans-serif;color:#333;}
.mission-vision .section-title{font-size:2rem !important;font-weight:800;color:#333;margin-bottom:40px;}
.mission-vision .section-title .highlight{background:linear-gradient(90deg,#ff3c78,#ff6899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.mv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:25px;max-width:1000px;margin:0 auto;}
.mv-card{background:#fff;border-radius:16px;padding:35px 20px;box-shadow:0 10px 25px rgba(0,0,0,0.08);transition:transform .3s ease,box-shadow .3s ease;}
.mv-card:hover{transform:translateY(-6px);box-shadow:0 12px 35px rgba(0,0,0,0.12);}
.mv-card h3{font-size:1.5rem;color:#ff3c78;font-weight:800;margin-bottom:12px;text-align:left;}
.mv-card p{color:#555;font-size:1rem;line-height:1.6;text-align:left;}
.about-values{background:#fff;padding:60px 15px;text-align:center;}
.about-values .section-title{font-size:2.2rem;font-weight:800;color:#333;margin-bottom:12px;}
.about-values .section-title .highlight{background:linear-gradient(90deg,#ff3c78,#ff6899);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.about-values .section-subtitle{color:#555;font-size:1rem;line-height:1.5;max-width:700px;margin:0 auto 30px;text-align:left;}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;max-width:1000px;margin:0 auto;}
.feature-card{background:linear-gradient(90deg,#fcdae4,#ffffff);color:#333;border-radius:16px;padding:25px 18px;box-shadow:0 8px 20px rgba(0,0,0,0.3);transition:transform .3s ease,box-shadow .3s ease;text-align:center;}
.feature-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,0.35);}
.feature-icon{font-size:1.8rem;margin-bottom:12px;}
.feature-card h3{font-size:1.25rem;font-weight:700;margin-bottom:8px;color:#ff3c78;text-align:left;}
.feature-card p{font-size:.95rem;line-height:1.5;text-align:left;}
@media(max-width:1024px){.about-values .section-title{font-size:2rem;text-align:center;}.about-values .section-subtitle{font-size:.95rem;line-height:1.4;text-align:left;margin:0 auto 20px;}.feature-card{padding:20px 15px;text-align:left;}.feature-card h3{font-size:1.2rem;}.feature-card p{font-size:.9rem;}.feature-icon{font-size:1.6rem;margin-bottom:10px;}}
@media(max-width:768px){.mission-vision{padding:50px 15px;}.mission-vision .section-title{font-size:2rem;margin-bottom:30px;}.mv-card{padding:25px 15px;}.mv-card h3{font-size:1.3rem;text-align:left;}.mv-card p{font-size:.95rem;line-height:1.5;text-align:left;}.about-values{padding:40px 10px;}.about-values .section-title{font-size:1.8rem;text-align:center;}.about-values .section-subtitle{font-size:.9rem;text-align:left;margin-bottom:15px;}.features-grid{grid-template-columns:1fr;gap:22px;}.feature-card{padding:18px 12px;text-align:left;}.feature-card h3{font-size:1.1rem;}.feature-card p{font-size:.88rem;}.feature-icon{font-size:1.5rem;margin-bottom:8px;}}
@media(max-width:480px){.mv-grid{gap:15px;}.mission-vision .section-title{font-size:1.8rem;}.mv-card{padding:20px 12px;}.mv-card h3{font-size:1.2rem;text-align:left;}.mv-card p{font-size:.9rem;text-align:left;}}
/* CTA LINKS UNDER ABOUT VALUES */
/* ===== CTA LINKS SECTION ===== */
.cta-links{margin-top:70px;text-align:center;animation:fadeInUp 1s ease both;}
.cta-links h3{font-size:2rem;font-weight:800;color:#333;margin-bottom:22px;}
.cta-links p{color:#555;margin-bottom:20px;font-size:1rem;}
.cta-buttons{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;}
.btn-primary,.btn-outline{padding:12px 25px;border-radius:10px;font-weight:600;text-decoration:none;transition:all .3s ease;font-family:'Poppins',sans-serif;font-size:.95rem;}
.btn-primary{background:linear-gradient(90deg,#ff3c78,#ff6899);color:#fff;box-shadow:0 5px 15px rgba(255,60,120,.35);}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 7px 25px rgba(255,60,120,.5);}
.btn-outline{border:2px solid #ff3c78;color:#ff3c78;background:transparent;}
.btn-outline:hover{background:#ff3c78;color:#fff;transform:translateY(-3px);}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px);}100%{opacity:1;transform:translateY(0);}}
@media(max-width:768px){.cta-links{margin-top:40px;}.cta-links h3{font-size:1.8rem;}.cta-links p{font-size:.95rem;margin-bottom:15px;}.cta-buttons{gap:12px;}.btn-primary,.btn-outline{padding:10px 20px;font-size:.9rem;}}
@media(max-width:480px){.cta-links{margin-top:30px;}.cta-links h3{font-size:1.6rem;}.cta-links p{font-size:.9rem;margin-bottom:12px;text-align:left;}.cta-buttons{flex-direction:column;gap:10px;}.btn-primary,.btn-outline{width:100%;padding:10px 0;font-size:.9rem;}}
/* ===== TRUST SECTION - CREATIVE STYLING ===== */
/* ===== TRUST / CLIENT LOGOS / STATS ===== */
.trust{background:linear-gradient(135deg,#fff0f5 0%,#ffe6f0 100%);background-image:repeating-radial-gradient(circle at 50% 50%,rgba(255,60,120,0.05) 0,rgba(255,60,120,0.05) 2px,transparent 2px,transparent 20px);text-align:center;padding:70px 15px;position:relative;overflow:hidden;font-family:'Poppins',sans-serif;color:#333;}
.trust-container{max-width:1100px;margin:0 auto;}
.trust h2{font-size:2rem;font-weight:800;color:#ff3c78;margin:0 auto 20px;max-width:750px;}
.trust-text{font-size:1rem;color:#555;max-width:750px;margin:0 auto 40px;line-height:1.5;text-align:left;padding:0 15px;}
.client-logos{display:flex;justify-content:center;align-items:center;gap:35px;flex-wrap:wrap;margin-bottom:40px;}
.client-logos img{max-height:50px;filter:grayscale(100%);opacity:.7;transition:all .5s ease;}
.stats{display:flex;justify-content:center; gap:30px !important; flex-wrap:wrap;}
.stat{background:rgba(255,255,255,.9);backdrop-filter:blur(10px);padding:25px 20px;border-radius:20px;box-shadow:0 10px 30px rgba(255,60,120,.2);min-width:130px;transition:transform .4s ease,box-shadow .4s ease;position:relative;}
.stat::before{content:"";position:absolute;top:-6px;left:-6px;right:-6px;bottom:-6px;border-radius:20px;background:linear-gradient(135deg,#ff3c78,#ff7bb3);opacity:.08;z-index:-1;}
.stat:hover{transform:translateY(-8px) scale(1.04);box-shadow:0 18px 45px rgba(255,60,120,.25);}
.stat h3{font-size:1.8rem;font-weight:800;color:#ff3c78;margin-bottom:5px;}
.stat p{font-size:.95rem;color:#333;font-weight:500;}
.trust .stat,.trust .client-logos img{opacity:0;animation:floatFadeIn 1s ease forwards;}
@keyframes floatFadeIn{0%{opacity:0;transform:translateY(20px);}100%{opacity:1;transform:translateY(0);}}
@media(max-width:768px){.trust{padding:50px 15px;}.trust h2{font-size:1.8rem;}.trust-text{font-size:.95rem;padding:0 15px;margin-bottom:30px;text-align:center;}.client-logos{gap:20px;}.stats{flex-direction:column;gap:15px;}.stat{padding:20px 15px;min-width:unset;width:80%;margin:0 auto;}}
@media(max-width:480px){.trust{padding:40px 10px;}.trust h2{font-size:1.6rem;}.trust-text{font-size:.85rem;padding:0 10px;margin-bottom:25px;}.client-logos img{max-height:40px;}.stat h3{font-size:1.4rem;}.stat p{font-size:.85rem;}}
/* ===== CLIENT TESTIMONIALS ===== */
.testimonials-section{background:#fff;padding:70px 20px;font-family:'Poppins',sans-serif;position:relative;overflow:hidden;box-shadow:inset 0 10px 25px rgba(0,0,0,0.08);}
.section-header{text-align:center;max-width:750px;margin:0 auto 40px;}
.section-title{font-size:2rem;font-weight:800;margin-bottom:12px;color:#ff3c78;}
.highlight{background:linear-gradient(90deg,#ff3c78,#e6326a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.section-subtitle{font-size:.95rem;color:#333;margin-bottom:30px;line-height:1.5;}
.testimonials-wrapper{width:100%;max-width:480px;margin:0 auto;overflow:hidden;position:relative;height:auto;}
.testimonials-slider{display:flex;transition:transform .6s ease;}
.testimonial-card{flex:0 0 100%;background:#fadfe7;padding:20px 15px;border-radius:20px;text-align:center;box-shadow:0 10px 25px rgba(0,0,0,0.15);position:relative;z-index:1;}
.testimonial-card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(0,0,0,0.2);}
.testimonial-initial{width:55px;height:55px;margin:0 auto 15px;background:#fff;color:#ff3c78;font-weight:700;font-size:1.2rem;border-radius:50%;display:flex;justify-content:center;align-items:center;}
.testimonial-quote{font-size:.95rem;color:#333;font-style:italic;margin-bottom:12px;line-height:1.5;}
.testimonial-name{font-size:1.1rem;font-weight:700;color:#ff3c78;margin-bottom:4px;}
.testimonial-location{font-size:.9rem;color:#333;}
.testimonial-shape{position:absolute;border-radius:50%;opacity:.08;z-index:0;animation:floatShape 15s infinite ease-in-out alternate;}
.shape1{width:200px;height:200px;background:#fd89ac;top:10%;left:5%;animation-delay:0s;}
.shape2{width:180px;height:180px;background:#fc719d;bottom:15%;right:10%;animation-delay:3s;}
.shape3{width:220px;height:220px;background:#ffb6c1;top:30%;right:20%;animation-delay:6s;}
@keyframes floatShape{0%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-15px) rotate(45deg);}100%{transform:translateY(0) rotate(90deg);}}
@media(max-width:768px){.section-subtitle{font-size:.95rem;text-align:left;}.testimonials-section{padding:50px 15px;}.testimonial-card{padding:18px 12px;}.testimonial-initial{width:45px;height:45px;font-size:1rem;}.testimonial-quote{font-size:.95rem;}}
@media(max-width:480px){.testimonials-section{padding:40px 10px;}.testimonial-card{padding:15px 10px;}.testimonial-name{font-size:1rem;}.testimonial-quote{font-size:.85rem;}.testimonial-location{font-size:.8rem;}}
/* ===== CTA PORTFOLIO ===== */
.cta-portfolio { background: #ff3c78; padding: 70px 15px; position: relative; border-radius: 0 40px 0 0; box-shadow: inset 0 10px 30px rgba(0,0,0,0.05); text-align: center; font-family: 'Poppins', sans-serif; color: #fff; }
.cta-portfolio h2 { font-size: 2.2rem; font-weight: 800; margin-bottom: 15px; line-height: 1.2;}
.cta-portfolio p { font-size: 1rem; max-width: 650px; margin: 0 auto 30px; line-height: 1.5; color: #fff; }
.cta-portfolio .btn-cta {display: inline-block; background: #fff; color: #ff3c78; font-weight: 700; padding: 14px 36px; border-radius: 30px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 6px 25px rgba(0,0,0,0.15);}
.cta-portfolio .btn-cta:hover { background: #333; color: #fff; transform: translateY(-4px); box-shadow: 0 7px 25px rgba(0,0,0,0.25); }
@media (max-width:768px) { .cta-portfolio h2 { font-size: 1.9rem; } .cta-portfolio p { font-size: 0.95rem; margin-bottom: 25;} .cta-portfolio .btn-cta { padding: 12px 28px; font-size: 0.9rem; } }
/* ===== WhatsApp Floating Button (Modern Creative Style) ===== */
.whatsapp-floating { position: fixed; bottom: 28px; right: 28px; display: flex; align-items: center; gap: 12px; background: rgba(25, 25, 25, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50px; padding: 10px 18px 10px 22px; backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); z-index: 1200; font-family: 'Poppins', sans-serif; animation: floatY 4s ease-in-out infinite; transition: all 0.4s ease; }
.whatsapp-floating:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 10px 35px rgba(37, 211, 102, 0.3); }
.help-text { color: #fff; font-weight: 600; font-size: 1rem; letter-spacing: 0.4px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.whatsapp-float-btn { background: linear-gradient(135deg, #25D366, #1EBE5B); border-radius: 50%; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 0 25px rgba(37, 211, 102, 0.3); transition: all 0.35s ease; overflow: hidden; }
.whatsapp-float-btn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(37, 211, 102, 0.45) 20%, transparent 70%); opacity: 0; animation: pulseGlow 2.6s infinite ease-in-out; }
.whatsapp-float-btn img { z-index: 2; width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); }
.whatsapp-float-btn:hover { transform: scale(1.12) rotate(5deg); box-shadow: 0 0 40px rgba(37, 211, 102, 0.45); }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pulseGlow { 0%, 100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.3); } }
@media (prefers-color-scheme: dark) { .whatsapp-floating { background: rgba(15, 15, 15, 0.8); } }
@media (max-width: 600px) { .help-text { display: none; } .whatsapp-floating { background: transparent; box-shadow: none; padding: 0; animation: none; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0;}
/* ===== FOOTER ===== */
footer {background:#111; color:#fff; padding:50px 20px; font-family:Arial, sans-serif;}
.footer-container {max-width:1200px; margin:0 auto;}
.footer-top {display:flex; flex-wrap:wrap; justify-content:space-between; gap:30px; margin-bottom:30px;}
.footer-logo img { height:100px; width:auto; object-fit:contain;}
.footer-links h4, .footer-contact h4, .footer-social h4 {color:#ff3c78; margin-bottom:10px;}
.footer-links ul {list-style:none; padding:0;}
.footer-links ul li {margin-bottom:8px;}
.footer-links ul li a {color:#fff; text-decoration:none; transition:0.3s;}
.footer-links ul li a:hover {color:#ff3c78;}
.footer-contact p, .footer-social a {margin-bottom:8px; color:#fff; text-decoration:none;}
.footer-social a {display:inline-block; margin-right:10px; font-size:18px; transition:0.3s; color:#fff;}
.footer-social a:hover {color:#ff3c78;}
.footer-bottom {border-top:1px solid #333; padding-top:20px; text-align:center; font-size:14px; color:#aaa;}
/* ===== MEDIA QUERIES ===== */
@media(max-width:768px){
.desktop-nav {display:none;}
.menu-toggle {display:block;}
.hero h1 {font-size:2rem;}
.hero p {font-size:1rem;}
.service-cards {flex-direction:column; align-items:center;}
.testimonial-cards {flex-direction:column; align-items:center;}
.footer-top {flex-direction:column; text-align:center; gap:20px;}
.footer-social a {margin-right:15px;}
.footer-logo img { margin-left: 47px;}
}
.footer-bottom a {color: #ff3c78;text-decoration: none;transition: 0.3s;}
.footer-bottom a:hover {color: #fff;text-decoration: underline;}
/* Make footer text wrap nicely on smaller screens */
@media(max-width:768px){
.footer-bottom p {font-size: 13px;line-height: 1.4;}
.footer-bottom a {display: inline-block; margin-top: 5px;}
}
/* ===== SHOW MOBILE NAV ===== */
.mobile-nav.show {display:block;}
/* ==========================
Global Scroll Reveal Animation
========================== */
.pop-up {
opacity: 0;
transform: translateY(20px);
transition: all 0.8s ease-out;
}
.pop-up.revealed {
opacity: 1;
transform: translateY(0);
}
/* Optional: stagger delay for multiple elements in a section */
.pop-up:nth-of-type(1) { transition-delay: 0.15s; }
.pop-up:nth-of-type(2) { transition-delay: 0.3s; }
.pop-up:nth-of-type(3) { transition-delay: 0.45s; }
.pop-up:nth-of-type(4) { transition-delay: 0.6s; }
/* ==========================
ABOUT PAGE STYLING DONE>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
========================== */
/* RESPONSIVE */
/* ===== BLOG HERO ===== */
.blog-hero { position: relative; text-align: center; padding: 120px 20px; overflow: hidden; color: #fff; }
.blog-hero-bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.blog-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(36,16,22,0.8); z-index: 2; }
.blog-hero-content { position: relative; z-index: 3; max-width: 700px; margin: 0 auto; }
.blog-hero h1 { font-size: 2.8rem; font-weight: 900; margin-bottom: 20px; background: linear-gradient(90deg, #ff3c78, #e6326a, #ffc400); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; text-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); }
.blog-hero p { font-size: 1.2rem; line-height: 1.7; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
@media (max-width: 768px) { .blog-hero { padding: 80px 15px; } .blog-hero h1 { font-size: 2rem; } .blog-hero p { font-size: 1rem; } }
/* ===== BLOG CONTAINER ===== */
/* ===== BLOG CONTAINER ===== */
.blog-container { max-width: 900px; margin: 50px auto; padding: 20px; font-family: 'Poppins', sans-serif; }
.blog-container article { background: #fff; border-radius: 18px; box-shadow: 0 8px 30px rgba(0,0,0,0.12); margin-bottom: 40px; overflow: hidden; transition: all 0.4s ease; }
.blog-container article:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0,0,0,0.15); }
.blog-container h1 { font-size: 1.7rem; color: #ff3c78; font-weight: 800; text-align: center; margin: 25px 20px 15px; }
.blog-container .intro { color: #444; font-size: 0.95rem; line-height: 1.7; text-align: center; padding: 0 20px 15px; }
.blog-container img { width: 100%; height: auto; display: block; border-radius: 0; margin-bottom: 10px; }
details { border-top: 1px solid #eee; padding: 0 20px 25px; position: relative; }
summary.read-more-btn { cursor: pointer; font-weight: 700; text-transform: uppercase; color: #ff3c78; font-size: 0.95rem; text-align: center; background: #fff; border: 2px solid #ff3c78; border-radius: 10px; padding: 10px 25px; margin: 15px auto; display: inline-block; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(255,60,120,0.25); }
summary.read-more-btn:hover { background: #ff3c78; color: #fff; transform: translateY(-3px); box-shadow: 0 6px 18px rgba(255,60,120,0.4); }
details[open] summary.read-more-btn { background: #333; color: #fff; border-color: #333; }
.blog-content { margin-top: 20px; animation: fadeIn 0.5s ease; }
.blog-content h2 { font-size: 1.3rem; font-weight: 700; color: #ff3c78; margin-top: 20px; }
.blog-content p, .blog-content ul { font-size: 0.95rem; line-height: 1.7; color: #444; margin-top: 10px; }
.blog-content ul { list-style: disc; margin-left: 25px; }
.blog-content .cta { margin-top: 30px; text-align: center; }
.blog-content .btn-cta {background: #ff3c78;color: #fff;padding: 12px 30px;border-radius: 10px;text-decoration: none;font-weight: 700;text-transform: uppercase;transition: all 0.3s ease;box-shadow: 0 6px 20px rgba(255,60,120,0.4);display: inline-block;white-space: normal; /* allow wrapping on smaller screens */word-wrap: break-word; /* ensure long text wraps properly */max-width: 90%; } /* prevent overflowing container */
.blog-content .btn-cta:hover { background: #333; transform: translateY(-3px); }
@keyframes fadeIn { from {opacity: 0; transform: translateY(10px);} to {opacity: 1; transform: translateY(0);} }
@media (max-width: 768px) { .blog-container { padding: 10px; } .blog-container h1 { font-size: 1.4rem; } .intro { font-size: 0.95rem; } }
/* Hover effect remains */
.blog-content .btn-cta:hover {
background: #333;
transform: translateY(-3px);
}
/* === Mobile adjustments === */
/* MOBILE FIXES — Keep design but reduce height + improve spacing */
@media (max-width: 768px) {
/* Reduce empty space inside post */
.blog-container article { padding-bottom: 15px;}
/* Keep H1 centered, only text becomes left-aligned */
.blog-container .intro,
.blog-content p,
.blog-content ul { text-align: left; padding-left: 15px; padding-right: 15px; }
/* Adjust spacing so it matches heading margins */
.blog-container .intro { margin-left: auto; margin-right: auto; max-width: 95%; }
.blog-container { padding: 15px;}
/* Make button elegant on mobile */
.blog-content .btn-cta { width: 100%; max-width: 320px; padding: 12px 20px; font-size: 0.9rem; }
/* Center the CTA wrapper */
.blog-content .cta { display: flex; justify-content: center; }}
/* ===== WhatsApp Floating Button (Modern Creative Style) ===== */
.whatsapp-floating { position: fixed; bottom: 28px; right: 28px; display: flex; align-items: center; gap: 12px; background: rgba(25, 25, 25, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50px; padding: 10px 18px 10px 22px; backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); z-index: 1200; font-family: 'Poppins', sans-serif; animation: floatY 4s ease-in-out infinite; transition: all 0.4s ease; }
.whatsapp-floating:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 10px 35px rgba(37, 211, 102, 0.3); }
.help-text { color: #fff; font-weight: 600; font-size: 1rem; letter-spacing: 0.4px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.whatsapp-float-btn { background: linear-gradient(135deg, #25D366, #1EBE5B); border-radius: 50%; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 0 25px rgba(37, 211, 102, 0.3); transition: all 0.35s ease; overflow: hidden; }
.whatsapp-float-btn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(37, 211, 102, 0.45) 20%, transparent 70%); opacity: 0; animation: pulseGlow 2.6s infinite ease-in-out; }
.whatsapp-float-btn img { z-index: 2; width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); }
.whatsapp-float-btn:hover { transform: scale(1.12) rotate(5deg); box-shadow: 0 0 40px rgba(37, 211, 102, 0.45); }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pulseGlow { 0%, 100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.3); } }
@media (prefers-color-scheme: dark) { .whatsapp-floating { background: rgba(15, 15, 15, 0.8); } }
@media (max-width: 600px) { .help-text { display: none; } .whatsapp-floating { background: transparent; box-shadow: none; padding: 0; animation: none; } }
/* ===== WHATSAPP STYLING ===== */
.whatsapp-button { position: fixed; bottom: 20px; right: 20px; background: linear-gradient(135deg, #ff3c78, rgb(255, 196, 0)); color: #fff; display: flex; align-items: center; padding: 12px 18px; border-radius: 50px; text-decoration: none; font-family: 'Poppins', sans-serif; font-weight: 600; letter-spacing: 0.3px; box-shadow: 0 4px 10px rgba(255,60,120,0.3); transition: all 0.3s ease; z-index: 9999; animation: pulseGlow 2.5s infinite ease-in-out; }
.whatsapp-button img { width: 26px; height: 26px; margin-right: 10px; filter: brightness(1.1); }
.whatsapp-button:hover { transform: scale(1.07); box-shadow: 0 6px 20px rgba(255,60,120,0.5); }
@keyframes pulseGlow { 0% { box-shadow: 0 0 10px rgba(255,60,120,0.4); } 50% { box-shadow: 0 0 20px rgba(255,60,120,0.6); } 100% { box-shadow: 0 0 10px rgba(255,60,120,0.4); } }
.whatsapp-tooltip { position: fixed; bottom: 90px; right: 30px; background: #333; color: #fff; padding: 8px 14px; border-radius: 20px; font-size: 0.9rem; font-family: 'Poppins', sans-serif; animation: fadeInOut 6s ease-in-out infinite; opacity: 0.8; }
@keyframes fadeInOut { 0%, 100% { opacity: 0; transform: translateY(10px); } 20%, 80% { opacity: 1; transform: translateY(0); } }
.footer-bottom a {color: #ff3c78;text-decoration: none;transition: 0.3s;}
.footer-bottom a:hover {color: #fff;text-decoration: underline;}
/* Make footer text wrap nicely on smaller screens */
@media(max-width:768px){
.footer-bottom p {font-size: 13px;line-height: 1.4;}
.footer-bottom a {display: inline-block; margin-top: 5px;}
}
/* ==========================
Global Scroll Reveal Animation
========================== */
.pop-up {opacity: 0; transform: translateY(20px); transition: all 0.8s ease-out;}
.pop-up.revealed {opacity: 1; transform: translateY(0);}
/* Optional: stagger delay for multiple elements in a section */
.pop-up:nth-of-type(1) { transition-delay: 0.15s; }
.pop-up:nth-of-type(2) { transition-delay: 0.3s; }
.pop-up:nth-of-type(3) { transition-delay: 0.45s; }
.pop-up:nth-of-type(4) { transition-delay: 0.6s; }
/* ==========================
BLOG PAGE STYLYING DONE>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
========================== */
/* ===== GRAPHIC DESIGN PORTFOLIO HERO ===== */
.portfolio-hero { position: relative; background: linear-gradient(to right, #333, #333, #683444); color: #fff; padding: 100px 20px 80px; text-align: center; overflow: hidden; font-family: 'Poppins', sans-serif; }
.portfolio-hero .hero-content h1 { font-size: 3rem; font-weight: 800; line-height: 1.2; margin-bottom: 20px; }
.portfolio-hero .hero-content h1 span { color: #ff3c78; }
.portfolio-hero .hero-content p { font-size: 1.1rem; max-width: 700px; margin: 20px auto; color: #fff; }
.portfolio-hero .hero-btn { display: inline-block; background: #ff3c78; color: #fff; padding: 12px 30px; border-radius: 10px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; }
.portfolio-hero .hero-btn:hover { background: #ffffff; color: #333; }
.portfolio-hero .hero-shape { position: absolute; width: 100px; height: 100px; background: rgba(252, 188, 50, 0.1); border-radius: 50%; animation: float 6s ease-in-out infinite; }
.portfolio-hero .shape3 { top: 60%; left: 70%; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@media (max-width: 768px) { .portfolio-hero .hero-content h1 { font-size: 2.2rem; } .portfolio-hero { padding: 80px 15px 60px; } }
@media (max-width: 480px) { .portfolio-hero .hero-content h1 { font-size: 1.8rem; } .portfolio-hero .hero-btn { padding: 10px 24px; font-size: 0.95rem; } }
/* === GRAPHIC DESIGN PORTFOLIO SHOWCASE === */
.graphic-samples {background: linear-gradient(135deg, #fff 0%, #facedc 40%, #333 100%); padding: 100px 20px; box-shadow: inset 0 10px 40px rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; font-family: 'Poppins', sans-serif; }
.section-header { text-align: center; margin-bottom: 70px; }
.section-title { font-size: 2.8rem; font-weight: 900; color: #333; margin-bottom: 15px; }
.section-title .highlight { background: linear-gradient(90deg, #ff3c78, #ff6899); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.section-subtitle { color: #555; font-size: 1.1rem; line-height: 1.7; max-width: 700px; margin: 0 auto; }
.design-showcase { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; margin-top: 50px; }
.design-card { background: #fff; border-radius: 18px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); text-align: center; padding: 25px 20px; transition: transform 0.4s ease, box-shadow 0.4s ease; position: relative; overflow: hidden; }
.design-card:hover { transform: translateY(-8px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15); }
.design-card h3 { color: #ff3c78; font-size: 1.4rem; font-weight: 700; margin-bottom: 15px; }
.image-slider { position: relative; width: 100%; padding-top: 70%; border-radius: 15px; overflow: hidden; }
.image-slider img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 1s ease-in-out, transform 8s ease-in-out; border-radius: 15px; }
.image-slider img.active { opacity: 1; transform: scale(1); }
.graphic-samples::before, .graphic-samples::after { content: ""; position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,60,120,0.25), transparent 70%); z-index: 0; animation: floatCircles 15s infinite ease-in-out alternate; }
.graphic-samples::before { width: 300px; height: 300px; top: 10%; left: -100px; animation-delay: 0s; }
.graphic-samples::after { width: 250px; height: 250px; bottom: 10%; right: -80px; animation-delay: 5s; }
@keyframes floatCircles { 0% { transform: translateY(0) scale(1); opacity: 0.6; } 50% { transform: translateY(-20px) scale(1.1); opacity: 0.8; } 100% { transform: translateY(0) scale(1); opacity: 0.6; } }
@media (max-width: 992px) { .section-title { font-size: 2.3rem; } .design-showcase { gap: 30px; } }
@media (max-width: 600px) { .section-title { font-size: 2rem; } .section-subtitle { font-size: 0.95rem; } .design-card { padding: 20px; } }
/* ===== CTA PORTFOLIO ===== */
.cta-portfolio { background: #ff3c78; color: #fff; padding: 80px 20px; text-align: center; border-radius: 0 50px 0 0; margin: 60px 0; box-shadow: 0 10px 25px rgba(0,0,0,0.25); }
.cta-portfolio h2 { font-size: 2.5rem; font-weight: 900; margin-bottom: 20px; }
.cta-portfolio p { font-size: 1.1rem; max-width: 700px; margin: 0 auto 30px; line-height: 1.7; }
.cta-portfolio .btn-cta { display: inline-block; background: #fff; color: #ff3c78; font-weight: 700; text-transform: uppercase; padding: 15px 35px; border-radius: 10px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 6px 15px rgba(255,60,120,0.4); }
.cta-portfolio .btn-cta:hover { background: #333; color: #ffffff; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(255,60,120,0.5); }
/* === MOBILE & TABLET FIXES FOR CTA PORTFOLIO === */
@media (max-width: 768px) {
.cta-portfolio { padding: 60px 20px; }
/* Heading remains centered */
.cta-portfolio h2 { font-size: 2rem; text-align: center;}
/* Paragraph left-aligned only — with correct spacing */
.cta-portfolio p { text-align: center; padding-left: 10px; padding-right: 10px; margin-left: auto; margin-right: auto; font-size: 1rem;}
/* Button remains centered */
.cta-portfolio .btn-cta { padding: 12px 28px; font-size: 0.95rem; }}
/* ===== WhatsApp Floating Button (Modern Creative Style) ===== */
.whatsapp-floating { position: fixed; bottom: 28px; right: 28px; display: flex; align-items: center; gap: 12px; background: rgba(25, 25, 25, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50px; padding: 10px 18px 10px 22px; backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); z-index: 1200; font-family: 'Poppins', sans-serif; animation: floatY 4s ease-in-out infinite; transition: all 0.4s ease; }
.whatsapp-floating:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 10px 35px rgba(37, 211, 102, 0.3); }
.help-text { color: #fff; font-weight: 600; font-size: 1rem; letter-spacing: 0.4px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.whatsapp-float-btn { background: linear-gradient(135deg, #25D366, #1EBE5B); border-radius: 50%; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 0 25px rgba(37, 211, 102, 0.3); transition: all 0.35s ease; overflow: hidden; }
.whatsapp-float-btn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(37, 211, 102, 0.45) 20%, transparent 70%); opacity: 0; animation: pulseGlow 2.6s infinite ease-in-out; }
.whatsapp-float-btn img { z-index: 2; width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); }
.whatsapp-float-btn:hover { transform: scale(1.12) rotate(5deg); box-shadow: 0 0 40px rgba(37, 211, 102, 0.45); }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pulseGlow { 0%, 100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.3); } }
@media (prefers-color-scheme: dark) { .whatsapp-floating { background: rgba(15, 15, 15, 0.8); } }
@media (max-width: 600px) { .help-text { display: none; } .whatsapp-floating { background: transparent; box-shadow: none; padding: 0; animation: none; } }
/* ===== CORPOTAE AND GOVERMENT PROJECTS ===== */
.corporate-slider { background-color: #333; color: #fff; padding: 50px 20px; text-align: center; }
.corporate-slider h2 { font-size:2rem; font-weight:800; color:#ff3c78; margin-bottom:15px; }
.corporate-slider p { font-size:0.95rem !important; color:#ffffff !important; line-height:1.6; max-width:650px; margin:0 auto; margin-bottom: 20px; }
.slides-wrapper { overflow: hidden; max-width: 800px; margin: 0 auto; border-radius: 8px; }
.slides { display: flex; width: 100%; animation: slideAnimation 16s infinite; }
.slide { flex: 0 0 100%; position: relative; height: 500px; display: flex; align-items: center; justify-content: center;}
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px;}
.slide-label { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); background: rgba(51, 51, 51, 0.7); color: #ff3c78; padding: 8px 15px; font-size: 25px; font-weight: bold; border-radius: 5px; z-index: 10; white-space: nowrap;}
@keyframes slideAnimation {0% { transform: translateX(0%); } /* Slide 1 */ 18% { transform: translateX(0%); } /* Pause 3s */ 20% { transform: translateX(-100%); } /* Slide 2 */ 38% { transform: translateX(-100%); } /* Pause 3s */ 40% { transform: translateX(-200%); } /* Slide 3 */ 58% { transform: translateX(-200%); } /* Pause 3s */ 60% { transform: translateX(-300%); } /* Slide 4 */ 78% { transform: translateX(-300%); } /* Pause 3s */ 80% { transform: translateX(-400%); } /* Slide 5 (Letterhead) */ 98% { transform: translateX(-400%); } /* Pause 3s */ 100% { transform: translateX(0%); } /* Loop back to Slide 1 */}
@media (max-width: 1024px) { .slide img { max-height: 400px; } }
@media (max-width: 768px) { .corporate-slider h2 { font-size: 2rem; } .corporate-slider p {text-align: left;}.slide-label { font-size: 11px; padding: 6px 12px; margin-top: 350px !important; } .slide img { max-height: 300px; } }
@media (max-width: 480px) {
.slide { height: auto; /* let slide height match image */}
.slide img { max-height: 200px; /* keep your existing max height */ }
.slide-label { bottom: 10px; /* stay inside image */}}
/* ==========================
Global Scroll Reveal Animation
========================== */
.pop-up {opacity: 0; transform: translateY(20px); transition: all 0.8s ease-out;}
.pop-up.revealed {opacity: 1; transform: translateY(0);}
/* Optional: stagger delay for multiple elements in a section */
.pop-up:nth-of-type(1) { transition-delay: 0.15s; }
.pop-up:nth-of-type(2) { transition-delay: 0.3s; }
.pop-up:nth-of-type(3) { transition-delay: 0.45s; }
.pop-up:nth-of-type(4) { transition-delay: 0.6s; }
/* ===== GRAPHIC DESIGN PAGE =====>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
/* HERO – GRAPHIC DESIGN */
.hero-graphic { position: relative; min-height: 80vh; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; font-family: 'Poppins', sans-serif; color: #fff; }
.hero-graphic .hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.45) contrast(1.2); z-index: 1; }
.hero-graphic .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 12, 20, 0.8); z-index: 2; }
.hero-graphic .hero-content { position: relative; z-index: 5; max-width: 900px; padding: 0 20px; animation: fadeInUp 1s ease forwards; }
.hero-graphic .hero-content h1 { font-size: 3rem; font-weight: 900; line-height: 1.2; margin-bottom: 20px; }
.hero-graphic .highlight-graphic { background: linear-gradient(90deg, #ff3c78, #e6326a, #ffc400); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; }
.hero-graphic .hero-subtitle { font-size: 1.2rem; line-height: 1.6; margin-bottom: 30px; max-width: 650px; margin-left: auto; margin-right: auto; color: #f5f5f5; }
.hero-graphic .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.btn-hero-graphic { display: inline-block; background: #ff3c78; color: #fff; font-weight: 1000; font-size: 1.2rem; padding: 14px 36px; border-radius: 30px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 6px 25px rgba(255,60,120,0.5); }
.btn-hero-graphic:hover { background: #333; transform: translateY(-4px); box-shadow: 0 8px 30px rgba(255,60,120,0.6); }
.design-shape { position: absolute; border-radius: 50%; opacity: 0.15; animation: floatShape 12s infinite ease-in-out alternate; }
.design-shape.shape1 { width: 180px; height: 180px; background: #ff3c78; top: 10%; left: 10%; animation-delay: 0s; }
.design-shape.shape2 { width: 130px; height: 130px; background: #ffc400; top: 25%; right: 15%; animation-delay: 3s; }
.design-shape.shape3 { width: 150px; height: 150px; background: #e6326a; bottom: 15%; left: 20%; animation-delay: 6s; }
.design-shape.shape4 { width: 100px; height: 100px; background: #fff; bottom: 20%; right: 20%; animation-delay: 9s; }
@keyframes floatShape { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-25px) rotate(45deg); } 100% { transform: translateY(0) rotate(90deg); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 900px) { .hero-graphic .hero-content h1 { font-size: 2.5rem; } .hero-graphic .hero-subtitle { font-size: 1.05rem; } }
@media (max-width: 600px) { .hero-graphic .hero-content h1 { font-size: 2rem; } .hero-graphic .hero-subtitle { font-size: 0.95rem; } .btn-hero-graphic { padding: 12px 28px; font-size: 0.95rem; } }
.cta-buttons {
display: flex;
justify-content: center;
gap: 20px; /* space between buttons */
flex-wrap: wrap; /* allows stacking on smaller screens */
margin-top: 30px; /* optional, adjust vertical spacing */
border-radius: 10px !important
}
.btn-cta { display: inline-block; background: #ff3c78; color: #fff; font-size: 1.2rem; font-weight: 1000px; padding: 14px 36px; border-radius: 10px !important; text-decoration: none; box-shadow: 0 6px 25px rgba(255,60,120,0.5); transition: all 0.3s ease; }
.btn-cta:hover { background: #333; color: #fff; transform: translateY(-4px); box-shadow: 0 8px 30px rgba(255,60,120,0.6); }
@media (max-width:480px) { .btn-cta { width: 80%; max-width: 280px; margin: 0 auto; } }
/* ===== FREE RESOURCES HIGHLIGHT BANNER ===== */
.free-banner { background: #ff3c78; color: #fff; text-align: center; padding: 15px 10px; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1rem; position: relative; overflow: hidden; border-radius: 8px; margin: 20px auto; max-width: 1000px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.free-banner a { color: #fff; text-decoration: none; display: inline-block; transition: color 0.3s ease; }
.free-banner a:hover { color: #333; text-decoration: underline; }
@media(min-width: 768px) { .free-banner a { animation: scroll-banner 20s linear infinite; white-space: nowrap; display: inline-block; padding-left: 100%; } @keyframes scroll-banner { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } }
@media(max-width: 767px) { .free-banner a { animation: none; } }
/* ===============================
PORTFOLIO – GRAPHIC DESIGN (Optimized)
================================ */
.portfolio-graphic{background:#fff;color:#333;position:relative;overflow:hidden;padding:60px 20px;font-family:'Poppins',sans-serif;}
.portfolio-graphic::before{content:"";position:absolute;top:-40%;left:-40%;width:180%;height:180%;background:radial-gradient(circle at 25% 25%, rgba(255,60,120,0.06), transparent 60%),radial-gradient(circle at 75% 75%, rgba(255,60,120,0.08), transparent 60%);animation:floatBg 16s ease-in-out infinite alternate;z-index:0;}
@keyframes floatBg{0%{transform:translate(0,0) scale(1);}50%{transform:translate(-30px,30px) scale(1.05);}100%{transform:translate(0,0) scale(1);}}
.portfolio-graphic .section-header{text-align:left;max-width:750px;margin:0 auto 40px;position:relative;z-index:2;opacity:0;transform:translateY(30px);animation:fadeUp 1s ease-out 0.3s forwards;}
.portfolio-graphic .section-title{font-size:2.2rem;font-weight:800;margin-bottom:12px;color:#ff3c78;background:linear-gradient(90deg,#ff3c78,#e6326a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.portfolio-graphic .section-subtitle{font-size:1rem;line-height:1.5;color:#333;margin-bottom:30px;}
.portfolio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;position:relative;z-index:2;}
.portfolio-card{position:relative;overflow:hidden;border-radius:15px;cursor:pointer;background:#fff;box-shadow:0 10px 25px rgba(0,0,0,0.25);transition:transform 0.35s ease,box-shadow 0.35s ease;opacity:0;transform:translateY(40px);animation:fadeUp 1s ease-out forwards;}
.portfolio-card img{width:100%;height:auto;display:block;border-radius:12px;transition:transform 0.35s ease,box-shadow 0.35s ease;}
.portfolio-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,0.2);}
.portfolio-card:hover img{transform:scale(1.04);}
.portfolio-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,60,120,0.85);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;opacity:0;transition:opacity 0.35s ease;padding:15px;}
.portfolio-card:hover .portfolio-overlay{opacity:1;}
.portfolio-overlay h3{font-size:1.4rem;font-weight:700;margin-bottom:8px;animation:overlayFade 0.6s ease-out forwards;}
.portfolio-overlay p{font-size:0.95rem;line-height:1.4;animation:overlayFade 0.8s ease-out forwards;}
.cta-buttons{text-align:center;margin-top:40px;}
.btn-cta{display:inline-block;background:#ff3c78;color:#fff;font-weight:700;padding:12px 30px;border-radius:30px;text-decoration:none;box-shadow:0 6px 20px rgba(255,60,120,0.4);transition:all 0.3s ease;}
.btn-cta:hover{background:#333;color:#fff;transform:translateY(-3px);box-shadow:0 8px 25px rgba(255,60,120,0.5);}
@keyframes fadeUp{from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:translateY(0);}}
@keyframes overlayFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@media(max-width:992px){.portfolio-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:15px;}}
@media(max-width:768px){.portfolio-graphic .section-title{font-size:2rem;text-align:center;}.portfolio-graphic .section-subtitle{font-size:0.95rem;margin-bottom:25px;}}
@media(max-width:576px){.portfolio-grid{grid-template-columns:1fr;gap:15px;}}
@media(max-width:480px){.btn-cta{width:80%;max-width:260px;margin:0 auto;}.portfolio-graphic .section-title{font-size:1.8rem;}.portfolio-graphic .section-subtitle{font-size:0.9rem;line-height:1.4;}.portfolio-card img{border-radius:10px;}}
/* ===== SERVICES OFFERED (Optimized) ===== */
.services-graphic{background:#ffe1ea;color:#333;padding:60px 10px;}
.services-graphic .section-header{text-align:left;max-width:750px;margin:0 auto 40px;}
.services-graphic .section-title{font-size:2rem !important;font-weight:800;margin-bottom:12px;color:#ff3c78;}
.services-graphic .section-subtitle{font-size:1rem;line-height:1.5;color:#333;margin-bottom:30px;}
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;}
.service-card{background:#fff;border-radius:15px;padding:25px 20px;text-align:left;box-shadow:0 10px 30px rgba(0,0,0,0.08);transition:transform 0.35s ease,box-shadow 0.35s ease;}
.service-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(255,60,120,0.15);}
.service-icon{font-size:1.8rem !important;width:50px !important;height:50px !important;margin:0 0 15px 0;display:flex;justify-content:flex-start;align-items:center;border-radius:50%;background:#ff3c78;color:#fff;transition:transform 0.3s ease;}
.service-card:hover .service-icon{transform:scale(1.1);}
.service-card h3{font-size:1.3rem;font-weight:700;margin-bottom:10px;color:#ff3c78;}
.service-card p{font-size:0.95rem;line-height:1.5;color:#555;}
@media(max-width:768px){.services-graphic .section-title{font-size:2rem;text-align:center;}.services-graphic .section-subtitle{font-size:0.95rem;line-height:1.4;}}
@media(max-width:576px){.services-grid{grid-template-columns:1fr;gap:15px;}.service-card{padding:20px 15px;}.service-icon{width:60px;height:60px;font-size:2rem;}.service-card h3{font-size:1.2rem;}.service-card p{font-size:0.9rem;line-height:1.4;}}
/* =====================================
PACKAGES SECTION
Brand Colors: #ff3c78, #333, #fff
===================================== */
.pricing-packages{padding:60px 20px;background:#fff;font-family:"Poppins",sans-serif;color:#333;}
.section-header{text-align:left !important;max-width:700px;margin:0 auto 40px;}
.section-title{font-size:2rem;font-weight:700;color:#333;}
.section-title .highlight{color:#ff3c78;}
.section-subtitle{margin-top:12px;font-size:0.95rem;color:#555;line-height:1.7;}
.packages-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;}
.package-card{background:#fff;border-radius:15px;padding:25px 20px;text-align:center;border:2px solid #f2f2f2;transition:all 0.3s ease;position:relative;box-shadow:0px 5px 25px rgba(0,0,0,0.05);}
.package-card:hover{transform:translateY(-7px);border-color:#ff3c78;box-shadow:0px 10px 30px rgba(255,60,120,0.2);}
.badge-popular{position:absolute;top:-10px;right:-10px;background:#ff3c78;color:#fff;font-size:0.75rem;padding:5px 10px;border-radius:20px;font-weight:600;box-shadow:0px 4px 8px rgba(255,60,120,0.3);}
.package-card.popular{border-color:#ff3c78;background:#fff5fa;}
.package-card h3{font-size:1.3rem;font-weight:600;margin-bottom:12px;color:#333;}
.package-price{font-size:1.5rem;font-weight:700;color:#ff3c78;margin-bottom:15px;}
.package-features{list-style:none;margin:0 0 25px;padding:0;}
.package-features li{font-size:0.9rem;padding:6px 0;color:#555;border-bottom:1px solid #efefef;}
.package-features li:last-child{border-bottom:none;}
.btn-cta{display:inline-block;padding:10px 20px;background:#ff3c78;color:#fff;font-size:0.9rem;text-decoration:none;font-weight:600;border-radius:35px;transition:0.3s;text-align:center !important;}
.btn-cta:hover{background:#e52d68;transform:scale(1.05);}
.pricing-note{color:#444;font-size:1rem;}
.pricing-note a{color:#ff3c78;font-weight:600;text-decoration:none;}
.pricing-note a:hover{text-decoration:underline;}
@media(max-width:900px){.section-title{font-size:1.8rem;text-align:center;}.package-price{font-size:1.4rem;} }
@media(max-width:600px){.section-title{text-align:center;font-size:1.8rem;}.packages-grid{gap:15px;}.package-card{padding:20px 15px;}.btn-cta{width:100%;padding:12px;}}
/* 🌟 WHY CHOOSE US SECTION - PREMIUM AGENCY STYLE */
/* ===== WHY CHOOSE US SECTION - PREMIUM AGENCY STYLE ===== */
.why-choose{background:linear-gradient(180deg,#fff 0%,#fdf5f8 100%);font-family:'Poppins',sans-serif;color:#333;padding:60px 15px;position:relative;overflow:hidden;}
.why-choose::before,.why-choose::after{content:"";position:absolute;border-radius:50%;z-index:1;opacity:.3;animation:floatAccent 8s ease-in-out infinite alternate;}
.why-choose::before{width:280px;height:280px;background:radial-gradient(circle,rgba(255,60,120,0.25) 0%,transparent 70%);top:-80px;left:-90px;}
.why-choose::after{width:350px;height:350px;background:radial-gradient(circle,rgba(255,60,120,0.15) 0%,transparent 80%);bottom:-120px;right:-90px;}
@keyframes floatAccent{0%{transform:translateY(0) scale(1);}100%{transform:translateY(20px) scale(1.05);}}
.why-choose .section-header{text-align:left;max-width:750px;margin:0 auto 40px;opacity:0;transform:translateY(40px);animation:fadeUp 1s ease forwards;}
.why-choose .section-title{font-size:2rem;font-weight:800;color:#333;margin-bottom:12px;position:relative;}
.why-choose .section-title .highlight{color:#ff3c78;position:relative;}
.why-choose .section-title .highlight::after{content:"";display:block;height:3px;width:35px;background:#ff3c78;margin:8px auto 0;border-radius:2px;}
.why-choose .section-subtitle{font-size:1rem;line-height:1.6;color:#555;}
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;position:relative;z-index:2;}
.feature-card{background:rgba(255,255,255,0.8);backdrop-filter:blur(10px);border-radius:18px;padding:30px 18px;text-align:left;border:1px solid rgba(255,60,120,0.08);box-shadow:0 6px 25px rgba(0,0,0,0.09);transition:all 0.5s ease;position:relative;overflow:hidden;opacity:0;transform:translateY(60px);animation:fadeUp 1s ease forwards;}
.feature-card:nth-child(1){animation-delay:0.3s;}.feature-card:nth-child(2){animation-delay:0.5s;}.feature-card:nth-child(3){animation-delay:0.7s;}.feature-card:nth-child(4){animation-delay:0.9s;}
.feature-card::before{content:"";position:absolute;width:120%;height:100%;background:linear-gradient(120deg,rgba(255,60,120,0.08),transparent 80%);top:0;left:-10%;transform:translateY(-100%);transition:transform 0.6s ease;}
.feature-card:hover::before{transform:translateY(0);}
.feature-card:hover{transform:translateY(-10px);box-shadow:0 10px 35px rgba(255,60,120,0.2);}
.feature-card .icon{width:65px;height:65px;margin:0 0 20px 0;background:linear-gradient(135deg,#ff3c78,#ff6d97);color:#fff;font-size:1.8rem;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(255,60,120,0.3);transition:all 0.4s ease;animation:floatIcon 3s ease-in-out infinite alternate;}
.feature-card:hover .icon{transform:scale(1.1) rotate(5deg);box-shadow:0 10px 30px rgba(255,60,120,0.5);}
.feature-card h3{font-size:1.25rem;font-weight:600;color:#ff3c78;margin-bottom:12px;}
.feature-card p{font-size:0.95rem;color:#333;line-height:1.7;}
@keyframes fadeUp{from{opacity:0;transform:translateY(60px);}to{opacity:1;transform:translateY(0);}}
@keyframes floatIcon{0%{transform:translateY(0);}100%{transform:translateY(-10px);}}
@media(max-width:1024px){.why-choose{padding:55px 20px;}.why-choose .section-title{font-size:1.9rem;}.why-choose .section-subtitle{font-size:.98rem;line-height:1.5;}.features-grid{gap:18px;}.feature-card{padding:28px 18px;}.feature-card h3{font-size:1.15rem;}.feature-card p{font-size:.92rem;}.feature-card .icon{width:60px;height:60px;font-size:1.6rem;}}
@media(max-width:767px){.why-choose{padding:50px 15px;}.why-choose .section-title{font-size:1.7rem;}.why-choose .section-subtitle{font-size:.9rem;line-height:1.4;}.features-grid{gap:15px;}.feature-card{padding:25px 15px;}.feature-card h3{font-size:1.1rem !important;text-align:left;}.feature-card p{font-size:.88rem;}.feature-card .icon{width:55px;height:55px;font-size:1.5rem;align-items:left;}}
@media(max-width:480px){.why-choose{padding:45px 12px;}.why-choose .section-title{font-size:1.6rem;}.why-choose .section-subtitle{font-size:.85rem;line-height:1.3;}.features-grid{gap:12px;}.feature-card{padding:20px 12px;}.feature-card h3{font-size:1rem !important;text-align:left;}.feature-card p{font-size:.85rem;}.feature-card .icon{width:50px;height:50px;font-size:1.4rem;align-items:left;}}
/* ===== CLIENT TESTIMONIALS ===== */
.testimonials-section { background: #fff; padding: 70px 15px; font-family: 'Poppins', sans-serif; position: relative; overflow: hidden; box-shadow: inset 0 10px 30px rgba(0,0,0,0.08); }
.section-header { text-align: center; max-width: 750px; margin: 0 auto 40px }
.section-title { font-size: 2rem; font-weight: 800; margin-bottom: 12px; color: #ff3c78; }
.highlight { background: linear-gradient(90deg,#ff3c78,#e6326a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.section-subtitle { font-size: 1rem; color: #333; margin-bottom: 30px; }
.testimonials-wrapper { width: 100%; max-width: 480px; margin: 0 auto; overflow: hidden; position: relative; height: auto; }
.testimonials-slider { display: flex; transition: transform 0.6s ease; }
.testimonial-card { flex: 0 0 100%; background: linear-gradient(90deg,#fdf5f8,#fccddb); padding: 20px 15px; margin-bottom: 15px; border-radius: 20px; text-align: center; box-shadow: 0 12px 35px rgba(0,0,0,0.15), 0 8px 20px rgba(0,0,0,0.1); margin-right: 0; position: relative; z-index: 1; }
.testimonial-card:hover { transform: translateY(-5px); box-shadow: 0 25px 50px rgba(0,0,0,0.2), 0 15px 25px rgba(0,0,0,0.12); }
.testimonial-initial { width: 50px; height: 50px; margin: 0 auto 15px; background: #ffffff; color: #ff3c78; font-weight: 700; font-size: 1.2rem; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.testimonial-quote { font-size: 0.95rem; color: #555; font-style: italic; margin-bottom: 12px; line-height: 1.5; }
.testimonial-name { font-size: 1.1rem; font-weight: 700; color: #333; margin-bottom: 4px; }
.testimonial-location { font-size: 0.9rem; color: #333; }
.testimonial-shape { position: absolute; border-radius: 50%; opacity: 0.08; z-index: 0; animation: floatShape 15s infinite ease-in-out alternate; }
.shape1 { width: 250px; height: 250px; background: #fd89ac; top: 10%; left: 5%; animation-delay: 0s; }
.shape2 { width: 200px; height: 200px; background: #fc719d; bottom: 15%; right: 10%; animation-delay: 3s; }
.shape3 { width: 300px; height: 300px; background: #ffb6c1; top: 30%; right: 20%; animation-delay: 6s; }
@keyframes floatShape { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(45deg); } 100% { transform: translateY(0) rotate(90deg); } }
@media(max-width:768px) { .testimonials-section { padding: 50px 15px; } .testimonial-card { padding: 18px 12px; } .testimonial-quote { font-size: 0.9rem; } .testimonial-initial { width: 45px; height: 45px; font-size: 1rem; }}
@media(max-width:480px) { .testimonials-section { padding: 40px 10px; } .testimonial-card { padding: 15px 10px; } .testimonial-quote { font-size: 0.85rem; } .testimonial-name { font-size: 1rem; } .testimonial-location { font-size: 0.85rem; } .testimonials-wrapper { max-width: 100%; }}
/* FREQUENTLY ASKED QUESTIONS */
.faq-section { background: #ffe1ea; padding: 70px 15px; position: relative; box-shadow: inset 0 10px 30px rgba(0,0,0,0.03); font-family: 'Poppins', sans-serif; }
.section-header { text-align: center; max-width: 750px; margin: 0 auto 60px; }
.section-title { font-size: 2rem; font-weight: 800; margin-bottom: 12px; color: #ff3c78; }
.section-subtitle { font-size: 1rem; color: #333; line-height: 1.5;}
.highlight { background: linear-gradient(90deg,#ff3c78,#e6326a); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.faq-wrapper { max-width: 750px; margin: 0 auto; }
.faq-item { margin-bottom: 15px; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
.faq-question { cursor: pointer; font-size: 1rem; font-weight: 600; color: #333; padding: 15px 20px; display: block; background: #fff; border: none; outline: none; position: relative; }
.faq-question::after { content: '+'; position: absolute; right: 20px; font-size: 1.3rem; transition: transform 0.3s ease; }
.faq-item[open] .faq-question::after { transform: rotate(45deg); }
.faq-answer { padding: 10px 20px 12px; font-size: 0.95rem; color: #313131; line-height: 1.5; }
.faq-answer p { margin: 8px 0 0; }
@media(max-width:768px){ .faq-section {padding: 50px 10px; } .faq-section .section-title {font-size: 1.8rem;} .faq-section .section-subtitle { font-size: 0.95rem; } .faq-question { font-size: 0.95rem; padding: 12px 15px; }.faq-answer p { font-size: 0.9rem; }}
@media(max-width:480px){.faq-section { padding: 40px 10px;} .faq-section .section-title { font-size: 1.6rem; } .faq-section .section-subtitle { font-size: 0.9rem; } .faq-question { font-size: 0.9rem; padding: 10px 12px; } .faq-answer p { font-size: 0.85rem; }}
/* ===== FREE RESOURCES SECTION ===== */
.free-resources { background: #fff; padding:55px 15px; text-align: left; }
.free-resources h3 { font-size: 1.3rem; font-weight: 600; color: #ff3c78; margin-bottom: 10px;}
.free-resources p { max-width: 900px; margin: 0 auto 25px; font-size: 0.95rem; color: #555; line-height: 1.5; }
.resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; max-width: 950px; margin: 0 auto; }
.resource-item { background: #f9f9f9; border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.08); overflow: hidden; transition: transform 0.3s ease; }
.resource-item:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.12);}
.resource-item img { width: 100%; height: 150px; object-fit: cover; border-bottom: 1px solid #eee; }
.btn-download { display: block; background: #ff3c78; color: #fff; padding: 10px 0; font-weight: bold; text-transform: uppercase; transition: 0.3s; border-radius: 10px; margin: 10px 15px 15px; transition: all 0.3s ease;}
.btn-download:hover { background: #790231; }
@media(max-width:768px) { .free-resources h3 { font-size: 1.2rem; } .free-resources p { font-size: 0.9rem; margin-bottom: 25px; } .resource-item img { height: 150px; } .btn-download { padding: 10px }}
/* ===== MOBILE ===== */
@media(max-width:480px) { .free-resources { padding: 42px 10px; }.free-resources h3 { font-size: 1.1rem;} .free-resources p { font-size: 0.85rem; margin-bottom: 18px;}.resource-item img { height: 130px; } .btn-download { padding: 8px; font-size: 0.85rem; margin: 8px 10px 10px; }}
/* ===== TABLET ===== */
@media(max-width:768px) { .free-resources h3 { font-size: 1.2rem; }.free-resources p { font-size: 0.9rem; margin-bottom: 22px; }.resource-item img { height: 140px; }.btn-download { padding: 10px; margin: 10px 12px 14px; }}
/* CALL TO ACTION SECTION */
.cta-section { background: #ff3c78; padding: 70px 15px; position: relative; border-radius: 0 40px 0 0; box-shadow: inset 0 10px 30px rgba(0,0,0,0.05); text-align: center; font-family: 'Poppins', sans-serif; color: #fff; }
.cta-title { font-size: 2.2rem; font-weight: 800; margin-bottom: 15px; line-height: 1.2;}
.cta-subtitle { font-size: 1rem; max-width: 650px; margin: 0 auto 30px; line-height: 1.5; color: #fff; }
.btn-cta { display: inline-block; background: #fff; color: #ff3c78; font-weight: 700; padding: 14px 36px; border-radius: 30px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 6px 25px rgba(0,0,0,0.15); }
.btn-cta:hover { background: #333; color: #fff; transform: translateY(-4px); box-shadow: 0 7px 25px rgba(0,0,0,0.25); }
.cta-shape { position: absolute; width: 150px; height: 150px; border-radius: 10%; background: rgba(255,255,255,0.1); top: -40px; right: -40px; animation: floatShape 12s infinite ease-in-out alternate; }
@keyframes floatShape { 0% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(45deg); } 100% { transform: translateY(0) rotate(90deg); } }
@media(max-width: 768px) {.cta-title { font-size: 1.9rem; } .cta-subtitle { font-size: 0.95rem; margin-bottom: 25px; }.btn-cta { padding: 12px 28px; font-size: 0.9rem;} .cta-shape { width: 100px; height: 100px; top: -25px; right: -25px; }}
/* ===== WhatsApp Floating Button (Modern Creative Style) ===== */
.whatsapp-floating { position: fixed; bottom: 28px; right: 28px; display: flex; align-items: center; gap: 12px; background: rgba(25, 25, 25, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50px; padding: 10px 18px 10px 22px; backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); z-index: 1200; font-family: 'Poppins', sans-serif; animation: floatY 4s ease-in-out infinite; transition: all 0.4s ease; }
.whatsapp-floating:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 10px 35px rgba(37, 211, 102, 0.3); }
.help-text { color: #fff; font-weight: 600; font-size: 1rem; letter-spacing: 0.4px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.whatsapp-float-btn { background: linear-gradient(135deg, #25D366, #1EBE5B); border-radius: 50%; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 0 25px rgba(37, 211, 102, 0.3); transition: all 0.35s ease; overflow: hidden; }
.whatsapp-float-btn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(37, 211, 102, 0.45) 20%, transparent 70%); opacity: 0; animation: pulseGlow 2.6s infinite ease-in-out; }
.whatsapp-float-btn img { z-index: 2; width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); }
.whatsapp-float-btn:hover { transform: scale(1.12) rotate(5deg); box-shadow: 0 0 40px rgba(37, 211, 102, 0.45); }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pulseGlow { 0%, 100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.3); } }
@media (prefers-color-scheme: dark) { .whatsapp-floating { background: rgba(15, 15, 15, 0.8); } }
@media (max-width: 600px) { .help-text { display: none; } .whatsapp-floating { background: transparent; box-shadow: none; padding: 0; animation: none; } }
@media(max-width: 480px) {.cta-section { padding: 50px 10px; } .cta-title { font-size: 1.7rem;} .cta-subtitle { font-size: 0.9rem; } .btn-cta { width: 80%; padding: 10px 0; }}
/* PRIVACY -POLICY STYLE*/
.footer-bottom a {color: #ff3c78;text-decoration: none;transition: 0.3s;}
.footer-bottom a:hover {color: #fff;text-decoration: underline;}
/* Make footer text wrap nicely on smaller screens */
@media(max-width:768px){
.footer-bottom p {font-size: 13px;line-height: 1.4;}
.footer-bottom a {display: inline-block; margin-top: 5px;}
}
/* ===== SHOW MOBILE NAV ===== */
.mobile-nav.show {display:block;}
/* ==========================
Global Scroll Reveal Animation
========================== >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
.pop-up {opacity: 0; transform: translateY(20px); transition: all 0.8s ease-out;}
.pop-up.revealed {opacity: 1; transform: translateY(0);}
/* Optional: stagger delay for multiple elements in a section */
.pop-up:nth-of-type(1) { transition-delay: 0.15s; }
.pop-up:nth-of-type(2) { transition-delay: 0.3s; }
.pop-up:nth-of-type(3) { transition-delay: 0.45s; }
.pop-up:nth-of-type(4) { transition-delay: 0.6s; }
/* =====HOMEPAGE BEGINS HERE>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ===== */
/* ===== GLOBAL STYLING ===== */
body { margin: 0; font-family: 'Poppins', sans-serif; color: #333; line-height: 1.6; background: #f9f9f9;}
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px;}
h1, h2, h3, h4 { margin: 0 0 15px;}
p { margin: 0 0 20px}
a { text-decoration: none; transition: all 0.3s ease;}
/* ===== HERO SECTION ===== */
.hero-home {position: relative; width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; color: #fff; font-family: 'Poppins', sans-serif;}
.hero-bg-wrapper {position: absolute; width: 100%; height: 100%; overflow: hidden; z-index: 1;}
.hero-bg {width: 100%; height: 100%; object-fit: cover; filter: brightness(0.20) contrast(1.1); animation: bgZoom 30s ease-in-out infinite alternate;}
.hero-overlay {position: absolute; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 2;}
.shape {position: absolute; border-radius: 50%; opacity: 0.2; z-index: 3; animation: float 15s ease-in-out infinite alternate;}
.shape1 {width: 90px; height: 90px; background: #ffc403; top: 20%; left: 15%; animation-delay: 0s;}
.shape2 {width: 60px; height: 60px; background: #fff; top: 60%; left: 80%; animation-delay: 3s;}
.shape3 {width: 120px; height: 120px; background: #ffc403; top: 40%; left: 50%; animation-delay: 6s;}
@keyframes float {0% {transform: translateY(0px) translateX(0px);} 50% {transform: translateY(-20px) translateX(10px);} 100% {transform: translateY(0px) translateX(0px);}}
@keyframes bgZoom {0% {transform: scale(1);} 100% {transform: scale(1.05);}}
.hero-content {position: relative; z-index: 4; max-width: 850px; padding: 0 20px;}
#typewriter {font-size: 2.8rem; font-weight: 900; line-height: 1.2; margin-bottom: 1rem; text-shadow: 2px 2px 8px rgba(0,0,0,0.4); color: #ff3c78;}
.hero-content p {font-size: 1.1rem; margin-bottom: 2rem; line-height: 1.6; color: #f2f2f2; text-shadow: 1px 1px 4px rgba(0,0,0,0.6);}
.cta-buttons {display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;}
.btn-hero {font-weight: 700; text-transform: uppercase; padding: 0.90rem 1.85rem; border-radius: 10px; background: #ff3c78; color: #fff; text-decoration: none; transition: all 0.3s ease, transform 0.3s ease;}
.btn-hero:hover {transform: scale(1.05); background: #fff; color:#333;}
.btn-outline {background: transparent; border: 2px solid #ff3c78; color: #ff3c78;}
.btn-outline:hover {background: #ff3c78; color: #fff; transform: scale(1.05);}
.visually-hidden {position: absolute; left: -9999px; height: 1px; width: 1px; overflow: hidden;}
@media(max-width:768px){#typewriter{font-size:2rem;} .hero-content p{font-size:1rem;} .btn-hero{width:100%; text-align:center;} .shape{display:none;}}
/* ===== GENERAL CONTAINER ===== */
.section .container {
max-width: 1200px; /* limits content width */
margin: 0 auto; /* centers content horizontally */
padding: 0 20px; /* small padding on sides for mobile */
box-sizing: border-box;
}
/* ===== PORTFOLIO SECTION ===== */
.portfolio-home { background: #fff; padding: 60px 20px; color: #333; }
.portfolio-home .section-header { text-align: center; margin-bottom: 40px; }
.portfolio-home .section-title { font-size: 2.2rem; font-weight: 800; }
.portfolio-home .section-title .highlight { background: linear-gradient(90deg,#ff3c78,#ff6899); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.portfolio-home .section-subtitle { font-size: 1rem; color: #555; max-width: 650px; margin: 0 auto; line-height: 1.5; }
.portfolio-slider { overflow: hidden; position: relative;}
.slider-track { display: flex; transition: transform 0.6s ease-in-out; width: 100%;}
.portfolio-card { min-width: 100%; /* show 1 full card at a time */ max-width: 100%; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.15); position: relative; flex-shrink: 0; margin: 0 auto;}
.portfolio-card img { width: 100%; height: auto; display: block; object-fit: cover; transition: transform 0.4s ease;}
.portfolio-card:hover img { transform: scale(1.05);}
.portfolio-overlay {position: absolute; bottom: 0; width: 100%; padding: 12px 15px; background: linear-gradient(0deg, rgba(0,0,0,0.6), transparent); color: #fff; text-align: center; font-weight: 600; opacity: 0; transition: opacity 0.3s ease; border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;}
.portfolio-card:hover .portfolio-overlay { opacity: 1;}
/* Responsive adjustments */
@media (max-width: 768px) {
.portfolio-card { min-width: 100%; }
}
@media (max-width: 480px) {
.portfolio-card { min-width: 100%;}
}
/* Desktop: make card smaller but centered */
@media (min-width: 1025px) {
.portfolio-card {min-width: 100%; /* smaller width */ max-width: 100%; margin: 0; /* center card in the viewport */ }
}
/* Keep full width on tablets and mobiles */
@media (max-width: 1024px) {
.portfolio-card { min-width: 100%; max-width: 100%; margin: 0; }
}
/* ===== CTA BUTTONS ===== */
.cta-buttons { text-align: center; margin-top: 20px; }
.cta-buttons .btn-cta { display: inline-block; background: #ff3c78; color: #fff; padding: 14px 30px; border-radius: 10px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; }
.cta-buttons .btn-cta:hover { background: #333; }
/* ===== BLOG HOME SECTION ===== */
.blog-home { padding: 60px 20px; background-color: #ffd8e4; font-family: 'Poppins', sans-serif; color: #333; text-align: center; }
.blog-home .section-header { margin-bottom: 40px; }
.blog-home .section-title { font-size: 2.2rem; font-weight: 700; margin-bottom: 10px; }
.blog-home .section-title .highlight { color: #ff3c78; }
.blog-home .section-subtitle { font-size: 1rem; color: #555; max-width: 650px; margin: 0 auto; line-height: 1.5; }
.blog-home .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; margin-top: 30px; }
.blog-home .blog-card { background-color: #fff; border-radius: 15px; box-shadow: 0 8px 25px rgba(0,0,0,0.08); padding: 25px 20px; display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.blog-home .blog-card:hover { transform: translateY(-6px); box-shadow: 0 18px 35px rgba(0,0,0,0.12); }
.blog-home .blog-card h3 { font-size: 1.4rem; font-weight: 600; margin-bottom: 15px; color: #ff3c78;}
.blog-home .blog-card p.blog-excerpt { font-size: 1rem; color: #555; line-height: 1.5; margin-bottom: 20px; }
.blog-home .btn-blog {color: #ff3c78; text-decoration: underline; font-weight: 600; /* optional: make it stand out */ transition: color 0.3s ease;}
.blog-home .btn-blog:hover {
color: #333c; /* slightly darker/redder on hover */
}
@media (max-width: 1024px) { .portfolio-home .section-title, .blog-home .section-title { font-size: 2rem; } .portfolio-home .section-subtitle, .blog-home .section-subtitle { font-size: 0.95rem; } }
@media (max-width: 768px) { .portfolio-card img { height: 180px; object-fit: cover; } }
@media (max-width: 480px) { .portfolio-card img { height: 150px; } .blog-home .blog-card { padding: 20px 15px; } .portfolio-home .section-title, .blog-home .section-title { font-size: 1.6rem; } }
/* ===== CORPOTAE AND GOVERMENT PROJECTS ===== */
.corporate-slider { background-color: #333; color: #fff; padding: 50px 20px; text-align: center; }
.corporate-slider h2 { font-size:2.5rem; font-weight:800; color:#ff3c78; margin-bottom:15px; }
.corporate-slider p { font-size:1rem !important; color:#ffffff !important; line-height:1.6; max-width:650px; margin:0 auto; margin-bottom: 20px; }
.slides-wrapper { overflow: hidden; max-width: 800px; margin: 0 auto; border-radius: 8px; }
.slides { display: flex; width: 100%; animation: slideAnimation 16s infinite; }
.slide { flex: 0 0 100%; position: relative; height: 500px; display: flex; align-items: center; justify-content: center;}
.slide img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 8px;}
.slide-label { position: absolute; bottom: 15px; left: 50%; transform: translateX(-50%); background: rgba(51, 51, 51, 0.7); color: #ff3c78; padding: 8px 15px; font-size: 25px; font-weight: bold; border-radius: 5px; z-index: 10; white-space: nowrap;}
@keyframes slideAnimation {0% { transform: translateX(0%); } /* Slide 1 */ 18% { transform: translateX(0%); } /* Pause 3s */ 20% { transform: translateX(-100%); } /* Slide 2 */ 38% { transform: translateX(-100%); } /* Pause 3s */ 40% { transform: translateX(-200%); } /* Slide 3 */ 58% { transform: translateX(-200%); } /* Pause 3s */ 60% { transform: translateX(-300%); } /* Slide 4 */ 78% { transform: translateX(-300%); } /* Pause 3s */ 80% { transform: translateX(-400%); } /* Slide 5 (Letterhead) */ 98% { transform: translateX(-400%); } /* Pause 3s */ 100% { transform: translateX(0%); } /* Loop back to Slide 1 */}
@media (max-width: 1024px) { .slide img { max-height: 400px; } }
@media (max-width: 768px) { .corporate-slider h2 { font-size: 1.5rem; } .slide-label { font-size: 11px; padding: 6px 12px; margin-top: 350px !important; } .slide img { max-height: 300px; } }
@media (max-width: 480px) {
.slide {
height: auto; /* let slide height match image */
}
.slide img {
max-height: 200px; /* keep your existing max height */
}
.slide-label {
bottom: 10px; /* stay inside image */
}
}
/* ===== CONTACT SECTION ===== */
.contact { background: #fff; text-align: center; padding: 80px 20px; }
.contact-title { font-size: 2.5rem; font-weight: 900; color: #ff3c78; margin-bottom: 20px; }
.contact-subtitle { font-size: 1.1rem; color: #555; max-width: 700px; margin: 0 auto 40px; line-height: 1.7; }
.contact-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin-top: 20px; }
.contact-link { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 12px 20px; border-radius: 50px; font-weight: 600; color: #fff; transition: transform 0.3s, box-shadow 0.3s; }
.contact-link i { font-size: 1.3rem; }
.contact-link.whatsapp { background: #1da850 !important; }
.contact-link.email { background: #D44638 !important; }
.contact-link.facebook { background: #1877F2 !important; }
.contact-link.instagram { background: #E1306C !important; }
.contact-link:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.25); }
@media (max-width: 768px) { .contact-title { font-size: 2rem; } .contact-subtitle { font-size: 1rem; } .contact-links { flex-direction: column; gap: 15px; } }
/* ===== CTA PORTFOLIO ===== */
.cta-portfolio { background: #ff3c78; color: #fff; padding: 80px 20px; text-align: center; border-radius: 0 50px 0 0; margin: 60px 0; box-shadow: 0 10px 25px rgba(0,0,0,0.25); }
.cta-portfolio h2 { font-size: 2.6rem; font-weight: 800; margin-bottom: 20px; }
.cta-portfolio p { font-size: 1.1rem; max-width: 700px; margin: 0 auto 30px; line-height: 1.7; }
.cta-portfolio .btn-cta { display: inline-block; background: #fff; color: #ff3c78; font-weight: 700; text-transform: uppercase; padding: 15px 35px; border-radius: 10px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 6px 15px rgba(255,60,120,0.4); }
.cta-portfolio .btn-cta:hover { background: #333; color: #ffffff; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(255,60,120,0.5); }
@media (max-width:768px) { .cta-portfolio h2 { font-size: 2rem; } .cta-portfolio p { font-size: 1rem; } .cta-portfolio .btn-cta { padding: 12px 28px; font-size: 0.95rem; } }
/* ===== CTA SECTION ===== */
.cta-home { background: linear-gradient(135deg, #383838, #ff7ea5); color: #fff; padding: 80px 20px; text-align: center; position: relative; overflow: hidden; border-radius: 20px; margin-top: 50px; }
.cta-home h2 { font-size: 2.5rem; margin-bottom: 20px; }
.cta-home p { font-size: 1.1rem; margin-bottom: 30px; }
.cta-shape { position: absolute; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,0.2); top: 10%; left: -50px; }
.contact-home { background: #fafafa; padding: 80px 20px; text-align: center; }
.contact-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 15px; margin-top: 20px; }
.contact-link { display: inline-flex; align-items: center; padding: 12px 20px; border-radius: 10px; font-weight: 600; color: #fff; transition: all 0.3s ease; }
.contact-link i { margin-right: 8px; }
.contact-link.whatsapp { background: #25D366; }
.contact-link.email { background: #0072c6; }
.contact-link.facebook { background: #1877F2; }
.contact-link.instagram { background: #C13584; }
.contact-link:hover { transform: translateY(-3px); opacity: 0.9; }
/* ===== WhatsApp Floating Button (Modern Creative Style) ===== */
.whatsapp-floating { position: fixed; bottom: 28px; right: 28px; display: flex; align-items: center; gap: 12px; background: rgba(25, 25, 25, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50px; padding: 10px 18px 10px 22px; backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); z-index: 1200; font-family: 'Poppins', sans-serif; animation: floatY 4s ease-in-out infinite; transition: all 0.4s ease; }
.whatsapp-floating:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 10px 35px rgba(37, 211, 102, 0.3); }
.help-text { color: #fff; font-weight: 600; font-size: 1rem; letter-spacing: 0.4px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.whatsapp-float-btn { background: linear-gradient(135deg, #25D366, #1EBE5B); border-radius: 50%; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 0 25px rgba(37, 211, 102, 0.3); transition: all 0.35s ease; overflow: hidden; }
.whatsapp-float-btn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(37, 211, 102, 0.45) 20%, transparent 70%); opacity: 0; animation: pulseGlow 2.6s infinite ease-in-out; }
.whatsapp-float-btn img { z-index: 2; width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); }
.whatsapp-float-btn:hover { transform: scale(1.12) rotate(5deg); box-shadow: 0 0 40px rgba(37, 211, 102, 0.45); }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pulseGlow { 0%, 100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.3); } }
@media (prefers-color-scheme: dark) { .whatsapp-floating { background: rgba(15, 15, 15, 0.8); } }
@media (max-width: 600px) { .help-text { display: none; } .whatsapp-floating { background: transparent; box-shadow: none; padding: 0; animation: none; } }
/* PRIVACY -POLICY STYLE*/
.footer-bottom a {color: #ff3c78;text-decoration: none;transition: 0.3s;}
.footer-bottom a:hover {color: #fff;text-decoration: underline;}
/* Make footer text wrap nicely on smaller screens */
@media(max-width:768px){
.footer-bottom p {font-size: 13px;line-height: 1.4;}
.footer-bottom a {display: inline-block; margin-top: 5px;}
}
/* ===== SHOW MOBILE NAV ===== */
.mobile-nav.show {display:block;}
/* ==========================
Global Scroll Reveal Animation
========================== >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>*/
.pop-up {opacity: 0; transform: translateY(20px); transition: all 0.8s ease-out;}
.pop-up.revealed {opacity: 1; transform: translateY(0);}
/* Optional: stagger delay for multiple elements in a section */
.pop-up:nth-of-type(1) { transition-delay: 0.15s; }
.pop-up:nth-of-type(2) { transition-delay: 0.3s; }
.pop-up:nth-of-type(3) { transition-delay: 0.45s; }
.pop-up:nth-of-type(4) { transition-delay: 0.6s; }
/* -------------------------
Cookie Banner Styles
-------------------------- */
#cookie-banner {position: fixed; bottom: -100px; left: 0; width: 100%; background: #fff; color: #333; padding: 20px 20px; display: flex; justify-content: space-between; align-items: center; font-family: Arial, sans-serif; font-size: 14px; z-index: 9999; /* above WhatsApp button */ box-sizing: border-box; transition: bottom 0.5s ease-in-out;}
#cookie-banner a { color: #ff3c78; text-decoration: underline;}
#allowCookies { background: #ff3c78; color: #000; padding: 8px 16px; border: none; cursor: pointer; border-radius: 4px;}
/* ===== HOMEPAGE ENDS HERE>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ===== */
/* ===== portfolio page starts here>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>===== */
/* ===== PORTFOLIO HERO ===== */
.portfolio-hero { position: relative; background: linear-gradient(to right, #333, #333, #683444); color: #fff; padding: 100px 20px 80px; text-align: center; overflow: hidden; font-family: 'Poppins', sans-serif; }
.portfolio-hero .hero-content h1 { font-size: 3rem; font-weight: 800; line-height: 1.2; margin-bottom: 20px; }
.portfolio-hero .hero-content h1 span { color: #ff3c78; }
.portfolio-hero .hero-content p { font-size: 1.1rem; max-width: 700px; margin: 20px auto; color: #fff; }
.portfolio-hero .hero-btn { display: inline-block; background: #ff3c78; color: #fff; padding: 12px 30px; border-radius: 10px !important; text-decoration: none; font-weight: 600; transition: all 0.3s ease; }
.portfolio-hero .hero-btn:hover { background: #ffffff; color: #333; }
.portfolio-hero .hero-shape { position: absolute; width: 100px; height: 100px; background: rgba(250, 203, 103, 0.1) !important; border-radius: 50%; animation: float 6s ease-in-out infinite; }
.portfolio-hero .shape3 { top: 60%; left: 70%; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@media (max-width: 768px) { .portfolio-hero { padding: 80px 15px 60px; } .portfolio-hero .hero-content h1 { font-size: 2.2rem; } }
@media (max-width: 480px) { .portfolio-hero .hero-content h1 { font-size: 1.8rem; } .portfolio-hero .hero-btn { padding: 10px 24px; font-size: 0.95rem; } .portfolio-hero .hero-content p { font-size: 0.95rem; } }
/* ===== PORTFOLIO GRID ===== */
.portfolio-gallery { padding: 80px 20px; background: #fff; text-align: center; }
.portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 25px; max-width: 1200px; margin: 0 auto; }
.portfolio-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.portfolio-card:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12); }
.portfolio-card img { width: 100%; height: auto; display: block; }
.portfolio-info { padding: 20px; }
.portfolio-info h3 { font-size: 1.2rem; color: #ff3c78; margin-bottom: 8px; }
.portfolio-info p { color: #666; font-size: 0.95rem; line-height: 1.4; }
.cta-portfolio { background: linear-gradient(135deg, #ff3c78, #457b9d); color: #fff; text-align: center; padding: 80px 20px; border-radius: 0; }
.cta-content { max-width: 700px; margin: auto; }
.cta-title { font-size: 2rem; margin-bottom: 20px; font-weight: 700; }
.cta-subtitle { font-size: 1.1rem; line-height: 1.6; margin-bottom: 30px; }
.btn-cta { display: inline-block; padding: 14px 32px; background: #fff; color: #ff3c78; border-radius: 50px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; }
.btn-cta:hover { background: #f1faee; color: #ff3c78; }
@media (max-width: 768px) { .portfolio-hero { padding: 80px 20px; } .portfolio-hero h1 { font-size: 2rem; } .portfolio-hero p { font-size: 1rem; } .portfolio-grid { gap: 15px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); max-width: 100%; } .portfolio-info { padding: 14px; } .portfolio-info h3 { font-size: 1.05rem; } .portfolio-info p { font-size: 0.88rem; } }
@media (max-width: 480px) { .portfolio-hero { padding: 60px 15px; } .portfolio-hero h1 { font-size: 1.6rem; } .portfolio-hero p { font-size: 0.9rem; } .hero-btn { padding: 10px 22px; font-size: 0.9rem; } .portfolio-gallery { padding-left: 40px; padding-right: 40px; padding-top: 60px; padding-bottom: 60px; } .portfolio-grid { gap: 10px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .portfolio-card { border-radius: 10px; } .portfolio-card img { height: 130px; object-fit: cover; } .portfolio-info { padding: 12px; } .portfolio-info h3 { font-size: 0.95rem; } .portfolio-info p { font-size: 0.8rem; } .cta-title { font-size: 1.4rem; } .cta-subtitle { font-size: 0.9rem; } .btn-cta { padding: 10px 24px; font-size: 0.9rem; } }
/* ===== CTA SECTION ===== */
.cta-portfolio { background: #ff3c78; color: #fff; padding: 80px 20px; text-align: center; border-radius: 0 50px 0 0; margin: 60px 0; box-shadow: 0 10px 25px rgba(0,0,0,0.25); }
.cta-portfolio .cta-title { font-size: 2rem; font-weight: 900; margin-bottom: 20px; }
.cta-portfolio .cta-subtitle { font-size: 0.95rem; max-width: 700px; margin: 0 auto 30px; line-height: 1.7; }
.cta-portfolio .btn-cta { display: inline-block; background: #fff; color: #ff3c78; font-weight: 700; text-transform: uppercase; padding: 15px 35px; border-radius: 10px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 6px 15px rgba(255,60,120,0.4); }
.cta-portfolio .btn-cta:hover { background: #333; color: #ffffff; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(255,60,120,0.5); }
/* ===== CTA PORTFOLIO MOBILE FIX ===== */
@media (max-width: 768px) {
.cta-portfolio { padding: 60px 20px; /* reduced height for mobile */}
/* Heading stays centered */
.cta-portfolio .cta-title { font-size: 2rem; text-align: center; }
/* Subtitle left-aligned on mobile */
.cta-portfolio .cta-subtitle { font-size: 0.95rem; text-align: center; max-width: 100%; margin-left: auto; margin-right: auto; }
/* Button stays centered */
.cta-portfolio .btn-cta { padding: 12px 28px; font-size: 0.95rem;}}
/* ===== WhatsApp Floating Button (Modern Creative Style) ===== */
.whatsapp-floating { position: fixed; bottom: 28px; right: 28px; display: flex; align-items: center; gap: 12px; background: rgba(25, 25, 25, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50px; padding: 10px 18px 10px 22px; backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); z-index: 1200; font-family: 'Poppins', sans-serif; animation: floatY 4s ease-in-out infinite; transition: all 0.4s ease; }
.whatsapp-floating:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 10px 35px rgba(37, 211, 102, 0.3); }
.help-text { color: #fff; font-weight: 600; font-size: 1rem; letter-spacing: 0.4px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.whatsapp-float-btn { background: linear-gradient(135deg, #25D366, #1EBE5B); border-radius: 50%; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 0 25px rgba(37, 211, 102, 0.3); transition: all 0.35s ease; overflow: hidden; }
.whatsapp-float-btn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(37, 211, 102, 0.45) 20%, transparent 70%); opacity: 0; animation: pulseGlow 2.6s infinite ease-in-out; }
.whatsapp-float-btn img { z-index: 2; width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); }
.whatsapp-float-btn:hover { transform: scale(1.12) rotate(5deg); box-shadow: 0 0 40px rgba(37, 211, 102, 0.45); }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pulseGlow { 0%, 100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.3); } }
@media (prefers-color-scheme: dark) { .whatsapp-floating { background: rgba(15, 15, 15, 0.8); } }
@media (max-width: 600px) { .help-text { display: none; } .whatsapp-floating { background: transparent; box-shadow: none; padding: 0; animation: none; } }
/* ==========================
Global Scroll Reveal Animation
========================== */
.pop-up {opacity: 0; transform: translateY(20px); transition: all 0.8s ease-out;}
.pop-up.revealed {opacity: 1; transform: translateY(0);}
/* Optional: stagger delay for multiple elements in a section */
.pop-up:nth-of-type(1) { transition-delay: 0.15s; }
.pop-up:nth-of-type(2) { transition-delay: 0.3s; }
.pop-up:nth-of-type(3) { transition-delay: 0.45s; }
.pop-up:nth-of-type(4) { transition-delay: 0.6s; }
/* ===== PRIVACY POLICY STARTS HERE>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ===== */
/* === ARIDESIGN Privacy Policy Main Content === */
header { text-align: center; margin-bottom: 30px; }
/* Header container */
.rolling-header { background-color: #ff3c78; padding: 7px 0; overflow: hidden; white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,0.2); border-radius: 8px; max-width: 100%; margin: 20px auto; text-align: center; position: relative; }
.rolling-header span { display: inline-block; color: #fff; font-size: 2.2rem; font-weight: bold; font-family: 'Arial', sans-serif; padding-left: 100%; animation: roll 10s linear infinite; }
@keyframes roll { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
main { max-width: 900px; margin: 40px auto; padding: 30px 20px; background-color: #fff; border-radius: 10px; box-shadow: 0 6px 15px rgba(0,0,0,0.05); font-family: 'Arial', sans-serif; color: #333; line-height: 1.6; }
main h1 { text-align: center; color: #ff3c78; margin-bottom: 25px; font-size: 2rem; }
main h2 { color: #222; border-left: 4px solid #ff3c78; padding-left: 10px; margin-top: 30px; margin-bottom: 15px; font-size: 1.4rem; }
main p { margin-bottom: 15px; font-size: 1rem; }
main ul { margin-left: 25px; margin-bottom: 15px; }
main ul li { margin-bottom: 10px; }
main a { color: #ff3c78; text-decoration: underline; }
main a:hover { color: #222; text-decoration: none; }
@media (max-width: 600px) { main { margin: 20px 10px; padding: 20px; } main h1 { font-size: 1.6rem; } main h2 { font-size: 1.2rem; } }
/* ===== QOUTE PAGE STARTS HERE>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ===== */
/* ===== QUOTE HERO ===== */
.quote-hero { position: relative; text-align: center; padding: 120px 20px; overflow: hidden; color: #fff; }
.quote-hero-bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.quote-hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(36,16,22,0.8); z-index: 2; }
.quote-hero-content { position: relative; z-index: 3; max-width: 700px; margin: 0 auto; }
.quote-hero h1 { font-size: 2.8rem; font-weight: 900; margin-bottom: 20px; background: linear-gradient(90deg, #ff3c78, #f7d200); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.quote-hero p { font-size: 1.2rem; line-height: 1.7; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
@media (max-width: 768px) { .quote-hero { padding: 80px 15px; } .quote-hero h1 { font-size: 2rem; } .quote-hero p { font-size: 1rem; } }
/* ===== QUOTE FORM ===== */
.quote-form { background:#fff; padding:80px 20px; text-align:center; box-shadow:0 8px 25px rgba(0,0,0,0.05); border-radius:12px; max-width:1000px; margin:50px auto; position:relative; }
.quote-form h2 { font-size:2rem; font-weight:900; color:#ff3c78; margin-bottom:20px; }
.quote-form p { font-size:0.95rem !important; color:#555; max-width:800px; margin:0 auto 40px; line-height:1.7; }
.quote-form form { display:flex; flex-direction:column; gap:20px; }
.quote-form .form-row { display:flex; gap:20px; flex-wrap:wrap; }
.quote-form .form-group { flex:1; display:flex; flex-direction:column; text-align:left; }
.quote-form label { font-weight:600; margin-bottom:8px; color:#333; }
.quote-form input, .quote-form textarea { padding:12px 16px; border:2px solid #ddd; border-radius:10px; font-size:1rem; transition:all 0.3s ease; width:100%; }
.quote-form input:focus, .quote-form textarea:focus { border-color:#ff3c78; box-shadow:0 4px 15px rgba(255,60,120,0.25); outline:none; }
.quote-form textarea { min-height:120px; resize:vertical; }
.quote-form button { background:#ff3c78; color:#fff; padding:16px 32px; font-weight:700; font-size:1.1rem; border:none; border-radius:10px; cursor:pointer; transition:all 0.3s ease; }
.quote-form button:hover { background:#e12f68; transform:translateY(-3px); box-shadow:0 8px 20px rgba(255,60,120,0.4); }
/* === MOBILE FIXES FOR QUOTE FORM === */
@media (max-width: 768px) { .quote-form { padding: 50px 20px; margin: 30px auto;}
/* Keep heading centered */
.quote-form h2 { font-size: 1.8rem;}
/* Left align ONLY the paragraph text */
.quote-form p { text-align: left; padding-left: 10px; padding-right: 10px; margin-left: auto; margin-right: auto; font-size: 0.95rem;}
/* Stack fields properly */
.quote-form .form-row { flex-direction: column; gap: 15px;}
/* Reduce input & textarea padding slightly */
.quote-form input,
.quote-form textarea { padding: 10px 14px; font-size: 0.95rem; }
/* Smaller button but still bold */
.quote-form button { font-size: 1rem;padding: 14px 26px; }}
/* ===== CONTACT SECTION ===== */
.contact { background:#fff; text-align:center; padding:80px 20px; }
.contact-title { font-size:2rem; font-weight:900; color:#ff3c78; margin-bottom:20px; }
.contact-subtitle { font-size: 0.95rem; color:#555; max-width:700px; margin:0 auto 40px; line-height:1.7; }
.contact-links { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; margin-top:20px; }
.contact-link { display:flex; align-items:center; gap:10px; text-decoration:none; padding:12px 20px; border-radius:10px; font-weight:600; color:#fff; transition:transform 0.3s, box-shadow 0.3s; }
.contact-link i { font-size:1.3rem; }
.contact-link.whatsapp { background:#1da850; }
.contact-link.email { background:#D44638; }
.contact-link.facebook { background:#1877F2; }
.contact-link.instagram { background:#E1306C; }
.contact-link:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(0,0,0,0.25); }
/* === MOBILE & TABLET FIXES FOR CONTACT SECTION === */
@media (max-width: 768px) {
.contact { padding: 60px 20px; }
/* Keep heading centered */
.contact-title { font-size: 1.8rem; text-align: center; }
/* Left align ONLY this text, with clean spacing */
.contact-subtitle { text-align: left; padding-left: 10px; padding-right: 10px; margin-left: auto; margin-right: auto; font-size: 0.95rem; }
/* Stack buttons vertically */
.contact-links { flex-direction: column; gap: 15px; justify-content: center; align-items: center;}
/* Make each contact button full-width (but neat) */
.contact-link { width: 100%; max-width: 330px; justify-content: center; padding: 14px 20px; font-size: 1rem; }}
/* ===== QUOTE FORM DECORATIVE SHAPES ===== */
.quote-form {position:relative; background:#f9f9f9; padding:80px 20px; overflow:hidden; z-index:1;}
.quote-form::before {content:""; position:absolute; top:-50px; left:-50px; width:200px; height:200px; background:#ff3c78; border-radius:50%; opacity:0.15; animation:floatShape 9s ease-in-out infinite alternate; z-index:0;}
.quote-form::after {content:""; position:absolute; bottom:-50px; right:-50px; width:150px; height:150px; background:#ff3c78; border-radius:50%; opacity:0.15; animation:floatShape 11s ease-in-out infinite alternate-reverse; z-index:0;}
@keyframes floatShape {0% {transform:translateY(0) rotate(0deg);} 50% {transform:translateY(15px) rotate(10deg);} 100% {transform:translateY(0) rotate(-10deg);}}
.quote-form .container, .quote-form h2, .quote-form p, .quote-form form {position:relative; z-index:2;}
/* ===== WhatsApp Floating Button (Modern Creative Style) ===== */
.whatsapp-floating { position: fixed; bottom: 28px; right: 28px; display: flex; align-items: center; gap: 12px; background: rgba(25, 25, 25, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50px; padding: 10px 18px 10px 22px; backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); z-index: 1200; font-family: 'Poppins', sans-serif; animation: floatY 4s ease-in-out infinite; transition: all 0.4s ease; }
.whatsapp-floating:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 10px 35px rgba(37, 211, 102, 0.3); }
.help-text { color: #fff; font-weight: 600; font-size: 1rem; letter-spacing: 0.4px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.whatsapp-float-btn { background: linear-gradient(135deg, #25D366, #1EBE5B); border-radius: 50%; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 0 25px rgba(37, 211, 102, 0.3); transition: all 0.35s ease; overflow: hidden; }
.whatsapp-float-btn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(37, 211, 102, 0.45) 20%, transparent 70%); opacity: 0; animation: pulseGlow 2.6s infinite ease-in-out; }
.whatsapp-float-btn img { z-index: 2; width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); }
.whatsapp-float-btn:hover { transform: scale(1.12) rotate(5deg); box-shadow: 0 0 40px rgba(37, 211, 102, 0.45); }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pulseGlow { 0%, 100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.3); } }
@media (prefers-color-scheme: dark) { .whatsapp-floating { background: rgba(15, 15, 15, 0.8); } }
@media (max-width: 600px) { .help-text { display: none; } .whatsapp-floating { background: transparent; box-shadow: none; padding: 0; animation: none; } }
/* IT HIDES CONTENT ON MY HERO SECTION FOR VIEWERS BUT VISIBLE FOR SEO >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> */
.visually-hidden {position: absolute !important;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0;}
/* ==========================
Global Scroll Reveal Animation
========================== */
.pop-up {opacity: 0; transform: translateY(20px); transition: all 0.8s ease-out;}
.pop-up.revealed {opacity: 1; transform: translateY(0);}
/* Optional: stagger delay for multiple elements in a section */
.pop-up:nth-of-type(1) { transition-delay: 0.15s; }
.pop-up:nth-of-type(2) { transition-delay: 0.3s; }
.pop-up:nth-of-type(3) { transition-delay: 0.45s; }
.pop-up:nth-of-type(4) { transition-delay: 0.6s; }
/* ===== WEB DESIGN PAGE STARTS HERE>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> ===== */
/* HERO SECTION STYLING */
.hero-pro { position: relative; width: 100%; min-height: 90vh; display: flex; align-items: center; justify-content: center; text-align: center; font-family: 'Poppins', sans-serif; color: #fff; overflow: hidden; }
.hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://images.unsplash.com/photo-1580894894513-541e068a3e2b?ixlib=rb-4.1.0&auto=format&fit=crop&q=80&w=1170'); background-size: cover; background-position: center; filter: brightness(0.5) contrast(1.1); z-index: 1; }
.hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(22,16,20,0.6); z-index: 2; }
.hero-content { position: relative; z-index: 3; max-width: 900px; padding: 0 20px; animation: fadeInUp 1s ease forwards; }
.hero-content h1 { font-size: 3rem; font-weight: 900; line-height: 1.2; margin-bottom: 20px; }
.hero-content .highlight { background: linear-gradient(90deg, #ff3c78, #e6326a, #ffc400); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; }
.hero-subtitle { font-size: 1.2rem; line-height: 1.6; margin-bottom: 30px; color: #f5f5f5; }
.hero-cta { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.btn-primary { display: inline-block; background: #ff3c78; color: #fff; font-size: 1.2rem ; font-weight: 1000; padding: 14px 36px; border-radius: 10px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 6px 25px rgba(255,60,120,0.5); }
.btn-primary:hover { background: #333; color: #fff; transform: translateY(-4px); box-shadow: 0 8px 30px rgba(255,60,120,0.6); }
.btn-secondary { display: inline-block; background: #fff; color: #ff3c78; font-size: 1.2rem ; font-weight: 1000; padding: 14px 36px; border-radius: 10px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 6px 25px rgba(255,60,120,0.5); }
.btn-secondary:hover { background: #333; color: #fff; transform: translateY(-4px); box-shadow: 0 8px 30px rgba(255,60,120,0.6); }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 900px) { .hero-content h1 { font-size: 2.5rem; } .hero-subtitle { font-size: 1.05rem; } }
@media (max-width: 600px) { .hero-content h1 { font-size: 2rem; } .hero-subtitle { font-size: 0.95rem; } .btn-primary, .btn-secondary { width: 80%; margin: 0 auto; padding: 12px 28px; font-size: 0.95rem; } }
/* ===== KEY BENEFITS - ARIDESIGN RESTYLE ===== */
.key-benefits { position: relative; padding: 70px 20px 100px; background: #fff; text-align: left; overflow: hidden; font-family: 'Poppins', sans-serif; }
.key-benefits::before { content:""; position: absolute; top: -30%; left: -20%; width: 150%; height: 150%; background: radial-gradient(circle at 25% 25%, rgba(255,60,120,0.08), transparent 70%), radial-gradient(circle at 75% 75%, rgba(255,60,120,0.1), transparent 70%); z-index: 0; animation: floatWaves 15s ease-in-out infinite; }
@keyframes floatWaves { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-20px,20px) scale(1.05); } }
.key-benefits .container { position: relative; z-index: 2; max-width: 80%; margin: 0 auto; }
.key-benefits h2 { font-size: 2rem; font-weight: 800; color: #ff3c78; margin-bottom: 15px; opacity: 0; transform: translateY(20px); animation: fadeUp 1s ease-out forwards; }
.key-benefits .sub-text { font-size: 1rem; color: #333; max-width: 1000px; margin: 0 auto 50px; line-height: 1.6; opacity: 0; transform: translateY(20px); animation: fadeUp 1.2s ease-out forwards; }
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 30px 20px; justify-items: stretch; }
.benefit { background: #fff; border-radius: 20px; padding: 50px 20px 20px; position: relative; transition: all 0.3s ease; box-shadow: 0 8px 25px rgba(255,60,120,0.15); opacity: 0; transform: translateY(30px); animation: fadeUp 0.8s ease-out forwards; }
.benefit:nth-child(1) { animation-delay: 0.3s; } .benefit:nth-child(2) { animation-delay: 0.5s; } .benefit:nth-child(3) { animation-delay: 0.7s; } .benefit:nth-child(4) { animation-delay: 0.9s; }
.benefit i { font-size: 2rem; background: #ff3c78; color: #fff; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: left; justify-content: center; position: absolute; top: 0px !important; left: 50%; transform: translateX(-50%); box-shadow: 0 8px 20px rgba(255,60,120,0.3); transition: all 0.3s ease; }
.benefit h3 { font-size: 1.3rem; font-weight: 700; color: #ff3c78; margin-top: 40px; margin-bottom: 10px; transition: color 0.3s ease, transform 0.3s ease; }
.benefit p { font-size: 0.95rem; color: #555; line-height: 1.5; max-width: 100%; margin: 0 auto; }
.benefit:hover i { transform: translateX(-50%) translateY(-10px) scale(1.1); box-shadow: 0 12px 35px rgba(255,60,120,0.45); }
.benefit:hover h3 { color: #ff3c78; transform: translateY(-3px); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width:1024px) { .key-benefits h2 { font-size: 2.2rem; } .key-benefits .sub-text { font-size: 1rem; margin-bottom: 40px; } .benefits-grid { gap: 25px 15px; } .benefit p { max-width: 100%; } }
@media (max-width:768px) { .key-benefits { padding: 60px 15px 80px; font-size: 1.3rem; text-align: center; } .benefits-grid { grid-template-columns: 1fr; gap: 40px; } .key-benefits .sub-text { font-size: 0.95rem; text-align: left; } .benefit { padding: 40px 15px 20px; } .benefit i { width: 60px; height: 60px; font-size: 1.4rem !important; } .benefit h3 { font-size: 1.3rem !important; text-align: left; } .benefit p { font-size: 0.95rem !important; text-align: left; } .benefits-grid { font-size: 0.85rem; } }
@media (max-width:480px) { .key-benefits h2 { font-size: 1.8rem; } .key-benefits .sub-text { font-size: 0.85rem; margin-bottom: 30px; } .benefit i { width: 55px; height: 55px; font-size: 1.4rem; top: -25px; } .benefit h3 { font-size: 1rem; } .benefit p { font-size: 0.85rem; } }
/* ===== SERVICES ===== */
.services { position: relative; padding: 80px 20px 100px; background: #fff; text-align: center; overflow: hidden; font-family: 'Poppins', sans-serif; box-shadow: 0 -10px 40px rgba(0,0,0,0.05); z-index: 1; }
.services::before { content: ""; position: absolute; top: -30%; left: -20%; width: 150%; height: 150%; background: radial-gradient(circle at 25% 25%, rgba(255,60,120,0.08), transparent 70%), radial-gradient(circle at 75% 75%, rgba(255,60,120,0.1), transparent 70%); z-index: 0; animation: floatGlow 12s ease-in-out infinite; opacity: 0.8; }
@keyframes floatGlow { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-15px,15px) scale(1.05); } }
.services .container { position: relative; z-index: 2; max-width: 80%; margin: 0 auto; }
.services h2 { font-size: 2rem; font-weight: 800; color: #ff3c78; margin-bottom: 15px; }
.services .sub-text { font-size: 1rem; color: #333; max-width: 800px; margin: 0 auto 50px; line-height: 1.6; }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px 20px; justify-items: center; }
.service-item { background: #fff; border-radius: 20px; padding: 50px 20px 20px; position: relative; transition: all 0.3s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.06), 0 5px 15px rgba(255,60,120,0.08); text-align: left; }
.service-item i { font-size: 2rem; color: #fff; background: #ff3c78; width: 70px; height: 70px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; top: -35px; left: 50%; transform: translateX(-50%); box-shadow: 0 8px 25px rgba(255,60,120,0.25); transition: all 0.3s ease; }
.service-item h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 10px; color: #ff3c78; margin-top: 40px; transition: color 0.3s ease, transform 0.3s ease; }
.service-item p { font-size: 0.95rem !important; color: #555; line-height: 1.5; max-width: 100%; margin: 0 auto; }
.service-item:hover { transform: translateY(-10px); box-shadow: 0 14px 40px rgba(255,60,120,0.25); }
.service-item:hover i { background: #fff; color: #ff3c78; transform: translateX(-50%) translateY(-10px) scale(1.15) rotate(10deg); }
.service-item:hover h3 { color: #ff3c78; }
.service-item:hover p { color: #333; }
@media(max-width:1024px) { .services h2 { font-size: 2.2rem; } .services .sub-text { font-size: 1rem; margin-bottom: 40px; } .service-item p { max-width: 250px; } }
@media(max-width:768px) { .services { padding: 60px 15px 80px; } .services-grid { grid-template-columns: 1fr; gap: 50px; } .service-item { padding: 40px 15px 20px; } .service-item i { width: 60px; height: 60px; font-size: 1.6rem; top: -30px; } .service-item h3 { font-size: 1.3rem !important; } .service-item p { font-size: 0.9rem; } .services .sub-text { text-align: left; } }
@media(max-width:480px) { .services h2 { font-size: 1.8rem; } .services .sub-text { font-size: 0.85rem; margin-bottom: 30px; } .service-item i { width: 55px; height: 55px; font-size: 1.4rem; top: -25px; } .service-item h3 { font-size: 1rem; } .service-item p { font-size: 0.85rem; } }
/* ===== PACKAGES + FEATURES ===== */
.packages { position:relative; padding:90px 20px 110px; background:linear-gradient(135deg,#fff 0%,#ffe6f0 100%); text-align:center; overflow:hidden; font-family:'Poppins',sans-serif; box-shadow:0 -20px 60px rgba(0,0,0,0.05); z-index:1; }
.packages::before { content:""; position:absolute; top:-30%; right:-20%; width:150%; height:150%; background:radial-gradient(circle at 25% 25%, rgba(255,60,120,0.08), transparent 70%),radial-gradient(circle at 75% 75%, rgba(255,60,120,0.12), transparent 70%); z-index:0; animation:floatGlow 12s ease-in-out infinite; }
.packages::after { content:""; position:absolute; top:0; left:0; width:100%; height:50px; background:linear-gradient(to bottom, rgba(0,0,0,0.08), transparent); z-index:1; pointer-events:none; }
@keyframes floatGlow { 0%,100% { transform:translate(0,0) scale(1); } 50% { transform:translate(-15px,15px) scale(1.05); } }
.packages .container { position:relative; z-index:2; max-width:1100px; margin:0 auto; }
.packages h2 { font-size:2.5rem; font-weight:800; color:#ff3c78; margin-bottom:15px; }
.packages .sub-text { font-size:1.15rem; color:#333; max-width:900px; margin:0 auto 50px; line-height:1.7; }
.package-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:35px; justify-items:center; }
.package { background:#fff; border-radius:20px; padding:40px 25px 25px; position:relative; transition:all 0.4s ease; box-shadow:0 12px 35px rgba(0,0,0,0.06),0 6px 20px rgba(255,60,120,0.08); border:2px solid #eee; max-width:360px; text-align:left; }
.package h3 { font-size:1.4rem; font-weight:600; color:#333; margin-bottom:12px; }
.package .price { color:#ff3c78; font-size:1.3rem; font-weight:700; margin-bottom:18px; }
.package ul { list-style:none; padding:0; margin-bottom:30px; }
.package ul li { font-size:0.95rem; color:#555; padding:6px 0; border-bottom:1px solid #eee; position:relative; padding-left:25px; }
.package ul li::before { content:"✔"; position:absolute; left:0; color:#ff3c78; font-weight:bold; }
.package .btn { display:inline-block; background:#ff3c78; color:#fff; padding:12px 30px; border-radius:10px; font-weight:600; text-decoration:none; transition:all 0.3s ease; }
.package .btn:hover { background:#333; color:#fff; }
.package:hover { transform:translateY(-12px); box-shadow:0 16px 45px rgba(255,60,120,0.25); border-color:#ff3c78; }
.package.popular { border:2px solid #ff3c78; position:relative; overflow:hidden; }
.package.popular .badge { position:absolute; top:15px; right:-40px; background:#ff3c78; color:#fff; font-weight:600; font-size:0.85rem; padding:6px 45px; transform:rotate(45deg); box-shadow:0 3px 10px rgba(0,0,0,0.2); }
.package.popular:hover { background:linear-gradient(135deg,#fff,#ffe6f0); }
/* RESPONSIVE FIXES - CLEANED */
@media (max-width: 1024px) { .packages h2 { font-size: 2.2rem; } .packages .sub-text { font-size: 1.05rem; margin-bottom: 40px; } .package ul li { font-size: 0.9rem; } }
@media (max-width: 768px) { .packages { padding: 60px 15px 70px; } .packages .sub-text { text-align: center; margin-bottom: 35px; } .package-grid { grid-template-columns: 1fr; gap: 25px; } .package { padding: 35px 20px; max-width: 100%; } .package h3 { font-size: 1.25rem; } .package .price { font-size: 1.2rem; } .package ul li { font-size: 0.88rem; padding-left: 20px; } .package.popular .badge { top: 12px; right: -30px; padding: 5px 35px; font-size: 0.78rem; } }
@media (max-width: 480px) { .packages { padding: 50px 15px 60px; } .packages h2 { font-size: 1.8rem; } .packages .sub-text { font-size: 0.95rem; } .package h3 { font-size: 1.15rem; } .package .price { font-size: 1.1rem; } .package ul li { font-size: 0.85rem; padding-left: 18px; } .package.popular .badge { top: 10px; right: -25px; padding: 4px 28px; } }
/* ===== TESTIMONIALS / SOCIAL PROOF - RESTYLE ===== */
.testimonials { background: linear-gradient(135deg, #fff 10%, #fdd8e6 100%); color: #333; text-align: center; padding: 80px 10px; overflow: hidden; position: relative; box-shadow: 0 -20px 60px rgba(0,0,0,0.05); }
.top-stars { color: #ff3c78; font-size: 1.6rem; margin-bottom: 10px; letter-spacing: 3px; animation: pulseStars 2s infinite alternate; }
@keyframes pulseStars { from { opacity: 0.8; transform: scale(1); } to { opacity: 1; transform: scale(1.1); } }
.testimonials h2 { font-size: 2rem !important; font-weight: 800; margin-bottom: 20px; position: relative; }
.testimonials h2::after { content: ""; display: block; width: 80px; height: 4px; background: #ff3c78; margin: 15px auto 0; border-radius: 2px; }
.testimonial-intro { font-size: 1rem !important; color: #333; max-width: 750px; margin: 0 auto 50px; line-height: 1.7; text-align: left; }
.testimonial-slider { position: relative; overflow: hidden; max-width: 700px; margin: 0 auto; }
.slides { display: flex; transition: transform 0.7s ease-in-out; }
.testimonial { flex: 0 0 100%; background: #fff; border-radius: 20px; padding: 60px 40px; box-shadow: 0 5px 25px rgba(0,0,0,0.1); transition: transform 0.4s ease, box-shadow 0.4s ease; }
.testimonial:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(255,60,120,0.2); }
.testimonial p { font-size: 0.95rem !important; color: #555; font-style: italic; line-height: 1.7; margin-bottom: 20px; max-width: 1000px; }
.testimonial h4 { color: #333; font-size: 0.95rem; font-weight: 600; }
.testimonial .stars { color: #ff3c78; font-size: 1.3rem; margin-top: 15px; }
.testimonial .stars .empty { color: #ccc; }
.dots { display: flex; justify-content: center; margin-top: 25px; gap: 8px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: #ccc; cursor: pointer; transition: background 0.3s, transform 0.3s; }
.dot.active { background: #ff3c78; transform: scale(1.3); }
@media (max-width: 768px) { .testimonials h2 { font-size: 2.2rem; } .testimonial { padding: 30px 15px; } }
/* TRUSTED CLENTS */
/* ===== TRUST / CLIENT LOGOS / STATS ===== */
.trust { background: linear-gradient(135deg,#fff0f5 0%,#ffe6f0 100%); background-image: repeating-radial-gradient(circle at 50% 50%,rgba(255,60,120,0.05) 0,rgba(255,60,120,0.05) 2px,transparent 2px,transparent 20px); text-align: center; padding: 70px 15px; position: relative; overflow: hidden; font-family: 'Poppins', sans-serif; color: #333; }
.trust-container { max-width: 1100px; margin: 0 auto; }
.trust h2 { font-size: 2rem; font-weight: 800; color: #ff3c78; margin-bottom: 20px; max-width: 750px; margin-left: auto; margin-right: auto; }
.trust-text { font-size: 1rem; color: #555; max-width: 750px; margin: 0 auto 40px; line-height: 1.5; text-align: left; padding-left: 15px; padding-right: 15px; }
.client-logos { display: flex; justify-content: center; align-items: center; gap: 35px; flex-wrap: wrap; margin-bottom: 40px; }
.client-logos img { max-height: 50px; filter: grayscale(100%); opacity: 0.7; transition: all 0.5s ease; }
.stats { display: flex; justify-content: center; gap: 30px !important; flex-wrap: wrap; }
.stat { background: rgba(255,255,255,0.9); backdrop-filter: blur(10px); padding: 25px 20px; border-radius: 20px; box-shadow: 0 10px 30px rgba(255,60,120,0.2); min-width: 130px; transition: transform 0.4s ease, box-shadow 0.4s ease; position: relative; }
.stat::before { content: ""; position: absolute; top: -6px; left: -6px; right: -6px; bottom: -6px; border-radius: 20px; background: linear-gradient(135deg,#ff3c78,#ff7bb3); opacity: 0.08; z-index: -1; }
.stat:hover { transform: translateY(-8px) scale(1.04); box-shadow: 0 18px 45px rgba(255,60,120,0.25); }
.stat h3 { font-size: 1.8rem; font-weight: 800; color: #ff3c78; margin-bottom: 5px; }
.stat p { font-size: 0.95rem; color: #333; font-weight: 500; }
.trust .stat, .trust .client-logos img { opacity: 0; animation: floatFadeIn 1s ease forwards; }
@keyframes floatFadeIn { 0% { opacity:0; transform:translateY(20px); } 100% { opacity:1; transform:translateY(0); } }
@media (max-width:768px) { .trust { padding: 50px 15px; } .trust h2 { font-size: 2rem !important; } .trust-text { font-size: 0.95rem; padding-left: 15px; padding-right: 15px; margin-bottom: 30px; } .client-logos { gap: 25px; } .stats { flex-direction: column; gap: 15px; } .stat { padding: 20px 15px; min-width: unset; width: 80%; margin: 0 auto; } }
@media (max-width:480px) { .trust { padding: 40px 10px; } .trust h2 { font-size: 1.6rem; } .trust-text { font-size: 0.85rem; padding-left: 10px; padding-right: 10px; margin-bottom: 25px; } .client-logos img { max-height: 40px; } .stat h3 { font-size: 1.4rem; } .stat p { font-size: 0.85rem; } }
/* ===== FAQ SECTION ===== */
.faq { background: #ffffff; color: #333; padding: 100px 15px; text-align: center; position: relative; overflow: hidden; }
/* Floating background glow for FAQ */
.faq::before { content: ""; position: absolute; top: -30%; left: -20%; width: 150%; height: 150%; background: radial-gradient(circle at 25% 25%, rgba(255,60,120,0.08), transparent 70%), radial-gradient(circle at 75% 75%, rgba(255,60,120,0.12), transparent 70%); z-index: 0; opacity: 0.6; animation: floatGlowFAQ 12s ease-in-out infinite; }
@keyframes floatGlowFAQ { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-15px, 15px) scale(1.05); } }
.faq .container { max-width: 720px; margin: 0 auto; position: relative; z-index: 2; }
.faq h2 { font-size: 2.5rem; font-weight: 800; color: #ff3c78; margin-bottom: 40px; position: relative; animation: fadeUp 1s ease forwards; }
@keyframes fadeUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
.faq-item { position: relative; margin-bottom: 15px; border-radius: 12px; background: #fff; border-left: 5px solid #ff3c78; box-shadow: 0 8px 20px rgba(0,0,0,0.05); overflow: hidden; transition: all 0.4s ease; animation: floatFAQCard 6s ease-in-out infinite; }
@keyframes floatFAQCard { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.faq-item:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(255,60,120,0.15); }
.faq-item input { display: none; }
.faq-item label { display: block; padding: 18px 20px; cursor: pointer; position: relative; font-weight: 600; }
.faq-item label::after { content: '+'; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: #ff3c78; transition: transform 0.3s ease, content 0.3s ease; }
.faq-item input:checked + label::after { content: '-'; transform: translateY(-50%) rotate(180deg); }
.faq-item p { max-height: 0; overflow: hidden; padding: 0 20px; font-size: 1rem; line-height: 1.6; color: #555; transition: max-height 0.5s ease, padding 0.5s ease; }
.faq-item input:checked ~ p { max-height: 500px; padding: 12px 20px 20px; }
/* Media Queries */
@media (max-width: 768px) { .faq { padding: 70px 15px; } .faq h2 { font-size: 2rem; } .faq-item h3 { font-size: 1.1rem; } .faq-item p { font-size: 0.95rem; } }
@media (max-width: 480px) { .faq h2 { font-size: 1.8rem; } .faq-item h3 { font-size: 1rem; } .faq-item p { font-size: 0.9rem; } }
/* ===== CTA HIGHLIGHT ===== */
.cta-highlight { background: #ff3c78; color: #fff; padding: 80px 20px; text-align: center; position: relative; overflow: hidden; border-radius: 0 50px 0 0; }
.cta-highlight::before { content: ""; position: absolute; top: -30%; left: -30%; width: 160%; height: 160%; background: radial-gradient(circle at center, rgba(255,255,255,0.15), transparent 70%); animation: ctaPulse 8s infinite alternate, ctaMove 20s linear infinite; z-index: 0; border-radius: 50%; }
.cta-highlight .container { position: relative; z-index: 2; max-width: 800px; margin: 0 auto; animation: fadeInUp 1.2s ease forwards; opacity: 0; }
.cta-highlight h2 { font-size: 2.4rem; font-weight: 800; margin-bottom: 15px; color: #fff; text-shadow: 0 2px 6px rgba(51,51,51,0.3); animation: slideInFromLeft 1s ease forwards; opacity: 0; }
.cta-highlight p { font-size: 1.05rem; margin-bottom: 30px; line-height: 1.55; color: #fff; animation: fadeIn 1s ease 0.5s forwards; opacity: 0; text-align: center !important; }
.cta-highlight .btn-cta { display: inline-block; background: #fff; color: #ff3c78; padding: 14px 32px; border-radius: 10px; font-weight: 700; font-size: 1rem; text-decoration: none; transition: all 0.3s ease, transform 0.3s ease; box-shadow: 0 5px 15px rgba(51,51,51,0.15); }
.cta-highlight .btn-cta:hover { background: #333; color: #fff; box-shadow: 0 8px 20px rgba(51,51,51,0.25); transform: translateY(-5px) scale(1.05); }
/* Responsive */
@media(max-width:900px){.cta-highlight p{text-align:left;padding:0 10px;}}
@media(max-width:768px){.cta-highlight{padding:60px 15px;}.cta-highlight h2{font-size:2rem;}.cta-highlight p{font-size:1rem;}.cta-highlight .btn-cta{padding:12px 25px;font-size:0.95rem;}}
@media(max-width:480px){.cta-highlight h2{font-size:1.7rem;}.cta-highlight p{font-size:0.9rem;padding-left:5px;padding-right:5px;}.cta-highlight .btn-cta{padding:10px 20px;font-size:0.9rem;}}
/* ===== WhatsApp Floating Button (Modern Creative Style) ===== */
.whatsapp-floating { position: fixed; bottom: 28px; right: 28px; display: flex; align-items: center; gap: 12px; background: rgba(25, 25, 25, 0.85); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50px; padding: 10px 18px 10px 22px; backdrop-filter: blur(10px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); z-index: 1200; font-family: 'Poppins', sans-serif; animation: floatY 4s ease-in-out infinite; transition: all 0.4s ease; }
.whatsapp-floating:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 10px 35px rgba(37, 211, 102, 0.3); }
.help-text { color: #fff; font-weight: 600; font-size: 1rem; letter-spacing: 0.4px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
.whatsapp-float-btn { background: linear-gradient(135deg, #25D366, #1EBE5B); border-radius: 50%; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; position: relative; box-shadow: 0 0 25px rgba(37, 211, 102, 0.3); transition: all 0.35s ease; overflow: hidden; }
.whatsapp-float-btn::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(37, 211, 102, 0.45) 20%, transparent 70%); opacity: 0; animation: pulseGlow 2.6s infinite ease-in-out; }
.whatsapp-float-btn img { z-index: 2; width: 28px; height: 28px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); }
.whatsapp-float-btn:hover { transform: scale(1.12) rotate(5deg); box-shadow: 0 0 40px rgba(37, 211, 102, 0.45); }
@keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pulseGlow { 0%, 100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.3); } }
@media (prefers-color-scheme: dark) { .whatsapp-floating { background: rgba(15, 15, 15, 0.8); } }
@media (max-width: 600px) { .help-text { display: none; } .whatsapp-floating { background: transparent; box-shadow: none; padding: 0; animation: none; } }