@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@font-face {
    font-family: 'aladdin';
    src: url('/fonts/aladdin.woff2') format('woff2');
}
  
@font-face {
    font-family: 'aladin';
    src: url('/fonts/aladin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'elmessiri';
    src: url('/fonts/El_Messiri/ElMessiri-VariableFont_wght.ttf') format('truetype');
}
@font-face {
    font-family: 'arefruqaa';
    src: url('/fonts/Aref_Ruqaa/Arefruqaa-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'arefruqaa-bold';
    src: url('/fonts/Aref_Ruqaa/arefruqaa-bold.ttf') format('truetype');
}

body {
    background: linear-gradient(to bottom, #2d1e2f, #6b3e53);
    color: #fff;
}
.navbar {
    background-color: #4a2c42;
}
.navbar-brand, .nav-link {
    color: #ffd700 !important;
}
header {
    background: url('background.jpeg') no-repeat center center;
    background-size: cover;
    height: 60vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-shadow: 2px 2px 4px #000;
}

.navbar{
    font-family: 'elmessiri';;
}

header h1 {
    color: #ffd700;
    word-break: break-word;
    text-align:center;
    font-family: 'aladdin', serif;
}

.mobile-h1{
    font-size: 12vw;    
}
.desktop-h1{
    font-size: 7.5vw;
}

h2 {
    font-size: 7.5vw;
    color: #ffd700;
    word-break: break-word;
    text-align:center;
    font-family: 'arefruqaa';
}
h3{
    font-family: 'arefruqaa';
}
h4{
    font-family: 'arefruqaa';
}
#countdown {
    font-family: 'elmessiri';;
    font-size: 4vw;
    font-weight: bold;
}
#carpet {
    position: absolute;
    top: 80%;
    left: -200px;
    width: 100px;
    animation: flyCarpet 20s linear infinite;
    opacity: 0.8;
}

body p{
    font-family: 'elmessiri';
    font-size: 1.2rem;
    color: #fff;
    text-align: left;
    margin-top: 20px;
}

footer p{
    text-align: center;
}
text {
    color:antiquewhite
}


@keyframes flyCarpet {
    0% {
        top: 65%;
        left: -150px;
        transform: rotate(0deg);
    }
    5% {
        top: 65%;
        transform: rotate(0deg);
    }
    25% {
        top: 60%;
        transform: rotate(90deg);
    }
    50% {
        top: 50%;
        transform: rotate(180deg);
    }
    75%{
        top: 60%;
        transform: rotate(270deg);
    }
    95% {
        top: 95%;
        transform: rotate(360deg)
    }
    100% {
        top: 65%;
        left: 95%;
        transform: rotate(0deg);
    }
}
section {
    padding: 4rem 0;
}
.card {
    background-color: thistle !important;
    border: none;    
}
.card-title {
    font-family: 'arefruqaa-bold';
    font-style: bold;
    color: #ffd700;
    text-align: center;
}
.card-text{
    color: #000;
    font-family: 'arefruqaa';
}
footer {
    background-color: #3a2432;
    padding: 2rem 0;
    text-align: center;
}