@media (max-width: 576px) {
    .whatsapp_float {
        width: 50px;
        height: 50px;
        bottom: 15px;
        right: 15px;
        font-size: 18px;
    }
}

/* ============================================ */
/* =========== Typography & Spacing =========== */
/* ============================================ */

/* Example: scale down .fs-7 and .fs-8 on smaller screens */
@media (max-width: 576px) {
    .fs-6 {
        font-size: 0.85rem !important;
    }
    .fs-7 {
        font-size: 0.8rem !important;
    }
    .fs-8 {
        font-size: 0.75rem !important;
    }
}


/* Reduce padding/margins on some sections at mobile widths */
@media (max-width: 768px) {
    .contact .container {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }
    main {
        margin-top: 0px !important;
    }
    main .download-btn,
    .download-app .download-btn {
        width: 120px !important;
    }
    main .download-btn img,
    .download-app .download-btn img {
        width: 120px !important;
    }
    /* .main_section .row > [class^="col-"] {
    margin-bottom: 1rem;
  } */
}

/* ============================================ */
/* ========= NAVBAR / TABS Section ============ */
/* ============================================ */

/* Ensure navbar toggler icon is visible on smaller screens if needed */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg ..."); /* or let Bootstrap handle */
}

/* ============================================ */
/* ============ .contact Section ============== */
/* ============================================ */

/* Control form spacing on mobile */
@media (max-width: 576px) {
    .contact .form-floating label {
        font-size: 0.85rem !important;
    }
    .contact .form-control {
        padding: 0.75rem 1rem;
    }
}