:root {
/* Color Palette */
--primary-green: #337A59;
--primary-green-alt: #009C5B;
--light-green: #7BB38D;
--pale-green: #BADABE;
--lime-green: #BDD78B;
--accent-yellow: #E9CD1A;
--secondary-dark-green: #22B244;
--secondary-red: #B32D2A;

/* Neutral Colors */
--white: #FFFFFF;
--light: #F5F9F7;
--dark: #1A2C24;
--gray: #5D7267;
--light-gray: #DDE5E1;

/* Typography */
--font-heading: 'Hiruko Pro', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--font-body: 'Lato', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
--font-emphasis: 'Lato Black', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

/* Additional Theme Variables */
--hero-gradient-start: rgba(10, 94, 52, 0.85);
--hero-gradient-end: #30b950;
--hero-text: var(--white);
--hero-subtext: var(--accent-yellow);
--card-1-border: var(--primary-green);
--card-2-border: var(--secondary-red);
--card-3-border: var(--accent-yellow);
--icon-1-color: var(--primary-green);
--icon-2-color: var(--secondary-red);
--icon-3-color: var(--accent-yellow);
--step-1-bg: var(--primary-green);
--step-2-bg: var(--secondary-red);
--step-3-bg: var(--accent-yellow);
--step-number-color: var(--white);
--faq-border: var(--accent-yellow);
--faq-question-bg: var(--secondary-dark-green);
--faq-question-text: var(--white);
--form-border: var(--light-green);
--form-focus-border: var(--primary-green);
--form-focus-shadow: rgba(51, 122, 89, 0.2);
--modal-border: var(--primary-green);
--footer-heading: var(--lime-green);
--footer-heading-border: var(--accent-yellow);
--footer-link: var(--pale-green);
--footer-link-hover: var(--accent-yellow);
--nav-link: var(--accent-yellow);
--nav-link-hover: var(--primary-green-alt);
--btn-outline-border: var(--secondary-dark-green);
--btn-outline-text: var(--primary-green);
--btn-outline-hover-bg: var(--secondary-red);
--btn-outline-hover-border: var(--secondary-red);
--btn-outline-hover-text: var(--white);
--btn-primary-bg: var(--secondary-red);
--btn-primary-border: var(--secondary-red);
--btn-primary-text: var(--white);
--btn-primary-hover-bg: var(--secondary-dark-green);
--btn-primary-hover-border: var(--secondary-dark-green);
--btn-primary-hover-text: var(--white);
--btn-accent-bg: var(--accent-yellow);
--btn-accent-border: var(--accent-yellow);
--btn-accent-text: var(--dark);
--btn-accent-hover-bg: #d4b716;
--btn-accent-hover-border: #d4b716;
--link-color: var(--primary-green);
--link-hover-color: var(--secondary-dark-green);
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: var(--font-body);
}

body {
background-color: var(--light);
color: var(--dark);
line-height: 1.6;
overflow-x: hidden;
transition: background-color 0.3s ease, color 0.3s ease;
}

/* Typography Styles */
h1, h2, h3, h4, h5, h6, .logo {
font-family: var(--font-heading);
color: var(--secondary-dark-green);
}

.emphasis {
font-family: var(--font-emphasis);
}

/* OTP specific styles */
.otp-timer {
font-size: 0.8rem;
color: var(--secondary-red);
margin-top: 5px;
}

.resend-otp {
font-size: 0.8rem;
color: var(--primary-green-alt);
cursor: pointer;
display: none;
}

.resend-otp:hover {
text-decoration: underline;
color: var(--secondary-dark-green);
}

.navbar {
background-color: var(--white);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}

.navbar-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 5%;
max-width: 1400px;
margin: 0 auto;
}

.logo img {
height: 50px;
margin-right: 10px;
}

.nav-links {
display: flex;
align-items: center;
}

.nav-links a {
margin-left: 25px;
text-decoration: none;
color: var(--nav-link);
font-weight: 500;
transition: color 0.3s;
}

.nav-links a:hover {
color: var(--nav-link-hover);
}

.btn {
padding: 10px 20px;
border-radius: 5px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
text-decoration: none;
display: inline-block;
font-family: var(--font-body);
}

.btn-outline {
border: 2px solid var(--btn-outline-border);
color: var(--btn-outline-text);
background: transparent;
}

.btn-outline:hover {
background-color: var(--btn-outline-hover-bg);
border: 2px solid var(--btn-outline-hover-border);
color: var(--btn-outline-hover-text);
}

.btn-primary {
background-color: var(--btn-primary-bg);
color: var(--btn-primary-text);
border: 2px solid var(--btn-primary-border);
}

.btn-primary:hover {
background-color: var(--btn-primary-hover-bg);
border: 2px solid var(--btn-primary-hover-border);
color: var(--btn-primary-hover-text);
}

.btn-accent {
background-color: var(--btn-accent-bg);
color: var(--btn-accent-text);
border: 2px solid var(--btn-accent-border);
}

.btn-accent:hover {
background-color: var(--btn-accent-hover-bg);
border-color: var(--btn-accent-hover-border);
}

.mobile-menu-btn {
display: none;
background: none;
border: none;
font-size: 1.5rem;
color: var(--dark);
cursor: pointer;
}

/* Hero Section */
.hero {
background: linear-gradient(135deg, var(--hero-gradient-start), var(--hero-gradient-end)), url('https://images.unsplash.com/photo-1579684385127-1ef15d508118?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') no-repeat center center/cover;
height: 100vh;
display: flex;
align-items: center;
color: var(--hero-text);
text-align: center;
padding: 0 5%;
margin-top: 70px;
}

.hero-content {
max-width: 800px;
margin: 0 auto;
}

.hero h1 {
font-size: 3rem;
margin-bottom: 20px;
line-height: 1.2;
color: var(--hero-text);
font-family: var(--font-heading);
}

.hero p {
font-size: 1.2rem;
margin-bottom: 30px;
opacity: 0.9;
color: var(--hero-subtext);
font-weight: 500;
}

/* Features Section */
.features {
padding: 80px 5%;
background-color: var(--white);
}

.section-title {
text-align: center;
margin-bottom: 50px;
}

.section-title h2 {
font-size: 2.2rem;
color: var(--secondary-dark-green);
margin-bottom: 15px;
font-family: var(--font-heading);
}

.section-title p {
color: var(--dark);
max-width: 700px;
margin: 0 auto;
}

.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}

.feature-card {
background-color: var(--light);
border-radius: 10px;
padding: 30px;
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
}

.card-1 {
border-top: 4px solid var(--card-1-border);
}

.card-2 {
border-top: 4px solid var(--card-2-border);
}

.card-3 {
border-top: 4px solid var(--card-3-border);
}

.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.feature-icon {
font-size: 3rem;
margin-bottom: 20px;
}

.icon-1 {
color: var(--icon-1-color);
}

.icon-2 {
color: var(--icon-2-color);
}

.icon-3 {
color: var(--icon-3-color);
}

.feature-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
color: var(--secondary-dark-green);
font-family: var(--font-heading);
}

/* How It Works */
.how-it-works {
padding: 80px 5%;
background-color: var(--pale-green);
}

.steps {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 30px;
max-width: 1000px;
margin: 0 auto;
}

.step {
flex: 1;
min-width: 250px;
text-align: center;
position: relative;
}

.step-1 {
background-color: var(--step-1-bg);
}

.step-2 {
background-color: var(--step-2-bg);
}

.step-3 {
background-color: var(--step-3-bg);
}

.step-number {
width: 50px;
height: 50px;
color: var(--step-number-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: bold;
margin: 0 auto 20px;
font-family: var(--font-heading);
}

.step h3 {
margin-bottom: 15px;
color: var(--secondary-dark-green);
font-family: var(--font-heading);
}

/* About Us Section */
.about {
padding: 80px 5%;
background-color: var(--white);
}

.about-content {
display: flex;
align-items: center;
gap: 50px;
max-width: 1200px;
margin: 0 auto;
}

.about-text {
flex: 1;
}

.about-image {
flex: 1;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border: 5px solid var(--light-green);
}

.about-image img {
width: 100%;
height: auto;
display: block;
}

/* FAQ Section */
.faq {
padding: 80px 5%;
background-color: var(--light);
}

.faq-container {
max-width: 800px;
margin: 0 auto;
}

.faq-item {
margin-bottom: 15px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
background-color: var(--white);
border-left: 4px solid var(--faq-border);
}

.faq-question {
padding: 20px;
background-color: var(--faq-question-bg);
color: var(--faq-question-text);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.3s;
font-family: var(--font-heading);
}

.faq-question:hover {
background-color: var(--accent-yellow);
}

.faq-question i {
transition: transform 0.3s;
}

.faq-item.active .faq-question i {
transform: rotate(180deg);
}

.faq-answer {
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, padding 0.3s ease;
}

.faq-item.active .faq-answer {
padding: 20px;
max-height: 500px;
}

/* Contact Section */
.contact {
padding: 80px 5%;
background-color: var(--pale-green);
}

.contact-container {
display: flex;
gap: 50px;
max-width: 1200px;
margin: 0 auto;
}

.contact-info {
flex: 1;
}

.contact-info h3 {
margin-bottom: 20px;
color: var(--secondary-red);
font-family: var(--font-heading);
}

.contact-info p {
margin-bottom: 30px;
}

.contact-details {
margin-bottom: 30px;
}

.contact-detail {
display: flex;
align-items: center;
margin-bottom: 15px;
}

.contact-detail i {
width: 40px;
height: 40px;
background-color: var(--accent-yellow);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 15px;
}

.contact-social {
display: flex;
gap: 15px;
}

.contact-social a {
width: 40px;
height: 40px;
background-color: var(--accent-yellow);
color: var(--white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s;
}

a {
text-decoration: none;
color: var(--link-color);
}

a:hover {
color: var(--link-hover-color);
}

.contact-social a:hover {
background-color: var(--secondary-dark-green);
}

.contact-form {
flex: 1;
background-color: var(--white);
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
border: 1px solid var(--form-border);
}

.form-group {
margin-bottom: 20px;
}

.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(--dark);
}

.form-control {
width: 100%;
padding: 12px 15px;
border: 1px solid var(--light-gray);
border-radius: 5px;
font-size: 1rem;
transition: border-color 0.3s;
background-color: var(--light);
color: var(--dark);
}

.form-control:focus {
border-color: var(--form-focus-border);
outline: none;
box-shadow: 0 0 0 2px var(--form-focus-shadow);
}

textarea.form-control {
min-height: 150px;
resize: vertical;
}

/* Authentication Modals */
.auth-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 2000;
justify-content: center;
align-items: center;
overflow-y: auto;
padding: 20px;

}

.auth-modal.active {
display: flex;
}

.auth-content {
background-color: var(--white);
border-radius: 10px;
width: 90%;
max-width: 800px;
padding: 30px;
overflow-y: auto;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
position: relative;
animation: modalFadeIn 0.3s;
display: flex;
flex-direction: column;
max-height: 90vh;
margin: auto;
border: 2px solid var(--modal-border);
}

@keyframes modalFadeIn {
from {
    opacity: 0;
    transform: translateY(-20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

.close-modal {
position: absolute;
top: 30px;
right: 15px;
font-size: 1.8rem;
cursor: pointer;
color: var(--dark);
transition: color 0.3s;
z-index: 10000;
background: none;
border: none;
padding: 5px;
}

.close-modal:hover {
color: var(--secondary-red);
}

.auth-tabs {
display: flex;
margin-bottom: 25px;
border-bottom: 1px solid var(--light-gray);
}

.auth-tab {
padding: 10px 20px;
cursor: pointer;
font-weight: 600;
color: var(--dark);
opacity: 0.7;
transition: all 0.3s;
font-family: var(--font-body);
}

.auth-tab.active {
opacity: 1;
color: var(--primary-green);
border-bottom: 2px solid var(--primary-green);
}

.auth-form {
display: none;
}

.auth-form.active {
display: block;
}

.form-row {
display: flex;
gap: 20px;
margin-bottom: 20px;
}

.form-row .form-group {
flex: 1;
margin-bottom: 0;
}

.btn-modal {
display: block;
width: 100%;
padding: 12px;
font-size: 1rem;
font-weight: 600;
background-color: var(--primary-green);
color: var(--white);
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

.btn-modal:hover {
background-color: var(--accent-yellow);
border-color: var(--accent-yellow);
}

.text-center {
text-align: center;
}

.mt-3 {
margin-top: 15px;
}

.forgot-password {
display: block;
text-align: right;
margin-top: 5px;
color: var(--primary-green);
font-size: 0.9rem;
cursor: pointer;
text-decoration: none;
}

.forgot-password:hover {
text-decoration: underline;
color: var(--secondary-dark-green);
}

.switch-auth {
color: var(--primary-green);
cursor: pointer;
font-weight: 600;
}

.switch-auth:hover {
text-decoration: underline;
color: var(--secondary-dark-green);
}

/* Footer */
.footer {
background-color: var(--dark);
color: var(--white);
padding: 50px 5% 20px;
}

.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto 40px;
}

.footer-column h3 {
font-size: 1.3rem;
margin-bottom: 20px;
position: relative;
padding-bottom: 10px;
font-family: var(--font-heading);
color: var(--footer-heading);
}

.footer-column h3::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 50px;
height: 2px;
background-color: var(--footer-heading-border);
}

.footer-column ul {
list-style: none;
}

.footer-column ul li {
margin-bottom: 10px;
}

.footer-column ul li a {
color: var(--footer-link);
text-decoration: none;
transition: color 0.3s;
}

.footer-column ul li a:hover {
color: var(--footer-link-hover);
}

.social-links {
display: flex;
gap: 15px;
margin-top: 15px;
}

.social-links a {
color: var(--white);
font-size: 1.2rem;
transition: color 0.3s;
}

.social-links a:hover {
color: var(--accent-yellow);
}

.footer-bottom {
text-align: center;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.9rem;
opacity: 0.8;
color: var(--white);
}

/* Responsive Styles */
@media (max-width: 992px) {
.nav-links {
    display: none;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    background-color: var(--white);
    flex-direction: column;
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.nav-links.active {
    display: flex;
}

.nav-links a {
    margin: 10px 0;
}

.mobile-menu-btn {
    display: block;
}

.hero h1 {
    font-size: 2.5rem;
}

.hero p {
    font-size: 1.1rem;
}

.about-content {
    flex-direction: column;
}

.contact-container {
    flex-direction: column;
}

.auth-content {
    width: 95%;
    padding: 20px;
}

.form-row {
    flex-direction: column;
    gap: 0;
}
}

@media (max-width: 768px) {
.navbar-container {
    padding: 15px 20px;
}

.hero {
    margin-top: 60px;
}

.hero h1 {
    font-size: 2rem;
}

.hero-buttons {
    flex-direction: column;
    gap: 10px;
}

.btn {
    width: 100%;
}

.section-title h2 {
    font-size: 1.8rem;
}

.auth-content {
    padding: 15px;
}

.auth-content {
    max-height: 80vh;
    width: 90%;
}
}

@media (max-width: 576px) {
.hero {
    height: auto;
    padding: 100px 20px;
}

.auth-content {
    margin: 0 10px;
}

.feature-card {
    padding: 20px;
}

.faq-question {
    padding: 15px;
}

.navbar-container {
    max-width: 1200px;
}
}

/* Theme Switcher Styles */
.theme-switcher {
position: fixed;
top: 90px;
right: 20px;
z-index: 9999;
}

.theme-toggle-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: var(--primary-green);
color: var(--white);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
z-index: 10000;
}

.theme-toggle-btn:hover {
transform: scale(1.1);
background-color: var(--primary-green-alt);
}

.theme-options {
position: absolute;
top: 60px;
right: 0;
background-color: var(--white);
border-radius: 8px;
padding: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
display: none;
flex-direction: column;
gap: 12px;
width: 140px;
z-index: 9999;
border: 1px solid var(--light-gray);
}

.theme-options.active {
display: flex;
animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}

.theme-option {
display: flex;
align-items: center;
gap: 12px;
padding: 8px;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
}

.theme-option:hover {
background-color: var(--light);
transform: translateX(-5px);
}

.theme-preview {
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid var(--light-gray);
flex-shrink: 0;
}

.default-theme {
background: linear-gradient(135deg, #337A59 50%, #009C5B 50%);
}

.dark-theme {
background: linear-gradient(135deg, #1A2C24 50%, #2D4A3E 50%);
}

.skyblue-theme {
background: linear-gradient(135deg, #3498DB 50%, #5DADE2 50%);
}

.purple-theme {
background: linear-gradient(135deg, #8E44AD 50%, #BB8FCE 50%);
}

.coral-theme {
background: linear-gradient(135deg, #E74C3C 50%, #F1948A 50%);
}

/* ==================== THEME DEFINITIONS ==================== */

/* DEFAULT THEME (Your existing colors) */
[data-theme="default"] {
--primary-green: #337A59;
--primary-green-alt: #009C5B;
--light-green: #7BB38D;
--pale-green: #BADABE;
--lime-green: #BDD78B;
--accent-yellow: #E9CD1A;
--secondary-dark-green: #22B244;
--secondary-red: #B32D2A;
--white: #FFFFFF;
--light: #F5F9F7;
--dark: #1A2C24;
--gray: #5D7267;
--light-gray: #DDE5E1;

/* Theme-specific variables */
--hero-gradient-start: rgba(10, 94, 52, 0.85);
--hero-gradient-end: #30b950;
--hero-text: var(--white);
--hero-subtext: var(--accent-yellow);
--card-1-border: var(--primary-green);
--card-2-border: var(--secondary-red);
--card-3-border: var(--accent-yellow);
--icon-1-color: var(--primary-green);
--icon-2-color: var(--secondary-red);
--icon-3-color: var(--accent-yellow);
--step-1-bg: var(--primary-green);
--step-2-bg: var(--secondary-red);
--step-3-bg: var(--accent-yellow);
--step-number-color: var(--white);
--faq-border: var(--accent-yellow);
--faq-question-bg: var(--secondary-dark-green);
--faq-question-text: var(--white);
--form-border: var(--light-green);
--form-focus-border: var(--primary-green);
--form-focus-shadow: rgba(51, 122, 89, 0.2);
--modal-border: var(--primary-green);
--footer-heading: var(--lime-green);
--footer-heading-border: var(--accent-yellow);
--footer-link: var(--pale-green);
--footer-link-hover: var(--accent-yellow);
--nav-link: var(--accent-yellow);
--nav-link-hover: var(--primary-green-alt);
--btn-outline-border: var(--secondary-dark-green);
--btn-outline-text: var(--primary-green);
--btn-outline-hover-bg: var(--secondary-red);
--btn-outline-hover-border: var(--secondary-red);
--btn-outline-hover-text: var(--white);
--btn-primary-bg: var(--secondary-red);
--btn-primary-border: var(--secondary-red);
--btn-primary-text: var(--white);
--btn-primary-hover-bg: var(--secondary-dark-green);
--btn-primary-hover-border: var(--secondary-dark-green);
--btn-primary-hover-text: var(--white);
--btn-accent-bg: var(--accent-yellow);
--btn-accent-border: var(--accent-yellow);
--btn-accent-text: var(--dark);
--btn-accent-hover-bg: #d4b716;
--btn-accent-hover-border: #d4b716;
--link-color: var(--primary-green);
--link-hover-color: var(--secondary-dark-green);
}

/* DARK THEME */
[data-theme="dark"] {
--primary-green: #4CAF80;
--primary-green-alt: #5ED39B;
--light-green: #609D7D;
--pale-green: #3A4D44;
--lime-green: #9FC47D;
--accent-yellow: #F2E055;
--secondary-dark-green: #38D47C;
--secondary-red: #D45A57;
--white: #1A2C24;
--light: #24382F;
--dark: #E6F0EB;
--gray: #9AB0A5;
--light-gray: #2F4239;

/* Theme-specific variables */
--hero-gradient-start: rgba(30, 60, 45, 0.85);
--hero-gradient-end: #2D4A3E;
--hero-text: var(--dark);
--hero-subtext: var(--accent-yellow);
--card-1-border: var(--accent-yellow);
--card-2-border: var(--accent-yellow);
--card-3-border: var(--accent-yellow);
--icon-1-color: var(--accent-yellow);
--icon-2-color: var(--accent-yellow);
--icon-3-color: var(--accent-yellow);
--step-1-bg: var(--primary-green);
--step-2-bg: var(--secondary-red);
--step-3-bg: var(--accent-yellow);
--step-number-color: var(--white);
--faq-border: var(--accent-yellow);
--faq-question-bg: var(--primary-green);
--faq-question-text: var(--dark);
--form-border: var(--light-green);
--form-focus-border: var(--primary-green);
--form-focus-shadow: rgba(76, 175, 128, 0.2);
--modal-border: var(--primary-green);
--footer-heading: var(--lime-green);
--footer-heading-border: var(--accent-yellow);
--footer-link: var(--gray);
--footer-link-hover: var(--accent-yellow);
--nav-link: var(--accent-yellow);
--nav-link-hover: var(--primary-green-alt);
--btn-outline-border: var(--primary-green);
--btn-outline-text: var(--primary-green);
--btn-outline-hover-bg: var(--primary-green);
--btn-outline-hover-border: var(--primary-green);
--btn-outline-hover-text: var(--white);
--btn-primary-bg: var(--primary-green);
--btn-primary-border: var(--primary-green);
--btn-primary-text: var(--white);
--btn-primary-hover-bg: var(--primary-green-alt);
--btn-primary-hover-border: var(--primary-green-alt);
--btn-primary-hover-text: var(--white);
--btn-accent-bg: var(--accent-yellow);
--btn-accent-border: var(--accent-yellow);
--btn-accent-text: var(--dark);
--btn-accent-hover-bg: #d4b716;
--btn-accent-hover-border: #d4b716;
--link-color: var(--primary-green);
--link-hover-color: var(--primary-green-alt);
}

/* SKY BLUE THEME */
[data-theme="skyblue"] {
--primary-green: #3498DB;
--primary-green-alt: #5DADE2;
--light-green: #85C1E9;
--pale-green: #D6EAF8;
--lime-green: #AED6F1;
--accent-yellow: #F1C40F;
--secondary-dark-green: #2E86C1;
--secondary-red: #E74C3C;
--white: #FFFFFF;
--light: #EBF5FB;
--dark: #2C3E50;
--gray: #7F8C8D;
--light-gray: #D6DBDF;

/* Theme-specific variables */
--hero-gradient-start: rgba(41, 128, 185, 0.85);
--hero-gradient-end: #3498DB;
--hero-text: var(--white);
--hero-subtext: var(--accent-yellow);
--card-1-border: var(--primary-green);
--card-2-border: var(--secondary-red);
--card-3-border: var(--accent-yellow);
--icon-1-color: var(--primary-green);
--icon-2-color: var(--secondary-red);
--icon-3-color: var(--accent-yellow);
--step-1-bg: var(--primary-green);
--step-2-bg: var(--secondary-red);
--step-3-bg: var(--accent-yellow);
--step-number-color: var(--white);
--faq-border: var(--accent-yellow);
--faq-question-bg: var(--secondary-dark-green);
--faq-question-text: var(--white);
--form-border: var(--light-green);
--form-focus-border: var(--primary-green);
--form-focus-shadow: rgba(52, 152, 219, 0.2);
--modal-border: var(--primary-green);
--footer-heading: var(--lime-green);
--footer-heading-border: var(--accent-yellow);
--footer-link: var(--pale-green);
--footer-link-hover: var(--accent-yellow);
--nav-link: var(--accent-yellow);
--nav-link-hover: var(--primary-green-alt);
--btn-outline-border: var(--primary-green);
--btn-outline-text: var(--primary-green);
--btn-outline-hover-bg: var(--primary-green);
--btn-outline-hover-border: var(--primary-green);
--btn-outline-hover-text: var(--white);
--btn-primary-bg: var(--primary-green);
--btn-primary-border: var(--primary-green);
--btn-primary-text: var(--white);
--btn-primary-hover-bg: var(--primary-green-alt);
--btn-primary-hover-border: var(--primary-green-alt);
--btn-primary-hover-text: var(--white);
--btn-accent-bg: var(--accent-yellow);
--btn-accent-border: var(--accent-yellow);
--btn-accent-text: var(--dark);
--btn-accent-hover-bg: #d4b716;
--btn-accent-hover-border: #d4b716;
--link-color: var(--primary-green);
--link-hover-color: var(--primary-green-alt);
}

/* PURPLE THEME */
[data-theme="purple"] {
--primary-green: #8E44AD;
--primary-green-alt: #9B59B6;
--light-green: #BB8FCE;
--pale-green: #E8DAEF;
--lime-green: #D7BDE2;
--accent-yellow: #F7DC6F;
--secondary-dark-green: #7D3C98;
--secondary-red: #C0392B;
--white: #FFFFFF;
--light: #F4ECF7;
--dark: #4A235A;
--gray: #7D3C98;
--light-gray: #D2B4DE;

/* Theme-specific variables */
--hero-gradient-start: rgba(104, 52, 135, 0.85);
--hero-gradient-end: #8E44AD;
--hero-text: var(--white);
--hero-subtext: var(--accent-yellow);
--card-1-border: var(--primary-green);
--card-2-border: var(--secondary-red);
--card-3-border: var(--accent-yellow);
--icon-1-color: var(--primary-green);
--icon-2-color: var(--secondary-red);
--icon-3-color: var(--accent-yellow);
--step-1-bg: var(--primary-green);
--step-2-bg: var(--secondary-red);
--step-3-bg: var(--accent-yellow);
--step-number-color: var(--white);
--faq-border: var(--accent-yellow);
--faq-question-bg: var(--secondary-dark-green);
--faq-question-text: var(--white);
--form-border: var(--light-green);
--form-focus-border: var(--primary-green);
--form-focus-shadow: rgba(142, 68, 173, 0.2);
--modal-border: var(--primary-green);
--footer-heading: var(--lime-green);
--footer-heading-border: var(--accent-yellow);
--footer-link: var(--pale-green);
--footer-link-hover: var(--accent-yellow);
--nav-link: var(--accent-yellow);
--nav-link-hover: var(--primary-green-alt);
--btn-outline-border: var(--primary-green);
--btn-outline-text: var(--primary-green);
--btn-outline-hover-bg: var(--primary-green);
--btn-outline-hover-border: var(--primary-green);
--btn-outline-hover-text: var(--white);
--btn-primary-bg: var(--primary-green);
--btn-primary-border: var(--primary-green);
--btn-primary-text: var(--white);
--btn-primary-hover-bg: var(--primary-green-alt);
--btn-primary-hover-border: var(--primary-green-alt);
--btn-primary-hover-text: var(--white);
--btn-accent-bg: var(--accent-yellow);
--btn-accent-border: var(--accent-yellow);
--btn-accent-text: var(--dark);
--btn-accent-hover-bg: #d4b716;
--btn-accent-hover-border: #d4b716;
--link-color: var(--primary-green);
--link-hover-color: var(--primary-green-alt);
}

/* CORAL THEME */
[data-theme="coral"] {
--primary-green: #E74C3C;
--primary-green-alt: #EC7063;
--light-green: #F1948A;
--pale-green: #FADBD8;
--lime-green: #F5B7B1;
--accent-yellow: #F39C12;
--secondary-dark-green: #CB4335;
--secondary-red: #922B21;
--white: #FFFFFF;
--light: #FBEEE6;
--dark: #78281F;
--gray: #922B21;
--light-gray: #EDBB99;

/* Theme-specific variables */
--hero-gradient-start: rgba(190, 60, 45, 0.85);
--hero-gradient-end: #E74C3C;
--hero-text: var(--white);
--hero-subtext: var(--accent-yellow);
--card-1-border: var(--primary-green);
--card-2-border: var(--secondary-red);
--card-3-border: var(--accent-yellow);
--icon-1-color: var(--primary-green);
--icon-2-color: var(--secondary-red);
--icon-3-color: var(--accent-yellow);
--step-1-bg: var(--primary-green);
--step-2-bg: var(--secondary-red);
--step-3-bg: var(--accent-yellow);
--step-number-color: var(--white);
--faq-border: var(--accent-yellow);
--faq-question-bg: var(--secondary-dark-green);
--faq-question-text: var(--white);
--form-border: var(--light-green);
--form-focus-border: var(--primary-green);
--form-focus-shadow: rgba(231, 76, 60, 0.2);
--modal-border: var(--primary-green);
--footer-heading: var(--lime-green);
--footer-heading-border: var(--accent-yellow);
--footer-link: var(--pale-green);
--footer-link-hover: var(--accent-yellow);
--nav-link: var(--accent-yellow);
--nav-link-hover: var(--primary-green-alt);
--btn-outline-border: var(--primary-green);
--btn-outline-text: var(--primary-green);
--btn-outline-hover-bg: var(--primary-green);
--btn-outline-hover-border: var(--primary-green);
--btn-outline-hover-text: var(--white);
--btn-primary-bg: var(--primary-green);
--btn-primary-border: var(--primary-green);
--btn-primary-text: var(--white);
--btn-primary-hover-bg: var(--primary-green-alt);
--btn-primary-hover-border: var(--primary-green-alt);
--btn-primary-hover-text: var(--white);
--btn-accent-bg: var(--accent-yellow);
--btn-accent-border: var(--accent-yellow);
--btn-accent-text: var(--dark);
--btn-accent-hover-bg: #d4b716;
--btn-accent-hover-border: #d4b716;
--link-color: var(--primary-green);
--link-hover-color: var(--primary-green-alt);
}

/* WhatsApp Floating Button */
.whatsapp-float {
position: fixed;
bottom: 25px;
left: 25px;
width: 60px;
height: 60px;
background-color: var(--primary-green);
color: var(--white);
border-radius: 50%;
text-align: center;
font-size: 30px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
z-index: 100;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
animation: pulse 2s infinite;
}

.whatsapp-float:hover {
background-color: var(--secondary-dark-green);
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* Scroll to Top Button */
.scroll-to-top {
position: fixed;
bottom: 25px;
right: 25px;
width: 50px;
height: 50px;
background-color: var(--secondary-red);
color: var(--white);
border: none;
border-radius: 50%;
text-align: center;
font-size: 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
cursor: pointer;
z-index: 100;
display: none;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
}

.scroll-to-top:hover {
background-color: var(--secondary-dark-green);
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.scroll-to-top.visible {
display: flex;
}

/* WhatsApp pulse animation */
@keyframes pulse {
0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
}
70% {
    box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
}
100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
}
}

/* Responsive adjustments */
@media (max-width: 768px) {
.whatsapp-float {
    width: 50px;
    height: 50px;
    font-size: 24px;
    bottom: 20px;
    left: 20px;
}

.scroll-to-top {
    width: 45px;
    height: 45px;
    font-size: 18px;
    bottom: 20px;
    right: 20px;
}
}

@media (max-width: 576px) {
.whatsapp-float {
    width: 45px;
    height: 45px;
    font-size: 22px;
    bottom: 15px;
    left: 15px;
}

.scroll-to-top {
    width: 40px;
    height: 40px;
    font-size: 16px;
    bottom: 15px;
    right: 15px;
}
}