button,
.btn {
	all: unset;
	cursor: pointer;
	margin-bottom: 0;
}

.btn,
.frm_button_submit,
.hs-button,
.wpcf7-submit {
    display: inline-block;
    text-decoration: none;
    border-radius: 30px;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.1rem;
    text-align: center;
    padding: 18px 55px 18px 35px;
    cursor: pointer;
    margin-top: 45px;
    position: relative; 
    overflow: hidden;
    transition: all 0.3s ease-in-out; 
	border: none;
}

.frm_button_submit,
.hs-button,
.wpcf7-submit {
	padding: 18px 35px;
}

.btn::after,
.frm_button_submit::after,
.wpcf7-submit::after {
    content: "\f061"; /* Initial icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #FFFFFF;
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    width: 1em;
    text-align: center;
}

.btn:hover::after,
.frm_button_submit:hover::after,
.wpcf7-submit:hover::after {
    opacity: 0;
    transform: translateY(-30%);
}

.btn::before,
.frm_button_submit::before,
.wpcf7-submit::before {
    content: "\e098"; /* New icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--white);
    position: absolute;
    right: 25px; 
    top: 50%;
    transform: translateY(30%);
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    width: 1em;
    text-align: center;
}

.btn:hover::before,
.frm_button_submit:hover::before,
.wpcf7-submit:hover::before {
    opacity: 1;
    transform: translateY(-50%);
	color: var(--lightpink);
}

.btn-primary.gradient,
.frm_button_submit,
.hs-button,
.wpcf7-submit {
	color: var(--white);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(12px) saturate(180%);
	-webkit-backdrop-filter: blur(12px) saturate(180%);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
	background-clip: padding-box;
	transition: all 0.3s ease-in-out;
}

.btn-primary.gradient:hover,
.frm_button_submit:hover,
.hs-button:hover,
.wpcf7-submit:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.3);
	color: var(--lightpink);
	transform: translateY(-2px);
	box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
}

.frm_button_submit,
.wpcf7-submit,
.hs-button {
	margin-top: 10px;
}

.hs_submit {
	display: flex;
	justify-content: end;
}

.btn-primary-ghost {
	color: var(--primary);
	background: transparent;
	border: 1px solid var(--primary);
}

.btn-primary-ghost:hover {
	color: var(--white);
	background: var(--primary);
}

.btn-secondary {
	background: var(--white);
	border: 2px solid var(--white);
	color: var(--primary-dark);
}

.btn-secondary:hover {
	background: var(--primary);
	border: 2px solid var(--primary);
	color: var(--white);
}

/** Simple Button **/
.btn-simple {
	color: var(--white);
	font-size: 20px;
	display: flex;
	align-items: center;
	font-weight: 600;
	transition: all 0.2s ease-in-out;
}

.btn-simple i {
	font-size: 24px;
	margin-right: 10px;
}

.btn-simple:hover {
	color: var(--lightblue);
	transform: scale(1.02);
}

.btn-simple-dark {
	color: var(--primary);
}

.btn-simple-dark:hover {
	color: var(--primary-dark);
}

.btn-simple.popup-youtube:hover {
	color: var(--lightpink);
}

.btn-round {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 2.5rem;
	width: 2.5rem;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(10px) saturate(180%);
	-webkit-backdrop-filter: blur(10px) saturate(180%);
	color: var(--primary-dark);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease-in-out;
}

.btn-round:hover {
	background: rgba(255, 255, 255, 0.15);
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.btn-round i {
	line-height: 52px;
}

.btn-round.phone a i,
.btn-round.email a i {
	color: var(--white);
}

.btn-round.phone:hover a i,
.btn-round.email:hover a i {
	color: var(--lightpink);
}

.btn-round::after { right: 13px; }
.btn-round::before { right: 15px; }

.darkmode .blog-post--wrapper .btn::after {
	color: var(--primary);
}

.darkmode .blog-post--wrapper:hover .btn-round::after {
	color: var(--white);
}

.circle-icon {
	display: inline-block;
	text-decoration: none;
	font-weight: 500;
	letter-spacing: 0;
	cursor: pointer;
	padding: 0;
	text-align: center;
	color: #012325 !important;
	height: 2.5em;
	width: 2.5em;
	font-size: 1em;
	margin-right: 10px;
	border-radius: 2.5em;
	line-height: 2.5em;
	background-color: #FFFFFF;
	box-shadow: none;
}

.circle-icon.dark { 
	background-color: #012325;
	color: #fff !important;
}

.circle-icon i {
	line-height: 2.5em;
}

.circle-icon::before {
	line-height: 2.5em;
	padding: 10px 0;
}

.circle-icon:hover {
	color: var(--primary) !important;
	box-shadow: 0 2px 4px 0 rgba(180, 179, 179, 0.5);
}

.circle-icon.dark:hover {
	background-color: var(--primary) !important;
	color: var(--white) !important;
	box-shadow: 0 2px 4px 0 rgba(180, 179, 179, 0.5);
}

i.rounded {
	border-radius: 50%;
	padding: 0;
	height: 3.5rem;
	width: 3.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--lightpink);
	font-size: 18px;
	margin-bottom: 20px;
}

a {
	cursor: pointer;
}

/** Glowing Outline **/
.glowing-outline {
	position: relative;
	box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
	transition: 0.3s;
	border-radius: 20px;
}

.glowing-outline:hover {
	transform: scale(1.02);
}

.glowing-outline:before,
.glowing-outline:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	box-shadow: 0 0 5px #8291b2, 0 0 10px #25c0af, 0 0 15px #149063, 0 0 40px #30a0a7;
	opacity: 0;
	transition: 0.5s;
}

.glowing-outline:before {
	filter: blur(10px);
}

.glowing-outline:hover:before,
.glowing-outline:hover:after {
	opacity: 1;
}