:root{
    --blue:#006ce5;
    --blue-dark:#052e73;
    --blue-text:#073c92;
    --light-blue:#edf7ff;
    --border:#d5e8f8;
    --green:#16a768;
    --text:#49658e;
    --white:#fff;
    --shadow:0 12px 35px rgba(10,72,130,.08);
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:Inter,Arial,Helvetica,sans-serif;
    color:var(--blue-dark);
}

a{
    color:inherit;
    text-decoration:none;
}

button{
    font:inherit;
}

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

.hero{
    min-height:310px;
    position:relative;
    overflow:hidden;
    border-bottom:1px solid #dcecf8;
    background:
        linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.96) 36%,rgba(255,255,255,.5) 58%,rgba(223,246,255,.15) 100%),
        linear-gradient(120deg,#f9fdff,#d7f3ff);
}

.hotel-hero{
    position: relative;   
    padding-top: 0;
    padding-bottom: 0;
}

.absolute-banner{
     position: absolute;
     top: 0;
     right: 0;
     width: 50%;
     height: 100%;
     z-index: 1;
}
.absolute-banner::before{
     content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
      background: linear-gradient(90deg, #051939, #0519393b);   
}
.absolute-banner img{
     width: 100%;
     height: 100%;
     object-fit: cover;
}

.hero:before{
    content:"";
    position:absolute;
    width:700px;
    height:700px;
    right:-220px;
    top:-470px;
    border:28px solid rgba(20,183,103,.55);
    border-radius:50%;
}

.hero:after{
    content:"";
    position:absolute;
    width:900px;
    height:300px;
    right:-100px;
    bottom:-220px;
    border-top:1px solid rgba(0,110,225,.28);
    border-radius:50%;
}

.hero-inner{
    width:min(1460px,94%);
    margin:auto;
    padding:50px 0;
    position:relative;
    z-index:2;
}

.eyebrow{
    font-size:13px;
    letter-spacing:4px;
    color:#086ed5;
    font-weight:800;
    margin-bottom:14px;
}

.hero h1{
    font-size:53px;
    letter-spacing:-1.5px;
    margin-bottom:10px;
    color:#062f72;
}

.hero-description{
    color:#516e98;
    font-size:17px;
    max-width:570px;
    line-height:1.5;
}

.hero-info{
    margin-top:26px;
    display:flex;
    align-items:center;
    gap:48px;
    font-weight:600;
}

.info-item{
    display:flex;
    gap:12px;
    align-items:center;
    margin: auto;
    margin-left: inherit;
}

.info-item span{
     width: max-content;   
     background: none;
}

.info-icon{
    font-size:24px;
    color:#0870d9;
}

.hero-slogan{
    position:absolute;
    right:3%;
    top:73px;
    letter-spacing:5px;
    line-height:1.55;
    font-weight:800;
    color:#0063c8;
}
 .hero-slogan:after{
    content:"";
    display:block;
    margin-top:12px;
    width:120px;
    height:3px;
    background:linear-gradient(90deg,#16a768,#35c97b);
}

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

.page{
     width:min(2000px,89%);
    margin:15px auto;
    display:grid;
    grid-template-columns:300px minmax(0,1fr);
    gap:60px;
    padding:0 0 60px;
    /* transform:translateY(-4px);  <-- muny aýyryň ýa-da öçüriň */
    background: transparent;
}

.sidebar{
    padding-top: 0;
    position: relative;
    
}

.fixed-side{
    width: 100%;
}

.fixed-side.js-fixed{
    position: fixed;
    top: 108px;
    z-index: 10;
}

.fixed-side.js-bottom{
    position: absolute;
    bottom: 0;
}
@media(max-width: 912px){
    .fixed-side.js-fixed{
        position: relative;
        top: 0;
    }
.fixed-side.js-bottom{
        position: relative;
}
.fixed-side{
     display: flex;
     gap: 10px;
}
}
.day-btn{
    width:100%;
    border:1px solid var(--border);
    background:white;
    border-radius:12px;
    padding:21px 20px;
    margin-bottom:12px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    text-align:left;
    cursor:pointer;
    transition:.25s ease;
    color:#315580;
}

.day-btn:hover{
    border-color:#8cc9f4;
    transform:translateX(3px);
}

.day-btn.active{
    color:white;
    background:linear-gradient(135deg,#129be8,#006ddf);
    border-color:transparent;
    box-shadow:0 10px 25px rgba(0,115,218,.18);
}

.day-date{
    font-size:18px;
    font-weight:700;
    line-height:1.2;
}

.day-subtitle{
    margin-top:5px;
    font-size:13px;
    font-weight:500;
}

.day-arrow{
    width:42px;
    height:42px;
    border:1px solid #bcdcf1;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:22px;
}

.day-btn.active .day-arrow{
    border-color:rgba(255,255,255,.55);
}

.download{
    height:250px;
    border-radius:12px;
    margin:35px 20px;
    text-align:center;
    background: #e9f6ef;
    color:#087e73;
    position:relative;
    overflow:hidden;
}

.download-inner{
     background: #e9f6ef;   
     padding: 30px 10px;
     border-radius: 12px;
}
.download-inner img{
     margin: auto;
}
.download-icon{
    font-size:37px;
    margin-bottom:14px;
}

.download strong{
    display:block;
    font-size:18px;
    line-height:1.5;
}

.download span{
    display:block;
    font-size:30px;
    margin-top:16px;
}

.agenda{
    position:relative;
    min-width:0;
    padding-left: 4px;
    height: -webkit-fill-available;
    max-height: fit-content;
}
.agenda::before{
    content: "";
    width: 2px;
    height: calc(100% - 30px);
    top: 30px;
    left: 0;
    position: absolute;
    background:linear-gradient(to bottom, #fff 0%, #b9dff6 5%, #b9dff6 90%, #fff 100%);
}

.main-icon{
    position: absolute;
    top: 15px;
    left: -23px;
}

.agenda-header{
    height:74px;
    display:flex;
    align-items:center;
    gap:24px;
    padding:0 28px;
    border:1px solid var(--border);
    background:white;
    border-radius:13px 13px 0 0;
}

.agenda-header h2{
    font-size:25px;
    white-space:nowrap;
}

.tag{
    background:#e0f7ed;
    color:#048675;
    border-radius:30px;
    padding:10px 23px;
    font-size:13px;
    font-weight:800;
    white-space:nowrap;
}

.header-line{
    height:2px;
    background:linear-gradient(90deg,#46b884,#c5eadc);
    flex:1;
}

.ogt-label{
    letter-spacing:4px;
    color:#4e6b99;
    font-size:12px;
}

/* ================= AGENDA ITEMS ================= */

.timeline-item{
    position:relative;
    display:grid;
    grid-template-columns: 0.1fr 2fr 1fr;
    align-items:center;
    gap:14px;
    min-height:105px;
    padding:14px 15px 14px 28px;
    background:#fff;
    border:1px solid var(--border);
    border-radius: 5px;
    margin: 5px 0;
}

.timeline-item:before{
    content:"";
    position:absolute;
    left:-4px;
    top:50%;
    width:12px;
    height:12px;
    border-radius:50%;
    background:#0874e7;
    transform:translate(-50%,-50%);
    box-shadow:0 0 0 5px white;
}

.time{
    padding:10px 12px;
    border-radius:10px;
    background:#e7f4ff;
    color:#0870df;
    text-align:center;
    font-size:14px;
    font-weight:800;
    white-space:nowrap;
}

.event-icon{
    width:55px;
    height:55px;
    background:#eef7ff;
    border-radius:10px;
    display:grid;
    place-items:center;
    font-size:28px;
    color:#0870dc;
}

.event-info{
     margin-bottom: auto;   
}

.event-info h3{
    font-size:16px;
    color:#0752b3;
    margin-bottom:5px;
    margin-top:3px;
}

.event-info p{
    font-size:13px;
    color:#55709a;
    line-height:1.5;
}

.event-image{
    height:80px;
    position:relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}

.sponsor-card-part{
    height:80px;
    position:relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    background: #e7f4ff;
    border-radius: 5px;
    align-items: center;
    padding: 3px;
}
.event-spon{
     display: flex;
     flex-direction: column;
     gap: 5px;
     padding: 5px;
     background: #e7f4ff;
     border-radius: 8px;
     margin: 10px auto;
     max-width: 200px;
}
.event-spon img{
     object-fit: contain;   
     width: 100%;
     height: 100%;
        max-width: 100% !important;
    max-height: 100% !important;        
}

.flg{
     display: flex;
     flex-direction: column;
     gap: 5px;
}

.mb0{
     margin: 0 !important;   
}
.tcen{
     text-align: center;   
}
.event-spon p{
     font-size: 12px;   
     margin: 0;
     text-align: center;
     font-weight: 700;
    color: #001265;
}
.sponsor-card-part h2{
    font-size: 14px;
    text-align: center;
}
.sponsor-card-part img{
    max-width: 111px;
    max-height: 111px;
}
.w1h1{
    max-width: 100% !important;
    max-height: 100% !important;   
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}
.bgwhite{
     background: #fff;   
}
.event-image img{
    border-radius: 5px; 
}    

.event-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    max-height: 80px;
    
}

.sponsor{
    height:70px;
    border-radius:9px;
    background:#f0faff;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:15px;
    color:#0870d8;
    font-size:11px;
}

.sponsor-logo{
    font-size:15px;
    font-weight:900;
    color:#079b9d;
}

.item-arrow{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#eaf6ff;
    display:grid;
    place-items:center;
    color:#0871df;
    font-size:23px;
    cursor:pointer;
}

/* ================= FEATURE SESSION ================= */

.feature-session{
    display:grid;
    grid-template-columns: 0.1fr 3fr;
    gap:15px;
    position:relative;
    background:white;
    padding:20px 20px 25px 28px;
    border:1px solid var(--border);
    border-top:0;
}

.feature-session:before{
    content:"";
    position:absolute;
    left:-4px;
    top:28px;
    width:12px;
    height:12px;
    border-radius:50%;
    background:#0874e7;
    transform:translateX(-50%);
    box-shadow:0 0 0 5px white;
}

.feature-time{
    align-self:start;
}

.feature-body{
    display:grid;
    grid-template-columns:4fr 1fr;
    gap:22px;
}

.sdg{
    padding-top:25px;
}

.sdg-title{
    font-size:13px;
    color:#0877dd;
    font-weight:800;
    margin-bottom:7px;
}

.sdg-box{
    width:100px;
    height:125px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:#e7f4ff;
    color:white;
    font-weight:900;
    font-size:14px;
    border-radius: 8px;
}

.sdg-box img{
     width: 100%;
     height: 100%;
     object-fit: contain;
}

.roundtable-label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:7px 10px 12px 8px;
    border-radius:15px;
    background:#e7f6ff;
    color:#0670d8;
    font-size:12px;
    font-weight:800;
    width: max-content;
}

.session-content h2{
    font-size:20px;
    line-height:1.35;
    margin: 24px 0;
    color:#0760c3;
    text-transform:uppercase;
}

.session-content > p{
    font-size:13px;
    color:#506e9a;
    line-height:1.55;
    margin-bottom:7px;
}

.speakers-title{
    margin-top:14px;
    font-size:13px;
    font-weight:800;
}

.speakers{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px 28px;
    margin-top:12px;
    margin-bottom:14px;
}

.speaker{
    display:flex;
    gap:12px;
    align-items:center;
}

.speaker-photo{
    width:52px;
    height:58px;
    border-radius:9px;
    background:linear-gradient(150deg,#d6e7f5,#edf6fc);
    overflow:hidden;
    flex:none;
}

.speaker-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.speaker strong{
    color:#0756b6;
    font-size:14px;
    display:block;
    margin-bottom:3px;
}

.speaker p{
    color:#536e97;
    font-size:12px;
    line-height:1.4;
    margin-bottom: 0;
    margin-top: 3px;
}

.moderator{
    background:#f1f8fd;
    padding:12px;
    border-radius:10px;
    text-align:center;
    align-self:start;
    margin-top:45px;
    max-width: 185px;
}

.collapse-tabb{
     max-height: 65px;   
     overflow-y: clip;
     position: relative;
     transition: max-height 0.7s;
     cursor: pointer;
     border-radius: 8px;
    border: 1px solid var(--border);
    margin-bottom: 5px;
}
.abs-arrow{
     position: absolute;
     right: 20px;
     top: 20px;
     transform: rotate(90deg);
      transition: transform 0.3s, right 0.3s;
      display: flex;
      align-items: center;
      justify-content: center;
}
.collapse-tabb.open{
     max-height: 1500px;   
     overflow-y: visible;
}
.collapse-tabb.open .abs-arrow{
     transform: rotate(270deg);
}  

.moderator-label{
    font-size:12px;
    color:#167082;
    font-weight:800;
    margin-bottom:9px;
}

.moderator-photo{
    width:87px;
    height:90px;
    border-radius:7px;
    background:#dfe9ef;
    margin:auto auto 10px;
}
.moderator-photo img{
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 8px;
}

.moderator strong{
    display:block;
    font-size:16px;
    color:#0755b2;
}

.moderator p{
    margin-top:4px;
    font-size:12px;
    color:#536e97;
    line-height:1.4;
}

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

.cta-wrap{
    width:min(1460px,95%);
    margin:10px auto 50px;
}

.cta{
    min-height:105px;
    border:1px solid #d7e9f7;
    border-radius:12px;
    background:white;
    box-shadow:var(--shadow);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:25px 40px;
}

.cta h2{
    font-size:21px;
    margin-bottom:6px;
}

.cta p{
    color:#4270b1;
    font-size:14px;
}

.cta-button{
    min-width:245px;
    padding:17px 25px;
    text-align:center;
    color:white;
    font-weight:700;
    border-radius:9px;
    background:linear-gradient(135deg,#27b76b,#08a35a);
}
/* ================= MOBILE ================= */

.mobile-menu{
    display:none;
    font-size:25px;
    border:0;
    background:none;
    color:#073774;
}

.venue-icon-clas{
     display: flex;   
     gap: 7px;
     align-items: center;
}

.venue-icon-clas p{
      font-size: 13px;
    color: #55709a;
    line-height: 1.5;  
}

.venue-icon{
     background: #d6e7f5;
     padding: 5px;
     border-radius: 5px;
     min-width: 30px;
}

.mob-changes{
     padding: 10px;   
}

.day-content { display: none; }
.day-content.active { display: block; }
@media(max-width:1500px){
    .page {
         width: min(2000px,95%);   
    }
}

@media(max-width:1100px){
    .mobile-menu{
        display:block;
    }

    .hero-slogan{
        display:none;
    }

    .page{
        grid-template-columns:220px minmax(0,1fr);
        gap:25px;
    }
    
    .event-image{
         display: none;   
    }

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

    .event-image,
    .sponsor{
        display:none;
    }

}

@media(max-width:911px){
    .feature-body{
         grid-template-columns: 1fr;   
    }
    .moderator{
         margin: auto;   
         width: 200px;
    }
    .page{
        width:95%;
        display:block;
        padding-top:18px;
    }
     .sidebar{
        display:flex;
        overflow-x:auto;
        gap:8px;
        padding-bottom:10px;
    }
    .sidebar {
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #007de66b transparent;
    }
    
    .sidebar::-webkit-scrollbar {
        width: 6px; 
    }
    
    .sidebar::-webkit-scrollbar-track {
        background: transparent; 
    }
    
    .sidebar::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2); 
        border-radius: 10px; /
        transition: background 0.3s ease;
    }
    
    .sidebar::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.4);
    }
    .day-btn{
        min-width:150px;
        margin:0;
        padding:15px;
    }

    .day-date{
        font-size:12px;
    }
    
    .day-subtitle{
         font-size: 11px;   
    }

    .day-arrow{
        display: none;
    }
    .download{
        display:none;
    }
}

.mob-big-partner{
     display: none; 
     height: max-content;
     margin-top: 0 !important;
 
}
.desk-big-partner{
     display: block;   
}

.mob-title{
     display: none;    
}
.desk-title{
     display: flex;    
}
@media(max-width:760px){
    .card-header-time{
         display: flex;   
         gap: 5px;
         max-width: 89%;
    }
    .mob-title{
     display: flex;    
     height: 37px;
     border-radius: 10px;
}
.desk-title{
     display: none;    
}
.mob-big-partner{
     display: block;   
}
.mob-big-partner img{
         width: 90%;
     height: 90%;
     margin: auto;   
}
.desk-big-partner{
     display: none;   
}
.moderator{
         max-width: 140px;   
}
    .sidebar {
        overflow-y: auto;
        scrollbar-width: thin;
        scrollbar-color: #007de66b transparent;
    }
    
    .sidebar::-webkit-scrollbar {
        width: 6px; 
    }
    
    .sidebar::-webkit-scrollbar-track {
        background: transparent; 
    }
    
    .sidebar::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.2); 
        border-radius: 10px; /
        transition: background 0.3s ease;
    }
    
    .sidebar::-webkit-scrollbar-thumb:hover {
        background: rgba(0, 0, 0, 0.4);
    }

    .hero{
        min-height:auto;
    }

    .hero-inner{
        padding:38px 0 40px;
    }

    .hero h1{
        font-size:38px;
    }

    .hero-description{
        font-size:15px;
    }

    .hero-info{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }

    .page{
        width:95%;
        display:block;
        padding-top:18px;
    }

    .sidebar{
        display:flex;
        overflow-x:auto;
        gap:8px;
        padding-bottom:10px;
    }
    
    .main-icon{
         top: 27px;
        left: 4px;
   
    }

    .day-btn{
        min-width:150px;
        margin:0;
        padding:15px;
    }

    .day-date{
        font-size:12px;
    }
    
    .day-subtitle{
         font-size: 11px;   
    }

    .day-arrow{
        display: none;
    }

    .download{
        display:none;
    }

    .agenda{
        border-left:0;
        margin-top:10px;
    }

    .agenda-header{
        height:auto;
        padding:18px 18px 18px 60px;
        flex-wrap:wrap;
    }

    .agenda-header h2{
        font-size:20px;
    }

    .header-line,
    .ogt-label{
        display:none;
    }

    .timeline-item{
        grid-template-columns:1fr 3fr;
        gap:10px;
        padding:15px;
        align-items: start;
    }
    .sponsor-card-part{
        grid-column: span 2;
        width: 265px;
        margin: auto;   
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .timeline-item:before,
    .feature-session:before{
        display:none;
    }
    .event-info h3{
        margin:8px 5px;
    }
    .sdg-title{
       font-size: 9px; 
    }
    .mob-changes-sponosr{
           width: 40px;
    margin: auto;     
    }

    .event-icon{
        width:45px;
        height:45px;
        font-size:22px;
    }

    .item-arrow{
        display:none;
    }

    .feature-session{
        display:block;
        padding:18px;
    }

    .feature-time{
        display:inline-block;
        margin-bottom:15px;
    }
    
    .event-spon{
        margin: 0 auto;
        margin-top: -15px;
    }

    .feature-body{
        display: flex;
        flex-wrap: wrap;
    }

    .sdg{
        display:none;
    }

    .session-content h2{
        font-size:18px;
    }

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

    .cta{
        display:block;
        padding:25px;
    }

    .cta-button{
        display:block;
        margin-top:20px;
        min-width:0;
    }
    
    .mob-changes{
         width: 100px;
         margin: 10px auto;
    }
}