{"id":33,"date":"2026-06-12T10:11:16","date_gmt":"2026-06-12T10:11:16","guid":{"rendered":"https:\/\/flmdm19.in\/mramani\/?page_id=33"},"modified":"2026-06-12T10:25:56","modified_gmt":"2026-06-12T10:25:56","slug":"elementor-33","status":"publish","type":"page","link":"https:\/\/flmdm19.in\/mramani\/","title":{"rendered":"Home page"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Ramani | AI-Powered Digital Marketing Specialist<\/title>\n \n \n \n \n \n \n \n \n\n \n \n \n \n\n \n \/* ===== RESET & BASE ===== *\/\n *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\n html { scroll-behavior: smooth; font-size: 16px; }\n body {\n font-family: 'Inter', sans-serif;\n background: #fff;\n color: #1e293b;\n line-height: 1.7;\n overflow-x: hidden;\n }\n :root {\n --primary: #059669;\n --primary-dark: #047857;\n --primary-light: #d1fae5;\n --primary-bg: #ecfdf5;\n --secondary: #3b82f6;\n --secondary-light: #dbeafe;\n --secondary-bg: #eff6ff;\n --accent: #10b981;\n --dark: #0f172a;\n --text: #1e293b;\n --text-muted: #64748b;\n --border: #e2e8f0;\n --section-bg: #f8fafc;\n --card-bg: #ffffff;\n --shadow: 0 4px 24px rgba(0,0,0,0.06);\n --shadow-hover: 0 12px 40px rgba(0,0,0,0.10);\n --radius: 16px;\n --radius-sm: 10px;\n --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);\n }\n a { text-decoration: none; color: inherit; }\n img { max-width: 100%; height: auto; display: block; }\n ul { list-style: none; }\n .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }\n section { padding: 100px 0; position: relative; }\n .section-label {\n display: inline-block;\n font-size: 0.8rem;\n font-weight: 700;\n letter-spacing: 3px;\n text-transform: uppercase;\n color: var(--primary);\n background: var(--primary-light);\n padding: 6px 18px;\n border-radius: 50px;\n margin-bottom: 16px;\n }\n .section-title {\n font-family: 'Playfair Display', serif;\n font-size: 2.6rem;\n font-weight: 700;\n color: var(--dark);\n margin-bottom: 16px;\n line-height: 1.2;\n }\n .section-title span { color: var(--primary); }\n .section-subtitle {\n font-size: 1.1rem;\n color: var(--text-muted);\n max-width: 640px;\n margin: 0 auto 48px;\n text-align: center;\n }\n .text-center { text-align: center; }\n .btn {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n padding: 14px 32px;\n border-radius: 50px;\n font-weight: 600;\n font-size: 0.95rem;\n border: none;\n cursor: pointer;\n transition: var(--transition);\n letter-spacing: 0.3px;\n }\n .btn-primary {\n background: linear-gradient(135deg, var(--primary), var(--accent));\n color: #fff;\n box-shadow: 0 4px 16px rgba(5, 150, 105, 0.35);\n }\n .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(5, 150, 105, 0.45); }\n .btn-secondary {\n background: transparent;\n color: var(--dark);\n border: 2px solid var(--border);\n }\n .btn-secondary:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-3px); }\n .btn-white {\n background: #fff;\n color: var(--primary);\n box-shadow: 0 4px 16px rgba(0,0,0,0.1);\n }\n .btn-white:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,0.15); }\n\n \/* ===== ANIMATIONS ===== *\/\n @keyframes fadeInUp {\n from { opacity: 0; transform: translateY(40px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes fadeInLeft {\n from { opacity: 0; transform: translateX(-60px); }\n to { opacity: 1; transform: translateX(0); }\n }\n @keyframes fadeInRight {\n from { opacity: 0; transform: translateX(60px); }\n to { opacity: 1; transform: translateX(0); }\n }\n @keyframes scaleIn {\n from { opacity: 0; transform: scale(0.85); }\n to { opacity: 1; transform: scale(1); }\n }\n @keyframes float {\n 0%, 100% { transform: translateY(0); }\n 50% { transform: translateY(-16px); }\n }\n @keyframes pulse-glow {\n 0%, 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.4); }\n 50% { box-shadow: 0 0 0 20px rgba(5, 150, 105, 0); }\n }\n @keyframes spin-slow { to { transform: rotate(360deg); } }\n @keyframes blob {\n 0%, 100% { border-radius: 60% 40% 30% 70% \/ 60% 30% 70% 40%; }\n 50% { border-radius: 30% 60% 70% 40% \/ 50% 60% 30% 60%; }\n }\n .reveal { opacity: 0; transform: translateY(40px); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); }\n .reveal.visible { opacity: 1; transform: translateY(0); }\n .reveal-left { opacity: 0; transform: translateX(-60px); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); }\n .reveal-left.visible { opacity: 1; transform: translateX(0); }\n .reveal-right { opacity: 0; transform: translateX(60px); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); }\n .reveal-right.visible { opacity: 1; transform: translateX(0); }\n\n \/* ===== NAVBAR ===== *\/\n .navbar {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n padding: 16px 0;\n transition: var(--transition);\n background: transparent;\n }\n .navbar.scrolled {\n background: rgba(255,255,255,0.95);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n box-shadow: 0 1px 12px rgba(0,0,0,0.06);\n padding: 10px 0;\n }\n .navbar .container { display: flex; align-items: center; justify-content: space-between; }\n .logo {\n font-family: 'Playfair Display', serif;\n font-size: 1.6rem;\n font-weight: 700;\n color: var(--dark);\n }\n .logo span { color: var(--primary); }\n .nav-links { display: flex; align-items: center; gap: 32px; }\n .nav-links a {\n font-size: 0.9rem;\n font-weight: 500;\n color: var(--text);\n position: relative;\n transition: var(--transition);\n }\n .nav-links a::after {\n content: '';\n position: absolute;\n bottom: -4px;\n left: 0;\n width: 0;\n height: 2px;\n background: var(--primary);\n transition: var(--transition);\n }\n .nav-links a:hover { color: var(--primary); }\n .nav-links a:hover::after { width: 100%; }\n .nav-cta {\n background: linear-gradient(135deg, var(--primary), var(--accent));\n color: #fff !important;\n padding: 10px 24px;\n border-radius: 50px;\n font-weight: 600;\n }\n .nav-cta::after { display: none !important; }\n .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(5,150,105,0.35); }\n .hamburger {\n display: none;\n flex-direction: column;\n gap: 5px;\n cursor: pointer;\n padding: 4px;\n }\n .hamburger span {\n width: 26px;\n height: 2.5px;\n background: var(--dark);\n border-radius: 2px;\n transition: var(--transition);\n }\n .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }\n .hamburger.active span:nth-child(2) { opacity: 0; }\n .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }\n\n \/* ===== HERO ===== *\/\n .hero {\n min-height: 100vh;\n display: flex;\n align-items: center;\n position: relative;\n overflow: hidden;\n background: linear-gradient(135deg, #f0fdf4 0%, #eff6ff 50%, #f8fafc 100%);\n }\n .hero-bg-shapes {\n position: absolute;\n inset: 0;\n overflow: hidden;\n pointer-events: none;\n }\n .hero-bg-shapes .shape {\n position: absolute;\n border-radius: 50%;\n opacity: 0.15;\n }\n .hero-bg-shapes .shape:nth-child(1) {\n width: 500px; height: 500px;\n background: var(--primary);\n top: -120px; right: -120px;\n animation: blob 8s ease-in-out infinite;\n }\n .hero-bg-shapes .shape:nth-child(2) {\n width: 350px; height: 350px;\n background: var(--secondary);\n bottom: -80px; left: -80px;\n animation: blob 10s ease-in-out infinite reverse;\n }\n .hero-bg-shapes .shape:nth-child(3) {\n width: 200px; height: 200px;\n background: var(--accent);\n top: 30%; left: 10%;\n animation: float 6s ease-in-out infinite;\n }\n .hero .container {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 60px;\n align-items: center;\n position: relative;\n z-index: 2;\n }\n .hero-content { animation: fadeInUp 1s ease-out; }\n .hero-badge {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background: rgba(5,150,105,0.1);\n border: 1px solid rgba(5,150,105,0.2);\n padding: 8px 20px;\n border-radius: 50px;\n font-size: 0.85rem;\n font-weight: 500;\n color: var(--primary);\n margin-bottom: 24px;\n }\n .hero-badge i { font-size: 0.75rem; }\n .hero h1 {\n font-family: 'Playfair Display', serif;\n font-size: 3.8rem;\n font-weight: 700;\n line-height: 1.15;\n color: var(--dark);\n margin-bottom: 20px;\n }\n .hero h1 span {\n background: linear-gradient(135deg, var(--primary), var(--secondary));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n .hero p {\n font-size: 1.15rem;\n color: var(--text-muted);\n max-width: 520px;\n margin-bottom: 36px;\n line-height: 1.8;\n }\n .hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; }\n .hero-image {\n animation: fadeInUp 1s ease-out 0.2s both;\n position: relative;\n }\n .hero-image-wrapper {\n position: relative;\n border-radius: 24px;\n overflow: hidden;\n box-shadow: 0 24px 64px rgba(0,0,0,0.1);\n }\n .hero-image-wrapper img {\n width: 100%;\n height: 520px;\n object-fit: cover;\n transition: transform 0.6s ease;\n }\n .hero-image-wrapper:hover img { transform: scale(1.03); }\n .hero-image-wrapper::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, rgba(5,150,105,0.1), rgba(59,130,246,0.1));\n }\n .hero-experience {\n position: absolute;\n bottom: -20px;\n right: -20px;\n background: #fff;\n padding: 20px 28px;\n border-radius: 16px;\n box-shadow: 0 12px 40px rgba(0,0,0,0.1);\n display: flex;\n align-items: center;\n gap: 14px;\n animation: float 4s ease-in-out infinite;\n }\n .hero-experience .number {\n font-size: 2.2rem;\n font-weight: 800;\n color: var(--primary);\n line-height: 1;\n }\n .hero-experience .label {\n font-size: 0.8rem;\n color: var(--text-muted);\n line-height: 1.3;\n }\n .hero-stats {\n display: flex;\n gap: 40px;\n margin-top: 40px;\n padding-top: 32px;\n border-top: 1px solid var(--border);\n }\n .hero-stats .stat { text-align: center; }\n .hero-stats .stat .num {\n font-size: 1.8rem;\n font-weight: 800;\n color: var(--dark);\n }\n .hero-stats .stat .lbl {\n font-size: 0.8rem;\n color: var(--text-muted);\n font-weight: 500;\n }\n\n \/* ===== ABOUT ===== *\/\n .about { background: #fff; }\n .about-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 60px;\n align-items: center;\n }\n .about-image {\n position: relative;\n border-radius: 24px;\n overflow: hidden;\n box-shadow: 0 20px 60px rgba(0,0,0,0.08);\n }\n .about-image img {\n width: 100%;\n height: 500px;\n object-fit: cover;\n }\n .about-image::after {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, rgba(5,150,105,0.08), rgba(59,130,246,0.08));\n }\n .about-experience-badge {\n position: absolute;\n bottom: -16px;\n left: -16px;\n background: linear-gradient(135deg, var(--primary), var(--accent));\n color: #fff;\n width: 100px;\n height: 100px;\n border-radius: 50%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n box-shadow: 0 8px 28px rgba(5,150,105,0.35);\n line-height: 1.2;\n }\n .about-experience-badge .num { font-size: 1.8rem; }\n .about-experience-badge .lbl { font-size: 0.7rem; opacity: 0.9; }\n .about-content h2 { margin-bottom: 20px; }\n .about-content p { color: var(--text-muted); margin-bottom: 16px; font-size: 1.02rem; }\n .about-details { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0; }\n .about-details li {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 0.95rem;\n color: var(--text);\n }\n .about-details li i { color: var(--primary); font-size: 0.85rem; }\n\n \/* ===== SKILLS ===== *\/\n .skills { background: var(--section-bg); }\n .skills-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 28px;\n }\n .skill-card {\n background: var(--card-bg);\n border-radius: var(--radius);\n padding: 28px;\n box-shadow: var(--shadow);\n transition: var(--transition);\n border: 1px solid var(--border);\n }\n .skill-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: var(--primary-light); }\n .skill-card .icon {\n width: 52px;\n height: 52px;\n border-radius: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.3rem;\n margin-bottom: 16px;\n background: var(--primary-light);\n color: var(--primary);\n }\n .skill-card h4 { font-size: 1.05rem; font-weight: 600; margin-bottom: 6px; }\n .skill-card p { font-size: 0.9rem; color: var(--text-muted); }\n .skill-progress { margin-top: 16px; }\n .skill-progress .bar {\n height: 6px;\n background: #e2e8f0;\n border-radius: 10px;\n overflow: hidden;\n }\n .skill-progress .bar .fill {\n height: 100%;\n background: linear-gradient(90deg, var(--primary), var(--accent));\n border-radius: 10px;\n width: 0;\n transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);\n }\n .skill-progress .label {\n display: flex;\n justify-content: space-between;\n font-size: 0.85rem;\n font-weight: 500;\n margin-bottom: 6px;\n }\n\n \/* ===== SERVICES ===== *\/\n .services { background: #fff; }\n .services-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 28px;\n }\n .service-card {\n background: var(--card-bg);\n border-radius: var(--radius);\n padding: 36px 28px;\n box-shadow: var(--shadow);\n border: 1px solid var(--border);\n transition: var(--transition);\n position: relative;\n overflow: hidden;\n cursor: pointer;\n }\n .service-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 4px;\n background: linear-gradient(90deg, var(--primary), var(--secondary));\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.5s ease;\n }\n .service-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); }\n .service-card:hover::before { transform: scaleX(1); }\n .service-card .icon {\n width: 60px;\n height: 60px;\n border-radius: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.5rem;\n margin-bottom: 20px;\n transition: var(--transition);\n }\n .service-card:nth-child(1) .icon { background: var(--primary-light); color: var(--primary); }\n .service-card:nth-child(2) .icon { background: var(--secondary-light); color: var(--secondary); }\n .service-card:nth-child(3) .icon { background: #fef3c7; color: #d97706; }\n .service-card:nth-child(4) .icon { background: #fce7f3; color: #db2777; }\n .service-card:nth-child(5) .icon { background: #e0e7ff; color: #4f46e5; }\n .service-card:nth-child(6) .icon { background: #d1fae5; color: #059669; }\n .service-card h4 { font-size: 1.2rem; font-weight: 600; margin-bottom: 10px; }\n .service-card p { font-size: 0.92rem; color: var(--text-muted); line-height: 1.6; }\n .service-card .learn-more {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n margin-top: 16px;\n font-weight: 600;\n font-size: 0.9rem;\n color: var(--primary);\n transition: var(--transition);\n }\n .service-card .learn-more i { font-size: 0.75rem; transition: var(--transition); }\n .service-card:hover .learn-more i { transform: translateX(4px); }\n\n \/* ===== PORTFOLIO ===== *\/\n .portfolio { background: var(--section-bg); }\n .portfolio-filters {\n display: flex;\n justify-content: center;\n gap: 12px;\n margin-bottom: 40px;\n flex-wrap: wrap;\n }\n .portfolio-filters button {\n padding: 8px 22px;\n border-radius: 50px;\n border: 1px solid var(--border);\n background: #fff;\n font-size: 0.85rem;\n font-weight: 500;\n cursor: pointer;\n transition: var(--transition);\n color: var(--text-muted);\n }\n .portfolio-filters button.active, .portfolio-filters button:hover {\n background: var(--primary);\n color: #fff;\n border-color: var(--primary);\n }\n .portfolio-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 24px;\n }\n .portfolio-item {\n border-radius: var(--radius);\n overflow: hidden;\n position: relative;\n box-shadow: var(--shadow);\n cursor: pointer;\n aspect-ratio: 4 \/ 3;\n }\n .portfolio-item img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.6s ease;\n }\n .portfolio-item:hover img { transform: scale(1.08); }\n .portfolio-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n padding: 24px;\n opacity: 0;\n transition: var(--transition);\n }\n .portfolio-item:hover .portfolio-overlay { opacity: 1; }\n .portfolio-overlay h4 { color: #fff; font-size: 1.1rem; font-weight: 600; }\n .portfolio-overlay p { color: rgba(255,255,255,0.8); font-size: 0.85rem; }\n .portfolio-overlay .tags { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }\n .portfolio-overlay .tags span {\n background: rgba(255,255,255,0.2);\n color: #fff;\n padding: 2px 12px;\n border-radius: 50px;\n font-size: 0.7rem;\n font-weight: 500;\n backdrop-filter: blur(4px);\n }\n\n \/* ===== CASE STUDIES ===== *\/\n .case-studies { background: #fff; }\n .case-studies-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 28px;\n }\n .case-card {\n background: var(--card-bg);\n border-radius: var(--radius);\n overflow: hidden;\n box-shadow: var(--shadow);\n border: 1px solid var(--border);\n transition: var(--transition);\n display: flex;\n flex-direction: column;\n }\n .case-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }\n .case-card img {\n width: 100%;\n height: 220px;\n object-fit: cover;\n }\n .case-card-body { padding: 28px; flex: 1; display: flex; flex-direction: column; }\n .case-card-body .badge {\n align-self: flex-start;\n background: var(--primary-light);\n color: var(--primary);\n font-size: 0.75rem;\n font-weight: 600;\n padding: 4px 14px;\n border-radius: 50px;\n margin-bottom: 12px;\n }\n .case-card-body h4 { font-size: 1.15rem; font-weight: 600; margin-bottom: 8px; }\n .case-card-body p { font-size: 0.9rem; color: var(--text-muted); flex: 1; }\n .case-results {\n display: flex;\n gap: 20px;\n margin-top: 16px;\n padding-top: 16px;\n border-top: 1px solid var(--border);\n }\n .case-results .result { text-align: center; }\n .case-results .result .val {\n font-size: 1.3rem;\n font-weight: 700;\n color: var(--primary);\n }\n .case-results .result .lbl { font-size: 0.75rem; color: var(--text-muted); }\n\n \/* ===== TESTIMONIALS ===== *\/\n .testimonials { background: var(--section-bg); }\n .testimonial-slider {\n max-width: 800px;\n margin: 0 auto;\n position: relative;\n overflow: hidden;\n }\n .testimonial-track {\n display: flex;\n transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n }\n .testimonial-slide {\n min-width: 100%;\n padding: 0 12px;\n }\n .testimonial-card {\n background: #fff;\n border-radius: var(--radius);\n padding: 40px;\n box-shadow: var(--shadow);\n border: 1px solid var(--border);\n text-align: center;\n }\n .testimonial-card .stars {\n color: #f59e0b;\n font-size: 1rem;\n margin-bottom: 16px;\n }\n .testimonial-card .quote {\n font-size: 1.05rem;\n color: var(--text);\n line-height: 1.8;\n font-style: italic;\n margin-bottom: 24px;\n }\n .testimonial-card .author {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 14px;\n }\n .testimonial-card .author img {\n width: 52px;\n height: 52px;\n border-radius: 50%;\n object-fit: cover;\n }\n .testimonial-card .author .info h5 { font-weight: 600; font-size: 1rem; }\n .testimonial-card .author .info span { font-size: 0.82rem; color: var(--text-muted); }\n .testimonial-nav {\n display: flex;\n justify-content: center;\n gap: 12px;\n margin-top: 32px;\n }\n .testimonial-nav button {\n width: 44px;\n height: 44px;\n border-radius: 50%;\n border: 1px solid var(--border);\n background: #fff;\n cursor: pointer;\n transition: var(--transition);\n font-size: 1rem;\n color: var(--text);\n }\n .testimonial-nav button:hover { background: var(--primary); color: #fff; border-color: var(--primary); }\n .testimonial-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }\n .testimonial-dots button {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n border: none;\n background: var(--border);\n cursor: pointer;\n transition: var(--transition);\n }\n .testimonial-dots button.active { background: var(--primary); width: 28px; border-radius: 10px; }\n\n \/* ===== CERTIFICATIONS ===== *\/\n .certifications { background: #fff; }\n .certs-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 28px;\n }\n .cert-card {\n background: var(--card-bg);\n border: 1px solid var(--border);\n border-radius: var(--radius);\n padding: 28px 20px;\n text-align: center;\n transition: var(--transition);\n box-shadow: var(--shadow);\n }\n .cert-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); border-color: var(--primary-light); }\n .cert-card .icon {\n font-size: 2.4rem;\n color: var(--primary);\n margin-bottom: 14px;\n }\n .cert-card h5 { font-weight: 600; font-size: 0.95rem; margin-bottom: 6px; }\n .cert-card p { font-size: 0.8rem; color: var(--text-muted); }\n\n \/* ===== BLOG ===== *\/\n .blog { background: var(--section-bg); }\n .blog-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 28px;\n }\n .blog-card {\n background: #fff;\n border-radius: var(--radius);\n overflow: hidden;\n box-shadow: var(--shadow);\n border: 1px solid var(--border);\n transition: var(--transition);\n }\n .blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }\n .blog-card img {\n width: 100%;\n height: 200px;\n object-fit: cover;\n }\n .blog-card-body { padding: 24px; }\n .blog-card-body .date {\n font-size: 0.78rem;\n color: var(--text-muted);\n font-weight: 500;\n margin-bottom: 8px;\n display: block;\n }\n .blog-card-body h4 {\n font-size: 1.05rem;\n font-weight: 600;\n margin-bottom: 8px;\n line-height: 1.4;\n }\n .blog-card-body p { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 14px; }\n .blog-card-body .read-more {\n font-weight: 600;\n font-size: 0.88rem;\n color: var(--primary);\n display: inline-flex;\n align-items: center;\n gap: 6px;\n }\n .blog-card-body .read-more i { transition: var(--transition); font-size: 0.75rem; }\n .blog-card-body .read-more:hover i { transform: translateX(4px); }\n\n \/* ===== CONTACT ===== *\/\n .contact { background: #fff; }\n .contact-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 48px;\n }\n .contact-info h3 {\n font-family: 'Playfair Display', serif;\n font-size: 1.8rem;\n margin-bottom: 16px;\n }\n .contact-info > p { color: var(--text-muted); margin-bottom: 32px; }\n .contact-details { display: flex; flex-direction: column; gap: 20px; }\n .contact-details .item {\n display: flex;\n align-items: flex-start;\n gap: 16px;\n }\n .contact-details .item .icon {\n width: 48px;\n height: 48px;\n border-radius: 14px;\n background: var(--primary-light);\n color: var(--primary);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.1rem;\n flex-shrink: 0;\n }\n .contact-details .item h5 { font-weight: 600; font-size: 0.95rem; }\n .contact-details .item p { font-size: 0.9rem; color: var(--text-muted); }\n .contact-social { display: flex; gap: 12px; margin-top: 28px; }\n .contact-social a {\n width: 44px;\n height: 44px;\n border-radius: 50%;\n border: 1px solid var(--border);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--text-muted);\n transition: var(--transition);\n font-size: 1.1rem;\n }\n .contact-social a:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-3px); }\n .contact-form {\n background: var(--section-bg);\n padding: 40px;\n border-radius: var(--radius);\n border: 1px solid var(--border);\n }\n .contact-form .form-group { margin-bottom: 20px; }\n .contact-form label {\n display: block;\n font-size: 0.85rem;\n font-weight: 600;\n margin-bottom: 6px;\n color: var(--text);\n }\n .contact-form input,\n .contact-form textarea,\n .contact-form select {\n width: 100%;\n padding: 14px 16px;\n border: 1px solid var(--border);\n border-radius: var(--radius-sm);\n font-family: 'Inter', sans-serif;\n font-size: 0.95rem;\n transition: var(--transition);\n background: #fff;\n outline: none;\n }\n .contact-form input:focus,\n .contact-form textarea:focus,\n .contact-form select:focus {\n border-color: var(--primary);\n box-shadow: 0 0 0 3px rgba(5,150,105,0.1);\n }\n .contact-form textarea { min-height: 130px; resize: vertical; }\n .contact-form .btn { width: 100%; justify-content: center; font-size: 1rem; padding: 16px; }\n\n \/* ===== FOOTER ===== *\/\n .footer {\n background: var(--dark);\n color: rgba(255,255,255,0.8);\n padding: 60px 0 24px;\n }\n .footer-grid {\n display: grid;\n grid-template-columns: 2fr 1fr 1fr 1fr;\n gap: 40px;\n margin-bottom: 40px;\n }\n .footer-brand .logo { color: #fff; }\n .footer-brand p { font-size: 0.9rem; margin-top: 14px; max-width: 320px; line-height: 1.7; }\n .footer h5 { color: #fff; font-weight: 600; font-size: 1rem; margin-bottom: 16px; }\n .footer-links li { margin-bottom: 10px; }\n .footer-links a {\n font-size: 0.9rem;\n transition: var(--transition);\n }\n .footer-links a:hover { color: var(--accent); padding-left: 4px; }\n .footer-bottom {\n padding-top: 24px;\n border-top: 1px solid rgba(255,255,255,0.08);\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 0.85rem;\n }\n\n \/* ===== WHATSAPP FLOATING ===== *\/\n .whatsapp-float {\n position: fixed;\n bottom: 28px;\n right: 28px;\n z-index: 999;\n width: 56px;\n height: 56px;\n background: #25d366;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-size: 1.6rem;\n box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);\n transition: var(--transition);\n animation: pulse-glow 2s infinite;\n }\n .whatsapp-float:hover { transform: scale(1.1); color: #fff; }\n\n \/* ===== BACK TO TOP ===== *\/\n .back-to-top {\n position: fixed;\n bottom: 96px;\n right: 28px;\n z-index: 999;\n width: 44px;\n height: 44px;\n background: var(--primary);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-size: 1rem;\n box-shadow: 0 4px 16px rgba(5,150,105,0.3);\n opacity: 0;\n visibility: hidden;\n transform: translateY(20px);\n transition: var(--transition);\n border: none;\n cursor: pointer;\n }\n .back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }\n .back-to-top:hover { background: var(--primary-dark); transform: translateY(-4px); color: #fff; }\n\n \/* ===== RESPONSIVE ===== *\/\n @media (max-width: 1024px) {\n .hero h1 { font-size: 3rem; }\n .hero .container { gap: 40px; }\n .services-grid { grid-template-columns: repeat(2, 1fr); }\n .skills-grid { grid-template-columns: repeat(2, 1fr); }\n .portfolio-grid { grid-template-columns: repeat(2, 1fr); }\n .certs-grid { grid-template-columns: repeat(2, 1fr); }\n .blog-grid { grid-template-columns: repeat(2, 1fr); }\n .footer-grid { grid-template-columns: repeat(2, 1fr); }\n }\n @media (max-width: 768px) {\n .nav-links {\n position: fixed;\n top: 0;\n right: -320px;\n width: 300px;\n height: 100vh;\n background: #fff;\n flex-direction: column;\n padding: 80px 40px;\n gap: 24px;\n box-shadow: -8px 0 30px rgba(0,0,0,0.08);\n transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n z-index: 1001;\n }\n .nav-links.open { right: 0; }\n .hamburger { display: flex; z-index: 1002; }\n .hero .container { grid-template-columns: 1fr; gap: 32px; }\n .hero h1 { font-size: 2.4rem; }\n .hero-image-wrapper img { height: 360px; }\n .hero-experience { bottom: -16px; right: 0; padding: 14px 20px; }\n .hero-experience .number { font-size: 1.6rem; }\n .hero-stats { gap: 24px; }\n .about-grid { grid-template-columns: 1fr; gap: 36px; }\n .about-image img { height: 360px; }\n .section-title { font-size: 2rem; }\n .services-grid { grid-template-columns: 1fr; }\n .skills-grid { grid-template-columns: 1fr; }\n .portfolio-grid { grid-template-columns: 1fr; }\n .case-studies-grid { grid-template-columns: 1fr; }\n .certs-grid { grid-template-columns: repeat(2, 1fr); }\n .blog-grid { grid-template-columns: 1fr; }\n .contact-grid { grid-template-columns: 1fr; }\n .contact-form { padding: 28px; }\n .footer-grid { grid-template-columns: 1fr; gap: 28px; }\n .footer-bottom { flex-direction: column; gap: 8px; text-align: center; }\n .about-details { grid-template-columns: 1fr; }\n .hero-stats .stat .num { font-size: 1.4rem; }\n section { padding: 64px 0; }\n }\n @media (max-width: 480px) {\n .hero h1 { font-size: 2rem; }\n .hero p { font-size: 1rem; }\n .hero-buttons { flex-direction: column; }\n .hero-buttons .btn { width: 100%; justify-content: center; }\n .section-title { font-size: 1.7rem; }\n .certs-grid { grid-template-columns: 1fr; }\n }\n \n\n\n <!-- ===== NAVBAR ===== -->\n <nav class=\"navbar\" id=\"navbar\">\n <div class=\"container\">\n <a href=\"#\" class=\"logo\">Ramani<span>.<\/span><\/a>\n <ul class=\"nav-links\" id=\"navLinks\">\n <li><a href=\"#about\">About<\/a><\/li>\n <li><a href=\"#skills\">Skills<\/a><\/li>\n <li><a href=\"#services\">Services<\/a><\/li>\n <li><a href=\"#portfolio\">Work<\/a><\/li>\n <li><a href=\"#contact\" class=\"nav-cta\">Let's Talk<\/a><\/li>\n <\/ul>\n <div class=\"hamburger\" id=\"hamburger\">\n <span><\/span><span><\/span><span><\/span>\n <\/div>\n <\/div>\n <\/nav>\n\n <!-- ===== HERO ===== -->\n <section class=\"hero\" id=\"hero\">\n <div class=\"hero-bg-shapes\">\n <div class=\"shape\"><\/div>\n <div class=\"shape\"><\/div>\n <div class=\"shape\"><\/div>\n <\/div>\n <div class=\"container\">\n <div class=\"hero-content\">\n <div class=\"hero-badge\">\n <i class=\"fas fa-sparkles\"><\/i> AI-Powered Marketing\n <\/div>\n <h1>Turning Data Into <span>Digital Growth<\/span><\/h1>\n <p>I'm Ramani \u2014 an AI-driven digital marketing specialist who builds data-backed strategies that grow brands, engage audiences, and deliver measurable ROI.<\/p>\n <div class=\"hero-buttons\">\n <a href=\"#portfolio\" class=\"btn btn-primary\"><i class=\"fas fa-briefcase\"><\/i> View My Work<\/a>\n <a href=\"#contact\" class=\"btn btn-secondary\"><i class=\"fas fa-paper-plane\"><\/i> Let's Connect<\/a>\n <\/div>\n <div class=\"hero-stats\">\n <div class=\"stat\"><div class=\"num\" data-count=\"25\">0<\/div><div class=\"lbl\">Projects Done<\/div><\/div>\n <div class=\"stat\"><div class=\"num\" data-count=\"12\">0<\/div><div class=\"lbl\">Happy Clients<\/div><\/div>\n <div class=\"stat\"><div class=\"num\" data-count=\"5\">0<\/div><div class=\"lbl\">Avg ROAS<\/div><\/div>\n <\/div>\n <\/div>\n <div class=\"hero-image\">\n <div class=\"hero-image-wrapper\">\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/3183197\/pexels-photo-3183197.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\" alt=\"Digital marketing team strategy\" loading=\"lazy\" \/>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ===== ABOUT ===== -->\n <section class=\"about\" id=\"about\">\n <div class=\"container\">\n <div class=\"about-grid\">\n <div class=\"about-image reveal-left\">\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/3861972\/pexels-photo-3861972.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\" alt=\"Ramani working on digital strategy\" loading=\"lazy\" \/>\n <div class=\"about-experience-badge\">\n <span class=\"num\">100%<\/span>\n <span class=\"lbl\">Client<br \/>Satisfaction<\/span>\n <\/div>\n <\/div>\n <div class=\"about-content reveal-right\">\n <span class=\"section-label\">About Me<\/span>\n <h2 class=\"section-title\">AI Meets <span>Marketing Expertise<\/span><\/h2>\n <p>I'm a digital marketing specialist who combines artificial intelligence with proven marketing methodologies to deliver campaigns that convert. My approach is rooted in data \u2014 from audience insights to performance analytics.<\/p>\n <p>Whether you're a startup looking for traction or an established brand aiming to scale, I bring the strategy, tools, and execution to turn your digital presence into a growth engine.<\/p>\n <ul class=\"about-details\">\n <li><i class=\"fas fa-check-circle\"><\/i> Data-Driven Campaigns<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> AI-Optimized SEO<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Social Media Growth<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Conversion Rate Optimization<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Performance Analytics<\/li>\n <li><i class=\"fas fa-check-circle\"><\/i> Content Strategy<\/li>\n <\/ul>\n <a href=\"#contact\" class=\"btn btn-primary\"><i class=\"fas fa-download\"><\/i> Download Resume<\/a>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ===== SKILLS ===== -->\n <section class=\"skills\" id=\"skills\">\n <div class=\"container text-center\">\n <span class=\"section-label\">Expertise<\/span>\n <h2 class=\"section-title\">Tools & <span>Skills<\/span><\/h2>\n <p class=\"section-subtitle\">From analytics to creative execution, these are the capabilities I bring to every project.<\/p>\n <\/div>\n <div class=\"container\">\n <div class=\"skills-grid\" id=\"skillsGrid\">\n <div class=\"skill-card reveal\">\n <div class=\"icon\"><i class=\"fas fa-chart-line\"><\/i><\/div>\n <h4>SEO & Analytics<\/h4>\n <p>Search optimization, keyword strategy, and data-driven reporting.<\/p>\n <div class=\"skill-progress\"><div class=\"label\"><span>Expertise<\/span><span>95%<\/span><\/div><div class=\"bar\"><div class=\"fill\" data-width=\"95\"><\/div><\/div><\/div>\n <\/div>\n <div class=\"skill-card reveal\">\n <div class=\"icon\"><i class=\"fas fa-hashtag\"><\/i><\/div>\n <h4>Social Media Mgmt<\/h4>\n <p>Content calendars, community growth, and paid social campaigns.<\/p>\n <div class=\"skill-progress\"><div class=\"label\"><span>Expertise<\/span><span>92%<\/span><\/div><div class=\"bar\"><div class=\"fill\" data-width=\"92\"><\/div><\/div><\/div>\n <\/div>\n <div class=\"skill-card reveal\">\n <div class=\"icon\"><i class=\"fas fa-robot\"><\/i><\/div>\n <h4>AI Marketing Tools<\/h4>\n <p>LLM-based content, predictive analytics, and marketing automation.<\/p>\n <div class=\"skill-progress\"><div class=\"label\"><span>Expertise<\/span><span>90%<\/span><\/div><div class=\"bar\"><div class=\"fill\" data-width=\"90\"><\/div><\/div><\/div>\n <\/div>\n <div class=\"skill-card reveal\">\n <div class=\"icon\"><i class=\"fas fa-ad\"><\/i><\/div>\n <h4>Paid Advertising<\/h4>\n <p>Google Ads, Meta Ads, LinkedIn campaigns with ROAS focus.<\/p>\n <div class=\"skill-progress\"><div class=\"label\"><span>Expertise<\/span><span>88%<\/span><\/div><div class=\"bar\"><div class=\"fill\" data-width=\"88\"><\/div><\/div><\/div>\n <\/div>\n <div class=\"skill-card reveal\">\n <div class=\"icon\"><i class=\"fas fa-envelope-open-text\"><\/i><\/div>\n <h4>Email Marketing<\/h4>\n <p>Automated sequences, segmentation, and A\/B testing.<\/p>\n <div class=\"skill-progress\"><div class=\"label\"><span>Expertise<\/span><span>85%<\/span><\/div><div class=\"bar\"><div class=\"fill\" data-width=\"85\"><\/div><\/div><\/div>\n <\/div>\n <div class=\"skill-card reveal\">\n <div class=\"icon\"><i class=\"fas fa-palette\"><\/i><\/div>\n <h4>Content & Branding<\/h4>\n <p>Copywriting, visual identity, and brand strategy development.<\/p>\n <div class=\"skill-progress\"><div class=\"label\"><span>Expertise<\/span><span>87%<\/span><\/div><div class=\"bar\"><div class=\"fill\" data-width=\"87\"><\/div><\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ===== SERVICES ===== -->\n <section class=\"services\" id=\"services\">\n <div class=\"container text-center\">\n <span class=\"section-label\">What I Do<\/span>\n <h2 class=\"section-title\">Services <span>& Solutions<\/span><\/h2>\n <p class=\"section-subtitle\">End-to-end digital marketing services powered by AI and built for results.<\/p>\n <\/div>\n <div class=\"container\">\n <div class=\"services-grid\">\n <div class=\"service-card reveal\">\n <div class=\"icon\"><i class=\"fas fa-search\"><\/i><\/div>\n <h4>SEO Optimization<\/h4>\n <p>On-page, off-page, and technical SEO with AI-powered keyword research to dominate search rankings.<\/p>\n <span class=\"learn-more\">Learn More <i class=\"fas fa-arrow-right\"><\/i><\/span>\n <\/div>\n <div class=\"service-card reveal\">\n <div class=\"icon\"><i class=\"fas fa-share-nodes\"><\/i><\/div>\n <h4>Social Media Marketing<\/h4>\n <p>Organic growth and paid campaigns across Instagram, LinkedIn, Twitter, and Facebook.<\/p>\n <span class=\"learn-more\">Learn More <i class=\"fas fa-arrow-right\"><\/i><\/span>\n <\/div>\n <div class=\"service-card reveal\">\n <div class=\"icon\"><i class=\"fas fa-bullseye\"><\/i><\/div>\n <h4>Performance Marketing<\/h4>\n <p>Google Ads, Meta Ads, and retargeting campaigns optimized for maximum ROAS.<\/p>\n <span class=\"learn-more\">Learn More <i class=\"fas fa-arrow-right\"><\/i><\/span>\n <\/div>\n <div class=\"service-card reveal\">\n <div class=\"icon\"><i class=\"fas fa-pen-fancy\"><\/i><\/div>\n <h4>Content Strategy<\/h4>\n <p>AI-assisted content creation, blog writing, video scripts, and brand storytelling.<\/p>\n <span class=\"learn-more\">Learn More <i class=\"fas fa-arrow-right\"><\/i><\/span>\n <\/div>\n <div class=\"service-card reveal\">\n <div class=\"icon\"><i class=\"fas fa-envelopes-bulk\"><\/i><\/div>\n <h4>Email Automation<\/h4>\n <p>Drip campaigns, newsletters, and personalized sequences that nurture and convert.<\/p>\n <span class=\"learn-more\">Learn More <i class=\"fas fa-arrow-right\"><\/i><\/span>\n <\/div>\n <div class=\"service-card reveal\">\n <div class=\"icon\"><i class=\"fas fa-chart-pie\"><\/i><\/div>\n <h4>Analytics & Reporting<\/h4>\n <p>Custom dashboards, conversion tracking, and actionable insights to scale your growth.<\/p>\n <span class=\"learn-more\">Learn More <i class=\"fas fa-arrow-right\"><\/i><\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ===== PORTFOLIO ===== -->\n <section class=\"portfolio\" id=\"portfolio\">\n <div class=\"container text-center\">\n <span class=\"section-label\">My Work<\/span>\n <h2 class=\"section-title\">Featured <span>Projects<\/span><\/h2>\n <p class=\"section-subtitle\">Real campaigns that delivered real results for real brands.<\/p>\n <\/div>\n <div class=\"container\">\n <div class=\"portfolio-filters\">\n <button class=\"active\" data-filter=\"all\">All<\/button>\n <button data-filter=\"seo\">SEO<\/button>\n <button data-filter=\"social\">Social Media<\/button>\n <button data-filter=\"ads\">Paid Ads<\/button>\n <\/div>\n <div class=\"portfolio-grid\" id=\"portfolioGrid\">\n <div class=\"portfolio-item\" data-category=\"seo\">\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/669615\/pexels-photo-669615.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\" alt=\"SEO analytics dashboard\" loading=\"lazy\" \/>\n <div class=\"portfolio-overlay\">\n <div class=\"tags\"><span>SEO<\/span><span>Analytics<\/span><\/div>\n <h4>E-Commerce SEO Overhaul<\/h4>\n <p>280% organic traffic increase in 6 months<\/p>\n <\/div>\n <\/div>\n <div class=\"portfolio-item\" data-category=\"social\">\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/267350\/pexels-photo-267350.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\" alt=\"Social media strategy\" loading=\"lazy\" \/>\n <div class=\"portfolio-overlay\">\n <div class=\"tags\"><span>Social Media<\/span><span>Growth<\/span><\/div>\n <h4>Instagram Brand Launch<\/h4>\n <p>50K followers in 90 days organically<\/p>\n <\/div>\n <\/div>\n <div class=\"portfolio-item\" data-category=\"ads\">\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/5380664\/pexels-photo-5380664.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\" alt=\"Digital marketing campaign\" loading=\"lazy\" \/>\n <div class=\"portfolio-overlay\">\n <div class=\"tags\"><span>Paid Ads<\/span><span>Facebook<\/span><\/div>\n <h4>Meta Ads ROAS Campaign<\/h4>\n <p>4.5x return on ad spend achieved<\/p>\n <\/div>\n <\/div>\n <div class=\"portfolio-item\" data-category=\"seo\">\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/590022\/pexels-photo-590022.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\" alt=\"SEO content strategy\" loading=\"lazy\" \/>\n <div class=\"portfolio-overlay\">\n <div class=\"tags\"><span>SEO<\/span><span>Content<\/span><\/div>\n <h4>SaaS Blog Optimization<\/h4>\n <p>#1 ranking for 12 competitive keywords<\/p>\n <\/div>\n <\/div>\n <div class=\"portfolio-item\" data-category=\"social\">\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/3184418\/pexels-photo-3184418.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\" alt=\"Team social media planning\" loading=\"lazy\" \/>\n <div class=\"portfolio-overlay\">\n <div class=\"tags\"><span>Social<\/span><span>LinkedIn<\/span><\/div>\n <h4>B2B LinkedIn Growth<\/h4>\n <p>300% increase in engagement rate<\/p>\n <\/div>\n <\/div>\n <div class=\"portfolio-item\" data-category=\"ads\">\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/196644\/pexels-photo-196644.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\" alt=\"Ad campaign performance\" loading=\"lazy\" \/>\n <div class=\"portfolio-overlay\">\n <div class=\"tags\"><span>Paid Ads<\/span><span>Google<\/span><\/div>\n <h4>Google Ads Scale-Up<\/h4>\n <p>120% increase in conversions MoM<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ===== CASE STUDIES ===== -->\n <section class=\"case-studies\" id=\"case-studies\">\n <div class=\"container text-center\">\n <span class=\"section-label\">Case Studies<\/span>\n <h2 class=\"section-title\">Results That <span>Speak<\/span><\/h2>\n <p class=\"section-subtitle\">In-depth looks at how I transformed brands through strategic digital marketing.<\/p>\n <\/div>\n <div class=\"container\">\n <div class=\"case-studies-grid\">\n <div class=\"case-card reveal\">\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/3183197\/pexels-photo-3183197.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\" alt=\"Case study strategy session\" loading=\"lazy\" \/>\n <div class=\"case-card-body\">\n <span class=\"badge\"><i class=\"fas fa-arrow-up\"><\/i> +280% Traffic<\/span>\n <h4>E-Commerce Brand Traffic Surge<\/h4>\n <p>Complete SEO restructuring with AI-optimized content strategy for a mid-market e-commerce brand.<\/p>\n <div class=\"case-results\">\n <div class=\"result\"><div class=\"val\">280%<\/div><div class=\"lbl\">Traffic Boost<\/div><\/div>\n <div class=\"result\"><div class=\"val\">38%<\/div><div class=\"lbl\">Conversion Lift<\/div><\/div>\n <div class=\"result\"><div class=\"val\">12<\/div><div class=\"lbl\">Keywords #1<\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"case-card reveal\">\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/8386440\/pexels-photo-8386440.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\" alt=\"AI marketing analytics\" loading=\"lazy\" \/>\n <div class=\"case-card-body\">\n <span class=\"badge\"><i class=\"fas fa-arrow-up\"><\/i> +450% ROAS<\/span>\n <h4>SaaS Paid Ads Transformation<\/h4>\n <p>AI-driven audience segmentation and automated bidding strategy for a B2B SaaS platform.<\/p>\n <div class=\"case-results\">\n <div class=\"result\"><div class=\"val\">4.5x<\/div><div class=\"lbl\">ROAS<\/div><\/div>\n <div class=\"result\"><div class=\"val\">62%<\/div><div class=\"lbl\">CPA Reduction<\/div><\/div>\n <div class=\"result\"><div class=\"val\">15K<\/div><div class=\"lbl\">Leads\/Month<\/div><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ===== TESTIMONIALS ===== -->\n <section class=\"testimonials\" id=\"testimonials\">\n <div class=\"container text-center\">\n <span class=\"section-label\">Testimonials<\/span>\n <h2 class=\"section-title\">What Clients <span>Say<\/span><\/h2>\n <p class=\"section-subtitle\">Trusted by founders, marketers, and business owners worldwide.<\/p>\n <\/div>\n <div class=\"container\">\n <div class=\"testimonial-slider\" id=\"testimonialSlider\">\n <div class=\"testimonial-track\" id=\"testimonialTrack\">\n <div class=\"testimonial-slide\">\n <div class=\"testimonial-card\">\n <div class=\"stars\"><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><\/div>\n <p class=\"quote\">\"Ramani completely transformed our digital presence. Our organic traffic doubled in three months, and the quality of leads we're getting now is unmatched. Truly a data genius.\"<\/p>\n <div class=\"author\">\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/2379004\/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=150&h=150&dpr=1\" alt=\"Client\" loading=\"lazy\" \/>\n <div class=\"info\"><h5>Sarah Mitchell<\/h5><span>CEO, Bloom & Co.<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"testimonial-slide\">\n <div class=\"testimonial-card\">\n <div class=\"stars\"><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><\/div>\n <p class=\"quote\">\"Working with Ramani was a game-changer for our SaaS brand. The paid ads strategy she implemented brought our CPA down by 60% while scaling leads 3x. Exceptional work.\"<\/p>\n <div class=\"author\">\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/1222271\/pexels-photo-1222271.jpeg?auto=compress&cs=tinysrgb&w=150&h=150&dpr=1\" alt=\"Client\" loading=\"lazy\" \/>\n <div class=\"info\"><h5>James Park<\/h5><span>Founder, ScaleStack<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"testimonial-slide\">\n <div class=\"testimonial-card\">\n <div class=\"stars\"><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><i class=\"fas fa-star\"><\/i><\/div>\n <p class=\"quote\">\"The AI-powered content strategy Ramani developed for us was brilliant. Our blog became the #1 traffic source within 4 months. Highly recommend for any serious business.\"<\/p>\n <div class=\"author\">\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/3779760\/pexels-photo-3779760.jpeg?auto=compress&cs=tinysrgb&w=150&h=150&dpr=1\" alt=\"Client\" loading=\"lazy\" \/>\n <div class=\"info\"><h5>Priya Sharma<\/h5><span>Marketing Director, TechFlow<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <div class=\"testimonial-dots\" id=\"testimonialDots\">\n <button class=\"active\" data-index=\"0\"><\/button>\n <button data-index=\"1\"><\/button>\n <button data-index=\"2\"><\/button>\n <\/div>\n <div class=\"testimonial-nav\">\n <button id=\"prevTestimonial\"><i class=\"fas fa-arrow-left\"><\/i><\/button>\n <button id=\"nextTestimonial\"><i class=\"fas fa-arrow-right\"><\/i><\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ===== CERTIFICATIONS ===== -->\n <section class=\"certifications\" id=\"certifications\">\n <div class=\"container text-center\">\n <span class=\"section-label\">Credentials<\/span>\n <h2 class=\"section-title\">Certifications & <span>Badges<\/span><\/h2>\n <p class=\"section-subtitle\">Industry-recognized qualifications that back every strategy I deliver.<\/p>\n <\/div>\n <div class=\"container\">\n <div class=\"certs-grid\">\n <div class=\"cert-card reveal\">\n <div class=\"icon\"><i class=\"fab fa-google\"><\/i><\/div>\n <h5>Google Digital Marketing<\/h5>\n <p>Google Digital Garage Certified<\/p>\n <\/div>\n <div class=\"cert-card reveal\">\n <div class=\"icon\"><i class=\"fab fa-meta\"><\/i><\/div>\n <h5>Meta Certified<\/h5>\n <p>Social Media Marketing Pro<\/p>\n <\/div>\n <div class=\"cert-card reveal\">\n <div class=\"icon\"><i class=\"fas fa-chart-simple\"><\/i><\/div>\n <h5>Google Analytics Advanced<\/h5>\n <p>GA4 Certification<\/p>\n <\/div>\n <div class=\"cert-card reveal\">\n <div class=\"icon\"><i class=\"fas fa-brain\"><\/i><\/div>\n <h5>AI Marketing<\/h5>\n <p>AI Marketing Institute<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ===== BLOG ===== -->\n <section class=\"blog\" id=\"blog\">\n <div class=\"container text-center\">\n <span class=\"section-label\">Insights<\/span>\n <h2 class=\"section-title\">Latest <span>Articles<\/span><\/h2>\n <p class=\"section-subtitle\">Thoughts on AI marketing, SEO trends, and digital growth strategies.<\/p>\n <\/div>\n <div class=\"container\">\n <div class=\"blog-grid\">\n <article class=\"blog-card reveal\">\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/8386440\/pexels-photo-8386440.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\" alt=\"AI Marketing Trends\" loading=\"lazy\" \/>\n <div class=\"blog-card-body\">\n <span class=\"date\"><i class=\"far fa-calendar-alt\"><\/i> June 8, 2026<\/span>\n <h4>5 AI Trends Reshaping Digital Marketing in 2026<\/h4>\n <p>How machine learning and LLMs are changing the way we market forever.<\/p>\n <a href=\"#\" class=\"read-more\">Read More <i class=\"fas fa-arrow-right\"><\/i><\/a>\n <\/div>\n <\/article>\n <article class=\"blog-card reveal\">\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/669615\/pexels-photo-669615.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\" alt=\"SEO Strategy\" loading=\"lazy\" \/>\n <div class=\"blog-card-body\">\n <span class=\"date\"><i class=\"far fa-calendar-alt\"><\/i> May 22, 2026<\/span>\n <h4>SEO in the AI Era: What Still Works?<\/h4>\n <p>Core web vitals, EEAT, and why quality content matters more than ever.<\/p>\n <a href=\"#\" class=\"read-more\">Read More <i class=\"fas fa-arrow-right\"><\/i><\/a>\n <\/div>\n <\/article>\n <article class=\"blog-card reveal\">\n <img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/577585\/pexels-photo-577585.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\" alt=\"Content marketing\" loading=\"lazy\" \/>\n <div class=\"blog-card-body\">\n <span class=\"date\"><i class=\"far fa-calendar-alt\"><\/i> May 10, 2026<\/span>\n <h4>Content Strategy Playbook for 2026 Growth<\/h4>\n <p>A step-by-step guide to building a content engine that drives real ROI.<\/p>\n <a href=\"#\" class=\"read-more\">Read More <i class=\"fas fa-arrow-right\"><\/i><\/a>\n <\/div>\n <\/article>\n <\/div>\n <\/div>\n <\/section>\n\n <!-- ===== CONTACT ===== -->\n <section class=\"contact\" id=\"contact\">\n <div class=\"container text-center\">\n <span class=\"section-label\">Get In Touch<\/span>\n <h2 class=\"section-title\">Let's Grow Your <span>Brand<\/span><\/h2>\n <p class=\"section-subtitle\">Ready to take your digital presence to the next level? Let's talk strategy.<\/p>\n <\/div>\n <div class=\"container\">\n <div class=\"contact-grid\">\n <div class=\"contact-info reveal-left\">\n <h3>Have a project? <br \/>Let's make it happen.<\/h3>\n <p>Whether you need a full marketing strategy, a specific campaign, or just some expert advice \u2014 I'm here to help. Reach out and let's discuss how I can support your growth.<\/p>\n <div class=\"contact-details\">\n <div class=\"item\">\n <div class=\"icon\"><i class=\"fas fa-envelope\"><\/i><\/div>\n <div><h5>Email<\/h5><p><a href=\"mailto:ramanidigitalmarketer@gmail.com\">ramanidigitalmarketer@gmail.com<\/a><\/p><\/div>\n <\/div>\n <div class=\"item\">\n <div class=\"icon\"><i class=\"fas fa-phone\"><\/i><\/div>\n <div><h5>WhatsApp<\/h5><p><a href=\"https:\/\/wa.me\/1234567890\">+1 (234) 567-890<\/a><\/p><\/div>\n <\/div>\n <div class=\"item\">\n <div class=\"icon\"><i class=\"fas fa-location-dot\"><\/i><\/div>\n <div><h5>Location<\/h5><p>Remote \u2014 Available Worldwide<\/p><\/div>\n <\/div>\n <\/div>\n <div class=\"contact-social\">\n <a href=\"https:\/\/linkedin.com\" target=\"_blank\" rel=\"noopener\" aria-label=\"LinkedIn\"><i class=\"fab fa-linkedin-in\"><\/i><\/a>\n <a href=\"https:\/\/twitter.com\" target=\"_blank\" rel=\"noopener\" aria-label=\"Twitter\"><i class=\"fab fa-x-twitter\"><\/i><\/a>\n <a href=\"https:\/\/instagram.com\" target=\"_blank\" rel=\"noopener\" aria-label=\"Instagram\"><i class=\"fab fa-instagram\"><\/i><\/a>\n <a href=\"https:\/\/youtube.com\" target=\"_blank\" rel=\"noopener\" aria-label=\"YouTube\"><i class=\"fab fa-youtube\"><\/i><\/a>\n <\/div>\n <\/div>\n \n \n \n \n <div class=\"form-group\">\n <label for=\"name\">Full Name<\/label>\n \n <\/div>\n <div class=\"form-group\">\n <label for=\"email\">Email Address<\/label>\n \n <\/div>\n <div class=\"form-group\">\n <label for=\"service\">Service Needed<\/label>\n \n Select a service...\n SEO Optimization\n Social Media Marketing\n Paid Advertising\n Content Strategy\n Email Marketing\n Other\n \n <\/div>\n <div class=\"form-group\">\n <label for=\"message\">Message<\/label>\n <textarea id=\"message\" name=\"message\"><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"btn btn-primary\"><i class=\"fas fa-paper-plane\"><\/i> Send Message<\/button>\n \n <\/div>\n <\/div>\n <\/section>\n\n <!-- ===== FOOTER ===== -->\n <footer class=\"footer\">\n <div class=\"container\">\n <div class=\"footer-grid\">\n <div class=\"footer-brand\">\n <div class=\"logo\">Ramani<span>.<\/span><\/div>\n <p>AI-powered digital marketing specialist helping brands grow through data-driven strategies, creative campaigns, and measurable results.<\/p>\n <\/div>\n <div>\n <h5>Quick Links<\/h5>\n <ul class=\"footer-links\">\n <li><a href=\"#about\">About<\/a><\/li>\n <li><a href=\"#services\">Services<\/a><\/li>\n <li><a href=\"#portfolio\">Portfolio<\/a><\/li>\n <li><a href=\"#blog\">Blog<\/a><\/li>\n <\/ul>\n <\/div>\n <div>\n <h5>Services<\/h5>\n <ul class=\"footer-links\">\n <li><a href=\"#services\">SEO<\/a><\/li>\n <li><a href=\"#services\">Social Media<\/a><\/li>\n <li><a href=\"#services\">Paid Ads<\/a><\/li>\n <li><a href=\"#services\">Content Strategy<\/a><\/li>\n <\/ul>\n <\/div>\n <div>\n <h5>Connect<\/h5>\n <ul class=\"footer-links\">\n <li><a href=\"mailto:ramanidigitalmarketer@gmail.com\">Email<\/a><\/li>\n <li><a href=\"https:\/\/wa.me\/1234567890\" target=\"_blank\">WhatsApp<\/a><\/li>\n <li><a href=\"https:\/\/linkedin.com\" target=\"_blank\">LinkedIn<\/a><\/li>\n <li><a href=\"https:\/\/instagram.com\" target=\"_blank\">Instagram<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n <div class=\"footer-bottom\">\n <span>© 2026 Ramani. All rights reserved.<\/span>\n <span>Built with <i class=\"fas fa-heart\" style=\"color:#059669\"><\/i> and AI<\/span>\n <\/div>\n <\/div>\n <\/footer>\n\n <!-- ===== WHATSAPP FLOATING BUTTON ===== -->\n <a href=\"https:\/\/wa.me\/1234567890?text=Hi%20Ramani%2C%20I'd%20love%20to%20discuss%20a%20project!\" class=\"whatsapp-float\" target=\"_blank\" rel=\"noopener\" aria-label=\"Chat on WhatsApp\">\n <i class=\"fab fa-whatsapp\"><\/i>\n <\/a>\n\n <!-- ===== BACK TO TOP ===== -->\n <button class=\"back-to-top\" id=\"backToTop\" aria-label=\"Back to top\">\n <i class=\"fas fa-arrow-up\"><\/i>\n <\/button>\n\n \n \/\/ ===== NAVBAR SCROLL =====\n const navbar = document.getElementById('navbar');\n const backToTop = document.getElementById('backToTop');\n window.addEventListener('scroll', () => {\n const scrollY = window.scrollY;\n navbar.classList.toggle('scrolled', scrollY > 50);\n backToTop.classList.toggle('visible', scrollY > 400);\n });\n\n \/\/ ===== MOBILE MENU =====\n const hamburger = document.getElementById('hamburger');\n const navLinks = document.getElementById('navLinks');\n hamburger.addEventListener('click', () => {\n hamburger.classList.toggle('active');\n navLinks.classList.toggle('open');\n });\n navLinks.querySelectorAll('a').forEach(link => {\n link.addEventListener('click', () => {\n hamburger.classList.remove('active');\n navLinks.classList.remove('open');\n });\n });\n\n \/\/ ===== SCROLL REVEAL =====\n const revealElements = document.querySelectorAll('.reveal, .reveal-left, .reveal-right');\n const revealObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.classList.add('visible');\n }\n });\n }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });\n revealElements.forEach(el => revealObserver.observe(el));\n\n \/\/ ===== SKILL ANIMATION COUNTERS =====\n const skillObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const fills = entry.target.querySelectorAll('.fill');\n fills.forEach(fill => {\n const width = fill.getAttribute('data-width');\n fill.style.width = width + '%';\n });\n }\n });\n }, { threshold: 0.3 });\n document.querySelectorAll('.skill-card').forEach(card => skillObserver.observe(card));\n\n \/\/ ===== STAT COUNTERS =====\n const counterObserver = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n const nums = entry.target.querySelectorAll('[data-count]');\n nums.forEach(num => {\n const target = parseInt(num.getAttribute('data-count'));\n const duration = 2000;\n const step = Math.ceil(target \/ (duration \/ 16));\n let current = 0;\n const timer = setInterval(() => {\n current += step;\n if (current >= target) {\n num.textContent = target;\n clearInterval(timer);\n } else {\n num.textContent = current;\n }\n }, 16);\n });\n counterObserver.unobserve(entry.target);\n }\n });\n }, { threshold: 0.5 });\n const heroStats = document.querySelector('.hero-stats');\n if (heroStats) counterObserver.observe(heroStats);\n\n \/\/ ===== PORTFOLIO FILTER =====\n const filterButtons = document.querySelectorAll('.portfolio-filters button');\n const portfolioItems = document.querySelectorAll('.portfolio-item');\n filterButtons.forEach(btn => {\n btn.addEventListener('click', () => {\n filterButtons.forEach(b => b.classList.remove('active'));\n btn.classList.add('active');\n const filter = btn.getAttribute('data-filter');\n portfolioItems.forEach(item => {\n if (filter === 'all' || item.getAttribute('data-category') === filter) {\n item.style.display = 'block';\n setTimeout(() => { item.style.opacity = '1'; item.style.transform = 'scale(1)'; }, 50);\n } else {\n item.style.opacity = '0';\n item.style.transform = 'scale(0.9)';\n setTimeout(() => { item.style.display = 'none'; }, 350);\n }\n });\n });\n });\n portfolioItems.forEach(item => { item.style.transition = 'opacity 0.35s ease, transform 0.35s ease'; });\n\n \/\/ ===== TESTIMONIAL SLIDER =====\n const track = document.getElementById('testimonialTrack');\n const dots = document.querySelectorAll('#testimonialDots button');\n const prevBtn = document.getElementById('prevTestimonial');\n const nextBtn = document.getElementById('nextTestimonial');\n let currentSlide = 0;\n const totalSlides = document.querySelectorAll('.testimonial-slide').length;\n\n function goToSlide(index) {\n if (index = totalSlides) index = 0;\n currentSlide = index;\n track.style.transform = `translateX(-${currentSlide * 100}%)`;\n dots.forEach((dot, i) => dot.classList.toggle('active', i === currentSlide));\n }\n dots.forEach((dot, i) => dot.addEventListener('click', () => goToSlide(i)));\n prevBtn.addEventListener('click', () => goToSlide(currentSlide - 1));\n nextBtn.addEventListener('click', () => goToSlide(currentSlide + 1));\n setInterval(() => goToSlide(currentSlide + 1), 5000);\n\n \/\/ ===== BACK TO TOP CLICK =====\n backToTop.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));\n\n \/\/ ===== CONTACT FORM =====\n const contactForm = document.getElementById('contactForm');\n contactForm.addEventListener('submit', function(e) {\n const btn = this.querySelector('button[type=\"submit\"]');\n btn.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i> Sending...';\n btn.disabled = true;\n });\n \n\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Ramani | AI-Powered Digital Marketing Specialist \/* ===== RESET & BASE ===== *\/ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: ‘Inter’, sans-serif; background: #fff; color: #1e293b; line-height: 1.7; overflow-x: hidden; } :root { –primary: #059669; –primary-dark: #047857; –primary-light: #d1fae5; –primary-bg: #ecfdf5; –secondary: #3b82f6; –secondary-light: #dbeafe; –secondary-bg: #eff6ff; –accent: #10b981; –dark: #0f172a; –text: #1e293b; –text-muted: #64748b; –border: #e2e8f0; –section-bg: #f8fafc; –card-bg: #ffffff; –shadow: 0 4px 24px rgba(0,0,0,0.06); –shadow-hover: 0 12px 40px rgba(0,0,0,0.10); –radius: 16px; –radius-sm: 10px; –transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1); } a { text-decoration: none; color: inherit; } img { max-width: 100%; height: auto; display: block; } ul { list-style: none; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } section { padding: 100px 0; position: relative; } .section-label { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(–primary); background: var(–primary-light); padding: 6px 18px; border-radius: 50px; margin-bottom: 16px; } .section-title { font-family: ‘Playfair Display’, serif; font-size: 2.6rem; font-weight: 700; color: var(–dark); margin-bottom: 16px; line-height: 1.2; } .section-title span { color: var(–primary); } .section-subtitle { font-size: 1.1rem; color: var(–text-muted); max-width: 640px; margin: 0 auto 48px; text-align: center; } .text-center { text-align: center; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: 50px; font-weight: 600; font-size: 0.95rem; border: none; cursor: pointer; transition: var(–transition); letter-spacing: 0.3px; } .btn-primary { background: linear-gradient(135deg, var(–primary), var(–accent)); color: #fff; box-shadow: 0 4px 16px rgba(5, 150, 105, 0.35); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(5, 150, 105, 0.45); } .btn-secondary { background: transparent; color: var(–dark); border: 2px solid var(–border); } .btn-secondary:hover { border-color: var(–primary); color: var(–primary); transform: translateY(-3px); } .btn-white { background: #fff; color: var(–primary); box-shadow: 0 4px 16px rgba(0,0,0,0.1); } .btn-white:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,0.15); } \/* ===== ANIMATIONS ===== *\/ @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.4); } 50% { box-shadow: 0 0 0 20px rgba(5, 150, 105, 0); } } @keyframes spin-slow { to { transform: rotate(360deg); } } @keyframes blob { 0%, 100% { border-radius: 60% 40% 30% 70% \/ 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% \/ 50% 60% 30% 60%; } } .reveal { opacity: 0; transform: translateY(40px); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-60px); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .reveal-left.visible { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(60px); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .reveal-right.visible { opacity: 1; transform: translateX(0); } \/* ===== NAVBAR ===== *\/ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 16px 0; transition: var(–transition); background: transparent; } .navbar.scrolled { background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 1px 12px rgba(0,0,0,0.06); padding: 10px 0; } .navbar .container { display: flex; align-items: center; justify-content: space-between; } .logo { font-family: ‘Playfair Display’, serif; font-size: 1.6rem; font-weight: 700; color: var(–dark); } .logo span { color: var(–primary); } .nav-links { display: flex; align-items: center; gap: 32px; } .nav-links a { font-size: 0.9rem; font-weight: 500; color: var(–text); position: relative; transition: var(–transition); } .nav-links a::after { content: ”; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(–primary); transition: var(–transition); } .nav-links a:hover { color: var(–primary); } .nav-links a:hover::after { width: 100%; } .nav-cta { background: linear-gradient(135deg, var(–primary), var(–accent)); color: #fff !important; padding: 10px 24px; border-radius: 50px; font-weight: 600; } .nav-cta::after { display: none !important; } .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(5,150,105,0.35); } .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; } .hamburger span { width: 26px; height: 2.5px; background: var(–dark); border-radius: 2px; transition: var(–transition); } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } \/* ===== HERO ===== *\/ .hero { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; background: linear-gradient(135deg, #f0fdf4 0%, #eff6ff 50%, #f8fafc 100%); } .hero-bg-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .hero-bg-shapes .shape { position: absolute; border-radius: 50%; opacity: 0.15; } .hero-bg-shapes .shape:nth-child(1) { width: 500px; height: 500px; background: var(–primary); top: -120px; right: -120px; animation: blob 8s ease-in-out infinite; } .hero-bg-shapes .shape:nth-child(2) { width: 350px; height: 350px; background: var(–secondary); bottom: -80px; left: -80px; animation: blob 10s ease-in-out infinite reverse; } .hero-bg-shapes .shape:nth-child(3) { width: 200px; height: 200px; background: var(–accent); top: 30%; left: 10%; animation: float 6s ease-in-out infinite; } .hero .container { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 2; } .hero-content { animation: fadeInUp 1s ease-out; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(5,150,105,0.1); border: 1px solid rgba(5,150,105,0.2); padding: 8px 20px; border-radius: 50px; font-size: 0.85rem; font-weight: 500; color: var(–primary); margin-bottom: 24px; } .hero-badge i { font-size: 0.75rem; } .hero h1 { font-family: ‘Playfair Display’, serif; font-size: 3.8rem; font-weight: 700; line-height: 1.15; color: var(–dark); margin-bottom: 20px; } .hero h1 span { background: linear-gradient(135deg, var(–primary), var(–secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero p { font-size: 1.15rem; color: var(–text-muted); max-width: 520px; margin-bottom: 36px; line-height: 1.8; } .hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; } .hero-image { animation: fadeInUp 1s ease-out 0.2s both; position: relative; } .hero-image-wrapper { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.1); } .hero-image-wrapper img { width: 100%; height: 520px; object-fit: cover; transition: transform 0.6s ease; } .hero-image-wrapper:hover img { transform: scale(1.03); } .hero-image-wrapper::after { … <a title=\"Home page\" class=\"read-more\" href=\"https:\/\/flmdm19.in\/mramani\/\" aria-label=\"Read more about Home page\">Read more<\/a><\/p>\n","protected":false},"author":100,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-33","page","type-page","status-publish"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Home page - FLM DM Course 19th Batch-M.Ramani<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/flmdm19.in\/mramani\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Home page - FLM DM Course 19th Batch-M.Ramani\" \/>\n<meta property=\"og:description\" content=\"Ramani | AI-Powered Digital Marketing Specialist \/* ===== RESET & BASE ===== *\/ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: ‘Inter’, sans-serif; background: #fff; color: #1e293b; line-height: 1.7; overflow-x: hidden; } :root { –primary: #059669; –primary-dark: #047857; –primary-light: #d1fae5; –primary-bg: #ecfdf5; –secondary: #3b82f6; –secondary-light: #dbeafe; –secondary-bg: #eff6ff; –accent: #10b981; –dark: #0f172a; –text: #1e293b; –text-muted: #64748b; –border: #e2e8f0; –section-bg: #f8fafc; –card-bg: #ffffff; –shadow: 0 4px 24px rgba(0,0,0,0.06); –shadow-hover: 0 12px 40px rgba(0,0,0,0.10); –radius: 16px; –radius-sm: 10px; –transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1); } a { text-decoration: none; color: inherit; } img { max-width: 100%; height: auto; display: block; } ul { list-style: none; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } section { padding: 100px 0; position: relative; } .section-label { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(–primary); background: var(–primary-light); padding: 6px 18px; border-radius: 50px; margin-bottom: 16px; } .section-title { font-family: ‘Playfair Display’, serif; font-size: 2.6rem; font-weight: 700; color: var(–dark); margin-bottom: 16px; line-height: 1.2; } .section-title span { color: var(–primary); } .section-subtitle { font-size: 1.1rem; color: var(–text-muted); max-width: 640px; margin: 0 auto 48px; text-align: center; } .text-center { text-align: center; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: 50px; font-weight: 600; font-size: 0.95rem; border: none; cursor: pointer; transition: var(–transition); letter-spacing: 0.3px; } .btn-primary { background: linear-gradient(135deg, var(–primary), var(–accent)); color: #fff; box-shadow: 0 4px 16px rgba(5, 150, 105, 0.35); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(5, 150, 105, 0.45); } .btn-secondary { background: transparent; color: var(–dark); border: 2px solid var(–border); } .btn-secondary:hover { border-color: var(–primary); color: var(–primary); transform: translateY(-3px); } .btn-white { background: #fff; color: var(–primary); box-shadow: 0 4px 16px rgba(0,0,0,0.1); } .btn-white:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,0.15); } \/* ===== ANIMATIONS ===== *\/ @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.4); } 50% { box-shadow: 0 0 0 20px rgba(5, 150, 105, 0); } } @keyframes spin-slow { to { transform: rotate(360deg); } } @keyframes blob { 0%, 100% { border-radius: 60% 40% 30% 70% \/ 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% \/ 50% 60% 30% 60%; } } .reveal { opacity: 0; transform: translateY(40px); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-60px); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .reveal-left.visible { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(60px); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .reveal-right.visible { opacity: 1; transform: translateX(0); } \/* ===== NAVBAR ===== *\/ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 16px 0; transition: var(–transition); background: transparent; } .navbar.scrolled { background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 1px 12px rgba(0,0,0,0.06); padding: 10px 0; } .navbar .container { display: flex; align-items: center; justify-content: space-between; } .logo { font-family: ‘Playfair Display’, serif; font-size: 1.6rem; font-weight: 700; color: var(–dark); } .logo span { color: var(–primary); } .nav-links { display: flex; align-items: center; gap: 32px; } .nav-links a { font-size: 0.9rem; font-weight: 500; color: var(–text); position: relative; transition: var(–transition); } .nav-links a::after { content: ”; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(–primary); transition: var(–transition); } .nav-links a:hover { color: var(–primary); } .nav-links a:hover::after { width: 100%; } .nav-cta { background: linear-gradient(135deg, var(–primary), var(–accent)); color: #fff !important; padding: 10px 24px; border-radius: 50px; font-weight: 600; } .nav-cta::after { display: none !important; } .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(5,150,105,0.35); } .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; } .hamburger span { width: 26px; height: 2.5px; background: var(–dark); border-radius: 2px; transition: var(–transition); } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } \/* ===== HERO ===== *\/ .hero { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; background: linear-gradient(135deg, #f0fdf4 0%, #eff6ff 50%, #f8fafc 100%); } .hero-bg-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .hero-bg-shapes .shape { position: absolute; border-radius: 50%; opacity: 0.15; } .hero-bg-shapes .shape:nth-child(1) { width: 500px; height: 500px; background: var(–primary); top: -120px; right: -120px; animation: blob 8s ease-in-out infinite; } .hero-bg-shapes .shape:nth-child(2) { width: 350px; height: 350px; background: var(–secondary); bottom: -80px; left: -80px; animation: blob 10s ease-in-out infinite reverse; } .hero-bg-shapes .shape:nth-child(3) { width: 200px; height: 200px; background: var(–accent); top: 30%; left: 10%; animation: float 6s ease-in-out infinite; } .hero .container { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 2; } .hero-content { animation: fadeInUp 1s ease-out; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(5,150,105,0.1); border: 1px solid rgba(5,150,105,0.2); padding: 8px 20px; border-radius: 50px; font-size: 0.85rem; font-weight: 500; color: var(–primary); margin-bottom: 24px; } .hero-badge i { font-size: 0.75rem; } .hero h1 { font-family: ‘Playfair Display’, serif; font-size: 3.8rem; font-weight: 700; line-height: 1.15; color: var(–dark); margin-bottom: 20px; } .hero h1 span { background: linear-gradient(135deg, var(–primary), var(–secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero p { font-size: 1.15rem; color: var(–text-muted); max-width: 520px; margin-bottom: 36px; line-height: 1.8; } .hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; } .hero-image { animation: fadeInUp 1s ease-out 0.2s both; position: relative; } .hero-image-wrapper { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.1); } .hero-image-wrapper img { width: 100%; height: 520px; object-fit: cover; transition: transform 0.6s ease; } .hero-image-wrapper:hover img { transform: scale(1.03); } .hero-image-wrapper::after { ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/flmdm19.in\/mramani\/\" \/>\n<meta property=\"og:site_name\" content=\"FLM DM Course 19th Batch-M.Ramani\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-12T10:25:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/images.pexels.com\/photos\/3183197\/pexels-photo-3183197.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"19 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/flmdm19.in\\\/mramani\\\/\",\"url\":\"https:\\\/\\\/flmdm19.in\\\/mramani\\\/\",\"name\":\"Home page - FLM DM Course 19th Batch-M.Ramani\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/flmdm19.in\\\/mramani\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/flmdm19.in\\\/mramani\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/flmdm19.in\\\/mramani\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/images.pexels.com\\\/photos\\\/3183197\\\/pexels-photo-3183197.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\"datePublished\":\"2026-06-12T10:11:16+00:00\",\"dateModified\":\"2026-06-12T10:25:56+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/flmdm19.in\\\/mramani\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/flmdm19.in\\\/mramani\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/flmdm19.in\\\/mramani\\\/#primaryimage\",\"url\":\"https:\\\/\\\/images.pexels.com\\\/photos\\\/3183197\\\/pexels-photo-3183197.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\",\"contentUrl\":\"https:\\\/\\\/images.pexels.com\\\/photos\\\/3183197\\\/pexels-photo-3183197.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/flmdm19.in\\\/mramani\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/flmdm19.in\\\/mramani\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home page\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/flmdm19.in\\\/mramani\\\/#website\",\"url\":\"https:\\\/\\\/flmdm19.in\\\/mramani\\\/\",\"name\":\"FLM DM Course 19th Batch-M.Ramani\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/flmdm19.in\\\/mramani\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Home page - FLM DM Course 19th Batch-M.Ramani","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/flmdm19.in\/mramani\/","og_locale":"en_US","og_type":"article","og_title":"Home page - FLM DM Course 19th Batch-M.Ramani","og_description":"Ramani | AI-Powered Digital Marketing Specialist \/* ===== RESET & BASE ===== *\/ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: ‘Inter’, sans-serif; background: #fff; color: #1e293b; line-height: 1.7; overflow-x: hidden; } :root { –primary: #059669; –primary-dark: #047857; –primary-light: #d1fae5; –primary-bg: #ecfdf5; –secondary: #3b82f6; –secondary-light: #dbeafe; –secondary-bg: #eff6ff; –accent: #10b981; –dark: #0f172a; –text: #1e293b; –text-muted: #64748b; –border: #e2e8f0; –section-bg: #f8fafc; –card-bg: #ffffff; –shadow: 0 4px 24px rgba(0,0,0,0.06); –shadow-hover: 0 12px 40px rgba(0,0,0,0.10); –radius: 16px; –radius-sm: 10px; –transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1); } a { text-decoration: none; color: inherit; } img { max-width: 100%; height: auto; display: block; } ul { list-style: none; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } section { padding: 100px 0; position: relative; } .section-label { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(–primary); background: var(–primary-light); padding: 6px 18px; border-radius: 50px; margin-bottom: 16px; } .section-title { font-family: ‘Playfair Display’, serif; font-size: 2.6rem; font-weight: 700; color: var(–dark); margin-bottom: 16px; line-height: 1.2; } .section-title span { color: var(–primary); } .section-subtitle { font-size: 1.1rem; color: var(–text-muted); max-width: 640px; margin: 0 auto 48px; text-align: center; } .text-center { text-align: center; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: 50px; font-weight: 600; font-size: 0.95rem; border: none; cursor: pointer; transition: var(–transition); letter-spacing: 0.3px; } .btn-primary { background: linear-gradient(135deg, var(–primary), var(–accent)); color: #fff; box-shadow: 0 4px 16px rgba(5, 150, 105, 0.35); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(5, 150, 105, 0.45); } .btn-secondary { background: transparent; color: var(–dark); border: 2px solid var(–border); } .btn-secondary:hover { border-color: var(–primary); color: var(–primary); transform: translateY(-3px); } .btn-white { background: #fff; color: var(–primary); box-shadow: 0 4px 16px rgba(0,0,0,0.1); } .btn-white:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,0.15); } \/* ===== ANIMATIONS ===== *\/ @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.4); } 50% { box-shadow: 0 0 0 20px rgba(5, 150, 105, 0); } } @keyframes spin-slow { to { transform: rotate(360deg); } } @keyframes blob { 0%, 100% { border-radius: 60% 40% 30% 70% \/ 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% \/ 50% 60% 30% 60%; } } .reveal { opacity: 0; transform: translateY(40px); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-60px); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .reveal-left.visible { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(60px); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .reveal-right.visible { opacity: 1; transform: translateX(0); } \/* ===== NAVBAR ===== *\/ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 16px 0; transition: var(–transition); background: transparent; } .navbar.scrolled { background: rgba(255,255,255,0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 1px 12px rgba(0,0,0,0.06); padding: 10px 0; } .navbar .container { display: flex; align-items: center; justify-content: space-between; } .logo { font-family: ‘Playfair Display’, serif; font-size: 1.6rem; font-weight: 700; color: var(–dark); } .logo span { color: var(–primary); } .nav-links { display: flex; align-items: center; gap: 32px; } .nav-links a { font-size: 0.9rem; font-weight: 500; color: var(–text); position: relative; transition: var(–transition); } .nav-links a::after { content: ”; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(–primary); transition: var(–transition); } .nav-links a:hover { color: var(–primary); } .nav-links a:hover::after { width: 100%; } .nav-cta { background: linear-gradient(135deg, var(–primary), var(–accent)); color: #fff !important; padding: 10px 24px; border-radius: 50px; font-weight: 600; } .nav-cta::after { display: none !important; } .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(5,150,105,0.35); } .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; } .hamburger span { width: 26px; height: 2.5px; background: var(–dark); border-radius: 2px; transition: var(–transition); } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } \/* ===== HERO ===== *\/ .hero { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; background: linear-gradient(135deg, #f0fdf4 0%, #eff6ff 50%, #f8fafc 100%); } .hero-bg-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .hero-bg-shapes .shape { position: absolute; border-radius: 50%; opacity: 0.15; } .hero-bg-shapes .shape:nth-child(1) { width: 500px; height: 500px; background: var(–primary); top: -120px; right: -120px; animation: blob 8s ease-in-out infinite; } .hero-bg-shapes .shape:nth-child(2) { width: 350px; height: 350px; background: var(–secondary); bottom: -80px; left: -80px; animation: blob 10s ease-in-out infinite reverse; } .hero-bg-shapes .shape:nth-child(3) { width: 200px; height: 200px; background: var(–accent); top: 30%; left: 10%; animation: float 6s ease-in-out infinite; } .hero .container { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; position: relative; z-index: 2; } .hero-content { animation: fadeInUp 1s ease-out; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(5,150,105,0.1); border: 1px solid rgba(5,150,105,0.2); padding: 8px 20px; border-radius: 50px; font-size: 0.85rem; font-weight: 500; color: var(–primary); margin-bottom: 24px; } .hero-badge i { font-size: 0.75rem; } .hero h1 { font-family: ‘Playfair Display’, serif; font-size: 3.8rem; font-weight: 700; line-height: 1.15; color: var(–dark); margin-bottom: 20px; } .hero h1 span { background: linear-gradient(135deg, var(–primary), var(–secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero p { font-size: 1.15rem; color: var(–text-muted); max-width: 520px; margin-bottom: 36px; line-height: 1.8; } .hero-buttons { display: flex; gap: 16px; flex-wrap: wrap; } .hero-image { animation: fadeInUp 1s ease-out 0.2s both; position: relative; } .hero-image-wrapper { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 64px rgba(0,0,0,0.1); } .hero-image-wrapper img { width: 100%; height: 520px; object-fit: cover; transition: transform 0.6s ease; } .hero-image-wrapper:hover img { transform: scale(1.03); } .hero-image-wrapper::after { ... Read more","og_url":"https:\/\/flmdm19.in\/mramani\/","og_site_name":"FLM DM Course 19th Batch-M.Ramani","article_modified_time":"2026-06-12T10:25:56+00:00","og_image":[{"url":"https:\/\/images.pexels.com\/photos\/3183197\/pexels-photo-3183197.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"19 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/flmdm19.in\/mramani\/","url":"https:\/\/flmdm19.in\/mramani\/","name":"Home page - FLM DM Course 19th Batch-M.Ramani","isPartOf":{"@id":"https:\/\/flmdm19.in\/mramani\/#website"},"primaryImageOfPage":{"@id":"https:\/\/flmdm19.in\/mramani\/#primaryimage"},"image":{"@id":"https:\/\/flmdm19.in\/mramani\/#primaryimage"},"thumbnailUrl":"https:\/\/images.pexels.com\/photos\/3183197\/pexels-photo-3183197.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1","datePublished":"2026-06-12T10:11:16+00:00","dateModified":"2026-06-12T10:25:56+00:00","breadcrumb":{"@id":"https:\/\/flmdm19.in\/mramani\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/flmdm19.in\/mramani\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/flmdm19.in\/mramani\/#primaryimage","url":"https:\/\/images.pexels.com\/photos\/3183197\/pexels-photo-3183197.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1","contentUrl":"https:\/\/images.pexels.com\/photos\/3183197\/pexels-photo-3183197.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"},{"@type":"BreadcrumbList","@id":"https:\/\/flmdm19.in\/mramani\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/flmdm19.in\/mramani\/"},{"@type":"ListItem","position":2,"name":"Home page"}]},{"@type":"WebSite","@id":"https:\/\/flmdm19.in\/mramani\/#website","url":"https:\/\/flmdm19.in\/mramani\/","name":"FLM DM Course 19th Batch-M.Ramani","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/flmdm19.in\/mramani\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/flmdm19.in\/mramani\/wp-json\/wp\/v2\/pages\/33","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flmdm19.in\/mramani\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/flmdm19.in\/mramani\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/flmdm19.in\/mramani\/wp-json\/wp\/v2\/users\/100"}],"replies":[{"embeddable":true,"href":"https:\/\/flmdm19.in\/mramani\/wp-json\/wp\/v2\/comments?post=33"}],"version-history":[{"count":19,"href":"https:\/\/flmdm19.in\/mramani\/wp-json\/wp\/v2\/pages\/33\/revisions"}],"predecessor-version":[{"id":54,"href":"https:\/\/flmdm19.in\/mramani\/wp-json\/wp\/v2\/pages\/33\/revisions\/54"}],"wp:attachment":[{"href":"https:\/\/flmdm19.in\/mramani\/wp-json\/wp\/v2\/media?parent=33"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}