@font-face {
    font-family: 'Mont-Heavy';
    src: url('font/Mont-HeavyDEMO.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Mont-ExtraLight';
    src: url('font/Mont-ExtraLightDEMO.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

.hero{
    position: relative;
    background-image: url('images/Background.jpg');
    background-repeat: no-repeat;
    background-size: cover;  
    height: 120vh;
}

.section-1 {
    position: relative;
    background: linear-gradient(96deg, #568BD7 -17.08%, #7B94B7 17.27%, #4A678F 31.21%, #092C5C 68.28%);
    background-repeat: no-repeat;
    background-size: cover;  
    width: auto;
    height: 70vh;
    margin-top: -20vh;
    z-index: 10;
}

.object {
    width: 100%;
    height: 100%;
    animation: fadeInUp 2.0s ease-out;
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.text {
    position: absolute;
    top: 30%;
    left: 8%;
    color: white;
    z-index: 20;
    animation: textFadeInUp 1.8s ease-out;
}

@keyframes textFadeInUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.controller-image{
    margin-top: 15vh;
}

.section-title{
    font-family: 'Mont-Heavy', sans-serif;
    font-weight: normal;
    font-size: 52px;
}

.text-wrapper {
    width: 100%; 
}

.section-description{
    font-family: 'Mont-ExtraLight', sans-serif;
    font-weight: normal;
    font-size: 24px;
    max-width: 80%
}

@media (max-width: 768px) {
    .hero {
        min-height: 80vh;
        text-align: center;
    }
    
    .text {
        position: absolute;
        top: 15%;
        left: -3%;
    }
    
    .object {
        max-height: 60vh;
        margin-top: 20vh;
    }
    
    .section-1 {
        margin-top: -57vh;
        min-height: 30vh;
    }

    .section-title{
    font-family: 'Mont-Heavy', sans-serif;
    font-weight: normal;
    font-size: 26px;
    }

    .section-description{
    font-family: 'Mont-ExtraLight', sans-serif;
    font-weight: normal;
    font-size: 14px;
    max-width: 100%
    }
}