/*------------------------------------*\
    #TABLE OF CONTENTS
\*------------------------------------*/

/*
 * 1. IMPORTS
 * 2. BASE STYLES & GLOBAL RESETS
 * 3. TYPOGRAPHY (Headings & Subtitles)
 * 4. COMPONENTS
 * 4.1. Navbar & Mobile Menu
 * 4.2. Hero Slider (if applicable, not in this snippet)
 * 4.3. Sections (General)
 * 4.4. About Section (if applicable, not in this snippet)
 * 4.5. Services/Pricing Section
 * 4.6. Call to Action Button (General)
 * 4.7. Accepted Payments Section (if applicable, not in this snippet)
 * 4.8. Contact Section (General & Plans)
 * 4.9. Auth Modals (Pop-up)
 * 4.10. Stripe Payment Modal
 * 4.11. FAQ Section
 * 4.12. Floating WhatsApp Button
 * 5. UTILITIES
 * 6. FOOTER
 * 7. MEDIA QUERIES
*/


/*------------------------------------*\
    #1. IMPORTS
\*------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
/* Assuming 'Open Sans' is also intended for some use, if not, remove this import */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');


/*------------------------------------*\
    #2. BASE STYLES & GLOBAL RESETS
\*------------------------------------*/

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    /* Using Roboto for body text for consistency with previous refinements,
       but you had Open Sans in the new snippet. Choose one and stick to it. */
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fcfcfc; /* A very light off-white background */
    margin: 0;
    padding-top: 70px; /* Adjust based on navbar height */
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}


/*------------------------------------*\
    #3. TYPOGRAPHY (Headings & Subtitles)
\*------------------------------------*/

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Poppins', sans-serif;
    color: #28767d;
    font-weight: 700; /* Ensure headings are bold */
}

h2 {
    font-size: 3.5rem; /* Slightly larger heading */
    text-align: center;
    margin-bottom: 1.5rem;
    text-shadow: 0 1px 3px rgba(30, 64, 175, 0.5);
}

.subtitle {
    text-align: center;
    font-size: 1.3rem; /* Slightly larger subtitle */
    line-height: 1.5;
    color: #555;
    margin-bottom: 4rem; /* Increased bottom margin */
}


/*------------------------------------*\
    #4. COMPONENTS
\*------------------------------------*/

/* --- 4.1. Navbar & Mobile Menu --- */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    height: 70px; /* Consistent height */
    display: flex;
    align-items: center;
    padding: 0 40px;
    background: linear-gradient(90deg, #176693, #2f6d91, #198754); /* Kept your existing gradient */
    color: white;
    font-size: 1rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    z-index: 10000;
    justify-content: space-between; /* Ensures logo and menu toggle are spaced */
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.4rem;
    font-weight: 700;
    user-select: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
    color: white; /* Ensure logo text is white */
}

.logo-container:hover,
.logo-container:focus {
    opacity: 0.85;
}

.logo-container img {
    height: 50px;
    width: auto;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Desktop Navigation Links */
.nav-links {
    display: flex; /* Always visible on desktop */
    align-items: center;
    margin-left: auto; /* Pushes links to the right */
    gap: 32px; /* Spacing between links */
}

.nav-link {
    position: relative;
    padding: 22px 0; /* Vertically center with navbar height */
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: color 0.3s ease;
}

.nav-link::after {
    content: "";
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 0;
    height: 2.5px;
    background-color: #a5d6a7; /* Highlight color */
    border-radius: 1px;
    transition: width 0.3s ease;
}

.nav-link:hover,
.nav-link:focus {
    color: #a5d6a4; /* Hover color */
    outline: none;
}

.nav-link:hover::after,
.nav-link:focus::after {
    width: 100%;
}

/* Hamburger Menu Toggle (Desktop: hidden, Mobile: visible) */
.menu-toggle {
    display: none; /* Hidden by default on desktop */
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: white; /* Changed to white for consistency with navbar text */
    margin-left: auto; /* Pushes to the right on mobile */
    margin-right: 0; /* Remove extra right margin */
    transition: transform 0.3s ease;
}

.menu-toggle:hover,
.menu-toggle:focus {
    transform: scale(1.1);
    color: #a5d6a7;
    outline: none;
}

/* Mobile Menu Overlay */
.nav-menu-mobile {
    display: flex; /* Keep flex for column direction */
    flex-direction: column;
    position: fixed; /* Use fixed for full viewport coverage */
    top: 70px; /* Adjust based on navbar height */
    left: 0;
    width: 100%;
    height: calc(100% - 70px); /* Fill remaining height */
    background-color: rgba(0, 0, 0, 0.9); /* Dark overlay */
    padding: 1rem 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 9999; /* High z-index to overlay content */
    opacity: 0;
    transform: translateX(100%); /* Start off-screen */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    visibility: hidden;
    overflow-y: auto; /* Enable scrolling for long menus */
}

.nav-menu-mobile.active {
    opacity: 1;
    transform: translateX(0); /* Slide into view */
    visibility: visible;
}

.nav-menu-mobile .nav-link {
    color: white;
    padding: 0.8rem 1.5rem;
    text-align: left; /* Align text left in mobile menu */
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.2s ease;
}

.nav-menu-mobile .nav-link:last-child {
    border-bottom: none;
}

.nav-menu-mobile .nav-link:hover,
.nav-menu-mobile .nav-link:focus {
    background-color: rgba(255, 255, 255, 0.1);
    outline: none;
}

/* Navbar: Language Dropdown (Desktop version) */
.language-dropdown {
    position: relative;
    display: inline-block;
    margin-left: 20px;
}

.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background: linear-gradient(90deg, #176693, #2f6d91);
    color: white;
    font-size: 0.95rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.dropdown-toggle:hover,
.dropdown-toggle:focus {
    background: linear-gradient(90deg, #176693, #198754);
    border-color: rgba(255, 255, 255, 0.6);
    outline: none;
}

.dropdown-toggle img {
    height: 20px;
    width: auto;
    border-radius: 2px;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 5px); /* Position below the toggle button */
    right: 0; /* Align to the right of the button */
    min-width: 160px;
    background: #176693;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    overflow: hidden;
    z-index: 1;
}

.dropdown-content.show {
    display: block;
}

.dropdown-content a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: white;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dropdown-content a:hover,
.dropdown-content a:focus {
    background-color: #198754;
    color: #a5d6a4;
    outline: none;
}

.dropdown-content a img {
    height: 25px;
    width: auto;
    border-radius: 2px;
}

/* --- 4.3. Sections (General) --- */
section {
    padding: 70px 20px; /* Increased top padding for more space */
    max-width: 1200px;
    margin: 0 auto;
}

/* --- 4.5. Services/Pricing Section --- */
.pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem; /* Increased gap */
    padding: 30px;
}

.pricing-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); /* Slightly increased shadow */
    padding: 3rem 2rem; /* Further increased padding */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid #e0e0e0; /* Subtle border */
    display: flex;
    flex-direction: column; /* Stack content vertically */
    align-items: center; /* Center content horizontally */
}

.pricing-card:hover {
    transform: translateY(-10px); /* More pronounced hover */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18); /* Increased hover shadow */
}

.pricing-card.popular {
    border-color: #fa3d02;
    box-shadow: 0 8px 35px rgba(250, 61, 2, 0.25); /* More noticeable popular shadow */
}

.pricing-card.popular::before {
    content: 'Popular';
    position: absolute;
    top: 10px;
    right: -40px; /* Adjust for better positioning */
    background-color: #fa3d02;
    color: white;
    padding: 8px 40px; /* Increased padding for better badge */
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    transform: rotate(45deg);
    transform-origin: 0% 100%;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); /* Add shadow to badge */
}

.pricing-card h3 {
    font-size: 2.5rem; /* Slightly larger title */
    color: #28767d;
    margin-bottom: 1.2rem;
}

/* Price Styling */
.pricing-card .price {
    font-size: 2.8rem;
    font-weight: 700;
    color: #fa3d02;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column; /* Stack price and fee */
    align-items: center;
    justify-content: center;
    gap: 0;
}

.pricing-card .price .original-price {
    text-decoration: line-through;
    color: #999;
    font-size: 1.5rem;
    font-weight: 400;
    display: block;
    margin-bottom: 5px;
}

.pricing-card .price>span:first-of-type {
    font-size: 2.8rem;
    color: #fa3d02;
    font-weight: 700;
    margin-bottom: 0;
}

.pricing-card .price span:last-of-type { /* Targeted the /month span more specifically */
    font-size: 1.2rem;
    font-weight: 400;
    color: #555;
    display: inline-block;
}

.pricing-card .price .design-fee {
    font-size: 1.5rem;
    color: #888;
    font-weight: 600;
    margin-top: 10px;
}

/* Discount Badge Styling */
.discount-badge {
    background-color: #fa3d02;
    color: white;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 0.95rem;
    font-weight: 700;
    margin-top: -10px;
    margin-bottom: 20px;
    display: inline-block;
    position: relative;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    white-space: nowrap;
}

.pricing-card p.description {
    font-size: 1.15rem;
    color: #666;
    margin-bottom: 2.5rem;
    min-height: 60px; /* Adjust as needed */
}

.pricing-card ul {
    list-style: none;
    padding: 0;
    margin-bottom: 2.5rem;
    text-align: left;
    border-top: 1px solid #f0f0f0; /* Added separator */
    padding-top: 1.5rem;
}

.pricing-card ul li {
    margin-bottom: 1rem;
    color: #444;
    font-size: 1.05rem;
    display: flex;
    align-items: center;
}

.pricing-card ul li i {
    color: #28767d;
    margin-right: 12px;
    font-size: 1.2rem;
}

/* Infographics within Pricing Cards */
.pricing-card .infographic-container {
    max-width: 100%; /* Take full width of the card */
    margin-bottom: 1.5rem; /* Space between image and description */
}

.pricing-card .infographic-container img {
    max-width: 100%; /* Ensure image fits within the card */
    height: auto;
    border-radius: 8px; /* Slightly less rounded corners */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pricing-card .infographic-container img:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.15);
}

/* Hide the separate infographic section (as images are now inside cards) */
.infographic-section {
    display: none;
}


/* --- 4.6. Call to Action Button (General) --- */
.btn-select-plan,
.btn-contact { /* Combined general button styles */
    display: inline-block;
    background-color: #28767d;
    color: white;
    padding: 16px 35px; /* Slightly larger button */
    border-radius: 10px; /* More rounded */
    text-decoration: none;
    font-weight: 600;
    font-size: 1.15rem;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); /* Add button shadow */
    outline: none; /* Remove default focus outline */
}

.btn-select-plan:hover,
.btn-contact:hover {
    background-color: #1a5e63;
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); /* Increased hover button shadow */
}

.btn-select-plan:focus,
.btn-contact:focus {
    box-shadow: 0 0 0 4px rgba(40, 118, 125, 0.4); /* Focus outline */
}


/* --- 4.8. Contact Section (General & Plans Specific) --- */
.contact-section-plans {
    margin-top: 7rem; /* Increased top margin */
    text-align: center;
    padding: 50px; /* Increased padding */
    background-color: #f8f8f8;
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.09); /* Slightly increased shadow */
}

.contact-section-plans h2 {
    margin-bottom: 1.2rem; /* Adjusted margin */
}

.contact-section-plans p {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 2.5rem; /* Adjusted margin */
}

.contact-section-plans .btn-contact {
    background-color: #fa3d02; /* Specific color for this button */
}

.contact-section-plans .btn-contact:hover {
    background-color: #ff5722; /* Specific hover color */
}


/* --- 4.9. Auth Modals (Pop-up) --- */
.auth-modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1001;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.auth-modal-overlay.active {
    display: flex; /* Display flex when active */
    opacity: 1;
    visibility: visible;
}

.auth-modal-content {
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 400px;
    position: relative;
    transform: translateY(20px); /* Initial state for animation */
    transition: transform 0.3s ease;
}

.auth-modal-overlay.active .auth-modal-content {
    transform: translateY(0); /* Animate into view */
}

.auth-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 1.8rem;
    cursor: pointer;
    color: #777;
    transition: color 0.3s ease;
}

.auth-modal-close:hover {
    color: #fa3d02;
}

.auth-modal-content h3 {
    text-align: center;
    margin-bottom: 25px;
    color: #28767d;
    font-size: 2rem;
}

.auth-modal-content form input {
    width: calc(100% - 20px); /* Account for padding */
    padding: 12px 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.auth-modal-content form input:focus {
    border-color: #28767d;
    outline: none;
    box-shadow: 0 0 0 2px rgba(40, 118, 125, 0.2);
}

.auth-modal-content form button {
    width: 100%;
    padding: 12px;
    background-color: #28767d;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.auth-modal-content form button:hover {
    background-color: #1a5e63;
}

.auth-modal-content form button:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(40, 118, 125, 0.4);
}

.auth-message {
    text-align: center;
    margin-top: 15px;
    font-size: 0.95rem;
    padding: 8px 12px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.auth-message.error {
    background-color: #ffeeee;
    border: 1px solid #ffccdd;
    color: #d32f2f;
}

.auth-message.success {
    background-color: #e8f5e9;
    border: 1px solid #c8e6c9;
    color: #388e3c;
}

.forgot-password-link {
    text-align: center;
    margin-top: 10px;
    font-size: 0.9rem;
}

.forgot-password-link a {
    color: #28767d;
    text-decoration: none;
    transition: color 0.3s ease;
}

.forgot-password-link a:hover {
    color: #fa3d02;
}

.auth-link-hide { /* Managed by JS, ensures consistency */
    display: none;
}


/* --- 4.10. Stripe Payment Modal Styles --- */
.payment-modal-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1002; /* Higher than other modals */
    justify-content: center;
    align-items: center;
    overflow-y: auto; /* Enable scrolling for modal overlay if content is very tall */
    padding: 20px; /* Add some padding for smaller screens */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.payment-modal-overlay.active {
    display: flex; /* Display flex when active */
    opacity: 1;
    visibility: visible;
}

.payment-modal-content {
    background-color: white;
    padding: 25px; /* Slightly reduced padding */
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 450px; /* Reduced max-width for a smaller look */
    position: relative;
    max-height: 90vh; /* Max height to allow scrolling within modal content */
    overflow-y: auto; /* Crucial: Enable scrolling within content if it overflows */
    display: flex;
    flex-direction: column;
    transform: translateY(20px); /* Initial state for animation */
    transition: transform 0.3s ease;
}

.payment-modal-overlay.active .payment-modal-content {
    transform: translateY(0); /* Animate into view */
}

.payment-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 2rem;
    cursor: pointer;
    color: #777;
    transition: color 0.3s ease;
}

.payment-modal-close:hover {
    color: #fa3d02;
}

.payment-modal-content h3 {
    text-align: center;
    margin-bottom: 25px;
    color: #28767d;
    font-size: 2.2rem;
}

.payment-modal-content p {
    text-align: center;
    margin-bottom: 20px;
    color: #555;
    font-size: 1.05rem;
}

/* Styling for generic input fields within the modal */
.payment-modal-content form input[type="text"],
.payment-modal-content form input[type="email"] {
    width: calc(100% - 24px); /* Full width minus padding */
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px; /* Consistent with your branding */
    font-size: 1rem;
    color: #333; /* Darker text color */
    background-color: #fcfcfc; /* Light background */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.payment-modal-content form input[type="text"]:focus,
.payment-modal-content form input[type="email"]:focus {
    border-color: #28767d; /* Your brand color on focus */
    outline: none; /* Remove default outline */
    box-shadow: 0 0 0 2px rgba(40, 118, 125, 0.2); /* Subtle glow */
}

.payment-modal-content form input::placeholder {
    color: #aab7c4; /* Lighter placeholder text */
}

/* Styling for Stripe Elements input fields */
#card-number-element,
#card-cvc-element,
#card-expiry-element {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 12px;
    margin-bottom: 20px;
    background-color: #fcfcfc; /* Ensure the Stripe element itself looks like your inputs */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Add focus style for the card-element container */
#card-number-element.StripeElement--focus,
#card-cvc-element.StripeElement--focus,
#card-expiry-element.StripeElement--focus {
    border-color: #28767d;
    box-shadow: 0 0 0 2px rgba(40, 118, 125, 0.2);
}

/* Style for the submit button */
#payment-form button {
    width: 100%;
    padding: 15px;
    background-color: #28767d;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.2rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#payment-form button:hover {
    background-color: #1a5e63;
}

#card-errors {
    color: #fa3d02;
    text-align: center;
    margin-top: 15px;
    font-size: 0.95rem;
}

/* Add some padding around the form fields for better spacing */
.stripe-form-group {
    margin-bottom: 25px; /* Increased margin for spacing */
}

.stripe-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #333;
}

.card-details-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px; /* Space below this row */
}

.card-details-row>div {
    flex: 1; /* Each child takes equal space */
}


/* --- 4.11. Feature Comparison Table --- */
.feature-comparison {
    margin-top: 6rem; /* Increased top margin */
    background: #f9f9f9;
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.09); /* Slightly increased shadow */
    overflow-x: auto; /* Allows horizontal scrolling on small screens */
    padding: 20px;
}

.feature-comparison table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    border-spacing: 0;
}

.feature-comparison th,
.feature-comparison td {
    padding: 18px 15px; /* Increased padding */
    border-bottom: 1px solid #eee;
}

.feature-comparison th {
    background-color: #e0f2f7;
    color: #28767d;
    font-weight: 600;
    font-size: 1.1rem;
    white-space: nowrap; /* Prevents text wrap in headers */
}

.feature-comparison tbody tr:nth-child(even) td {
    background-color: #f2f2f2;
}

.feature-comparison td {
    color: #555;
}

.feature-comparison tbody tr:last-child td {
    border-bottom: none;
}

.feature-comparison .feature-name {
    font-weight: 600;
    color: #333;
}

.feature-comparison .check-icon {
    color: #28a745;
    font-size: 1.2rem;
}

.feature-comparison .minus-icon {
    color: #dc3545;
    font-size: 1.2rem;
}


/* --- 4.12. FAQ Section --- */
#faq {
    margin-top: 6rem; /* Increased top margin */
    background: #f0f8ff;
    border-radius: 12px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.09); /* Slightly increased shadow */
    padding: 50px; /* Increased padding */
}

#faq h2 {
    margin-bottom: 2.5rem; /* Increased bottom margin */
}

.faq-item {
    margin-bottom: 25px; /* Increased bottom margin */
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 20px; /* Increased bottom padding */
}

.faq-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 1.3rem; /* Slightly larger question */
    font-weight: 600;
    color: #28767d;
    cursor: pointer;
    padding: 12px 0; /* Increased padding */
    transition: color 0.3s ease;
}

.faq-question:hover {
    color: #fa3d02; /* Changed hover color for FAQ questions to accent color */
}

.faq-question i {
    transition: transform 0.3s ease;
    font-size: 1.1rem;
}

.faq-question:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(40, 118, 125, 0.3); /* Subtle focus outline */
    border-radius: 3px;
}

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

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.4s ease-out;
    opacity: 0;
    padding: 0 15px; /* Initial padding */
    color: #555;
    font-size: 1.05rem;
    margin-top: 10px;
}

.faq-answer.open {
    max-height: 800px; /* Increased max-height for content */
    opacity: 1;
    padding: 15px 15px 30px; /* Increased padding when open */
}


/* --- 4.13. Floating WhatsApp Button --- */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.whatsapp-float:hover {
    background-color: #1DA851; /* Darker green on hover */
    transform: scale(1.05); /* Slightly enlarge on hover */
}

.whatsapp-float i {
    color: white;
    font-size: 30px;
}


/*------------------------------------*\
    #5. UTILITIES
\*------------------------------------*/

.hidden {
    display: none !important;
}


/*------------------------------------*\
    #6. FOOTER
\*------------------------------------*/

.main-footer {
    font-family: 'Roboto', sans-serif; /* Using Roboto as Open Sans was inconsistent */
    padding: 40px 20px; /* Adjusted padding */
    background: linear-gradient(90deg, #176693, #2f6d91, #198754);
    color: #ffffff;
    text-align: center;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    justify-content: space-between; /* Spreads items evenly */
    align-items: flex-start; /* Aligns content to the top of each column */
    gap: 30px; /* Space between columns */
}

.footer-section {
    flex: 1; /* Each section takes equal flexible space */
    min-width: 200px; /* Minimum width before wrapping */
    margin-bottom: 20px; /* Space below sections on smaller screens */
    text-align: left; /* Align text within sections to the left */
}

.footer-section h4 {
    color: #fa3d02; /* Accent color for headings */
    margin-bottom: 15px;
    font-size: 1.2rem;
    font-weight: 700;
}

.footer-section p,
.footer-section a,
.footer-section address {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #e0e0e0;
    text-decoration: none;
}

.footer-section a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.footer-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

.footer-section ul li a {
    transition: color 0.3s ease;
}

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

.social-links a {
    color: #ffffff;
    font-size: 1.5rem;
    margin-right: 15px;
    transition: color 0.3s ease, transform 0.3s ease; /* Added transform for consistency */
}

.social-links a:hover {
    color: #fa3d02;
    transform: translateY(-3px); /* Added hover transform */
}

.footer-bottom {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.9rem;
    color: #b0b0b0;
}

.footer-bottom p {
    margin: 0;
}

.footer-bottom .footer-links a {
    color: #b0b0b0;
    text-decoration: none;
    margin: 0 10px;
}

.footer-bottom .footer-links a:hover {
    color: #ffffff;
    text-decoration: underline;
}


/*------------------------------------*\
    #7. MEDIA QUERIES
\*------------------------------------*/

@media (max-width: 992px) {
    /* No 992px specific rules provided in this snippet, but keeping the block for future use */
}

@media (max-width: 768px) {
    body {
        padding-top: 60px; /* Adjust if navbar height changes on mobile */
    }

    .navbar {
        height: 60px;
        padding: 0 20px;
    }

    .navbar .logo-container img {
        height: 40px; /* Smaller logo on mobile */
    }

    .nav-links {
        display: none; /* Hide desktop nav links on small screens */
    }

    .menu-toggle {
        display: block; /* Show mobile toggle button */
        margin-right: 0; /* Remove right margin */
    }

    .nav-menu-mobile {
        top: 60px; /* Adjust top position based on new navbar height */
        height: calc(100% - 60px);
    }

    h2 {
        font-size: 2.5rem; /* Smaller heading on mobile */
    }

    .subtitle {
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }

    .pricing-grid {
        grid-template-columns: 1fr; /* Stack pricing cards on mobile */
        padding: 15px;
    }

    .pricing-card {
        padding: 2rem 1.5rem;
    }

    .pricing-card h3 {
        font-size: 2rem;
    }

    .pricing-card .price {
        font-size: 2.2rem;
    }

    .pricing-card .price .original-price {
        font-size: 1.3rem;
    }

    .pricing-card .price span:last-of-type {
        font-size: 1rem;
    }

    .pricing-card .price .design-fee {
        font-size: 1.3rem;
    }

    .discount-badge {
        font-size: 0.85rem;
        padding: 6px 12px;
    }

    .pricing-card p.description {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .pricing-card ul {
        margin-bottom: 1.5rem;
        padding-top: 1rem;
    }

    .pricing-card ul li {
        font-size: 0.95rem;
    }

    .btn-select-plan,
    .btn-contact {
        padding: 12px 25px;
        font-size: 1rem;
    }

    .feature-comparison table {
        font-size: 0.9rem;
    }

    .feature-comparison th,
    .feature-comparison td {
        padding: 12px 10px;
    }

    .feature-comparison th {
        font-size: 1rem;
    }

    #faq {
        padding: 30px;
    }

    .faq-question {
        font-size: 1.1rem;
        padding: 10px 0;
    }

    .faq-answer.open {
        padding: 10px 10px 20px;
    }

    .contact-section-plans {
        padding: 30px;
    }

    .contact-section-plans p {
        font-size: 1rem;
    }

    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        font-size: 25px;
    }

    .whatsapp-float i {
        font-size: 25px;
    }

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

    .auth-modal-content h3,
    .payment-modal-content h3 {
        font-size: 1.8rem;
    }

    .auth-modal-content form input,
    .payment-modal-content form input[type="text"],
    .payment-modal-content form input[type="email"],
    #payment-form button {
        font-size: 1rem;
        padding: 10px;
    }

    .card-details-row {
        flex-direction: column; /* Stack CVC and Expiry vertically on small screens */
        gap: 15px;
    }

    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-section {
        text-align: center;
        margin-bottom: 30px;
    }

    .social-links {
        margin-top: 10px;
    }

    .footer-bottom {
        margin-top: 20px;
    }

    .footer-bottom .footer-links {
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    h2 {
        font-size: 2rem;
    }

    .subtitle {
        font-size: 0.95rem;
    }

    .pricing-card {
        padding: 1.5rem 1rem;
    }

    .pricing-card h3 {
        font-size: 1.8rem;
    }

    .pricing-card .price {
        font-size: 2rem;
    }

    .pricing-card .price .original-price {
        font-size: 1.2rem;
    }

    .pricing-card .price span:last-of-type {
        font-size: 0.9rem;
    }

    .pricing-card .price .design-fee {
        font-size: 1.2rem;
    }

    .discount-badge {
        font-size: 0.8rem;
        padding: 5px 10px;
    }

    .pricing-card p.description {
        font-size: 0.95rem;
    }

    .faq-question {
        font-size: 1rem;
    }

    .faq-answer.open {
        font-size: 0.9rem;
    }
}