/* Theme Name: OceanWP Child Theme URI: https://oceanwp.org/ Template: oceanwp Author: OceanWP Author URI: https://oceanwp.org/about-oceanwp/ Description: OceanWP is the perfect theme for your project. Lightweight and highly extendable, it will enable you to create almost any type of website such a blog, portfolio, business website and WooCommerce storefront with a beautiful & professional design. Very fast, responsive, RTL & translation ready, best SEO practices, unique WooCommerce features to increase conversion and much more. You can even edit the settings on tablet & mobile so your site looks good on every device. Work with the most popular page builders as Elementor, Beaver Builder, Brizy, Visual Composer, Divi, SiteOrigin, etc... Developers will love his extensible codebase making it a joy to customize and extend. Best friend of Elementor & WooCommerce. Looking for a Multi-Purpose theme? Look no further! Check the demos to realize that it's the only theme you will ever need: https://oceanwp.org/demos/ Tags: two-columns,right-sidebar,footer-widgets,blog,news,custom-background,custom-menu,post-formats,rtl-language-support,sticky-post,editor-style,threaded-comments,translation-ready,buddypress,custom-colors,featured-images,full-width-template,theme-options,e-commerce,block-styles,wide-blocks,accessibility-ready Version: 4.2.3.1787199070 Updated: 2026-08-20 04:11:10 */ #top-bar { padding: 0px 0; } .content-area{ margin-bottom: 0px; } .page-header{ display:none; } #main #content-wrap { padding-top: 0px; padding-bottom: 0px; } .content-area{ width: 100%; padding-right: 0px; } a{ text-decoration:none !important; } :root{ --pink: #E31C79; --pink-dark: #B81463; --pink-deep: #8E0E4C; --pink-tint: #FDEDF4; --cream: #FBF3E8; --white: #FFFFFF; --ink: #1A1A1A; --ink-soft: #6B6660; --line: #F0E3D8; --radius: 22px; --shadow-sm: 0 2px 14px rgba(227,28,121,0.08); --shadow-md: 0 14px 34px rgba(184,20,99,0.16); --shadow-lg: 0 26px 60px rgba(142,14,76,0.22); --maxw: 1320px; } *{margin:0;padding:0;box-sizing:border-box;} body{font-family:'Inter',sans-serif;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;} h1,h2,h3,h4{font-family:'Poppins',sans-serif;font-weight:700;color:var(--ink);letter-spacing:-0.01em;} a{text-decoration:none;color:inherit;} img{max-width:100%;display:block;} button{font-family:inherit;cursor:pointer;border:none;background:none;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;} .script{font-family:'Playball',cursive;color:var(--pink);font-size:22px;font-weight:400;} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 27px;border-radius:100px;font-weight:600;font-size:14px;transition:.3s;white-space:nowrap;} .btn-primary{background:var(--pink);color:#fff;box-shadow:var(--shadow-md);} .btn-primary:hover{background:var(--pink-dark);transform:translateY(-3px);box-shadow:0 18px 36px rgba(184,20,99,.28);color:#fff!important;} .btn-outline{border:1.5px solid var(--ink);color:var(--ink);} .btn-outline:hover{background:var(--ink);color:#fff;transform:translateY(-3px);} /* HEADER */ header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);} .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:5px 40px;max-width:var(--maxw);margin:0 auto;} .logo{display:flex;align-items:center;gap:10px;} .logo img{width:75px;} #desktopBookBtn img{width:200px;} .main-nav{display:flex;align-items:center;gap:4px;list-style:none;} .main-nav>li{position:relative;} .main-nav>li>a{display:flex;align-items:center;gap:5px;padding:10px 15px;font-size:16px;font-weight:500;color:var(--ink);border-radius:100px;transition:.25s;cursor:pointer;} .main-nav>li>a:hover{background:var(--pink-tint);color:var(--pink);} .main-nav>li.active>a{color:var(--pink);} .main-nav>li>a svg{width:12px;height:12px;transition:transform .25s;} .main-nav>li.open>a svg{transform:rotate(180deg);} .main-nav>li.open>a{background:var(--pink-tint);color:var(--pink);} /* MEGA MENU */ .mega{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(6px); width:min(900px,88vw);background:#fff;border-radius:20px;box-shadow:var(--shadow-lg);border:1px solid var(--line); padding:34px;display:grid;grid-template-columns:repeat(4,1fr);gap:0 22px; opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:120;} #mainNav > li.open .mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);} .mega-col h4{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--pink);margin-bottom:16px;font-weight:700;border-bottom:1px solid var(--line);padding-bottom:10px;} .mega-col a{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:10px;font-size:13.3px;color:var(--ink-soft);font-weight:500;transition:.2s;line-height:1.25;} .mega-col a:hover{background:var(--pink-tint);color:var(--pink-dark);transform:translateX(2px);} .mega-col a .tile{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--pink-tint),#fdf7fb);color:var(--pink);display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--line);} .mega-col a .tile svg{width:16px;height:16px;} .mega-col a:hover .tile{background:linear-gradient(135deg,var(--pink),var(--pink-dark));color:#fff;border-color:transparent;} .mega-foot{grid-column:1/-1;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px;} .mega-foot p{font-size:12.5px;color:var(--ink-soft);max-width:360px;} .mega-foot .btn{padding:11px 22px;font-size:13px;} /* REVEAL / FADE-UP ANIMATION (used across this and future sections) */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);} .reveal.in{opacity:1;transform:translateY(0);} .reveal-delay-1.in{transition-delay:.1s;} .reveal-delay-2.in{transition-delay:.2s;} .reveal-delay-3.in{transition-delay:.3s;} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} } /* BURGER + MOBILE NAV */ .burger{display:none;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;background:var(--pink-tint);flex-shrink:0;} .burger svg{width:20px;height:20px;color:var(--pink-dark);} .mobile-nav-overlay{display:none;position:fixed;inset:0;background:rgba(20,10,15,.45);z-index:198;} .mobile-nav-overlay.show{display:block;} .mobile-nav{position:fixed;top:0;right:-100%;width:min(340px,86vw);height:100%;background:#fff;z-index:199; box-shadow:-10px 0 40px rgba(0,0,0,.18);transition:right .35s cubic-bezier(.2,.8,.2,1);overflow-y:auto;} .mobile-nav.show{right:0;} .mobile-nav-head{display:flex;align-items:center;justify-content:space-between;padding:20px;border-bottom:1px solid var(--line);} .mobile-nav-head img{height:42px;} .mobile-close{width:38px;height:38px;border-radius:50%;background:var(--pink-tint);color:var(--pink-dark);display:flex;align-items:center;justify-content:center;} .mobile-close svg{width:18px;height:18px;} .mobile-nav-list{list-style:none;padding:10px 12px 24px;} .mobile-nav-list>li{border-bottom:1px solid var(--line);} .mobile-nav-list>li>a{display:flex;align-items:center;justify-content:space-between;padding:15px 8px;font-size:15px;font-weight:600;color:var(--ink);} .mobile-nav-list>li>a svg{width:14px;height:14px;transition:transform .25s;color:var(--pink);} .mobile-nav-list>li.open>a svg{transform:rotate(180deg);} .mobile-submenu{max-height:0;overflow:hidden;transition:max-height .35s ease;} .mobile-nav-list>li.open .mobile-submenu{max-height:900px;} .mobile-sub-group{padding:6px 8px 14px;} .mobile-sub-group h5{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--pink);margin:12px 0 6px;font-weight:700;} .mobile-sub-group a{display:flex;align-items:center;gap:10px;padding:8px 4px;font-size:13.5px;color:var(--ink-soft);font-weight:500;} .mobile-sub-group a .tile{width:28px;height:28px;border-radius:8px;background:var(--pink-tint);color:var(--pink);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .mobile-sub-group a .tile svg{width:14px;height:14px;} .mobile-nav-foot{padding:18px 20px 30px;} .mobile-nav-foot .btn{width:100%;} /* HERO */ .hero{background:var(--cream);padding:40px 0 40px;overflow:hidden;} .hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;} .script-eyebrow{font-family:'Playball',cursive;color:var(--pink);font-size:24px;margin-bottom:0px;display:block;} .hero h1{font-size:clamp(28px,4.4vw,45px);line-height:1.08;margin-bottom:26px;font-weight:600;} .hero h1 span{color:var(--pink);} .hero-ctas{display:flex;gap:14px;margin-bottom:0;} .hero-visual{position:relative;} .hero-visual .photo-frame{position:relative;border-radius:0 0 200px 0;overflow:hidden;aspect-ratio:5/5.3;box-shadow:var(--shadow-lg);} .hero-visual .photo-frame img{width:100%;height:100%;object-fit:cover;object-position:center 20%;} .hero-visual .photo-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(227,28,121,0.04), rgba(184,20,99,0.10));} .float-card{position:absolute;background:#fff;border-radius:16px;padding:14px 18px;box-shadow:var(--shadow-md);display:flex;align-items:center;gap:12px;max-width:280px;} .float-card .ic{width:38px;height:38px;border-radius:11px;background:var(--pink-tint);color:var(--pink);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .float-card .ic svg{width:18px;height:18px;} .float-card strong{display:block;font-size:13px;font-family:'Poppins';} .float-card span{font-size:11px;color:var(--ink-soft);} .float-card.care{top:26px;left:-30px;} .float-card.tech{bottom:70px;right:-26px;} @media (max-width:768px){ .script-eyebrow{ font-size: 24px; } .hero h1{ line-height:1.50; } .wrap{ text-align:center; } } /* TEAM */ .team{padding:70px 0;} .team .wrap{display:grid;grid-template-columns:.95fr 1.05fr;gap:0;align-items:stretch;} .team-visual{position:relative;} .team-photo{border-radius:var(--radius) 0 0 var(--radius);overflow:hidden;aspect-ratio:4/3.6;box-shadow:var(--shadow-md);position:relative;} .team-photo img{width:100%;height:100%;object-fit:cover;} .team-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(184,20,99,0.06), rgba(142,14,76,0.14));} .team-tag{position:absolute;top:20px;left:20px;background:rgba(255,255,255,.92);border-radius:100px;padding:7px 16px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pink-dark);} .team-info{background:linear-gradient(120deg,var(--pink-dark),var(--pink));border-radius:0 var(--radius) var(--radius) 0;color:#fff;padding:48px 52px;display:flex;flex-direction:column;justify-content:center;margin-left:-1px;} .team-eyebrow{font-family:'Playball',cursive;font-size:22px;color:#FBC9DF;display:block;margin-bottom:4px;} .team-info h2{color:#fff;font-size:clamp(24px,2.6vw,36px);margin-bottom:22px;font-weight:600;} .team-info h3{color:#fff;font-size:19px;margin-bottom:4px;} .team-role{font-size:13.5px;color:#FBC9DF;font-weight:600;margin-bottom:16px;} .team-meta{display:flex;flex-direction:column;gap:8px;align-items: flex-start;} .team-meta span{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:rgba(255,255,255,.9);} .team-meta svg{width:16px;height:16px;flex-shrink:0;margin-top:1px;color:#dd1b76;} .icon-box{ background: white; height: 32px; width: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; } @media (max-width:1024px){ .main-nav{display:none;} .burger{display:flex;} .hero .wrap{grid-template-columns:1fr;} .hero-visual{order:-1;max-width:420px;margin:0 auto;} .float-card{display:none;} .team .wrap{grid-template-columns:1fr;} .team-photo{border-radius:var(--radius);} .team-info{border-radius:var(--radius);margin-left:0;margin-top:-24px;position:relative;z-index:2;max-width:92%;margin-left:auto;margin-right:auto;} } @media (max-width:680px){ .wrap{padding:0 20px;} .hero{padding:40px 0 60px;} .hero-ctas{flex-wrap:wrap;justify-content:center;} .team-info{padding:32px 28px;text-align:left;} .icon-box{display:none;} } .hero-ctas .btn-primary:hover{ color:#fff; } .mega-foot .btn-primary:hover{ color:#fff; } .skin-concerns-section{ font-family: 'Poppins', sans-serif; background-color: #fcfbfa; color: #2d2d2d; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 40px 20px; } .skin-concerns-container { max-width: 1200px; width: 100%; text-align: center; /* animation: fadeIn 1s ease-out; */ } .skin-concerns-container .subtitle{ color:var(--pink); } /* Header Styling */ .subtitle { font-family: 'Playball', cursive; font-style: italic; font-size: 36px; color: #ff3366; margin-bottom: 5px; font-weight: 600; line-height:34px; } .main-title { font-size: 36px; font-weight: 600; color: #1a1a1a; margin-bottom: 10px; } .description { color: #777777; margin-bottom: 50px; } /* Grid Layout (5 Columns Staggered) */ .concerns-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; align-items: stretch; } /* Card Styles */ .concern-card { background-color: #ff3366; border-radius: 16px; padding: 30px 20px; color: #ffffff; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; box-shadow: 0 10px 25px rgba(255, 51, 102, 0.2); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; min-height: 240px; } /* Tall Cards Spanning 2 Rows */ .concern-card.tall { grid-row: span 2; min-height: 500px; } /* Hover & Animation Effects */ .concern-card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(255, 51, 102, 0.35); } /* Icon Container */ .icon-circle { width: 70px; height: 70px; border: 1.5px solid rgba(255, 255, 255, 0.7); border-radius: 50%; display: flex; justify-content: center; align-items: center; margin-bottom: 20px; transition: background-color 0.3s ease, transform 0.3s ease; } .concern-card:hover .icon-circle { background-color: rgba(255, 255, 255, 0.1); transform: scale(1.05); } .icon-circle svg { width: 32px; height: 32px; stroke: #ffffff; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* Typography inside cards */ .concern-title { color:#fff; font-weight: 600; margin-bottom: 12px; } .concern-desc { line-height: 1.5; color: rgba(255, 255, 255, 0.9); max-width: 180px; } /* Keyframes for entrance animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Responsive Design for smaller screens */ @media (max-width: 1024px) { .concerns-grid { grid-template-columns: repeat(3, 1fr); } .concern-card.tall { grid-row: span 1; min-height: 240px; } } @media (max-width: 600px) { .concerns-grid { grid-template-columns: repeat(2, 1fr); } .main-title { font-size: 2rem; } } /* TREATMENTS SECTION */ .treat-section{background:var(--cream);padding:76px 0 0;} .treat-head{margin:0 auto 48px;text-align:center;} .treat-photos-wrap{position:relative;} .treat-pink-band{position:absolute;left:50%;transform:translateX(-50%);width:100vw;top:172px;bottom:-20px;background:var(--pink);z-index:0;} .treat-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;max-width:var(--maxw);margin:0 auto;padding:0 40px;} .treat-grid div{margin-bottom:30px;} .treat-photo{height:296px;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.14);background:#eee;} .treat-photo img{width:100%;height:100%;object-fit:cover;display:block;} .treat-photo.placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#F1789F,#C8125F);} .treat-photo.placeholder svg{width:30%;height:30%;opacity:.9;} .treat-text{padding-top:18px;color:#fff;} .treat-text .tag{display:block;font-size:14px;text-transform:uppercase;letter-spacing:.09em;color:#FBD3E4;font-weight:700;margin-bottom:9px;} .treat-text h4{color:#fff;font-size:18px;margin-bottom:8px;} .treat-text p{font-size:14px;color:rgba(255,255,255,.85);line-height:1.6;margin-bottom:14px;max-width:230px;} .treat-text a.learn{color:#fff;font-weight:600;font-size:13px;display:inline-flex;gap:6px;align-items:center;} .treat-text a.learn svg{width:14px;height:14px;transition:transform .25s;} .treat-text a.learn:hover svg{transform:translateX(3px);} @media (max-width:1024px){ .treat-grid{grid-template-columns:repeat(2,1fr);gap:32px 28px;} .treat-pink-band{top:172px;} } @media (max-width:680px){ .treat-grid{grid-template-columns:1fr;padding:0 20px;} .treat-photo{height:260px;} .treat-pink-band{top:152px;} } /* Footer Main Container */ .footer-section { background-color: #e61c72; /* Exact bright pink theme */ color: #ffffff; padding: 60px 40px 30px 40px; width: 100%; /* animation: fadeIn 1s ease-out; */ } .footer-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 40px; } /* Column 1: Brand & Socials */ .footer-brand { display: flex; flex-direction: column; } .footer-logo { width: 100px; height: auto; margin-bottom: 20px; } .brand-tagline { font-size: 16px; font-weight: bold; margin-bottom: 10px; } .brand-description { font-size: 13px; line-height: 1.6; color: rgba(255, 255, 255, 0.9); max-width: 280px; margin-bottom: 25px; } .social-icons { display: flex; gap: 15px; } .social-icons a { display: flex; justify-content: center; align-items: center; width: 36px; height: 36px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); color: #ffffff; font-size: 14px; text-decoration: none; transition: background-color 0.3s ease, transform 0.3s ease; } .social-icons a:hover { background-color: #ffffff; color: #e61c72; transform: translateY(-3px); } /* Column Headings */ .footer-col h3 { font-size: 15px; font-weight: 600; letter-spacing: 1px; margin-bottom: 20px; text-transform: capitalize; color:#fff; } /* Lists & Links */ .footer-links { list-style: none; margin-left:0; } .footer-links li { margin-bottom: 12px; } .footer-links a { color: rgba(255, 255, 255, 0.9); text-decoration: none; font-size: 13px; transition: color 0.3s ease, padding-left 0.3s ease; display: inline-block; } .footer-links a:hover { color: #ffffff; padding-left: 5px; } /* Contact Details */ .contact-list { list-style: none; margin-left:0; } .contact-list li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 15px; font-size: 13px; color: rgba(255, 255, 255, 0.9); line-height: 1.5; } .contact-list i { font-size: 14px; margin-top: 3px; } .contact-list a { color: rgba(255, 255, 255, 0.9); text-decoration: none; transition: color 0.3s ease; } .contact-list a:hover { color: #ffffff; text-decoration: underline; } /* Divider & Bottom Bar */ .footer-divider { max-width: 1200px; margin: 40px auto 20px auto; border: none; border-top: 1px solid rgba(255, 255, 255, 0.2); } /* Footer bottom section */ .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 25px; border-top: 1px solid rgba(255, 255, 255, 0.25); } /* Copyright text */ .footer-bottom p { margin: 0; color: #ffffff; font-size: 13px; } /* Developed by text */ .developed-by { text-align: right; } /* Byzero Technologies link */ .developed-by a { color: #ffffff; text-decoration: none; font-weight: 600; } .developed-by a:hover { opacity: 0.75; color: #ffffff !important; } /* Mobile responsive */ @media (max-width: 600px) { .footer-bottom { flex-direction: column; align-items: center; text-align: center; gap: 12px; } .developed-by { text-align: center; } } /* Entrance Animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Responsive Design */ @media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; } } @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; gap: 30px; } .footer-bottom { flex-direction: column; gap: 15px; text-align: center; } } .why-choose-section-container{ font-family: 'Poppins', sans-serif; background-color: #fcfbfa; color: #2d2d2d; display: flex; justify-content: center; align-items: center; padding: 40px 20px; } .why-choose-subtitle { color:#e61c72 !important; } .why-choose-section { max-width: 1200px; width: 100%; display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; /* animation: fadeIn 1s ease-out; */ } /* Left Column: Image with Artistic Pink Frame */ .image-wrapper { position: relative; padding: 10px; top:-60px; } .image-container { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08); z-index: 2; } .image-container img { width: 100%; height: 480px; object-fit: cover; display: block; transition: transform 0.5s ease; } .image-container:hover img { transform: scale(1.03); } /* Custom Pink Border Frame */ .image-frame { position: absolute; top: 0; left: 0; width: 85%; height: 90%; border: 5px solid #e61c72; border-radius: 24px; z-index: 1; pointer-events: none; background:#e61c72; } .image-frame-bottom { position: absolute; bottom: 0; right: 0; width: 85%; height: 90%; border: 5px solid #e61c72; border-radius: 24px; z-index: 1; pointer-events: none; background:#e61c72; } /* Right Column: Content */ .content-wrapper { display: flex; flex-direction: column; } .subtitle { font-family: 'Playball', cursive; font-style: italic; font-size: 32px; color: #e61c72; margin-bottom: 8px; font-weight: 600; line-height:34px; } .main-title { font-size: 38px; font-weight: 600; color: #1a1a1a; line-height: 1.2; margin-bottom: 15px; } .description { font-size: 14px; color: #666666; line-height: 1.6; margin-bottom: 30px; } /* Features Grid (2x2) */ .features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 30px; } .feature-card { background-color: #ffffff; border-radius: 14px; padding: 24px 20px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.03); transition: transform 0.3s ease, box-shadow 0.3s ease; } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 12px 25px rgba(230, 28, 114, 0.1); } .feature-icon { width: 36px; height: 36px; border-radius: 50%; background-color: rgba(230, 28, 114, 0.1); color: #e61c72; display: flex; justify-content: center; align-items: center; font-size: 14px; margin-bottom: 15px; } .feature-title { font-size: 15px; font-weight: 600; color: #1a1a1a; margin-bottom: 8px; } .feature-desc { font-size: 12px; color: #666666; line-height: 1.5; margin-bottom:0; } /* Action Pill Button */ .action-button { display: inline-flex; align-items: center; gap: 10px; padding: 10px 24px; border: 1px solid #e61c72; border-radius: 30px; color: #e61c72; text-decoration: none; font-size: 13px; font-weight: 500; width: fit-content; background-color: transparent; transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; } .action-button:hover { background-color: #e61c72; color: #ffffff; transform: translateX(4px); } /* Entrance Animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Responsive Design */ @media (max-width: 992px) { .why-choose-section { grid-template-columns: 1fr; gap: 40px; } .image-wrapper { max-width: 500px; margin: 0 auto; } } @media (max-width: 600px) { .features-grid { grid-template-columns: repeat(1, 1fr); } .main-title { font-size: 28px; line-height:36px; } } .process-section-container{ font-family: 'Poppins', sans-serif; background-color: #fff; color: #2d2d2d; display: flex; justify-content: center; align-items: center; padding: 40px 20px; } .process-section { max-width: 1200px; width: 100%; position: relative; padding: 40px 0; } /* Connecting Horizontal Line Behind Numbers */ .process-line { position: absolute; top: 75px; left: 5%; right: 5%; height: 2px; background-color: rgba(230, 28, 114, 0.2); z-index: 1; } /* Grid Container for 5 Steps */ .process-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; position: relative; z-index: 2; } /* Individual Step Card */ .process-step { display: flex; flex-direction: column; align-items: flex-start; opacity: 1; transform: translateY(30px); /* animation: fadeInUp 0.8s ease forwards; */ cursor: pointer; } /* Staggered Reveal Animations */ .process-step:nth-child(1) { animation-delay: 0.1s; } .process-step:nth-child(2) { animation-delay: 0.3s; } .process-step:nth-child(3) { animation-delay: 0.5s; } .process-step:nth-child(4) { animation-delay: 0.7s; } .process-step:nth-child(5) { animation-delay: 0.9s; } /* Circle with Number */ .step-number-circle { width: 48px; height: 48px; background-color: #fcfbfa; border: 2px solid #e61c72; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: 600; color: #e61c72; margin-bottom: 25px; transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } /* Hover Effects */ .process-step:hover .step-number-circle { background-color: #e61c72; color: #ffffff; transform: scale(1.1); box-shadow: 0 8px 20px rgba(230, 28, 114, 0.3); } .process-step:hover .step-title { color: #e61c72; } /* Text Content */ .step-title { font-size: 18px; font-weight: 600; color: #1a1a1a; margin-bottom: 10px; line-height: 1.3; transition: color 0.3s ease; } .step-desc { font-size: 13px; color: #666666; line-height: 1.6; } /* Keyframes for Staggered Reveal Animation */ @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } /* Responsive Design */ @media (max-width: 1024px) { .process-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; } .process-line { display: none; /* Hide background line on smaller screens for clean layout */ } } @media (max-width: 600px) { .process-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } } .result-section-container{ font-family: 'Poppins', sans-serif; background-color: #fcfbfa; color: #2d2d2d; display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 40px 20px; } .results-section { max-width: 1200px; width: 100%; text-align: center; /* animation: fadeIn 1s ease-out; */ } .results-section .subtitle{ color: var(--pink); } /* Header Styles */ .subtitle { font-family: 'Playball', cursive; font-style: italic; font-size: 32px; color: #e61c72; margin-bottom: 6px; font-weight: 600; line-height:34px; } .main-title { font-size: 36px; font-weight: 600; color: #1a1a1a; margin-bottom: 10px; } .description { font-size: 13px; color: #777777; margin-bottom: 50px; } /* Cards Layout Container */ .results-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; justify-content: center; } /* Before/After Image Slider Component */ .img-comparison-slider { position: relative; width: 100%; height: 380px; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); cursor: ew-resize; user-select: none; -webkit-user-select: none; } .img-comparison-slider img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } /* After Image (Background layer) */ .img-back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* Before Image (Foreground overlay layer) */ .img-front { position: absolute; top: 0; left: 0; width: 50%; /* Default 50% split */ height: 100%; overflow: hidden; } .img-front img { width: auto; max-width: none; height: 100%; } /* Labels inside slider */ .slider-label { position: absolute; bottom: 15px; padding: 4px 10px; background-color: rgba(0, 0, 0, 0.6); color: #ffffff; font-size: 11px; border-radius: 4px; letter-spacing: 0.5px; z-index: 2; } .label-before { left: 15px; } .label-after { right: 15px; } /* Slider Handle Divider Line */ .slider-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background-color: #ffffff; z-index: 3; transform: translateX(-50%); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); } /* Interactive Central Button Pill with Arrow Icon */ .slider-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; background-color: #e61c72; border: 3px solid #ffffff; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #ffffff; font-size: 14px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transition: background-color 0.3s ease, transform 0.2s ease; } .img-comparison-slider:hover .slider-button { background-color: #d01564; transform: translate(-50%, -50%) scale(1.08); } /* Entrance Animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Responsive Design */ @media (max-width: 900px) { .results-grid { grid-template-columns: 1fr; } .main-title { font-size: 30px; } } @media (max-width: 480px) { .img-comparison-slider { height: 280px; } } .technology-section-container { font-family: 'Poppins', sans-serif; background-color: #fcfbfa; color: #2d2d2d; display: flex; justify-content: center; align-items: center; padding: 40px 20px; } /* Section Container with Pink Background Theme */ .technology-section { background-color: #ff3366; max-width: 1200px; width: 100%; padding: 60px 40px; border-radius: 24px; text-align: center; /* animation: fadeIn 1s ease-out; */ box-shadow: 0 15px 35px rgba(255, 51, 102, 0.2); } /* Header Styles */ .subtitle { font-family: 'Playball', cursive; font-style: italic; font-size: 32px; color: #ffffff; margin-bottom: 6px; font-weight: 600; line-height:34px; } .technology-main-title { font-size: 36px; font-weight: 600; color: #ffffff; margin-bottom: 50px; line-height: 1.2; } /* Asymmetric Grid Layout (Left Large Card + Right 4 Cards) */ .tech-grid { display: grid; grid-template-columns: .75fr 1fr; gap: 24px; align-items: stretch; } .tech-right-column { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } /* Individual Tech Link Cards */ .tech-card { background-color: #ffffff; border-radius: 1px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; } .tech-card:hover { transform: translateY(-8px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); } /* Image Display Wrapper */ .tech-img-wrapper { width: 100%; height: 280px; /* Default height for small cards */ overflow: hidden; background-color: #f5f5f5; } .tech-card.large .tech-img-wrapper { height: 100%; /* Larger height for the main HydraFacial card */ } .tech-img-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .tech-card:hover .tech-img-wrapper img { transform: scale(1.05); } /* Label Banner at Bottom of Each Card */ .tech-label { background-color: #ff3366; color: #ffffff; font-size: 15px; font-weight: 600; padding: 16px 10px; text-align: center; transition: background-color 0.3s ease; position: relative; bottom: 20px; margin: 0 20px; } .tech-card:hover .tech-label { background-color: #e02453; } /* Keyframes for entrance animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Responsive Design */ @media (max-width: 1024px) { .tech-grid { grid-template-columns: 1fr; } .tech-card.large .tech-img-wrapper { height: 380px; } } @media (max-width: 650px) { .tech-right-column { grid-template-columns: 1fr; } .main-title { font-size: 28px; } .technology-section { padding: 40px 20px; } .technology-main-title{ font-size:28px; line-height:1.5; } } .cta-parallax-section { position: relative; /* Replace 'clinic-interior.jpg' with your background image path */ background-image: linear-gradient(rgba(230, 28, 114, 0.85), rgba(230, 28, 114, 0.85)), url('https://sriskinclinicerode.com/wp-content/uploads/2026/08/beautician-protective-mask-doing-procedure-hair-scaled.jpg'); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; padding: 100px 20px; text-align: center; color: #ffffff; display: flex; justify-content: center; align-items: center; min-height: 500px; } /* Content Container */ .cta-content { max-width: 800px; width: 100%; /* animation: fadeIn 1s ease-out; */ z-index: 2; } /* Typography */ .cta-subtitle { font-family: 'Playball', cursive; font-style: italic; font-size: 34px; color: #ffffff; margin-bottom: 8px; font-weight: 600; } .cta-title { font-size: 40px; font-weight: 600; color: #ffffff; line-height: 1.2; margin-bottom: 15px; } .cta-description { font-size: 14px; color: rgba(255, 255, 255, 0.9); margin-bottom: 40px; line-height: 1.5; } /* Buttons Container */ .cta-buttons { display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; } /* Primary Button (Book An Appointment) */ .btn-primary-white { background-color: #ffffff; color: #e61c72; padding: 14px 28px; border-radius: 30px; text-decoration: none; font-size: 14px; font-weight: 600; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .btn-primary-white:hover { background-color: #1a1a1a; color: #ffffff; transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } /* Secondary Button (WhatsApp Us) */ .btn-outline-white { background-color: transparent; color: #ffffff; padding: 14px 28px; border: 2px solid #ffffff; border-radius: 30px; text-decoration: none; font-size: 14px; font-weight: 600; transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; } .btn-outline-white:hover { background-color: #ffffff; color: #e61c72; transform: translateY(-3px); } /* Keyframes for Entrance Animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Responsive Design */ @media (max-width: 768px) { .cta-title { font-size: 28px; line-height:1.5; } .cta-subtitle { font-size: 28px; } .cta-parallax-section { padding: 70px 20px; background-attachment: scroll; /* Disable fixed attachment on mobile performance limitations */ } } .google-review-section{ padding:50px 0; } /* Banner Section Container */ .inner-banner-section { position: relative; /* Replace 'banner-bg.jpg' with your treatment image path */ background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://sriskinclinicerode.com/wp-content/uploads/2026/08/inner-banner-bg.webp'); background-position: center; background-repeat: no-repeat; background-size: cover; padding: 60px; /* min-height: 350px; */ display: flex; align-items: center; } /* Content Wrapper */ .banner-content { max-width: 550px; width: 100%; /* animation: fadeIn 1s ease-out; */ z-index: 2; } /* Top Small Tag / Badge */ .banner-badge { display: inline-block; background-color: #ed008c; /* Warm beige tone from reference image */ color: #2b231d; font-size: 13px; font-weight: 500; padding: 6px 14px; border-radius: 20px; margin-bottom: 20px; letter-spacing: 0.5px; font-family: 'Playball', cursive; color:#fff; display:none; } /* Main Serif Heading */ .banner-title { font-size: 36px; font-weight: 600; line-height: 1.2; color: #ffffff; margin-bottom: 0px; } /* Descriptive Text */ .banner-description { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.9); font-weight: 400; display:none; } /* Entrance Animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Responsive Design */ @media (max-width: 768px) { .inner-banner-section { padding: 60px 20px; } .banner-title { font-size: 24px; margin-bottom: 15px; } .banner-description { font-size: 14px; } } .about-section-container { font-family: 'Poppins', sans-serif; background-color: #fbf7f0; /* Cream background color */ color: #2b231d; margin: 0; padding: 0; overflow-x: hidden; } /* Main Section Container with Bottom-Left Corner Leaf Background */ .about-section { position: relative; max-width: 1260px; margin: 0 auto; padding: 80px 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; /* Bottom-left corner leaf illustration pattern */ background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: bottom left; /* animation: fadeIn 1s ease-out; */ } .about-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 60px; align-items: center; width: 100%; } /* Left Column: Overlapping Images & Badge */ .about-images-wrapper { position: relative; height: 480px; } /* Top-Left Main Image */ .image-primary { position: absolute; top: 0; left: 0; width: 280px; height: 340px; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); z-index: 1; } .image-primary img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .image-primary:hover img { transform: scale(1.04); } /* Bottom-Right Secondary Overlapping Image */ .image-secondary { position: absolute; bottom: 0; right: 0; width: 240px; height: 280px; border-radius: 16px; overflow: hidden; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12); z-index: 2; } .image-secondary img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .image-secondary:hover img { transform: scale(1.04); } /* Video Play Button Overlay inside secondary image */ .play-button-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background-color: rgba(255, 255, 255, 0.85); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #2b231d; font-size: 14px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transition: background-color 0.3s ease, transform 0.3s ease; cursor: pointer; z-index: 3; } .image-secondary:hover .play-button-overlay { background-color: #ffffff; transform: translate(-50%, -50%) scale(1.1); } /* 10 Years Experience Badge */ .experience-badge { position: absolute; top: -20px; right: 10px; width: 110px; height: 110px; background-color: #e31c79; /* Deep rich brown tone */ color: #ffffff; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; box-shadow: 0 8px 25px rgba(59, 39, 28, 0.25); z-index: 4; } .badge-text { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; font-weight: 500; } .badge-number { font-size: 34px; font-weight: 700; line-height: 1; margin: 2px 0; } /* Right Column: Content Styles */ .about-content { display: flex; flex-direction: column; } .section-tag { display: inline-block; background-color: #fff; color: #e31c79; font-size: 11px; font-weight: 500; padding: 5px 12px; border-radius: 12px; margin-bottom: 15px; width: fit-content; letter-spacing: 0.5px; } .section-title { font-size: 40px; font-weight: 600; color: #2b231d; line-height: 1.2; margin-bottom: 16px; width:70%; } .section-desc-1 { font-size: 13px; line-height: 1.6; color: #55483f; margin-bottom: 15px; } .section-desc-2 { font-size: 13px; line-height: 1.6; color: #55483f; margin-bottom: 25px; } /* Checkmark Features List */ .features-list { list-style: none; margin-bottom: 30px; display: flex; flex-direction: column; gap: 12px; } .features-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: #2b231d; } .features-list i { color:#e31c79; font-size: 12px; background-color: #ecdcd0; width: 22px; height: 22px; border-radius: 50%; display: flex; justify-content: center; align-items: center; } /* Meet Our Experts Action Button */ .btn-experts { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background-color: #e31c79; color: #ffffff; padding: 12px 28px; border-radius: 30px; text-decoration: none; font-size: 13px; font-weight: 500; width: fit-content; box-shadow: 0 6px 20px rgba(59, 39, 28, 0.2); transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; } .btn-experts:hover { background-color: #2b231d; transform: translateY(-3px); box-shadow: 0 10px 25px rgba(59, 39, 28, 0.3); } .btn-experts:hover span{ color: #fff; } /* Entrance Animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Responsive Design */ @media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 50px; } .about-images-wrapper { max-width: 400px; margin: 0 auto; width: 100%; } } @media (max-width: 480px) { .image-primary { width: 210px; height: 260px; } .image-secondary { width: 190px; height: 220px; } .experience-badge { width: 90px; height: 90px; top: -15px; right: 0; } .badge-number { font-size: 28px; } .section-title { font-size: 30px; width:100%; } } .contact-section-container { font-family: 'Poppins', sans-serif; background-color: #fbf7f0; /* Cream background color matching your theme */ color: #2b231d; margin: 0; padding: 40px 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; } /* Main Section Container */ .contact-section { max-width: 1200px; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: flex-start; /* animation: fadeIn 1s ease-out; */ } /* Left Column Content */ .contact-info-side { display: flex; flex-direction: column; } .contact-title { font-size: 38px; font-weight: 600; color: #2b231d; line-height: 1.2; margin-bottom: 16px; } .contact-desc { font-size: 13px; line-height: 1.6; color: #55483f; margin-bottom: 30px; } /* Info Card Items */ .info-card { background-color: #ffffff; border-radius: 14px; padding: 24px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.03); border: 1px solid rgba(0, 0, 0, 0.03); margin-bottom: 20px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .info-card:hover { transform: translateY(-4px); box-shadow: 0 12px 25px rgba(59, 39, 28, 0.08); } .info-card-label { font-size: 12px; color: #7a6a5e; margin-bottom: 8px; font-weight: 500; } .info-card-value { font-size: 15px; font-weight: 600; color: #2b231d; line-height: 1.7; text-decoration: none; display: block; } .info-card-value:hover { color: #3b271c; text-decoration: underline; } /* Bottom Row for Phone & Email Cards side-by-side */ .info-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } /* Right Column Form Container Box */ .contact-form-side { background-color: #f7d9bf; /* Soft peach-beige container background tone matching image */ border-radius: 16px; padding: 40px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); } .form-box-title { font-size: 26px; font-weight: 600; color: #000; margin-bottom: 25px; } /* Contact Form 7 Elements Styling Integration */ .cf7-input-group { margin-bottom: 16px; } .contact-form-side input[type="text"], .contact-form-side input[type="email"], .contact-form-side textarea { width: 100%; background-color: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 8px; padding: 8px 8px; font-size: 13px; font-family: 'Poppins', sans-serif; color: #2b231d; outline: none; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .contact-form-side input[type="text"]:focus, .contact-form-side input[type="email"]:focus, .contact-form-side textarea:focus { border-color: #3b271c; box-shadow: 0 0 0 3px rgba(59, 39, 28, 0.1); } .contact-form-side textarea { resize: vertical; min-height: 120px; } /* Submit Button Styling */ .cf7-submit-wrapper input[type="submit"] { background-color: #e31c79; color: #ffffff; border: none; border-radius: 30px; padding: 12px 28px; font-size: 13px; font-weight: 500; font-family: 'Poppins', sans-serif; cursor: pointer; box-shadow: 0 6px 20px rgba(59, 39, 28, 0.2); transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; display: inline-block; margin-top: 10px; } .cf7-submit-wrapper input[type="submit"]:hover { background-color: #e31c79; transform: translateY(-2px); box-shadow: 0 10px 25px rgba(59, 39, 28, 0.3); } /* Entrance Animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Responsive Design */ @media (max-width: 900px) { .contact-section { grid-template-columns: 1fr; gap: 40px; } .contact-form-side { padding: 30px 20px; } } @media (max-width: 500px) { .info-row { grid-template-columns: 1fr; gap: 0; } } .treatment-detail-container { font-family: 'Poppins', sans-serif; background-color: #fbf7f0; /* Cream theme background */ color: #2b231d; margin: 0; padding: 60px 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .treatment-detail-section { max-width: 1200px; width: 100%; /* animation: fadeIn 1s ease-out; */ } /* Top Header Area: Title Left, Description Right */ .treatment-header { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: flex-start; margin-bottom: 60px; } .treatment-title { font-size: 36px; font-weight: 600; color: #2b231d; line-height: 1.4; width: 70%; } .treatment-intro-desc { font-size: 14px; line-height: 1.7; color: #55483f; } /* Middle Section: Image Left, Benefits Right */ .benefit-section { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; margin-bottom: 60px; } .benefit-image-wrapper { width: 100%; height: 360px; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); } .benefit-image-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .benefit-image-wrapper:hover img { transform: scale(1.04); } .benefit-content { display: flex; flex-direction: column; } .benefit-heading { font-size: 28px; font-weight: 600; color: #2b231d; margin-bottom: 12px; } .benefit-desc { font-size: 14px; line-height: 1.7; color: #55483f; margin-bottom: 24px; } /* Benefit Checkmark List */ .benefit-list { list-style: none; display: flex; flex-direction: column; gap: 12px; } .benefit-list li { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; color: #2b231d; } .benefit-list i { color: #3b271c; font-size: 11px; background-color: #ecdcd0; width: 22px; height: 22px; border-radius: 50%; display: flex; justify-content: center; align-items: center; flex-shrink: 0; } /* Bottom 4-Card Grid */ .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .step-card { background-color: #ffffff; border-radius: 16px; padding: 30px 24px; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.03); display: flex; flex-direction: column; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .step-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(59, 39, 28, 0.08); } .step-icon-box { width: 44px; height: 44px; background-color: #e31c79; /* Deep rich brown tone */ color: #ffffff; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 15px; margin-bottom: 20px; transition: background-color 0.3s ease; } .step-card:hover .step-icon-box { background-color: #2b231d; } .step-card-title { font-size: 16px; font-weight: 600; color: #2b231d; margin-bottom: 10px; } .step-card-desc { font-size: 14px; line-height: 1.6; color: #55483f; } /* Entrance Animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Responsive Design */ @media (max-width: 1024px) { .treatment-header, .benefit-section { grid-template-columns: 1fr; gap: 30px; } .steps-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .steps-grid { grid-template-columns: 1fr; } .treatment-title { font-size: 24px; } .treatment-detail-container{ padding: 30px 20px; } .treatment-header, .benefit-section { grid-template-columns: 1fr; gap: 0px; } .benefit-content { display: flex; flex-direction: column; margin-top: 30px; } .benefit-heading { font-size: 24px; font-weight: 600; color: #2b231d; margin-bottom: 12px; } } .faq-section-container { font-family: 'Poppins', sans-serif; background-color: #fbf7f0; /* Cream background matching your theme */ color: #2b231d; margin: 0; padding: 40px 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; } /* FAQ Section Container */ .faq-section { max-width: 900px; width: 100%; display: flex; flex-direction: column; gap: 16px; /* animation: fadeIn 1s ease-out; */ } /* FAQ Accordion Card */ .faq-item { background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); border: 1px solid rgba(0, 0, 0, 0.04); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; } .faq-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(59, 39, 28, 0.08); } /* Accordion Header / Question Button */ .faq-question { width: 100%; background: none; border: none; padding: 24px; display: flex; justify-content: space-between; align-items: center; text-align: left; cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; color: #2b231d; transition: color 0.3s ease; } .faq-item.active .faq-question { color: #3b271c; } /* Toggle Icon Container */ .faq-icon { width: 32px; height: 32px; border: 1px solid rgba(43, 35, 29, 0.2); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 12px; color: #2b231d; transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; flex-shrink: 0; margin-left: 15px; } .faq-item.active .faq-icon { transform: rotate(180deg); background-color: #3b271c; color: #ffffff; border-color: #3b271c; } /* Accordion Answer Content Panel */ .faq-answer { max-height: 0; overflow: hidden; padding: 0 24px; font-size: 13px; line-height: 1.6; color: #55483f; transition: max-height 0.35s ease-out, padding 0.35s ease-out; } .faq-item.active .faq-answer { max-height: 200px; /* Adjust if answers are longer */ padding: 0 24px 24px 24px; } /* Entrance Animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Responsive Design */ @media (max-width: 768px) { .faq-question { font-size: 14px; padding: 18px; } .faq-answer { font-size: 12px; } .faq-item.active .faq-answer { padding: 0 18px 18px 18px; } } .timeline-section-container { font-family: 'Poppins', sans-serif; background-color: #fbf7f0; /* Cream theme background */ color: #2b231d; margin: 0; padding: 60px 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; } /* Timeline Section Container */ .timeline-section { max-width: 1100px; width: 100%; position: relative; /* animation: fadeIn 1s ease-out; */ } /* Section Header Title */ .timeline-main-title { font-size: 40px; font-weight: 600; text-align: center; color: #3b271c; margin-bottom: 70px; letter-spacing: 0.5px; } /* Central Vertical Line */ .timeline-container { position: relative; width: 100%; } .timeline-container::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background-color: #d2c2b4; transform: translateX(-50%); } /* Timeline Row Item */ .timeline-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 80px; position: relative; width: 100%; } .timeline-row:last-child { margin-bottom: 0; } /* Central Purple/Gradient Dot Marker */ .timeline-dot { position: absolute; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; background: linear-gradient(135deg, #e31c79, #e31c79); border: 3px solid #fbf7f0; border-radius: 50%; z-index: 3; box-shadow: 0 0 0 2px #a855f7; } /* Left and Right Side Wrappers */ .timeline-side { width: 45%; position: relative; display: flex; flex-direction: column; } /* Alternating Side Layout */ .timeline-row:nth-child(odd) .timeline-side.left { align-items: flex-end; text-align: right; } .timeline-row:nth-child(odd) .timeline-side.right { align-items: flex-start; text-align: left; } .timeline-row:nth-child(even) .timeline-side.left { align-items: flex-start; text-align: left; } .timeline-row:nth-child(even) .timeline-side.right { align-items: flex-start; text-align: right; } /* Date Badge Pill */ .timeline-date-pill { display: inline-block; background: linear-gradient(135deg, #e31c79, #e31c79); color: #ffffff; font-size: 13px; font-weight: 500; padding: 8px 22px; border-radius: 20px; box-shadow: 0 4px 15px rgba(147, 51, 234, 0.25); margin-bottom: 16px; } /* Content Text Card Box */ .timeline-card { background-color: #ffffff; border-radius: 16px; padding: 28px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.03); width: 100%; max-width: 460px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .timeline-card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(147, 51, 234, 0.1); } .timeline-card-title { font-size: 16px; font-weight: 600; color: #2b231d; margin-bottom: 12px; } .timeline-card-title span { color: #e31c79; font-size: 14px; font-weight: 400; margin-left: 4px; } .timeline-card-desc { font-size: 13px; line-height: 1.6; color: #55483f; margin-bottom: 0px; } /* Visit Link */ .timeline-link { display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: #a855f7; text-decoration: none; transition: color 0.3s ease; } .timeline-link:hover { color: #7e22ce; text-decoration: underline; } /* Background Circular Line-Art Illustration Frame */ .timeline-illustration { width: 180px; height: 180px; border: 1px dashed rgba(168, 85, 247, 0.25); border-radius: 50%; display: flex; justify-content: center; align-items: center; opacity: 0.7; } .timeline-illustration svg { width: 100px; height: 100px; stroke: #e31c79; fill: none; stroke-width: 1; opacity: 0.5; } /* Entrance Animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Responsive Design for smaller screens */ @media (max-width: 900px) { .timeline-container::before { left: 20px; } .timeline-dot { left: -25px; } .timeline-row { flex-direction: column; align-items: flex-start; margin-left: 45px; margin-bottom: 50px; } .timeline-side { width: 100% !important; align-items: flex-start !important; text-align: left !important; } .timeline-illustration { display: none; /* Hide decorative background illustrations on mobile layout for cleanliness */ } .timeline-main-title{ font-size: 30px; margin-bottom: 30px; } } /* ----------------------------------------------------------------- */ .treatment-page-container-section { font-family: 'Poppins', sans-serif; background-color: #fbf7f0; /* Cream theme background */ color: #2b231d; margin: 0; padding: 40px 20px; display: flex; justify-content: center; } /* Master Layout Container (Two Columns) */ .treatment-page-container { max-width: 1200px; width: 100%; display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: flex-start; /* animation: fadeIn 1s ease-out; */ } /* ================================================= */ /* LEFT SIDEBAR STYLING */ /* ================================================= */ .sidebar { display: flex; flex-direction: column; gap: 30px; } /* Treatment Navigation Tabs */ .treatment-tabs-list { display: flex; flex-direction: column; gap: 10px; } .tab-btn { background-color: #ffffff; border: 1px solid rgba(43, 35, 29, 0.08); border-radius: 8px; padding: 14px 18px; text-align: left; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 500; color: #2b231d; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease; } .tab-btn:hover { background-color: #f4ece4; transform: translateX(4px); } /* Active Tab Styling */ .tab-btn.active { background-color: #3b271c; /* Deep rich brown tone */ color: #ffffff; border-color: #3b271c; box-shadow: 0 4px 15px rgba(59, 39, 28, 0.2); } .tab-btn i { font-size: 11px; } /* Sidebar Widget Boxes */ .sidebar-widget { background-color: #ffffff; border-radius: 14px; padding: 20px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03); border: 1px solid rgba(0, 0, 0, 0.04); } .widget-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: #8c7a6b; margin-bottom: 12px; font-weight: 600; } /* Before & After Widget */ .before-after-preview { position: relative; height: 160px; border-radius: 10px; overflow: hidden; margin-bottom: 10px; } .before-after-preview img { width: 100%; height: 100%; object-fit: cover; display: block; } .widget-nav-arrows { display: flex; gap: 6px; justify-content: flex-end; } .arrow-btn { width: 26px; height: 26px; background-color: #3b271c; color: #ffffff; border: none; border-radius: 4px; display: flex; justify-content: center; align-items: center; font-size: 10px; cursor: pointer; transition: background-color 0.3s ease; } .arrow-btn:hover { background-color: #5a4231; } /* Products We Use Widget */ .product-preview { height: 150px; display: flex; justify-content: center; align-items: center; background-color: #f7f3ec; border-radius: 10px; margin-bottom: 10px; overflow: hidden; } .product-preview img { max-height: 130px; object-fit: contain; } /* Read Articles Banner */ .articles-banner { background-color: #ecdcd0; border-radius: 14px; padding: 20px; text-decoration: none; display: block; color: #2b231d; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.03); transition: transform 0.3s ease; } .articles-banner:hover { transform: translateY(-3px); } .articles-banner h4 { font-family: 'Playfair Display', serif; font-size: 16px; margin-bottom: 6px; } .articles-banner span { font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; } /* Have a Question Banner */ .question-banner { position: relative; border-radius: 14px; overflow: hidden; height: 140px; background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('question-bg.jpg'); background-size: cover; background-position: center; display: flex; align-items: flex-end; padding: 16px; color: #ffffff; text-decoration: none; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05); } .question-banner span { font-size: 13px; font-weight: 600; letter-spacing: 0.5px; } /* ================================================= */ /* RIGHT CONTENT PANEL STYLING */ /* ================================================= */ .main-content { display: flex; flex-direction: column; gap: 40px; } /* Top Hero Section Card */ .hero-treatment-card { background-color: #ffffff; border-radius: 16px; padding: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.03); } .hero-img-box { width: 100%; height: 280px; border-radius: 12px; overflow: hidden; } .hero-img-box img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-text-box h1 { font-family: 'Playfair Display', serif; font-size: 32px; font-weight: 600; color: #2b231d; line-height: 1.2; margin-bottom: 12px; } .hero-text-box p { font-size: 12px; line-height: 1.6; color: #55483f; margin-bottom: 20px; } .btn-procedure-videos { display: inline-flex; align-items: center; gap: 8px; background-color: transparent; border: 1px solid #3b271c; color: #3b271c; padding: 10px 20px; border-radius: 30px; text-decoration: none; font-size: 12px; font-weight: 500; transition: background-color 0.3s ease, color 0.3s ease; } .btn-procedure-videos:hover { background-color: #3b271c; color: #ffffff; } /* Feature Row Cards (Safe & Painless, Skin Body Face, Tests & Consulting) */ .feature-detail-card { background-color: #ffffff; border-radius: 16px; padding: 30px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.03); } .feature-detail-card.reverse { grid-template-columns: 1fr 1.1fr; } .feature-detail-card.reverse .feature-img { order: 2; } .feature-img { width: 100%; height: 240px; border-radius: 12px; overflow: hidden; } .feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .feature-text h3 { font-family: 'Playfair Display', serif; font-size: 24px; font-weight: 600; color: #2b231d; margin-bottom: 10px; } .feature-text p { font-size: 12px; line-height: 1.6; color: #55483f; margin-bottom: 15px; } .feature-quote { font-size: 11px; font-style: italic; color: #7a6a5e; border-left: 2px solid #3b271c; padding-left: 10px; line-height: 1.5; } /* ================================================= */ /* FAQ SECTION STYLING */ /* ================================================= */ .faq-section-wrapper { background-color: #ffffff; border-radius: 16px; padding: 35px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.03); } .faq-main-title { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 600; color: #2b231d; margin-bottom: 24px; } .faq-accordion-item { border-bottom: 1px solid rgba(43, 35, 29, 0.08); padding: 16px 0; } .faq-accordion-item:last-child { border-bottom: none; } .faq-question-btn { width: 100%; background: none; border: none; display: flex; justify-content: space-between; align-items: center; text-align: left; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600; color: #2b231d; cursor: pointer; } .faq-question-btn span { display: inline-flex; align-items: center; gap: 8px; } .faq-question-btn i { font-size: 12px; color: #7a6a5e; transition: transform 0.3s ease; } .faq-accordion-item.active .faq-question-btn i { transform: rotate(180deg); } .faq-answer-panel { max-height: 0; overflow: hidden; font-size: 12px; line-height: 1.6; color: #55483f; transition: max-height 0.35s ease-out, padding 0.35s ease-out; } .faq-accordion-item.active .faq-answer-panel { max-height: 250px; padding-top: 12px; } .faq-bullets { list-style: none; margin-top: 10px; display: flex; flex-direction: column; gap: 6px; } .faq-bullets li { display: flex; align-items: center; gap: 8px; font-size: 11px; } .faq-bullets i { font-size: 9px; color: #3b271c; } /* ================================================= */ /* ANIMATIONS & RESPONSIVE DESIGN */ /* ================================================= */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 1024px) { .treatment-page-container { grid-template-columns: 1fr; } .sidebar { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .treatment-tabs-list { grid-column: span 2; } } @media (max-width: 768px) { .sidebar { grid-template-columns: 1fr; } .treatment-tabs-list { grid-column: span 1; } .hero-treatment-card, .feature-detail-card, .feature-detail-card.reverse { grid-template-columns: 1fr; } .feature-detail-card.reverse .feature-img { order: 0; } } .tech-card{ cursor:default !important; } /* ===== TREATMENTS PAGE HERO ===== */ .tp-hero{background:var(--cream);padding:44px 0 40px;text-align:center;display:none;} .tp-hero h1{font-size:clamp(28px,3.4vw,40px);margin-bottom:10px;} /* ===== LAYOUT ===== */ .tp-section{background:#fff;padding-bottom:80px;} .tp-layout{display:grid;grid-template-columns:280px 1fr;gap:40px;align-items:start;margin-top:100px;} /* SIDEBAR */ .tp-tabs{display:flex;flex-direction:column;gap:10px;margin-bottom:32px;} .tp-tab{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 18px;border-radius:12px; border:1.5px solid var(--line);font-size:14px;font-weight:600;color:var(--ink);text-align:left;transition:.25s;background:#fff;} .tp-tab:hover{border-color:var(--pink);color:var(--pink-dark);} .tp-tab .arrow{width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0;transform:scale(.6);transition:.25s;} .tp-tab .arrow svg{width:12px;height:12px;} .tp-tab.active{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:var(--shadow-md);} .tp-tab.active .arrow{background:rgba(255,255,255,.25);opacity:1;transform:scale(1);} .tp-widget{margin-bottom:30px;} .tp-widget-eyebrow{display:block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--pink);margin-bottom:6px;} .tp-widget-title{font-size:17px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:8px;} .tp-widget-title .go{width:30px;height:30px;border-radius:50%;background:var(--pink-tint);color:var(--pink);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .tp-widget-title .go svg{width:14px;height:14px;} .tp-mini-slider{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3.4;background:#fafafa;} .tp-mini-slider img{width:100%;height:100%;object-fit:cover;display:block;} .tp-mini-nav{position:absolute;right:10px;bottom:10px;display:flex;gap:6px;} .tp-mini-nav button{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--pink-dark);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);} .tp-mini-nav button svg{width:13px;height:13px;} .tp-mini-nav button:hover{background:var(--pink);color:#fff;} .tp-book{border-radius:16px;overflow:hidden;position:relative;aspect-ratio:4/2.4;box-shadow:var(--shadow-sm);} .tp-book{background:linear-gradient(150deg,#3a2230,#1c0f16);display:flex;align-items:center;justify-content:center;text-align:center;} .tp-book span{color:#fff;font-family:'Poppins';font-weight:700;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;padding:0 20px;} .tp-question{border-radius:16px;overflow:hidden;position:relative;aspect-ratio:4/2.6;display:flex;align-items:center;justify-content:center;text-align:center; background:linear-gradient(160deg,#4a2436,#20101a);box-shadow:var(--shadow-sm);} .tp-question span{color:#fff;font-family:'Poppins';font-weight:700;font-size:14px;letter-spacing:.03em;text-transform:uppercase;} /* CONTENT PANEL */ .tp-panel-hero{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding-bottom:44px;margin-bottom:44px;border-bottom:1px solid var(--line);} .tp-panel-photo{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/4.3;box-shadow:var(--shadow-lg);} .tp-panel-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s;} .tp-panel-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pink);margin-bottom:12px;} .tp-panel-hero h2{font-size:clamp(24px,2.8vw,32px);margin-bottom:16px;font-weight:600;} .tp-panel-hero p{color:var(--ink-soft);font-size:14.5px;line-height:1.75;margin-bottom:14px;} .tp-cta-line{font-weight:700;font-size:14.5px;margin:18px 0 20px;} .tp-panel-hero .btn{padding:14px 24px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;} .tp-block{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--cream);border-radius:18px;overflow:hidden;margin-bottom:28px;direction: rtl;} .tp-block.rev{direction:rtl;} .tp-block.rev>*{direction:ltr;} .tp-block-photo{aspect-ratio:4/3.4;overflow:hidden;} .tp-block-photo img{width:100%;height:100%;object-fit:cover;display:block;} .tp-block-text{padding:36px 40px;text-align:left;} .tp-block-text h3{font-size:20px;margin-bottom:12px;font-weight:600;} .tp-block-text>p{color:var(--ink-soft);font-size:14px;line-height:1.7;margin-bottom:18px;} .tp-block-list{border-left:2.5px solid var(--pink);padding-left:16px;display:flex;flex-direction:column;gap:9px;} .tp-block-list span{display:block;font-style:italic;font-size:13.5px;color:var(--ink-soft);line-height:1.5;} /* FAQ */ .tp-faq{background:var(--cream);border-radius:20px;padding:44px 44px 20px;margin-top:16px;} .tp-faq h2{font-size:clamp(22px,2.6vw,28px);margin-bottom:26px;} .tp-faq-item{border-bottom:1px solid var(--line);} .tp-faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:20px 2px;text-align:left;font-family:'Poppins';font-weight:600;font-size:15px;} .tp-faq-q .sign{width:26px;height:26px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--pink);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:16px;transition:.25s;} .tp-faq-q .sign svg{width:12px;height:12px;} .tp-faq-item.open .tp-faq-q{color:var(--pink-dark);} .tp-faq-item.open .tp-faq-q .sign{background:var(--pink);color:#fff;border-color:var(--pink);} .tp-faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease;} .tp-faq-item.open .tp-faq-a{max-height:340px;} .tp-faq-a-inner{padding:0 2px 22px;} .tp-faq-a-inner p{color:var(--ink-soft);font-size:13.8px;line-height:1.75;margin-bottom:14px;} .tp-faq-list{display:flex;flex-direction:column;gap:8px;} .tp-faq-list li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--ink-soft);} .tp-faq-list svg{width:14px;height:14px;color:var(--pink);flex-shrink:0;margin-top:2px;} .tp-mobile-all{display:none;} @media (max-width:1024px){ .tp-layout{grid-template-columns:1fr;} .tp-tabs{display:none;} aside{display:none;} #tpPanelHero, #tpBlocks{display:none;} .tp-mobile-all{display:block;} .tp-mobile-item{margin-bottom:52px;padding-bottom:36px;border-bottom:2px solid var(--line);} .tp-mobile-item:last-child{border-bottom:none;margin-bottom:0;} .tp-mobile-item-title{font-family:'Poppins';font-weight:700;font-size:21px;margin-bottom:18px;color:var(--pink-dark);} .tp-mobile-item .tp-panel-hero{display:grid;grid-template-columns:1fr;gap:24px;padding-bottom:0;margin-bottom:24px;border-bottom:none;} .tp-block{grid-template-columns:1fr;direction:ltr!important;} } @media (max-width:1024px){ .tp-layout{grid-template-columns:1fr;} .tp-tabs{flex-direction:row;flex-wrap:wrap;} .tp-tab{flex:1 1 auto;} .tp-widget{display:none;} .tp-panel-hero{grid-template-columns:1fr;} .tp-block{grid-template-columns:1fr;direction:ltr!important;} } @media (max-width:680px){ .tp-block-text{padding:26px 22px;} .tp-faq{padding:30px 22px 10px;} .tp-layout{margin-top:50px;} } /* --------------------------------------------- */ @media (max-width:768px){ .contact-title{ font-size: 24px; } } /* ===== TREATMENT LANDING PAGE ===== */ .tl-hero{background:var(--cream);padding:52px 0 46px;} .tl-hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;} .tl-hero h1{font-size:clamp(30px,3.8vw,44px);margin-bottom:16px;} .tl-hero p{color:var(--ink-soft);font-size:15.5px;line-height:1.75;margin-bottom:26px;max-width:480px;} .tl-hero-photo{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/4.3;box-shadow:var(--shadow-lg);} .tl-hero-photo img{width:100%;height:100%;object-fit:cover;} .tl-about{background:#fff;padding:72px 0;} .tl-about .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center;} .tl-about-photo{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/4.2;box-shadow:var(--shadow-md);} .tl-about-photo img{width:100%;height:100%;object-fit:cover;} .tl-about-content h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:14px;} .tl-about-content p{color:var(--ink-soft);font-size:15px;line-height:1.75;margin-bottom:14px;} .tl-areas{background:var(--cream);padding:72px 0;} .tl-areas-head{text-align:center;max-width:560px;margin:0 auto 40px;} .tl-areas-head h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:12px;} .tl-areas-head p{color:var(--ink-soft);font-size:15px;} .tl-areas-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;} .tl-area-card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 18px;text-align:center;transition:.3s;} .tl-area-card:hover{border-color:var(--pink);transform:translateY(-4px);box-shadow:var(--shadow-sm);} .tl-area-card .ic{width:52px;height:52px;border-radius:14px;margin:0 auto 14px;background:var(--pink-tint);color:var(--pink);display:flex;align-items:center;justify-content:center;} .tl-area-card .ic svg{width:24px;height:24px;} .tl-area-card h4{font-size:14px;} .tl-process{background:#fff;padding:72px 0;} .tl-process-head{text-align:center;max-width:560px;margin:0 auto 12px;} .tl-process-head h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:12px;} .tl-process-note{text-align:center;color:var(--ink-soft);font-size:14px;max-width:520px;margin:24px auto 0;} .tl-equip{background:var(--cream);padding:72px 0;} .tl-equip .wrap{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;} .tl-equip-photo{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3.4;box-shadow:var(--shadow-md);} .tl-equip-photo img{width:100%;height:100%;object-fit:cover;} .tl-equip-content h2{font-size:clamp(24px,2.6vw,30px);margin-bottom:14px;} .tl-equip-content p{color:var(--ink-soft);font-size:15px;line-height:1.75;margin-bottom:18px;} .tl-equip-list{display:flex;flex-direction:column;gap:10px;text-align:left;} .tl-equip-list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-soft);} .tl-equip-list svg{width:16px;height:16px;color:var(--pink);flex-shrink:0;margin-top:2px;} .tl-related{background:#fff;padding:72px 0;} .tl-related-head{text-align:center;max-width:560px;margin:0 auto 40px;} .tl-related-head h2{font-size:clamp(22px,2.6vw,28px);} .tl-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;} .tl-related-card{border:1px solid var(--line);border-radius:16px;padding:26px 24px;transition:.3s;} .tl-related-card:hover{border-color:var(--pink);box-shadow:var(--shadow-sm);transform:translateY(-3px);} .tl-related-card h4{font-size:15.5px;margin-bottom:8px;} .tl-related-card p{font-size:13px;color:var(--ink-soft);line-height:1.6;margin-bottom:14px;} .tl-related-card a{font-size:13px;font-weight:600;color:var(--pink);display:inline-flex;align-items:center;gap:5px;} .tl-disclaimer{background:var(--cream);padding:28px 0;} .tl-disclaimer p{font-size:12.5px;color:var(--ink-soft);text-align:center;max-width:760px;margin:0 auto;line-height:1.7;} /* PROCESS STEPS */ .process-row{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;padding:44px 0 76px;position:relative;} .process-row::before{content:"";position:absolute;top:26px;left:10%;right:10%;height:1px;background:var(--line);z-index:0;} .process-step{position:relative;z-index:1;text-align:left;} .process-num{width:52px;height:52px;border-radius:50%;background:#fff;border:1.5px solid var(--pink);color:var(--pink);display:flex;align-items:center;justify-content:center;font-family:'Poppins';font-weight:700;font-size:14px;margin-bottom:16px;} .process-step h4{font-size:14.5px;margin-bottom:6px;} .process-step p{font-size:12.5px;color:var(--ink-soft);line-height:1.55;} @media (max-width:1024px){ .tl-hero .wrap, .tl-about .wrap, .tl-equip .wrap{grid-template-columns:1fr;} .tl-hero-photo, .tl-about-photo{max-width:420px;margin:0 auto;} .tl-hero-photo{order:-1;} .tl-areas-grid{grid-template-columns:repeat(2,1fr);} .tl-related-grid{grid-template-columns:1fr;} } @media (max-width:768px){ .process-row { grid-template-columns: repeat(2, 1fr); } .mega-foot{ display:none; } .mobile-sub-group h4{ font-weight:600; } .tl-areas-grid { grid-template-columns: repeat(1, 1fr); } }