@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {

    .bg-fixed {
        background-attachment: fixed;
    }

    /* Optional: You can add smooth scrolling for a better parallax experience */
    html {
        scroll-behavior: smooth;
    }

    body,
    header,
    footer {
        font-family: 'Poppins', sans-serif;
        background-color: #f9fafb;
        color: black;
    }

    .login-div {
        max-width: 600px !important;
        margin: 40px auto;
    }

    .footer-logo {
        max-width: 100px !important;
        margin: 0 auto;
    }

    h1,
    h2,
    h3,
    h4 {
        font-family: "Merriweather", serif;
        font-weight: bold !important;
    }

    .logo-title {
        font-family: "Merriweather", serif;
        font-weight: bold !important;
    }

    .hover-underline:hover {
        text-decoration: underline;
    }

    .services-card {
        background-color: white;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        border-radius: 0.5rem;
        padding: 1.5rem;
        text-align: center;
        transition: none !important;
        transform: translate(0px, 0px) !important;
    }

    .services-card:hover {
        transform: translateY(-10px) !important;
        transition: transform 0.3s ease !important;
        box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.1);
    }

    .gallery img,
    .swiper-slide {
        /* Avoid unnecessary transforms */
        transition: none !important;
        transform: translate(0px, 0px) !important;
        /* No global transition */
    }

    .gallery img:hover {
        transform: scale(1.05) !important;
        transition: transform 0.3s ease !important;
        /* Apply only on hover */
    }

    .swiper-container,
    .swiper-container-testimonials {
        width: 100%;
        max-width: 100%;
        /* Prevent any overflow */
        overflow: hidden;
        /* Hide overflow just in case */
    }

    /* Ensure swiper-wrapper and swiper-slide are properly sized */
    .swiper-wrapper {
        display: flex;
        width: 100%;
    }

    .swiper-slide {
        flex-shrink: 0;
        /* Prevent shrinking of the slides */
        width: auto;
        /* Ensures proper sizing of each slide */
        text-align: center;
        /* Center the images */
    }

    .swiper-slide img,
    .swiper-slide {
        width: 100%;
        /* Make the image responsive */
        height: auto;
        /* Maintain aspect ratio */
    }

    .custom-prev,
    .custom-next,
    .custom-prev-1,
    .custom-next-1 {
        padding: 5px 10px !important;
        background-color: white !important;
        /* Padding for the buttons */
        border-radius: 8px;
        /* Rounded corners */
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        z-index: 20;
    }

    .custom-prev {
        left: 10px;
    }

    .custom-next {
        right: 10px;
    }

    .iti {
        width: 100%;
    }

    .iti__search-input {
        padding: 10px !important;
    }
}