.hero {
    background: var(--off-white);
    position: sticky;
    top: 0;
    z-index: -10;    
}
.hero:before {
    content: '';
    width: 1px;
    height: 100%;
    background: var(--white);
    position: absolute;
    top: 0;
    left: 2.5%;
    z-index: 10;
}
.hero:after {
    content: '';
    width: 100%;
    height: 1px;
    background: var(--white);
    position: absolute;
    bottom: 5%;
    left: 0;
    z-index: 10;
}

#home-hero {
    background: url(../images/banners/runway-sunset.webp) no-repeat bottom left #666666;
    background-size: cover;
    background-blend-mode: overlay;
    padding: 200px 0 300px;
    overflow: clip;

    img {
        width: 1920px;
        max-width: none;
        position: absolute;
        bottom: 0;
        left: 0;
    }

    h1 {
        color: var(--yellow);

        small,
        span {
            display: inline-block;
            color: var(--white);
        }
    }
}

#pilots-1 {
    img {
        position: absolute;
        bottom: -20px;
        left: 0;
        max-width: 50%;
        object-fit: fill;
    }

    .circle {
        top: 10%;
        right: 55%;
        z-index: -1;
    }
}

#fleet {
    position: relative;

    .circle {
        position: absolute;
        top: 0;
        right: -20%;
    }
}

#world {
    text-align: center;

    p {
        margin: 20px auto 0;
    }

    .world {
        position: relative;
        padding-top: 100px;

        .circle {
            transform: scale(0.5);
            transform-origin: top left;
            top: 0;
            left: 0;
        }

        img {
            position: relative;
            z-index: 2;
        }

        img:nth-child(2) {
            position: absolute;
            top: 100px;
            left: 0;
        }
    }
    .world:after {
        content: '';
        width: 100%;
        height: 100%;
        border-radius: 100%;
        background: linear-gradient(180deg,rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 1) 50%);
        -webkit-backdrop-filter: blur(20px);
                backdrop-filter: blur(20px);
        box-shadow: 0 0 20px 10px var(--white);
        position: absolute;
        top: 75px;
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        z-index: 1;
    }
}

#home-cta {
    background: url(../images/backgrounds/winter-jet-background.webp) no-repeat top center;
    background-size: cover;
    text-align: right;
    padding: 0 0 30%;
    position: relative;
    overflow: hidden;

    .circle {
        -webkit-transform: scale(0.6) rotate(45deg);
                transform: scale(0.6) rotate(45deg);
        -webkit-transform-origin: top left;
                transform-origin: top left;
        top: 15%;
        left: 40%;
        border-bottom-color: transparent;
        border-right-color: transparent;
    }

    section {
        position: relative;
        z-index: 10;
    }

    img {
        position: absolute;
        bottom: 0;
        left: 0;
    }

    p {
        max-width: 768px;
        margin: 20px 0 0 auto;
    }

    .btn {
        margin-top: 20px;
    }
}

#partners {
    padding-top: 0;
    position: relative;

    #partner {
        .item {
            background: var(--white);
            border: 1px solid var(--white);
            padding: 20px;
            margin-top: 20px;
            border-radius: var(--border-radius);
            width: calc(100% - 20px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .item:hover,
        .item:focus {
            box-shadow: 0 0 0 rgba(0,0,0,0);
            border: var(--tile-border);
        }
    }
}
#partners:before {
    content: '';
    width: 100%;
    height: 50%;
    background: var(--yellow);
    position: absolute;
    left: 0;
    bottom: 0;
}


/*MEDIA QUERIES*/
@media (max-width: 1350px) {
    #home-hero {
        img {
            left: -20%;
        }
    }
}

@media (max-width: 1250px) {
    #pilots-1 {
        padding-bottom: 200px;

        img {
            bottom: 0;
            left: auto;
            right: 0;
            max-width: none;
            height: 350px;
        }

        .circle {
            top: 50%;
            right: auto;
            left: 45%;
        }
    }
}

@media (max-width: 1024px) {
    #home-cta {
        padding: 50px 0 30%;

        .circle {
            -webkit-transform: scale(0.4) rotate(45deg);
                    transform: scale(0.4) rotate(45deg);
            top: 35%;
            left: 30%;
        }
    }

    .world {
        padding-top: 50px;

        img:nth-child(2) {
            top: 50px;
        }
    }
}

@media (max-width: 960px) {
    #home-hero {
        img {
            left: -50%;
        }
    }
}

@media (max-width: 768px) {
    #home-hero {
        height: 90vh;
        min-height: 600px;
        padding: 150px 0 150px;

        img {
            width: 1850px;
            left: -600px;
        }

        h1 {
            small {
                display: block;
                margin-top: 20px;
            }
        }
    }

    #pilots-1 {
        padding-top: 50px;

        .content {
            padding-top: 0;
        }

        img {
            height: 300px;
        }
    }

    #fleet {
        .circle {
            transform: scale(0.7);
            top: 10%;
            right: -50%;
        }
    }

    #world {
        .world {
            padding-top: 50px;

            .circle {
                transform: scale(0.3);
                top: 20px;
            }

            img:nth-child(2) {
                top: 50px;
            }
        }
        .world:after {
            top: 40px;
        }
    }

    #home-cta {
        padding: 0 0 30%;

        .circle {
            -webkit-transform: scale(0.3) rotate(45deg);
                    transform: scale(0.3) rotate(45deg);
            -webkit-transform-origin: bottom left;
                    transform-origin: bottom left;
            top: auto;
            bottom: 25%;
            left: 10%;
        }
    }

    #partners {
        padding-bottom: 100px;
    }
}

@media (max-width: 600px) {
    #home-cta {
        .circle {
            -webkit-transform: scale(0.3) rotate(45deg);
                    transform: scale(0.3) rotate(45deg);
            bottom: 20%;
            left: 5%;
        }
    }
}

@media (max-width: 532px) {
    #home-hero {
        img {
            width: 1650px;
            left: -600px;
        }
    }

    #fleet {
        .circle {
            transform: scale(1);
            top: 20%;
            right: -60%;
        }
    }

    #world {
        .world {            
            .circle {
                transform: scale(0.2);
            }
        }
    }

    #home-cta {
        padding-bottom: 45%;

        img {
            max-width: 150%;
            left: auto;
            right: 0;
        }
    }
}