:root{
      --primary-light: #ffffff;
      --primary-dark: #000000;
      --primary-color: #d83f87;
	  --secondary-color: #8174e9;
}
*:focus{
    box-shadow: none;
    outline: none !important;
}
.img-fluid{
    width:100%;
    height:auto;
}
html{
    font-size: 16px;
}
body {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
	font-display: swap;
    font-weight: 400;
    font-size: 1rem;
    font-style: normal;
    background-color: var(--secondary-color);
	color: var(--primary-light);
    overflow-x: hidden;
}
.shadow {
    -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
.text-shadow{
    text-shadow: 1px 1px 2px var(--primary-dark);
}
header {
   background-image: url(../img/hero.webp);
   background-repeat: no-repeat;
   background-position: bottom right;
   background-size: 70%;
   min-height:100vh;
}
a{
    text-decoration: none;
	text-transform: uppercase;
    display: inline-block;
}
h1, h2, h3, h4, h5, h6{
      text-transform: uppercase;
}
.logo{
	width:200px;
	height: 23px;
	display: block;
}
.start-a-project1, .send-btn{
	background-color: var(--primary-dark);
	color:var(--primary-color);
	border-radius: 50px;
	width:fit-content;
	padding: 10px 20px;
	display: block;
	font-size:0.8rem;
	border:none;
}
.start-a-project1:hover, .send-btn:hover{
	background-color: var(--primary-light);
	color:var(--primary-dark);
}
.modal-content{
	border-radius:20px;
	background-color: var(--primary-color);
}
.modal-header{
	border-bottom: none;
}
.modal-body{
	padding: 0px 10px;
}
.modal-footer{
	border-top:none;
}
.input-group i{
	font-size:0.9rem !important;
}
.hero-text{
	max-width:450px;
	height: auto;
}
#skills{
	max-width: 450px;
	font-weight: bold;
	color: var(--primary-dark);
}
#hero-cta1-container, #hero-cta2-container{
	max-width: 225px;
}
.whatsapp{
	display: block;
	background-color: var(--primary-dark);
	color:var(--primary-color);
	border-radius: 50px;
	width:fit-content;
	padding: 5px 10px;
	display: block;
	font-size:0.8rem;
}
.whatsapp:hover{
	background-color: var(--primary-light);
	color:var(--primary-dark);
}
.whatsapp-circle{
	display: inline-block;
	background-color: var(--primary-color);
	border-radius: 50px;
	min-width:38px;
	min-height:38px;
	position: relative;
	left:-4px;
}
i{
	font-size:1.7rem;
}
.whatsapp i{
	color:var(--primary-light);
	position: relative;
	top:5px;
	left:7px;
}
.let-ua-talk{
	display: inline-block;
	padding: 0px 10px;
}
.start-a-project2{
	background-color: var(--primary-light);
	color:var(--primary-dark);
	border-radius: 50px;
	width:fit-content;
	padding: 14px 20px;
	display: block;
	font-size:0.8rem;
}
.start-a-project2:hover{
	background-color: var(--primary-dark);
	color:var(--secondary-color);
}
#counters-container, #social-container{
	max-width: 450px;
}
.counter{
	font-size: 2rem;
}
.counter-text{
	color: var(--primary-dark);
	font-size: 0.8rem;
	font-weight: bold;
}
.social-icon a{
	color:var(--primary-dark);
}
.social-icon a:hover{
	color:var(--primary-light);
}
#youtube-video{
	background-color: var(--primary-light);
}
#h2YouTube{
	color:var(--primary-dark);
	opacity: 0;
}
.youtube{
	width:100% !important;
	height:600px !important;
	opacity: 0;
}



#nice-to-meet-you-content{
	background-color: var(--primary-color);
	color: var(--primary-light);
}
#nice-to-meet-you-content .nice-images-container{
	position: relative;
	opacity: 0;
}

.play-nice{
	position: absolute;
	z-index: 100;
	right:10px;
	top:20px;
	width:70px;
	height: 70px;
	background-image: url(../img/play-nice.webp);
	background-repeat: no-repeat;
	background-size: contain;
}
#play-nice{
	width: 100%;
  	height: 100%;
	cursor: pointer !important;
	border:none;
	background-color: transparent;
}
.stop-nice{
	position: absolute;
	z-index: 99;
	right:10px;
	top:20px;
	width:70px;
	height: 70px;
	background-image: url(../img/stop-nice.webp);
	background-repeat: no-repeat;
	background-size: contain;
}
#stop-nice{
	width: 100%;
  	height: 100%;
  	cursor: pointer !important;
	border:none;
	background-color: transparent;
}
#nice-text{
	opacity: 0;
}

#hear-me-in{
	background-color: var(--secondary-color);
}



#hear-me-in h2{
	color:var(--primary-light);
}

#from-left1, #from-right1, #from-top1, #from-top2{
	opacity:0;
}
#from-left1 img, #from-right1 img, #from-top1 img, #from-top2 img{
	transform:scale(1, 1);
	transition: all 0.5s ease-in-out;
}

#from-left1 img:hover, #from-right1 img:hover, #from-top1 img:hover, #from-top2 img:hover{
	transform:scale(1.1, 1.1);
}


#studio{
	background-color: var(--primary-light);
	color: var(--primary-dark) !important;
}

#studio h2{
	color:var(--primary-dark);
}




#studio-title, .studio-text, .studio-img{
	opacity:0;
}


#podcasts{
	background-color: var(--primary-color);
	color:var(--primary-light);
}
#podcasts-title, #from-left2-1, #from-left2-2, #from-right2-1, #from-right2-2, #from-top2-1, #from-top2-2{
	opacity:0;
}





footer div{
    font-size: 12px;
	color:var(--primary-dark);
}
.emad-zedan{
	color:var(--primary-dark);
}
.emad-zedan:hover{
	color:var(--primary-light);
	text-decoration: underline;
}













@media all and (max-width: 567px) {
	header {
   		background:transparent;
	}
	.youtube{
		height:215px !important;
	}
	.play-nice{
		right:30px;
	}
	.stop-nice{
		right:30px;
	}
}
@media all and (min-width: 568px) and (max-width: 768px) {
	header {
   		background:transparent;
	}
	.youtube{
		height:350px !important;
	}
}
@media all and (min-width: 759px) and (max-width: 992px) {
	header {
   		background:transparent;
	}
	#counters-container, #social-container{
		max-width: 100%;
	}
	.youtube{
		height:420px !important;;
	}
}