@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');

:root{
    --main-color: #2E3290;
    --second-color: #0773b680;
    --light-font-color: #bec2ff;
    --bold-font-color: #111827;
    --background-color: #f0f0f5;
    --background-white: #FFFFFF;
}
html{
    scroll-behavior: smooth;
}
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    font-family: 'Cairo', sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:"slnt" 0;
}
body{
    min-height: 100vh;
    background-color: var(--background-color);
    color: var(--bold-font-color);
}
body p{
    font-size: small;
}


/*زر الرجوع للاعلى*/
#BackToTop{
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--second-color);
    border-radius: 50%;
    border: transparent;
    width: 40px;
    height: 40px;
    font-size: 18px;
    cursor: pointer;
    padding: 5px;
    transition: all 0.3s;
}
#BackToTop:hover{
    background: var(--main-color);
    scale: 1.09;
    animation:LightShadow 5s infinite;
}


/*زر عائم لمواقع التواصل الاجتماعي*/
menu {
	--size: 3rem;
	--redius: 5rem;
	--padding: 1rem;
	position: fixed;
	bottom:var(--padding);
    left: 20px;
    z-index: 110;
}
	menu > * {
		position: absolute;
		display: grid;
		place-content: center;
		background-color: var(--light-font-color);
		color: var(--background-color);
		border-radius: 50px;
		text-decoration: none;
		box-shadow: 0px 0px 9px var(--second-color);
		margin: 15px;
        transition: all ease-in-out 250ms;
	}
	menu > .Action {
		--factor: 1;
		opacity: 1;
		height: var(--size);
		width: var(--size);
		margin: 5px;
		left: calc(.55 *var(--size));
		bottom: calc(.30 *var(--size));
		transform: translateY(calc( -1* var(--redius) * var(--factor)));
		transition: transform 250ms ease-in-out,opacity 250ms ease-in-out,scale 150ms ease-in-out;
	}
    menu > .Action >img{
        height:calc(var(--size));
        width :calc(var(--size));
        padding: 10px;
    }
		menu > .trigger:hover, menu > .Action:hover {
			box-shadow:  var(--light-font-color) 0px 0px 25px;
            scale: 1.03;
		}
	menu > .Action:nth-child(1) {
		--redius: 5rem;
		transition-delay: 500ms;
	}
	menu > .Action:nth-child(2) {
		--redius: 7rem;
		transition-delay: 450ms;
	}
	menu > .Action:nth-child(3) {
		--redius: 9rem;
		transition-delay: 400ms;
	}
	menu > .Action:nth-child(4) {
		--redius: 11rem;
		transition-delay: 350ms;
	}
	menu > .Action:nth-child(5) {
		--redius: 13rem;
		transition-delay: 300ms;
	}
	menu > .Action:nth-child(6) {
		--redius: 15rem;
		transition-delay: 250ms;
	}
	menu > .Action:nth-child(7) {
		--redius: 17rem;
		transition-delay: 200ms;
	}
    menu > .Action:nth-child(8) {
		--redius: 19rem;
		transition-delay: 150ms;
	}
    menu > .Action:nth-child(9) {
		--redius: 21rem;
		transition-delay: 100ms;
	}
    menu > .Action:nth-child(10) {
		--redius: 23rem;
		transition-delay: 50ms;
	}
menu> .trigger{
	width: calc(1.6*var(--size));
	height: calc(1.6*var(--size));
	bottom: 0;
	left: 5px;
    background-color: rgb(20, 212, 20);

}
menu.Open> .Action{
	--factor:0;
	opacity : 0;
}
menu > .trigger>img{
	width: calc(1.6*var(--size));
	height: calc(1.6*var(--size));
    padding: calc(var(--padding));
}
menu > .trigger > img {
	transition: transform 650ms ease-in-out;
}
menu.Open > .trigger > img {
	transform:rotate(0deg);
}
@media screen and (max-width: 991px) {
	menu > .Action {
		width: calc(var(--size) * 0.8);
		height: calc(var(--size) * 0.8);
		left: calc(.58 *var(--size));
		bottom: calc(.05 *var(--size));
		margin:0;
	}
    menu > .Action >img{
        padding: calc(0.7*var(--padding));
    }
	menu > .trigger {
		width: calc(var(--size) * 1.2);
		height: calc(var(--size) * 1.2);
	}
    menu > .trigger>img{
        width: calc(1.2*var(--size));
        height: calc(1.2*var(--size));
        padding: calc(0.6*var(--padding));
    }
}







/* Header and Navbar */
header{
    display: flex;
    position: fixed;
    width: 100%;
    top: 0;
    right: 0;
    z-index: 1000;
    align-items:center;
    justify-content: space-between;
    padding: 2px 2%;
    transition: all .50s ease;
    background-color: var(--background-white);
    box-shadow: var(--light-font-color) 0px 5px 15px;
}
header button{
    background: var(--main-color);
    border: 0px;
    border-radius: 5px;
    text-justify: center;
    padding: 5px;
}
header button:hover{
    box-shadow: var(--second-color) 0px 0px 10px;
    cursor: pointer;
    transition: all ease-in-out 0.3s;
}
header button p{
    color: #FFFFFF;
    font-weight: 100;
    font-size: small;
    margin: 0px 15px; 
}
header>.logo>img{
    height: 55px;
    padding: 5px;
}
header>.logo{
    display: flex;
    align-items: right;
    right: 10px; 
    margin:2px 5px 0px 0;
}
.navbar{
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: 0px ;
}
.navbar a{
    color: var(--main-color);
    font-size: medium;
    font-weight: 16px;
    padding: 2px 0px;
    margin: 0px 20px;
    border-bottom: transparent 2px solid;
    transition: all .50s ease;
}
.language{
    display: none;
}
.navbar a:hover{
    text-shadow: #0773b6 2px 2px 5px;
}
.navbar a.active{
    text-shadow: var(--main-color) 2px 2px 5px;
    border-bottom: var(--main-color) 2px solid;
    transition:  0.50s ease-in-out;
}
.main{
    display: flex;
    align-items: center;
}
#menu-icon{
    margin: 10px 0 25px 0;
    color: var(--main-color);
    font-size: 35px;
    cursor: pointer;
    z-index: 10001;
    display: none;
}
@media(max-width:1280px){
    .header{
        padding: 14px 2%;
        transition: .2s;
    }
    .navbar a{
        padding: 5px 0px;
        margin: 0px 20px;
    }
}
@media(max-width:991px){
    header{
        height: 70px;
        background-color: var(--background-color);
    }
    header button{
        display: none;
    }
    .language{
        display: block;
    }
    #menu-icon{
        display: block;
    }
    .navbar{
        position: absolute;
        top: 100%;
        left: -100%;
        width: 250px;
        height: 52vh;
        background-color: var(--main-color);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        border-radius: 10px;
        transition: all .50s ease;
    }
    .navbar a{
        color: var(--background-color);
        font-size: small;
        display: block;
        margin: 12px 0px;
        padding: 0px 25px;
        transition: all .50s ease;
    }
    header>.logo>img{
        height: 50px;
    }
    .navbar a:hover{
        color: var(--light-font-color);
        transform: translateY(-5px);
    }
    .navbar a.active{
        color: var(--light-font-color);;
        text-shadow: var(--second-color) 2px 2px 5px;
        border-bottom: var(--light-font-color) 2px solid;
        transition: all .50s ease-in-out;
        background-color: var(--second-color);
    }
    .navbar.open{
        left: 2%;
    }
}





















/* Slide image*/
.Slides{
    height: 95vh;
    overflow: hidden;
    position: relative;
    box-shadow: var(--main-color) 0px 5px 15px,;
}
.Slide{
    justify-items: center;
    align-items: center;
    position: absolute;
    height: 100%;
    opacity: 0;
    inset:  0;
    animation:  slide-show 40s infinite;
}
.Slide-2{
    animation-delay: 4s;
}
.Slide-3{
    animation-delay: 8s;
}
.Slide-4{
    animation-delay: 12s;
}
.Slide-5{
    animation-delay: 16s;
}
.Slide-6{
    animation-delay: 20s;
}
.Slide-7{
    animation-delay: 24s;
}
.Slide-8{
    animation-delay: 28s;
}
.Slide-9{
    animation-delay: 32s;
}
.Slide-10{
    animation-delay: 36s;
}
.Slide img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.SlideH1{
    justify-items: right;
    align-content: center;
    position: absolute;
    height: 100%;
    width: 100%;
    inset:  0;
    background:linear-gradient(rgba(14, 13, 13, 0.233),rgba(255, 255, 255, 0.829),rgba(255, 255, 255, 0));
    z-index: 10;
}
.SlideH1 h1{
    font-size: 3rem;
    font-weight: bold;
    color: var(--main-color);
    margin-right: 50px;
    transition: all ease-in-out 0.50s;
    padding: 0px;
    line-height: 55px;
}
.SlideH1 p{
    font-size: 1rem;
    font-weight: bold;
    color: var(--main-color);
    margin-right: 50px;
    transition: all ease-in-out 0.50s;
    padding: 0px;
    line-height: 45px;
}
.SlideH1 button{
    background: var(--main-color);
    border: 0px;
    border-radius: 5px;
    margin-right: 270px;
    text-justify: center;
    margin-top: 20px;
    z-index: 2;
    transition: all ease-in-out 0.3s;
}
.SlideH1 button:hover{
    box-shadow: var(--second-color) 0px 0px 10px;
    cursor: pointer;
    background: linear-gradient(var(--second-color));

}
.SlideH1 button p{
    color: #FFFFFF;
    font-weight: 100;
    font-size: small;
    margin: 0px 15px; 
}


@keyframes slide-show{
    0%{
        opacity: 0;
    }
    5%{
        opacity: 1;
    }
    20%,
    30%{
        opacity: 1;
        scale: 1.03;
    }
    50%{
        opacity: 0;
    }
}
@media(max-width:991px){
    .Slides{
        margin-top:70px ;
        height: 300px;
    }
    .SlideH1{
        justify-items: center;
    }
    .SlideH1 h1{
        font-size: medium;
        margin: 0;
        line-height: 20px;
    }
    .SlideH1 p{
        font-size: 10px;
        margin: 0;
        line-height: 25px;
    }
    .SlideH1 button{
        background: var(--main-color);
        margin: 20px 50px;
    }
    .SlideH1 button p{
        color: #FFFFFF;
        font-size: xx-small;
    }
    .SlideH1-3{
        justify-self: center;
    }
    .SlideCircile{
        width: 25px;
        height: 25px;
        margin: 0 5vw 0 0;
    }
    .SlideH1-3 img{
        width: 25px;
        height: 25px;
        padding: 5px;
    }
}




















/*about*/
.about{
    background-color: var(--background-white);
    justify-items: center;
    padding: 60px 0;
}
.about h1{
    border-bottom: var(--main-color) 3px solid;
    margin-bottom: 30px;
}
.AboutFatherDiv{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}
.AboutVideo{
    width: 570px;
    border-radius: 10px;
    box-shadow: var(--light-font-color) 0px 5px 10px;
    transition: all ease-in-out 0.5s;
}
.AboutVideo:hover{
    box-shadow: var(--bold-font-color) 0px 0px 20px;
    scale: 1.02;
}
.AboutLeftDiv{
    width: 570px;
}
.AboutSkills{
    margin:20px 0;
    display: flex;
    justify-content: space-evenly;
}
.AboutSkills-div{
    width: fit-content;
}
.AboutCircale{
    background-color: var(--second-color);
    height: 28px;
    width: 28px;
    border-radius: 50%;
    display: inline-block;
    margin: 0px 5px 10px 5px;
}
@media(max-width:991px){
    .about{
        text-align: right;
        padding: 20px;
    }
    .AboutLeftDiv{
        width: 100%;
    }
    .AboutVideo{
        width: 90vw;
        max-width: 570px;
    }
    .AboutSkills{
        display:block;
        margin: 10px 0;
        justify-content: space-evenly;
    }
    .AboutSkills-div{
        display:inline-flex;
        width: 100%;
    }
}
@media(max-width:575px){
    .about{
        text-align: center;
        padding: 10px;
    }
    .AboutVideo{
        width: 90vw;
    }
    .AboutFatherDiv{
        width: 90%;
    }
    .about h3{
        margin-top: 10px;
    }
    .AboutSkills{
        margin: 10px 0;
        display: grid;
    }
    .AboutSkills-div{
        width: 100%;
    }
}

























/*sectors*/
.sectors{
    justify-items: center;
    padding: 60px 0;
}
.sectors h1{
    border-bottom: var(--main-color) 3px solid;
    margin-bottom: 30px;
}
.sectors p{
    text-align: center;
}
.sectors h4{
    color: var(--background-color);
    padding: 0 10px 0 0;
}
.SectorCard  p{
    padding-right: 10px;
    text-align: start;
    color: var(--background-color);
}
.SectorCard h6{
    color: var(--light-font-color);
    padding: 5px;
}
.SectorItems{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-self: center;
    justify-content:space-evenly;
    width: 90%;
    margin-top: 30px;
}
.SectorCard{
    display: block;
    justify-items: right;
    align-items: start;
    text-align: right;
    width: 350px;
    height: 240px;
    margin: 5px;
    border-radius: 10px;
    transition: all ease-in-out 0.5s;
}
.SectorGradint{
    background:linear-gradient(rgba(0,0,0,0.2) ,rgba(0,0,0,0.2) ,rgba(0,0,0,0.4), rgba(0,0,0,0.7) );
    width: 100%;
    height: 100%;
    border-radius: 10px;
    align-content: flex-end;
    padding: 5px 0;
}
.SectorImg{
    position: absolute;
    opacity: 0.8;
    width: 350px;
    height: 240px;
    z-index: -1;
    border-radius:10px ; 
    image-rendering:optimizeSpeed;
    object-fit: cover;
    object-position: center;
}

.SectorCard:hover{
    scale: 1.05;
}
@media(max-width: 575px){
    .SectorCard{
        width: 70vw;
        height: calc(70vw);
    }
    .SectorImg{
        width: 70vw;
        height: calc(70vw/1.45);
    }
    .SectorGradint{
        background:linear-gradient(rgba(0,0,0,0.2)  ,rgba(0,0,0,0.4),  var(--bold-font-color),  var(--bold-font-color) );
        align-content: flex-end;
        padding: 10px;
    }    
}






























/*services*/
.services{
    margin: 50px;
    justify-items: center;
    padding: 60px 0;
}
.services h1{
    border-bottom: var(--main-color) 3px solid;
    margin-bottom: 30px;
}

.services h6{
    padding: 5px;
    text-align: center;
}
.ServicesItems{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-self: center;
    justify-content:space-evenly;
    width: 90%;
    margin-top: 30px;
}
.ServicesCard{
    display: block;
    justify-items: center;
    align-items: center;
    text-align: center;
    max-width: 250px;
    
    background-color: var(--background-white);
    box-shadow: var(--light-font-color) 0px 0px 5px;
    padding: 30px;
    margin: 5px;
    border-radius: 10px;
    transition: all ease-in-out 0.5s;
}
.ServicesCard:hover{
    background-color: var(--second-color);
    scale: 1.03;
    color: var(--background-white);
    box-shadow: var(--light-font-color) 0px 0px 25px,rgba(0,0,0,0.2) 0px 0px 15px,inset var(--second-color) 0px 0px 50px ;
}
.ServicesCircle{
    background-color: var(--second-color);
    height: 60px;
    width: 60px;
    border-radius: 50%;
    display: inline-block;
    padding: 10px;
    margin: 0px 5px 10px 5px;
    color: var(--background-color);

}
.ServicesImg{
    width: 40px;
    height: 40px;
}





























/*Choise Us*/
.ChoiseUs{
    justify-items: center;
    background-color: var(--background-white);
    border-radius: 20px;
    padding: 30px 0;
}
.ChoiseUs h1{
    border-bottom: var(--main-color) 3px solid;
    margin: 30px 0;
}
.ChoiseUs p{
    padding: 10px;
    text-align: center;
}
.choiseItem{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-self: center;
    justify-content:space-evenly;
    width: 90%;
    margin-top: 30px;
}
.choiseCard{
    display: block;
    justify-items: center;
    align-items: center;
    text-align: center;
    max-width: 250px;
    background-color: var(--background-color);
    padding: 30px;
    border-radius: 10px;
    transition: all ease-in-out 0.5s;
}
.choiseCard:hover{
    animation: LightShadow 10s infinite;
    scale: 1.03;
}
.ChoiseCircle{
    background-color: var(--second-color);
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: inline-block;
    margin: 0px 5px 10px 5px;
}
.ChoiseIcon{
    height: 50px;
    width: 50px;
    padding: 13px;
}





























.HowDoit{
    margin: 50px;
    justify-items: center;
    padding: 30px 0;
    text-align: center;
}
.HowDoit h1{
    border-bottom: var(--main-color) 3px solid;
    margin-bottom: 30px;
}
.HowDoit h6{
    padding: 5px;
    text-align: center;
    font-size: x-small;
}
.HowDoitItems{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-self: center;
    justify-content:space-evenly;
    width: 90%;
    margin-top: 30px;
}
.HowDoitCard{
    display: block;
    justify-items: center;
    align-items: center;
    text-align: center;
    width: 195px;
    height: 290px;
    background-color: var(--background-white);
    box-shadow: var(--light-font-color) 0px 0px 25px;
    padding: 15px;
    margin: 5px;
    border-radius: 10px;
    transition: all ease-in-out 0.5s;
    animation: ColorCard 20s infinite;
}
.HowDoitCircle{
    background-color: var(--second-color);
    height: 50px;
    width: 50px;
    border-radius: 50%;
    display: inline-block;
    padding: 11px;
    margin: 0px 5px 50px 5px;
    color: var(--background-color);
    font-weight: bold;
    animation: ColorCircle 20s infinite;
}
.HowDoitImg{
    position: fixed;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    width: 150px;
    height: 200px;
    margin-right:-45px ;
    margin-top: 60px;
    z-index: -1;
}

@media(max-width:991px){
    .HowDoitCard{
        width: 30vw;
    }
}
@media(max-width:575px){
    .HowDoitCard{
        width: 80vw;
    }
}
.HDC-2{
    animation-delay: 2s;
}
.HDC-3{
    animation-delay: 4s;
}
.HDC-4{
    animation-delay: 6s;
}
.HDC-5{
    animation-delay: 8s;
}
.HDC-6{
    animation-delay: 10s;
}
.HDC-7{
    animation-delay: 12s;
}
.HDC-8{
    animation-delay: 14s;
}
.HDC-9{
    animation-delay: 16s;
}
.HDC-10{
    animation-delay: 18s;
}
@keyframes ColorCircle{
    0%{
        background-color: var(--second-color);
        color: var(--background-white);
    }
    3%,
    10%{
        background-color: var(--background-white);
        color: var(--second-color);
        scale: 1.09;
    }
    13%{
        background-color: var(--second-color);
        color: var(--background-white);
    }
}
.HD-1{
    opacity: 1;
}
.HD-2{
    animation-delay: 2s;
    background-repeat: no-repeat;
    background-position: center;
}
.HD-3{
    animation-delay: 4s;
    background-repeat: no-repeat;
    background-position: center;
}
.HD-4{
    animation-delay: 6s;
    background-repeat: no-repeat;
    background-position: center;
}
.HD-5{
    animation-delay: 8s;
    background-repeat: no-repeat;
    background-position: center;
}
.HD-6{
    animation-delay: 10s;
    background-repeat: no-repeat;
    background-position: center;
}
.HD-7{
    animation-delay: 12s;
    background-repeat: no-repeat;
    background-position: center;
}
.HD-8{
    animation-delay: 14s;
    background-repeat: no-repeat;
    background-position: center;
}
.HD-9{
    animation-delay: 16s;
    background-repeat: no-repeat;
    background-position: center;
}
.HD-10{
    animation-delay: 18s;
    background-repeat: no-repeat;
    background-position: center;
}

@keyframes ColorCard{
    0%{
        background-color: var(--background-white);
    }
    3%,
    10%{
        background-color: var(--second-color);
        box-shadow: var(--second-color) 0px 0px 50px;
        scale: 1.03;
    }
    13%{
        background-color: var(--background-white);
    }
}

.HDH3-1{
    animation: H3Animation 20s infinite;
    animation-delay: 0s;
}
.HDH3-2{
    animation: H3Animation 20s infinite;
    animation-delay: 2s;
}
.HDH3-3{
    animation: H3Animation 20s infinite;
    animation-delay: 4s;
}
.HDH3-4{
    animation: H3Animation 20s infinite;
    animation-delay: 6s;
}
.HDH3-5{
    animation: H3Animation 20s infinite;
    animation-delay: 8s;
}
.HDH3-6{
    animation: H3Animation 20s infinite;
    animation-delay: 10s;
}
.HDH3-7{
    animation: H3Animation 20s infinite;
    animation-delay: 12s;
}
.HDH3-8{
    animation: H3Animation 20s infinite;
    animation-delay: 14s;
}
.HDH3-9{
    animation: H3Animation 20s infinite;
    animation-delay: 16s;
}
.HDH3-10{
    animation: H3Animation 20s infinite;
    animation-delay: 18s;
}
@keyframes H3Animation{
    0%{
        margin-top: 0px;
        color: var(--bold-font-color);
    }
    3%,
    10%{
        margin-top: -40px;
        color: var(--background-white);
    }
    13%{
        margin-top: 0px;
        color: var(--bold-font-color);

    }
}

.HDH6-1{
    animation: H6Animation 20s infinite;
    animation-delay: 0s;
}
.HDH6-2{
    animation: H6Animation 20s infinite;
    animation-delay: 2s;
}
.HDH6-3{
    animation: H6Animation 20s infinite;
    animation-delay: 4s;
}
.HDH6-4{
    animation: H6Animation 20s infinite;
    animation-delay: 6s;
}
.HDH6-5{
    animation: H6Animation 20s infinite;
    animation-delay: 8s;
}
.HDH6-6{
    animation: H6Animation 20s infinite;
    animation-delay: 10s;
}
.HDH6-7{
    animation: H6Animation 20s infinite;
    animation-delay: 12s;
}
.HDH6-8{
    animation: H6Animation 20s infinite;
    animation-delay: 14s;
}
.HDH6-9{
    animation: H6Animation 20s infinite;
    animation-delay: 16s;
}
.HDH6-10{
    animation: H6Animation 20s infinite;
    animation-delay: 18s;
}
@keyframes H6Animation{
    0%,
    10%{
        font-size: 0;
    }
    13%{
        font-size: x-small;
    }
    
}



























/*faq*/
.faq{
    padding: 60px 0;
}
.FaqFatherDiv{
    display: inline-flex;
    justify-content: right;
    background-image: url(\\Images/question.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 300px;
    width: 100%;
}
.faq h1{
    border-bottom: var(--main-color) 3px solid;
    margin-bottom: 15px;
    justify-self: center;
}
.faq p{
    text-align: center;
    margin-bottom: 15px;
    padding-left: 20px;
}
.FaqBlue{
    background-color: var(--main-color);
    width: 40px;
    border-radius: 30px 0 0 30px;
    display: inline-flex;
}
.FaqCard{
    margin: 0 50px 0 0 ;
    max-width: 750px;
    cursor: pointer;
}
.FaqCard p{
    text-align: right;
    margin: 0 25px 0 0;
    font-size: 0px;
    transition: all 0.3s ease-in-out;
}
.FAQA.active{
    font-size: small;
}
.FaqLine{
    margin-top: 10px;
    margin-bottom: 20px;
    padding:  0.3px;
    background: var(--light-font-color);
    width: 100%;
    text-align: right;
    height: 0.3px;
}
.arrow{
    margin: 10px 5px;
    width: 12px;
    height: 12px;
    background-image: url(\\Images/Icons/arrowDown.ico);
    background-position: center;
    background-repeat: no-repeat;
    background-size:15px ;
    transition: all 0.3s ease-out;
}
.arrow.active{
    rotate: 180deg;
}

































/*Connect*/
.contact{
    padding: 30px;
    justify-items: center;
    justify-self: center;
    width: 90%;
}
.contact h1{
    border-bottom:var(--main-color) 3px solid ;
    margin: 20px;
}
.ContactFatherDiv{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}
.ContactMessage{
    background: var(--background-color);
    width: 45%;
    border-radius: 10px;
    justify-items: right;
    padding: 20px;
}
.ContactMessage input{
    margin-bottom: 20px;
    display: block;
    width: 100%;
    border: transparent;
    border-radius: 5px;
    padding: 5px;
    font-size:0.8rem;
}
.ContactMessage select{
    margin-bottom: 20px;
    display: block;
    width: 100%;
    border: transparent;
    border-radius: 5px;
    padding: 5px;
    font-size:0.8rem;
}
.ContactMessage textarea{
    border: transparent;
    border-radius: 5px;
    display: block;
    width: 100%;
    height: 100px;
    padding: 5px;
    font-size:0.8rem;
}
.ContactMessage button{
    display: block;
    width: 100%;
    color: var(--background-white);
    border: transparent;
    border-radius: 5px;
    background-color: var(--main-color);
    padding: 3px;
    margin-top: 10px;
}
.ContactMessage button:hover{
    box-shadow: var(--second-color) 0px 0px 15px;
    cursor: pointer;
    transition: all ease-in-out 0.3s;
}
.ContactInfo{
    width: 45%;
    border-radius: 10px;
    justify-items: right;
    padding: 20px;
}
.ContactInfo iframe{
    border-radius:10px;
    margin:-20px 0px 10px 0;
    display: block;
    width: 100%;
    height: 220px;
    border: transparent;
    padding: 2px;
}
.ContactInfo-1{
    display: flex;
    margin: 10px;
    justify-content: space-evenly  ;
    width: 100%;
}
.ContactInfo-3{
    margin: 5px 15px;
}
.ContactInfoItem{
    display: flex;
    width: 50%;
}
.ContactInfoCircale{
    background-color: var(--second-color);
    height: 32px;
    width: 32px;
    border-radius: 50%;
    display: inline-block;
    margin: 0px 5px 10px 5px;
}
.ContactFollowUsCircle{
    background-color: var(--main-color);
    height: 32px;
    width: 32px;
    border-radius: 50%;
    display: inline-block;
    margin: 0px 8px 10px 8px;
}
.ContactIcon{
    height: 32px;
    width: 32px;
    padding: 8px;
}
@media(max-width:991px){
    .ContactMessage{
        width: 95%;   
    }

    .ContactInfo{
        width: 100%;
        padding: 5px;
    }
    .ContactInfo iframe{
        width: 100%;
        height: 250px;
    }
    .ContactInfo-1{
        width: 100%;
        margin: 10px;
        display: block;
    }
    .ContactInfoItem{
        width: 100%;
    }
    .contact{
        width: 100%;
    }
}
@media(max-width:575px){
    .ContactMessage{
        width: 95%;   
    }

    .ContactInfo{
        width: 100%;
        padding: 5px;
    }
    .ContactInfo iframe{
        width: 100%;
        height: 150px;
    }
    .ContactInfo-1{
        width: 100%;
        margin: 10px;
        display: block;
    }
    .ContactInfo-3{
        text-align: center;
        width: 100%;
        margin: 0px;
    }
    .ContactInfoItem{
        width: 95%;
        text-align: center;
        justify-content: center;
    }
    .contact{
        width: 100%;
    }
    .ContactInfoCircale{
        display: none;
    }
}
























/*Footer*/
footer{
    background-color: var(--bold-font-color);
}
.Footer1{
    display: flex;
    justify-self: center;
    justify-content: space-evenly;
    width: 80%; 
    padding-top: 20px;
}
footer p{
    color: var(--light-font-color);
}
footer h1{
    color:  var(--background-white);
    font-size: medium;
}
.Footer1-div a{
    color: var(--light-font-color);
}
.Footer1-div{
    display: block;
    margin: 10px;
    max-width: 180px;
}
.Footer2-div{
    display: block;
    margin: 10px;
    text-align: center;
    max-width: 200px;
    align-content: center;
}
.Footer3-div{
    display: block;
    margin: 10px;
    max-width: 80px;
}
.Footer4-div{
    display: block;
    margin: 10px;
    max-width: 250px;
}
.FooterLogo{
    width: 150px;
    border-radius: 5px;
    margin: 10px;
    transition: all ease-in-out 0.5s;
}
.FooterLogo:hover{
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px;
    background-color: rgba(255, 255, 255, 0.048);
    scale: 1.09;
}
.FooterIcons{
    margin-top:20px ;
    opacity: 0.6; 
}
.FooterIcon{
    width: 30px;
    height: 30px;
    padding: 2px;
}
.FooterMailBox{
    display: inline;
    animation: LightShadow 10s infinite;
    border-radius: 10px;
    border: var(--bold-font-color) 8px  solid;
}
.FooterMailBox button{
    background: var(--main-color);
    color: var(--background-white);
    padding: 0px 10px;
    border-color: transparent;
    border-radius: 0 5px 5px 0;
}
.FooterMailBox button:hover{
    box-shadow: inset var(--second-color) 0px 0px 10px;
    cursor: pointer;
    transition: all ease-in-out 0.3s;
}
.FooterMailBox input{
    margin: 0px -4px ;
    border-radius: 5px 0 0 5px;
    border-color: transparent;
    color: var(--main-color);
}
.FooterLine{
    margin-top: 30px;
    padding:  0.3px;
    background: var(--light-font-color);
    width: 70%;
    justify-self: center;
    height: 0.3px;
}
.Footer2{
    justify-self: center;
}
.Footer2 p{
    color: var(--background-white);
    justify-self: center;
    margin: 50px 0 10px 0;
}

@media(max-width:991px){
    .Footer1{
        display: flow;
        width: 70%;
        justify-content: space-evenly;
    }
    .Footer1-div{
        display: block;
        max-width: 100%;
    }
    .Footer2-div{
        justify-content: center;
        max-width: 100%;
    }
    .Footer3-div{
        display: block;
        max-width: 100%;
    }
    .Footer4-div{
        display: block;
        max-width: 100%;
    }
    .FooterLogo{
        width: 200px;
    }
    .FooterMailBox{
        display: inline-flex;
        width: 90%;
    }
    #NewsEmail{
        width: 72%;
    }
    #BTNNewsEmail{
        width: 29%;
    }
}
@media(max-width:575px){
    .Footer1{
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        justify-content: space-evenly;
        width: 80vw;
    }
    .Footer1-div{
        max-width: 100%;
        display: block;
    }
    .Footer2-div{
        justify-content: center;
        max-width: 100%;
    }
    .Footer3-div{
        max-width: 100%;
        display: block;
    }
    .Footer4-div{
        max-width: 100%;
    }
    .FooterLogo{
        width: 150px;
    }
    .FooterMailBox{
        display: block;
    }
    #NewsEmail{
        width: 100%;
        border-radius: 0 0 5px 5px;
        margin: 0px;
    }
    #BTNNewsEmail{
        width: 100%;
        border-radius: 5px 5px 0 0;
    }

}








@keyframes LightShadow{
    0%{
        box-shadow: #0773b6 0px 0px 0px;
    }
    5%{
        box-shadow: #0773b6 0px 0px 30px;
    }
    10%{
        box-shadow: #0773b6 5px -5px 30px;
    }
    20%{
        box-shadow: #0773b6 5px 0px 30px;
    }
    30%{
        box-shadow: #0773b6 5px 5px 30px;
    }
    40%{
        box-shadow: #0773b6 0px 5px 30px;
    }
    50%{
        box-shadow: #0773b6 -5px 5px 40px;
    }
    60%{
        box-shadow: #0773b6 -5px 0px 40px;
    }
    70%{
        box-shadow: #0773b6 -5px -5px 40px;
    }
    90%{
        box-shadow: #0773b6 0px 0px 50px;
    }
    100%{
        box-shadow: #0773b6 0px 0px 0px;
    }
}

/*الشريط الجانبي*/
::-webkit-scrollbar {
	width: 15px;
}
::-webkit-scrollbar-track {
	background-color: var(--light-font-color);
	border: none;
}
::-webkit-scrollbar-thumb {
	background-color: var(--main-color);
	border-radius: 10px;
} /*End CCS*/