@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins' !important;
    background-color: #fff;
    overflow-x: hidden !important;
}

html,
body {
    touch-action: manipulation;
}

body.modal-open {
    overflow: auto !important;
    /* Don't hide the scrollbar */
    padding-right: 0 !important;
    /* Prevent layout jump */
}


/* button */
.green-stroke-btn {
    background: white !important;
    border: 2px solid rgb(4, 60, 4) !important;
    color: rgb(4, 60, 4) !important;
    width: fit-content !important;
    transition: .5s ease;
}

.green-stroke-btn:hover {
    background: #012d17 !important;
    transition: .5s ease;
    color: white !important;
    border: 1px solid #012d17 !important;
}

/* button */



/* loader */

#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    margin-right: 15px;
}

.loader {
    --path: #2F3545;
    --dot: #56ff0e;
    --duration: 3s;
    width: 44px;
    height: 44px;
    position: relative;
}

.loader:before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    display: block;
    background: var(--dot);
    top: 37px;
    left: 19px;
    transform: translate(-18px, -18px);
    animation: dotRect var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}

.loader svg {
    display: block;
    width: 100%;
    height: 100%;
}

.loader svg rect,
.loader svg polygon,
.loader svg circle {
    fill: none;
    stroke: var(--path);
    stroke-width: 10px;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.loader svg polygon {
    stroke-dasharray: 145 76 145 76;
    stroke-dashoffset: 0;
    animation: pathTriangle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}

.loader svg rect {
    stroke-dasharray: 192 64 192 64;
    stroke-dashoffset: 0;
    animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}

.loader svg circle {
    stroke-dasharray: 150 50 150 50;
    stroke-dashoffset: 75;
    animation: pathCircle var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}

.loader.triangle {
    width: 48px;
}


@keyframes pathTriangle {
    33% {
        stroke-dashoffset: 74;
    }

    66% {
        stroke-dashoffset: 147;
    }

    100% {
        stroke-dashoffset: 221;
    }
}

@keyframes pathRect {
    25% {
        stroke-dashoffset: 64;
    }

    50% {
        stroke-dashoffset: 128;
    }

    75% {
        stroke-dashoffset: 192;
    }

    100% {
        stroke-dashoffset: 256;
    }
}

@keyframes pathCircle {
    25% {
        stroke-dashoffset: 125;
    }

    50% {
        stroke-dashoffset: 175;
    }

    75% {
        stroke-dashoffset: 225;
    }

    100% {
        stroke-dashoffset: 275;
    }
}

@keyframes dotRect {
    25% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(18px, -18px);
    }

    75% {
        transform: translate(0, -36px);
    }

    100% {
        transform: translate(-18px, -18px);
    }
}

body.loaded #loader-wrapper {
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s ease-out;
}

/* loader */



/* pass card animated free */
.pass-card-animated-free .pass-header {
    position: relative;
    z-index: 1;
    overflow: visible;
}

.pass-card-animated-free .pass-header::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    /* background: linear-gradient(120deg, #460148, rgb(172, 22, 150), #360023, #460148, rgb(172, 22, 150), #460148); */
    background: linear-gradient(120deg, #ffffff14, rgb(0 0 0 / 11%), #00000080, #ffffff26, rgb(255 255 255 / 0%), #ffffff00);
    background-size: 300% 300%;
    animation: borderLightningMove 2.5s linear infinite;
    z-index: 0;
    pointer-events: none;
    left: 0;
}

@keyframes borderLightningMove {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

.free-badge-label {
    background-image: url(../img/free-label.png) !important;
}

/* pass card animated free */

/* loader */


.header {
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo {
    height: 80px;
}

.date-location {
    color: #000;
    font-weight: bold;
    margin-left: 20px;
    font-size: 20px;
    line-height: 1.3;
}

.date-location .berlin {
    color: #e63946;
    font-style: italic;
    font-size: 30px;
}

.germany {
    font-size: 14px;
    color: #333;
}

.banner {
    width: 100%;
    background: linear-gradient(90deg, #ffffff 0%, #f0f8ff 100%);
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.event-logos {
    display: flex;
    align-items: center;
    gap: 15px;
}

.event-logo {
    height: 40px;
}

.registration-bar {
    background: linear-gradient(180deg, #25112c 0%, #010200 100%);
    color: white;
    padding: 17px 70px;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}




.login-btn {
    position: relative;
    width: 270px;
    padding: 6px 0;
    border: none;
    font-size: 17px;
    font-weight: 600;
    color: #000000;
    text-align: center;
    cursor: pointer;
    background: transparent url(../img/Button_green.svg) center/cover no-repeat;
    transition: transform 0.3s ease-in-out;
}

.login-btn::after {
    content: "LOGIN";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent url(../img/Button_Green_2.svg) center/cover no-repeat;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.login-btn:hover::after {
    opacity: 1;
}

.content {
    padding: 30px 60px;
    background: rgb(255, 255, 255);
    -webkit-backdrop-filter: blur(8px);
    background-image: url(../img/CircleElement.webp) !important;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    position: relative;
}

.reg-content {
    background-image: none !important;
    background-color: #0a1d0b;
}

.header-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-bottom: 30px;
}

.group-btn,
.promo-btn {
    background-color: #1a237e;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 5px;
    font-weight: 400;
    cursor: pointer;
}

.select-title {
    font-size: 23px;
    font-weight: 600;
    color: #1f1e1e;
    text-transform: uppercase;
}

.bill-info-head {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
}

.pass-cards {
    margin-bottom: 40px;
}



.pass-card {
    backdrop-filter: blur(3px);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    min-height: 344px;
    gap: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    background: #fff;
}

.pass-header {
    position: relative;
    z-index: 3;
}

.color-red-gr {
    /* background-image: url(../img/purplebgv315.webp); */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #ffffff;
}

.color-red-gr .pass-header {
    /* background-image: url(../img/purplebgv315.webp); */
    background-color: #650505;
}

.color-green-gr {
    /* background-image: url(../img/nigeria-tech-convergence.webp); */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    background-color: #ffffff;
}

.color-green-gr .pass-header {
    /* background-image: url(../img/nigeria-tech-convergence.webp);
    background-blend-mode: overlay; */
    background-color: #047d0a;
}


.color-blue-gr {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #ffffff;
}

.color-blue-gr .pass-header {
    /* background-image: url(../img/GovtBanner_1.webp); */
    background-color: #650505;
}

.color-red-gr .gitex-day-text span a {
    color: #efa500;
}

.pass-type {
    color: #ffffff !important;
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
    position: relative;
    z-index: 999;
    width: 73%;
}




.ticket-best-seller {
  position: absolute;
  right: 5px;
  top: 5px;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 11px;
  background: url(../img/best-seller.png);
  height: 60px;
  width: 60px;
  background-size: cover;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
  line-height: 12px;
  border-radius: 50%;
  
}

.ticket-best-seller .shine-text {
  background-image: linear-gradient(
    90deg,
    #000 0%,
    #777 20%,
    #000 40%,
    #000 100%
  );
  background-size: 200% auto;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShine 2s linear infinite;
}

@keyframes textShine {
  0% {
    background-position: -100% center;
  }
  100% {
    background-position: 200% center;
  }
}



.pass-type a {
    color: #e6ff00 !important;
    font-weight: 400;
    font-size: 13px;
    text-transform: uppercase;
}

.pass-type span {
    color: #ffffff;
    font-weight: 300;
}



.pass-details-btn {
    /* position: absolute; */
    top: 20px;
    right: 20px;
    color: white;
    font-weight: bold;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.arrow-icon {
    margin-left: 5px;
}

.pass-icon {
    position: absolute;
    bottom: -30px;
    left: 20px;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.pass-content {
    padding: 20px 20px 10px 20px;
    display: flex;
    flex-direction: column;
    /* min-height: 210px;
    max-height: 210px;  */
    background: #ffffff;
    position: relative;
}

.pass-content .ticket-disc-main {
    font-size: 13px;
    font-weight: 300;
    margin-bottom: 10px;
    position: relative;
    z-index: 995;
    min-height: 60px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.pass-content span a {
    font-weight: 800;
    color: rgb(26 168 26);
    text-decoration: underline;
}

.ticket-exclusive {
    content: "";
    background-image: url(../img/exclusive-left.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: left center;
    position: absolute;
    top: -4px;
    left: -5px;
    height: 110px;
    width: 100px;
    background-size: 100%;
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.7));
    z-index: 999;
    border-radius: 0px;
}

.ticket-best-seller-spr-early-bird h6 {
    top: 25px !important;
    left: -1px !important;
    font-size: 11px !important;

}

.exc-title-padding {
    padding-left: 80px !important;
}

.ticket-exclusive h6 {
    font-size: 11px;
    color: #fff;
    transform: rotate(312deg);
    position: absolute;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    left: 10px;
    top: 17%;
}

.ticket-best-seller-exclusive h6 {
    left: 5px !important;
    top: 30px !important;
}


.free-badge-label h6 {
    left: 10px !important;
    top: 26px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    /* Add animation */
    animation: textPulseGlow 1.2s infinite ease-in-out;
}


@keyframes textPulseGlow {

    0%,
    100% {
        color: #851a1d;
        letter-spacing: 0px;
    }

    50% {
        color: #ffffff;
        letter-spacing: 1px;
    }
}



.pass-card {
    position: relative;
    overflow: hidden;
}

.pass-card::after {
    position: absolute;
    content: '';
    background-image: url(../img/ticket-ab.svg);
    right: -140px;
    top: -50px;
    background-position: right bottom;
    background-size: 60%;
    height: 100%;
    width: 100%;
    opacity: .8;
    background-repeat: no-repeat;
}

.pass-content-no-pad {
    padding: 20px 0px 0px 0px;
    /* min-height: 145px; */
    background: transparent;
}


.description {
    margin-bottom: 20px;
}

.highlight {
    color: #e63946;
    font-weight: bold;
}

.features {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    position: relative;
    z-index: 11;
}

.feature {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.check-icon svg {
    color: #4caf50;
    margin-right: 5px;
    font-size: 20px;
}

.x-icon {
    color: #ccc;
    margin-right: 10px;
    font-size: 20px;
}

.pass-price {
    font-size: 17px;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    color: #222222;
}

.pass-price h6 {
    font-weight: bold;
    font-size: 17px;
}

.offer-cut {
    position: relative;
     text-decoration: line-through;
     margin-left: 5px;
       display: inline-block;
}

.offer-cut::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px; /* thickness of the line */
  background-color: red; /* color of the strikethrough */
  transform: translateY(-50%);
  pointer-events: none;
}

.vat {
    font-size: 10px;
    color: #484848d4;
    font-weight: 500;
}


.buy-btn {
    display: block;
    width: 100%;
    background: linear-gradient(91deg, #2ba642, #2ba642);
    background-size: 200% 100%;
    background-position: left;
    color: white;
    border: none;
    padding: 10px 20px;
    text-align: center;
    font-weight: 500;
    font-size: 15px;
    border-radius: 8px;
    margin-top: 10px;
    cursor: pointer;
    transition: background-position 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.buy-btn:hover {
    background-position: right;
    transform: translateY(-4px);
}

.logo-footer {
    display: block;
    margin: 20px auto;
    max-width: 200px;
}

.height-100 {
    height: 100%;
}

.head-text-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.last-feature {
    margin-bottom: 0px;
}

.back-btn {
    border-radius: 10px;
    border: 2px solid rgb(11, 44, 61);
    background-color: transparent;
    color: #000;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
}

.back-btn:hover {
    background-color: rgb(11, 44, 61);
    color: #fff;
    transition: all 0.3s ease-in-out;
}

.back-btn span {
    font-weight: 700;
}


/* inner-banner */


.inner-banner {
    height: 150px;
    width: 100%;
    background-image: url(../img/banner.webp);
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #edeef0;
    padding: 0px 60px;
}

.inner-banner img {
    width: 600px;
}

.breadcrumps ul {
    display: flex;
    align-items: center;
    list-style: none;
    justify-content: center;
    gap: 10px;
    padding: 0px;
}

.breadcrumps ul li {
    color: #BCBCBC;
    font-size: 17px;
    font-weight: 300;
    text-transform: uppercase;
}

.breadcrumps ul li a {
    color: #BCBCBC;
}

.inner-banner-content {
    position: relative;
    z-index: 1;
    margin-top: 20px;
}

.inner-banner-content h3 {
    text-align: center;
    font-size: 45px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--white-color);
}

.inner-banner-content h4 {
    font-size: 28px;
    text-align: center;
}

.pass-price-out {
    padding: 10px 20px;
    background-color: #f5f5f500;
    backdrop-filter: blur(1px);
    border-top: 1px solid #cdcdcd63;
    position: relative;
    z-index: 1;
}

a {
    color: #0d6efd;
    text-decoration: none;
}

/* bishru */

.feature-pill {
    background: rgb(234 234 234);
    padding: 4px 8px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 300;
    color: #353535;
    display: flex;
    align-items: center;
    width: fit-content;
    border: 1px solid #ebebeb;
}

.gitex-day-text {
    color: #242424;
    font-size: 14px;
    font-weight: 400;
}

.gitex-day-text span a {
    font-weight: 700;
    text-decoration: underline;

}


.ticket-logo {
    text-align: left;
    margin-top: 10px;
}

.ticket-logo img {
    max-width: 260px;
    display: block;
    filter: invert(1);
}

.gry-out {
    background: rgb(226 226 226);
    color: rgb(171, 171, 171);
}

.gry-out span svg path {
    fill: gray !important;
}

.card-icon svg path {
    fill: #fff;
}



.pass-header {
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    color: #fff;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border-bottom: 1px solid #ffffff42;
    position: relative;
    min-height: 75px;
}

.pass-header::after {
    position: absolute;
    content: '';
    background-image: url(../img/footer-ab.svg);
    right: -30px;
    top: 0px;
    background-position: right bottom;
    background-size: 40%;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
}


.pass-header::before {
    position: absolute;
    content: '';
    background-image: url(../img/footer-ab.svg);
    left: -30px;
    top: 0px;
    background-position: left bottom;
    background-size: 40%;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;

}

.footer1-cont img {
    width: 350px;
}

.footer-di-flex {
    display: flex;
    align-items: start;
    gap: 15px;
    justify-content: space-between;
}

.row-reverse {
    flex-direction: row-reverse;
}

.footer {
    padding: 17px 80px 15px;
    background-image: url(../img/banner.webp);
    background-color: #000000;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.footer .footer2-cont-2 {
    text-align: left;
    font-size: 12px;
    color: #fff;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 18px;
}

.footer .footer2-cont-3 {
    text-align: left;
    font-size: 12px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
}

.footer .footer2-cont-4 {
    text-align: left;
    font-size: 13px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
}

.footer3-cont ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer3-cont ul li {
    line-height: 26px;
    text-decoration: underline;
}

.footer3-cont ul li a {
    text-align: left;
    font-size: 13px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.52px;
}

.footer4-cont p {
    font-size: 14px;
    color: white;
}

.footer4-cont ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer4-cont ul li {
    line-height: 26px;
    text-decoration: underline;
    color: #fff;
    font-size: 13px;
    font-weight: normal;
}

.footer4-cont ul li a {
    text-align: left;
    font-size: 12px;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
}


.blending-top {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 70px;
    background: linear-gradient(0deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0) 100%);
}

.blending-bottom {
    top: auto !important;
    bottom: 0px !important;
    background: linear-gradient(0deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0) 100%);
    transform: rotate(180deg);
}

.footer-all {
    position: relative;
    z-index: 1;
}


.registration-text {
    font-size: 21px;
    font-weight: 500;
    color: #ffffff;
    font-family: 'beluga';
    /* margin-bottom: 10px; */
}



.login-icon {
    font-size: 24px;
    margin-right: 8px;
}


.social-icons {
    display: flex;
    gap: 20px;
    justify-content: center;
}


.footer-contact a h5 {
    color: var(--primary-color);
    font-size: 19px;
    font-weight: 600;
    text-align: center;
}

.footer-contact a h6 {
    color: #D9D9D9;
    font-size: 16px;
    font-weight: 300;
    text-align: center;
}

.footer-line {
    height: 1px;
    background: var(--white-color);
}

.footer-bottom {
    background-color: #171b2e;
    text-align: center;
    color: #fff;
    padding: 15px 0px;
    margin-top: 20px;
}

.footer-bottom a {
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.terms-div {
    display: flex;
    justify-content: center;
}

.terms-div ul {
    padding: 0;
    list-style: none;
    display: flex;
    gap: 50px;
    padding-top: 20px;
}

.terms-div ul li {
    color: #ABABAB !important;
}

.terms-div ul li a {
    font-size: 15px;
    font-weight: 400;
    color: #ABABAB;
    transition: 1s;
}

.terms-div ul li a:hover {
    color: var(--primary-color);
    transition: 1s;
}

.footer-cont-number {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
}


/* modal */


.premium-card {
    width: 100%;
    background: white;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.premium-header {
    padding: 24px;
    padding: 20px;
    font-size: 18px;
    font-weight: bold;
    background-image: url(../img/banner.webp);
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: white;
}

.premium-content {
    /* padding: 0 24px 16px; */
    font-size: 14px;
    line-height: 1.6;
}

.premium-content p {
    font-size: 16px;
}

.premium-content b {
    font-weight: bold;
}

.premium-list {
    padding-left: 20px;
    margin: 16px 0;
}

.premium-list li {
    margin-bottom: 8px;
    color: #444;
    font-size: 15px;
}

.premium-footer {
    padding: 1em;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.premium-footer .buy-btn {
    width: fit-content;
    padding: 10px 70px;
    margin-top: 0px;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 30px;
    margin-top: 20px;
    height: 300px;
    overflow-x: hidden;
}

.checkbox-grid label {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
}

.checkbox-grid input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    accent-color: black;
    /* Modern browsers */
}

.bold {
    font-weight: 700;
}

.price {
    font-size: 18px;
    font-weight: bold;
}


.height-content {
    height: 58vh;
}

.buy-button {
    background-color: #1E1E6A;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s;
}

.buy-button:hover {
    background-color: #151557;
}

.modal-content {
    border-radius: 30px !important;
    border: none;
    overflow: hidden;
}

.event-info h2 {
    color: #000;
    font-size: 14px;
    font-weight: 500;
}

.location {
    color: #003366;
    font-weight: bold;
}

.note {
    margin-top: 20px;
}

.note h3 {
    font-size: 13px;
    color: gray;
    font-weight: 700;
}

.note ul {
    padding-left: 20px;
}

@media (max-width: 500px) {
    .premium-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

.premium-header .btn-close {
    padding: 0;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    opacity: 1;
    height: 30px;
    width: 30px;
    border-radius: 100%;
    border: 1px solid #ffffff;
    filter: none;
}

.last-pass-price-out {
    padding: 10px 20px 20px 20px;
}


.premium-header .btn-close:hover {
    opacity: 0.75;
}

.premium-card .modal-body {
    /* max-height: 350px; */
    overflow-y: scroll;
}

.related-options .checkbox-grid label {
    height: 20px;
}

.related-options .checkbox-grid {
    height: auto;
}

.card {
    border-radius: 5px;
    box-shadow: none;
    margin-bottom: 20px;
    border: none;
    background: transparent;
    /* overflow: hidden; */
}

.badge-body {
    background: #fff;
}

.ticket-info {
    background: #fff;
}

.promo-input {
    background: #fff;
}

.card-header {
    background: linear-gradient(91deg, #2ba642 -0.01%, #123d21 99.99%);
    padding: 15px 20px;
    font-size: 18px;
    font-weight: 700;
    background-size: cover;
    height: auto;
    border: none;
    color: white;
    border-radius: 8px 8px 0px 0px;
    position: relative;
}

.card-header::after {
    content: "";
    position: absolute;
    top: 0;
    right: -100px;
    width: 100%;
    height: 100%;
    background-image: url(../img/footer-ab.svg);
    background-size: 60%;
    background-position: right;
    background-repeat: no-repeat;
}


.custom-select {
    padding-left: 12px;
}


.promocard .card-header {
    color: white;
    font-size: 17px;
    font-weight: 500;
    padding: 20px;
}

.summury-card {
    background: #fff;
    border-radius: 15px;
    padding: 15px 40px;
    /* position: fixed;
    bottom: 0px; */
    width: 100%;
    /* left: 0; */
    border-radius: 0px;
    z-index: 99;
}

.summury-button {
    display: flex;
    align-items: center;
    gap: 10px;
}


.ticket-info {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;
}

.prom-div {
    display: flex;
    justify-content: space-between;
    padding: 10px 20px;

}

.ticket-info-to {
    text-align: center;
    padding: 30px 20px;
    border: 1px solid #ebebeb;
}

.promo-input {
    padding: 10px 20px 30px 20px;
    width: 100%;
}

.promo-input input {
    margin-bottom: 20px;
    border: 1px solid #ebebeb;
    background: #f5f5f5;
    box-shadow: none;
}

.form-control {
    height: 45px;
    padding: 0px 20px;
    font-size: 14px;
    font-weight: 300;
}

.form-select {
    height: 50px;
    padding: 0px 20px;
}

.no-header-bg {
    background-image: none;
    padding: 0px;
}

.form-card {
    background: #ffffff;
    border-radius: 0px 0px 5px 5px;
    border: 1px solid #ebebeb;
    margin-bottom: 0px;
}

.iti__flag-container {
    height: 50px !important;
}



.form-card .form-control,
.form-card .form-select {
    padding: 12px;
    border-radius: 8px;
}

.card-header img {
    width: 78%;
    height: 100%;
    object-fit: contain;
    margin: auto;
    display: block;
}

form label {
    font-size: 14px;
    font-weight: 400;
}

form .form-select {
    font-size: 14px;
}

.required-field::after {
    content: "*";
    color: red;
    margin-left: 4px;
}

.sm-hide-logo {
    display: block !important;
}

.sm-show-logo {
    display: none !important;
}

.summury-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: none;
}

.iti {
    width: 100%;
}

.iti__flag {
    background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/img/flags.png");
}

.iti__search-input {
    padding: 10px !important;
}

.iti--allow-dropdown .iti__flag-container,
.iti--separate-dial-code .iti__flag-container {
    height: 45px !important;
    border-radius: 8px 0px 0px 8px !important;
    overflow: hidden;
}


.form-end-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
}


.selected-items-container {
    margin-top: 20px;
    border-top: 1px solid #dee2e6;
}

.selected-items-box {
    border-radius: 4px;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
}



.tag {
    display: inline-block;
    background: linear-gradient(91deg, #2ba642 -0.01%, #123d21 99.99%) !important;
    border: 1px solid #dee2e6;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 14px;
    color: white;
    margin-bottom: 15px;
}

.related-options {
    margin-top: 20px;
}


.remove-tag {
    display: none;
}


.selected-suboptions {
    border-top: 1px solid #dee2e6;
    padding-top: 15px;
    margin-top: 15px;
}

.selected-tags {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.tags-main-wrapper {
    padding: 10px;
    display: flex;
    flex-direction: row;
    align-content: center;
    gap: 5px;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    overflow: hidden;
    width: fit-content;
}

.prom-div h4 {
    font-size: 14px;
    font-weight: 600;
}

.prom-div {
    margin-top: 20px;
}


.check-search {
    height: 50px;
    width: 100%;
    margin-bottom: 10px;
}

.form-control:focus {
    border-color: #2e2e2e;
    box-shadow: none;
}

.checkbox-grid-2 {
    grid-template-columns: 1fr;
}

.solution-btn {
    width: fit-content;
    margin: 0px;
}

.error {
    color: rgb(227, 57, 53);
    font-size: 0.9em;
}




.modal-footer button {
    width: fit-content;
    margin-top: 0px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.premium-card .modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}



/* plus minus input */

.number-input-container {
    display: flex;
    align-items: center;
    border-radius: 4px;
    width: fit-content;
}

.number-input {
    width: 50px;
    text-align: center;
    border: none;
    padding: 5px;
    -moz-appearance: textfield;
    background: #eeeeee;
}

.number-input:focus {
    outline: none;
    border: none;
}

.number-input::-webkit-outer-spin-button,
.number-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.minus,
.plus {
    background: #f8f9fa;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    color: #fefefe;
    font-weight: bold;
}

.minus {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    background: #b2f000;
    color: black;
    /* border: 1px solid #c9c7c7; */
}

.plus {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background: #b2f000;
    color: black;
    /* border: 1px solid #c9c7c7; */
}

.minus:hover,
.plus:hover {
    background: #080808;
    color: #b2f000;
}

.minus:focus,
.plus:focus {
    border: none;
    outline: none;
}

.minus:disabled,
.plus:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.rate-count {
    display: flex;
    justify-content: space-between;
    align-items: self-start;
    gap: 10px;
}

.rate-count label {
    font-size: 13px;
}

.price-offer {
    color: #4CAF50;
    font-weight: 700;
    padding: 0px 5px;
    margin-left: 10px;
    width: fit-content;
    border-radius: 2px;
}

.aprvl-sub {
    color: #d42929;
    font-size: 11px;
    font-style: italic;
    font-weight: 700;
    margin-left: 5px;
}

.input-box {
    margin-bottom: 20px;
}

.input-box label {
    margin-bottom: 5px;
}

/* .selected-categories {
    margin-top: 20px;
    padding: 15px 0px;
} */

.main-selected-tags,
.sub-selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sub-selected-tags span {
    background: #fae4ff !important;
    border: 1px solid #5e3169;
    color: rgb(94 49 105);
    padding: 5px 12px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 300;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: left;
}

.remove-tag {
    display: none;
}


.checkbox-grid {
    display: grid;
    gap: 10px;
    height: auto;
}

.checkbox-grid-2 {
    grid-template-columns: 1fr;
}

.related-options {
    margin-top: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
}

.related-options h6 {
    color: #1F2383;
    font-weight: 600;
    margin-bottom: 10px;
}

.selection-counter {
    background: #f8f9fa;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    text-align: right;
    color: #1F2383;
    font-weight: bold;
    border: 1px solid #dee2e6;
    display: none;
}

.selection-counter.limit-reached {
    color: #dc3545;
}

.main-selections h6 {
    font-size: 14px;
    font-weight: 400;
}

.sub-selections h6 {
    font-size: 14px;
    font-weight: 400;
}

.ticket-btn-cntnt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}

.reg-footer {
    margin-bottom: 77px;
}

/* cookies */


.cookie-consent {
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 20px;
    z-index: 9999;
    transition: all 0.5s ease-in-out;
}

.cookie-consent.show {
    bottom: 0;
}

.cookie-content {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0 30px;
}

.cookie-content p {
    margin: 0;
    flex: 1;
    font-size: 14px;
    font-weight: 300;
}

.cookie-content p a {
    color: #fff !important;
}

.cookie-buttons {
    display: flex;
    gap: 10px;
}

.cookie-btn {
    font-size: 10px;
    padding: 8px 20px;
    font-size: 13px;
    border: none;
    cursor: pointer;
    font-weight: 300;
    transition: all 0.3s ease;
    background-color: rgb(227, 57, 53);
    color: white;
}

.cookie-settings a {
    color: #fff !important;
    text-decoration: underline;
    font-weight: 400;
    font-size: 13px;
    padding: 8px 20px;
    border: 1px solid rgb(227, 57, 53);
    ;
}



/* cookies */


/* registration dropdown */
.custom-dropdown {
    position: relative;
    width: 100%;
}

.selected-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    cursor: pointer;
    height: 43px;
    font-size: 16px;
    color: #333;
    height: 50px;
}

.dropdown-icon {
    width: 7px;
    height: 7px;
    border: solid #666;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.dropdown-icon.open {
    transform: rotate(-135deg);
}

.dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 300px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    display: none;
    overflow: hidden;
    margin-top: -1px;
}

.dropdown-list.open {
    display: block;
}

.search-box {
    width: 100%;
    padding: 0;
    border-bottom: 1px solid #eee;
}

.search-box input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #000;
    border-radius: 0;
    font-size: 14px;
    outline: none;
    box-shadow: none;
    height: 33px;
}

.search-box input:focus {
    outline: none;
}

.dropdown-items {
    max-height: 250px;
    overflow-y: auto;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: #9c9c9c transparent;
}

.dropdown-item {
    padding: 7px 15px;
    cursor: pointer;
    font-size: 15px;
    color: #333;
    border-bottom: 1px solid #f1f1f1;
}

.dropdown-item:hover,
.dropdown-item.highlighted {
    background-color: #7899ea;
    color: white;
}

.dropdown-item.selected {
    background-color: #efefef;
    color: rgb(37, 37, 37);
}

/* Special styling for the Select option */
.dropdown-item[data-value=""] {
    background-color: #7899ea;
    color: white;
    font-weight: normal;
}

.dropdown-item[data-value=""]:hover {
    background-color: #6389e7;
}

/* Custom scrollbar styling */
.dropdown-items::-webkit-scrollbar {
    width: 10px;
    height: 6px;
}

.dropdown-items::-webkit-scrollbar-track {
    background: transparent;
}

.dropdown-items::-webkit-scrollbar-thumb {
    background: #a5a5a5;
    border-radius: 3px;
}

.dropdown-items::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* Empty state styling */
.empty-results {
    padding: 20px;
    text-align: center;
    color: #888;
    display: none;
}

.empty-results.show {
    display: block;
}

/* registration dropdown */


.employee-form {
    position: relative;
    transition: all 0.3s ease;
}

.employee-form.active-form {
    border-left: 3px solid #1F2383;
}

.employee-form.active-form .card-header {
    background-color: #f8f9fa;
}

.ticket-info-to {
    padding: 40px 20px 20px 20px;
    min-height: 220px;
    transition: all 0.3s ease;
    background: #fff;
}

.ticket-info-to h4,
.ticket-info-to h6 {
    transition: color 0.3s ease;
}

/* Badge preview animations */
.ticket-info-to h4,
.ticket-info-to h6 {
    opacity: 1;
    transform: translateY(0);
    transition: all 0.3s ease;
}

.ticket-info-to h4:empty,
.ticket-info-to h6:empty {
    opacity: 0.7;
    transform: translateY(5px);
}


/* multple ticket */

.primary-header-bg {
    padding-top: 20px;
}

.row-no-margin .input-box {
    margin-bottom: 0px;
}



ul.accordion-list {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    list-style: none;
    background-color: transparent;

    li {
        position: relative;
        display: block;
        width: 100%;
        height: auto;
        background-color: #fff;
        padding: 20px;
        margin: 0 auto 15px auto;
        border: 1px solid #eee;
        border-radius: 5px;
        cursor: pointer;

        &.active {
            h3 {
                &:after {
                    transform: rotate(45deg);
                }
            }
        }

        h3 {
            font-weight: 700;
            position: relative;
            display: block;
            width: 100%;
            height: auto;
            padding: 0 0 0 0;
            margin: 0;
            font-size: 18px;
            letter-spacing: 0.01em;
            cursor: pointer;

            &:after {
                content: "\f278";
                font-family: "material-design-iconic-font";
                position: absolute;
                right: 0;
                top: 0;
                color: #000088;
                transition: all 0.3s ease-in-out;
                font-size: 18px;
            }
        }

        div.answer {
            position: relative;
            display: block;
            width: 100%;
            height: auto;
            margin: 0;
            padding: 20px;
            margin-top: 15px;
            cursor: pointer;

            p {
                position: relative;
                display: block;
                font-weight: 300;
                padding: 10px 0 0 0;
                cursor: pointer;
                line-height: 150%;
                margin: 0 0 15px 0;
                font-size: 14px;
            }
        }
    }
}

.from-ovrflw-scrll {
    height: 800px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.checkbox-grid-dynamic {
    grid-template-columns: auto !important;
    gap: 5px !important;
}

.checkbox-grid-dynamic label {
    display: flex !important;
    font-weight: 600;
}

.ticket-container {
    height: 800px;
    overflow-y: scroll;
    overflow-x: hidden;
}


.accordion-header {
    cursor: pointer;
    user-select: none;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    width: 100%;
    transition: background-color 0.3s ease;
}

.toggle-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: #1F2383;
    color: #ffffff;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.card-body {
    transition: all 0.3s ease-in-out;
}



.accordion-button {
    background: linear-gradient(91deg, #2ba943 -0.01%, #0f341e 99.99%) !important;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #fff !important;
    border: none !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: white !important;
}

.accordion-button::after {
    background-size: 15px !important;
    border: 1px solid #000000;
    display: flex;
    align-items: center;
    border-radius: 100%;
    justify-content: center;
    background-position: center;
    filter: invert(1);
}

.accordion-item {
    border-radius: 5px !important;
    overflow: hidden;
    border: none !important;
    margin-bottom: 15px;
}

.accordion-body {
    padding: 0px !important;
}

.no-card-bg {
    background: transparent !important;
    box-shadow: none !important;
}

.accordion-button:focus {
    box-shadow: none !important;
}

.badge_name {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    width: fit-content;
    margin: auto;
    margin-top: 0px;
    margin-bottom: 30px;
    padding: 5px 30px;
    border-radius: 0px 0px 10px 10px;
    background: linear-gradient(91deg, #2ba642 -0.01%, #123d21 99.99%) !important;
    color: white;
}

.accordion {
    background-color: #ebebeb;
    padding: 15px;
    border-radius: 20px;
    margin-bottom: 20px;
}

.sepration {
    height: 5px;
    background: #b5b5b6;
    margin-bottom: 20px;
}

.fixed-checkout-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(91deg, #001000 -0.01% -0.01%, #013c00 99.99%);
    color: white;
    padding: 15px;
    display: flex;
    justify-content: end;
    gap: 30px;
    align-items: center;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.total-section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.total-amount-row {
    display: flex;
    align-items: center;
    position: relative;
}




.total-label {
    font-size: 16px;
    margin-right: 10px;
    margin-top: 7px;
}

.total-amount {
    font-size: 24px;
    font-weight: bold;
}


.checkout-btn {
    background-color: #ffffff;
    color: #0B0442;
    border: none;
    border-radius: 5px;
    padding: 12px 30px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
}

.checkout-btn:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
}


/* Mobile responsiveness */
@media (max-width: 768px) {
    .fixed-checkout-bar {
        flex-direction: column;
        padding: 10px;
        position: sticky;
        margin: 0px;
    }


    .checkout-btn {
        width: 100%;
    }
}

.ticket-summary-link {
    margin-top: 3px;
    font-size: 12px;
}


/* Enhanced ticket summary popup styles */
.ticket-summary-popup {
    position: fixed;
    bottom: 80px;
    width: 370px;
    max-height: 500px;
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    display: none;
    overflow: hidden;
    transition: all 0.3s ease;
}

.ticket-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    background: linear-gradient(91deg, #2ba943 -0.01%, #0f341e 99.99%) !important;
    color: white;
}

.ticket-summary-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.close-summary {
    background: none;
    border: none;
    color: white;
    font-size: 40px;
    cursor: pointer;
    line-height: 1;
}


.ticket-item {
    border-bottom: 1px solid #eee;
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.ticket-name {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 5px;
    color: #1e1e1e;
}


.ticket-total-section {
    margin-top: 15px;
    padding-top: 15px;
}

.ticket-total-section .subtotal-row,
.ticket-total-section .promocode-row,
.ticket-total-section .total-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ticket-total-section .subtotal-row {
    font-size: 14px;
    color: #555;
}

.ticket-total-section .promocode-row {
    font-size: 14px;
    color: #008800;
}

.ticket-total-section .promocode-input {
    display: flex;
    align-items: center;
    margin: 10px 0 15px;
}

.ticket-total-section .promocode-input input {
    flex-grow: 1;
    padding: 8px 10px;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    font-size: 13px;
}

.ticket-total-section .promocode-input button {
    background: linear-gradient(91deg, #2ba943 -0.01%, #0f341e 99.99%) !important;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 0 4px 4px 0;
    font-size: 13px;
    cursor: pointer;
}

.ticket-total-section .total-row {
    font-weight: bold;
    font-size: 16px;
    color: #000;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}


/* Mobile responsiveness for ticket summary */
@media (max-width: 768px) {
    .fixed-checkout-bar {
        flex-direction: column;
        padding: 10px 15px;
        gap: 10px;
    }

    .total-section {
        width: 100%;
    }

    .checkout-btn {
        width: 100%;
    }

    .ticket-summary-popup {
        width: calc(100% - 40px);
        left: 20px;
        right: 20px;
    }
}



/* Add these styles */
.checkout-btn {
    position: relative;
    min-width: 120px;
    transition: all 0.3s ease;
}

.checkout-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.button-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.spinner-border-blue {
    color: #000066 !important;
}






/* select2 */
.iti--allow-dropdown input,
.iti--allow-dropdown input[type=text],
.iti--allow-dropdown input[type=tel],
.iti--separate-dial-code input,
.iti--separate-dial-code input[type=text],
.iti--separate-dial-code input[type=tel] {
    /* padding-left: 50px !important; */
    padding: 5px 10px;
}


/* Main select box style */
.select2-container--default .select2-selection--single {
    height: 50px !important;
    border: 1px solid #dee2e6 !important;
    /* <-- Border color */
    border-radius: 8px !important;
    /* <-- Border radius */
    padding: 10px;
    box-sizing: border-box;
}

/* Rendered text alignment */


.select2-container--default .select2-selection--single .select2-selection__placeholder {
    font-size: 14px;
    font-weight: 300;
}

/* Dropdown arrow button */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 50px !important;
    top: 0px !important;
}

/* Focus style for the search input inside dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    outline: none !important;
    border: 1px solid #000000 !important;
}

/* Optional: Remove default border outline when focused */
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #003366 !important;
    box-shadow: none !important;
}

.select2-container {
    width: auto !important;
}

.total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    font-weight: bold;
    font-size: 18px;
    margin-top: 10px;
}



@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    .iti__flag {
        background-image: url("https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/img/flags@2x.png");
    }
}



.registration-summary {
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}


.ticket-summary-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

@media (max-width: 1400px) {
    .content {
        padding: 30px 90px;
    }

    .inner-banner {
        padding: 30px 90px;
    }
}

@media (max-width: 1200px) {
    .content {
        padding: 20px;
    }

    .inner-banner {
        padding: 20px;
    }
}

@media (max-width: 1024px) {
    .footer4-cont p {
        color: black;
    }

    .footer4-cont ul li {
        color: black;
    }

    .footer4-cont ul li a {
        color: black;
    }
}


@media (max-width: 991px) {
    .inner-banner img {
        width: auto;
        margin-bottom: 10px;
    }

    .card {
        margin-bottom: 0px;
        margin-top: 5px;
    }

    .badge_name {
        margin-bottom: 20px;
    }


    .ticket-summary-item {
        flex-direction: column;
    }


    .registration-summary {
        margin-bottom: 0px;
        padding: 0px;
        background: transparent !important;
        box-shadow: none !important;
    }

    .inner-banner {
        height: auto;
        padding: 20px 16px;
        flex-direction: column;
    }

    .reg-content-mar {
        margin: 0px 20px;
    }

    .reg-content-mar {
        background: none !important;
    }

    .blending-top {
        display: none !important;
    }


    .reg-footer {
        margin-bottom: 0px;
        padding-bottom: 140px !important;
    }

    .registration-text br {
        display: none;
    }

    .footer-di-flex {
        flex-direction: column;
    }

    .footer {
        padding: 30px 30px 15px
    }

    .footer3-cont {
        display: none;
    }

    .footer4-cont {
        display: none;
    }

    .head-text-buttons {
        flex-direction: column;
        justify-content: center;
    }

    .registration-bar {
        padding: 3px 30px;
        justify-content: end;
    }

    /* .sm-hide-logo {
        display: none !important;
    } */

    .sm-show-logo {
        display: block !important;
    }

    .height-content {
        height: auto;
    }

    .summury-card {
        padding: 10px;
    }

    .summury-row {
        flex-direction: column;
        gap: 10px;
    }

    .summury-button {
        flex-direction: column-reverse;
    }

    .width-container {
        width: 100%;
    }

    .checkbox-grid {
        grid-template-columns: 1fr;
    }

    .form-end-btn {
        flex-direction: column;
    }

    .no-header-bg {
        padding-top: 30px;
    }

    #apply-error {
        text-align: center;
    }

    .total-row {
        flex-direction: column;
    }

    .content {
        padding: 10px;
    }
}



.promo-input-wrapper {
    position: relative;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.free-promo-btn {
    color: white;
    margin-top: 20px;
    transform: translateY(-50%);
    border-radius: 20px;
    padding: 5px 10px;
    font-size: 13px;
    border: 1px solid #D3D3D3;
    background: linear-gradient(111deg, #2F36A3 6.2%, #1E4073 43.72%, #00A4B7 100%);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
    font-size: 16px;
}


.form-check-input:checked {
    background-color: #5e3169;
    border-color: #5e3169;
}

.promo-input .form-control {
    padding-right: 130px;
}

.buy-btn.validating {
    opacity: 0.7;
    pointer-events: none;
}

.spinner-border-sm {
    width: 1rem;
    height: 1rem;
    margin-left: 8px;
    color: white;
}



.promo-input .form-control {
    transition: all 0.3s ease;
}



.footer .logo-width {
    width: 150px;
    margin: auto;
    display: block;
}


.social-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

.social-icons a {
    color: white;
    height: 40px;
    width: 40px;
    border: 1px solid #fff;
    display: grid;
    place-content: center;
    border-radius: 100%;
    transition: .5s;
}

.social-icons a:hover {
    background: #fff;
    transition: .5s;
    transform: translateY(-4px);
}

.social-icons a:hover svg {
    color: #000 !important;
    transition: .5s;
}

.social-icons a:hover i {
    color: #000 !important;
    transition: .5s;
}


.btn-main {
    outline: 0;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    background: #56ff0e;
    min-width: 200px;
    border: 0;
    border-radius: 0px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    box-sizing: border-box;
    padding: 10px 20px;
    color: #000000;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    overflow: hidden;
    cursor: pointer;
}

.btn-main:hover {
    opacity: .95;
}

.btn-main .animation {
    border-radius: 100%;
    animation: ripple 1.5s linear infinite;
}

.color-white {
    color: #000000 !important;
    background: #49b964 !important;
}

@keyframes ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(22, 147, 80, 0.263), 0 0 0 20px rgba(22, 147, 80, 0.263), 0 0 0 40px rgba(22, 147, 80, 0.263), 0 0 0 60px rgba(22, 147, 80, 0.263);
    }

    100% {
        box-shadow: 0 0 0 20px rgba(22, 147, 80, 0.263), 0 0 0 40px rgba(22, 147, 80, 0.263), 0 0 0 60px rgba(22, 147, 80, 0.263), 0 0 0 80px rgba(255, 255, 255, 0);
    }
}






/* reg-multi */


.attendee-header {
    background: linear-gradient(91deg, #2ba642 -0.01%, #123d21 99.99%);
    color: white;
    padding: 10px;
    border-radius: 5px 5px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list-group-item {
    padding: 5px 0px !important;
    border: none !important;
    background: transparent !important;
}


.category-checkbox,
.service-checkbox {
    accent-color: black !important;
}

.pop-serv-list-headed {
    padding: 8px;
}

.select-main-tag {
    display: inline-block;
    background: #5e3169;
    border: 1px solid #dee2e6;
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 14px;
    color: white;
    font-weight: 300;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: left;
}

.select-main-tag span {
    display: none;
}

.select-sub-tag {
    display: inline-block;
    background: #fae4ff !important;
    border: 1px solid #5e3169;
    color: rgb(94 49 105);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 14px;
    margin-bottom: 15px;
    font-weight: 300;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    text-align: left;
}

.select-sub-tag span {
    display: none;
}

.selected-data-container {
    margin-top: 20px;
}

.selected-data-container h6 {
    font-weight: 300;
    color: #495057;
}

.main-selections,
.sub-selections {
    margin-bottom: 5px;
}


/* Search box styling */
#searchInput {
    border-radius: 10px;
    padding-left: 15px;
}

.promo-code-input .buy-btn {
    width: fit-content;
    margin: 0px;
}

.summary-header {
    background: linear-gradient(91deg, #2ba642 -0.01%, #123d21 99.99%) !important;
    color: white;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.summary-header h4 {
    margin: 0px;
    font-weight: 600;
}


.attendee-header h4 {
    margin: 0px;
    font-weight: 400;
    font-size: 17px;
}

.ticket-select-box {
    background-color: #ffffff !important;
    border: 2px solid #64318b !important;
}

.ticket-select-bg .green {
    background: #e7ffed !important;
    border: 1px solid #22c75973 !important;
}

.ticket-select-box {

    display: flex;
    align-items: center;
    padding: 5px 10px;
    border-radius: 8px;
    position: relative;
    width: 100%;
}

.ticket-select-bg {
    background-color: #fff;
    border: 1px solid #ebebeb;
    padding: 15px;
    margin-bottom: -5px;
}

.ticket-select-bg h4 {
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 0px;
    /* margin-top: 20px; */
}

.ticket-select-bg h4 span {
    font-size: 12px;
    font-weight: 300;
    color: #07458c;
}

.ticket-am-vat {
    font-size: 12px;
    color: gray;
    font-weight: 400;
}

.select-ticket-amount-count {
    font-size: 17px;
    display: flex;
    align-items: self-start;
    flex-direction: column;
    gap: 0px;
    font-weight: 700;
    color: #0b820b;
    line-height: normal;
}

.select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.custom-select {
    width: 100%;
    padding-right: 30px;
    /* space for close button */
}

.ticket-select-box .close-btn {
    display: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #333;
    font-size: 18px;
    border-radius: 50%;
}


#redEditSelect {
    color: rgb(105 55 143);
    background: #ffffff23;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    padding-right: 40px;
    max-width: 100%;
    min-width: 200px;
    overflow: hidden;
    background-size: 16px 16px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url('data:image/svg+xml;utf8,<svg fill="%23000000" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat;
    background-position: right 0px center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.redEditSelect-bg-none {
    background: none !important;
}

#redEditSelect option {
    color: black !important;
    padding: 10px !important;
    font-weight: 300;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.form-content {
    transition: all 0.3s ease;
    overflow: hidden;
}

.form-content.collapse:not(.show) {
    display: none;
}

.form-content.collapsing {
    height: 0;
}

/* .attendee-form {
    border: none;
    border-radius: 0 0 8px 8px;
    background: #ffffff;
    padding: 0px 15px 15px 15px ;
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
} */

.checkout-right-aligned {
    display: flex;
    align-items: center;
    gap: 40px;
}


.min-height-70 {
    min-height: calc(70vh - 80px);
}


/* ticket page */


.ticket-summary-link {
    margin-top: 3px;
    font-size: 12px;
}

.ticket-summary-link a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline !important;
    cursor: pointer;
}

.ticket-summary-link a:hover {
    color: white;
}

/* Enhanced ticket summary popup styles */
.ticket-summary-popup {
    right: 0;
    /* Aligned to the right edge of the window */
    left: auto;
    width: 420px;
    max-height: 500px;

}



.ticket-summary-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 300;
}


.ticket-summary-content {
    padding: 15px;
    max-height: 400px;
    overflow-y: auto;
}



.ticket-details {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #555;
}


/* Required field marker */
.required-asterisk {
    color: #f00;
    margin-left: 2px;
}

/* Dropdown styling */
select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8.825L1.175 4 2.238 2.938 6 6.7 9.763 2.938 10.825 4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

/* Section title */
.section-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333;
}

/* Phone input styling */
.phone-input-group {
    display: flex;
    gap: 5px;
}

.country-code-container {
    flex: 0 0 auto;
    position: relative;
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px 10px;
    display: flex;
    align-items: center;
}

.country-code-container img {
    width: 20px;
    height: 15px;
    margin-right: 5px;
}

.phone-input {
    flex: 1;
}

/* Interests section */
.interests-section {
    margin-top: 25px;
    margin-bottom: 15px;
}

.interests-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.select-solutions-btn {
    background-color: #1a237e;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    font-size: 14px;
    cursor: pointer;
}

.category-section {
    margin-bottom: 20px;
}

.category-title {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px;
}

/* Terms and conditions */
.terms-section {
    font-size: 13px;
    line-height: 1.5;
    margin: 20px 0;
}

.terms-link {
    color: #1a237e;
    text-decoration: none;
}

/* Price and buttons */
.total-section {
    display: flex;
    justify-content: flex-start;
    align-items: self-start;
}

.total-price {
    font-weight: bold;
    font-size: 16px;
}


.action-buttons {
    display: flex;
    gap: 10px;
}

.btn-back {
    background-color: transparent;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 8px 15px;
    cursor: pointer;
}

.btn-submit {
    background-color: #1a237e;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 8px 15px;
    cursor: pointer;
}

.registration-step {
    text-align: center;
    margin-bottom: 30px;
}

.step-indicator {
    display: flex;
    justify-content: center;
}

.step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px;
    font-weight: bold;
}


.step-line {
    height: 2px;
    width: 100px;
    background-color: #e0e0e0;
    align-self: center;
}




.multi-step-form .step-content {
    display: none;
    /* Hide all steps by default */
}

.multi-step-form .step-content.active {
    display: block;
    /* Show the active step */
}

.step-line {
    flex-grow: 1;
    height: 2px;
    background-color: #e0e0e0;
    align-self: center;
    margin: 0 5px;
    transition: background-color 0.3s ease;
}

.step-line.active {
    background: linear-gradient(91deg, #1F2383 -0.01%, #0B0442 99.99%);
}



.btn-previous {
    background-color: #6c757d;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 25px;
}



.ticket-info {
    margin-top: 5px;
    font-size: 14px;
    color: #555;
}

.attendee-header-ticket-info {
    color: #fff;
    background: #ffffff23;
    border: 1px solid #ffffff3f;
    border-radius: 10px;
    padding: 10px 15px;
    font-size: 15px;
}

.ticket-select-box img {
    width: 25px;
    /* filter: invert(1); */
}


/* Form validation styles */
.form-control.is-invalid {
    border: 1px solid #dee2e6 !important;
    padding-right: calc(1.5em + 0.75rem);
    background-image: none !important;
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.invalid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #dc3545;
}

.form-control.is-invalid~.invalid-feedback {
    display: block;
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    box-shadow: none !important;
}

/* Success page styles */
.success-container {
    text-align: center;
    padding: 50px 20px;
    display: none;
}

.success-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 30px;
}

.success-icon svg {
    width: 100%;
    height: 100%;
}

.success-title {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #0B0442;
}

.success-message {
    font-size: 18px;
    color: #333;
    margin-bottom: 30px;
}

/* Country code dropdown */
.phone-group {
    display: flex;
}

.country-code {
    width: 120px;
    margin-right: 10px;
}

.phone-number {
    flex-grow: 1;
}


/* Badge Styles */
.attendee-badge {
    width: 300px;
    height: 180px;
    border: 1px solid #ddd;
    border-radius: 10px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-top: 20px;
    position: relative;
    overflow: hidden;
}

.badge-header {
    background: linear-gradient(91deg, #1F2383 -0.01%, #0B0442 99.99%);
    color: white;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 8px 15px;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
}

.badge-content {
    margin-top: 40px;
    text-align: center;
}

.badge-name {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
    min-height: 30px;
    color: #1F2383;
}

.badge-company {
    font-size: 18px;
    margin-bottom: 5px;
    min-height: 25px;
    color: #555;
}

.badge-title {
    font-size: 14px;
    color: #777;
    font-style: italic;
    min-height: 20px;
}

.badge-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #f0f0f0;
    padding: 5px;
    text-align: center;
    font-size: 12px;
    color: #666;
}

.gitex-logo {
    width: 100px;
    margin: 0 auto;
    display: block;
    margin-top: 5px;
}

/* Page Loader Styles */
#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1F2383 0%, #0B0442 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.loader-content {
    text-align: center;
}

.loader-logo {
    width: 180px;
    margin: 20px auto;
    animation: pulse 2s infinite;
}

.spinner {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border: 5px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: spin 1s ease-in-out infinite;
}

#page-loader p {
    color: white;
    font-size: 18px;
    margin-top: 20px;
    font-weight: 300;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes pulse {
    0% {
        opacity: 0.6;
        transform: scale(0.98);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0.6;
        transform: scale(0.98);
    }
}

.page-loaded {
    opacity: 0;
    visibility: hidden;
}


/* CSS to replace the inline styles */

/* Card styling */
.card {
    overflow: hidden !important;
}

/* Ticket info styling */
.ticket-info strong {
    font-weight: bold;
}

.ticket-info span {
    font-weight: bold;
}

/* Promo input styling */
.promo-input input {
    font-size: 15px;
}

.promo-input .buy-btn {
    border-radius: 10px;
    background: linear-gradient(91deg, #1F2383 -0.01%, #0B0442 99.99%) !important;
    margin: 0px;
}

/* Badge styling */
.ticket-info-to #badge-fullname {
    font-weight: bold;
    font-size: 16px;
    color: #8f959e;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.ticket-info-to #badge-jobtitle,
.ticket-info-to #badge-companyname {
    font-weight: 400;
    color: #a4aab3;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.ticket-info-to #badge-country {
    font-weight: 400;
    color: #000000;
    text-transform: uppercase;
}

/* Badge container styling */


.ticket-info-to .badge-fullname {
    font-weight: 400;
    font-size: 17px;
    color: #909090;
    text-transform: uppercase;
    margin-bottom: 35px;
}

.ticket-info-to .badge-jobtitle,
.ticket-info-to .badge-companyname {
    font-weight: 400;
    color: #909090;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-size: 17px;
}

.ticket-info-to .badge-country {
    font-weight: 400;
    color: #909090;
    text-transform: uppercase;
    font-size: 17px;
    margin-bottom: 20px;
}

.ticket-info-ft {
    box-shadow: 0px -5px 40px #e8e8e8ba;
    padding: 10px;
    text-align: center;
    background: #fff;
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    background: #1b1e6b;
}

.ticket-info-ft::after {
    background-image: url(../img/footer-ab.svg);
    background-position: right bottom;
    background-size: contain;
    background-size: 40%;
    background-repeat: no-repeat;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 100%;
    content: '';
}

.badge-bg-1 {
    background: linear-gradient(91deg, #022a17 -0.01%, #01551D 99.99%) !important;
}

.badge-bg-2 {
    background: linear-gradient(91deg, #C02926 -0.01%, #470706 99.99%) !important;
}

.badge-bg-3 {
    background: linear-gradient(91deg, #0081C5 -0.01%, #050FAE 99.99%) !important;
}

.badge-bg-4 {
    background: linear-gradient(91deg, #00B95E -0.01%, #A8EA58 99.99%) !important;
}

.badge-bg-5 {
    background: linear-gradient(91deg, #F27809 -0.01%, #C32E23 99.99%) !important;
}

.badge-bg-6 {
    background: linear-gradient(91deg, #5D2B7E -0.01%, #431B5A 99.99%) !important;
}


.lg-badge-hide {
    display: none !important;
}

.sm-badge-hide {
    display: block !important;
}


.ticket-info-ft h6 {
    font-weight: 300;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.ticket-info-ft h4 {
    font-size: 24px;
    font-weight: 700;
    color: #fff3f3;
    text-transform: uppercase;
    margin-bottom: 0px;
    letter-spacing: 3.84px;
}



/* Updated Select2 styling to match reference image */

/* Container styling */
/* .select2-container {
    width: 100% !important;
    position: relative;
} */

/* Main selection box styling */
.select2-container--default .select2-selection--single {
    height: 50px;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.select2-container--default .select2-selection--single:hover {
    border-color: #1F2383;
}

.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #1F2383;
    box-shadow: 0 0 0 2px rgba(31, 35, 131, 0.2);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
    color: #333;
    font-size: 14px;
    line-height: 25px !important;
    font-weight: 300;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 48px;
    right: 8px;
    top: 1px;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    font-size: 22px;
    font-weight: 700;
    color: #1F2383;
    margin-right: 10px;
    line-height: 1;
    padding: 0 5px;
    border-radius: 50%;
    transition: all 0.2s ease;
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
}


/* Dropdown styling */
.select2-dropdown {
    border: 1px solid #ddd;
    border-radius: 0 0 8px 8px;
}

/* Search field styling */
.select2-search--dropdown .select2-search__field {
    padding: 8px 12px;
    height: 38px;
    border: 1px solid #1F2383;
    border-radius: 6px;
    margin: 5px 0px;
    width: calc(100% - 12px);
    font-size: 14px;
    outline: none;
}

/* Focus effect for search box */


/* Style the search container */
.select2-search--dropdown {
    padding: 4px;
    background-color: #f9f9f9;
    border-bottom: 1px solid #eee;
}

/* Results options styling */
.select2-results__option {
    padding: 10px 15px;
    font-size: 16px;
}

/* Currently highlighted/focused option - BLUE BACKGROUND */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #4b7ff0 !important;
    /* Match your brand blue */
    color: white !important;
}

/* Already selected option - GRAY BACKGROUND */
.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #4b7ff0 !important;
    /* Also make selected items blue */
    color: white !important;
}

/* Hover effect for options */
.select2-results__option:hover {
    background-color: #4b7ff0 !important;
    color: white !important;
}

/* Dropdown scrollbar styling */
.select2-results__options::-webkit-scrollbar {
    width: 8px;
}

.select2-results__options::-webkit-scrollbar-thumb {
    background: #1F2383;
    border-radius: 4px;
}

.select2-results__options::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.select2-results__options::-webkit-scrollbar-thumb:hover {
    background: #0B0442;
}

/* "Select..." placeholder styling */
.select2-results__option[aria-disabled=true] {
    color: #999;
}

/* Fix for the placeholder text color */
.select2-container--default .select2-selection--single .select2-selection__rendered[title="Please Select"] {
    color: #999;
}

.list-group-item:hover {
    background-color: #f8f9fa;
}

/* Styling for the tags container */
.tags-container,
.main-selected-tags,
.sub-selected-tags {
    display: flex;
    flex-wrap: wrap;
    margin-right: auto;
    width: 100%;
    padding: 5px;
}

/* Styling for the tags */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.5em 0.7em;
    font-size: 0.85em;
}

/* Styling for the close button on tags */
.tag-close,
.remove-tag {
    font-size: 16px;
    line-height: 14px;
    cursor: pointer;
    transition: opacity 0.2s;
    height: 20px;
    width: 20px;
    background-color: white;
    border-radius: 100%;
    margin: auto;
    color: black;
    display: flex !important;
    justify-content: center;
    align-items: center;
    margin-left: 3px;
    border: 1px solid #5e3169;

}

.tag-close:hover,
.remove-tag:hover {
    opacity: 1;
}

/* Styling for the services list */
.subitems-list {
    max-height: 400px;
    overflow-y: auto;
}

/* Highlight effect when hovering over checkboxes */
.list-group-item label {
    display: block;
    width: 100%;
    cursor: pointer;
}


.list-group-item label span {
    color: #047074;
    font-weight: 600;
}

.list-group-item.fw-bold {
    background: #ececec !important;
    padding: 5px 10px !important;
    color: #1f1f1f;
}

.reg-form-width {
    padding: 30px 150px;
}


/* Initially hide the selected-data-container */
.selected-data-container {
    display: none;
}


/* Promo Code Section Styling */
.promo-code-section {
    margin: 15px 0;
    padding: 15px;
    border: 1px dashed #26903b;
    border-radius: 6px;
    background-color: #f0fff0;
}

.badge-right-promo {
    margin: 0px;
    border-radius: 0px;
    border-top: none;
}

.ticket-item-price span {
    font-size: 13px;
    font-weight: 300;
    color: #535353;
}

.promo-code-header h5 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #27953d;
}

.promo-code-input {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.promo-code-input input {
    flex: 1;
}

.applied-promo {
    margin-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #ffffff;
    border-radius: 4px;
}

.applied-promo-details {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.promo-label {
    font-weight: 300;
    margin-right: 5px;
    color: #1c1c1c;
}

.promo-value {
    color: #198754;
}

.original-price {
    text-decoration: line-through;
    color: #6c757d;
    margin-right: 10px;
    font-size: 0.9em;
}

#promoCodeMessage {
    font-size: 14px;
    min-height: 20px;
}

.text-success {
    color: #198754 !important;
}

.text-danger {
    color: #dc3545 !important;
}

.promo-code-closebutton {
    cursor: pointer;
    color: #05b65b;
    font-size: 16px;
    background: #ffffff;
    border-radius: 100%;
    height: 20px;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: normal;
    font-weight: 600;
}


/* Highlighted discounted tickets */
.discounted-ticket {
    background-color: #f0fff0 !important;
    /* Light green background */
    border-left: 3px solid #28a745 !important;
    /* Green left border */
    transition: background-color 0.3s ease;
    padding: 5px 10px;
}



.discount-badge {
    display: inline-block;
    background-color: #28a745;
    color: white;
    border-radius: 4px;
    padding: 0px 5px;
    font-size: 0.75em;
    margin-left: 5px;
}

.ticket-form-collaps {
    display: flex;
    align-items: center;
    gap: 10px;
}





.toggle-btn {
    background: #fff;
    border: none;
    color: rgb(53, 150, 11);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.toggle-btn:focus {
    border: none !important;
    outline: none !important;
}

.toggle-btn svg {
    transition: transform 0.3s ease-in-out;
}

.form-content {
    max-height: 2000px;
    opacity: 1;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}





/* workshop  */

.select-workshop {
    position: relative;
    z-index: 1;
}

.select-workshop button {
    width: fit-content;
    font-weight: 300;
    font-size: 13px;
    background: linear-gradient(91deg, #540203 -0.01%, #ab0202 99.99%) !important;
    border-radius: 35px;
    /* margin: 0px; */
}

.form-workshop .checkbox-grid {
    display: initial;
}

.form-workshop {
    margin: 20px 0px 0px 0px;
}

.form-workshop .checkbox-grid label {
    font-weight: 300;
    margin-bottom: 10px;
    margin-top: 0px;
    color: rgb(49, 49, 49);
}

.form-workshop h5 {
    font-size: 18px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.workshop-italic {
    font-style: italic;
    font-weight: 800;
    margin: 0px 5px;
}

.registration-container .step-circle.active {
    background: linear-gradient(91deg, #008f46 -0.01%, #00ab56 99.99%) !important;
    color: white;
    border: none;
    transform: scale(1.18);
    font-size: 16px;
    cursor: pointer;
}

.registration-container .step-circle.active::after {
    content: '';
}

.registration-container .step-line {
    flex-grow: 1;
    max-width: 70px;
    height: 3px;
    background-color: #dee2e6;
    transition: background-color 0.4s ease, transform 0.3s ease;
    border-radius: 2px;
    flex-shrink: 1;
}


.registration-container .step-line.active {
    background: linear-gradient(91deg, #2ba642 -0.01%, #123d21 99.99%) !important;
}

.pink-btn {
    background: linear-gradient(91deg, #9c1414 -0.01%, #390202 99.99%) !important;
    width: fit-content;
    border: none !important;
    transition: .5s;
}


.violet-btn {
    background: linear-gradient(91deg, #63316f -0.01%, #421d4e 99.99%) !important;
}

.action-buttons button {
    width: fit-content;
}

/* Registration Success Page */
#registration-success-page {
    display: none;
    text-align: center;
    padding: 40px 20px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    margin: 40px auto;
    max-width: 650px;
    border-top: 5px solid #28a745;
}

/* Optional icon area */
#success-icon-container {
    margin-bottom: 25px;
}

/* Heading */
#success-title-heading {
    font-size: 30px;
    font-weight: 700;
    color: #0B0442;
    margin-bottom: 15px;
}

/* Primary success message */
#success-primary-message {
    font-size: 18px;
    color: #333333;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* Secondary message */
#success-secondary-message {
    font-size: 16px;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Return to Homepage Button */
#backToMainPageBtn {
    padding: 12px 30px;
    font-size: 17px;
    font-weight: 600;
    background: linear-gradient(91deg, #2ba642 -0.01%, #123d21 99.99%) !important;
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: background 0.3s ease;
}

#backToMainPageBtn:hover {
    background: linear-gradient(91deg, #2ba642 -0.01%, #123d21 99.99%) !important;
}

.form-check {
    padding-left: 0px;
}

.registration-container .step-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 13px 5px;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background-color: #ffffff;
    border-radius: 8px 8px 0 0;
    scrollbar-width: thin;
    position: relative;
}


.registration-container .step-indicator::-webkit-scrollbar {
    height: 6px;
    /* Slightly thicker for easier interaction */
}

.registration-container .step-indicator::-webkit-scrollbar-track {
    background: #e9ecef;
    /* Lighter track */
    border-radius: 10px;
}

.registration-container .step-indicator::-webkit-scrollbar-thumb {
    background-color: #0B0442;
    border-radius: 10px;
    border: 1px solid #e9ecef;
    /* Optional: gives a slight border to the thumb */
}


.registration-container .step-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background-color: #ffffff;
    color: #adb5bd;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 15px;
    margin: 0 8px;
    border: 2px solid #dee2e6;
    transition: all 0.3s ease-in-out;
    position: relative;
    flex-shrink: 0;
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); */
    cursor: pointer;
}



.registration-step {
    text-align: center;
    margin-bottom: 30px;
}

.registration-container .step-circle:not(.active):not(.completed):hover {
    border-color: #5a6268;
    /* Darker border on hover */
    color: #495057;
    transform: translateY(-2px) scale(1.05);
    /* Slight lift and scale */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Enhanced shadow on hover */
}



.registration-container .step-circle.completed {
    background-color: #198754;
    font-size: 0 !important;
    transform: scale(1.05);
}

.registration-container .step-circle.completed::after {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 16px;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
}

.registration-container {
    border: none;
    border-radius: 8px;
    background: #ffffff;
    padding: 0px 15px 15px 15px;
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
}

.iagree .form-check {
    padding-left: 25px;
}

#registration-success-page {
    /* Your existing styles: */
    text-align: center;
    padding: 40px 20px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    margin: 40px auto;
    max-width: 650px;
    border-top: 5px solid #28a745;

    display: none;
    /* Initially hidden, JS will set to 'block' */
    opacity: 0;
    transform: translateY(30px) scale(0.97);
    /* Start slightly down and smaller */
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#registration-success-page.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

#success-icon-container .animated-tick {
    font-size: 70px;
    /* Size of the tick */
    color: #28a745;
    /* Green color */
    opacity: 0;
    /* Start transparent */
    transform: scale(0.4) rotate(-45deg);
    /* Start small and rotated */
    /* Animation will apply after the container is visible */
    animation: tickAnimation 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s forwards;
    /* 0.4s delay to let the container animate in first */
}

@keyframes tickAnimation {
    0% {
        opacity: 0;
        transform: scale(0.4) rotate(-45deg);
    }

    50% {
        /* Bounce effect */
        opacity: 1;
        transform: scale(1.15) rotate(10deg);
    }

    70% {
        transform: scale(0.9) rotate(-5deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Staggered animation for text content and button */
#registration-success-page.visible #success-title-heading,
#registration-success-page.visible #success-primary-message,
#registration-success-page.visible #success-secondary-message,
#registration-success-page.visible #backToMainPageBtn {
    opacity: 0;
    /* Start hidden */
    transform: translateY(15px);
    /* Start slightly down */
    animation: fadeInContent 0.5s ease-out forwards;
}

/* Apply delays for staggered effect after container is visible */
#registration-success-page.visible #success-title-heading {
    animation-delay: 0.5s;
    /* Starts after tick animation begins */
}

#registration-success-page.visible #success-primary-message {
    animation-delay: 0.6s;
}

#registration-success-page.visible #success-secondary-message {
    animation-delay: 0.7s;
}

#registration-success-page.visible #backToMainPageBtn {
    animation-delay: 0.8s;
}

@keyframes fadeInContent {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ensure the icon container itself doesn't add extra margins if it was styled before */
#success-icon-container {
    margin-bottom: 25px;
    /* Or as desired */
}



.categories-list,
.subitems-list {
    max-height: 300px;
    overflow-y: auto;
}

.badge-tag {
    background: #2c3e50;
    color: #fff;
    padding: .5rem 1rem;
}

.subitems-header {
    background-color: #f1f1f1;
    font-weight: bold;
}




.page-section-title {
    font-size: 40px;
    margin-bottom: 30px;
    text-align: center;
    font-weight: 600;
    color: #1e1e1e;
}

.user-inner {
    height: 300px;
    width: 300px;
    border-radius: 20px;
    overflow: hidden;
}

.user-inner img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.modal-profile-body {
    display: flex;
    align-items: center;
    padding: 30px;
}

.profile-info {
    padding-left: 30px;
}


.contact-info svg {
    height: 15px;
    width: 15px;
    border-radius: 100%;
    background: transparent;
    border: 1px solid #008800;
    color: #008800;
    padding: 5px;
}


/* forms social media */
.social-register-section {
    text-align: center;
    margin: 20px 0px;
}

.social-register-section h2 {
    font-size: 18px;
    font-weight: 400;
    color: #0f0f1e;
    width: 100%;
    text-align: center;
    margin: auto;
}

.social-register-section .subtext {
    font-size: 14px;
    color: #b1b1b1;
    margin: 10px 0 10px;
}

.social-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.social-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 6px;
    color: #3b5998;
    font-weight: 300;
    font-size: 14px;
    padding: 8px 11px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.social-btn i {
    font-size: 18px;
    color: #3b5998;
    transition: all 0.3s ease;
}

.social-btn:hover i {
    color: #ffffff;
    transition: all 0.3s ease;
}

/* Button Colors */
.social-btn.linkedin,
.social-btn.facebook,
.social-btn.twitter {

    transition: .5s ease;
    padding: 6px 11px;
    font-size: 12px;
}

/* .social-btn.linkedin:hover,
.social-btn.facebook:hover,
.social-btn.twitter:hover {
    background-color: #3b5998;
    border: 1px solid #3b5998;
    color: white;
    transition: .5s ease;
} */


.social-btn:hover {
    opacity: 0.9;

}

.reg-form-social-btn .social-btn.linkedin {
    background-color: #0072B1;
    color: #ffffff;
}

.reg-form-social-btn .social-btn {
    border: none;
}

.reg-form-social-btn .social-btn i {
    color: #ffffff;
}

.reg-form-social-btn .social-btn.facebook {
    background-color: #4267B2;
    color: #ffffff;
}

.reg-form-social-btn .social-btn.twitter {
    background-color: #1DA1F2;
    color: #ffffff;
}



/* forms social media */



/* matchmaking */

.match-profile-card {
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    padding: 20px;
    text-align: center;
    position: relative;
    margin-bottom: 25px;
}

.match-image-wrapper {
    height: 130px;
    width: 130px;
    border-radius: 100%;
    margin: auto;
    overflow: hidden;
    box-shadow: 0 4px 54px 0 rgb(39 150 61 / 26%);
    border: 2px solid #7cb342;
}

.match-profile-card h5 {
    font-size: 18px;
    font-weight: 500;
    margin: 0px;
    margin-top: 20px;
}

.match-profile-card h6 {
    font-size: 14px;
    font-weight: 300;
    color: gray;
    margin: 0px;
    margin-top: 10px;
}

.match-image-wrapper img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.progress-container {
    position: relative;
    width: 100%;
    height: 8px;
    background-color: #f2f2f2;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.022);
    margin-bottom: 15px;
}

.progress-container .progress-bar {
    height: 100%;
    background: linear-gradient(45deg,
            #00d084 25%,
            #00e891 25%,
            #00e891 50%,
            #00d084 50%,
            #00d084 75%,
            #00e891 75%,
            #00e891);
    background-size: 20px 20px;
    border-radius: 15px;
    position: relative;
    transition: width 2s ease-in-out;
    animation: moveStripes 1s linear infinite;
    cursor: pointer;
}

@keyframes moveStripes {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 20px 0;
    }
}

.progress-container .progress-bar:hover {
    filter: brightness(1.1);
    animation-duration: 0.5s;
}




.progress-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 12px;
    color: #494949;
    font-weight: 100;
}

.matchmaking-buttons {
    margin-top: 10px;
}


.matchmaking-buttons button {
    height: 30px;
    width: 100%;
    border-radius: 20px;
    color: #202020;
    border: 1px solid #000;
    font-size: 12px;
    background: transparent;
}

.matchmaking-buttons button span {
    margin-right: 5px;
    font-size: 15px;
}

.matchmaking-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.purple-btn {
    background: linear-gradient(90deg, #421d4e 0%, #29122e 100%) !important;
    color: white !important;
}

.checkmark {
    width: 56px;
    height: 56px;
    stroke: #28a745;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    animation: scale .3s ease-in-out forwards;
}

.checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.checkmark-check {
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: stroke 0.4s 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

@keyframes scale {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.profile-content {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
}

.profile-content h6 {
    margin: 0px;
    color: gray;
    font-weight: 300;
}

.profile-info h5 {
    font-size: 25px;
    font-weight: 600;
    margin-bottom: 20px;
}

.filters-section .search-box {
    width: 100%;
    background: #fcfff0;
    padding-left: 0px;
    border: 1px solid #c4fa86;
}

.filters-section .search-box #searchInput {
    background: transparent;
    border: none;
    font-size: 14px;
}

.filters-section .filter-dropdown .form-select {
    border: 1px solid #c4fa86;
    background: #fcfff0;
    font-size: 14px;
}

.filters-section .filter-dropdown .form-select:focus {
    border: 1px solid #c4fa86;
    background: #fcfff0;
}

.filter-tabs li {
    background: #fdf4ff;
    border: 1px solid #5c2d68;
    color: #5b2c67;
    border-radius: 60px;
    outline: none;
    overflow: hidden;
}

.filter-tabs li button {
    color: #5b2c67;
    transition: .5s ease;
    font-size: 12px;
    padding: 5px 10px;
}

.filter-tabs {
    padding: 0px;
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.filter-tabs li .active {
    background: #481854;
    border: none;
    border-radius: 60px;
    outline: none;
    color: white;
    overflow: hidden;
}

.filter-tabs li:hover {
    background: #481854;
    transition: .5s ease;
}

.filter-tabs li:hover button {
    color: #fff !important;
    transition: .5s ease;
}

.filter-dropdown .form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23000000' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 12px;
    padding-right: 2.5rem;

}

.filter-dropdown .form-select:focus {
    box-shadow: none;
    outline: none;
}

/* Adjust dropdown arrow color for better visibility */
.filters-section .filter-dropdown .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23466c13' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    padding-right: 2.5rem;
}

/* matchmaking */

/* View Ticket */


.connect-btn.pending {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #000 !important;
    cursor: default;
}

.connect-btn.pending:hover {
    background-color: #ffca2c !important;
    border-color: #ffc720 !important;
}

.connect-btn i.fa-clock {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}


.ready-frnd {
    background: #00ab56 !important;
    border: none !important;
}


.ready-frnd {
    background: #00ab56 !important;
    border: none !important;
    color: white !important;
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

.btn-danger:hover {
    background-color: #bb2d3b;
    border-color: #b02a37;
}

.modal .modal-title-head {
    color: #333;
    font-size: 1.25rem;
    font-weight: 500;
}

.chat-icon {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
}

.chat-icon svg {
    border-radius: 100%;
    background-color: #fff;
    color: #3c3c3c;
    display: grid;
    place-content: center;
    padding: 10px;
    font-size: 25px;
    box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.15);
}

.modal-backdrop {
    z-index: 1040 !important;
    /* Ensure it's above most other content */
}

.modal {
    z-index: 1050 !important;
}

.vat-info {
    font-size: 12px;
    /* margin-left: 10px; */
    color: #bbbbbb;
}



/* chat */
.chat-container {
    flex: 1;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: auto;
    background: #ffffff;
    border: 1px solid #63ad1b;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.chat-header {
    background: #fff;
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.chat-header img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ddd;
}

.chat-header h3 {
    font-size: 16px;
    font-weight: 600;
}

.messages-container {
    flex: 1;
    /* overflow-y: auto; */
    padding: 20px;
    min-height: 500px;
    max-height: 500px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.messages-container::-webkit-scrollbar {
    width: 8px;
    height: 5px;
}

/* Track (the background) */
.messages-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

/* Thumb (the draggable handle) */
.messages-container::-webkit-scrollbar-thumb {
    background-color: #e6e6e6;
    border-radius: 10px;
    border: 2px solid #f1f1f1;
}


.message {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.message.sent {
    flex-direction: row-reverse;
}

.message.sent .message-content {
    background: #ffffff;
    margin-left: 60px;
    box-shadow: 0 1px 22px rgb(0 0 0 / 15%);
}

.message.received .message-content {
    background: white;
    margin-right: 60px;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #540d6d;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.message-content {
    border-radius: 15px;
    padding: 12px 16px;
    max-width: 70%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    position: relative;
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.sender-name {
    font-weight: 600;
    font-size: 14px;
    color: #63ad1b;
}

.timestamp {
    font-size: 12px;
    color: #666;
}

.message-text {
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    margin-bottom: 5px;
}

.message-footer {
    font-size: 12px;
    color: #747474;
    text-align: right;
    margin-top: 5px;
    display: flex;
    gap: 5px;
    font-weight: 200;
}

.company-message {
    background: #f3ffe9 !important;
}

.company-message .sender-name {
    color: #63ad1b;
}


.emoji {
    font-size: 16px;
}

.input-container {
    padding: 15px 20px;
    background: white;
    border-top: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    bottom: 0px;
    left: 0px;
}

.message-input {
    flex: 1;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px 15px;
    font-size: 14px;
    outline: none;
    resize: none;
}

.send-btn {
    background: #4a90e2;
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}

.status-ticks {
    display: flex;
    align-items: center;
    gap: 2px;
}

.tick-single {
    color: #999;
}

.tick-double {
    color: #999;
}

.tick-read {
    color: #6bb320;
}


.btn-link {
    color: #333;
    text-decoration: none;
    background: #ececec;
    border-radius: 2px;
    padding: 0px 10px;
}

.btn-link:hover {
    color: #333;
    text-decoration: none;
    background: #e1e1e1;
    border-radius: 2px;
    padding: 0px 10px;
    border: 1px solid #cacaca;
}



.dropdown-menu {
    min-width: 200px;
    padding: 8px;
    border: none;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.dropdown-item {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
    color: #49b964;
}


.dropdown-divider {
    margin: 0;
    border-color: #eee;
}

.ticket-view-dropdown .dropdown-toggle::after {
    display: none;
}

.collaps-arrow svg {
    height: 15px;
    width: 15px;
    padding: 5px;
    border-radius: 100%;
    color: white;
}


.collaps-arrow {
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    background: green;
}

.collaps-arrow svg {
    transition: transform 0.3s ease;
}

.collaps-arrow[aria-expanded="true"] {
    background-color: #49b964;
}

.collaps-arrow[aria-expanded="true"] svg {
    transform: rotate(180deg);
    color: white;
}

.collaps-ticket-nav .nav-tabs .nav-link.active {
    border: none;
    border-bottom: 3px solid green;
}

.collaps-ticket-nav .nav-tabs .nav-link {
    border: none;
    color: #000;
    padding: 7px 0px;
    margin-right: 30px;
}



.collaps-ticket-nav .nav-tabs .nav-link:focus {
    box-shadow: none;
    outline: none;
}

.collaps-ticket-nav h5 {
    font-size: 15px;
    font-weight: 500;
    margin-top: 20px;
    background: green;
    color: white;
    padding: 5px 10px;
    margin-bottom: 15px;
    width: fit-content;
}

.collaps-ticket-nav {
    margin-top: 20px;
    padding-top: 8px;
    border-top: 1px solid #ebebeb;
}

.table-row small {
    font-size: 10px;
    color: gray;
}


.no-cancel {
    color: red;
    font-weight: 400;
    margin-top: 10px;
    font-size: 12px;
}

.ticket-table {
    width: 100%;
    margin: 10px 0px;
    border: 1px solid #ebebeb;
}

.ticket-table thead {
    background: #f4fcea;
}

.ticket-table thead th {
    padding: 10px;
}

.ticket-table tbody tr td {
    padding: 10px;
    font-size: 14px;
    color: #000;
    font-weight: 300;
    border-bottom: 1px solid #ebebeb;
}


.ticketdropdown .btn-link {
    color: #666;
    text-decoration: none;
    padding: 0;
    border: none;
}

.ticketdropdown .btn-link:hover {
    color: #49b964;
}

.ticketdropdown .dropdown-toggle::after {
    display: none;
}

.ticketdropdown .dropdown-menu {
    min-width: 200px;
    padding: 8px;
    border: none;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.ticketdropdown .dropdown-item {
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    display: flex;
    align-items: center;
}

.ticketdropdown .dropdown-item:hover {
    background-color: #f8f9fa;
    color: #49b964;
}

.ticketdropdown .dropdown-item.text-danger:hover {
    background-color: #fff5f5;
    color: #dc3545;
}

.ticketdropdown .dropdown-divider {
    margin: 8px 0;
    border-color: #eee;
}

.ticket-3dot-btn:focus {
    border: none;
    outline: none;
}

.ticket-3dot-btn.active {
    border: none;
    outline: none;
}

@media (max-width: 768px) {
    .chat-container {
        max-width: 100%;
    }

    .message-content {
        max-width: 85%;
    }
}

#custom-toast {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    background-color: #16d27a;
    color: #fff;
    padding: 12px 20px;
    border-radius: 5px;
    z-index: 9999;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* chat */



/* view ticket */

.min-height-77 {
    min-height: 50px;
}

.table-row h6 {
    font-size: 13px;
    color: gray;
}

/* .min-height-70{
    min-height: 65vh;
} */

.table-tab {
    overflow: scroll;
    width: auto;

}






/* visitor portal */

.visitor_menu {
    display: flex;
    align-items: center;
    gap: 15px;
    border: none;
}

.visitor_menu a {
    color: #2d2d2d;
    font-weight: 500;
    font-size: 17px;
    text-decoration: none;
    padding: 5px 12px;
    border: 1px solid #0f9330 !important;
    border-radius: 0px !important;
    background: #defed4;
}

.visitor_menu a:hover {
    background: #ffffff;
    color: #008800;
    transition: all 0.3s ease-in-out;
}


.visitor-header {
    display: flex;
    align-self: center;
    justify-content: space-between;
    padding: 10px 0px;
    margin-bottom: 20px;

}

.visitor-header .nav-link.active {
    background: #008800;
    color: white;
}

.registration_data {
    border-radius: 8px;
    background-color: #fff;
    min-width: 100%;
}

.registration_data_header {
    background-image: url(../img/banner.webp);
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    padding: 20px 0px;
}

.registration_data_header h4 {
    font-size: 25px;
    font-weight: 600;
    color: #fff;
    margin: 0px;
    text-align: center;
}

.registration_data p {
    margin: 8px 0;
}

.registration_data button {
    margin-top: 10px;
    margin-right: 8px;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    background-color: #06855f;
    color: white;
    cursor: pointer;
}

.registration_data button:hover {
    background-color: #1565c0;
}

.visitor-notification {
    position: relative;
    display: inline-block;
    font-size: 20px;
    background: #fff;
    padding: 10px;
    border-radius: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    width: 40px;
    color: #333;
    cursor: pointer;
}

.visitor-notification i {
    font-size: 20px;
    color: #333;
}

.notification-dot {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    border: 2px solid white;
    /* Optional: white border for contrast */
}


/* visitor dashboard */
.dashboard {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 200px;
    background-color: #05250d;
    color: #fff;
    padding: 20px 0px;
}

.sidebar h2 {
    font-size: 20px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar ul {
    list-style: none;
    padding: 0px;
}

.sidebar ul li {
    width: 100%;
}

.sidebar ul li a {
    padding: 12px 15px;
    margin-bottom: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    color: #fff;
    transition: .5s ease;
    width: 100%;
}

.sidebar ul li a:hover {
    background-color: #e3ffc8;
    border-left: 4px solid #25612d;
    color: #136313;
}

.sidebar ul li.active {
    background-color: #e3ffc8;
    border-left: 4px solid #25612d;
    color: #136313 !important;
}

.sidebar ul li.active a {
    color: #136313;
}

.sidebar ul li.active i {
    color: #136313;
}


.sidebar ul li i {
    height: 25px;
    width: 25px;
    color: white;
    display: flex;
    align-items: center;
}

.main-dashboard {
    flex: 1;
    background-color: #fff;
}

.tab-content {
    padding: 20px;
}

.tab-content p {
    color: gray;
    font-size: 15px;
}

/* visitor dashboard */

/* badge profile */
.badge-search-wrapper {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    width: 500px;
}

.search-input-group {
    position: relative;
    max-width: 500px;
}

.search-input {
    padding: 12px 45px 12px 20px;
    border: 1px solid #e0e0e0;
    border-radius: 0px;
    transition: all 0.3s ease;
}

.search-input:focus {
    box-shadow: 0 0 0 3px rgba(70, 108, 19, 0.1);
    border-color: #466c13;
}

.search-icon {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #466c13;
    pointer-events: none;
}

/* Responsive styles */


/* badge profile */

/* like profile */
.like-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    justify-content: end;
    width: 100%;
}

.heart {
    color: #ccc;
    /* empty heart */
    transition: color 0.3s;
}

.liked .heart {
    color: red;
    /* filled heart */
}

/* like profile */


.visitor_topright {
    align-items: center;
    gap: 10px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1);
}

.completed-badge {
    background: linear-gradient(135deg, #08571f 0%, #4ea31d 100%);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dash-head {
    font-size: 25px;
    font-weight: 600;
    color: #000;
    margin-bottom: 15px;
}

.sidebar .sidebar-logo {
    width: 170px;
    margin: auto;
    display: block;
    padding-bottom: 20px;
    border-bottom: 1px solid #ffffff4f;
    margin-bottom: 30px;

}

.visitor_topright h4 {
    margin: 0px;
    font-size: 20px;
    font-weight: 600;
    color: #000;
}

.upload-container {
    border-radius: 0.5rem;
    width: 100%;
}

.title {
    font-size: 18px;
    margin-top: 30px;
    font-weight: 500;
    text-align: center;
    color: #1f2937;
}

#dataDisplay {
    text-align: center;
    padding-bottom: 30px;
    padding-top: 20px;
}

#dataEdit {
    text-align: center;
    padding-bottom: 30px;
    padding-top: 20px;
}

.avatar-section {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    margin-top: 20px;
}

.avatar-container {
    position: relative;
}

.remove-overlay {
    position: absolute;
    top: -15px;
    right: -14px;
    width: 2rem;
    height: 2rem;
    background-color: #ef4444;
    border-radius: 50%;
    border: 2px solid white;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.remove-overlay:hover {
    background-color: #dc2626;
}

.remove-overlay.show {
    display: flex;
}

.close-icon {
    width: 1rem;
    height: 1rem;
    color: white;
}

.avatar-circle {
    width: 8rem;
    height: 8rem;
    border-radius: 100%;
    background-color: #e2ffdf;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
    overflow: hidden;
}

.avatar-circle:hover {
    background-color: #2f3134;
}

.avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5%;
}

.user-icon {
    width: 3rem;
    height: 3rem;
    color: white;
}




.file-info {
    margin-top: .5rem;
    padding: 0.75rem;
    display: none;
}

.file-info.show {
    display: block;
}

.file-info p {
    font-size: 13px;
    text-align: center;
    color: #374151;
    margin-bottom: 0.25rem;
}

#chooseBtn {
    background: #161616;
    border: 1px solid #ebebeb;
    color: #ffffff;
}

#removeBtn {
    display: none;
}

.file-info .file-size {
    color: #6b7280;
}

.file-name {
    font-weight: 500;
}

.form-control:disabled {
    background-color: transparent !important;
}

/* SVG Icons */


.icon {
    fill: rgb(36 127 46);
}


.edit-form-main {
    background-color: #fff;
    border-radius: 8px;
}

.edit-form-main .attendee-header {
    background-image: url(../img/banner.webp) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    position: relative !important;
}


.edit-form-main .attendee-header #editBtn {
    background: #ffffff !important;
    color: #74bb28 !important;
    border: 1px solid #6ab422;
}


.edit-form-main .attendee-header #saveBtn {
    background: #55105f !important;
    color: #fefefe !important;
    border: none;

}

.edit-form-inputs #saveBtn {
    margin-top: 20px !important;
    text-align: center;
    margin: auto;
    padding: 7px 30px;
}

.edit-form-inputs {
    padding: 20px;
    border: 1px solid #ebebeb;
}

.edit-form-inputs label {
    margin-top: 30px;
}


.edit-form-inputs .form-workshop {
    border-bottom: 1px solid #ebebeb;
}


/* badge table */

.table-container {
    background: #fff;
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.table-controls {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.search-box {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    border: 1px solid #ddd;
    width: 200px;
}

.sort-select {
    padding: 0.5rem;
    border-radius: 8px;
    border: 1px solid #ddd;
}

.badge-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.badge-table th,
td {
    text-align: left;
    padding: 10px;
    border-bottom: 1px solid #eee;
    font-size: 13px;
}

.badge-table th {
    background-color: #f9f9f9;
    color: #333;
    font-size: 13px;
}

.badge-table .user {
    display: flex;
    align-items: center;
    gap: 5px;
}

.badge-table .user img {
    border-radius: 100%;
    width: 32px;
    height: 32px;
    object-fit: cover;
}

.badge-table .badge-btn {
    padding: 6px 12px;
    border: none;
    border-radius: 0px;
    background-color: #7E57C2;
    cursor: pointer;
    color: white;
    font-size: 12px;
    transition: .5s ease;

}

.badge-table .badge-btn span {
    margin-right: 5px;
}

.badge-table .badge-btn:hover {
    background-color: #5E35B1;
    transition: .5s ease;
}

.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #555;
}

.action-cell {
    position: relative;
    text-align: center;
}

.action-cell .btn-link {
    color: #6c757d;
    padding: 6px;
    transition: color 0.2s;
}

.action-cell .btn-link:hover {
    color: #343a40;
}

.dropdown-menu {
    min-width: 180px;
    padding: 0.5rem 0;
    margin: 0;
    border: none;
    border-radius: 8px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

.dropdown-item {
    padding: 5px 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #333;
    transition: all 0.2s;
}

.dropdown-item i {
    width: 16px;
    color: #6c757d;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
}

.dropdown-item:hover i {
    color: #49b964;
}

.dropdown-item.text-danger:hover i {
    color: #dc3545;
}

.badge-table {
    background-color: #fff;
    border: 1px solid #ebebeb;
}

.primary-user {
    background: #008800;
    color: #fff;
    font-size: 10px;
    font-weight: 300;
    padding: 4px 7px;
    border-radius: 30px;
}

.badge-status span {
    background: #cfa701;
    padding: 4px 8px;
    border-radius: 30px;
    color: white;
    font-size: 12px;
}

.badge-approved span {
    background-color: #008800;
}

.badge-cancel span {
    background-color: #8a340c;
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    outline: none;
    box-shadow: none;
    border: none;
}


.edit-form-products label {
    margin-bottom: 5px;
}

.edit-form-products input[type="checkbox"] {
    accent-color: black;
}

.workshop-error {
    color: red;
}

/* badge table */

/* table responsive card */

.mobile-card-header h5 {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.mobile-table-card {
    margin-top: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    padding: 15px;
}

.mobile-card-header h6 {
    font-size: 14px;
    font-weight: 500;
    color: #606060;
    margin-bottom: 0px;
    margin-top: 5px;
}

.mobile-card-profile img {
    height: 40px;
    width: 40px;
    object-fit: cover;
    border-radius: 100%;
}

.mobile-card-profile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mobile-card-profile .primary-user {
    margin-left: 5px;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin: 15px 0px;
}

.detail-item {
    text-align: center;
    padding: 6px;
    background: rgba(247, 250, 252, 0.8);
    border-radius: 12px;
    border: 1px solid rgba(226, 232, 240, 0.5);
    transition: all 0.3s ease;
}

.detail-item:hover {
    background: rgba(237, 242, 247, 0.9);
    transform: translateY(-2px);
}

.detail-label {
    font-size: 12px;
    color: #718096;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.detail-value {
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
}

.status-badge {
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: #f6ad55;
    color: #744210;
    display: inline-block;
}

.actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.mobile-table-card-wrapper {
    display: none;
}

/* table responsive card */
/* Notification */


.notification-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 1.5rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}


.notification-header h2 {
    font-size: 18px;
    color: #333;
    margin: 0;
}

.notification-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    /* semi-transparent black */
    z-index: 999;
    /* below the popup */
    display: none;
}

.notification-popup {
    position: absolute;
    top: 60px;
    /* adjust to your button */
    right: 20px;
    width: 500px;
    background: white;
    z-index: 1000;
    /* above the backdrop */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    display: none;
    border-radius: 8px;
    overflow: hidden;
}

.notification-popup.show {
    display: block;
}

.notification-backdrop.show {
    display: block;
}


.mark-all-read {
    padding: 0.5rem 1rem;
    background: #49b964;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mark-all-read:hover {
    background: #3a9651;
}

.notification-filter {
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    outline: none;
}

.notification-item {
    display: flex;
    align-items: flex-start;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.notification-item.unread {
    background: #fff;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
}

.notification-avatar {
    position: relative;
    margin-right: 1rem;
}

.notification-avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.status-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background: #49b964;
    border-radius: 50%;
    border: 2px solid #fff;
}

.notification-icon {
    width: 20px;
    height: 20px;
    background: #e9ecef;
    padding: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #49b964;
    font-size: 12px;
}

.notification-content {
    flex: 1;
}

.notification-text {
    color: #333;
    margin-bottom: 0.5rem;
}

.notification-time {
    color: #6c757d;
    font-size: 0.875rem;
}

.notification-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.accept-btn,
.decline-btn {
    padding: 0.4rem 1rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.accept-btn {
    background: #49b964;
    color: white;
}

.accept-btn:hover {
    background: #3a9651;
}

.decline-btn {
    background: #dc3545;
    color: white;
}

.decline-btn:hover {
    background: #bb2d3b;
}

.notification-options {
    color: #6c757d;
    padding: 0.5rem;
    cursor: pointer;
    transition: color 0.3s ease;
}

.notification-options:hover {
    color: #343a40;
}

.notification-options svg {
    padding: 10px;
    background: transparent;
}

.notification-options .btn-link {
    background: transparent;
}

.notification-options .btn-link:hover {
    background: transparent;
    border: none;
}

.notification-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
    margin: 0.5rem 0;
    background: #e8f5e9;
    color: #2e7d32;
}

.notification-badge.warning {
    background: #fff3e0;
    color: #e65100;
}

.system-update {
    background: #e3f2fd !important;
    color: #1976d2 !important;
}

.event {
    background: #f3e5f5 !important;
    color: #7b1fa2 !important;
}

.payment {
    background: #e8f5e9 !important;
    color: #2e7d32 !important;
}

.document {
    background: #fff3e0 !important;
    color: #e65100 !important;
}

.view-btn,
.remind-btn,
.download-btn,
.upload-btn {
    padding: 0.4rem 1rem;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #deebfb;
    color: #495057;
    font-size: 13px;
}

.view-btn:hover,
.remind-btn:hover,
.download-btn:hover,
.upload-btn:hover {
    background: #83bbff;
    color: #fff;
}

.view-btn.active,
.remind-btn.active,
.download-btn.active,
.upload-btn.active {
    background: #83bbff;
    color: #fff;
}

.download-btn {
    background: #e3f2fd;
    color: #1976d2;
    font-size: 13px;
}

.download-btn:hover {
    background: #bbdefb;
    color: #1565c0;
}

.upload-btn {
    background: #fff3e0;
    color: #e65100;
    font-size: 13px;
}

.upload-btn:hover {
    background: #ffe0b2;
    color: #ef6c00;
}

.table-upgrade-btn {
    background: #2e105b;
    color: white;
    padding: 6px 12px;
    border: none;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.3s ease;
    width: fit-content;
}

.table-upgrade-btn span {
    margin-right: 8px;
}

.mobile-table-card-wrapper .mobile-table-card a {
    text-align: center !important;
}

.table-print-badge {
    background: #008f46;
}

.table-print-badge i {
    color: white;
    display: initial;
    background: transparent;
    border: none;
    font-size: 14px;
}


/* Animation for new notifications */
@keyframes slideIn {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.notification-item.unread {
    animation: slideIn 0.3s ease-out;
}

.notification-wrapper {
    position: relative;
}



.notification-dot {
    position: absolute;
    top: 0;
    right: 0;
    background: #ff4b6e;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.notification-header {
    padding: 15px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-header h5 {
    margin: 0;
    font-size: 20px;
    color: #333;
    font-weight: 600;
}

.view-all {
    color: #466c13;
    text-decoration: none;
    font-size: 14px;
}

.notification-list-dashboard {
    max-height: 400px;
    overflow-y: auto;
}

.notification-item {
    padding: 12px 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s ease;
}

.notification-item:hover {
    background-color: #f8f9fa;
}

.notification-item.unread {
    background-color: #f0f7ff;
}

.notification-icon {
    width: 36px;
    height: 36px;
    background: #eef6ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #466c13;
}

.notification-content p {
    margin: 0;
    font-size: 14px;
    color: #333;
}

.notification-time {
    font-size: 12px;
    color: #888;
    display: block;
    margin-top: 3px;
}

/* Notification */




/* upgrade ticket */

.select2-container--default.select2-container--disabled .select2-selection--single {
    background: transparent !important;
}

/* Meeting Icon and Modal Styles */
.meeting-icon-wrapper {
    position: absolute;
    top: 70px;
    right: 15px;
    z-index: 1;

}

.meeting-icon {
    border-radius: 100%;
    background-color: #fff;
    color: #3c3c3c;
    display: grid;
    border: none;
    place-content: center;
    padding: 10px;
    font-size: 25px;
    box-shadow: 0 4px 40px 0 rgba(0, 0, 0, 0.15);
}

.meeting-icon i {
    font-size: 18px;
    color: #49b964;
}


/* Meeting List Styles */

.call-options {
    padding: 1rem;
    display: flex;
    gap: 10px;
}

.call-option-item {
    display: flex;
    align-items: center;
    padding: 15px;
    margin-bottom: 1rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.call-option-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.call-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
}

.call-icon i {
    font-size: 24px;
}

.call-icon.video {
    background: #e5e1ec;
    color: #9575CD;
}

.call-icon.audio {
    background: #e8f5e9;
    color: #2e7d32;
}

.call-info {
    flex: 1;
}

.call-info h6 {
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
    color: #333;
}

.call-info p {
    margin: 0 0 1rem 0;
    color: #666;
    font-size: 0.9rem;
}

.start-btn {
    padding: 0.5rem 1.5rem;
    border-radius: 6px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
    border: none;
    color: white;
}

.start-btn.video-call {
    background: #9575CD;
    color: white;
}

.start-btn.video-call:hover {
    background: #7255a2;
    color: white;
}

.start-btn.audio-call {
    background: #2e7d32;
    color: white;
}

.start-btn.audio-call:hover {
    background: #1b5e20;
    color: white;
}


.premium-header .btn-close {
    filter: brightness(0) invert(1);
}


.step {
    display: none;
}

.step.active {
    display: block;
}

.step-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.btn-return {
    width: fit-content;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 0px;
    display: block;
}

.ticket-upgrade .success-message {
    margin-bottom: 0px;
    padding: 0px 110px;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2eb13f 0%, #0d3d0d 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    margin-right: 1rem;
}

.step-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1f2937;
}

/* Current Ticket Display */
.current-ticket {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.upgrade-ticket-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.upgrade-btn {
    width: fit-content;
}

.upgrade-ticket-details h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.5rem;
}

.upgrade-ticket-details p {
    color: #6b7280;
    font-size: 0.9rem;
}

.ticket-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #108a26;
}

.ticket-upgrade .button-group {
    position: sticky;
    bottom: -15px;
    background: #fff;
    width: 100%;
    padding: 10px 5px;
    box-shadow: none;
}



/* Ticket Selection */
.ticket-options {
    display: grid;
    gap: 1.5rem;
}

.ticket-option {
    border: 2px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.ticket-option:hover {
    border-color: #2eb13f;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.ticket-option.selected {
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

.ticket-option.selected::before {
    content: '✓';
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    background: #667eea;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
}

.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

.ticket-option-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #048718;
}

.ticket-features {
    list-style: none;
    margin-top: 0px;
    padding: 0px;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 11px;
}

.ticket-features li {
    display: flex;
    align-items: center;
    color: #0f5219;
    font-size: 12px;
    padding: 5px 9px;
    background: #e7ffeb;
    border-radius: 50px;
    border: 1px solid #34bc3f4a;
}

.ticket-features li::before {
    content: '✓';
    color: #10b981;
    font-weight: 600;
    margin-right: 0.5rem;
}

.upgrade-info {
    background: #e7ffeb;
    border: 1px solid #34bc3f;
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.upgrade-info svg {
    color: #d97706;
}

.upgrade-info span {
    color: #319604;
    font-weight: 500;
    font-size: 0.9rem;
}

/* Checkout Page */
.checkout-summary {
    background: #f8fafc;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.summary-row:last-child {
    border-bottom: none;
    font-weight: 600;
    font-size: 1.1rem;
    color: #1f2937;
}

.summary-label {
    color: #6b7280;
}

.summary-value {
    font-weight: 500;
}

.payment-section {
    margin-bottom: 2rem;
}

.payment-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 1rem;
}


.form-label {
    display: block;
    margin-bottom: 5px;
    font-weight: 400;
    color: #1f2124;
    font-size: 14px;
}

.iti--separate-dial-code .iti__selected-dial-code {
    font-size: 12px !important;
}

.iti--allow-dropdown input,
.iti--allow-dropdown input[type=text],
.iti--allow-dropdown input[type=tel],
.iti--separate-dial-code input,
.iti--separate-dial-code input[type=text],
.iti--separate-dial-code input[type=tel] {
    font-size: 13px !important;
}

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #e2e8f0;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    transition: border-color 0.2s ease;
}

.form-input:focus {
    outline: none;
    border-color: #667eea;
}

.form-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
}


.button-group {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}

.button-group .btn {
    flex: 1;
}

/* Success Page */
.success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 2rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
}

.success-message {
    text-align: center;
}

.success-message h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #048718;
    margin-bottom: 1rem;
}

.success-message p {
    color: #5f5e5e;
    font-size: 17px;
    margin-bottom: 15px;
}

.upgrade-ticket-details-card {
    background: #f8fafc;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 2rem 0;
}


.ticket-details-card {
    background: #fefdfd;
    padding: 15px 40px;
    border-radius: 8px;
    border: 1px solid #ebebeb;
    width: fit-content;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 140px;
    text-align: left;
}

.final-ticket-price {
    color: #0f9330 !important;
    font-weight: 700;
}

.final-ticket-type {
    font-size: 18px;
    font-weight: 600;
}

.checkout-form .form-group label {
    margin-bottom: 5px;
    font-size: 15px;
    color: #646464;
    font-weight: 100;
}

.validation-message {
    display: none;
    color: #dc2626;
    font-size: 0.95rem;
    font-weight: 500;
}

.ticket-upgrade {
    padding: 10px;
    padding-bottom: 0px;

}

.ticket-upgrade-scrollable-div {
    max-height: 500px;
    overflow-y: auto;
}

.ticket-upgrade .button-group button {
    width: fit-content;
}

.ticket-upgrade .step {
    display: none;
}

.ticket-upgrade .step.active {
    display: block;
}

.ticket-upgrade .ticket-option.selected {
    border: 2px solid green;
    background: #f0fff0;
}



/* Upgrade Ticket */


@media (max-width: 1366px) {
    .reg-form-width {
        padding: 30px 50px;
    }

    .table-main-div {
        width: auto;
        overflow: scroll;
    }
}



@media (max-width: 992px) {

    .social-register-section h2 {
        font-size: 15px;
        width: 80%;
    }

    .social-btn {
        font-size: 11px;
        font-weight: 300;
    }

    .applied-promo {
        flex-direction: column;
    }

    .ticket-info-to {
        padding: 20px;
    }

    .match-profile-card {
        margin-bottom: 0px;
    }

    .ticket-info-to .badge-fullname {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .ticket-info-ft h4 {
        font-size: 18px;
    }

    .reg-form-width {
        padding: 30px 20px;
    }

    .user-inner img {
        object-position: top;
    }

    .messages-container {
        padding: 15px;
    }

    .visitor_menu {
        justify-content: center;
    }

    .edit-form-inputs label {
        margin-top: 15px;
    }

    /* .table-tab{
        display: none;
    }
     */
    .message.received .message-content {
        margin: 0px;
    }

    .mobile-table-card-wrapper {
        display: block;
    }

    .table-main-div {
        display: none !important;
    }

    .message.sent .message-content {
        margin: 0px;
    }

    .profile-info {
        padding-left: 0px;
    }

    .profile-content h6 {
        width: 80%;
    }

    .user-inner {
        height: 250px;
        width: 100%;
    }

    .modal-profile-body {
        padding: 15px;
    }

    .modal-profile-body {
        flex-direction: column;
        gap: 20px;
    }


    .collapstable table {
        margin-top: 10px;
    }

    .form-workshop h5 {
        font-size: 16px;
    }

    .checkbox-grid label {
        font-size: 13px;
        flex-wrap: wrap;
    }

    .pass-cards {
        padding: 0px 10px;
    }

    #custom-toast {
        right: auto;
        margin: 0px 20px;
    }

    .attendee-header h4 {
        font-size: 18px;
    }

    .categories-list,
    .subitems-list {
        max-height: 100%;
    }

    .registration-text {
        font-size: 18px;
    }

    .attendee-header-ticket-info {
        font-size: 15px;
        text-align: center;
    }

    .attendee-header {
        flex-direction: column;
        gap: 10px;
    }

    .min-height-77 {
        min-height: auto;
    }

    .ticket-info-ft {
        padding: 0px;
    }

    .ticket-info-ft {
        padding: 10px 0px;
    }

    .ticket-form-collaps {
        flex-direction: column;
    }

    .registration-container .step-indicator {
        justify-content: start;
    }

    .visitor-header {
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .upgrade-btn {
        margin: auto;
    }

    .call-options {
        flex-direction: column;
    }

    .social-icons {
        margin: 0px;
        padding-bottom: 10px;
        gap: 10px;
    }
}

@media (max-width: 768px) {
    .form-row {
        grid-template-columns: 1fr;
    }

    .button-group {
        flex-direction: column-reverse;
        gap: 0px;
    }

    .upgrade-ticket-info {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .match-profile-card {
        padding: 15px;
    }

    .page-section-title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .attendee-form {
        border: none;
    }

    .checkout-btn {
        font-size: 14px;
        font-weight: 500;
        padding: 8px 10px;
        width: fit-content;
    }

    .footer .logo-width {
        width: 120px;
    }

    .fixed-checkout-bar {
        padding: 10px;
        z-index: 1000;
        /* Make sure this is below the popup z-index */
    }

    .registration-text {
        font-size: 15px;
    }

    .checkout-btn {
        width: 100%;
    }

    .fixed-checkout-bar {
        padding: 10px 15px;
    }

    .checkout-controls {
        flex-direction: column;
    }

    .total-section {
        width: 100%;
    }

    .checkout-btn {
        width: 100%;
    }

    .checkout-right-aligned {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .promocode-input,
    .total-section,
    .checkout-btn {
        width: 100%;
    }

    .total-section {
        width: 100%;
    }

    .checkout-btn {
        width: 100%;
    }

    .ticket-summary-popup {
        width: 100%;
        max-height: none;
        bottom: 10px;
        left: 0;
        right: 0;
        border-radius: 12px 12px 0 0;
        z-index: 1002;
        box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.2);
    }

    .ticket-summary-content {
        max-height: calc(60vh - 50px);
        overflow-y: auto;
    }

    .ticket-summary-header {
        position: sticky;
        top: 0;
        background: linear-gradient(91deg, #1F2383 -0.01%, #0B0442 99.99%);
        z-index: 1;
        padding: 12px 15px;
    }

    /* Add a semi-transparent overlay behind the popup for better focus */


    .registration-container .step-indicator {
        padding: 8px 0;
        margin-bottom: 5px;
    }

    .registration-container .step-circle {
        width: 32px;
        height: 32px;
        font-size: 14px;
        margin: 0 5px;
        border-width: 2px;
    }

    .registration-container .step-circle.completed::after {
        font-size: 14px;
    }

    .registration-container .step-circle.active {
        font-size: 14px;
        /* Adjusted for consistency */
        transform: scale(1.15);
    }

    .registration-container .step-line {
        max-width: 60px;
        height: 2px;
    }

    /* Adjust form layout if using the two-column (form + badge) layout */
    .attendee-form .row .col-md-8,
    .attendee-form .row .col-md-4 {
        flex: 0 0 100%;
        /* Stack columns */
        max-width: 100%;
    }

    .attendee-form .row .col-md-4 {
        /* The badge column */
        margin-top: 20px;
        /* Add some space when stacked */
    }

    /* Adjust padding for form cards */


    .footer {
        padding: 30px 20px 15px;
    }

    .collaps-ticket-nav .nav-tabs .nav-link {
        font-size: 14px;
        margin-right: 10px;
    }

    .notification-container {
        margin-top: 0px;
        padding: 10px;
    }

    .notification-header {
        flex-direction: column;
        gap: 1rem;
    }

    .notification-actions {
        width: 100%;
        flex-direction: column;
        margin-top: 0px;
    }

    .notification-filter {
        flex: 1;
    }

    .lg-badge-hide {
        display: block !important;
    }

    .sm-badge-hide {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .ticket-summary-popup {
        width: 90%;
        margin: auto;
        right: 0;
        left: 0;
        border-radius: 8px 8px 0 0;
    }

    .registration-container .step-indicator {
        padding: 8px 5px;
        /* Add side padding for when it scrolls */
        margin-bottom: 5px;
        overflow-x: auto;
        /* Enable horizontal scrolling */
        /* justify-content: flex-start; /* Optional: if you prefer scroll to start from left */
    }

    /* Webkit scrollbar styling for step indicator */
    .registration-container .step-indicator::-webkit-scrollbar {
        height: 5px;
    }

    .registration-container .step-indicator::-webkit-scrollbar-track {
        background: #f8f9fa;
        border-radius: 10px;
    }

    .registration-container .step-indicator::-webkit-scrollbar-thumb {
        background-color: #0B0442;
        border-radius: 10px;
    }

    .registration-container .step-indicator::-webkit-scrollbar-thumb:hover {
        background-color: #1F2383;
    }

    .registration-container .step-circle {
        width: 30px;
        height: 30px;
        font-size: 12px;
        margin: 0 4px;
        flex-shrink: 0;
        /* Prevent circles from shrinking when scrolling */
    }

    .registration-container .step-circle.completed::after {
        font-size: 12px;
    }

    .registration-container .step-circle.active {
        font-size: 13px;
        /* Keep active slightly more prominent */
        transform: scale(1.1);
    }

    .registration-container .step-line {
        max-width: 25px;
        /* Lines shrink more */
        height: 2px;
        /* flex-shrink: 1; /* Already default, ensures lines shrink */
    }


    .attendee-header h4,
    .summary-header h4 {
        font-size: 16px;
        text-align: center;
    }



    .action-buttons .btn {
        width: 100%;
    }

    .action-buttons .btn-previous {
        order: 2;
        /* Previous button below Continue/Submit */
    }

    .action-buttons .btn-continue,
    .action-buttons .btn-submit {
        order: 1;
    }


    /* Registration Bar at the top */
    .registration-bar {
        padding: 10px 15px;
        flex-direction: column;
        /* Stack items */
        text-align: center;
        gap: 10px;
    }

    .registration-bar .registration-text {
        font-size: 0.8rem;
        /* Smaller text */
        line-height: 1.3;
    }

    .registration-bar .login-btn {
        padding: 8px 15px;
        font-size: 0.9rem;
    }

    .registration-bar .login-icon svg {
        width: 22px;
        height: 22px;
    }

    /* Basic form input sizing for better mobile experience */
    .form-control,
    .select2-container--default .select2-selection--single {
        /* height: 45px; /* Slightly smaller if needed */
        font-size: 14px;
        /* Ensure readability */
    }

    .form-label {
        font-size: 13px;
    }

}




/* style Css */




:root {
    --primary-color: #22295C;
    --secondary-color: #FFC402;
    --third-color: #1A88CB;
    --text-color: #2F2424;
    --white-color: #fff;
    --black-color: #000;
    --main-font: "Alexandria";
}



/* home page */
#navbar {
    position: fixed;
    top: 0;
    left: 0;
    padding: 10px 0px;
    width: 100%;
    background: transparent;
    transition: .5s;
    z-index: 1000 !important;
}

.nav-elements {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#navbar.scrolled {
    transition: .5s;
    top: 0px;
    background-color: #171b2e;
    z-index: 1000 !important;
    transition: background-color 0.3s ease;
}

#navbar.scrolled .home-logo-width {
    width: 250px;
    transition: .5s;
}

.home-banner {
    height: 100vh;
    background-image: url(../img/home-banner.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    animation: zoomInOut 20s ease-in-out infinite;
    display: flex;
    align-items: center;
}

.banner-cntnt {
    font-family: 'Beluga';
    position: relative;
    z-index: 2;
}

.abt-cntnt {
    position: relative;
    z-index: 2;
}

.banner-cntnt h3 {
    font-size: 60px;
    color: #56ff0e;
    overflow: hidden;
}

.text-line {
    display: block;
    transform: translateY(100%);
    opacity: 0;
}

@keyframes zoomInOut {
    0% {
        background-size: 100% auto;
    }

    50% {
        background-size: 120% auto;
    }

    100% {
        background-size: 100% auto;
    }
}

.home-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 75%);
}


.position-relative-z1 {
    position: relative;
    z-index: 2;
}

.home-logo-width {
    width: 350px;
    transition: .5s;
}

.social-bar {
    position: fixed;
    top: 30%;
    left: 0;
    display: flex;
    flex-direction: column;
    z-index: 1000;
    border-radius: 0px 0 0 0px;
    overflow: hidden;
    backdrop-filter: blur(15px);
    border: 1px solid #ffffff14;
    background: #ffffff0a;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-left: none;
}

.social-icon {
    padding: 15px;
    text-align: center;
    color: white;
    font-size: 20px;
    transition: background 0.3s, transform 0.3s;
    border-bottom: 1px solid rgb(255 255 255 / 16%);
}

.social-icon:last-child {
    border-bottom: none;
}

.social-icon:hover {
    background: #aef135;
    color: #000;
    transform: scale(1.1);
}

.banner-cntnt .event-info {
    color: #ffffff;
    gap: 50px;
    display: flex;
    background: transparent;
    /* or adjust if needed */
}

.banner-cntnt .event-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    gap: 10px;
    font-family: 'Beluga';
}

.banner-cntnt .event-item span {
    font-family: 'Beluga';
    font-size: 18px;
}

.banner-cntnt .event-item i {
    color: #56ff0e;
    backdrop-filter: blur(15px);
    border: 1px solid #ffffff14;
    background: #ffffff0a;
    border-radius: 100%;
    padding: 12px 15px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* button */

/* home page */




/* banner */

.banner {
    background-image: url(../img/banner.webp);
    padding: 25px 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;

}

.banner-logo img {
    width: 700px;
}

.banner-head {
    font-size: 25px;
    font-weight: 300;
    color: #fff;
    font-family: 'Beluga';
    width: 70%;
    margin: 0px;
}

.bannercntnt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.partner-logo {
    width: 600px;
    margin: 20px 0px;
}

.shadow-shape {
    width: 100%;
    height: 150px;
    position: absolute;
    bottom: 0;
    z-index: 1;
    background: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(255, 255, 255, 0) 100%);
}

.shadow-shape-2 {
    top: 0px !important;
    bottom: auto !important;
    transform: rotate(180deg);
}


/* Inner page banner */
.main-inner-page-banner {}

/* Inner page banner */

/* banner */


/* about */

.about-wrapper {
    background-image: url(../img/nigeria-tech-convergence.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0;
    position: relative;
    background-attachment: fixed;
}

.abt-img {
    height: 350px;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.abt-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: .5s;
}

.abt-img img:hover {
    transform: scale(1.05);
    transition: .5s;
}

.abt-cntnt h3 {
    font-size: 50px;
    color: #28a745;
    font-family: 'Beluga';
    margin: 40px 0px;
}

.abt-cntnt p {
    font-size: 18px;
    color: #ffffffcf;
    font-weight: 300;
    font-family: "Montserrat", sans-serif;
}

.abt-cntnt p span {
    font-weight: 700;
}

.buttons-main {
    display: flex;
    gap: 20px;
}

/* about */


/* agenda */

.agenda-wrapper {
    background-image: url(../img/purplebgv315.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0;
    position: relative;
    background-attachment: fixed;
}

.sec-head {
    font-size: 50px;
    color: #efa500;
    font-family: 'Beluga';
    margin-bottom: 40px;
    position: relative;
    z-index: 2;
}

.sec-head span {
    color: #fff;
}

.agenda-box {
    background: #f8f8f80b;
    border-radius: 20px;
    /* padding: 15px; */
    overflow: hidden;
    margin-bottom: 30px;
    border: 1px solid #ffffff3c;
    backdrop-filter: blur(6px);
    transition: all .3s ease;
    height: 100%;
}

.agenda-img {
    height: 250px;
    width: 100%;
    overflow: hidden;
}

.agenda-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    overflow: hidden;
    transition: all .3s ease;
}

.agenda-img img:hover {
    transform: scale(1.05);
    transition: all .3s ease;
}

.agenda-cntnt {
    padding: 15px;
}

.agenda-cntnt h4 {
    font-size: 30px;
    color: #ffffff;
    font-family: 'Beluga';
    margin: 0px 0px 5px 0px;
}

.agenda-cntnt h5 {
    font-size: 20px;
    color: #efa500;
    font-family: 'Beluga';
    margin: 0px 0px 20px 0px;
    text-transform: uppercase;
}

.agenda-cntnt p {
    font-size: 15px;
    color: #fff;
    font-weight: 300;
    font-family: "Montserrat", sans-serif;
}

/* agenda */

/*speaker */
.speaker-wrapper {
    background-image: url(../img/GovtBanner_1.webp);
    padding: 100px 0px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    background-attachment: fixed;
}


.speaker-carousel .speaker-card {
    background: #fff;
    border: 1px solid #ddd;
    border-bottom-right-radius: 16px;
    padding: 0;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.speaker-card img {
    width: 100%;
    height: auto;
    display: block;
}

.speaker-card h3 {
    margin: 12px 0 4px;
    font-size: 16px;
    color: #ffffff;
    /* Red tone */
    font-weight: bold;
    text-transform: uppercase;
}

.speaker-card p {
    font-size: 14px;
    color: #efa500;
}

#speaker-carousel .owl-nav {
    display: none;
}

#speaker-carousel {
    position: relative;
    z-index: 2;
}


/* speaker-inner */

.inner-page-main-banner {
    background-image: url(../img/speaker-banner.jpg);
}

.inner-page-main-banner::after {}

/* speaker-inner */

/*speaker */


/* footer */
.footer-home-bg {
    background-image: url(../img/footer-ab.svg) !important;
    background-size: contain !important;
    background-position: right !important;
    background-repeat: no-repeat !important;
    background: #000;
    position: relative;
    padding: 100px 0px 0px 0px !important;
}

.footer-container {
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 40px;
    align-items: start;
    position: relative;
    z-index: 2;
}

.footer-column h3 {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    font-family: "Beluga";
}

.footer-column p,
.footer-column a {
    font-size: 14px;
    line-height: 1.6;
    color: white;
    text-decoration: none;
    margin-bottom: 8px;
    display: block;
}

.footer-column a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.show-details {
    margin-bottom: 25px;
}

.show-time {
    font-weight: normal;
    margin-bottom: 5px;
}

.show-location {
    font-weight: normal;
    opacity: 0.9;
}

.newsletter-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid white;
    color: white;
    padding: 12px 24px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.newsletter-btn:hover {
    background: white;
    color: #2d8f5f;
}

.media-btn {
    background: transparent;
    border: 2px solid white;
    color: white;
    padding: 10px 20px;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
    margin-bottom: 20px;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.media-btn:hover {
    background: white;
    color: #2d8f5f;
}


@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }
}

@media (max-width: 480px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: 25px;
    }
}


/* footer */







/* Exhibitor form */

.form-section {
    background-image: url(../img/CircleElement.webp);
    background-size: cover;
    background-position: left;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #ededed;
    padding: 60px 0;
}

.form-head {
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
}


.form-container {
    margin: auto 130px;
}

.form-section .progress-bar {
    display: flex;
    flex-direction: row;
    width: 250px;
    margin: auto;
    padding: 0;
    position: relative;
    border-radius: 12px;
}

.form-section .form-section .progress-step {
    padding: 15px 40px;
    text-align: center;
    position: relative;
    background: #ffffff;
    color: #3e3e3e;
    font-weight: 500;
    font-size: 14px;
    transition: all 0.3s ease;
}

.form-section .progress-step:first-child {
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

.form-section .progress-step:last-child {
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
}

.form-section .progress-step.active {
    background: rgb(73, 5, 9);
    color: white;
    position: relative;
}


.form-section .progress-step.completed {
    background: #28a745;
    color: white;
    position: relative;
}

.form-section .progress-step.completed::before {
    content: '✓ Done';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    color: #28a745;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
    z-index: 99;
}

.form-section .progress-step:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background: #e5e5e5;
}

.form-content {
    padding: 40px;
    min-height: 400px;
    border-radius: 20px;
    border: 1px solid #fff;
    backdrop-filter: blur(6px);
    background: #fff;
    margin-top: 20px;
}

.step {
    display: none;
    animation: fadeIn 0.5s ease-in;
}

.step.active {
    display: block;
}


/* Registration confirmed */

.after-ds-location {
    color: #000066;
    margin-bottom: 10px;
    font-weight: 600;
}

.after-ds-title {
    margin-bottom: 8px;
    font-weight: 600;
    margin-top: 10px;
}

.reg-confirmed {
    color: #222;
}

.reg-confirmed__container {
    margin: 0 auto;
    /* padding: 25px; */
    border-radius: 10px;
    /* box-shadow: 0 0 10px #cccccc36; */
    margin-bottom: 20px;
}

.reg-confirmed__title {
    color: #000;
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.reg-confirmed__desc {
    font-size: 15px;
    margin-bottom: 15px;
    color: #303030;
    font-weight: 300;
}

.reg-confirmed__info-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 25px;
}

.reg-confirmed__left {
    flex: 1 1 45%;
}

.reg-confirmed__left i {
    margin-right: 6px;
    color: #0073e6;
}

.reg-confirmed__calendar-link {
    display: inline-block;
    text-decoration: none;
    color: #000066;
    font-size: 14px;
    font-weight: 600;
}

.reg-confirmed__right {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.reg-confirmed__right i {
    width: 18px;
    height: 18px;
    fill: #0073e6;
}

.reg-confirmed__right a {
    text-decoration: none;
    color: #000066;
    font-size: 14px;
    font-weight: 600;
}

.after-main-title {
    color: #9e9e9e;
    font-weight: 400;
}

.reg-confirmed__badge-section {
    background: #ffffff;
    padding: 20px;
    border-radius: 10px;
    /* border: 1px solid #dedede; */
}

.reg-confirmed__badge-section h3 {
    font-size: 18px;
    color: #e60023;
    margin-bottom: 20px;
    font-weight: 600;
}

.reg-confirmed__badge-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.reg-confirmed__badge-columns>div {
    flex: 1 1 30%;
}

.reg-confirmed__badge-columns h4 {
    font-size: 16px;
    color: #000;
}

.reg-confirmed__badge-columns p {
    font-size: 14px;
    line-height: 1.5;
}

.reg-confirmed__badge-columns a {
    color: #0073e6;
    text-decoration: none;
}




.gitex-promo__card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    /* justify-content: space-between; */
}

/* Left Card */
.gitex-promo__attending {
    display: flex;
    background: linear-gradient(135deg, #fff, #d9eaff);
}

.gitex-promo__event {
    flex: 1;
    padding: 20px;
    background: #f2fff2;
}

.gitex-promo__iam {
    font-weight: bold;
    color: #1a1a1a;
    margin-bottom: 10px;
}

.gitex-promo__logo {
    max-width: 170px;
    margin-bottom: 10px;
}

.gitex-promo__date {
    font-size: 14px;
    color: #000;
    margin: 10px 0;
}

.gitex-promo__desc {
    font-size: 14px;
    margin: 10px 0;
}


/* Share */
.gitex-promo__share {
    padding: 20px;
    border-top: 1px solid #ddd;
}

.gitex-promo__share h4 {
    margin-bottom: 10px;
    font-size: 16px;
}

.gitex-promo__message {
    background: #f8f8f8;
    padding: 12px;
    border: 1px solid #ddd;
    font-size: 14px;
    margin-bottom: 15px;
}

.gitex-promo__message a {
    color: #0073e6;
    text-decoration: none;
}

.gitex-promo__socials a {
    display: inline-block;
    background: #0077b5;
    color: white;
    padding: 8px 12px;
    margin-right: 10px;
    border-radius: 5px;
    font-size: 14px;
    text-decoration: none;
}

.gitex-promo__socials .facebook {
    background: #1877f2;
}

.gitex-promo__socials i {
    margin-right: 6px;
}

/* Right Card */

.gitex-promo__mobile-header {
    height: 200px;
    width: 100%;
    overflow: hidden;
}

.gitex-promo__mobile-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gitex-promo__mobile-content {
    padding: 20px;
    text-align: center;
}

.gitex-promo__mobile-content h4 {
    font-size: 16px;
    margin-bottom: 10px;
}

.gitex-promo__mobile-content p {
    font-size: 14px;
    margin-bottom: 20px;
}

.gitex-promo__stores {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.gitex-promo__stores img {
    height: 40px;
    max-width: 120px;
    object-fit: contain;
}


.after-reg-upgrade-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #003087;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.after-reg-upgrade-btn svg {
    width: 16px;
    height: 16px;
    fill: #003087;
}

.visa-title {
    font-size: 16px;
    font-weight: 500;
    color: #222;
    margin-bottom: 20px;
}

.visa-modal-cntnt {
    border: 1px solid #ebebeb;
    padding: 10px;
    background: #e8e8e8;
}

.visa-modal-cntnt-main {
    margin-bottom: 10px;
}

.details-section {
    border: 1px solid #ebebeb;
    border-top: none;
    padding: 10px;
}

.visa-modal-cntnt h6 {
    margin: 0;
    width: fit-content;
    font-weight: 600;
}

.visa-modal-cntnt h4 {
    background: #008f46;
    padding: 5px 10px;
    border-radius: 30px;
    color: white;
    font-weight: 300;
    text-align: left;
    font-size: 15px;
    width: fit-content;
    margin-top: 5px;
}

.visa-modal-cntnt .form-group {
    margin-bottom: 15px !important;
}

.visa-modal {
    max-height: 400px;
    overflow-y: scroll;
}

.visa-modal-cntnt h5 {
    font-size: 15px;
    color: #707070;
    margin-bottom: 6px;
}

.visa-modal-cntnt .form-check-input {
    border: 1px solid black;
    cursor: pointer;
}





.badge-infocard {
    background: #fff;
}

.after-badgeregistration-container {
    display: inline-block;
    padding: 20px;
    width: 100%;
    background: #fff;
}

.registration-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    text-align: center;
}

.registration-number {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

.qr-code {
    width: 140px;
    height: 140px;
    display: block;
    margin: auto;
}

.badgeafterTab.tab-container {
    display: flex;
    border-radius: 25px;
    padding: 4px;
    gap: 20px;
    margin: auto;
    width: fit-content;
    margin: 25px auto;
    box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.25);
}

.badgeafterTab.tab {
    padding: 12px 24px;
    border-radius: 21px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: none;
    outline: none;
    position: relative;
    overflow: hidden;
    background-color: transparent;
    color: #999;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
}

.badgeafterTab.tab.active {
    background-color: #401161;
    color: white;
    box-shadow: -2px 1px 4px 0 rgba(0, 0, 0, 0.25);
}

.badgeafterTab.tab.inactive {
    background-color: transparent;
    color: #999;
    transform: scale(1);
}

.badgeafterTab.tab:hover {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.badgeafterTab.tab.active:hover {
    background-color: #401161;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.badgeafterTab.tab.inactive:hover {
    background-color: transparent;
    color: #666;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.badgeafterTab {
    min-width: 160px;
}

/* Demo content area */


.badgeafterTab.content-panel {
    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.badgeafterTab.content-panel.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: fadeInUp 0.4s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.badgeafterTab.content-panel h3 {
    margin-bottom: 15px;
    color: #333;
}

.badgeafterTab.content-panel p {
    color: #666;
    line-height: 1.6;
    text-transform: uppercase;
}

.afterbadgedetailes {
    text-align: center;
}


.afterbadgedetailes h2 {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.afterbadgedetailes p {
    font-size: 16px;
    margin: 10px 0;
    line-height: 1.4;
}

/* Registration confirmed */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.step h2 {
    margin-bottom: 30px;
    color: #333;
    font-size: 28px;
    text-align: center;
}

.form-group {
    margin-bottom: 25px;
}

/* .form-group svg {
    font-size: 10px;
    color: #555;
    padding: 5px;
    height: 15px;
    width: 15px;
    display: grid;
    place-content: center;
    border-radius: 100%;
} */

.colored-icon.fa-facebook-f {
    color: white;
    background-color: #1877f2;
}

.colored-icon.fa-instagram {
    color: white;
    background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
    -webkit-text-fill-color: transparent;
}

.colored-icon.fa-linkedin-in {
    color: white;
    background-color: #0077b5;
}

.colored-icon.fa-x-twitter {
    color: white;
    background-color: #000;
}

.colored-icon.fa-youtube {
    color: white;
    background-color: #ff0000;
}

.form-row {
    display: flex;
    gap: 20px;
}

.social-media {
    margin-top: 20px;
}

.social-media .form-group label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-row .form-group {
    flex: 1;
}

.form-section .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 100;
    color: #333;
    font-size: 14px;
}

.form-section .form-group label span {
    color: #28a745;
}


/* radio */
.radio-group {
    display: flex;
    gap: 20px;
    margin: 0px;
}

.radio-button {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-bottom: 0px !important;
}

.radio-button__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.radio-button__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: #4a5568 !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

.radio-button__custom {
    width: 20px;
    height: 20px;
    border: 2px solid #a9a9a9;
    border-radius: 3px;
    display: inline-block;
    position: relative;
    transition: all 0.3s ease;
}

.radio-button__custom::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background: #28a745;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.2s ease;
}

.radio-button__input:checked+.radio-button__label .radio-button__custom {
    border-color: #28a745;
}

.radio-button__input:checked+.radio-button__label .radio-button__custom::after {
    transform: translate(-50%, -50%) scale(1);
}

.radio-button:hover .radio-button__custom {
    border-color: #28a745;
    box-shadow: 0 0 0 4px rgba(66, 153, 225, 0.1);
}

/* radio */

.select2-container {
    width: 100% !important;
}

.select2-container .select2-selection--single {
    height: 45px !important;
    width: 100% !important;
    border-radius: 10px !important;
    padding-left: 18px !important;
}




/* Center the text vertically */


/* Adjust the arrow button */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 50px !important;
}

.select2-container--default .select2-selection--multiple {
    background-color: white !important;
    border: 1px solid #20202080 !important;
    border-radius: 10px !important;
    cursor: text !important;
    padding-bottom: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 100% !important;
    padding: 0;
    pointer-events: auto;
    cursor: pointer;
}

.select2-container--default .select2-search--inline .select2-search__field {
    padding: 9px 0px !important;
    height: 100% !important;
    font-family: var(--main-font) !important;
    font-size: 14px !important;
    font-weight: 300;
}

.select2-container:focus {
    border: none !important;
    outline: none !important;
}

.select2-selection,
.select2-selection--single:focus-visible {
    border: 1px solid #20202080 !important;
    outline: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    color: #999;
    z-index: 10;
    pointer-events: auto;
}

.select2-container--default .select2-selection--multiple .select2-selection__clear:hover {
    color: #666;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background: transparent !important;
    color: #ffffff !important;
}




.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgb(255, 255, 255) !important;
    margin-right: 8px !important;
    font-size: 19px !important;
    border-right: 1px solid #ffffff;
}

.iti__search-input {
    height: 35px !important;
    border-radius: 0px !important;
}





.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #9575CD !important;
    border: none !important;
    padding-left: 20px !important;
    color: white;
    font-size: 12px !important;
    padding: 5px 20px !important;
}

.label-hint {
    font-size: 11px !important;
    color: #777 !important;
}



input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: none;
}

textarea {
    resize: vertical;
    min-height: 50px;
    padding-top: 13px;
}

.file-upload {
    position: relative;
    display: inline-block;
    cursor: pointer;
    width: 100%;
}

.file-upload input[type="file"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.file-upload-label {
    display: block;
    padding: 40px 20px;
    border: 2px dashed #d1d5db;
    border-radius: 10px;
    text-align: center;
    background: #f9fafb;
    transition: all 0.3s ease;
}

.file-upload:hover .file-upload-label {
    border-color: #667eea;
    background: #f0f4ff;
}

.file-upload-icon {
    font-size: 48px;
    color: #9ca3af;
    margin-bottom: 10px;
}

.file-uploader {
    height: 50px;
    width: 100%;
    border-radius: 10px;
    border: 1px solid #20202080;
    display: flex;
    align-items: center;
    padding: 0% 16px;
    overflow: hidden;
}

.image-preview {
    margin-top: 20px;
    text-align: center;
}

.preview-image {
    max-width: 200px;
    max-height: 200px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.error {
    color: #dc3545;
    font-size: 14px;
    margin-top: 5px;
    display: none;
}

.form-navigation {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.btn {
    padding: 12px 30px;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-primary {
    background: #490509;
    color: white;
}

.btn-primary:hover {
    background: #1d5a17;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-primary:focus {
    background: #1d5a17 !important;
}

.btn-secondary {
    background: #c9c9c9;
    color: #2d2d2d;
}

.btn-secondary:hover {
    background: #486fca;
}

.btn-success {
    background: #28a745;
    color: white;
}



.preview-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.preview-section h3 {
    color: #667eea;
    margin-bottom: 15px;
    font-size: 18px;
}

.preview-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #dee2e6;
}

.preview-item:last-child {
    border-bottom: none;
}

.preview-label {
    font-weight: 600;
    color: #555;
}

.preview-value {
    color: #333;
}

.success-animation {
    text-align: center;
    padding: 60px 20px;
}

.success-icon {
    width: 80px;
    height: 80px;
    background: #28a745;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    font-size: 40px;
    color: white;
    animation: pulse 2s infinite;
}

.form-head-inner {
    font-size: 25px;
    text-align: center;
    margin: 10px 0px;
}

.iti,
.iti--allow-dropdown {
    width: 100% !important;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}




/*----------------- otp ----------------- */

.otp-inputs input:focus {
    border-bottom: 1.5px solid var(--primary-color);
    outline: none;
}


.otp-inputs-form {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    width: 100%;
}

.otp-inputs {
    margin-top: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

}

.otp-inputs input {
    width: 50px;
    height: 50px;
    margin: 0 8px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 24px;
}

.otp-inputs input:focus {
    border-color: #49b964;
    outline: none;
    box-shadow: 0 0 0 2px rgba(73, 185, 100, 0.2);
}

#countdown {
    font-weight: bold;
    color: #49b964;
}

.resend-otp {
    font-size: 17px;
    font-weight: 600;
}

.resend-otp span a {
    color: var(--primary-color);
    font-weight: 700;

}

.resend-otp {
    margin-top: 20px;
    font-size: 16px !important;
}

/*----------------- otp ----------------- */


@media (max-width: 1300px) {
    .home-logo-width {
        width: 290px;
    }
}

@media (max-width: 1200px) {
    .home-banner {
        height: auto;
        padding-top: 150px;
        padding-bottom: 100px;
    }

    .banner-cntnt h3 {
        font-size: 50px;
    }
}

@media (max-width: 1100px) {
    .form-container {
        margin: auto 0px;
    }
}

@media (max-width: 991px) {
    .nav-elements {
        flex-direction: column;
        gap: 10px;
    }

    .home-logo-width {
        width: 210px;
    }

    #navbar.scrolled .home-logo-width {
        width: 200px;
    }

    .home-banner {
        padding-bottom: 50px;
    }

    .btn-main {
        /* min-width: auto; */
        padding: 10px;
    }

    .nav-elements .btn-main {
        min-width: auto;
    }

    .about-wrapper .btn-main {
        min-width: auto;
    }

    .banner-cntnt h3 {
        font-size: 40px;
    }

    .partner-logo {
        width: 80%;
    }

    .abt-cntnt h3 {
        font-size: 30px;
        margin-bottom: 20px;
    }

    .about-wrapper {
        padding: 50px 0;
    }

    .sec-head {
        font-size: 30px;
    }

    .agenda-wrapper {
        padding: 50px 0;
    }

    .speaker-wrapper {
        padding: 50px 0;
    }

    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .progress-step {
        font-size: 12px;
        padding: 15px 40px;
    }

    .form-content {
        padding: 30px 20px;
    }

    .banner-head {
        font-size: 15px;
        display: none;
        width: 100%;
    }

    .banner-logo img {
        margin: auto;
        display: block;
    }

    .bannercntnt {
        margin: auto;
        display: block;
    }

    .form-section {
        padding: 40px 0px;
    }

    .form-head {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .footer .logo-width {
        width: 100px;
        margin-bottom: 10px;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .progress-bar {
        margin-top: 20px;
    }

    .form-head-inner {
        font-size: 20px;
        margin: 0px 0px 10px 0px;
    }

    .radio-group {
        margin: 0px;
    }

    .success-animation {
        padding: 0px 20px;
    }

    .form-content {
        min-height: auto;
    }

    .radio-button__label {
        font-size: 13px;
    }

    .radio-button__custom {
        width: 17px;
        height: 17px;
    }

    .radio-button__custom::after {
        height: 8px;
        width: 8px;
    }

    .banner-cntnt .event-info {
        gap: 10px;
    }

    .banner-cntnt .event-item {
        gap: 0px;
    }

    .home-banner {
        background-size: 100%;
    }

    .footer-home-bg {
        padding-top: 30px !important;
    }

    .agenda-box {
        height: auto;
        margin-bottom: 5px;
    }

    #redEditSelect {
        background-position: right 23px center;
        min-width: 100%;
    }
}


@media (max-width: 600px) {

    .about-wrapper {
        background-size: contain;
    }

    .btn-main {
        font-size: 14px;
    }

    .abt-img {
        height: 240px;
    }

    .banner-cntnt h3 {
        font-size: 30px;
    }

    .home-banner {
        padding-top: 180px;
    }

    .banner-cntnt .event-item span {
        font-family: 'Beluga';
        font-size: 15px;
    }
}

@media (max-width: 475px) {
    .btn-main {
        font-size: 11px;
        padding: 10px 5px;
    }

    .buttons-main {
        gap: 10px;
    }

    
}



/* style old */

.sub-wrapper {
    background-color: #fff;
    border-radius: 30px;
    width: 50%;
    margin: auto;
    padding: 30px;
    border: 1px solid #abcd;
}

.sub-wrapper-main {
    padding: 60px 0px 60px 0px;
    /* margin-top: -80px; */
}

.sub-wrapper img {
    width: 200px;
    margin: 0px auto;
    margin-bottom: 20px;
    display: block;
}

.sub-wrapper h4 {
    color: var(--black-color);
    font-size: 35px;
    text-align: center;
    font-weight: 800;
}

.sub-wrapper h6 {
    color: #A7A7A7;
    font-size: 18px;
    text-align: center;
    font-weight: 300;
    margin-bottom: 20px;
}

.sub-wrapper .sub-wrapper-cntnt p {
    font-size: 16px;
    color: var(--black-color);
    margin-bottom: 6px;
}

.sub-wrapper .sub-wrapper-cntnt h5 {
    font-size: 17px;
    color: var(--black-color);
    font-weight: 600;
    margin: 6px 0px;
}

.sub-wrapper-cntnt {
    display: flex;
    flex-direction: column;
}


.sub-wrapper {
    text-align: center;
}




.login-input {
    text-align: center;
    display: inline-grid;
}

.login-input label {
    font-size: 15px;
    color: #B9B9B9;
    font-weight: 300;
    margin-bottom: 10px;
}

.login-input input {
    border: none;
    background: transparent;
    padding-bottom: 10px;
    text-align: center;
    width: 350px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    margin: auto;
    border-radius: 0px !important;
}

.login-input input::placeholder {
    color: rgb(189, 189, 189);
}

.login-input input:focus {
    outline: none;
    border: none;
}

.sub-wrapper-cntnt p span {
    font-weight: 800;
    color: #3A3A3A;
}

.secondary-btn {
    line-height: 15px;
    height: 45px;
    padding: 0px 15px;
    background: linear-gradient(91deg, #2ba943 -0.01%, #0f341e 99.99%) !important;
    border: none;
    color: var(--white-color);
    transition: 1s;
    border-radius: 50px;
    width: fit-content;
    margin: auto;
    border-radius: 50px;
}

.secondary-btn:hover {
    background-color: #000;
    transition: 1s;
}

.reg-primary-span {
    color: #ddffd5;
    font-size: 11px;
    background: green;
    padding: 5px 15px;
    background: #ffffff1f;
    border: 1px solid #d5cfcf63;
    border-radius: 35px;
}





/*----------------- responsive start ----------------- */
@media only screen and (max-width: 1600px) {
    .harmounios-box h5 {
        font-size: 19px;
    }
}

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


    .gradient-text {
        font-size: 55px;
    }

    .vip-box {
        height: 450px;
    }

    .vip-box-img {
        height: 370px;
    }

    .old-events-img-box {
        height: 320px;
    }

    .partner-head {
        font-size: 30px;
    }

    .reg-partner {
        width: 300px;
    }

    .table-row .secondary-btn {
        padding: 0px 5px;
        font-size: 13px;
        height: 40px;
    }
}

@media only screen and (max-width: 1366px) {
    .banner-img {
        width: 500px;
    }

    .gradient-text {
        font-size: 50px;
    }

    .coming-dammam {
        height: 600px;
        padding-top: 170px;
    }

    .footer-contact a h5 {
        font-size: 19px;
    }

    .old-events-img-box {
        height: 300px;
    }

}

@media only screen and (max-width: 1280px) {
    .coming-dammam {
        height: 550px;
        padding-top: 140px;
    }

    .vip-box h4 {
        font-size: 20px;
    }

    .partner-head {
        font-size: 28px;
    }

    .old-events-img-box {
        height: 230px;
    }
}

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

    .red-bg,
    .pink-bg,
    .blue-bg {
        margin-top: 0px;
    }

    .vip-head {
        margin-bottom: 0px;
    }

    .vip-box {
        margin-top: 20px;
    }

    .vip-section {
        padding: 60px 0px 80px 0px;
    }

    .summury-wrapper {
        margin-top: 30px;
    }

}

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


    .banner-img {
        width: 450px;
    }

    .vip-box h4 {
        font-size: 18px;
    }

    .vip-box {
        height: 435px;
    }

    .old-events-img-box {
        height: 200px;
    }
}

@media only screen and (max-width: 1024px) {
    .sub-wrapper {
        width: 100%;
    }

    .gradient-text {
        font-size: 45px;
    }

    .banner-img {
        width: 400px;
    }

    .gradient-text-gold {
        font-size: 40px;
    }

    .media-house-wrapper-cntnt span {
        font-size: 200px;
    }

    .media-house-wrapper-cntnt span::after {
        bottom: 100px;
        left: -22px;
    }

    .harmonios-main {
        padding: 80px 0px;
    }

    .reg-partner {
        width: 270px;
    }

    .coming-dammam-cntnt h3 {
        font-size: 45px
    }

    .marquee span {
        font-size: 90px;
    }

    .coming-dammam {
        height: 450px;
        padding-top: 100px;
    }

    .inner-banner-content h3 {
        font-size: 40px;
    }

    .inner-banner-content h4 {
        font-size: 25px;
    }

    .sm-btns {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

}

@media only screen and (max-width: 991px) {
    .banner-cntnt .event-item i {
        height: 10px;
        width: 10px;
    }

    .custom-table-row {
        flex-direction: column;
        justify-content: center;
        gap: 15px;
    }

    .row.table-row {
        border: none;
    }


    .banner-text p {
        margin: 15px 0px;
        width: 90%;
    }

    .media-img {
        justify-content: start;
        padding-right: 0px;
    }

    .old-events-img-box {
        margin-bottom: 20px;
    }

    .row.table-row {
        flex-direction: column;
        justify-content: center;
        gap: 10px;
    }

    .register-btn {
        justify-content: center;
    }

    .terms-div {
        text-align: center;
    }

    .banner-data {
        margin: 10px 0px;
    }

    .old-events-img-box {
        height: 220px;
    }

    .sm-hide-btns {
        display: none;
    }

    .header .logo {
        width: auto;
    }

    .partner-head {
        width: 100% !important;
    }

    .header .logo img {
        width: 200px;
    }

    .green-bg,
    .red-bg,
    .pink-bg,
    .blue-bg {
        animation: none;
    }

    .privacy-policy-main {
        width: 100%;
    }

    .privacy-policy-main h4 {
        margin-bottom: 15px;
        font-size: 28px;
    }

    .privacy-policy-main h5 {
        font-size: 22px;
        margin-bottom: 10px;
        margin-top: 20px;
    }

    .privacy-policy-wrapper {
        padding-top: 50px;
    }

    .collapseTickets .table-row .col-lg-4 {
        text-align: center !important;
    }

    .header {
        flex-direction: column;
        gap: 10px;
        align-items: self-start;
        justify-content: start;
        width: 100%;
    }

    .banner {
        height: auto;
        padding-bottom: 150px;
    }

    .tickt-descp {
        text-align: center;
    }

    .ticket-outer h3 {
        margin-bottom: 10px;
    }

    .ticket-upgrade .success-message {
        padding: 0px;
    }

    .gitex-promo__card {
        margin-top: 20px;
    }

}


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

    .otp-inputs input {
        font-size: 15px;
    }

    .terms-div ul {
        gap: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer {
        padding-top: 30px;
    }

    .coming-dammam-cntnt h3 {
        font-size: 35px;
    }

    .harmonios-main .vip-head .red-div,
    .yellow-div,
    .blue-div {
        display: none;
    }

    .sub-head h3 {
        font-size: 30px;
    }

    .harmounios-box {
        height: 400px;
    }

    .harmounios-img {
        height: 330px;
    }

    .media-img img {
        width: 120px;
    }


    .footer h6 {
        font-size: 16px;
    }

    .partner-head {
        font-size: 30px !important;
    }

    .coming-dammam {
        padding: 50px 0px;
        height: auto;
    }

    .inner-banner-content h4 {
        font-size: 20px;
    }

    .login-input input {
        width: 100%;
    }

    .sub-wrapper-main {
        padding: 0px 0px 40px 0px;
    }

    .sub-wrapper img {
        width: 150px;
    }

    .sub-wrapper h4 {
        font-size: 30px;
    }

    .secondary-btn {
        padding: 0px 15px;
    }


    .breadcrumps ul {
        margin-bottom: 10px;
    }

    .ticket-count {
        padding: 20px 0px;
    }

    .summury-box {
        padding: 10px;
    }

    .summury-subbox {
        padding: 7px;
    }

    .old-events-wrapper {
        padding: 0px 20px;
    }

    .counter-cntnt span {
        font-size: 40px;
    }

    .rectangle-box {
        height: 100px;
        width: 100px;
    }

    .pl {
        width: 4em;
        height: 4em;
    }

    .reg-confirmed__info-box,
    .reg-confirmed__badge-columns {
        flex-direction: column;
    }

    .reg-confirmed__left,
    .reg-confirmed__right,
    .reg-confirmed__badge-columns>div {
        flex: 1 1 100%;
    }

    .visa-modal-footer {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

}

@media only screen and (max-width: 600px) {
    .counter-cntnt div {
        font-size: 15px;
    }
}

@media only screen and (max-width: 500px) {
    .sub-wrapper {
        padding: 10px;
    }
}


@media only screen and (max-width: 370px) {
    .premium-header .modal-title {
        font-size: 13px;
    }

    #redEditSelect {
        min-width: 200px;
        max-width: 200px;
    }
}


@media (max-width: 768px) {
    .badge-search-wrapper {
        padding: 15px;
        width: auto;
    }

    .dashboard {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
        padding: 10px 0px;
    }

    .sidebar .sidebar-logo {
        margin: 0px 0px 20px 20px;
        margin-bottom: 10px;
    }

    .search-input {
        padding: 10px 40px 10px 15px;
    }

    .sidebar ul li {
        padding: 0px;
    }

    .sidebar ul li a {
        margin-bottom: 0px;
    }

    .visitor_topright {
        display: flex;
        flex-direction: column;
    }
}


/* matchmaking dashboard */



.match-event-info {
    background: rgba(102, 126, 234, 0.1);
    padding: 10px 20px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    color: #667eea;
}

.matchmaking-main-content {
    min-height: calc(100vh - 200px);
}

.event-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
}

.stat-card {
    background: white;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.stat-number {
    font-size: 20px;
    font-weight: 700;
    color: #156128;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-group {
    margin-bottom: 20px;
}

.filter-label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: #555;
    font-size: 14px;
}

.filter-input,
.filter-select {
    width: 100%;
    padding: 12px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    transition: border-color 0.3s ease;
    background: white;
}

.filter-input:focus,
.filter-select:focus {
    outline: none;
    border-color: #667eea;
}

.checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 13px;
}

.checkbox-item:hover {
    background: #e5e7eb;
}

.checkbox-item.active {
    background: #4a126c;
    color: white;
}

.checkbox-item input {
    margin: 0;
    accent-color: white;
}

.apply-filters {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease;
    margin-top: 15px;
}

.apply-filters:hover {
    transform: translateY(-2px);
}

.attendees-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.attendees-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
}

.search-container {
    border-radius: 8px;
    margin: 0;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.search-wrapper {
    position: relative;
    max-width: 100%;
}

.match-making-search-input {
    width: 100%;
    padding: 15px 50px 15px 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
}

.match-making-search-input:focus {
    outline: none;
    border-color: #466c13;
    box-shadow: 0 0 0 3px rgba(70, 108, 19, 0.1);
}

.search-button {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: #466c13;
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-button:hover {
    background: #2f4a0d;
}

/* Responsive styles */
@media (max-width: 768px) {
    .search-container {
        padding: 15px;
    }

    .search-input {
        padding: 10px 45px 10px 15px;
    }
}

.attendees-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.attendees-list {
    display: none;
}

.attendees-list.active {
    display: block;
}

.attendees-grid.active {
    display: grid;
}

.attendee-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.attendee-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}



.attendee-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #d9f4ff;
    display: grid;
    place-content: center;
    color: #1b4353;
    font-weight: 600;
    font-size: 18px;
    position: relative;
}

.attendee-avatar img {
    height: 100%;
    width: 100%;
    border-radius: 100%;

}

.online-indicator {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 16px;
    height: 16px;
    background: #1fab11;
    border-radius: 50%;
    border: 3px solid white;
}

.attendee-basic-info {
    flex: 1;
}

.attendee-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #333;
}

.attendee-title {
    color: #666;
    font-size: 13px;
    margin-bottom: 3px;
}

.attendee-company {
    color: #667eea;
    font-size: 12px;
    font-weight: 500;
}

.compatibility-score {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.attendee-info {
    padding: 0 20px 20px;
}

.attendee-purpose {
    background: #effff7;
    color: #45574a;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    margin-bottom: 15px;
    text-align: left;
    font-weight: 500;
}

.attendee-interests {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 15px;
}

.interest-tag {
    background: #f5fffa;
    color: #086749;
    padding: 4px 8px;
    border: 1px solid green;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
}

.attendee-schedule {
    background: #fef7ff;
    color: #4a126c;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    margin-bottom: 5px;
    text-align: left;
    font-weight: 500;
}

.attendee-actions {
    display: flex;
    gap: 8px;
}

.action-btn {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
}

.connect-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.connect-btn:hover {
    transform: scale(1.05);
}

.message-btn {
    background: #f3f4f6;
    color: #374151;
}

.message-btn:hover {
    background: #e5e7eb;
}

.schedule-btn {
    background: #fef2f2;
    color: #dc2626;
}

.schedule-btn:hover {
    background: #fee2e2;
}

.networking-sidebar {
    backdrop-filter: blur(10px);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    height: fit-content;
}

.networking-sidebar h3 {
    font-size: 20px;
    font-weight: 600;
}

.networking-header {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
}

.quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 25px;
}

.quick-action-btn {
    padding: 15px;
    border: 1px solid #6e8365;
    border-radius: 10px;
    background: #f9fff5;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
}

.quick-action-btn:hover {
    border: 1px solid #4f5c49;
    background: #ecf8e4;
}

.quick-action-icon {
    font-size: 20px;
    margin-bottom: 5px;
}

.connections-list {
    flex: 1;
    margin-bottom: 20px;
}

.connection-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-bottom: 8px;
}

.connection-item:hover {
    background: #f8fafc;
}

.connection-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #d9f4ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1b4353;
    font-weight: 600;
    font-size: 14px;
    position: relative;
}

.new-connection {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 12px;
    height: 12px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid white;
}

.connection-info {
    flex: 1;
}

.connection-name {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 2px;
    color: #333;
}

.connection-status {
    font-size: 11px;
    color: #666;
}

.connection-time {
    font-size: 11px;
    color: #999;
}

.upcoming-sessions {
    background: linear-gradient(135deg, #FF7B3A, #FF512F, #D3322F, #BF2D1F, #8B1C13);
    color: white;
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 20px;
}

.sessions-title {
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 14px;
}

.session-item {
    background: rgba(255, 255, 255, 0.2);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 12px;
}

.session-time {
    font-weight: 600;
    margin-bottom: 3px;
}

.session-title {
    opacity: 0.9;
}

.ai-suggestions {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    padding: 20px;
    border-radius: 15px;
}

.ai-title {
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 14px;
}

.ai-suggestion {
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: 15px;
}

.ai-btn {
    background: white;
    color: #8b5cf6;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease;
    font-size: 12px;
}

.ai-btn:hover {
    transform: scale(1.05);
}

.floating-action {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #22741e 0%, #36891d 100%);
    border-radius: 50%;
    border: none;
    color: #1b4353;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(4, 105, 29, 0.4);
    transition: transform 0.3s ease;
    z-index: 999;
}

.floating-action:hover {
    transform: scale(1.1);
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-overlay.show {
    display: flex;
}


.profile-modal-content {
    text-align: center;
}

.profile-modal-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 32px;
    margin: 0 auto 20px;
}

.profile-details {
    text-align: left;
    margin: 20px 0;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f1f3f4;
}

.detail-label {
    font-weight: 500;
    color: #666;
}

.detail-value {
    color: #333;
}

.modal-actions {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.modal-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.modal-btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.modal-btn-secondary {
    background: #f3f4f6;
    color: #374151;
}

.modal-btn:hover {
    transform: translateY(-2px);
}

.list-attendee-card {
    display: flex;
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.list-attendee-card:hover {
    transform: translateX(5px);
}

.list-attendee-avatar {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 20px;
    margin: 20px;
    border-radius: 50%;
    position: relative;
}

.list-attendee-content {
    flex: 1;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list-attendee-info {
    flex: 1;
}

.list-attendee-actions {
    display: flex;
    gap: 10px;
}

.notification-banner {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: slideIn 0.5s ease;
}

.profile-attendee-head {
    background: white !important;
    display: flex;
    gap: 10px;
}

.attendee-match-reason {
    background: rgb(243, 243, 255);
    color: rgb(24, 24, 77);
}

.attendee-match-reason span {
    font-weight: 700;
}

@keyframes slideIn {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.notification-close {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 5px;
}

.vip-attendee-card {
    border: 2px solid green;
}

.attendee-vip {
    padding: 5px 20px;
    background: #f4f4f4;
    border-radius: 4px;
    color: #089f6f;
    margin-left: 10px;
    font-weight: 700;
}

/* Responsive Design */


@media (max-width: 768px) {



    .attendees-grid {
        grid-template-columns: 1fr;
    }

    .event-stats {
        grid-template-columns: 1fr 1fr;
    }

    .quick-actions {
        grid-template-columns: 1fr;
    }

    .matchmaking-main-content {
        grid-template-columns: 1fr;
    }

    .list-attendee-card {
        flex-direction: column;
    }

    .list-attendee-content {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }
}

.success-animation {
    animation: success 0.6s ease;
}

@keyframes success {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
        background: #10b981;
    }

    100% {
        transform: scale(1);
    }
}

/* matchmaking dashboard */




/* badge */
.badge-main-div {
    font-family: 'Alexandria';
    width: 397px;
    min-height: 500px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
}

.badge-main-div .header-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0px 0px 10px 0px;
    /* border-bottom: 1px solid #ebebeb; */
    background-position: left;
    background-repeat: no-repeat;
    background-size: cover;
}

.badge-main-div .header-logos img {
    width: 220px;
    background: rgb(255, 255, 255);
    padding: 10px 40px;
    border-radius: 0px 0px 20px 20px;
    position: relative;
    z-index: 5;
    margin-bottom: 30px;
    box-shadow: 0 5px 34px 0 rgb(0 0 0 / 2%);

}

.badge-main-div .badge-body {
    padding: 0px 0px;
    position: relative;
    z-index: 1;
}

.badge-main-div .badge-body::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(assets/img/CircleElement.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: .8;
    z-index: 3;
}


.badge-main-div .info {
    text-transform: uppercase;
}

.badge-main-div .info h4 {
    font-size: 30px;
    line-height: 30px;
    margin-bottom: 0px;
    text-align: center;
    color: #181818;
    margin-top: 0px;
    font-weight: 700;
    text-transform: uppercase;
}

.badge-main-div .info h6 {
    font-size: 17px;
    margin: 20px 0px;
    text-align: center;
    color: #00a5b8;
    font-weight: 300;
}

.badge-main-div .info h5 {
    font-size: 18px;
    margin-bottom: 30px;
    text-align: center;
    color: #292928;
    margin-top: 0px;
    font-weight: 300;
}



.badge-main-div .qr-code {
    background: #fff;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
    padding: 10px;
    width: fit-content;
    margin: 10px auto;
    margin-bottom: 40px;
}

.badge-main-div .qr-code img {
    width: 130px;
    height: 140px;
    object-fit: contain;
    margin: auto;
    display: block;

}

.badge-main-div .footer {
    text-align: center;
    display: flex;
    color: black;
    align-items: center;
    padding: 15px 0px;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

.badge-main-div .badge-bg-1 {
    background-image: url(assets/img/banner.webp);
}

.badge-main-div .badge-bg-2 {
    background-image: url(assets/img/orange-bg.webp);
}

.badge-main-div .badge-bg-3 {
    background-image: url(assets/img/purple-bg.webp);
}

.badge-main-div .badge-bg-4 {
    background-image: url(assets/img/blue-bg.webp);
}

.badge-main-div .footer-title h4 {
    font-size: 18px;
    margin-bottom: 0px;
    text-align: center;
    letter-spacing: 1px;
    color: #fff;
    font-weight: 800;
    margin-top: 0px;
    text-transform: uppercase;
}

.badge-main-div .footer-title h6 {
    font-size: 15px;
    margin-bottom: 5px;
    text-align: center;
    color: #fff;
    font-weight: 300;
    margin-top: 0px;
}

.badge-main-div .footer-title h6 span {
    font-weight: 600;
}

/* badge */





/* matchmaking profile */

.custom-tabs {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.tab-header {
    display: flex;
    gap: 10px;
    padding: 15px 0px;
    border-bottom: 1px solid #eee;
}


/* Tab Content Styles */



/* Agenda Styles */
.agenda-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.agenda-item {
    display: flex;
    gap: 20px;
    padding: 15px;
    border-radius: 8px;
    background: #f8f9fa;
    border-left: 4px solid #466c13;
}

.agenda-item.upcoming {
    border-left-color: #2196F3;
}

.agenda-time {
    text-align: center;
    min-width: 100px;
}

.agenda-time .time {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #333;
}

.agenda-time .date {
    font-size: 13px;
    color: #666;
}

.agenda-details {
    flex: 1;
}

.agenda-details h4 {
    margin: 0 0 5px 0;
    color: #333;
}

.attendees {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
}

.agenda-actions {
    display: flex;
    gap: 10px;
}

.btn-join,
.btn-reschedule {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
}

.btn-join {
    background: #466c13;
    color: white;
}

.btn-reschedule {
    background: transparent;
    border: 1px solid #ddd;
}

/* Chat History Styles */
.chat-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.chat-item {
    display: flex;
    gap: 15px;
    padding: 15px;
    border-radius: 8px;
    background: #fff;
    transition: all 0.3s ease;
    cursor: pointer;
}

.chat-item:hover {
    background: #f8f9fa;
}

.chat-item.unread {
    background: #f0f7ff;
}

.chat-avatar {
    position: relative;
    width: 45px;
    height: 45px;
}

.chat-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.status-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
}

.status-dot.online {
    background: #4CAF50;
}

.status-dot.offline {
    background: #999;
}

.chat-info {
    flex: 1;
}

.chat-time {
    font-size: 12px;
    color: #888;
}

.last-message {
    margin: 0;
    font-size: 13px;
    color: #666;
}

.ch-ag-btn {
    border: none;
    background: rgb(239, 255, 231);
    border: 1px solid #247e27;
    color: #247e27;
    border-radius: 8px;
    padding: 5px 8px;
    font-weight: 300;
    font-size: 15px;
}

.ch-ag-btn.active {
    background: #247e27;
    border: none;
    color: white;
}






/* payment reciept */

.main-body-ticket-reciept-body {
    background: linear-gradient(135deg, #38dc52 0%, #000000 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.main-body-ticket-reciept-body .receipt-container {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    max-width: 450px;
    width: 100%;
    position: relative;
}

.main-body-ticket-reciept-body .receipt-header {
    background: linear-gradient(9deg, #2ea641 0%, #0c4214 100%);
    padding: 30px 25px;
    text-align: center;
    color: white;
    position: relative;
}

.main-body-ticket-reciept-body .receipt-header::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    height: 20px;
    background: white;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.main-body-ticket-reciept-body .success-icon {
    background: rgba(255, 255, 255, 0.2);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 24px;
}

.main-body-ticket-reciept-body .receipt-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 5px;
}

.main-body-ticket-reciept-body .receipt-subtitle {
    font-size: 14px;
    opacity: 0.9;
}

.main-body-ticket-reciept-body .receipt-body {
    padding: 40px 25px 30px;
}

.main-body-ticket-reciept-body .event-info {
    text-align: center;
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
    border-radius: 15px;
    border: 2px dashed #e0e7ff;
}

.main-body-ticket-reciept-body .event-name {
    font-size: 20px;
    font-weight: 700;
    color: #106b39;
    margin-bottom: 8px;
}

.main-body-ticket-reciept-body .event-details {
    font-size: 16px;
    font-weight: 400;
    color: #073621c9;
    line-height: 1.6;
}

.main-body-ticket-reciept-body .receipt-details {
    margin-bottom: 25px;
}

.main-body-ticket-reciept-body .detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

.main-body-ticket-reciept-body .detail-row:last-child {
    border-bottom: none;
}

.main-body-ticket-reciept-body .detail-label {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
}

.main-body-ticket-reciept-body .detail-value {
    font-size: 14px;
    color: #1e293b;
    font-weight: 600;
}

.main-body-ticket-reciept-body .total-row {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    margin: 0 -10px;
    padding: 15px 10px;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
}

.main-body-ticket-reciept-body .total-row .detail-label {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.main-body-ticket-reciept-body .total-row .detail-value {
    font-size: 18px;
    font-weight: 700;
    color: #1e3c72;
}

.main-body-ticket-reciept-body .qr-code {
    text-align: center;
    margin: 25px 0;
    padding: 20px;
    background: #f8fafc;
    border-radius: 15px;
}

.main-body-ticket-reciept-body .qr-placeholder {
    width: 120px;
    height: 120px;
    background: linear-gradient(45deg, #e2e8f0 25%, transparent 25%),
        linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e2e8f0 75%),
        linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
    margin: 0 auto 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

.main-body-ticket-reciept-body .qr-text {
    font-size: 12px;
    color: #64748b;
    margin-top: 5px;
}

.main-body-ticket-reciept-body .receipt-footer {
    text-align: center;
    padding: 20px 25px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.main-body-ticket-reciept-body .footer-text {
    font-size: 12px;
    color: #64748b;
    line-height: 1.5;
}

.main-body-ticket-reciept-body .confirmation-number {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
    margin-top: 10px;
}

@media print {
    .main-body-ticket-reciept-body {
        background: white;
        padding: 0;
    }

    .main-body-ticket-reciept-body .receipt-container {
        box-shadow: none;
        max-width: none;
    }
}

.main-body-ticket-reciept-body .tickets-section {
    margin-bottom: 25px;
}

.main-body-ticket-reciept-body .ticket-item {
    background: linear-gradient(135deg, #f8faff 0%, #f0f2ff 100%);
    border: 2px solid #e0e7ff;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}

.main-body-ticket-reciept-body .ticket-item::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #e0e7ff;
}

.main-body-ticket-reciept-body .ticket-item::after {
    content: '';
    position: absolute;
    right: -5px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #e0e7ff;
}

.main-body-ticket-reciept-body .ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.main-body-ticket-reciept-body .ticket-type {
    font-weight: 700;
    color: #1e3c72;
    font-size: 14px;
}

.main-body-ticket-reciept-body .ticket-price {
    font-weight: 700;
    color: #059669;
    font-size: 16px;
}

.main-body-ticket-reciept-body .ticket-details-small {
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
    position: relative;
    margin: 20px 0;
}


/* payment reciept */

.vat-invoiclabel-span {
    font-size: 11px;
    font-weight: 400;
}

.form-check-label {
    font-weight: 300;
}

.form-check-label span {
    font-weight: 600;
}

.visa-reg-form-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}




/* form promocode */

.reg-form-promodiv {
    position: relative;
    background: linear-gradient(91deg, #28993e -0.01%, #134122 99.99%);
    padding: 20px;
    border-radius: 15px;
    margin: 20px 0px;
}

.reg-form-promodiv::after {
    position: absolute;
    content: "";
    background-image: url(../img/footer-ab.svg);
    background-position: left top;
    transform: rotate(180deg);
    top: 0px;
    left: -210px;
    right: auto;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: 60%;
}

.reg-form-promodiv input {
    background: transparent;
    height: 50px;
    width: 100%;
    border: none;
    outline: none;
    padding-left: 20px;
    border-radius: 5px;
    color: white;
    border: 1px solid #fff !important;
    font-weight: 600;
}

.reg-form-promodiv input::placeholder{
    color: white !important;
    opacity: 0.9;
    font-weight: 200;
}

.promo-bg-btn {
    background: white !important;
    color: #1a5b2b !important;
}

.reg-form-promodiv h6 {
    color: white;
    font-weight: 500;
    margin-bottom: 10px;
}

.reg-form-promodiv-inner {
    position: relative;
    z-index: 999;
}

.promo_error{
    font-size: 14px;
    color:#fff;
    margin: 3px 0px;
}
/* form promocode */

/* promo result */
.ticket-card {
  max-width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  margin-top: 20px;
  border: 1px solid #e2e8f0;
}

.ticket-header-promo-reslt {
  background: linear-gradient(91deg, #022a17 -0.01%, #01551D 99.99%) !important;
  color: #fff;
  padding: 20px;
}

.ticket-header-promo-reslt h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}


.original-price-promo {
  color: #888;
  font-size: 12px;
}

.original-price-promo-amount{
      font-size: 15px;
    text-decoration: line-through;
    font-weight: 500;
    color: #595656;
}

.ticket-select-bg{
    border-radius: 0px 0px 10px 10px;
}

.offer-badge {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0;
  padding: 8px 16px;
  border-radius: 30px;
    background: linear-gradient(91deg, #00B95E -0.01%, #A8EA58 99.99%) !important;
  color: white;
  font-weight: bold;
  font-size: 14px;
}

.offer-badge .offer-text {
    font-style: italic;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 0px 0px 10px #01551d !important;
}

.offer-text-name{
    font-size: 8px;
    font-weight: 600;
    text-transform: uppercase;
}

.offer-badge span{
    line-height: normal;
}

.ticket-divider {
    border: none;
    border-top: 1px solid #ccc;
    margin: 10px 0 5px 0px;  
}

.final-price-row {
  display: flex;
  justify-content: end;
  align-items: center;
}

.final-label {
  color: #01551d;
  font-weight: bold;
  font-size: 18px;
}

.final-price-details {
  text-align: right;
}

.final-price {
  color: #01551d;
  font-weight: bold;
  font-size: 18px;
}

.vat-text {
  font-size: 10px;
  color: #666;
}


 @media (max-width: 768px) {
    .ticket-card {
        margin-top: 20px;
    }

    .ticket-header-promo-reslt h2 {
        font-size: 18px;
    }


    .final-label {
        font-size: 16px;
    }

    .final-price {
        font-size: 18px;
    }

    .reg-form-promodiv{
        padding: 10px;
    }

   .ticket-title-row span:last-child{
    text-align: left;
   }
}

 @media (max-width: 420px) {
    .offer-badge{
        font-size: 12px;
        padding: 8px 9px;
    }
 }



/* promo result */

.reg-billing-form {
    background: #fafafa;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #ebebeb;
    margin-top: 10px;
    margin-bottom: 20px;
}

.total-row .vat-info {
    margin: 0px;
    font-weight: 400;
}









/* audit logs */

.audit-log-filter .filters {
    margin-bottom: 20px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
}

.audit-log-filter .filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.audit-log-filter .filter-group label {
    font-size: 12px;
    color: #6c757d;
    font-weight: 500;
}

.audit-log-filter .filter-group input,
.audit-log-filter .filter-group select {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
}

.audit-log-filter .filter-btn {
    padding: 8px 15px;
    background: #05250d;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
}

.audit-log-filter .filter-btn:hover {
    background: #0056b3;
}

.badge-status.badge-approved-us-hist {
    background: #b4f2b4;
    padding: 2px 5px;
    border-radius: 50px;
    color: #008800;
}

.badge-status.badge-pending-us-hist {
    background: #f2f0b4;
    padding: 2px 5px;
    border-radius: 50px;
    color: #b47c11;
}

.badge-status.badge-faild-us-hist {
    background: #fcaabd;
    padding: 2px 5px;
    border-radius: 50px;
    color: #9a1f3b;
}

.user-history-tabs .nav-link.active {
    background: #580041;
    color: white;
}

.user-history-tabs .nav-link {
    color: #580041;
}

.if-yes {
    font-weight: 600;
}

.ps-10-ct {
    padding-left: 10px !important;
}

.badge-overlay-after {
    /* filter: blur(7px);
            user-select: none; */
}

.tab-cntnt-no-pad {
    padding: 0px;
}

.fade:not(.show) {
    display: none;
    transition: height 0.3s ease, visibility 0.3s ease;
}

.ticket-btn {
    height: 40px;
    width: auto;
    border: none;
    background: linear-gradient(91deg, #215423 -0.01%, #4c8a25 99.99%);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 9px;
    font-size: 14px;
    padding: 0px 25px;
    margin: 10px 0px;
}

.visa-field-wrapper {
    background: #fff;
    border: 1px solid #ececec;
    padding: 10px;
    border-radius: 8px;
    margin-top: 10px;
}

.form-card .form-control,
.form-card .form-select {
    font-size: 14px !important;
}

.table-main-div{
        width: 100%;
    overflow-x: scroll;
    /* min-width: 100vw;
    max-width: 100vw; */
}

/* .badge-table th, td{
    min-width: 200px;
} */

@media (max-width: 1100px) {
    .form-end-btn {
        flex-direction: column;

    }
}


@media (max-width: 1024px) {
    .table-main-div-scrollable {
        width: auto;
        overflow-x: scroll;
    }

    .user-history-tabs .nav-link {
        font-size: 12px;
    }

}

@media (max-width: 768px) {
    .rate-count {
        flex-direction: column;
    }
}

@media (max-width: 420px) {
    .reg-form-width {
        padding: 30px 5px;
    }

    .registration-container {
        padding: 0px 5px 15px 5px;
    }

    .applied-promo-details {
        font-size: 13px;
    }

    .reg-confirmed__left {
        margin-bottom: 30px;
        border-bottom: 1px solid #b0b0b0;
        padding-bottom: 15px;
    }

    .reg-confirmed__title {
        font-size: 20px;
    }

    .form-end-btn label {
        max-width: 80%;
        text-align: left;
    }

    .form-end-btn {
        align-items: start;
    }

    .min-height-70 {
        min-height: calc(88vh - 80px);
    }

    .details-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}



@media (max-width: 375px) {}

.coming-soon {
    position: relative;
}

.coming-soon::after {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background-image: url(../img/coming.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40%;
    text-transform: uppercase;
    letter-spacing: 2px;
    content: "";
    z-index: 998;
    /* key part: enable backdrop blur */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    /* for Safari */
}


/* ticket comparison */


.head-text-buttons {
    margin-bottom: 20px;
}


.ticketTab {
    display: flex;
    justify-content: end;
    gap: 10px;
    background: white;
    width: fit-content;
    padding: 5px;
    border-radius: 50px;
    box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.25);
}

.cmp-row {
    display: flex;
    align-items: self-start;
    gap: 10px;
    justify-content: center;
}

.cmp-row_first {
    width: 20%;
    overflow: hidden;
}

.cmp-row_second {
    width: 80%;
    display: flex;
    align-items: self-start;
    gap: 10px;
    position: relative;
}

.cmp-accss_rows {
    border-bottom: 1px solid #e6e6e6;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 65px;
    max-height: 65px;
    background-color: #fff;
}

.cmp-accss_rows img {
    height: 40px;
    width: 40px;
    object-fit: contain;
    display: none;
}

.cm-header-img {
    width: 40px;
}

.cmp-accss_rows h5 {
    margin: 0px;
    font-size: 14px;
    font-weight: 400;
}

.cmp-accss_rows h5 span {
    font-weight: 700;
}

.cmp-check-box-div {
    border-top: 1px solid #ebebeb;
    min-height: 65px;
    display: flex;
    max-height: 65px;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    flex-direction: column;
}

.cmp-check-box-div h6 {
    font-weight: 300;
    font-size: 12px;
    text-align: center;
}

.cmp-check-box-div h6 span {
    font-weight: 600;
}


.cmp-check-box-div .tick-mark {
    width: 25px;
    margin: auto;
}

.cmp-ticket-wrapper {
    max-width: 250px;
    min-width: 250px;
    overflow: hidden;
    border-radius: 20px;
    background: white;
    border: 1px solid #c7c7c7;
}

.cm-header {
    min-height: 250px;
}

.cmp-accss_rows-main-wrapper {
    border: 1px solid #ebebeb;
    border-bottom-left-radius: 20px;
    overflow: hidden;
}

.feature-main-header {
    background: #fff;
    border-top-left-radius: 20px;
    border: 1px solid #e6e6e6;
    border-bottom: 0px;
}

.cmp-uncheck-box-div {
    background: #f5f5f5;
}


.cmp-slider-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-behavior: smooth;
    width: 100%;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}

.cmp-ticket-wrapper .pass-type {
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.cmp-ticket-wrapper .ticket-btn {
    font-size: 12px;
    margin: 0px;
}

.cmp-ticket-wrapper .exc-title-padding {
    padding-left: 65px !important;
}



.cmp-slider-track {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

.cmp-slider-track::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #401161;
    color: #ffffff;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    font-size: 20px;
    transition: background 0.2s;
    opacity: 0.95;
    transition: .5s;
}

.slider-arrow:hover {
    background-color: #381205;
    transform: translateY(-2px);
    transition: .5s;
}

.slider-arrow-left {
    left: -18px;
}

.slider-arrow-right {
    right: -18px;
}

.slider-arrow:active {
    background: #e6f4e6;
}

.cmp-ticket-wrapper .pass-header {
    min-height: 110px;
}

.cm-features {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    margin: 0px;
}

.pass-select-checkbox {
    position: absolute;
    bottom: 8px;
    z-index: 99999 !important;
    right: 8px;
    width: 18px;
    height: 18px;
    accent-color: #000000;
    cursor: pointer;
    border-radius: 15px;
    border: none !important;
}

.pass-select-checkbox:checked {
    border: 2px solid #4c9232;
}

.cmp-ticket-wrapper .coming-soon::after {
    border-radius: 30px;
}

.cmp-ticket-wrapper .pass-price {
    min-height: 45px;
}

.cmp-ticket-wrapper .pass-header::after {
    background-size: 50%;
}


/* new line through */


.cmp-offer-cut .pass-price{
    position: relative;
    min-height: max-content;
    align-items: center;
}

.cmp-offer-cut .pass-price::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px; /* Custom thickness */
    background-color: red; /* Custom color */
    pointer-events: none;
}

.cm-header .price-offer{
    margin: 0px;
}

@media (max-width: 768px) {
    .price-offer{
        font-size: 12px;
    }
}

@media (max-width: 400px) {
    .price-offer{
        font-size: 11px;
    }
}

/*404 error */

.error-bg {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    background-image: radial-gradient(circle at 20% 20%, rgb(46 212 82 / 55%) 0%, #0f622163 40%), radial-gradient(circle at 40% 30%, rgb(8 108 21 / 42%) 0%, #000000cc 50%), radial-gradient(circle at 80% 20%, rgb(57 156 70 / 30%) 0%, #000000 40% 40%);
}

.error-bg img {
    width: 400px;
}

.error-bg h6 {
    font-size: 18px;
    font-weight: 500;
    text-align: left;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.error-bg h6 span {
    font-size: 15px;
    font-weight: 200;
}

.error-bg h3 {
    font-size: 120px;
    font-weight: 700;
    background: linear-gradient(90deg, #abfca2, #46aa77, #60aa6d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.error-bg h2 {
    font-size: 40px;
    font-weight: 700;
    background: linear-gradient(90deg, #abfca2, #46aa77, #60aa6d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-transform: uppercase;
}

.error-bg a button {
    margin-top: 10px;
}

@media (max-width: 991px) {
    .error-bg {
        flex-direction: column;
        padding: 15px;
    }

    .error-bg img {
        width: 200px;
    }

    .error-bg h2 {
        font-size: 20px;
        text-align: center;
    }

    .error-bg h6 {
        font-size: 15px;
        text-align: center;
    }

    .error-bg a button {
        margin: auto;
        display: block;
    }

    .error-bg h3 {
        font-size: 50px;
        text-align: center;
    }
}



    .error-bg h3 {
        font-size: 40px;
    }

    .error-bg h2 {
        font-size: 18px;
    }

    .error-bg h6 {
        font-size: 14px;
    }


/*404 error */



@media (max-width: 991px) {


    .cm-header .pass-price-out{
        padding: 10px ;
    }
    .cmp-accss_rows img {
        display: none;
    }

    .cmp-accss_rows {
        padding: 5px;
    }

    /* .cmp-ticket-wrapper .ticket-exclusive {
        display: none;
    } */

    .cmp-ticket-wrapper {
        min-width: 100px;
        max-width: 100px;
    }

    .cmp-ticket-wrapper .pass-header {
        padding-left: 10px !important;
        min-height: auto;
        padding: 5px;
        min-height: 80px;
    }

    .exc-title-padding {
        padding-left: 10px !important;
    }

    .cmp-check-box-div .tick-mark {
        width: 18px;
    }

    .cm-header {
        min-height: 150px;
        max-height: 150px;
    }

    .cmp-accss_rows h5 {
        font-size: 10px;
    }

    .cmp-ticket-wrapper .pass-type {
        font-size: 10px;
        font-weight: 300;
    }

     .cmp-ticket-wrapper .pass-type a {
        display: none;
    }

    

    .cmp-ticket-wrapper .ticket-btn {
        display: none;
    }

    .cmp-ticket-wrapper .pass-price {
        font-size: 11px;
    }

    .cmp-ticket-wrapper .pass-price .vat {
        display: none;
    }

    .cmp-row {
        gap: 5px;
    }

    .cmp-slider-track {
        gap: 5px;
    }

    .cm-features {
        text-transform: uppercase;
        transform: rotate(270deg);
        font-size: 15px;
    }

    .cmp-ticket-wrapper {
        border-radius: 5px;
    }

    .slider-arrow {
        display: none;
    }

    .badgeafterTab.tab {
        padding: 8px 17px;
        font-weight: 400;
        font-size: 12px;
        color: black;
    }

    .cmp-row_second {
        width: 75%;
    }

    .cmp-row_first {
        width: 75%;
    }

    .cmp-check-box-div {
        min-height: 55px;
        max-height: 55px;
    }

    .cmp-accss_rows {
        min-height: 55px;
        max-height: 55px;
    }

    .cmp-ticket-wrapper .pass-header::after {
        background-size: 80%;
    }

    .cmp-ticket-wrapper .pass-header::before {
        background-size: 80%;
    }

    .cmp-ticket-wrapper .number-input-container {
        display: none;
    }

    .cm-header-img {
        display: none;
    }

    .premium-header {
    font-size: 15px;
    }
}

@media (max-width: 600px) {

    .slider-arrow-left {
        left: 0;
    }

    .slider-arrow-right {
        right: 0;
    }

    .cmp-ticket-wrapper .ticket-best-seller{
        display: none;
    }
}




/* mobile sidebar */
#mobileSidebarNav {
    display: none;
}

#sidebarNav {
    display: none;
}

.side-bar-main-head {
    padding: 10px;
    background: #042407;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1202;
}

.side-bar-main-head img {
    width: 120px;
}

.sidebar-toggle {
    display: none;
    z-index: 1201;
    width: 35px;
    height: 35px;
    background: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: 0 2px 12px #01378822;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background 0.2s;
    flex-direction: column;
}

.sidebar-toggle:focus-within {
    border: none;
    outline: none;
}

.sidebar-toggle .toggle-bar {
    display: block;
    width: 19px;
    height: 2px;
    margin: 3px auto;
    background: #051d02;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(.4, 0, .2, 1);
}

/* Responsive */
@media (max-width: 991px) {
    #mobileSidebarNav {
        display: block;
    }

    .visitor_topright {
        padding-top: 80px;
    }


    #sidebarNav {
        display: block;
    }

    .sidebar-toggle {
        display: flex;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: -260px;
        width: 240px;
        height: 100vh;
        background: #042407;
        box-shadow: 2px 0 16px #01378811;
        z-index: 1200;
        transition: left 0.35s cubic-bezier(.4, 0, .2, 1);
    }

    .sidebar.open {
        left: 0;
    }

    body.sidebar-open {
        overflow: hidden;
    }

    #sidebarNav ul {
        padding-top: 50px;
    }

    .badgeafterTab {
        min-width: 130px;
    }
}

/* Animate toggle to X when open */
.sidebar-toggle.open .toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.sidebar-toggle.open .toggle-bar:nth-child(2) {
    opacity: 0;
}

.sidebar-toggle.open .toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar ul li a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-logo {
    width: 140px;
    margin: 0 auto 20px auto;
    display: block;
}



/* currency dropdown */
.currency-container select {
    height: 45px;
    padding: 0px 20px;
    border: 1px solid #125e20;
    border-radius: 60px;
    background-position: right 10px;

        appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: url("data:image/svg+xml;utf8,<svg fill='%23125e20' height='12' viewBox='0 0 24 24' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 17px;
    cursor: pointer;
}



/* ingo social button */
.ingo_login_widget_manual_fields {
    display: none !important;
}

.ingo_login_widget_hr {
    display: none !important;
}

.ingo_login_widget_bottom {
    display: none !important;
}

.ingo_login_widget_header {
    display: none !important;
}

.ingo_login_widget {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-content: center !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    gap: 5px !important;
    border: none !important;
}

.ingo_login_widget_social_button_linkedin {
    width: fit-content !important;
}

.ingo_login_widget_social_button_twitter {
    width: fit-content !important;
}

.ingo_login_widget_social_button_facebook {
    width: fit-content !important;
}

.ingo_login_widget_social_button_icon {
    border-radius: 6px !important;
    min-height: 48px !important;
}

.ingo_login_widget_social_button_text {
    font-size: 18px !important;
}

/* ingo social button */




/* payment container */

        .payment_methode {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
        }

        .payment-container {
            display: flex;
            gap: 20px;
            max-width: 800px;
        }

        .payment-option {
            flex: 1;
            background: white;
            border-radius: 12px;
            padding: 20px;
            position: relative;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .payment-option.selected {
            border-color: #00bcd4;
            background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);
        }

        .payment-option.unselected {
            border-color: #e0e0e0;
            background: #f9f9f9;
        }

        .payment-option:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .radio-container {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 15px;
        }

        .payment_methode .custom-radio {
            width: 20px;
            height: 20px;
            border: 2px solid #ddd;
            border-radius: 50%;
            position: relative;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .payment_methode .payment-option.selected .custom-radio {
            border-color: #00bcd4;
            background: white;
        }

        .payment_methode .payment-option.selected .custom-radio::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            background: #00bcd4;
            border-radius: 50%;
        }

        .payment_methode .payment-option.selected .custom-radio::before {
            content: '✓';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 10px;
            font-weight: bold;
            background: #00bcd4;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .payment_methode .payment-option.selected .custom-radio::after {
            display: none;
        }

        .payment_methode .payment-content {
            flex: 1;
        }

        .payment_methode .payment-title {
            font-size: 18px;
            font-weight: 600;
            color: #333;
            margin-bottom: 5px;
        }

        .payment_methode .payment-subtitle {
            font-size: 14px;
            color: #666;
            margin-bottom: 20px;
        }

        .payment_methode .payment-logos {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .payment_methode .logo {
            height: 50px;
            display: flex;
            align-items: center;
            font-weight: bold;
            font-size: 20px;
        }

        .payment_methode .visa {
            color: #1a1f71;
            background: linear-gradient(45deg, #1a1f71, #3f51b5);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .payment_methode .mastercard {
            position: relative;
            width: 40px;
            height: 24px;
        }

        .payment_methode .mastercard::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 24px;
            height: 24px;
            background: #eb001b;
            border-radius: 50%;
        }

        .payment_methode .mastercard::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            width: 24px;
            height: 24px;
            background: #ff5f00;
            border-radius: 50%;
        }

        .payment_methode .cmi {
            color: #e53e3e;
            font-weight: bold;
        }

        .payment_methode .amex {
            color: #006fcf;
            background: linear-gradient(45deg, #006fcf, #0099cc);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .payment_methode .apple-pay {
            color: #000;
            background: linear-gradient(45deg, #000, #333);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 20px;
        }

        .payment_methode .samsung-pay {
            color: #1428a0;
            font-size: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            line-height: 1.2;
        }

        .payment_methode .samsung-pay .samsung {
            font-weight: bold;
        }

        .payment_methode .samsung-pay .pay {
            font-weight: normal;
        }

        .payment_methode input[type="radio"] {
            display: none;
        }

        @media (max-width: 768px) {
            .payment-container{
                flex-direction: column;
            }
        }
/* payment container */

/* mobile sidebar */

@media (min-width: 1720px) {
    .content {
        padding: 40px 260px;
    }

    .inner-banner {
        padding: 40px 260px;
    }
}

@media (min-width: 1920px) {
  .content {
    padding: 40px 300px;
  }

  .inner-banner {
    padding: 40px 300px;
  }
}

@media (min-width: 2100px) {
  .content {
    padding: 40px 450px;
  }

  .inner-banner {
    padding: 40px 450px;
  }
}

@media (min-width: 5000px) {
    .content {
        padding: 40px 2200px;
    }

    .inner-banner {
        padding: 40px 2200px;
    }
}