/* navbar */
nav {
    font-family: "Be Vietnam Pro", sans-serif;
}

.menu-tab-center a,
.menu-tab-center button,
.login-nav {
    color: #7d7987 !important;
    font-size: 24px;
}

.menu-tab-center a {
    text-decoration: none;
}

.menu-tab-center a:hover,
.menu-tab-center button:hover {
    color: #d3809a !important;
}

.mobile-menu a,
.mobile-menu button {
    color: #7d7987 !important;
    font-size: 16px;
}

.mobile-menu a {
    text-decoration: none;
}

.mobile-menu a:hover,
.mobile-menu button:hover {
    color: #d3809a !important;
}

a {
    text-decoration: none;
}

.login-nav {
    text-decoration: none;
}

.bg-red-bay {
    background-image: url("/storage/images/background/bg-red-bay.png");
}

.bg-blue-bay {
    background-image: url("/storage/images/background/bg-blue-bay.png");
}

.bg-yellow-bay {
    background-image: url("/storage/images/background/bg-yellow-bay.png");
}

.bg-purple-bay {
    background-image: url("/storage/images/background/bg-purple-bay.png");
}

.background-section {
    background-image: url("/storage/images/background/background-1.png");
}

.bg-gradient-draw {
    background: linear-gradient(to right, #1de5e2, #b588f7);
}

.bg-gradient-diy {
    background: linear-gradient(to right, #facd68, #fc76b3);
}

.bg-gradient-presen {
    background: linear-gradient(to right, #c165dd, #5c27fe);
}

.btn-regis-now {
    text-decoration: none;
}

.btn-too {
    text-decoration: none;
}

.custom-checkbox {
    display: none;
}

.custom-checkbox-box {
    width: 24px;
    height: 24px;
    border: 2px solid white;
    background-color: transparent;
    border-radius: 6px;
    display: inline-block;
    position: relative;
    transition: border-color 0.3s;
}

.custom-checkbox-box:hover {
    border-color: #009f76;
}

.custom-checkbox:checked + .custom-checkbox-box {
    border-color: #009f76;
}

.custom-checkbox:checked + .custom-checkbox-box::after {
    content: "✓";
    color: #009f76;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    font-size: 18px;
}

input.input-register-us,
select.select-register-us {
    border: 3px solid #ffffff;
    transition: all 0.3s ease;
}

input.input-register-us:hover,
select.select-register-us:hover {
    border-color: #009f76;
}

input.input-register-us:focus,
select.select-register-us:focus {
    outline: none;
    background-color: #009f76;
}

@media (min-width: 768px) {
    .menu-tab-center a,
    .menu-tab-center button,
    .login-nav {
        font-size: 12px;
    }
}

@media (min-width: 850px) {
    .menu-tab-center a,
    .menu-tab-center button,
    .login-nav {
        font-size: 14px;
    }
}

@media (min-width: 1000px) {
    .menu-tab-center a,
    .menu-tab-center button,
    .login-nav {
        font-size: 15px;
    }
}

@media (min-width: 1100px) {
    .menu-tab-center a,
    .menu-tab-center button,
    .login-nav {
        font-size: 16px;
    }
}

@media (min-width: 1200px) {
    .menu-tab-center a,
    .menu-tab-center button,
    .login-nav {
        font-size: 18px;
    }
}

@media (min-width: 1300px) {
    .menu-tab-center a,
    .menu-tab-center button,
    .login-nav {
        font-size: 20px;
    }
}

@media (min-width: 1500px) {
    .menu-tab-center a,
    .menu-tab-center button,
    .login-nav {
        font-size: 24px;
    }
}
