/* =====================================================
   CABLETECH SERVICES
===================================================== */

.ct-services-section {

    position: relative;

    width: 100%;

    padding: 105px 0 115px;

    overflow: hidden;

    background: #fff;

}


/* =====================================================
   LARGE GREY BACKGROUND
===================================================== */

.ct-services-bg {

    position: absolute;

    left: 0;

    top: 0;

    width: 78%;

    height: 100%;

    background: #eeeeee;

    border-radius: 0 320px 320px 0;

    z-index: 0;

}


/* =====================================================
   CONTAINER
===================================================== */

.ct-services-container {

    position: relative;

    z-index: 2;

    display: flex;

    width: 100%;

    max-width: 1780px;

    margin: 0 auto;

}


/* =====================================================
   VERTICAL SERVICES TEXT
===================================================== */

.ct-services-side-title {

    width: 270px;

    min-width: 270px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}


.ct-services-side-title span {

    display: block;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 100px;

    line-height: .8;

    font-weight: 800;

    letter-spacing: -3px;

    color: #050505;

    writing-mode: vertical-rl;

    transform: rotate(180deg);

    white-space: nowrap;

}


/* =====================================================
   MAIN AREA
===================================================== */

.ct-services-main {

    width: calc(
        100% - 270px
    );

    min-width: 0;

}


/* =====================================================
   HEADER
===================================================== */

.ct-services-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    padding: 0 45px 42px 0;

}


.ct-section-label {

    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 26px;

    color: #ff0000;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 15px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 3px;

}


.ct-section-label span {

    width: 46px;

    height: 2px;

    display: block;

    background: #ff0000;

}


.ct-services-heading h2 {

    margin: 0;

    color: #171717;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 54px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: -1px;

}


.ct-services-heading h2 strong {

    font-weight: 800;

}


/* =====================================================
   CONTROLS
===================================================== */

.ct-services-controls {

    display: flex;

    gap: 14px;

}


.ct-services-controls button {

    width: 88px;

    height: 45px;

    border: 0;

    border-radius: 30px;

    background: #fff;

    color: #202020;

    font-size: 28px;

    line-height: 1;

    display: flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease;

}


.ct-services-controls button:hover {

    background: #ff0000;

    color: #fff;

    transform: translateY(-3px);

}


.ct-services-controls button span {

    position: relative;

    top: -2px;

}


/* =====================================================
   SLIDER
===================================================== */

.ct-services-slider {

    width: 100%;

    overflow: hidden;

}


.ct-services-track {

    display: flex;

    gap: 28px;

    width: max-content;

    transition:
        transform .65s
        cubic-bezier(
            .77,
            0,
            .175,
            1
        );

}


/* =====================================================
   SERVICE CARD
===================================================== */

.ct-service-card {

    position: relative;

    width: 335px;

    min-width: 335px;

    overflow: hidden;

    border-radius: 0 0 18px 18px;

    background: #fff;

    box-shadow:
        0 12px 35px
        rgba(
            0,
            0,
            0,
            .08
        );

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.ct-service-card:hover {

    transform:
        translateY(-8px);

    box-shadow:
        0 20px 45px
        rgba(
            0,
            0,
            0,
            .13
        );

}


/* =====================================================
   IMAGE
===================================================== */

.ct-service-image {

    position: relative;

    width: 100%;

    height: 225px;

    overflow: visible;

    background: #ddd;

}


.ct-service-image::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -5px;

    width: 100%;

    height: 5px;

    background: #ff0000;

    z-index: 4;

}


.ct-service-image img {

    width: 100%;

    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .6s ease;

}


.ct-service-card:hover
.ct-service-image img {

    transform: scale(1.07);

}


/* =====================================================
   ORANGE CIRCLE ICON
===================================================== */

.ct-service-icon {

    position: absolute;

    left: 50%;

    bottom: -31px;

    transform:
        translateX(-50%);

    width: 92px;

    height: 92px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #ff0000;

    border: 5px solid #fff;

    color: #fff;

    font-size: 35px;

    z-index: 8;

    transition:
        transform .35s ease;

}


.ct-service-card:hover
.ct-service-icon {

    transform:
        translateX(-50%)
        rotate(12deg)
        scale(1.06);

}


/* =====================================================
   CONTENT
===================================================== */

.ct-service-content {

    position: relative;

    padding: 47px 28px 28px;

    text-align: center;

    min-height: 215px;

}


.ct-service-content h3 {

    margin: 0 0 18px;

    color: #202020;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 27px;

    line-height: 1.05;

    font-weight: 800;

}


.ct-service-content p {

    margin: 0;

    color: #777;

    font-family:
        "Barlow",
        sans-serif;

    font-size: 16px;

    line-height: 1.7;

}


/* =====================================================
   SERVICE LINK
===================================================== */

.ct-service-link {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 20px;

    color: #ff0000;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .8px;

    opacity: 0;

    transform: translateY(10px);

    transition: .3s ease;

}


.ct-service-link i {

    transition: .3s ease;

}


.ct-service-link:hover i {

    transform:
        translate(
            3px,
            -3px
        );

}


.ct-service-card:hover
.ct-service-link {

    opacity: 1;

    transform:
        translateY(0);

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 1400px) {

    .ct-services-side-title {

        width: 220px;

        min-width: 220px;

    }


    .ct-services-main {

        width:
            calc(
                100% - 220px
            );

    }


    .ct-service-card {

        width: 315px;

        min-width: 315px;

    }

}


@media (max-width: 1100px) {

    .ct-services-bg {

        width: 90%;

        border-radius:
            0 180px 180px 0;

    }


    .ct-services-side-title {

        width: 130px;

        min-width: 130px;

    }


    .ct-services-side-title span {

        font-size: 72px;

    }


    .ct-services-main {

        width:
            calc(
                100% - 130px
            );

    }


    .ct-services-heading h2 {

        font-size: 46px;

    }

}


@media (max-width: 767px) {

    .ct-services-section {

        padding:
            70px 0 80px;

    }


    .ct-services-bg {

        width: 100%;

        height: 100%;

        border-radius: 0 0 100px 0;

    }


    .ct-services-container {

        display: block;

    }


    .ct-services-side-title {

        display: none;

    }


    .ct-services-main {

        width: 100%;

    }


    .ct-services-header {

        padding:
            0 20px 30px;

        align-items:
            flex-end;

    }


    .ct-section-label {

        margin-bottom: 18px;

        font-size: 12px;

        letter-spacing: 2px;

    }


    .ct-section-label span {

        width: 30px;

    }


    .ct-services-heading h2 {

        font-size: 40px;

        line-height: 1.05;

    }


    .ct-services-controls {

        gap: 8px;

    }


    .ct-services-controls button {

        width: 48px;

        height: 42px;

        font-size: 22px;

    }


    .ct-services-slider {

        padding-left: 20px;

    }


    .ct-services-track {

        gap: 18px;

    }


    .ct-service-card {

        width: 300px;

        min-width: 300px;

    }


    .ct-service-image {

        height: 205px;

    }


    .ct-service-content {

        min-height: 205px;

        padding:
            45px 22px 25px;

    }


    .ct-service-content h3 {

        font-size: 25px;

    }


    .ct-service-content p {

        font-size: 14px;

        line-height: 1.6;

    }


    .ct-service-link {

        opacity: 1;

        transform: none;

    }

}


@media (max-width: 450px) {

    .ct-services-header {

        display: block;

    }


    .ct-services-controls {

        margin-top: 22px;

    }


    .ct-service-card {

        width: calc(
            100vw - 45px
        );

        min-width: calc(
            100vw - 45px
        );

    }

}