/* ============================================================
   NMAMLD 2026 — shared stylesheet
   International Conference on Nonlocal Mechanics Approaches
   for Modelling Localized Deformations · IIT Hyderabad
   ============================================================ */

/*==================================================
NMAMLD 2026
Modern Conference Theme
==================================================*/

:root{

--primary:#0F172A;
--primary-light:#1E293B;

--accent:#2563EB;
--accent2:#F97316;

--text:#1F2937;
--muted:#64748B;

--bg:#F8FAFC;
--white:#ffffff;

--border:#E2E8F0;

--shadow:
0 10px 40px rgba(15,23,42,.08);

--radius:16px;

--display:'Plus Jakarta Sans',sans-serif;
--body:'Inter',sans-serif;
--mono:'IBM Plex Mono',monospace;

}

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

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

    overflow-x:hidden;

font-family:var(--body);

background:var(--bg);

color:var(--text);

font-size:16px;

line-height:1.75;

-webkit-font-smoothing:antialiased;

}

img{

display:block;
max-width:100%;

}

a{

text-decoration:none;

transition:.3s;

color:inherit;

}

.wrap{

width:min(1180px,92%);

margin:auto;

}

h1,h2,h3,h4{

font-family:var(--display);

font-weight:700;

color:var(--primary);

}

section{

padding:90px 0;

}

/*=========================
TOP BAR
=========================*/

.topbar{

background:#081120;

color:#dbe4ef;

font-size:13px;

padding:8px 0;

font-family:var(--mono);

}

.topbar .wrap{

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:15px;

}

.topbar a{

color:white;

}

/*=========================
NAVBAR
=========================*/

header.site{

position:sticky;

top:0;

z-index:999;

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

backdrop-filter:blur(16px);

box-shadow:0 8px 35px rgba(0,0,0,.05);

}

.nav{

height:88px;

display:flex;

justify-content:space-between;

align-items:center;

}

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

.brand{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
}

/* The horizontal lockup is ~3:1, so it is sized by HEIGHT and lets its
   width follow. Each breakpoint below trims the height a little, which is
   what buys back the room the eight menu items need. */
.brand img{
    height:54px;
    width:auto;
    object-fit:contain;
}

.marktext{

display:flex;

flex-direction:column;

}

.marktext b{
    font-size:30px;
    font-weight:800;
    line-height:1;
    white-space:nowrap;
}
.marktext b span{

color:var(--accent2);

}

/* The "IIT Hyderabad" sub-label was removed from the markup; the rule is
   kept harmlessly in case it is ever reinstated. */
.marktext small{
    font-size:13px;
    color:var(--muted);
}
/*====================
MENU
====================*/

.menu{
    display:flex;
    align-items:center;
    gap:18px;
    margin-left:auto;
}
.menu>a,
.dropdown>a{

    white-space:nowrap;

    padding:12px 10px;

    font-size:17px;

    font-weight:600;

padding:14px 18px;

border-radius:12px;

font-weight:600;

font-size:15px;

display:flex;

align-items:center;

gap:6px;

position:relative;

}

/* underline animation */

.menu>a::after,
.dropdown>a::after{

content:"";

position:absolute;

left:15px;

bottom:8px;

width:0;

height:2px;

background:var(--accent);

transition:.3s;

}

.menu>a:hover::after,
.dropdown>a:hover::after{

width:60%;

}

.menu>a:hover,
.dropdown>a:hover{

color:var(--accent);

}

.menu>a.active{

color:var(--accent);

}

/*====================
DROPDOWN
====================*/

.dropdown{

position:relative;

}

.dropdown-content{

position:absolute;

top:115%;

left:0;

width:280px;

background:white;

border-radius:18px;

padding:12px;

box-shadow:

0 25px 60px rgba(0,0,0,.12);

opacity:0;

visibility:hidden;

transform:translateY(15px);

transition:.35s;

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

}

.dropdown:hover .dropdown-content{

opacity:1;

visibility:visible;

transform:translateY(0);

}

.dropdown-content a{

display:block;

padding:13px 16px;

border-radius:10px;

font-weight:600;

color:var(--text);

margin-bottom:3px;

}

.dropdown-content a:hover{

background:#EEF4FF;

color:var(--accent);

padding-left:24px;

}

/*==================
BUTTONS
==================*/

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 28px;

border-radius:14px;

font-weight:700;

transition:.3s;

cursor:pointer;

}

.btn.primary{

background:linear-gradient(135deg,#2563EB,#3B82F6);

color:white;

box-shadow:

0 15px 30px rgba(37,99,235,.25);

}

.btn.primary:hover{

transform:translateY(-4px);

}

.btn.ghost{

background:white;

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

color:var(--primary);

}

.btn.ghost:hover{

background:#EEF4FF;

}
/*==========================================================
RESPONSIVE NAVIGATION
Goal: every menu item, Home through Help, stays visible on
any laptop. The bar tightens progressively instead of
collapsing early; the hamburger appears only on phones.
==========================================================*/

/* The bar needs more room than the standard content wrap. */
header.site .wrap.nav{
    width:min(1600px, 96%);
    gap:12px;
}

/* One knob drives the whole navigation's type size. The eight top-level
   buttons and the items inside their drop-downs both read from it, so a
   sub-menu can never end up larger than the button that opened it.
   Each breakpoint below re-sets this single value. */
.menu{
    --nav-fs:15px;
}

.menu>a,
.dropdown>a{
    text-decoration:none;
    font-size:var(--nav-fs);
}

.dropdown-content a{
    font-size:var(--nav-fs);
    padding:calc(var(--nav-fs) * .62) calc(var(--nav-fs) * .8);
}

.caret{
    font-size:.75em;
    line-height:1;
    opacity:.65;
    transition:transform .25s ease;
}

.dropdown:hover>a .caret,
.dropdown.open>a .caret{
    transform:rotate(180deg);
    opacity:1;
}

/* Current page */
.menu>a.active,
.dropdown>a.active{
    color:var(--accent);
}

.dropdown-content a.active{
    color:var(--accent);
    background:#EEF4FF;
}

/* Every panel drops from the right edge of its own button. Aligning some
   left and some right (to keep the rightmost ones on screen) looked
   inconsistent; the menu is right-aligned in the bar, so there is always
   room to the left and one rule can serve them all.
   Scoped to the desktop bar: below 900px the panel is a full-width inline
   block inside the hamburger sheet, and these must not reach it. */
@media(min-width:901px){
    .menu .dropdown-content{
        left:auto;
        right:0;
        width:max-content;
        min-width:200px;
        max-width:280px;
    }
}

/*---- Progressive shrink: keep all eight items on one row ----*/

@media(max-width:1600px){
    .menu{ --nav-fs:14.5px; gap:10px; }
    .menu>a, .dropdown>a{ padding:12px 12px; }

    /* The sliding underline was offset for the roomier desktop padding. */
    .menu>a::after, .dropdown>a::after{ left:50%; transform:translateX(-50%); }
    .menu>a:hover::after, .dropdown>a:hover::after{ width:70%; }
}

@media(max-width:1420px){
    .menu{ --nav-fs:14px; gap:6px; }
    .menu>a, .dropdown>a{ padding:11px 9px; }
    .nav{ height:78px; }
    .brand img{ height:46px; }
    .marktext b{ font-size:25px; }
    .marktext small{ font-size:12px; }
}

@media(max-width:1260px){
    .menu{ --nav-fs:13px; gap:2px; }
    .menu>a, .dropdown>a{ padding:10px 7px; }
    .nav{ height:72px; }
    .brand img{ height:40px; }
    .marktext b{ font-size:22px; }
    .marktext small{ font-size:11px; }
}

/* Last stop before the hamburger: squeeze hard so all eight items still fit. */
@media(max-width:1120px){
    .menu{ --nav-fs:11.5px; gap:0; }
    .menu>a, .dropdown>a{ padding:9px 3px; }
    .nav{ height:66px; }
    .brand img{ height:34px; }
    .marktext b{ font-size:17px; }
    .marktext small{ display:none; }
}

/*==========================================================
MOBILE — hamburger panel below 900px
==========================================================*/

.navtoggle{
    display:none;
}

.navtoggle-icon{
    display:inline-block;
    width:20px;
    height:2px;
    background:currentColor;
    position:relative;
}

.navtoggle-icon::before,
.navtoggle-icon::after{
    content:"";
    position:absolute;
    left:0;
    width:20px;
    height:2px;
    background:currentColor;
    transition:transform .25s ease;
}

.navtoggle-icon::before{ top:-6px; }
.navtoggle-icon::after{ top:6px; }

.navtoggle[aria-expanded="true"] .navtoggle-icon{ background:transparent; }
.navtoggle[aria-expanded="true"] .navtoggle-icon::before{ transform:translateY(6px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .navtoggle-icon::after{ transform:translateY(-6px) rotate(-45deg); }

@media(max-width:900px){

    header.site .wrap.nav{
        width:min(1600px, 94%);
    }

    .nav{ height:70px; }

    /* The hamburger frees up the whole middle of the bar, so the lockup can
       be bigger here than in the cramped band just above 900px. */
    .brand img{ height:42px; }

    .navtoggle{
        display:inline-flex;
        align-items:center;
        gap:10px;
        margin-left:auto;
        background:none;
        border:1px solid var(--border);
        border-radius:12px;
        color:var(--primary);
        font-family:inherit;
        font-size:15px;
        font-weight:700;
        padding:10px 14px;
        min-height:44px;
        cursor:pointer;
    }

    /* Panel drops below the bar and scrolls if taller than the screen. */
    .menu{
        --nav-fs:16px;
        display:none;
        position:absolute;
        left:0;
        right:0;
        top:100%;
        margin:0;
        flex-direction:column;
        align-items:stretch;
        gap:0;
        padding:10px 16px 20px;
        background:#fff;
        border-top:1px solid var(--border);
        box-shadow:0 24px 50px rgba(0,0,0,.14);
        max-height:calc(100vh - 70px);
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }

    .menu.open{
        display:flex;
    }

    .menu>a,
    .dropdown>a{
        width:100%;
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:14px 6px;
        min-height:48px;
        border-radius:0;
        border-bottom:1px solid var(--border);
    }

    /* The sliding underline makes no sense in a stacked panel. */
    .menu>a::after,
    .dropdown>a::after{
        display:none;
    }

    .dropdown{
        width:100%;
    }

    /* Sub-menu expands inline underneath its heading. */
    .dropdown-content{
        position:static;
        display:none;
        opacity:1;
        visibility:hidden;
        transform:none;
        width:100%;
        min-width:0;
        max-width:none;
        margin:0;
        padding:6px 0 10px 14px;
        background:#F6F9FF;
        border:0;
        border-radius:0;
        box-shadow:none;
        transition:none;
    }

    /* Hover must never open a sub-menu on a touch screen — a tap would
       leave it stuck open. Only the .open class, set on tap, reveals it. */
    .dropdown:hover .dropdown-content{
        opacity:1;
        visibility:hidden;
        transform:none;
    }

    .dropdown.open .dropdown-content{
        display:block;
        visibility:visible;
    }

    .dropdown-content a{
        display:flex;
        align-items:center;
        padding:13px 12px;
        min-height:46px;
        font-size:calc(var(--nav-fs) - 1px);
        font-weight:600;
        margin-bottom:0;
    }

    .dropdown-content a:hover{
        padding-left:12px;
    }

    .caret{
        font-size:1em;
        opacity:.8;
    }

    /* Keep the page behind the open panel from scrolling under the finger. */
    body.nav-open{
        overflow:hidden;
    }
}

@media(max-width:400px){
    .brand img{ height:34px; }
    .marktext b{ font-size:17px; }
    .navtoggle .navtoggle-text{ display:none; }
    .navtoggle{ padding:10px 12px; }
}

/* Smallest phones still in use (iPhone SE, 320px). The enlarged wordmark plus
   the Menu button will not fit here, so both step down once more. */
@media(max-width:360px){
    header.site .wrap.nav{ width:min(1600px, 96%); gap:8px; }
    .brand{ gap:8px; }
    .brand img{ height:30px; }
    .marktext b{ font-size:15px; }
    .navtoggle{ padding:10px 10px; gap:0; }
}

/*==================================================
HERO SECTION
==================================================*/

.hero{

position:relative;

overflow:hidden;

line-height:0;

color:#fff;

}

.hero-banner{

display:block;

width:100%;

height:auto;

}

.hero .wrap{

position:relative;

z-index:2;

max-width:1180px;

}

.eyebrow{

display:inline-flex;

align-items:center;

gap:10px;

padding:8px 18px;

border-radius:999px;

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

backdrop-filter:blur(8px);

font-size:14px;

font-weight:600;

letter-spacing:.08em;

text-transform:uppercase;

margin-bottom:28px;

}

.hero h1{

font-family:var(--display);

font-size:clamp(46px,6vw,74px);

line-height:1.08;

font-weight:800;

letter-spacing:-2px;

max-width:900px;

color:white;

margin-bottom:20px;

}

.hero h1 em{

font-style:normal;

color:#60A5FA;

}

.subtitle{

font-size:20px;

font-weight:700;

letter-spacing:.04em;

text-transform:uppercase;

color:#CBD5E1;

margin-bottom:20px;

max-width:920px;

}

.sub{

font-size:18px;

line-height:1.9;

max-width:860px;

color:#DCE6F3;

margin-bottom:45px;

}

.hero .cta{

display:flex;

flex-wrap:wrap;

gap:18px;

margin-bottom:60px;

}

.hero .btn{

font-size:16px;

padding:16px 34px;

}

.hero .btn.primary{

background:linear-gradient(135deg,#3B82F6,#2563EB);

}

.hero .btn.primary:hover{

transform:translateY(-6px);

box-shadow:0 20px 40px rgba(37,99,235,.45);

}

.hero .btn.ghost{

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

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

color:#fff;

backdrop-filter:blur(8px);

}

.hero .btn.ghost:hover{

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

}

/*==================================================
CONFERENCE INFO CARDS
==================================================*/

.meta{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(min(250px, 100%),1fr));

gap:22px;

margin-top:15px;

}

.meta div{

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

backdrop-filter:blur(12px);

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

border-radius:18px;

padding:24px;

transition:.35s;

}

.meta div:hover{

transform:translateY(-6px);

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

}

.meta b{

display:block;

font-size:22px;

margin-bottom:8px;

font-family:var(--display);

color:#fff;

}

.meta span{

color:#D6E3F1;

}

/*==================================================
SVG BACKGROUND
==================================================*/

.field{

position:absolute;

inset:0;

width:100%;

height:100%;

opacity:.18;

pointer-events:none;

}

/*==================================================
MARQUEE
==================================================*/

.marquee{

position:relative;

width:100%;

overflow:hidden;

background:var(--primary);

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

padding:14px 0;

line-height:normal;

}

.marquee-track{

display:flex;

gap:70px;

width:max-content;

animation:marquee 28s linear infinite;

}

.marquee span{

font-weight:600;

color:white;

white-space:nowrap;

font-size:15px;

}

@keyframes marquee{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}

}

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

.stats{

display:grid;

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

gap:30px;

margin-top:-70px;

position:relative;

z-index:30;

}

.stats div{

background:white;

padding:38px;

border-radius:22px;

box-shadow:var(--shadow);

text-align:center;

transition:.35s;

}

.stats div:hover{

transform:translateY(-10px);

}

.stats b{

display:block;

font-size:44px;

font-family:var(--display);

font-weight:800;

color:var(--accent);

margin-bottom:10px;

}

.stats span{

font-size:15px;

color:var(--muted);

line-height:1.6;

}

/*==================================================
GENERAL SECTIONS
==================================================*/

section{

padding:110px 0;

}

.kicker{

font-size:14px;

text-transform:uppercase;

letter-spacing:.15em;

font-weight:700;

color:var(--accent);

margin-bottom:12px;

}

.prose h2{

font-size:46px;

margin-bottom:24px;

}

.prose p{

font-size:18px;

line-height:1.95;

margin-bottom:22px;

color:var(--muted);

}

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

.datecard,

.prose,

.news{

background:white;

border-radius:24px;

padding:40px;

box-shadow:var(--shadow);

}

.datecard h3{

font-size:28px;

margin-bottom:24px;

}

.datecard ul{

list-style:none;

}

.datecard li{

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 0;

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

}

.datecard li:last-child{

border:none;

}

.datecard span{

color:var(--muted);

}

.datecard b{
    font-size:17px;
    color:var(--primary);
    white-space:nowrap;
    flex-shrink:0;
}
/*==================================================
LATEST NEWS
==================================================*/

.news{

list-style:none;

margin-top:35px;

padding:0;

}

.news li{

display:flex;

gap:20px;

padding:22px 30px;

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

transition:.3s;

}

.news li:hover{

background:#F8FAFC;

}

.news li:last-child{

border:none;

}

.news b{

min-width:90px;

color:var(--accent);

font-size:15px;

}

.news span{

color:var(--muted);

line-height:1.7;

}

/*==================================================
LAYOUT
==================================================*/

.cols{

display:grid;

grid-template-columns:1.5fr .9fr;

gap:60px;

align-items:start;

}

/*==========================
Floating Social Sidebar
===========================*/

.social-sidebar{

position:fixed;

top:50%;

right:22px;

transform:translateY(-50%);

display:flex;

flex-direction:column;

gap:14px;

z-index:999;

}

.social-sidebar a{

width:52px;

height:52px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:22px;

text-decoration:none;

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

transition:.35s;

}

.social-sidebar a:hover{

transform:translateX(-8px) scale(1.08);

}

.facebook{

background:#1877F2;

}

.twitter{

background:#000000;

}

.instagram{

background:linear-gradient(45deg,
#F58529,
#DD2A7B,
#8134AF,
#515BD4);

}

.linkedin{

background:#0077B5;

}

.youtube{

background:#FF0000;

}

@media(max-width:768px){

.social-sidebar{

right:10px;

}

.social-sidebar a{

width:44px;

height:44px;

font-size:18px;

}

}

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

@media(max-width:992px){

.sub{

font-size:16px;

}

.stats{

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

margin-top:50px;

}

.cols{

grid-template-columns:1fr;

gap:40px;

}

}

@media(max-width:640px){

.stats{

grid-template-columns:1fr;

}

.hero .cta{

flex-direction:column;

}

.hero .btn{

width:100%;

}

.hero h1{

font-size:34px;

}

}

/*==================================================
BROCHURE SECTION
==================================================*/

#brochure{
    background:#F8FAFC;
}

.brochure-viewer{

    position:relative;

    background:#fff;

    border-radius:24px;

    padding:25px;

    box-shadow:var(--shadow);

}

.brochure-slides{

    position:relative;

    overflow:hidden;

    border-radius:16px;

    background:#edf2f7;

}

.brochure-slides img{

    width:100%;

    display:none;

    transition:.5s;

}

.brochure-slides img.active{

    display:block;

    animation:fade .5s;

}

@keyframes fade{

from{

opacity:0;

transform:scale(.98);

}

to{

opacity:1;

transform:scale(1);

}

}

.brochure-nav{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:48px;

    height:48px;

    border:none;

    border-radius:50%;

    background:#fff;

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

    cursor:pointer;

    font-size:24px;

    transition:.3s;

}

.brochure-nav:hover{

background:var(--accent);

color:#fff;

}

.prev{

left:12px;

}

.next{

right:12px;

}

.brochure-dots{

display:flex;

justify-content:center;

gap:12px;

margin-top:22px;

}

.dot{

width:12px;

height:12px;

border:none;

border-radius:50%;

background:#CBD5E1;

cursor:pointer;

transition:.3s;

}

.dot.active{

background:var(--accent);

transform:scale(1.3);

}

/*==================================================
SPEAKERS
==================================================*/

.speaker-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(min(270px, 100%),1fr));

gap:35px;

margin-top:40px;

}

.speaker-card{

background:#fff;

border-radius:24px;

overflow:hidden;

box-shadow:var(--shadow);

transition:.35s;

}

.speaker-card:hover{

transform:translateY(-10px);

}

.speaker-card img{

height:320px;

width:100%;

object-fit:cover;

transition:.5s;

}

.speaker-card:hover img{

transform:scale(1.08);

}

.speaker-body{

padding:28px;

}

.speaker-body h3{

font-size:25px;

margin-bottom:10px;

}

.speaker-body h4{

font-size:15px;

font-weight:600;

color:var(--accent);

margin-bottom:18px;

}

.speaker-body p{

color:var(--muted);

line-height:1.8;

}

/*==================================================
COMMITTEE
==================================================*/

.committee-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(min(320px, 100%),1fr));

gap:30px;

}

.committee-card{

background:#fff;

padding:35px;

border-radius:22px;

box-shadow:var(--shadow);

transition:.3s;

}

.committee-card:hover{

transform:translateY(-8px);

}

.committee-card h3{

margin-bottom:25px;

font-size:26px;

}

.committee-card ul{

list-style:none;

}

.committee-card li{

padding:15px 0;

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

}

.committee-card li:last-child{

border:none;

}

.committee-card strong{

display:block;

font-size:17px;

}

.committee-card span{

color:var(--muted);

font-size:14px;

}

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

.table-wrap{

overflow:auto;

border-radius:20px;

box-shadow:var(--shadow);

}

table{

width:100%;

border-collapse:collapse;

background:white;

}

thead{

background:linear-gradient(135deg,#2563EB,#3B82F6);

color:white;

}

th{

padding:22px;

font-size:16px;

}

td{

padding:18px 22px;

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

}

tbody tr:hover{

background:#F8FAFC;

}

.price{

font-size:22px;

font-weight:700;

color:var(--accent);

}

/*==================================================
TOPICS
==================================================*/

.topic-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(min(250px, 100%),1fr));

gap:28px;

}

.topic{

background:white;

padding:35px;

border-radius:22px;

box-shadow:var(--shadow);

transition:.3s;

}

.topic:hover{

transform:translateY(-8px);

}

.topic h3{

margin-bottom:15px;

font-size:22px;

}

.topic p{

color:var(--muted);

}

/*==================================================
CONTACT
==================================================*/

.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

}

.contact-card{

background:white;

padding:40px;

border-radius:24px;

box-shadow:var(--shadow);

}

.contact-card h2{

margin-bottom:25px;

}

.contact-card p{

margin-bottom:14px;

color:var(--muted);

}

.contact-card a{

color:var(--accent);

font-weight:600;

}

form{

display:grid;

gap:20px;

}

input,

textarea,

select{

padding:16px;

border-radius:12px;

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

font-family:var(--body);

font-size:15px;

transition:.3s;

}

input:focus,

textarea:focus,

select:focus{

outline:none;

border-color:var(--accent);

box-shadow:0 0 0 4px rgba(37,99,235,.12);

}

textarea{

min-height:170px;

resize:vertical;

}

/*==================================================
VENUE
==================================================*/

.venue-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

align-items:center;

}

.map{

overflow:hidden;

border-radius:22px;

box-shadow:var(--shadow);

}

.map iframe{

width:100%;

height:450px;

border:none;

}

.venue-info{

background:white;

padding:35px;

border-radius:22px;

box-shadow:var(--shadow);

}

.venue-info ul{

list-style:none;

margin-top:25px;

}

.venue-info li{

padding:12px 0;

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

}

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

.sponsor-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(min(180px, 100%),1fr));

gap:30px;

align-items:center;

}

.sponsor{

background:white;

padding:35px;

border-radius:18px;

display:flex;

align-items:center;

justify-content:center;

box-shadow:var(--shadow);

transition:.3s;

}

.sponsor:hover{

transform:translateY(-8px);

}

.sponsor img{

max-height:70px;

opacity:.8;

transition:.3s;

}

.sponsor:hover img{

opacity:1;

}

/* Speakers container */
.speakers{
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    align-items: stretch;   /* Makes all cards equal height */
}

/* Individual speaker card */
.speaker{
    width: 260px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

/* Image
   The old rule pinned the photo box to a fixed 280px height. On a phone the
   card goes full width, so that box turned LANDSCAPE (roughly 343x280) while
   22 of the 38 speaker photos are portrait — object-fit:cover then sliced the
   top and bottom off every face. A fixed ASPECT RATIO keeps the crop box
   portrait at every screen width, so the crop is small and predictable.
   object-position is biased to the top because several photos are tight
   headshots with almost no headroom (Murali Krishnan is the extreme case:
   the top of the head touches the edge of the image), so any crop taken from
   the top clips the head. Cropping from the bottom loses only shoulders. */
.speaker .ph img{
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 6;
    object-fit: cover;
    object-position: center 10%;
}

/* Older browsers without aspect-ratio keep the previous fixed-height box. */
@supports not (aspect-ratio: 1 / 1){
    .speaker .ph img{ height: 280px; }
}

/* Single-column phone layout: without a cap the card fills the screen and the
   photo becomes very tall. Keep it to a sensible portrait size, centred. */
@media (max-width: 560px){
    .speaker{
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Card content */
.speaker .info{
    display: flex;
    flex-direction: column;
    flex: 1;                /* Takes remaining height */
    padding: 18px;
}

/* Speaker name */
.speaker .info b{
    font-size: 18px;
    margin-bottom: 8px;
    min-height: 50px;       /* Equal space for names */
}

/* Institution */
.speaker .info span{
    color: #666;
    flex: 1;                /* Pushes button to bottom */
    margin-bottom: 15px;
}

/* Profile button/link */
.speaker .plink{
    margin-top: auto;        /* Aligns all buttons at the bottom */
    display: inline-block;
    color: #0b5ed7;
    text-decoration: none;
    font-weight: 600;
}
/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:992px){

.contact-grid,

.venue-grid{

grid-template-columns:1fr;

}

.committee-grid{

grid-template-columns:1fr;

}

table{

min-width:650px;

}

}

@media(max-width:768px){

.speaker-grid,

.topic-grid,

.sponsor-grid{

grid-template-columns:1fr;

}

.brochure-nav{

width:40px;

height:40px;

}

}


/*==================================================
FOOTER
==================================================*/

footer{

background:linear-gradient(135deg,#08152d,#0F172A);

color:#CBD5E1;

padding:90px 0 25px;

margin-top:100px;

}

footer .wrap{

display:grid;

/* Two columns since the Previous-editions block was removed;
   a third 1fr here would leave an empty gap on the right. */
grid-template-columns:2fr 1fr;

gap:60px;

}

footer h4{

color:#fff;

font-size:22px;

margin-bottom:25px;

}

footer p{

line-height:1.9;

color:#94A3B8;

}

footer ul{

list-style:none;

padding:0;

}

footer li{

margin-bottom:14px;

}

footer a{

color:#CBD5E1;

transition:.3s;

}

footer a:hover{

color:#60A5FA;

padding-left:6px;

}

.copyright{

margin-top:60px;

padding-top:25px;

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

text-align:center;

font-size:14px;

color:#94A3B8;

}

/*==================================================
SECTION TITLES
==================================================*/

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title h2{

font-size:48px;

margin-bottom:18px;

}

.section-title p{

max-width:760px;

margin:auto;

font-size:18px;

color:var(--muted);

line-height:1.8;

}

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

img{

transition:.45s;

}

.zoom{

overflow:hidden;

border-radius:22px;

}

.zoom img:hover{

transform:scale(1.08);

}

/*==================================================
UTILITY CLASSES
==================================================*/

.text-center{

text-align:center;

}

.mt-1{margin-top:10px;}

.mt-2{margin-top:20px;}

.mt-3{margin-top:30px;}

.mt-4{margin-top:40px;}

.mt-5{margin-top:60px;}

.mb-1{margin-bottom:10px;}

.mb-2{margin-bottom:20px;}

.mb-3{margin-bottom:30px;}

.mb-4{margin-bottom:40px;}

.mb-5{margin-bottom:60px;}

.rounded{

border-radius:20px;

}

.shadow{

box-shadow:var(--shadow);

}

.bg-white{

background:white;

}

.bg-light{

background:#F8FAFC;

}

/*==================================================
LISTS
==================================================*/

.check-list{

list-style:none;

display:grid;

gap:14px;

}

.check-list li{

padding-left:30px;

position:relative;

}

.check-list li::before{

content:"✓";

position:absolute;

left:0;

top:0;

font-weight:700;

color:var(--accent);

}

/*==================================================
ANIMATIONS
==================================================*/

.fade-up{

opacity:0;

transform:translateY(35px);

animation:fadeUp .8s forwards;

}

@keyframes fadeUp{

to{

opacity:1;

transform:none;

}

}

.fade{

animation:fade .8s;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-8px);

}

100%{

transform:translateY(0);

}

}

.float{

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

}

/*==================================================
BACK TO TOP BUTTON
==================================================*/

#topBtn{

position:fixed;

right:25px;

bottom:25px;

width:52px;

height:52px;

border:none;

border-radius:50%;

background:linear-gradient(135deg,#2563EB,#1D4ED8);

color:white;

font-size:20px;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

box-shadow:0 15px 35px rgba(37,99,235,.35);

transition:.35s;

z-index:999;

}

#topBtn:hover{

transform:translateY(-6px);

}

/*==================================================
SELECTION
==================================================*/

::selection{

background:#2563EB;

color:white;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#EEF2F7;

}

::-webkit-scrollbar-thumb{

background:#2563EB;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#1D4ED8;

}

/*==================================================
HR
==================================================*/

hr{

border:none;

height:1px;

background:var(--border);

margin:50px 0;

}

/*==================================================
SMALL BADGES
==================================================*/

.badge{

display:inline-flex;

align-items:center;

padding:7px 16px;

border-radius:999px;

background:#EEF4FF;

color:var(--accent);

font-weight:700;

font-size:13px;

}

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

@media(max-width:1100px){

footer .wrap{

grid-template-columns:1fr 1fr;

}

.section-title h2{

font-size:40px;

}

}

@media(max-width:768px){

footer .wrap{

grid-template-columns:1fr;

gap:35px;

}

.section-title{

margin-bottom:45px;

}

.section-title h2{

font-size:34px;

}

body{

font-size:15px;

}

h1{

font-size:38px !important;

}

h2{

font-size:30px !important;

}

.wrap{

width:94%;

}

#topBtn{

right:18px;

bottom:18px;

width:46px;

height:46px;

}

}

@media(max-width:480px){

.btn{

width:100%;

}

.section-title h2{

font-size:28px;

}

}

.date-heading{
    display:flex;
    align-items:center;
    gap:10px;
    margin:28px 0 14px;
    padding:10px 14px;
    background:#EEF4FF;
    color:var(--accent);
    border-left:4px solid var(--accent);
    border-radius:10px;
    font-size:18px;
    font-weight:700;
}

.date-heading i{
    font-size:18px;
}

.datecard li span{
    display:flex;
    align-items:center;
    gap:10px;
}

.datecard li span i{
    color:var(--accent2);
    width:20px;
}


.journal-spotlight{
    margin-top:40px;
    background:#fff;
    border-radius:20px;
    padding:45px;
    box-shadow:var(--shadow);
    border:1px solid var(--border);
}

.journal-spotlight .wrap{
    display:flex;
    align-items:center;
    gap:50px;
}

.journal-spotlight-text{
    flex:1.3;
}

.journal-spotlight h3{
    font-size:30px;
    color:var(--primary);
    margin-bottom:16px;
    font-weight:700;
}

.journal-spotlight-text p{
    font-size:17px;
    line-height:1.9;
    color:var(--muted);
    margin-bottom:24px;
}

.journal-spotlight-covers{
    flex:1;
    display:flex;
    gap:22px;
    justify-content:center;
}

.journal-spotlight-covers figure{
    margin:0;
    width:150px;
    text-align:center;
}

.journal-spotlight-covers img{
    width:100%;
    border-radius:10px;
    box-shadow:0 12px 28px rgba(15,23,42,.18);
    margin-bottom:10px;
}

.journal-spotlight-covers figcaption{
    font-size:13px;
    line-height:1.5;
    color:var(--muted);
    font-weight:600;
}

@media(max-width:860px){

.journal-spotlight .wrap{
    flex-direction:column;
}

.journal-spotlight-covers{
    justify-content:center;
}

}

.proceedings-layout{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:45px;
    align-items:start;
}

.proceedings-card{
    background:#f5f7fa;
    padding:35px;
    border-radius:12px;
    position:sticky;
    top:110px;
}

.proceedings-card h2{
    text-align:center;
    margin-bottom:20px;
}

.proceedings-card p{
    color:var(--muted);
    line-height:1.8;
    margin-bottom:25px;
}

.read-more{
    color:var(--accent);
    font-weight:600;
}

.proceedings-content{
    background:#fff;
    padding:35px;
    border-radius:16px;
    box-shadow:var(--shadow);
}

.proceedings-content h2{
    margin-bottom:25px;
}

.proceedings-content h3{
    margin:30px 0 12px;
    font-size:24px;
}

.proceedings-content p{
    color:var(--muted);
    line-height:1.9;
    margin-bottom:18px;
}

.proceedings-content a{
    color:var(--accent);
    font-weight:600;
}

/* Conference Topics Layout */

.topics-layout{
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;   /* Align everything to the left */
    gap:20px;
    width:100%;
}

.topics-list{
    flex:1;
    text-align:left;
}

.topics-list ul{
    margin:0;
    padding-left:20px;
    columns:2;
    column-gap:30px;
}

.topics-list li{
    margin-bottom:10px;
    line-height:1.6;
}

.topics-images{
    width:220px;                  /* Fixed width for images */
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:20px;
    flex-shrink:0;
}

.topics-images img{
    width:160px;
}

/* ===========================
   Call for Papers Notice
=========================== */

.paper-notice{
    margin:15px 0 8px;
}

.notice-box{
    display:flex;
    align-items:flex-start;
    gap:12px;
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:8px;
    padding:14px 18px;
    box-shadow:0 2px 6px rgba(0,0,0,.05);
}

.notice-icon{
    font-size:42px;
    color:#d32f2f;
    line-height:1;
    flex-shrink:0;
}

.notice-content{
    flex:1;
}

.notice-content h3{
    margin:0 0 4px;
    font-size:22px;
}

.notice-content h3 a{
    color:#000;
    text-decoration:none;
    font-weight:700;
}

.notice-content h3 a:hover{
    color:#222;
}

.notice-content p{
    margin:0;
    line-height:1.5;
    font-size:15px;
    color:#555;
}

/* ===========================
   Publication Opportunity
=========================== */

.publication{
    padding:8px 0 20px;
}

.publication .kicker{
    margin-bottom:4px;
}

.publication h2{
    margin-bottom:12px;
}

.publication-box{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.publication-text{
    flex:1;
}

.publication-text p{
    margin-bottom:10px;
    line-height:1.7;
}

.publication-text ul{
    margin-top:8px;
    padding-left:20px;
}

.publication-text li{
    margin-bottom:8px;
}

.publication-images{
    display:flex;
    gap:15px;
    align-items:center;
}

.publication-images img{
    width:150px;
    border-radius:8px;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
}

/* ===================================================
   Abstract Submission Page
=================================================== */

.abstract-section{
    padding:60px 0;
}

.submission-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:35px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.submission-link{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:25px;
}

.submission-icon{
    width:70px;
    height:70px;
    border-radius:50%;
    background:#eff6ff;
    color:#2563eb;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:30px;
}

/* The submission URL is one long unbreakable token, so the text block cannot
   shrink and pushes the card past the screen edge on phones. Let it shrink,
   let the URL wrap, and stack the icon above the text on narrow screens. */
.submission-text{
    min-width:0;
}

.submission-text a{
    overflow-wrap:anywhere;
}

@media (max-width:560px){
    .submission-link{
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
    }
    .submission-icon{
        flex-shrink:0;
    }
    .submission-card{
        padding:24px;
    }
}

.submission-text h3{
    margin:0 0 8px;
    color:#0f172a;
}

.submission-text p{
    margin:4px 0;
    line-height:1.7;
}

.submission-text a{
    color:#2563eb;
    text-decoration:none;
    font-weight:600;
}

.submission-text a:hover{
    text-decoration:underline;
}

.step{
    display:flex;
    gap:22px;
    margin:30px 0;
}

.step-number{
    width:46px;
    height:46px;
    background:#000;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    flex-shrink:0;
}

.step-content{
    flex:1;
}

.step-content h3{
    margin:0 0 8px;
    color:#0f172a;
}

.step-content p{
    margin:0;
    line-height:1.8;
}

.step-content ul{
    margin:10px 0 0;
    padding-left:22px;
}

.step-content li{
    margin-bottom:8px;
    line-height:1.7;
}

.important-note{
    margin-top:40px;
    padding:20px;
    border-radius:10px;
    background:#fff8e1;
    border:1px solid #f7d774;
}

.important-note h3{
    margin:0 0 10px;
    color:#b45309;
}

.important-note p{
    margin:0;
    line-height:1.7;
}

.submit-btn{
    margin-top:35px;
    text-align:center;
}

.submit-btn a{
    display:inline-block;
    background:#2563eb;
    color:#fff;
    padding:14px 35px;
    border-radius:8px;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.submit-btn a:hover{
    background:#1d4ed8;
}

@media(max-width:768px){

.submission-link{
    flex-direction:column;
    align-items:flex-start;
}

.step{
    flex-direction:column;
}

.step-number{
    margin-bottom:10px;
}

}

/* ===========================
   Conference Topics
=========================== */

.topics-layout{
    display:flex;
    align-items:flex-start;
    gap:15px;
}

.topics-list{
    flex:1;
}

.topics-list ul{
    columns:2;
    column-gap:30px;
    padding-left:20px;
    margin:0;
}

.topics-list li{
    margin-bottom:8px;
    line-height:1.6;
    font-size:16px;
}

.topics-images{
    width:200px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:15px;
}

.topics-images img{
    width:150px;
    border-radius:8px;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
}

/* ===========================
   Mobile
=========================== */

@media (max-width:900px){

.notice-box,
.publication-box,
.topics-layout{
    flex-direction:column;
}

.publication-images{
    justify-content:center;
}

.topics-list ul{
    columns:1;
}

.topics-images{
    width:100%;
}

}
@media(max-width:900px){

.publication-box,
.topics-layout{
    flex-direction:column;
}

.topics-list ul{
    columns:1;
}

}
@media(max-width:992px){

.proceedings-layout{
    grid-template-columns:1fr;
}

.proceedings-card{
    position:static;
}

}



.topics-layout{
    flex-direction:column;
}

.topics-list ul{
    columns:1;
}

.topics-images{
    margin-top:30px;
}

}














/*==================================================
HERO SECTION
==================================================


.dropdown{
    position:relative;
}

.dropdown-content{
    display:none;
    position:absolute;
    background:#fff;
    min-width:220px;
    box-shadow:0 5px 15px rgba(0,0,0,.2);
}

.dropdown:hover .dropdown-content{
    display:block;
}




@media(max-width:992px){

.menu{
    flex-direction:column;
    align-items:flex-start;
}

.dropdown{
    width:100%;
}

.dropdown-content{
    position:static;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    transform:none;
    display:none;
    background:#f8f8f8;
    margin-left:15px;
}

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

.dropdown>a{
    width:100%;
}

}  */