@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic&display=swap');
:root{
    --primary_clr:#f6931e;
    --secondary_clr:#666666;
    --primary_clr_opacity:#f6951ec9;
}
*{
    font-family: 'Noto Sans Arabic', sans-serif;
}

.abt-section-2,.abt-section-3,.abt-section-4,.abt-section-5,.abt-section-6,.abt-section-7,.section-8,.section-9,.section-10{
    padding: 50px 0;
    width: 100%;
    overflow: hidden;
}
h2.h2{
    color: var(--primary_clr);
        text-align: center;
        font-weight: 600;
        text-transform: capitalize;
}
p.p{
    color: var(--secondary_clr);
}

/*..........................header........................*/
header{
    height: 30vh;
}

header{
    .quick-cnct-nav{
        height: 30px;
        width: 100%;
        background-color: var(--primary_clr);
        color: white;
    }
    .quick-cnct-nav .row{
        height: 100%;
    }
    .quick-cnct-nav .col-md-6{
        justify-content: space-evenly;
        display: flex
    }
    .quick-cnct-nav .span{
        align-items: center;
        display: flex;
    }
    .quick-cnct-nav .a{
        color: white;
        text-decoration: none;
    }


    .navbar .dropdown-item{    /*navbar*/
        text-transform: capitalize;
    }
    .sticky-top{
        top: -1px !important;
    }
    .navbar .nav-log{
        height: 50px;
    }
    .nav-item{
        font-weight: 700;
    }
    .nav-link:hover {
        color: black;
    }
    .dropdown-item:hover{
        font-weight: 600;
    }

    @media screen and (min-width: 992px){
        .navbar{
            height: 80px;
        }
        .navbar-expand-lg .navbar-collapse {
            flex-direction: row-reverse !important;
        }
        .navbar-expand-lg .navbar-nav {
            width: 50%;
            justify-content: center;
        }
        .dropdown-toggle:hover + .dropdown-menu{
            display: block;
        }
        .dropdown-menu:hover{
            display: block;
        }
    }

    
}
.page-name{/*every page heading in header*/
    position: absolute;
    top: 25vh;
    height: 50px;
    width: 100%;
    padding: 0  10%  ;
    border-bottom: 4px solid var(--primary_clr);
}
.page-name .h2{
    text-align: left;
}
@media screen and (max-width:700px) {
    .page-name .h2{
        text-align: center;
    }
}
/*.......................................................   header END   ...........................................................*/


/*.......................... about section-2 ........................*/
.abt-section-2{
    .col-md-6{
        align-items: center;
        display: flex;
    }
    .img-div{
        text-align: center;
    }
    .s-img{
        border-radius: 10px;
    }
    @media screen and (max-width:700px) {
        .row{
            flex-direction: column-reverse;
        }
        .s-img{
            margin-bottom: 10px;
        }
        .col-md-6:nth-child(1){
            padding: 0 25px;
        }
        
    }
    .cnt .p{
        color: var(--secondary_clr);
    }
}
/*.......................................................   about section-2 END   ...........................................................*/




/*.......................... footer ........................*/
footer a{
    text-decoration: none;
}

.scil-mdia-div a i{
    font-size: 20px;
}
.text-md-start a,.scil-mdia-div a i{
    transition: 0.4s;
}
.scil-mdia-div a i:hover{
    transform: translateY(-5px);
}
.text-md-start a:hover{
    padding-left: 6px;
}
@media screen and (max-width:700px) {
    .text-md-start{
        text-align: left !important;
    }
}




/*.......................... projects.html ........................*/
/* Circle */
.hover15 figure {
	position: relative;
}
.hover15 figure::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(255,255,255,.2);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
}
.hover15 figure:hover::before {
	-webkit-animation: circle .75s;
	animation: circle .75s;
}
@-webkit-keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
.gallery{
    .col-lg-3{
        cursor: pointer;
    }
}
/*.......................................................   projects.html END   ...........................................................*/




/*.......................... paste_here ........................*/
/*.......................................................   paste_here END   ...........................................................*/