.services-single {
    position: relative;
    display: flex
}

.services-single-left {
    width: 26%;
    max-width: 374px;
    transition: 0.4s all;
    -webkit-transition: 0.4s all;
    -moz-transition: 0.4s all
}

.services-single-left-content {
    display: flex;
    flex-direction: column;
}

.services-single-left-content::-webkit-scrollbar {
    width: 6px
}

.services-single-left-content::-webkit-scrollbar-track {
    background: #DCDCDC
}

.services-single-left-content::-webkit-scrollbar-thumb {
    background-color: #252525
}

@keyframes fix {
    0% {
    }
    100% {
        position: fixed;
        top: 8px
    }
}

/*.services-single-left-fixed {*/
/*    animation-name: fix;*/
/*    animation-fill-mode: forwards*/
/*}*/

.services-single-right {
    width: 70%;
    margin-left: auto
}

.single-border {
    position: relative;
    border: 4px solid #222831;
    padding: 18px
}

.single-border::after {
    position: absolute;
    display: block;
    content: "";
    width: 61%;
    height: 64%;
    background-color: #222831;
    top: 7px;
    right: 7px;
    max-height: 421px
}

.services-single-image img {
    position: relative;
    z-index: 10
}

.services-single-image {
}

.left-link {
    position: relative;
    display: flex;
    padding: 14px 0;
    transition: 0.4s all;
    -webkit-transition: 0.4s all;
    -moz-transition: 0.4s all;
    border-bottom: 1px solid #E6E6E6;
    text-decoration: none;
    color: #222831
}

.left-link:hover .menu-title {
    color: #fff;
}

.menu-title {
    color: #222831;
    transition: 0.4s all;
    -webkit-transition: 0.4s all;
    -moz-transition: 0.4s all;
}

.left-link:last-child {
    border-bottom: none
}

.left-link:hover {
    background-color: #384b47
}

.left-link:hover .svg-wrap {
    opacity: 1;
}

.left-link-text {
    position: relative;
    margin-right: 18px;
    transition: 0.4s all;
    -webkit-transition: 0.4s all;
    -moz-transition: 0.4s all;
}

.left-link:hover .left-link-text:before {
    background-color: #fff;
}

.left-link-text::before {
    position: absolute;
    left: 2px;
    display: block;
    content: "";
    width: 2px;
    height: 100%;
    background-color: #384b47;
    transition: 0.4s all;
    -webkit-transition: 0.4s all;
    -moz-transition: 0.4s all
}

.single-page-description {
    margin-top: 34px;
    color: #6A6A6A
}

.open-services {
    display: none;
    width: max-content;
    border-radius: 2px;
    padding: 6px 14px;
    background-color: #A89255;
    color: #fff;
    margin-bottom: 30px
}

.services-close {
    display: none;
    position: absolute;
    top: 4px;
    right: 4px;
    max-width: 23px
}

.background-lock {
    overflow-y: hidden
}

.left-link:hover .svg-wrap {
    display: block;
    opacity: 1;
}

.svg-wrap {
    fill: #fff;
    margin-right: 10px;
    display: none;
    opacity: 0;
}

.svg-wrap svg {
    transform: rotate(180deg);
}

@media (max-width: 1559px) {
}

@media (max-width: 1024px) {
    .services-close {
        display: block
    }

    .left-link-text::before {
        display: none
    }

    .left-link-text {
        padding: 0;
    }

    .menu-title {
        text-align: center;
    }

    .services-single-right {
        width: 100%
    }

    .services-single-left {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 200
    }

    @keyframes example {
        from {
            transform: scale(0.8)
        }
        to {
            transform: scale(1)
        }
    } .services-opened .services-single-left-content {
          animation-name: example;
          animation-duration: 0.8s;
          animation-fill-mode: forwards
      }

    .services-opened {
        display: flex;
        justify-content: center;
        align-items: center
    }

    .open-services {
        display: block
    }

    .services-single-left-content {
        max-width: 90%;
        position: relative;
        background-color: #fff;
        border-radius: 4px;
        padding: 25px 28px;
        max-height: 70vh;
        overflow-y: auto
    }

    .left-link {
        padding: 12px;
    }

    .single-border {
        padding: 14px
    }

    .single-border::after {
        top: 6px;
        right: 6px
    }

    .left-link-text {
        display: none;
    }
}

@media (max-width: 575px) {
    .services-single-left-content {
        padding: 10px 26px
    }

    .left-link-text {
        padding: 0 14px
    }

    .menu-title {
        font-size: 15px;
    }

    .single-border {
        padding: 8px
    }

    .single-border::after {
        top: 4px;
        right: 4px
    }
}