.Main-imageCarousel {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
}


.ImageBoxes {
    display: flex;
    padding-top: 1rem;
    width: 400px;
    height: 400px;
    transition: transform 0.5s ease;
    gap:1rem;
}

.ImageBoxes--box {
    min-width: 400px;
    min-height: 400px;
    max-height: 400px;
    max-width: 400px;
    border-radius: 1rem;
    object-fit: cover;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
  
}

.Main-imageCarousel--button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    color: var(--txt-primary);
    padding: 1rem;
    cursor: pointer;
}

.u-Prev {
    left: 0;
}

.u-Next {
    right: 0;
}

.Main-courses {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    position: relative;
    overflow: hidden;
    margin-top: 1rem;
    padding: 1rem;
    justify-content: center;
}
.Courses-tittle{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    margin-top: 1rem;
    background-color: var(--bg-secondary);
    align-items: center;
    justify-content: center;
    height: 50%;
    border-radius: 1rem;
}
.CoursesCards {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
    padding: 10px;
    transition: transform 0.5s ease;
}


.Main-courses--course {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    object-fit: cover;
    gap: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow:var(--box-shadow);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    cursor:pointer;
    opacity: 1;
}


.Main-courses--course:hover {
    transform: scale(1.05);
    box-shadow: 0px 0px 10px rgb(0,0,0,0.2);
}

.isNotFounded{
    display: none;
}
.Main-course--img {
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    box-shadow: var(--box-shadow);
    object-fit: cover;
    transition: transform 0.5s ease, filter 0.5s ease;

}



.Main-comments {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

.Comments{
    display: flex;
    gap: 1rem;
    padding: 1rem;
    transition: transform 0.5s ease;
}
.Main-comments--coment {
    display: flex;
    width: 250px;
    height: auto;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border-radius: 1rem;
    box-shadow:var(--box-shadow);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.Main-comments--coment-user {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    align-items: center;
}

.Main-comments--coment-user-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
.Main-interaction{
    display: flex;
    align-items: center;
    gap: 1rem;

}




.StartSection{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
    margin-top: 1rem;
    box-shadow: var(--box-shadow);
}


.Main-courses-start{
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--box-shadow);
    border-radius: 1rem;
    padding: 1rem;
    background-color: var(--bg-terciary);
   
}
.Main-courses-content{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}
@media screen and (min-width: 600px) and (max-width: 1200px) {
   

    .ImageBoxes {
        width: 800px;
        height: 400px;
    }

    .ImageBoxes--box {
        min-width: 800px;
        min-height: 400px;
        max-height: 400px;
        max-width: 800px;
    }

    

    .CoursesCards {
        grid-template-columns: repeat(2, 1fr);
    }

  

    .Main-comments--coment {
        width: 400px;
        height: auto;
    }
   
}

@media screen and (min-width: 1200px) {
    .ImageBoxes {
        width: 2800px;
        height: 400px;
    }

    .ImageBoxes--box {
        min-width: 2800px;
        min-height: 400px;
        max-height: 400px;
        max-width: 2800px;
        object-fit:contain;
        /* background-color: var(--bg-secondary); */
    }

    .Main-courses{
        flex-direction: row;
        flex-wrap: nowrap;
        gap:1rem;
    }
   
    .CoursesCards {
        grid-template-columns: repeat(3, 1fr);
       
        justify-content: space-around;
    }

    .Comments{
        width: 100%;
        justify-content: space-around;
    }

    .Main-comments--coment {
        width: 500px;
        height: auto;
    }

    .Main-courses-content{
        width: 80%;
    }
    .Main-courses-start{
        width: 30%;
    }

    .imageForm{
        width: 50%;
        height: 100%;
    }
    .form{
        width: 70%;
    }
    .modal-contenido{
        flex-direction: row;
        height: 50%;
        width: 50%;
    }


}