@font-face {
    font-family: Montserrat-Regular;
    src: url(../fonts/Montserrat-Regular.ttf);
}

@font-face {
    font-family: Montserrat-Bold;
    src: url(../fonts/Montserrat-Bold.ttf);
}

@font-face {
    font-family: BebasNeue;
    src: url(../fonts/BebasNeue\ Bold.otf);
}

:root {
    --colorWhite: #fff;
    --colorBlack: #000;
    --colorOrange: #fa4614;
    --colorGray: #191919;
    --colorLightgray: #2c2c2c;
}

html {
    scroll-behavior: smooth;
}

* {box-sizing: border-box;}

body {
    margin: 0;
    padding: 0;
    font-family: Montserrat-Bold;
    color: var(--colorWhite);
}

.fixed {
    position: fixed;
    inset: 0;
}

a {
    text-decoration: none;
    color: var(--colorWhite);
}

h1 {
    font-family: BebasNeue;
    font-size: 60px;
}

.header {
    width: 100%;
    height: 100px;
    position: sticky;
    inset: 0 0;
    padding: 0 40px;
    display: flex;
    justify-content: center;
    background-color: var(--colorBlack);
    z-index: 999;
}

.header__container {
    width: 1280px;
    max-width: 1400px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between; 
}

.header__list {
    display: flex;
    width: 350px;
}

.header__adaptive-list {display: none;}

.burger-btn {
    display: none;
    width: 30px;
    height: 30px;
}

.burger-btn > div {
    width: 30px;
    height: 2px;
    border-radius: 15px;
    background-color: var(--colorWhite);
    margin-top: 7px;
}

.burger-btn > div:nth-child(1) {margin: 0;}

.list1 {gap: 20px;}

.list2 {gap: 15px;}
 
.header__list > a::after, .header__adaptive-list > a::after {
    content: '';
    display: block;
    position: relative;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--colorOrange);
    transition: all .2s ease-in-out;
}

.header__list > a:hover:after,
.header__list > a:focus:after,
.header__adaptive-list > a:hover::after, 
.header__adaptive-list > a:focus::after {width: 100%;}

g {fill: var(--colorWhite);}

svg {cursor: pointer;}

.banner {
    width: 100%;
    height: 100vh;
    min-height: 100vh;
    max-width: 100%;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    padding: 250px 25px;
    display: flex;
    justify-content: center;
}

.banner__container {
    margin: 0 auto;

}

.banner__container > h1 {
    margin: 0;
    font-size: 95px;
}

.banner__container > h3 { 
    font-family: Montserrat-Regular;
    margin: 0;
    font-size: 20px;
}

.banner__background {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -3;
    background-image: url(../img/img1.jpg);
    background-blend-mode: multiply;
    background-color: rgba(0, 0, 0, 40%);
    background-size: cover;
    background-position: center;
}

.about-company {
    padding: 75px 150px;
    background-color: var(--colorBlack);
}

.about-company > h1 {
    margin: 0 0 20px;
    text-align: center;
}

.about-company__elon-container {
    display: flex;
    align-items: center;
}

.about-company > h3 {
    font-size: 30px;
    margin: 0 0 50px;
    text-align: center;
}

.about-company > p {
    font-size: 18px;
    text-align: center;
}

.history {padding: 100px 150px;}

.history > h1 {margin: 0;}

.history > h5 {
    font-size: 20px;
    margin: 0;
}

.history__background {
    width: 100%;
    height: 100vh;
    background-image: url(../img/img2.jpg);
    background-color: rgba(0, 0, 0, 70%);
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
    position: fixed;
    inset: 0 0;
    z-index: -999;
}

.history > h3 {
    margin: 50px 0;
    font-size: 30px;
}

.history > p {
    font-size: 18px;
    margin: 10px 0;
}

.falcon {
    padding: 30px 25px;
    background-color: var(--colorGray);
}

.falcon__box {
    width: 1280px;
    max-width: 100%;
    margin: auto;
}

.falcon > h1 {text-align: center;}

.falcon__box > h3 {font-size: 30px;}

.falcon__box > h3::before {
    content: '';
    display: block;
    width: 100px;
    height: 2px;
    background-color: var(--colorOrange);
}

.falcon__container {
    margin: 50px auto;
    display: flex;
    justify-content: space-between;
    gap: 25px;
}

.falcon__exploitation .falcon__text-block > h3 {
    font-size: 30px;
    margin: 0;
    text-align: center;
}

.falcon__text-block > p {margin: 25px 0;}

.falcon__exploitation {
    width: 600px;
    height: 400px;
    border-radius: 15px;
    background-color: var(--colorLightgray );
    overflow: hidden;
}

.falcon__text-block {
    width: 100%;
    height: 100%;
    transition: all .3s ease-out;
    padding: 20px;
}

.falcon__exploitation:hover > .falcon__text-block {
    transform: translate(0, -80%);
    background-color: rgba(0, 0, 0, 80%);
}

.falcon__canceled {
    width: 600px;
    height: 400px;
    border-radius: 15px;
    background-color: var(--colorLightgray );
    overflow: hidden;
}

.falcon__text-block > h3 {
    font-size: 30px;
    margin: 0;
    text-align: center;
}

.falcon__falcon {
    height: 300px;
    background-position: center;
    background-size: cover;
    border-radius: 15px;
    margin: 20px 20px 0 20px;
}

.falcon__container:last-child {
    justify-content: center;
}

.FT {background-image: url(../img/img3.jpg);}

.FH {background-image: url(../img/img4.jpg);}

.falcon1 {background-image: url(../img/img5.jpg);}

.falcon9v1-0 {background-image: url(../img/img6.jpg);}

.falcon9v1-1 {background-image: url(../img/img7.jpg);}

.Grasshopper {background-image: url(../img/img8.jpg);}

.founder {
    background-image: url(../img/img10.jpg);
    padding: 75px 100px;
}

.founder > h1 {
    text-align: center;
    margin: 0;
}

.founder__text-box > h2 {
    font-size: 40px;
    text-align: center;
}

.founder__text-box {
    width: 50%;
}

.founder__text-box > p {
    text-align: center;
    font-size: 18px;
}

.founder__container {
    display: flex;
    justify-content: space-between;
    gap: 60px;
}

.fouder__elon-box {
    width: 300px;
    height: 200px;
    border-radius: 15px;
    background-color: var(--colorGray);
    padding: 15px;
}

.box1 {transform: rotate(-5deg);}

.box2 {transform: rotate(5deg);}

.founder__elon {
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 15px;
}

.photo1 {background-image: url(../img/img9.jpg);}

.photo2 {background-image: url(../img/img11.jpg);}

@media (max-width: 1200px) {

    .banner__container > h1 {font-size: 8vw;}

    .banner__container > h3 {font-size: 2vw;}

    .about-company {padding: 75px 50px;}

    .history {padding: 100px 50px;}

    .fouder__elon-box {display: none;}

    .founder__container {justify-content: center;}

    .founder {padding: 75px 50px;}

    .founder__text-box {width: 100%;}

    .header__container {flex-direction: row-reverse;}

    .header__list {
        flex-direction: column;
        width: 300px;
        height: 100vh;
        justify-content: flex-start;
        align-items: flex-start;
        position: absolute;
        left: -300px;
        top: 0;
        z-index: 999;
        background-color: var(--colorGray);
        transition: all .2s ease-in-out;
        padding: 30px;
    }

    .menu_active {left: 0;}

    .header__adaptive-list {
        gap: 15px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .burger-btn {display: block;}

    .falcon__text-block > p {font-size: 1.25vw;}
}

@media (max-width: 767px) {
    .falcon__container {
        justify-content: center;
        flex-wrap: wrap;
    }

    .falcon__text-block > p {font-size: 16px;}

    .history {padding: 75px 25px;}

    .about-company {padding: 50px 25px;}
}

@media (max-width: 575px) {

    .falcon__text-block > p {font-size: 2.5vw;}

    .about-company > h1, .history > h1, .falcon > h1, .founder > h1 {font-size: 45px;}
    
    .about-company > h3, .history > h3, .falcon__box > h3, .founder__text-box > h2 {font-size: 25px;}

    .about-company > p, .history > p, .founder__text-box > p {font-size: 14px;}

}