@import 'https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css';

/* Custom styles */
@font-face {
    font-family: 'Aeonik';
    src: url('../fonts/AeonikTRIAL-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/Satoshi-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.animate-gradient-move {
    animation: gradient-move 15s ease infinite;
}

@keyframes gradient-move {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.font-aeonik {
    font-family: 'Aeonik', sans-serif;
}

.font-satoshi {
    font-family: 'Satoshi', sans-serif;
}

/* Ensure full scrollability */
html, body {
    height: 100%;
    overflow-y: auto;
}

/* Custom button styles */
.btn {
    @apply font-bold py-3 px-6 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 fluid-type text-center;
}

.btn-primary {
    @apply bg-purple-600 hover:bg-purple-700 text-white;
}

.btn-secondary {
    @apply bg-white hover:bg-gray-100 text-purple-600 border border-purple-600;
}

/* Additional styles for spacing */
.section-spacing {
    margin-top: 6rem;
    margin-bottom: 6rem;
}

/* Swiper styles */
.swiper-container {
    width: 100%;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 60px;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Center buttons and add spacing */
.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.button-container a {
    flex: 0 1 auto;
    min-width: 200px;
}

@media (max-width: 640px) {
    .button-container {
        flex-direction: column;
    }
    
    .button-container a {
        width: 100%;
    }
}

.video-container iframe {
    border-radius: 15px; /* Adjust this value to control how rounded the corners are */
}

.video-container {
    overflow: hidden; /* Ensures the content stays within the rounded borders */
}

/* Increased spacing between menu and content */
.content-wrapper {
    padding-top: 15%;
}