@font-face {
    font-family: 'tt_commons_boldbold';
    src: url('../fonts/ttcommons-bold-webfont.woff2') format('woff2'),
         url('../fonts/ttcommons-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'tt_commonsregular';
    src: url('../fonts/ttcommons-regular-webfont.woff2') format('woff2'),
         url('../fonts/ttcommons-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'tt_commonsdemibold';
    src: url('../fonts/ttcommons-demibold-webfont.woff2') format('woff2'),
         url('../fonts/ttcommons-demibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'tt_commonsmedium';
    src: url('../fonts/tt_commons_medium-webfont.woff2') format('woff2'),
         url('../fonts/tt_commons_medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.tt-medium{font-family: 'tt_commonsmedium';}
.tt-bold{font-family: 'tt_commonsdemibold';}
.tt-reegular{font-family: 'tt_commonsregular';}


.banner{background: url(../images/banner.jpg) left center no-repeat #000000; background-size: cover;}
.header_inner{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end;}
.header_inner .right{width:308px;}
.header_inner .left{width:calc(100% - 400px); display: flex; flex-direction: column; gap:20px;}
.header_inner .left h1{font-size: 96px; font-family: 'tt_commons_boldbold'; line-height: 91px; color: #ffffff; max-width: 800px;}
.header_inner .left p{font-size: 24px; font-family: 'tt_commonsmedium'; line-height: 33px; color: #ffffff; max-width: 580px;}

.tabs {display: flex; flex-direction: column; gap:30px; align-items: center; margin-top:50px;}
.tablist {display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; width: 100%; max-width: 500px;}
.tablist .tab { border:1px dashed #BEBEBE; padding: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; border-radius: 60px; cursor: pointer; flex: 1; transition: all ease 0.2s; }
.tablist .tab:hover{border-color: #666666;}
.tablist .tab span{transition: all ease 0.2s;}

.tablist .tab[aria-selected="true"]{background: #000000; border-color: #000000;}
.tablist .tab[aria-selected="true"] span{color: #ffffff;}

.tablist .tab svg{width: 50px; height: 50px;}
.tablist .tab span{font-size: 25px;}

    .tabpanel { display:none; }
    .tabpanel.active { display:block; }



    .tab_data{border:1px dashed #BEBEBE; border-radius: 25px; box-shadow: 0 3px 26px rgba(0,0,0,0.08); padding: 50px; width: 100%;}
    .title_area{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
.title_area h3{color: #7B7B7B; font-size: 32px;}
    .title_area .btn{background: #000000; font-size: 20px; line-height: 24px; color: #ffffff; padding: 15px 30px; border-radius: 50px; transition: all ease 0.2s;}
    .title_area .btn:hover{background: #333333;}

    .content_area{margin: 30px 0;}
    .content_area ol{list-style-type:decimal; margin: 0 0 0 20px; padding: 0; font-size: 22px; display: flex; flex-direction: column; gap:15px; color: #333333;}
    .content_area ol a{color: #000000; }
    .content_area ol a:hover{text-decoration: underline;}

    .footer_area form{display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 20px; }
    .footer_area form .form_fields{display: flex; flex-wrap: wrap; width:calc(100% - 90px); margin: 0 -5px;}
     .footer_area form .form_fields .sub{padding: 0 5px; width: 33.33%;}


      .footer_area form .form_fields .sub .form_control{position: relative;}
     .footer_area form .form_fields .sub input[type="text"],
     .footer_area form .form_fields .sub input[type="file"]
     {height:60px; border:1px dashed #BEBEBE; border-radius: 8px; width:100%; padding: 0 20px; outline: none; transition: all ease 0.2s; cursor: pointer;}
.footer_area form .form_fields .sub input[type="file"]{    color: #ffffff;}

#file-name{width: calc(100% - 30px);  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
     footer_area form .form_fields .sub input[type="text"]::placeholder{color:#B2B2B2;}

     .footer_area form .form_fields .sub input[type="text"]:hover,
      .footer_area form .form_fields .sub input[type="file"]:hover
     {border-color: #666666;}

     label[for="file-upload"]{border-radius: 8px;
    position: absolute;
    left: 5px;
    top: 5px;
    right: auto;
    height: 50px;
    background: #000000;
    display: flex;
    align-items: center;
    padding: 0 10px;
    cursor: pointer;
    color: #ffffff;}

#file-info{display: flex;
    align-items: center;
    margin-top: 0;
    gap: 10px;
    color: #333333;
    font-family: 'tt_commonsmedium';
    position: absolute;
    left: 104px;
    top: 5px;
    background: #ffffff;
    height: 48px;
    width: calc(100% - 106px);
    padding: 0 10px;}

    .footer_area form button[type="submit"]{width:80px; height: 60px; border-radius: 8px; border:1px dashed #BEBEBE; background: #FAF452; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all ease 0.2s;}

    .footer_area form button[type="submit"]:hover{background: #111111; border-color: #111111;}
    .footer_area form button[type="submit"]:hover svg{fill:#ffffff}



    .footer_area p{font-size: 22px; color: #333333; text-align: center;}
    .footer_area p a{color: #000000; font-family: 'tt_commonsdemibold';}
    .footer_area p a:hover{text-decoration: underline;}





@media all and (max-width:1199px){

  .header_inner .right { width: 250px;}  
.header_inner .left { width: calc(100% - 300px);}
.header_inner .left h1 { font-size: 75px; line-height: 80px;  max-width: 650px;}
}


    @media all and (max-width:991px){


.header_inner .right {  width: 200px; }
.header_inner .left {width: calc(100% - 250px); }
.header_inner .left h1 {    font-size: 53px;    line-height: 60px;  max-width: 460px;  }
    .header_inner .left p {  font-size: 20px;  line-height: 30px;  max-width: 479px;}


        .tablist{max-width: 430px;}
        .tab_data{padding: 30px;}
        .content_area ol{font-size: 20px;}
        .tablist .tab{padding: 15px;}
        .tablist .tab svg {width: 42px; height: 42px;}
.tablist .tab span { font-size: 22px;}

label[for="file-upload"]{         height: 42px;
        font-size: 14px;
        top: 6px;}
.footer_area form .form_fields .sub input[type="text"], .footer_area form .form_fields .sub input[type="file"]{font-size: 14px; height: 50px;}
.footer_area p{font-size: 18px;}
}


 @media all and (max-width:767px){
.banner{background-size:800px; background-position: left top; position: relative;}
    .banner:before{background: #000000;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.50) 100%);position: absolute; top:0; right:0; bottom: 0; left: 0; content: '';}
    .header_inner{flex-direction: column-reverse; gap:20px; align-items: flex-start; position: relative;}
        .header_inner .left { width: 100%; }
    .header_inner .right {  width: 120px;  }
        .header_inner .left h1 {font-size: 39px;  line-height: 40px;   max-width: 340px; }
        .header_inner .left p {  font-size: 18px;   line-height: 23px;   max-width: 340px;  }

.tab_data { padding: 20px; }
.tablist{gap:10px}
.tablist .tab svg { width: 36px;   height: 36px; }
.tablist .tab { padding: 10px;  gap: 10px; }
.tablist .tab span { font-size: 18px;    }
.content_area ol { font-size: 17px; line-height: 23px; gap: 10px; margin-left: 15px;}
.footer_area form{flex-direction: column; align-items: center; gap:20px;}
.footer_area form .form_fields {flex-direction: column;  gap: 10px 0; width:100%;}
.footer_area form .form_fields .sub { width: 100%;}
.footer_area form button[type="submit"] { width: 150px;  height: 50px;}
.footer_area form .form_fields .sub input[type="text"], .footer_area form .form_fields .sub input[type="file"] { font-size: 16px; height: 54px;}
label[for="file-upload"]{font-size: 16px;}
.title_area h3 { font-size: 24px;}
.title_area .btn { font-size: 15px; line-height: 16px;  padding: 12px 21px;}
.tabs{margin-top:30px;}
 }