/* 
    Table of content
    1. HERO
    2. SERVICE
*/

/* 1. HERO */
.hero {
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 50%); 
}

.hero .container {
    position: relative;
    padding: 12rem 0;
    background-color: black;
    display: flex;
    gap: 0 10rem;
}

.hero .container::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10rem;
    width: 10rem;
    height: 100%;
    border-radius: 0 0 0 .3rem;
    background-color: black;
}

.hero .container::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: -7.5rem;
    width: 9.2rem;
    height: 15rem;    
    background-image: url(../images/icon-lightning-green.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
}

.hero .image-wrapper {
    flex: 0 0 68rem;
    margin-left: -30rem;
}

.hero .image {    
    position: relative;
    width: 100%;
    height: 0;    
    padding-top: 100%;
    border-radius: .3rem;
    overflow: hidden;
}

.hero .image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero .content-wrapper {
    flex: 1 1 auto;
    position: relative;
    z-index: 1;
    padding-top: 10rem;
    color: white;
}

.hero h1 {
    width: calc( 100% + 20rem );
    margin-left: -20rem;
}

.hero .btns {
    margin-top: 4rem;
}

/* 2. SERVICE */
.hero-service .image-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 50%;
}

.hero-service .image-wrapper::before {
    content: '';
    position: absolute;
    z-index: 1;
    right: var(--grid-padding);
    bottom: -7.5rem;
    width: 9.2rem;
    height: 15rem;    
    background-image: url(../images/icon-lightning-green.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
}

.hero-service .image-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-service .content-wrapper {
    max-width: var(--grid-size-sm);
    margin: 0 auto;
    padding: 9rem 0;
}

/* RESIZE */
@media (max-width: 1600px) {
    /* 1. HERO */
    .hero {
        background: black;
    }

    .hero .container::before {
        display: none;
    }

    .hero .image-wrapper {
        flex: 0 0 58rem;
        margin-left: -20rem;
    }
}

@media (max-width: 1380px) {
    /* 1. HERO */
    .hero .container::before {
        display: none;
    }
}

@media (max-width: 1280px) {
    /* 1. HERO */
    .hero .image-wrapper {
        flex: 0 0 43rem;
        margin-left: -5rem;
    }

    .hero h1 {
        width: 100%;
        margin-left: 0;
        font-size: 6rem;
    }
}

@media (max-width: 1100px) {
    /* 1. HERO */
    .hero .container {
        gap: 0 6rem
    }

    .hero .image-wrapper {
        flex: 0 0 35rem;
    }

    .hero .btns {
        flex-wrap: wrap;
    }
}

@media (max-width: 899px) {
    /* 1. HERO */
    .hero .image-wrapper {
        flex: 0 0 32rem;
        margin-left: -2rem;
    }

    .hero h1 {
        font-size: 5rem;
    }
}

@media (max-width: 767px) {
    /* 1. HERO */
    .hero .container {
        padding: 10rem 0;
        flex-direction: column;
        gap: 5rem 0;
    }

    .hero .container::after {
        bottom: -5rem;
        width: 6.1rem;
        height: 10rem;
    }

    .hero .image-wrapper {
        flex: inherit;
        width: calc( 50% + 2rem );
    }

    .hero .content-wrapper {
        flex: inherit;
        padding-top: 0;
    }

    /* 2. SERVICE */
    .hero-service .image-wrapper::before {
        bottom: -5rem;
        width: 6.1rem;
        height: 10rem;
    }
    
    .hero-service .content-wrapper {
        padding: 5rem 0 7rem;
    }
}

@media (max-width: 599px) {
    /* 1. HERO */
    .hero .image-wrapper {
        flex: inherit;
        width: calc( 75% + 2rem );
    }
}