/* HERO */

html, body{
    overflow-x: hidden;
}
body{
    position: relative;
    overflow-x: hidden;
}
.owl-stage{
    overflow:hidden;
}
[data-aos]{
    will-change: transform, opacity;
}
.contact-hero{
	position:relative;
	height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	color:#fff;
}

.contact-hero-bg{
	position:absolute;
	width:100%;
	height:100%;
	object-fit:cover;
}

.contact-hero-overlay{
	position:absolute;
	inset:0;
	background:rgba(0,0,0,0.5);
}

.contact-hero-content{
	position:relative;
	z-index:2;
}

.contact-title{
	font-size:64px;
	font-weight:500;
	margin-bottom:20px;
}

.contact-sub{
	font-size:20px;
	max-width:650px;
	margin:auto;
}



/* CONTAINER */

.contact-container{
	width:88%;
	max-width:1400px;
	margin:auto;
}



/* CONTACT INFO */

.contact-info-section{
	padding:100px 0;
}

.contact-info-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:40px;
}

.contact-card{
	text-align:center;
}

.contact-card img{
	width:100%;
	height:200px;
	object-fit:cover;
	border-radius:12px;
	margin-bottom:15px;
}

/* ================= CONTACT FORM SECTION ================= */

.contact-form-section{
	background: rgba(0, 92, 93, 1);
	padding: 50px 0;
	color:#fff;
}

.contact-container{
	width:88%;
	max-width:1400px;
	margin:auto;
	display:flex;
	gap:80px;
	align-items:flex-start;
}

/* LEFT SIDE */

.contact-left{
	flex:1;
}

.contact-heading{
	font-family:"Clash Grotesk",sans-serif;
	font-weight:500;
	font-size:42px;
	line-height:1.2;
	margin-bottom:25px;
}
.dropdown-toggle::after{
    margin-left:6px;
    vertical-align:middle;
}
.dropdown-menu{
    display:none;
    flex-direction:column;
}
.dropdown-menu.show{
    display:flex;
    flex-direction: column;
}
.dropdown{
    display:flex;
    align-items:center;
    gap:6px;
}

.dropdown-arrow{
    cursor:pointer;
    font-size:22px;
}
.contact-subtext{
	font-size:18px;
	line-height:27px;
	opacity:0.9;
}

/* RIGHT FORM */

.contact-form{
	flex:1.2;
}

.contact-form form{
	display:flex;
	flex-direction:column;
	gap:18px;
}

/* Inputs */

.contact-form input,
.contact-form textarea{
	width:100%;
	padding:16px 18px;
	background:transparent;
	border:1px solid rgba(255,255,255,0.4);
	border-radius:6px;
	color:#fff;
	font-size:16px;
	outline:none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{
	color:rgba(255,255,255,0.7);
}

.contact-form textarea{
	height:120px;
	resize:none;
}

/* Phone */

.phone-field{
	display:flex;
	align-items:center;
	border:1px solid rgba(255,255,255,0.4);
	border-radius:6px;
	padding-left:12px;
}

.phone-field input{
	border:none;
	padding-left:10px;
}

.flag{
	font-size:18px;
}

/* Two inputs */

.row-fields{
	display:flex;
	gap:18px;
}

.row-fields input{
	flex:1;
}

/* Checkbox */

.checkbox-field{
	display:flex;
	align-items:center;
	gap:10px;
	font-size:14px;
}

.checkbox-field input{
	width:16px;
	height:16px;
}

/* Button */

.submit-btn{
	margin-top:10px;
	width:fit-content;
	padding:14px 28px;
	background:transparent;
	border:1px solid #fff;
	color:#fff;
	font-size:16px;
	cursor:pointer;
	border-radius:6px;
	transition:0.3s ease;
}

.submit-btn:hover{
	background:#fff;
	color:#0f5f58;
}

/* Responsive */

@media (max-width:992px){

	.contact-container{
		flex-direction:column;
		gap:50px;
	}

	.row-fields{
		flex-direction:column;
	}

	.submit-btn{
		width:100%;
	}

}

/* OFFICE IMAGE */

.contact-office img{
	width:100%;
	border-radius:14px;
}



/* MAP */

.contact-map iframe{
	width:100%;
	height:500px;
}



/* CTA */

.contact-cta{
	position:relative;
	height:60vh;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	color:#fff;
}

.contact-cta-bg{
	position:absolute;
	width:100%;
	height:100%;
	object-fit:cover;
}

.contact-cta-overlay{
	position:absolute;
	inset:0;
	background:rgba(0,0,0,0.5);
}

.contact-cta-content{
	position:relative;
	z-index:2;
}
.contact-card img{
    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:12px;
}


/* RESPONSIVE */

@media(max-width:992px){

.contact-info-grid{
	grid-template-columns:1fr;
}

.contact-grid{
	grid-template-columns:1fr;
}

.contact-title{
	font-size:40px;
}

}