:root {
--primary: #CE2029;
            --primary-dark: #CE2029;
            --primary-light: #fff2f2;

            --dark: #101318;
            --dark-2: #171b22;

            --text: #171717;
            --muted: #6b7280;

            --border: #e3e3e3;

            --white: #ffffff;

            --bg: #f6f7f9;

            --success: #198754;

            --shadow:
                0 8px 30px rgba(0, 0, 0, 0.07);

            --radius: 18px;

}


/*============================

HEADER

==============================*/

.header-area{

position:absolute;

top:0;

left:0;

width:100%;

z-index:999;

padding:1px 0;

background:#fff;

box-shadow:0 5px 20px rgba(0,0,0,.05);
border-bottom: 1px solid #CE2029;

}
/* body{
    background:url("../images/network-bg.png")   no-repeat;
    height: 100vh;
    
} */

.logo{

height:70px;

}

.navbar-nav{

gap:20px;

}

.nav-link {
    font-size: 13px;
    font-weight: 700;
    color: #222 !important;
    letter-spacing: .5px;
    padding: 2px 4px !important;
    position: relative;
    transition: .3s;
}

.nav-link:hover{

color:#CE2029!important;

}

.nav-link.active{

color:#CE2029!important;

}

.nav-link.active::after{

content:"";

position:absolute;

bottom:22px;

left:8px;

width:70%;

height:3px;

background:#CE2029;

border-radius:30px;

}

.header-buttons{

display:flex;

align-items:center;

gap:25px;

}

.btn-register {
    /* background: #CE2029; */
    padding: 5px 12px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    transition: .3s;
    color: #CE2029 !important;
    border: 2px solid #CE2029;
}

.btn-register:hover{

background:#CE2029;

color:#fff !important;

}

.language{

display:flex;

align-items:center;

gap:8px;

font-weight:600;

cursor:pointer;

}

.hero-section{

height:100px;

background:url("../images/hero-mobile.png") center center;

background-size:cover;

position:relative;

overflow:hidden;

display:flex;

align-items:center;
display: none;

}

.hero-left-panel{

width:40%;

height:100%;

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

display:flex;

align-items:center;

/* padding:0 25px; */

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

}

.hero-slider{

width:100%;

height:100%;

}

.swiper-wrapper{

height:100%;

}

.swiper-slide{

height:100%;

display:flex;

align-items:center;

}
/*==================================

CONFERENCE BRAND

===================================*/

.conference-brand{

background:#fff;

position:relative;

padding:30px 0 0;

overflow:hidden;

}


.tab-content{
    display:none;
}

.tab-content.active{
    display:block;
}
/* Background molecular pattern */

.conference-brand::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

background:url("../images/network-bg-1.png")   no-repeat;

background-size:cover;

opacity:0.9;

pointer-events:none;


}

.conference-brand .container{

position:relative;

z-index:2;

}

.conference-logo{

max-width:700px;

width:100%;

margin:auto;

display:block;

}

.conference-date{

margin-top:20px;

font-size:18px;

font-weight:700;

letter-spacing:.5px;

color:#CE2029;

text-transform:uppercase;

}

.conference-qr{

width:180px;

background:#fff;

padding:10px;

border-radius:8px;

box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.conference-tabs{

margin-top:60px;

border-top:1px solid #eee;

}

.conference-tabs ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    margin: 0;
    padding: 18px 0;
    list-style: none;
    border-bottom: 1px solid #80808099;
    border-top: 1px solid #8080809c;
    background: #f3f0f08c;
}

.conference-tabs a{

text-decoration:none;

color:#666;

font-size:15px;

font-weight:600;

transition:.3s;

}

.conference-tabs li{

position:relative;

}

.conference-tabs li.active a{

color:#CE2029;

font-weight:700;

}

.conference-tabs li.active::after{

content:"";

position:absolute;

left:50%;

bottom:-18px;

transform:translateX(-50%);

width:70px;

height:3px;

background:#CE2029;

border-radius:20px;

}

.conference-tabs a:hover{

color:#CE2029;

}



.con-name-ban{
    border: 1px solid #CE2029;
    border-radius: 13px;
    padding: 6px 166px;
}


/*==============================

INVITED SPEAKERS

===============================*/

.invited-speakers{

padding:30px 0;

background:#fff;

}

.section-title{

display:flex;

align-items:center;

justify-content:center;

gap:20px;

margin-bottom:60px;

}

.section-title span{

width:70px;

height:2px;

background:#CE2029;

position:relative;

}

.section-title span::before{

content:"";

position:absolute;

right:0;

top:50%;

transform:translateY(-50%);

width:8px;

height:8px;

background:#CE2029;

border-radius:50%;

}

.section-title h2{

font-size:32px;

font-weight:700;

text-transform:uppercase;

margin:0;

letter-spacing:1px;

color:#222;

}

.speaker-card{

text-align:center;

transition:.35s;

}

.speaker-card:hover{

transform:translateY(-8px);

}

.speaker-image{

width:110px;

height:110px;

margin:auto;

border-radius:50%;

overflow:hidden;

border:4px solid #fff;

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

}

.speaker-image img{

width:100%;

height:100%;

object-fit:cover;

transition:.4s;

}

.speaker-card:hover img{

transform:scale(1.08);

}

.speaker-card h4{

font-size:15px;

margin-top:18px;

margin-bottom:8px;

font-weight:700;

color:#CE2029;

line-height:1.5;

}

.speaker-card p{

margin:0;

font-size:13px;

color:#444;

line-height:1.6;

}

.speaker-card small{

display:block;

margin-top:6px;

font-size:13px;

color:#777;

}

.view-speakers-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:14px 38px;

border:2px solid #CE2029;

color:#CE2029;

text-decoration:none;

font-weight:700;

border-radius:6px;

transition:.35s;

text-transform:uppercase;

letter-spacing:.5px;

}

.view-speakers-btn:hover{

background:#CE2029;

color:#fff;

}

/*=====================================

ABOUT CONFERENCE

======================================*/

.about-conference{

padding:25px 0;

background:#fff;
text-align: center;

}

.section-heading{

margin-bottom:25px;

}

.section-subtitle{

display:block;

font-size:15px;

font-weight:700;

text-transform:uppercase;

color:#CE2029;

letter-spacing:1px;

margin-bottom:12px;

}

.section-heading h2{

font-size:42px;

font-weight:700;

color:#222;

line-height:1.3;

margin-bottom:18px;

}

.heading-line{

width:70px;

height:3px;

background:#CE2029;

border-radius:20px;

margin-bottom:30px;

}

.about-conference p{

font-size:16px;

line-height:1.9;

color:#555;

margin-bottom:20px;

}

.about-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:14px 28px;

border:2px solid #CE2029;

text-decoration:none;

font-weight:600;

text-transform:uppercase;

color:#CE2029;

border-radius:5px;

transition:.35s;

}

.about-btn:hover{

background:#CE2029;

color:#fff;

}

.about-image{

border-radius:15px;

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

}

/*========================

FEATURED SPEAKER

==========================*/

.featured-speaker{

/* padding:100px 0; */

/* background:#f8f9fb; */

}

.speaker-profile-card{

display:flex;

align-items:center;

background:#fff;

border-radius:28px;

overflow:hidden;

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

position:relative;

transition:.4s;

}

.speaker-profile-card:hover{

transform:translateY(-8px);

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

}

/* Left */

.speaker-left {
    width: 243px;
    height: 294px;
    background: #CE2029;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Decorative Layers */

.speaker-left::before{

content:"";

position:absolute;

right:-45px;

top:25px;

width:100%;

height:100%;

background:#d84b52;

border-radius:40px;

z-index:0;

opacity:.75;

}

.speaker-left::after{

content:"";

position:absolute;

right:-85px;

top:50px;

width:100%;

height:100%;

background:#f2b24d;

border-radius:40px;

opacity:.35;

}

.speaker-image-box{

position:relative;

z-index:2;

width:220px;

height:220px;

border-radius:50%;

overflow:hidden;

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

border:8px solid rgba(255,255,255,.15);

}

.speaker-image-box img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.speaker-profile-card:hover img{

transform:scale(1.08);

}

/* Right */

.speaker-right{

flex:1;

padding:60px;

}

.speaker-tag{

display:inline-block;

padding:8px 18px;

background:#fdecee;

color:#CE2029;

border-radius:40px;

font-weight:700;

font-size:13px;

margin-bottom:18px;

}

.speaker-right h2{

font-size:22px;

font-weight:800;

margin-bottom:12px;

color:#222;

}

.speaker-right h5{

font-size:19px;

font-weight:600;

color:#666;

margin-bottom:25px;

}

.speaker-right p{

font-size:17px;

line-height:1.9;

color:#666;

margin-bottom:35px;

}

.speaker-meta{

display:flex;

gap:40px;

margin-bottom:35px;

flex-wrap:wrap;

}

.speaker-meta span{

font-weight:600;

color:#444;

}

.speaker-meta i{

color:#CE2029;

margin-right:8px;

}

.speaker-social{

display:flex;

gap:16px;

}

.speaker-social a{

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

background:#fff;

border:1px solid #ddd;

border-radius:50%;

color:#CE2029;

font-size:18px;

transition:.3s;

}

.speaker-social a:hover{

background:#CE2029;

color:#fff;

border-color:#CE2029;

transform:translateY(-4px);

}

/*==============================

REGISTRATION

===============================*/

/* .registration-section{

padding:100px 0;

background:#f8f9fb;

} */

.price-card{

background:#fff;

border-radius:20px;

padding:20px;

position:relative;

overflow:hidden;

transition:.35s;

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

height:100%;

}

.price-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:6px;

height:100%;

background:#CE2029;

transition:.4s;

}

/* .price-card:hover::before{

width:100%;

opacity:.05;

} */

/* .price-card:hover{

transform:translateY(-12px);

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

} */

.featured{

border:2px solid #CE2029;

}

.popular{

position:absolute;

top:20px;

right:-35px;

background:#CE2029;

color:#fff;

padding:8px 40px;

transform:rotate(45deg);

font-size:12px;

font-weight:700;

}

.price-header{

text-align:center;

margin-bottom:35px;

}

.plan-tag{

display:inline-block;

background:#fdecee;

color:#CE2029;

padding:8px 20px;

border-radius:40px;

font-weight:700;

margin-bottom:20px;

}

.price-header h2{

font-size:35px;

font-weight:800;

color:#CE2029;

margin-bottom:5px;

}

.price-header p{

color:#666;

}

.price-card ul{

padding:0;

margin:35px 0;

list-style:none;

}

.price-card ul li{

padding:4px 0;

border-bottom:1px solid #eee;

font-size:16px;

}

.price-card i{

color:#CE2029;

margin-right:12px;

}

.register-btn{

display:block;

text-align:center;

padding:16px;

background:#fff;

border:2px solid #CE2029;

color:#CE2029;

font-weight:700;

text-decoration:none;

border-radius:8px;

transition:.35s;

}

.price-card:hover .register-btn{

background:#CE2029;

color:#fff;

}

/*==================================

FOOTER

===================================*/

.footer {
    background: #f1f1f1;
    padding: 80px 0 0;
    border-top: 1px solid #e7e1e1;
    margin-top: 30px;
}

.footer .col-lg-3{

position:relative;

}

.footer .col-lg-3:not(:last-child)::after{

content:"";

position:absolute;

right:10px;

top:0;

height:100%;

width:2px;

background:#CE2029;

}

.footer-logo{

max-width:230px;

margin-bottom:20px;

}

.footer-text{

color:#666;

line-height:1.8;

font-size:15px;

margin-bottom:25px;

}

.footer h5{

font-size:20px;

font-weight:700;

margin-bottom:25px;

color:#222;

position:relative;

padding-bottom:12px;

}

.footer h5::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:45px;

height:3px;

background:#CE2029;

border-radius:20px;

}

/* Social */

.footer-social{

display:flex;

gap:15px;

margin-top:10px;

}

.footer-social a{

width:46px;

height:46px;

display:flex;

align-items:center;

justify-content:center;

border:2px solid #CE2029;

border-radius:50%;

color:#CE2029;

font-size:18px;

transition:.35s;

text-decoration:none;

}

.footer-social a:hover{

background:#CE2029;

color:#fff;

transform:translateY(-4px);

}

/* Links */

.footer-links{

list-style:none;

padding:0;

margin:0;

column-count:2;

}

.footer-links li{

margin-bottom:14px;

}

.footer-links a{

color:#555;

text-decoration:none;

transition:.3s;

}

.footer-links a:hover{

color:#CE2029;

padding-left:6px;

}

/* Contact */

.footer-contact{

list-style:none;

padding:0;

margin:0;

}

.footer-contact li{

display:flex;

align-items:flex-start;

gap:15px;

margin-bottom:18px;

color:#555;

}

.footer-contact i{

color:#CE2029;

font-size:18px;

margin-top:3px;

width:22px;

}

/* Newsletter */

.newsletter-form{

display:flex;

overflow:hidden;

border-radius:10px;

border:2px solid #f0d1d3;

margin-top:20px;

}

.newsletter-form input{

flex:1;

border:none;

padding:14px 18px;

outline:none;

font-size:15px;

}

.newsletter-form button{

width:65px;

border:none;

background:#CE2029;

color:#fff;

cursor:pointer;

font-size:18px;

transition:.3s;

}

.newsletter-form button:hover{

background:#b41820;

}

/* Bottom */

.footer-bottom{

margin-top:60px;

background:#CE2029;

padding:18px;

text-align:center;

color:#fff;

font-size:15px;

font-weight:500;

}
/*=========================

VENUE

==========================*/

.venue-section{

padding:0px 0;

/* background:#f8f9fb; */

}

.venue-card{

background:#fff;

border-radius:24px;

overflow:hidden;

display:grid;

grid-template-columns:1.1fr 1fr;

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

}

.venue-map{

position:relative;

min-height:520px;

}

.venue-map iframe{

width:100%;

height:100%;

border:0;

}

.venue-content{

padding:60px;

display:flex;

flex-direction:column;

justify-content:center;

}

.venue-badge{

display:inline-block;

background:#fdecee;

color:#CE2029;

padding:8px 18px;

border-radius:30px;

font-weight:700;

margin-bottom:20px;

width:max-content;

}

.venue-content h3{

font-size:36px;

font-weight:700;

margin-bottom:20px;

}

.venue-content p{

line-height:1.9;

color:#666;

margin-bottom:35px;

}

.venue-content ul{

padding:0;

margin:0 0 35px;

list-style:none;

}

.venue-content ul li{

display:flex;

align-items:center;

gap:15px;

padding:12px 0;

font-size:16px;

}

.venue-content ul li i{

color:#CE2029;

font-size:18px;

width:25px;

}

.venue-btn{

display:inline-flex;

align-items:center;

gap:10px;

padding:16px 28px;

background:#CE2029;

color:#fff;

border-radius:10px;

text-decoration:none;

font-weight:600;

transition:.35s;

width:max-content;

}

.venue-btn:hover{

background:#b91820;

transform:translateY(-3px);

color:#fff;

}

/*========================

COMING SOON MODAL

=========================*/

.abstract-modal{

border:none;

border-radius:25px;

overflow:hidden;

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

}

.abstract-modal .modal-body{

padding:55px 45px;

}

.modal-close{

position:absolute;

right:18px;

top:18px;

z-index:10;

}

.coming-icon{

font-size:80px;

margin-bottom:15px;

animation:bounce 2s infinite;

}

.abstract-modal h2{

font-weight:700;

font-size:32px;

margin-bottom:18px;

color:#222;

}

.abstract-modal p{

font-size:17px;

line-height:1.8;

color:#666;

margin-bottom:25px;

}

.count-icons{

font-size:32px;

letter-spacing:8px;

margin-bottom:35px;

}

.btn-coming{

background:#CE2029;

color:#fff;

border:none;

padding:14px 40px;

border-radius:50px;

font-weight:600;

transition:.3s;

}

.btn-coming:hover{

background:#b71820;

transform:translateY(-3px);

}

@keyframes bounce{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}
.price-padding{
    padding-right: 3rem;
    padding-left: 3rem;
}
.hero-slide-content{
    align-items: center;
    text-align: center;
    justify-content: center;
}

.coming-soon-card{
    max-width:700px;
    margin:30px auto;
    padding:60px 40px;
    text-align:center;
    background:#ffffff;
    border-radius:25px;
    border:1px solid rgba(164,198,57,.25);
    box-shadow:0 20px 60px rgba(0,0,0,.08);
    position:relative;
    overflow:hidden;
}

.coming-soon-card::before{
    content:"";
    position:absolute;
    top:-120px;
    right:-120px;
    width:250px;
    height:250px;
    background:rgba(164,198,57,.12);
    border-radius:50%;
}

.coming-soon-card::after{
    content:"";
    position:absolute;
    bottom:-100px;
    left:-100px;
    width:220px;
    height:220px;
    background:rgba(34,179,193,.12);
    border-radius:50%;
}

.coming-soon-icon{
    width:90px;
    height:90px;
    margin:auto;
    border-radius:50%;
    background:linear-gradient(135deg,#CE2029,#22b3c1);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:38px;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
    animation:float 3s ease-in-out infinite;
    position:relative;
    z-index:2;
}

.coming-soon-card h2{
    margin-top:30px;
    color:#17246e;
    font-size:34px;
    font-weight:700;
}

.coming-soon-card p{
    margin:20px auto 35px;
    max-width:520px;
    color:#666;
    line-height:1.8;
    font-size:17px;
}

.coming-badge{
    display:inline-flex;
    align-items:center;
    gap:10px;
    background:#CE2029;
    color:#fff;
    padding:14px 30px;
    border-radius:50px;
    font-weight:600;
    font-size:15px;
    box-shadow:0 8px 20px #e6676d;
}

@keyframes float{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-10px);
    }

    100%{
        transform:translateY(0px);
    }

}

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

.faq-section {
    padding: 15px 0 90px;
    background: #ffffff;
}


/* =========================================================
   HEADER
   ========================================================= */

.faq-header {
    max-width: 720px;
    margin: 0 auto 0px;
    text-align: center;
}


.faq-label {
    display: inline-block;
    margin-bottom: 12px;
    color: #d91f2b;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
}


.faq-header h2 {
    margin: 0 0 15px;
    color: #171717;
    font-size: 38px;
    font-weight: 700;
}


.faq-header p {
    margin: 0;
    color: #777;
    font-size: 16px;
    line-height: 1.7;
}


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

.faq-wrapper {
    max-width: 950px;
    margin: 0 auto;
}


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

.faq-item {
    margin-bottom: 15px;
    border: 1px solid #e7e7e7;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
    transition: all 0.3s ease;
}


.faq-item:hover {
    border-color: #e12a34;
    box-shadow: 0 8px 25px rgba(217, 31, 43, 0.08);
}


.faq-item.active {
    border-color: #d91f2b;
    box-shadow: 0 8px 30px rgba(217, 31, 43, 0.10);
}


/* =========================================================
   QUESTION
   ========================================================= */

.faq-question {
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;
    padding: 5px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    text-align: left;
}


/* Left side */

.faq-question-left {
    display: flex;
    align-items: center;
    gap: 20px;
}


/* Number */

.faq-number {
    min-width: 42px;
    height: 42px;

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

    border-radius: 50%;

    background: #fff1f2;
    color: #d91f2b;

    font-size: 13px;
    font-weight: 700;

    transition: all 0.3s ease;
}


.faq-item.active .faq-number {
    background: #d91f2b;
    color: #ffffff;
}


/* Question title */

.faq-title {
    color: #222;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.5;
    transition: color 0.3s ease;
}


.faq-item.active .faq-title {
    color: #d91f2b;
}


/* =========================================================
   ICON
   ========================================================= */

.faq-icon {
    width: 36px;
    height: 36px;

    flex-shrink: 0;

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

    border: 1px solid #dddddd;
    border-radius: 50%;

    color: #d91f2b;

    transition: all 0.3s ease;
}


.faq-icon i {
    font-size: 13px;
    transition: transform 0.3s ease;
}


.faq-item.active .faq-icon {
    background: #d91f2b;
    border-color: #d91f2b;
    color: #ffffff;
}


.faq-item.active .faq-icon i {
    transform: rotate(45deg);
}


/* =========================================================
   ANSWER
   ========================================================= */

.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
}


.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
}


.faq-answer-content {
    overflow: hidden;
}


.faq-answer-content p {
    margin: 0;
    padding:0 73px 25px 22px;

    color: #666;

    font-size: 15px;
    line-height: 1.8;
}
/* =========================================================
   FAQ CATEGORY
   ========================================================= */

.faq-category {
    margin-bottom: 45px;
}

.faq-category-title {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 18px;

    color: #222;
    font-size: 18px;
    font-weight: 700;
}

.faq-category-title span {
    display: inline-block;

    width: 4px;
    height: 24px;

    background: #d91f2b;
    border-radius: 4px;
}

/* ============================================================
   MATERIALS R&D
   ABSTRACT SUBMISSION PAGE
============================================================ */

.abstract-submission-page {

    position: relative;

    padding: 70px 0 90px;

    background: #ffffff;

    overflow: hidden;

}


/* ============================================================
   SCIENTIFIC NETWORK BACKGROUND
============================================================ */

.abstract-bg-network {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 430px;

    pointer-events: none;

    opacity: .45;

    background-image:

        radial-gradient(
            circle at 8% 25%,
            rgba(217,31,43,.18) 0 3px,
            transparent 4px
        ),

        radial-gradient(
            circle at 18% 55%,
            rgba(217,31,43,.14) 0 3px,
            transparent 4px
        ),

        radial-gradient(
            circle at 31% 20%,
            rgba(217,31,43,.16) 0 4px,
            transparent 5px
        ),

        radial-gradient(
            circle at 45% 65%,
            rgba(217,31,43,.13) 0 3px,
            transparent 4px
        ),

        radial-gradient(
            circle at 57% 25%,
            rgba(217,31,43,.15) 0 4px,
            transparent 5px
        ),

        radial-gradient(
            circle at 72% 50%,
            rgba(217,31,43,.14) 0 3px,
            transparent 4px
        ),

        radial-gradient(
            circle at 84% 22%,
            rgba(217,31,43,.16) 0 4px,
            transparent 5px
        ),

        radial-gradient(
            circle at 94% 65%,
            rgba(217,31,43,.13) 0 3px,
            transparent 4px
        );


    background-size:
        100% 100%;

}


.abstract-bg-network::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            32deg,
            transparent 49.7%,
            rgba(217,31,43,.08) 50%,
            transparent 50.3%
        ),

        linear-gradient(
            145deg,
            transparent 49.7%,
            rgba(217,31,43,.07) 50%,
            transparent 50.3%
        ),

        linear-gradient(
            70deg,
            transparent 49.8%,
            rgba(217,31,43,.06) 50%,
            transparent 50.2%
        );

    background-size:
        380px 220px,
        430px 250px,
        500px 300px;

}


.abstract-bg-network::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,.15),
            #ffffff 100%
        );

}


/* ============================================================
   CONTAINER
============================================================ */

.abstract-submission-page .container {

    position: relative;

    z-index: 2;

    max-width: 1120px;

}


/* ============================================================
   HEADER
============================================================ */

.abstract-header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 50px;

    margin-bottom: 30px;

}


.abstract-heading h1 {

    margin: 0;

    color: #161616;

    font-size: 48px;

    line-height: 1.05;

    font-weight: 800;

    letter-spacing: -.8px;

}


.abstract-heading h1 span {

    display: block;

    color: #d91f2b;

}


.abstract-heading > p {

    margin: 13px 0 18px;

    color: #555;

    font-size: 15px;

}


/* ============================================================
   REQUIRED NOTICE
============================================================ */

.required-note {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 11px 16px;

    background: #ffffff;

    border: 1px solid #eeeeee;

    border-radius: 8px;

    box-shadow:
        0 5px 20px rgba(0,0,0,.05);

    color: #555;

    font-size: 13px;

}


.required-note i {

    color: #d91f2b;

    font-size: 15px;

}


.required-note strong {

    color: #d91f2b;

}


/* ============================================================
   DOWNLOAD TEMPLATE
============================================================ */

.template-card {

    display: flex;

    align-items: center;

    gap: 14px;

    min-width: 245px;

    padding: 18px;

    margin-top: 8px;

    background: #ffffff;

    border: 1px solid #eeeeee;

    border-radius: 12px;

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

    text-decoration: none;

    transition: all .3s ease;

}


.template-card:hover {

    transform: translateY(-3px);

    border-color: rgba(217,31,43,.25);

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

}


.template-icon {

    width: 48px;
    height: 48px;

    display: flex;

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

    flex-shrink: 0;

    background: #fff1f2;

    border-radius: 10px;

    color: #d91f2b;

    font-size: 23px;

}


.template-content strong {

    display: block;

    margin-bottom: 4px;

    color: #d91f2b;

    font-size: 14px;

}


.template-content span {

    color: #777;

    font-size: 11px;

    line-height: 1.5;

}


/* ============================================================
   FORM CARD
============================================================ */

.abstract-form-card {

    padding: 34px;

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

    border: 1px solid #eeeeee;

    border-radius: 16px;

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

}


/* ============================================================
   FORM FIELD
============================================================ */

.abstract-field label {

    display: block;

    margin-bottom: 8px;

    color: #222;

    font-size: 14px;

    font-weight: 700;

}


.abstract-field label span {

    color: #d91f2b;

}


.abstract-input {

    width: 100%;

    height: 48px;

    padding: 0 14px;

    border: 1px solid #dedede;

    border-radius: 10px;

    outline: none;

    background: #ffffff;

    color: #333;

    font-size: 14px;

    transition: all .25s ease;

}


.abstract-input:hover {

    border-color: #c7c7c7;

}


.abstract-input:focus {

    border-color: #d91f2b;

    box-shadow:
        0 0 0 3px rgba(217,31,43,.10);

}


/* ============================================================
   FILE UPLOAD
============================================================ */

.abstract-upload-section {

    margin-top: 26px;

}


.abstract-drop-zone {

    min-height: 215px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 30px;

    text-align: center;

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(217,31,43,.06),
            transparent 45%
        ),

        #ffffff;

    border: 1.5px dashed #e42b36;

    border-radius: 13px;

    cursor: pointer;

    transition: all .3s ease;

}


.abstract-drop-zone:hover,

.abstract-drop-zone.drag-active {

    background:

        radial-gradient(
            circle at 50% 0%,
            rgba(217,31,43,.10),
            transparent 50%
        ),

        #fffafa;

    border-color: #c71925;

}


.upload-cloud {

    margin-bottom: 10px;

    color: #d91f2b;

    font-size: 46px;

    line-height: 1;

}


.abstract-drop-zone h4 {

    margin: 0 0 5px;

    color: #333;

    font-size: 15px;

    font-weight: 600;

}


.abstract-drop-zone p {

    margin: 0;

    color: #666;

    font-size: 14px;

}


.abstract-drop-zone p label {

    margin: 0;

    color: #d91f2b;

    font-weight: 700;

    cursor: pointer;

}


.accepted-format {

    margin-top: 15px;

    color: #777;

    font-size: 12px;

}


.accepted-format strong {

    color: #555;

}


.selected-file {

    margin-top: 13px;

    padding: 7px 15px;

    background: #f7f7f7;

    border-radius: 20px;

    color: #777;

    font-size: 11px;

}


/* ============================================================
   SUBMIT BUTTON
============================================================ */

.abstract-submit-area {

    display: flex;

    justify-content: center;

    padding: 15px 0 20px;

}


.abstract-submit-btn {

    min-width: 215px;

    height: 50px;

    border: 0;

    border-radius: 8px;

    background: #d91f2b;

    color: #ffffff;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    box-shadow:
        0 8px 20px rgba(217,31,43,.22);

    transition: all .3s ease;

}


.abstract-submit-btn i {

    margin-right: 8px;

}


.abstract-submit-btn:hover {

    background: #bd1823;

    transform: translateY(-2px);

    box-shadow:
        0 12px 25px rgba(217,31,43,.28);

}


/* ============================================================
   IMPORTANT INFORMATION
============================================================ */

.abstract-important {

    display: flex;

    gap: 18px;

    padding: 20px;

    background:
        linear-gradient(
            90deg,
            #fff5f5,
            #fffafa
        );

    border: 1px solid #f5dede;

    border-radius: 10px;

}


.important-icon {

    width: 42px;
    height: 42px;

    display: flex;

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

    flex-shrink: 0;

    background: #fff0f1;

    border-radius: 8px;

    color: #d91f2b;

    font-size: 21px;

}


.important-content h4 {

    margin: 1px 0 7px;

    color: #d91f2b;

    font-size: 14px;

    font-weight: 700;

}


.important-content ul {

    margin: 0;

    padding-left: 18px;

    color: #555;

    font-size: 12px;

    line-height: 1.8;

}


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

@media (max-width: 991px) {

    .abstract-submission-page {

        padding: 55px 0 70px;

    }


    .abstract-header {

        gap: 25px;

    }


    .abstract-heading h1 {

        font-size: 40px;

    }


    .template-card {

        min-width: 220px;

    }

}


@media (max-width: 767px) {

    .abstract-submission-page {

        padding: 40px 0 55px;

    }


    .abstract-header {

        flex-direction: column;

    }


    .abstract-heading h1 {

        font-size: 35px;

    }


    .template-card {

        width: 100%;

        margin-top: 0;

    }


    .abstract-form-card {

        padding: 22px 18px;

    }


    .abstract-drop-zone {

        min-height: 200px;

        padding: 25px 15px;

    }


    .abstract-submit-btn {

        width: 100%;

    }


    .abstract-important {

        padding: 16px;

    }

}

   /* =========================================================
           MATERIAL SCIENCE BACKGROUND
        ========================================================= */

        .registration-page {

            position: relative;

            min-height: 100vh;

            overflow: hidden;

            padding: 35px 20px 40px;

            background:

                radial-gradient(
                    circle at 10% 15%,
                    rgba(215, 25, 32, 0.05) 0,
                    transparent 18%
                ),

                radial-gradient(
                    circle at 85% 30%,
                    rgba(215, 25, 32, 0.04) 0,
                    transparent 20%
                ),

                linear-gradient(
                    135deg,
                    #f8f9fa 0%,
                    #ffffff 50%,
                    #f5f6f8 100%
                );

        }


        /*
        Molecular pattern
        */

        .registration-page::before {

            content: "";

            position: absolute;

            inset: 0;

            pointer-events: none;

            opacity: 0.35;

            background-image:

                radial-gradient(
                    circle,
                    rgba(50, 50, 50, 0.14) 2px,
                    transparent 3px
                ),

                linear-gradient(
                    30deg,
                    transparent 48%,
                    rgba(215, 25, 32, 0.07) 49%,
                    transparent 50%
                ),

                linear-gradient(
                    150deg,
                    transparent 48%,
                    rgba(215, 25, 32, 0.05) 49%,
                    transparent 50%
                );

            background-size:
                95px 95px,
                150px 150px,
                180px 180px;

            z-index: 0;

        }


        /* =========================================================
           MAIN CONTAINER
        ========================================================= */

        .registration-container {

            position: relative;

            z-index: 1;

            max-width: 1450px;

            margin: auto;

        }


        /* =========================================================
           GRID
        ========================================================= */

        .registration-grid {

            display: grid;

            grid-template-columns:
                minmax(0, 2fr)
                minmax(350px, 0.95fr);

            gap: 30px;

            align-items: start;

        }


        /* =========================================================
           LEFT COLUMN
        ========================================================= */

        .left-column {

            display: flex;

            flex-direction: column;

            gap: 18px;

        }


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

        .registration-card {

            background: rgba(255, 255, 255, 0.97);

            border: 1px solid rgba(0, 0, 0, 0.05);

            border-radius: var(--radius);

            box-shadow: var(--shadow);

            overflow: hidden;

        }


        /* =========================================================
           CARD HEADER
        ========================================================= */

        .card-header {

            display: flex;

            align-items: center;

            gap: 15px;

            padding: 20px 25px;

            border-bottom: 1px solid var(--border);

        }


        .card-header-icon {

            width: 48px;

            height: 48px;

            flex: 0 0 48px;

            border-radius: 13px;

            display: flex;

            align-items: center;

            justify-content: center;

            background: var(--primary);

            color: white;

            font-size: 19px;

            box-shadow:
                0 7px 15px rgba(215, 25, 32, 0.18);

        }


        .card-header-content {

            flex: 1;

        }


        .card-header h3 {

            font-size: 18px;

            font-weight: 800;

            text-transform: uppercase;

            letter-spacing: 0.2px;

        }


        .card-header p {

            margin-top: 2px;

            color: var(--muted);

            font-size: 14px;

        }


        /* =========================================================
           REGISTRATION PLAN
        ========================================================= */

        .registration-plan {

            display: flex;

            align-items: center;

            justify-content: space-between;

            gap: 20px;

            padding: 22px 25px;

        }


        .registration-plan h2 {

            font-size: 20px;

            color: #111827;

            margin-bottom: 3px;

        }


        .registration-plan p {

            color: var(--muted);

            font-size: 14px;

        }


        .registration-price {

            color: var(--primary);

            font-size: 34px;

            font-weight: 900;

            white-space: nowrap;

        }


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

        .quantity-wrapper {

            padding: 20px 25px;

        }


        .quantity-control {

            display: flex;

            align-items: center;

            gap: 10px;

        }


        .quantity-btn {

            width: 46px;

            height: 46px;

            border: 1px solid #ddd;

            border-radius: 12px;

            background: white;

            color: var(--primary);

            font-size: 20px;

            cursor: pointer;

            transition: 0.2s;

        }


        .quantity-btn:hover {

            background: var(--primary);

            color: white;

            border-color: var(--primary);

        }


        .quantity-value {

            width: 70px;

            height: 46px;

            border: 1px solid #ddd;

            border-radius: 12px;

            display: flex;

            justify-content: center;

            align-items: center;

            font-size: 17px;

            font-weight: 700;

            background: #fff;

        }


        /* =========================================================
           ADDITIONAL PRESENTATION
        ========================================================= */

        .option-body {

            padding: 20px 25px;

        }


        .checkbox-row {

            display: flex;

            align-items: center;

            gap: 12px;

            cursor: pointer;

            font-size: 16px;

            font-weight: 600;

        }


        .checkbox-row input {

            width: 21px;

            height: 21px;

            accent-color: var(--primary);

            cursor: pointer;

        }


        .addon-price {

            margin-left: auto;

            color: var(--primary);

            font-weight: 800;

        }


        /* =========================================================
           ACCOMMODATION
        ========================================================= */

        .accommodation-body {

            padding: 20px 25px 25px;

        }


        .accommodation-options {

            display: grid;

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

            gap: 16px;

        }


        .accommodation-option {

            position: relative;

            padding: 22px 15px;

            min-height: 120px;

            border: 1.5px solid #ddd;

            border-radius: 14px;

            background: white;

            cursor: pointer;

            text-align: center;

            transition: 0.25s;

        }


        .accommodation-option:hover {

            border-color: var(--primary);

            transform: translateY(-2px);

        }


        .accommodation-option.active {

            border-color: var(--primary);

            background:
                linear-gradient(
                    145deg,
                    #fff4f4,
                    #ffffff
                );

            box-shadow:
                0 5px 15px rgba(215, 25, 32, 0.08);

        }


        .accommodation-option i {

            display: block;

            font-size: 31px;

            color: var(--primary);

            margin-bottom: 10px;

        }


        .accommodation-option strong {

            display: block;

            font-size: 16px;

        }


        .accommodation-option span {

            color: var(--muted);

            font-size: 14px;

            display: block;

            margin-top: 3px;

        }


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

        .date-grid {

            display: grid;

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

            gap: 20px;

            margin-top: 20px;

        }


        .form-group {

            display: flex;

            flex-direction: column;

            gap: 7px;

        }


        .form-group label {

            font-size: 14px;

            font-weight: 700;

        }


        .form-group label span {

            color: var(--primary);

        }


        .form-control {

            width: 100%;

            height: 48px;

            border: 1px solid #dcdcdc;

            border-radius: 11px;

            padding: 0 14px;

            outline: none;

            background: white;

            font-size: 14px;

            transition: 0.2s;

        }


        .form-control:focus {

            border-color: var(--primary);

            box-shadow:
                0 0 0 3px rgba(215, 25, 32, 0.08);

        }


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

        .promo-body {

            padding: 20px 25px;

        }


        .promo-wrapper {

            display: flex;

            width: 100%;

        }


        .promo-wrapper input {

            flex: 1;

            border: 1px solid #ddd;

            border-right: none;

            border-radius: 10px 0 0 10px;

            padding: 0 15px;

            height: 46px;

            outline: none;

        }


        .promo-wrapper button {

            width: 130px;

            border: none;

            border-radius: 0 10px 10px 0;

            background: var(--primary);

            color: white;

            font-weight: 700;

            cursor: pointer;

        }


        .promo-wrapper button:hover {

            background: var(--primary-dark);

        }


        /* =========================================================
           PERSONAL DETAILS
        ========================================================= */

        .personal-body {

            padding: 20px 25px 25px;

        }


        .personal-grid {

            display: grid;

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

            gap: 18px 22px;

        }


        /* =========================================================
           RIGHT COLUMN
        ========================================================= */

        .right-column {

            position: sticky;

            top: 20px;

            display: flex;

            flex-direction: column;

            gap: 18px;

        }


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

        .cart-card {

            position: relative;

            overflow: hidden;

            background:

                radial-gradient(
                    circle at 90% 0%,
                    rgba(215, 25, 32, 0.25),
                    transparent 25%
                ),

                linear-gradient(
                    145deg,
                    #111318,
                    #1b1f27
                );

            color: white;

            border-radius: var(--radius);

            padding: 28px;

            box-shadow:
                0 15px 35px rgba(0,0,0,0.16);

        }


        /*
        decorative molecular pattern
        */

        .cart-card::after {

            content: "";

            position: absolute;

            width: 250px;

            height: 250px;

            right: -100px;

            bottom: -120px;

            border: 2px solid rgba(215,25,32,0.2);

            border-radius: 50%;

            box-shadow:
                0 0 0 20px rgba(215,25,32,0.04),
                0 0 0 45px rgba(215,25,32,0.03);

            pointer-events: none;

        }


        .cart-title {

            display: flex;

            align-items: center;

            gap: 13px;

            position: relative;

            z-index: 2;

            margin-bottom: 25px;

        }


        .cart-title-icon {

            width: 46px;

            height: 46px;

            border-radius: 12px;

            background: var(--primary);

            display: flex;

            align-items: center;

            justify-content: center;

        }


        .cart-title h2 {

            font-size: 20px;

            text-transform: uppercase;

        }


        .cart-lines {

            position: relative;

            z-index: 2;

        }


        .cart-line {

            display: flex;

            justify-content: space-between;

            gap: 20px;

            padding: 15px 0;

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

            font-size: 14px;

        }


        .cart-line span:last-child {

            font-weight: 800;

            white-space: nowrap;

        }


        .cart-total {

            display: flex;

            justify-content: space-between;

            align-items: center;

            padding-top: 27px;

            position: relative;

            z-index: 2;

        }


        .cart-total span:first-child {

            font-size: 17px;

            font-weight: 800;

            text-transform: uppercase;

        }


        .cart-total span:last-child {

            color: #ff242b;

            font-size: 34px;

            font-weight: 900;

        }


        /* =========================================================
           PAYMENT
        ========================================================= */

        .payment-card {

            background: white;

            border-radius: var(--radius);

            padding: 25px;

            box-shadow: var(--shadow);

        }


        .payment-header {

            display: flex;

            align-items: center;

            gap: 13px;

            padding-bottom: 18px;

            border-bottom: 1px solid var(--border);

            margin-bottom: 20px;

        }


        .payment-icon {

            width: 46px;

            height: 46px;

            border-radius: 12px;

            background: var(--primary);

            color: white;

            display: flex;

            align-items: center;

            justify-content: center;

        }


        .payment-header h3 {

            font-size: 18px;

            text-transform: uppercase;

        }


        .payment-fields {

            display: flex;

            flex-direction: column;

            gap: 17px;

        }


        .payment-row {

            display: grid;

            grid-template-columns:
                1fr 1fr;

            gap: 17px;

        }


        .pay-button {

            height: 56px;

            border: none;

            border-radius: 11px;

            background: var(--primary);

            color: white;

            font-size: 17px;

            font-weight: 800;

            cursor: pointer;

            transition: 0.2s;

            margin-top: 4px;

        }


        .pay-button:hover {

            background: var(--primary-dark);

            transform: translateY(-1px);

        }


        .secure-text {

            text-align: center;

            color: #777;

            font-size: 13px;

            margin-top: 15px;

        }


        .secure-text i {

            color: #777;

        }


        .secure-text strong {

            color: #635bff;

        }


        /* =========================================================
           BENEFITS
        ========================================================= */

        .benefits {

            margin-top: 20px;

            display: grid;

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

            background: white;

            border-radius: var(--radius);

            box-shadow: var(--shadow);

            overflow: hidden;

        }


        .benefit {

            padding: 20px 18px;

            display: flex;

            align-items: center;

            gap: 14px;

            border-right: 1px solid #eee;

        }


        .benefit:last-child {

            border-right: none;

        }


        .benefit-icon {

            color: var(--primary);

            font-size: 34px;

            min-width: 40px;

            text-align: center;

        }


        .benefit h4 {

            font-size: 13px;

            color: var(--primary);

            margin-bottom: 3px;

        }


        .benefit p {

            color: #666;

            font-size: 11px;

            line-height: 1.4;

        }


        /* =========================================================
           RESPONSIVE - LARGE TABLET
        ========================================================= */

        @media (max-width: 1100px) {

            .registration-grid {

                grid-template-columns:
                    minmax(0, 1.5fr)
                    minmax(320px, 0.9fr);

                gap: 20px;

            }


            .benefits {

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

            }


            .benefit:nth-child(3) {

                border-right: none;

            }


            .benefit:nth-child(n+4) {

                border-top: 1px solid #eee;

            }

        }


        /* =========================================================
           TABLET
        ========================================================= */

        @media (max-width: 900px) {

            .registration-page {

                padding: 25px 15px 30px;

            }


            .registration-grid {

                grid-template-columns: 1fr;

            }


            .right-column {

                position: static;

            }


            /*
            Cart appears after left content
            */

            .cart-card {

                order: 1;

            }


            .payment-card {

                order: 2;

            }


            .accommodation-options {

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

            }


            .benefits {

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

            }


            .benefit:nth-child(3) {

                border-right: 1px solid #eee;

            }

        }


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

        @media (max-width: 600px) {

            .registration-page {

                padding: 15px 10px 25px;

            }


            .registration-card,
            .cart-card,
            .payment-card,
            .benefits {

                border-radius: 14px;

            }


            .card-header {

                padding: 16px;

                gap: 11px;

            }


            .card-header-icon {

                width: 42px;

                height: 42px;

                flex-basis: 42px;

                font-size: 16px;

            }


            .card-header h3 {

                font-size: 15px;

            }


            .registration-plan {

                padding: 18px 16px;

                align-items: flex-start;

            }


            .registration-plan h2 {

                font-size: 16px;

            }


            .registration-price {

                font-size: 25px;

            }


            .quantity-wrapper,
            .option-body,
            .accommodation-body,
            .promo-body,
            .personal-body {

                padding: 17px 16px;

            }


            .accommodation-options {

                grid-template-columns:
                    1fr;

                gap: 10px;

            }


            .accommodation-option {

                min-height: 95px;

                display: grid;

                grid-template-columns: 55px 1fr;

                align-items: center;

                text-align: left;

                padding: 14px;

            }


            .accommodation-option i {

                grid-row: span 2;

                margin: 0;

                text-align: center;

            }


            .accommodation-option strong {

                margin: 0;

            }


            .date-grid {

                grid-template-columns: 1fr;

                gap: 14px;

            }


            .personal-grid {

                grid-template-columns: 1fr;

                gap: 14px;

            }


            .promo-wrapper {

                flex-direction: column;

                gap: 8px;

            }


            .promo-wrapper input {

                border: 1px solid #ddd;

                border-radius: 9px;

                width: 100%;

            }


            .promo-wrapper button {

                width: 100%;

                border-radius: 9px;

            }


            .cart-card {

                padding: 20px;

            }


            .cart-title h2 {

                font-size: 17px;

            }


            .cart-line {

                font-size: 13px;

                padding: 13px 0;

            }


            .cart-total span:first-child {

                font-size: 15px;

            }


            .cart-total span:last-child {

                font-size: 28px;

            }


            .payment-card {

                padding: 20px;

            }


            .payment-row {

                grid-template-columns: 1fr;

                gap: 14px;

            }


            .benefits {

                grid-template-columns: 1fr;

            }


            .benefit {

                border-right: none !important;

                border-bottom: 1px solid #eee;

            }


            .benefit:last-child {

                border-bottom: none;

            }

        }


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

        @media (max-width: 380px) {

            .registration-plan {

                flex-direction: column;

                gap: 8px;

            }


            .registration-price {

                align-self: flex-start;

            }


            .quantity-btn {

                width: 42px;

                height: 42px;

            }


            .quantity-value {

                height: 42px;

                width: 60px;

            }

        }


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

@media (max-width: 767px) {

    .faq-section {
        padding: 55px 0 65px;
    }


    .faq-header {
        margin-bottom: 30px;
    }


    .faq-header h2 {
        font-size: 30px;
    }


    .faq-header p {
        font-size: 14px;
    }


    .faq-question {
        padding: 18px;
    }


    .faq-question-left {
        gap: 12px;
    }


    .faq-number {
        min-width: 36px;
        width: 36px;
        height: 36px;
        font-size: 11px;
    }


    .faq-title {
        font-size: 14px;
        padding-right: 10px;
    }


    .faq-icon {
        width: 32px;
        height: 32px;
    }


    .faq-answer-content p {
        padding: 0 20px 20px 66px;
        font-size: 14px;
    }

}

/* =========================================================
   SECURITY CARD
   ========================================================= */

.security-card {
    position: relative;
    width: 100%;
    min-height: 110px;

    display: flex;
    align-items: center;

    padding: 22px 26px;

    background: linear-gradient(
        135deg,
        #ffffff 0%,
        #fffafa 55%,
        #fff4f4 100%
    );

    border: 1px solid #f1dddd;
    border-radius: 12px;

    overflow: hidden;

    box-shadow:
        0 4px 18px rgba(0, 0, 0, 0.05);
}


/* =========================================================
   MOLECULAR BACKGROUND
   ========================================================= */

.security-pattern {
    position: absolute;

    top: 0;
    right: 0;

    width: 48%;
    height: 100%;

    opacity: 0.55;

    pointer-events: none;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='180' viewBox='0 0 420 180'%3E%3Cg fill='none' stroke='%23e8bcbc' stroke-width='1.2' opacity='.65'%3E%3Cpath d='M280 20L330 45L375 20L415 55L390 105L335 100L300 140L250 115L265 70Z'/%3E%3Cpath d='M330 45L335 100M375 20L390 105M280 20L265 70M265 70L335 100M300 140L335 100M250 115L300 140'/%3E%3C/g%3E%3Cg fill='%23efcaca'%3E%3Ccircle cx='280' cy='20' r='5'/%3E%3Ccircle cx='330' cy='45' r='6'/%3E%3Ccircle cx='375' cy='20' r='5'/%3E%3Ccircle cx='415' cy='55' r='5'/%3E%3Ccircle cx='390' cy='105' r='6'/%3E%3Ccircle cx='335' cy='100' r='5'/%3E%3Ccircle cx='300' cy='140' r='5'/%3E%3Ccircle cx='250' cy='115' r='5'/%3E%3Ccircle cx='265' cy='70' r='6'/%3E%3C/g%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;

    /* Fade the pattern toward the left */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.35) 30%,
        #000 100%
    );

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(0,0,0,.35) 30%,
        #000 100%
    );
}


/* =========================================================
   SECURITY ICON
   ========================================================= */

.security-icon {
    position: relative;
    z-index: 2;

    width: 52px;
    height: 52px;

    flex: 0 0 52px;

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

    margin-right: 18px;

    color: #CE2029;

    font-size: 27px;

    border: 2px solid #CE2029;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.85);
}


/* =========================================================
   CONTENT
   ========================================================= */

.security-content {
    position: relative;
    z-index: 2;
}

.security-content h4 {
    margin: 0 0 6px;

    color: #CE2029;

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

    line-height: 1.3;
}

.security-content p {
    margin: 0;

    color: #626b78;

    font-size: 13px;
    line-height: 1.65;
}


/* =========================================================
   HOVER
   ========================================================= */

.security-card {
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.security-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.08);
}

.security-card:hover .security-icon {
    background: #CE2029;
    color: #ffffff;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 768px) {

    .security-card {
        min-height: 100px;
        padding: 20px;
    }

    .security-icon {
        width: 48px;
        height: 48px;

        flex-basis: 48px;

        margin-right: 15px;

        font-size: 24px;
    }

    .security-content h4 {
        font-size: 15px;
    }

    .security-content p {
        font-size: 12.5px;
    }

}


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

@media (max-width: 480px) {

    .security-card {
        min-height: auto;

        padding: 18px;

        border-radius: 10px;
    }

    .security-icon {
        width: 44px;
        height: 44px;

        flex-basis: 44px;

        margin-right: 13px;

        font-size: 21px;
    }

    .security-content h4 {
        font-size: 14px;

        margin-bottom: 4px;
    }

    .security-content p {
        font-size: 11.5px;

        line-height: 1.5;
    }

    .desktop-only {
        display: none;
    }

    .security-pattern {
        width: 55%;

        opacity: 0.4;
    }

}

/* =========================================================
   ABSTRACT VALIDATION
========================================================= */

.field-error {
    display: none;
    margin-top: 6px;
    padding-left: 2px;

    color: #dc1f2e;
    font-size: 13px;
    font-weight: 500;

    line-height: 1.4;
}

.field-error.show {
    display: block;
}

.abstract-input.input-error {
    border-color: #dc1f2e !important;

    box-shadow:
        0 0 0 3px rgba(220, 31, 46, 0.08) !important;
}

.abstract-input.input-valid {
    border-color: #198754 !important;

    box-shadow:
        0 0 0 3px rgba(25, 135, 84, 0.06) !important;
}

.abstract-drop-zone.upload-error {
    border-color: #dc1f2e !important;

    background: rgba(220, 31, 46, 0.02);
}

.abstract-drop-zone.upload-valid {
    border-color: #198754 !important;

    background: rgba(25, 135, 84, 0.02);
}


/* =========================================================
   SUCCESS POPUP
========================================================= */

.abstract-success-overlay {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 20px;

    background:
        rgba(15, 18, 30, 0.65);

    backdrop-filter: blur(6px);

    opacity: 0;

    visibility: hidden;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}


.abstract-success-overlay.show {

    opacity: 1;

    visibility: visible;
}


.abstract-success-popup {

    width: 100%;

    max-width: 430px;

    background: #ffffff;

    border-radius: 22px;

    padding: 38px 32px 32px;

    text-align: center;

    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.25);

    transform:
        translateY(25px)
        scale(0.95);

    transition:
        transform 0.3s ease;
}


.abstract-success-overlay.show
.abstract-success-popup {

    transform:
        translateY(0)
        scale(1);
}


.success-icon {

    width: 78px;

    height: 78px;

    margin: 0 auto 20px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #d71928,
            #ef3340
        );

    color: #ffffff;

    font-size: 34px;

    box-shadow:
        0 12px 30px
        rgba(215, 25, 40, 0.25);
}


.abstract-success-popup h3 {

    margin: 0 0 10px;

    color: #17243d;

    font-size: 25px;

    font-weight: 700;
}


.abstract-success-popup p {

    margin: 0 auto 25px;

    max-width: 330px;

    color: #697386;

    font-size: 15px;

    line-height: 1.6;
}


.success-close-btn {

    border: 0;

    outline: 0;

    min-width: 150px;

    padding: 12px 25px;

    border-radius: 10px;

    background: #d71928;

    color: #ffffff;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease;
}


.success-close-btn:hover {

    background: #b91522;

    transform: translateY(-1px);
}


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

@media (max-width: 576px) {

    .abstract-success-popup {

        padding: 32px 22px 25px;

        border-radius: 18px;
    }

    .success-icon {

        width: 68px;

        height: 68px;

        font-size: 28px;
    }

    .abstract-success-popup h3 {

        font-size: 22px;
    }

}





/* =========================================================
   NEW REGISTRATION DESIGN - SCOPED ADDITION
   Existing CSS above is preserved.
   ========================================================= */
/* =========================================================
   MATERIALS WEBSITE REGISTRATION - NON-DESTRUCTIVE CSS
   Every selector is scoped with .mxreg- so the old website
   CSS can remain unchanged.
   ========================================================= */
.mxreg-page{position:relative;min-height:100vh;padding:24px 15px 40px;background:#fff;overflow:hidden}
.mxreg-page::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;background-image:radial-gradient(circle,rgba(40,40,40,.11) 1.5px,transparent 2.5px),linear-gradient(30deg,transparent 48%,rgba(206,32,41,.045) 49%,transparent 50%),linear-gradient(150deg,transparent 48%,rgba(206,32,41,.035) 49%,transparent 50%);background-size:95px 95px,150px 150px,180px 180px}
.mxreg-container{position:relative;z-index:1;max-width:1200px;margin:0 auto}
.mxreg-intro,.mxreg-card,.mxreg-security{background:rgba(255,255,255,.97);border:1px solid rgba(0,0,0,.055);border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.055)}
.mxreg-intro{padding:18px 26px;margin-bottom:8px}
.mxreg-intro h1{margin:0;color:#172033;font-size:22px;font-weight:800;letter-spacing:.2px}
.mxreg-intro p{margin:5px 0 0;color:#274477;font-size:14px}
.mxreg-card{margin-bottom:8px;overflow:hidden}
.mxreg-card-head{display:flex;align-items:center;gap:11px;padding:17px 25px;border-bottom:1px solid #e5e5e5}
.mxreg-card-icon{width:30px;height:30px;flex:0 0 30px;border-radius:6px;background:#ce2029;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 5px 12px rgba(206,32,41,.16)}
.mxreg-card-head h2{margin:0;color:#172033;font-size:16px;font-weight:800;line-height:1.25}
.mxreg-card-head p{margin:4px 0 0;color:#566173;font-size:13px}
.mxreg-body{padding:18px 25px 20px}
.mxreg-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 22px}
.mxreg-field{min-width:0}
.mxreg-field label{display:block;margin:0 0 7px;color:#182235;font-size:13px;font-weight:700}
.mxreg-field label span{color:#ce2029}
.mxreg-control{width:100%;height:42px;border:1px solid #d7dce2;border-radius:7px;background:#fff;padding:0 14px;color:#465166;font-size:13px;outline:none;box-sizing:border-box;transition:border-color .2s,box-shadow .2s}
.mxreg-control:focus{border-color:#ce2029;box-shadow:0 0 0 3px rgba(206,32,41,.08)}
.mxreg-control.mxreg-invalid{border-color:#ce2029!important;box-shadow:0 0 0 2px rgba(206,32,41,.06)}
.mxreg-error-text{display:none;margin-top:5px;color:#ce2029;font-size:12px;font-weight:500;line-height:1.3}
.mxreg-error-text.show{display:block}
.mxreg-room-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.mxreg-room{position:relative;min-height:116px;border:1px solid #d7dce2;border-radius:8px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;transition:.2s;padding:15px}
.mxreg-room:hover{border-color:#ce2029}
.mxreg-room.is-selected{border:1.5px solid #ce2029;background:linear-gradient(145deg,#fff6f6,#fff)}
.mxreg-room input{position:absolute;opacity:0;pointer-events:none}
.mxreg-room-radio{position:absolute;left:14px;top:14px;width:15px;height:15px;border:1.5px solid #c5cbd3;border-radius:50%}
.mxreg-room.is-selected .mxreg-room-radio{border-color:#ce2029;box-shadow:inset 0 0 0 4px #fff;background:#ce2029}
.mxreg-room i{color:#ce2029;font-size:26px;margin-bottom:7px}
.mxreg-room strong{color:#172033;font-size:13px}
.mxreg-room small{color:#647084;font-size:11px;margin-top:3px}
.mxreg-date-grid{margin-top:18px}
.mxreg-note{margin:10px 0 0;color:#586273;font-size:12px}
.mxreg-compact-card .mxreg-card-head{padding-bottom:15px}
.mxreg-option-line{display:flex;align-items:center;justify-content:space-between;gap:15px}
.mxreg-option-line label{display:flex;align-items:center;gap:8px;color:#263143;font-size:13px;cursor:pointer}
.mxreg-option-line input{width:16px;height:16px;accent-color:#ce2029}
.mxreg-option-line>span{color:#303746;font-size:13px;font-weight:700;white-space:nowrap}
.mxreg-option-line>span i{color:#9ba2ad;margin-left:4px}
.mxreg-promo{display:flex;width:100%}
.mxreg-promo input{flex:1;height:42px;border:1px solid #d7dce2;border-right:0;border-radius:7px 0 0 7px;padding:0 13px;outline:none;font-size:13px;color:#3f4b5e;min-width:0}
.mxreg-promo input:focus{border-color:#ce2029}
.mxreg-promo button{width:140px;height:42px;border:0;border-radius:0 7px 7px 0;background:#ce2029;color:#fff;font-weight:700;cursor:pointer}
.mxreg-coupon-message{display:none;margin-top:7px;font-size:12px}.mxreg-coupon-message.show{display:block}.mxreg-coupon-message.success{color:#198754}.mxreg-coupon-message.error{color:#ce2029}
.mxreg-stripe-element{min-height:42px;border:1px solid #d7dce2;border-radius:7px;padding:11px 12px;background:#fff;box-sizing:border-box}
.mxreg-stripe-element.mxreg-invalid{border-color:#ce2029;box-shadow:0 0 0 2px rgba(206,32,41,.06)}
.mxreg-pay-button{width:100%;height:47px;border:0;border-radius:7px;background:#e51c27;color:#fff;font-size:15px;font-weight:800;cursor:pointer;margin-top:20px;transition:.2s}
.mxreg-pay-button:hover:not(:disabled){background:#ce2029;transform:translateY(-1px)}
.mxreg-pay-button:disabled{opacity:.7;cursor:not-allowed}
.mxreg-secure-text{text-align:center;color:#687181;font-size:12px;margin:11px 0 0}.mxreg-secure-text i{margin-right:4px;color:#737b88}
.mxreg-security{display:flex;align-items:center;gap:18px;padding:17px 25px;margin-top:0;background:linear-gradient(90deg,#fffafa,#fff)}
.mxreg-security-icon{width:44px;height:44px;border:1.5px solid #ef7a80;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#ce2029;font-size:20px;flex:0 0 44px}
.mxreg-security h3{margin:0;color:#ce2029;font-size:14px;font-weight:800}.mxreg-security p{margin:4px 0 0;color:#5d6675;font-size:12px}
.mxreg-hidden{display:none}
@media(max-width:900px){.mxreg-container{max-width:760px}.mxreg-grid-2{gap:15px}.mxreg-room-grid{gap:12px}.mxreg-card-head,.mxreg-body{padding-left:18px;padding-right:18px}}
@media(max-width:600px){.mxreg-page{padding:12px 8px 25px}.mxreg-intro{padding:15px 16px}.mxreg-intro h1{font-size:19px}.mxreg-intro p{font-size:12px}.mxreg-grid-2,.mxreg-room-grid{grid-template-columns:1fr}.mxreg-card-head{padding:14px 15px}.mxreg-body{padding:15px}.mxreg-room{min-height:105px}.mxreg-date-grid{margin-top:14px}.mxreg-option-line{align-items:flex-start}.mxreg-promo button{width:105px}.mxreg-security{padding:15px;gap:12px}.mxreg-security-icon{width:38px;height:38px;flex-basis:38px}.mxreg-security h3{font-size:13px}.mxreg-security p{font-size:11px}}

.mxreg-success-overlay{position:fixed;inset:0;z-index:99999;background:rgba(15,18,24,.48);display:flex;align-items:center;justify-content:center;padding:20px}
.mxreg-success-modal{width:min(420px,100%);background:#fff;border-radius:16px;padding:32px 28px;text-align:center;box-shadow:0 25px 70px rgba(0,0,0,.22)}
.mxreg-success-icon{width:62px;height:62px;margin:0 auto 15px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#eaf8ef;color:#198754;font-size:28px}
.mxreg-success-modal h2{margin:0 0 8px;color:#172033;font-size:22px}.mxreg-success-modal p{margin:0 0 18px;color:#626c7b;font-size:14px}.mxreg-success-modal strong{display:block;color:#172033;margin-bottom:18px}.mxreg-success-modal button{border:0;background:#ce2029;color:#fff;border-radius:7px;padding:11px 28px;font-weight:700;cursor:pointer}


/* =========================================================
   REGISTRATION CART + SEPARATE STRIPE FIELDS
   Scoped only to .mxreg-* registration components.
   ========================================================= */
.mxreg-payment-card .mxreg-body{padding-top:20px}
.mxreg-cart{width:100%;margin-bottom:22px;border:1px solid #e1e4e8;border-radius:10px;background:linear-gradient(135deg,#fff,#fffafa);overflow:hidden}
.mxreg-cart-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 18px;background:#fafafa;border-bottom:1px solid #e4e4e4}
.mxreg-cart-kicker{display:block;margin-bottom:3px;color:#7a8290;font-size:10px;font-weight:800;letter-spacing:.8px}
.mxreg-cart-head h3{margin:0;color:#172033;font-size:15px;font-weight:800}
.mxreg-cart-head h3 i{color:#ce2029;margin-right:7px}
.mxreg-cart-total{color:#ce2029;font-size:21px;font-weight:900;white-space:nowrap}
.mxreg-cart-items{padding:5px 18px}
.mxreg-cart-row{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:40px;border-bottom:1px solid #ededed;color:#505a69;font-size:13px}
.mxreg-cart-row:last-child{border-bottom:0}
.mxreg-cart-row strong{color:#202837;font-weight:700;white-space:nowrap}
.mxreg-cart-final{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 18px;border-top:1px solid #dedede;background:#fff;color:#172033;font-size:15px;font-weight:800}
.mxreg-cart-final strong{color:#ce2029;font-size:22px;font-weight:900}
.mxreg-payment-fields{margin-top:17px}
.mxreg-stripe-element{min-height:42px;display:flex;align-items:center;border:1px solid #d7dce2;border-radius:7px;padding:10px 12px;background:#fff;box-sizing:border-box;transition:border-color .2s,box-shadow .2s}
.mxreg-stripe-element:focus-within{border-color:#ce2029;box-shadow:0 0 0 3px rgba(206,32,41,.08)}
.mxreg-stripe-element.mxreg-invalid{border-color:#ce2029!important;box-shadow:0 0 0 2px rgba(206,32,41,.07)}
.mxreg-payment-card #payment_error{margin-top:8px}
@media(max-width:600px){.mxreg-cart-head{align-items:flex-start;flex-direction:column;gap:7px}.mxreg-cart-total{font-size:19px}.mxreg-cart-row{min-height:38px;font-size:12px}.mxreg-cart-final{font-size:14px}.mxreg-cart-final strong{font-size:20px}.mxreg-payment-fields{margin-top:14px}}