body {
    background: linear-gradient(180deg, #1E3E62 0%, #184E4E 60%, #000000 100%)
}
html {
  scroll-behavior: smooth;
}
.error-text {
    display: block;
    min-height: 18px;
    /* or 20px */
    font-size: 13px;
    color: red;
    margin-top: 4px;
    /* optional spacing */
}

input.no-spin::-webkit-outer-spin-button,
input.no-spin::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input.no-spin {
    -moz-appearance: textfield;
}

/* Preloader Background */
/* #preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #fff; 
    z-index: 999999;
    padding: 10% 0;
    transition: opacity 0.5s ease-out;
}
.loading-texts {
    margin-top: 20px;
    
    font-weight: 600;
    color: #5c5c5c;
    font-size: 18px;
    text-align: center;
    animation: pulsey 1.5s infinite ease-in-out;
}
.icont-frame {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
} */

/* Preloader container covers entire viewport */
/* Preloader covers the entire viewport */
/* Make sure html and body fill the screen */
/* Make sure base html/body can fill the screen */
/* html, body {
  height: 100%;
  margin: 0;
  padding: 0;
} */

/* Preloader covers whole screen */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    z-index: 99999;
}

/* Center content absolutely */
.preloader-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

/* Image styling */
/* .icont-frame {
  max-width: 150px;
  width: 100%;
} */

.icont-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Text styling */
.loading-texts {
    margin-top: 1rem;
    font-size: 1.2rem;
    color: #333;
}




/* Preloader Logo */
#preloader-logo {
    width: auto;
    /* Adjust size as needed */
    animation: fadeIn 1s ease-in-out infinite alternate;
}

#preloader1 {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background: #fff;
    /* White background */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    transition: opacity 0.5s ease-out;
}

/* Fade-in Animation */
@keyframes fadeIn {
    0% {
        opacity: 0.5;
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.theme-bg-color {
    background-color: #1E3E62;
}

.main-menu ul li:first-child {
    border-radius: 100px 0px 0px 100px;
}

.main-menu ul li:last-child {
    border-radius: 0px 100px 100px 0px;
}

.header-setting-option ul {
    display: flex;
    align-items: center;
}

.header-setting-option ul li {
    background-color: #fff;
    padding: 14px 0px 11px 3px;
}

.header-setting-option ul li:first-child {
    border-radius: 100px 0px 0px 100px;
}

.header-setting-option ul li:last-child {
    border-radius: 0px 100px 100px 0px;
}

.header-setting-option ul li a {
    font-weight: 600;
    font-size: 18px;
    text-transform: capitalize;
    padding: 10px 15px;
}

.auth-link-login,
.auth-link-signup {
    border-radius: 100px;
    color: #1e3e62;
}

.auth-link-login:hover,
.auth-link-signup:hover,
.active>a {
    background-color: #1e3e62;
    color: #fff;
}

ul.social-icon-widget {
    margin-top: 20px;
    display: flex;
    align-items: center;
    column-gap: 10px;
}

h2.section-title {
    color: #ffffff;
    font-weight: 400;
    font-size: 36px;
    letter-spacing: 1.28px;
    text-align: center;
    text-transform: none; /* error fix */
    line-height: 1.2;
}

.card-4-section,
.card-2x4x4-section,
.download-app-section,
.map-form-section,
.contact-top-area,
.about-us-wrapper,
.mission-vision-wrapper,
.choosing-area {
    overflow: hidden;
    /* Prevents horizontal scroll */
}

.card-4-section .card {
    background-color: #fff;
    border-radius: 10px;
    border: none;
    text-align: center;
    padding: 40px 10px 30px;  /* error fix - 13-10-25*/
    min-height: 375px;  /* error fix */
    margin-bottom: 30px;
    opacity: 0;
    transform: translateX(0);
}

.card-4-section .card:hover {
    background: linear-gradient(90deg, rgba(231, 56, 121, 0.9) 0%, rgba(126, 24, 145, 0.9) 100%);
}

.card-4-section .card-icon-holder {
    background: #1E3E6214;
    border: 1px solid #77777766;
    height: 80px;
    width: 80px;
    line-height: 75px;
    border-radius: 100px;
    margin: 0 auto 20px auto;
    transition: transform 0.3s ease-in-out;
}

.card-4-section .card:hover .card-icon-holder {
    background-color: #ffffff;
    border-color: #ffffff;
    transform: translateY(-10px);
}

.card-4-section .card-content h4 {
    color: #1B1833;
    text-transform: capitalize;
    font-weight: 600;
    font-size: 22px;
    margin-bottom: 10px;
}

.card-4-section .card-content p {
    font-size: 14px;
    font-weight: 400;
    color: #555555;
    /*text-transform: capitalize;*/
    text-align: justify;
}

.card-4-section .card:hover .card-content h4,
.card-4-section .card:hover .card-content p {
    color: #ffffff;
}

.card-2x4x4-section .card {
    background-color: #fff;
    border-radius: 10px;
    padding: 25px 20px;
    margin-bottom: 30px;
    opacity: 0;
    transform: translateX(0);
}

.card-2x4x4-section .img-holder {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 250px;
    overflow: hidden;
    margin-bottom: 15px;
    border-radius: 4px;
}

.card-2x4x4-section .img-holder img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    transition: transform 1s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform;
}

.card-2x4x4-section .img-holder:hover img {
    transform: scale(1.1);
}

.card-2x4x4-section .img-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #000000 90%);
    /* Semi-transparent black overlay */
}

.card-2x4x4-section .img-overlay-text {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: white;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
}

.sec-sub-head {
    font-size: 30px;
    text-transform: uppercase;
    color: #1B1833;
    font-weight: 400;
}

.download-app-section .card {
    background-color: #FFFFFF1A;
    border-radius: 10px;
    padding: 40px 25px;
}

.download-app-section .sideToSide {
    opacity: 0;
    transform: translateX(0);
}

h1.app-title-head {
    color: #ffffff;
    font-size: 44px;
    font-weight: 700;
    text-transform: none; /* error fix */
    margin-bottom: 10px;
    letter-spacing: 1px;
}

h5.app-sub-title {
    color: #ffffff;
    font-size: 36px;
    font-weight: 400;
    text-transform: capitalize;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

p.app-description {
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    text-align: justify;
}

.gradient-text {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-app {
    background: linear-gradient(90deg, rgba(231, 56, 121, 0.9) 0%, rgba(126, 24, 145, 0.9) 100%);
    border-radius: 10px;
    border: none;
    border-right: none;
    padding: 5px;
    width: 100%;
    color: #fff;
    font-size: 18px;
    margin-bottom: 20px;
}

.btn-app i {
    font-size: 40px;
    margin-right: 5px;
}

.btn-app:hover {
    background: #fff;
    border: none;
}

.btn-app:hover .gradient-text {
    background-image: linear-gradient(180deg, #1E3E62 0%, #184E4E 60%, #000000 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

#homeCarousel .carousel-item {
    position: relative;
}

/* Overlay layer */
#homeCarousel .carousel-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, #000000 85%);
    z-index: 1;
}

/* Caption styling */
#homeCarousel .carousel-caption {
    position: absolute;
    bottom: 5%;
    left: 5%;
    right: 5%;
    text-align: left;
    z-index: 2;
}

#homeCarousel .carousel-caption h5 {
    font-family: Oleo Script;
    font-weight: 400;
    font-size: 38px;
    text-transform: capitalize;
    margin-bottom: 20px;
}

#homeCarousel .carousel-caption p {
    font-size: 14px;
    color: #fff;
}

#homeCarousel .carousel-control-next,
#homeCarousel .carousel-control-prev {
    width: 5%
}

#homeCarousel .carousel-control-next-icon,
#homeCarousel .carousel-control-prev-icon {
    width: 2.5rem;
    height: 2.5rem;
}

#homeCarousel .carousel-control-prev-icon {
    background-image: url("../img/arrow-left.png");
}

#homeCarousel .carousel-control-next-icon {
    background-image: url("../img/arrow-right.png");
}

#homeCarousel .carousel-indicators {
    align-items: center;
}

#homeCarousel .carousel-indicators button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    /* Makes them circles */
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    margin: 5px;
    transition: background-color 0.3s ease;
}

#homeCarousel .carousel-indicators .active {
    width: 12px;
    height: 12px;
    background-color: white;
    /* Active dot color */
}

.app-img-holder {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    /* Adjust space between images */
}

/* Animation for moving up and down */
@keyframes moveUpDown {
    0% {
        transform: translateY(50px);
    }

    100% {
        transform: translateY(-50px);
    }
}

/* Apply the animation with alternate for smooth transition */
.animate-top-to-bottom {
    animation: moveUpDown 3s ease-in-out infinite alternate;
}

.animate-bottom-to-top {
    animation: moveUpDown 3s ease-in-out infinite alternate-reverse;
}

.mean-container .mean-nav ul li a {
    text-transform: capitalize;
}

.mean-container .mean-bar .mean-nav ul li.active a {
    color: #1e3e62;
    color: #ffffff;
    font-weight: 600;
    font-size: 15px;
    text-transform: uppercase;
}

.scroll-top,
.footer-widget .footer-widget-title h3:before {
    background: linear-gradient(90deg, rgba(231, 56, 121, 0.9) 0%, rgba(126, 24, 145, 0.9) 100%);
}

li.icon-social:hover {
    background: linear-gradient(90deg, rgba(231, 56, 121, 0.9) 0%, rgba(126, 24, 145, 0.9) 100%);
    border-radius: 10px;
}

.copyright-text p a {
    color: #cd316e;
}

.contact-single-info p,
.contact-single-info p a {
    color: #ffffff;
}

.contact-message input,
.contact-message textarea {
    width: 100%;
    padding: 15px 10px;
    border: 1px solid #e5e5e5;
    background-color: transparent;
    margin-bottom: 35px;
    border-radius: 10px;
}

.contact-message input.form-control:focus,
.contact-message textarea.form-control2:focus {
    border-color: #ffffff;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: transparent;
    color: #fff;
}

.gradient-btn {
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    background: linear-gradient(90deg, rgba(231, 56, 121, 0.9) 0%, rgba(126, 24, 145, 0.9) 100%);
    padding: 20px 40px 20px;
    text-transform: capitalize;
    border-radius: 10px;
}

a.gradient-btn {
    color: #fff !important;
}

.login-reg-form-wrap {
    background-color: #00000042;
    -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
    padding: 40px 30px;
    border-radius: 10px;
}

.login-reg-form-wrap .single-input-item input,
.login-reg-form-wrap .single-input-item textarea {
    color: #ffffff;
    border: 1px solid #ccc;
    padding: 12px 10px;
    width: 100%;
    font-size: 14px;
    background: transparent;
    border-radius: 10px;
}

span.input-group-text.toggle-password {
    border-radius: 0 10px 10px 0;
}

.login-reg-form-wrap .single-input-item label {
    color: #ffffff;
    padding-left: 0px;
}

.login-reg-form-wrap .login-reg-form-meta a {
    color: #ffffff;
}

.login-reg-form-wrap .single-input-item {
    margin-top: 35px;
}

.avatar-area {
    text-align: center;
    margin: auto;
    width: 150px;
    height: 150px;
    border: 1px solid #fff;
    position: relative;
    border-radius: 100px;
    overflow: hidden;
}

.avatar-area img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    transition: opacity 0.2s ease;
}

/* Hide utility class */
.hidden-eye {
    opacity: 0;
    pointer-events: none;
}

#togglePassword {
    cursor: pointer;
}

.color-grey {
    color: #8b8b8b;
    border-radius: 0px 10px 10px 0;
}

.login-reg-form-wrap .login-reg-form-meta a.imp-text {
    color: #62d2a2;
}

.custom-checkbox input:checked~.custom-control-label:before,
.custom-checkbox input:checked label:before,
.custom-checkbox .custom-control-input:checked~.custom-control-label:before,
.custom-checkbox .custom-control-input:checked label:before,
.custom-radio input:checked~.custom-control-label:before,
.custom-radio input:checked label:before,
.custom-radio .custom-control-input:checked~.custom-control-label:before,
.custom-radio .custom-control-input:checked label:before {
    background-color: #cd316e;
    border-color: #cd316e;
}

.forget-pwd {
    margin-top: 0px;
}

.breadcrumb-wrap {
    padding: 50px 0;
    background-color: transparent;
}

.address-map {
    border-radius: 10px;
}

.card-transparent {
    background-color: #00000042;
    padding: 20px 20px 40px;
    border-radius: 10px;
}

.contact-single-info .contact-icon i {
    display: block;
}

/* Bounce Animation with Easing & Scale */
@keyframes bouncing {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-10px) scale(1.1);
    }
}

.bounce-icon i {
    animation: bouncing 1s ease-in-out infinite;
}

/* Ringing Animation with Smooth Easing */
@keyframes ring {
    0% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(15deg);
    }

    20% {
        transform: rotate(-15deg);
    }

    30% {
        transform: rotate(10deg);
    }

    40% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(5deg);
    }

    60% {
        transform: rotate(-5deg);
    }

    70%,
    100% {
        transform: rotate(0deg);
    }
}

.ring-icon i {
    animation: ring 1.8s ease-in-out infinite;
    transform-origin: center center;
}

/* Slide Animation with Easing & Delay */
@keyframes slide {
    0% {
        transform: translateX(-30px);
    }

    50% {
        transform: translateX(0px);
    }

    100% {
        transform: translateX(100px);
    }
}

.slide-icon,
.bounce-icon,
.ring-icon {
    position: relative;
    overflow: hidden;
}

.slide-icon i {
    animation: slide 2s ease-in-out infinite;
    animation-delay: 0.2s;
}

.breadcrumb-area {
    background-image: url(../img/page-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top;
    position: relative;
    height: auto;
}

.breadcrumb-wrap nav .breadcrumb .breadcrumb-item a,
.breadcrumb-wrap nav .breadcrumb .breadcrumb-item.active,
.breadcrumb-wrap nav .breadcrumb .breadcrumb-item::before {
    color: #ffffff;
}

.about-text-wrap h6,
.about-text-wrap h1,
.about-text-wrap p {
    color: #fff;
    margin-bottom: 10px;
}

.about-text-wrap p {
    text-align: justify;
}

.about-image-wrap:after {
    border: 5px solid #ffffff;
    border-radius: 10px;
}

.about-image-wrap img {
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px #000000;
    width: 100%;
}

.mission-vision-card {
    background-color: #00000042;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0px 0px 3px 0px #ddd;
    margin-bottom: 30px;
}

.mission-vision-card:hover {
    background-color: transparent;
}

.mission-vision-card.mission-card {
    background-image: url(../img/mission.png);
    background-position: top right;
    background-size: 15%;
    background-repeat: no-repeat;
    background-blend-mode: color-burn;
    background-origin: content-box;
    display: flex;
    flex-wrap: wrap;
}

.mission-vision-card.vision-card {
    background-image: url(../img/vision.png);
    background-position: top right;
    background-size: 15%;
    background-repeat: no-repeat;
    background-blend-mode: color-burn;
    background-origin: content-box;
    display: flex;
    flex-wrap: wrap;
}

.mission-vision-card p,
.mission-vision-card h4 {
    color: #fff;
    font-weight: 400;
    margin: 25px 0px 10px;
    text-align: justify;
}

.single-choose-item {
    padding: 30px 15px;
    margin-bottom: 30px;
    background-color: #FFFFFF1A;
    border-radius: 10px;
}

.single-choose-item:hover {
    background-color: #00000042;
    box-shadow: 0px 0px 3px 0px #ddd;
}

.single-choose-item i {
    color: #ffffff;
}

.single-choose-item h4 {
    color: #ffffff;
    font-weight: 600;
    text-transform: capitalize;
}

.single-choose-item p {
    color: #fff;
    margin-top: 20px;
}

.single-choose-item:hover i {
    color: #ffffff;
}

.privacy-content {
    background-color: #FFFFFF1A;
    padding: 10px 20px;
    border-radius: 10px;
}

.privacy-content h5 {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 10px;
    margin-top: 10px;
    color: #fff;
}

.privacy-content h6 {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 10px;
    margin-top: 20px;
    color: #fff;
}

.privacy-content p {
    font-size: 15px;
    color: #fff;
    margin-bottom: 20px;
    text-align: justify;
}

.privacy-content ul {
    list-style: disc;
    margin-left: 20px;
    margin-bottom: 20px;
}

.privacy-content ul li {
    font-size: 15px;
    color: #fff;
    margin-bottom: 10px;
    list-style: disc;
}

.floating-icon {
    position: fixed;
    font-size: 2rem;
    top: 10%;
    right: 0;
    opacity: 0.5;
    transform: translate(0, 0);
    transition: transform 0.1s linear;
    /* z-index: 9999; */
    pointer-events: none;
    /* So it doesn't block clicks */
}

.faq-inner .card-header .accordio-heading[aria-expanded=true] {
    color: #ffffff;
    background: linear-gradient(90deg, rgba(231, 56, 121, 0.9) 0%, rgba(126, 24, 145, 0.9) 100%);
}

.event-pricing-panel {
    display: grid;
    place-items: center;
}

.pricing-plans {
    gap: 15px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    width: 100%;
}

.pricing-card {
    --col: #e4e4e7;
    position: relative;
    min-width: 300px;
    padding: 30px 10px;
    padding-bottom: 96px;
    border-radius: 10px;
    border: 1px solid #dddddd42;
    background-color: #26262620;
    box-shadow: 0 0 32px transparent;
    text-align: center;
        margin-bottom: 30px;
}

.pricing-card.basic {
    --col: #00cdff;
    margin-top: 2%;
}

.pricing-card.standard {
    --col: #00df9a;
}

.pricing-card.premium {
    --col: #e300ff;
    margin-top: 2%
}
.row > div:nth-child(3n + 1) .pricing-card {
    --col: #00cdff;
}
.row > div:nth-child(3n + 2) .pricing-card {
    --col: #00df9a;
}
.row > div:nth-child(3n + 3) .pricing-card {
    --col: #e300ff;
}

.pricing-card:hover {
    border-color: var(--col);
    background-color: #26262680;
    box-shadow: 0 0 32px #171717;
    transform: translateY(-16px) scale(1.02);
    transition: all 0.5s ease;
}

.pricing-card>*:not(:last-child) {
    margin-bottom: 32px;
}

.pricing-card .heading h4 {
    padding: 15px 0;
    color: var(--col);
    font-size: 24px;
    font-weight: 600;
    background-color: #fff;
    border-radius: 0 100px;
    margin-bottom: 20px;
}

.pricing-card .heading p {
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 2px;
}

.pricing-card .price {
    position: relative;
    color: var(--col);
    font-size: 60px;
    font-weight: bold;
}

.pricing-card .price sub {
    position: absolute;
    bottom: 12px;
    color: #ffffff;
    font-size: 16px;
    font-weight: lighter;
    margin-left: 10px;
}

.pricing-card .features li {
    color: #a3a3a3;
    font-size: 16px;
    font-weight: lighter;
    padding: 10px 2px;
    text-align: left;
    border-bottom: 1px dashed #a3a3a3;
}

.pricing-card .features li:last-child {
    border-bottom: 0;
}

.pricing-card .features li i,
.pricing-card .features li strong {
    color: #e4e4e7;
    font-size: 16px;
    text-align: left;
}

.pricing-card .features li strong {
    padding-left: 5px;
}

.pricing-card .cta-btn {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    width: 75%;
    padding: 12px;
    border-radius: 4px;
    border: 1px solid var(--col);
    background-color: var(--col);
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
}

.pricing-card .cta-btn:active {
    background-color: transparent;
    color: var(--col);
    transition: all 0.3s ease;
}

.offcanvas-lg .offcanvas-body {
    flex-wrap: wrap;
}

#responsiveSidebar {
    z-index: 9999;
}

.blog-sidebar {
    background-color: #f5f5f5;
    width: 100%;
}

.blog-item-single,
.comment-section,
.blog-comment-wrapper {
    background-color: #fff;
    border-radius: 10px;
}
.blog-item-single {
    min-height: 380px;
}

.blog-sidebar .title {
    color: #1e3e62;
    font-size: 20px;
    font-weight: 600;
    line-height: 22px;
    padding-top: 5px;
    margin-bottom: 20px;
    position: relative;
    text-transform: capitalize;
}

.blog-sidebar .blog-archive li a {
    color: #1e3e62;
}

.blog-post-content .blog-top .post-date-time span {
    font-size: 14px;
    font-weight: 600;
    padding-bottom: 5px;
    text-transform: capitalize;
}

.blog-post-content .blog-top .post-blog-meta p {
    font-size: 12px;
    font-weight: 400;
}

.blog-post-content .blog-top {
    padding-left: 10px;
    margin-bottom: 0px;
}

.blog-content p {
    color: #757575;
    font-weight: 400;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
        text-align: justify;
}

.blog-item-single .blog-content h4 {
    font-size: 20px;
    padding-top: 10px;
}

.blog-item-single .blog-content h4 a {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-post-content .blog-top .post-blog-meta p a,
.blog-item-single .read-more,
.blog-item-single .read-more:hover,
.blog-content h4 a:hover {
    color: #cd316e;
}

.search-div {
    max-width: 400px;
    width: 100%;
}

.search-div .input-group>.form-control {
    height: 50px;
    border: 1px solid #f5f5f5;
    background-color: #FFFFFF1A;
    color: #f5f5f5;
    border-radius: 8px;
}

.search-div .input-group>button {
    background-color: #f5f5f5;
    border-color: #f5f5f5;
    color: #333;
    font-weight: 500;
    border-radius: 8px;
}

.nice-select {
    height: 50px;
    padding: 5px 50px 5px 15px;
    font-weight: 500;
    border-radius: 8px;
    background-color: #f5f5f5;
    color: #333;
    width: 100%;
}

/* Background animation container */
.animated-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    /* So clicks pass through */
}

/* Create 3 floating images */
.animated-bg::before,
.animated-bg::after,
.animated-bg::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    background-size: contain;
    background-repeat: no-repeat;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* First image */
.animated-bg::before {
    background-image: url('../img/ballons.png');
    animation: float1 20s infinite alternate;
    opacity: 0.4;
}

/* Use an extra div for the third image */
.animated-bg::after {
    background-image: url('../img/ballons.png');
    animation: float2 25s infinite alternate;
    opacity: 0.4;
}

/* Third image via separate span */
.animated-bg::before,
.animated-bg::after,
.animated-bg span {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    pointer-events: none;
}

.animated-bg span {
    content: '';
    opacity: 0.4;
    background-image: url('../img/ballons.png');
    width: 150px;
    height: 150px;
    animation: float3 30s infinite alternate;
    position: absolute;
    top: 0;
    right: 0;
}

@keyframes float1 {
    0% {
        top: 10%;
        left: 10%;
    }

    100% {
        top: 80%;
        left: 80%;
    }
}

@keyframes float2 {
    0% {
        bottom: 10%;
        right: 10%;
    }

    100% {
        bottom: 80%;
        right: 80%;
    }
}

@keyframes float3 {
    0% {
        top: 0;
        right: 0;
    }

    100% {
        top: 90%;
        right: 90%;
    }
}

/* Responsive Sizes */
@media (max-width: 1024px) {

    .animated-bg::before,
    .animated-bg::after,
    .animated-bg span {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 768px) {

    .animated-bg::before,
    .animated-bg::after,
    .animated-bg span {
        width: 90px;
        height: 90px;
    }
}

@media (max-width: 480px) {

    .animated-bg::before,
    .animated-bg::after,
    .animated-bg span {
        width: 60px;
        height: 60px;
    }
}

#loginModal .modal-dialog {
    width: 300px;
    margin: auto;
}

.login-image-wrapper {
    position: relative;
}

.btn-close-modal {
    position: absolute;
    top: 2%;
    right: 0;
    font-size: 30px;
    color: #333;
    z-index: 2;
}

.login-modal-img {
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

.btn-modal-login {
    display: block;
    background-color: #fff;
    padding: 10px 25px;
    border-radius: 6px;
    font-size: 24px;
    white-space: nowrap;
    text-transform: capitalize;
    font-weight: 500;
    letter-spacing: 1px;
    color: #1e3e62;
    z-index: 2;
}

.btn-modal-login:hover {
    border: 1px solid #fff;
    background-color: #0000008a;
    color: #fff;
}

#loginModal .modal-content {
    box-shadow: 0px 0px 10px 0px #000000;
}

.page-image-section {
    position: relative;
    width: 100%;
    height: auto;
    /* Adjust as needed */
    overflow: hidden;
}

.page-image-section img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.page-image-section .page-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.25);
    /* Semi-transparent black */
    z-index: 1;
}

.page-image-section .page-image-overlay-text {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translate(0%, -50%);
    color: white;
    font-size: 12px;
    z-index: 2;
    text-transform: capitalize;  /* error fix */
    letter-spacing: 1px;/* error fix */
}

.page-image-section .page-image-overlay-text a {
    color: #ffffff;
}

.sorting-labels label {
    display: flex;
    align-items: center;
    column-gap: 10px;
    margin-bottom: 15px;
    font-size: 15px;
    color: #333;
    font-weight: 500;
    cursor: pointer;
}

.sorting-labels label input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #333;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    position: relative;
    padding: 7px;
}

.sorting-labels label input[type="radio"]:checked::before {
    content: '';
    width: 10px;
    height: 10px;
    background-color: #333;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.category-checklist li label {
    display: flex;
    align-items: center;
    column-gap: 10px;
    font-size: 15px;
    margin-bottom: 15px;
    color: #333;
    font-weight: 500;
    cursor: pointer;
}

.category-checklist li label input[type="checkbox"] {
    appearance: none;
    width: 18px;
    height: 18px;
    cursor: pointer;
    position: relative;
    border-width: 2px;
    border-style: solid;
    border-color: #333;
    border-image: initial;
    border-radius: 20%;
    outline: none;
    padding: 7px;
}

.category-checklist li label input[type="checkbox"]:checked::before {
    content: '';
    width: 10px;
    height: 10px;
    background-color: #333;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.btn-filter {
    background-color: #ffffff1a;
    border: 1px solid #fff;
    color: #fff;
    padding: 10px 25px;
    font-size: 16px;
    letter-spacing: 1px;
    border-radius: 6px;
}

.btn-filter:hover {
    background-color: #ffffff1a;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 6px;
}

.offcanvas.offcanvas-end {
    width: 350px;
}

span#pagination-numbers {
    color: #f5f5f5;
}

#pagination-numbers span.text-warning {
    font-size: 16px;
    font-weight: 600;
}

#pagination-container button {
    border: 1px solid #f5f5f5;
    padding: 5px 10px;
    border-radius: 30px;
    color: #000000;
    background-color: #f5f5f5;
}

.blog-post-item {
    display: none;
    transition: all 0.3s ease;
}

.blog-post.blog-details .blog-sharing a {
    color: #1e3e62;
    line-height: 40px;
}

.blog-post.blog-details .blog-sharing a:hover {
    color: #ffffff;
    background-color: #1e3e62;
    border-color: #1e3e62;
}

.blog-item-single .blog-details {
    padding: 15px 0;
}

.blog-item-single .blog-details h4 {
    font-size: 26px;
    line-height: 34px;
    font-weight: 700;
    text-transform: uppercase;
    color: #333c4a;
    padding: 10px 0;
}

.blog-item-single .blog-details p {
    color: #757575;
    font-weight: 400;
    font-size: 15px;
}

.blog-item-single .blog-details blockquote {
    border-left: 5px solid #1e3e62;
    margin: 15px;
    background-color: #f7f7f7;
    padding: 15px;
}

.comment-section ul li {
    margin-bottom: 15px;
    padding: 10px 5px 20px;
    border: none;
    border-bottom: 1px dashed #e5e5e5;
    gap: 10px;
}

.comment-section ul li:last-child {
    border-bottom: 0px dashed #e5e5e5;
}

.comment-section ul li .author-avatar {
    -ms-flex-preferred-size: 100px;
    flex-basis: 100px;
    max-height: 100px;
    margin-right: 0px;
}

.author-avatar img {
    border-radius: 100px;
}

.comment-section ul li .comment-body h5 {
    font-size: 18px;
    padding-bottom: 0px;
}

.comment-section ul li .comment-body .comment-post-date {
    padding-bottom: 0px;
    font-size: 12px;
}

.popular-item {
    margin-bottom: 10px;
    border-bottom: 1px dashed #e5e5e5;
    padding-bottom: 10px;
    -moz-align-items: start;
    -ms-align-items: start;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.popular-item:last-child {
    border-bottom: 0px dashed #e5e5e5;
}

.popular-item .pop-item-thumb {
    width: 100px;
}

.popular-item .pop-item-des h4 {
    text-transform: capitalize;
}

.popular-item .pop-item-des h4 a:hover {
    color: #cd316e;
}

.blog-sidebar .blog-archive li a:hover {
    color: #cd316e;
    padding-left: 10px;
    font-weight: 600;
}

.blog-post.blog-details .blog-sharing {
    margin-top: 15px;
    margin-bottom: 10px;
}

.myaccount-tab-menu a.active {
    background: linear-gradient(90deg, rgba(231, 56, 121, 0.9) 0%, rgba(126, 24, 145, 0.9) 100%);
    border-color: transparent;
    color: #ffffff;
    margin-bottom: 10px;
    text-align: center;
    border-radius: 10px;
    border: none;
}

.myaccount-tab-menu a {
    background-color: #fff;
    margin-bottom: 0px;
    border-radius: 0px;
    padding: 5px 10px;
}

.myaccount-tab-menu a img {
    width: 70px;
    display: block;
    margin: auto;
    border-radius: 10px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
}

.grid-item {
    text-align: center;
}

.grid-item .img-container img {
    width: 60px;
    height: auto;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: transform;
    border-radius: 10px;
}

.grid-item:hover .img-container img {
    transform: scale(1.1);
}

.text-container p {
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    line-height: 1.5;
}

.grid-item.current-nav .text-container p,
.grid-item:hover .text-container p {
    background: linear-gradient(90deg, rgba(231, 56, 121, 0.9) 0%, rgba(126, 24, 145, 0.9) 100%);
    padding: 5px;
    border-radius: 6px;
}

.my-account-card {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 15px;
}

/* .profile-img {
    text-align: center;
    width: 120px;
    margin: auto auto;
} */
.profile-img {
    width: 100px;
    height: 100px;
}

.profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 100%;
}

.profile-head-box h2 {
    color: #1e3e62;
    text-transform: capitalize;
    letter-spacing: 1px;
    margin-bottom: 0px;
        word-wrap: break-word;
}

.profile-head-box h6 span {
    background: linear-gradient(90deg, rgba(231, 56, 121, 0.9) 0%, rgba(126, 24, 145, 0.9) 100%);
    color: #fff;
    padding: 5px 10px;
    border-radius: 4px;
}

.profile-detail {
    margin-bottom: 25px;
    border-bottom: 1px dashed #8b8b8b;
}

.profile-detail h6 {
    color: #1e3e62;
    font-weight: 500;
}

.profile-detail p {
    font-weight: 600;
    text-align: end;
    word-break: break-word;
}

.form-head h4 {
    color: #fff;
    margin-bottom: 20px;
}

.acc-detail-field input {
    height: 50px;
    border: 0px solid #1e3e62;
    border-radius: 6px;
    padding: 10px;
    background-color: #f5f5f5;
}

.acc-detail-field .field-col {
    margin-bottom: 20px;
}

.acc-detail-field label.field-label {
    color: #fff;
    margin-bottom: 5px;
}

.ap-detail-info {
    background-color: #0000001a;
    padding: 15px;
    border-radius: 10px;
}

.save-update {
    background: linear-gradient(90deg, rgba(231, 56, 121, 0.9) 0%, rgba(126, 24, 145, 0.9) 100%);
    color: #fff;
    padding: 10px 15px;
    font-weight: 500;
    border-radius: 4px;
    height: 50px;
    font-size: 16px;
    /* border: 1px solid #fff; */
}

.cancel-reset {
    background-color: #FFFFFF1A;
    color: #fff;
    padding: 10px 15px;
    font-weight: 500;
    border-radius: 4px;
    height: 50px;
    font-size: 16px;
    border: 1px solid #fff;
}

.ap-detail {
    border-radius: 10px;
    background-color: #ffffff;
    padding: 20px 10px;
}

#transactionTable th {
    text-align: center;
    font-weight: 600;
    background-color: #1e3e62;
    color: #fff;
    white-space: nowrap;
    padding: 5px 10px;
}

#transactionTable tbody td {
    text-align: center;
    padding: 5px 10px;
}

/* #transactionTable tbody td:nth-child(5) {
    text-align: right;
}

#transactionTable tbody td:nth-child(4),
#transactionTable tbody td:nth-child(6) {
    text-align: left;
} */

button.dt-button.buttons-html5,
button.dt-button.buttons-print {
    background-color: #1e3e621a;
}

div.dt-container .dt-paging .dt-paging-button:hover {
    color: white !important;
    border: 1px solid #1e3e62;
    background-color: #1e3e62;
    background: -webkit-linear-gradient(top, #1E3E62 0%, #184E4E 100%);
    background: -moz-linear-gradient(top, #1E3E62 0%, #184E4E 100%);
    background: -ms-linear-gradient(top, #1E3E62 0%, #184E4E 100%);
    background: -o-linear-gradient(top, #1E3E62 0%, #184E4E 100%);
    background: linear-gradient(180deg, #1E3E62 0%, #184E4E 60%);
}

/* ------multi-step */

.step-container {
    position: relative;
    text-align: center;
    transform: translateY(-43%);
}

.step {
    display: none;
}

.step.step-1 {
    display: block;
}

.step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid #cd316e;
    line-height: 30px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    cursor: pointer;
    /* Added cursor pointer */
    color: #cd316e;
}

.step-line {
    position: absolute;
    top: 16px;
    left: 50px;
    width: calc(100% - 100px);
    height: 2px;
    background-color: #cd316e;
    z-index: -1;
}

#multi-step-form {
    overflow-x: hidden;
}

#event-wizard .progress {
    height: 3px;
    --bs-progress-bar-bg: #cd316e;
}

.step-head h3 {
    color: #fff;
    font-weight: 400;
    letter-spacing: 1px;
}

.step-head {
    margin-bottom: 25px;
}

.event-input {
    margin-bottom: 30px;
}

.event-input label,
.apply-coupon label {
    color: #f5f5f5;
    font-size: 14px;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.event-input .event-ip {
    background-color: #fff;
    color: #111;
    padding: 10px 20px;
    border: 0px solid #1e3e62;
    width: 100%;
    border-radius: 6px;
}

.btn-copy-text,
.btn-copy-text:hover {
    background-color: #1e3e62;
    color: #fff;
    padding: 15px;
    border: 1px solid #fff;
    font-size: 24px;
}

/* ------------------------ */
/* custom radio */
.radio-card {
    background-color: #fff;
    border-radius: 10px;
    padding: 1.25rem .5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    -webkit-user-select: none;
    user-select: none;
}

.category-option .radio-card {
    padding: .5rem;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}


.category-option .radio-card img {
    width: 100%;
    /* height: auto; */
    height: 150px;
    display: block;
    border-radius: 10px;
}

.category-option .radio-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
    z-index: 1;
    transition: background 0.3s ease;
}

.category-option .overlay-text {
    position: absolute;
    bottom: 10px;
    left: 15px;
    right: 15px;
    z-index: 2;
    color: white;
    font-size: 1rem;
    font-weight: 500;
}

.radio-card:hover {
    box-shadow: 1px 1px 10px -2px rgb(255 255 255);
}

.radio-card h5 {
    color: #1e3e62;
}

.radio-input:checked+.radio-card {
    background: linear-gradient(90deg, rgba(231, 56, 121, 0.9) 0%, rgba(126, 24, 145, 0.9) 100%);
    box-shadow: 1px 1px 10px -2px rgb(255 255 255);
    border: none;
}

.radio-input {
    display: none;
}

.pricing-option {
    /* width: 300px; */
    margin-bottom: 20px;
}

.pricing-option label {
    width: 100%;
    display: block;
}

.radio-card h5 {
    color: #1e3e62;
    font-weight: 500;
}

.radio-card h3 {
    color: #cd316e;
    font-weight: 600;
    margin: 5px 0;
}

.radio-card p {
    color: #1e3e62;
    font-weight: 500;
}

.radio-input:checked+.radio-card h5,
.radio-input:checked+.radio-card h3,
.radio-input:checked+.radio-card p {
    color: #fff;
}

.apply-coupon input {
    padding: 15px;
    border-radius: 6px;
    border: none;
    color: #1e3e62;
}

button.btn.btn-code-apply {
    background-color: #1e3e62;
    color: #ffffff;
    font-weight: 600;
    border-color: #fff;
}

.category-option label {
    width: 100%;
}

/*.flatpickr-calendar.open,*/
/*.flatpickr-calendar.inline,*/
/*.flatpickr-days {*/
/*    width: 100% !important;*/
/*}*/

.dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

.prev-step,
.prev-step:hover {
    background-color: #ffffff1a;
    color: #ffffff;
    border-color: #f5f5f5;
    padding: 10px 15px;
    width: auto;
}

.next-step,
.next-step:hover {
    background: linear-gradient(90deg, rgba(231, 56, 121, 0.9) 0%, rgba(126, 24, 145, 0.9) 100%);
    color: #fff;
    border: 0;
    padding: 10px 15px;
    width: auto;
}

p.sub-total {
    margin-bottom: 10px;
    font-size: 30px;
    color: #1e3e62;
}

.card-detail-field .card-ip {
    background-color: #f5f5f5;
    color: #1e3e62;
    padding: 10px;
    border: 1px solid #1e3e62;
    border-radius: 6px;
    border-left: 0px;
}

.card-detail-field .input-group-text {
    background-color: #f5f5f5;
    color: #1e3e62;
    padding: 10px;
    border: 1px solid #1e3e62;
    border-radius: 6px;
}

label.card-label {
    color: #1e3e62;
}

.payment-card-div {
    background-color: #ffffff;
    border-radius: 6px;
    padding: 20px;
    text-align: center;
}

.payment-card-div h5,
.payment-card-div p {
    color: #1e3e62;
    margin-bottom: 15px;
}

.payment-card-div img {
    width: 100px;
}

.brpad {
    border-radius: 0px 10px;
    padding: 5px 10px;
}

.overflow-x-hidden {
    overflow-x: hidden;
}

.nav .nav-item button.active {
    background-color: #fff;
    color: #1e3e62 !important;
    border-radius: 10px 10px 0 0;
    font-size: 20px;
    border-radius: 10px 10px 0 0;
}

.nav .nav-item button.active::after {
    content: "";
    border-bottom: 4px solid #d03977;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -1px;
    border-radius: 5px 5px 0 0;
}

ul#pills-tab {
    border-radius: 10px 10px 0 0;
    background-color: #ffffff1a;
}

ul#pills-tab li {
    flex: 1;
}

#pills-tabContent {
    background: #ffffff1a;
    padding: 15px;
}

.event-box {
    background-color: #ffffff1a;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 30px;
    box-shadow: 0px 0px 4px 0px #ddd;
}

.event-box:hover {
    background-color: #fff;
}

.event-title h4 {
    color: #ffffff;
    letter-spacing: 1px;
}

.event-box:hover .event-title h4 {
    color: #333;
}

p.event-time {
    color: #ffffff;
    font-weight: 600;
    letter-spacing: 1px;
}

.event-box:hover p.event-time {
    color: #333;
}

.event-code p {
    color: #ffffff;
    letter-spacing: 1px;
    font-size: 15px;
    font-weight: bold;
}

.event-box:hover .event-code p {
    color: #8c2f9c;
}

.event-date>span {
    color: #333;
    font-weight: 600;
    letter-spacing: 1px;
    background-color: #ddd;
    padding: 2px 5px;
    border-radius: 4px;
}

.cursor-pointer {
    cursor: pointer;
}

.btn-event {
    padding: 10px 20px;
    background: linear-gradient(90deg, rgba(231, 56, 121, 0.9) 0%, rgba(126, 24, 145, 0.9) 100%);
    font-size: 15px;
    letter-spacing: 1px;
    color: #fff;
    border-radius: 10px;
    box-shadow: 1px 1px 3px 0px #111;
}

.btn-event:hover {
    background: linear-gradient(90deg, rgba(231, 56, 121, 0.9) 0%, rgba(126, 24, 145, 0.9) 100%);
    color: #fff;
    margin-right: 5px;
}

#completedEventsTable th {
    text-align: center;
    font-weight: 600;
    background-color: #1e3e62;
    color: #fff;
    white-space: nowrap;
    padding: 3px 5px;
}

#completedEventsTable tbody td {
    padding: 3px 5px !important;
}

.btn-outline-theme {
    border: 1px solid #1e3e62;
    background-color: #fff;
    color: #1e3e62;
}

.btn-outline-theme:hover {
    background-color: #1e3e62;
    color: #fff;
}

#completedEventsTable_wrapper select.dt-input {
    margin-right: 5px;
}

p.pricing_plan {
    color: #555;
}

p.pricing_plan span {
    font-size: 16px;
    color: #fff;
    font-weight: 600;
    padding: 3px 5px;
    border-radius: 4px;
}

span.standard-plan {
    background-color: #0dcaf0;
}

span.basic-plan {
    background-color: #6c757d;
}

span.premium-plan {
    background-color: #198754;
}

p.members_count {
    font-size: small;
    color: #555;
    font-weight: 700;
}

p.date_time {
    color: #333;
    font-weight: 500;
    letter-spacing: 1px;
}

p.event-amt {
    color: #cd316e;
    font-size: 24px;
    font-weight: 600;
    margin: 10px 0;
}

.event-detail-table table tbody tr td+td {
    text-align: right;
    font-size: 15px;
    color: #1e3e62 !important;
    font-weight: 500;
}

.event-detail-table table tbody tr td.paid-amt {
    color: #cd316e !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    margin: 10px 0;
}

p.status-div-today {
    text-align: center;
    background-color: springgreen;
    color: #000;
    font-size: larger;
    font-weight: 600;
    padding: 5px;
}

p.status-div-completed {
    text-align: center;
    background-color: tomato;
    color: #fff;
    font-size: larger;
    font-weight: 600;
    padding: 5px;
}

p.status-div-upcoming {
    text-align: center;
    background-color: orange;
    color: #000;
    font-size: larger;
    font-weight: 600;
    padding: 5px;
}

.btn-back {
    white-space: nowrap;
}

.modal-event .event-input label {
    color: #333;
    text-align: left;
    display: block;
}

.modal-event .event-input .event-ip {
    border: 1px solid #1e3e62;
}

span.copy-event-code {
    font-size: 18px;
    font-weight: 600;
    color: #1e3e62;
}

.copy-code-icon {
    font-size: 18px;
    font-weight: 600;
}

.share-link-icon {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #333;
}

.share-link-icon h6 {
    margin-bottom: 10px;
    font-size: 14px;
}

.social-invite-area img {
    transition: transform 0.3s ease-in-out;
}

.social-invite-area img:hover {
    transform: translateY(-5px);
}

.invite-field-ip {
    border: 1px solid #1e3e62;
    margin-bottom: 20px;
    height: 45px;
}

.add-new-row,
.btn-delete-btn {
    width: 100%;
    height: 45px;
    margin-bottom: 20px;
}

.invite-field-ip:focus {
    border: 1px solid #1e3e62;
}

/* ---------------------- */

/* Modern Styling */
/* .preloader {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
} */

/* Loading Text */


/* Icons Container */
/* .icons-track {
    display: flex;
    width: 100%;
    height: 180px;
    animation: slidey 8s infinite linear;
} */

/* Individual Icon Frames */


/* Image Styling */
/* .icont-img {
    max-width: 120px;
    max-height: 120px;
    object-fit: contain;
    transition: transform 0.3s ease;
} */

/* Subtle Bounce Effect */


/* Animation */
@keyframes slidey {
    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(0);
    }

    /* Gift */
    25% {
        transform: translateX(-25%);
    }

    45% {
        transform: translateX(-25%);
    }

    /* Balloon */
    50% {
        transform: translateX(-50%);
    }

    70% {
        transform: translateX(-50%);
    }

    /* Cake */
    75% {
        transform: translateX(-75%);
    }

    95% {
        transform: translateX(-75%);
    }

    /* Confetti */
    100% {
        transform: translateX(-100%);
    }
}

@keyframes pulsey {

    0%,
    100% {
        opacity: 0.8;
        transform: scale(0.98);
    }

    50% {
        opacity: 1;
        transform: scale(1.02);
    }
}

.card.counts-sec {
    padding: 10px;
    margin-bottom: 20px;
}

.card.counts-sec span {
    font-size: 24px;
    color: #cd316e;
}

.card.counts-sec small {
    color: #1e3e62;
    font-weight: 600;
    letter-spacing: 1px;
}

.height-100 {
    height: 100vh;
}

.left-side-sec {
    flex: 1;
    background-color: #fff;
    /* background: url(https://fireflies.ai/blog/content/images/2022/10/How-to-Record-Google-Meet-Sessions-1.jpg) no-repeat center center; */
    /* background-size: cover; */
    position: relative;
    /* clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%); */
}

.right-side-sec {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}

.event-meet-form {
    max-width: 350px;
    width: 100%;
}

.event-meet-form h2,
.event-meet-form p {
    color: #fff;
    margin-bottom: 30px;
}

.ip-container {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 100px;
    overflow: hidden;
    width: 100%;
}

.ip-container .icon {
    padding: 12px 12px;
    background-color: transparent;
    color: #ffffff;
    border-right: 0px solid #ddd;
    font-size: 16px;
}

.ip-container input {
    flex: 1;
    padding: 12px;
    border: none;
    outline: none;
    font-size: 16px;
    background-color: transparent;
    color: #fff;
}

.ip-container input::placeholder {
    color: #bfbfbf;
}

.btn-event-join {
    border: 2px solid #fff;
    border-radius: 100px;
    padding: 12px;
    color: #000000;
    background-color: #fff;
}

.btn-event-join:hover {
    border: 2px solid #fff;
    color: #fff;
    background-color: transparent;
}

/* ---------------------- */


#typed-element-a,
#typed-element-b,
#typed-download,
#sec-title-1,
#sec-title-2 {
    display: inline-block;
}

.typed-cursor {
    opacity: 1;
    animation: blink 0.7s infinite;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}



.profile-dropdown {
    position: relative;
    display: inline-block;
}

.profile-icon {
    cursor: pointer;
}

.profile-icon.dropdown-toggle::after {
    display: none !important;
}

.profile-dropdown .dropdown-menu {
    transform: translate(0px, 50px);
    width: 220px;
}




.event-image-overlay-container {
    max-width: 600px;
    width: 100%;
    height: auto;
    cursor: pointer;
    position: relative;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 1px #ddd;
    margin-bottom: 30px;
}

.event-overlay-image {
    transition: transform 0.5s ease;
    display: block;
    width: 100%;
}

.event-overlay-text {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%, 0);
    opacity: 0;
    transition: all 0.5s ease;
    background: rgba(0, 0, 0, 0.65);
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 20px;
}

/* Hover Effects */
.event-image-overlay-container:hover .event-overlay-image {
    transform: scale(1.1);
}

.event-image-overlay-container:hover .event-overlay-text {
    bottom: 50%;
    transform: translate(-50%, 50%);
    opacity: 1;
}


/* Sidebar styling */
#module-sidebar {
    position: fixed;
    top: 0;
    left: -250px;
    height: 100%;
    width: 250px;
    background-color: #343a40;
    padding: 1rem;
    transition: left 0.3s ease;
    z-index: 9999;
    overflow: auto;
}

#module-sidebar.active {
    left: 0;
}

#module-sidebar .close-icon-btn {
    font-size: 1.5rem;
    color: #fff;
    cursor: pointer;
    text-align: right;
}

#module-sidebar a {
    color: #fff;
    display: block;
    padding: 0.5rem 0;
    text-decoration: none;
}

#module-sidebar a:hover {
    background-color: #495057;
    border-radius: 4px;
}

/* Overlay for background dim */
.module-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 1049;
}

.module-overlay.active {
    opacity: 1;
    visibility: visible;
}

button.btn-sidebar {
    background-color: #ddd;
    border: none;
    color: #000;
    box-shadow: 0px 0px 4px 1px #ddd;
}

.my-account-card .event-title h4 {
    color: #1e3e62;
    word-wrap: break-word;
}

.my-account-card p.event-time {
    color: #333;
}

.my-account-card .event-box {
    margin-bottom: 15px;
}

.my-account-card .event-code p {
    color: #8c2f9c;
}
.category-option .radio-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.category-option .radio-card {
    width: 100%;
    height: 175px;
}

.btn-join-now {
    background: linear-gradient(90deg, rgba(231, 56, 121, 0.9) 0%, rgba(126, 24, 145, 0.9) 100%);
    color: #fff !important;
    border: none;
}

.flatpickr-day, .flatpickr-disabled, .flatpickr-day, .flatpickr-disabled:hover {
    cursor: not-allowed;
    color: rgb(57 57 57);
}
#card-number body.is-cardNumber.state-pay-visible.previous-state-hidden.is-card-payment.card-is-unknown .OffsetContainer {
    z-index: -9 !important;
    opacity: 0 !important;
    display: none !important;
}
.OffsetContainer, .ButtonContainer.ButtonContainer--save, .ButtonContainer.ButtonContainer--use, .ButtonContainer.ButtonContainer--pay, .Button--save, .Button--use, .Button--pay, .Button--use {
    display: none !important;
    opacity: 0 !important;
}

	
	
	
	
	/* billing address */
 .billing_header_element {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15px;
    }
    .btn-edit-address-info {
        background: #1e3e62;
        color: #fff;
        padding: 2px 8px;
        font-size: 14px;       
        border: none;
    }
    .btn-update-address-info {
        background: #034f28;
        color: #fff;
        padding: 2px 8px;
        font-size: 14px;       
        border: none;
    }
    .btn-cancel-address-info {
        background: #dc3545;
        color: #fff;
        padding: 2px 8px;
        font-size: 14px;        
        border: none;
    }
    .address-btn-group {
        display: flex;
        align-items: center;
        gap: 3px;        
        border: none;
    }
.editable-border {
    border: 1px solid #007bff;
    border-radius: 5px;
    padding: 4px;
    background: #f9f9f9;
}

.mission-vision-card {
    min-height: 340px;
}
.single-choose-item {
    min-height: 325px;
}

.group-list {
            padding: 30px 15px;
            margin-bottom: 30px;
            background-color: #FFFFFF1A;
            border-radius: 10px;
            text-align: center;
        }
        .group-list h4{
            color: #fff;
            margin-bottom: 20px;
        } 
        .group-list p {
            color: #fff;
        }
        
        
/*#preloader {*/
/*      position: fixed;*/
/*      inset: 0;*/
/*      background: white;*/
/*      display: flex;*/
/*      justify-content: center;*/
/*      align-items: center;*/
/*      flex-direction: column;*/
/*      z-index: 9999;*/
/*      overflow: hidden;*/
/*      text-align: center;*/
/*    }*/

    
/*    #preloader img.logo {*/
/*      width: 180px;*/
/*      max-width: 40vw;*/
/*      animation: pulse 2s infinite ease-in-out;*/
/*    }*/

   
/*    .celebration-text {*/
/*      color: #0c1e33;*/
/*      font-size: 1.8rem;*/
/*      margin-top: 20px;*/
/*      font-weight: 600;*/
/*      text-shadow: 2px 2px 5px rgba(0,0,0,0.3);*/
/*      animation: fadeIn 2s infinite alternate;*/
/*    }*/

    
/*    .animation-zone {*/
/*      position: relative;*/
/*      width: 100%;*/
/*      height: 200px;*/
/*      margin-top: 20px;*/
/*      overflow: hidden;*/
/*    }*/

/*    .moving-item {*/
/*      position: absolute;*/
/*      bottom: 0;*/
/*      left: -200px;*/
/*      width: 175px;*/
/*      max-width: 20vw;*/
/*      opacity: 0;*/
/*      animation-timing-function: linear;*/
/*    }*/

    
/*    @keyframes pulse {*/
/*      0%, 100% { transform: scale(1); }*/
/*      50% { transform: scale(1.1); }*/
/*    }*/

/*    @keyframes fadeIn {*/
/*      0% { opacity: 0.4; }*/
/*      100% { opacity: 1; }*/
/*    }*/

    
/*    @keyframes moveLeftToRightBounce {*/
/*      0% {*/
/*        left: -200px;*/
/*        opacity: 0;*/
/*        transform: translateY(0) scale(0.9) rotate(0deg);*/
/*      }*/
/*      10% { opacity: 1; }*/
/*      25% { transform: translateY(-20px) scale(1) rotate(5deg); }*/
/*      50% { transform: translateY(0) rotate(-5deg); }*/
/*      75% { transform: translateY(-15px) rotate(3deg); }*/
/*      90% { opacity: 1; transform: translateY(0) rotate(0deg); }*/
/*      100% {*/
/*        left: 100vw;*/
/*        opacity: 0;*/
/*        transform: translateY(0) scale(0.9) rotate(0deg);*/
/*      }*/
/*    }*/

   
/*.confetti {*/
/*  position: absolute;*/
/*  top: -20px; */
/*  height: 10px;*/
/*  background: #fff;*/
/*  opacity: 0.9;*/
/*  border-radius: 50%;*/
/*  animation: confettiFall 5s linear infinite;*/
/*}*/

/*    @keyframes confettiFall {*/
/*  0% {*/
/*    transform: translateY(0) rotate(0deg);*/
/*    opacity: 1;*/
/*  }*/
/*  100% {*/
/*    transform: translateY(110vh) rotate(720deg);*/
/*    opacity: 0;*/
/*  }*/
/*}*/

    
/*    body.loaded #preloader {*/
/*      display: none;*/
/*    }        */

  /* --- Preloader Overlay --- */
    #preloader {
      position: fixed;
      inset: 0;
      background: white;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      z-index: 9999;
      overflow: hidden;
      text-align: center;
      transition: opacity 0.8s ease, visibility 0.8s ease;
    }

    #preloader.hidden {
      opacity: 0;
      visibility: hidden;
    }

    /* --- Logo --- */
    #preloader img.logo {
      width: 180px;
      max-width: 40vw;
      animation: pulse 2s infinite ease-in-out;
    }

    /* --- Celebration Text --- */
    .celebration-text {
      color: #0c1e33;
      font-size: 1.8rem;
      margin-top: 20px;
      font-weight: 600;
      text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
      animation: fadeIn 2s infinite alternate;
    }

    /* --- Animation Zone --- */
    .animation-zone {
      position: relative;
      width: 100%;
      height: 175px;
      margin-top: 20px;
      overflow: hidden;
    }

    .moving-item {
      position: absolute;
      bottom: 0;
      left: -200px;
      width: 130px;
      max-width: 20vw;
      opacity: 0;
      animation-timing-function: linear;
    }

    /* --- Keyframes --- */
    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }

    @keyframes fadeIn {
      0% { opacity: 0.4; }
      100% { opacity: 1; }
    }

    /* Combined movement + bounce */
    @keyframes moveLeftToRightBounce {
      0% {
        left: -200px;
        opacity: 0;
        transform: translateY(0) scale(0.9) rotate(0deg);
      }
      10% { opacity: 1; }
      25% { transform: translateY(-20px) scale(1) rotate(5deg); }
      50% { transform: translateY(0) rotate(-5deg); }
      75% { transform: translateY(-15px) rotate(3deg); }
      90% { opacity: 1; transform: translateY(0) rotate(0deg); }
      100% {
        left: 100vw;
        opacity: 0;
        transform: translateY(0) scale(0.9) rotate(0deg);
      }
    }

    /* --- Confetti --- */
    .confetti {
      position: absolute;
      top: -20px;
      width: 10px;
      height: 10px;
      background: #fff;
      opacity: 0.9;
      border-radius: 50%;
      animation: confettiFall 5s linear infinite;
    }

    @keyframes confettiFall {
      0% { transform: translateY(0) rotate(0deg); opacity: 1; }
      100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
    }

    /* Hide website content until preloader ends */
    body.loaded #preloader {
      display: none;
    }


.next-step1 {
    background: linear-gradient(90deg, rgba(231, 56, 121, 0.9) 0%, rgba(126, 24, 145, 0.9) 100%);
    color: #fff !important;
    border: 0;
    padding: 10px 15px;
    width: auto;
}

.loc-detail p[contenteditable="true"]{
    text-align:left !important;
}
.loc-detail p[contenteditable="false"]{
    text-align:right !important;
}


.event-history-line-clamp .event-title h4 {
    line-height: 2rem;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.footer-widget .footer-widget-body p {
    text-align: justify;
}
.partner-text-divsec p {
    text-align: justify;
}
.partner-text-divsec ul {
    margin-left: 20px;
}
.partner-text-divsec ul li {
    list-style: disc;
    color: #fff;
}
td.text-center.nowrap {
    white-space: nowrap;
}
.nav .nav-item button {
    font-size: 20px;
}
button#payBtn:disabled {
    color: #fff;
}

.onlywhen:not(.show) {
    position: sticky !important;
    z-index: 999 !important;
    top: 10%;
    margin-bottom: 30px;
}

/*----------------------*/
@media (max-width: 1536px) {
    
}
/*----------------------*/

/* ----------------------------------------- */
@media only screen and (max-width: 1199px) {
    .card-4-section .card-content h4 {
        font-size: 18px;
    }

    .card-2x4x4-section .img-holder {
        height: 225px;
    }
}

@media only screen and (max-width: 1024px) {
    .card-2x4x4-section .img-holder {
        height: 200px;
    }
}

/* Make offcanvas behave like a sidebar on lg and up */
@media (min-width: 992px) {
    .offcanvas-lg-static {
        position: static !important;
        transform: none !important;
        visibility: visible !important;
        background-color: transparent !important;
        border: none !important;
    }

    .offcanvas-lg-static .offcanvas-header {
        display: none !important;
    }
}

@media only screen and (max-width: 991px) {
    .card-2x4x4-section .img-holder {
        height: 275px;
    }

    #homeCarousel .carousel-caption h5 {
        font-size: 30px;
    }

    .mission-vision-card.mission-card,
    .mission-vision-card.vision-card {
        background-size: 30%;
    }

    .breadcrumb-wrap {
        padding: 30px 0;
    }

    .text-container p {
        font-size: 14px;
    }

    .grid-container {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 20px;
    }

    #module-sidebar {
        width: 350px;
        left: -350px;
    }

    .grid-item .img-container img {
        width: 100px;
    }
    .event-history-line-clamp .event-title h4 {
        display : block;
        word-wrap: break-word;
    }
    .onlywhen:not(.show) {
        position: fixed !important;
        z-index: unset !important;
        top: unset;
        margin-bottom: unset;
    }
}

@media only screen and (max-width: 768px) {
    #homeCarousel .carousel-caption h5 {
        font-size: 28px;
        margin-bottom: 0;
    }

    #homeCarousel .carousel-caption p {
        line-height: 20px;
    }

    .left-side-sec {
        display: none;
    }

    .right-side-sec {
        flex: 1 1 100%;
        clip-path: none;
    }
}

@media only screen and (max-width: 767px) {
    .card-2x4x4-section .img-holder {
        height: 250px;
    }

    #homeCarousel .carousel-control-next,
    #homeCarousel .carousel-control-prev {
        width: 10%;
    }

    #homeCarousel .carousel-caption {
        left: 10%;
        right: 10%;
    }

    .mission-vision-card.mission-card,
    .mission-vision-card.vision-card {
        background-size: 15%;
    }

    .mean-container .mean-bar a {
        top: -50px;
    }

    .grid-container {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 20px;
    }
}

@media only screen and (max-width: 575px) {
    .mean-container .mean-bar a {
        top: -50px;
    }

    .scroll-top {
        bottom: 100px;
    }

    .header-setting-option ul li {
        padding: 5px 0px 5px 3px;
    }

    .header-setting-option ul li a {
        font-size: 12px;
        padding: 5px 10px;
    }

    .section-title {
        font-size: 30px;
    }

    h1.app-title-head {
        font-size: 36px;
    }

    h5.app-sub-title {
        font-size: 30px;
    }

    .card-2x4x4-section .img-holder {
        height: 300px;
    }

    #homeCarousel .carousel-caption h5 {
        font-size: 18px;
        margin-bottom: 0;
    }

    #homeCarousel .carousel-caption p {
        font-size: 12px;
        line-height: 18px;
    }

    .carousel-caption {
        padding-bottom: 1rem;
    }

    .carousel-indicators {
        margin-bottom: .2rem;
    }

    .breadcrumb-wrap {
        padding: 10px 0;
    }

    .page-image-section .page-image-overlay-text {
        font-size: 12px;
    }

    .grid-container {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 20px;
    }

    #module-sidebar {
        width: 400px;
        left: -400px;
    }
    .page-image-section {  /*error fix */
        height: 200px;
    }
    .page-image-section img {/*error fix */
        height: 100%;
        object-fit: cover;
    }
}

@media only screen and (max-width: 480px) {

    .mission-vision-card.mission-card,
    .mission-vision-card.vision-card {
        background-size: 25%;
    }
 

}

@media only screen and (max-width: 479px) {
    .comment-section ul li {
        display: flex;
    }

    #module-sidebar {
        width: 375px;
        left: -375px;
    }
}

@media only screen and (max-width: 375px) {
    .mean-container .mean-bar a {
        top: -50px;
    }

    .card-2x4x4-section .img-holder {
        height: 275px;
    }

    .login-reg-form-wrap {
        padding: 40px 15px;
    }

    .grid-container {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 20px;
    }

    #module-sidebar {
        width: 350px;
        left: -350px;
    }
    
       .flatpickr-calendar.open,
.flatpickr-calendar.inline,
.flatpickr-days {
    width: 100% !important;
}
}

@media only screen and (max-width: 360px) {
    .page-image-section {
        height: 100px;
    }
}

@media only screen and (max-width: 350px) {

    .page-image-section img {
        width: 100%;
        height: 100px;
        object-fit: cover;
    }
    .page-image-section h2 {
        font-size:20px;
    }
    .page-image-section .page-image-overlay-text {
        line-height: 1rem;
    }
}