@import url("raleway.css");

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

@layer base {
    .li-before {
        @apply pl-5 relative before:absolute before:-left-0 before:top-[9px] before:w-2 before:h-2 before:rounded-full before:bg-teal;
    }
}

@layer components {
    .error {
        @apply !border-red-400 !text-red-500 placeholder:text-red-500;
    }
    .valid {
        @apply !text-navy;
    }

    /* Styles for article_wrapper */
    .article_wrapper {
        @apply bg-white relative p-6 py-10 laptop:p-[60px] laptop:container;
    }
    .article_wrapper strong {
        @apply text-navy font-black text-sm tablet:text-base;
    }

    .article_wrapper p {
        @apply text-navy font-semibold text-sm tablet:text-base my-8;
    }

    .article_wrapper p:first-child {
        @apply text-teal font-medium text-xs tablet:text-[14px];
    }

    .article_wrapper img {
        @apply block my-8;
    }

    .article_wrapper h1,
    .article_wrapper h2,
    .article_wrapper h3 {
        @apply font-black text-orange text-xl tablet:text-2xl my-8;
    }

    .article_wrapper ul {
        @apply relative mb-8 space-y-4 font-bold text-navy gap-14;
    }

    .article_wrapper + a {
        @apply bg-orange max-w-[160px] rounded-full mx-6 mb-10 tablet:mx-[60px] tablet:mb-[60px] p-4 px-10 text-white text-base font-black tablet:text-lg block text-center;
    }
}

@layer base {
    body {
        font-family: "Raleway" sans-serifg;
    }
    select {
        -webkit-appearance: none;
        outline: none;
    }
    input {
        background: transparent;
    }
    .customWidth::after,
    .customWidth::before {
        width: calc((100vw - 101%) / 2);
    }
    /* Styles for article_wrapper */
    .article_wrapper li {
        position: relative;
        padding-left: 20px;
    }

    .article_wrapper li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 7px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #3cb6ce;
    }

    .lazyframe iframe {
        border-radius: 1.5rem;
    }

    @keyframes spinner {
        0% {
            transform: rotate(0);
            animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
        }
        50% {
            transform: rotate(900deg);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        }
        100% {
            transform: rotate(1800deg);
        }
    }

    .spinner {
        position: absolute;
        width: 6px;
        left: 26px;
        top: 15px;
    }
    .spinner:after {
        content: " ";
        display: block;
        border-radius: 50%;
        width: 6px;
        height: 0;
        box-sizing: border-box;
        border: 8px solid white;
        border-color: white transparent white transparent;
        animation: spinner 1.2s infinite;
    }
}