/*======================================
Google Fonts
======================================*/

:root {

    --primary: #b548ff;
    --secondary: #8d39ff;
    --accent: #ff6ae5;

    --dark: #05071d;
    --dark2: #0b1030;
    --card: #121733;

    --white: #ffffff;
    --text: #d8d9e7;

    --border: rgba(255, 255, 255, .08);

    --gradient: linear-gradient(90deg, #7d3cff, #cb53ff);

    --shadow: 0 25px 60px rgba(155, 70, 255, .28);

}

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

html {
    scroll-behavior: smooth;
}

body {

    font-family: 'Poppins', sans-serif;

    background: var(--dark);

    color: #fff;

    overflow-x: hidden;

}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
}

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

.container {

    max-width: 1320px;

}

/*======================================
Navbar
======================================*/

.navbar {

    background: rgba(4, 7, 30, .95);

    backdrop-filter: blur(18px);

    padding: 18px 0;

    transition: .4s;

    z-index: 999;

    border-bottom: 1px solid rgba(255, 255, 255, .05);

}

.navbar-brand img {

    height: 60px;

}

.nav-item {

    margin: 0 8px;

}

.nav-link {

    color: #fff;

    font-weight: 500;

    font-size: 15px;

    transition: .35s;

    position: relative;

}

.nav-link:hover {

    color: var(--accent);

}

.nav-link.active {

    color: #fff !important;

}

.nav-link::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -8px;

    width: 0;

    height: 2px;

    background: var(--gradient);

    transition: .35s;

}

.nav-link:hover::after,

.nav-link.active::after {

    width: 100%;

}

.register-btn {

    padding: 13px 30px;

    border-radius: 12px;

    color: #fff;

    font-weight: 600;

    background: var(--gradient);

    box-shadow: 0 12px 35px rgba(174, 71, 255, .45);

    transition: .4s;

}

.register-btn:hover {

    color: #fff;

    transform: translateY(-3px);

}

.hero-buttons{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    margin-top:45px;
}

.hero-buttons a{
    min-width:190px;
}

.register-btn-1 {

    padding: 13px 30px;

    border-radius: 12px;

    color: #fff;

    font-weight: 600;

    background: var(--gradient);

    box-shadow: 0 12px 35px rgba(174, 71, 255, .45);

    transition: .4s;

}

.register-btn-1:hover {

    color: #fff;

    transform: translateY(-3px);

}


/*======================================
Hero
======================================*/

.hero-section {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    overflow: hidden;

    color: #fff;

}

/* Background Video */

.hero-bg-video {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    z-index: -3;

}

/* Dark Overlay */

.hero-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(90deg,
            rgba(5, 7, 29, .88) 0%,
            rgba(5, 7, 29, .78) 45%,
            rgba(5, 7, 29, .55) 100%);

    z-index: -2;

}

/* Optional Purple Glow */

.hero-section::before {

    content: "";

    position: absolute;

    width: 600px;

    height: 600px;

    right: -150px;

    top: -120px;

    border-radius: 50%;

    background: rgba(180, 70, 255, .18);

    filter: blur(120px);

    z-index: -1;

}

.hero-section::after {

    content: "";

    position: absolute;

    inset: 0;

    background: url("");

    opacity: .06;

}

.hero-section .container {

    position: relative;

    z-index: 2;

}

.hero-section h1 {

    font-family: 'Playfair Display', serif;

    font-size: 44px;

    line-height: 1.12;

    font-weight: 800;

    margin-bottom: 25px;

}

.hero-section h1 span {

    color: #c957ff;
    font-size: 25px;

}

.hero-section p {

    font-size: 18px;

    color: var(--text);

    line-height: 1.9;

    max-width: 620px;

}

.hero-info {

    display: flex;

    flex-wrap: wrap;

    gap: 28px;

    margin-top: 35px;

}

.hero-info div {

    display: flex;

    align-items: center;

    gap: 12px;

    color: #fff;

    font-weight: 500;

}

.hero-info i {

    width: 48px;

    height: 48px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 255, 255, .05);

    color: #cb53ff;

    font-size: 18px;

}

.hero-buttons {

    margin-top: 45px;

    display: flex;

    gap: 20px;

}

.hero-counter {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;

}

.hero-counter div {

    backdrop-filter: blur(12px);

    background: rgba(255, 255, 255, .08);

    border: 1px solid rgba(255, 255, 255, .12);

    border-radius: 18px;

    padding: 30px;

    text-align: center;

}

.btn-register {

    background: var(--gradient);

    color: #fff;

    padding: 18px 42px;

    border-radius: 14px;

    font-weight: 600;

    transition: .35s;

    box-shadow: 0 15px 35px rgba(168, 69, 255, .45);

}

.btn-register:hover {

    color: #fff;

    transform: translateY(-5px);

}

.btn-video {

    border: 2px solid rgba(255, 255, 255, .25);

    color: #fff;

    padding: 18px 38px;

    border-radius: 14px;

    transition: .35s;

}

.btn-video i {

    margin-right: 10px;

    color: #cb53ff;

}

.btn-video:hover {

    color: #fff;

    background: rgba(255, 255, 255, .08);

}

.hero-image {

    width: 100%;

    max-width: 620px;

    margin: auto;

    animation: float 5s ease-in-out infinite;

    filter: drop-shadow(0 30px 80px rgba(180, 75, 255, .45));

}

@keyframes float {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-18px);

    }

}

.hero-counter {

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 25px;

    margin-top: 90px;

}

.hero-counter div {

    text-align: center;

    padding: 30px;

    background: rgba(255, 255, 255, .04);

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 18px;

    backdrop-filter: blur(14px);

    transition: .35s;

}

.hero-counter div:hover {

    transform: translateY(-8px);

    box-shadow: var(--shadow);

}

.hero-counter h2 {

    color: #cb53ff;

    font-size: 42px;

    margin-bottom: 8px;

    font-weight: 700;

}

.hero-counter p {

    color: #d9d9e9;

    font-size: 15px;

}

.hero-bottom-curve{

position:absolute;

bottom:0;

left:0;

width:100%;

z-index:1;

}

.hero-bottom-curve svg {

    width: 100%;

    height: 170px;

    display: block;

}

.navbar-toggler {

    border: none;

    color: #fff;

    font-size: 28px;

}

.navbar-toggler:focus {

    box-shadow: none;

}



/*==============================
ABOUT
==============================*/

.about-section {

    background: #ffffff;

    position: relative;

    padding: 100px 0;

}

/* .about-section::before{

content:"";

position:absolute;

top:-70px;

left:0;

width:100%;

height:80px;

background:#fff;

border-radius:0 0 50% 50%;

} */

.about-media {

    display: grid;

    grid-template-columns: 3fr -0fr;

    gap: 25px;

    align-items: center;

}



.video-card {

    height: 100%;

    border-radius: 25px;

    overflow: hidden;

    box-shadow: 0 30px 70px rgba(177, 72, 255, .25);

}

.video-card video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

}

.section-title h2 {

    font-family: 'Playfair Display', serif;

    font-size: 42px;

    font-weight: 700;

    margin-bottom: 20px;

    color: #111;

}

.section-title p {

    font-size: 15px;

    line-height: 1.4;

    color: #555;

}

.feature-box {

    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding: 10px;

    border-radius: 20px;

    background: #fff;

    border: 1px solid #ececec;

    transition: .35s;

    height: 100%;

}

.feature-box {

    position: relative;

    overflow: hidden;

    display: flex;
    align-items: flex-start;
    gap: 18px;

    padding: 22px;

    border-radius: 20px;

    background: #fff;

    border: 1px solid #ececec;

    transition: .4s;

    height: 100%;

}

/* Top Right Curve */

.feature-box::before {

    content: "";

    position: absolute;

    width: 180px;

    height: 180px;

    border: 2px solid rgba(181, 72, 255, .18);

    border-radius: 50%;

    top: -135px;

    right: -120px;

    transition: .4s;

}

/* Bottom Left Curve */

.feature-box::after {

    content: "";

    position: absolute;

    width: 140px;

    height: 140px;

    border: 2px solid rgba(181, 72, 255, .15);

    border-radius: 50%;

    bottom: -105px;

    left: -95px;

    transition: .4s;

}

.feature-box:hover::before {

    border-color: #b548ff;

    transform: scale(1.08);

}

.feature-box:hover::after {

    border-color: #cb53ff;

    transform: scale(1.08);

}

.feature-box:hover {

    transform: translateY(-8px);

    box-shadow: 0 25px 60px rgba(180, 75, 255, .15);

}

.feature-box .icon {

    width: 62px;

    height: 62px;

    border-radius: 50%;

    background: linear-gradient(135deg, #7d3cff, #cb53ff);

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 22px;

    flex-shrink: 0;

}

.feature-box h5 {

    font-size: 15px;

    font-weight: 600;

    margin-bottom: 8px;

    color: #222;

}

.feature-box p {

    margin: 0;

    font-size: 13px;

    color: #666;

    line-height: 1.4;

}

/*=========================
Featured Speakers
==========================*/

.speakers-section {

    padding: 110px 0;

    background: #070b25;

}

.section-heading {

    max-width: 700px;

    margin: auto auto 20px;

}

.section-tag {

    display: inline-block;

    background: rgba(181, 72, 255, .12);

    color: #c858ff;

    padding: 8px 22px;

    border-radius: 30px;

    font-weight: 600;

    margin-bottom: 5px;

}

.section-heading h2 {

    font-size: 30px;

    font-family: 'Playfair Display', serif;

    margin-bottom: 5px;

}

.section-heading p {

    color: #cfd1ea;

    line-height: 1.9;

}

.speaker-card {

    background: #101633;

    border-radius: 22px;

    padding: 35px 25px;

    text-align: center;

    border: 1px solid rgba(255, 255, 255, .08);

    transition: .4s;

    height: 100%;

}

.speaker-card:hover {

    transform: translateY(-10px);

    box-shadow: 0 25px 70px rgba(184, 78, 255, .28);

}

.speaker-image {

    width: 160px;

    height: 160px;

    border-radius: 50%;

    overflow: hidden;

    margin: auto;

    border: 5px solid #b548ff;

}

.speaker-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.speaker-content {

    margin-top: 25px;

}

.speaker-list li {

    display: flex;

    align-items: center;

    gap: 4px;

    padding: 0px 10px;

    border-radius: 12px;

    transition: .3s ease;

}

.speaker-list li:hover {

    background: rgba(181, 72, 255, .08);

    transform: translateX(8px);

}

.speaker-list li i {

    width: 18px;

    height: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: rgba(181, 72, 255, .15);

    color: #b548ff;

    font-size: 14px;

}

.speaker-content h4 {

    font-size: 14px;

    margin-bottom: 10px;

}

.speaker-content span {

    color: #b548ff;

    display: block;

    margin-bottom: 8px;
    font-size: 10px;

}

.speaker-content p {

    color: #bfc2dd;

}

.speaker-social {

    margin-top: 20px;

}

.speaker-social a {

    width: 42px;

    height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #1a2046;

    color: #fff;

    margin: 0 5px;

    transition: .35s;

}

.speaker-social a:hover {

    background: #b548ff;

}

.view-speakers-btn {

    display: inline-block;

    padding: 15px 36px;

    border-radius: 12px;

    background: linear-gradient(90deg, #7d3cff, #cb53ff);

    color: #fff;

    font-weight: 600;

    transition: .35s;

}

.view-speakers-btn:hover {

    color: #fff;

    transform: translateY(-4px);

}

.swiper-pagination {

    margin-top: 40px;

    position: relative;

}

/*=========================================
Conference Schedule
==========================================*/

.schedule-section {

    background: #ffffff;

    padding: 110px 0;

}

.schedule-tabs {

    gap: 20px;

}

.schedule-tabs .nav-link {

    background: #f4f4fb;

    border-radius: 15px;

    padding: 12px 40px;

    color: #333;

    font-weight: 600;

    transition: .35s;

}

.schedule-tabs .nav-link small {

    display: block;

    margin-top: 6px;

    font-size: 13px;

}

.schedule-tabs .nav-link.active {

    background: linear-gradient(90deg, #7d3cff, #cb53ff);

    color: #fff;

}

.timeline {

    position: relative;

    margin-left: 40px;

}

.timeline::before {

    content: "";

    position: absolute;

    left: 18px;

    top: 0;

    bottom: 0;

    width: 3px;

    background: #b548ff;

}

.timeline-item {

    display: flex;

    margin-bottom: 15px;

    position: relative;

}

.timeline-item::before {

    content: "";

    width: 18px;

    height: 18px;

    border-radius: 50%;

    background: #b548ff;

    position: absolute;

    left: 10px;

    top: 22px;

}

.time {

    width: 130px;

    font-weight: 600;

    color: #7d3cff;

    padding-left: 40px;

}

.schedule-card {

    flex: 1;

    background: #fff;

    border-radius: 18px;

    padding: 15px;

    box-shadow: 0 20px 45px rgba(0, 0, 0, .08);

    transition: .35s;
    margin-left: 40px;

}

.schedule-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 30px 60px rgba(181, 72, 255, .20);

}

.schedule-card h4 {

    margin: 15px 0;

    font-size: 24px;

    color: #222;

}

.schedule-card p {

    color: #666;

    line-height: 1.8;

}

.badge {

    border-radius: 50px;

    padding: 8px 18px;

    font-size: 13px;

}

.keynote {

    background: #7d3cff;

}

.workshop {

    background: #ff5eb7;

}

.panel {

    background: #0bb7d3;

}

.speaker {

    margin-top: 7px;

    color: #555;

}

.speaker i {

    color: #b548ff;

    margin-right: 8px;

}

/*==================================
WHY ATTEND
===================================*/

.why-attend-section {

    padding: 110px 0;

    background: #070b25;

}

.highlight-card {

    position: relative;

    overflow: hidden;

    background: linear-gradient(145deg, #121733, #0b0f28);

    border-radius: 24px;

    padding: 45px 35px;

    text-align: center;

    border: 1px solid rgba(255, 255, 255, .08);

    transition: .45s ease;

    height: 100%;

    z-index: 1;

    backdrop-filter: blur(15px);

}

/* Animated Border Glow */

.highlight-card::before {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    border: 2px solid rgba(181, 72, 255, .18);

    border-radius: 50%;

    top: -220px;
    right: -220px;

    transition: .6s ease;

    opacity: 0;

    transform: scale(.7) rotate(20deg);

}

.highlight-card::after {

    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    border: 2px solid rgba(255, 255, 255, .10);

    border-radius: 50%;

    left: -180px;
    bottom: -180px;

    transition: .6s ease;

    opacity: 0;

    transform: scale(.7) rotate(-20deg);

}

/* Hover */

.highlight-card:hover {

    transform: translateY(-12px);



}

.highlight-card:hover::before {

    opacity: 1;

    transform: scale(1) rotate(0deg);

}

.highlight-card:hover::after {

    opacity: 1;

    transform: scale(1) rotate(0deg);

}

.highlight-card .corner {

    position: absolute;

    width: 60px;

    height: 60px;

    top: 0;

    right: 0;

    border-top: 3px solid #b548ff;

    border-right: 3px solid #b548ff;

    border-radius: 0 24px 0 50px;

    opacity: .6;

}

.highlight-icon {

    width: 95px;

    height: 95px;

    margin: auto;

    margin-bottom: 30px;

    border-radius: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(135deg,
            #7d3cff,
            #cb53ff);

    color: #fff;

    font-size: 34px;

    position: relative;

    transition: .4s;

    box-shadow:
        0 20px 40px rgba(181, 72, 255, .35);

}

.highlight-icon::before {

    content: "";

    position: absolute;

    inset: -8px;

    border: 1px dashed rgba(255, 255, 255, .18);

    border-radius: 35px;

}

.highlight-card h4 {

    color: #fff;

    font-size: 25px;

    margin-bottom: 18px;

    font-weight: 700;

}

.highlight-card p {

    color: #cfd2eb;

    line-height: 1.9;

    font-size: 15px;

}

.ring {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    transition: .7s;

    opacity: 0;

}

/* Top Right Double Ring */

.ring1 {

    width: 190px;
    height: 190px;
    border: 2px solid rgba(181, 72, 255, .18);
    top: -120px;
    right: -120px;

}

.ring2 {

    width: 270px;
    height: 270px;
    border: 1px solid rgba(181, 72, 255, .12);
    top: -170px;
    right: -170px;

}

.why-attend-section {

    position: relative;

    background: #070b25;

    padding: 110px 0 180px;

    overflow: hidden;

}

.section-divider {

    position: absolute;

    left: 0;

    bottom: -2px;

    width: 100%;

    line-height: 0;

}

.section-divider svg {

    width: 100%;

    height: 170px;

    display: block;

}

/* Hover */

.highlight-card:hover .ring {
    opacity: 1;
    transform: scale(1.30);

}


/* .highlight-card{

    background:#121733;

    border-radius:20px;

    padding:40px 30px;

    text-align:center;

    border:1px solid rgba(255,255,255,.08);

    transition:.4s;

    height:100%;

}

.highlight-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 60px rgba(181,72,255,.25);

}

.highlight-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:linear-gradient(135deg,#7d3cff,#cb53ff);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:34px;

}

.highlight-card h4{

    color:#fff;

    font-size:24px;

    margin-bottom:15px;

}

.highlight-card p{

    color:#cfd2eb;

    line-height:1.9;

} */

/*==============================
CTA
==============================*/

.conference-cta {
    padding-top: 50px;
    padding-bottom: 50px;
    background: #070b25;
}

.cta-box {

    background: linear-gradient(90deg, #7d3cff, #cb53ff);

    border-radius: 30px;

    padding: 70px;

    position: relative;

    overflow: hidden;

}

.cta-box::before {

    content: "";

    position: absolute;

    width: 320px;

    height: 320px;

    background: rgba(255, 255, 255, .08);

    border-radius: 50%;

    top: -120px;

    right: -100px;

}

.cta-box h2 {

    color: #fff;

    font-size: 44px;

    margin-bottom: 18px;

    font-family: 'Playfair Display', serif;

}

.cta-box p {

    color: #fff;

    opacity: .95;

    margin: 0;

}

.cta-btn {

    display: inline-block;

    background: #fff;

    color: #7d3cff;

    padding: 18px 40px;

    border-radius: 12px;

    font-weight: 700;

    transition: .35s;

}

.cta-btn:hover {

    background: #111;

    color: #fff;

}

/*==================================
SPONSORS
===================================*/

.sponsors-section {

    padding: 110px 0;

    background: #ffffff;

}

.sponsor-card {

    background: #fff;

    border-radius: 20px;

    padding: 40px;

    height: 170px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #ececec;

    transition: .35s;

}

.sponsor-card img {

    max-width: 170px;

    max-height: 80px;

    object-fit: contain;

    filter: grayscale(100%);

    opacity: .7;

    transition: .35s;

}

.sponsor-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 20px 50px rgba(181, 72, 255, .18);

}

.sponsor-card:hover img {

    filter: none;

    opacity: 1;

}

/*==================================
TESTIMONIALS
===================================*/

.testimonial-section {

    background: #070b25;

    padding: 110px 0;

}

.testimonial-card {

    background: #121733;

    border: 1px solid rgba(255, 255, 255, .08);

    border-radius: 22px;

    padding: 35px;

    color: #fff;

    transition: .35s;

    height: 100%;

}

.testimonial-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 25px 60px rgba(181, 72, 255, .25);

}

.stars {

    color: #FFD54F;

    font-size: 22px;

    margin-bottom: 18px;

}

.testimonial-card p {

    line-height: 1.9;

    color: #d5d8ea;

}

.testimonial-user {

    display: flex;

    align-items: center;

    gap: 15px;

    margin-top: 25px;

}

.testimonial-user img {

    width: 70px;

    height: 70px;

    border-radius: 50%;

    object-fit: cover;

    border: 3px solid #b548ff;

}

.testimonial-user h5 {

    margin-bottom: 5px;

}

.testimonial-user span {

    color: #b548ff;

}

/*==================================
FAQ
===================================*/

.faq-section {

    padding: 110px 0;

    background: #fff;

}

.accordion-item {

    border: none;

    margin-bottom: 18px;

    border-radius: 16px;

    overflow: hidden;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .06);

}

.accordion-button {

    padding: 22px;

    font-weight: 600;

    font-size: 18px;

}

.accordion-button:not(.collapsed) {

    background: linear-gradient(90deg, #7d3cff, #cb53ff);

    color: #fff;

}

.accordion-button:focus {

    box-shadow: none;

}

.accordion-body {

    padding: 22px;

    line-height: 1.9;

    color: #666;

}

/*=========================
Newsletter
=========================*/

.newsletter-section {

    padding: 100px 0;

    background: #fff;

}

.newsletter-box {

    background: linear-gradient(135deg, #7d3cff, #cb53ff);

    padding: 70px;

    border-radius: 30px;

    color: #fff;

}

.newsletter-box h2 {

    font-size: 42px;

    margin: 20px 0;

}

.newsletter-form {

    display: flex;

    background: #fff;

    border-radius: 60px;

    overflow: hidden;

}

.newsletter-form input {

    flex: 1;

    padding: 20px;

    border: none;

    outline: none;

}

.newsletter-form button {

    border: none;

    padding: 20px 35px;

    background: #111;

    color: #fff;

}

/*=========================
Footer
=========================*/

.footer {

    padding: 100px 0 30px;

    background: #070b25;

    color: #d3d5e8;

}

.footer h4 {

    color: #fff;

    margin-bottom: 25px;

}

.footer ul {

    padding: 0;

}

.footer li {

    margin-bottom: 15px;

    list-style: none;

}

.footer a {

    color: #d3d5e8;

    transition: .3s;

}

.footer a:hover {

    color: #b548ff;

}

.footer iframe {

    width: 100%;

    height: 220px;

    border-radius: 20px;

    border: none;

}

.social-links {

    margin-top: 25px;

}

.social-links a {

    width: 45px;

    height: 45px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #171d45;

    color: #fff;

    margin-right: 8px;

    transition: .35s;

}

.social-links a:hover {

    background: #b548ff;

}

.copyright {

    text-align: center;

    padding-top: 30px;

}

/*=========================
Scroll Button
=========================*/

.scroll-top {

    position: fixed;

    right: 30px;

    bottom: 30px;

    width: 55px;

    height: 55px;

    background: #b548ff;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    color: #fff;

    cursor: pointer;

    display: none;

    z-index: 999;

    box-shadow: 0 10px 30px rgba(181, 72, 255, .4);

}

/*=========================
Loader
=========================*/

#loader {

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    background: #070b25;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 99999;

}

.spinner {

    width: 70px;

    height: 70px;

    border: 5px solid rgba(255, 255, 255, .1);

    border-top: 5px solid #b548ff;

    border-radius: 50%;

    animation: spin 1s linear infinite;

}

@keyframes spin {

    100% {

        transform: rotate(360deg);

    }
}

/*=========================================
PRICING SECTION
==========================================*/

/*=========================================
REGISTRATION TABLE
=========================================*/

.registration-table-section {

    position: relative;

    padding: 120px 0;

    background:
        radial-gradient(circle at top right,
            rgba(181, 72, 255, .10),
            transparent 35%),

        radial-gradient(circle at bottom left,
            rgba(90, 65, 255, .10),
            transparent 35%),

        #070b25;

    overflow: hidden;

}

.registration-table-section::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    right: -220px;

    top: -180px;

    background: rgba(181, 72, 255, .08);

    filter: blur(90px);

}

.registration-table-section::after {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    border-radius: 50%;

    left: -180px;

    bottom: -180px;

    background: rgba(125, 60, 255, .08);

    filter: blur(90px);

}

.registration-table {

    background: rgba(15, 20, 45, .95);

    border-radius: 25px;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .08);

    backdrop-filter: blur(18px);

    box-shadow:

        0 30px 60px rgba(0, 0, 0, .35);

}

.table-header {

    display: grid;

    grid-template-columns:

        2.4fr 1fr 1fr;

    background:

        linear-gradient(90deg,

            #151b45,

            #23195c);

    color: #fff;

    font-weight: 600;

}

.table-header div {

    padding: 12px 14px;

    text-align: center;

}

.table-header div:first-child {

    text-align: left;

}

.table-row {

    display: grid;

    grid-template-columns:

        2.4fr 1fr 1fr;

    align-items: center;

    transition: .35s;

    border-top: 1px solid rgba(255, 255, 255, .06);

    cursor: pointer;

    position: relative;

}

.table-row.active {

    background:

        linear-gradient(90deg,

            rgba(125, 60, 255, .18),

            rgba(203, 83, 255, .12));

    border-left: 5px solid #b548ff;

}

.category {

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 12px;

}

.category-icon {

    width: 50px;

    height: 50px;

    border-radius: 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        linear-gradient(135deg,

            #7d3cff,

            #cb53ff);

    color: #fff;

    font-size: 26px;

    box-shadow:

        0 15px 35px rgba(181, 72, 255, .25);

}


.category h5 {

    color: #fff;

    margin-bottom: 2px;

    font-size: 18px;

}

.category span {

    color: #cfd2eb;

    font-size: 14px;

}

.price {

    text-align: center;

    color: #fff;

    font-size: 24px;

    font-weight: 700;

}

input[type="radio"] {

    width: 26px;

    height: 26px;

    accent-color: #b548ff;

    cursor: pointer;

}

.registration-summary {

    position: sticky;

    top: 120px;

    background:

        rgba(15, 20, 45, .95);

    border-radius: 25px;

    padding: 24px;

    border: 1px solid rgba(255, 255, 255, .08);

    backdrop-filter: blur(18px);

    overflow: hidden;

}

.registration-summary::before {

    content: "";

    position: absolute;

    inset: 0;

    padding: 1px;

    border-radius: 25px;

    background:

        linear-gradient(45deg,

            #b548ff,

            transparent,

            #7d3cff,

            transparent,

            #ff66d8);

    background-size: 400%;

    animation: borderMove 8s linear infinite;

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

}

.registration-summary h3 {

    color: #fff;

    margin-bottom: 8px;

    text-align: center;

}

.summary-item {

    display: flex;

    justify-content: space-between;

    margin-bottom: 30px;

}

.summary-item span {

    color: #cfd2eb;

}

.summary-item strong {

    color: #fff;

}

.summary-item h2 {

    color: #b548ff;

    font-size: 26px;

}

.register-btn {

    display: block;

    /* margin-top:40px; */

    text-align: center;

    padding: 18px;

    border-radius: 16px;

    color: #fff;

    font-weight: 600;

    background:

        linear-gradient(90deg,

            #7d3cff,

            #cb53ff);

    transition: .35s;

}

.register-btn:hover {

    transform: translateY(-5px);

    color: #fff;

    box-shadow:

        0 20px 40px rgba(181, 72, 255, .30);

}

.registration-benefits {
    margin-top: 30px;
    background: rgba(15, 20, 45, .95);
    border-radius: 25px;
    padding: 30px;
}

.registration-benefits h3 {
    color: #fff;
    text-align: center;
    margin-bottom: 35px;
    font-size: 2rem;
    font-weight: 700;
}

.benefit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 25px;
}

.benefit-grid div {
    text-align: center;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    padding: 25px 15px;
    transition: .35s;
}

.benefit-grid div:hover {
    transform: translateY(-8px);
    background: rgba(255,255,255,.08);
}

.benefit-grid i {
    width: 70px;
    height: 70px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg,#7d3cff,#cb53ff);
    color: #fff;
    font-size: 28px;
}

.benefit-grid span {
    display: block;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
}
.table-row {

    position: relative;

    overflow: hidden;

}

/* Left Border Animation */

.table-row::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 5px;

    height: 100%;

    background: #b548ff;

    transform: scaleY(0);

    transition: .35s;

}

.table-row.active::before {

    transform: scaleY(1);

}

.table-row::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(90deg,

            rgba(181, 72, 255, .08),

            transparent);

    opacity: 0;

    transition: .35s;

}

.table-row.active::after {

    opacity: 1;

}

.table-row input {

    display: none;

}

.custom-radio {

    width: 28px;

    height: 28px;

    border-radius: 50%;

    border: 2px solid rgba(255, 255, 255, .35);

    margin: auto;

    position: relative;

    transition: .35s;

}

.custom-radio span {

    position: absolute;

    width: 12px;

    height: 12px;

    background: #b548ff;

    border-radius: 50%;

    top: 50%;

    left: 50%;

    transform:

        translate(-50%, -50%) scale(0);

    transition: .35s;

}

.table-row.active .custom-radio {

    border-color: #b548ff;

}

.table-row.active .custom-radio span {

    transform:

        translate(-50%, -50%) scale(1);

}

.table-row:hover {

    transform: translateX(10px);

}

.register-btn {

    position: relative;

    overflow: hidden;

}

.register-btn::before {

    content: "";

    position: absolute;

    left: -120%;

    top: 0;

    width: 100%;

    height: 100%;

    background:

        linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, .3),

            transparent);

    transition: .8s;

}

.register-btn:hover::before {

    left: 120%;

}

.registration-summary {

    animation: floatCard 5s ease-in-out infinite;

}

@keyframes floatCard {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-8px);

    }

    100% {

        transform: translateY(0);

    }

}

.registration-table {

    animation: leftSlide 1s ease;

}

.registration-summary {

    animation: rightSlide 1s ease;

}

@keyframes leftSlide {

    from {

        opacity: 0;

        transform: translateX(-80px);

    }

    to {

        opacity: 1;

        transform: none;

    }

}

@keyframes rightSlide {

    from {

        opacity: 0;

        transform: translateX(80px);

    }

    to {

        opacity: 1;

        transform: none;

    }

}

.table-row {

    background:

        radial-gradient(circle at var(--x) var(--y),

            rgba(181, 72, 255, .15),

            transparent 180px);

}

/*====================================
REGISTRATION PAGE
====================================*/

.registration-section {

    position: relative;

    padding: 120px 0;

    background:
        radial-gradient(circle at top right,
            rgba(181, 72, 255, .12),
            transparent 35%),

        radial-gradient(circle at bottom left,
            rgba(92, 63, 255, .10),
            transparent 35%),

        #06081d;

    overflow: hidden;

}

.registration-section::before {

    content: "";

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    background: rgba(181, 72, 255, .08);

    filter: blur(80px);

    right: -180px;

    top: -180px;

}

.registration-section::after {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    border-radius: 50%;

    background: rgba(92, 63, 255, .08);

    filter: blur(70px);

    left: -180px;

    bottom: -180px;

}

.registration-card {

    position: relative;

    background: rgba(18, 22, 48, .90);

    backdrop-filter: blur(18px);

    border-radius: 30px;

    padding: 50px;

    overflow: hidden;

    z-index: 2;

    border: 1px solid rgba(255, 255, 255, .08);

    transition: .45s ease;

}

.registration-card::before {

    content: "";

    position: absolute;

    inset: 0;

    padding: 1.5px;

    border-radius: 30px;

    background: linear-gradient(45deg,
            #b548ff,
            transparent,
            #7d3cff,
            transparent,
            #ff67d7,
            transparent,
            #b548ff);

    background-size: 400%;

    animation: borderMove 10s linear infinite;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    opacity: .85;

}

.registration-card::after {

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    border-radius: 50%;

    top: -120px;

    right: -120px;

    background: rgba(181, 72, 255, .12);

    filter: blur(30px);

    transition: .5s;

}

.registration-card:hover {

    transform: translateY(-6px);

    box-shadow:

        0 35px 70px rgba(181, 72, 255, .18),

        0 0 45px rgba(181, 72, 255, .12);

}

.registration-card:hover::after {

    transform: scale(1.3);

}

@keyframes borderMove {

    0% {

        background-position: 0 0;

    }

    100% {

        background-position: 400% 0;

    }

}



.registration-card::before {

    content: "";

    position: absolute;

    width: 260px;

    height: 260px;

    border-radius: 50%;

    background: rgba(181, 72, 255, .08);

    top: -140px;

    right: -140px;

}


.registration-card h2 {

    color: #fff;

    font-size: 40px;

    margin-bottom: 10px;

}

.registration-card p {

    color: #cfd2eb;

    margin-bottom: 40px;

}

.registration-card label {

    color: #fff;

    font-weight: 500;

    margin-bottom: 10px;

}

.form-control,
.form-select {

    height: 45px;

    border-radius: 15px;

    /* background: #101530; */

    border: 1px solid rgba(255, 255, 255, .08);

    /* color: #fff; */

    transition: .35s;

}

textarea.form-control {

    height: auto;

    min-height: 150px;

}

.form-control:focus,
.form-select:focus {

    border-color: #b548ff;

    box-shadow:

        0 0 0 .2rem rgba(181, 72, 255, .18);

    background: #101530;

    color: #fff;

}

.form-control::placeholder {

    color: #9aa1c7;

}

.form-select {

    /* color: #d8d8e8; */

}

.submit-btn {

    width: 15%;

    height: 60px;

    border: none;

    border-radius: 16px;

    background: linear-gradient(90deg,
            #7d3cff,
            #cb53ff);

    color: #fff;

    font-size: 18px;

    font-weight: 600;

    transition: .35s;

    box-shadow:

        0 20px 40px rgba(181, 72, 255, .30);

}

.submit-btn:hover {

    transform: translateY(-4px);

}

.summary-card {

    position: sticky;

    top: 120px;

    padding: 40px;

    border-radius: 30px;

    background: rgba(18, 22, 48, .90);

    backdrop-filter: blur(18px);

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, .08);

    transition: .45s;

}

.summary-card::before {

    content: "";

    position: absolute;

    inset: 0;

    padding: 1px;

    border-radius: 30px;

    background: linear-gradient(45deg,

            #7d3cff,

            transparent,

            #b548ff,

            transparent,

            #ff66d8);

    background-size: 400%;

    animation: borderMove 8s linear infinite;

    -webkit-mask:

        linear-gradient(#fff 0 0) content-box,

        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

}

.summary-ring {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    transition: .5s;

}

.ring-one {

    width: 220px;

    height: 220px;

    border: 1px solid rgba(181, 72, 255, .18);

    right: -140px;

    top: -140px;

}

.ring-two {

    width: 170px;

    height: 170px;

    border: 1px solid rgba(255, 255, 255, .08);

    left: -90px;

    bottom: -90px;

}

.summary-card:hover {

    transform: translateY(-6px);

    box-shadow:

        0 35px 70px rgba(181, 72, 255, .20);

}

.summary-card:hover .ring-one {

    transform: scale(1.15);

}

.summary-card:hover .ring-two {

    transform: scale(1.15);

}

.registration-card .mouse-light,
.summary-card .mouse-light {

    position: absolute;

    width: 0;

    height: 0;

    background: radial-gradient(circle,

            rgba(181, 72, 255, .28),

            transparent 70%);

    transform: translate(-50%, -50%);

    pointer-events: none;

    transition:

        width .25s,

        height .25s;

}



.summary-card h3 {

    color: #fff;

    margin-bottom: 35px;

}

.summary-item {

    display: flex;

    justify-content: space-between;

    margin-bottom: 10px;

}

.summary-item span {

    color: #cfd2eb;

}

.summary-item strong {

    color: #fff;

}

.summary-card hr {

    border-color: rgba(255, 255, 255, .08);

}

.summary-total {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 30px;

}

.summary-total span {

    color: #fff;

    font-size: 20px;

}

.summary-total h2 {

    color: #b548ff;

    font-size: 42px;

}

.secure-payment {

    margin-top: 35px;

    padding: 18px;

    border-radius: 15px;

    background: rgba(255, 255, 255, .05);

    text-align: center;

    color: #9fe2b4;

}

.secure-payment i {

    margin-right: 10px;

}

.registration-card::after {

    content: "";

    position: absolute;

    width: 320px;

    height: 320px;

    border: 1px solid rgba(181, 72, 255, .10);

    border-radius: 50%;

    left: -210px;

    bottom: -210px;

}



.registration-card::after,
.summary-card::after {

    content: "";

    position: absolute;

    left: var(--x);

    top: var(--y);

    width: 0;

    height: 0;

    background: radial-gradient(circle,

            rgba(181, 72, 255, .22),

            transparent 70%);

    transform: translate(-50%, -50%);

    transition: .25s;

}

.registration-card:hover::after,
.summary-card:hover::after {

    width: 320px;

    height: 320px;

}

hover-lift {

    transition: .4s ease;

}

.hover-lift:hover {

    transform: translateY(-12px);

    box-shadow:

        0 30px 60px rgba(181, 72, 255, .25);

}
.file-upload-wrapper {
    position: relative;

    display: block;

    width: 100%;
    min-height: 265px;

    border: 2px dashed #d7dce4;
    border-radius: 15px;

    background: #fafcff;

    transition: 0.3s;

    overflow: hidden;

    cursor: pointer;
}

.file-upload-wrapper:hover {
    border-color: #0d6efd;
    background: #f5f9ff;
}


/* Hide the actual input */
.file-input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;

    pointer-events: none;
}


/* Upload content */
.file-upload-content {
    width: 100%;
    min-height: 265px;

    padding: 40px 20px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    cursor: pointer;
}


.upload-icon {
    font-size: 55px;

    color: #0d6efd;

    margin-bottom: 15px;
}


.browse-text {
    color: #0d6efd;

    font-weight: 600;

    cursor: pointer;
}


.selected-file {
    display: inline-block;

    padding: 8px 18px;

    background: #eef5ff;

    border-radius: 30px;

    color: #0d6efd;

    font-size: 14px;

    font-weight: 500;
}

.download-template-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 15px 28px;

    background: #fff;
    color: #17366D;

    text-decoration: none;
    font-weight: 700;

    border-radius: 50px;

    transition: .35s;
}

.download-template-btn:hover {
    background: #00B8FF;
    color: #fff;
    transform: translateY(-4px);
    box-shadow: 0 12px 25px rgba(0, 184, 255, .35);
}

@media(max-width:991px) {

    .template-download-card {
        flex-direction: column;
        text-align: center;
    }

    .template-content {
        margin: 10px 0;
    }
}


.guideline-menu {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 35px rgba(0, 0, 0, .08);
}

.guide-link {

    width: 100%;

    display: flex;
    align-items: center;
    gap: 15px;

    padding: 6px 20px;
    margin-bottom: 10px;

    border: none;
    border-radius: 14px;

    background: #f7f7fb;

    font-size: 16px;
    font-weight: 600;

    transition: .35s;
    cursor: pointer;

}

.guide-link:last-child {
    margin-bottom: 0;
}

.guide-link i {

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(135deg, #6A11CB, #8E2DE2);
    color: #fff;
}

.guide-link:hover {

    transform: translateX(6px);

    background: #eef0ff;

}

.guide-link.active {

    background: linear-gradient(135deg, #6A11CB, #8E2DE2);

    color: #fff;

}

.guide-link.active i {

    background: #fff;
    color: #6A11CB;

}

/* Right Panel */

.guide-content {

    background: #fff;

    border-radius: 20px;

    padding: 15px;

    box-shadow: 0 15px 40px rgba(0, 0, 0, .08);

    min-height: 500px;

}

.guide-box {

    display: none;

    animation: fade .4s;

}

.guide-box.active {

    display: block;

}

.guide-box h3 {

    font-weight: 700;

    margin-bottom: 20px;

}

.guide-box ul {

    padding-left: 20px;

}

.guide-box li {

    margin-bottom: 0px;

    color: #555;

}
p{
    margin-bottom:5px !important;
}
.download-btn {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 25px;

    padding: 14px 28px;

    border-radius: 40px;

    background: linear-gradient(135deg, #6A11CB, #8E2DE2);

    color: #fff;

    text-decoration: none;

    transition: .3s;

}

.download-btn:hover {

    color: #fff;

    transform: translateY(-3px);

    box-shadow: 0 12px 25px rgba(106, 17, 203, .35);

}

@keyframes fade {

    from {

        opacity: 0;
        transform: translateY(10px);

    }

    to {

        opacity: 1;
        transform: translateY(0);

    }

}

@media(max-width:991px) {

    .guide-menu {

        margin-bottom: 25px;

    }

    .guide-content {

        padding: 25px;

    }

}

/*=========================
      PROMO CODE
==========================*/

.promo-card {

    background: #fff;

    border-radius: 18px;

    padding: 22px;

    border: 1px solid #edf0f5;

    box-shadow: 0 12px 35px rgba(0, 0, 0, .06);

}

.promo-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.promo-header label {

    font-size: 20px;

    font-weight: 700;

    color: #1f2937;

    cursor: pointer;

}

.promo-header i {

    color: #8E2DE2;

}

.form-check-input {

    width: 22px;

    height: 22px;

    cursor: pointer;

}

.form-check-input:checked {

    background-color: #8E2DE2;

    border-color: #8E2DE2;

}

.promo-badge {

    background: linear-gradient(135deg, #6A11CB, #8E2DE2);

    color: #fff;

    padding: 6px 15px;

    border-radius: 30px;

    font-size: 13px;

    font-weight: 600;

}

.promo-body {

    display: none;

    margin-top: 22px;

    animation: fadeIn .35s ease;

}

.promo-btn {

    background: linear-gradient(135deg, #6A11CB, #8E2DE2);

    color: #fff;

    border: none;

    padding: 0 28px;

    font-weight: 600;

}

.promo-btn:hover {

    color: #fff;

    transform: translateY(-2px);

    box-shadow: 0 8px 20px rgba(106, 17, 203, .25);

}

.promo-note {

    display: block;

    margin-top: 10px;

    color: #777;

}

@keyframes fadeIn {

    from {

        opacity: 0;
        transform: translateY(-8px);

    }

    to {

        opacity: 1;
        transform: translateY(0);

    }

}

/*=====================================================
CHECKOUT SECTION
======================================================*/

.checkout-section{
    display:none;
    padding:25px 0;
    background:#f8f9fc;
}

.checkout-section.show{
    display:block;
    animation:fadeUp .6s ease;
}

.checkout-heading{
    text-align:center;
    margin-bottom:50px;
}

.checkout-heading span{
    display:inline-block;
    padding:8px 18px;
    border-radius:40px;
    background:#eef1ff;
    color:#6A11CB;
    font-weight:600;
    margin-bottom:15px;
}

.checkout-heading h2{
    font-size:42px;
    font-weight:700;
    color:#17366D;
}

.checkout-heading p{
    color:#6c757d;
    max-width:650px;
    margin:auto;
    margin-top:10px;
}

/*=====================================================
CARDS
======================================================*/

.checkout-card{

    background:#fff;

    border-radius:20px;

    padding:16px;

    box-shadow:0 15px 45px rgba(0,0,0,.07);

    transition:.35s;

}

.checkout-card:hover{

    transform:translateY(-4px);

    box-shadow:0 20px 55px rgba(0,0,0,.12);

}

.checkout-title{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:18px;

    font-weight:700;

    color:#17366D;

    padding-bottom:9px;

    border-bottom:1px solid #eee;

}

.checkout-title i{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:linear-gradient(135deg,#6A11CB,#8E2DE2);

    color:#fff;

}

/*=====================================================
SELECTED PLAN
======================================================*/

.selected-plan-box{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:9px;

}

.selected-plan-box h4{

    font-size:22px;

    font-weight:700;

    color:#17366D;

}

.selected-plan-box small{

    color:#777;

}

.selected-plan-box h2{

    font-size:33px;

    color:#6A11CB;

    font-weight:700;

}

/*=====================================================
QUANTITY
======================================================*/

.quantity-wrapper{

    display:flex;

    align-items:center;

    gap:20px;

    margin-top:12px;

}

.qty-btn{

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:#eef1ff;

    color:#6A11CB;

    font-size:18px;

    transition:.3s;

}

.qty-btn:hover{

    background:#6A11CB;

    color:#fff;

}

.quantity-wrapper input{

    width:68px;

    height:44px;

    text-align:center;

    border-radius:12px;

    border:1px solid #ddd;

    font-size:22px;

    font-weight:700;

}

/*=====================================================
CHECKBOX
======================================================*/

.form-check{

    padding:20px;

    border-radius:15px;

    /* background:#f7f8fd; */

}

.form-check-input{

    width:22px;

    height:22px;

    cursor:pointer;

}

.form-check-label{

    font-size:18px;

    margin-left:10px;

}

/*=====================================================
ROOM CARDS
======================================================*/

.room-card{

    display:block;

    cursor:pointer;

}

.room-card input{

    display:none;

}

.room-card div{

    padding:16px;

    border:2px solid #ececec;

    border-radius:20px;

    text-align:center;

    transition:.35s;

    height:100%;

}

.room-card i{

    font-size:40px;

    color:#6A11CB;

    margin-bottom:15px;

}

.room-card h5{

    font-weight:700;

}

.room-card span{

    color:#777;

}

.room-card input:checked+div{

    border-color:#6A11CB;

    background:#f3ecff;

    transform:translateY(-5px);

}

/*=====================================================
INPUTS
======================================================*/

.form-control{

    height:45px;

    border-radius:12px;

     border:1px solid #ddd; 

    box-shadow:none;

}

.form-control:focus{

    border-color:#6A11CB;

    box-shadow:0 0 0 .2rem rgba(106,17,203,.15);

}

/*=====================================================
PROMO CODE
======================================================*/

.apply-btn{

    background:linear-gradient(135deg,#6A11CB,#8E2DE2);

    color:#fff;

    border:none;

    padding:0 30px;

    font-weight:600;

    transition:.3s;

}

.apply-btn:hover{

    color:#fff;

    transform:translateY(-2px);

    box-shadow:0 10px 25px rgba(106,17,203,.25);

}

/*=====================================================
CART SUMMARY
======================================================*/

.cart-summary{

    position:sticky;

    top:100px;

    background:linear-gradient(145deg,#17366D,#224C98,#6A11CB);

    border-radius:25px;

    padding:35px;

    color:#fff;

    overflow:hidden;

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.cart-summary::before{

    content:'';

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    top:-70px;

    right:-70px;

}

.cart-summary h3{

    font-size:28px;

    font-weight:700;

    margin-bottom:30px;

}

.cart-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 0;

    border-bottom:1px solid rgba(255,255,255,.15);

}

.cart-item:last-child{

    border:none;

}

.cart-item span{

    opacity:.9;

}

.cart-item strong{

    font-size:18px;

    font-weight:700;

}

.cart-summary hr{

    border-color:rgba(255,255,255,.2);

    margin:25px 0;

}

/*=====================================================
TOTAL
======================================================*/

.cart-total{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.cart-total span{

    font-size:18px;

    font-weight:600;

}

.cart-total h2{

    font-size:38px;

    font-weight:700;

    margin:0;

}

/*=====================================================
PAY BUTTON
======================================================*/

.checkout-payment-btn {
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 16px;
    background: #1d7a42;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    transition: .35s;
}

.checkout-payment-btn:hover{

    transform:translateY(-4px);

    background:#f7f7f7;
    color:#1d7a42;

    box-shadow:0 15px 30px rgba(0,0,0,.15);

}

.checkout-payment-btn i{

    margin-right:10px;

}

/*=====================================================
LABELS
======================================================*/

label{

    font-weight:600;

    margin-bottom:10px;

    color:#17366D;

}

/*=====================================================
INPUT GROUP
======================================================*/

.input-group .form-control{

    border-top-left-radius:12px;

    border-bottom-left-radius:12px;

}

.input-group .btn{

    border-top-right-radius:12px;

    border-bottom-right-radius:12px;

}

/*=====================================================
SCROLLBAR
======================================================*/

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-thumb{

    background:#8E2DE2;

    border-radius:50px;

}

/*=====================================================
ANIMATION
======================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/*=====================================================
RESPONSIVE
======================================================*/

@media(max-width:991px){

.checkout-section{

padding:50px 0;

}

.checkout-heading h2{

font-size:30px;

}

.checkout-card{

padding:25px;

}

.selected-plan-box{

flex-direction:column;

align-items:flex-start;

gap:20px;

}

.selected-plan-box h2{

font-size:32px;

}

.quantity-wrapper{

justify-content:center;

}

.room-card{

margin-bottom:20px;

}

.cart-summary{

position:relative;

top:0;

margin-top:30px;

}

.cart-total h2{

font-size:30px;

}

}

@media(max-width:576px){

.checkout-title{

font-size:18px;

}

.checkout-title i{

width:40px;

height:40px;

}

.selected-plan-box h4{

font-size:22px;

}

.selected-plan-box h2{

font-size:28px;

}

.qty-btn{

width:45px;

height:45px;

}

.quantity-wrapper input{

width:60px;

height:45px;

font-size:18px;

}

.checkout-payment-btn{

font-size:16px;

padding:14px;

}

}


.speaker-card-new{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
    transition:.35s;
}

.speaker-card-new:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(0,0,0,.15);
}

.speaker-image-new{
    height:280px;
    overflow:hidden;
}

.speaker-image-new img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.4s;
}

.speaker-card-new:hover img{
    transform:scale(1.08);
}

.speaker-content-new{
    padding:22px;
}

.speaker-content-new h4{
    font-size:22px;
    font-weight:700;
}

.speaker-content-new span{
    display:block;
    color:#777;
    margin:8px 0 18px;
}

.profile-btn{
    color:#224C98;
    font-weight:600;
    text-decoration:none;
}

.venue-section{
    background:#f7f9fc;
}

.venue-map{
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 45px rgba(0,0,0,.12);
}

.venue-card{
    background:#fff;
    padding:45px;
    border-radius:20px;
    box-shadow:0 15px 45px rgba(0,0,0,.08);
}

.venue-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#eaf2ff;
    color:#b548ff  ;
    padding:8px 18px;
    border-radius:50px;
    font-weight:600;
    margin-bottom:20px;
}

.venue-card h2{
    font-size:34px;
    font-weight:700;
    color:#b548ff;
    margin-bottom:18px;
}

.venue-card p{
    color:#6b7280;
    line-height:1.8;
}

.venue-info{
    margin:35px 0;
}

.info-item{
    display:flex;
    gap:18px;
    margin-bottom:25px;
}

.info-item i{
    width:50px;
    height:50px;
    background:#b548ff;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
}

.info-item strong{
    display:block;
    color:#1b2b52;
    margin-bottom:4px;
}

.info-item p{
    margin:0;
}

.venue-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#224C98;
    color:#fff;
    padding:14px 28px;
    border-radius:50px;
    text-decoration:none;
    transition:.3s;
}

.venue-btn:hover{
    background:#183b78;
    color:#fff;
    transform:translateY(-3px);
}

#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.custom-toast {
    min-width: 300px;
    max-width: 400px;
    padding: 15px 20px;
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    font-family: Arial, sans-serif;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    transform: translateX(120%);
    opacity: 0;
    transition: all .4s ease;
    position: relative;
    overflow: hidden;
}

.custom-toast.show {
    transform: translateX(0);
    opacity: 1;
}

.custom-toast.hide {
    transform: translateX(120%);
    opacity: 0;
}

.custom-toast.success {
    background: #28a745;
}

.custom-toast.error {
    background: #dc3545;
}

.custom-toast.warning {
    background: #ffc107;
    color: #000;
}

.custom-toast.info {
    background: #17a2b8;
}

.custom-toast .title {
    font-weight: 600;
    margin-bottom: 4px;
}

.custom-toast .message {
    font-size: 14px;
}

.custom-toast::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    width: 100%;
    background: rgba(255,255,255,.4);
    animation: progress 4s linear forwards;
}

@keyframes progress {
    from {
        width: 100%;
    }
    to {
        width: 0;
    }
}


.stripe-element{

    background:#fff;

    border:1px solid #dcdcdc;

    border-radius:8px;

    padding:14px;

    min-height:48px;

    transition:.3s;

}

.stripe-element.StripeElement--focus{

    border-color:#635bff;

    box-shadow:0 0 0 3px rgba(99,91,255,.15);

}

.stripe-element.StripeElement--invalid{

    border-color:#dc3545;

}

#card-errors{

    font-size:14px;

}

/* =========================================
   SUCCESS OVERLAY
========================================= */

.success-overlay {
    position: fixed;
    inset: 0;

    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(6px);

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 999999;

    opacity: 0;
    visibility: hidden;

    transition: opacity 0.35s ease,
                visibility 0.35s ease;

    padding: 20px;
    box-sizing: border-box;
}

.success-overlay.show {
    opacity: 1;
    visibility: visible;
}


/* =========================================
   SUCCESS CARD
========================================= */

.success-card {
    position: relative;

    width: 460px;
    max-width: 100%;

    background: #ffffff;

    border-radius: 20px;

    padding: 45px 35px 35px;

    text-align: center;

    box-sizing: border-box;

    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.18);

    animation: popup 0.4s ease;
}


/* =========================================
   POPUP ANIMATION
========================================= */

@keyframes popup {

    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }

}


/* =========================================
   CLOSE BUTTON
========================================= */

.success-close-btn {
    position: absolute;

    top: 15px;
    right: 15px;

    width: 38px;
    height: 38px;

    border: none;
    border-radius: 50%;

    background: #f1f1f1;
    color: #555;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 18px;

    cursor: pointer;

    transition: all 0.2s ease;

    z-index: 2;
}

.success-close-btn:hover {
    background: #dc3545;
    color: #ffffff;
}


/* =========================================
   SUCCESS CHECKMARK
========================================= */

.success-checkmark {
    width: 90px;
    height: 90px;

    margin: 0 auto;
}

.check-icon {
    width: 90px;
    height: 90px;

    position: relative;

    border-radius: 50%;

    border: 4px solid #22c55e;

    box-sizing: border-box;
}


/* Checkmark animation */

.check-icon::before {
    content: "";

    position: absolute;

    width: 30px;
    height: 6px;

    background: #ffffff;

    top: 43px;
    left: -5px;

    transform: rotate(45deg);
}

.check-icon::after {
    content: "";

    position: absolute;

    width: 60px;
    height: 6px;

    background: #ffffff;

    top: 43px;
    right: -5px;

    transform: rotate(-45deg);
}


/* =========================================
   CHECKMARK LINES
========================================= */

.icon-line {
    position: absolute;

    height: 5px;

    background: #22c55e;

    border-radius: 3px;

    display: block;
}

.line-tip {
    width: 0;

    left: 18px;
    top: 46px;

    transform: rotate(45deg);

    animation: tip 0.35s forwards;
    animation-delay: 0.25s;
}

.line-long {
    width: 0;

    right: 5px;
    top: 38px;

    transform: rotate(-45deg);

    animation: long 0.35s forwards;
    animation-delay: 0.45s;
}


@keyframes tip {

    to {
        width: 25px;
    }

}

@keyframes long {

    to {
        width: 48px;
    }

}


/* =========================================
   SUCCESS TITLE
========================================= */

.success-card h2 {
    margin-top: 25px;
    margin-bottom: 0;

    color: #16a34a;

    font-weight: 700;
}


/* =========================================
   SUCCESS MESSAGE
========================================= */

.success-message {
    margin-top: 10px;

    color: #64748b;

    line-height: 1.6;
}


/* =========================================
   EMAIL MESSAGE
========================================= */

.success-email {
    margin-top: 20px;

    color: #64748b;

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================
   REGISTRATION NUMBER
========================================= */

.registration-number {
    margin: 25px 0;

    padding: 15px;

    background: #f8fafc;

    border-radius: 12px;

    font-size: 16px;
}

.registration-number strong {
    display: block;

    margin-top: 6px;

    color: #2563eb;

    font-size: 20px;
}


/* =========================================
   PRINT BUTTON
========================================= */

.print-success-btn {
    margin-top: 25px;

    padding: 11px 25px;

    border: none;
    border-radius: 8px;

    background: #17246e;

    color: #ffffff;

    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    transition: all 0.2s ease;
}

.print-success-btn:hover {
    background: #0f194f;

    transform: translateY(-1px);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 576px) {

    .success-overlay {
        padding: 15px;
    }

    .success-card {
        width: 100%;

        padding: 40px 25px 30px;

        border-radius: 18px;
    }

    .success-card h2 {
        font-size: 24px;
    }

    .success-message {
        font-size: 15px;
    }

    .success-email {
        font-size: 13px;
    }

}