:root {
    --content-width: 1200px;
   /* --desktop-min-width: 1024px;
    --tab-min-width: 650px;*/
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html{
    height: 100%;
}

body{
    height: 100%;
}

.m-r0{
    margin-right: 0!important;
}
.m_b0{
    margin-bottom: 0!important;
}

.bold{
    font-weight: bold;
}

.divider {
    width: 100%; 
    height: 2.25rem;
}

.display_none{
    display: none;
}

.prevent-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
  }

.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.last_p{
    margin-bottom: 6.25rem!important;
}

.page {
    height: 100%;
    display: grid;
    grid-template-areas: "header" "content" "footer";
    grid-template-rows: 6.25rem auto 12rem;/*9.375rem auto 15.125rem;*//*6.25rem auto 13.18rem;*/
}

.header{
    width: 100%;

    background-color: #49225B;
    grid-area: header;

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

.header_container,
.content_container,
.footer_container{
    width: 100%;
    height: 100%;
}
    
.content_container {
    max-width: var(--content-width);
}

.header_container{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}


.header .logobox {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    margin-left: 6.25rem;
    /*margin-left: 2.5rem;*/
}

.header .logobox .logo {
    background: url('assets/logo.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 5.125rem;
    height: 3.5rem;
    margin-right: 0.5rem;
    /*width: 4.8rem;
    height: 3.29rem;
    margin-right: 0;
    flex-shrink: 0;*/
}
.header .logobox span {
    font-family: "Rubik", sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 2.25rem;
    text-align: center;
    color: white;

    /*font-size: 1.25rem;
    line-height: 1.25rem;*/
}


.buttonsbox {
    /*background-color: #23142B;
    border: 2px solid #603A73;
    border-radius: 1rem;
    width: 19.37rem;
    height: 5.375rem;*/
    width: 10.125rem;
    height: 1.875rem;
    margin-right: 6.25rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;

    /*width: 11.31rem;
    height: 3.437rem;
    margin-right: 2.5rem;*/
}

.buttonsbox .facebook_button{
    background: url('assets/Facebook_Logo.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 1.8rem;
    height: 1.8rem;
    /*width: 1.56rem;
    height: 1.56rem;*/
}
.buttonsbox .instagram_button{
    background: url('assets/Instagram_Logo.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 1.8rem;
    height: 1.8rem;
    /*width: 1.56rem;
    height: 1.56rem;*/
}
.buttonsbox .youtube_button{
    background: url('assets/YouTube_Logo.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 2.6rem;
    height: 1.8rem;
    /*width: 2.18rem;
    height: 1.56rem;*/
}

.buttonsbox .facebook_button:hover,
.buttonsbox .instagram_button:hover,
.buttonsbox .youtube_button:hover {
    cursor: pointer;
}

#english_textinfo_id{
    opacity: 1;
    transition: opacity 1s;
}
#arabic_textinfo_id{
    opacity: 1;
    transition: opacity 1s;
    direction: rtl;
}

.content{
    width: 100%;
    background: linear-gradient(45deg,#18121b,#4a225c 42%,#3c2147 55%,#2a1134);
    grid-area: content;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.content .language_buttonbox{
    background-color: #23142B;
    border: 2px solid #603A73;
    border-radius: 1rem;
    width: 29.75rem;
    height: 4.75rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    flex-shrink: 0;

    margin-top: 6.25rem;
    margin-bottom: 6.25rem;
}

.content .language_buttonbox .english{
    background-color: #49225B;
    border-radius: 12px;
    width: 13.81rem;
    height: 3.125rem;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.content .language_buttonbox .arabic{
    background-color: #49225B;
    border-radius: 12px;
    width: 13.81rem;
    height: 3.125rem;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.content .language_buttonbox .english span,
.content .language_buttonbox .arabic span {
    font-size: 1.875rem;/*30px;*/

    font-family: "Rubik", sans-serif;
    font-weight: normal;

    color: white;
}

.content .language_buttonbox .active{
    background-color: transparent;
}

.content .language_buttonbox .english:hover,
.content .language_buttonbox .arabic:hover{
    cursor: pointer;
}

.content .textinfo {
    width: calc(100% - 13.5rem);
    max-width: calc(var(--content-width) - 13.5rem);
}

.content .textinfo h1 {
    font-family: "Vazirmatn", sans-serif;
    font-size: 2.875rem;/*66px;*/
    font-weight: bold;
    line-height: 100%;

    color: white;

    margin-bottom: 3.75rem;/*2.25rem*/
}
.content .textinfo h2 {
    font-family: "Vazirmatn", sans-serif;
    font-size: 1.875rem;
    font-weight:bolder;
    line-height: 100%;

    color: white;

    margin-bottom: 0.625rem;
}

.content .textinfo h3 {
    font-family: "Vazirmatn", sans-serif;
    font-size: 1.5rem;
    font-weight:bolder;
    line-height: 100%;

    color: white;

    margin-bottom: 0.625rem;
}

.content .textinfo p {
    font-family: "Vazirmatn", sans-serif;
    font-size: 1.375rem;
    margin-bottom: 1rem;
    color: white;
    line-height: 2rem;
}

.content .textinfo span,
.content .textinfo li,
.content .textinfo a {
    font-family: "Vazirmatn", sans-serif;
    font-size: 1.375rem;
    margin-bottom: 3rem;
    color: white;
    line-height: 2rem;
}

.content .textinfo li {
    margin-bottom: 0;
    list-style: inside;
}

.content .textinfo a{
    text-decoration: none;
    color: rgb(96 165 250);
}



.androidPWA:hover,
.applePWA:hover{
    cursor: pointer;
}



.footer{
    width: 100%;
    background-color:  #49225B;
    grid-area: footer;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.footer_container .desktop-footer,
.footer_container .tab-footer,
.footer_container .mobile-footer{
    width: 100%;
    height: 100%;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    display: none;
}

.footer_container .desktop-footer{
    display: flex;
    justify-content: space-evenly;
}

.footer_container .top_floor{
    width: 100%;
    max-width: 42.4rem;
    height: 2.25rem;
    
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /*background-color: green;*/
}

.footer_container .top_floor .link a{
    font-family: "Rubik", sans-serif;
    font-size: 1.125rem;/*18px;*/
    font-weight: 400;
    line-height: 2rem;/*36px;*/
    text-align: center;
    color: white;
    text-decoration: none;
}

.footer_container .top_floor .link a:hover{
    cursor: pointer;
    text-shadow: white 0 1px 10px;
}

.footer_container .ground_floor{
    width: 100%;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.footer_container .ground_floor .left {
    width: calc(50% - 9.685rem - 6.25rem);

    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: start;
    /*padding-left: 6.25rem;*/
}

.footer_container .ground_floor .right {
    width: calc(50% - 9.685rem - 6.25rem);

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: end;

    /*padding-right: 6.25rem;*/
}
.footer_container .ground_floor .left span,
.footer_container .ground_floor .right span {
    font-family: "Rubik", sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 110%;
    text-align: center;
    color: white;
}



@media screen and (max-width: 1024px){


    .header .logobox {
        margin-left: 4.3rem;
    }

    .header .buttonsbox{
        margin-right: 4.3rem;
    }
    
    .header .logobox .logo {
        width: 4.8rem;
        height: 3.29rem;
        margin-right: 0;
        flex-shrink: 0;
    }
    .header .logobox span {
        font-size: 1.25rem;
        line-height: 1.25rem;
    }

    .content .textinfo h1 {
        font-size: 2.75rem;
    }
    .content .textinfo h2 {
        font-size: 1.5rem;
    }
    
    .content .textinfo p,
    .content .textinfo span,
    .content .textinfo li,
    .content .textinfo a {
        font-size: 1.125rem;
        line-height: 1.75rem;
    }
        
    .content .textinfo p {
        margin-bottom: 1.5rem;
    }

    .content .language_buttonbox{
        border-radius: 0.5rem;
        width: 22.18rem;
        height: 3.43rem;
    
        margin-top: 4.375rem;
        margin-bottom: 4.375rem;
    }


    .content .language_buttonbox .english{
        background-color: #49225B;
        border-radius: 5px;
        width: 10.31rem;
        height: 2.31rem;
    
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
    .content .language_buttonbox .arabic{
        background-color: #49225B;
        border-radius: 5px;
        width: 10.31rem;
        height: 2.31rem;
    
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .content .language_buttonbox .active{
        background-color: transparent;
    }


    .content .language_buttonbox .english span,
    .content .language_buttonbox .arabic span {
        font-size: 1.375rem;
    }
    

    .footer_container .top_floor {
        width: 100%;
        max-width: 42.4rem;
        padding: 0 3.625rem;
    }

    .footer_container .ground_floor .left {
        width: calc(50% - 5.655rem - 3.625rem);
    
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: start;
    }
    
    .footer_container .ground_floor .right {
        width: calc(50% - 5.655rem - 3.625rem);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: end;
    }

    .footer_container .top_floor .link{
        font-size: 1rem;
    }

    .footer_container .ground_floor .left span,
    .footer_container .ground_floor .right span {
        font-size: 0.87rem;
        line-height: 1.375rem;
    }

}

@media screen and (max-width: 700px){
    .footer_container .ground_floor .right{
        width: calc(50% - 5.655rem - 2.5rem);
    }
}


@media screen and (max-width: 650px){

    .page {
        grid-template-rows: 3.125rem auto 12.25rem;
    }

    .header .logobox {
        margin-left: 1.875rem;
    }

    .header .logobox .logo {
        width: 2.7rem;
        height: 1.875rem;
        margin-right: 0;
        flex-shrink: 0;
        background-size: contain;
    }

    .header .logobox span {
        font-size: 0.825rem;
        line-height: 100%;
    }


    .header .buttonsbox{
        width: 7rem;
        margin-right: 1.875rem;
    }

    .buttonsbox .facebook_button,
    .buttonsbox .instagram_button,
    .buttonsbox .youtube_button{
        height: 1.5rem;
        width: 1.5rem;
    }

    .buttonsbox .youtube_button{
        height: 1.5rem;
        width: 2.06rem;
    }

    .footer_container .desktop-footer {display: none;}
    
    .footer_container .mobile-footer {
        display: flex;
        flex-direction: row;
        padding: 1.875rem 2.25rem;
    }

    .footer_container .mobile-footer .mobile-footer-col-left,
    .footer_container .mobile-footer .mobile-footer-col-right{
        height: 100%;
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /*background-color: yellow;*/
    }
    .footer_container .mobile-footer .mobile-footer-col-right{
        align-items: end;
    }
    .footer_container .mobile-footer .mobile-footer-col-left{
        align-items: start;
    }

    .footer_container .mobile-footer .mobile-footer-col-right .link  a{
        font-family: "Rubik", sans-serif;
        font-size: 0.75rem;
        font-weight: normal;
        line-height: 1rem;
        text-align: center;
        color: white;
        text-decoration: none;
    }


    .footer_container .mobile-footer .mobile-footer-col-left .buttonsbox{width: 7rem;}
    .footer_container .mobile-footer .mobile-footer-col-left span {
        font-family: "Rubik", sans-serif;
        font-size: 0.75rem;
        font-weight: normal;
        line-height: 1rem;
        text-align: center;
        color: white;
        text-decoration: none;
    }

    .storylink{
        display: flex;
        flex-direction: column;
        align-items: start;
        line-height: 1rem;
    }


    /*-----------*/


    .content .language_buttonbox{

        border-radius: 1rem;
        width: 17.81rem;
        height: 2.75rem;

        margin-top: 3.125rem;
        margin-bottom: 3.125rem;
    }

    .content .language_buttonbox .english,
    .content .language_buttonbox .arabic{
        border-radius: 5px;
        width: 8.25rem;
        height: 1.875rem;
    }
  
    .content .language_buttonbox .english span,
    .content .language_buttonbox .arabic span {
        font-size: 1.125rem;
    }

    .content .textinfo {
        width: calc(100% - 4.75rem);
        /*max-width: calc(var(--content-width) - 4.75rem);*/
    }


    .content .textinfo h1 {
        font-size: 1.75rem;
        margin-bottom: 3rem;
    }
    .content .textinfo h2 {
        font-family: "Vazirmatn", sans-serif;
        font-size: 1.125rem;
        font-weight:bolder;
        line-height: 100%;
    
        color: white;
    
        margin-bottom: 0.56rem;
    }
    
    .content .textinfo p,
    .content .textinfo span,
    .content .textinfo li,
    .content .textinfo a {
        
        font-size: 0.875rem;
        margin-bottom: 1.3rem;
        color: white;
        line-height: 1.25rem;
    }
    
    .content .textinfo li {
        margin-bottom: 0;
        list-style: inside;
    }
    
    .content .textinfo a{
        text-decoration: none;
        color: rgb(96 165 250);
    }

    .last_p{
        margin-bottom: 4.375rem!important;
    }

    .divider{
        height: 1.3rem;
    }
    
}