@import"https://fonts.cdnfonts.com/css/ethnocentric";
@import"https://fonts.googleapis.com/css?family=montserrat";
@import"https://fonts.googleapis.com/css2?family=montserrat:wght@300;500;700&display=swap";

body {
    overflow-x: hidden;
    color: #fff;
    margin: 0;
    font-family: "Montserrat", sans-serif
}

.partners-img {
    max-width: 100%
}

.wrapper {
    max-width: 70rem;
    margin: 0 auto
}

@media(min-width: 2000px) {
    .wrapper {
        max-width: 100rem
    }
}

.wrapper-full {
    max-width: 100%
}

.wrapper-wide {
    max-width: 70em;
    margin: 0 auto
}

@media(min-width: 2000px) {
    .wrapper-wide {
        max-width: 100rem
    }
}

.wrapper-full {
    max-width: 100vw
}

.mobile {
    display: none !important
}
@media(max-width: 550px) {
    .desktop {
        display: none !important
    }

    .mobile {
        display: block !important;
        margin-top: 2.9rem 
    }
}

@media(max-width: 800px) {
    .carousel-item {
        margin-top: 2.9rem
    }
}

@media(min-width: 1200px) {
    .carousel-item {
        margin-top: 0
    }
}

h1 {
    font-family: "Ethnocentric Rg";
    font-size: clamp(2rem, 3vw, 4rem);
    text-align: center
}

@media(min-width: 3000px) {
    h1 {
        font-size: clamp(2rem, 5vw, 4rem)
    }
}

.partners {
    margin: 0 auto
}

.carousel-item img {
    width: 100%;
    max-height: 100lvh;
    overflow-y: hidden;
    height: auto;
    object-fit: cover !important;
    object-position: center bottom
}



#img1 {
    object-position: center top;
}

#img0 {
    object-position: center top;
}

.pullup {
    margin-top: -20vh;
    position: relative;
    z-index: 100;
    background: #000
}

.button-wrapper-l {
    display: grid;
    justify-content: end
}

#avionicsl h2 {
    text-align: left;
    margin: auto
}

#avionicsl {
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat
}

#avionicsl img {
    max-width: 500%
}

#krivulja-svg {
    position: absolute;
    z-index: 1;
    top: 35%;
    left: -190px;
    width: 150%
}

@media(min-width: 2000px) {
    #krivulja-svg {
        width: 180%;
        left: -50%
    }
}

@media(max-width: 650px) {
    #krivulja-svg {
        display: none
    }
}

.card {
    margin: 0 auto;
    display: flex;
    border: none;
    border-radius: 0px;
    max-width: 180rem;
    flex-direction: row;
    overflow-x: hidden
}

.card h2 {
    font-size: clamp(1rem, 4vw, 3.5rem)
}

@media(min-width: 2000px) {
    .card h2 {
        font-size: clamp(1.5rem, 4vw, 4.5rem)
    }
}

.card .svg {
    position: relative;
    z-index: 100
}

@media(max-width: 500px) {
    .card .svg {
        display: none
    }
}

.card .button {
    position: relative;
    color: gray;
    font-size: clamp(.8rem, 5vw, 2rem);
    background-color: #fff;
    border: solid 1px gray;
    border-radius: 25px;
    font-weight: 200;
    padding: 0 2rem;
    margin-right: 0;
    margin-left: auto;
    margin-top: 3rem;
    z-index: 1000
}

@media(min-width: 2000px) {
    .card .button {
        font-size: clamp(1.2rem, 4vw, 2.3rem)
    }
}

.card .button:hover {
    color: #fff;
    background-color: rgba(80, 80, 80, .5);
    transition: .3s
}

.card .left-section,
.card .right-section {
    flex: 1;
    padding: 0px;
    position: relative
}

.card .left-section {
    display: grid;
    align-content: center;
    position: relative
}

.card .svg1 {
    background: url(../assets/svg/bottom_index.svg);
    background-position: center center
}

.card .svg2 {
    background: url(../assets/svg/test-anim.svg);
    background-position: center center
}

@media(min-width: 2300px) {
    .card #bw-interior {
        padding-right: 12%
    }

    .card #bw-avionics {
        padding-left: 12%
    }

    .card #bw-jeta {
        padding-right: 12%
    }
}

@media(min-width: 1150px) and (max-width: 2299px) {
    .card #bw-interior {
        padding-right: 10%
    }

    .card #bw-avionics {
        padding-left: 10%
    }

    .card #bw-jeta {
        padding-right: 10%
    }
}

@media(min-width: 1000px)and (max-width: 1149px) {
    .card #bw-interior {
        padding-right: 8%
    }

    .card #bw-avionics {
        padding-left: 8%
    }

    .card #bw-jeta {
        padding-right: 8%
    }
}

@media(min-width: 700px)and (max-width: 999px) {
    .card #bw-interior {
        padding-right: 0
    }

    .card #bw-avionics {
        padding-left: 0
    }

    .card #bw-jeta {
        padding-right: 0
    }
}

.card .text {
    position: relative;
    z-index: 1000;
    background-size: cover;
    background-position: center;
    color: #000;
    padding: 0px;
    font-family: "Ethnocentric Rg"
}

.card .jeta-text {
    text-align: left !important;
    margin: 0 0 0 auto
}

.card .image {
    background-image: url("./assets/img/engine1.jpg");
    background-size: cover;
    z-index: 10;
    max-height: 200px
}

.card .right-section {
    position: relative;
    flex: 2
}

.card .custom-shape {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%);
    overflow: hidden;
    object-fit: cover
}

.card .custom-shape-l {
    clip-path: polygon(0 0, 75% 0, 98.5% 100%, 0% 100%);
    overflow: hidden;
    object-fit: cover;
    position: relative;
    z-index: 1000
}

.card .imgshape {
    margin: 0;
    width: 100%;
    max-height: 100%;
    padding: 0
}

@media(max-width: 650px) {
    .card {
        flex-direction: column
    }

    .card .custom-shape,
    .card .custom-shape-l {
        max-height: 50vh;
        clip-path: none;
        overflow: hidden;
        object-fit: cover
    }

    .card .left-section {
        padding: 30px 0px 50px 0px
    }

    .card img {
        clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%)
    }

    .card h2,
    .card .button,
    .card .button-wrapper {
        font-size: 25px;
        margin: 0 auto !important;
        text-align: center !important;
        max-width: 60vw
    }

    .card .button {
        font-size: 20px
    }

    .card .jeta-text {
        text-align: left !important;
        margin: 0 auto
    }

    .card #upSlika {
        order: 1
    }

    .card #upText {
        order: 2
    }

    .card #botText {
        order: 6;
        background: #0d0d0d
    }

    .card .svg1 {
        background: #fff
    }

    .card .svg2 {
        background: #0d0d0d
    }
}