*{
	margin: 0;
	padding: 0;
	font-family: 'Poppins', sans-serif; /*Choosing font for the webiste, from GoogleFonts*/
}

body{
	background-color: #fff;
}

p{
	color: #002349;
	font-weight: 0;
	font-size: 18px;
	line-height: 22px;
	font-weight: 300px;
}
h1, h2, h3, h4, h5, h6{
	color: #002349;
}

.header{
	min-height: 70vh;
	width:  100%;
	background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url(../images/mainPageBanner.jpg);
	background-position: center;
	background-size: cover;
	position: relative;
}

nav{
	display: flex;
	padding: 1% 4%;
	justify-content: space-between;
	align-items: center;
	
}

nav img{
	width: 300px;

}
#logo{
	margin-right: 50px;
}

/*Language icons*/
.nav-links img{
	width: 20px;
	padding-left: 5px;
}

.nav-links{
	flex: 1;
	text-align: right;
}

/*Positioning the nav bar*/
.nav-links ul li{
	list-style: none;
	display: inline-block;
	padding: 8px 12px;
	position: relative;
}
/*Nav bar styling*/
.nav-links ul li a{
	color: #fff;
	text-decoration: none;
	font-size: 18px;
	/*font-weight: 300;*/
}

/*Hover effect*/
.nav-links ul li::after{
	content: '';
	width: 0%;
	height: 2px;
	background: #c7a44e;
	display: block;
	margin: auto;
	transition: 0.5s;
}
.nav-links ul li:hover::after{
	width: 100%;
}

/*Dropdown content styling*/
.dropdown-content {
  display: block;
  visibility: hidden;
  position: absolute;
  top: 90%;
  background-color: #4c4c5c; /* dropdown box color */
  min-width: 190px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);
  z-index: 4;
  opacity: 0;
  transition: 0.5s;
}

.dropdown-content a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown:hover .dropdown-content {
  visibility: visible;
  opacity: 1;
}

/* Hover effect on dropdown menu */
.dropdown-content a::after {
	content: '';
	width: 0%;
	height: 2px;
	background: #fa28b7;
	display: block;
	margin: auto;
	transition: 0.5s;
}
.dropdown-content a:hover::after{
	width: 100%;
}


/*Intro text after the nav menu*/
.text-box{
	width: 90%;
	color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
.text-box h1{
	font-size: 40px;
	color: #fff;
}
.text-box p{
	color: #fff;
	margin: 10px 0 40px;
	font-size: 22px;
}
/*Only display menu icons on small devices*/
nav .fa{
	display: none;
}

/*Adjusting design for smaller screen devices*/
@media(max-width: 700px){
	.text-box h1{
		font-size: 30px;
	}
	.nav-links ul li{
		display: block;
	}
	.nav-links ul li a{
		color: #002349;
	}
	.nav-links{
		position: fixed;
		background: #fff; 
		height: 100vh;
		width: 200px;
		top: 0;
		right: -200px;
		text-align: left;
		z-index: 2;
		transition: 1s;
	}
	/*Enabling menu icons*/
	nav .fa{
		display: block;
		margin: 10px;
		font-size: 22px;
		cursor: pointer;
	}
	nav .fa .closeMenuIcon{
		color: #002349;
	}
	nav .fa .openMenuIcon{
		color: #fff;
	}
	.nav-links ul{
		padding: 30px;
	}
	nav img{
		width: 230px;
	}
}






/* Styling subpage banner section */
.sub-header1, .sub-header2{
	height: 40vh;
	width: 100%;
	background-position: center;
	background-size: cover;
	position: relative;
}

.sub-header1{
	background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url(../images/pageBanner2.jpg);
}

.sub-header2{
	background-image: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)), url(../images/pageBanner3.jpg);
}
.sub-header1 h1, .sub-header2 h1{
	text-align: center;
	color: #fff;
	font-size: 40px;
	margin-top: 70px;
}





.numberCircle {
	display: inline-block;
	margin-bottom: 20px;
  width: 50px;
  line-height: 50px;
  border-radius: 50%;
  text-align: center;
  font-size: 30px;
  border: 2px solid #957C3D;
  color: #957C3D;
}





.hero-btn, .hero-btn2, .whatsappBtn, .telegramBtn{
	display: inline-block;
	text-decoration: none;
	position: relative;
	cursor: pointer;
}


/* Colored button that becomes transparent on hover */
.hero-btn{
	color: #fff;
	border: 1px solid #fff;
	padding: 12px 34px;
	font-size: 15px;
	background: transparent;
}
.hero-btn:hover{
	border: 1px solid #957C3D;
	background: #957C3D;
	transition: 1s;
}


/* Button with white background and colored text, goes colored on hover*/
.hero-btn2{
	color: #957C3D;
	border: 1px solid #957C3D;
	padding: 12px 34px;
	font-size: 15px;
	background: transparent;
}
.hero-btn2:hover{
	border: 1px solid #957C3D;
	background: #957C3D;
	color: #fff;
	transition: 1s;
}


.whatsappBtn{
	border: 1px solid #1ed630;
	border-radius: 5px;
	background-color: #fff;
	padding: 12px 20px;
	font-size: 15px;
	color: #1ed630;
	vertical-align: middle;
	margin: 8px auto;

}
.whatsappBtn .fa{
	font-size: 18px;
}
.whatsappBtn:hover{
	border: 1px solid #1ed630;
	background: #1ed630;
	color: #fff;
	transition: 1s;
}

.telegramBtn{
	border: 1px solid #1880db;
	border-radius: 5px;
	background-color: #fff;
	padding: 12px 20px;
	font-size: 15px;
	color: #1880db;
	vertical-align: middle;
	margin: 8px auto;

}
.telegramBtn .fa{
	font-size: 18px;
}
.telegramBtn:hover{
	border: 1px solid #1880db;
	background: #1880db;
	color: #fff;
	transition: 1s;
}




.image-right{
	float:right; 
	margin:25px; 
	margin-top:0px
}
.image-center{
	display: block;
  margin: 20px auto;
  width: 60%;
}
@media(max-width: 700px){
	.image-center{
		width: 90%;
	}
}




.contentSection1, .contentSection2{
  width: 80%;
	margin: 100px auto;
}
.contentSection1 h1, .contentSection2 h1{
	font-size: 36px;
	font-weight: 600;
	text-align: center;
	margin-bottom: 50px;
}
.contentSection1 p, .contentSection2 p{
	font-weight: 300px;
	line-height: 22px;
	padding: 10px;
}

.contentSection1{
	text-align: center;
}

.contentSection2{
	text-align: justify;
}

@media(min-width: 1700px){
	.contentSection1, .contentSection2{
	  width: 60%;
		margin: 100px auto;
	}
}



@media (max-width: 700px){
  .show-mobile {
    display: block;
  }
  .hide-mobile {
    display: none;
  }
}

@media (min-width: 700px){
  .show-mobile {
  	display: none;
  }
  .hide-mobile {
  	display: block;
  }
}





/* Content Layout Design */
.row{
	margin-top: 5%;
	display: flex;
	justify-content: space-between;
}


.column_4CL_1{
	flex-basis: 24%;
	border-radius: 10px;
	margin-bottom: 5%; /* for bottom space on smaller screens*/
	text-align: left;
}
.column_4CL_1 img{
	width: 100%;
	border-radius: 10px;
}
.column_4CL_1 p{
	padding: 0;
	color: #555;
	/*margin-bottom: auto;*/
}
.column_4CL_1 h3{
	margin-top: 10px;
	margin-bottom: 15px;
	text-align: left;
}




.column_2CL_1{
	flex-basis: 47%;
	border-radius: 10px;
	margin-bottom: 5%; /* for bottom space on smaller screens*/
	text-align: center;
}
.column_2CL_1 img{
	width: 100%;
	border-radius: 10px;
}
.column_2CL_1 p{
	padding: 0;
	color: #555;
	/*margin-bottom: auto;*/
}
.column_2CL_1 h3{
	margin-top: 10px;
	margin-bottom: 15px;
	text-align: left;
}
.column_2CL_1 a{
	width: fit-content;
}





/*Table design with 3-columned layout, 
where each column is in a colored box, with a hover shadow effetc */
.column_3CL_1{
	flex-basis: 31%;
	background: #e3e3e3;
	border-radius: 10px;
	margin-bottom: 5%;
	padding: 20px 12px;
	box-sizing: border-box;
	transition: 0.5s;
}
.column_3CL_1 h3{
	text-align: center;
	font-weight: 600;
	margin: 8px 0;
}
.column_3CL_1 p{
	text-align: left;
}
.column_3CL_1 .fa{
	font-size: 40px;
	margin-left: 10px;
	color: #002349;
}
.column_3CL_1:hover{
	box-shadow: 0 0 30px 0px rgba(0,0,0,0.2);
}
@media(max-width: 700px){
	.row{
		flex-direction: column;
	}
}





/* Table with 3 column layout, each column has a picture, title and text. 
Each column also includes a link button  */
.column_3CL_2{
	flex-basis: 31%;
	border-radius: 10px;
	margin-bottom: 5%; /* for bottom space on smaller screens*/
	text-align: left;
	position: relative;
}
.column_3CL_2 img{
	width: 100%;
	border-radius: 10px;
}
.column_3CL_2 p{
	padding: 0;
	color: #002349;
	/*margin-bottom: auto;*/
}
.column_3CL_2 h3{
	margin-top: 10px;
	margin-bottom: 15px;
	text-align: left;
}
.column_3CL_2 a{
	margin: 25px auto;
	text-align: center;
	position: relative;
  left: 50%;
	transform: translateX(-50%);
}

@media(min-width: 700px){
	.column_3CL_2 a{
	margin: 0 auto;
	display: inline-block;
	text-align: center;
	position: absolute;
  left: 50%;
	transform: translateX(-50%);
	bottom: -10%;
	width: auto;
	}
}










/* Questions Area*/
.contactBanner{
	margin: 100px auto;
	margin-top: 140px;
	width: 80%;
	background-image: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url(../images/contactBanner.jpg);
	background-position: center;
	background-size: cover;
	border-radius: 10px;
	text-align: center;
	padding: 100px 0;
}
.contactBanner h1{
	font-size: 45px;
	color: #fff;
	margin-bottom: 40px;
	padding: 0;
}
@media(max-width: 700px){
	.contactBanner h1{
		font-size: 30px;
	}
}
@media(min-width: 1700px){
	.contactBanner{
	  width: 60%;
	}
}






footer{
	margin-top: 110px;
	padding: 3vw 10vw 5vw 10vw;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap; /* content that doesnt fit the column will get wrapped */
	gap: 15px;
	background-color: #002349;
	color: #fff;
}
@media(min-width: 1300px){
	footer{
	  padding: 3vw 20vw 5vw 20vw;
	}
}
@media(min-width: 1900px){
	footer{
	  padding: 3vw 30vw 5vw 30vw;
	}
}

.footer-col{
	margin-top: 30px;
}
footer ul{
	list-style: none;
}
footer h3{
	color: #fff;
	font-weight: 600;
	padding-bottom: 19px;
}
footer a{
	text-decoration: none;
	color: #bababa;
	transition: 0.3 ease;
}
footer li{
	padding: 8px 0 8px 0;
	font-size: 1rem;
	cursor: pointer;
}
footer a:hover{
	text-decoration: underline;
	color: #fff;
}

footer p{
	color: #828282;
}




.copyright{
	margin-top: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	flex-wrap: left;
}
.copyright i{
	margin: 0 5px 0 0;
	width: fit-content;
	padding: 10px 13px;
	border: 1px solid #bababa;
	color: #fff;
	cursor: pointer;
	transition: 0.3s ease;
}
.copyright i:hover{
	background-color: #fff;
	border: 1px solid #fff;
	color: #4d4d4d;
}







/* map with the location */
.location{
	width: 80%;
	margin: auto;
	padding: 80px 0;
}
.location iframe{
	width: 100%;
}






/* Contact page styling */
.contacts-list{
	width: 80%;
	margin: auto;
}
.contacts-column{
	flex-basis: 48%;
	margin-bottom: 30px;
}
.contacts-column div{
	display: flex;
	align-items: center;
	margin-bottom: 40px;
}
.contacts-column .fa{
	font-size: 28px;
	color: #957C3D;
	margin: 10px;
	margin: 30px;
}
.contacts-column p{
	padding: 0;
}
.contacts-column h5{
	font-size: 20px;
	margin-bottom: 5px;
	color: #002349;
	font-weight: 400;
}
.contacts-column input, .contacts-column textarea{
	width: 100%;
	padding: 15px;
	margin-bottom: 17px;
	outline: none;
	border: 1px solid #ccc;
	box-sizing: border-box;
}
@media (max-width: 500px){
	.contacts-column h5{
		font-size: 16px;
	}
}








.tableV1 {
  border-collapse: collapse;
  width: 100%;
}

.tableV1 td, .tableV1 th {
  border: 1px solid #ddd;
  padding: 8px;
}

.tableV1 tr:nth-child(even){
	background-color: #f2f2f2;
}

.tableV1 tr:hover {
	background-color: #ddd;
}

.tableV1 th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: center;
  background-color: #615d5e;
  color: white;
}




/* Animations */

/* Fade in and out animations */
.hidden{
	opacity: 0;
	/*filter: blur(2px);*/
	transform: translateX(-100%);
	transition: all 2s;
}
/*
@media(prefers-reduced-motion){
	.hidden{
		transition: none;
	}
}*/
.show{
	opacity: 1;
	/*filter: blur(0);*/
	transform: translateX(0);
}

.stack:nth-child(2){
	transition-delay: 200ms;
}
.stack:nth-child(3){
	transition-delay: 400ms;
}
.stack:nth-child(4){
	transition-delay: 600ms;
}
.stack:nth-child(5){
	transition-delay: 800ms;
}
.stack:nth-child(6){
	transition-delay: 1000ms;
}
.stack:nth-child(7){
	transition-delay: 1200ms;
}
.stack:nth-child(8){
	transition-delay: 1400ms;
}
.stack:nth-child(9){
	transition-delay: 1400ms;
}

.stack:nth-child(10){
	transition-delay: 1400ms;
}

.stack:nth-child(11){
	transition-delay: 1400ms;
}
.stack:nth-child(12){
	transition-delay: 1400ms;
}




/* Animated bar charts  */



/*  Scroll through reviews  */









