/*
Theme Name: CCTV Theme
Theme URI: http://bpthink.com/
Author: Your Name
Author URI:  http://bpthink.com/
Description: A custom security theme based on the Monity layout.
Version: 1.0
License: GPLv2 or later
Text Domain: monity
*/

/* --- Custom properties for colors from the Monity design --- */
:root {
    /* ... (rest of your existing CSS from previous response goes here) ... */
    --primary-blue: #2c3e50; 
    --accent-orange: #f39c12; 
    /* ... and so on ... */
}
/* ... (continue with the rest of your comprehensive CSS file) ... */
/* Custom properties for colors from the Monity design */
      :root {
        --primary-blue: #2c3e50; /* Deep navy/dark blue (Backgrounds, Headings) */
        --accent-orange: #f39c12; /* Bright orange for highlight and CTA buttons */
        --accent-blue-light: #4c6883; /* Lighter blue for card backgrounds */
        --link-blue: #3498db; /* Bright read-more link color */
        --link-orange: #f39c12;
        --text-light: #ecf0f1;
        --text-dark: #333;
        --light-bg: #fff;
        --body-font: "Plus Jakarta Sans", sans-serif;
        
      }

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

      body {
        font-family: var(--body-font);
        line-height: 1.6;
        color: var(--text-dark);
        background-color: var(--light-bg);
      }

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

      section {
        padding: 40px 0;
      }

      h2 {
        text-align: center;
        font-size: 2.2em;
        font-weight: 700;
        margin-bottom: 20px;
        color: var(--primary-blue);
      }

      /* --- Utility Classes & Buttons --- */
      .dark-bg {
        background-color: var(--primary-blue);
        color: var(--text-light);
      }
      .dark-bg h2 {
        color: var(--text-light);
      }
      .icon-blue-light {
        color: var(--primary-blue);
      }
      .icon-white {
        color: white;
      }

      .btn {
        display: inline-block;
        padding: 12px 30px;
        border: none;
        border-radius: 5px;
        text-decoration: none;
        font-weight: 600;
        cursor: pointer;
        text-transform: uppercase;
        transition: background-color 0.3s ease;
        font-size: 0.9em;
      }

      .nav-btn {
        background-color: var(--accent-orange);
        color: white;
      }
      .btn-read-more {
        background-color: var(--link-orange);
        color: white;
        padding: 12px 30px;
        font-weight: 600;
      }

      /* --- 1. HEADER / HERO SECTION --- */
      .hero-section {
        background: url("https://images.unsplash.com/photo-1549414596-f9cf127595cc?q=80&w=1470&auto=format&fit=crop")
          no-repeat center center/cover;
        min-height: 550px;
        display: flex;
        flex-direction: column;
      }

      .header-overlay {
        width: 100%;
        /*min-height: 550px;*/
        background: rgba(0, 0, 0, 0.4); /* Dark overlay */
        /*display: flex;*/
        flex-direction: column;
        align-items: center;
      }

      .navbar {
        padding: 20px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        max-width: 1200px;
      }

      .logo {
        font-size: 1.8em;
        font-weight: 900;
        color: var(--accent-orange);
      }

      .nav-links {
        list-style: none;
        display: flex;
        margin-right: auto; /* Push menu left slightly */
        margin-left: 50px;
      }

      .nav-links a {
        color: white;
        text-decoration: none;
        margin-right: 25px;
        font-size: 0.9em;
        font-weight: 600;
        transition: color 0.2s;
      }

      .hero-content {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
      }

      .hero-content h1 {
        font-size: 3.5em;
        margin-bottom: 30px;
        max-width: 650px;
        font-weight: 900;
        color: white;
      }

      .hero-btn {
        background-color: white;
        color: var(--primary-blue);
        padding: 15px 40px;
      }

      /* --- 2. INTRO/FEATURE BLOCK (About Us) --- */
      .intro-block {
        display: flex;
        gap: 60px;
        align-items: flex-start;
      }

      .intro-image-container {
        flex: 1;
        position: relative;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      }

      .intro-image {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 5px 5px 0 0;
      }

      .intro-image-cta-bar {
        background-color: var(--accent-orange);
        color: white;
        padding: 15px 20px;
        display: flex;
        align-items: center;
        gap: 10px;
        border-radius: 0 0 5px 5px;
      }
      .intro-image-cta-bar i {
        font-size: 1.5em;
        color: white;
      }
      .intro-image-cta-bar p {
        margin: 0;
        font-weight: 600;
      }

      .intro-text {
        flex: 1;
      }

      .section-tag {
        color: var(--accent-orange);
        font-size: 1em;
        font-weight: 600;
        margin-bottom: 5px;
      }

      .intro-text h2 {
        text-align: left;
        margin-bottom: 20px;
        font-size: 2.5em;
        color: var(--primary-blue);
        line-height: 1.2;
      }
      .intro-description {
        margin-bottom: 30px;
        color: #666;
      }

      .features-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin: 30px 0 40px;
      }

      .feature-item {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .feature-item i {
        font-size: 1.5em;
        color: var(--primary-blue);
      }

      .feature-item p {
        font-size: 1em;
        font-weight: 500;
        color: var(--primary-blue);
        margin: 0;
      }

      /* --- 3. SERVICES SECTION --- */
      .services-section {
        text-align: center;
      }

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

      .service-card {
        padding: 30px;
        background: var(--accent-blue-light);
        color: var(--text-light);
        text-align: left;
        border-radius: 5px;
        transition: background 0.3s;
      }

      .service-card:hover {
        background: #5a7592;
      }

      .card-icon {
        font-size: 2.2em;
        color: var(--accent-orange);
        margin-bottom: 15px;
        display: block;
      }

      .service-card h3 {
        color: white;
        margin-bottom: 10px;
        font-weight: 600;
      }
      .service-card p {
        font-size: 0.9em;
        color: rgba(255, 255, 255, 0.8);
        margin-bottom: 15px;
      }
      .service-card a {
        color: var(--accent-orange);
        text-decoration: none;
        font-weight: 600;
        font-size: 0.9em;
      }

      /* --- 4. INNOVATION PROJECTS SECTION --- */
      .projects-section {
        background-color: var(--light-bg);
      }

      .projects-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-top: 40px;
      }

      .project-item img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        display: block;
        border-radius: 5px;
        transition: transform 0.3s;
      }
      .project-item img:hover {
        transform: scale(1.03);
      }

      .cta-bar {
        text-align: center;
        margin-top: 50px;
        padding: 30px 0;
        background-color: var(--accent-orange);
        border-radius: 5px;
      }
      .cta-bar-btn {
        background: white;
        color: var(--accent-orange);
        padding: 15px 50px;
      }

      /* --- 5. QUOTE/IMAGE BLOCK --- */
      .quote-image-block {
        display: flex;
        gap: 40px;
        align-items: center;
      }

      .quote-container {
        flex: 1;
      }

      .quote-box {
        border: 1px solid #ddd;
        padding: 30px;
        border-radius: 5px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      }
      .client-avatar {
        border-radius: 50%;
        margin-bottom: 20px;
        display: block;
      }

      .quote-text {
        font-style: italic;
        margin-bottom: 15px;
        font-size: 1.1em;
        color: #555;
      }

      .quote-signature {
        font-weight: 700;
        color: var(--primary-blue);
        display: block;
        margin-bottom: 5px;
      }
      .quote-rating i {
        color: var(--accent-orange);
        font-size: 1em;
      }

      .main-camera-image {
        flex: 1;
      }
      .main-camera-image img {
        width: 100%;
        height: auto;
        border-radius: 5px;
      }

      /* --- 6. TESTIMONIALS SECTION --- */
      .testimonials-section {
        padding: 40px 0;
      }
      .testimonials-section h2 {
        margin-bottom: 20px;
      }

      .testimonials-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        margin-top: 40px;
      }

      .testimonial-card {
        background: white;
        color: var(--text-dark);
        padding: 30px;
        text-align: left;
        border-radius: 5px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }

      .client-info-header {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        gap: 10px;
      }

      .client-avatar {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }

      .client-name {
        font-weight: 700;
        color: var(--primary-blue);
        margin: 0;
        flex-grow: 1;
      }
      .testimonial-card .quote-rating {
        flex-shrink: 0;
      }

      /* --- 7. NEWS & UPDATES SECTION --- */
      .news-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
      }

      .news-item {
        text-align: left;
        border-radius: 5px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        background-color: white;
      }

      .news-item img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        display: block;
      }

      .news-content {
        padding: 15px;
      }

      .news-content h4 {
        font-size: 1.1em;
        margin-bottom: 10px;
        font-weight: 700;
      }

      .news-content p {
        font-size: 0.85em;
        color: #555;
      }

      /* --- 8. FOOTER --- */
      .main-footer {
        padding-top: 40px;
      }

      .footer-content {
        display: grid;
        grid-template-columns: 2fr 1fr 1.5fr;
        gap: 30px;
        padding-bottom: 40px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      }

      .footer-col h3 {
        margin-bottom: 20px;
        font-size: 1.3em;
        font-weight: 700;
        color: var(--accent-orange);
      }

      .footer-col p {
        font-size: 0.9em;
        color: rgba(255, 255, 255, 0.7);
        margin-bottom: 10px;
      }

      .contact-items i {
        color: var(--accent-orange);
        margin-right: 10px;
      }

      .quick-links ul {
        list-style: none;
      }

      .quick-links a {
        color: rgba(255, 255, 255, 0.7);
        text-decoration: none;
        display: block;
        margin-bottom: 10px;
        transition: color 0.3s;
      }
      .quick-links a:hover {
        color: var(--accent-orange);
      }

      .social-links {
        margin-top: 20px;
      }
      .social-links a {
        color: white;
        font-size: 1.2em;
        margin-right: 15px;
      }

      .newsletter-form {
        display: flex;
        margin-top: 15px;
      }
      .newsletter-form input {
        padding: 10px;
        border: none;
        border-radius: 5px 0 0 5px;
        width: 100%;
      }
      .newsletter-form button {
        background-color: var(--accent-orange);
        color: white;
        padding: 10px 15px;
        border: none;
        cursor: pointer;
        border-radius: 0 5px 5px 0;
      }

      .footer-bottom {
        text-align: center;
        padding: 15px 0;
        font-size: 0.8em;
        background-color: var(--primary-blue);
      }

      /* --- RESPONSIVENESS (Mobile First Approach) --- */

      @media (max-width: 992px) {
        /* Navbar collapse */
        .nav-links {
          display: none; /* Simple hiding for tablet/mobile */
        }

        /* Main two-column sections stack vertically */
        .intro-block,
        .quote-image-block {
          flex-direction: column;
          align-items: center;
        }

        /* Multi-column grids adjust */
        .services-grid,
        .projects-grid,
        .news-grid,
        .testimonials-grid,
        .footer-content {
          grid-template-columns: repeat(2, 1fr);
        }

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

      @media (max-width: 576px) {
        /* All multi-column grids collapse to a single column */
        .services-grid,
        .projects-grid,
        .news-grid,
        .testimonials-grid,
        .footer-content,
        .features-grid {
          grid-template-columns: 1fr;
        }

        .hero-content h1 {
          font-size: 2em;
        }
        .intro-text h2 {
          font-size: 2em;
        }

        .navbar {
          flex-wrap: wrap;
          justify-content: center;
        }
        .nav-btn {
          margin-top: 15px;
        }

        /* Ensure footer elements are centered/readable */
        .footer-col {
          text-align: center;
        }
        .footer-content {
          gap: 40px;
        }
        .contact-items {
          text-align: left;
          display: inline-block;
        }
        .newsletter-form {
          max-width: 300px;
          margin: 15px auto;
        }
      }
      /* --- NEW: WordPress Custom Logo Sizing --- */
.logo img {
    /* Set a maximum width for the image to prevent it from dominating the header */
    max-width: 250px; 
    height: auto; 
    display: block; 
}

/* This is the container that WordPress wraps the image in */
.custom-logo-link {
    line-height: 1; /* Ensures image doesn't add extra vertical space */
}

/* Ensure the logo container doesn't have an excessive font size if an image is present */
.logo {
    /* Reset text-based size, relying on the image size */
    font-size: 0; 
    font-weight: normal;
}
.logo a {
    text-decoration: none;
}
/* If the logo text is being used (i.e., no custom logo set): */
.logo:empty, .logo a[href$="#home"] {
    font-size: 1.8em; /* Restore font size for "MOMITY" text fallback */
    font-weight: 900;
}
/* --- NEW MONITY PRO HEADER STYLES --- */

.new-header-pro {
    /* Use the dark blue color from the Monity Pro design */
    background-color: #2b3543; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.pro-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    max-width: 1200px;
    
}

/* 1. Logo and Tagline Group */
.logo-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Specific styling for the logo image within the Pro Header */
.logo-group .logo img {
    max-height: 80px; /* Control image height */
    width: auto;
}

.logo-tagline {
    color: var(--text-light); /* Assuming white/light gray text */
    font-size: 0.8em;
    font-weight: 500;
    letter-spacing: 1px;
    margin: 0;
    padding-top: 15px; /* Adjust vertical alignment relative to the logo image */
}

/* 2. Primary Navigation */
.nav-links-pro {
    list-style: none;
    display: flex;
    margin: 0 auto; /* Center the menu block */
    padding: 0;
}

.nav-links-pro li {
    margin: 0 15px;
    position: relative; /* Needed for dropdown markers */
}

.nav-links-pro li a {
    color: var(--text-light) !important;
    text-decoration: none;
    font-size: 1em;
    font-weight: 600;
    text-transform: uppercase;
    padding: 30px 0; /* Adds height and makes the links easier to click */
    display: block;
}

.nav-links-pro li a:hover,
.nav-links-pro li.current-menu-item a {
    color: var(--accent-orange);
}

/* Dropdown arrow styling (using the existing Font Awesome dependency) */
.nav-links-pro .menu-item-has-children > a::after {
    content: "\f0d7"; /* Font Awesome Chevron Down */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: 5px;
    font-size: 0.7em;
}

/* 3. Utility Group (Icons and Button) */
.utility-group-pro {
    display: flex;
    align-items: center;
    gap: 25px;
}

.nav-icon {
    color: var(--accent-orange);
    font-size: 1.2em;
    text-decoration: none;
    transition: color 0.2s;
}

/* 4. FREE QUOTE Button */
.btn-quote-pro {
    background-color: var(--accent-orange);
    color: #2b3543; /* Dark text on orange button */
    padding: 15px 30px;
    font-weight: 700;
    border-radius: 5px;
    text-transform: uppercase;
}
/* --- STYLES FOR THE MOVED HERO CONTENT BLOCK --- */

.top-content-area {
    padding: 50px 0; /* Add vertical spacing above the intro block */
    background-color: var(--light-bg); /* White background */
}

.hero-content-moved {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-bottom: 50px;
}

.hero-content-moved h1 {
    /* Text color must be dark now, instead of white */
    color: var(--primary-blue);
    font-size: 3.5em;
    margin-bottom: 30px;
    max-width: 800px;
    font-weight: 900;
}

.hero-btn-moved {
    /* Button should be the standard accent color */
    background-color: var(--accent-orange);
    color: white;
    padding: 15px 40px;
    /* Inherits other .btn styles */
}

/* Cleanup: Remove the old styling for the header version */
.header-overlay .hero-content {
    display: none; 
}
/* --- NEW: SLIDER SECTION STYLES (HTML/CSS ONLY) --- */

.hero-slider-section {
    padding: 0; /* Remove top/bottom padding to let the slide fill the area */
    background-color: var(--primary-blue); /* Fallback background */
    overflow: hidden; /* Important for horizontal sliders */
}

.hero-slider-wrapper {
    position: relative;
    height: 450px; /* Set a fixed height for the slider area */
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-items {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    
    /* Initially hide items, JavaScript will handle the visibility/movement */
    display: flex; 
}

.slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0; /* Prevents slides from shrinking */
    position: absolute; /* Stack slides on top of each other */
    top: 0;
    left: 0;
    
    /* Background Image Styling */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Dark Overlay for Readability */
    background-color: rgba(0, 0, 0, 0.4); 
    background-blend-mode: darken; /* Blends the overlay with the image */
    
    /* Initial state: only the active slide is visible */
    opacity: 0;
    z-index: 1;
    transition: opacity 0.5s ease-in-out;
}

.slide.active-slide {
    opacity: 1; /* Make the first slide visible */
    z-index: 2;
}

/* Content inside the slide */
.slide .hero-content-moved {
    /* Use the hero-content styles, but adapt for the dark background */
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
}

.slide .hero-content-moved h1 {
    color: white; /* Text must be white over the dark background image */
    font-size: 3.5em;
    font-weight: 900;
    margin-bottom: 30px;
    max-width: 800px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.slide .hero-btn-moved {
    /* Button should be white with dark text for contrast on the hero area */
    background-color: #f39c12;
    color: var(--primary-blue);
    padding: 15px 40px;
}
.nav-links-pro li {
    /* Existing style: margin: 0 15px; position: relative; */
    position: relative; 
    margin: 0 15px; 
}

/* 2. Target the Submenu (This is typically 'ul.sub-menu' in WordPress) */
.nav-links-pro .sub-menu {
    /* Submenu is absolutely positioned, removing it from the document flow */
    position: absolute;
    top: 100%; /* Positions the submenu directly below the parent link */
    left: 0;
    
    /* Styling */
    background-color: var(--primary-blue); /* Dark background for dropdown */
    min-width: 200px;
    padding: 10px 0;
    margin: 0;
    list-style: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    z-index: 100; /* Ensure it appears over other content */
    
    /* Initially hide the dropdown */
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* 3. Dropdown Links */
.nav-links-pro .sub-menu li {
    margin: 0; /* Remove horizontal margin for vertical list items */
}
.nav-links-pro .sub-menu a {
    color: var(--text-light);
    padding: 10px 20px;
    white-space: nowrap; /* Prevent long titles from wrapping */
    font-weight: 400; /* Lighter font weight for submenu links */
    text-transform: none; /* No uppercase */
}
.nav-links-pro .sub-menu a:hover {
    background-color: var(--accent-blue-light);
    color: var(--accent-orange);
}

/* 4. Display Dropdown on Hover */
/* When the parent <li> is hovered, the immediate child <ul> (.sub-menu) is shown */
.nav-links-pro li:hover > .sub-menu {
    display: block;
    opacity: 1;
}
/* --- 6. TESTIMONIALS SECTION (Monity Pro Slider Style) --- */

.testimonials-section {
    padding: 40px 0;
    /* The dark-bg class sets background-color: var(--primary-blue: #2c3e50); */
}
.testimonials-section h2 {
    color: white; /* Matches the dark background color */
    margin-bottom: 20px;
    font-size: 2.5em; /* Slightly larger heading */
}

.section-tag-testimonial {
    text-align: center;
    color: var(--accent-orange);
    font-weight: 500;
    margin-bottom: 10px;
}

/* 1. Slider Setup (Using Flex to display multiple cards/slides side-by-side) */
.testimonial-slider {
    display: flex; /* Makes slides horizontal (for carousels) */
    gap: 30px; /* Space between the slides/cards */
    overflow: hidden; /* Hide slides that are out of view */
    margin-top: 20px;
    padding: 50px 10px; /* Optional padding for edge visibility */
}

.testimonial-slide {
    flex-shrink: 0; /* Prevents cards from shrinking */
    width: calc(50% - 15px); /* Show two cards at a time (adjust for larger screens) */
    /* If you want to show 3 cards: width: calc(33.333% - 20px); */
}
@media (max-width: 992px) {
    .testimonial-slide {
        width: 100%; /* Show one card per view on smaller screens */
    }
}


/* 1. Corrected Testimonial Card Styling (The White Box with Full Orange Border) */
.quote-box-monity {
    background: white;
    color: var(--text-dark);
    padding: 30px;
    text-align: left;
    
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative; 
    
    /* CORRECTION: Full Orange Border */
    border: 1px solid var(--accent-orange); /* Base border */
    /* Add a box-shadow to simulate the thicker inner/outer orange border effect */
    box-shadow: 0 0 0 4px var(--accent-orange); 
}

/* Speech bubble bottom pointer (CSS triangle) - Keep this as it matches the design */
.quote-box-monity::after {
    content: '';
    position: absolute;
    
    left: 40px; 
    width: 145px;
    height: 90px;
    background: url(https://project112.bpthink.com/wp-content/uploads/2025/11/testimonial-curve.png);
}

/* 2. Corrected Blue Quote Tag (The "99" box) */
.quote-tag-blue {
    /* CORRECTION: Positioned at the exact top-right edge */
    position: absolute;
    top: -1px; /* Align with the top edge */
    right: 0; 
    
    background-color: var(--link-orange); 
    color: white;
    font-size: 1.5em;
    font-weight: 800;
    padding: 5px 15px;
    /* CORRECTION: Sharper top right corner, rounded bottom left */
    border-radius: 0 5px 0 5px;
    z-index: 10;
}

/* 3. Minor Client Info Alignment Correction */
.client-info-header-monity {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;
}
.client-details {
    line-height: 1.2;
}

/* Ensure avatar is perfectly rounded */
.client-info-header-monity .client-avatar {
    border-radius: 50%;
    width: 60px; /* Matching size used in the HTML placeholder */
    height: 60px;
    object-fit: cover;
}

.client-name-monity {
    font-weight: 700;
    color: var(--primary-blue);
    margin: 0;
    font-size: 1.1em;
}
.client-subtitle {
    font-size: 0.9em;
    color: #666;
    margin: 0;
}
.quote-text-monity {
    font-style: italic;
    color: #555;
    margin-top: 15px;
}
.faq-section {
    padding: 80px 0;
    display: flex;
    gap: 60px;
    align-items: flex-start; /* Aligns content to the top */
    background-color: white;
}

.faq-container {
    flex: 1; /* Takes up one column (left side) */
}

.faq-image-container {
    flex: 1; /* Takes up the second column (right side) */
}
.faq-image-container .faq-image {
    width: 100%;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* --- ACCORDION ITEM STYLES --- */

.accordion-item {
    margin-bottom: 20px;
    border-radius: 5px;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Hide the native checkbox input */
.accordion-toggle {
    display: none;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    font-size: 1.1em;
    font-weight: 500;
    color: var(--primary-blue);
    cursor: pointer;
    border: 1px solid #eee; /* Light gray border */
    border-radius: 5px;
    transition: background-color 0.3s;
}

.accordion-header:hover {
    background-color: #f9f9f9;
}

/* Icon Indicator (Plus/Minus) */
.icon-indicator {
    color: var(--link-orange); /* Use a shade of blue for the indicator */
    font-size: 0.8em;
}

/* Content Area */
.accordion-content {
    /* Initially hide and collapse the content */
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    transition: max-height 0.4s ease-out;
}
.accordion-content.open {
    /* Manual class for the initially open item (FAQ 3 in HTML) */
    max-height: 300px; /* Needs to be larger than content height */
    padding: 0 20px 20px; 
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    border-radius: 0 0 5px 5px;
}
.accordion-content p {
    margin: 0;
    padding-top: 10px;
    color: #666;
}

/* --- FUNCTIONALITY: CSS to handle the open state (when input is checked) --- */

/* 1. When checked, open the content */
.accordion-toggle:checked ~ .accordion-content {
    max-height: 300px; /* Expand the content */
    padding: 0 20px 20px;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    border-radius: 0 0 5px 5px;
}

/* 2. When checked, change the header icon from PLUS to MINUS */
.accordion-toggle:checked ~ .accordion-header .icon-indicator i {
    content: "\f068"; /* Change PLUS to MINUS icon (Font Awesome) */
}
.accordion-toggle:checked ~ .accordion-header .icon-indicator i:before {
    content: "\f068"; /* For specific Font Awesome loading */
}

/* 3. Handle PLUS/MINUS Icons */
/* Default icon is PLUS (set in HTML). Need to override the PLUS with MINUS for checked state */
.accordion-toggle:checked ~ .accordion-header .icon-indicator .fa-plus {
    display: none;
}
.accordion-toggle:checked ~ .accordion-header .icon-indicator .fa-minus {
    display: inline-block;
}

/* Default (non-active) state: Hide MINUS icon */
.accordion-header .icon-indicator .fa-minus {
    display: none;
}
/* --- NEW: CALL-TO-ACTION (CTA) BLOCK --- */

.cta-call-section {
    padding: 0; /* Remove padding as the content block handles vertical space */
    background-color: white; 
}

.cta-call-wrapper {
    display: flex;
    align-items: stretch; /* Ensures both sides stretch to the same height */
    overflow: hidden;
    /* Optional: Add a subtle shadow to the whole block if desired */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); 
}

/* 1. Image Container (Left Side) */
.cta-call-image-container {
    flex: 1; /* Takes up approximately 1/3 of the width */
    max-width: 35%; /* Adjust this percentage to fine-tune the image width */
    overflow: hidden;
}

.cta-call-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the container without distortion */
    display: block;
}

/* 2. Content Container (Right Side - Yellow Block) */
.cta-call-content {
    flex: 2; /* Takes up the remaining 2/3 of the width */
    background-color: var(--accent-orange); /* Use your theme's orange/yellow accent color */
    color: white; /* White text for contrast */
    padding: 40px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
}

/* 3. Floating Phone Icon */
.cta-call-icon {
    position: absolute;
    /* Position the icon exactly on the border between the image and content */
    left: -35px; /* Half of the icon's width/height */
    top: 50%;
    transform: translateY(-50%);
    
    width: 70px;
    height: 70px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Icon style */
    font-size: 1.8em;
    color: var(--accent-orange);
    z-index: 2;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* 4. Text Styling */
.cta-call-number {
    color: white;
    font-size: 2.2em;
    font-weight: 700;
    margin: 0 0 10px 0;
}

.cta-call-text {
    font-size: 1.1em;
    line-height: 1.4;
    max-width: 90%;
    margin: 0;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
    .cta-call-wrapper {
        flex-direction: column; /* Stack image and content vertically */
    }
    .cta-call-image-container {
        max-width: 100%; 
        height: 250px; /* Give the image a fixed height on mobile */
    }
    .cta-call-content {
        padding: 40px 30px;
    }
    .cta-call-icon {
        /* Move the icon to the top center of the content block */
        left: 50%;
        top: 0;
        transform: translate(-50%, -50%); /* Center horizontally and move up 50% of its own height */
    }
    .cta-call-number {
        margin-top: 15px; /* Add space for the moved icon */
    }
}
/* --- PROJECTS SLIDER SECTION STYLES --- */

.projects-section {
    padding: 40px 0;
    text-align: center;
}
.projects-section h2 {
    margin-bottom: 40px;
    font-size: 2.5em;
    color: var(--primary-blue);
}

.projects-slider-wrapper {
    /* Create the viewport for the slider */
    overflow: hidden; /* Crucial: Hides images that are outside the current view */
    position: relative;
    padding: 0 10px; /* Optional: small horizontal padding */
}

.projects-track {
    /* This element holds ALL the slides and will be translated (moved) by JavaScript */
    display: flex;
    transition: transform 0.4s ease-in-out; /* Smooth transition when sliding */
    margin: 0 -10px; /* Counteract padding on the wrapper for full width */
}

.project-item {
    /* Setting the width for 4 items per view, plus a small gap */
    width: calc(25% - 20px); 
    margin: 0 10px; /* Horizontal spacing between items */
    flex-shrink: 0; /* Prevents items from shrinking */
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.project-item img {
    width: 100%;
    display: block;
    transition: transform 0.3s ease;
}

.project-item img:hover {
    transform: scale(1.05); /* Subtle hover effect */
}

/* --- Responsive Adjustments for 3 or 2 items on smaller screens --- */
@media (max-width: 1200px) {
    .project-item {
        width: calc(33.333% - 20px); /* Show 3 items */
    }
}
@media (max-width: 768px) {
    .project-item {
        width: calc(50% - 20px); /* Show 2 items */
    }
}
@media (max-width: 576px) {
    .project-item {
        width: calc(100% - 20px); /* Show 1 item */
    }
}
/* --- 1. General Layout and Colors --- */

/* Assumes you are using Bootstrap or a similar grid system for col-lg-3 and col-lg-9 */
.page-content-wrap {
    padding-top: 40px;
    padding-bottom: 60px;
}

/* Background color for the page title/breadcrumbs banner */
.page-header-banner {
    background-color: #f7f7f7; /* Dark blue background */
    color: #fff;
    padding: 20px 0;
    margin-bottom: 30px;
}
.page-header-banner h1.entry-title {
    color: #fff;
    font-size: 32px;
    margin-bottom: 5px;
}
.breadcrumbs-text a, .breadcrumbs-text {
    color: #1a2029;
    font-size: 14px;
    text-transform: uppercase;
}


/* --- 2. Sidebar Styling (Left Column) --- */

.sidebar-service-area {
    padding-right: 25px;
}

/* General widget styling */
.sidebar-service-area .widget {
    margin-bottom: 30px;
    background: #f7f7f7; /* Light gray background for most widgets */
    padding: 15px;
    border: 1px solid #eee;
}

.widget-title-small {
    font-size: 16px;
    font-weight: 700;
    color: #0d1e3d; /* Dark blue title */
    margin-bottom: 15px;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
}

/* Service Menu List */
.service-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.service-menu-list li {
    border-bottom: 1px solid #eee;
}
.service-menu-list li:last-child {
    border-bottom: none;
}
.service-menu-list li a {
    display: block;
    padding: 10px 0;
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
}
.service-menu-list li a:hover,
.service-menu-list li.active-item a {
    color: #ff8c00; /* Primary orange/yellow color */
    font-weight: 600;
}

/* Brochure Widget */
.brochure-widget {
    background-color: #0d1e3d; /* Dark blue background */
    border: none;
}
.brochure-widget .widget-title-small {
    color: #000000 !important;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}
.brochure-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.brochure-widget ul li a {
    display: block;
    background: #ff8c00; /* Orange background for buttons */
    color: #fff;
    text-align: center;
    padding: 10px;
    margin-bottom: 10px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    transition: background-color 0.3s;
}
.brochure-widget ul li a:hover {
    background-color: #e67e22; /* Slightly darker orange */
}
.brochure-widget ul li a i {
    margin-right: 5px;
}

/* Contact Sidebar Widget */
.contact-sidebar-widget {
    background-color: #324467; /* Mid-tone blue/gray */
    color: #fff;
    padding: 20px;
    border: none;
    text-align: center;
}
.contact-item {
    margin-bottom: 15px;
}
.contact-icon {
    display: block;
    font-size: 24px;
    margin-bottom: 5px;
    color: #ff8c00; /* Orange icons */
}
.contact-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #000000;
}
.contact-item p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #000000;
}


/* --- 3. Main Content Styling (Right Column) --- */

.main-service-content img {
    max-width: 100%;
    height: auto;
}

.feature-image-top {
    margin-bottom: 30px;
}

/* Image & Benefits Block (the two-column section with a small image) */
.info-benefits-block {
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 20px;
    border: 1px solid #ddd;
}
.info-benefits-block .image-part {
    text-align: center;
    padding: 20px;
}
.info-benefits-block .benefits-part h3 {
    color: #0d1e3d;
    font-size: 22px;
}
.info-benefits-block .benefits-part ul {
    list-style: none;
    padding-left: 0;
}
.info-benefits-block .benefits-part ul li {
    padding-left: 25px;
    position: relative;
    margin-bottom: 10px;
}
.info-benefits-block .benefits-part ul li:before {
    content: "✓"; /* Checkmark icon */
    color: #ff8c00;
    font-size: 18px;
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Final Q/A Section dividers */
.main-service-content hr {
    margin-top: 30px;
    margin-bottom: 30px;
    border: 0;
    border-top: 1px solid #eee;
}
/* Resetting the main widget container style for the block layout */
.contact-sidebar-widget.block-style {
    background-color: #324467; /* Dark background color */
    color: #fff;
    border: none;
    text-align: left; /* Align text to the left */
}

/* Container for each Call, Email, Location block */
.contact-block-item {
    display: flex; /* Enable Flexbox for side-by-side alignment */
    align-items: center; /* Vertically center the icon and text */
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle divider */
    padding-bottom: 15px;
}

.contact-block-item:last-child {
    margin-bottom: 0;
    border-bottom: none; /* No divider on the last item */
}

/* Icon Styling (The orange square) */
.contact-icon.block-icon {
    /* Large icons need explicit sizing and background */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    background-color: #ff8c00; /* Orange color */
    border-radius: 6px;
    font-size: 24px; /* Size of the emoji/font icon */
    margin-right: 15px;
}

/* Text Details Styling */
.contact-details {
    flex-grow: 1; /* Allow the details block to take up remaining space */
}

.contact-details .contact-label {
    font-size: 14px;
    font-weight: 500;
    color: #ccc;
    text-transform: uppercase;
    line-height: 1; /* Ensure tight spacing */
}

.contact-details p {
    margin: 0;
    font-size: 14px; /* Larger text for visibility */
    color: #fff;
    line-height: 1.2;
}
/* --- 1. General Section Styling --- */

/* Page Banner/Header styles (Similar to service page but ensure it uses the camera background) */
.page-header-banner.contact-banner {
    background-color: #0d1e3d; /* Fallback color for the header/banner */
    background-size: cover;
    background-position: center;
    padding: 100px 0; /* Adjust height as needed */
    color: #fff;
}
.page-header-banner.contact-banner .entry-title {
    color: #fff;
    font-size: 48px;
    font-weight: 700;
}
.page-header-banner.contact-banner .breadcrumbs-text a, 
.page-header-banner.contact-banner .breadcrumbs-text {
    color: #ccc;
    font-size: 14px;
}

/* Subtitle for sections like "GET IN TOUCH" */
.section-subtitle {
    font-size: 14px;
    font-weight: 700;
    color: #ff8c00; /* Orange color */
    margin-bottom: 50px;
    letter-spacing: 2px;
}

/* --- 2. Info Blocks Section (GET IN TOUCH) --- */
.contact-info-blocks {
    padding: 80px 0 60px 0;
    background-color: #f8f8f8; /* Light gray background */
}

.info-block-card {
    background-color: #fff;
    padding: 30px 20px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Soft shadow */
    margin-bottom: 30px;
    transition: all 0.3s ease;
}
.info-block-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.info-icon-circle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #0d1e3d; /* Dark blue background */
    color: #fff;
    font-size: 24px;
    margin-bottom: 15px;
}

.info-block-card h4 {
    font-size: 20px;
    color: #0d1e3d;
    font-weight: 600;
    margin-bottom: 10px;
}

.info-block-card p {
    margin: 0;
    font-size: 16px;
    color: #666;
    line-height: 1.4;
}

/* --- 3. Contact Form Section --- */
.contact-form-section {
    padding: 80px 0;
}

.contact-illustration {
    border-radius: 8px;
}

.contact-form-wrap {
    padding-left: 50px;
}
.form-title {
    font-size: 28px;
    color: #0d1e3d;
    font-weight: 700;
    margin-bottom: 25px;
}

.custom-contact-form input[type="text"],
.custom-contact-form input[type="email"],
.custom-contact-form textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #f9f9f9;
    font-size: 15px;
}

.custom-contact-form textarea {
    resize: none;
}

.send-message-btn {
    background-color: #ff8c00; /* Orange background */
    color: #fff;
    border: none;
    padding: 12px 30px;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    transition: background-color 0.3s;
}
.send-message-btn:hover {
    background-color: #e67e22; /* Darker orange on hover */
}

/* --- 4. Map Section --- */
.contact-map-section {
    width: 100%;
    overflow: hidden;
    padding: 0;
}
/* Responsive iframe for map */
.map-responsive {
    overflow: hidden;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    position: relative;
    height: 0;
}
.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
    border: none;
}
/* --- Hamburger Icon Styling (Desktop: Hidden) --- */
.hamburger-menu-icon {
    display: none; /* Hidden by default */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px 5px;
    z-index: 1001; /* Ensure it's above other elements */
}

.hamburger-menu-icon .line {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #d58e27; /* Icon color */
    margin: 5px 0;
    transition: all 0.3s ease-in-out;
}

/* --- Menu Visibility (Desktop: Visible) --- */
/* Ensure the desktop menu is displayed as it was */
.main-navigation-wrapper {
    display: block; 
}


/* =================================================== */
/* --- MOBILE STYLES (Screen size less than 992px) --- */
/* =================================================== */

@media (max-width: 991.98px) { 

    /* 1. Show the Hamburger Icon */
    .hamburger-menu-icon {
        display: block; 
    }

    /* 2. Hide the Main Menu Links by Default */
    .main-navigation-wrapper {
        position: fixed; /* Fixed position for overlay */
        top: 0;
        right: -300px; /* Slide the menu off-screen to the right */
        width: 300px; /* Width of the mobile menu drawer */
        height: 100%;
        background-color: #1b2530; /* Menu background */
        box-shadow: -2px 0 5px rgba(0,0,0,0.1);
        transition: right 0.3s ease-in-out;
        z-index: 1000;
        padding-top: 60px; /* Space for the header */
    }

    /* 3. State when the menu is OPEN */
    .main-navigation-wrapper.menu-open {
        right: 0; /* Slide the menu into view */
    }

    /* 4. Make the Menu Links Stack Vertically */
    .main-navigation-wrapper .nav-links-pro {
        display: block; /* Change from flex/inline to block */
    }

    .main-navigation-wrapper .nav-links-pro > li {
        display: block;
        border-bottom: 1px solid #eee;
    }

    .main-navigation-wrapper .nav-links-pro > li > a {
        padding: 15px 20px;
        display: block;
        text-align: left;
    }
    
    /* Hide desktop utility items if needed on mobile */
    .utility-group-pro a:not(.hamburger-menu-icon) {
        /* You might hide elements like FREE QUOTE or icons here if they clutter the mobile view */
    }
    /* --- NEW RULE: Hide Shopping Bag Icon --- */
    .utility-group-pro a.nav-icon:not(.search-icon) a.nav-icon search-icon{
        display: none !important; 
    }
    
    
    /* --- NEW RULE: Hide FREE QUOTE Button --- */
    .utility-group-pro .btn-quote-pro {
        display: none !important;
    }
}
@media (max-width: 991.98px) { 
    
    /* Adjust Logo Size for Mobile */
    .logo-group .logo img {
        max-height: 50px; /* Reduced logo height for mobile screens */
        /* You can adjust 50px to whatever height fits best in your mobile header */
    }

    /* Optional: Center the logo on mobile if it's the main focus */
    /* If your header layout changes completely, you might need to adjust the logo-group positioning */
    /*
    .logo-group {
        flex-grow: 1; 
        text-align: center;
    }
    */
}