*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
nav{
    display:flex;
    justify-content:space-around;
    align-items:center;
    height:11.5vh;
    background-color:#00736b;
    background-image:url(images/wallpaper.png);
    background-repeat: no-repeat;


}
.logo img{
    width: 210px;
}
.national_day img{
    width:73px;
    height: 73px;;
}

.nav-links{
    display:flex;
    justify-content:space-around;
    width:45%;
    direction:rtl;
    z-index: 2;
}
.nav-links li{
    list-style:none;
}
.nav-links a{
    color:rgb(230,230,230);
    text-decoration:none;
    font-weight:bold;
    font-size:18px;
}
.nav-links a:hover{
    color:white;
}
.burger{
    display:none;
    cursor:pointer;
}
.burger:hover{
    color:white;
}
.burger div{
    width:25px;
    height:2px;
    background-color:rgb(241, 236, 236);
    margin:5px;
}
#platform{
    width:100%;
    padding: 70px 0;
    background:#f1eeee;
    background-image:url(images/black-thread-light.png);


}


.social-icon {
    position:absolute;
    top:13%;

}
.title-text{
    text-align:center;
    padding-bottom:25px;
}
.title-text p{
    margin:auto;
    font-size:15px;
    color:#388175;
    font-weight:bold;
    position:relative;
    z-index:1;
    display:inline-block;
}
.title-text p::after{
    content:'';
    width:50px;
    height:35px;
    background: linear-gradient(#388175,#fff);
    position:absolute;
    top:-20px;
    left:0;
    z-index:-1;
    transform:rotate(10deg);
    border-top-left-radius:35px;
    border-bottom-right-radius:35px;
}
.title-text h1{
    font-size:25px;
    color:rgb(92, 92, 92);
}
.title-text a{
    text-decoration:none;
}
.title-text img{
    align-items: center;
    width:67px;
    height:60px;
    margin:6px auto;
    position:relative;
    display:flex;
    flex-wrap:wrap;
    text-align:center;
}

.social-icon ul{
    position:absolute;
    width:100px;
    overflow: hidden;
}
.social-icon li{
    list-style-type: none;
    padding:8px;
    transition:0.6s;
    color:#388175;
    position:relative;
}.social-icon li i{
    font-size:25px;
}
.social-icon li:hover{
    padding:8px 30px;
}
/*.social-icon .fa-brand-facebook:hover {
    color:#3b5998;
}
.social-icon .fa-brands fa-x-twitter:hover{
    color:#04a996 ;
}
.social-icon .fa-youtube-play:hover{
    color:#ff0000;
}
.social-icon .fa-snapchat-square:hover{
    color:#fffc00;
}
.social-icon .fa-whatsapp:hover{
    color:#00bb2d;
}
.social-icon .fa-map-marker:hover{
    color:#dd4b3e;
}
.social-icon .fa-instagram:hover{
    color:#ffdf9e;
}*/
/*new code for comblain box*/
/*start code*/
.comblain {
            direction: rtl;
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            margin: auto;
        }
        .comblain.label {
            direction: rtl;
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }
        .comblain.text[type="text"],
        .comblain.input[type="email"],
        .comblain.textarea{width: calc(100% - 20px);}
        select {
            
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box; /* Ensures padding doesn't add to width */
        }
        .comblain.textarea {
            resize: vertical; /* Allows vertical resizing */
            min-height: 100px;
            
        }
        .comblain.input[type="submit"] {
            direction: rtl;
            background-color: #007bff;
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        .combalin.input[type="submit"]:hover {
            background-color: #0056b3;
        }
/*end code*/

#strategy{
    width:100%;
    padding: 40px 0;
    margin: auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    text-align:center;
    background: linear-gradient(#cecccc,#fff);
    background-image:url(images/black-thread-light.png);
    margin-bottom:20px;
    box-shadow:0 10px 50px 2px rgb(206, 203, 203);
}
.strategy-row{
    width:90%;
    margin:20px auto;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
}
.vision,.message,.goals,.values{
    flex-basis:21%;
    padding: 7px;
    margin-bottom: 20px;
    border:1px solid rgb(75, 74, 74);
    /* background-color:#f7f2e4; */
    border-radius: 5px;
    box-shadow: 15px 15px 5px 0 #23242414;
    font-weight:bold;
    text-align: right;
    direction: rtl;

}

.vision h2,.message h2,.goals h2,.values h2{
    color:#388175;
}
.vision p,.message p,.goals p,.values p{
    color:#06155f;
}

#about_us{

        width:100%;
        padding: 40px 0;
        margin: 10px auto;
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between;
        align-items:center;
        text-align:center;
        background: linear-gradient(#cecccc,#fff);
        background-image:url(images/black-thread-light.png);
        margin-bottom:20px;
        box-shadow:0 10px 50px 2px rgb(206, 203, 203);

}
.about-box{
    width:90%;
    margin:20px auto;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;



}
.g-members-box,.reports-box,.systems-box,.budgets-box{
    margin-right:20px;
    margin-left:20px;
    margin-top:30px;

}
.g-members-box a,.reports-box a,.systems-box a,.budgets-box a{
        text-decoration: none;
        margin:auto;
        font-size:15px;
        /* color:#f3b701; */
        font-weight:bold;
        position:relative;


}
.g-members-box p, .reports-box p,.systems-box p,.budgets-box p{
    margin:auto;
    font-size:15px;
    color:#388175;
    font-weight:bold;
    position:relative;

}
.g-members-box i, .reports-box i,.systems-box i,.budgets-box i,.budgets-box i{
    margin:auto;
    margin-top:8px;
    color:#388175;
    font-weight:bold;
    position:relative;

}


/* .g-members-box p::after,.reports-box p::after,.systems-box p::after,.budgets-box p::after{
    content:'';
    width:40px;
    height:30px;
    background: linear-gradient(#388175,#fff);
    position:absolute;
    top:-15px;
    left:0;
    z-index:-1;
    transform:rotate(10deg);
    border-top-left-radius:35px;
    border-bottom-right-radius:35px;
} */

.g-members-box h1,.reports-box h1,.systems-box h1,.budgets-box h1{
    font-size:25px;
    color:rgb(92, 92, 92);
}
/* here */

.twitter-box{
    width:650px;
    height:650px;
    margin:20px auto;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
    box-shadow: 0 5px 5px 3px #b2b2b3;
    right:250px;

}
.project_report-box{
    width:650px;
    height:650px;
    margin:200px 300px 200px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
    box-shadow: 0 5px 5px 3px #b2b2b3;
    right:250px;

}
/* #aside{


    width:90%;
    align-items: flex-start;
    display:flex;
    flex-wrap: wrap;
    justify-content: inherit;
    right:-30vh;
    height:270px;
    margin:10px;
    padding:10px;
    background: color #b8b8b8;
    border:1px solid #333;
    position: relative;
    z-index: 30;
} */

.Ramadan video{
    width:35%;
    height:100%;
    margin:20px auto;
    left:32.5%;
    padding:15px;
    border:1px solid #333;
    position:relative;
}

.widget
{
    width:40%;
    background-color:#b8b8b8;
    border:1px solid #333;
    margin:20px auto;
    padding:10px;
	position: relative;
	z-index: 31;

}

.widget .title
{
    background-color:#222;
    color:#fff;
    padding:5px 0;
    text-align:center;
}
.project-rep{
    width:1000px;
    padding:10px;

}
.project-rep img{
    width:100%;
    margin:2px auto;
    left:40vh;
    position:relative;

}
.tvmiddel{
    width:100%;
    align-items: center;;
    /* margin-right:2%; */
    /* margin-top:140px; */
   /*margin-right:10px auto ;*/
    border:0.50px solid silver;
}

.widget .section
{

    text-align:center;
}

.widget .section h4
{
    background-color:#fff;
}
.widget .section img
{
	width:100%;
	height:90%;
}
#footer{
    display:flex;
    justify-content:space-around;
    align-items:center;
    height:13vh;
    background-color:rgb(85, 84, 84);
    background-image:url(images/wallpaper1.png);
    position:inherit;

}
#footer .logo img{
   top:-3.5vh;
   left:65vh;
   position:relative;


}
#footer table{
    top:5vh;
    float:left;
    position: relative;
    left:-65vh;

}

#footer table tr td img{
   width:20;
   height:25px;
}
#footer table tr td{
    color:white;
    top:5vh;
}







@media screen and (max-width:1024px){
    .nav-links{
        width:50%;
    }
    #footer .Acounts table{
        left:5vh;
        top:-1vh;
    }
    #footer .logo img{
        display:none;
    }

}

@media screen and (max-width:768px){
    body{
        overflow-x:hidden;
        display:block;
    }
    .logo img{
        width:230px;
        height:75px;
    }
    .national_day img{
        width:140px;
        height:82px;
    }
    .nav-links{
        position:absolute;
        right:0px;
        height:92vh;
        top: 11vh;
        background-color:rgb(124,124,124);
        background-image:url(images/wallpaper1.png);
        display:flex;
        flex-direction:column;
        align-items:center;
        width:50%;
        transform:translateX(100%);
        transition:transform 0.5s ease-in;
        z-index:999;
    }
    .nav-links a{
        font-size:15px;
        margin-top:auto;
    }
    .nav-links li{
        opacity:0;

    }
    .burger{
        display:block;
    }

    .vision,.message,.goals,.values{
        flex-basis:100%;
    }
    .g-members-box,.reports-box,.systems-box,.budgets-box{
        flex-basis:100%;
        margin:20px;
        position: relative;
    }
    .g-members-box p,.reports-box p,.systems-box p,.budgets-box p{
        margin-right: 40px auto;
        margin-top:8px;
    }
    .g-members-box p::after,.systems-box p::after,.budgets-box p::after{
        margin-left:130px;
    }
    .reports-box p::after{
        margin-left:135px;
    }
    .g-members-box i,.reports-box i,.systems-box i,.budgets-box i{
        margin-top:8px;
    }
    .twitter-box{
        width:410px;
        margin:20px auto;
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
        flex-wrap:wrap;
        box-shadow: 0 5px 5px 3px #b2b2b3;
        right:250px;

    }
    .project-rep img{
        width:400px;
        margin:4px auto;
        left:1.5vh;
        align-items:center;
        right:250px;
    }
    .tvmiddel{
        flex-basis:100%;
        margin-bottom:10px;
        width:395px;
    }
    .Ramadan video{
        width:410px;
        margin:20px auto;
        left:2.3vh;
        align-items: center;
        box-shadow: 0 5px 5px 3px #b2b2b3;
        right:250px;
    }

    .widget{
        width:90%;
    }
}
.nav-active{
    transform:translateX(0%);
}




@keyframes navLinkFade{
    from{
        opacity:0;
        transform: translateX(50px);
    }
    to{
        opacity:1;
        transform:translateX(0px);
    }
}