/* Custom styles for Tailwind CSS project */

/* ===== Global Styles ===== */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-thumb {
    background: gray;
    border-radius: 10px;
}

/* Image hover effect */
img {
    transition: transform 0.3s ease;
}

img:hover {
    transform: scale(1.05);
}

/* ===== Body & General Styles ===== */

body {
    background-color: #f5f5f5;
    color: #0f0f0f;
    transition: background-color 0.3s ease, color 0.3s ease;
}

section {
    width: 100%;
}

/* ===== Dark Mode Styles ===== */

body.dark {
    background-color: #0f0f0f;
    color: #ffffff;
}

body.dark .bg-white {
    background-color: #222;
}

body.dark h1, 
body.dark h2, 
body.dark h3, 
body.dark h4 {
    color: #ffffff;
}

body.dark p {
    color: #d0d0d0;
}

body.dark a {
    color: #ffffff;
}

body.dark input[type="text"],
body.dark input[type="email"],
body.dark select,
body.dark textarea {
    background-color: #333;
    color: #e0e0e0;
    border-color: #333;
}

/* ===== Navigation Styles ===== */

.nav-links a.active {
    color: #fc036b;
    border-radius: 20px;
    background: whitesmoke;
    font-weight: bold;
}

.cir_border {
    border-radius: 20px;
    padding: 6px 20px;
    font-weight: bold;
    transition: all 0.3s ease;
}

.cir_border:hover {
    border: 2px solid whitesmoke;
    border-radius: 20px;
}

/* ===== Button & CTA Styles ===== */

.ctn:hover, 
a.ctn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(252, 3, 107, 0.3);
}

/* ===== Scroll to Top Button ===== */

#upbtn {
    animation: slideUp 0.5s ease-in-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Header Styles ===== */

header {
    background-attachment: fixed;
}

/* ===== Section Styles ===== */

#events {
    background-color: #f5f5f5;
    color: #0f0f0f;
}

body.dark #events {
    background-color: #0f0f0f;
    color: #ffffff;
}

#about {
    background-color: #f5f5f5;
    color: #0f0f0f;
}

body.dark #about {
    background-color: #0f0f0f;
    color: #ffffff;
}

#about_us {
    background-attachment: fixed;
}

body.dark #about_us {
    background-color: #0f0f0f;
}

#contact {
    background-color: #f0f0f0;
    color: #0f0f0f;
}

body.dark #contact {
    background-color: #1a1a1a;
    color: #ffffff;
}

#explore {
    color: #ffffff;
}

/* ===== Carousel Styles ===== */

input[type="radio"] {
    display: none;
}

.carousel-label {
    cursor: pointer;
    transition: opacity 0.5s ease-in-out;
}

.carousel-label img {
    transition: all 0.5s ease-in-out;
    width: 100%;
    height: auto;
}

/* ===== Carousel Controls ===== */

#about_us .flex.gap-3 label {
    transition: all 0.3s ease;
    background-color: rgba(200, 200, 200, 0.7);
    border-radius: 50%;
    cursor: pointer;
}

body.dark #about_us .flex.gap-3 label {
    background-color: rgba(100, 100, 100, 0.6);
}

#about_us .flex.gap-3 label:hover {
    transform: scale(1.3);
    background-color: #fc036b;
}

/* ===== Form Styles ===== */

input[type="text"],
input[type="email"],
select,
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
    background-color: #f5f5f5;
}

input[type="submit"] {
    background-color: #fc036b;
    color: whitesmoke;
    padding: 12px 50px;
    border: 2px solid #fc036b;
    border-radius: 100vmax;
    cursor: pointer;
    font-family: "Montserrat", sans-serif;
    transition: all 0.3s ease;
}

input[type="submit"]:hover {
    background-color: whitesmoke;
    color: #fc036b;
}

/* ===== Responsive Adjustments ===== */

@media (max-width: 768px) {
    .carousel-label {
        width: 90% !important;
    }
}

@media (max-width: 600px) {
    .carousel-label {
        width: 85% !important;
    }
}