@font-face {

    font-family: 'HWPanoTrialBold';

    src: url('fonts/HWPanoTrialBold.eot');

    src: url('fonts/HWPanoTrialBold.eot') format('embedded-opentype'),

         url('fonts/HWPanoTrialBold.woff2') format('woff2'),

         url('fonts/HWPanoTrialBold.woff') format('woff'),

         url('fonts/HWPanoTrialBold.ttf') format('truetype'),

         url('fonts/HWPanoTrialBold.svg#HWPanoTrialBold') format('svg');

}

@font-face {

    font-family: 'replicamono';

    src: url('fonts/replicamono.eot');

    src: url('fonts/replicamono.eot') format('embedded-opentype'),

         url('fonts/replicamono.woff2') format('woff2'),

         url('fonts/replicamono.woff') format('woff'),

         url('fonts/replicamono.ttf') format('truetype'),

         url('fonts/replicamono.svg#replicamono') format('svg');

}


@font-face {
    font-family: 'proximanovaregular';
    src: url('fonts/proximanovaregular.eot');
    src: url('fonts/proximanovaregular.eot') format('embedded-opentype'),
         url('fonts/proximanovaregular.woff2') format('woff2'),
         url('fonts/proximanovaregular.woff') format('woff'),
         url('fonts/proximanovaregular.ttf') format('truetype'),
         url('fonts/proximanovaregular.svg#proximanovaregular') format('svg');
}

*{ font-family: 'proximanovaregular'!important;}


body{background: url(images/main-bg.png)no-repeat top center; background-size: cover;font-family: 'replicamono';}

.container{ max-width: 1570px; margin: 0 auto;}

.form-wt-box{background: rgba(255,255,255,0.90); padding: 52px 123px 45px;}

p{ padding: 0;margin: 0 0 15px;}

p:last-child{margin: 0;}

.orange-txt{color: #ff4b00;}

.tabs {

      margin: auto;
      margin-left: 30px;

    }



    /* Hide radio buttons */

    input[type="radio"].hide {

      display: none;

    }



    /* Tab labels */
    .tab-label {

      font-family: 'HWPanoTrialBold';

      font-size: 24px;

      font-weight: 700;

      color: #000;

    display: inline-block;

    padding: 17px 68px;

    margin-right: -4px;

    cursor: pointer;

    background: none;

    border: 1px solid #000000;

    border-bottom: none;

    border-radius: 0;

    transition: background 0.3s;

text-transform: uppercase;

clip-path: polygon(1% 5%, 85% 4.5%, 98% 96%, 15% 95%);

-webkit-clip-path: polygon(1% 5%, 85% 4.5%, 98% 96%, 15% 95%);

border: 2px solid ;

box-sizing: border-box;

cursor: pointer; position: relative;

width: 24%; text-align: center;

background: #000;


  }

.tab-label::before {

content: "";

position: absolute;

top: 0; left: 0; right: 0; bottom: 0;

clip-path: polygon(1% 5%, 85% 4.5%, 98% 96%, 15% 95%);

-webkit-clip-path: polygon(1% 5%, 85% 4.5%, 98% 96%, 15% 95%);

border: 2px solid #000; /* Your border color and thickness */

pointer-events: none; /* so it doesn’t block clicks */

z-index: -1;

box-sizing: border-box;

background: rgba(255, 255, 255, 0.90);

}
  

label.tab-label.active::before {
  background-color: #ff4b00;
}

.tab-content.tab-reg {
  padding-bottom: 0px;
}





    .tab-label:hover {

      background: #ff4b00;

    }



    /* Active tab styling */

    input[type="radio"]:checked + .tab-label {

      background: black; color: #fff !important;

    }

    input[type="radio"]:checked + .tab-label::before {
      background: #ff4b00;
    }



    /* Content sections */

    .tab-content {

      padding: 90px 0;

      display: none;

    }



    /* Show selected tab content */

    #tab1:checked ~ #content1,

    #tab2:checked ~ #content2,

    #tab3:checked ~ #content3,

    #tab4:checked ~ #content4 {

      display: block;

    }

    .flex-box{ display: flex; gap:48px;}

    .coaches-responsible {

    background: url(images/step1-txt-bg.svg) no-repeat;

    font-size: 16px;

    line-height: 16px;

    color: #000;

    max-width: 360px;

    padding: 53px 33px 53px 50px;

    background-size: contain;

}

    .step1-form-box{ width: 50%;}

    .step1-btn-box .col-1{width: 10%;}

    .step1-btn-box .col-3{width: 40%;}

    .form-next-btn{font-family: 'HWPanoTrialBold';font-size: 16px;

    font-weight: 700;

    color: #fff;

    display: inline-block;

    padding: 22px 68px;

    margin-right: -4px;

    cursor: pointer;

    background: #000;

    border: 1px solid #000000;

    border-bottom: none;

    border-radius: 0;

    transition: background 0.3s;

    text-transform: uppercase;

    clip-path: polygon(0 0, 85% 0, 100% 100%, 15% 100%);

    -webkit-clip-path: polygon(0 0, 85% 0, 100% 100%, 15% 100%);

    border: none;

    box-sizing: border-box;

    cursor: pointer;

    position: relative;

    display: block;

    width: 100%;

    max-width: 325px;}

    .form-next-btn:hover{background: #000;}

    .form-next-btn.gray{background: #C9C9C9;}

     .form-next-btn::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    clip-path: polygon(2% 5%, 84.5% 4.5%, 98.5% 96%, 15.5% 96%) ;


    border: 1px solid #000;

    pointer-events: none;

    z-index: -1;

    box-sizing: border-box;

    background: #ff4b00;


}

.form-btn-box{ margin-top: 51px;}

.step1-form-inner{margin: 68px 0 0 40px;}

.step1-form-inner label{ margin-bottom: 19px; display: block; line-height: 20px;}

.bot-orange-txt{margin-top: 231px; text-align: center; text-decoration: underline; color: #ff4b00; font-size: 16px; font-weight: 400;}

input[type="radio"] {

  accent-color: #ff4b00;

}

input[type="checkbox"] {

  accent-color: #ff4b00;

}



.custom-radio {

    position: relative;

    padding-left: 58px;

    cursor: pointer;

    font-family: sans-serif;

    user-select: none;

  }



  .custom-radio input[type="radio"] {

    position: absolute;

    opacity: 0;

    cursor: pointer;

  }



  .custom-radio .checkmark {

    position: absolute;

    left: 0;

    top: 0;

    height: 16px;

    width: 16px;

    background-color: white;

    border: 2px solid #ff4b00;

    border-radius: 50%;

  }



  .custom-radio input:checked ~ .checkmark::after {

    content: "";

    position: absolute;

    top: 3px;

    left: 3px;

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: #ff4b00;

  }

  .form-flex-box{ display: flex; gap: 15px;}

   .form-flex-box .col-1,.form-flex-box .col-2,.form-flex-box .col-3{width: 100%;}

  .step2-form-inner label{ font-size: 14px; color: #000; font-weight: 400; line-height: 30px;}

   .step2-form-inner input,.step2-form-inner select{     display: block;

    border: 1px solid #BDBDBC;

    border-radius: 6px;

    padding: 11.5px 10px;

    width: 94%;}



    .step2-form-inner select{ width: 100%;padding: 10.5px 10px;}

    .step2-form-inner input[type="date"]{padding: 10.5px 10px;}

   .step2-form-box.col-2{ width: 100%;}

   .last-code-box .col-3.form-flex-box{ width: 50%;}

   .last-code-box .col-1{ width: 33%;}

.form-next-btn.sm {

    font-size: 14px;

    padding: 15px 25px;

    width: 214px;

}

.numb-box{padding-top: 62px;}

.step3-section h4{ font-size: 20px; line-height: 40px; color: #FA5000;padding: 0; margin: 0 0 8px;}

.step2-form-inner .radio-btns-row  label{line-height: 20px;    padding-left: 33px; margin-top: 9px;}

.w-100{ width: 100%;}

.sm-numb-box{margin-top: 11px;}

.athlete-txt-heading{font-size: 20px; color: #FA5000;padding: 0;margin:0px}

.flex-box.sm-gap{gap: 10px;}

.mt-21{margin-top: 21px!important;}

.mt-40{margin-top: 40px!important;}

.mt-60{margin-top: 60px!important;}

.mt-75{margin-top: 75px!important;}

.upload-box{

    border: 2px dashed #FA5000;

    padding: 17px 85px;

    border-radius: 10px;

    margin-top: 50px;

    font-size: 20px;

    font-weight: 400;

    text-align: center;
    background: #fff;

}

.upload-box p{margin: 15px 0;}

.txt-undeline{text-decoration: underline;}

.orange-txt.txt-undeline svg{ vertical-align: middle; margin-left: 25px; }



    /* Popup overlay */

    .popup-overlay {

      position: fixed;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      background: rgba(0, 0, 0, 0.75);

      display: none;

      justify-content: center;

      align-items: center;

      z-index: 999;

    }



    /* Popup content */

    .popup-content {

      background: url(images/popup-bg.png)no-repeat;

      padding: 73px 33px 69px 62px;

      width: 433px;

      max-width: 100%;

      position: relative; font-size: 16px; line-height: 16px; font-weight: 400; color: #000;

    }

    .popup-btn .form-next-btn{ font-size: 12px;padding: 10px 26px;}

    .popup-btn.flex-box {gap: 0; margin-top: 32px;}

    /* Close button */

    .close-popup {

      position: absolute;

      top: 0;

      right: 0;

      font-size: 0;

      cursor: pointer;

    }



/* Validation Error Messages */

.error-message {

    display: block;

    color: #FA5000;

    font-size: 12px;

    margin-top: 5px;

    min-height: 18px;

    font-weight: 400;

}



input.error, select.error {

    border-color: #FA5000 !important;

    background-color: #fff5f5;

}



input.success, select.success {

    border-color: #28a745 !important;

}



.form-next-btn:disabled {

    opacity: 0.5;

    cursor: not-allowed;

    background: #C9C9C9 !important;

}
@media (max-width:1200px){
  .tab-label {
    font-size: 15px;
    padding: 10px 30px;
}
}
@media (max-width:767px){
.form-wt-box {
    padding: 35px 20px;
}
.tabs {
    margin-left: 0;
    margin-top:20px;
}
.tab-label { width: 100%;}
.tab-content {
    padding: 30px 0;
}
.flex-box {
    display: block;
}
.form-flex-box {display: block;}
.step1-form-box {
    width: 100%;
}
.form-next-btn{ margin-bottom: 20px;}
div.img-branding {
    float: none;
    top: 30px;
    right: 0;
    left: 0;
    display: block;
    margin: 0 auto;
    text-align: center;
}
.bot-orange-txt {margin-top: 70px;}
.coaches-responsible {
    font-size: 16px;
    padding: 29px 26px 10px 29px;
    height: 314px;
    overflow: scroll;
    background: url(images/mobile-reg.png) no-repeat;
    background-size: 100% 100%;

}
}