@font-face {
    font-family: 'FC-Iconic-Medium';
    src: url(fonts/FC-Iconic/FCIconic-Medium.otf);
}
@font-face {
    font-family: 'FC-Iconic-Regular';
    src: url(fonts/FC-Iconic/FCIconic-Regular.otf);
}
@font-face {
    font-family: 'FC-Iconic-Semibold';
    src: url(fonts/FC-Iconic/FCIconic-SemiBold.otf);
}
@font-face {
    font-family: 'FC-Iconic-Bold';
    src: url(fonts/FC-Iconic/FCIconic-Bold.otf);
}
@font-face {
    font-family: 'FC-Minimal-Regular';
    src: url(fonts/FC-Minimal/FC\ Minimal\ Regular.ttf);
}
@font-face {
    font-family: 'FC-Minimal-Bold';
    src: url(fonts/FC-Minimal/FC\ Minimal\ Bold.ttf);
}

* {
    font-weight: 500;
}


body {
    width: 100%;
    margin: 0;
    padding: 0;
}

.container {
    margin-top: 15vh;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.container img {
    width: 120vw;
    height: 85vh;
    object-fit: cover;
    object-position: -12vw;
    z-index: 0;
}

.container::before {
    margin-top: 15vh;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 85vh;
    background-color: black;
    opacity: 0.5;
    z-index: 1;
}

.container h1 {
    font-weight: 500;
    font-family: "FC-Minimal-Regular";
    font-size: 15vh;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    z-index: 2;
}

.container h3 {
    font-weight: 500;
    font-family: 'FC-Iconic-Medium';
    letter-spacing: 1.5px;
    font-size: 5vh;
    position: absolute;
    top: 41%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    z-index: 2;
}

.container p {
    text-align: center;
    font-weight: 500;
    font-family: 'FC-Iconic-Medium';
    letter-spacing: 1.5px;
    font-size: 2.5vh;
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    z-index: 2;
    line-height: 150%;
    max-width: 100vw;
}

.container a {
    text-decoration: none;
    font-family: 'FC-Iconic-Regular';
    font-size: 25px;
    position: absolute;
    top: 74.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    z-index: 2;
    background-color: rgba(255, 255, 255, 0.15);
    padding: 1.5vh 4vw;
    border-radius: 50px;
    border-width: 2px;
    border-color: white;
    border-style: solid;
}

.container :hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.aiaun {
    margin-top: -5px;
    height: 100vh;
    background-color: rgb(248, 248, 248);
}

.aiaun img {
    margin-top: 70px;
    width: 600px;
    height: 500px;
    object-fit: cover;
    border-radius: 30px;
    margin-left: 70px;
}

.aiaun img,.aiaun .text {
    display: inline-block;
    vertical-align: top;
}

.aiaun h1 {
    font-family: 'FC-Iconic-SemiBold';
    font-weight: 500;
    margin: 0;
    font-size: 60px;
}

.aiaun h2 {
    margin: 0;
    font-family: 'FC-Iconic-Medium';
    font-weight: 500;
    font-size: 25px;
}

.aiaun a {
    margin-top: 50px;
    text-decoration: none;
    color: white;
    font-family: 'FC-Iconic-Medium';
    background-color: #272729;
    padding: 10px 50px;
    border-radius: 50px;
}

.aiaun .text {
    margin-top: 100px;
    margin-left: 60px;
    text-align: center;
}

@media (max-width: 1500px) {
    .container h1 {
        font-size: 13vh;
        top: 28%;
    }
    
    .container h3 {
        font-size: 4vh;
        top: 42.5%;
    }
    
    .container p {
        font-size: 2.5vh;
        top: 56%;
    }
    
    .container a {
        font-size: 2.5vh;
        top: 77%;
    }
}

@media (max-width: 1050px) {
    body {
        overflow: hidden;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    /* Container */
    .container {
        position: relative;
        margin-top: 0;
    }
    
    .container img {
        top: 0;
        left: 0;
        width: 100%;
        height: 105vh;
        object-position: 30% 50%;
    }
    
    .container::before {
        margin-top: 0;
        top: 0;
        left: 0;
        content: "";
        position: absolute;
        width: 100%;
        height: 105vh;
        background-color: black;
        opacity: 0.4;
        z-index: 1;
    }
    
    .container h1,
    .container h3,
    .container p,
    .container a {
        color: white;
        z-index: 2;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    
    .container h1 {
        font-size: 11vh;
        top: 9%;
        text-align: center;
        width: 90%;
        max-width: 600px;
        line-height: 1.3;
    }
    
    .container h3 {
        font-size: 3vh;
        top: 25.5%;
        text-align: center;
        width: 90%;
        max-width: 600px;
        line-height: 1.3;
    }
    
    .container p {
        font-size: 2vh;
        top: 33%;
        text-align: center;
        width: 100%;
        max-width: 75vw;
        line-height: 1.4;
        font-weight: 500;
    }
    
    .container a {
        font-size: 2.5vh;
        top: 68%;
        left: 50%;
        padding: 1.5vh 7vh;
    }
}

@media (max-width: 768px) {
    .container h1 {
        font-size: 9.4vh;
        top: 15%;
    }
    
    .container h3 {
        font-size: 3vh;
        top: 28%;
    }
    
    .container p {
        font-size: 13px;
        top: 36%;
        width: 100%;
        max-width: 95vw;
    }
    
    .container a {
        font-size: 2.5vh;
        top: 68%;
        left: 50%;
        padding: 1vh 6vh;
        border-width: 1.7px;
    }
}