/* http://meyerweb.com/eric/tools/css/reset/ 



   v2.0 | 20110126



   License: none (public domain)



*/







html, body, div, span, applet, object, iframe,



h1, h2, h3, h4, h5, h6, p, blockquote, pre,



a, abbr, acronym, address, big, cite, code,



del, dfn, em, img, ins, kbd, q, s, samp,



small, strike, strong, sub, sup, tt, var,



b, u, i, center,



dl, dt, dd, ol, ul, li,



fieldset, form, label, legend,



table, caption, tbody, tfoot, thead, tr, th, td,



article, aside, canvas, details, embed, 



figure, figcaption, footer, header, hgroup, 



menu, nav, output, ruby, section, summary,



time, mark, audio, video {



  margin: 0;



  padding: 0;



  border: 0;



  font-size: 100%;



  font: inherit;



  vertical-align: baseline;



}



/* HTML5 display-role reset for older browsers */



article, aside, details, figcaption, figure, 



footer, header, hgroup, menu, nav, section {



  display: block;



}



body {



  line-height: 1;



}



ol, ul {



  list-style: none;



}



blockquote, q {



  quotes: none;



}



blockquote::before, blockquote::after,



q::before, q::after {



  content: '';



  content: none;



}



table {



  border-collapse: collapse;



  border-spacing: 0;



}



*{



  box-sizing: border-box;



  font-family: "avenir-next-lt-pro",sans-serif;



  font-weight: 400;



}



:root{



  --common-value:0.0625rem;



  --black:#2B2B2B;



  --red:#C1272D;



  --banner-batch-info:clamp(1.125rem,calc( 1.04vw + var(--common-value)),1.25rem); 



  --h2:clamp(1.25rem,calc( 1.45vw + var(--common-value)),1.75rem);



  --default-left :4500;



  --default-right :4500;

  --path-length:720;

 



}



body{



  background-color: var(--black);



}



#banner{



    display: flex;



    justify-content: stretch;



    height: 100vh;



}



#banner .left{



  position: relative;



  display: flex;



  justify-content: start;



  align-items: start;



  flex: 0 0 55%; 



  box-sizing: border-box;



}







#banner .left svg{



  position: absolute;



  top: 0;



  left: 0;



  width: auto;



  height: 100%;



  z-index: -1;







}







#banner .left .logo{



      margin: 15vw 0 0 10vw;



}







#banner .right{



    display: flex;



    flex-direction: column;



    flex: 0 0 45%;



    padding: 2.5% 5%;



    box-sizing: border-box;



    position: relative;



    justify-content: space-between;



    align-items: center;



  }







  #banner .right img.banner-img{



    max-height: 26.8vw;



    width: auto;

    

    height: auto;



  }



.road-svg{



  width: 50%;



  position: absolute;



  top:0;



  right: 0;

isolation: isolate;

}



.section-block{



  min-height: 100vh;



  position: relative;



  display: flex;



}



#banner .right .batch-info{



  width: 100%;



}



#banner .batch-info-block{



    background-color: var(--red);



    border-radius: 10px;



    padding: 1.25rem;



    color: #FFF;



    font-size: var(--banner-batch-info);



    max-width: 26rem;



    margin: auto;



    width: 100%;



    margin-bottom: 1.25rem;

        display: flex

;

    justify-content: space-between;



}







#banner .batch-info-block .batch-type{



font-weight: 800;



line-height: 1.25;



text-transform: uppercase;



margin-bottom: 1rem;



}







#banner .batch-info-block .batch-date{



font-weight: 400;



line-height: 1.25;



}







#registration-fees.section-block::before{



  background: var(--red);



  width: 100%;



  height: 100%;



  content: '';



  position: absolute;



  display: block;



  top: 0;



  left: 0;



  z-index: -1;



}















#registration-info{



  display: flex;



    flex-direction: column;



    align-items: start;



    justify-content: start;



    gap: 5vw;



    min-height: 100vh;



    padding: 3% 2.5%;



}



h2{



  font-size: var(--h2);



  color: #FFF;



  font-weight: 800;



  line-height: 1.25;



  text-transform: uppercase;







}



.tab-buttons{



    display: flex;



    gap: 1rem;



}







  .tab-button-item{



    font-weight: 700;



    font-size: 24px;



    line-height: 28px;



    letter-spacing: 0%;



    text-transform: uppercase;



    color: #FFFFFF;



    margin-right: 2rem;



    cursor: pointer;



    display: flex;



    gap: .5rem;



    justify-content: center;



    align-items: center;



    flex-wrap: nowrap;



    text-decoration: none;



    padding: .5rem;



    border-top: 1px dashed #FFF;



    border-bottom: 1px dashed #FFF;



  



}







.tab-button-item.active{



    color: var(--red);  



}



.row-flex{



  display: flex;



  flex-direction: row;



  align-items: start;



  justify-content: start;



  gap: 1rem;



  width: 100%;



}







.tab-content{



  opacity: 0;



}


.batch-info-tabs h3 {
    font-size: 1.125rem !important;
    line-height: 1.25;
    position: absolute;
    top: -3vw;
}




.tab-content.active{



  opacity: 1;



}



.batch-info-tabs{



  display: flex;



  flex-direction: column;

    position: relative;

  width: 100%;



}



.batch-info-tabs .tab-content{



  order:2;



  display: flex;



  flex-direction: row;



  gap: 5vw;







}



.batch-info-tabs .tab-content.active{



  order:1



}



.batch-info-tabs .tab-buttons{



  display: flex;



  flex-direction: column;



  align-items: start;



  justify-content: start;



  gap: 1.5rem;



}



.batch-info-tabs .tab-buttons .tab-button-item{



  border:none;



  font-size: 1rem;



  font-weight: 400;



      margin: 0;



      gap: 0;



          position: relative;



}

.batch-info-tabs .tab-buttons .tab-button-item{
  background: #333;
    padding: .5rem;
    border-radius: 50%;
    aspect-ratio: 1;
    width: 3.75rem;
    font-weight: 500;
}
.batch-info-tabs .tab-buttons .tab-button-item.active{
   background: var(--red);
}

.batch-info-tabs .tab-buttons .tab-button-item span{



  position: absolute;



  width: 100%;



  height: 100%;



  display: flex;



  align-items: center;



  justify-content: center;
    
    text-wrap-mode: nowrap;
    
   
    text-transform: capitalize;


}



.batch1-info-tabs,.batch2-info-tabs{



   



    flex: 1 1 100%;



}



.batch1-info-tabs .tab-content,.batch2-info-tabs .tab-content{



   padding: 5%;



   gap:5vw;



   display: none;



}



.batch1-info-tabs .tab-content.active,.batch2-info-tabs .tab-content.active{



  display: flex;



}







.col-flex{



  display: flex;



  flex-direction: column;



  align-items: start;



  justify-content: start;



  gap: 1rem;



  width: 100%;



}







.day-wise-info{



  flex: 1 1 40%;



}







.map{



  flex: 1 1 60%;



}







.day-wise-info .day{



  font-size: 1.125rem;



  padding: .75rem 1.25rem;



  background-color: var(--red);



  color:#fff;



  border-radius: 3px;



  display: inline-block;



}











.batch-info-tabs .tab-buttons .tab-button-item:not(.active) svg{



  opacity: 0;



}











.day-wise-info .date{



  font-size:clamp(1.25rem, calc(1.6vw + var(--common-value)),2rem);



  font-weight: 500;



  line-height: 1.25;



  text-transform: uppercase;



  color:var(--red);



}



.day-wise-info .date sup{



  font-size: 1rem;



    vertical-align: super;



    text-transform: lowercase;



}



.day-wise-info p{



  color: #FFF;



  font-size: clamp(1rem, calc(1.04vw + var(--common-value)),1.25rem);



  font-weight: 400;



  line-height: 1.25;



}



.day-wise-info p.title{



  color:var(--red);



  font-size: clamp(1.25rem, calc(1.45vw + var(--common-value)),1.75rem);



  line-height: 1.5;



  margin-top:1rem;



}



.day-wise-info a.viewlocation{



  font-size: 1rem;



  color:var(--red);



  text-decoration: none;



  display: flex;



  align-items: center;



  gap: .25rem;



  flex-wrap:nowrap;



}
#registration-fees a.goto-register:hover {
  background-color: var(--black);
}
#banner .goto-register:hover,.day-wise-info a.goto-register:hover{
  background-color: var(--red);
}

#banner .goto-register svg path{
  fill:#FFF;
}
.day-wise-info a.goto-register,a.goto-register{
  position: relative;
  isolation: isolate;
  transition: all .3s linear;

  color:#FFF;



  font-size: clamp(1rem, calc(1.04vw + var(--common-value)),1.25rem);



  font-weight: 800;



  line-height: 1.25;



  padding: .85rem;



  border: 1px dashed #FFF;
  border-radius: .5rem;




  text-decoration: none;



  text-transform: uppercase;



  margin-top:1.5rem;



}



.map .col-flex{



  padding-right: 10vw;



}



.map p{



  font-size: clamp(1rem, calc(1.04vw + var(--common-value)),1.125rem);



  color:#FFF;



  font-weight: 500;



}



.map p span.title{



  color:var(--red);



  text-transform: uppercase;



  font-weight: 800;



}



.ai-c{



  align-items: center;



}







.batch-info-tabs .tab-buttons .tab-button-item.active span{



   opacity: 0;



}







#registration-fees{



  min-height: 100vh;



  padding: 3% 2.5%;



  align-items: start;



}



#registration-fees h2{



    font-size: clamp(1.5rem, calc(3.85vw + var(--common-value)),4.625rem);



    font-weight: 800;



    line-height: 1.25;



    color: #FFF;



}



#registration-fees p.gst{



  font-size: 1rem;



  color: #FFF;



  font-weight:500;



  margin: 1rem 0;



  line-height: 1.5;



}



#registration-fees ul li{



  font-size: clamp(1.125rem, calc(1.3vw + var(--common-value)),1.565rem);



  color: #FFF;



  font-weight: 800;



  line-height: 1.25;



  padding: 1rem 0;



  border-bottom: 1px dashed #FFF;



  text-transform: uppercase;



}







#registration-fees .info-block{



  flex: 0 0 60%



}



#registration-fees .terms-block{



  flex: 0 0 40%;



  padding: 0vw 0 5vw 5vw;



  margin-top: -5VW;



}







.terms-list {



    overflow: visible;



}



.terms-list .tab {



    width: 100%;



    color: #FFF;



    margin-bottom: 0.9rem;



    box-sizing: border-box;



    transition: all 500ms ease;



    border-radius: 12px;



    box-shadow: var(--faq-shadow);



    position: relative;



}



.terms-list .tab input {



    position: absolute;



    opacity: 0;



    z-index: -1;



}



.terms-list .tab-label {



    justify-content: space-between;



    background: transparent;



    font-weight: 600;



    cursor: pointer;



    display: flex;



    padding: 1rem 0;



    align-items: center;



    font-size: clamp(1.125rem, calc(1.3vw + var(--common-value)),1.565rem);



    transition: all 500ms ease;



    color: #FFF;



    border-bottom: 1px dashed #FFF;



}



.terms-list .tab-label span {



    display: flex;



    gap: 3rem;



}



.terms-list .tab input:checked~.tab-content{



  opacity: 1;



}















.terms-list .tab input:checked~.tab-content {



    max-height: 500px;



}



.terms-list .tab input~label svg .s-line{



  /* transition: rotate 500ms ease; */



}



.terms-list .tab input:checked~label svg .s-line{



  transform: rotate(45deg);



}



.terms-list .tab-content {



    max-height: 0;



    color: #FFF;



    transition: max-height 500ms linear;



    overflow: hidden;



}



#registration-fees ul.terms li{



  display: flex;



  flex-direction: row;



  flex-wrap: nowrap;



  gap:1.5rem;



  line-height: 1.5;



  align-items: center;



  justify-content: start;



  text-transform: unset;



  font-weight: 400;



  font-size: clamp(1rem, calc(1.04vw + var(--common-value)),1.125rem);



}



#registration-fees ul.terms li::before{



  content: '';



  width: 1.25rem;



  height: 1.25rem;



  background: url('./images/arrow-icon.png');



  background-repeat: no-repeat;



  background-size: contain;



  background-position: center;



  border-radius: 50%;



  display: inline-block;



  flex :0 0 1.25rem;



}







#registration-form{



  background-color: #FFF;



  min-height: 100vh;



  padding: 3% 2.5%;



}







.jc-sb{



  justify-content: space-between;



}



.jc-e{



  justify-content: end;



}



form{



  width: 100%;



}



.form-tab{



   display: none;



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



    gap: 2rem;







}



.m-t-0{



  margin-top:0 !important



}



.form-tab.active{



  display: grid;



}


.form-tab input, .form-tab select{



  width: 100%;



  padding: 1.25rem 1rem;



  border-radius: 12px;



  border: 1px solid #000;



  font-size: clamp(1rem, calc(1.04vw + var(--common-value)),1.125rem);



  color: #000;



  outline: none !important;



}



.input-upload-block{



  display: flex;



  flex-direction: row;



  flex-wrap: nowrap;



  border-radius: 12px;



  border: 1px solid #000;



  align-items: center;



  position: relative;

  overflow: hidden;



}



.input-upload-block input{



  border:none



}



.input-upload-block .upload-block{



  position: absolute;



    width: 100%;



    height: 100%;







}



.input-upload-block .upload-block a{



    padding: .5rem;



    position: absolute;



    width: 100%;



    height: 100%;



    text-align: right;



    display: flex;



    justify-content: end;



    align-items: center;



}

.form-tab input#photoname,
.form-tab input#idproofname{
  padding: 1.25rem 2rem 1.25rem 1rem
}

.input-upload-block .upload-block input[type="file"]{



    max-height: 1px;



    overflow: hidden !important;



    position: absolute;



    bottom: -2px;



    padding: 0;



    border: none;



    width: 100%;



    color: #FFF;



}



.custom-checkbox {



  display: flex;



  align-items: center;



  font-size: 16px;



  gap: 10px;



}







.custom-checkbox label {



  cursor: pointer;



  position: relative;



  padding-left: 28px;



  user-select: none;



  color: #333;



}







.custom-checkbox .checkmark {



  position: absolute;



  top: 50%;



  left: 0;



  transform: translateY(-50%);



  height: 20px;



  width: 20px;



  background-color: transparent;



  border: 1px solid #000;



}







.custom-checkbox input:checked + label .checkmark {



  background-color: #e60000;



  border-color: #e60000;



}







.custom-checkbox .checkmark::after {



  content: "";



  position: absolute;



  display: none;



}







.custom-checkbox input:checked + label .checkmark::after {



  display: block;



}







.custom-checkbox label .checkmark::after {



  left: 6px;



  top: 1px;



  width: 6px;



  height: 12px;



  border: solid white;



  border-width: 0 2px 2px 0;



  transform: rotate(45deg);



}



a.terms{



  font-size: clamp(1rem, calc(1.04vw + var(--common-value)),1.125rem);



  color:var(--red);



  text-decoration: none;



}



#registration-form h2{



  font-size: clamp(1.5rem, calc(2.70vw + var(--common-value)),3.25rem);



  color: #000;



}











#registration-form .title-block{



  margin-bottom: 2rem;



}

button[type="submit"]{
  cursor: pointer;
}
.form-button:hover{
  background-color: var(--red)  ;
  color:#FFF;
}
.form-button:hover svg path{
  fill: #FFF;
}
.form-button svg path{
  transition: all  .3s linear;
}

.form-button{

    transition: all  .3s linear;

    color: #000;



    font-size: clamp(1rem, calc(1.04vw + var(--common-value)), 1.25rem);



    font-weight: 800;



    line-height: 1.25;



    padding: .75rem 2rem;



    border:none;



    border: 1px dashed #000;
    border-radius: .25rem;



    



    



    text-decoration: none;



    text-transform: uppercase;



  



    display: flex;



    flex-direction: row;



    flex-wrap: nowrap;



    gap:1rem;



    background-color: transparent;



}







.custom-radio {



  position: relative;



  padding-left: 30px;



  cursor: pointer;



  font-size: 16px;



  user-select: none;



  display: inline-block;



  margin-right: 20px;



  color: #333;



}







.custom-radio input[type="radio"] {



  position: absolute;



  opacity: 0;



  cursor: pointer;



}




.upload-photo svg{
  width: 1.25rem;
}

.radio-mark {



  position: absolute;



  top: .125rem;



  left: 0;



  height: 20px;



  width: 20px;



  background-color: transparent;



  border: 1px solid #000;



  border-radius: 50%;



}







.custom-radio input:checked ~ .radio-mark {



  background-color: #FFF;



  border-color: #e60000;



}







.radio-mark::after {



  content: "";



  position: absolute;



  display: none;



}







.custom-radio input:checked ~ .radio-mark::after {



  display: block;



}







.custom-radio .radio-mark::after {



top: 3px;



    left: 3px;



    width: 12px;



    height: 12px;



  border-radius: 50%;



  background: red;



}







label.label{



font-weight: 500;



font-size: clamp(1rem, calc(1.25vw + var(--common-value)), 1.5rem);



line-height:1;







}



.jersey-size-info{



    padding: 1rem 1rem;



    background: var(--red);



    color: #FFF;



    text-decoration: none;



}







#registration-form .tab-button-item {



  color:#000



}



#registration-form .tab-button-item.active {



  color: var(--red);



  border-bottom: 2px solid var(--red);



}



.input-group{



  width: 100%;



}



.error_txt{



  font-size: 1rem;



  color: var(--red);



  text-transform: capitalize;



  padding-top: .5rem;



  display: block;



}







.input-upload-block .error_txt{



  position: absolute;



    top: 100%;



}











footer {



    padding: 1.5rem 2.5%;



    color: #FFF;



    font-size: clamp(1rem, calc(1.04vw + var(--common-value)), 1.125rem);



    z-index: 1;



    position: relative;



    background: var(--black);



   font-family: "avenir-next-lt-pro",sans-serif;



}



h2.thank-you{



    font-size: clamp(1.5rem, calc(3.85vw + var(--common-value)),4.625rem);



    font-weight: 800;



    line-height: 1.25;



    color: #FFF;



}







.back-to-home {



    color: #FFF;



    font-size: clamp(1rem, calc(1.04vw + var(--common-value)), 1.25rem);



    font-weight: 800;



    line-height: 1.25;



    padding: .75rem 2rem;



    border: none;



    border-top: 1px dashed #FFF;



    border-bottom: 1px dashed #FFF;



    text-decoration: none;



    text-transform: uppercase;



    margin-top: 1.5rem;



    display: flex;



    flex-direction: row;



    flex-wrap: nowrap;



    gap: 1rem;



    background-color: transparent;



}



.jc-c{



  justify-content: center !important;



}



.thankyou-img{



  position: absolute;



    right: 0;



    bottom: 0;



    max-width: 26vw;



}



.terms-block{



  gap:.5rem;



}



.terms-block input[type="checkbox"]{



  flex: 0 0 20px;



    padding: 10px;



    height: 16px;
    width: 16px;



    margin: 0;



    accent-color: var(--red);



}







 .terms-info h3{



  font-size: clamp(1.25rem, calc(1.6vw + var(--common-value)),2rem);



  font-weight: 800;



  line-height: 1.25;



  text-transform: uppercase;

  margin-bottom: 1rem;



}



.terms-info p{



  font-size: clamp(1rem, calc(1.04vw + var(--common-value)), 1.25rem);



  font-weight: 400;



  line-height: 1.5;



  color: #000;

  margin-bottom: 1rem;



}



#banner .goto-register{



  position: absolute;



    bottom: 10%;



    left: 35%;



    display: flex;



    flex-direction: row;



    flex-wrap: nowrap;



    align-items: center;



    justify-content: center;



    gap:.5rem;
    text-wrap-mode: nowrap;



  }



#banner .goto-register svg{



  position: relative;



}



.only-mobile{



  display: none;



}



.only-desktop{



  display: block;



}



.map .uparrow,.map .downarrow{



  display: inline-flex;



    align-items: center;



}



.map .uparrow::before{



  content: '';



  width: 1rem;



  height: 1rem;



  background: url('./images/up.png') no-repeat center center;



  display: inline-block;



  



}



.map .downarrow::before{



  content: '';



  width: 1rem;



  height: 1rem;



  background: url('./images/down.png') no-repeat center center;



  display: inline-block;



  



}



.map img{



  max-width: 37.4vw;



}



.registration-fees-img{



  max-width: 30vw;



}



.batch-info-tabs .tab-content:not(.active){



  display: none;



}



select {



  background-image: url(./images/select-arrow.png);



  background-repeat: no-repeat;



  background-position: 95% 50%;



  background-size: 20px;



}



#registration-fees .info-block>div:first-child ul li span::before {

    content: "-";

    position: absolute;

    left: -1.25vw;

}



#registration-fees .info-block>div:first-child ul li span {

    text-wrap-mode: nowrap;

    position: relative;

}

#registration-fees .info-block>div:first-child ul li {

    display: flex

;

    width: 100%;

    justify-content: space-between;

    gap: 2.5vw;

    align-items: center;

}





input#dob {



  background-image: url(./images/calender.png);



  background-repeat: no-repeat;



  background-position: 95% 50%;



  background-size: 20px;



}

.c_notification{

   font-family: "avenir-next-lt-pro",sans-serif;

                position: fixed;

                top: 0;

                left: 0;

                z-index: 999999;

                width: 100%;

                height: 100%;

                overflow-x: hidden;

                overflow-y: auto;

                outline: 0;

                background: #0005;

                display: none;

            }

            

            .c_notification_block {

                max-width: 500px;

                margin: 20% auto;

                background: #fff;

                border-radius: 30px;

                border: 0px solid #f1f1f1;

                box-shadow: 3px 3px 9px 5px #0003;

            }

            

            .c_notification_body{

                text-align: center;

                font-size: 16px;

                font-weight: 600;

                text-transform: capitalize;

                display: block;

                min-height: 100px;

            }

            

            .c_notification_body p{

                font-size: 16px;

                font-weight: 500;

                text-transform: capitalize;

                color: #222;

                padding: 20px 10px;

            }

            

            .c_notification_title {

                font-size: 18px;

                font-weight: 700;

                text-transform: capitalize;

                border-bottom: 1px solid #ececec;

                background: #ececec;

                border-radius: 25px 25px 0px 0px;

                padding: 10px;

            }

            

            .c_notification_title p{

                font-size: 18px;

                text-transform: capitalize;

                color: #222;

                display: inline-block;

                padding: 10px 25px;

                margin: 0px;

            }

            

            .c_notification_title button{

                float: right;

                padding: 0px 25px;

                cursor: pointer;

                background: 0 0;

                border: 0;

                -webkit-appearance: none;

            }

            

            .c_notification_title button span{

              font-size: 48px;

              line-height: 48px;

            }

            .red{

                background: #d34a4a!important;

            }

            

            .red p,.red span{

                color: #fff!important;

            }

            

            

            .green{

                background: #4ad389!important;

            }

            

            .register-page .form span{

                padding:10px 0px;

            }

.batch-info-block.sold::after {

    content: "";

    aspect-ratio: 1;

    width: 4rem;

    height: 4rem;

    display: block;

    background-image: url(./images/sold.png);

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;

}         

.road-svg path.center{
  stroke-dasharray: 12.02 12.02;
  stroke-dashoffset: 0;
  animation: dashMove .5s linear infinite;
}

.thank-you #banner .left svg {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    /* height: 100%; */
    z-index: -1;
    width: 100%;
    height: auto;
}


#center-top{
  stroke-dasharray: 11.91 11.91;
  stroke-dashoffset: 0;
  animation: dashMove1 .75s linear infinite;
}

#center-mid{
  stroke-dasharray: 11.91 11.91;
  stroke-dashoffset: 0;
  animation: dashMove1 .75s linear infinite;
}

.mid-road{
  position: relative;
}
.mid-road svg{
  position: absolute;
    width: 120%;
    left: -10%;
}

.bottom-road {
    position: relative;
    width: 100%;
}
.bottom-road svg {
    position: absolute;
    width: 106%;
    left: -3%;
    top: -10vw;
    z-index: -1;
}


#center-bottom{
  stroke-dasharray: 11.91 11.91;
  stroke-dashoffset: 0;
  animation: dashMove2 .75s linear infinite;
}

/* @keyframes drawPath {
  0% {
    stroke-dasharray: 0, var(--path-length);
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: var(--path-length), 0;
    stroke-dashoffset: 0;
  }
}

#centerpath-top {
  
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
  animation: drawPath 5s linear forwards;
} */
@keyframes dashMove1 {
  to {
    stroke-dashoffset: -24;
  }
}

@keyframes dashMove2 {
  to {
    stroke-dashoffset: 24;
  }
}


@keyframes dashMove {
  to {
    stroke-dashoffset: 24.04;
  }
}

.road-svg .adj{
  height: 25vh;
    margin-top: -25vh;
    background: linear-gradient(180deg, #c1272d00, #c1272dff);
    z-index: 1;
    position: relative;
    left:-4px;
}
/* .road-svg path.left{

  --dynamic-dasharray: var(--default-left);

  stroke-dasharray: var(--default-left); 

  stroke-dashoffset: var(--dynamic-dasharray);
  transition: all 1s linear;

}



.road-svg path.right{

  --dynamic-dasharray: var(--default-right);

  stroke-dasharray: var(--default-right);

  stroke-dashoffset: var(--dynamic-dasharray);
  transition: all 1s linear;

} */

/* .road-svg path.center{

  --dynamic-dasharray: var(--default-center);

  stroke-dasharray: var(--default-center);

  stroke-dashoffset: var(--dynamic-dasharray);
  transition: all .5s linear;

} */
#registration-form .batch-block label:has( > input[type="radio"]:checked ){
  background: var(--red);
  color: #FFF;
}
#registration-form .batch-block label {

    font-size: clamp(1rem, calc(1.04vw + var(--common-value)), 1.25rem);
    font-weight: 800;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0rem;
    margin: 0px;
    padding: .75rem;
    background: #eee;
    border-radius: .5rem;
        display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;

}
#registration-form .batch-block label span{
font-size: 1rem;
    font-weight: 400;
    text-transform: none;
}

form label{

    text-transform: capitalize;

    font-weight: 400;

    font-size: clamp(1rem, calc(1.04vw + var(--common-value)), 1.25rem);

    line-height: 1.5;

    color: #000;

    margin-bottom: .5rem !important;

    display: block;



}

.payment-group > *{

  flex : 1 1 50%

}



form label.required:after {

    content: '*';

    color: red;

}

.visually-hidden{

  opacity: 0;

}

.payment-block .custom-radio{

      display: flex;

    align-items: center;

}

.payment-block    .radio-mark{

  align-items: center;

  top:unset;

}

.paymnent_info-highlighter{

  font-size:clamp(1.25rem, calc(1.6vw + var(--common-value)),2rem);

  color:var(--red);

  text-transform: uppercase;

  font-weight: 800;

  margin: 2rem 0 ;

}


.modal {display: flex; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); width: 100%; justify-content: center; align-items: center; position: fixed; top: 0; left: 0;transition: 0.3s all ease-in-out; transform: translateX(-320vh); }
.modal-content {background-color: #fefefe; margin: auto; padding: 0px; border: 1px solid #888; width: 80%; text-align: center; position: relative; font-family: "avenir-next-lt-pro",sans-serif;}

.modal-content span {
    width: 10%;
    font-size: 5vw;
    color: #dc372f;
    position: absolute;
    right: 0;
    color:#FFF;
}
.tb-head {
    padding: 20px 0px;
    padding-top: 0px;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
        color: #FFF;
    font-weight: 800;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
    border: 2px solid #dad9d933 !important;
}
.size-chart th {
    padding: 10px;
    background: var(--red);
    color:#FFF;
    display: table-cell;
    vertical-align: middle;
}
.size-chart td {
    padding: 10px;
    color:#FFF;
    text-wrap-mode: nowrap;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.modal.show {
    transform: translateX(0vh);
}
.close:hover,
.close:focus {
  color: var(--red);
  text-decoration: none;
  cursor: pointer;
}
.gap0-5{

  gap:.5rem
}

.hint{
  color: #999;
    font-size: .75rem;
    position: relative;
    display: block;
}
.note{
  font-size: clamp(1rem, calc(1.04vw + var(--common-value)),1.25rem);
  color:var(--red);
  text-decoration: underline;
  font-weight: 700;
  margin-bottom: 1rem;
}
.banner-svg path{
  fill: #fff !important
}

form p ,form span{
    line-height: 1.5;

}

#registration-info .batch-info-tabs-btns .tab-button-item:not(.active) svg{
  display: none;
}

.upload-block input{
  border:none  !important;
}

#gender-block label{
      display: flex;
    justify-content: center;
    align-items: center;
        gap: .5rem;
}
#gender-block label input[type="radio"] {
    height: 1.25rem;
    width: 1.25rem;
    border: 1px solid #000;
    border-radius: 50%;
    accent-color: var(--red);
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 0;
}
#gender-block label input[type="radio"]:checked::after {
    content: "";
    width: .75rem;
    height: .75rem;
    background-color: var(--red);
    display: block;
    border-radius: 50%;
}


.thank-you .img-block{
      display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.thank-you .img-block p{
  text-align: center;
    color: #FFF;
    line-height: 1.5;
    margin-top: 1rem;
}


.terms-block span{
  line-height: 1;
}


@media screen and (max-width: 1760px) {



.road-svg {



    width: 52.5%;



    position: absolute;



    top: 0;



    right: 0;



}



}



@media screen and (max-width: 1600px) {



.road-svg {



    width: 55%;



    position: absolute;



    top: 0;



    right: 0;



}



}



@media screen and (max-width: 1500px) {



.road-svg {



    width: 57.5%;



    position: absolute;



    top: 0;



    right: 0;



}



}



@media screen and (max-width: 1450px) {



.road-svg {



    width: 58%;



    position: absolute;



    top: 0;



    right: 0;



}



#registration-fees h2 {



    font-size: clamp(1.5rem, calc(3.75vw +  var(--common-value)), 4.625rem);



}



}







@media screen and (max-width: 1390px) {



.road-svg {



    width: 55%;



    position: absolute;



    top: 0;



    right: 0;



}



#registration-fees h2 {



    font-size: clamp(1.5rem, calc(3.5vw +  var(--common-value)), 4.625rem);



}



}



@media screen and (max-width: 1366px) {



#banner .left svg{



  height: auto;



  width: 100%;



 }



}

@media only screen and (min-device-width:800px) and (max-device-width:1200px) and (orientation:portrait) {
 .section-block{
  min-height: unset !important;
  height: auto !important;
 }
 .info-block>.row-flex{
  flex-direction: column;
 }
  .info-block>.row-flex ul{
    width: 100%;
  }
  #registration-fees .terms-block {
    flex: 0 0 50%;
  }
  .batch-info-tabs .tab-buttons{
    flex-direction: row;
  }
  .batch-info-tabs .tab-content{
    flex-direction: column;
  }
  .batch-info-tabs .tab-content .tab-content{
    /* padding: 0; */
    flex-direction: row;
  }
  #banner .left .logo {
    max-width: 125px !important;
     margin: 6vw 0 0 6vw;
  }
  .map .row-flex{
    flex-direction: column;
  }
}
@media screen and (max-width: 1280px) {
  #banner .left .logo {
    max-width: 140px;
  }
  .map .col-flex{
    padding-right: 0 !important;
  }
  .batch1-info-tabs, .batch2-info-tabs{
    background-color: #fff1;
    backdrop-filter: blur(7px);
    border-radius: 2rem;
  }
}
@media screen and (max-width: 1024px) {
  .road-svg{
    display: none;
  }

}

@media (min-width: 781px) and (max-width: 1000px) {
  form label.label:not(.visually-hidden){
    display: none;
  }
  form label.label.visually-hidden{
    opacity: 1;
    font-weight: 400;
  }
  .gender-block{
    height: 62px;
    align-items: center;
    
  }
  .gender-block .custom-radio{
    margin-bottom: 0 !important;
  }
}




@media screen and (max-width: 800px) {
.map img{
  max-width: 90vw;
}
.center-image{
  padding: 2rem 0;
}


.batch1-info-tabs, .batch2-info-tabs{
    background-color: unset;
    backdrop-filter: unset;
    border-radius: 0;
  }
  .mid-road{
    display: none  !important;
  }


#registration-fees .info-block>div:first-child ul {
  width: 100%;
}

#registration-fees .info-block>div:first-child ul li span::before{
  left: -1.5rem;
}


#registration-form .title-block{
    width: 100% !important;
    text-align: start;
    display: block;
}



 .row-flex{
   flex-direction: column;
 }


svg.top{
    width: 100%;
    position: absolute;
    left: 0;
    top: -11vh;
    z-index: -1;
}
 
.batch-block{
  flex-direction: row;
}

 .road-svg{



  display: none;



 }



 #banner .left svg{



  height: auto;



  width: 100%;



 }


 .batch-info-tabs .tab-content{



  flex-direction: column;
   padding: 5% 0;



 }

 #banner {

  flex-direction: column;
}

.thankyou-img {
    max-width: 50vw;
    position: relative;
    margin-bottom: 3rem;
}

  .thank-you  #banner .left {
        aspect-ratio: 1077 / 902;
        flex-direction: column;
    }


  .thank-you   h2.thank-you{
      text-align: center;
    }


  .batch-info-tabs .tab-buttons{



    flex-direction: row;



    width: 100%;



    justify-content: space-between;



    gap:unset;



  }



  img{



    max-width: 100%;



    height: auto;



  }



  .form-tab{



    grid-template-columns: 1fr;



    gap: 1rem;



  }



  #banner .goto-register{



        position: fixed;



    bottom: 0;



    width: 100%;



    left: 0;



            background: var(--black);



        margin: 0;



        z-index: 99;



        padding: 1rem;



  }



  #banner .goto-register svg{



    width: 1.5rem;



    height: 1.5rem;



  }



  #banner .right img.banner-img {



    max-height: 75vw;



    width: auto;

    height: auto;



}



#banner{



  height: unset;



}



#banner .left{



  aspect-ratio: 1077 / 902;



}



#banner .right {



  margin-top:-25vw;



}



#banner .left .logo {



    max-width: 100px;



}



#banner .right .batch-info{



  margin-top: 2rem;



}



#registration-info .tab-button-item{



  margin: 0;



}


.only-mobile{



  display: block;



}



.only-desktop{



  display: none;



}


#registration-fees,#registration-form{
  padding: 6% 2.5%;
}



#registration-info #batch-info-tabs .tab-button-item{
  width: 3.125rem;
}

#registration-info #batch-info-tabs .tab-button-item:not(.active){



 font-size: .825rem;
    



}



#registration-fees .terms-block{



  padding: 0;



}



#registration-form .tab-button-item{



  margin-right: 0;



}



#registration-form .batch-block{



      width: 100%;



}



#registration-form  .tab-button-item {



    background-color: var(--red);



          color: #FFF;   



}



.row-flex:has(.gender-block){



          align-items: start;







}



.gender-block{



  flex-direction: row;



}






.form-tab.active{



  display: grid;



}


/* 
.row-flex:has( .next-button),.row-flex:has( .back-button){



  display: none;



} */



.terms-block {

display: inline;
line-height: 1.5;


}



.terms-info p{



  margin-top: 1rem;



}



#registration-info .goto-register,#registration-fees .goto-register{



  display: none;



}



.batch-info-tabs .tab-content:not(.active){



  display: none;



}



.batch-info-tabs-btns{



  width: 100%;
  margin-top:2rem;



} 




.batch-info-tabs-btns .tab-button-item{



  flex: 1 1 50%;



}




footer{



  text-align: center;



  line-height: 1.5;



}


    .thank-you footer {
        padding-bottom: 1.5rem;
    }


footer{



  padding-bottom: 80px;



}

.registration-fees-img {

    max-width: 70vw;

}
.modal-content{
  width: 90%;
}



.batch-info-tabs h3{
  position: relative;
  margin: 1rem 0 0 0 !important;
}
}







input:not([type="checkbox"]),



textarea {



  -webkit-appearance: none;



  appearance: none;





}



 



input:not([type="checkbox"]):-webkit-autofill {



  -webkit-box-shadow: 0 0 0 1000px white inset !important;



  box-shadow: 0 0 0 1000px white inset !important;



  -webkit-text-fill-color: #000 !important;



}




input:not([type="checkbox"]),input:not([type="radio"]),



textarea {



  width: 100%;



  box-sizing: border-box;



}



 select,



input[type="date"] {



  width: 100%;



  box-sizing: border-box;



  font-size: 16px; 



  background-color: #fff;



  appearance: none;



  -webkit-appearance: none;



  -moz-appearance: none;



}
.agenta{
  color: #FFF;
}

@media screen and (max-width: 450px) {
  #registration-form .batch-block label span {
    font-size: 11px;
  }
}