.cards-inners,
.cards-sub {
    position: relative;
    display: flex
}

.inner-section-seo {
    background: radial-gradient(var(--seo2), rgb(230, 165, 1, .75)), url(../Assets/Handshake.webp) no-repeat !important;
    background-position: 100% 0;
    background-size: cover !important
}

.inner-section-site {
    background: radial-gradient(var(--site2), rgb(64, 145, 108, 0.8)), url(../Assets/Handshake.webp) no-repeat !important;
    background-position: 100% 0;
    background-size: cover !important
}

.inner-section-Brand {
    background: radial-gradient(var(--branding2), rgb(0, 126, 180, .8)), url(../Assets/Handshake.webp) no-repeat !important;
    background-position: 100% 0;
    background-size: cover !important
}

.inner-section-DMS {
    background: radial-gradient(var(--digital2), rgba(164, 66, 0, 0.8)), url(../Assets/Handshake.webp) no-repeat !important;
    background-position: 100% 0;
    background-size: cover !important
}

.inner-section-lead {
    background: radial-gradient(var(--lead2), rgba(16, 177, 102, 0.8)), url(../Assets/Handshake.webp) no-repeat !important;
    background-position: 100% 0;
    background-size: cover !important
}

.inner-section-videos {
    background: radial-gradient(var(--videos2), rgba(24, 78, 119, 0.8)), url(../Assets/Handshake.webp) no-repeat !important;
    background-position: 100% 0;
    background-size: cover !important
}

.inner-section-online {
    background: radial-gradient(var(--online2), rgba(209, 0, 150, 0.7)), url(../Assets/Handshake.webp) no-repeat !important;
    background-position: 100% 0;
    background-size: cover !important
}

.inner-section-1 {
    /* background: radial-gradient(var(--seo2), rgba(104, 6, 104, .825)), url(../Assets/Handshake.webp) no-repeat; */
    background-size: cover !important;
    background-position: 100% 0 !important;
    min-height: 100vh;
    max-width: 100%;
    width: 100%;
    overflow: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
    -ms-word-break: break-word;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    word-wrap: break-word !important;
    padding-top: 100px !important
}

.cards-inners {
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap
}

.cards-sub {
    min-height: 30rem;
    max-width: 32%;
    margin: .8% .66%;
    overflow: hidden;
    background-size: cover;
    border-radius: .5rem;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
    border: 3px solid #fff;
    transition: border .5s ease-in;
    text-align: end
}

.cards-sub-1:hover,
.cards-sub:hover {
    border: 3px solid var(--seo2);
    transition: border .5s ease-in
}

.cards-sub h2 {
    opacity: .1;
    transition: opacity .3s ease-in, top .5s ease-in;
    position: absolute;
    left: 4%;
    top: -8%;
    font-size: 160px
}

.cards-sub:hover {
    cursor: pointer
}

.cards-sub:hover h2 {
    opacity: 1;
    color: var(--seo);
    transition: opacity .5s ease-in, top .7s ease-in;
    top: 75%
}

.cards-sub-1,
.cards-sub-2,
.cards-sub-3,
.cards-sub-4,
.cards-sub-5,
.cards-sub-6,
.cards-sub-7 {
    background: linear-gradient(360deg, #000, #000);
    transition: background 1s ease-in-out;
    background-position: 0 50%
}

.cards-sub-1:hover {
    background: linear-gradient(360deg, #000, var(--seo2));
    background-size: cover;
    background-position: 50% 50%
}

.cards-sub-1:hover h2 {
    color: var(--seo2)
}

.cards-sub-2:hover {
    background: linear-gradient(360deg, #000, var(--site2));
    background-size: cover;
    transition: border .5s ease-in;
    background-position: 50% 50%;
    border: 3px solid var(--site2)
}

.cards-sub-2:hover h2 {
    color: var(--site2)
}

.cards-sub-3:hover {
    background: linear-gradient(360deg, #000, var(--branding2));
    background-size: cover;
    transition: border .5s ease-in;
    background-position: 50% 50%;
    border: 3px solid var(--branding2)
}

.cards-sub-3:hover h2 {
    color: var(--branding2)
}

.cards-sub-4:hover {
    background: linear-gradient(360deg, #000, var(--digital2));
    background-size: cover;
    transition: border .5s ease-in;
    background-position: 50% 50%;
    border: 3px solid var(--digital2)
}

.cards-sub-4:hover h2 {
    color: var(--digital2)
}

.cards-sub-5:hover {
    background: linear-gradient(360deg, #000, var(--lead2));
    background-size: cover;
    transition: border .5s ease-in;
    background-position: 50% 50%;
    border: 3px solid var(--lead2)
}

.cards-sub-5:hover h2 {
    color: var(--lead2)
}

.cards-sub-6:hover {
    background: linear-gradient(360deg, #000, var(--videos2));
    background-size: cover;
    transition: border .5s ease-in;
    background-position: 50% 50%;
    border: 3px solid var(--videos2)
}

.cards-sub-6:hover h2 {
    color: var(--videos2)
}

.cards-sub-7:hover {
    background: linear-gradient(360deg, #000, var(--online2));
    background-size: cover;
    transition: border .5s ease-in;
    background-position: 50% 50%;
    border: 3px solid var(--online2)
}

.cards-sub-7:hover h2 {
    color: var(--online2)
}

.cards-sub:nth-child(2),
.cards-sub:nth-child(5),
.cards-sub:nth-child(8) {
    transform: translateY(50px)
}

.cards-sub:nth-child(3),
.cards-sub:nth-child(6),
.cards-sub:nth-child(9) {
    transform: translateY(100px)
}

.cta-inner {
    min-height: 55rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background: linear-gradient(140deg, #fff 40%, transparent), url(../Assets/SEOCTA.jpg)
}

.cta-seo {
    background: linear-gradient(180deg, #ffffff 15%, rgba(0, 0, 0, .188)) 60% 5rem, url(../Assets/SEOCTA.jpg) 60% 5rem
}

.cta-site {
    background: linear-gradient(110deg, #fff 40%, rgba(0, 0, 0, .188)) 0 100%, url(../Assets/site2_11zon.jpg) 0 100%
}

.cta-branding {
    background: linear-gradient(110deg, #fff 40%, rgba(0, 0, 0, .188)) 0 100%, url(../Assets/BrandingCta_11zon.jpg) 0 100%
}

.cta-DMS {
    background: linear-gradient(110deg, #fff 40%, rgba(0, 0, 0, .188)) 0 100%, url(../Assets/DMS_11zon.jpg) 0 100%
}

.cta-leads {
    background: linear-gradient(130deg, #fff 20%, rgba(0, 0, 0, .188)) 0 100%, url(../Assets/LeadGen.jpg) 0 100%
}

.cta-videos {
    background: linear-gradient(180deg, #fff 8%, rgba(0, 0, 0, .702)) 0 100%, url(../Assets/VideosCTA.jpg) 0 100%
}

.cta-social-media {
    background: linear-gradient(180deg, #fff 20%, transparent) 0 100%, url(../Assets/Online-Presence-cta_11zon.jpg) 0 100%
}

@media screen and (max-width:800px) {
    .inner-section-DMS {
        background: radial-gradient(var(--digital2), rgba(164, 66, 0, .8)), url(../Assets/Handshake.webp) no-repeat !important
    }

    .inner-section-lead {
        background: radial-gradient(var(--lead2), rgba(16, 177, 102, .8)), url(../Assets/Handshake.webp) no-repeat !important
    }

    .inner-section-online {
        background: radial-gradient(var(--online2), rgba(193, 18, 30, .8)), url(../Assets/Handshake.webp) no-repeat !important
    }

    .inner-section-videos {
        background: radial-gradient(var(--videos2), rgba(24, 78, 119, .822)), url(../Assets/Handshake.webp) no-repeat !important
    }

    .inner-section-1 {
        background: radial-gradient(var(--seo2), rgba(104, 6, 104, .825)), url(../Assets/Handshake.webp) no-repeat;
        background-size: cover !important;
        background-position: 20% 0 !important;
        min-height: 36rem;
        border-bottom: 5px solid #000
    }

    .cards-sub {
        min-height: 28rem;
        max-width: 100%
    }

    .cards-sub:nth-child(2),
    .cards-sub:nth-child(3),
    .cards-sub:nth-child(5),
    .cards-sub:nth-child(6),
    .cards-sub:nth-child(8),
    .cards-sub:nth-child(9) {
        transform: translateY(0)
    }

    .cta-inner {
        justify-content: flex-start;
        min-height: 45rem;
        padding-top: 15%;
        background: linear-gradient(140deg, #ffffff 25%, transparent) 60% 5rem, url(../Assets/SEOCTA.jpg) 60% 5rem
    }

    .cta-seo {
        background: linear-gradient(180deg, #ffffff 15%, rgba(0, 0, 0, .188)) 60% 5rem/cover, url(../Assets/SEOCTA.jpg) 60% 5rem/cover
    }

    .cta-site {
        background: linear-gradient(180deg, #ffffff 15%, rgba(0, 0, 0, .188)) 60% 5rem/cover, url(../Assets/site2_11zon.jpg) 60% 5rem/cover
    }

    .cta-branding {
        background: linear-gradient(180deg, #fff 25%, rgba(0, 0, 0, .188)) 80% 0/cover, url(../Assets/BrandingCta_11zon.jpg) 80% 0/cover
    }

    .cta-DMS {
        background: linear-gradient(180deg, #fff 25%, rgba(0, 0, 0, .188)) 80% 100%/cover, url(../Assets/DMS_11zon.jpg) 40% 100%/cover
    }

    .cta-leads {
        background: linear-gradient(180deg, #fff 5%, rgba(0, 0, 0, .3)) 80% 15rem/cover, url(../Assets/LeadGen.jpg) 80% 15rem/cover
    }

    .cta-videos {
        background: linear-gradient(180deg, #fff 22%, rgba(0, 0, 0, .351)) 80% 10rem/cover, url(../Assets/VideosCTA.jpg) 80% 10rem/cover
    }

    .cta-social-media {
        background: linear-gradient(180deg, #fff 20%, transparent) 60% 8rem/cover, url(../Assets/Online-Presence-cta_11zon.jpg) 60% 8rem/cover
    }
}