.bg-box {
    background-color: #fff9f3;
    border-radius: 13px;
    border: 1px solid #ffe7d2;
    position: relative;
}

svg.icon {
    fill: #fff;
    width: 17px;
    height: 17px;
    vertical-align: middle;
}

svg.icon.main-color {
    fill: #f43676;
}

.translate-effect {
    display: inline-block;
}

.translate-effect:hover {
    transform: translateY(-3px);
}

.underline-effect a:not(.wave-button, .gradient-button, .sub-menu a) {
    background-image: linear-gradient(to right, #aef3ff 0%, #aef3ff 100%);
    background-size: 100% 0%;
    background-repeat: no-repeat;
    background-position: left 90%;
    transition: all 400ms ease;
}

.underline-effect a:not(.wave-button, .gradient-button, .sub-menu a):hover {
    color: #002050;
    background-size: 100% 25%;
}

.dot {
    display: inline-block;
    width: 16px;
    height: 5px;
    background: #fc6668;
    vertical-align: middle;
    border-radius: 100%;
    margin: -2px 5px 0;
    mask: url(../img/wave.svg);
    background-size: 10px 5px;
}

.gradient-button {
    display: inline-block;
    color: #fff!important;
    font-size: 16px;
    padding: 7px 22px;
    position: relative;
    z-index: 2;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-weight: 600;
    border-radius: 8px;
    background-color: #f43676;
    letter-spacing: 0;
    transition: all 300ms ease;
}

.gradient-button::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(103deg, #FC6668 0%, #E10489 100%);
    z-index: -1;
    border-radius: 8px;
    transition: all 300ms ease;
}

.wave-button {
    overflow: hidden;
}

.wave-button::after {
    content: '';
    position: absolute;
    left: -352px;
    top: 100%;
    background: url(../img/wave-button.svg) repeat-x;
    width: 704px;
    height: 50%;
    z-index: 2;
    opacity: 0.4;
    transition: all 300ms ease;
    animation: wave_button 7s cubic-bezier(0.55,0.5,0.45,0.5) infinite;
    animation-play-state: paused;
}

.wave-button:hover::after {
    animation-play-state: running;
    top: 60%;
}

@keyframes wave_button {
	0% {
		-webkit-transform: translateX(0px);
		transform: translateX(0px)
	}

	to {
		-webkit-transform: translate(352px);
		transform: translate(352px)
	}
}

@media screen and (max-width: 1200px) {

    .hide-on-desktop-sm {
        display: none;
    }

    .gradient-button {
		font-size: 13px;
	}

}

@media screen and (min-width: 768px) and (max-width: 1023px) {

	.hide-on-tablet {
		display: none !important;
	}

}

@media only screen and (max-width: 768px) {

	.hide-on-mobile {
		display: none !important;
	}

}