/* Custom Header & Logo Responsiveness */

/* --- Desktop --- */
header {
    height: 130px !important;
    /* Increased height to fit larger logo + spacing */
}

header #logo img {
    max-height: 120px;
    /* Increased Size */
    width: auto !important;
    /* Maintain aspect ratio */
    margin-top: 10px;
    /* Added space on top */
}

/* Ensure Logo-2 (Dark version usually) behaves same */
header .logo-2 {
    max-height: 120px;
    width: auto !important;
}

/* --- Brand Contact Button --- */
.btn-custom-header {
    background-color: #F28C28;
    /* Brand Orange */
    color: #fff !important;
    /* Force white text */
    padding: 10px 30px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(242, 140, 40, 0.3);
    /* Orange glow */
    display: inline-block;
    border: 2px solid #F28C28;
    line-height: normal;
}

.btn-custom-header:hover {
    background-color: transparent;
    color: #F28C28 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(242, 140, 40, 0.5);
}

/* --- Mobile / Tablet (Below 992px) --- */
@media (max-width: 992px) {
    header {
        height: 80px !important;
        /* Increased height */
        background: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    }

    header #logo {
        margin-top: 10px;
        /* Slight adjust for vertical center */
    }

    header #logo img {
        max-height: 60px;
        /* Larger mobile logo */
        margin-top: 0 !important;
        /* Remove top spacing on mobile */
    }

    header .logo-2 {
        max-height: 60px;
    }

    /* Burger Menu Alignment */
    #menu-btn {
        top: 25px;
    }

    /* Adjust top padding helper */
    .sm-pt10 {
        padding-top: 5px !important;
    }

    /* Hide the button on mobile if needed, or style it smaller */
    .btn-custom-header {
        display: none;
        /* Usually hidden on mobile in this template structure */
    }
}

/* --- Extra Small Mobile (Below 480px) --- */
@media (max-width: 480px) {
    header #logo img {
        max-height: 55px;
    }
}