@font-face {
    font-family: 'EuropeExtendedC';
    src: url('font/europeextendedc_bold.otf');
    font-weight: 700;
    font-style: normal;
}

html{
    scroll-behavior: smooth;
}

:root{
    --color-dark-blue: #28235B;
    --color-dark-blue-transparent: #28245c98;
}

body{
    font-family: "Montserrat";
    margin: 0px;
    font-weight: 500;
}

.row.space-between{
    justify-content: space-between;
    width: 100%;
}

.dark-background{
    background-image: url(/public-drone/img/background.svg);
    background-position: center top;
    background-repeat: repeat;
    background-size: 100% auto;
    color: white;
}
.white-background{
    background-color: white;
    color: var(--color-dark-blue-transparent);
}
@media screen and (max-width:950px) {
    *:not(body).dark-background{
        background-image: url(/public-drone/img/background_small.svg);
        background-size: cover;
    }
}

.row{
    box-sizing: border-box;
}
.row > *{
    box-sizing: border-box;
}

a.default{
    color: inherit;
}
a.underline{
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 2px solid;
}
a.underline-2{
    text-decoration: none;
    border-bottom: 2px solid;
}

.min-height{
    min-height: calc(100vh - 134px);
    box-sizing: border-box;
}

.default-margin{
    margin-top: 50px;
    margin-bottom: 50px;
}
.default-margin-bottom{
    margin-bottom: 50px;
}
.default-margin-top{
    margin-top: 50px;
}

.double-margin{
    margin-top: 100px;
    margin-bottom: 100px;
}
.double-margin-bottom{
    margin-bottom: 100px;
}
.double-margin-top{
    margin-top: 100px;
}

.half-margin{
    margin-top: 25px;
    margin-bottom: 25px;
}
.half-margin-bottom{
    margin-bottom: 25px;
}
.half-margin-top{
    margin-top: 25px;
}

.default-padding{
    padding-top: 50px;
    padding-bottom: 50px;
}
.default-padding-bottom{
    padding-bottom: 50px;
}
.default-padding-top{
    padding-top: 50px;
}

.default-padding{
    padding: 30px;
}
.large-padding{
    padding: 50px;
}

.fs-40{
    font-size: 40px;
}
.fs-30{
    font-size: 30px;
}
.fs-25{
    font-size: 25px;
}
.fs-20{
    font-size: 20px;
}

@media screen and (max-width: 1000px) {
    .fs-30{
        font-size: 20px;
    }
    .fs-25{
        font-size: 15px;
    }
    .default-padding-top{
        padding-top: 15px;
    }
    .half-margin-top{
        margin-top: 10px;
    }
    .half-margin-bottom{
        margin-bottom: 10px;
    }
    .default-padding{
        padding: 15px;
    }
    .default-margin-top{
        margin-top: 25px;
    }
    .default-margin-bottom{
        margin-bottom: 25px;
    }
    .default-margin{
        margin-top: 25px;
        margin-bottom: 25px;
    }

    .double-margin{
        margin-top: 50px;
        margin-bottom: 50px;
    }
    .double-margin-bottom{
        margin-bottom: 50px;
    }
    .double-margin-top{
        margin-top: 50px;
    }
}

img.center{
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.align-center{
    text-align: center;
}

.bold{
    font-weight: bold;
}

.border{
    border: 3px solid var(--color-dark-blue);
    border-radius: 20px;
}

.dark-background h1,.dark-background h2,.dark-background h3,.dark-background h4,.dark-background h5,.dark-background h6{
    color: white;
}
.white-background h1,.white-background h2,.white-background h3,.white-background h4,.white-background h5,.white-background h6{
    color: var(--color-dark-blue);
}

.text-dark-blue{
    color: var(--color-dark-blue)!important;
}
.text-light-blue{
    color: var(--color-dark-blue-transparent)!important;
}

.text-white{
    color: white!important;
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-family: "EuropeExtendedC";
}
.europe{
    font-family: "EuropeExtendedC";
}
p{
    margin: 0px;
}
.container{
    width: 1312px;
    box-sizing: border-box;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (max-width: 1400px) {
    .container{
        padding: 30px;
    }
}
@media screen and (max-width: 1000px) {
    .container{
        padding: 12px;
    }
}
a{
    color: inherit;
    text-decoration: none;
}
h1{
    font-size: 50px;
}
h2{
    font-size: 40px;
    font-family: "Montserrat";
}
h3{
    font-size: 30px;
    font-family: "Montserrat";
}
@media screen and (max-width: 1200px) {
    h1{
        font-size: 40px;
    }
    h2{
        font-size: 30px;
        font-family: "Montserrat";
    }
    h3{
        font-size: 20px;
        font-family: "Montserrat";
    }
}
@media screen and (max-width: 900px) {
    h1{
        font-size: 20px;
    }
    h2{
        font-size: 20px;
        font-family: "Montserrat";
    }
    h3{
        font-size: 15px;
        font-family: "Montserrat";
    }
}
.letter-spacing-10{
    letter-spacing: 0.1em;
}
.uppercase{
    text-transform: uppercase;
}

.top-rounded{
    border-radius: 20px 20px 0px 0px;
}
.rounded{
    border-radius: 20px;
}

@media screen and (max-width: 1000px) {
    .rounded{
        border-radius: 20px;
    }
}

.col,.col-auto{max-width:100%}.row{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;}.col,.col-1,.col-10,.col-11,.col-12,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-auto,.col-lg,.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-auto,.col-md,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-auto,.col-sm,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-auto,.col-xl,.col-xl-1,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-auto{position:relative;width:100%;padding-right:15px;padding-left:15px}.col{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1}.col-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto}.col-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}@media (min-width:576px){.col-sm{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-sm-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-sm-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-sm-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-sm-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-sm-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-sm-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-sm-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-sm-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-sm-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-sm-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-sm-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-sm-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-sm-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-sm-first{-ms-flex-order:-1;order:-1}.order-sm-last{-ms-flex-order:13;order:13}.order-sm-0{-ms-flex-order:0;order:0}.order-sm-1{-ms-flex-order:1;order:1}.order-sm-2{-ms-flex-order:2;order:2}.order-sm-3{-ms-flex-order:3;order:3}.order-sm-4{-ms-flex-order:4;order:4}.order-sm-5{-ms-flex-order:5;order:5}.order-sm-6{-ms-flex-order:6;order:6}.order-sm-7{-ms-flex-order:7;order:7}.order-sm-8{-ms-flex-order:8;order:8}.order-sm-9{-ms-flex-order:9;order:9}.order-sm-10{-ms-flex-order:10;order:10}.order-sm-11{-ms-flex-order:11;order:11}.order-sm-12{-ms-flex-order:12;order:12}.offset-sm-0{margin-left:0}.offset-sm-1{margin-left:8.333333%}.offset-sm-2{margin-left:16.666667%}.offset-sm-3{margin-left:25%}.offset-sm-4{margin-left:33.333333%}.offset-sm-5{margin-left:41.666667%}.offset-sm-6{margin-left:50%}.offset-sm-7{margin-left:58.333333%}.offset-sm-8{margin-left:66.666667%}.offset-sm-9{margin-left:75%}.offset-sm-10{margin-left:83.333333%}.offset-sm-11{margin-left:91.666667%}}@media (min-width:768px){.col-md{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-md-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-md-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-md-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-md-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-md-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-md-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-md-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-md-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-md-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-md-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-md-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-md-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-md-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}

@media (min-width:1200px){.col-xl{-ms-flex-preferred-size:0;flex-basis:0;-ms-flex-positive:1;flex-grow:1;max-width:100%}.col-xl-auto{-ms-flex:0 0 auto;flex:0 0 auto;width:auto;max-width:100%}.col-xl-1{-ms-flex:0 0 8.333333%;flex:0 0 8.333333%;max-width:8.333333%}.col-xl-2{-ms-flex:0 0 16.666667%;flex:0 0 16.666667%;max-width:16.666667%}.col-xl-3{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.col-xl-4{-ms-flex:0 0 33.333333%;flex:0 0 33.333333%;max-width:33.333333%}.col-xl-5{-ms-flex:0 0 41.666667%;flex:0 0 41.666667%;max-width:41.666667%}.col-xl-6{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.col-xl-7{-ms-flex:0 0 58.333333%;flex:0 0 58.333333%;max-width:58.333333%}.col-xl-8{-ms-flex:0 0 66.666667%;flex:0 0 66.666667%;max-width:66.666667%}.col-xl-9{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.col-xl-10{-ms-flex:0 0 83.333333%;flex:0 0 83.333333%;max-width:83.333333%}.col-xl-11{-ms-flex:0 0 91.666667%;flex:0 0 91.666667%;max-width:91.666667%}.col-xl-12{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}.order-xl-first{-ms-flex-order:-1;order:-1}.order-xl-last{-ms-flex-order:13;order:13}.order-xl-0{-ms-flex-order:0;order:0}.order-xl-1{-ms-flex-order:1;order:1}.order-xl-2{-ms-flex-order:2;order:2}.order-xl-3{-ms-flex-order:3;order:3}.order-xl-4{-ms-flex-order:4;order:4}.order-xl-5{-ms-flex-order:5;order:5}.order-xl-6{-ms-flex-order:6;order:6}.order-xl-7{-ms-flex-order:7;order:7}.order-xl-8{-ms-flex-order:8;order:8}.order-xl-9{-ms-flex-order:9;order:9}.order-xl-10{-ms-flex-order:10;order:10}.order-xl-11{-ms-flex-order:11;order:11}.order-xl-12{-ms-flex-order:12;order:12}.offset-xl-0{margin-left:0}.offset-xl-1{margin-left:8.333333%}.offset-xl-2{margin-left:16.666667%}.offset-xl-3{margin-left:25%}.offset-xl-4{margin-left:33.333333%}.offset-xl-5{margin-left:41.666667%}.offset-xl-6{margin-left:50%}.offset-xl-7{margin-left:58.333333%}.offset-xl-8{margin-left:66.666667%}.offset-xl-9{margin-left:75%}.offset-xl-10{margin-left:83.333333%}.offset-xl-11{margin-left:91.666667%}}

.button{
    outline: none;
    border: 3px solid white;
    border-radius: 1000px;
    padding: 10px 40px;
    font-weight: bold;
    display: block;
    width: fit-content;

    cursor: pointer;
    color: inherit;
    text-decoration: none;
    text-align: center;

    transition: 0.25s ease-in-out;
}
.button:hover,
.button.white:hover{
    background-color: white;
    color: var(--color-dark-blue);
}
.button.center{
    margin-left: auto;
    margin-right: auto;
}
.button.white{
    border: 3px solid white;
    color: white;
}
.button.large{
    font-size: 25px;
    padding: 35px 40px;
}
.button.blue{
    background-color: var(--color-dark-blue);
    color: white;
    border-color: var(--color-dark-blue);
}
.button.blue:hover{
    color: var(--color-dark-blue);
    background-color: white;
}

@media screen and (max-width: 1400px) {
    .button{
        padding: 10px 20px;
        /* font-size: 10px; */
    }
    .button.large{
        font-size: 25px;
        padding: 15px 20px;
    }
}
@media screen and (max-width: 1000px) {
    .button{
        padding: 10px 15px;
        font-size: 10px;
    }
    .button.fs-30{
        font-size: 15px;
        padding: 20px 15px;
    }
    body > *:nth-child(2){
        padding-top: 100px;
    }
}
@media screen and (max-width: 950px){
    .button.large{
        margin-left: auto;
        margin-right: auto;
    }
}
@media screen and (max-width: 700px) {
    .button.large{
        font-size: 20px;
        padding: 15px 20px;
        width: 100%;
        box-sizing: border-box;
    }
}

header{
    width: 1312px;
    box-sizing: border-box;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px calc((100vw - 1312px) / 2);
    padding-top: 20px;
    padding-bottom: 20px;
}
footer{
    padding: 70px 0px;
    border-radius: 20px 20px 0px 0px;
    background: url(/public-drone/img/background.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}
footer > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
footer > div .links{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}
footer > div .links > a{
    text-align: center;
    color: white;
    font-size: 20px;
}
footer > div .links > a:last-child{
    flex-basis: 100%;
}
footer > div .social{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
}
footer > div .social img{
    height: 65px;
}

header .logo img,
footer .logo img{
    height: 70px;
    width: auto;
}

@media screen and (max-width: 950px) {
    footer > div{
        flex-direction: column;
        gap: 40px;
    }
    footer > div .links > a{
        font-size: 15px;
    }
    footer > div .social img{
        height: 34px;
    }
}
header .menu{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    gap: 15px;
    letter-spacing: 0.1em;
}
header .menu a{
    padding: 10px 12px;
    border: 3px solid white;
    border-radius: 10px;
    position: relative;
    font-family: "EuropeExtendedC";
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    transition:  0.25s ease-in-out;
}
header .menu a:hover{
    background-color: white;
    color: var(--color-dark-blue);
}
header .menu a img{
    height: 1em;
    margin-right: 0.5em;
}
header .menu a:hover img{
    filter: brightness(0) invert(9%) sepia(75%) saturate(2911%) hue-rotate(240deg) brightness(85%) contrast(88%);
}
header .menu a.rounded{
    border-radius: 10em;
    min-width: 195px;
    box-sizing: border-box;
    text-align: center;
}
/* header .menu a:nth-child(3)::before{
    content: "";
    position: absolute;
    top: 0%;
    left: 55%;
    width: 23px;
    height: 23px;
    background: url(/public-drone/img/star_white.svg);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateY(-50%);
}
header .menu a:nth-child(4)::before{
    content: "";
    position: absolute;
    top: 100%;
    left: 55%;
    width: 23px;
    height: 23px;
    background: url(/public-drone/img/star_white.svg);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateY(-50%);
} */

header.blue .menu a{
    color: var(--color-dark-blue);
    border: 3px solid var(--color-dark-blue);
}

header .burger{

    display: none;
    position: relative;
    border: 2px solid white;
    border-radius: 100% 0px 100% 100%;
    cursor: pointer;
}

header .burger span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 2em;
    height: 2px;
    background-color: white;
    transition: all 0.25s ease-in-out;
}
.burger > span::before, .burger > span::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 2em;
    height: 2px;
    background-color: white;
    transition: all 0.25s ease-in-out;
}
.burger > span::before {
    top: -0.5em;
}
.burger > span::after {
    bottom: calc(-0.5em);
}

header{
    /* position: fixed; */
    top: 0px;
    left: 0px;
    width: 100%;
    box-sizing: border-box;
    z-index: 300;
}

header .burger.active > span {
    width: 0px;
}
.burger.active > span::before {
    top: 0px;
    transform: translateX(-50%) rotate(45deg);
}
.burger.active > span::after {
    bottom: 0px;
    transform: translateX(-50%) rotate(-45deg);
}

@media screen and (max-width: 1000px){
    header {
        position: fixed;
        background-color: #28245cbe;
    }
    header.active{
        /* backdrop-filter: blur(10px); */
    }
}

@media screen and (max-width: 1400px) {
    header{
        padding: 15px 15px;
    }
    footer{
        padding: 15px;
    }
    header .menu{
        font-size: 0.9em;
    }
}

@media screen and (max-width: 1200px){
    header .menu{
        font-size: 0.85em;
    }
}
@media screen and (max-width: 1100px){
    header .menu{
        font-size: 0.8em;
    }
}
@media screen and (max-width: 1000px){
    header .menu,
    header > div.row.space-between{
        display: none;
    }
    header .logo img{
        filter:brightness(10);
    }
    header .burger{

        display: flex;
        height: 4em;
        width: 4em;
    }
}
@media screen and (max-width: 500px){
    header .burger {
        display: flex;
        height: 50px;
        width: 50px;
    }
    header .logo img, footer .logo img{
        height: 50px;
    }
}


.mobile-menu {
    display: flex;
    flex-direction: column;
    justify-content: start;
    position: absolute;
    height: calc(100vh - 100% + 40px);
    width: 100%;
    top: 100%;
    right: -100%;
    box-sizing: border-box;
    padding: 15px;
    background-color: #28245cbe;
    backdrop-filter: blur(10px);
    transition: all 0.25s ease-in-out;
    display: none;
    color: white;
    gap: 20px;
}
.mobile-menu > a{
    width: 100%;
    font-size: 20px;
    padding: 20px 0px;
    border-radius: 10px;
    text-align: center;
    background-color: var(--color-dark-blue);
    border: 2px solid white;
    box-sizing: border-box;
    text-transform: uppercase;
    font-family: "EuropeExtendedC";
    letter-spacing: 0.1em;
}
.mobile-menu > a.rounded{
    border-radius: 60px;
}
@media (orientation: landscape){
    .mobile-menu {
        max-width: 550px;
    }
}
.mobile-menu.active {
    right: 0px;
    display: flex;
}

.main-banner{
    border: 3px solid white;
    border-radius: 20px;
    padding: 60px;
    background-image: url(/public-drone/img/main_image_grad.svg);
    background-size: contain;
    background-position: right center;
    background-repeat: no-repeat;
    position: relative;
}
.main-banner .col-12{
    padding: 0px;
}
.main-banner img{
    width: 600px;
    height: auto;
    position: relative;
    margin-top: -100px;
    margin-bottom: -100px;
    left: 100%;
}
.main-banner img.federation{
    position: absolute;
    top: -33px;
    left: 187%;
    width: 114px;
    height: auto;
    margin: 0px !important;
}
.main-banner{
    min-height: 639px;
}

@media screen and (max-width:1300px) {
    .main-banner img{
        width: 500px;
    }
    .main-banner{
        min-height: 531px;
    }
}
@media screen and (max-width:1200px) {
    .main-banner img{
        width: 500px;
        left: calc(100% - 450px);
    }
    .main-banner{
        min-height: 486px;
    }
    .main-banner img.federation{
        left: 92%;
    }
}
@media screen and (max-width:1100px) {
    .main-banner img{
        width: 400px;
        left: calc(100% - 350px);
    }
    .main-banner{
        min-height: 406px;
    }
}
/*
@media screen and (max-width:1200px) {
    .main-banner img{
        width: 500px;
        left: unset;
        position: absolute;
        right: -90px;
        bottom: 0%;
        margin-top: -100px;
        margin-bottom: -100px;
    }
    .main-banner h1{
        margin-bottom: 100px;
    }
}
@media screen and (max-width:1100px) {
    .main-banner img{
        width: 400px;
        right: -90px;
        bottom: 50px;
        margin-top: -100px;
        margin-bottom: -100px;
    }
}
@media screen and (max-width:1000px) {
    .main-banner h1{
        margin-bottom: 0px;
    }
    .main-banner img{
        max-width: 600px;
        position: unset;
        width: 100%;
        margin-top: -100px;
        margin-bottom: -100px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}
*/
@media screen and (max-width:950px) {
    .main-banner img{
        max-width: 600px;
        position: unset;
        width: 100%;
        margin-top: 5vw;
        margin-bottom: 5vw;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .main-banner{
        padding: 15Px;
    }
    .main-banner img.federation{
        left: 86%;
        top: 9px;
    }
}
@media screen and (max-width:700px){
    .main-banner img.federation{
        left: unset;
        top: unset;
        position: relative;
        margin-left: auto!important;
        margin-right: auto!important;
        margin-bottom: 20px!important;
        margin-top: -20px!important;
    }
}

.border-dark-stars{
    position: relative;
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 2em;
}
.border-dark-stars::before, .border-dark-stars::after{
    content: "";
    position: absolute;
    top: 50%;
    background-image: url(/public-drone/img/star_blue.svg);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    transform: translateY(-50%);
    height: 0.8em;
    width: 0.8em;
}
@media screen and (max-width: 900px) {
    .border-dark-stars::before, .border-dark-stars::after{
        height: 1.5em;
        width: 1.5em;
    }
}
.border-dark-stars::before{
    left: 0.5em;
}
.border-dark-stars::after{
    right: 0.5em;
}


.slider{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.slider .slider-dots{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.slider .slider-dots > div{
    display: block;
    width:36px;
    height: 36px;
    border: 3px solid var(--color-dark-blue);
    box-sizing: border-box;
    cursor: pointer;
    border-radius: 36px;
}
.slider .slider-dots > div.active{
    background-color: var(--color-dark-blue);
}

.slider#slider-1 .slides-container{
    height: 500px;
}
.slider#slider-1 .slides-container img{
    height: 500px;
    width: 500px;
    object-fit: contain
}
.slider#slider-1 .slides-container > div.lock img:first-child{
    filter: brightness(0) invert(9%) sepia(75%) saturate(2911%) hue-rotate(240deg) brightness(85%) contrast(88%);
}
/*
.slider#slider-1 .slides-container > div img:first-child{
    position: absolute;
    top:0%;
    left: 0px;
} */
.slider#slider-1 .slides-container > div.lock img:nth-child(2){
    position: absolute;
    top:50%;
    left:50%;
    width: 64px;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 3;
}
.slider#slider-1 .slides-container > div img{
    transition: opacity 0.25s ease-in-out;
}
.slider#slider-1 .slides-container > div.left,
.slider#slider-1 .slides-container > div.right{
    transform: translateX(-50%) scale(0.5);
}


.slider .slides-container{
    position: relative;
    width: 100%;
}
.slider .slides-container > div{
    position: absolute;
    opacity: 0;
    z-index: -1;
    left: 50%;
    top: 0px;
    transform: translateX(-50%) scale(0.5);

    transition: all 0.25s ease-in-out;
}
.slider .slides-container > div.active,
.slider .slides-container > div.left,
.slider .slides-container > div.right{
    opacity: 1;
    z-index: 0;
}
.slider .slides-container > div.active{
    z-index: 1;
    transform: translateX(-50%);
}
.slider .slides-container > div.left,
.slider .slides-container > div.right{
    transform: translateX(-50%) scale(0.8);
}
.slider .slides-container > div.left{
    left: 20%;
}
.slider .slides-container > div.right{
    left: 80%;
}

img[pbl-slider-arrow]{
    width:100px;
    height:100px;
    padding: 10px;
    box-sizing: border-box;
    object-position: center;
    object-fit: contain;
    cursor: pointer;

    display: none;
}

.slider .slides-description{
    text-align: center;
    max-width: calc(100% - 200px);
    max-width: 100%;
    width: 100%;
}
#slider-1 .slider-dots{
    display: none;
}
.slider .slides-description > div{
    display: none;
}
.slider .slides-description > div.active{
    display: block;
}
.slider#slider-1 .slides-description p{
    font-size: 20px;
}
.slider#slider-1 .slides-description h1{
    font-size: 40px;
}
@media screen and (max-width: 1300px) {
    .slider#slider-1 .slides-description p{
        font-size: 15px;
    }
    .slider#slider-1 .slides-description h1{
        font-size: 30px;
    }
}
@media screen and (max-width: 1000px) {
    .slider#slider-1 .slides-description p{
        font-size: 12px;
    }
}
@media screen and (max-width:900px) {
    .slider .slides-description{
        min-height: 150px;
    }
    .slider .slides-container > div.left{
        left: 15%;
    }
    .slider .slides-container > div.right{
        left: 85%;
    }
    .slider .slider-dots{
        gap: 10px;
    }
    .slider .slider-dots > div{
        width: 18px;
        height: 18px;
    }
    .slider#slider-1 .slides-container img{
        width: 50vw;
        height: 50vw;
    }
    .slider#slider-1 .slides-container{
        height: 50vw;
        margin-top: 10vw;
        padding-bottom: 10vw;
    }
    .slider#slider-1 .slides-container > div.lock img:nth-child(2){
        width: 30px;
    }
    .slider#slider-1 img[pbl-slider-arrow]{
        display: none;
    }
    .slider .slides-description{
        max-width: 100%;
        width: 100%;
    }
}

.direction-cards{
    display: flex;
    flex-direction: row;
    gap: 20px;
}
.direction-cards > div{
    border-radius: 20px;
    border: 3px solid var(--color-dark-blue);
    padding: 24px 30px;
    box-sizing: border-box;
    flex-basis: 50%;
    padding-bottom: 1em;

    position: relative;
}
.direction-cards > div::after{
    content: "";
    width: 30px;
    height: 30px;
    display: block;
    position: absolute;
    right: 15px;
    bottom: 15px;

    background-image: url(/public-drone/img/star_blue.svg);
    background-position: center top;
    background-repeat: repeat;
    background-size: 100% 100%;
}
.direction-cards > div > p{
    font-size: 25px;
    margin: 0px;
}

@media screen and (max-width: 1000px){
    .direction-cards{
        flex-direction: column;
    }
    .direction-cards > div{
        flex-basis: 100%;
        padding: 12px 15px;
        border-radius: 10px;
        padding-right: 40px;
    }
    .direction-cards > div::after{
        width: 17px;
        height: 17px;
    }
    .direction-cards > div > p{
        font-size: 15px;
    }
    .direction-cards br{
        display: none;
    }
}

.roadmap-container{
    border-radius: 20px;
    border: 3px solid var(--color-dark-blue);
    padding: 0px;
}
.roadmap-container > .tabs-container{
    padding: 50px 50px 0px 50px;
}
.roadmap-container > .tabs-container > div{
    min-height: 300px;
    padding-bottom: 100px;
}
.tabs-container > div:not(.active){
    display: none;
}
.roadmap-container > .tabs-container > div h1{
    letter-spacing: 0.1em;
    color: white;
    text-transform: uppercase;
}
.roadmap-container > .tabs-container > div p{
    font-size: 30px;
    font-weight: 400;
    margin: 30px 0px;
}
.roadmap-container > .tabs-container > div span{
    display: block;
    width: fit-content;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 15px;
    color: var(--color-dark-blue);
    background-color: white;
    border-radius: 20px;
}
.roadmap-container > .tabs-controls{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;

    background-color: white;
    border: 3px solid var(--color-dark-blue);
    padding: 0px 20px;
    border-radius: 20px;
    margin-left: -3px;
    margin-right: -3px;
    margin-bottom: -3px;

    position: relative;
}
.roadmap-container > .tabs-controls::before{
    content: "";
    background: url("/public-drone/img/drone-white.svg");
    width: 100px;
    height: 50px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    position: absolute;

    bottom: calc(100% + 40px);
    left: calc((100% - 40px) / 8 + 20px);

    transform: translateX(-50%);

    transition: 0.5s ease-in-out;
}


.roadmap-container[current-tab="1"] > .tabs-controls::before{
    left: calc((100% - 40px) / 8 * 3 + 20px);
}
.roadmap-container[current-tab="2"] > .tabs-controls::before{
    left: calc((100% - 40px) / 8 * 5 + 20px);
}
.roadmap-container[current-tab="3"] > .tabs-controls::before{
    left: calc((100% - 40px) / 8 * 7 + 20px);
}

.roadmap-container > .tabs-controls > div{
    padding: 45px 0px;
    width: 25%;
    color: var(--color-dark-blue);
    font-size: 20px;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
}
.roadmap-container > .tabs-controls > div::before{
    content: "";
    width: 45px;
    height: 45px;
    border: 3px solid var(--color-dark-blue);
    background-color: white;
    border-radius: 45px;

    position: absolute;
    top: 0px;
    left: 50%;
    transform: translate(-50%, -50%);

    transition: 0.25s ease-in-out;
}
.roadmap-container > .tabs-controls > div.active::before{
    background-color: var(--color-dark-blue);
    border-color: white;
}
.roadmap-container > .tabs-controls > div:not(.active):hover::before{
    -webkit-box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, 0.2);
    -moz-box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, 0.2);
    box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, 0.2);
}

.roadmap-controls{
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
}
.roadmap-controls img{
    flex-basis: 10px;
    width: 10px;
}
.roadmap-controls .tabs-container{
    flex-basis: calc(100% - 40px);
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

@media screen and (max-width: 900px) {
    .roadmap-controls{
        display: flex;
    }
    .roadmap-container{
        border-radius: 10px;
    }
    .roadmap-container > .tabs-controls{
        border-radius: 10px;
    }
    .roadmap-container > .tabs-controls > div{
        padding: 23px 0px;
        border-radius: 10px;
    }
    .roadmap-container > .tabs-controls > div span{
        display: none;
    }
    .roadmap-container > .tabs-container{
        padding: 15px;
    }
    .roadmap-container > .tabs-container > div{
        min-height: 200px;
        padding-bottom: 70px;
    }
    .roadmap-container > .tabs-container > div p{
        font-size: 15px;
    }
    .roadmap-container > .tabs-container > div span{
        font-size: 10px;
    }
    .roadmap-container > .tabs-controls::before{
        width: 66px;
        height: 30px;
    }
}


.border-dark-star-right{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
}
.border-dark-star-right > img{
    height: 73px;
}
@media screen and (max-width: 1000px) {
    .border-dark-star-right > img{
        display: none;
    }
    .border-dark-star-right{
        position: relative;
        display: block;
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        padding: 0px 2em;
    }
    .border-dark-star-right::before, .border-dark-star-right::after{
        content: "";
        position: absolute;
        top: 50%;
        background-image: url(/public-drone/img/star_blue.svg);
        background-size: 100% 100%;
        background-position: center;
        background-repeat: no-repeat;
        transform: translateY(-50%);
        height: 1.5em;
        width: 1.5em;
    }
    .border-dark-star-right::before{
        left: 0.5em;
    }
    .border-dark-star-right::after{
        right: 0.5em;
    }
}
.border-dark-star-right > h1{
    width: min-content;
}
.formats{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
}
.formats > div{
    /* min-height: 500px; */
    flex-basis: calc(50% - 10px);
    box-sizing: border-box;
    position: relative;
}
.formats > div.border:not(.team-struct){
    padding-bottom: 140px;
}
.formats .format-icon{
    position: absolute;
    right: 30px;
    bottom: 30px;
    height: 86px;
    width: auto;
}

.team-struct img{
    width: 120px;
}

@media screen and (max-width: 1000px) {
    .formats > div:not(:first-child) p{
        font-size: 10px;
    }
    .formats{
        display: grid;

        grid-template-rows: auto 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    }
    .formats > div:nth-child(1){
        grid-row-start: 1;
        grid-column-start: 1;

        grid-row-end: 2;
        grid-column-end: 3;
    }
    .formats > div:nth-child(3){
        grid-row-start: 2;
        grid-column-start: 1;

        grid-row-end: 4;
        grid-column-end: 2;
    }
    .formats > div:nth-child(2){
        grid-row-start: 2;
        grid-column-start: 2;

        grid-row-end: 3;
        grid-column-end: 3;
    }
    .formats > div:nth-child(4){
        grid-row-start: 3;
        grid-column-start: 2;

        grid-row-end: 4;
        grid-column-end: 3;
    }

    .team-struct img{
        width:60px;
    }
    .team-struct > div{
        gap: 10px;
    }
    .formats > div.border:not(.team-struct){
        padding-bottom: 50px;
    }
    .formats > div.border:not(.team-struct) h2{
        font-size: 12px;
    }
    .formats .format-icon{
        height: 35px;
        right: 10px;
        bottom: 10px;
    }
}

.white-bg-rounded-text{
    display: block;
    width: fit-content;
    font-weight: bold;
    padding: 10px 15px;
    color: var(--color-dark-blue);
    background-color: white;
    border-radius: 20px;
}
@media screen and (max-width: 1000px) {
    .white-bg-rounded-text{
        border-radius: 15px;
        padding: 5px 8px;
    }
}

.directions{
    column-gap: 20px;
    row-gap: 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.directions > div{
    position: relative;
    padding: 0px;
    /* flex-basis: calc(50% - 10px); */
}
.directions > div > div{
    padding-bottom: 120px;
    height: 100%;
    box-sizing: border-box;
}
.directions > div::after{
    content: "";
    width: 188px;
    height:85px;
    background: url("/public-drone/img/drone-white.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    position: absolute;
    right:15px;
    bottom: 15px;

}

@media screen and (max-width: 1000px) {
    .directions{
        grid-template-columns: 1fr;
    }
    .directions > div{
        flex-basis: calc(100%);
    }
    .directions > div{
        padding: 0px;
    }
    .directions{
        gap: 20px;
    }
    .directions > div > div{
        padding: 20px;
    }
    .directions > div > div{
        padding-bottom: 75px;
    }
    .directions .half-margin-bottom{
        margin-bottom: 20px;
    }
    .directions > div::after{
        width: 107px;
        height:48px;
    }
}
@media screen and (max-width: 450px){
    .directions > div::after{
        right: 5px;
    }
}


.captains-slider .row.space-between{
    align-items: center;
}

.captains-slider .row.space-between > img{
    width: 100px;
    height: 100px;
    padding: 10px;
    box-sizing: border-box;
    object-position: center;
    object-fit: contain;
    cursor: pointer;
}
.captains-slider .row.space-between > div{
    width: calc(100% - 200px);
    min-height: 600px;
}
.captains-slider .row.space-between > div > div{
    border: 3px solid var(--color-dark-blue);
    background-color: white;
    border-radius: 20px;
    padding: 30px;
    width: 400px;
    min-height: 600px;
    box-sizing: border-box;
}
.captains-slider .row.space-between > div > div::before{
    content: "";
    background: url("/public-drone/img/star_blue.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width:30px;
    height: 30px;
    position: absolute;
    top: 20px;
    left: 20px;
}
.captains-slider .row.space-between > div > div > img{
    width: 289px;
    height: 289px;
    padding: 20px;
    border-radius: 100%;
    border: 3px solid var(--color-dark-blue);
    box-sizing: border-box;
    object-fit: contain;
    object-position: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
}
.captains-slider .row.space-between > div > div > p{
    text-align: center;
}
.captains-slider .row.space-between > div > div > p:first-of-type{
    color: black;
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 30px;
}
.captains-slider .row.space-between > div > div > p:nth-of-type(2){
    text-align: center;
    font-size: 20px;
}

.register-as img{
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.register-as{
    gap: 20px;
}
.register-as > div{
    padding: 0px;
    flex-basis: calc(50% - 10px);
    max-width: calc(50% - 10px);
}

.register-as .button{
    font-size: 30px;
}
@media screen and (max-width: 1000px) {
    .register-as .button{
        font-size: 10px;
        padding-left: 0px;
        padding-right: 0px;
        width: 100%;
        box-sizing: border-box;
    }
    .register-as img{
        width: 70%;
    }
    .register-as p{
        font-size: 8px;
    }
}

@media screen and (max-width: 1000px){
    .register-as--page > div{
        padding: 0px;
        flex-basis: calc(100%);
        max-width: calc(100%);
    }
    .register-as--page > div > div:first-child p{
        font-size: 12px;
    }
    .register-as--page > div > div:first-child a{
        font-size: 20px;
        width: fit-content;
        padding: 10px 15px;
    }
    .register-as--page > div > div:first-child img{
        width: 120px;
    }
}

.doc-link{
    display: grid;
    grid-template-columns: 1fr 40px;
    column-gap: 1em;
    align-items: center;
    border: 3px solid var(--color-dark-blue);
    border-radius: 20px;
    padding: 20px 40px;
    color: var(--color-dark-blue);
    font-size: 30px;

    cursor: pointer;
    margin-bottom: 20px;
}
.doc-link > span{
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    column-gap: 1em;
}
.doc-link > span::before{
    content: "";
    background: url("/public-drone/img/doc.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: block;
    height:40px;
    width: 40px;
    margin-right: 2em;
}
.doc-link::after{
    content: "";
    background: url("/public-drone/img/download.svg");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    height:1.25em;
    width: 1.25em;
}

@media screen and (max-width: 1000px) {
    .doc-link{
        padding: 30px 20px;
        border-radius: 10px;
    }
    .doc-link > span{
        font-size: 10px;
    }
    .doc-link::after,
    .doc-link > span::before{
        height:25px;
        width: 25px;
    }
}
.how2reg > .tabs-container{
    font-size: 25px;
    min-height: 150px;
    min-height: 7em;
}
.how2reg > .tabs-controls{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 17px;
    margin: 40px 0px;
}
.how2reg > .tabs-controls > div{
    height: 18px;
    flex-basis: 100%;
    border: 3px solid white;
    box-sizing: border-box;
    border-radius: 10px;
    cursor: pointer;
}
.how2reg > .tabs-controls > div.active{
    background-color: white;
}
.how2reg .how2reg-controls{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.how2reg .how2reg-controls img{
    width: 24px;
    height: auto;
    cursor: pointer;
}
.how2reg .how2reg-controls > .tabs-container{
    flex-basis: 100%;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
}


@media screen and (max-width: 1000px){
    *{
        border-width: 2px!important;
    }

    .how2reg > .tabs-container{
        font-size: 15px;
        min-height: 100px;

    }
    .how2reg > .tabs-controls{
        gap: 10px;
    }
    .how2reg > .tabs-controls > div{
        height: 10px;
    }
    .how2reg .how2reg-controls > .tabs-container{
        font-size: 17px;
    }
    .how2reg .how2reg-controls img{
        height: 35px;
    }
}

.small-form{
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}


.small-form label,
.small-form p{
    margin-bottom: 10px;
    font-size: 20px;
}

/* @media screen and (min-width: 1000px) {
    .radio-group{
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: 40px;
    }
} */

input[type="text"],
input[type="url"],
textarea,
select{
    display: block;
    width: 100%;
    font-size: 20px;
    padding: 10px 20px;
    border-radius: 10px;
    outline: none;
    border: none;
    font-family: "Montserrat";
    color: var(--color-dark-blue);
    margin-bottom: 10px;
    box-sizing: border-box;
    font-weight:500;
    max-width: 100%;
}
input[type="text"]::placeholder,
input[type="url"]::placeholder,
select{
    font-family: "Montserrat";
    color: var(--color-dark-blue-transparent);
    font-weight: 500;
}
input[type="submit"],
form a.button{
    outline: none;
    margin-top: 20px;
    border: 3px solid white;
    border-radius: 1000px;
    padding: 10px 40px;
    font-weight: bold;
    display: block;
    width: 100%;
    background-color: transparent;
    font-size: 30px;

    cursor: pointer;
    color: inherit;
    text-decoration: none;
    text-align: center;
    font-family: "Montserrat";

    transition: 0.25s ease-in-out;
}

form input[type="submit"],
form a.button{
    max-width: 500px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

input[type="submit"]:hover{
    background-color: white;
    color: var(--color-dark-blue);
}


form .tabs-container > div{
    display: flex;
    flex-direction: column;
    gap: 30px;
    min-height: 50vh;
}

form .how2reg-controls .tabs-container > div{
    flex-direction: row;
    align-items: center;
    justify-content: center;
    min-height: unset;
    gap: 30px;
}
form .how2reg-controls .tabs-container > div > a,
form .how2reg-controls .tabs-container > div > input[type="submit"]{
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
}
@media screen and (max-width: 750px) {
    form .how2reg-controls .tabs-container > div{
        flex-direction: column-reverse;
        gap: 5px;
    }
}

form p,
form label{
    font-size: 30px;
}
form p{
    font-weight: bold;
}
form label{
    cursor: pointer;
    display: block;
}

input[type="checkbox"],
input[type="radio"]{
    display: none;
}

input[type="checkbox"] + span,
input[type="radio"] + span{
    display: flex;
    flex-direction: row;
    align-items: center;
}

input[type="checkbox"] + span::before,
input[type="radio"] + span::before{
    content: "";
    display: block;
    height: 43px;
    width: 43px;
    min-width: 43px;
    margin-right: 30px;
    border-radius: 2em;
    border: 3px solid white;
    box-sizing: border-box;
    transition: all 0.25s ease-in-out;
}
input[type="checkbox"]:checked + span::before,
input[type="radio"]:checked + span::before{
    background-color: white;
}

.upload-doc{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border: 2px dashed white;
    border-radius: 20px;
    padding:15px 30px;
    margin-bottom: 20px;

    position: relative;
}

.upload-doc input{
    display: none;
}
.upload-doc label{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.upload-doc > img{
    display: none;
    cursor: pointer;
}
.upload-doc > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: nowrap;
}
.upload-doc > div > p{
    font-weight: 500;
    overflow-wrap: anywhere;
    text-wrap: balance;
}
.upload-doc > div > img:nth-child(1){
    display: none;
}

.upload-doc.uploaded{
    border-style: solid;
    justify-content: space-between;
}
.upload-doc.uploaded label{
    display: none;
}
.upload-doc.uploaded > img{
    display: block;
}
.upload-doc.uploaded > div > img:nth-child(1){
    display: block;
}
.upload-doc.uploaded > div > img:nth-child(2){
    display: none;
}

form span.note{
    color: rgba(255, 255, 255, 0.5);
    font-size: 25px;
    font-weight: 500;
}
form ul{
    font-size: 25px;
    font-weight: 500;
}

#reg-form .tabs-controls{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}
#reg-form .tabs-controls > div{
    border-radius: 100px;
    border: 3px solid white;
    height: 1em;
    width: 100%;
    cursor: pointer;
}
#reg-form .tabs-controls > div.active{
    background-color: white;
}


@media screen and (max-width: 1000px) {
    form p{
        font-size: 20px;
    }
    form label{
        font-size: 15px;
    }


    .small-form label,
    .small-form p{
        margin-bottom: 10px;
        font-size: 20px;
    }

    input[type="checkbox"] + span::before, input[type="radio"] + span::before{
        border-width: 2px;
    }

    .upload-doc{
        padding: 10px 20px;
    }
    .upload-doc > div{
        gap :20px;
    }
    .upload-doc > div > p{
        font-size: 10px;
    }
    .upload-doc img{
        height: 30px;
    }
    form span.note{
        font-size: 15px;
    }
    form ul{
        font-size: 15px;
    }
    input[type="text"], input[type="url"], textarea, select{
        font-size: 15px;
    }
    form input[type="submit"], a.button{
        font-size: 20px;
    }
}


.lk{
    max-width: 424px;
    border-radius: 20px;
    border: 3px solid white;
    position: relative;
    box-sizing: border-box;
    padding: 30px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.lk a.edit-pencil--main{
    position: absolute;
    right: 20px;
    top: 30px;
    cursor: pointer;
}
.lk a.edit-pencil--main img{
    height: 32px;
    width: 32px;
}
.lk .profile-icon{
    width: 40%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.lk .name{
    display: block;
    text-align: center;
    width: 100%;
    font-size: 30px;
    font-weight: bold;
}
.lk .nickname{
    display: block;
    text-align: center;
    width: 100%;
    font-size: 20px;
    font-weight: 500;
}
.lk .battle-cry{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap :20px;
    padding-left: 52px;
}
.lk .battle-cry p{
    font-size: 20px;
    padding: 10px 30px;
    background-color: white;
    color: var(--color-dark-blue);
    border-radius: 60px;
    text-align: center;
    font-weight: bold;
}
.lk .battle-cry > a{
    cursor: pointer;
}
.lk .battle-cry > a > img{
    height: 32px;
    width: 32px;
}
.lk .info{
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.lk .info > p{
    font-size: 20px;
    font-weight: 500;
}
.lk .info > p > span{
    font-weight: bold;
}

.lk-button{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 424px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    border: 3px solid white;
    font-size: 30px;
    font-weight: bold;
    min-height: 120px;
    padding: 20px 40px;
    box-sizing: border-box;
    border-radius: 20px;
    margin-top: 20px;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
}
.lk-button:last-child{
    margin-bottom: 30px;
}

.lk-button.disabled{
    color: rgba(255, 255, 255, 0.5);
}
.lk-button:not(.disabled):hover{
    background-color: white;
    color: var(--color-dark-blue);
}

@media screen and (max-width: 500px) {
    .lk{
        gap: 10px;
    }
    .lk .name{
        font-size: 20px;
    }
    .lk .nickname{
        font-size: 15px;
    }
    .lk a.edit-pencil--main img,
    .lk .battle-cry > a > img{
        height: 25px;
        width: 25px;
    }
    .lk .battle-cry p{
        font-size: 15px;
    }
    .lk .info{
        gap: 10px;
    }
    .lk .info > p{
        font-size: 15px;
    }
    .lk-button{
        font-size: 20px;
        min-height: 60px;
        padding: 10px 20px;
    }
}

.modal{
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: var(--color-dark-blue-transparent);
}
.modal:not(.active){
    display: none;
}
.modal .modal-content{
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% - 30px);
    max-width: 600px;
    padding: 15px;
    padding-top: 75px;
    box-sizing: border-box;
    border-radius: 20px;
    background-color: white;
    height: auto;
    transform: translate(-50%, -50%);
}
.modal .modal-content .cross{
    position: absolute;
    top: 15px;
    right: 15px;
    height: 45px;
    width: 45px;
    cursor: pointer;
}
.link-copy{
    width: 100%;
    border: 3px solid var(--color-dark-blue);
    border-radius: 20px;
    padding-left: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;
}
.link-copy > p:first-child{
    background-color: transparent;
    color: var(--color-dark-blue-transparent);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.link-copy > p:last-child{
    color: white;
    background: var(--color-dark-blue);
    padding: 10px 20px;
    border-radius: 20px 0px 0px 20px;
    margin-top: -1px;
    margin-right: -1px;
    margin-bottom: -1px;
    cursor: pointer;
}