@font-face {
    font-family: 'Loew_black';
    src: url('../fonts/Loew\ Next\ Arabic\ Black.ttf') format('truetype');

}

@font-face {
    font-family: 'Loew_bold';
    src: url('../fonts/Loew\ Next\ Arabic\ Bold.ttf') format('truetype');

}

@font-face {
    font-family: 'Loew_extrabold';
    src: url('../fonts/Loew\ Next\ Arabic\ ExtraBold.ttf') format('truetype');

}

@font-face {
    font-family: 'Loew_heavy';
    src: url('../fonts/Loew\ Next\ Arabic\ Heavy.ttf') format('truetype');

}

@font-face {
    font-family: 'Loew_light';
    src: url('../fonts/Loew\ Next\ Arabic\ Light.ttf') format('truetype');

}

@font-face {
    font-family: 'Loew_medium';
    src: url('../fonts/Loew\ Next\ Arabic\ Medium.ttf') format('truetype');

}

@font-face {
    font-family: 'Loew_thin';
    src: url('../fonts/Loew\ Next\ Arabic\ Thin.ttf') format('truetype');

}

@font-face {
    font-family: 'barlow_bold';
    src: url('../fonts/BarlowCondensed-Bold.ttf') format('truetype');

}

@font-face {
    font-family: 'barlow_medium';
    src: url('../fonts/BarlowCondensed-Medium.ttf') format('truetype');

}


body {
    background-color: #fff;
    background-image: url(../images/background2@2x.png);
    background-repeat: no-repeat;
    background-size: 100vw;
    /* background-position: right; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-transform: uppercase;
    overflow-x: hidden;
    width: 100vw;
}

a {
    text-decoration: none;
    color: white;
}

.header {
    height: 18vw;

}

.head {
    height: 18vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo {
    width: 22vw;
}

.global_content_header {
    width: 100vw;
    display: flex;
    justify-content: center;
    margin-bottom: 6vw;
}

nav {
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;

}

.inside_nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: row;
    width: 33vw;
    background-color: white;
    height: 5vw;
    border-radius: 1vw;
    box-shadow: 7px 10px 20px rgba(0, 0, 0, 0.09);

}

.inside_nav>div {
    font-size: 0.7vw;
    font-family: 'Loew_medium';
    height: 3.5vw;
    display: flex;
    align-items: center;
    width: 10vw;

    justify-content: center;
    letter-spacing: -0.4px;
    border-radius: 0.5vw;
}

.active {
    color: #fff;
    background-color: #1456FF;
}

.unactive {
    color: #1456FF;
    background-color: #e7eeff;
}

.content_header {
    display: flex;
    justify-content: space-between;
    color: white;
    align-items: center;
    width: 85vw;

}

.content_header img {
    width: 37vw;
    border-radius: 2vw;
}

.content_header h1 {
    font-family: 'Loew_heavy';
    font-size: 3vw;
    width: 43vw;
   line-height: 4vw;
    letter-spacing: -1.05px;
}

.content_header p {
    font-family: 'Loew_bold';
    letter-spacing: -0.53px;
    font-size: 1.1vw;
    line-height: 1vw;
}



.fa-solid {
    margin-right: 0.6vw;
}

.register_button {
    background-color: #1456FF;
    padding: 1.5vw 1.2vw;
    border-radius: 0.5vw;
    width: 10vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.register_button a {
    font-family: 'barlow_bold';
    font-size: 1.7vw;
}

.globalecontent {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
}

.globalecontent>div:nth-child(2), .globalecontent>div:nth-child(3), .globalecontent>div:nth-child(4) {
    width: 70vw;
    margin-top: 7vw;
    margin-bottom: 3vw;
}

.content_details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;

}


#rules_content,
#players_list_content {
    display: none;
}

.content_details h1 {
    font-family: 'Loew_heavy';
    font-size: 2vw;
    line-height: 5vh;
    letter-spacing: -1.05px;
}

.content_details p {
    font-family: 'Loew_bold';
    letter-spacing: -0.53px;
    font-size: 1.1vw;
    line-height: 0vh;
}

.content_details div>div {
    margin-bottom: 7vh;
}



.note {
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10vh;
}

.inside_note {
    display: flex;
    background-color: #1456FF;
    border-radius: 1vw;
    width: 75vw;
    height: 13vh;
    flex-direction: column;
    justify-content: center;
}

.inside_note p {
    font-family: 'Loew_bold';
    letter-spacing: -0.53px;
    font-size: 1.3vw;
    line-height: 0vh;
    color: white;
    margin-left: 4vw;
    margin-bottom: -1vw;

}

.inside_note h1 {
    font-family: 'Loew_heavy';
    font-size: 1.7vw;

    letter-spacing: -1.05px;
    color: white;
    margin-left: 4vw;

}

.rule_title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 65vw;
    height: 5vw;
    background-color: #1456FF;
    border-radius: 1vw;
    color: white;
    font-size: 1.5vw;
    font-family: 'Loew_medium';
    letter-spacing: -0.88px;
}

.rule_text {
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    margin-top: 3vw;
    margin-bottom: 3vw;

}

.rule_text p {
   font-size: 1.14vw;
    font-family: 'Loew_medium';
    letter-spacing: 0px;
    color: #0B0B0B;
    text-transform: capitalize;
    width: 62vw;
   line-height: 2.9vw;
    margin: 0.5vw;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.rule_text p:first-letter {
    text-transform: uppercase;
}

.rule_text p span {
    font-family: 'Loew_extrabold' !important;
    font-size: 1.3vw !important;
    letter-spacing: -0.75px !important;
}

.inside_rules:nth-child(3) .rule_text p {
    margin-bottom: 1.5vw !important;

}

.players_list_content {

    margin-bottom: 5vw !important;
}

.team {
    display: flex;
    justify-content: space-between;
    background-color: #F5F5F5;
    width: 60vw;
    align-items: center;
    border-radius: 1vw;
    padding: 1vw 2vw;
    margin-bottom: 1vw;
}

.player {
    width: 45vw;
}

.player p {
    font-family: 'Loew_medium';
    text-transform: capitalize;
    font-size: 1vw;
    line-height: 0vw
}

.bottom {
    background-color: #0B0B0B;
    color: #0B0B0B;
    height: 30vh;
    width: 100vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.bottom img {
    width: 14vw;
}

.bottom>div:nth-child(2)>div {
    display: flex;
    width: 2.5vw;
    height: 2.5vw;
    border-radius: 50%;
    background-color: white;
    /* padding: 0.7vw; */
    text-decoration: none;
    justify-content: center;
    align-items: center;
    margin-right: 1vw;
}

.bottom>div:nth-child(2)>div a {
    color: #0B0B0B;
}

.bottom>div:nth-child(2) {
    display: flex;
}

.fa-solid, .fas {
    line-height: 0vw !important;
}




.register_button_mobile {
    
    background-color: #1456FF;
    padding: 0.5vw 0.2vw;
    width: 14vw;
    height: 4vw;
    border-radius: 1.5vw;
    /* width: 10vw; */
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0vw;
    margin-top: 0vw;
    justify-content: center;
        line-height: 2vw;

}

.register_button_mobile a {
font-family: 'Loew_medium';
    font-size: 1.2vw;
    letter-spacing: -0.53px;
    text-align: center;

}

.register_button_mobile::hover a {
    font-family: 'Loew_heavy';
    font-size: 1.2vw;
    letter-spacing: -0.53px;
}

.content_register {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.category p {
    font-family: 'Loew_extrabold';
    font-size: 1.5vw;
}

@media (max-width : 1150px) {
    .registration img {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    body {
        background-image: url(../images/backgroundmobile2@2x.png);
        background-size: 100vw;
        background-position-x: center;

    }

    .head {
        height: 32vw;
    }

    .logo {
        width: 34vw;
    }

    .header {
        height: 41vw;
    }

    .content_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 85vw;
        flex-direction: column;
    }

    .title_header {
        width: 85vw;
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
        justify-content: center;
    }

    .content_header h1 {
        width: 85vw;
        font-size: 8.3vw;
        line-height: 8vw;
        margin-top: 2vw;
        text-align: center;

    }

    .content_register {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 85vw;
        margin-top: -4vw;
        flex-direction: column;
    }
    .inside_nav {
        display: flex;
        align-items: center;
        justify-content: space-around;
        flex-direction: row;
        width: 60vw;
        background-color: white;
        height: 6vw;
        border-radius: 1vw;
        box-shadow: 7px 10px 20px rgba(0, 0, 0, 0.09);
    }
    .inside_nav >div {
        font-size: 1.5vw;
        font-family: 'Loew_medium';
        height: 4.5vw;
        display: flex;
        align-items: center;
        width: 17vw;
        justify-content: center;
        letter-spacing: -0.4px;
        border-radius: 0.5vw;
    }

    .content_register>div {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .content_header p {

        letter-spacing: -0.53px;
        font-size: 2.3vw;
        line-height: 4vw;
    }

    .fa-solid {
        margin-right: 0.6vw;
        margin-left: 2.5vw;
    }





    .register_button_mobile {
        background-color: #1456FF;
        padding: 3.5vw 2.2vw;
        width: 33vw;
        border-radius: 1.5vw;
        /* width: 10vw; */
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 5vw;
        margin-top: 5vw;
    }

    .register_button_mobile a {
        font-family: 'Loew_heavy';
        font-size: 2.7vw;
    }

    .content_header img {
        width: 80vw;
        border-radius: 2vw;
    }

    .content_details {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 75vw;
        flex-direction: column;
        align-content: center;
    }

    .content_details>div>div {
        margin-bottom: 3vh;
        display: flex;
        flex-direction: column;
        align-content: center;
        align-items: center;
    }

    .content_details>div:nth-child(2) {
        margin-left: 0vw;
    }

    .content_details p {

        font-size: 2.3vw;

    }

    .content_details h1 {
        font-size: 4.5vw;
        line-height: 5vw;
        text-align: center;
    }

    .inside_note h1 {

        font-size: 3.7vw;

        line-height: 4vw;
    }

    .inside_note {

        border-radius: 3vw;
        width: 49vw;
        height: 32vw;

    }

    .inside_note p {
        font-family: 'Loew_thin';

        font-size: 2.3vw;

    }

    .bottom {
        margin-top: 6vw;
        /* margin-bottom: 6vw; */
        display: flex;
        height: 68vw;
        justify-content: space-evenly;
        align-items: center;
        flex-direction: column-reverse;
    }

    .bottom>div:nth-child(2)>div {
        font-size: 4vw;
        width: 9.5vw;
        height: 9.5vw;
        margin-right: 3vw;
    }

    .bottom img {
        width: 50vw;
    }
}