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

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Encode+Sans+Condensed:wght@100;200;300;400;500;600;700;800;900&family=Oswald:wght@200..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

body {
    background-color: white;
    font-family: "Oswald", sans-serif;
    font-style: normal;
    /* background-image: url(https://media.istockphoto.com/photos/concrete-polished-seamless-texture-background-aged-cement-backdrop-picture-id840427570?k=20&m=840427570&s=170667a&w=0&h=1PSnI-dsz4J8UQQJDAiR1YZybk3JSudahmOr-NSyIeM=); */
}

#about1,
#about5 {
    clip-path: polygon(15% 0%, 100% 0%, 100% 99.5%, 25% 100%);
}

#about2,
#about3,
#about4 {
    clip-path: polygon(0% 0%, 70% 0%, 74% 56%, 70% 100%, 0% 100%, 0% 53%);
}

#about6 {
    clip-path: polygon(0% 0%, 100% 0%, 99% 67%, 0% 80%, 0% 80%);
}

#about7 {
    clip-path: polygon(20.4% 0%, 100% 0%, 80.6% 100%, 0% 100%);
}

.ourprojects {
    clip-path: polygon(0% 0%, 81% 0%, 90.3% 53%, 81% 100%, 0% 100%, 0% 39.6%);
    /*border-radius: 35% 65% 23% 77% / 66% 40% 60% 34%;*/
}

.bi-telephone-fill::before {
    transform: rotate(10deg);
}

*:not(select)::-webkit-scrollbar:horizontal {
    background-color: transparent;
    background-image: none;
}

*:not(select)::-webkit-scrollbar-thumb:horizontal {
    background-color: transparent;
    border-radius: 0;
}

*:not(select)::-webkit-scrollbar {
    width: 8px !important;
    height: 5px !important;
}

*:not(select)::-webkit-scrollbar-thumb:vertical {
    background-color: #b91c1c;
    border-radius: 3px;
    width: 8px !important;
}

.dental:hover svg {
    fill: #172554;
}

* {
    scroll-behavior: smooth;
}

.text-border {
    -webkit-text-stroke: rgb(185, 6, 6) 2px;
}

stroke {
    --webkit-text-stroke: 0.5px;
}

.claims-input {
    padding: 0.375rem 0.5rem;
    background: white;
    border: 1px solid #9ca3af;
    border-radius: 0.375rem;
    width: 100%;
}

.claims-input::placeholder{
    color: gray;
}

    .claims-input:focus {
        padding: 0.5rem 0.5rem 0.375rem;
        outline: 2px solid transparent;
        border-color: #2f343b;
    }

    .claims-input:focus::placeholder{
        opacity: 0;
    }

.claims-label {
    background: white;
    color: #052976;
    visibility: hidden;
    position: absolute;
    font-size: 0.85rem;
    line-height: 1rem;
    top: 0;
    left: 0;
    z-index: 2;
    padding-inline: 0.2rem
}

.claims-input:focus ~ .claims-label, input:not(:placeholder-shown) + label {
    visibility: visible;
    transform: scale(.85) translateY(-0.5rem) translateX(0.2rem);
}

.loader {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1) rotateX(65deg) rotate(45deg);
    width: 48px;
    height: 48px;
    border: 3px solid #FFF;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

    .loader::after {
        content: '';
        box-sizing: border-box;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-bottom-color: #FF3D00;
    }

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.animation-slide-in {
    animation: slide-in 0.5s ease-in-out;
}

@keyframes slide-in {
    0% {
        opacity: 0;
        transform: translateX(40px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.animation-slide-out {
    animation: slide-out 0.5s ease-in-out;
}

@keyframes slide-out {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(40px);
    }
}

@media (max-width: 640px) {
    #navbar-sticky {
        width: 100vw;
    }
}

@media (max-width: 1530px) {
    .text-border {
        -webkit-text-stroke: rgb(185, 6, 6) 1.5px;
    }
}

@media (max-width: 600px) {
    .loader {
        left: 45%;
        width: 32px;
        height: 32px;
    }

        .loader::after {
            width: 40px;
            height: 40px;
        }
}