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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
 @import url('https://cdnjs.cloudflare.com/ajax/libs/aos/3.0.0-beta.6/aos.css');

.bannerContent.home {
    background-size: cover;
    background-image: linear-gradient(
        180deg, rgba(41, 16, 0, 0.5) 0%, rgba(41, 16, 0, 0.5) 25%, rgba(41, 16, 0, 0.5) 50%, rgba(219, 185, 71, 0.5) 75%, rgba(217, 217, 217, 0) 100%),
        url(/assets/HomepageBanner-33d510a2b20f8d249592f87ddcaa9574dfbd0c2703a7dea1dd8eb412b998ac67.jpg);
    background-position: 50% 50%;
}

.bannerContent.aboutUs {
    background-size: cover;
    background-image: linear-gradient(
        180deg, rgba(91, 91, 91, 0.76707) 0.54%, rgba(86, 86, 86, 0.8) 3.85%, rgba(10, 9, 9, 0.536094) 40.82%, rgba(113, 110, 110, 0.573496) 75.06%, rgba(217, 217, 217, 0) 100%),
        url(/assets/AboutUsBanner-91a35c46cb38b00aa1aa9e10a4f81f2eda888c27095968ce5a91f60cd247e8f0.jpg);
    background-position: 50% 50%;
}

.bannerContent.services {
    background-size: cover;
    background-image: linear-gradient(
        180deg, rgba(86, 86, 86, 0.8) 3.85%, rgba(91, 91, 91, 0.76707) 3.86%, rgba(10, 9, 9, 0.536094) 40.82%, rgba(113, 110, 110, 0.573496) 75.06%, rgba(217, 217, 217, 0) 100%),
        url(/assets/ServicesPageBanner-037810f3bf0b7a9faeb05a9e3b92a70f0b54ae33ab42a901c1000ceab27689b5.jpg);
    background-position: 50% 50%;
}

.dogSpa {
    background-image: linear-gradient(
        180deg, rgba(91, 91, 91, 0.76707) 0.54%, rgba(86, 86, 86, 0.8) 3.85%, rgba(10, 9, 9, 0.536094) 40.82%, rgba(113, 110, 110, 0.573496) 75.06%, rgba(217, 217, 217, 0) 100%),
        url(/assets/DogSpa-65002dc91011f6e1e5b93e54f9aebb2eb702193f9f06049b3a6dc112e71673a1.jpg);
    background-size: cover;
}

.dogAccommodation {
    background-image: linear-gradient(
        180deg, rgba(91, 91, 91, 0.76707) 0.54%, rgba(86, 86, 86, 0.8) 3.85%, rgba(10, 9, 9, 0.536094) 40.82%, rgba(113, 110, 110, 0.573496) 75.06%, rgba(217, 217, 217, 0) 100%),
        url(/assets/DogAccommodation-a79a634ed3e63bfd49a5fd93ed679d3f23215acbabbda23e9ac65ad5b2888add.jpg);
    background-size: cover;
}

.dogTaxi {
    background-image: linear-gradient(
        180deg, rgba(91, 91, 91, 0.76707) 0.54%, rgba(86, 86, 86, 0.8) 3.85%, rgba(10, 9, 9, 0.536094) 40.82%, rgba(113, 110, 110, 0.573496) 75.06%, rgba(217, 217, 217, 0) 100%),
        url(/assets/DogTaxi-19dfd9ca84fd13ea660b29e6677e9f1d18fc2ec4dad426b9e0e39190b5375574.jpg);
    background-size: cover;
}

#testimonialsCarousel
{
    background: linear-gradient(180deg, #291000 1.12%, rgba(41, 16, 0, 0.91) 92.62%);
    background-blend-mode: multiply;
}

.testimonials {
    width: 100%;
    height: 25rem;
    --swiper-navigation-color: white;
    --swiper-pagination-bullet-inactive-color: rgba(255, 255, 255, 0.42);
    --swiper-pagination-color: white;
}


.users {
    --swiper-navigation-color: white;
    .swiper-slide {
        height: 18rem;
    }
    .swiper-slide:hover {
        height: 20rem;
    }
}