* {
    margin: 0;
    padding: 0;
}

/* FONTS */
h1 {
    font-family: 'Bebas Neue', sans-serif;
}

h2,
h3 {
    font-family: 'Urbanist', sans-serif;
}

h4,
h5,
h6 {
    font-family: 'Roboto Condensed', sans-serif;
}

p {
    font-family: 'Roboto Condensed', sans-serif;
}

.span-text {
    font-family: 'Bebas Neue', sans-serif;
}

.span {
    font-family: 'Roboto', sans-serif;
}

label {
    font-family: 'Roboto', sans-serif;
}

.yellow {
    color: #f6b024;
}

/* NAVBAR & FOOTER */
.header-overlay {
    /* bottom: 0%; */
    z-index: 1000;

    font-family: 'Bebas Neue', sans-serif;
}

.nav-link,
.nav-link-sticky {
    color: #1b1612;
    font-size: 20px;
}

.nav-link.active,
.nav-link:hover,
.nav-link-sticky.active,
.nav-link-sticky:hover {
    color: #f83600 !important;
}

.nav-link-sticky {
    text-decoration: none;
    font-family: 'Bebas Neue', sans-serif;
}

.nav-link-offcanvas {
    color: #1b1612;
    font-size: 20px;
    font-family: 'Bebas Neue', sans-serif;
    text-decoration: none;
}

/* .navbar {
    --bg-opacity: 0.50 ;
    background-color: rgba(255, 255, 255, var(--bg-opacity)) !important;
} */

/* BUTTONS */
.btn-outline-primary {
    border-color: #fff !important;
    color: #fff !important;
    /* background-color: #245b3b !important; */
    font-family: 'Bebas Neue', sans-serif !important;
}

.btn-outline-primary:hover {
    background-color: #fff !important;
    color: #065fad !important;
    font-weight: bold;
}

.btn-primary {
    background-color: #054780 !important;
    border: #fff solid 1px !important;
    font-family: 'Bebas Neue', sans-serif !important;
    border: #054780 solid 2px !important;
}

.btn-primary:hover {
    background-color: #032e53 !important;
    color: #fff !important;
}

.btn-primary-2 {
    background-color: #054780 !important;
    font-family: 'Bebas Neue', sans-serif !important;
    border-radius: 25px 25px 25px 25px;
    color: #fff !important;
}

.btn-primary-2:hover {
    background-color: #032e53 !important;
    color: #fff !important;
}

.btn-primary-3 {
    background-color: #fff !important;
    border: #054780 solid 1px !important;
    font-family: 'Bebas Neue', sans-serif !important;
    border: #054780 solid 2px !important;
    color: #054780 !important;
}

.btn-primary-3:hover {
    /* background-color: #032e53 !important;
    color: #fff !important; */

    background-color: #054780 !important;
    color: #fff !important;
    border: #054780 solid 2px !important;
}

.btn-primary-lazada {
    background-color: #fff !important;
    border: #fd0fd0 solid 1px !important;
    font-family: 'Bebas Neue', sans-serif !important;
    border: #fd0fd0 solid 2px !important;
    color: #fd0fd0 !important;
}

.btn-primary-shopee {
    background-color: #fff !important;
    border: #ee4d2d solid 1px !important;
    font-family: 'Bebas Neue', sans-serif !important;
    border: #ee4d2d solid 2px !important;
    color: #ee4d2d !important;
}

/* BG COLOR */
.bg-blue {
    background-color: #065fad;
}

.bg-darkblue {
    background-color: #054780;
}

/* Owl Carousel */
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background-color: #f83600 !important;
}

.owl-theme .owl-dots .owl-dot span {
    background: #888 !important;
}

.nav-pills .nav-link {
    color: gray;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;
    font-size: x-large;
}

.nav-pills .nav-link.active,
.nav-pills .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
    /* Set your desired background color */
    color: #065fad !important;
    text-decoration: underline;
    text-underline-offset: 8px;
}

::placeholder {
    font-family: 'Roboto', sans-serif
}

.follow-links {
    color: white;
    text-decoration: none;
    font-family: 'Roboto', sans-serif
}

.follow-links:hover {
    color: #f6b024;
}

.profile-button {
    border-color: #fff !important;
    color: #065fad !important;
    /* background-color: #245b3b !important; */
    font-family: 'Roboto Condensed', sans-serif !important;
}

.profile-button:hover,
.profile-button.active {
    background-color: #065fad !important;
    color: #fff !important;
    font-weight: bold;
}

/* SLIDER */

.slider {
    background: transparent;
    height: 300px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.slider::before,
.slider::after {
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    content: "";
    height: 300px;
    position: absolute;
    width: 200px;
    z-index: 2;
}

.slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

.slider::before {
    left: 0;
    top: 0;
}

.slide-track {
    animation: scroll 40s linear infinite;
    display: flex;
    width: calc(250px * 14);
}

.slides {
    height: 300px;
    width: 250px;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-250px * 7));
    }
}

/* NEW BUTTON */
.btn-1 {
    color: #fff !important;
    font-family: 'Bebas Neue', sans-serif !important;
    background: linear-gradient(to right, #f83600, #facc22);
    border-radius: 25px;
    transition: background-image 0.3s ease;
    /* Smooth transition effect */
}

.btn-1:hover {
    background: linear-gradient(to right, #f83600, #f83600);
    color: #fff !important;
}

.btn-2 {
    color: #f83600 !important;
    font-family: 'Bebas Neue', sans-serif !important;
    background-color: #fff !important;
    border-radius: 25px;
    transition: background-image 0.3s ease;
    /* Smooth transition effect */
    border: red  solid 2px !important;
}

.btn-outline-1 {
    border-color: #f83600 !important;
    color: #f83600 !important;
    border-radius: 25px;
    font-family: 'Bebas Neue', sans-serif !important;
}

.btn-outline-1:hover {
    background-color: #f83600 !important;
    color: #fff !important;
}

.btn-1a {
    color: #fff !important;
    font-family: 'Bebas Neue', sans-serif !important;
    background: linear-gradient(to right, #f83600, #facc22);
    border-radius: 25px;
    transition: background-image 0.3s ease;
    /* Smooth transition effect */
}

.btn-1a:hover {
    background: transparent;
    color: #f83600 !important;
    border: #f83600 solid 1px !important;
}

.darkblue {
    color: #054780;
}

.bg-red {
    background-color: #f83600;
}

.red {
    color: #f83600;
}


.image-center{
  	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: -10rem;
	
}

.border-red{
	border-color: #ef4444;
}
	


.up {
    margin-top: -12rem;
}