/* Basic Rest and Variables */
:root {
    --primary-color: #ff9800; /* Orange from image */
    --secondary-color: #333;   /* Dark Grey */
    --text-color: #555;
    --light-bg: #f9f9f9;
    --white: #fff;
    --border-radius: 8px;
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Open Sans', sans-serif;
}

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

body {
    font-family: var(--font-body);
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--white);
    overflow-x: hidden; /* Prevent horizontal scroll */
    width: 100%;
}

html {
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--secondary-color);
    margin-bottom: 1rem;
    font-weight: 700;
}

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

ul {
    list-style: none;
}

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

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

.btn {
    display: inline-block;
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

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

.btn-primary:hover {
    background-color: #e68900;
    border-color: #e68900;
}

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

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

/* Header */
header {
    padding: 20px 0;
    background-color: #2c2c2c;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

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

.logo img {
    height: 40px; /* Adjust as needed */
}

nav ul {
    display: flex;
    gap: 30px;
}

nav ul li a {
    font-weight: 500;
    color: #fff;
}

nav ul li a:hover {
    color: var(--primary-color);
}

/* Hero Section */
.hero {
    height: 700px; /* Increased height for content */
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    color: var(--white);
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7); /* Darker overlay for text readability */
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: left; /* Keep text left aligned inside the block */
    max-width: 900px;
    margin-left: 180px; /* Moved further right as requested */
    margin-right: auto;
    width: 100%;
    /* Ensure no overflow from this container */
    box-sizing: border-box; 
    padding-right: 15px; /* Add some breathing room on right if full width */
}

.hero-content h1 {
    font-size: 3.5rem; /* Increased size */
    font-weight: 800;
    margin-bottom: 20px;
    color: var(--white);
    text-transform: uppercase;
    line-height: 1.2;
}

.hero-content p {
    font-size: 1.3rem; /* Increased size */
    margin-bottom: 40px;
    color: #f0f0f0;
    max-width: 750px;
    line-height: 1.8;
}

.hero-form-wrapper {
    max-width: 800px; /* Adjust as needed */
    width: 100%;
}

.form-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #ccc; /* Light grey text */
    font-size: 1rem; /* Increased size */
    padding: 0 5px;
}

.header-phone {
    color: var(--primary-color);
    font-weight: bold;
}

.hero-form-box {
    background: var(--white);
    padding: 15px; /* Increased padding */
    border-radius: 10px;
    display: flex;
    gap: 15px;
    align-items: center;
}

.input-group {
    background: #f5f5f5;
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding: 0 20px; /* Increased padding */
    flex: 1; /* Grow to fill space */
}

.input-group i {
    color: #888;
    margin-right: 10px;
    font-size: 1.2rem; /* Increased icon size */
}

.input-group input {
    background: transparent;
    border: none;
    padding: 18px 0; /* Increased padding */
    width: 100%;
    outline: none;
    font-size: 1.1rem; /* Increased font size */
    color: #333;
}

.hero-form-box button {
    padding: 18px 50px; /* Increased size */
    font-size: 1.1rem; /* Increased size */
    white-space: nowrap;
    border: none;
    border-radius: 5px;
}

/* Responsive Grid for Form */
@media (max-width: 768px) {
    .hero-form-box {
        flex-direction: column;
    }
    
    .input-group, .hero-form-box button {
        width: 100%;
    }
}

/* FAQ Section */
.faq {
    padding: 60px 0;
    background: #fff; /* Or very light gray if needed */
}

.faq .section-title h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: #333;
}

.faq .section-title p {
    color: #666;
    margin-bottom: 40px;
    max-width: 800px; /* Limit width */
    margin-left: auto;
    margin-right: auto;
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: flex-start;
}

.faq-item {
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
}

.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 20px 0;
    text-align: left;
    font-size: 1rem;
    font-weight: 700;
    color: #555;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.3s;
}

.faq-question:hover, .faq-question.active {
    color: #ff9800; /* Orange highlight */
}

.faq-question i {
    color: #ff9800;
    font-size: 0.9rem;
    transition: transform 0.3s;
}

/* Specific style for right column questions with icon on left */
.faq-question.left-icon {
    justify-content: flex-start;
    gap: 15px;
}

.faq-question.left-icon i {
    order: -1; /* Move icon to start */
}

.faq-question.active i {
    transform: rotate(45deg); /* Rotate plus to x */
}

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

.faq-answer p {
    padding: 0 0 20px 0;
    color: #777;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Responsive FAQ */
@media (max-width: 768px) {
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

.references .section-title h2 {
    font-size: 3rem; /* Larger */
    font-weight: 800; /* Bolder */
    color: #222;
}

.references .section-title p {
    max-width: 800px;
    margin: 0 auto 40px;
    color: #666;
}

.logos-slider {
    overflow: hidden;
    padding: 20px 0;
    white-space: nowrap;
    position: relative;
}

.logos-slider:before,
.logos-slider:after {
    position: absolute;
    top: 0;
    width: 250px;
    height: 100%;
    content: "";
    z-index: 2;
}

.logos-slider:before {
    left: 0;
    background: linear-gradient(to right, white, transparent);
}

.logos-slider:after {
    right: 0;
    background: linear-gradient(to left, white, transparent);
}

.logos-slide-track {
    display: flex;
    animation: scroll 20s linear infinite;
    width: calc(250px * 10); /* 250px per slide * number of slides */
}

/* Pause animation on hover */
.logos-slider:hover .logos-slide-track {
    animation-play-state: paused;
}

.logo-slide {
    height: 100px;
    width: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
}

.logo-slide img {
    max-width: 100%;
    max-height: 80px;
    filter: grayscale(100%); /* Make logos grey as in example */
    opacity: 0.6;
    transition: 0.3s;
}

.logo-slide img:hover {
    filter: grayscale(0); /* Color on hover */
    opacity: 1;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 5)); } /* Move by half the total width (5 items width) to loop */
}

@keyframes scroll-4 {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-250px * 4)); }
}

.logos-slide-track.track-8 {
    width: calc(250px * 8);
    animation: scroll-4 16s linear infinite;
}

/* Responsive References */
@media (max-width: 768px) {
    .logos-slide-track {
        width: calc(150px * 10);
    }
    
    .logo-slide {
        width: 150px;
        padding: 0 15px;
    }
    
    @keyframes scroll {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-150px * 5)); }
    }
}

/* Responsive adjustments for Hero Form */
@media (max-width: 768px) {
    .hero-content h1 {
        font-size: 2.5rem;
    }
    
    .hero-lead-form {
        flex-direction: column;
    }
    
    .hero-lead-form input, 
    .hero-lead-form button {
        width: 100%;
    }
}

/* Services / Info Section */
.services {
    padding: 80px 0;
    background: #f9f9f9; /* Light bg for potential contrast, or white if preferred. Image looks white/light grey */
    background-color: var(--light-bg);
}

.services-wrapper {
    display: flex;
    gap: 50px;
    align-items: flex-start;
}

/* Left Text Column */
.services-text {
    flex: 1;
    padding-right: 20px;
}

.text-block {
    margin-bottom: 40px;
}

.text-block h3 {
    font-size: 1.5rem;
    color: #222;
    margin-bottom: 15px;
    font-weight: 700;
}

.text-block p {
    color: #555;
    line-height: 1.7;
    font-size: 0.95rem;
}

/* Right Cards Column */
.services-cards {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.feature-card {
    background: var(--white);
    padding: 30px 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    border: 1px solid #eee;
    transition: transform 0.3s;
}

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

.icon-circle {
    width: 60px;
    height: 60px;
    background: #FF9800; /* Primary orange */
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 1.5rem;
    box-shadow: 0 4px 10px rgba(255, 152, 0, 0.3);
}

.feature-card h4 {
    font-size: 1rem;
    color: #333;
    margin-bottom: 10px;
    font-weight: 700;
}

.feature-card p {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
}

/* Responsive Services */
@media (max-width: 992px) {
    .services-wrapper {
        flex-direction: column;
    }
    
    .services-text {
        padding-right: 0;
        margin-bottom: 40px;
    }
}

@media (max-width: 576px) {
    .services-cards {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
        gap: 10px;
    }

    .feature-card {
        padding: 15px 10px;
    }

    .feature-card h4 {
        font-size: 0.9rem;
    }

    .feature-card p {
        font-size: 0.75rem;
    }
}

/* Packages */
.packages {
    padding: 60px 0;
    background: var(--light-bg);
}

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

.package-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: center;
}

.package-card {
    background: var(--white);
    padding: 40px;
    border-radius: var(--border-radius);
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
}

.package-card.featured {
    transform: scale(1.05);
    border: 2px solid var(--primary-color);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.package-card .tag {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--primary-color);
    color: var(--white);
    padding: 5px 15px;
    font-size: 0.8rem;
    border-bottom-left-radius: 10px;
}

.package-card h3 {
    margin-bottom: 20px;
}

.package-card ul {
    margin-bottom: 30px;
    text-align: left;
}

.package-card ul li {
    margin-bottom: 10px;
    color: var(--text-color);
}

.package-card ul li i {
    color: var(--primary-color);
    margin-right: 10px;
}

/* Social Media Grid */
.social-content {
    padding: 60px 0;
}

/* Package Buttons */
.package-divider {
    border: 0;
    border-top: 1px solid #eee; /* Light grey line */
    margin: 20px 0;
}

.package-btn-group {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center; /* Center them in the card */
    margin-top: 20px;
}

.btn-offer {
    background-color: #333; /* Dark Grey */
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    font-size: 1rem;
    flex-grow: 1; /* Expand to fill space */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.3s;
    text-decoration: none;
    white-space: nowrap;
}

.btn-offer:hover {
    background-color: #555;
    color: #fff;
}

.btn-wp-square {
    background-color: #25d366; /* WhatsApp Green */
    color: #fff;
    border: none;
    width: 48px; /* Fixed square size matching height roughly */
    height: 48px;
    border-radius: 5px;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
    text-decoration: none;
    flex-shrink: 0; /* Don't shrink */
}

.btn-wp-square:hover {
    background-color: #128c7e;
    color: #fff;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Business Process Section */
.process {
    padding: 80px 0;
    background: #fff;
}

.process .section-title p {
    color: #666;
    margin-bottom: 20px;
}

.process-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 50px;
}

.btn-process-blue {
    background-color: #007bff; /* Blue */
    color: #fff;
    border: none;
    padding: 12px 30px;
}

.btn-process-blue:hover {
    background-color: #0069d9;
}

.btn-process-green {
    background-color: #25d366; /* WhatsApp Green */
    color: #fff;
    border: none;
    padding: 12px 30px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-process-green:hover {
    background-color: #128c7e;
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.process-card {
    background: #fff;
    padding: 40px 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    position: relative;
    transition: transform 0.3s;
}

.process-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

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

.process-card h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: #222;
}

.process-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}

/* Responsive Process */
@media (max-width: 992px) {
    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .process-grid {
        grid-template-columns: 1fr;
    }
}

.gallery-grid img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: var(--border-radius);
    transition: 0.3s;
}

.gallery-grid img:hover {
    opacity: 0.9;
}

/* Why Choose Us Section */
.why-us {
    padding: 80px 0;
    background: #fff;
}

.why-us-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.why-us-content {
    flex: 1;
}

.why-us-content h2 {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #333;
}

.intro-text {
    margin-bottom: 30px;
    color: #666;
}

.feature-list li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: #444;
}

.feature-list li i {
    color: #FF9800; /* Orange check icon */
    margin-right: 15px;
    font-size: 1.2rem;
}

/* Stats Stats Grid Right */
.stats-box-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.stat-box {
    border-radius: 10px;
    padding: 40px 20px;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 180px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.stat-box h3 {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 10px;
    color: #fff;
}

.stat-box p {
    font-size: 1rem;
    font-weight: 500;
    opacity: 0.9;
}

/* Colors from image */
.stat-box.blue {
    background-color: #007bff; /* Bright Blue */
}

.stat-box.orange {
    background-color: #FF9F43; /* Light Orange */
}

.stat-box.grey {
    background-color: #ccc; /* Light Grey */
}

.stat-box.yellow {
    background-color: #FFC107; /* Yellow/Gold */
}

/* Responsive Why Us */
@media (max-width: 992px) {
    .why-us-wrapper {
        flex-direction: column;
    }

    .why-us-content {
        text-align: center;
    }
    
    .feature-list {
        display: inline-block;
        text-align: left;
    }
}

@media (max-width: 576px) {
    .stats-box-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .stat-box {
        padding: 15px 5px;
        min-height: 120px;
    }

    .stat-box h3 {
        font-size: 1.5rem;
        margin-bottom: 5px;
    }

    .stat-box p {
        font-size: 0.8rem;
    }
}

/* Testimonials Section */
.testimonials {
    padding: 80px 0;
    background: #fff;
    overflow: hidden; /* For absolute elements */
}

.testimonials-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

/* Left Side */
.testimonials-nav-content {
    flex: 1;
    max-width: 300px;
}

.testimonials-nav-content .sub-title {
    color: #888;
    font-size: 1rem;
    display: block;
    margin-bottom: 10px;
}

.testimonials-nav-content h2 {
    font-size: 2.5rem;
    line-height: 1.2;
    color: #333;
    margin-bottom: 30px;
    font-weight: 800;
}

.slider-nav {
    display: flex;
    gap: 15px;
}

.nav-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    color: #ff9800; /* Orange */
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s;
}

.nav-btn:hover {
    background: #ff9800;
    border-color: #ff9800;
    color: #fff;
}

/* Right Side Slider */
.testimonials-slider-box {
    flex: 2;
    position: relative;
    min-height: 400px; /* Adjust height based on design */
    display: flex;
    align-items: center;
}

/* Orange Background Rectangle */
.orange-bg-rect {
    position: absolute;
    left: 0;
    top: -30px; 
    bottom: -30px;
    width: 60%; /* Occupies left part behind the card */
    background-color: #ff9800; /* Solid Orange matching image */
    background: linear-gradient(135deg, #ff9800 0%, #ffb74d 100%); /* Subtle gradient as seen in some versions, or pure #ff9800 */
    z-index: 1;
    border-radius: 0; /* Sharp edges as per image, or slight radius if needed. Image looks sharp-ish rectangular block. */
}

.slider-container {
    position: relative;
    z-index: 2;
    width: 100%;
    margin-left: 15%; /* Push card to the right so it overlaps the orange edge */
}

/* Slides */
.slide {
    display: none;
    animation: fadeEffect 1s; /* Simple fade for transition */
}

.slide.active {
    display: block;
}

@keyframes fadeEffect {
    from {opacity: 0.4;}
    to {opacity: 1;}
}

.slide-card {
    background: #fff;
    padding: 60px 50px; /* More vertical padding */
    box-shadow: 0 10px 40px rgba(0,0,0,0.1); /* Soft shadow */
    border-radius: 2px; /* Very slight radius */
    max-width: 600px;
}

.quote-text {
    font-size: 1rem;
    color: #666;
    line-height: 1.8;
    margin-bottom: 40px;
    text-align: center; /* Image shows centered text */
}

.slide-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
    border: none; /* Removed border */
    padding: 0; /* Removed padding */
    background: transparent;
}

/* Ensure slide-author is centered in the card */
.slide-card {
    text-align: center;
}

.author-logo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.author-info {
    text-align: left;
}

.author-info h4 {
    color: #333;
    font-weight: 800;
    margin: 0;
    font-size: 1.1rem;
}

.author-info span {
    color: #777;
    font-size: 0.9rem;
}

/* Responsive Testimonials */
@media (max-width: 992px) {
    .testimonials-wrapper {
        flex-direction: column;
        align-items: center; /* Center align */
        text-align: center;
    }

    /* Reorder: Text/Nav first, then Slider on mobile */
    .testimonials-nav-content {
        order: 1;
        max-width: 100%;
        margin-bottom: 50px; /* Space between nav and slider (orange box area) */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .testimonials-slider-box {
        order: 2;
        width: 100%;
        justify-content: center;
        margin-bottom: 0;
        margin-top: 20px;
    }
    
    /* Mobile Design Changes */
    .orange-bg-rect {
        display: block;
        position: absolute;
        top: -60px; /* Move it up */
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
        height: 100px;
        bottom: auto;
        border-radius: 10px;
        z-index: 0;
        background: var(--primary-color);
    }

    .slider-container {
        margin-left: 0;
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 0 20px;
    }

    .slide-card {
        padding: 40px 20px;
        margin: 0; /* Remove margin, use padding of container */
        border-radius: 10px;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* Softer shadow */
        border: 1px solid #f0f0f0;
        border-top: 4px solid var(--primary-color); /* Add top colored border */
        width: 100%;
    }
}
/* Projects - Videos */
.projects {
    padding: 60px 0;
    background: #333;
}

.projects .section-title h2 {
    color: var(--white);
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Desktop: 3 columns */
    gap: 20px;
}

.video-item {
    position: relative;
    padding-bottom: 177.77%; /* 9:16 Aspect Ratio for Shorts/Vertical or 56.25% for 16:9 */
    /* Requested image shows vertical phone-like videos. Let's assume vertical aspect ratio */
    height: 0;
    overflow: hidden;
    padding-bottom: 177%; /* Mobile vertical video ratio approx */
}
/* If they are standard youtube videos, 56.25% is better. Image shows vertical 'story' style. 
   I will use a standard vertical aspect ratio container. */

.video-item iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
}

/* Contact Form */
.contact {
    padding: 80px 0;
    background: var(--light-bg);
}

.contact-container {
    max-width: 800px;
    margin: 0 auto;
    background: var(--white);
    padding: 50px;
    border-radius: var(--border-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

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

.contact-form input, 
.contact-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: inherit;
    outline: none;
}

.contact-form textarea {
    resize: vertical;
    margin-bottom: 20px;
}

.submit-btn {
    width: 100%;
    border: none;
    font-size: 1.1rem;
}

/* Info Cards Bottom */
.contact-info-cards {
    padding: 50px 0;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.info-card {
    text-align: center;
    padding: 30px;
    background: var(--white);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border-radius: var(--border-radius);
}

.info-card i {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

/* Footer */
footer {
    background-color: #1a1a1a; /* Darker black/grey */
    color: #bbb;
    padding-top: 60px;
    font-size: 0.95rem;
}

/* Footer CTA */
.footer-cta {
    text-align: center;
    padding-bottom: 60px;
    border-bottom: 1px solid #333; /* Separator if needed, usually just space */
}

.footer-cta h2 {
    color: #fff;
    font-size: 2rem;
    margin-bottom: 30px;
    font-weight: 700;
}

.footer-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-light-footer {
    background-color: #fff;
    color: #333;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    transition: 0.3s;
}

.btn-light-footer:hover {
    background-color: #eee;
}

.btn-orange-footer {
    background-color: #ff9800;
    color: #fff;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    transition: 0.3s;
}

.btn-orange-footer:hover {
    background-color: #e68900;
}

/* Footer Content */
.footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* Brand column is wider */
    gap: 50px;
    padding: 60px 0;
}

/* Brand Col */
.footer-brand {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.brand-name {
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
}

.google-partner {
    background: #fff;
    color: #fbbc05; /* Google colors or just generic text */
    padding: 5px 10px;
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 3px;
    color: #333; /* Dark text on white badge */
    border: 1px solid #ddd;
}

.brand-desc {
    color: #888;
    line-height: 1.6;
    margin-bottom: 30px;
    font-size: 0.9rem;
    max-width: 500px;
}

.footer-socials {
    display: flex;
    gap: 15px;
}

.footer-socials a {
    width: 35px;
    height: 35px;
    background: #333;
    color: #bbb;
    display: flex; /* Center icon */
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
}

.footer-socials a:hover {
    background: #ff9800;
    color: #fff;
}

/* Link Cols */
.footer-col h4 {
    color: #fff;
    margin-bottom: 25px;
    font-size: 1.1rem;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    color: #888;
    transition: 0.3s;
}

.footer-col ul li a:hover {
    color: #ff9800;
}

/* Footer Bottom */
.footer-bottom {
    background-color: #1a1a1a;
    border-top: 1px solid #333;
    padding: 25px 0;
    text-align: center;
}

.footer-bottom p {
    color: #666;
    font-size: 0.85rem;
    margin: 0;
}


/* --- RESPONSIVE --- */

@media (max-width: 992px) {
    .service-grid, .package-grid, .gallery-grid, .stats-grid, .video-grid, .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .quote-container {
        flex-direction: column;
        text-align: center;
    }
    
    .quote-text h2 {
        border-left: none;
        padding-left: 0;
        border-bottom: 5px solid var(--secondary-color);
        padding-bottom: 15px;
    }
    
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .footer-socials {
        justify-content: center;
    }
    
    .footer-brand {
        justify-content: center;
    }
    
    .brand-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .package-card.featured {
        transform: scale(1);
    }

    /* Footer links single column on mobile/tablet */
    .footer-col ul {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        margin: 0 auto;
    }
}

/* Hamburger Menu */
.hamburger {
    display: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
    background-color: #fff;
}

@media (max-width: 768px) {
    .hamburger {
        display: block;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* Mobile Navigation */
    nav {
        position: absolute;
    }

    .header-container {
        justify-content: space-between;
        position: relative;
    }

    nav ul {
        position: fixed;
        left: -100%;
        top: 80px; /* Header height 80px (40 logo + 40 padding) */
        gap: 0;
        flex-direction: column;
        background-color: #2c2c2c; /* Same as header */
        width: 100%;
        text-align: center;
        transition: 0.3s;
        z-index: 1000;
        padding: 20px 0;
        box-shadow: 0 10px 10px rgba(0,0,0,0.1);
    }

    nav ul.active {
        left: 0;
    }

    nav ul li {
        margin: 16px 0;
    }

    /* Hide the CTA button in header on mobile if it clutters, or keep it. 
       Let's keep it but maybe adjust if needed. 
       The user asked for Nav links to be in hamburger. Usually CTA is separate or inside.
       I'll keep CTA visible but let nav be toggleable.
    */
    .btn-header-cta {
        display: none; /* Hide standard CTA, maybe add it to menu or keep separate? 
                        Common pattern: Hide desktop CTA, show one in menu or just rely on footer/hero form.
                        Let's hide it for cleaner header and maybe add it to the list via JS or HTML if critical.
                        For now, I'll hide the header button on mobile to prevent layout issues with the hamburger. */
    }
    
    .hero-content {
        margin-left: 0; /* Reset for mobile */
        padding: 0 20px; /* Add padding for safe area */
    }

    .hero-content h1 {
        font-size: 1.8rem; /* Smaller heading */
        line-height: 1.2;
    }

    .hero-content p {
        font-size: 1rem; /* Smaller text */
        margin-bottom: 20px;
    }

    /* Fix form elements on mobile */
    .hero-form-box {
        flex-direction: column;
        padding: 15px;
        gap: 10px;
    }

    .input-group {
        width: 100%;
        padding: 0 15px;
    }

    .input-group input {
        padding: 12px 0;
        font-size: 1rem;
    }

    .hero-form-box button {
        width: 100%;
        padding: 12px;
        font-size: 1rem;
    }

    .video-grid {
        grid-template-columns: repeat(2, 1fr); /* Requested: 2 cols on mobile for videos */
    }
    
    .contact-form .form-row {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 576px) {
    .service-grid, .package-grid, .stats-grid, .card-grid {
        grid-template-columns: 1fr;
    }
    
    /* Videos and Gallery stay 2 cols */
    .video-grid, .gallery-grid {
        grid-template-columns: repeat(2, 1fr); 
    }
    
    .search-box {
        flex-direction: column;
        border-radius: 10px;
    }
    
    .search-box button {
        width: 100%;
        border-radius: 10px;
        margin-top: 5px;
    }
}

/* Help Section */
.help-section {
    padding: 60px 0;
    background: #fdfdfd; 
}

.help-section .section-title h2 {
    font-size: 2rem;
    color: #222;
    margin-bottom: 10px;
}

.help-section .section-title p {
    color: #666;
    margin-bottom: 40px;
}

.help-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.help-card {
    background: #fff;
    padding: 40px 20px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

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

.icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    color: #fff;
    font-size: 1.5rem;
}

.icon-circle.blue {
    background-color: #007bff;
}

.icon-circle.green {
    background-color: #25d366;
}

.help-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #333;
}

.help-card p {
    font-size: 0.9rem;
    color: #777;
    margin: 0;
}

/* Responsive Help Section */
@media (max-width: 992px) {
    .help-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .help-grid {
        grid-template-columns: 1fr;
    }
}

/* Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 2000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 40px;
    border: 1px solid #888;
    width: 90%;
    max-width: 700px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    animation: slideDown 0.3s ease;
}

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

.close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 15px;
    right: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.close-modal:hover,
.close-modal:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    text-align: center;
    margin-bottom: 30px;
}

.modal-header h2 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 10px;
}

.modal-header p {
    color: #666;
}

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

.modal-form input, 
.modal-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.3s;
}

.modal-form input:focus, 
.modal-form textarea:focus {
    border-color: var(--primary-color);
}

.modal-form textarea {
    resize: vertical;
    margin-bottom: 20px;
}

.modal-submit-btn {
    width: 100%;
    background-color: var(--primary-color);
    color: white;
    font-size: 1.1rem;
    padding: 15px;
    border: none;
    border-radius: 30px; /* Rounded pill shape as in image */
    cursor: pointer;
    transition: background 0.3s;
}

.modal-submit-btn:hover {
    background-color: #e68900;
}

@media (max-width: 768px) {
    .modal-form .form-row {
        flex-direction: column;
        gap: 15px;
    }
    
    .modal-content {
        width: 95%;
        padding: 25px;
        margin: 20px auto; /* Allow scrolling on mobile if tall */
    }
}

/* Lightbox Styles */
.lightbox {
    display: none;
    position: fixed;
    z-index: 3000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox.show {
    display: flex;
    opacity: 1;
}

.lightbox-content {
    max-width: 90%;
    max-height: 90%;
    margin: auto;
    display: block;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    animation: zoomIn 0.3s;
    object-fit: contain;
}

@keyframes zoomIn {
    from {transform: scale(0.8); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
}

.close-lightbox {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 3001;
    transition: 0.3s;
}

.close-lightbox:hover {
    color: #bbb;
}

.lightbox-prev, .lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    color: white;
    border: none;
    font-size: 3rem;
    cursor: pointer;
    padding: 0 20px;
    z-index: 3001;
    transition: color 0.3s;
}

.lightbox-prev:hover, .lightbox-next:hover {
    color: #ff9800; /* Primary color */
}

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

@media (max-width: 768px) {
    .lightbox-prev, .lightbox-next {
        font-size: 2rem;
        padding: 0 10px;
    }
    .lightbox-prev { left: 10px; }
    .lightbox-next { right: 10px; }
    .close-lightbox {
        right: 20px;
        top: 10px;
    }
}

/* Fixed Action Buttons Styles */
.fixed-actions-pc {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 9991;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.fixed-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.fixed-btn:hover {
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
    color: #fff;
}

.fixed-btn.phone {
    background-color: #3b5998; /* Standard Phone Blue */
}

.fixed-btn.whatsapp {
    background-color: #25d366; /* WhatsApp Green */
}

/* Mobile Bottom Bar Styles */
.fixed-actions-mobile {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px; /* Reduced height */
    z-index: 9992;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

.mobile-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px; /* Reduced icon size */
    text-decoration: none;
    transition: background 0.2s;
}

.mobile-action-btn.phone {
    background-color: #3b5998;
}

.mobile-action-btn.whatsapp {
    background-color: #25d366;
}

/* Responsive Logic */
@media (max-width: 768px) {
    .fixed-actions-pc {
        display: none;
    }
    
    .fixed-actions-mobile {
        display: flex;
    }
    
    body {
        padding-bottom: 50px; /* Prevent content occlusion */
    }
}