@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700;800&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
/* Body */
body {
    font-size: 14px;
}
/* Nav */
.osahan-top-nav .navbar-nav .nav-link {
    color: #fff;
}
.osahan-top-nav .navbar-nav .nav-link.active, .osahan-top-nav .navbar-nav .nav-link:hover {
    color: #ffc108;
}
.osahan-top-nav .input-group {
    max-width: 240px;
}
.osahan-top-nav .dropdown-menu .dropdown-item {
    font-size: 14px;
    border-radius: 6px;
    padding: 6px 17px;
}
.osahan-top-nav .dropdown-menu .dropdown-item:focus, .osahan-top-nav .dropdown-menu .dropdown-item:hover {
    background: #000;
    color: #fff;
}
.site-logo {
    height: 40px;
}
.dropdown-profile {
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* Custom Bootstrap */
.bg-danger {
    background-color: #b9151d !important;
}
.btn-danger{
    background-color: #b9151d !important;
    color: #fff !important;
    border-color: #b9151d !important;
}
.btn-danger:hover{
    background-color: #9c0810 !important;
    color: #fff !important;
    border-color: #9c0810 !important;
}
.text-danger {
    color: #b9151d !important;
}
.btn-warning {
    color: #b9151d !important;
}
.btn-outline-warning:hover {
    color: #b9151d !important;
}
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    background: #fff;
    color: #b9141d;
    border-color: #b9141d;
    filter: unset;
    box-shadow: 4px 4px 0px;
}

/* Steps */
.step-numbers {
    min-width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
}
.radio-btn-osahan .btn {
    padding: 12px 12px;
    /*filter: grayscale(100%);*/
    display: block !important;
}
.radio-btn-osahan .btn p {
    margin: 0px;
    font-size: 12px;
    line-height: 16px;
}
.radio-btn-osahan .btn img {
    height: 50px;
    margin-top: 10px;
}

/* Account */
.profile-sidebar-name {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-sidebar-link .nav-link {
    color: #3b3b3b;
    border-radius: 8px;
    padding: 11px 17px;
    margin: 1px 0;
}
.profile-sidebar-link .nav-link.active, .profile-sidebar-link .nav-link:hover {
    background: #fee8ea;
    color: #b9141d;
}
#carouselExampleDark::after {
    content: "";
    bottom: 0;
    position: absolute;
    width: 100%;
    height: 190px;
    background: linear-gradient(180deg, rgb(242 242 242 / 0%) 0%, rgba(0,0,0,1) 79%);
    z-index: 0;
}
.carousel-caption {
    right: 5%;
    bottom: 1.25rem;
    left: 5%;
    z-index: 1;
}
#signUpForm {
    max-width: 80%;
    background-color: #ffffff;
    margin: 29px auto;
    padding: 40px;
}
#signUpForm .form-header {
    gap: 5px;
    text-align: center;
    font-size: .9em;
}
#signUpForm .form-header .stepIndicator {
    position: relative;
    flex: 1;
    padding-bottom: 30px;
}
#signUpForm .form-header .stepIndicator.active {
    font-weight: 600;
}
#signUpForm .form-header .stepIndicator.finish {
    font-weight: 600;
    color: #000;
}
#signUpForm .form-header .stepIndicator::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 9;
    width: 20px;
    height: 20px;
    background-color: #e7ced0;
    border-radius: 50%;
    border: 3px solid #fee8ea;
}
#signUpForm .form-header .stepIndicator.active::before {
    background-color: #e7ced0;
    border: 3px solid #fee8ea;
}
#signUpForm .form-header .stepIndicator.finish::before {
    background-color: #b9141f;
    border: 3px solid #fee8ea;
}
#signUpForm .form-header .stepIndicator::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 100%;
    height: 3px;
    background-color: #f3f3f3;
}
#signUpForm .form-header .stepIndicator.active::after {
    /*background-color: #e7ced0;*/
}
#signUpForm .form-header .stepIndicator.finish::after {
    background-color: #b9141d;
}
#signUpForm .form-header .stepIndicator:last-child:after {
    display: none;
}
#signUpForm input {
    padding: 15px 20px;
    width: 100%;
    font-size: 1em;
    border: 1px solid #e3e3e3;
    border-radius: 5px;
}
#signUpForm input:focus {
    border: 1px solid #b9141d;
    outline: 0;
}
#signUpForm input.invalid {
    border: 1px solid #ffaba5;
}
#signUpForm .step {
    display: none;
}
#signUpForm .form-footer{
    overflow:auto;
    gap: 20px;
}
#signUpForm .form-footer button{
    background-color: #b9141d;
    border: 1px solid #b9141d !important;
    color: #ffffff;
    border: none;
    padding: 13px 30px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 5px;
    flex: 1;
    margin-top: 5px;
}
#signUpForm .form-footer button:hover {
    opacity: 0.8;
}

#signUpForm .form-footer #prevBtn {
    background-color: #fff;
    color: #b9141d;
}

@media (max-width: 600px) {
    #carouselExampleDark::after {
        background: unset;
    }
    .carousel-indicators {
        display: none;
    }
    .radio-btn-osahan {
        display: grid;
    }
    #signUpForm {
        max-width: 100%;
        padding: 0px;
    }
    div#carouselExampleDark img {
        height: 150px;
        object-fit: fill;
    }
}

.region-popup .card-img-top {
    height: 150px;
    object-fit: cover;
}

.payment-card .radio-btn-osahan .btn img {
    margin-top: 0;
}
.about-bg {
    background-color: #e2f0f6;
}
.swiper-padding .swiper-container {
    position:relative;
    width: 90vw;
    height: 300px;
}
.swiper-padding .swiper-container > .swiper-padding .swiper-slide__content {
  position:absolute;
  top:0;
}

.swiper-padding .swiper-slide {
 
  display:flex;
  background: #eee;
  align-items: center;
  justify-content:center;
  transition:all 200ms linear;
  transform: scale(0.8);
}
.swiper-padding .swiper-slide__content {
  height: 300px;
}
.swiper-padding .swiper-button-next:after, .swiper-padding .swiper-button-prev:after {
    font-size: 14px;
    border-radius: 60%;
    border: 2px solid #cccccc;
    padding: 7px 10px 10px 10px;
    color: #ccc;
    width: 30px;
    height: 30px;
    font-weight: bolder;
}