


.contacts-box{
    background: var(--colors-grey-light-2);


    .havequestion__form{
        background-color: #fff;
    }

    .havequestion__box{
        align-items: inherit;
        gap: 20px;
    }

    .havequestion__main{
        min-height: 100%;
    }
}


.contacts{
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;

    .contacts-item{

        position: relative;
        z-index: 3;
        display: flex;
        align-items: center;

        &__box{
            width: 100%;
            padding: 40px clamp(15px, 3.333vw, 40px);
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            position: relative;
            z-index: 3;
        }

        &:nth-child(1){
            background: var(--colors-primary);
            height: 60%;
            width: 100%;
            position: relative;

            &::before{
                position: absolute;
                display: block;
                content: '';
                width: 277px;
                height: 277px;
                bottom: 5px;
                right: 5px;
                background-image: url(/img/logo-icon.svg);
                background-repeat: no-repeat;
                background-size: contain;
                z-index: -1;

                @include mobile{
                    width: 180px;
                    height: 180px;
                }
            }
        }
        &:nth-child(2){
            background: var(--colors-grey-light-1);
            height: 40%;
            width: 100%;
        }

        &__title{
            font-family: var(--second-family);
            font-weight: 700;
            font-size: clamp(24px, 3.733vw, 36px);
            line-height: 140%;
            letter-spacing: 0.01em;
            text-transform: uppercase;
            color: var(--colors-white);
            margin-bottom: 20px;
        }

        &__item{
            font-family: var(--font-family);
            font-weight: 700;
            font-size: 20px;
            line-height: 220%;
            color: var(--colors-white);
            
            padding: 5px 0;
            padding-left: 37px;
            background-position: top 15px left;
            background-repeat: no-repeat;

            @include mobile {
                font-size: 16px;
                background-position: top 11px left;
            }

            &--tel{ 
                background-image: url(/img/icons/tel.svg);
                &:hover{
                    text-decoration: underline;
                }
            }
            &--mail{
                background-image: url(/img/icons/mail.svg);
                text-decoration: underline;

                &:hover{
                    text-decoration: none;
                }
            }
            &--map{
                background-image: url(/img/icons/map-pin.svg);
            }
            &--time{
                background-image: url(/img/icons/clock.svg);
                span{
                    display: block;
                }
            }

        }

        

    }

}   
