@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@100;200;500;700&family=Ephesis&display=swap');
:root {
	--primary: #5e69ca;
	--secondry: #e82a2a;
	--text: #777;
	--textdark: #434343;
	--backcolor: #212529;
	--lightcolor:#e9edf3;
}
html,
body {

	font-family: 'Archivo', sans-serif;
	font-weight: 200;
	font-size: 20px;
	color: var(--text);
	line-height:1.75;
}
.bg-dark {
    background-color: var(--backcolor) !important;
}
.title {
	font-weight: 100;
	font-size: 100px;
	padding: 80px 0 20px 0;

	color: var(--textdark);
}
.contacts {
	font-weight: 100;
	font-size: 100px;
	padding: 20px 0 20px 0;

	color: var(--primary);
}
.bold-text {
	font-weight: 700;
	font-size: 40px;



	color: var(--textdark);

}
.primary {
	color: var(--primary);
}
a {
    color: var(--text);

}

li {
	margin: 0px; padding: 0px; border: 0px currentColor; border-image: none; vertical-align: baseline;
}

p {
	margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;  vertical-align: baseline;
}

ul {
	margin: 0px; padding: 0px; border: 0px currentColor; border-image: none;  vertical-align: baseline;
}

li {
	list-style: none; display: inline;
}

table {
	border-collapse: collapse; 
	border-spacing: 0;
	
}
a:active {
	outline: 0px;
}
a:hover {
	outline: 0px;
}
.menu-links a{
	margin:0 14px;
	text-decoration: none;
padding-bottom: 5px;
}
.menu-links a:hover{
	margin:0 14px;
border-bottom: 4px solid #5e69ca;
color: var(--textdark);
}
* {

box-sizing: border-box; 
-moz-box-sizing: border-box;

	outline: 0 !important;
    box-shadow: none !important;
	outline:none;
z-index:10;}	

.cover-screen .title {
	color: var(--primary);
}
	
.row {
    --bs-gutter-x:unset;
    --bs-gutter-y: 0;
    margin-left: unset;
    margin-right: unset;

}

.cover-screen {
    min-height: 800px;
    /*background-image: url(../imgs/history-back.jpg);*/
    background-size: cover;
    background-position-x: center;
}

.cover-ani {
	max-width: 90%; margin: auto;
}


@media (min-width: 1850px) {
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1800px;
}
}
.signature {font-family: 'Ephesis', cursive;
	margin-left:-7px;
	display: inline-block;
	font-size: 60px;
	color: var(--primary);
	z-index: 99999;
	position: relative;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
rotate: -10deg;}


.textbox {
	display: block;
box-shadow: 0 50px 100px rgba(0,0,0,.1);
background-color: var(--primary);
padding: 40px;
color: white;
text-align: justify;

font-size: 25px;
margin: 30px 0 0 0;}

.ux {

	display: inline-block;
	text-align: center;
	padding: 10px;
	/*border-radius: 50%;*/
	background-color: var(--primary);
	position: relative;
	width: 80px;
	height: 80px;
	font-weight: 700;
	z-index: 999999;
	font-size: 37px;
	
	color: var(--backcolor);
	rotate: -10deg;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;

}

.ui {
	background-color: var(--secondry);
	background-color: transparent;
	color: var(--secondry);
	margin-left: -10px;
	z-index: 9;
	rotate: 10deg;
	border: 5px solid var(--secondry);
	padding-top: 5px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.menu-links {
	display: inline-block;
	float: right;
	padding-top: 30px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.sticky .signature {

    font-size: 35px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;

}
.sticky .menu-links {

    padding-top: 13px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.sticky .ux {


	color: #e9edf3;
	font-size: 20px;
	width: 50px;
	height: 50px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;

}
.sticky .ui {


	color: var(--secondry);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}


	a.bottom-nav {
	width: 50px;
	display: block;
	height: 50px;
	background-image: url(../../../photos/arrow.svg);
	background-color: var(--primary);
	border-radius: 10%;
	margin: auto;
	border: 5px solid var(--primary);

	rotate: 270deg;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	opacity: .4;
}
a.bottom-nav:hover {
	rotate: 630deg;
	background-color: var(--primary);
	border: 5px solid var(--primary);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	opacity: 1;
	border-radius: 50%;
}

.card {
    background-color: #b6d0d1;
    border: none;
    padding: 0;
    border-radius: 20px;
    overflow: hidden;
    border: 6px solid  #b6d0d1;
}
 .card img{

	border-radius: 15px;

 }
 .nav-tabs .nav-link {
    margin: auto;
    width: 134px;
    margin-bottom: -1px;
	text-align: center;
	color: var(--textdark);
	font-weight: 700;
   
}
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
    color:var(--primary);
    border-color: #dee2e6 #dee2e6 #fff;
}
img.sameh_photo {
	display: block;

	width: 200px;
	margin-bottom: 20px;
	rotate: 0deg;
	border: 4px solid var(--primary);
	padding: 4px;
	border-radius: 50%;
	
}
.card-img, .card-img-top, .card-img-bottom {
    width: 100%;
}
.works .slider-container>* {
    height: 100% !important;
}
.name {
	color: #5e69ca; font-size: 70px;
}
.intro  {
    display: block;
    width: 1200px;
    text-align: justify;
    font-size: 30px;
    max-width: 100%;
}
.mobile-logo {
	display: none;
}
@media (max-width: 1000px) {
.title {
 
    font-size: 64px;
    padding: 20px 0 20px 0;

}
.contacts {

    font-size: 64px;

}
.name {

		font-size: 35px;

}
.job-title{

	font-size: 22px;

}
.intro {

	font-size: 20px;

}
.signature {

    font-size: 37px;

}
img.sameh_photo {

    margin: 36px auto;
}

}
@media (max-width: 800px) {

.mobile-logo {
    display: block;
    margin-top: -130px;
}
.mt-auto-bo {
	display:none !important;}
.bold-text-mobile {
	font-size:30px}
}

.whatido-mobile {
	display: none;
}
@media (max-width: 767px) {
	.whatido {/*
		display: none !important;*/
	}
	.whatido-mobile {
		display: block;
	}
	.whatido {
		display: none !important;
	}
	.whatido-mobile img{
		display: block;
		margin-bottom: 20px;
		width: 100%;
		border-radius: 5px;
		
	}

}

.nav-tabs .nav-link {

    width: calc(20% - 10px);
	margin:0 5px;

}
.nav-tabs .nav-link, .nav-tabs .nav-item.show .nav-link {
    color: var(--textdark);
    /*border-color: #dee2e6 ;*/
	margin-bottom: 4px;
}
.nav-tabs .nav-link.active {
    color: var(--primary);
    border-color: #dee2e6 #dee2e6 #fff;
    border-bottom: 4px solid var(--primary);
}
.tab-photo {
	float: right;
	width: 500px;
	
}
.tab-photo img{
	max-width: 100%;
	border-radius: 15px;
}
.tab-data {
	float: left;
	width: calc(100% - 540px);
}

@media (max-width: 991px) {

	.tab-photo {
		float: none;
		width: 100%;
		display: block;
		padding-bottom: 20px;
		
	}
	.tab-photo img{
		max-width: 100%;
		border-radius: 15px;
	}
	.tab-data {
		float: none;
		width: 100%;
		display: block;
	}
}
.Howidoit {
	display: block;
	width: 100%;
	max-width: 1200px;
	margin: auto;
}
.points ul  {
	padding-top: 20px;

	font-size: 18px;

}
.points ul li {
    display: block;
    list-style: none;
    padding-left: 25px;
    background-image: url(../../../photos/arrow3.png);
    background-size: 21px;
    background-repeat: no-repeat;
    background-position: left;
}
.tab-pane {
	overflow: auto;
	margin-bottom: 90px;
}
.footer {
    background-color: #f5f8fc ;
    padding: 8px 0;
    text-align: right;
	background-color: #141b21;
	color: var(--primary);

}


#contacts {
	display:block;
	clear:both;

	overflow:auto;
	background-color:#1d262d;}
.contacts-l {
	display:inline-block;
	float:left;
	width:45%;
	text-align:center;
	font-size:34px;
	padding-top:70px;
	color:#ff8b09;}
.contacts-r {
	display:inline-block;
	float:right;
	width:52%;
	color:#90a4b3;
	font-weight:100;}

.contacts-r div{
	display:block;
	width:100%;
	margin:40px;
	padding-left:40px;
	min-height:50px;
	padding-top:0;
	
	background-position:left top;
	background-repeat:no-repeat;
	list-style:none;
	line-height:40px;}

.email {background-image:url(../../../photos/email.png);}
.mobile {background-image:url(../../../photos/mobile.png);}
.email a{
	text-decoration:none;
	color:#90a4b3;}

	.logos {
		display: block;
	width: 100%;
max-width: 1200px;
margin: auto;
text-align: center;}

.logos img{
	display: inline-block;
margin: 10px;
width: 100px;

}

@media (max-width: 999px) {
	.contacts-l {
		display:block;
		float:left;
		width:100%;
		text-align:left;
		font-size:34px;
		padding-top:10px;
		color:#ff8b09;}
	.contacts-r {
		display:block;
		float:right;
		width:100%;
}
	
	.contacts-r div{
		display:block;
		width:100%;
		margin:40px;
		padding-left:40px;
		min-height:50px;
		padding-top:0;
		
		background-position:left top;
		background-repeat:no-repeat;
		list-style:none;
		line-height:40px;}

}
@media (max-width: 500px) {
	.contacts-l {
		display:block;
		float:left;
		width:100%;
		text-align:left;
		font-size:34px;
		padding-top:10px;
		font-size: 17px;
		color:#ff8b09;}
	.contacts-r {
		display:block;
		float:right;
		width:100%;
}
	
	.contacts-r div{
		display:block;
		width:100%;
		margin:40px 0;
		padding-left:40px;
		min-height:50px;
		padding-top:0;
		font-size: 17px;
		background-position:left top;
		background-repeat:no-repeat;
		list-style:none;
		line-height:40px;}

}
.hi-100 {
	min-height: 100%;
}
@media (max-width: 1600px) {
	.hi-100 {
		height: auto;
		min-height: auto;
	}

}


@media (max-width: 991px) {

.nav-tabs .nav-link, .nav-tabs .nav-item.show .nav-link {
    text-align: center;
    color: var(--textdark);
    /* border-color: #dee2e6; */
    margin-bottom: 4px;
    background-color: #f4f4f4;
    border-radius: 10px;
    width: 127px;
}
.nav-tabs {

    width: 686px;
}

	nav.res {

		width: 100%;
		overflow-x: scroll;
	}

}

.menu-links a {
    color: var(--primary);
}
.menu-links a:hover {
    color: var(--lightcolor);
}
.sticky .menu-links a {
    color: var(--text);
}
.sticky .menu-links a:hover {
    color: var(--textdark);
}
.slider-indicators-square .slider-indicators>*, .slider-indicators-square.slider-indicators>* {
    width: 44px !important;
    height: 14px !important;
    border: .4rem solid transparent;
}
.slider-indicators {


    margin-bottom: -2rem !important;

}
.slider-indicators>* {

    opacity: .3 !important;

}
.slider-indicators>* {

    background-color: #bebebe !important;

}
.about-img {
	float: right; margin-left: 20px;
}
@media (max-width: 1720px) {
	.about-img {
		float: none; 
		margin: 0 auto 30px auto;
		display: block;
		max-width: 100%;
	}

}

.title2 {color: #fff; font-size: 40px; padding-bottom: 30px;}
@media (max-width: 390px) {
.title2 {font-size: 30px; }
}
.logosmo {
	display: none;}

	@media (max-width: 767px) {

		.logosmo {
			display: block;}

			.logosdt {
				display: none;}

				.textbox {

					padding: 20px;

				}

	}

	.slider-indicators>.active {
		opacity: 1 !important;
	}

	@media (max-width: 500px) {
	.slider-nav-outside .slider-container, .slider-nav-outside-expand .slider-container {
		margin: 0 !important;
	}
	.card {

		border: 3px solid  #fff;
	}
}

a.cv {
	display: inline-block;
	text-decoration: none;
	background-color: var(--primary);
	color: #fff;
	padding: 5px 10px;
	margin: 20px 0;
	font-size: 24px;
	border-radius: 5px;
}
a.cv:hover {

	background-color: var(--textdark);

}


	@media (max-width: 1600px) {
		
		img.sameh_photo {

    width: 170px;

}
.intro {

    font-size: 30px;

}
		
		}
			@media (max-width: 900px) {
		
		img.sameh_photo {

    width: 120px;

}
.intro {

    font-size: 20px;

}
a.bottom-nav {
	display:none;}
		
		}
		
		@media (max-width: 380px) {
			
			}