:root{ --primary:#0D5C63; --secondary:#1F8A70; --gold:#D4AF37; --white:#ffffff; --light:#F5FAF8; --dark:#202124; --text:#555555; --radius:18px; --shadow:0 15px 40px rgba(0,0,0,.08); --transition:.35s; } /* ========================= */ *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ font-family:'Open Sans',sans-serif; background:var(--white); color:var(--text); line-height:1.8; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ text-decoration:none; transition:.3s; } ul{ list-style:none; } .container{ width:min(1180px,92%); margin:auto; } section{ padding:90px 0; } h1,h2,h3,h4{ font-family:'Poppins',sans-serif; color:var(--dark); font-weight:700; } .section-title{ font-size:42px; margin-bottom:15px; text-align:center; } .section-subtitle{ max-width:800px; margin:auto; text-align:center; margin-bottom:50px; } /* ========================= */ .btn{ display:inline-block; padding:16px 34px; border-radius:50px; font-weight:600; transition:.35s; } .btn-primary{ background:var(--secondary); color:#fff; } .btn-primary:hover{ transform:translateY(-5px); box-shadow:0 12px 25px rgba(0,0,0,.15); } .btn-outline{ border:2px solid var(--secondary); color:var(--secondary); } .btn-outline:hover{ background:var(--secondary); color:white; } /* ========================= */ .placeholder{ background:#eaf3f0; border:3px dashed #8eb5aa; border-radius:20px; display:flex; justify-content:center; align-items:center; text-align:center; color:#57756e; font-weight:600; } /* ========================= */ @media(max-width:768px){ .section-title{ font-size:30px; } section{ padding:70px 0; } .container{ width:94%; } } /*===================================================== PRELOADER =====================================================*/ #preloader{ position:fixed; top:0; left:0; width:100%; height:100%; background:white; display:flex; justify-content:center; align-items:center; z-index:99999; } .loader{ width:55px; height:55px; border-radius:50%; border:5px solid #ddd; border-top:5px solid var(--secondary); animation:spin 1s linear infinite; } @keyframes spin{ 100%{ transform:rotate(360deg); } } /*===================================================== HEADER =====================================================*/ header{ position:fixed; top:0; left:0; width:100%; z-index:9999; background:rgba(255,255,255,.92); backdrop-filter:blur(18px); box-shadow:0 6px 25px rgba(0,0,0,.05); transition:.35s; } header.scrolled{ background:rgba(255,255,255,.98); box-shadow:0 12px 35px rgba(0,0,0,.10); } top:0; left:0; width:100%; z-index:9999; background:rgba(255,255,255,.92); backdrop-filter:blur(18px); box-shadow:0 6px 25px rgba(0,0,0,.05); transition:.35s; } .navbar{ height:85px; display:flex; align-items:center; justify-content:space-between; } .logo{ display:flex; align-items:center; gap:14px; color:#222; } .logo img{ width:60px; height:60px; object-fit:contain; } .logo h2{ font-size:22px; margin-bottom:2px; } .logo span{ font-size:13px; color:#666; } .nav-links{ display:flex; gap:30px; } .nav-links a{ font-weight:600; color:#444; } .nav-links a:hover{ color:var(--secondary); } .active{ color:var(--secondary)!important; } .header-right{ display:flex; align-items:center; gap:12px; } .social-icon{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:#f3f3f3; color:#444; transition:.3s; } .social-icon:hover{ background:var(--secondary); color:white; transform:translateY(-3px); } .whatsapp-btn{ padding:12px 22px; } /*===================================================== HAMBURGER =====================================================*/ .hamburger{ display:none; cursor:pointer; } .hamburger span{ display:block; width:30px; height:3px; background:#333; margin:6px 0; transition:.35s; } .mobile-menu{ position:fixed; top:85px; left:-100%; width:100%; background:white; transition:.35s; box-shadow:0 10px 30px rgba(0,0,0,.08); z-index:9998; } .mobile-menu ul{ padding:30px; } .mobile-menu li{ margin:18px 0; } .mobile-menu a{ font-size:18px; font-weight:600; color:#444; } .mobile-menu.show{ left:0; } /*===================================================== RESPONSIVE =====================================================*/ @media(max-width:992px){ nav, .header-right{ display:none; } .hamburger{ display:block; } .logo h2{ font-size:18px; } .logo img{ width:50px; height:50px; } } /*===================================================== HERO =====================================================*/ .hero{ padding-top:150px; padding-bottom:90px; background:linear-gradient(135deg,#f7fcfb,#eef8f6); overflow:hidden; } .hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:60px; } .hero-tag{ display:inline-block; background:#dff6ee; color:var(--secondary); padding:10px 22px; border-radius:50px; font-size:14px; font-weight:700; margin-bottom:25px; } .hero h1{ font-size:56px; line-height:1.15; margin-bottom:25px; } .hero p{ font-size:18px; margin-bottom:35px; max-width:620px; } .hero-buttons{ display:flex; gap:20px; margin-bottom:40px; flex-wrap:wrap; } .hero-features{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } .hero-features div{ background:white; padding:16px; border-radius:14px; box-shadow:var(--shadow); font-weight:600; } .hero-features i{ color:var(--secondary); margin-right:8px; } .hero-image{ text-align:center; } .hero-image img{ max-width:100%; animation:float 4s ease-in-out infinite; } @keyframes float{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } 100%{ transform:translateY(0); } } @media(max-width:992px){ .hero{ padding-top:130px; } .hero-grid{ grid-template-columns:1fr; text-align:center; } .hero h1{ font-size:40px; } .hero p{ margin:auto auto 35px; } .hero-buttons{ justify-content:center; } .hero-features{ grid-template-columns:1fr; margin-top:20px; } .hero-image{ margin-top:30px; } } @media(max-width:576px){ .hero h1{ font-size:32px; } .hero p{ font-size:16px; } } /*===================================================== TRUST SECTION =====================================================*/ .trust-section{ background:#ffffff; padding:90px 0; } .trust-header{ text-align:center; max-width:760px; margin:auto; margin-bottom:55px; } .trust-header h2{ font-size:40px; margin-bottom:18px; } .trust-header p{ font-size:18px; color:#666; } .trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; } .trust-card{ background:#ffffff; padding:40px 25px; border-radius:18px; text-align:center; box-shadow:0 15px 40px rgba(0,0,0,.08); transition:.35s; border:1px solid #eef2f3; } .trust-card:hover{ transform:translateY(-10px); } .trust-icon{ width:85px; height:85px; margin:auto; margin-bottom:25px; border-radius:50%; background:linear-gradient(135deg,var(--secondary),var(--primary)); display:flex; align-items:center; justify-content:center; } .trust-icon i{ font-size:34px; color:white; } .trust-card h3{ font-size:30px; margin-bottom:10px; color:var(--primary); } .trust-card p{ font-size:16px; line-height:1.7; } @media(max-width:992px){ .trust-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:576px){ .trust-grid{ grid-template-columns:1fr; } .trust-header h2{ font-size:30px; } .trust-header p{ font-size:16px; } } /*===================================================== ABOUT HOME =====================================================*/ .about-home{ padding:100px 0; background:#f9fcfb; } .about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; } .about-image{ position:relative; } .about-image img{ width:100%; border-radius:25px; box-shadow:0 20px 45px rgba(0,0,0,.12); } .experience-box{ position:absolute; bottom:25px; right:-20px; background:var(--secondary); color:white; padding:22px 28px; border-radius:18px; text-align:center; box-shadow:0 15px 35px rgba(0,0,0,.20); } .experience-box h2{ font-size:42px; color:white; margin-bottom:5px; } .section-tag{ display:inline-block; background:#dff6ee; color:var(--secondary); padding:10px 24px; border-radius:40px; font-weight:700; font-size:14px; margin-bottom:25px; } .about-content h2{ font-size:44px; margin-bottom:25px; } .about-content p{ font-size:17px; margin-bottom:22px; } .about-points{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin:35px 0; } .about-points div{ font-weight:600; } .about-points i{ color:var(--secondary); margin-right:8px; } .about-buttons{ display:flex; gap:20px; flex-wrap:wrap; } @media(max-width:992px){ .about-grid{ grid-template-columns:1fr; } .about-content{ text-align:center; } .about-points{ grid-template-columns:1fr; text-align:left; } .about-buttons{ justify-content:center; } .experience-box{ right:15px; } } @media(max-width:576px){ .about-content h2{ font-size:34px; } .experience-box h2{ font-size:34px; } } /*===================================================== HEAL METHOD =====================================================*/ .heal-method{ padding:100px 0; background:linear-gradient(180deg,#ffffff,#f7fcfb); } .section-heading{ text-align:center; max-width:850px; margin:auto; margin-bottom:60px; } .heal-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px; } .heal-card{ background:#ffffff; padding:40px 30px; border-radius:22px; box-shadow:0 15px 40px rgba(0,0,0,.08); text-align:center; transition:.35s; border:1px solid #edf2f3; } .heal-card:hover{ transform:translateY(-10px); box-shadow:0 20px 45px rgba(0,0,0,.12); } .heal-icon{ width:90px; height:90px; margin:auto; margin-bottom:25px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--primary),var(--secondary)); } .heal-icon i{ font-size:36px; color:#fff; } .heal-card h3{ font-size:48px; color:var(--gold); margin-bottom:8px; } .heal-card h4{ font-size:24px; margin-bottom:18px; } .heal-card p{ font-size:16px; line-height:1.8; } .heal-footer{ margin-top:55px; text-align:center; } @media(max-width:992px){ .heal-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:576px){ .heal-grid{ grid-template-columns:1fr; } .heal-card{ padding:35px 25px; } } /*===================================================== FREE CHALLENGE =====================================================*/ .free-challenge{ padding:100px 0; background:#f7fcfb; } .challenge-grid{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; } .challenge-image{ position:relative; } .challenge-image img{ width:100%; border-radius:24px; box-shadow:0 20px 45px rgba(0,0,0,.12); } .free-badge{ position:absolute; top:20px; left:20px; background:#ff5252; color:white; padding:12px 22px; font-size:22px; font-weight:700; border-radius:50px; box-shadow:0 10px 25px rgba(0,0,0,.20); } .challenge-content h2{ font-size:42px; margin-bottom:22px; } .challenge-content p{ margin-bottom:28px; font-size:17px; } .challenge-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-bottom:35px; } .challenge-list div{ font-weight:600; } .challenge-list i{ color:var(--secondary); margin-right:8px; } .challenge-info{ display:flex; gap:18px; margin-bottom:35px; flex-wrap:wrap; } .challenge-info div{ background:white; padding:18px 25px; border-radius:14px; box-shadow:var(--shadow); text-align:center; min-width:120px; } .challenge-info strong{ display:block; color:var(--primary); margin-bottom:6px; } .challenge-buttons{ display:flex; gap:18px; flex-wrap:wrap; } @media(max-width:992px){ .challenge-grid{ grid-template-columns:1fr; } .challenge-content{ text-align:center; } .challenge-list{ grid-template-columns:1fr; text-align:left; } .challenge-buttons{ justify-content:center; } .challenge-info{ justify-content:center; } } @media(max-width:576px){ .challenge-content h2{ font-size:34px; } .free-badge{ font-size:18px; padding:10px 18px; } } /*===================================================== PROGRAMS =====================================================*/ .programs{ padding:100px 0; background:#ffffff; } .program-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:40px; } .program-card{ background:#fff; border-radius:22px; overflow:hidden; box-shadow:0 18px 40px rgba(0,0,0,.08); transition:.35s; } .program-card:hover{ transform:translateY(-10px); } .program-card img{ width:100%; height:240px; object-fit:cover; } .program-content{ padding:30px; } .program-price{ display:inline-block; background:var(--secondary); color:#fff; padding:8px 18px; border-radius:40px; font-weight:700; margin-bottom:18px; } .program-content h3{ margin-bottom:18px; font-size:28px; } .program-content p{ margin-bottom:30px; line-height:1.8; } .program-footer{ margin-top:50px; text-align:center; } @media(max-width:992px){ .program-grid{ grid-template-columns:1fr; } } /*===================================================== WHY CHOOSE US =====================================================*/ .why-us{ padding:100px 0; background:#f8fcfb; } .why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:50px; } .why-card{ background:#fff; padding:35px; border-radius:20px; text-align:center; box-shadow:0 15px 35px rgba(0,0,0,.08); transition:.35s; border:1px solid #eef2f3; } .why-card:hover{ transform:translateY(-10px); } .why-card i{ font-size:42px; color:var(--secondary); margin-bottom:22px; } .why-card h3{ font-size:24px; margin-bottom:18px; } .why-card p{ font-size:16px; line-height:1.8; } @media(max-width:992px){ .why-grid{ grid-template-columns:repeat(2,1fr); } } @media(max-width:576px){ .why-grid{ grid-template-columns:1fr; } } /*===================================================== FAQ =====================================================*/ .faq-section{ padding:100px 0; background:#f8fcfb; } .faq-container{ max-width:900px; margin:50px auto; } .faq-container details{ background:#fff; margin-bottom:18px; border-radius:16px; box-shadow:0 12px 30px rgba(0,0,0,.06); overflow:hidden; border:1px solid #eef2f3; } .faq-container summary{ padding:22px 28px; font-size:18px; font-weight:600; cursor:pointer; list-style:none; position:relative; } .faq-container summary::-webkit-details-marker{ display:none; } .faq-container summary::after{ content:"+"; position:absolute; right:28px; font-size:28px; color:var(--secondary); transition:.3s; } .faq-container details[open] summary::after{ content:"−"; } .faq-container p{ padding:0 28px 25px; line-height:1.9; color:#666; } .faq-button{ text-align:center; margin-top:50px; } @media(max-width:768px){ .faq-container summary{ font-size:17px; padding:20px; } .faq-container p{ padding:0 20px 20px; } } /*===================================================== FOOTER CTA =====================================================*/ .footer-cta{ background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; text-align:center; padding:90px 20px; } .footer-cta h2{ font-size:46px; color:#fff; margin-bottom:20px; } .footer-cta p{ font-size:19px; margin-bottom:35px; max-width:700px; margin-left:auto; margin-right:auto; } /*===================================================== FOOTER =====================================================*/ footer{ background:#142326; color:#d8d8d8; padding:80px 0 30px; } .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.3fr; gap:45px; margin-bottom:50px; } .footer-logo{ width:90px; margin-bottom:20px; } .footer-grid h3{ color:#fff; margin-bottom:20px; font-size:22px; } .footer-grid p{ line-height:1.9; margin-bottom:14px; } .footer-grid ul{ padding:0; } .footer-grid li{ margin-bottom:14px; } .footer-grid a{ color:#d8d8d8; transition:.3s; } .footer-grid a:hover{ color:#fff; } .footer-social{ display:flex; gap:15px; margin-top:25px; } .footer-social a{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.08); border-radius:50%; font-size:18px; } .footer-social a:hover{ background:var(--secondary); } footer hr{ border:none; height:1px; background:#33484d; margin:35px 0; } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px; } .footer-bottom a{ color:#d8d8d8; margin-left:12px; } .footer-bottom a:hover{ color:#fff; } @media(max-width:992px){ .footer-grid{ grid-template-columns:1fr 1fr; } } @media(max-width:576px){ .footer-grid{ grid-template-columns:1fr; } .footer-bottom{ text-align:center; justify-content:center; } .footer-cta h2{ font-size:34px; } }