.flex-col-programe {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    position: relative;
    padding: 0 10vw;
}

.programs-box {
    width: 70px;
    height: 10px;
    background-color: #FF0000;
}

.programs-cards {
    display: flex;
    margin-top: 2rem;
    color: #fff;
    flex-wrap: wrap;
    /* Allow cards to wrap to the next line */
    gap: 1.8rem;
    /* Adjust gap for smaller screens */
    justify-content: space-between;
    /* Center the cards on smaller screens */
}

.circle {
    position: absolute;
    width: 18px;
    height: 12px;
    background-color: #fff;
    border-radius: 100%;
    top: 8px;
    left: 49.5%;
    transform: translateX(-50%);

}

.programs-card {
    margin-top: 2rem;
    position: relative;
    padding: 1.5rem 0.5rem;
    width: calc(100% / 3 - 1.2rem);
    /* Adjust for desktop (4 cards per row) */
    box-sizing: border-box;
    /* Include padding in width */
    text-align: center;
    border-radius: 8px;
    /* Add rounded corners for better visuals */
}


.card-color1 {
    background-color: #3077E3;
}

.card-color2 {
    background-color: #48B380;
}

.card-color3 {
    background-color: #F97D97;
}

.card-color4 {
    background-color: #AB6ADA;
}

.card-color5 {
    background-color: #FF9F43;
    /* Orange */
}

.card-color6 {
    background-color: #00C9A7;
    /* Teal */
}

/* Handle styling */
.handle {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.handle div {
    position: relative;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    height: 10px;
    width: 60px;
    border-radius: 20px;
    background-color: #592506;
}

.rotate1 {
    rotate: 9deg;
}

.rotate2 {
    rotate: -9deg;
}



.rope-handle {
    top: -70px !important;
}

.handle img {
    position: relative;
    object-fit: cover;
    top: -70px;
    z-index: -1;
    height: 50px;
    width: 26px;
}

.program-card-content {
    margin-top: -60px;
}

.program-card-content h3 {
    font-family: "Kalam", serif;
    font-size: 32px;
    font-weight: 500;
}

.program-card-content p {
    font-size: 20px;
    font-weight: 300;
}


/* Media Queries */
@media (max-width: 1120px) {
    .flex-col-programe {
        padding: 0 7vw;
    }

    .program-wraper {
        padding: 0 2rem;
    }

    .programs-card {
        width: calc(100% / 2 - 2rem);
        /* 2 cards per row */
    }

    .programs-cards {
        gap: 2rem;
        justify-content: space-between;
    }
}

@media (max-width: 768px) {

    .programs-cards {
        gap: 2rem;
        /* Adjust gap for smaller screens */
    }

    .flex-col-programe {
        padding: 0 2vw;
    }

    .programs-card {
        width: calc(100% / 2 - 1rem);
        /* 2 cards per row */
        margin-bottom: 1.5rem;
    }
}


@media (max-width: 580px) {
    .program-card-content h3 {
        font-size: 25px;
    }

    .program-card-content p {
        font-size: 16px;
    }

    .programs-card {
        width: calc(100% / 2 - 0.5rem);
        /* 2 cards per row */
        margin-bottom: 1.5rem;
    }

    .programs-cards {
        gap: 1rem;
        /* Adjust gap for smaller screens */
    }
}

@media (max-width: 480px) {
    .programs-card {
        margin-top: 1rem;
        padding: 0.3rem;
    }

    .handle div {
        width: 50px;
        /* Adjust handle size */
        top: -30px;
    }

    .handle img {
        height: 40px;
        top: -40px;
        width: 20px;
        /* Adjust rope size */
    }

    .rope-handle {
        top: -40px !important;
    }

    .program-card-content {
        margin-top: -40px;
    }

    .circle {
        width: 15px;
        height: 10px;
        left: 49%;
    }

    .program-card-content h3 {
        font-size: 20px;
    }

    .program-card-content p {
        font-size: 15px;
    }

    .flex-col-programe {
        padding: 0 8px;
    }
}

@media (max-width: 450px) {

    .programs-box {
        width: 39px;
    }



    .programs-cards {
        gap: 5px;
    }
}