index.css

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800&display=swap');


body {
    font-family: 'Rubik', sans-serif;
}


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

@layer components {
    .wrap {
        @apply w-full mx-auto px-4 max-w-[800px];
    }

    .h1 {
        @apply text-[25px] leading-8 font-semibold md:text-3xl md:font-medium;
    }

    .h3 {
        @apply text-[17px] leading-[21px] font-bold md:text-xl md:font-medium;
    }

    .p {
        @apply text-[14px] leading-[17px] opacity-70 md:text-lg;
    }

    .yellowbtn {
        @apply text-sm font-bold py-3 text-darkgrey bg-yellow rounded-3xl text-center px-5 md:text-lg;
    }

    .whitebtn {
        @apply text-sm font-bold py-3 text-darkgrey bg-white rounded-3xl text-center px-5 md:text-lg;
    }
}

.ReactCollapse--collapse {
    transition: height 300ms;
}


.swiper-pagination-bullet {
    background-color: white;
}

.swiper-pagination-bullet-active {
    background-color: white;
}