/* ✦✦✦ MAIN PAGE BACKGROUND FORMATING ✦✦✦ */ .contact-main { 	width: 100%; 	height: 100vh; 	background-image: url("/images/healwithishii-source/contact-background.jpg"); 	background-repeat: no-repeat; 	background-size: cover; 	background-position: center; 	position: fixed; 	display: inline-block; 	opacity: 1; 	margin: 0; }  /* ✦✦✦ MAIN PAGE BACKGROUND FORMATING ✦✦✦ */ .contact-tint { 	position: relative; 	display: inline-block; 	width: 100%; 	height: 100%; 	background-color: #000000; 	position: fixed; 	top: 0; 	left: 0; 	opacity: 0.5; }  /* ✦✦✦ NAVBAR SIDEMUNU CURRENT SELECTION FORMATING ✦✦✦ */ #navbar-sidemenu ul #navbar-sidemenu-contact a { 	color: #EAC349; }  /* ✦✦✦ CONTACT BODY CONTAINER FORMATING ✦✦✦ */ .contact-body-container { 	position: fixed; 	display: inline-block; 	margin-top: 80px; 	width: 100%; 	text-align: center; 	align-items: center; 	justify-content: center; 	vertical-align: middle; 	top: 0; 	bottom: 0; 	overflow-y: scroll; 	overflow-x: hidden; }  /* ✦✦✦ CONTACT BODY FIRST CONTAINT FORMATING ✦✦✦ */ .contact-body-first-containt { 	position: relative; 	display: inline-block; 	width: 90%; 	text-align: center; 	justify-content: center; 	vertical-align: bottom; 	align-items: center; 	padding: 20px 0; 	margin: 20px 0; }  /* ✦✦✦ CONTACT BODY FIRST CONTAINT H1 FORMATING ✦✦✦ */ .contact-body-first-containt-h1 { 	position: relative; 	display: inline-block; 	width: 90%; 	text-align: left; 	justify-content: left; 	vertical-align: middle; 	color: #EAC349; 	font-family: "Tangerine"; 	font-weight: normal; 	font-size: 40px; 	letter-spacing: 1px; 	padding: 0 5px; 	margin: 0 5px; }  /* ✦✦✦ CONTACT BODY FIRST CONTAINT BIG FORMATING ✦✦✦ */ .contact-body-first-containt-big { 	position: relative; 	display: inline-block; 	width: 90%; 	background: linear-gradient(-60deg, #906111 0, #FEF3A8 30%, #FFF8CF 50%, #FEF3A8 70%, #906111 100%); 	-webkit-background-clip: text;   -webkit-text-fill-color: transparent; 	font-family: "Poiret One", sans-serif; 	font-weight: bold; 	font-size: 40px; 	text-align: left; 	padding: 5px; 	margin: 5px; }  /* ✦✦✦ CONTACT BODY FIRST CONTAINT SMALL FORMATING ✦✦✦ */ .contact-body-first-containt-small { 	position: relative; 	display: inline-block; 	width: 90%; 	color: #c5c5c5; 	font-family: "Sansation", sans-serif; 	font-size: 20px; 	line-height: 30px; 	text-align: left; 	padding: 5px; 	margin: 5px; }  /* ✦✦✦ CONTACT BODY SECOND CONTAINT FORMATING ✦✦✦ */ .contact-body-second-containt { 	position: relative; 	display: inline-block; 	width: 90%; 	text-align: center; 	justify-content: center; 	vertical-align: middle; 	align-items: center; 	padding: 20px 0; 	margin: 20px 0; }  /* ✦✦✦ CONTACT BODY ITEM ONE FORMATING ✦✦✦ */ .contact-body-item-one { 	position: relative; 	display: inline-block; 	padding: 25px 30px; 	margin: 10px; 	text-align: center; 	vertical-align: middle; 	border: 1px solid rgba(234, 195, 73, 0.25); 	border-radius: 16px; 	width: 90%; 	background-color: rgba(0, 0, 0, 0.65); 	backdrop-filter: blur(10px); 	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7); 	box-sizing: border-box; }  /* ✦✦✦ CONTACT FORM BOX FORMATING ✦✦✦ */ .contact-form-box { 	position: relative; 	display: flex; 	flex-direction: column; 	width: 100%; 	padding: 10px 0; 	box-sizing: border-box; }  /* ✦✦✦ CONTACT FORM GRID (2 FIELDS PER ROW) ✦✦✦ */ .contact-form-grid { 	display: grid; 	grid-template-columns: 1fr; 	gap: 14px 20px; 	width: 100%; 	box-sizing: border-box; }  @media only screen and (min-width: 600px) { 	.contact-form-grid { 		grid-template-columns: 1fr 1fr; 	} }  .contact-form-field { 	display: flex; 	flex-direction: column; 	width: 100%; 	text-align: left; 	box-sizing: border-box; }  .contact-form-field-full { 	grid-column: 1 / -1; }  /* ✦✦✦ CONTACT FORM LABEL FORMATING ✦✦✦ */ .contact-form-label { 	display: block; 	width: 100%; 	color: #EDE2B8; 	font-family: var(--font-inter), system-ui, sans-serif; 	font-size: 13px; 	font-weight: 600; 	letter-spacing: 0.5px; 	margin-bottom: 6px; 	text-transform: uppercase; }  /* ✦✦✦ CONTACT FORM INPUT & DROPDOWN FORMATING ✦✦✦ */ .contact-form-input { 	width: 100%; 	height: 44px; 	border: 1.5px solid rgba(234, 195, 73, 0.35); 	border-radius: 8px; 	background: rgba(25, 23, 20, 0.85); 	color: #FFFFFF; 	font-family: var(--font-inter), system-ui, sans-serif; 	font-size: 14px; 	padding: 0 14px; 	box-sizing: border-box; 	transition: all 0.3s ease; }  .contact-form-dropdown { 	width: 100%; 	height: 44px; 	border: 1.5px solid rgba(234, 195, 73, 0.4); 	border-radius: 8px; 	background-color: rgba(22, 19, 15, 0.9); 	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23EAC349' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); 	background-repeat: no-repeat; 	background-position: right 14px center; 	background-size: 16px; 	color: #FFFFFF; 	font-family: var(--font-inter), system-ui, sans-serif; 	font-size: 14px; 	font-weight: 500; 	padding: 0 38px 0 14px; 	box-sizing: border-box; 	appearance: none; 	-webkit-appearance: none; 	-moz-appearance: none; 	cursor: pointer; 	text-overflow: ellipsis; 	white-space: nowrap; 	overflow: hidden; 	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); }  .contact-form-dropdown:hover { 	border-color: #EAC349; 	box-shadow: 0 0 12px rgba(234, 195, 73, 0.4); }  .contact-form-dropdown option { 	background-color: #14120E; 	color: #EDE2B8; 	font-family: var(--font-inter), system-ui, sans-serif; 	font-size: 14px; 	font-weight: 500; 	padding: 12px 14px; 	line-height: 24px; }  .contact-form-dropdown option[disabled] { 	color: #888888; }  .contact-form-message { 	width: 100%; 	height: 100px; 	border: 1.5px solid rgba(234, 195, 73, 0.35); 	border-radius: 8px; 	background: rgba(25, 23, 20, 0.85); 	color: #FFFFFF; 	font-family: var(--font-inter), system-ui, sans-serif; 	font-size: 14px; 	padding: 12px 14px; 	box-sizing: border-box; 	resize: vertical; 	transition: all 0.3s ease; }  .contact-form-input::placeholder, .contact-form-message::placeholder { 	color: #888888; 	font-weight: 400; }  .contact-form-input[type="date"]::-webkit-calendar-picker-indicator { 	filter: invert(0.85) sepia(1) saturate(5) hue-rotate(5deg); 	cursor: pointer; 	opacity: 0.9; 	transition: opacity 0.2s ease, transform 0.2s ease; }  .contact-form-input[type="date"]::-webkit-calendar-picker-indicator:hover { 	opacity: 1; 	transform: scale(1.15); }  .contact-form-input:focus, .contact-form-message:focus { 	background: rgba(35, 30, 22, 0.95); 	border-color: #EAC349; 	box-shadow: 0 0 12px rgba(234, 195, 73, 0.45); 	outline: none; 	color: #FFFFFF; }  /* ✦✦✦ PREMIUM CONSENT CHECKBOX FORMATING ✦✦✦ */ .contact-form-consent-container { 	margin: 16px 0 12px 0; 	width: 100%; 	text-align: left; }  .contact-form-checkbox-label { 	display: inline-flex; 	align-items: center; 	gap: 12px; 	cursor: pointer; 	user-select: none; 	color: #D5D5D5; 	font-family: var(--font-inter), system-ui, sans-serif; 	font-size: 13.5px; 	line-height: 1.4; 	transition: color 0.25s ease; }  .contact-form-checkbox-label:hover { 	color: #FFFFFF; }  .contact-form-confirmation-hidden { 	position: absolute; 	opacity: 0; 	width: 0; 	height: 0; 	pointer-events: none; }  .contact-form-custom-checkbox { 	position: relative; 	width: 22px; 	height: 22px; 	min-width: 22px; 	border: 2px solid #EAC349; 	border-radius: 6px; 	background: rgba(0, 0, 0, 0.6); 	display: flex; 	align-items: center; 	justify-content: center; 	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); 	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }  .contact-form-check-icon { 	width: 14px; 	height: 14px; 	color: #0F0D08; 	opacity: 0; 	transform: scale(0.5); 	transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }  .contact-form-confirmation-hidden:checked + .contact-form-custom-checkbox { 	background: linear-gradient(135deg, #FFF1B0 0%, #EAC349 50%, #D4A017 100%); 	border-color: #FFF1B0; 	box-shadow: 0 0 14px rgba(234, 195, 73, 0.65); }  .contact-form-confirmation-hidden:checked + .contact-form-custom-checkbox .contact-form-check-icon { 	opacity: 1; 	transform: scale(1); }  .contact-form-confirmation-hidden:focus-visible + .contact-form-custom-checkbox { 	outline: 2px solid #FFF1B0; 	outline-offset: 2px; }  /* ✦✦✦ CONTACT FORM BUTTON ACTIONS ✦✦✦ */ .contact-form-actions { 	display: flex; 	gap: 12px; 	align-items: center; 	margin-top: 10px; }  .contact-form-submit { 	display: inline-flex; 	align-items: center; 	justify-content: center; 	font-family: var(--font-inter), system-ui, sans-serif; 	height: 44px; 	padding: 0 28px; 	font-size: 13.5px; 	font-weight: 700; 	letter-spacing: 0.8px; 	text-transform: uppercase; 	border: 1px solid rgba(255, 245, 210, 0.9); 	border-radius: 50px; 	cursor: pointer; 	color: #0F0D08; 	background: linear-gradient(135deg, #FFF1B0 0%, #EAC349 45%, #D4A017 100%); 	box-shadow: 0 4px 18px rgba(234, 195, 73, 0.45); 	transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1); }  .contact-form-submit:hover { 	background: linear-gradient(135deg, #FFFFFF 0%, #F5D77F 45%, #EAC349 100%); 	color: #000000; 	border-color: #FFFFFF; 	box-shadow: 0 6px 26px rgba(234, 195, 73, 0.7); 	transform: translateY(-2px); }  .contact-form-reset { 	display: inline-flex; 	align-items: center; 	justify-content: center; 	font-family: var(--font-inter), system-ui, sans-serif; 	height: 44px; 	padding: 0 20px; 	font-size: 13.5px; 	font-weight: 600; 	border: 1px solid rgba(255, 255, 255, 0.2); 	border-radius: 50px; 	cursor: pointer; 	color: #CCCCCC; 	background: rgba(255, 255, 255, 0.05); 	transition: all 0.3s ease; }  .contact-form-reset:hover { 	background: rgba(255, 255, 255, 0.15); 	color: #FFFFFF; 	border-color: rgba(255, 255, 255, 0.4); }  /* ✦✦✦ INLINE ATTRACTIVE STATUS MESSAGE FORMATING ✦✦✦ */ .contact-form-display { 	display: inline-flex; 	align-items: center; 	justify-content: flex-start; 	width: 100%; 	margin-top: 18px; 	padding: 14px 18px; 	border: 1.5px solid rgba(234, 195, 73, 0.45); 	border-radius: 12px; 	background: linear-gradient(135deg, rgba(28, 24, 18, 0.95) 0%, rgba(16, 13, 9, 0.98) 100%); 	color: #FFF1B0; 	font-family: var(--font-inter), system-ui, sans-serif; 	font-size: 14px; 	font-weight: 600; 	line-height: 1.5; 	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6), 0 0 16px rgba(234, 195, 73, 0.25); 	backdrop-filter: blur(10px); 	box-sizing: border-box; 	animation: contactStatusSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; }  .contact-form-display-success { 	border-color: rgba(72, 187, 120, 0.65); 	color: #9AE6B4; 	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6), 0 0 16px rgba(72, 187, 120, 0.3); }  .contact-form-display-error { 	border-color: rgba(245, 101, 101, 0.65); 	color: #FEB2B2; 	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6), 0 0 16px rgba(245, 101, 101, 0.3); }  @keyframes contactStatusSlideUp { 	from { 		opacity: 0; 		transform: translateY(8px); 	} 	to { 		opacity: 1; 		transform: translateY(0); 	} }  /* ✦✦✦ CONTACT BODY ITEM TWO FORMATING ✦✦✦ */ .contact-body-item-two { 	position: relative; 	display: inline-block; 	padding: 10px; 	margin: 10px; 	text-align: center; 	vertical-align: top; 	border: none; 	border-radius: 10px; 	width: 90%; 	height: 90%; 	background-color: rgba(0, 0, 0, 0.5); 	box-shadow: 2px 2px 5px black; }  /* ✦✦✦ CONTACT BODY LOCATION CONTAINER FORMATING ✦✦✦ */ .contact-body-location-container { 	position: relative; 	display: inline-block; 	width: 90%; 	height: 300px; 	padding: 10px; 	margin: 10px; 	text-align: center; 	vertical-align: middle; }  /* ✦✦✦ CONTACT BDOY LOCATION MAP FORMATING ✦✦✦ */ .contact-body-location-map { 	position: relative; 	display: inline-block; 	width: 100%; 	height: 100%; 	border: none; 	border-radius: 10px; }  /* ✦✦✦ CONTACT BODY LOCATION ADDRESS FORMATING ✦✦✦ */ .contact-body-location-address { 	position: relative; 	display: inline-block; 	width: 90%; 	padding: 10px; 	margin: 10px; 	text-align: center; 	vertical-align: middle; }  /* ✦✦✦ CONTACT BODY ADDRESS ITEM FORMATING ✦✦✦ */ .contact-body-address-item { 	position: relative; 	display: inline-block; 	width: 100%; }  /* ✦✦✦ CONTACT BODY ADDRESS H1 FORMATING ✦✦✦ */ .contact-body-address-h1 { 	position: relative; 	display: inline-block; 	width: 95%; 	background: linear-gradient(-60deg, #906111 0, #FEF3A8 30%, #FFF8CF 50%, #FEF3A8 70%, #906111 100%); 	-webkit-background-clip: text;   -webkit-text-fill-color: transparent; 	font-family: "Poiret One", sans-serif; 	font-weight: bold; 	font-size: 25px; 	text-align: left; 	padding: 2px; 	margin: 2px; }  /* ✦✦✦ CONTACT BODY ADDRESS BIG FORMATING ✦✦✦ */ .contact-body-address-big { 	position: relative; 	display: inline-block; 	width: 95%; 	color: #c5c5c5; 	font-family: "Sansation", sans-serif; 	font-size: 18px; 	line-height: 20px; 	text-align: left; 	padding: 2px; 	margin: 2px; }  /* ✦✦✦ CONTACT BODY ADDRESS SMALL FORMATING ✦✦✦ */ .contact-body-address-small { 	position: relative; 	display: inline-block; 	width: 95%; 	color: #c5c5c5; 	font-family: "Sansation", sans-serif; 	font-size: 18px; 	line-height: 20px; 	text-align: left; 	padding: 2px; 	margin: 2px; }  /* ✦✦✦ CONTACT BODY ADDRESS SMALL FORMATING ✦✦✦ */ .contact-body-address-small ion-icon { 	position: relative; 	display: inline-block; 	font-size: 18px; 	color: #EDE2B8; 	vertical-align: middle; 	padding: 2px; 	margin: 2px; 	margin-right: 5px; }   /* ╔═══════════════════════════════════════════╗ */ /* ║             RESPONSIVE MEDIA              ║ */ /* ╚═══════════════════════════════════════════╝ */  /* ✦✦✦ RESPONSIVE MEDIA QUERIES 700PX ✦✦✦ */ @media only screen and (min-width: 700px) { 	.contact-body-item-one { 		width: 80%; 	} 	.contact-body-item-two { 		width: 80%; 	} }  /* ✦✦✦ RESPONSIVE MEDIA QUERIES 1000PX ✦✦✦ */ @media only screen and (min-width: 1000px) { 	.contact-body-second-containt { 		vertical-align: middle; 		height: 700px; 	} 	.contact-body-item-one { 		width: 45%; 		height: 700px; 	} 	.contact-body-item-two { 		width: 45%; 		height: 700px; 	} }  /* ✦✦✦ RESPONSIVE MEDIA QUERIES 1200PX ✦✦✦ */ @media only screen and (min-width: 1200px) { 	.contact-body-first-containt { 		width: 70%; 	} 	.contact-body-second-containt { 		width: 70%; 	} }