*{margin:0;padding:0;box-sizing:border-box}  img.lazy{opacity:0;transition:opacity 0.3s ease} img.loaded{opacity:1}  .scroll-progress {position: fixed;top: 0;left: 0;width: 0%;height: 3px;background: linear-gradient(90deg, #2d5a27, #4a7c59);z-index: 9999;transition: width 0.1s ease}  .nav-link {position: relative;overflow: hidden} .nav-link::before {content: '';position: absolute;bottom: 0;left: 0;width: 0;height: 2px;background: #2d5a27;transition: width 0.3s ease} .nav-link:hover::before {width: 100%}   .service-card, .contact-card, .schedule-card, .online-card {transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1)} .service-card:hover, .contact-card:hover, .schedule-card:hover, .online-card:hover {transform: translateY(-5px);box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1)}  .translating {opacity: 0.7;transform: scale(0.98);transition: all 0.3s ease} .translated {opacity: 1;transform: scale(1);transition: all 0.3s ease}  .lang-loading {position: relative} .lang-loading::after {content: '';position: absolute;top: 50%;left: 50%;width: 20px;height: 20px;margin: -10px 0 0 -10px;border: 2px solid #2d5a27;border-top: 2px solid transparent;border-radius: 50%;animation: spin 1s linear infinite} @keyframes spin {0% {transform: rotate(0deg)} 100% {transform: rotate(360deg)} }  .skeleton {background: #f0f0f0} .skeleton-text {height: 1em;margin: 0.5em 0;border-radius: 4px} .skeleton-title {height: 1.5em;width: 60%;margin: 0.5em 0;border-radius: 4px} .skeleton-card {height: 200px;border-radius: 8px;margin: 1em 0} .skeleton-avatar {width: 100px;height: 100px;border-radius: 50%;margin: 0 auto}  .faq {background: linear-gradient(135deg, #f8f9fa 0%, #e8f5e8 50%, #f0f8f0 100%);padding: 80px 0;position: relative} .faq::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="faq-pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="%232d5a27" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23faq-pattern)"/></svg>');opacity: 0.3;z-index: 0} .faq-content {max-width: 800px;margin: 0 auto;position: relative;z-index: 1} .faq-item {background: rgba(255, 255, 255, 0.9);border-radius: 12px;margin-bottom: 20px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);overflow: hidden;transition: all 0.3s ease} .faq-item:hover {transform: translateY(-2px);box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15)} .faq-question {padding: 25px 30px;cursor: pointer;display: flex;justify-content: space-between;align-items: center;background: linear-gradient(135deg, #2d5a27 0%, #4a7c59 100%);color: #ffffff !important;transition: all 0.3s ease} .faq-question:hover {background: linear-gradient(135deg, #1a3d1a 0%, #2d5a27 100%)} .faq-question h3 {margin: 0;font-size: 1.1rem;font-weight: 600;flex: 1;padding-right: 20px;color: #ffffff !important;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)} .faq-icon {font-size: 1.5rem;font-weight: bold;transition: transform 0.3s ease;min-width: 30px;text-align: center;color: #ffffff !important;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)} .faq-item.active .faq-icon {transform: rotate(45deg)} .faq-answer {padding: 0 30px;max-height: 0;overflow: hidden;transition: all 0.3s ease;background: rgba(255, 255, 255, 0.95)} .faq-item.active .faq-answer {padding: 25px 30px;max-height: 200px} .faq-answer p {margin: 0;line-height: 1.6;color: #555}  @media (max-width: 768px) {.faq {padding: 60px 0} .faq-question {padding: 20px} .faq-question h3 {font-size: 1rem;padding-right: 15px} .faq-icon {font-size: 1.2rem;min-width: 25px} .faq-item.active .faq-answer {padding: 20px} }  .sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0}  *:focus {outline: 3px solid #2d5a27;outline-offset: 2px}  .skip-link {position: absolute;top: -40px;left: 6px;background: #2d5a27;color: white;padding: 8px;text-decoration: none;border-radius: 4px;z-index: 10000;transition: top 0.3s} .skip-link:focus {top: 6px}  * {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale} body{font-family:'Inter',sans-serif;line-height:1.6;color:#333;overflow-x:hidden;text-rendering:optimizeLegibility;font-feature-settings:'kern' 1,'liga' 1,'calt' 1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}  img {max-width: 100%;height: auto;display: block}  @media (prefers-reduced-motion: reduce) {*, *::before, *::after {animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important} }  .nav-link.active{color:#2c5aa0!important} .nav-link.active::after{width:100%!important}  h1, h2, h3, h4, h5, h6 {font-weight: 600;line-height: 1.3;margin-bottom: 0.8em;color: #2d5a27;text-align: center;letter-spacing: -0.02em} h1 {font-size: clamp(2rem, 5vw, 3.5rem);font-weight: 700;text-align: center;margin-bottom: 1rem} h2 {font-size: clamp(1.5rem, 4vw, 2.5rem);font-weight: 600;text-align: center;margin-bottom: 0.8rem} h3 {font-size: clamp(1.25rem, 3vw, 1.75rem);font-weight: 600;text-align: center;margin-bottom: 0.6rem} .container {max-width: 1200px;margin: 0 auto;padding: 0 20px}  .section-header {text-align: center;margin-bottom: 3rem} .section-header h2 {margin-bottom: 1rem} .section-header p {font-size: 1.1rem;color: #666;max-width: 600px;margin: 0 auto}  .btn {display: inline-flex;align-items: center;justify-content: center;padding: 15px 30px;border: none;border-radius: 50px;font-size: 1rem;font-weight: 500;text-decoration: none;cursor: pointer;transition: all 0.3s ease;min-height: 48px;position: relative;overflow: hidden;-webkit-appearance: none;-moz-appearance: none;appearance: none;-webkit-border-radius: 50px;-moz-border-radius: 50px} .btn::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);transition: left 0.5s} .btn:hover::before {left: 100%}  .navbar {position: fixed;top: 0;width: 100%;background: rgba(255, 255, 255, 0.95);backdrop-filter: blur(10px);z-index: 1000;transition: all 0.3s ease;box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);transform: translateY(0)} .navbar.scrolled {background: rgba(255, 255, 255, 0.98);box-shadow: 0 4px 30px rgba(0, 0, 0, 0.15)} .nav-container {max-width: 1200px;margin: 0 auto;padding: 0 20px;display: grid;grid-template-columns: auto 1fr auto;align-items: center;height: 40px;gap: 1rem} .nav-logo h2 {color: #2d5a27;font-size: 1.1rem;font-weight: 700;line-height: 1.1} .nav-logo span {color: #666;font-size: 0.7rem;font-weight: 400;line-height: 1.1;margin-top: 1px;display: block} .nav-menu {display: flex;list-style: none;gap: 1rem;justify-content: center;flex-wrap: wrap;min-width: 0;flex: 1} .nav-link {text-decoration: none;color: #333;font-weight: 500;transition: color 0.3s ease;position: relative;white-space: nowrap;padding: 0.2rem 0;font-size: 0.85rem} .nav-link:hover {color: #2d5a27} .nav-link::after {content: '';position: absolute;width: 0;height: 2px;bottom: -5px;left: 0;background-color: #2d5a27;transition: width 0.3s ease} .nav-link:hover::after {width: 100%}  .language-selector {display: flex;justify-content: flex-end;flex-shrink: 0;position: relative} .lang-dropdown {position: relative;display: inline-block} .lang-dropdown-btn {background: white;border: 1px solid #e0e0e0;border-radius: 6px;padding: 5px 8px;cursor: pointer;font-size: 0.75rem;font-weight: 500;color: #333;transition: all 0.2s ease;display: flex;align-items: center;gap: 4px;min-width: 50px;height: 28px;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08)} .lang-dropdown-btn:hover {border-color: #2d5a27;background: rgba(45, 90, 39, 0.05);box-shadow: 0 2px 6px rgba(45, 90, 39, 0.15)} .lang-dropdown-btn.active {border-color: #2d5a27;background: #2d5a27;color: white;box-shadow: 0 2px 6px rgba(45, 90, 39, 0.3)} .lang-dropdown-btn i {font-size: 0.8rem;transition: transform 0.3s ease} .lang-dropdown-btn.active i {transform: rotate(180deg)} .lang-dropdown-menu {position: absolute;top: 100%;right: 0;background: white;border: 1px solid #e0e0e0;border-radius: 8px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);min-width: 140px;z-index: 1000;opacity: 0;visibility: hidden;transform: translateY(-5px);transition: all 0.2s ease;margin-top: 2px} .lang-dropdown-menu.show {opacity: 1;visibility: visible;transform: translateY(0)} .lang-option {background: none;border: none;padding: 5px 8px;cursor: pointer;font-size: 0.75rem;color: #333;transition: all 0.15s ease;display: flex;align-items: center;gap: 6px;width: 100%;text-align: left;border-radius: 4px;margin: 1px;width: calc(100% - 2px)} .lang-option:hover {background: rgba(45, 90, 39, 0.1);color: #2d5a27} .lang-option.active {background: rgba(45, 90, 39, 0.15);color: #2d5a27;font-weight: 600} .lang-option span:first-child {font-size: 1.1rem} .lang-option span:last-child {font-weight: 500}  .hero {background: linear-gradient(135deg, #2c3e50 0%, #34495e 25%, #3498db 50%, #2980b9 75%, #1f618d 100%);min-height: 100vh;display: flex;align-items: center;color: white;position: relative;overflow: hidden;padding-top: 60px} @keyframes float {0%, 100% {transform: translateY(0px) rotate(0deg)} 50% {transform: translateY(-20px) rotate(1deg)} } .hero-container {max-width: 1200px;margin: 0 auto;padding: 0 20px;position: relative;z-index: 1} .hero-content {display: grid;grid-template-columns: 1fr 1fr;gap: 4rem;align-items: center;min-height: 80vh} .hero-text {display: flex;flex-direction: column;gap: 1.5rem} .welcome-badge {display: inline-block;background: rgba(255, 255, 255, 0.2);backdrop-filter: blur(10px);border: 2px solid rgba(255, 255, 255, 0.3);border-radius: 50px;padding: 12px 24px;margin-bottom: 2rem;font-size: 1rem;font-weight: 500;color: white;text-shadow: 0 2px 4px rgba(0,0,0,0.3);animation: slideInLeft 1s ease-out 0.1s both;box-shadow: 0 8px 20px rgba(0,0,0,0.1)} .hero-content h1 {font-size: 3.5rem;font-weight: 700;margin-bottom: 1.5rem;line-height: 1.2;color: white;text-shadow: 0 4px 8px rgba(0,0,0,0.3);animation: slideInLeft 1s ease-out} @keyframes slideInLeft {from {opacity: 0;transform: translateX(-50px)} to {opacity: 1;transform: translateX(0)} } .hero-content p {font-size: 1.2rem;margin-bottom: 2rem;opacity: 0.9;animation: slideInLeft 1s ease-out 0.2s both} .hero-buttons {display: flex;gap: 1rem;flex-wrap: wrap;animation: slideInLeft 1s ease-out 0.4s both} .btn-primary {background: white;color: #2d5a27;font-weight: 600;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1)} .btn-primary:hover {background: #f0f8f0;transform: translateY(-2px);box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2)} .btn-secondary {background: transparent;color: white;border: 2px solid white;font-weight: 600} .btn-secondary:hover {background: white;color: #2d5a27;transform: translateY(-2px);box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3)} .hero-image {display: flex;justify-content: center;align-items: center;width: 100%;max-width: 400px;margin: 0 auto;overflow: hidden;position: relative;z-index: 10} @keyframes elegantSlideIn {0% {opacity: 0;transform: translateX(60px) translateY(20px) scale(0.9)} 50% {opacity: 0.7;transform: translateX(20px) translateY(-10px) scale(0.95)} 100% {opacity: 1;transform: translateX(0) translateY(0) scale(1)} } .profile-photo {width: 320px;height: 320px;object-fit: cover;border-radius: 50%;border: 12px solid #ffffff;box-shadow: 0 0 0 20px #ffffff, 0 15px 30px rgba(0, 0, 0, 0.2);background: #ffffff;transition: all 0.4s ease;max-width: 100%;max-height: 100%;display: block;margin: 0 auto;mix-blend-mode: normal;isolation: isolate} @keyframes elegantFloat {0%, 100% {transform: translateY(0px) scale(1);box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(255, 255, 255, 0.3)} 25% {transform: translateY(-8px) scale(1.005);box-shadow: 0 20px 35px rgba(0, 0, 0, 0.2), 0 8px 20px rgba(255, 255, 255, 0.4)} 50% {transform: translateY(-12px) scale(1.01);box-shadow: 0 25px 40px rgba(0, 0, 0, 0.25), 0 10px 25px rgba(255, 255, 255, 0.5)} 75% {transform: translateY(-8px) scale(1.005);box-shadow: 0 20px 35px rgba(0, 0, 0, 0.2), 0 8px 20px rgba(255, 255, 255, 0.4)} }  .hero-image {display: flex;justify-content: center;align-items: center;animation: slideInRight 1s ease-out 0.6s both;width: 100%;max-width: 400px;margin: 0 auto;overflow: hidden;border-radius: 50%;aspect-ratio: 1;position: relative}  @keyframes fadeInUp {from {opacity: 0;transform: translateY(30px)} to {opacity: 1;transform: translateY(0)} } @keyframes fadeInLeft {from {opacity: 0;transform: translateX(-30px)} to {opacity: 1;transform: translateX(0)} } @keyframes fadeInRight {from {opacity: 0;transform: translateX(30px)} to {opacity: 1;transform: translateX(0)} } @keyframes slideInUp {from {opacity: 0;transform: translateY(50px)} to {opacity: 1;transform: translateY(0)} } @keyframes scaleIn {from {opacity: 0;transform: scale(0.8)} to {opacity: 1;transform: scale(1)} } @keyframes float {0%, 100% {transform: translateY(0px)} 50% {transform: translateY(-10px)} } @keyframes shimmer {0% {background-position: -200% 0} 100% {background-position: 200% 0} } @keyframes fadeInLeft {from {opacity: 0;transform: translateX(-30px)} to {opacity: 1;transform: translateX(0)} } @keyframes fadeInRight {from {opacity: 0;transform: translateX(30px)} to {opacity: 1;transform: translateX(0)} }  * {transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease}  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {.hero-content {display: -ms-flexbox;-ms-flex-direction: column;flex-direction: column} .services-grid {display: -ms-flexbox;-ms-flex-wrap: wrap;flex-wrap: wrap} }  @-moz-document url-prefix() {.profile-photo {image-rendering: -moz-crisp-edges} }  @media screen and (-webkit-min-device-pixel-ratio: 0) {.hero {-webkit-transform: translateZ(0);transform: translateZ(0)} } .profile-photo:hover {transform: scale(1.05) translateY(-5px);box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3), 0 15px 30px rgba(255, 255, 255, 0.4), inset 0 0 0 3px rgba(255, 255, 255, 0.5);animation-play-state: paused;transition: all 0.3s ease} .image-placeholder {width: 300px;height: 300px;background: rgba(255, 255, 255, 0.1);border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 5rem;color: white;backdrop-filter: blur(10px);border: 2px solid rgba(255, 255, 255, 0.2)}  .section-header {text-align: center;margin-bottom: 4rem;animation: fadeInUp 0.8s ease-out} .section-header h2 {font-size: 2.5rem;color: #2d5a27;margin-bottom: 1rem;font-weight: 700} .contact .section-header h2 {color: #ffffff !important;text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4)} .section-header p {font-size: 1.1rem;color: #666;max-width: 600px;margin: 0 auto}  .about {padding: 100px 0;background: linear-gradient(135deg, #f8f9fa 0%, #e8f5e8 50%, #f0f8f0 100%);position: relative} .about::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="leaves" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="20" cy="20" r="2" fill="%234a7c59" opacity="0.1"/><circle cx="80" cy="80" r="1.5" fill="%236b8e6b" opacity="0.08"/><circle cx="50" cy="10" r="1" fill="%238fbc8f" opacity="0.06"/></pattern></defs><rect width="100%" height="100%" fill="url(%23leaves)"/></svg>');opacity: 0.3;z-index: 0} .about .container {position: relative;z-index: 1} .about-content {display: grid;grid-template-columns: 1fr;gap: 3rem;max-width: 900px;margin: 0 auto;animation: fadeInUp 0.8s ease-out 0.2s both} .about-intro {text-align: center;margin-bottom: 3rem} .about-text h3 {font-size: 2rem;color: #2d5a27;margin-bottom: 1.5rem} .about-description {font-size: 1.1rem;color: #666;margin-bottom: 2rem;line-height: 1.8} .qualifications {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 2rem;margin-top: 2rem} .qualification {display: flex;align-items: center;gap: 1rem;background: white;padding: 1.5rem;border-radius: 12px;box-shadow: 0 4px 12px rgba(45, 90, 39, 0.08);border: 1px solid rgba(45, 90, 39, 0.1);transition: all 0.3s ease;min-height: 120px;height: 100%} .qualification:hover {transform: translateY(-2px);box-shadow: 0 8px 20px rgba(45, 90, 39, 0.15)} .qualification i {font-size: 1.5rem;color: #2d5a27;flex-shrink: 0;width: 24px;height: 24px;display: flex;align-items: center;justify-content: center} .qualification h4 {font-size: 1.1rem;color: #333;margin-bottom: 0.5rem;font-weight: 600;line-height: 1.3} .qualification p {color: #666;font-size: 0.95rem;line-height: 1.4;margin: 0;flex: 1} .about-image {display: flex;justify-content: center} .about-image .image-placeholder {width: 250px;height: 250px;background: linear-gradient(135deg, #2d5a27, #4a7c59);color: white;font-size: 4rem}  .work, .practical, .topics {padding: 80px 0;background: linear-gradient(135deg, #ffffff 0%, #f8fff8 100%);position: relative} .work::before, .practical::before, .topics::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="leaves" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="%232d5a27" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23leaves)"/></svg>');opacity: 0.3;pointer-events: none} .work .work-content p {font-size: 1.1rem;color: #555;max-width: 900px;margin: 0 auto;line-height: 1.8} .list-grid {list-style: none;display: grid;grid-template-columns: 1fr;gap: 0.75rem;max-width: 900px;margin: 0 auto;color: #555} .list-grid li {position: relative;padding-left: 1.5rem} .list-grid li::before {content: '•';position: absolute;left: 0;color: #2d5a27;font-size: 1.2rem} .list-grid.two-cols {grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))}  .services {padding: 100px 0;background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 50%, #f0f8f0 100%);position: relative} .services::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="hearts" x="0" y="0" width="80" height="80" patternUnits="userSpaceOnUse"><path d="M40 20c0-11-9-20-20-20s-20 9-20 20c0 11 20 30 20 30s20-19 20-30z" fill="%234a7c59" opacity="0.05"/><circle cx="60" cy="60" r="3" fill="%236b8e6b" opacity="0.03"/></pattern></defs><rect width="100%" height="100%" fill="url(%23hearts)"/></svg>');opacity: 0.4;z-index: 0} .services .container {position: relative;z-index: 1} .services-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 2rem;animation: fadeInUp 0.8s ease-out 0.4s both} .service-card {background: white;padding: 2.5rem;border-radius: 15px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);text-align: center;transition: transform 0.3s ease, box-shadow 0.3s ease;border: 1px solid #f0f0f0;animation: scaleIn 0.6s ease-out both} .service-card:nth-child(1) {animation-delay: 0.1s} .service-card:nth-child(2) {animation-delay: 0.2s} .service-card:nth-child(3) {animation-delay: 0.3s} .service-card:nth-child(4) {animation-delay: 0.4s} .service-card:nth-child(5) {animation-delay: 0.5s} .service-card:nth-child(6) {animation-delay: 0.6s} .service-card:hover {transform: translateY(-10px);box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15)} .service-icon {width: 80px;height: 80px;background: linear-gradient(135deg, #2d5a27, #4a7c59);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 1.5rem;font-size: 2rem;color: white;box-shadow: 0 8px 20px rgba(45, 90, 39, 0.2);animation: float 3s ease-in-out infinite} .service-card h3 {font-size: 1.5rem;color: #333;margin-bottom: 1rem;font-weight: 600} .service-card p {color: #666;margin-bottom: 1.5rem;line-height: 1.6} .service-card ul {list-style: none;text-align: left} .service-card li {color: #666;margin-bottom: 0.5rem;position: relative;padding-left: 1.5rem} .service-card li::before {content: '✓';position: absolute;left: 0;color: #2d5a27;font-weight: bold;font-size: 1.1rem}  .schedule {padding: 100px 0;background: linear-gradient(135deg, #ffffff 0%, #f8fff8 100%);position: relative} .schedule::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="schedule-pattern" x="0" y="0" width="25" height="25" patternUnits="userSpaceOnUse"><circle cx="12.5" cy="12.5" r="1.5" fill="%232d5a27" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23schedule-pattern)"/></svg>');opacity: 0.4;pointer-events: none} .schedule-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 2rem;max-width: 800px;margin: 0 auto} .schedule-card {background: white;border-radius: 20px;padding: 2.5rem;text-align: center;box-shadow: 0 15px 35px rgba(45, 90, 39, 0.1);border: 2px solid rgba(45, 90, 39, 0.1);transition: all 0.4s ease;position: relative;overflow: hidden} .schedule-card::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 6px;background: linear-gradient(135deg, #2d5a27, #4a7c59);border-radius: 20px 20px 0 0} .schedule-card:hover {transform: translateY(-10px);box-shadow: 0 25px 50px rgba(45, 90, 39, 0.2)} .schedule-card.morning {background: linear-gradient(135deg, #fff8e1 0%, #fffbf0 100%)} .schedule-card.evening {background: linear-gradient(135deg, #f3e5f5 0%, #faf5ff 100%)} .schedule-icon {width: 80px;height: 80px;background: linear-gradient(135deg, #2d5a27, #4a7c59);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 1.5rem;font-size: 2rem;color: white;box-shadow: 0 8px 20px rgba(45, 90, 39, 0.2);transition: all 0.3s ease} .schedule-card:hover .schedule-icon {transform: scale(1.1) rotate(5deg);box-shadow: 0 12px 25px rgba(45, 90, 39, 0.3)} .schedule-card h3 {font-size: 1.5rem;color: #2d5a27 !important;margin-bottom: 1.5rem;font-weight: 600} .schedule-days {display: flex;justify-content: center;gap: 0.5rem;margin-bottom: 1.5rem;flex-wrap: wrap} .schedule-days .day {background: rgba(45, 90, 39, 0.1);color: #2d5a27 !important;padding: 8px 16px;border-radius: 20px;font-weight: 500;font-size: 0.9rem;border: 1px solid rgba(45, 90, 39, 0.2)} .schedule-time {font-size: 1.5rem;font-weight: 700;color: #2d5a27 !important;background: rgba(45, 90, 39, 0.1);padding: 12px 24px;border-radius: 25px;display: inline-block;border: 2px solid rgba(45, 90, 39, 0.2)}  .online-practice {background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);padding: 80px 0;position: relative} .online-content {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 40px;margin-top: 50px} .online-card {background: white;padding: 40px 30px;border-radius: 15px;text-align: center;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);transition: transform 0.3s ease, box-shadow 0.3s ease;border: 1px solid #e9ecef} .online-card:hover {transform: translateY(-5px);box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15)} .online-icon {width: 80px;height: 80px;background: linear-gradient(135deg, #2d5a27 0%, #4a7c59 100%);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 25px;color: white;font-size: 32px} .online-card h3 {color: #ffffff;font-size: 24px;font-weight: 600;margin-bottom: 15px} .online-card p {color: #666;line-height: 1.6;font-size: 16px}  .urgency {padding: 80px 0;background: linear-gradient(135deg, #1a3d1a 0%, #2d5a27 50%, #4a7c59 100%);position: relative;color: white} .urgency::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="urgency" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="2" fill="%23ffffff" opacity="0.1"/><circle cx="20" cy="20" r="1" fill="%23ffffff" opacity="0.05"/><circle cx="80" cy="80" r="1" fill="%23ffffff" opacity="0.05"/></pattern></defs><rect width="100%" height="100%" fill="url(%23urgency)"/></svg>');opacity: 0.4;z-index: 0} .urgency .container {position: relative;z-index: 1} .urgency-content {display: grid;grid-template-columns: 2fr 1fr;gap: 3rem;align-items: center;max-width: 1000px;margin: 0 auto} .urgency-text h2 {font-size: 2.5rem;margin-bottom: 1rem;color: #ffffff;text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4)} .urgency-text p {font-size: 1.2rem;margin-bottom: 2rem;color: #ffffff;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)} .urgency-stats {display: flex;gap: 2rem;flex-wrap: wrap} .stat {text-align: center;padding: 1rem;background: rgba(255, 255, 255, 0.1);border-radius: 15px;border: 1px solid rgba(255, 255, 255, 0.2);backdrop-filter: blur(10px);min-width: 120px} .stat .number {display: block;font-size: 2rem;font-weight: 700;color: #ffffff;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)} .stat .label {display: block;font-size: 0.9rem;color: rgba(255, 255, 255, 0.9);margin-top: 0.5rem} .urgency-cta {display: flex;justify-content: center;align-items: center} .urgency-btn {transform: scale(1.1);animation: pulse 2s infinite} @keyframes pulse {0% {box-shadow: 0 8px 25px rgba(45, 90, 39, 0.3)} 50% {box-shadow: 0 8px 25px rgba(45, 90, 39, 0.3), 0 0 0 10px rgba(45, 90, 39, 0.1)} 100% {box-shadow: 0 8px 25px rgba(45, 90, 39, 0.3)} } .btn-text {display: block;font-weight: 600;font-size: 1.1rem} .btn-subtext {display: block;font-size: 0.85rem;opacity: 0.9;font-weight: 400}  .contact {padding: 80px 0;background: linear-gradient(135deg, #2d5a27 0%, #4a7c59 50%, #6b8e6b 100%);position: relative;color: white} .contact::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="waves" x="0" y="0" width="120" height="120" patternUnits="userSpaceOnUse"><path d="M0 60 Q30 30 60 60 T120 60 V120 H0 Z" fill="%23ffffff" opacity="0.03"/><path d="M0 80 Q40 50 80 80 T160 80 V120 H0 Z" fill="%23ffffff" opacity="0.02"/></pattern></defs><rect width="100%" height="100%" fill="url(%23waves)"/></svg>');opacity: 0.3;z-index: 0} .contact .container {position: relative;z-index: 1} .contact .section-header p {color: #ffffff !important;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)} .contact-content {max-width: 1000px;margin: 0 auto;animation: fadeInUp 0.8s ease-out 0.6s both}  .contact-actions {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 2rem} .contact-card {background: white;padding: 2rem;border-radius: 16px;box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);text-align: center;transition: all 0.3s ease;position: relative;overflow: hidden;border: 1px solid rgba(45, 90, 39, 0.1);animation: slideInUp 0.6s ease-out both} .contact-card:nth-child(1) {animation-delay: 0.1s} .contact-card:nth-child(2) {animation-delay: 0.2s} .contact-card:nth-child(3) {animation-delay: 0.3s} .contact-card::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);transition: left 0.6s ease} .contact-card:hover::before {left: 100%} .contact-card:hover {transform: translateY(-5px);box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12)} .contact-card-icon {width: 80px;height: 80px;background: linear-gradient(135deg, #2d5a27, #4a7c59);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 1.5rem;font-size: 2rem;color: white;transition: all 0.3s ease;box-shadow: 0 8px 20px rgba(45, 90, 39, 0.2)} .contact-card:hover .contact-card-icon {transform: scale(1.1) rotate(5deg);box-shadow: 0 10px 25px rgba(45, 90, 39, 0.3)} .contact-card h3 {font-size: 1.5rem;color: #2d5a27;margin-bottom: 1rem;font-weight: 600;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)} .contact-card p {color: #555;margin-bottom: 1.5rem;line-height: 1.6;font-size: 0.95rem;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.05)} .contact-number {font-size: 1.1rem !important;font-weight: 600 !important;color: #2d5a27 !important;margin-bottom: 1rem !important;background: rgba(255, 255, 255, 0.95);padding: 8px 16px;border-radius: 8px;display: inline-block;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)} .schedule-info {background: rgba(45, 90, 39, 0.05);border-radius: 12px;padding: 1rem;margin-bottom: 1.5rem;border: 1px solid rgba(45, 90, 39, 0.1)} .schedule-item {display: flex;justify-content: space-between;align-items: center;padding: 0.5rem 0;border-bottom: 1px solid rgba(45, 90, 39, 0.1)} .schedule-item:last-child {border-bottom: none} .schedule-item .day {font-weight: 600;color: #2d5a27 !important;font-size: 0.9rem} .schedule-item .time {font-weight: 500;color: #666;font-size: 0.9rem} .contact-btn {display: inline-flex;align-items: center;gap: 0.5rem;padding: 15px 25px;border-radius: 50px;font-weight: 600;text-decoration: none;transition: all 0.3s ease;position: relative;overflow: hidden} .contact-btn i {font-size: 1.1rem} .btn-whatsapp {background: #25D366;color: white;border: 2px solid #25D366} .btn-whatsapp:hover {background: #128C7E;border-color: #128C7E;transform: translateY(-2px);box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3)} .btn-secondary {background: transparent;color: #2d5a27;border: 2px solid #2d5a27} .btn-secondary:hover {background: #2d5a27;color: white;transform: translateY(-2px);box-shadow: 0 10px 25px rgba(45, 90, 39, 0.3)}  .footer {background: linear-gradient(135deg, #1a3d1a 0%, #2d5a27 50%, #4a7c59 100%);color: white;padding: 50px 0 20px;position: relative} .footer::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><pattern id="dots" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse"><circle cx="30" cy="30" r="1" fill="%23ffffff" opacity="0.05"/><circle cx="15" cy="15" r="0.5" fill="%23ffffff" opacity="0.03"/><circle cx="45" cy="45" r="0.5" fill="%23ffffff" opacity="0.03"/></pattern></defs><rect width="100%" height="100%" fill="url(%23dots)"/></svg>');opacity: 0.4;z-index: 0} .footer .container {position: relative;z-index: 1} .footer-content {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 2rem;margin-bottom: 2rem;animation: fadeInUp 0.8s ease-out 0.8s both} .footer-section h3, .footer-section h4 {margin-bottom: 1rem;color: #ffffff !important;text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3)} .footer-section ul {list-style: none} .footer-section ul li {margin-bottom: 0.5rem} .footer-section ul li a {color: #ffffff !important;text-decoration: none;transition: all 0.3s ease;font-weight: 400;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2)} .footer-section ul li a:hover {color: white} .footer-section p {color: #ffffff !important;line-height: 1.6;font-weight: 400;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2)} .footer-bottom {text-align: center;padding-top: 2rem;border-top: 1px solid rgba(255, 255, 255, 0.3);color: #ffffff !important;font-weight: 400;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2)}  @media (max-width: 768px) {.nav-container {height: auto;min-height: 35px;padding: 3px 15px;grid-template-columns: 1fr auto;gap: 0.5rem;position: relative} .nav-logo {text-align: center} .nav-logo h2 {font-size: 0.9rem;line-height: 1.1} .nav-logo span {font-size: 0.6rem;margin-top: 0px;line-height: 1.1} .language-selector {justify-content: center;order: 3;grid-column: 1 / -1;margin-top: 1rem} .lang-dropdown-menu {right: auto;left: 50%;transform: translateX(-50%) translateY(-10px);min-width: 140px} .lang-dropdown-menu.show {transform: translateX(-50%) translateY(0)} .lang-dropdown-btn {min-width: 45px;height: 24px;font-size: 0.65rem;padding: 3px 5px} .nav-menu {display: none} .language-selector {margin-left: 0;margin-top: 1rem;justify-content: center;min-width: auto} .lang-btn {min-width: 40px;height: 35px;font-size: 1rem} .hero {min-height: 100vh;padding: 80px 0 40px;display: flex;flex-direction: column;justify-content: center} .hero-container {grid-template-columns: 1fr;text-align: center;gap: 2rem;padding: 0 15px} .hero-content {display: flex;flex-direction: column;align-items: center;text-align: center;gap: 2rem;min-height: auto;padding-top: 50px} .hero-image {order: -1;margin-bottom: 1rem;max-width: 350px;width: 100%;border-radius: 50%;aspect-ratio: 1} .hero-content h1 {font-size: 2.5rem;line-height: 1.1;margin-bottom: 1rem} .hero-content p {font-size: 1.1rem;margin-bottom: 1.5rem;padding: 0 10px} .hero-buttons {justify-content: center;gap: 1rem;flex-wrap: wrap} .welcome-badge {font-size: 0.9rem;padding: 8px 16px;margin-bottom: 1rem} .container {padding: 0 15px} .section-header {text-align: center;margin-bottom: 2rem} .section-header h2 {font-size: 2rem;margin-bottom: 0.5rem} .section-header p {font-size: 1rem} .qualifications {grid-template-columns: 1fr;gap: 1.5rem} .qualification {padding: 1rem;text-align: center;min-height: 100px;height: 100%} .qualification i {font-size: 2rem;margin-bottom: 0.5rem;flex-shrink: 0;width: 32px;height: 32px;display: flex;align-items: center;justify-content: center} .about-content {grid-template-columns: 1fr;gap: 2rem;text-align: center} .about-text h3 {font-size: 1.5rem;margin-bottom: 1rem} .about-description {font-size: 1rem;line-height: 1.6;margin-bottom: 1rem} .profile-photo {width: 300px;height: 300px;border-width: 6px;max-width: 70vw;max-height: 70vw;margin: 0 auto} .services-grid {grid-template-columns: 1fr;gap: 1.5rem} .service-card {padding: 1.5rem;text-align: center} .service-card h3 {font-size: 1.3rem;margin-bottom: 1rem} .service-card p {font-size: 0.95rem;margin-bottom: 1rem} .service-card ul {text-align: left;padding-left: 1rem} .service-card li {font-size: 0.9rem;margin-bottom: 0.5rem} .schedule-grid {grid-template-columns: 1fr;gap: 1.5rem} .schedule-card {padding: 1.5rem;text-align: center} .schedule-card h3 {font-size: 1.2rem;margin-bottom: 1rem} .schedule-days {margin-bottom: 1rem} .schedule-time {font-size: 1.1rem;font-weight: 600} .contact-actions {grid-template-columns: 1fr;gap: 1.5rem} .contact-card {padding: 1.5rem;text-align: center} .contact-card h3 {font-size: 1.2rem;margin-bottom: 1rem} .contact-number {font-size: 1rem !important;padding: 6px 12px !important;margin-bottom: 1rem} .schedule-info {padding: 0.8rem} .list-grid {grid-template-columns: 1fr;gap: 1rem} .list-grid li {padding: 1rem;font-size: 0.95rem} .footer-content {grid-template-columns: 1fr;text-align: center;gap: 2rem} .footer-section {margin-bottom: 1.5rem} } @media (max-width: 480px) {.hero {padding: 70px 0 30px} .hero-container {padding: 0 10px} .hero-content h1 {font-size: 2rem;line-height: 1.1} }  @media (max-width: 480px) {.nav-container {min-height: 32px;padding: 2px 10px} .nav-logo h2 {font-size: 0.8rem} .nav-logo span {font-size: 0.55rem} .lang-dropdown-btn {min-width: 40px;height: 22px;font-size: 0.6rem;padding: 2px 4px} .nav-menu {top: 35px;padding: 0.8rem 0} .hero-content {padding-top: 60px} .hero-content h1 {font-size: 1.8rem;line-height: 1.1} .hero-content p {font-size: 1rem;padding: 0 5px} .hero {padding-top: 70px} .hero-buttons {flex-direction: column;align-items: center;gap: 0.8rem} .urgency-content {grid-template-columns: 1fr;gap: 2rem;text-align: center} .urgency-text h2 {font-size: 2rem} .urgency-stats {justify-content: center} .stat {min-width: 100px;padding: 0.8rem} .stat .number {font-size: 1.5rem} .welcome-badge {font-size: 0.8rem;padding: 6px 12px} .qualifications {grid-template-columns: 1fr;gap: 1rem} .qualification {padding: 0.8rem} .qualification i {font-size: 1.8rem} .hero-image {max-width: 250px;width: 100%;border-radius: 50%;aspect-ratio: 1} .profile-photo {width: 200px;height: 200px;max-width: 50vw;max-height: 50vw;margin: 0 auto;display: block} .btn {width: 100%;max-width: 280px;padding: 12px 24px;font-size: 0.95rem} .section-header h2 {font-size: 1.8rem} .service-card {padding: 1.2rem} .contact-card {padding: 1.2rem} .container {padding: 0 10px} .nav-menu {top: 45px;padding: 1rem 0} .nav-menu li {margin: 0.6rem 0} .nav-link {font-size: 1rem;padding: 0.7rem 1.2rem} .footer-content {gap: 1.5rem} .footer-section h3, .footer-section h4 {font-size: 1.2rem} .footer-section p {font-size: 0.9rem} } @media (max-width: 360px) {.hero {padding: 50px 0 20px} .hero-container {padding: 0 8px} .hero-content {gap: 0.8rem;padding-top: 20px} .hero-text {order: 1} .hero-image {order: 2;max-width: 220px;width: 100%;border-radius: 50%;aspect-ratio: 1;margin-bottom: 0} .profile-photo {width: 180px;height: 180px;max-width: 50vw;max-height: 50vw} .hero-content h1 {font-size: 1.6rem;line-height: 1.2;margin-bottom: 0.6rem} .hero-content p {font-size: 0.9rem;line-height: 1.4;margin-bottom: 0.8rem;padding: 0 5px} .welcome-badge {margin-bottom: 0.8rem} .welcome-badge span {font-size: 0.8rem;padding: 6px 10px} .btn {max-width: 250px;padding: 10px 20px;font-size: 0.9rem} .section-header h2 {font-size: 1.6rem}  .nav-container {min-height: 28px;padding: 1px 6px} .nav-logo h2 {font-size: 0.7rem} .nav-logo span {font-size: 0.45rem;display: none} .lang-dropdown-btn {min-width: 35px;height: 20px;font-size: 0.55rem;padding: 1px 3px} .service-card {padding: 1.5rem;background: white;border-radius: 15px;box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);margin: 0.5rem;border: 1px solid rgba(45, 90, 39, 0.1);transition: all 0.3s ease} .service-card:hover {transform: translateY(-5px);box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15)} .services-grid {display: flex;flex-direction: column;gap: 1rem;padding: 0 1rem} }  @media (max-width: 300px) {.hero {padding: 40px 0 15px} .hero-container {padding: 0 5px} .hero-content {gap: 0.6rem;padding-top: 15px} .hero-image {max-width: 150px} .profile-photo {width: 120px;height: 120px;max-width: 35vw;max-height: 35vw} .hero-content h1 {font-size: 1.4rem;margin-bottom: 0.5rem} .hero-content p {font-size: 0.85rem;margin-bottom: 0.6rem;padding: 0 3px} .welcome-badge span {font-size: 0.75rem;padding: 5px 8px} .btn {max-width: 220px;padding: 8px 16px;font-size: 0.85rem}  .nav-container {min-height: 26px;padding: 0px 4px} .nav-logo h2 {font-size: 0.65rem} .lang-dropdown-btn {min-width: 32px;height: 18px;font-size: 0.5rem;padding: 1px 2px} .contact-card {padding: 1rem} .qualification {padding: 0.6rem} .container {padding: 0 8px} .footer-content {grid-template-columns: 1fr;text-align: center;gap: 1.5rem} .footer-section h3, .footer-section h4 {font-size: 1.1rem;margin-bottom: 0.8rem} .footer-section p {font-size: 0.9rem} .footer-section ul {gap: 0.5rem} .footer-section li {font-size: 0.9rem} .nav-menu {top: 45px;padding: 1rem 0} .nav-menu li {margin: 0.5rem 0} .nav-link {font-size: 0.95rem;padding: 0.6rem 1rem} }  html {scroll-behavior: smooth}  * {-webkit-tap-highlight-color: transparent;-webkit-touch-callout: none} body {-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;text-size-adjust: 100%;touch-action: manipulation}  .btn, .lang-dropdown-btn, .lang-option, .nav-link {min-height: 48px;min-width: 48px;touch-action: manipulation;-webkit-tap-highlight-color: rgba(45, 90, 39, 0.2)}  @media (max-width: 768px) {.btn {min-height: 48px;padding: 12px 24px} .nav-link {min-height: 48px;padding: 12px 20px} .lang-dropdown-btn {min-height: 48px;min-width: 48px} }  input, textarea, select {font-size: 16px}  @media (max-width: 768px) {body {overflow-x: hidden;-webkit-overflow-scrolling: touch}   a, button, [role="button"] {-webkit-tap-highlight-color: rgba(45, 90, 39, 0.2);-webkit-touch-callout: none}  .btn, .nav-link, .lang-dropdown-btn {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none} }  @media (max-width: 768px) {.back-to-top {width: 45px !important;height: 45px !important;bottom: 15px !important;right: 15px !important;font-size: 1rem !important} }  @media (max-width: 768px) and (orientation: portrait) {.hero {min-height: 100vh;padding: 80px 0 40px} .hero-content {gap: 2rem} .hero-image {order: 2;max-width: 250px} .hero-text {order: 1} } @media (max-width: 768px) and (orientation: landscape) {.hero {min-height: 100vh;padding: 60px 0 30px} .hero-content {flex-direction: row;gap: 2rem;align-items: center;text-align: left} .hero-text {flex: 1;text-align: left} .hero-image {flex: 0 0 180px;order: 2} .hero-buttons {justify-content: flex-start} }  @media (max-width: 768px) {* {-webkit-tap-highlight-color: transparent} .btn, .nav-link, .lang-dropdown-btn {min-height: 44px;min-width: 44px;touch-action: manipulation}  html {scroll-behavior: smooth;-webkit-overflow-scrolling: touch}  input, textarea, select {font-size: 16px}  .service-card, .contact-card, .faq-item {touch-action: manipulation} }  @keyframes fadeInUp {from {opacity: 0;transform: translateY(30px)} to {opacity: 1;transform: translateY(0)} } .service-card, .contact-item, .qualification {animation: fadeInUp 0.6s ease-out}  ::-webkit-scrollbar {width: 8px} ::-webkit-scrollbar-track {background: #f1f1f1} ::-webkit-scrollbar-thumb {background: #2d5a27;border-radius: 4px} ::-webkit-scrollbar-thumb:hover {background: #1a3d1a}