 
    /* ========= THEME (brand palette provided) ========= */
    :root{
      --indigo:#2B318E;   /* primary */
      --sky:#1599D6;      /* accent */
      --stone:#313038;    /* light */
      --amber:#FDB515;    /* CTA */
      --lime:#A8D058;
      --green:#84C98C;
      --slate:#6975B5;   /* secondary */
      --salmon:#F06F72;  /* highlight */
      --bg:#0b1024;      /* page background */
      --text:#313038;
      --muted:#0d0d0d;
      --card:#efefef;
      --line:#dbdbdb;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
        /* background:linear-gradient(180deg,#0b122a 0%, #0b1024 100%); */
        background: #fff;
        color:var(--text)}
    a{color:inherit}

    /* ========= NAVBAR (floating) ========= */
    .navbar{position:sticky;top:0;z-index:1000;display:flex;gap:16px;align-items:center;padding:15px 20px;background:#fff;backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
    .brand{display:flex;align-items:center;gap:10px}
    .brand img{width:auto; height:30px; object-fit:contain;}
    .navlinks{display:flex;gap:12px;flex-wrap:wrap;margin-left:8px}
    .navlinks a{font-size:14px;padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--stone)}
    .navlinks a:hover{
        background:#666666;
        color:#fff;
    }
    .spacer{flex:1}
    .downloads{display:flex;gap:10px;align-items:center}
    .btn{border:none;border-radius:12px;padding:10px 14px;font-weight:700;cursor:pointer}
    .btn-cta{background:linear-gradient(90deg,var(--amber),var(--salmon));color:#1b1b1b}
    .btn-ghost{background:transparent;border:1px solid var(--line);color:var(--stone)}

    /* ========= HERO/BANNER ========= */
    .banner{width:100%;height:410px;min-height:300px;max-height:410px;position:relative;overflow:hidden; padding: 0;}
    .slides{
        display:flex;
        width:100%
        ;height:100%;
        transition:transform .65s ease;
    }
    .slide{flex:0 0 100%;height:100%;position:relative;background:#111}
    .slide img{
        width:100%;
        height:100%;
        object-fit:cover;
        filter:saturate(1.05);
    }
    .slide .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.35))}
    .dots{position:absolute;bottom:12px;left:0;right:0;display:flex;gap:8px;justify-content:center}
    .dot{width:10px;height:12px;border-radius:999px;background:rgba(255,255,255,.45);border:none}
    .dot.active{background:#fff}

    /* ========= TITLE + REGISTER ROW ========= */
    .row{max-width:1200px;margin:0 auto 24px;padding:0;}
    .title-wrap{display:grid;grid-template-columns:1fr 375px;gap:10px}
    .title-left{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px;display:flex;gap:14px;align-items:center}
    .host-logo{width:72px;height:72px;border-radius:12px;object-fit:contain;background:#fff;border:1px solid var(--line)}
    .title-text h1{margin:0;font-size:24px;line-height:1.2}
    .title-text p{margin:6px 0 0;color:var(--muted); line-height: 24px;}

    .register-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px}
    .register-row{display:flex;gap:8px;align-items:center;justify-content:space-between}
    .share{display:flex;align-items:center;gap:10px}
    .share span{color:var(--muted);font-size:13px}
    .icons{display:flex;gap:8px}
    .iconbtn{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:transparent;display:grid;place-items:center;cursor:pointer}
    .iconbtn svg{width:18px;height:18px}
    .statbar{display:flex;gap:12px;margin-top:12px}
    .stat{flex:1;
        /* background:rgba(255,255,255,.05); */
        background: #eee;
        border:1px solid var(--line);
        border-radius:12px;
        padding:10px;
        text-align:center;
    }

    .stat:last-child ,  .stat:nth-child(2n+2),  .stat:nth-child(4n+4) {
         text-align: left;
    }
    .stat .num{
      font-size: 20px;
      margin-bottom: 5px;
      font-weight: 600;
      text-align: center;
      text-transform: uppercase;
    
    }
    .stat .timestmp {
      font-size: 10px;
      margin-right: 5px;
      text-transform: lowercase;
    }
    .statbar .label {
      font-weight: 600;
      background: linear-gradient(90deg, #24a6de5e, #2b3f9742);
      margin: -10px -10px 13px;
      padding: 10px;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      text-align: center;
      color: #000000;
    }
    /* .countdown{font-family:ui-monospace,Menlo,Consolas,monospace} */
    .dl{margin-top:12px;display:flex;flex-direction:column;gap:8px}
     .wrapper {
       max-width:1180px;
       margin: 0 auto;
     }
    /* ========= SECTIONS ========= */
    section{margin:20px auto;padding:20px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
    section h2{margin:0 0 8px;font-size:22px}
    .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

    /* prizes */
    .prizes{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
    .prize{height:150px;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
    .prize img{width:100%;height:100%;object-fit:cover}

    /* videos */
    .videos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    .videos iframe{width:100%;height:260px;border:0;border-radius:12px}

    /* results */
    .results{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    .card{
        /* background:rgba(255,255,255,.04); */
        background: #e5e5e5;
        border:1px solid var(--line);
        border-radius:14px;
        padding:12px;
        text-align:center;
    }
    .card img{width:100%;height:280px;object-fit:cover;border-radius:10px}
    .meta{color:var(--muted);font-size:14px;margin-top:6px}

    /* about */
    .about{display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:center;     align-items: start;}
    .about img{width:100%;}
    .awllogo {
    padding: 10px;
    background: #fff;
    display: flex;
    border-radius:12px;border:1px solid var(--line);
   }

    footer{max-width:1200px;margin:24px auto 40px;color:var(--muted);text-align:center}
   ul li {
      margin: 10px 0 0 0;
   }
   .faqs h2 {
    margin-bottom: 10px;
   }
   .tile {
      display: flex;
      justify-content: center;
     flex-direction: column;
     /* align-items: center; */
     padding: 20px;
   }
   .tile p {
     margin: 0;
     line-height: 22px;
   }
   .disclaimerbclk {
      max-height: 400px;
      overflow-y: scroll;
      margin: 26px 0px 0px 0px;
   }
   .disclaimerbclk ul li {
       
   }
   details {
      margin-bottom: 10px;
   }

    /* Details */
     .details ul li {
       text-align: left;
       margin-bottom: 10px;
     }
     .contact a {
        text-decoration: none;
     }
    /* Details */

    /* Stages & Timeline */
    .timeline .stat h4 {
      margin: 10px 0;
    }
    .timeline .timeGrid {
        display:grid;
        grid-template-columns:180px 1fr;
        gap:12px;
    }
    /* Stages & Timeline */

    /* Detail Form */
    .DetailForm .heading h2 {
     text-align: center;
     margin-bottom: 20px;
     color: rgb(14, 35, 84);
    }
    .FormInputs label {
     color: #0E2354;
      margin-bottom: 5px;
      display: block;
      font-weight: 600;
      font-size: 14px;
    }
    .DetailForm .FormInputs {
     max-width: 550px;
     margin: auto;
    }
    .DetailForm .FormInputs .formfiels {
        margin-bottom: 18px;
    }
    .DetailForm .FormInputs .inputfield {position: relative;} 
    .DetailForm .FormInputs .formfiels .textarea {
    width: 100%;
    border: 1px solid #ddd;
    padding: 5px 10px;
    resize: none;
    }
    .DetailForm .FormInputs .formfiels .textarea:focus {outline: none;}
    .inputfield .inputbox {
        width: 100%;
        height: 42px;
        border: 1px solid #ddd;
        padding: 5px 10px;
        border-radius: 10px;
    }
    .fieldEmpty {
        outline: 1px solid rgb(255, 72, 66);
    }
    .emptyText {
        color: rgb(255, 72, 66);
        position: absolute;
        margin: 0;
        font-size: 12px;
        left: 0;
        bottom: -15px;
    }
    .inputfield .inputbox:focus {
        outline: none;
    }
    .inputfield .selectBox {
    width: 100%;
    height: 42px;
    border: 1px solid rgb(214, 214, 214);
    padding: 5px 10px;
    border-radius: 10px;
    }
    .inputfield .selectBox:focus {
        outline: none;
    }



    .genderbox {
    padding: 5px 0;
    position: relative;
    margin-right: 20px;
    }
.genderItem {
	 display: flex;
	 align-items: center;
}
.gendrfield {
    display: flex;
}

 .genderbox.active {
	 border: 1px solid #9e2f2a;
	 box-shadow: 4px 4px 8px 0px #000 29;
	 background: #fff;
}
 .genderbox h2 {
	 font-size: 22px;
	 margin: 5px 0;
}
 .genderbox p {
	 font-size: 16px;
}
 .genderbox .genderadio {
	 cursor: pointer;
}
 .genderbox .genderadio label {
	 cursor: pointer;
}
 .genderbox .genderadio input {
	 display: none;
}
 .genderbox .genderadio .customradio {
	 display: flex;
	 align-items: center;
     margin: 0;
}
 .genderbox .genderadio .customradio p {
	 padding: 0;
	 margin: 0;
	 position: absolute;
	 height: 100%;
	 width: 100%;
	 top: 0;
	 left: 0;
}
 .genderbox .genderadio .customradio span {

	 border: 1px solid #c93038;
	 border-radius: 40px;
	 position: relative;
	 max-width: 16px;
	 min-width: 16px;
	 height: 16px;
	 flex: 0 0 16px;
	 margin: 0 8px 0 0;
	 cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .genderbox .genderadio .customradio span:before {
	 content: "";
     background: #c93038;
	 height: 76%;
	 display: none;
	 width: 76%;
	 border-radius: 50%;
}
 .genderbox .genderadio input[type="radio"]:checked ~ label span:before {
	 display: block;
}
 .genderbox .genderText {
	 flex: 1;
 }
 .genderbox .genderText span {
	 font-size: 16px;
	 color: #0d0d0d;
	 margin: 0;
}

.submitbtn {
    text-align: center;
    margin-top: 30px;
}
 .submitbtn .btn {
    background: #c93038;
    color: #fff;
    border-radius: 8px;
    padding: 12px 20px;
    width: 200px;
 }

     .checkitems {
    padding: 5px 0;
    position: relative;
    }
.checkItem {
	 display: flex;
     margin-bottom: 12px;
      position: relative;
}
.checkfeild {
    display: flex;
    align-items: flex-start;
    padding-top: 4px;
    margin-right: 10px;
   
}

 .checkItem .checkfeild {
	 cursor: pointer;
}
 .checkItem .checkfeild label {
	 cursor: pointer;
}
 .checkItem .checkfeild input {
	 display: none;
}
 .checkItem .checkfeild .customcheck {
	 display: flex;
	 align-items: center;
     margin: 0;
}
 .checkItem .checkfeild .customcheck p {
	 padding: 0;
	 margin: 0;
	 position: absolute;
	 height: 100%;
	 width: 100%;
	 top: 0;
	 left: 0;
}
 .checkItem .checkfeild .customcheck span {
	 border: 1px solid #c93038;
	 position: relative;
	 max-width: 16px;
	 min-width: 16px;
	 height: 16px;
	 flex: 0 0 16px;
	 margin: 0 8px 0 0;
	 cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .checkItem .customcheck span:before {
	 content: "";
     background: #c93038;
	 height: 76%;
	 display: none;
	 width: 76%;
}
 .checkItem .checkfeild input[type="checkbox"]:checked ~ label span:before {
	 display: block;
}
 .checkItem .genderText {
	 flex: 1;
 }
 .checkItem .genderText span {
	 font-size: 14px;
	 color: rgb(14, 35, 84);
	 margin: 0;

 }

    /* Detail Form */

    /* responsive */
    @media (max-width:980px){
      .title-wrap{grid-template-columns:1fr}
      .videos{grid-template-columns:1fr}
      .results{grid-template-columns:1fr 1fr}
      .about{grid-template-columns:1fr}
    }
    @media (max-width:640px){
      .results{grid-template-columns:1fr}
    }
   @media (max-width: 767px) {
    .wrapper {
        padding: 0 10px;
    }
    section {
        padding: 10px 10px;
    }
    .banner {
     height: 130px;
     min-height: auto;
    }
    .title-text h1 {
      font-size: 20px;
      line-height: 28px;
    }
    .timeline .timeGrid {
        grid-template-columns:auto;
        gap:10px;
    }
    .title-left {
     flex-wrap: wrap;
    }
    .prizes .tile {
        padding: 15px 10px;
    }
    .prizes .tile h2 {
        font-size: 20px;
    }
    .about h1 {
         font-size: 22px;
         margin-top: 0;
    }
    .host-logo {
      margin: auto;
    }
    .iconbtn {width: 30px;
    height: 30px;}
     .title-wrap .title-left, .title-wrap .register-card {padding: 15px 12px;}
     .slide img {object-fit: contain;}
    .details .card ul {padding-left: 20px;}
    .prizes {
     grid-template-columns: repeat(1, 1fr);
     gap: 10px;
    }
    .prizes .prize {height: auto;}

    .navbar { padding: 10px 10px; gap: 10px; }

   /* Nav links */
    .brand img {
      height: 14px;
    }
    .spacer {display: none;}
    .downloads .btn {
        padding: 10px 8px;
        font-size: 10px;
    }

    /* Hamburger icon */
    .hamburger {
      display: none;
      flex-direction: column;
      cursor: pointer;
      width: 25px;
      min-width: 25px;
      height: 20px;
      justify-content: space-between;
    }

    .hamburger span {
      display: block;
      height: 3px;
      background: #000;
      border-radius: 2px;
      transition: 0.4s;
    }

     .hamburger {
        display: flex;
      }

      .navlinks {
        position: absolute;
        top: 52px;
        right: auto;
        left: 0;
        width: 100%;
        background: #333;
        flex-direction: column;
        align-items: flex-start;
        padding: 10px 0;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        margin-left: 0;
        display: flex;
        gap: 0;
      }

      .navlinks.open {
        transform: translateX(0);
      }
      .navlinks a {
        padding: 15px 15px;
        width: 100%;
        text-decoration: none;
        color: #fff;
        font-size: 16px;
        transition: 0.3s;
        border-bottom: 1px solid #6e6e6e;
        border-radius: 0;
      }
      .navlinks a:last-child {border: 0;}

        /* Hamburger animation (X effect) */
        .hamburger.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
        }

        .hamburger.active span:nth-child(2) {
        opacity: 0;
        }

        .hamburger.active span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -7px);
        }
      
     }
        @media (max-width: 360px) {
            .banner {
            height: 119px;
            }
        .downloads .btn {
         padding: 10px 5px;
         font-size: 9px;
         }
        }




    /* ========= MODALS ========= */
    .backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:1100}
    .modal{position:relative;background:#ddd;border:1px solid var(--line);border-radius:16px;padding:16px;max-width:520px;width:92%}
    .modal .close{position:absolute;right:10px;top:8px;background:transparent;border:none;color:rgb(0, 0, 0);font-size:20px;cursor:pointer}
    .modal img{width:100%;height:180px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
    .popuptext {
    text-align: center;
   }
   .popuptext p {
    font-weight: bold;
    text-align: left;
   }
   .popuptext p span{ 
     font-weight: normal;
     margin-left: 10px;
   }
   .popuptext ul li {
      text-align: left;
      margin-bottom: 10px;
   }
  
    .popuptext img {
        width: 225px;
        height: 225px;
        object-fit: unset;
        margin: 0 auto;
       }
 