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

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("./fonts/gilroy/stylesheet.css");

.font-poppins {
    font-family: "Poppins", serif;
}

.font-gilroy {
    font-family: "gilroy";
}

body {
    font-family: "Poppins", serif;
    font-size: 0.9rem;
}

.border-font-black {
    color: black;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px black;
}

.border-font-white {
    color: white;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px white;
}

.border-font-white-2 {
    color: white;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px white;
}

.speakers-body .speakers-image-back {
    background-image: url("../assets/images/blurry-gradient-haikei-1.webp");
}

.speakers-body:nth-child(7n + 1) .speakers-image-back {
    background-image: url("../assets/images/blurry-gradient-haikei-2.webp");
}

.speakers-body:nth-child(7n + 2) .speakers-image-back {
    background-image: url("../assets/images/blurry-gradient-haikei-3.webp");
}

.speakers-body:nth-child(7n + 3) .speakers-image-back {
    background-image: url("../assets/images/blurry-gradient-haikei-4.webp");
}

.speakers-body:nth-child(7n + 4) .speakers-image-back {
    background-image: url("../assets/images/blurry-gradient-haikei-5.webp");
}

.speakers-body:nth-child(7n + 5) .speakers-image-back {
    background-image: url("../assets/images/blurry-gradient-haikei-6.webp");
}

.speakers-body:nth-child(7n + 6) .speakers-image-back {
    background-image: url("../assets/images/blurry-gradient-haikei-7.webp");
}

#whoShouldAttend::-webkit-scrollbar {
    display: none;
}

.pricing-button {
    padding: 20px;
    margin: 0px 0px 0px 20px;
    width: fit-content;
    min-width: 200px;
    font-size: 18px;
    border-radius: 5px;
    display: inline-block;
    overflow: hidden;
    background: linear-gradient(131.15deg, rgb(164, 25, 125) -13.07%, rgb(0, 26, 64) 94.86%), linear-gradient(rgba(253, 252, 255, 0) 0%, rgba(253, 252, 255, 0.5) 100%);
    -webkit-box-shadow: 3px 2px 24px -4px rgba(0,26,64,0.5);
    -moz-box-shadow: 3px 2px 24px -4px rgba(0,26,64,0.5);
    box-shadow: 3px 2px 24px -4px rgba(0,26,64,0.5);
}

.pricing-button::before {
    width: 0px;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    background: rgb(0, 26, 64);
    content: "";
    display: block;
    transition: 0.2s ease-in-out;
    z-index: 3;
}

.pricing-button:hover::before {
    width: 100%;
}