@media (max-width: 1024px) {
    .cards .row {
        width: 100%;
    }
}
@media (max-width: 991px) {
    header#home {
        min-height: auto;
    }
    #home .caption {
        width: 90%;
    }
    .info-box {
        justify-content: start;
    }
    .card-item {
        width: calc(100% / 2 - 20px);
    }
    #tiers {
        margin-top: 0;
    }
}
@media (max-width: 768px) {
    .cards .row>.col-md-4 {
        margin-top: 100px;
    }
    .benfits .box {
        height: 100%;
    }
    .cards {
        margin-top: 0;
    }
    .cta-btn {
        margin-top: 0;
    }
    .support-form .main-btn {
        padding: 8px 20px !important;
        font-size: clamp(13px, 2vw, 20px);
    }
    .card-item {
        width: calc(100% / 1 - 20px);
    }
    section.space {
        padding: 90px 0;
    }

    /* Section Tiers (award-card) */
    .tiers .cards {
        display: none;
    }
    .tiers .stacking-container {
        display: block;
    }
    .award-card {
        width: 100%;
        margin: 70px auto 0;
        background-color: var(--white-color);
    }
    .stacking-container {
        min-height: 300vh;
        scrollbar-width: none;
    }
    section.my-card  {
        position: sticky;
    }
    section.my-card:nth-child(1) {
        top: 120px;
        z-index: 1;
    }
    section.my-card:nth-child(2) {
        top: 120px;
        z-index: 2;
    }
    section.my-card:nth-child(3) {
        top: 120px;
        z-index: 3;
    }


    main {
        overflow: visible;
    }


    .tiers::after,
    .tiers::before,
    #benefits::before,
    #support::before {
        display: none;
    }
}
@media (max-width: 576px) {
    .hero .caption p {
        width: 100%;
    }
    .cards .row {
        width: 100%;
    }
    .features {
        flex-direction: column;
        justify-content: start;
        align-items: start;
        width: 50%;
        margin-inline: auto;
    }
    .hero .caption::before,
    .hero .caption::after {
        width: 10px;
        height: 10px;
    }
    .hero .caption::before {
        top: 15%;
        right: -20px;
    }
    .hero .caption::after {
        bottom: 0;
        left: -5%;
    }
    #home .image-banner .image {
        height: 300px;
    }
    #home .image-banner .owl-dot {
        width: 6px;
        height: 6px;
    }
}
@media (max-width: 475px) {
    .hala-cta h2 {
        font-size: 20px;
    }
    .features {
        width: 65%;
    }
    #home .image-banner .image {
        height: 200px;
    }
}