/* --- Exact Design as per Image --- */

/* 1. Top Blue Bar Styling */
.topbar {
    background-color: #2b3990 !important; /* Professional Dark Blue */
    /* padding: 8px 0; */
    color: #ffffff !important;
}

.info-item, .info-item a {
    color: #ffffff !important;
    font-size: 14px;
    text-decoration: none;
    margin-right: 15px;
}

/* 2. Right Side Red Contact Box */
.request-quote {
    background-color: #ed1c24 !important; /* Bright Red */
    padding: 10px 20px;
    /* Aligning with topbar height */
}

.request-quote a {
    color: #ffffff !important;
    font-size: 24px !important;
    font-weight: bold;
    text-decoration: none;
}

/* 3. Main Navigation Menu (White Background) */
.navbar-main {
    /* background-color: #ffffff !important; */
    border-bottom: 2px solid #f1f1f1;
    
}

.navbar-nav > li > a {
    color: #333 !important; /* Dark Grey Text */
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 20px 10px !important;
    height: 80px !important;
    margin-top: 10px !important;
    text-transform: uppercase;
}

/* Hover effect for Menu */
.navbar-nav > li > a:hover {
    color: #ed1c24 !important; /* Red on hover */
}

/* --- Hover Effect for Topbar Links (Email & Call) --- */


.info-item a, .info-item {
    transition: all 0.3s ease-in-out !important;
}


.info-item a:hover {
    color: #f3a530 !important; 
    text-decoration: none !important; 
}


.info-item:hover i {
    color: #ed1c24 !important;
}

/* Logo Sizing */
.navbar-brand img {
    height: 70px !important;
    width: auto;
    margin-top: -10px;
}

/* 4. Responsive Media Queries */

/* For Desktop - Push content down to avoid overlap */
@media (min-width: 992px) {
    body {
        padding-top: 140px; 
    }
}

/* For Mobile - Stack elements nicely */
@media (max-width: 991px) {
    .topbar {
        text-align: center;
    }
    .info-item {
        display: block;
        margin: 5px 0;
    }
    .request-quote {
        text-align: center;
        margin: 5px 0;
        float: none !important;
    }
    body {
        padding-top: 100px;
    }
}

@media (max-width: 991px) {

    .navbar-brand {
        height: 70px !important;
        line-height: normal !important;
        padding-left: 15px !important;
        display: flex;
        align-items: center;
    }

    .navbar-brand img {
        height: 50px !important;
        width: auto;
    }

    .navbar-toggle {
        padding: 19px 10px !important;
    }

    /* @media (max-width: 991px) {
    .mobile-img {
         width: 100% !important;
        height: auto !important; 
        object-fit: fixed !important;
    }
} */
}