@font-face {

    font-family: "Noto Sans Arabic";

    src: url("../fonts/NotoSansArabic[wdth\,wght].woff") format("woff");

    font-style: normal;

}



body {

    background: #f5f7fb;

    text-align: right;

    direction: rtl;

    font-family: "Noto Sans Arabic", sans-serif;

    font-weight: 400 !important;

    color: #23573f !important;

    margin: 0;

    padding: 0;

    font-size: 0.9rem !important;

}

.winner-page * {

    box-sizing: border-box;

    margin: 0;

    padding: 0;



}



.header {

    font-weight: bold;

    font-size: 3rem !important;

}



.winners-container {

    margin: auto;

    padding: 40px 20px;

    box-sizing: border-box;

    justify-items: center;

}



.quarter-container {

    background-image: linear-gradient(310deg, #E6E7E8 40%, #F1F2F2 0%);

}



.halfed-container {

    background-image: linear-gradient(60deg, #e4e4e3 45%, #eaeaea 0%);

}



.winners-title {

    text-align: center;

    font-size: 32px;

    margin-bottom: 30px;

    color: #222;

}



.winners-grid {

    display: grid;

    width: 100%;

    gap: 5px;

    background-color: transparent;



}

.winners-grid {

    grid-template-columns: repeat(4, 1fr);

}

.win-version-text {
    font-size: 0.55rem;
}
 .icon-img-size{
        width: 35px;
        height: 35px;
    }


@media (max-width: 1350px) {

    .winners-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .win-version-text {
        font-size: 0.60rem;
    }
     .icon-img-size{
        width: 30px;
        height: 30px;
    }
}

@media (max-width: 1000px) {

    .winners-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .win-version-text {
        font-size: 0.60rem;
    }
     .icon-img-size{
        width: 30px;
        height: 30px;
    }

}



@media (max-width: 1200px) {

    .winners-grid {

        grid-template-columns: repeat(2, 1fr);

    }

    .win-version-text {
        font-size: 0.50rem;
    }
     .icon-img-size{
        width: 30px;
        height: 30px;
    }
}



@media (max-width: 800px) {

    .winners-grid {

        grid-template-columns: repeat(1, 1fr);

    }

    .win-version-text {
        font-size: 0.50rem;
    }
    .icon-img-size{
        width: 25px;
        height: 25px;
    }
}

.winner-card {



    border-radius: 16px;

    border: 3px solid #57806D;

    /* overflow: hidden; */

    height: auto;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);

    transition: 0.3s ease;

}



.winner-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);

}



.winner-image {

    width: 100%;

    height: 220px;

    object-fit: contain;

    background: transparent;

    margin: 0;

}



.winner-content {

    padding: 3%;

    border-radius: 5px;

    margin: 0;

    background-color: transparent;

}



.winner-name {

    font-size: 20px;

    font-weight: bold;

    margin-bottom: 5px;

    color: #57806D;

    text-align: center;

}



.winner-school {

    font-size: 16px;

    font-weight: bold;

    color: #57806D;

    margin-bottom: 8px;

}



.winner-badge {

    display: inline-block;

    padding: 12px 10px;

    font-size: 16px;

    font-weight: bold;

    background: #57806D;

    color: white;

    border-radius: 15px;

    border: 1px solid black;

}



.winner-flex {

    display: flex;



}



.winner-space-between {

    justify-content: space-between;

}



.winner-space-around {

    justify-content: space-around;

}



.winner-gap {

    justify-content: flex-start;

    gap: 7px;

}



.winner-centerd {

    justify-content: center;

    align-items: center;

    gap: 7px;

}



.winner-text-centerd {

    text-align: center;

}



.winners-vertical-aligns {

    /* vertical-align: middle; */

    align-items: center;

}



.btn-dark-green {

    display: inline-block;

    padding: 15px 27px;

    background: #57806D !important;

    color: #fff !important;

    text-decoration: none !important;

    font-size: 16px;

    font-weight: 600;

    border-radius: 15px;

    transition: all .25s ease;

    box-shadow: 0 6px 15px rgba(15, 61, 46, .25);

    border: 1px solid black;

    width: 95%;

    text-align: center;

}

.btn-dark-green:hover {

    color: #fff !important;

    text-decoration: none !important;

    background: #57806D;

}



.btn-dark-green:visited {

    color: #fff !important;

}



.btn-dark-green:focus {

    color: #fff !important;

    text-decoration: none !important;

}

.btn-dark-red {

    display: inline-block;

    padding: 15px 27px;

    background: #e11a1a !important;

    color: #fff !important;

    text-decoration: none !important;

    font-size: 16px;

    font-weight: 600;

    border-radius: 15px;

    transition: all .25s ease;

    box-shadow: 0 6px 15px rgba(187, 43, 4, 0.441);

    border: 1px solid black;

    width: 20%;

    text-align: center;

}

.btn-dark-red:hover {

    color: #fff !important;

    text-decoration: none !important;

    background: #e11a1a;

}



.btn-dark-red:visited {

    color: #fff !important;

}



.btn-dark-red:focus {

    color: #fff !important;

    text-decoration: none !important;

}

.w-mt-1 {

    margin-top: 1%;

}

.w-mt-2 {

    margin-top: 2%;

}

.w-mt-3 {

    margin-top: 3%;

}

.w-mt-4 {

    margin-top: 4%;

}

.w-mt-5 {

    margin-top: 5%;

}

.w-mt-6 {

    margin-top: 6%;

}



.w-mt-15 {

    margin-top: 15%;

}



.w-mb-1 {

    margin-bottom: 1%;

}







.w-p-1 {

    padding: 1%;

}

.w-p-0-5 {

    padding: 0.5%;

}



.w-p-2 {

    padding: 2%;

}



.w-p-3 {

    padding: 3%;

}



.w-p-4 {

    padding: 4%;

}



.w-p-5 {

    padding: 5%;

}



.w-p-6 {

    padding: 6%;

}



.w-py-6 {

    padding-top: 9%;

    padding-bottom: 9%;

}



.w-px-6 {

    padding-right: 6%;

    padding-left: 6%;

}



.w-p-7 {

    padding: 7%;

}



.glass-container {

    border-radius: 15px;

    border: 1px solid #d7ae8d;

    background-color: rgba(255, 166, 0, 0.164);

}

.green-glass-container {

    border-radius: 15px;

    background-color: #23573f;

    color: white;



}



.winner-image-container {

    position: relative;

    width: 80%;

    /* حسب حاجتك */

    height: 40%;

}



.winner-image-container img {

    width: 100%;

    height: 100%;

    object-fit: content;

}



.centerd-img-text {

    position: absolute;

    top: 34%;

    left: 47%;

    transform: translate(-50%, -50%);

    color: white;

    text-shadow: #57806D;

    font-size: 30px;

    font-weight: bold;

    text-align: center;

    text-shadow: 3px 3px 5px rgb(0, 0, 0);

}

.winners-input {

    width: 100%;

    padding: 10px 12px;

    font-size: 14px;

    border: 1px solid #d1d1d1;

    border-radius: 10px;

    outline: none;

    transition: 0.2s ease-in-out;

    background-color: #fff;

    color: #23573f;

    direction: rtl;

    margin-bottom: 13px;

}



.winners-input:focus {

    border-color: #23573f;

    box-shadow: 0 0 0 3px rgba(35, 87, 63, 0.15);

}



.winners-input::placeholder {

    color: #999;

}

.achievement-row {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 10px;

}



.achievement-row .winners-input {

    flex: 1;

    margin-bottom: 0;

}



.next-dark-btn {
    padding: 8px 16px;
    background: #57806D !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 16px;
    font-weight: 600;
    border-radius: 15px;
    transition: all .25s ease;
    box-shadow: 0 6px 15px rgba(15, 61, 46, .25);
    border: 1px solid black;
    width: 100%;
    text-align: center;
}

.next-dark-btn:hover {
    color: #fff !important;
    text-decoration: none !important;
    background: #57806D;
}

.next-dark-btn:visited {
    color: #fff !important;
}

.next-dark-btn:focus {
    color: #fff !important;
    text-decoration: none !important;
}