@use '../../utils' as *;

.latest-services-2 {

    .section {
        &__title-wrapper {
            max-width: 650px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }

        &__title {
            font-weight: var(--rr-fw-medium);
            color: var(--rr-theme-black);
            text-transform: capitalize;
        }
    }

    .mb-minus-30 {
        margin-bottom: -30px;
    }

    &__item {
        display: flex;
        padding: 10px;
        align-items: center;
        @include border-radius(20px);
        border: 2px solid #E4E5E5;
        overflow: hidden;
        @extend %rr-transition-3;
        margin-bottom: 30px;

        @media #{$sm, $xs} {
            display: block;
        }
        
        &:hover {
            background-color: var(--rr-common-white);
            border-color: transparent;
            box-shadow: 0px 5px 60px rgba(0, 0, 0, 0.05);

        }
        
    }
    
    &__media {
        
        img {
            overflow: hidden;
            @include border-radius(10px);

            @media #{$sm, $xs} {
                max-width: 100%;
                height: 250px;
                width: 100%;
                object-fit: cover;
            }
        }
    }
    
    &__content {
        padding: 20px;

        @media #{$xs} {
            padding: 30px 10px;
         }

        h4 {
            a {
                color: var(--rr-theme-black);
            
                &:hover {
                    color: var(--rr-theme-glow);
                }
            }
        }
    }

    &__wrapper {
        margin-bottom: 45px;
        gap: 20px;
        display: flex;
        align-items: center;

        @media #{$sm, $xs} {
           margin-bottom: 30px;
        }
    }
}