@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&display=swap');
*{
    font-family: "Almarai", sans-serif;
}
:root {
    --white-c: #4e4e4e;
    --off-white-c: #F1F1F1;
    --black-c: #ffffff;
    --blue-c: #17194A;
    --orange-c: #eed484;
    --orange-h-c: #eeca5d;
    --orange-f-c: #eed484;
    --red-c: #FF0000;
    --copy-c: #E2E2E2;
    --gray-c: #4e4e4e;
    --btn-c: #eeeeee;
    --btn-a-c: #eed484;
    --btn-h-c: #dac27b;
    --bg-clr: #f3f2f2;
    --sbg-clr: #3A3A3A;
    --bg-dark-c: #ffffff;
    --none-c: #ffffff00;
    --lite-gray-c: #e6e2e2;




    --card-text: #000000;
    --card-text1: rgb(0, 0, 0);
    --card-text2: rgb(36, 36, 36);
    --black-clr: #ffffff;
    --dark-clr: #343a40;
    --blue-clr: #00C2FF;
    --red-clr: #ff0000;
}
@media (max-width: 576px) {

    .img-center {
        margin-bottom: 10px;
    }

    .item-card {
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        justify-content: center;
    }
}
.align-items-center .search-btn {
    background-color: var(--orange-c);
    width: fit-content;
    border-radius: 0px 5px 5px 0px;  
    color: var(--white-c);
    border: none;
    padding: 0px 0px 0px 1px;
    
    }
    
.align-items-center .search-btn:focus {
    background-color: var(--orange-c);


    color: var(--white-c);
    border: none;
    }
    
.align-items-center .search-input {
    background-color: var(--black-clr);
    width: fit-content;
    border-radius: 5px 0px 0px 5px;  
    color: var(--orange-c);
    border: 2px solid var(--orange-c);
    }
.align-items-center .search-input:focus {

    color: var(--orange-c);
    border: 2px solid var(--orange-c);
    }

.wko {
    color: #cc9c54;
    font-weight: bold;
    font-size: 48px;
    text-align: center; 
}

@media (max-width: 992px) {
    .wko {
        font-size: 36px;
    }
}

@media (max-width: 768px) {
    .wko {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .wko {
        font-size: 22px;
    }
}
.logoindex {
    max-width: 100%; 
    height: auto;    
}
.swko {
    color: #cc9c54;
    font-weight: bold;
    font-size: 48px; 
    text-align: center; 
}

/* شاشات متوسطة */
@media (max-width: 992px) {
    .swko {
        font-size: 36px;
    }
}


@media (max-width: 768px) {
    .swko {
        font-size: 28px;
    }
}


@media (max-width: 480px) {
    .swko {
        font-size: 22px;
    }
}