/* 교육과정 카드 이미지 크기 */
.course-img {
    width: 150px;
}

/* 교육과정 hover효과 */
.hover-card {
    transition: transform 0.3s, box-shadow 0.3s;
}
.hover-card:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    cursor: pointer;
}


/* 비디오 화살표 수정하여 유튜브 컨트롤이 터치되게 */
.carousel-control-prev,
.carousel-control-next {
    width: 10%;          /* 필요에 따라 조정 가능 */
    height: 50%;         /* 화살표 컨테이너의 높이를 50%로 줄입니다 */
    top: 25%;            /* 중앙에 위치하도록 top을 25%로 설정합니다 */
    bottom: auto;        /* bottom 값을 자동으로 설정합니다 */
    background: none;    /* 배경 제거 */
    pointer-events: none;/* 컨테이너에서 클릭 이벤트를 받지 않음 */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 2rem;         /* 화살표 아이콘의 너비 */
    height: 2rem;        /* 화살표 아이콘의 높이 */
    background-size: 100% 100%;
    pointer-events: auto;/* 아이콘에서만 클릭 이벤트를 받음 */
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: none;    /* 호버 시 배경이 나타나지 않도록 함 */
}


/* 작은 화면에서 퀴즈 카드 좌측 이미지 우측 문자
<!-- Portfolio Item 5-->
<div class="col-md-6 col-lg-3 mb-4 mb-md-5">
    <a href="periodic-table/index.php" class="portfolio-item mx-auto d-flex flex-row flex-md-column align-items-center text-decoration-none text-dark">
        <img class="img-fluid small-img" src="assets/images/periodictable.jpg" alt="영어속담" />
        <h5 class="text-center mt-2 mt-md-2 ms-2 ms-md-0">주기율표</h5>
        <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
            <div class="portfolio-item-caption-content text-center text-white">
                <i class="fas fa-arrow-right fa-3x"></i>
            </div>
        </div>
    </a>
</div>

작은 화면에서 이미지 크기 조절
@media (max-width: 768px) {
    .small-img {
        width: 80px;
        height: auto;
    }
}*/