@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic&family=Poppins&family=Sacramento&family=Quicksand&family=Roboto+Slab&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");

:root {
    --ffc-100: #b60306;
    --ffc-200: #b3977e;
    --ffc-250: #e2d1c3be;
    --ffc-300: #e9ecef;
}

.bg-100 {
    background-color: var(--ffc-100);
}

.bg-300 {
    background-color: var(--ffc-300);
}

.text-100 {
    color: var(--ffc-100);
}

.text-200 {
    color: var(--ffc-200);
}

h1,
h2,
h3,
h4,
h5,
h6,
span,
p,
a,
small,
i,
b {

    margin-bottom: 0px !important;
}

.pop {
    font-family: 'Poppins', sans-serif;
}

.arb {
    /* font-family: 'Cairo Play', sans-serif; */
    font-family: 'Noto Kufi Arabic', sans-serif;
}

.sand {
    font-family: 'Quicksand', sans-serif;
}

.slab {
    font-family: 'Roboto Slab', serif;
}

.sacramento {
    font-family: 'Sacramento', cursive;
}


footer {
    min-height: 10vh;
}

.fs-small {
    font-size: small;
}

.fs-smaller {
    font-size: smaller;
}

.fs-x-small {
    font-size: x-small;
}

.fs-xx-small {
    font-size: xx-small;
}

.ls-1 {
    letter-spacing: 1px;
}

.ls-2 {
    letter-spacing: 2px;
}

.stroke {
    -webkit-text-stroke: 1px black;
    /* Width and color of the outline */

}

.text-justify {
    text-align: justify !important;
}

a {
    text-decoration: none !important;
    color: inherit !important;
}

.w-fit {
    width: fit-content;
}

.bg-200-grad {
    background-image: linear-gradient(135deg, #fdfcfb 0%, var(--ffc-250) 100%);
}

/* width */
::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.btn-fill {

    /* padding: .2rem 1.5rem; */

    color: var(--bs-light) !important;
    background-color: var(--ffc-100);
    /* color: var(--bs-light) !important; */
    /* background-color: var(--bs-dark); */
    border-radius: 50px;
    transition: .2s;
}

.btn-outline {
    /* padding: .2rem 1.5rem; */
    border: 1px solid var(--ffc-100);
    border-radius: 50px;
    transition: .2s;
}

.btn-outline:hover {
    color: var(--bs-light) !important;
    background-color: var(--ffc-100);
}


.bg-hero-blob {
    /* width: 100%;
    height: 100%; */
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox=%220 0 1000 1000%22 xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3ClinearGradient id=%22b%22 gradientTransform=%22rotate(240 .5 .5)%22%3E%3Cstop offset=%220%25%22 stop-color=%22%23b60306%22%2F%3E%3Cstop offset=%22100%25%22 stop-color=%22%23fff%22%2F%3E%3C%2FlinearGradient%3E%3CclipPath id=%22a%22%3E%3Cpath fill=%22currentColor%22 d=%22M747.5 649q-75.5 149-250 153t-281-149q-106.5-153-14-330.5t300-182Q710 136 766.5 318t-19 331Z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg clip-path=%22url(%23a)%22%3E%3Cpath fill=%22url(%23b)%22 d=%22M747.5 649q-75.5 149-250 153t-281-149q-106.5-153-14-330.5t300-182Q710 136 766.5 318t-19 331Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}

.rounded-25 {
    border-radius: 1rem;
}

.rounded-top-25 {
    /* border-radius: 1rem; */
    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;
}

.h-100vh {
    height: 100vh;
}

.hover-scale:hover {
    transform: scale(1.2);
}



.text-fade {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    position: relative;
}


.text-fade-2 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    position: relative;
}


.text-fade-3 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    position: relative;
}


.text-fade-4 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    position: relative;
}


.text-fade-5 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    position: relative;
}


.text-fade-6 {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    position: relative;
}


.bg-glass {
    /* From https://css.glass */
    background: rgba(0, 0, 0, 0.2);
    /* background: #3a6073; */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}


.bg-dots {
    background-image: radial-gradient(var(--ffc-200) 1px, transparent 1px), radial-gradient(var(--ffc-200) 1px, transparent 1px);
    background-size: 32px 32px;
    background-position: 0 0, 16px 16px;
    background-color: rgba(71, 212, 255, 0);
}

.ticker-container {
    overflow: hidden;
    white-space: nowrap;
    /* Prevent text wrapping */
    width: 100%;
    /* Adjust width as needed */
}

.ticker {
    display: flex;
    animation: scrollLeft 15s linear infinite;
    /* Animation to scroll */
}

.ticker li {
    flex: 0 0 auto;
    margin-right: 10px;
    /* Adjust spacing between items */
}

@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }

    /* Scroll to the left */
}

.bg-hypo {
    background:
        radial-gradient(100% 100% at 100% 100%, #0000 46%, var(--ffc-200) 47% 53%, #0000 54%) 30px 30px,
        radial-gradient(100% 100% at 0 0, #0000 46%, var(--ffc-200) 47% 53%, #0000 54%) 30px 30px,
        radial-gradient(100% 100%, #0000 22%, var(--ffc-200) 23% 29%, #0000 30% 34%, var(--ffc-200) 35% 41%, #0000 42%) transparent;
    background-size: 60px 60px;

}

.bg-crosses {
    background: radial-gradient(circle, transparent 20%, transparent 20%, transparent 80%, transparent 80%, transparent) 0% 0% / 60px 60px, radial-gradient(circle, transparent 20%, transparent 20%, transparent 80%, transparent 80%, transparent) 30px 30px / 60px 60px, linear-gradient(var(--ffc-200) 0.5px, transparent 0.5px) 0px -0.25px / 30px 30px, linear-gradient(90deg, var(--ffc-200) 0.5px, transparent 0.5px) -0.25px 0px / 30px 30px transparent;
    background-size: 60px 60px, 60px 60px, 30px 30px, 30px 30px;
    background-color: transparent;
}