:root { --teal:#4cb7b8; --blue:#4f79a7; }
.topbar { font-size:.85rem; }
.hero { min-height: 60vh; }
.hero-img { height: 60vh; object-fit: cover; filter: brightness(.6); }
.hero-overlay { position:absolute; inset:0; }
.bg-teal { background: var(--teal); }
.bg-blue { background: var(--blue); }
.newsletter { background: #a9d5d6; }


/* ===== NAVBAR HEIGHT FIX ===== */
.navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    min-height: 70px !important; /* overall navbar height for desktop */
    display: flex;
    align-items: center;
}

/* consistent brand area */
.navbar-brand {
    height: 70px; /* same as navbar */
    display: flex;
    align-items: center;
    padding: 0 !important;
}

/* logo styling */
.logo-img {
    height: 140px; /* desktop logo size */
    width: auto;
    object-fit: contain;
    display: block;
    max-height: 100%;
}

/* ===== RESPONSIVE MEDIA QUERY ===== */
@media (max-width: 768px) {
    .navbar {
        min-height: 70px !important; /* reduce navbar height on tablet/mobile */
    }

    .navbar-brand {
        height: 70px;
    }

    .logo-img {
        height: 145px; /* smaller logo for mobile */
    }
}

@media (max-width: 480px) {
    .navbar {
        min-height: 70px !important;
    }

    .navbar-brand {
        height: 55px;
    }

    .logo-img {
        height: 100px;
    }
}

.hero-img {
    height: 50vh;
    object-fit: cover;
    filter: brightness(0.7);
}

/* General service block spacing */
.service-block {
    margin-bottom: 2rem;
    overflow: hidden;
}

    /* Service images: scaled and consistent */
    .service-block img {
        width: 100%;
        height: 400px; /* Adjust height here */
        object-fit: cover;
        display: block;
    }

/* Adjust background sections */
.bg-teal {
    background-color: #4cb7b8 !important;
}

.bg-blue {
    background-color: #4f79a7 !important;
}

/* Ensure padding doesn't touch edges */
.service-block .col-md-6.p-5 {
    padding: 3rem !important;
}

/* Mobile optimization */
@media (max-width: 768px) {
    .service-block img {
        height: 250px;
    }

    .service-block .col-md-6.p-5 {
        padding: 1.5rem !important;
    }
}