/*
Theme Name: HPO Child Theme
Template: astra
Version: 1.0.0
*/

/* --- GLOBAL VARIABLES --- */
:root {
	--HPO-primary: #000;
	--HPO-accent: #2D68C4;
	--HPO-bg-page: #F8FAFC;
	--HPO-text: #000;
	--HPO-border: #0056D2;
	--ast-global-color-3: #000 !important;
}

body { 
	color: var(--ast-global-color-3);
	background-color: var(--HPO-bg-page); 
}

p {
	font-size: 16px;
}

a:hover, a:focus {
	color: var(--HPO-border);
}
a {
	color: var(--HPO-border) !important;
	text-decoration: none; /* Optional: removes underline */
	transition: 0.3s;
}
#astra-footer-menu .menu-item > a {
	color: #fff !important;
}
.site-below-footer-wrap {
	padding-top: 5px !important;
	padding-bottom: 5px !important;
}

.main-header-bar {
	display: none !important;
}


footer.HPO-site-footer {
	margin-bottom: -5px !important;
}



.social-media-section{
	width:100%;
	padding:10px 20px;
	display:flex;
	justify-content:center;
	align-items:center;
}

.social-icons{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	gap:28px;
}

/* Rounded Box */
.social-icons a{
	width:35px;
	height:35px;
	border-radius:20px;
	background:#f5f5f5;
	display:flex;
	justify-content:center;
	align-items:center;
	text-decoration:none;
	color:#333;
	font-size:22px;
	transition:all .3s ease;
	box-shadow:0 6px 18px rgba(0,0,0,.08);
}

.social-icons a:hover{
	transform:translateY(-6px) scale(1.08);
	color:#fff;
}

/* Brand Colors */
.social-icons a:nth-child(1):hover{
	background:#1877F2;
}

.social-icons a:nth-child(2):hover{
	background:#E4405F;
}

.social-icons a:nth-child(3):hover{
	background:#000;
}

.social-icons a:nth-child(4):hover{
	background:#E60023;
}

.social-icons a:nth-child(5):hover{
	background:#FF0000;
}

/* Tablet */
@media (max-width:768px){
	.social-icons{
		gap:20px;
	}

	.social-icons a {
		width: 45px;
		height: 45px;
		font-size: 30px;
		border-radius: 16px;
	}
	.social-media-section {
		width: 100%;
		padding: 10px 20px 30px;
	}
}

/* Mobile */
@media (max-width:480px){
	.social-media-section {
		width: 100%;
		padding: 10px 20px 30px;
	}
	.social-icons{
		gap:16px;
	}

	.social-icons a{
		width:45px;
		height:45px;
		font-size:30px;
		border-radius:16px;
	}
}