html {
  font-size: 14px;
}

* {
    font-family: Verdana
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 0;
}

/* ===== MOBILE RESPONSIVE FIXES ===== */

/* Navbar logo */
.navbar-brand-logo {
    border: none;
    height: auto;
    max-height: 100px;
    width: auto;
    max-width: 320px;
    display: block;
}

@media (max-width: 991.98px) {
    .navbar-brand-logo {
        max-height: 60px;
        max-width: 200px;
    }
}

@media (max-width: 575.98px) {
    .navbar-brand-logo {
        max-height: 46px;
        max-width: 150px;
    }
}

/* Hero heading - responsive font size */
.hero-header h1 {
    font-size: clamp(1.6rem, 7vw, 5rem);
}

/* Hero buttons - stack on very small screens */
@media (max-width: 575.98px) {
    .hero-header .pt-2.d-flex {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .hero-header .pt-2.d-flex .btn,
    .hero-header .pt-2.d-flex .position-relative {
        width: 100% !important;
        text-align: center;
    }
    .hero-header .pt-2.d-flex .position-relative a.btn {
        width: 100%;
    }
}

/* About section image - responsive min-height */
.about-img-col {
    min-height: 300px;
}

@media (max-width: 575.98px) {
    .about-img-col {
        min-height: 220px;
    }
}

/* Footer social links - wrap on small screens */
.footer-social-links {
    flex-wrap: wrap;
    gap: 8px !important;
}

/* Map Identity section - responsive padding */
@media (max-width: 991.98px) {
    .map-identity-section {
        padding: 44px 0 !important;
    }
    .map-img-wrapper img {
        height: 280px !important;
    }
    .mid-hero {
        padding: 50px 0 40px !important;
    }
}

@media (max-width: 575.98px) {
    .map-identity-section {
        padding: 28px 0 !important;
    }
    .map-img-wrapper img {
        height: 210px !important;
    }
    .mid-hero {
        padding: 36px 0 28px !important;
    }
    .mid-hero h1.display-4 {
        font-size: clamp(1.6rem, 8vw, 3.5rem);
    }
}

/* HomeContact heading */
@media (max-width: 767.98px) {
    .container-fluid.bg-primary h1.display-4 {
        font-size: clamp(1.4rem, 6vw, 3.5rem);
    }
}

/* Category & Detail hero padding */
@media (max-width: 575.98px) {
    .breadcrumb {
        font-size: 0.82rem;
    }
}

/* Carousel - responsive fix for small screens */
@media (max-width: 575.98px) {
    .carousel-inner {
        height: 220px !important;
    }
}

/* HomeCategoryList carousel item image */
@media (max-width: 767.98px) {
    .team-item .img-fluid.h-100 {
        min-height: 200px !important;
    }
}

/* General overflow prevention */
@media (max-width: 767.98px) {
    .container-fluid {
        overflow-x: hidden;
    }
}

/* Hero section padding on mobile */
@media (max-width: 767.98px) {
    .hero-header.py-5 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    .hero-header .container.py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
}

/* Topbar: hide on small screens (already d-none d-lg-block in template) */

/* Login page - responsive card */
@media (max-width: 575.98px) {
    .col-md-5 {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* HomeAbout stats circles - ensure they don't overflow */
@media (max-width: 575.98px) {
    .bg-light.text-center.rounded-circle.py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    .bg-light.text-center.rounded-circle.py-4 i {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
    }
    .bg-light.text-center.rounded-circle.py-4 h6 {
        font-size: 0.75rem;
    }
}