@use '../globals' as u;
#contact-section{
    padding:var(--section-padding);
    letter-spacing: 1px;
}

.contact{
    padding: var(--container-padding);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap:3em;
    position: relative;
    @include u.breakpoint(medium){
        align-items: center;
        gap:5em;
    }

    &__wrapper{
        display: flex;
        flex-direction: column;
        align-items: start;
        justify-content: center;
        gap:1em;
        position: relative;

        @include u.breakpoint(medium){
            text-align: center;
            align-items: center;
            max-width: 45em;
        }
    }
    
    &__heading{
        font-size: var(--headerTwo-size);
        color: var(--secondaryUtil-color);
    }

    &__img{
        position: relative;
        border-radius: 1em;
        overflow: hidden;
        z-index: -1;
        width:90%;
        height:100%;
        display: block;
        
        @include u.breakpoint(medium){
            width:60%;
            max-width: 25em;
        }

        @include u.breakpoint(x-large) {
            max-width: 20em;
        }
        
        &::before{
            z-index: 1;
            width:100%;
            height:100%;
            content:'';
            background-color: black;
            opacity: .40;
            position:absolute;
        }
        
        img{
            width:100%;
            height:100%;
            object-fit: cover;
            display: block;
        }
    }

    &__button{
        padding:1.3em 3em;
        background-color: var(--util-color);
        border-radius: 5px;
        color:var(--body-color);
        z-index: 1;
        margin-top:1.5em;
    }
}