/* ✦✦✦ MAIN PAGE BACKGROUND FORMATING ✦✦✦ */ .index-main { 	width: 100%; 	height: 100vh; 	background-image: url("/images/healwithishii-source/index-background.jpg"); 	background-repeat: no-repeat; 	background-size: cover; 	background-position: center; 	position: fixed; 	display: inline-block; 	opacity: 1; 	margin: 0; }  /* ✦✦✦ MAIN PAGE BACKGROUND DARK TINE ✦✦✦ */ .index-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-home a { 	color: #EAC349; }  /* ✦✦✦ INDEX BODY CONTAINER FORMATING ✦✦✦ */ .index-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; }  /* ✦✦✦ INDEX BODY FIRST CONTAINT FORMATING ✦✦✦ */ .index-body-first-containt { 	position: relative; 	display: inline-block; 	width: 90%; 	text-align: center; 	justify-content: center; 	vertical-align: bottom; 	align-items: center; 	padding: 10px 0; 	margin: 10px 0; 	padding-top: 30px; }  /* ✦✦✦ INDEX BODY FIRST CONTAINT H1 FORMATING ✦✦✦ */ .index-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; }  /* ✦✦✦ INDEX BODY FIRST CONTAINT BIG FORMATING ✦✦✦ */ .index-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: 33px; 	text-align: left; 	padding: 5px; 	margin: 5px; }  /* ✦✦✦ INDEX BODY FIRST CONTAINT SMALL FORMATING ✦✦✦ */ .index-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; }  /* ✦✦✦ INDEX BODY FIRST CONTAINT ITEM FORMATING ✦✦✦ */ .index-body-first-containt-item { 	position: relative; 	display: inline-block; 	width: 90%; 	vertical-align: middle; 	text-align: left; 	justify-content: left; 	padding: 5px; 	margin: 20px 5px; }  /* ✦✦✦ INDEX BODY FIRST CONTAINT BUTTON FORMATING ✦✦✦ */ .index-body-first-containt-button {   display: inline-flex;   align-items: center;   justify-content: center;   font-family: var(--font-inter), system-ui, -apple-system, sans-serif;   width: 200px;    height: 52px;   padding: 0 20px;   font-size: 15px;   font-weight: 700;   letter-spacing: 0.8px;   text-transform: uppercase;   text-decoration: none;   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 6px 24px rgba(234, 195, 73, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.25) inset;   transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);   position: relative;   overflow: hidden;   box-sizing: border-box;   text-align: center; }  /* ✦✦✦ INDEX BODY FIRST CONTAINT BUTTON HOVER FORMATING ✦✦✦ */ .index-body-first-containt-button:hover {   background: linear-gradient(135deg, #FFFFFF 0%, #F5D77F 45%, #EAC349 100%);   color: #000000;   border-color: #FFFFFF;   box-shadow: 0 8px 32px rgba(234, 195, 73, 0.75), 0 0 16px rgba(255, 245, 210, 0.7);   transform: translateY(-3px) scale(1.03);   letter-spacing: 1px; }  /* ✦✦✦ INDEX BODY FIRST CONTAINT BUTTON ACTIVE FORMATING ✦✦✦ */ .index-body-first-containt-button:active {   transform: translateY(0) scale(0.97);   box-shadow: 0 3px 12px rgba(234, 195, 73, 0.4); }  /* ✦✦✦ INDEX BODY FIRST CONTAINT BUTTON AFTER FORMATING ✦✦✦ */ .index-body-first-containt-button::after {   content: "";   position: absolute;   top: -50%;   left: -75%;   width: 50%;   height: 200%;   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);   transform: rotate(25deg);   transition: all 0.6s ease; }  /* ✦✦✦ INDEX BODY FIRST CONTAINT BUTTON HOVER AFTER FORMATING ✦✦✦ */ .index-body-first-containt-button:hover::after {   left: 140%; }  /* ✦✦✦ INDEX BODY SECOND CONTAINT FORMATING ✦✦✦ */ .index-body-second-containt { 	position: relative; 	display: inline-block; 	width: 90%; 	text-align: center; 	justify-content: center; 	vertical-align: middle; 	align-items: center; 	padding: 10px 0; 	margin: 10px 0; }  /* ✦✦✦ INDEX BODY SECOND CONTAINT H1 FORMATING ✦✦✦ */ .index-body-second-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; }  /* ✦✦✦ INDEX BODY SECOND CONTAINT BIG FORMATING ✦✦✦ */ .index-body-second-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: 33px; 	text-align: left; 	padding: 5px; 	margin: 5px; }  /* ✦✦✦ INDEX BODY SECOND CONTAINT SMALL FORMATING ✦✦✦ */ .index-body-second-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; }   /* ╔═══════════════════════════════════════════╗ */ /* ║             RESPONSIVE MEDIA              ║ */ /* ╚═══════════════════════════════════════════╝ */  /* ✦✦✦ RESPONSIVE MEDIA QUERIES 1200PX ✦✦✦ */ @media only screen and (min-width: 1200px) { 	.index-body-first-containt { 		width: 70%; 	} 	.index-body-second-containt { 		width: 70%; 	} 	.index-body-third-containt { 		width: 70%; 	} 	.index-body-forth-containt { 		width: 70%; 	} }