/* ########### BASE STYLE START ########### */
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
body {
	font-family: montserrat;
	background-color: rgba(0, 0, 0, 0.7);
}
header {
	height: 100dvh;
	position: relative;
}
.vid-bg {
	position: fixed;
	right: 0;
	bottom: 0;
    min-height: 100%;
    min-width: 100%;
    transform: translateX(calc((100% - 100vw) / 2));
}
.logo {
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
	float: left;
    left: 1.851852dvh;
	top: 1.851852dvh;
	border-radius: 1.851852dvh;
}
.pic-logo {
	margin: 5% 5%;
	width: 90%;
	float: left;
}
.area-title{
	position: absolute;
	width: 100%;
	height: 7.5%;
	top: 0;
	border-radius: 1.851852dvh;
	background-color: rgba(0, 0, 0, 0.9);
}
.area-title h2{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-transform: uppercase;
}
.area-content{
	position: absolute;
	height: 90%;
	width: 100%;
	bottom: 0;
	border-radius: 1.851852dvh;
	background-color: rgba(0, 0, 0, 0.7);
}
.area-content a{
	text-decoration: none;
	color: #fff;
	right: 0;
}
.area-content h4{
	text-align: center;
}
.in-progress{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 3.148148dvh;
	text-align: center;
}
/* ----------- BASE STYLE END ----------- */

/* ########### MENU START ########### */
.nav-area {
	position: absolute;
    right: 1.851852dvh;
	top: 1.851852dvh;
}
.navbar{
	border-radius: 1.851852dvh;
	background: rgba(0, 0, 0, 0.7);
	width: 6.481481dvh;
	height: 6.481481dvh;
	display: flex;
	justify-content: center;
	align-items: center;
}
.menu-area{
	border-radius: 1.851852dvh;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0;
	position: fixed;
	right: -100%;
	top: 10.185185dvh;
	flex-direction: column;
	text-align: center;
	transition: 0.3s;
	z-index: 99;
}
.menu-area li{
	list-style: none;
}
.menu-area li a {
	text-decoration: none;
	color: #fff;
}
.nav-item{
	margin: 1.481481dvh 1.481481dvh;
	font-size: 2.222222dvh;
}
.menu-area.active{
	right: 1.851852dvh;
}
.hamburger{
	display: block;
	cursor: pointer;
}
.hamburger.active .bar:nth-child(2){
	background-color: transparent;
}
.hamburger.active .bar:nth-child(1){
	transform: translateY(1.185185dvh) rotate(45deg);
}
.hamburger.active .bar:nth-child(3){
	transform: translateY(-1.185185dvh) rotate(-45deg);
}
.bar{
	display: block;
	width: 3.703704dvh;
	height: 0.444444dvh; /* 0,12 */
	margin: 0.740741dvh 0; /* 0,2 */
	transition: all 0.3s ease;
	background-color: #fff;
	border-radius: 0.185185dvh;
}
/*
.menu-area li a:hover {
	color: deepskyblue;
}*/
/* ----------- MENU END ----------- */

/* ########### HOMEPAGE START ########### */
.welcome-text {
	position: fixed;
	width: 100%;
	text-align: center;
	bottom: 50%;
	left: 50%;
	transform: translate(-50%, 50%);
	transition: 0.3s;
}
.welcome-text.inactive{
	bottom: -100%;
}
.welcome-text h1{
	color: #fff;
	font-size: 8dvh;
	margin: 0;
	text-shadow: -1px 0 rgba(0, 0, 0, 0.7), 0 1px rgba(0, 0, 0, 0.7), 1px 0 rgba(0, 0, 0, 0.7), 0 -1px rgba(0, 0, 0, 0.7);
}
.welcome-text h2 {
	color: #fff;
	font-size: 6.5dvh;
	margin: 0 2px;
	text-shadow: -1px 0 rgba(0, 0, 0, 0.7), 0 1px rgba(0, 0, 0, 0.7), 1px 0 rgba(0, 0, 0, 0.7), 0 -1px rgba(0, 0, 0, 0.7);
}
.btn {
	background: #fff;
	border: none;
	color: rgba(0, 0, 0, 0.7);
	padding: 0.925926dvh 2.777778dvh;
	font-size: 1.851852dvh;
	text-transform: uppercase;
	border-radius: 2.314815dvh;
	display: inline-block;
	margin-top: 1.851852dvh;
	transition: 0.3s;
	text-align: center;
	justify-content:center;
	vertical-align: middle;
}
.btn:hover{
	cursor: pointer;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
}
/* ----------- HOMEPAGE END ----------- */

/* ########### ABOUT US PAGE START ########### */
.aboutus-area{
	border-radius: 1.851852dvh;
	position: fixed;
	left: 50%;
	transform: translate(-50%, 50%);
	color: #fff;
	bottom: -100%;
	transition: 0.3s;
}
.aboutus-area.active{
	bottom: 50%;
}
/* ----------- ABOUT US PAGE END ----------- */

/* ########### SERVICES PAGE START ########### */
.services-area{
	border-radius: 1.851852dvh;
	position: fixed;
	left: 50%;
	transform: translate(-50%, 50%);
	color: #fff;
	bottom: -100%;
	transition: 0.3s;
}
.services-area.active{
	bottom: 50%;
}
/* ----------- SERVICES PAGE END ----------- */

/* ########### CONTACTS PAGE START ########### */
.contacts-area{
	border-radius: 1.851852dvh;
	position: fixed;
	left: 50%;
	transform: translate(-50%, 50%);
	color: #fff;
	bottom: -100%;
	transition: 0.3s;
	z-index: 1;
}
.contacts-area.active{
	bottom: 50%;
}
.bg-email a{
	position: absolute;
	width: max-content;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.bg-address p{
	position: absolute;
	width: max-content;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.map{
	flex-grow: 1;
	border: none;
	margin: 0;
	padding: 0;
}
/* ----------- CONTACTS PAGE END ----------- */

/* ########### FOOTER START ########### */
footer{
    background: rgba(0, 0, 0, 0.7);
	height: 2.5dvh;
	position: absolute;
	left: 50%;
	transform: translate(-50%);
    bottom: 1.851852dvh;
	border-radius: 1.851852dvh;
	justify-content:center;
	width: 90%;
}
.copyright-claim{
	color: #fff;
	width: 100%;
	display: inline-block;
	vertical-align: center;
	font-size: 2dvh;
	text-align: center;
	position: absolute;
}
/* ----------- FOOTER END ----------- */

/* ########### RESPONSIVITY START ########### */
@media (min-aspect-ratio: 16/9) {
    .vid-bg{
        width: 100dvw;
        height: auto;
    }
}
@media (max-aspect-ratio: 16/9) {
    .vid-bg{
        width: auto;
        height: 100dvh;
    }
}
@media (orientation:landscape){
    .logo{
        aspect-ratio: 1/1;
        width: 12dvw;
    }
	.area-title h2{
		font-size: 3.888889dvh;
	}
	/* ***** ABOUT US ***** */
	.aboutus-area{
		width: 65dvw;
		height: 80dvh;
	}
	/* ***** SERVICES ***** */
	.services-area{
		width: 65dvw;
		height: 80dvh;
	}
	/* ***** CONTACTS ***** */
	.contacts-area{
		width: 65dvw;
		height: 80dvh;
	}
	.contact-type{
		text-align: center;
		font-size: 3.148148dvh;
	}
	.phone-header{
		position: absolute;
		width: 47%;
		left: 2%;
		height: 7%;
		top: 2.5%;
	}
	.bb-mobile{
		width: max-content;
		position: absolute;
		left: 2%;
		width: 47%;
		top: 12%;
		height: 14.75%;
	}
	.bg-mobile{
		width: max-content;
		position: absolute;
		left: 2%;
		width: 47%;
		top: 29.25%;
		height: 12.25%;
		border-bottom: 1px solid #fff;
	}
	.name{
		display: flex;
		justify-content: center;
		height: 50%;
		font-size: 1.851852dvh;
	}
	.name h4{
		position: absolute;
		bottom: 50%;
	}
	.bg-name h4{
		font-size: 1.851852dvh;
	}
	.number{
		display: flex;
		justify-content: center;
		font-size: 1.851852dvh;
	}
	.email-header{
		position: absolute;
		width: 47%;
		left: 2%;
		height: 7%;
		top: 46.5%;
	}
	.bg-email{
		width: max-content;
		position: relative;
		left: 2%;
		width: 47%;
		top: 53.5%;
		height: 14.75%;
		font-size: 1.851852dvh;
		border-bottom: 1px solid #fff;
	}
	.address-header{
		position: absolute;
		width: 47%;
		left: 2%;
		height: 7%;
		top: 73.25%;
	}
	.bg-address{
		width: max-content;
		position: absolute;
		left: 2%;
		width: 47%;
		top: 80.25%;
		height: 14.75%;
		font-size: 1.851852dvh;
	}
	.map-wrapper{
		position: absolute;
		right: 2%;
		bottom: 2.5%;
		border-radius: 1.851852dvh;
		overflow: hidden;
		height: 95%;
		width: 47%;
	}
}
@media (orientation:portrait){
    .logo {
        aspect-ratio: 1/1;
        height: 12dvh;        
    }
	.area-title h2{
		font-size: 4.25dvw;
	}
	/* ***** ABOUT US ***** */
	.aboutus-area{
		width: 80dvw;
		height: 70dvh;
	}
	.aboutus-area.active{
		bottom: 45%;
	}
	/* ***** SERVICES ***** */
	.services-area{
		width: 80dvw;
		height: 70dvh;
	}
	.services-area.active{
		bottom: 45%;
	}
	/* ***** CONTACTS ***** */
	.contacts-area{
		width: 80dvw;
		height: 70dvh;
	}
	.contacts-area.active{
		bottom: 45%;
	}
	.contact-type{
		text-align: center;
		font-size: 2.837684dvh;
	}
	.phone-header{
		position: absolute;
		width: 96%;
		left: 2%;
		height: 6%;
		top: 2%;
	}
	.bb-mobile{
		width: max-content;
		position: absolute;
		left: 2%;
		width: 96%;
		top: 10%;
		height: 7.25%;
	}
	.bg-mobile{
		width: max-content;
		position: absolute;
		left: 2%;
		width: 96%;
		top: 19.25%;
		height: 7.25%;
	}
	.name{
		display: flex;
		justify-content: center;
		height: 50%;
		font-size: 1.851852dvh;
	}
	.name h4{
		position: absolute;
		top: 0;
	}
	.bg-name{
		display: flex;
		justify-content: center;
		height: 50%;
		font-size: 1.851852dvh;
	}
	.bg-name h4{
		position: absolute;
		top: 0;
	}
	.number{
		display: flex;
		justify-content: center;
		font-size: 1.851852dvh;
	}
	.email-border{
		border-bottom: 1px solid #fff;
		position: absolute;
		width: 96%;
		left: 2%;
		top: 28.5%;
		height: 0;
	}
	.email-header{
		position: absolute;
		width: 96%;
		left: 2%;
		height: 6%;
		top: 30.5%;
	}
	.bg-email{
		width: max-content;
		position: relative;
		left: 2%;
		width: 96%;
		top: 38.5%;
		height: 5.25%;
		font-size: 1.851852dvh;
	}
	.address-border{
		border-bottom: 1px solid #fff;
		position: absolute;
		width: 96%;
		left: 2%;
		top: 45.75%;
		height: 0;
	}
	.address-header{
		position: absolute;
		width: 96%;
		left: 2%;
		height: 6%;
		top: 47.75%;
	}
	.bg-address{
		width: max-content;
		position: absolute;
		left: 2%;
		width: 96%;
		top: 55.75%;
		height: 5.25%;
		font-size: 1.851852dvh;
	}
	.map-wrapper{
		position: absolute;
		left: 2%;
		bottom: 2%;
		border-radius: 1.851852dvh;
		overflow: hidden;
		height: 35%;
		width: 96%;
	}
}
/* ----------- RESPONSIVITY END ----------- */