/*
========================================================================
ICRAI 2026 Conference CMS
Professional Theme Stylesheet
Version: 1.0
========================================================================
*/

/* =======================
   CSS VARIABLES
======================= */
:root{
    --primary:#006699;
    --primary-dark:#004d73;
    --secondary:#00a3d9;
    --accent:#ffc107;
    --success:#28a745;
    --danger:#dc3545;
    --dark:#112240;
    --text:#495057;
    --light:#ffffff;
    --gray:#f6f8fb;
    --border:#e7edf3;
    --radius:18px;
    --radius-lg:28px;
    --shadow:0 12px 30px rgba(0,0,0,.08);
    --shadow-lg:0 24px 60px rgba(0,0,0,.12);
    --transition:.35s ease;
}

/* RESET */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    font-family:"Poppins",sans-serif;
    background:#fff;
    color:var(--text);
    line-height:1.7;
    overflow-x:hidden;
}
img{max-width:100%;height:auto}
a{text-decoration:none;transition:var(--transition)}
ul{list-style:none;padding:0;margin:0}
section{padding:90px 0}
.container{max-width:1200px}

/* TYPOGRAPHY */
h1,h2,h3,h4,h5,h6{
    color:var(--dark);
    font-weight:700;
    line-height:1.2;
}
.section-title{
    font-size:2.6rem;
    color:var(--primary);
    margin-bottom:15px;
}
.section-subtitle{
    max-width:700px;
    margin:0 auto 45px;
    color:#6c757d;
}

/* BUTTONS */
.btn{
    border-radius:999px;
    padding:14px 30px;
    font-weight:600;
    transition:var(--transition);
}
.btn-primary{
    background:var(--primary);
    border-color:var(--primary);
}
.btn-primary:hover{
    background:var(--primary-dark);
    border-color:var(--primary-dark);
    transform:translateY(-2px);
}
.btn-outline-light:hover{
    color:var(--primary);
}

/* TOPBAR */
.topbar{
    background:var(--primary);
    color:#fff;
    font-size:.9rem;
}
.topbar a{color:#fff}

/* NAVBAR */
.navbar{
    background:#fff;
    padding:14px 0;
    transition:var(--transition);
}
.navbar-brand img{height:62px}
.nav-link{
    color:var(--dark)!important;
    font-weight:500;
    padding:.9rem 1rem!important;
}
.nav-link:hover{color:var(--primary)!important}
.dropdown-menu{
    border:none;
    border-radius:16px;
    box-shadow:var(--shadow);
}

/* HERO */
.hero{
    position:relative;
    min-height:760px;
    display:flex;
    align-items:center;
    background:linear-gradient(135deg,#004d73,#006699,#0099cc);
    overflow:hidden;
}
.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(circle at 20% 20%,rgba(255,255,255,.14),transparent 35%),
      radial-gradient(circle at 80% 30%,rgba(255,255,255,.08),transparent 30%);
}
.hero .container{position:relative;z-index:2}
.hero h1{
    color:#fff;
    font-size:4rem;
    font-weight:800;
}
.hero p{
    color:#eef7fb;
    font-size:1.2rem;
    max-width:640px;
}
.glass{
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.18);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
}

/* COUNTDOWN */
#countdown{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}
.count-item{
    background:rgba(255,255,255,.14);
    border-radius:16px;
    padding:18px;
    color:#fff;
    text-align:center;
}
.count-item span{
    display:block;
    font-size:2rem;
    font-weight:700;
}

/* ANNOUNCEMENT */
.announcement{
    background:var(--primary);
    color:#fff;
    padding:12px 0;
}

/* CARDS */
.card-modern{
    border:none;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    transition:var(--transition);
    overflow:hidden;
}
.card-modern:hover{
    transform:translateY(-8px);
    box-shadow:var(--shadow-lg);
}

/* TRACKS */
.track-card{
    background:#fff;
    padding:35px;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    height:100%;
}
.track-card i{
    color:var(--primary);
    font-size:2rem;
    margin-bottom:20px;
}

/* SPEAKERS */
.speaker-card{
    text-align:center;
    background:#fff;
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    overflow:hidden;
}
.speaker-card img{
    aspect-ratio:1/1;
    object-fit:cover;
}
.speaker-card h5{margin-top:18px}

/* TIMELINE */
.timeline{
    border-left:3px solid var(--primary);
    padding-left:25px;
}
.timeline-item{
    position:relative;
    margin-bottom:35px;
}
.timeline-item::before{
    content:"";
    width:18px;
    height:18px;
    background:var(--accent);
    border-radius:50%;
    position:absolute;
    left:-35px;
    top:6px;
}

/* GALLERY */
.gallery-item{
    overflow:hidden;
    border-radius:18px;
}
.gallery-item img{
    transition:.5s;
}
.gallery-item:hover img{
    transform:scale(1.08);
}

/* CTA */
.cta{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    border-radius:28px;
}
.cta h2,.cta p{color:#fff}

/* FOOTER */
.footer{
    background:#062f4f;
    color:#dbe7ef;
    padding:70px 0 30px;
}
.footer h4,.footer h5{color:#fff}
.footer a{color:#dbe7ef}
.footer a:hover{color:#fff}
.footer-social a{
    display:inline-flex;
    width:42px;height:42px;
    align-items:center;justify-content:center;
    border-radius:50%;
    background:#0d5c8a;
    margin-right:8px;
}

/* BACK TO TOP */
#backToTop{
    position:fixed;
    right:24px;
    bottom:24px;
    width:48px;height:48px;
    display:none;
    align-items:center;
    justify-content:center;
    background:var(--primary);
    color:#fff;
    border-radius:50%;
    box-shadow:var(--shadow);
}

/* UTILITIES */
.bg-gray{background:var(--gray)}
.shadow-custom{box-shadow:var(--shadow)}
.rounded-xl{border-radius:var(--radius-lg)}
.text-primary-custom{color:var(--primary)}
.py-100{padding:100px 0}

/* RESPONSIVE */
@media (max-width:991px){
    .hero{
        min-height:auto;
        padding:120px 0 80px;
        text-align:center;
    }
    .hero h1{font-size:2.8rem}
    #countdown{
        grid-template-columns:repeat(2,1fr);
        margin-top:30px;
    }
    .section-title{font-size:2rem}
}
@media (max-width:576px){
    section{padding:70px 0}
    .hero h1{font-size:2.2rem}
    .btn{
        width:100%;
        margin-bottom:12px;
    }
    #countdown{
        grid-template-columns:1fr 1fr;
    }
}
/* =====================================================
   HERO
===================================================== */

.hero{

position:relative;

background:linear-gradient(135deg,#003b57,#006699,#00a4db);

padding:140px 0;

overflow:hidden;

}

.hero h1{

font-size:4rem;

font-weight:800;

color:#fff;

line-height:1.1;

margin:20px 0;

}

.hero-theme{

font-size:22px;

color:#eef8ff;

margin-bottom:30px;

}

.hero-badge{

display:inline-block;

background:#ffc107;

padding:10px 20px;

border-radius:40px;

font-weight:600;

}

.hero-info{

margin:35px 0;

}

.hero-info div{

color:#fff;

margin-bottom:15px;

font-size:18px;

}

.hero-buttons .btn{

margin-right:15px;

margin-bottom:15px;

padding:15px 32px;

font-size:17px;

}

.countdown-box{

padding:40px;

text-align:center;

color:#fff;

}

.hero-shape{

position:absolute;

border-radius:50%;

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

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

}

.hero-shape-1{

width:220px;

height:220px;

top:-80px;

right:10%;

}

.hero-shape-2{

width:120px;

height:120px;

bottom:20%;

left:8%;

}

.hero-shape-3{

width:80px;

height:80px;

top:45%;

right:40%;

}

@keyframes float{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-20px);

}

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

.statistics{

padding:90px 0;

}

.stat-card{

background:#fff;

border-radius:20px;

padding:40px 25px;

text-align:center;

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

transition:.35s;

height:100%;

}

.stat-card:hover{

transform:translateY(-10px);

}

.stat-icon{

width:80px;

height:80px;

margin:auto;

border-radius:50%;

background:#eaf7fc;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

color:#006699;

margin-bottom:25px;

}

.stat-card h2{

font-size:48px;

font-weight:700;

color:#006699;

margin-bottom:10px;

}

.stat-card p{

font-size:17px;

color:#666;

margin:0;

}
/*======================================================
ANNOUNCEMENT BAR
======================================================*/

.announcement-bar{

background:#0d6efd;

color:#fff;

overflow:hidden;

}

.announcement-title{

background:#0056b3;

padding:18px;

font-size:18px;

font-weight:700;

text-align:center;

white-space:nowrap;

}

.announcement-title i{

margin-right:8px;

}

.announcement-slider{

display:flex;

align-items:center;

height:60px;

overflow:hidden;

white-space:nowrap;

position:relative;

}

.announcement-slider span{

display:inline-block;

padding-right:90px;

font-size:17px;

animation:announcementScroll 35s linear infinite;

}

.announcement-slider span i{

margin-right:8px;

color:#ffd54f;

}

@keyframes announcementScroll{

0%{

transform:translateX(100%);

}

100%{

transform:translateX(-100%);

}

}

.announcement-slider:hover span{

animation-play-state:paused;

}
.hero-image{
    max-width:100%;
    animation:floatHero 6s ease-in-out infinite;
    filter:drop-shadow(0 25px 40px rgba(0,0,0,.25));
}

@keyframes floatHero{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-15px);

}

}