/*
    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: linear-gradient(0deg, rgba(6, 12, 34, 0.7), rgba(6, 12, 34, 0.7)), url('../img/backgrounds/bg_01.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: #3A4EA5;
    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: white;
  cursor: pointer;
  transition: 0.5s;
  padding: 15px;
  border-radius: 4px;
}

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


/* ************* Navbar ************* */
nav .navbar-nav li a:hover {
  	color: white !important;
  	border-top: 2px solid #3A4EA5;
  	padding-top: 6px;
}

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


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

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: #3A4EA5;
}

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

header #buttonHeader {
	color: white;
	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: #3A4EA5;
    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-color: white;
	color: black;
}
/* ******************************************** */


/* ************* Section (Our Team) ************* */
#sectionOurTeam ul {
	list-style: none;
	display: flex;
	margin-top: 3%;
	justify-content: center;
	text-align: center;
}

#sectionOurTeam h3{
	color: black;
}

#sectionOurTeam li {
	margin-top: 1%;
	margin-bottom: 1%;
	color: black;
	transition: 0.5s;
}

#sectionOurTeam ul img {
	width: 40%;
	transition: 0.5s;
	margin-bottom: 2%;
}

#sectionOurTeam hr {
	background-color: white;
}

#sectionOurTeam {
	background: #F5F5F5;
	padding-top: 3%;
	padding-bottom: 2%;
	text-align: center;
	color: white;
	background-size: cover;
}
/* ******************************************** */


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

#sectionBackgroundImage a {
	color: white;
	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 {
	background: linear-gradient(0deg, rgba(6, 12, 34, 0.7), rgba(6, 12, 34, 0.7)), url('../img/backgrounds/bg_section.jpg') no-repeat fixed;
	padding-top: 6%;
	padding-bottom: 6%;
	text-align: center;
	color: white;
	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: 35px;
}

#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: 450px;
}

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

#sectionJoinUs {
	background-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: 25%;
	}
	#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%;
	}
}
/* ******************************************** */