@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap');

/* 	#943993
	#f58634 */

*{
	margin: 0;
	padding: 0;
	box-sizing: inherit;
}

html{
	font-family: sans-serif;
	font-size: 62.5%;
	box-sizing: border-box;
	scroll-behavior: smooth;
}

header{
	height: 100vh;
}

/* Navigation */
.site-nav{
	position: absolute;
	top:0;
	left: 0;
	color: #fff;
	width: 100%;
	z-index: 3;
	padding: 1rem 5%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* transition: all 2s cubic-bezier(0,1.95,0,1.95); */
}
.site-nav.en{
	position: fixed;
	background: #424242;
}
.site-nav.en .logo img{
	height: 7rem;
}
.logo img{
	height: 10rem;
}

.main-menu li {
    display: inline-block;
	margin-left: 3rem;
	margin-right: 0;
}
.main-menu li:first-child{
	margin-left: 0;
}

.main-menu a:link,
.main-menu a:visited {
	padding: 8px 0;
    color: inherit;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 1.6rem;
	letter-spacing: 1px;
    border-bottom: 2px solid transparent;
    -webkit-transition: border-bottom 0.2s;
    transition: border-bottom 0.2s;
}

.main-menu a:hover,
.main-menu a:active {
    border-bottom: 3px solid #943993;
}

.main-menu a.active{
    border-bottom: 3px solid #943993;
}

.hide-lg{
	display: none;
}

/* Crousel */
.carousel{
	height: 100vh;
}
.mask{
	background: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
	width: 100%;
	height: 100%;
}

/* who are we */
#waw{
	padding: 5rem 0;
	margin: auto;
	background: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7));
}
.waw{
	margin: 5vh 1% 5vh 0;
	display: grid;
	grid-template-columns: 1fr .1fr 1fr;
	grid-template-rows: .1fr 1fr .1fr;
}
.leftimg{
	border-radius: 20px;
	grid-column: 1/3;
	grid-row: 1/3;
	background: url(../img/worldmap.png) no-repeat; 
	background-size: cover;
	background-position: 70%;
	border: 1px solid none;
}

.desc{
	border-radius: 20px;
	grid-column: 2/4;
	grid-row: 2/4;
	display: flex;
	flex-flow: column;
	background-color: rgba(255, 255, 255,1);
	font-size: 1.6rem;
	text-align: justify;
	color: gray;
	padding: 1rem;
}
.desc h1{
	letter-spacing: 2px;
	word-spacing: 2px;	
	padding: 2rem 0;
	text-transform: uppercase;
	font-size: 4rem;
}
.desc img{
	width: 10%;
	margin-left: auto;
	transition: all 2s;
}	


/* our team */
.ot{
	text-align: center;
	margin: auto;
}
.ot img{
	width: 70%;
}
.ot h3{
	font-size: 2.4rem;
	font-weight: normal;
	letter-spacing: .3rem;
}
.ot p{
	font-size: 1.6rem;
	padding-top: .5rem;
}
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}


/* What We Do */
#wwi{
	max-width: 95vw;
	padding: 5rem 0;
	margin: auto;
	height: auto;
}
#wwe{
	max-width: 95vw;
	margin: auto;
	height: auto;
}
.heading h1{
	text-transform: uppercase;
	font-size: 4rem;
	text-align: center;
	letter-spacing: 2px;
	word-spacing: 2px;
}
.cards-list {
    max-width: 1300px;
    padding: 5rem 0;
    margin: auto;
	display: grid;
    grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
	gap: 30px;
}

.card {
    width: 100%;
	height: 220px;
	cursor: pointer;
    border-radius: 40px;
    box-shadow: 5px 5px 5px 3px rgba(0,0,0,0.25);
	transition: 0.4s;
	text-decoration: none;
	color: inherit;
}

.card_image {
    width: inherit;
    height: inherit;
    border-radius: 40px;
}

.card_image img {
    width: inherit;
    height: inherit;
    border-radius: 40px;
    object-fit: cover;
}

.card_title {
    text-align: center;
    background-color: #fff;
    border-radius: 0px 0px 40px 40px;
    font-family: sans-serif;
    font-weight: normal;
    font-size: 2.4rem;
	transform: translate(0,-100%);
	height: 35px;
}

.card:hover,
.card:active
{
	transform: scale(0.9, 0.9);
	box-shadow: 5px 5px 10px 6px rgba(1,1,1,0.25);
    text-decoration: underline 2px rgba(0, 0, 0, 0.75); 
}

/* contact us */
#con{
	min-height: 100vh;
	margin-top: auto;
	background: linear-gradient(rgba(0,0,0,.8),rgba(0,0,0,.8)),url(../img/bg.jpg) center fixed no-repeat;
	background-size: cover;
}
.con {
	color: #fff;
}
.con h1{
	/* color: #f58634; */
	padding: 5rem 0;
}
  
.form__group:not(last-child) {
	margin-bottom: 2rem;
}
.form__input {
	font-size: 1.5rem;
	font-family: inherit;
	padding: 1.5rem 2rem;
	border-radius: 4px;
	background-color: rbga(#fff, 1);
	border: none;
	border-bottom: 3px solid transparent;
	margin: auto;
	width: 90%;
	display: block;
	transition: all 0.3s;
}
  
.form__input:focus {
	outline: none;
	box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.1);
	border-bottom: 3px solid #943993;
}
.form__input:focus:invalid {
	border-bottom: 3px solid red;
}
.form__input::-webkit-input-placeholder {
	color: #999;
}

.form__label {
	font-size: 1.2rem;
	font-weight: 700;
	margin-left: 6%;
	margin-top: 0.7rem;
	display: block;
	transition: all 0.3s;
}

.form__input:placeholder-shown + .form__label {
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4rem);
}
@-webkit-keyframes short-press {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	50% {
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}
@keyframes short-press {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
	50% {
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
  	}
	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
  	}
}

.hide {
	display: none;
}

.submit-button {
	display: block;
	text-transform: uppercase;
	font-size: 1.3rem;
	letter-spacing: 1px;
	height: 38px;
	width: 120px;
	line-height: 38px;
	overflow: hidden;
	border-radius: 3px;
	box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
	border: 0;
	margin-left: 6%;
	cursor: pointer;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
.submit-button:hover, .submit-button:focus {
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.submit-button.animated {
	-webkit-animation: 0.75s short-press cubic-bezier(0.77, 0, 0.175, 1) forwards;
	animation: 0.75s short-press cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
.submit-button > span {
	display: block;
	text-align: center;
}
.submit-button > span.pre-state-msg {
	-webkit-transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1);
	transition: all 0.7s cubic-bezier(0.77, 0, 0.175, 1);
	-webkit-transition-delay: .75s;
	transition-delay: .75s;
}
.submit-button.state-1 .pre-state-msg {
	margin-top: -38px;
}
.submit-button.state-2 .pre-state-msg {
	margin-top: -76px;
}
.submit-button.state-3 .pre-state-msg {
	margin-top: -114px;
}
/* .vl{
	border-right: 2px solid rgba(255, 255, 255, .5);
} */


/* Find Us */
.fu{
	width: 100%;
	margin: auto;
	display: grid;
	grid-template-columns: .8fr 2fr;
	grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    grid-row-gap: 3rem;
    justify-content: center;
}
.fu > *{
    align-self: center;
}
.fu p{
    font-size: 1.6rem;
	letter-spacing: 1px;
}
.fu a{
	text-decoration: none;
	color: #fff;
}
.fu img{
    justify-self: center;
    width: 4rem;
}

.fil{
	grid-column: 1/3;
	width: 100%;
	display: flex;
	justify-content: space-evenly;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { 
	content:""; display:table; 
}
.group:after { 
	clear:both;
}
.group { zoom:1; /* For IE 6/7 */ }


/* Footer */
footer{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1% 5%;
	background: #424242;
	color: #fff;
	font-size: 1.2rem;
}
footer p{
	text-align: center;
}
footer a {
	color: inherit;
	font-style: italic;
}

@media screen and (max-width: 1275px){
	.bars{
		display: inline-block;
		width: 38px;
		height: 32px;
		cursor: pointer;
		background: transparent;
		transition: all .2s;
	}
	.main-menu{
		background: rgba(0,0,0,0.85);
		position: absolute;
		height: 100vh;
		top:0;
		right: 0;
		bottom: 0;
		left: 0;
		visibility: hidden;
	}

	.show{
		visibility: visible;
	}
	.show li{
		display: block;
		margin: 2rem auto;
		text-align: center;
	}
	.show ul{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.show a:link,
	.show a:visited{
		padding: 1rem 0;
		font-size: 2.4rem;
	}

	.bars{
		position: relative;
		z-index: 50;
	}

	.bars span{
		display: block;
		width: 100%;
		height: 4px;
		background: #fff;
		position: absolute;
		top: 50%;
		margin-top: -2px;
		border-radius: 100px;
		transition: all .2s;
	}

	.bars:before,
	.bars:after{
		content: '';
		background: #fff;
		position: absolute;
		width: 100%;
		height: 4px;
		border-radius: 100px;
		left: 0;
		transition: all .2s;
	}

	.bars:before{
		top: 0;
		transform-origin: 0 0; 
	}

	.bars:after{
		bottom:  0;
		transform-origin: 0 100%; 
	}

	.rotate span{
		display: none;
	}

	.rotate:before{
		transform: rotate(45deg) scale(1.09);
	}

	.rotate:after{
		transform: rotate(-45deg) scale(1.09);
	}
}

@media screen and (max-width: 856px){
	.waw{
		display: block;
		margin: 1% 0;
	}
	.leftimg{
		width: 95vw;
		margin-right: auto;
		height: 50vh;
		margin-bottom: 1rem;
		background-position: 70%;
	}
	.desc{
		transform: translate(0,-10%);
		width: 95vw;
		margin-left: auto;
	}
	.col {
		margin: 1% 0;
	}
}
@media screen and (max-width: 415px){
	html{
		font-size: 50%;
	}
	.site-nav{
		padding: 1rem 3%;
	}
}