/*
    Author: Antoine Tétart
    Teamspeak 3: ts.the-programmer.com
    Web site: www.the-programmer.com

    Terms of use:
      - This file is forbidden unless you have permission from the author. If you have this file without permission to use it please do not use it and do not share it.
      - If you have permission to use this file, you can use it on your server however it is strictly forbidden to share it.
      - Out of respect for the author please do not delete this information.

	Sommary (CSS) :
       1- Global Elements [line 23].
       2- Navbar [line 94].
       3- Header [line 106].
       4- Section (About Us) [line 174].
       5- Section (Our Team) [line 229].
       6- Section (Background Image) [line 268].
       7- Section (Joins us) [line 300].
       8- Footer [line 412].
       9- Media Queries [line 448].
*/

/* ************* Global Elements ************* */
html {
	scroll-behavior: smooth;
}

body {
	background: url('../img/about-bg.jpg') no-repeat fixed;
	background-size: cover;
	margin: 0;
	overflow-x: hidden;
}

body::-webkit-scrollbar {
    width: 3px;
    height: 8px;
}

body::-webkit-scrollbar-thumb {
  	background-color: #3A4EA5;
}

ul {
	padding-left: 0;
}

h3 {
	font-family: 'Poppins';
}

hr {
    width: 85px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 2%;
}

.separateHR {
    display: flex;
    justify-content: center;
}

.hrIcon {
    height: 27px;
    width: 27px;
	color: #5e5e5e;
    margin-top: 7px;
    text-align: center;
}

#buttonTop {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  font-size: 12px;
  border: none;
  outline: none;
  background-color: #3A4EA5;
	color: rgb(0, 0, 0);
	cursor: pointer;
  transition: 0.5s;
  padding: 15px;
  border-radius: 4px;
}

#buttonTop:hover {
  background-color: #283672;
}

/* ******************************************** */


/* ************* Navbar ************* */
nav .navbar-nav li a:hover {
  	color: rgb(255, 255, 255) !important;
  	padding-top: 22px;
}

nav .nav-link {
	font-size: 10px;
}
/* ******************************************** */


/* ************* Header ************* */
header {
	text-align: center;
	color: white;
	padding-top: 10%;
}

header img {
	width: 12%;
	margin-bottom: 1%;
}

header h1 {
	font-family: 'Poppins';
	font-size: 35px;
}

header h2 {
	font-family: 'Roboto';
	font-weight: normal;
	font-size: 20px;
	margin-bottom: 2%;
}

header h1 span {
	color: #5e5e5e;
}

header svg {
    pointer-events: none;
    fill: #fff;
    height: 150px;
    width: 100%;
}

header #buttonHeader {
	color: rgb(68, 68, 68);
	border: 1px solid white;
	padding: 15px 55px 15px 55px;
	border-radius: 5px;
	margin-top: 3%;
	transition: 0.5s;
}

header #buttonHeader:hover {
	color: black;
	background-color: white;
	text-decoration: none;
}

.arrowDown a {
    color: #fff;
    margin-bottom: 15%;
    transition: 0.5s;
}

.arrowDown a:hover {
    color: #0044ff;
    text-decoration: none;
}

.arrowDown {
	margin-top: 8%;
	height: 100px;
}

/* ******************************************** */


/* ************* Section (About Us) ************* */
#sectionAboutUs h3 {
	text-align: center;
}

#sectionAboutUs p {
	text-align: center;
	width: 80%;
	margin: auto;
	margin-bottom: 4%;
}

#sectionAboutUs ul {
	list-style: none;
	font-family: 'Roboto';
	display: flex;
	text-align: center;
	margin-top: 1%;
	justify-content: center;
}

#sectionAboutUs ul p {
	font-size: 17px;
}

#sectionAboutUs li {
	margin-left: 3%;
	margin-right: 3%;
	width: 350px;
	border-radius: 10px;
	padding-top: 2%;
	padding-bottom: 2%;
}

.iconAboutUs {
	font-size: 50px;
	color: #3A4EA5;
	margin-bottom: 25px;
	transition: 0.3s;
	border: 1px solid #3A4EA5;
	border-radius: 100%;
	width: 90px;
	height: 90px;
	padding-top: 18px;
}

#sectionAboutUs {
	padding-top: 4%;
	padding-bottom: 4%;
	background: url('../img/about-bg.jpg') no-repeat fixed;
	color: rgb(255, 255, 255);
}
/* ******************************************** */

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
#about {
	background: url("../img/about-bg.jpg");
	background-size: cover;
	overflow: hidden;
	position: relative;
	color: #fff;
	padding: 60px 0 40px 0;
  }
  @media (min-width: 1024px) {
	#about {
	  background-attachment: fixed;
	}
  }
  #about:before {
	content: "";
	position: absolute;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
  }
  #about h2 {
	font-size: 36px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #fff;
  }
  #about h3 {
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 10px;
	color: #fff;
  }
  #about p {
	font-size: 14px;
	margin-bottom: 20px;
	color: #fff;
  }

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
	width: 100%;
	height: 80vh;
	background: url("../img/about-bg.jpg") top center;
	background-size: cover;
	overflow: hidden;
	position: relative;
  }
  @media (min-width: 500px) {
	#hero {
	  background-attachment: fixed;
	}
  }
  #hero .hero-container {
	position: absolute;
	bottom: 0;
	left: 0;
	top: 50px;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-align: center;
	padding: 0 15px;
  }
  
  #hero h1 {
	color: #fff;
	font-family: "Raleway", sans-serif;
	font-size: 56px;
	font-weight: 600;
	text-transform: uppercase;
  }
  #hero h1 span {
	color: #0048ff;
  }
  @media (max-width: 991px) {
	#hero h1 {
	  font-size: 34px;
	}
  }
  #hero p {
	color: #ebebeb;
	font-weight: 700;
	font-size: 20px;
  }
  @media (max-width: 991px) {
	#hero p {
	  font-size: 16px;
	}
  }
  #hero .play-btn {
	width: 94px;
	height: 94px;
	background: radial-gradient(#0048ff 50%, rgba(101, 111, 150, 0.15) 52%);
	border-radius: 50%;
	display: block;
	position: relative;
	overflow: hidden;
  }
  #hero .play-btn::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-40%) translateY(-50%);
	width: 0;
	height: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 15px solid #fff;
	z-index: 100;
	transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }
  #hero .play-btn:before {
	content: "";
	position: absolute;
	width: 120px;
	height: 120px;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
	-webkit-animation: pulsate-btn 2s;
	animation: pulsate-btn 2s;
	-webkit-animation-direction: forwards;
	animation-direction: forwards;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-timing-function: steps;
	animation-timing-function: steps;
	opacity: 1;
	border-radius: 50%;
	border: 2px solid rgba(163, 163, 163, 0.4);
	top: -15%;
	left: -15%;
	background: rgb(68, 68, 68);
  }
  #hero .play-btn:hover::after {
	border-left: 15px solid #0048ff;
	transform: scale(20);
  }
  #hero .play-btn:hover::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-40%) translateY(-50%);
	width: 0;
	height: 0;
	border: none;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 15px solid #fff;
	z-index: 200;
	-webkit-animation: none;
	animation: none;
	border-radius: 0;
  }
  #hero .about-btn {
	font-family: "Raleway", sans-serif;
	font-weight: 500;
	font-size: 14px;
	letter-spacing: 1px;
	display: inline-block;
	padding: 12px 32px;
	border-radius: 50px;
	transition: 0.5s;
	line-height: 1;
	margin: 10px;
	color: #fff;
	-webkit-animation-delay: 0.8s;
	animation-delay: 0.8s;
	border: 2px solid #0048ff;
  }
  #hero .about-btn:hover {
	background: #0048ff;
	color: #fff;
  }
  
  @-webkit-keyframes pulsate-btn {
	0% {
	  transform: scale(0.6, 0.6);
	  opacity: 1;
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 0;
	}
  }
  
  @keyframes pulsate-btn {
	0% {
	  transform: scale(0.6, 0.6);
	  opacity: 1;
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 0;
	}
  }  

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
#about {
	background: url("../img/about-bg.jpg");
	background-size: cover;
	overflow: hidden;
	position: relative;
	color: #fff;
	padding: 60px 0 40px 0;
  }
  @media (min-width: 1024px) {
	#about {
	  background-attachment: fixed;
	}
  }
  #about:before {
	content: "";
	position: absolute;
	bottom: 0;
	top: 0;
	left: 0;
	right: 0;
  }
  #about h2 {
	font-size: 36px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #fff;
  }
  #about h3 {
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 10px;
	color: #fff; 
  }
  #about p {
	font-size: 14px;
	margin-bottom: 20px;
	color: #fff;
  }

/* ************* Section (Background Image) ************* */
#sectionBackgroundImage h3 {
	font-size: 30px;
	margin-bottom: 2%;
}

#sectionBackgroundImage a {
	color: rgb(0, 119, 255);
	border: 1px solid white;
	padding: 15px 25px 15px 25px;
	border-radius: 5px;
	margin-top: 3%;
	transition: 0.5s;
}

#sectionBackgroundImage a:hover {
	color: black;
	background-color: white;
	text-decoration: none;
}

#sectionBackgroundImage {
	padding-top: 6%;
	padding-bottom: 6%;
	text-align: center;
	color: rgb(0, 119, 255);
	background-size: cover;
}
/* ******************************************** */


/* ************* Section (Joins us) ************* */
#sectionJoinUs p, h3  {
	text-align: center;
}

#sectionJoinUs p  {
	width: 70%;
	margin: auto;
	margin-bottom: 3%;
}

#sectionJoinUs #buttonJoinUs img {
	width: 250px;
	height: 250px;
	border-radius: 100%;
	margin-left: 5%;
	margin-right: 5%;
}

#sectionJoinUs #buttonJoinUs ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	justify-content: center;
	align-items: center;
}

#sectionJoinUs #buttonJoinUs li {
	display: flex;
	height: 110px;
	width: 110px;
	border-radius: 100%;
	border: 2px solid #3A4EA5;
	align-content: center;
	margin-left: 2%;
	margin-right: 2%;
	margin-top: 2%;
	margin-bottom: 2%;
	justify-content: center;
	transition: 0.5s;
}

#sectionJoinUs #buttonJoinUs a {
	color: #3A4EA5;
	transition: 0.5s;
	padding-top: 22%;
	padding-bottom: 40%;
	display: flex;
	flex-direction: column;
	width: 100%;
	border-radius: 100%;
	text-align: center;
	text-overflow: ellipsis;
  	white-space: nowrap;
  	overflow: hidden;
}

#sectionJoinUs #buttonJoinUs li:hover a {
	color: white;
	text-decoration: none;
}

#sectionJoinUs #buttonJoinUs i {
	font-size: 20px;
}

#sectionJoinUs #buttonJoinUs li:hover {
	background: #3A4EA5;
	border: 1px solid white;
}

#sectionJoinUs #portfolioJoinUs ul {
	display: flex;
	list-style: none;
	flex-wrap: wrap;
	width: 80%;
	margin: auto;
	justify-content: center;
}

#sectionJoinUs #portfolioJoinUs li {
	margin-left: 1%;
	margin-right: 1%;
	margin-top: 1%;
	margin-bottom: 1%;
}

#sectionJoinUs #portfolioJoinUs img {
	width: 370px;
	transition: 1s;
}

#sectionJoinUs #portfolioJoinUs img:hover {
	width: 250px;
}

#sectionJoinUs #buttonJoinUs {
	margin-top: 3%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#sectionJoinUs {
	background: url('../img/about-bg.jpg') no-repeat fixed;
	color: white;
	padding-top: 3%;
	padding-bottom: 2%;
}
/* ******************************************** */

/* ************* Footer ************* */
footer {
	background-color: #212529;
	color: white;
	padding-top: 2%;
	padding-bottom: 1%;
	text-align: center;
}

footer ul {
	list-style: none;
	display: flex;
	justify-content: center;
}

footer li {
	margin-left: 0.5%;
	margin-right: 0.5%;
}

footer ul a {
	color: black;
	transition: 0.3s;
	font-size: 20px;
}

footer ul a {
	color: white;
}

footer ul a:hover {
	color: #3A4EA5;
}
/* ******************************************** */


/* ************* Media Queries ************* */
@media screen and (max-width: 1024px) {
	header {
		padding-top: 15%;
	}
	header img {
		width: 20%;
	}
	header h2 {
		margin-bottom: 5%;
	}
	#sectionAboutUs p {
		width: 70%;
	}
	#sectionAboutUs ul {
		flex-direction: column;
	}
	#sectionAboutUs li {
		margin: auto;
	}
	#sectionOurTeam ul img {
		width: 10%;
		background-color: white;
	}
	#sectionJoinUs #buttonJoinUs li {
		height: 90px;
		width: 90px;
	}
	#sectionJoinUs #buttonJoinUs a {
		padding-top: 15%;
		padding-bottom: 40%;
	}
	#sectionJoinUs .d-block {
		width: 90%;
	}
}

@media screen and (max-width: 600px) {
	header {
		padding-top: 25%;
	}
	header img {
		width: 40%;
	}
	header h1 {
		font-size: 20px;
	}
	header h2 {
		font-size: 15px;
		margin-bottom: 10%;
	}
	nav .navbar-nav li a:hover {
	  	border-top: 0px solid #3A4EA5;
	}
	#sectionAboutUs p {
		width: 90%;
		margin-bottom: 10%;
	}
	#sectionBackgroundImage h3 {
		margin-bottom: 10%;
		font-size: 25px;
	}
	#sectionJoinUs #portfolioJoinUs img {
		width: 320px;
	}

	#sectionJoinUs #portfolioJoinUs img:hover {
		width: 350px;
	}
	#sectionBackgroundImage {
		padding-top: 20%;
		padding-bottom: 20%;
	}
}

@media screen and (max-width: 375px) {
	#sectionJoinUs #portfolioJoinUs img {
		width: 280px;
	}

	#sectionJoinUs #portfolioJoinUs img:hover {
		width: 300px;
	}
	#sectionAboutUs li {
		width: 90%;
	}
	#sectionJoinUs #buttonJoinUs a {
		padding-top: 15%;
   		padding-bottom: 60%;
	}
	#sectionJoinUs #buttonJoinUs li {
		align-content: center;
		margin-left: 1%;
		margin-right: 1%;
		margin-top: 1%;
		margin-bottom: 1%;
	}
}
/* ******************************************** */

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
	background: #101522;
	padding: 0 0 25px 0;
	color: #eee;
	font-size: 14px;
  }
  #footer .footer-top {
	background: #040919;
	padding: 60px 0 30px 0;
  }
  #footer .footer-top .footer-info {
	margin-bottom: 30px;
  }
  #footer .footer-top .footer-info h3 {
	font-size: 26px;
	margin: 0 0 20px 0;
	padding: 2px 0 2px 0;
	line-height: 1;
	font-family: "Raleway", sans-serif;
	font-weight: 700;
	color: #fff;
  }
  #footer .footer-top .footer-info img {
	height: 40px;
	margin-bottom: 10px;
  }
  #footer .footer-top .footer-info p {
	font-size: 14px;
	line-height: 24px;
	margin-bottom: 0;
	font-family: "Raleway", sans-serif;
	color: #fff;
  }
  #footer .footer-top .social-links a {
	display: inline-block;
	background: #222636;
	color: #eee;
	line-height: 1;
	margin-right: 4px;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	transition: 0.3s;
	display: inline-flex;
	align-items: center;
	justify-content: center;
  }
  #footer .footer-top .social-links a i {
	line-height: 0;
	font-size: 16px;
  }
  #footer .footer-top .social-links a:hover {
	background: #0048ff;
	color: #fff;
  }
  #footer .footer-top h4 {
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	text-transform: uppercase;
	position: relative;
	padding-bottom: 12px;
	border-bottom: 2px solid #0048ff;
  }
  #footer .footer-top .footer-links {
	margin-bottom: 30px;
  }
  #footer .footer-top .footer-links ul {
	list-style: none;
	padding: 0;
	margin: 0;
  }
  #footer .footer-top .footer-links ul i {
	padding-right: 5px;
	color: #0048ff;
	font-size: 18px;
  }
  #footer .footer-top .footer-links ul li {
	border-bottom: 1px solid #262c44;
	padding: 10px 0;
  }
  #footer .footer-top .footer-links ul li:first-child {
	padding-top: 0;
  }
  #footer .footer-top .footer-links ul a {
	color: #eee;
  }
  #footer .footer-top .footer-links ul a:hover {
	color: #0048ff;
  }
  #footer .footer-top .footer-contact {
	margin-bottom: 30px;
  }
  #footer .footer-top .footer-contact p {
	line-height: 26px;
  }
  #footer .footer-top .footer-newsletter {
	margin-bottom: 30px;
  }
  #footer .footer-top .footer-newsletter input[type=email] {
	border: 0;
	padding: 6px 8px;
	width: 65%;
  }
  #footer .footer-top .footer-newsletter input[type=submit] {
	background: #0048ff;
	border: 0;
	width: 35%;
	padding: 6px 0;
	text-align: center;
	color: #fff;
	transition: 0.3s;
	cursor: pointer;
  }
  #footer .footer-top .footer-newsletter input[type=submit]:hover {
	background: #e0072f;
  }
  #footer .copyright {
	text-align: center;
	padding-top: 30px;
  }
  #footer .credits {
	text-align: center;
	font-size: 13px;
	color: #ddd;
  }