:root { --primary-color: #B4121B; --dark-bg: #1a1a1a; --medium-bg: #222; --light-text: #ccc; --white-text: #fff; --facebook-blue: #1877F2; }
        * { box-sizing: border-box; }
        .nunito-sans-<uniquifier> {
          font-family: "Nunito Sans", sans-serif;
          font-optical-sizing: auto;
          font-weight: <weight>;
          font-style: normal;
          font-variation-settings:
            "wdth" 100,
            "YTLC" 500;
        }
        
        body { font-family: 'Nunito Sans', sans-serif; margin: 0; line-height: 1.6; color: var(--white-text); background-color: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
        .container { width: 90%; max-width: 1200px; margin: 0 auto; }
        .header { background-color: rgba(0,0,0,0.8); padding: 10px 0; position: relative; border-bottom: 1px solid #333; }
        .header .container { display: flex; justify-content: space-between; align-items: center; }
        .logo { font-size: 1.5em; text-decoration: none; color: var(--white-text); display: flex; align-items: center; }
        .logo img { height: 40px; }
        .main-nav { display: block; }
        .main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 20px; align-items: center; }
        .main-nav a { text-decoration: none; color: var(--white-text); text-transform: uppercase; font-size: 0.9em; transition: color 0.3s; }
        .main-nav a:hover { color: var(--primary-color); }
        .menu-toggle2 { display: none; cursor: pointer; font-size: 1.8em; color: var(--white-text); }
        .social-icons-desktop { display: flex; gap: 20px; align-items: center; margin-left: 20px; }
        .social-icons-desktop a { font-size: 1.2em; }
        .social-icons-mobile { display: none; }
        .social-icons-desktop a[aria-label="Facebook"]:hover, .social-icons-mobile a[aria-label="Facebook"]:hover { color: var(--facebook-blue); }
        .nav-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 1001; }
        .nav-overlay.active { display: block; }
        .content-section { padding: 80px 0; text-align: center; }
        .content-section h2 { font-size: 2.5em; text-align: center; margin-bottom: 50px; text-transform: uppercase; letter-spacing: 2px; font-weight:initial;}
        .dark-bg { background-color: var(--dark-bg); }
        .hero-carousel { position: relative; width: 100%; height: 100vh; overflow: hidden; background-color: #000; }
        .carousel-inner { position: relative; width: 100%; height: 100%; }
        .carousel-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.5s ease-in-out; z-index: 1; }
        .carousel-item.active { opacity: 1; z-index: 2; }
        .carousel-item img { width: 100%; height: 100%; object-fit: cover; filter: brightness(50%); }
        .carousel-caption { position: absolute; top: 75%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: var(--white-text); z-index: 3; width: 80%; max-width: 900px; }
        .carousel-caption blockquote { font-size: 1.7em; margin: 0 0 15px 0; text-shadow: 2px 2px 8px rgba(0,0,0,0.7); font-style: italic; }
        .carousel-caption cite { font-style: normal; display: block; font-size: 1em; color: var(--light-text); }
        .carousel-pagination { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 20px; }
        .carousel-pagination .dot { width: 12px; height: 12px; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; cursor: pointer; transition: background-color 0.3s; }
        .carousel-pagination:hover {color: var(--primary-color);  transition: color 0.3s; }
        .carousel-pagination .dot.active { background-color: var(--white-text); }
        .carousel-control { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: #fff; font-size: 3em; cursor: pointer; z-index: 3; padding: 0 20px; transition: color 0.3s; }
        .carousel-control:hover { color: var(--primary-color); }
        .carousel-control.prev { left: 10px; } 
        .carousel-control.next { right: 10px; }
        .carousel-play-pause { position: absolute; bottom: 20px; right: 20px; background: none; border: none; color: #fff; font-size: 1.5em; cursor: pointer; z-index: 3; }
        .carousel-play-pause:hover { color: var(--facebook-blue); transition: color 0.3s; }
        .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; }
        .service-item { background-color: var(--medium-bg); padding: 30px; text-align: center; border-radius: 8px; transition: transform 0.3s, box-shadow 0.3s; display: flex; flex-direction: column; }
        .service-item:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0,0,0,0.5); }
        .service-item img { max-width: 100%; height: 180px; object-fit: cover; border-radius: 5px; margin-bottom: 20px; }
        .service-item h3 { font-size: 1.5em; color: var(--primary-color); margin-bottom: 15px; }
        .service-item p { color: var(--light-text); margin-bottom: 20px; flex-grow: 1; }
        .service-item .button-group { display: flex; flex-direction: column; gap: 10px; margin-top: auto; }
        .btn {font-family: 'Nunito Sans', sans-serif; font-weight:200; display: inline-block; background-color: var(--primary-color); color: var(--white-text); padding: 12px 25px; text-decoration: none; border-radius: 5px; transition: background-color 0.3s; cursor: pointer; border: none; font-size: 0.9em; text-transform: uppercase; }
        .btn:hover { background-color: #8C0F15; }
        .btn-secondary { background-color: #555; } .btn-secondary:hover { background-color: #444; }
        #about p, #blog p { max-width: 800px; margin: 0 auto 20px auto; text-align: center; line-height: 1.8; color: var(--light-text); }
        #about h3 { text-align: center; color: var(--primary-color); font-size: 1.8em; margin-top: 40px; margin-bottom: 15px; }
        #blog .btn { margin-top: 20px; }
        #partners .partners-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px; margin-top: 30px; }
        #partners .partner-logo { max-width: 150px; cursor: pointer; transition: transform 0.2s; }
        #partners .partner-logo:hover { transform: scale(1.05); }
        #partners .partner-logo img { max-width: 100%; height: auto; }
        #contact .container { display: flex; flex-direction: column; align-items: center; gap: 50px; }
        #contact .contact-details, #contact .contact-form-container { width: 100%; max-width: 700px; text-align: left; }
        #contact .contact-info { margin-top: 20px; }
        #contact .contact-info div { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; color: var(--light-text); }
        #contact .contact-info i { color: var(--primary-color); font-size: 1.2em; width: 20px; text-align: center; }
        #contactForm input, #contactForm textarea { width: 100%; padding: 12px; background-color: #222; border: 1px solid #444; color: #fff; border-radius: 5px; margin-bottom: 15px; }
        footer { background-color: var(--dark-bg); text-align: center; padding: 20px 0; margin-top: 0px; border-top: 1px solid #333; }
        .modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8); justify-content: center; align-items: center; }
        .modal-content { background-color: #fefefe; margin: auto; padding: 30px; border: 1px solid #888; width: 90%; max-width: 600px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); position: relative; text-align: center; color: #333; }
        .modal-content:hover {}
        .modal-content h3 { color: #333; margin-bottom: 20px; font-size: 1.8em; }
        .modal-close-btn { background-color: var(--primary-color); color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 1em; transition: background-color 0.3s; }
        .modal-close-btn:hover { background-color: #8C0F15; }
        .gallery-modal-content { background-color: #161616; color: var(--white-text); max-width: 90vw; min-height: 80vh; display: flex; flex-direction: column; justify-content: flex-start; }
        .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; padding: 20px; overflow-y: auto; overflow-x: hidden; flex-grow: 1; }
        .gallery-thumbnail { cursor: pointer; border: 2px solid var(--primary-color); transition: transform 0.2s; border-radius: 5px; width: 100%; height: auto; aspect-ratio: 16/ 9; object-fit: cover; }
        .gallery-thumbnail:hover { transform: scale(1.05); }
        .lightbox-modal { z-index: 3000; background-color: rgba(0,0,0,0.95); }
        .lightbox-content { background-color: #000; padding: 20px; border-radius: 8px; text-align: left; position: relative; max-width: 95vw; max-height: 95vh; display: flex; flex-direction: column; align-items: center;}
        .lightbox-image { max-width: 100%; max-height: 65vh; display: block; object-fit: contain; }
        .lightbox-caption { color: var(--white-text); padding: 15px 0; width: 100%; max-width: 800px; }
        .lightbox-caption h4 { font-size: 1.5em; margin-bottom: 5px; color: var(--primary-color); }
        .lightbox-caption p { font-size: 1em; color: var(--light-text); margin: 5px 0; }
        #lightboxConceptDescription { font-style: italic; color: #ddd; border-left: 3px solid var(--primary-color); padding-left: 15px; margin-top: 15px; }
        .lightbox-close-btn { position: absolute; top: 15px; right: 25px; color: #fff; font-size: 2.5em; cursor: pointer; z-index: 3002; transition: color 0.3s; }
        .lightbox-close-btn:hover { color: var(--primary-color); }
        .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0,0,0,0.5); color: #fff; border: none; border-radius: 50%; width: 50px; height: 50px; font-size: 1.5em; cursor: pointer; z-index: 3001; transition: background-color 0.3s; display: flex; justify-content: center; align-items: center; }
        .lightbox-nav:hover { background-color: rgba(180, 18, 27, 0.8); }
        .lightbox-nav.prev { left: 15px; } .lightbox-nav.next { right: 15px; }
        .ai-modal-header { display: flex; justify-content: space-between; align-items: center; }
        .ai-modal-content { background-color: #1a1a1a; color: var(--light-text); text-align: left; border: 1px solid var(--primary-color); }
        .ai-modal-content h3 { color: var(--primary-color); }
        .ai-modal-content #aiResponse { background-color: #222; padding: 15px; border-radius: 5px; min-height: 200px; white-space: pre-wrap; line-height: 1.5; font-family: 'Nunito Sans', sans-serif; font-size: 0.95em;}
        .ai-modal-content #aiResponse b, .ai-modal-content #aiResponse strong { color: var(--primary-color); }
        .ai-modal-content #aiResponse ul { padding-left: 20px; margin-top: 10px; }
        .copy-ai-btn { background-color: #555; margin-left: auto; } .copy-ai-btn:hover { background-color: #444; }
        #partnerProjectsModal .modal-content { max-width: 95vw; max-height: 90vh; background-color: #1a1a1a; color: var(--white-text); display: flex; flex-direction: column; }
        #partnerProjectsContainer { flex-grow: 1; overflow-y: auto; text-align: left; }
        .partner-project-item { padding: 20px; border-bottom: 1px solid #333; }
        .partner-project-item:last-child { border-bottom: none; }
        .partner-project-item h4 { color: var(--primary-color); font-size: 1.5em; }
        .project-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 15px 0; }
        .project-gallery-thumbnail { width: 100%; height: 150px; object-fit: cover; border-radius: 5px; cursor: pointer; border: 2px solid transparent; transition: border-color 0.3s; }
        .project-gallery-thumbnail:hover { border-color: var(--primary-color); }
        .project-videos-list { list-style: none; padding: 0; }
        .project-videos-list li { margin-bottom: 10px; }
        .project-videos-list a { color: var(--light-text); text-decoration: none; cursor: pointer; }
        .project-videos-list a:hover { color: var(--primary-color); }
        /* (NEW) Video Lightbox styles */
        .video-lightbox-content { background-color: #000; padding: 0; width: 90vw; max-width: 1120px; aspect-ratio: 1/1; box-shadow: none; border: none; }
        .video-iframe-container { position: relative; width: 100%; height: 100%; }
        .video-iframe-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
        
        
        /* --- NEW PARTNERS SECTION STYLES --- */
        #partners .partners-grid {
            display: flex;
            flex-wrap: wrap; /* Allows items to wrap onto the next line */
            justify-content: center; /* Centers the items horizontally */
            gap: 30px; /* Space between partner items */
        }
        
        .partner-item {
            position: relative;
            width: 200px;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--medium-bg);
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
        }
        
        .partner-item img {
            max-width: 80%;
            max-height: 80%;
            transition: transform 0.3s ease;
        }
        
        .partner-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.85);
            color: #fff;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            opacity: 0; /* Hidden by default */
            transition: opacity 0.3s ease;
            padding: 10px;
            box-sizing: border-box;
        }
        
        .partner-overlay h4 {
            margin: 0 0 15px 0;
            color: var(--primary-color);
        }
        
        .partner-overlay .partner-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
            width: 90%;
        }
        
        .partner-item:hover .partner-overlay {
            opacity: 1; /* Show the overlay on hover */
        }
        
        .partner-item:hover img {
            transform: scale(0.9); /* Slightly shrink the logo on hover to make room for overlay */
            filter: blur(2px);
        }
        #myBtn {
          display: none; /* Hidden by default */
          position: fixed; /* Fixed/sticky position */
          bottom: 20px; /* Place the button at the bottom of the page */
          right: 30px; /* Place the button 30px from the right */
          z-index: 99; /* Make sure it does not overlap */
          border: none; /* Remove borders */
          outline: none; /* Remove outline */
          background-color: red; /* Set a background color */
          color: white; /* Text color */
          cursor: pointer; /* Add a mouse pointer on hover */
          padding: 15px; /* Some padding */
          border-radius: 10px; /* Rounded corners */
          font-size: 18px; /* Increase font size */
        }
        
        html {
          scroll-behavior: smooth;
        }
        
        
        
        

        @media (max-width: 1080px) { 
            
            .hero-carousel { height: auto; aspect-ratio: 16 / 9; } 
            .carousel-caption {top: 75%;} 
            .btn {font-family: 'Nunito Sans', sans-serif; font-weight:200;}
        }
        
        @media (max-width: 768px) {
            .menu-toggle2 { display: block; position: relative; z-index: 1003; } /* Show the hamburger button on mobile */
            .main-nav { position: fixed; top: 0; right: -100%; width: 100%; height: 100%; background-color: black; box-shadow: -5px 0 15px rgba(0,0,0,0.5); transition: right 0.3s ease-in-out; z-index: 1002; padding-top: 80px; display: flex; flex-direction: column; justify-content: flex-start; }
            .main-nav.active { right: 0; }
            .main-nav ul { flex-direction: column; align-items: center; padding: 0; width: 100%; }
            .main-nav ul li { margin: 0; width: 100%; text-align: center; border-bottom: 1px solid #444; }
            .main-nav ul li:first-child { border-top: 1px solid #444; }
            .main-nav a { font-size: 1.2em; padding: 15px 30px; display: block; width: 100%; }
            .hero-carousel { height: auto; aspect-ratio: 16 / 9; }
            .social-icons-desktop { display: none; }
            .social-icons-mobile { display: flex; justify-content: center; gap: 20px; padding: 30px; margin-top: auto; }
            .social-icons-mobile a { color: var(--white-text); font-size: 1.5em; text-align: center; }
            .content-section { padding: 60px 0; }
            .content-section h2 { font-size: 2em; font-weight: initial; }
            .carousel-caption  {top: 65%; width: 90%; } /* ADJUSTED: Matched desktop top value */
            .carousel-caption blockquote {
                font-size: 0.9em; /* ADJUSTED: Font size for mobile */
                margin: 0 0 8px 0;
            }
            .carousel-caption cite { font-size: 0.8em; } /* Optional: Adjusted for proportion */
            .carousel-control { display: none; }
            .carousel-pagination {
                bottom: 10px;
                gap: 25px; /* ADDED: Increased gap for mobile */
            }
           /* #partners .partners-grid { display: block; white-space: nowrap; overflow-x: auto; padding-bottom: 20px; -webkit-overflow-scrolling: touch; }
            #partners .partner-logo { display: inline-block; vertical-align: middle; margin-right: 25px; width: 120px; } */
        }