body {
     color:#333;
     font-family:'Arial',sans-serif;
     margin:0;
     overflow-x:hidden 
}
 .hero {
     align-items:center;
     background:linear-gradient(#00000080,#00000080),url(../img/large.webp) no-repeat center center/cover;
     color:#fff;
     display:flex;
     height:100vh;
     justify-content:center;
     position:relative;
     text-align:center 
}
/* Mobile version (screens 768px and below) */
 @media (max-width: 768px) {
     .hero {
         background: linear-gradient(#00000080, #00000080), url(../img/wn.png) no-repeat center center/cover;
        /* Mobile-specific background */
         height: auto;
        /* Adjust the height if needed */
    }
}
 .hero-overlay {
     background:#00000080;
     height:100%;
     left:0;
     position:absolute;
     top:0;
     width:100%;
     z-index:1 
}
 .hero-content {
     animation:fadeIn 2s ease-in-out;
     max-width:800px;
     z-index:2 
}
 .hero-title {
     font-size:3rem;
     letter-spacing:2px;
     margin-bottom:20px;
     text-transform:uppercase 
}
 .hero-subtitle {
     font-size:1.5rem;
     margin-bottom:30px 
}
 .btn {
     animation:pulse 2s infinite;
     background:#007bff;
     border-radius:50px;
     color:#fff;
     display:inline-block;
     padding:10px 20px;
     text-decoration:none;
     transition:background .3s ease 
}
 .btn:hover {
     background:#0056b3 
}
 .countdown {
     display:flex;
     font-size:1.5rem;
     gap:20px;
     justify-content:center;
     margin-top:20px 
}
 .section-title {
     font-size:2rem;
     margin-bottom:20px;
     text-align:center 
}
 .highlights,.agenda,.location {
     background:#f9f9f9;
     padding:50px 20px;
     text-align:center 
}
 .cards {
     display:flex;
     flex-wrap:wrap;
     gap:20px;
     justify-content:center 
}
 .card {
     background:#fff;
     border-radius:10px;
     box-shadow:0 4px 15px #0000001a;
     max-width:300px;
     padding:20px;
     transition:transform .3s ease,box-shadow .3s ease 
}
 .card:hover {
     box-shadow:0 6px 20px #0003;
     transform:translateY(-10px) 
}
 @keyframes fadeIn {
     from {
         opacity:0;
         transform:translateY(20px) 
    }
     to {
         opacity:1;
         transform:translateY(0) 
    }
}
 @keyframes pulse {
     0%,100% {
         transform:scale(1) 
    }
     50% {
         transform:scale(1.05) 
    }
}
 .container {
     margin:0 auto;
     max-width:1200px;
     position:relative;
     width:90% 
}
 .section {
     opacity:0;
     overflow:hidden;
     padding:120px 20px;
     position:relative;
     transform:translateY(50px);
     transition:all .8s ease 
}
 .section.show {
     opacity:1;
     transform:translateY(0) 
}
 .section:nth-child(odd) {
     background:linear-gradient(120deg,#4e73df,#224abe);
     color:#fff 
}
 .section:nth-child(even) {
     background:#fff 
}
 .section h2 {
     font-size:3rem;
     margin-bottom:20px;
     position:relative;
     text-align:center 
}
 .section h2::after {
     background:#ffc107;
     content:'';
     display:block;
     height:4px;
     margin:20px auto 0;
     width:80px 
}
 .section p {
     font-size:1.2rem;
     margin-bottom:40px;
     text-align:center 
}
 #intro {
     background:linear-gradient(to bottom,#1e3a8acc,#233c96e6),url(../img/wn.webp) center/cover no-repeat;
     clip-path:ellipse(150% 90% at 50% -10%);
     color:#fff;
     padding:150px 20px;
     text-align:center 
}
 #intro h1 {
     font-size:4rem;
     margin-bottom:20px 
}
 #intro p {
     font-size:1.5rem;
     margin-bottom:30px 
}
 #intro .btn {
     background:#ffc107;
     border-radius:50px;
     box-shadow:0 5px 15px #0000004d;
     color:#1e3a8a;
     display:inline-block;
     font-size:1.2rem;
     font-weight:700;
     padding:15px 40px;
     text-decoration:none;
     transition:transform .3s ease,box-shadow .3s ease 
}
 #intro .btn:hover {
     box-shadow:0 10px 30px #00000080;
     transform:scale(1.1) 
}
 #agenda ul {
     display:flex;
     flex-wrap:wrap;
     gap:20px;
     color: black;
     justify-content:center 
}
 #agenda li {
     background:linear-gradient(145deg,#fff,#f1f3f6);
     border-radius:20px;
     box-shadow:0 8px 20px #0000001a;
     min-width:280px;
     padding:20px;
     text-align:center;
     transition:transform .3s ease,box-shadow .3s ease;
     width:30%;
     list-style: none;
}
 #agenda li:hover {
     box-shadow:0 12px 25px #0000004d;
     transform:translateY(-10px) 
}
 #experts p {
     font-size:1.2rem;
     margin:0 auto 40px;
     max-width:800px 
}
 .map iframe {
     border-radius:10px;
     box-shadow:0 10px 30px #0003;
     height:450px;
     transition:transform .3s ease,box-shadow .3s ease;
     width:100% 
}
 .map iframe:hover {
     box-shadow:0 15px 40px #0006;
     transform:scale(1.02) 
}
 @media (max-width: 768px) {
     body {
         font-size:1rem;
         line-height:1.5;
         overflow-x:hidden 
    }
     .hero {
         background-size:cover;
         height:90vh;
         padding:1rem;
         text-align:center 
    }
     .hero-title {
         font-size:1.5rem;
         margin-bottom:15px 
    }
     .btn {
         border-radius:30px;
         font-size:.9rem;
         padding:8px 16px 
    }
     .countdown {
         flex-wrap:wrap;
         font-size:1.2rem;
         gap:15px 
    }
     .section {
         padding:60px 15px 
    }
     .section-title {
         font-size:1.8rem;
         margin-bottom:15px 
    }
     .section h2 {
         font-size:2.5rem 
    }
     .section p {
         font-size:1rem;
         margin-bottom:20px 
    }
     .highlights,.agenda,.location {
         padding:30px 15px 
    }
     .cards {
         flex-wrap:wrap;
         gap:15px 
    }
     .card {
         border-radius:8px;
         max-width:100%;
         padding:15px 
    }
     #intro {
         clip-path:ellipse(200% 100% at 50% 0%);
         padding:210px 15px 
    }
     #intro h1 {
         font-size:2.5rem;
         margin-bottom:15px 
    }
     #intro .btn {
         font-size:1rem;
         padding:10px 30px 
    }
     #agenda li {
         margin-right: 3vh;
         font-size: 11px;
         width:90px;
         list-style: none;
    }
     .map iframe {
         border-radius:8px;
         height:300px 
    }
     .hero-subtitle,#intro p {
         font-size:1.2rem;
         margin-bottom:20px 
    }
     @keyframes fadeIn {
         from {
             opacity:0;
             transform:translateY(15px) 
        }
         to {
             opacity:1;
             transform:translateY(0) 
        }
    }
     @keyframes pulse {
         0%,100% {
             transform:scale(1) 
        }
         50% {
             transform:scale(1.03) 
        }
    }
}