/* ../css/custom-swiper.css */

/* Swiper 페이지네이션 점 색상 조정 */
.swiper-pagination-bullet {
    background: #3b82f6; /* Tailwind의 blue-500 색상 */
}

.swiper-pagination-bullet-active {
    background: #1e40af; /* Tailwind의 blue-800 색상 */
}

/* Swiper 슬라이드 마진 조정 */
.swiper-slide {/* ../css/custom-swiper.css */

    /* Swiper 페이지네이션 점 색상 조정 */
    .swiper-pagination-bullet {
        background: #3b82f6; /* Tailwind의 blue-500 색상 */
        opacity: 1; /* 기본 불투명도 설정 */
    }
    
    .swiper-pagination-bullet-active {
        background: #1e40af; /* Tailwind의 blue-800 색상 */
    }
    
    /* Swiper 슬라이드 마진 조정 및 카드 크기 동일하게 설정 */
    .swiper-slide {
        display: flex;
        justify-content: center;
        /* 카드의 동일한 크기를 유지하기 위해 고정 높이 설정 */
        height: 300px; /* 필요에 따라 조정 */
    }
    
    .swiper-slide > div {
        width: 100%;
        max-width: 250px; /* 카드의 최대 너비 */
        height: 100%;
    }
    
    /* Swiper 페이지네이션 위치 조정 */
    .swiper-pagination {
        position: absolute; /* 절대 위치로 설정 */
        bottom: -30px; /* 페이지네이션을 슬라이드 아래로 내리기 */
        left: 0;
        right: 0;
        margin: 0 auto; /* 페이지네이션을 중앙 정렬 */
        text-align: center;
    }

    
    display: flex;
    justify-content: center;
    /* Ensures slides don't stretch */
    flex-shrink: 0;
}

/* 그레이 박스 안에서만 요소가 보이도록 설정 */
#testimonials {
    overflow: hidden;
}


@keyframes custom-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.animate-custom-spin {
    display: inline-block;
    animation: custom-spin 2s linear infinite;
}



/* 그라데이션 텍스트 효과 */
.gradient-text {
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #10b981, #3b82f6);
    background-size: 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-flow 6s ease-in-out infinite alternate;
}

/* 톱니바퀴 그라데이션 효과 */
.gradient-icon {
    background: linear-gradient(90deg, #3b82f6, #8b5cf6, #10b981, #3b82f6);
    background-size: 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    animation: gradient-flow 6s ease-in-out infinite alternate, spin 4s linear infinite;
}

/* 그라데이션 이동 애니메이션 */
@keyframes gradient-flow {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 100%;
    }
}

/* 톱니바퀴 회전 애니메이션 */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}






/* 애니메이션 키프레임 */
@keyframes slide-fade {
    0% {
        opacity: 0;
        transform: translateY(-30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 애니메이션 클래스 */
.animate-slide-fade {
    animation: slide-fade 1.5s ease-out forwards;
    animation-delay: 0.5s; /* 시작 지연 */
}





.img-top {
    object-fit: cover; /* 이미지를 비율 유지하며 꽉 채움 */
    object-position: top; /* 이미지의 상단을 표시 */
    width: 100%;
    height: 12rem; /* 48px 기준 */
}


@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px); /* 아래로 이동 */
    }
}

.animate-bounce {
    animation: bounce 1.5s infinite;
}