{"id":716,"date":"2026-09-08T09:19:59","date_gmt":"2026-09-08T09:19:59","guid":{"rendered":"https:\/\/w3webhelp.in\/sample\/elite-college\/?page_id=716"},"modified":"2026-09-12T12:47:21","modified_gmt":"2026-09-12T12:47:21","slug":"medi-spa","status":"publish","type":"page","link":"https:\/\/w3webhelp.in\/sample\/elite-college\/medi-spa\/","title":{"rendered":"Medi Spa"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Medi Spa Clinic \u2014 Elite College<\/title>\r\n <!-- Google Fonts -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Work+Sans:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Work Sans', sans-serif;\r\n background: #ffffff;\r\n }\r\n\r\n .hero-section {\r\n position: relative;\r\n width: 100%;\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n background: #080F1A;\r\n overflow: hidden;\r\n padding: 60px 40px 80px;\r\n }\r\n\r\n .hero-bg {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 0;\r\n background: \r\n radial-gradient(ellipse at 70% 30%, rgba(255, 184, 0, 0.05) 0%, transparent 60%),\r\n radial-gradient(ellipse at 30% 70%, rgba(255, 107, 53, 0.03) 0%, transparent 50%),\r\n linear-gradient(160deg, #080F1A 0%, #0F1A2E 50%, #14203E 100%);\r\n }\r\n\r\n .hero-container {\r\n max-width: 1320px;\r\n width: 100%;\r\n margin: 0 auto;\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 60px;\r\n align-items: center;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n \/* ===== LEFT CONTENT ===== *\/\r\n .hero-content {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 18px;\r\n }\r\n\r\n \/* ===== BREADCRUMB ===== *\/\r\n .hero-breadcrumb {\r\n font-family: 'Work Sans', sans-serif;\r\n font-size: 13px;\r\n font-weight: 400;\r\n color: rgba(255, 255, 255, 0.25);\r\n letter-spacing: 0.5px;\r\n margin-bottom: 0px;\r\n }\r\n .hero-breadcrumb a {\r\n color: rgba(255, 184, 0, 0.5);\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n }\r\n .hero-breadcrumb a:hover {\r\n color: #FFB800;\r\n }\r\n .hero-breadcrumb .sep {\r\n color: rgba(255, 255, 255, 0.15);\r\n margin: 0 6px;\r\n }\r\n .hero-breadcrumb .current {\r\n color: rgba(255, 255, 255, 0.35);\r\n }\r\n\r\n \/* ===== BADGE ===== *\/\r\n .hero-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 12px;\r\n background: rgba(255, 184, 0, 0.06);\r\n border: 1px solid rgba(255, 184, 0, 0.08);\r\n padding: 6px 20px 6px 16px;\r\n border-radius: 50px;\r\n width: fit-content;\r\n font-size: 10px;\r\n font-weight: 600;\r\n color: rgba(255, 184, 0, 0.6);\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n font-family: 'Work Sans', sans-serif;\r\n }\r\n\r\n .hero-badge .badge-dot {\r\n width: 6px;\r\n height: 6px;\r\n background: #FFB800;\r\n border-radius: 50%;\r\n animation: pulseDot 1.8s ease-in-out infinite;\r\n }\r\n\r\n @keyframes pulseDot {\r\n 0%, 100% { opacity: 1; transform: scale(1); }\r\n 50% { opacity: 0.2; transform: scale(0.5); }\r\n }\r\n\r\n \/* ===== TITLE ===== *\/\r\n .hero-title {\r\n font-family: 'Source Serif 4', serif;\r\n font-weight: 700;\r\n font-size: 52px;\r\n line-height: 1.05;\r\n color: #ffffff;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .hero-title .gold {\r\n background: linear-gradient(135deg, #FFB800 0%, #FF8C00 50%, #FFB800 100%);\r\n background-size: 200% 200%;\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n background-clip: text;\r\n animation: goldMove 5s ease-in-out infinite;\r\n }\r\n\r\n @keyframes goldMove {\r\n 0%, 100% { background-position: 0% 50%; }\r\n 50% { background-position: 100% 50%; }\r\n }\r\n\r\n \/* ===== DIVIDER ===== *\/\r\n .hero-divider {\r\n display: flex;\r\n align-items: center;\r\n gap: 16px;\r\n margin: 2px 0 4px;\r\n }\r\n\r\n .hero-divider .label {\r\n font-size: 11px;\r\n font-weight: 400;\r\n color: rgb(255, 255, 255);\r\n font-family: 'Work Sans', sans-serif;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n }\r\n\r\n \/* ===== SUBTITLE ===== *\/\r\n .hero-subtitle {\r\n font-size: 16px;\r\n font-weight: 300;\r\n color: rgba(255, 255, 255, 0.45);\r\n line-height: 1.8;\r\n max-width: 480px;\r\n font-family: 'Work Sans', sans-serif;\r\n letter-spacing: 0.2px;\r\n }\r\n\r\n .hero-subtitle strong {\r\n color: rgba(255, 255, 255, 0.7);\r\n font-weight: 500;\r\n }\r\n\r\n \/* ===== BUTTONS ===== *\/\r\n .hero-actions {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 12px;\r\n margin-top: 4px;\r\n }\r\n\r\n .hero-btn-primary,\r\n .hero-btn-secondary {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 14px 34px;\r\n border-radius: 50px;\r\n font-size: 13px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n text-decoration: none;\r\n font-family: 'Work Sans', sans-serif;\r\n border: none;\r\n white-space: nowrap;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .hero-btn-primary {\r\n background: linear-gradient(135deg, #FFB800, #F59900);\r\n color: #080F1A;\r\n box-shadow: 0 4px 30px rgba(255, 184, 0, 0.2);\r\n }\r\n\r\n .hero-btn-primary::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(135deg, #FFC84D, #FF8A00);\r\n opacity: 0;\r\n transition: 0.4s ease;\r\n }\r\n\r\n .hero-btn-primary:hover {\r\n transform: translateY(-3px) scale(1.02);\r\n box-shadow: 0 8px 50px rgba(255, 184, 0, 0.3);\r\n }\r\n\r\n .hero-btn-primary:hover::after {\r\n opacity: 1;\r\n }\r\n\r\n .hero-btn-primary span,\r\n .hero-btn-primary svg {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .hero-btn-secondary {\r\n background: rgba(255, 255, 255, 0.02);\r\n border: 1px solid rgba(255, 255, 255, 0.06);\r\n color: rgba(255, 255, 255, 0.7);\r\n }\r\n\r\n .hero-btn-secondary::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: rgba(255, 255, 255, 0.04);\r\n opacity: 0;\r\n transition: 0.4s ease;\r\n border-radius: 50px;\r\n }\r\n\r\n .hero-btn-secondary:hover {\r\n transform: translateY(-3px);\r\n border-color: rgba(255, 184, 0, 0.15);\r\n color: #ffffff;\r\n }\r\n\r\n .hero-btn-secondary:hover::after {\r\n opacity: 1;\r\n }\r\n\r\n .hero-btn-secondary span,\r\n .hero-btn-secondary svg {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* ===== TRUST BAR ===== *\/\r\n .hero-trust {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 8px 24px;\r\n margin-top: 6px;\r\n padding-top: 18px;\r\n border-top: 1px solid rgba(255, 255, 255, 0.03);\r\n }\r\n\r\n .hero-trust-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-size: 12px;\r\n color: rgb(255, 255, 255);\r\n font-family: 'Work Sans', sans-serif;\r\n font-weight: 300;\r\n letter-spacing: 0.2px;\r\n transition: 0.3s ease;\r\n }\r\n\r\n .hero-trust-item:hover {\r\n color: rgba(255, 255, 255, 0.5);\r\n }\r\n\r\n .hero-trust-item .icon {\r\n font-size: 14px;\r\n color: #FFB800;\r\n opacity: 0.4;\r\n transition: 0.3s ease;\r\n font-style: normal;\r\n }\r\n\r\n .hero-trust-item:hover .icon {\r\n opacity: 0.8;\r\n }\r\n\r\n \/* ============================================================\r\n RIGHT - IMAGE + BADGES\r\n ============================================================ *\/\r\n .hero-image-wrapper {\r\n position: relative;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .hero-image-wrapper .main-image {\r\n width: 100%;\r\n max-width: 560px;\r\n height: auto;\r\n border-radius: 20px;\r\n object-fit: cover;\r\n box-shadow: 0 40px 120px rgba(0, 0, 0, 0.5);\r\n border: 1px solid rgba(255, 255, 255, 0.03);\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n \/* RESPONSIVE *\/\r\n @media (min-width: 1440px) {\r\n .hero-section { padding: 140px 60px 100px; }\r\n .hero-title { font-size: 58px; }\r\n .hero-container { gap: 70px; }\r\n .hero-btn-primary, .hero-btn-secondary { padding: 16px 44px; font-size: 14px; }\r\n }\r\n\r\n @media (max-width: 1280px) {\r\n .hero-title { font-size: 44px; }\r\n .hero-container { gap: 50px; }\r\n }\r\n\r\n @media (max-width: 1199px) {\r\n .hero-title { font-size: 40px; }\r\n .hero-container { gap: 40px; }\r\n .hero-btn-primary, .hero-btn-secondary { padding: 12px 28px; font-size: 12px; }\r\n }\r\n\r\n @media (max-width: 1024px) {\r\n .hero-section { \r\n padding: 40px 30px 50px; \r\n min-height: auto; \r\n }\r\n .hero-container { \r\n grid-template-columns: 1fr; \r\n gap: 30px; \r\n }\r\n .hero-content { order: 1; }\r\n .hero-image-wrapper { order: 2; }\r\n .hero-title { font-size: 36px; }\r\n .hero-subtitle { font-size: 15px; max-width: 100%; }\r\n .hero-image-wrapper .main-image { max-width: 100%; }\r\n .hero-trust { gap: 6px 16px; }\r\n .hero-trust-item { font-size: 11px; }\r\n .hero-divider .label { font-size: 10px; }\r\n .hero-breadcrumb { font-size: 12px; }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .hero-section { \r\n padding: 30px 20px 40px; \r\n }\r\n .hero-title { font-size: 30px; }\r\n .hero-subtitle { font-size: 14px; }\r\n .hero-btn-primary, .hero-btn-secondary { \r\n padding: 11px 22px; \r\n font-size: 12px; \r\n flex: 1 1 auto; \r\n justify-content: center; \r\n }\r\n .hero-trust { gap: 6px 12px; }\r\n .hero-trust-item { font-size: 10px; }\r\n .hero-divider .label { font-size: 9px; }\r\n .hero-breadcrumb { font-size: 11px; }\r\n .hero-container { gap: 24px; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .hero-section { \r\n padding: 20px 16px 30px; \r\n }\r\n .hero-title { font-size: 24px; }\r\n .hero-badge { font-size: 8px; padding: 4px 12px 4px 10px; gap: 8px; }\r\n .hero-badge .badge-dot { width: 5px; height: 5px; }\r\n .hero-subtitle { font-size: 13px; }\r\n .hero-actions { flex-direction: row; flex-wrap: wrap; gap: 8px; width: 100%; }\r\n .hero-btn-primary, .hero-btn-secondary { \r\n flex: 1 1 auto; \r\n min-width: 110px; \r\n padding: 9px 14px; \r\n font-size: 11px; \r\n gap: 6px; \r\n }\r\n .hero-btn-primary svg, .hero-btn-secondary svg { width: 13px; height: 13px; }\r\n .hero-trust { flex-direction: row; flex-wrap: wrap; gap: 4px 10px; padding-top: 12px; }\r\n .hero-trust-item { font-size: 9px; gap: 4px; }\r\n .hero-trust-item .icon { font-size: 11px; }\r\n .hero-divider .label { font-size: 8px; letter-spacing: 1.5px; }\r\n .hero-breadcrumb { font-size: 10px; }\r\n .hero-container { gap: 18px; }\r\n }\r\n\r\n @media (max-width: 400px) {\r\n .hero-title { font-size: 20px; }\r\n .hero-btn-primary, .hero-btn-secondary { min-width: 90px; padding: 7px 10px; font-size: 10px; }\r\n .hero-btn-primary svg, .hero-btn-secondary svg { width: 11px; height: 11px; }\r\n .hero-trust-item { font-size: 8px; }\r\n .hero-trust { gap: 3px 8px; }\r\n }\r\n\r\n @media (max-width: 360px) {\r\n .hero-title { font-size: 18px; }\r\n .hero-btn-primary, .hero-btn-secondary { min-width: 80px; padding: 6px 8px; font-size: 9px; gap: 4px; }\r\n .hero-btn-primary svg, .hero-btn-secondary svg { width: 10px; height: 10px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <section class=\"hero-section\">\r\n\r\n <!-- Background -->\r\n <div class=\"hero-bg\"><\/div>\r\n\r\n <div class=\"hero-container\">\r\n\r\n <!-- LEFT CONTENT -->\r\n <div class=\"hero-content\">\r\n\r\n <!-- Breadcrumb -->\r\n <div class=\"hero-breadcrumb\">\r\n <a href=\"\/\">Home<\/a>\r\n <span class=\"sep\">\/<\/span>\r\n <span class=\"current\">Medi Spa Clinic<\/span>\r\n <\/div>\r\n\r\n <!-- Title -->\r\n <h1 class=\"hero-title\">\r\n Real treatments. <br><span class=\"gold\">Real training.<\/span>\r\n <\/h1>\r\n\r\n <!-- Divider -->\r\n <div class=\"hero-divider\">\r\n <span style=\"color: #FBAB00;\">\u25c9<\/span>\r\n <span class=\"label\">Student-Led Care<\/span>\r\n <\/div>\r\n\r\n <!-- Subtitle -->\r\n <p class=\"hero-subtitle\">\r\n Laser hair removal, Botox, Massage and more \u2014 performed by our students \r\n under <strong>licensed supervision<\/strong>, at a fraction of typical spa pricing. \r\n Book a treatment and support the next generation of professionals.\r\n <\/p>\r\n\r\n <!-- Buttons -->\r\n <div class=\"hero-actions\">\r\n <a href=\"#\" class=\"hero-btn-primary\">\r\n <span>Book a Treatment<\/span>\r\n <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/>\r\n <polyline points=\"12 5 19 12 12 19\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <!-- Trust -->\r\n <div class=\"hero-trust\">\r\n <span class=\"hero-trust-item\">\r\n <span class=\"icon\">\u2726<\/span> Licensed supervision\r\n <\/span>\r\n <span class=\"hero-trust-item\">\r\n <span class=\"icon\">\u25c8<\/span> Student-led care\r\n <\/span>\r\n <span class=\"hero-trust-item\">\r\n <span class=\"icon\">\u2713<\/span> Affordable pricing\r\n <\/span>\r\n <span class=\"hero-trust-item\">\r\n <span class=\"icon\">\u25c9<\/span> On-site clinic\r\n <\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <!-- RIGHT CONTENT -->\r\n <div class=\"hero-image-wrapper\">\r\n\r\n <!-- Main Image -->\r\n <img decoding=\"async\" \r\n src=\"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-content\/uploads\/2026\/09\/8016.webp\" \r\n alt=\"Medi Spa Clinic at Elite College\" \r\n class=\"main-image\"\r\n loading=\"lazy\"\r\n >\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-56c694b e-con-full e-flex e-con e-parent\" data-id=\"56c694b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8edb769 elementor-widget elementor-widget-html\" data-id=\"8edb769\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\" \/>\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\r\n <title>Before & After \u2014 Elite College Medi Spa<\/title>\r\n <!-- Google Fonts -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap\" rel=\"stylesheet\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Work+Sans:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: 'Work Sans', sans-serif;\r\n background: #ffffff;\r\n }\r\n\r\n .ba-section {\r\n position: relative;\r\n width: 100%;\r\n padding: 60px 40px;\r\n background: #ffffff;\r\n overflow: hidden;\r\n }\r\n\r\n .ba-bg {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 0;\r\n background:\r\n radial-gradient(ellipse at 30% 20%, rgba(195, 21, 69, 0.015) 0%, transparent 50%),\r\n radial-gradient(ellipse at 70% 80%, rgba(195, 21, 69, 0.015) 0%, transparent 50%);\r\n }\r\n\r\n .ba-container {\r\n max-width: 1200px;\r\n width: 100%;\r\n margin: 0 auto;\r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .ba-header {\r\n text-align: center;\r\n margin-bottom: 48px;\r\n }\r\n\r\n .ba-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 8px;\r\n background: rgba(195, 21, 69, 0.04);\r\n border: 1px solid rgba(195, 21, 69, 0.06);\r\n padding: 4px 14px 4px 10px;\r\n border-radius: 50px;\r\n font-size: 9px;\r\n font-weight: 600;\r\n color: #C31545;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n font-family: 'Work Sans', sans-serif;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .ba-badge .badge-dot {\r\n width: 5px;\r\n height: 5px;\r\n background: #C31545;\r\n border-radius: 50%;\r\n animation: pulseDot 1.8s ease-in-out infinite;\r\n }\r\n\r\n @keyframes pulseDot {\r\n 0%, 100% { opacity: 1; transform: scale(1); }\r\n 50% { opacity: 0.2; transform: scale(0.5); }\r\n }\r\n\r\n .ba-title {\r\n font-family: 'Source Serif 4', serif;\r\n font-weight: 700;\r\n font-size: 40px;\r\n line-height: 1.05;\r\n color: #1a1a1a;\r\n letter-spacing: -0.5px;\r\n }\r\n\r\n .ba-title .gold {\r\n color: #C31545;\r\n }\r\n\r\n .ba-divider {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 12px;\r\n margin: 6px 0 10px;\r\n }\r\n\r\n .ba-divider .line {\r\n width: 30px;\r\n height: 1.5px;\r\n background: #C31545;\r\n border-radius: 2px;\r\n opacity: 0.3;\r\n }\r\n\r\n .ba-divider .label {\r\n font-size: 10px;\r\n font-weight: 400;\r\n color: #bbbbbb;\r\n font-family: 'Work Sans', sans-serif;\r\n letter-spacing: 2px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .ba-subtitle {\r\n font-size: 15px;\r\n font-weight: 300;\r\n color: rgba(0, 0, 0, 0.55);\r\n line-height: 1.8;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n font-family: 'Work Sans', sans-serif;\r\n }\r\n\r\n \/* ============================================================\r\n GRID - 3 COLUMNS\r\n ============================================================ *\/\r\n .ba-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 24px;\r\n }\r\n\r\n .ba-card {\r\n background: #ffffff;\r\n border: 1px solid rgba(0, 0, 0, 0.04);\r\n border-radius: 16px;\r\n overflow: hidden;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);\r\n }\r\n\r\n .ba-card:hover {\r\n border-color: rgba(195, 21, 69, 0.08);\r\n box-shadow: 0 8px 30px rgba(195, 21, 69, 0.04);\r\n transform: translateY(-3px);\r\n }\r\n\r\n \/* ===== IMAGE WRAPPER - FIX: FULL IMAGE ===== *\/\r\n .ba-card .ba-image-wrapper {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 2px;\r\n background: #f5f0eb;\r\n }\r\n\r\n .ba-card .ba-image-wrapper .ba-img {\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n background: #f5f0eb;\r\n }\r\n\r\n .ba-card .ba-image-wrapper .ba-img img {\r\n width: 100%;\r\n height: auto;\r\n display: block;\r\n transition: transform 0.4s ease;\r\n }\r\n\r\n .ba-card:hover .ba-image-wrapper .ba-img img {\r\n transform: scale(1.02);\r\n }\r\n\r\n \/* ===== LABELS ===== *\/\r\n .ba-card .ba-image-wrapper .ba-img .ba-label {\r\n position: absolute;\r\n bottom: 8px;\r\n left: 8px;\r\n font-size: 9px;\r\n font-weight: 600;\r\n color: #ffffff;\r\n background: rgba(0, 0, 0, 0.5);\r\n backdrop-filter: blur(4px);\r\n padding: 2px 12px;\r\n border-radius: 12px;\r\n letter-spacing: 0.5px;\r\n text-transform: uppercase;\r\n font-family: 'Work Sans', sans-serif;\r\n }\r\n\r\n .ba-card .ba-image-wrapper .ba-img .ba-label.before {\r\n background: rgba(195, 21, 69, 0.5);\r\n }\r\n\r\n .ba-card .ba-image-wrapper .ba-img .ba-label.after {\r\n background: rgba(30, 150, 80, 0.5);\r\n }\r\n\r\n \/* ===== INFO ===== *\/\r\n .ba-card .ba-info {\r\n padding: 14px 16px 16px;\r\n text-align: center;\r\n }\r\n\r\n .ba-card .ba-info h4 {\r\n font-family: 'Source Serif 4', serif;\r\n font-size: 16px;\r\n font-weight: 600;\r\n color: #1a1a1a;\r\n margin-bottom: 2px;\r\n }\r\n\r\n .ba-card .ba-info p {\r\n font-size: 12px;\r\n color: rgba(0, 0, 0, 0.45);\r\n font-family: 'Work Sans', sans-serif;\r\n font-weight: 400;\r\n }\r\n\r\n \/* ============================================================\r\n RESPONSIVE\r\n ============================================================ *\/\r\n @media (min-width: 1440px) {\r\n .ba-section { padding: 100px 60px; }\r\n .ba-title { font-size: 46px; }\r\n .ba-grid { gap: 30px; }\r\n }\r\n\r\n @media (max-width: 1280px) {\r\n .ba-title { font-size: 36px; }\r\n .ba-grid { gap: 20px; }\r\n }\r\n\r\n @media (max-width: 1199px) {\r\n .ba-title { font-size: 32px; }\r\n .ba-grid { gap: 16px; }\r\n .ba-card .ba-info h4 { font-size: 15px; }\r\n .ba-card .ba-info p { font-size: 11px; }\r\n }\r\n\r\n @media (max-width: 1024px) {\r\n .ba-section { padding: 60px 30px; }\r\n .ba-title { font-size: 28px; }\r\n .ba-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .ba-section { padding: 50px 20px; }\r\n .ba-title { font-size: 24px; }\r\n .ba-header { margin-bottom: 32px; }\r\n .ba-subtitle { font-size: 14px; }\r\n .ba-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }\r\n .ba-card .ba-info { padding: 10px 12px 12px; }\r\n .ba-card .ba-info h4 { font-size: 14px; }\r\n .ba-card .ba-info p { font-size: 11px; }\r\n .ba-divider .line { width: 24px; }\r\n .ba-divider .label { font-size: 9px; }\r\n .ba-badge { font-size: 8px; padding: 3px 10px 3px 8px; }\r\n .ba-badge .badge-dot { width: 4px; height: 4px; }\r\n .ba-card .ba-image-wrapper .ba-img .ba-label { font-size: 8px; padding: 1px 8px; bottom: 4px; left: 4px; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .ba-section { padding: 40px 16px; }\r\n .ba-title { font-size: 20px; }\r\n .ba-header { margin-bottom: 24px; }\r\n .ba-subtitle { font-size: 13px; }\r\n .ba-grid { grid-template-columns: 1fr; gap: 14px; max-width: 400px; margin: 0 auto; }\r\n .ba-card .ba-info h4 { font-size: 15px; }\r\n .ba-card .ba-info p { font-size: 12px; }\r\n .ba-divider .line { width: 18px; height: 1px; }\r\n .ba-divider .label { font-size: 8px; letter-spacing: 1.5px; }\r\n .ba-badge { font-size: 7px; padding: 2px 8px 2px 6px; gap: 4px; }\r\n .ba-badge .badge-dot { width: 4px; height: 4px; }\r\n }\r\n\r\n @media (max-width: 400px) {\r\n .ba-title { font-size: 18px; }\r\n .ba-grid { gap: 12px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <section class=\"ba-section\">\r\n\r\n <div class=\"ba-bg\"><\/div>\r\n\r\n <div class=\"ba-container\">\r\n\r\n <div class=\"ba-header\">\r\n <h2 class=\"ba-title\">\r\n Before & <span class=\"gold\">After<\/span>\r\n <\/h2>\r\n <div class=\"ba-divider\">\r\n <span class=\"line\"><\/span>\r\n <span class=\"label\">Real Student Work<\/span>\r\n <span class=\"line\"><\/span>\r\n <\/div>\r\n <p class=\"ba-subtitle\">\r\n See the incredible transformations performed by our students under licensed supervision.\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- GRID -->\r\n <div class=\"ba-grid\">\r\n\r\n <!-- 1 -->\r\n <div class=\"ba-card\">\r\n <div class=\"ba-image-wrapper\">\r\n <div class=\"ba-img\">\r\n <img decoding=\"async\" src=\"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-content\/uploads\/2026\/09\/Untitled-design-1.png\" alt=\"Before\" \/>\r\n <\/div>\r\n <div class=\"ba-img\">\r\n <img decoding=\"async\" src=\"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-content\/uploads\/2026\/09\/Untitled-design-2.png\" alt=\"After\" \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ba-info\">\r\n <h4>Laser Hair Removal<\/h4>\r\n <p>Student treatment \u2014 3 sessions<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 2 -->\r\n <div class=\"ba-card\">\r\n <div class=\"ba-image-wrapper\">\r\n <div class=\"ba-img\">\r\n <img decoding=\"async\" src=\"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-content\/uploads\/2026\/09\/Untitled-design-4.png\" alt=\"Before\" \/>\r\n <\/div>\r\n <div class=\"ba-img\">\r\n <img decoding=\"async\" src=\"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-content\/uploads\/2026\/09\/Untitled-design-3.png\" alt=\"After\" \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ba-info\">\r\n <h4>Botox Treatment<\/h4>\r\n <p>Student treatment \u2014 2 sessions<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 3 -->\r\n <div class=\"ba-card\">\r\n <div class=\"ba-image-wrapper\">\r\n <div class=\"ba-img\">\r\n <img decoding=\"async\" src=\"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-content\/uploads\/2026\/09\/Untitled-design-5.png\" alt=\"Before\" \/>\r\n <\/div>\r\n <div class=\"ba-img\">\r\n <img decoding=\"async\" src=\"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-content\/uploads\/2026\/09\/Untitled-design-6.png\" alt=\"After\" \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ba-info\">\r\n <h4>Lash & Brow Lift<\/h4>\r\n <p>Student treatment \u2014 1 session<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 4 -->\r\n <div class=\"ba-card\">\r\n <div class=\"ba-image-wrapper\">\r\n <div class=\"ba-img\">\r\n <img decoding=\"async\" src=\"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-content\/uploads\/2026\/09\/Untitled-design-8.png\" alt=\"Before\" \/>\r\n <\/div>\r\n <div class=\"ba-img\">\r\n <img decoding=\"async\" src=\"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-content\/uploads\/2026\/09\/Untitled-design-9.png\" alt=\"After\" \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ba-info\">\r\n <h4>Microblading<\/h4>\r\n <p>Student treatment \u2014 2 sessions<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 5 -->\r\n <div class=\"ba-card\">\r\n <div class=\"ba-image-wrapper\">\r\n <div class=\"ba-img\">\r\n <img decoding=\"async\" src=\"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-content\/uploads\/2026\/09\/Untitled-design-10.png\" alt=\"Before\" \/>\r\n <\/div>\r\n <div class=\"ba-img\">\r\n <img decoding=\"async\" src=\"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-content\/uploads\/2026\/09\/Untitled-design-11.png\" alt=\"After\" \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ba-info\">\r\n <h4>Dermal Filler<\/h4>\r\n <p>Student treatment \u2014 2 sessions<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 6 -->\r\n <div class=\"ba-card\">\r\n <div class=\"ba-image-wrapper\">\r\n <div class=\"ba-img\">\r\n <img decoding=\"async\" src=\"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-content\/uploads\/2026\/09\/Untitled-design-12.png\" alt=\"Before\" \/>\r\n <\/div>\r\n <div class=\"ba-img\">\r\n <img decoding=\"async\" src=\"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-content\/uploads\/2026\/09\/Untitled-design-13.png\" alt=\"After\" \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ba-info\">\r\n <h4>Camouflage Tattoo<\/h4>\r\n <p>Student treatment \u2014 3 sessions<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 7 -->\r\n <div class=\"ba-card\">\r\n <div class=\"ba-image-wrapper\">\r\n <div class=\"ba-img\">\r\n <img decoding=\"async\" src=\"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-content\/uploads\/2026\/09\/Untitled-design-18.png\" alt=\"Before\" \/>\r\n <\/div>\r\n <div class=\"ba-img\">\r\n <img decoding=\"async\" src=\"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-content\/uploads\/2026\/09\/Untitled-design-19.png\" alt=\"After\" \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ba-info\">\r\n <h4>Hair Extension<\/h4>\r\n <p>Student treatment \u2014 2 sessions<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 8 -->\r\n <div class=\"ba-card\">\r\n <div class=\"ba-image-wrapper\">\r\n <div class=\"ba-img\">\r\n <img decoding=\"async\" src=\"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-content\/uploads\/2026\/09\/Untitled-design-20.png\" \/>\r\n <\/div>\r\n <div class=\"ba-img\">\r\n <img decoding=\"async\" src=\"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-content\/uploads\/2026\/09\/Untitled-design-21.png\" alt=\"After\" \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ba-info\">\r\n <h4>Nail Art & Design<\/h4>\r\n <p>Student treatment \u2014 1 session<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 9 -->\r\n <div class=\"ba-card\">\r\n <div class=\"ba-image-wrapper\">\r\n <div class=\"ba-img\">\r\n <img decoding=\"async\" src=\"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-content\/uploads\/2026\/09\/Untitled-design-22.png\" alt=\"Before\" \/>\r\n <\/div>\r\n <div class=\"ba-img\">\r\n <img decoding=\"async\" src=\"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-content\/uploads\/2026\/09\/Untitled-design-23.png\" alt=\"After\" \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ba-info\">\r\n <h4>Makeup Artistry<\/h4>\r\n <p>Student treatment \u2014 1 session<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 10 -->\r\n <div class=\"ba-card\">\r\n <div class=\"ba-image-wrapper\">\r\n <div class=\"ba-img\">\r\n <img decoding=\"async\" src=\"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-content\/uploads\/2026\/09\/Untitled-design-24.png\" alt=\"Before\" \/>\r\n <\/div>\r\n <div class=\"ba-img\">\r\n <img decoding=\"async\" src=\"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-content\/uploads\/2026\/09\/Untitled-design-25.png\" alt=\"After\" \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ba-info\">\r\n <h4>Massage Therapy<\/h4>\r\n <p>Student treatment \u2014 3 sessions<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- 11 -->\r\n <div class=\"ba-card\">\r\n <div class=\"ba-image-wrapper\">\r\n <div class=\"ba-img\">\r\n <img decoding=\"async\" src=\"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-content\/uploads\/2026\/09\/Untitled-design-26.png\" alt=\"Before\" \/>\r\n <\/div>\r\n <div class=\"ba-img\">\r\n <img decoding=\"async\" src=\"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-content\/uploads\/2026\/09\/Untitled-design-27.png\" alt=\"After\" \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ba-info\">\r\n <h4>Tattoo Removal<\/h4>\r\n <p>Student treatment \u2014 4 sessions<\/p>\r\n <\/div>\r\n <\/div>\r\n \r\n <!-- 12 -->\r\n <div class=\"ba-card\">\r\n <div class=\"ba-image-wrapper\">\r\n <div class=\"ba-img\">\r\n <img decoding=\"async\" src=\"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-content\/uploads\/2026\/09\/Untitled-design-28.png\" alt=\"Before\" \/>\r\n <\/div>\r\n <div class=\"ba-img\">\r\n <img decoding=\"async\" src=\"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-content\/uploads\/2026\/09\/Untitled-design-29.png\" alt=\"After\" \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ba-info\">\r\n <h4>Tattoo Removal<\/h4>\r\n <p>Student treatment \u2014 4 sessions<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\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>Medi Spa Clinic \u2014 Elite College Home \/ Medi Spa Clinic Real treatments. Real training. \u25c9 Student-Led Care Laser hair removal, Botox, Massage and more \u2014 performed by our students under licensed supervision, at a fraction of typical spa pricing. Book a treatment and support the next generation of professionals. Book a Treatment \u2726 Licensed […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-716","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-json\/wp\/v2\/pages\/716","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-json\/wp\/v2\/comments?post=716"}],"version-history":[{"count":22,"href":"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-json\/wp\/v2\/pages\/716\/revisions"}],"predecessor-version":[{"id":795,"href":"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-json\/wp\/v2\/pages\/716\/revisions\/795"}],"wp:attachment":[{"href":"https:\/\/w3webhelp.in\/sample\/elite-college\/wp-json\/wp\/v2\/media?parent=716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}