/* Enterprise BPO Design System */
:root {
    /* Colors */
    --primary: #0072CE;
    /* Voicify Blue - Kept same */
    --primary-light: #004b8d;
    /* Darker Blue */

    --secondary: #4CAF50;
    /* Voicify Green (Updated from Orange) */
    --secondary-hover: #388E3C;
    /* Darker Green */

    --accent: #FFFFFF;
    /* White */
    --primary-dark: #003366;
    /* Deep Navy */
    --text-main: #334155;
    /* Slate 700 */
    --text-light: #64748B;
    /* Slate 500 */
    --white: #FFFFFF;
    --bg-light: #F8FAFC;
    /* Slate 50 */
    --bg-white: #FFFFFF;
    --border: #E2E8F0;
    /* Slate 200 */

    /* Typography */
    --font-main: 'Inter', sans-serif;
    --h1: 3.5rem;
    --h2: 2.5rem;
    --h3: 1.75rem;
    --h4: 1.25rem;
    --body: 1rem;
    --small: 0.875rem;

    /* Spacing */
    --container-width: 95%;
    --section-padding: 2rem 0;
    --card-padding: 2rem;

    /* Effects */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --radius: 0.5rem;
    --transition: all 0.3s ease;
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--bg-light);
    /* zoom: 67%; Remove zoom to restore default size */
}

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

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

ul {
    list-style: none;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--primary);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.75rem;
}

h1 {
    font-size: var(--h1);
    letter-spacing: -0.02em;
}

h2 {
    font-size: var(--h2);
    letter-spacing: -0.01em;
}

h3 {
    font-size: var(--h3);
}

h4 {
    font-size: var(--h4);
}

p {
    margin-bottom: 1rem;
}

/* Utilities */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.section {
    padding: var(--section-padding);
}

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

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

.bg-primary {
    background-color: var(--primary-dark);
    color: var(--white);
}

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

.text-white {
    color: var(--white);
}

.mb-1 {
    margin-bottom: 0.5rem;
}

.mb-2 {
    margin-bottom: 1.5rem;
}

.mb-4 {
    margin-bottom: 2.5rem;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.875rem 1.75rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    text-align: center;
    border: none;
    transition: var(--transition);
}

.btn-primary {
    background-color: var(--secondary);
    color: var(--white);
}

.btn-primary:hover {
    background-color: var(--secondary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

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

.btn-secondary:hover {
    background-color: var(--white);
    color: var(--primary);
}

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

.btn-outline:hover {
    background-color: var(--secondary);
    color: var(--white);
}

/* Navbar */
.navbar {
    background-color: var(--white);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0.75rem 0;
    /* Reduced from 1.25rem to accommodate larger logo */
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.03em;
}

/* Force larger logo size and override inline styles */
.logo img {
    height: 60px !important;
    vertical-align: middle;
    width: auto;
}

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

.nav-link {
    font-weight: 500;
    color: var(--text-main);
}

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

/* Dropdown */
.dropdown {
    position: relative;
    padding-bottom: 1rem;
    /* Increase hover area */
    margin-bottom: -1rem;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    box-shadow: var(--shadow-lg);
    border-radius: var(--radius);
    padding: 0.5rem 0;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: var(--transition);
    border: 1px solid var(--border);
    flex-direction: column;
    z-index: 1001;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    display: flex;
}

.dropdown-menu li {
    list-style: none;
}

.dropdown-menu a {
    display: block;
    padding: 0.75rem 1.5rem;
    color: var(--text-main);
    text-decoration: none;
    transition: var(--transition);
    font-size: 0.95rem;
    white-space: nowrap;
}

.dropdown-menu a:hover {
    background: var(--bg-light);
    color: var(--secondary);
    padding-left: 2rem;
}


.mobile-menu-close {
    display: none;
}

.mobile-toggle {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1101;
    /* Above the drawer */
    position: relative;
}

/* Hero */
.hero {
    background: linear-gradient(135deg, rgba(0, 30, 70, 0.95) 0%, rgba(0, 80, 160, 0.9) 100%), url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--white);
    padding: 5rem 0 3rem;
    position: relative;
    overflow: hidden;
}

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

.hero h1 {
    color: var(--white);
    margin-bottom: 1.5rem;
}

.hero p {
    font-size: 1.25rem;
    color: #CBD5E1;
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.hero-btns {
    display: flex;
    gap: 1rem;
    /* Default to left for grid layout, overridden for center in media query or specific class */
    justify-content: flex-start;
}

.hero-content-wide {
    width: 100%;
    margin: 0 auto;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 0.8fr;
    /* Text takes slightly more space or equal */
    gap: 4rem;
    align-items: center;
    text-align: left;
}

.hero-image img {
    width: 100%;
    max-width: 600px;
    height: auto;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.3));
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

@media (max-width: 991px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2rem;
    }

    .hero-btns {
        justify-content: center;
    }

    .hero-image {
        order: -1;
        /* Image on top on mobile? or bottom. User usually prefers image on top or standard flow. Let's keep standard flow (text first) or image top. Hero image often good on top. Let's try text first for SEO/CTA. */
        display: none;
        /* Often hero images are hidden on mobile or shown small. Let's show it. */
        display: block;
    }

    .hero-image img {
        max-width: 80%;
    }
}

/* Cards */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.card {
    background: var(--white);
    padding: var(--card-padding);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: var(--transition);
    text-decoration: none;
    color: inherit;
    display: block;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
    border-color: var(--secondary);
}

.card-icon {
    font-size: 2.5rem;
    color: var(--secondary);
    margin-bottom: 1.5rem;
}

/* Features */
.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 769px) {
    .features-grid.reverse-desktop>div:first-child {
        order: 2;
    }

    .features-grid.reverse-desktop>div:last-child {
        order: 1;
    }
}

.feature-list li {
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.feature-list li::before {
    content: "✓";
    color: var(--secondary);
    font-weight: bold;
}

/* Pricing */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.pricing-card {
    background: var(--white);
    padding: 2rem 1.5rem;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    text-align: center;
    position: relative;
    transition: var(--transition);
}

.pricing-card.featured {
    border-color: var(--secondary);
    box-shadow: var(--shadow-lg);
    transform: scale(1.05);
}

.pricing-price {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary);
    margin: 1.5rem 0;
}

.pricing-price span {
    font-size: 1rem;
    color: var(--text-light);
    font-weight: 400;
}

/* Forms */
.form-box {
    background: var(--white);
    padding: 2rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--primary);
}

.form-control {
    width: 100%;
    padding: 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 1rem;
    color: var(--primary);
    transition: var(--transition);
}

.form-control:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

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

/* Footer */
.footer {
    background-color: var(--primary-dark);
    color: rgba(255, 255, 255, 0.75);
    padding: 3rem 0 1.5rem;
    font-size: 0.9rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

/* Footer Logo Adjustment */
.footer img {
    background-color: rgba(255, 255, 255, 0.85);
    padding: 8px 12px;
    border-radius: 6px;
    opacity: 1;
    margin-bottom: 1rem;
    display: inline-block;
}

.footer h5 {
    color: var(--white);
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.footer ul li {
    margin-bottom: 0.5rem;
}

.footer a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

.footer a:hover {
    color: var(--white);
    transform: translateX(5px);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 1.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Footer Social Icons */
.footer-social {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
}

.footer-social a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border-radius: 50%;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    text-decoration: none;
}

.footer-social a:hover {
    background-color: var(--secondary);
    color: var(--white);
    transform: translateY(-3px);
}

/* Mobile */
/* Mobile */
@media (max-width: 768px) {
    :root {
        --h1: 2.5rem;
        --h2: 2rem;
    }

    .mobile-menu-close {
        display: none;
    }

    /* Fixed side drawer */
    .nav-links {
        display: flex;
        /* Always flex, but hidden via transform */
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        /* Full viewport height */
        height: 100dvh;
        /* Dynamic viewport height for modern browsers */
        width: 75%;
        max-width: 320px;
        background: var(--white);
        flex-direction: column;
        padding: 2rem 1.5rem 8rem 1.5rem;
        /* Extra bottom padding for scrolling */
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        gap: 1.5rem;
        z-index: 1000;
        transform: translateX(100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        overscroll-behavior: contain;
        /* Prevent body scroll chaining */
        -webkit-overflow-scrolling: touch;
        /* Smooth scrolling on iOS */
        /* Hide scrollbar */
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
    }

    .nav-links::-webkit-scrollbar {
        display: none;
        width: 0 !important;
        background: transparent;
    }

    .nav-links.active {
        transform: translateX(0);
    }

    /* Mobile Dropdown Styling */
    /* Mobile Dropdown Styling - Forced Specificity */
    .dropdown-menu {
        position: static !important;
        /* Force flow layout */
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        padding-left: 1rem;
        display: none;
        width: 100% !important;
        float: none !important;
    }

    .dropdown:hover .dropdown-menu {
        display: none;
    }

    .dropdown-menu.active {
        display: flex !important;
        flex-direction: column !important;
        position: static !important;
    }

    /* Drawer Background (White) */
    .nav-links::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Min height to cover scrollable area? No, fixed height 100vh works best if container is scrolling. Wait, nav-links has overflow-y: auto. */
        /* If nav-links scrolls, ::after absolute might not cover full scroll height? 
           Actually, nav-links is fixed height 100vh. So 100% height is fine. 
        */
        background: var(--white);
        z-index: -1;
    }

    /* Overlay backdrop when menu is open */
    .nav-links.active::before {
        content: '';
        position: fixed;
        top: 0;
        left: -100vw;
        /* Extend to cover the rest of the screen */
        width: 200vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: -2;
        /* Behind the white background */
        pointer-events: all;
        /* Blocks clicks on background */
    }

    .nav-links li {
        width: 100%;
        text-align: left;
    }

    .nav-links a {
        font-size: 1.1rem;
        display: block;
        padding: 1rem 0.5rem;
        /* Larger tap area */
        border-bottom: 1px solid var(--border);
    }

    .nav-links a i {
        pointer-events: none;
        /* Ensure clicks pass to the link */
    }

    .nav-links a.btn {
        border-bottom: none;
        text-align: center;
        margin-top: 1rem;
    }

    .dropdown {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }

    .dropdown-menu {
        position: static;
        box-shadow: none;
        border: none;
        padding: 0;
        display: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        margin-top: 0;
        padding-left: 1rem;
    }

    .dropdown-menu a {
        font-size: 1rem;
        color: var(--text-light);
        padding: 0.5rem 0;
        border-bottom: none;
    }



    /* Hamburger Toggle - Ensure z-index is higher than menu */
    .mobile-toggle {
        display: block;
        z-index: 1001;
        position: relative;
    }

    /* Optional: Animate hamburger to X could be added here, 
       but keeping it simple for now as requested 'fix logo' logic doesn't touch JS */

    .features-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .pricing-card.featured {
        transform: none;
    }

    .features-grid {
        gap: 2rem;
    }

    .section {
        padding: 3rem 0;
    }

    .hero {
        padding: 6rem 0 4rem;
    }
}

/* WhatsApp Floating Button */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    text-align: center;
    font-size: 32px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
    z-index: 2147483647 !important;
    /* Max Z-Index to ensure it's on top of everything */
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 1 !important;
    visibility: visible !important;
    transition: all 0.3s ease;
    text-decoration: none;
}

.whatsapp-float:hover {
    background-color: #128c7e;
    transform: scale(1.1);
    color: white;
    /* Ensure icon stays white */
    box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.4);
}

.whatsapp-float i {
    margin-top: 1px;
    /* Optical alignment */
}