 <style>
    :root {
        --accent-color: #FF6B35;
        --accent-hover: #e65c2b;
        --primary-color: #e8f7f5ff;
        --header-text: #003731;
        --text-on-accent: #ffffff;
    }
    
    .header-light {
        background: var(--primary-color) !important;
    }
    
    header.header-light.smaller {
        background: var(--primary-color) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    /* Logo size adjustments */
    #logo img.logo-main,
    #logo img.logo-scroll,
    #logo img.logo-mobile {
        max-height: 80px; /* Increased from 60px */
        width: auto;
        transition: all 0.3s ease;
    }
    /* Navigation link styles */
    .header-light #mainmenu > li > a {
        color: var(--header-text) !important;
        font-size: 20px;
        font-weight: 800;
        /* padding: 10px 20px; */
        transition: all 0.3s ease;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }
    
    .header-light #mainmenu > li > a:hover,
    .header-light #mainmenu > li > a.active {
        color: var(--accent-color) !important;
    }
    
    .header-light #mainmenu > li > a:hover {
        opacity: 0.8; /* Slight transparency on hover */
    }
    /* Schedule Visit button */
    .header-light .menu_side_area .btn-main,
    .header-light .menu_side_area .-btn-main {
        background: var(--accent-color) !important;
        color: var(--text-on-accent) !important;
        font-size: 16px;
        padding: 12px 30px;
        font-weight: 600;
        border-radius: 30px;
        border: none;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        transition: all 0.3s ease;
    }
    
    .header-light .menu_side_area .btn-main:hover,
    .header-light .menu_side_area .-btn-main:hover {
        background: var(--accent-hover) !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
    }
    /* Toggle button color */
    #menu-btn, #menu-btn:before, #menu-btn:after {
        background: #ffffff !important;
    }
    /* Gallery Section - Responsive Styles */
    #services-carousel {
        padding: 10px 0;
    }
    
    .gallery-item {
        height: 100%;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    
    .gallery-item:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }
    
    .gallery-image-container {
        position: relative;
        width: 100%;
        height: 100%;
        min-height: 250px;
    }
    
    .gallery-overlay {
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 55, 49, 0.85);
        opacity: 0;
        transition: all 0.3s ease;
        z-index: 2;
    }
    
    .gallery-item:hover .gallery-overlay {
        opacity: 1;
    }
    
    .gallery-overlay i {
        transform: scale(0.8);
        transition: transform 0.3s ease;
    }
    
    .gallery-item:hover .gallery-overlay i {
        transform: scale(1);
    }
    
    .gallery-overlay h5 {
        transform: translateY(20px);
        transition: transform 0.3s ease;
    }
    
    .gallery-item:hover .gallery-overlay h5 {
        transform: translateY(0);
    }
    
    .gallery-overlay .badge {
        opacity: 0;
        transform: translateY(10px);
        transition: all 0.3s ease 0.1s;
    }
    
    .gallery-item:hover .gallery-overlay .badge {
        opacity: 1;
        transform: translateY(0);
    }
    
    /* Owl Carousel Navigation */
    .de-custom-nav {
        position: relative;
        z-index: 10;
    }
    
    .de-custom-nav .d-prev,
    .de-custom-nav .d-next {
        width: 40px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: #ffffff;
        color: #003731;
        border-radius: 50%;
        margin: 0 5px;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    .de-custom-nav .d-prev:hover,
    .de-custom-nav .d-next:hover {
        background: #003731;
        color: #ffffff;
        transform: translateY(-2px);
    }
    
    /* Responsive Adjustments */
    @media (max-width: 991.98px) {
        .gallery-image-container {
            min-height: 200px;
        }
        
        .gallery-overlay h5 {
            font-size: 1rem;
        }
    }
    
    @media (max-width: 767.98px) {
        .gallery-overlay {
            padding: 15px !important;
        }
        
        .gallery-overlay i {
            font-size: 1.5rem !important;
        }
    }
    
    @media (max-width: 575.98px) {
        .gallery-image-container {
            min-height: 180px;
        }
        
        .gallery-overlay h5 {
            font-size: 0.9rem;
            margin-bottom: 5px !important;
        }
        
        .gallery-overlay .badge {
            font-size: 0.7rem;
            padding: 3px 8px;
        }
    }
 </style>
 <header class="header-light">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="de-flex">
                        <div class="de-flex-col">
                            <!-- logo begin -->
                            <div id="logo">
                                <a href="index.php">
                                    <img class="logo-main" src="images/logo3.png" alt="" >
                                    <img class="logo-scroll" src="images/logo3.png" alt="" >
                                    <img class="logo-mobile" src="images/logo3.png" alt="" >
                                </a>
                            </div>
                            <!-- logo close -->
                        </div>

                        <div class="de-flex-col">
                            <div class="de-flex-col header-col-mid">
                                <ul id="mainmenu">
                                    <li><a class="menu-item" href="index.php">Home</a> </li>
                                    <li><a class="menu-item" href="about.php">About</a></li>
                                    <li><a class="menu-item" href="gallery.php">Gallery</a></li>
                                    <li><a class="menu-item" href="our_projects.php">Our Projects</a></li>
                                    <li><a class="menu-item" href="contact.php">Contact</a></li>
                                </ul>
                            </div>
                        </div>

                        <div class="de-flex-col">
                            <div class="menu_side_area">
                                <a href="contact.php" class="btn-main fx-slide"><span>Schedule Visit</span></a>
                                <span id="menu-btn"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>