@media (max-width: 767px) {
body{
    margin-top: 40px;
}
    /* header-section */
    .header-section {
        display: none;
    }

    /* mini-head */
    .mini-head-logo{
    height: 20px;
    width: auto;
}
    .mini-head-section {
        position: fixed;
        top: 0 !important;
        transition: none !important;
        display: flex !important;
        padding: 15px 10px;
    }

    .header-divider {
        display: none;
    }

    .header-top-option.b {
        display: none;
    }



    .login {
        width: 15px;
    }

    .menu-toggle,
    .header-top-option:first-child {
        font-size: 0;
    }

    .menu-toggle img,
    .header-top-option:first-child img {
        width: 20px;
        height: auto;
        padding: 0;
    }

    .menu-panel {
        width: 100%;
        padding: 30px 15px;
        box-sizing: border-box;
    }

    /* main-body */
    .main-body {
        padding: 0px 10px;
    }

    .header-divider-h {
        display: none;
    }

    .two-section {
        display: block;
    }

    .two-section-l {
        width: 100%;
    }

    .two-section-s {
        width: 100%;
    }

    .two-grid-section {
        display: block;
        padding: 20px 0px;
    }

    .two-grid {
        width: 100%;
    }

    .main-head {
        font-size: 30px;
        padding-bottom: 5px;
        line-height: 2rem;
    }

    .mini-head-n {
        font-size: 16px;
        padding-bottom: 15px;
        line-height: 1.2rem;
    }

    .topic {
        font-size: 16px;
        padding-bottom: 5px;
    }

    .mini-head-b {
        font-size: 16px;
        line-height: 1.2rem;
    }

    .card-deck-section {
        padding-bottom: 10px;
        gap: 5px;
        display: block;
    }

    .card-deck {
        width: 100%;
    }

    .three-grid-section {
        display: block;
        gap: 5px;
        padding: 20px 0px;
    }

    .three-grid {
        width: 100%;
    }

    /* curosel-section */
    .curosel-arrow {
        width: 15px;
        padding: 10px;
    }

    .curosel-grid-section {
        gap: 20px;
    }

    .curosel-grid {
        flex: 0 0 50%;

        height: auto;
    }

    .curosel-grid-section::before,
    .curosel-grid-section::after {
        display: none;
    }

    .two-section-s .vertical-divider {
        margin: 10px 0px;
    }

    .four-grid-section {
        display: block;
    }

    .four-grid {
        width: 100%;
        display: block;
    }

    .profile-section {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .ad-section {
        padding: 10px 0;
    }

    .ad {
        width: 100%;
        height: auto;
    }

    .number-section {
        display: block;
    }

    .number-grid {
        width: 100%;
    }

    .number {
        font-size: 35px;
    }

    /* footer */
    .footer {
        padding: 30px 20px;
    }

    .footer-top {
        flex-direction: column;
        align-items: center;
        /* center-align items */
        gap: 20px;
        text-align: center;
        /* ensures text like "Back to top" is centered */
    }

    .logo-footer {
        height: 25px;
        width: auto;
    }

    .back-to-top {
        font-size: 18px;
    }

    .arrow-up {
        width: 20px;
        height: 20px;
        font-size: 14px;
    }

    .footer-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
    }

    .footer-links-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;

    }

    .footer-links {
        gap: 12px;
        flex: 1;
        min-width: 140px;
        /* ensures responsiveness */
    }

    .footer-links a {
        font-size: 18px;
    }

    .white-vertical-divider {
        display: none;
    }

    .subscription-section {
        text-align: center;
        width: 100%;
    }

    .subscription-text {
        font-size: 14px;
        text-align: center;
    }

    .subscribe-btn {
        width: 100%;
        font-size: 16px;
        padding: 10px;
    }

    .app-preview {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
    }

    .app-store-btn {
        width: 120px;
        height: 38px;
    }

    .app-downloads {
        gap: 10px;
        flex-wrap: wrap;
    }

    .social-links {
        flex-wrap: wrap;
        gap: 5px;
    }

    .footer-icon {
        width: 25px;
        height: 25px;
    }

    .footer-bottom {
        font-size: 14px;
        text-align: center;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {

    /* Header adjustments */
    .header-section {
        padding: 20px 10px;
        gap: 20px;
    }

    .header-top-option,
    .international {
        font-size: 16px;
    }

    .logo {
        height: 40px;
    }

    .gif {
        height: 45px;
    }

    .star-section {
        font-size: 16px;
        padding: 8px 12px;
    }

    /* Main content adjustments */
    .main-body {
        padding: 0 30px;
    }

    .main-head {
        font-size: 28px;
    }

    .mini-head-n,
    .mini-head-b,
    .topic {
        font-size: 18px;
    }

    .two-section {
        flex-direction: column;
    }

    .two-section-l,
    .two-section-s {
        width: 100%;
    }

    .header-divider-h {
        display: none;
    }

    .two-grid-section {
        flex-direction: column;
        gap: 20px;
        padding: 20px 0;
    }

    .two-grid,
    .card-deck {
        width: 100%;
    }

    .img-wrap {
        height: 200px;
    }

    /* Carousel adjustments */
    .curosel-grid {
        flex: 0 0 calc((100% - 3 * 30px) / 4);
        /* Show 4 items */
    }

    /* Four column sections */
    .four-grid-section {
        flex-wrap: wrap;
    }

    .four-grid {
        width: calc(50% - 15px);
        /* 2 columns */
        margin-bottom: 20px;
    }

    .ad-section {
        padding: 10px 0;
    }

    .ad {
        width: 100%;
        height: auto;
    }

    /* Footer adjustments */
    .footer {
        padding: 30px;
    }

    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .white-vertical-divider {
        display: none;
    }

    .app-preview {
        width: 100%;
        max-width: 400px;
    }

    /* Hide some elements */
    .header-grid-bottom-category {
        display: none;
    }

    .menu-toggle {
        display: flex !important;
    }

    /* Mini header adjustments */
    .mini-head-section {
        padding: 20px 30px;
    }

    /* Number section adjustments */
    .number-section {
        flex-direction: column;
        gap: 15px;
    }

    .number-grid {
        width: 100%;
    }

    .number {
        font-size: 40px;
    }
}

@media (min-width: 992px) and (max-width: 1200px) {}

@media (min-width: 1201px) and (max-width: 1400px) {}