:root {
    --primary: #ffffff;
    --secondary: #ffffff;
    /* All white background */
    --accent: #D32F2F;
    /* Professional Red */
    --accent-gold: #ffc107;
    /* Keep gold accents or remove? User said Red and White. Let's keep gold for subtle premium feel or maybe just remove it to be strict. Let's keep it but minimize usage or swap to a dark red/black. Actually, usually Red/White pairs well with Dark Grey/Black. Let's keep gold just for the gradient text or remove it. Let's shift gradient to Red-DarkRed. */
    --text-main: #333333;
    --text-muted: #666666;
    --white: #ffffff;
    --glass: rgba(0, 0, 0, 0.05);
    /* Dark glass for light background */
    --border: rgba(0, 0, 0, 0.1);
    /* Slightly darker border for white-on-white */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Outfit', sans-serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background-color: var(--primary);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    color: var(--text-main);
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
    transition: 0.3s;
}

ul {
    list-style: none;
}

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

/* Utilities */
.gradient-text {
    background: linear-gradient(90deg, var(--accent), #b71c1c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.btn-primary {
    display: inline-block;
    padding: 12px 28px;
    background: var(--accent);
    border: 1px solid var(--accent);
    color: var(--white);
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
}

.btn-primary:hover {
    background: #b71c1c;
    border-color: #b71c1c;
    transform: translateY(-2px);
}

.btn-secondary {
    display: inline-block;
    padding: 12px 28px;
    color: var(--text-main);
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: 4px;
}

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

.section-tag {
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 10px;
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 20px 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

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

.logo-link {
    display: flex;
    align-items: center;
}

.logo-img {
    height: 100px;
    /* Increased to 100px */
    width: auto;
    object-fit: contain;
}

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

.nav-links a {
    font-size: 0.95rem;
    color: var(--text-main);
}

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

/* Mobile Menu */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.mobile-menu-btn span {
    width: 25px;
    height: 2px;
    background-color: var(--accent);
    display: block;
}

/* Hero */
.hero {
    padding-top: 120px;
    padding-bottom: 50px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.hero-text h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    line-height: 1.1;
}

.hero-text p {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 30px;
    max-width: 500px;
}

.badge {
    background: rgba(211, 47, 47, 0.1);
    color: var(--accent);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    display: inline-block;
    margin-bottom: 20px;
    border: 1px solid rgba(211, 47, 47, 0.2);
}

.hero-bg-glow {
    position: absolute;
    top: -10%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(211, 47, 47, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
    z-index: 1;
    pointer-events: none;
}

.hero-visual {
    position: relative;
    height: 400px;
    background: url('assets/hero-bg-human.png') no-repeat center center/cover;
    border-radius: 20px;
    border: 1px solid var(--border);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.floating-card {
    position: absolute;
    background: var(--white);
    padding: 15px 20px;
    border-radius: 12px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 15px;
    animation: float 6s ease-in-out infinite;
}

.card-1 {
    top: 20%;
    right: -20px;
}

.card-2 {
    bottom: 20%;
    left: -20px;
    animation-delay: 2s;
}

@keyframes float {

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

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

/* Features */
.features {
    padding: 50px 0;
    background: var(--secondary);
}

/* .feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
} */

/* Marquee Implementation */
.marquee-wrapper {
    overflow: hidden;
    width: 100%;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-content {
    display: flex;
    gap: 30px;
    width: max-content;
    animation: scroll 20s linear infinite;
}

.feature-card {
    background: var(--primary);
    padding: 30px;
    border-radius: 8px;
    transition: 0.3s;
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    flex: 0 0 300px;
    /* Fixed width for smooth scrolling */
    min-width: 300px;
}

.feature-icon {
    margin-bottom: 20px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feature-icon img {
    height: 100%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

/* Pause on hover for better UX */
.marquee-wrapper:hover .marquee-content {
    animation-play-state: paused;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-100% / 3));
        /* Move by 1/3 since we have 3 sets */
    }
}

.feature-card {
    background: var(--primary);
    padding: 30px;
    border-radius: 8px;
    transition: 0.3s;
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-icon {
    margin-bottom: 20px;
    color: var(--accent);
    /* Ensure SVGs inherit the accent color */
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature-icon svg {
    width: 48px;
    height: 48px;
}

/* Services */
.services {
    padding: 60px 0;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.service-card {
    background: var(--white);
    padding: 30px;
    border-radius: 8px;
    transition: 0.3s;
    border: 1px solid var(--border);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.service-card:hover {
    border-color: var(--accent);
    transform: translateY(-5px);
}

.card-icon {
    /* font-size: 2.5rem; Removed font size as we use images */
    margin-bottom: 20px;
    height: 80px;
    /* Fixed height for consistency */
    display: flex;
    align-items: center;
    justify-content: start;
}

.card-icon img {
    height: 100%;
    width: auto;
    object-fit: contain;
    /* Optional: filter to adjust brightness if needed, but 3D icons should pop */
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.service-card h3 {
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.service-card p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.link-arrow {
    color: var(--accent);
    font-size: 0.9rem;
    font-weight: 600;
}

/* About */
.about {
    padding: 60px 0;
    position: relative;
}

.about-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.image-box {
    width: 100%;
    height: 400px;
    background: url('assets/about-us-new.png') no-repeat center center/cover;
    border-radius: 10px;
    position: relative;
}

.image-box::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    right: -20px;
    bottom: -20px;
    border: 2px solid var(--accent);
    border-radius: 10px;
    z-index: -1;
}

.about-content h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.about-content p {
    color: var(--text-muted);
    margin-bottom: 20px;
}

.about-list li {
    margin-bottom: 10px;
    font-size: 1rem;
    color: var(--text-main);
}

/* Branches */
.branches {
    padding: 60px 0;
    background: var(--white);
}

.branches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.branch-card {
    background: var(--secondary);
    padding: 30px;
    border-radius: 8px;
    transition: 0.3s;
    border: 1px solid var(--border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.branch-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
}

.branch-icon {
    /* font-size: 2rem; Removed for image */
    margin-bottom: 20px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: start;
}

.branch-icon img {
    height: 100%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.branch-card h3 {
    margin-bottom: 15px;
    font-size: 1.3rem;
}

.branch-address {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 10px;
    line-height: 1.5;
}

.branch-contact {
    color: var(--text-main);
    font-weight: 500;
    margin-bottom: 20px;
}

.sub-branch {
    border-bottom: 1px solid var(--border);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.sub-branch:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}

.sub-branch h4 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: var(--accent);
}

/* Contact */
.contact {
    padding: 60px 0;
    background: var(--secondary);
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.contact-form {
    background: var(--white);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border);
}

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

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    background: #fdfdfd;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: var(--text-main);
    font-family: inherit;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.full-width {
    width: 100%;
    text-align: center;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: start;
}

.checkbox-group input {
    width: auto;
    margin: 0;
    cursor: pointer;
}

.checkbox-group label {
    font-size: 0.95rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.checkbox-group label a {
    color: var(--accent);
    text-decoration: underline;
    font-weight: 500;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.info-item .icon {
    width: 40px;
    height: 40px;
    background: rgba(100, 255, 218, 0.1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--accent);
}

/* Footer */
footer {
    padding: 30px 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}

.footer-links {
    margin-top: 15px;
    font-size: 0.85rem;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: underline;
    margin: 0 10px;
}

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

/* Responsive */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        /* Mobile menu implementation req in JS */
        flex-direction: column;
        position: absolute;
        top: 70px;
        right: 0;
        background: var(--secondary);
        width: 100%;
        padding: 20px;
    }

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

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

    .hero-content,
    .about-container,
    .contact-wrapper {
        grid-template-columns: 1fr;
    }

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

    .hero {
        padding-top: 160px;
        /* Increased to prevent overlap */
    }
}

.view-details-btn {
    padding: 8px 16px;
    font-size: 0.9rem;
    margin-bottom: 15px;
    display: inline-block;
    cursor: pointer;
}

.hidden {
    display: none !important;
}

/* Sticky Contact Bar */
.sticky-contact-bar {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.sticky-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); */
    /* Remove shadow as per 'clean' design, or keep it for depth. Let's keep it for floating feels. */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    color: #fff;
}

.sticky-btn:hover {
    transform: scale(1.1);
}

.whatsapp-btn {
    background-color: #25D366;
}

.call-btn {
    background-color: #007bff;
    /* Standard blue usually indicates standard action, or use accent color? Let's use a nice blue. */
}

.sticky-btn svg {
    width: 32px;
    height: 32px;
}

/* Success Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--white);
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    border: 1px solid var(--border);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.modal-overlay.active .modal-content {
    transform: translateY(0);
}

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

.modal-content h3 {
    margin-bottom: 10px;
    font-size: 1.5rem;
    color: var(--text-main);
}

.modal-content p {
    color: var(--text-muted);
    margin-bottom: 30px;
}