.zo-btn-slide {
    position: relative;
    background: var(--Primary);
    color: rgb(255, 255, 255);
    text-align: center;
    overflow: hidden;
    font-weight: normal;
    border-radius: 300px;
}

.zo-btn-slide:before {
    content: attr(wpl-hover);
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    opacity: 0;
    transition: all .25s ease-in-out;
}

.zo-btn-slide:hover {
    color: rgb(255, 255, 255);
}

/*------------ Top ------------*/

.zo-btn-slide-top:before {
    transform: translate(0, -250%);
}

.zo-btn-slide-top:hover:before {
    opacity: 1;
    transform: translate(0, -50%);
}

.zo-btn-slide-top span {
    display: block;
    transition: all .25s ease-in-out;
}

.zo-btn-slide-top:hover span {
    opacity: 0;
    transform: translate(0, 250%)
}

/*------------ Right ------------*/

.zo-btn-slide-right:before {
    transform: translate(100%, -50%);
}

.zo-btn-slide-right:hover:before {
    opacity: 1;
    transform: translate(0, -50%);
}

.zo-btn-slide-right span {
    display: block;
    transition: all .25s ease-in-out;
}

.zo-btn-slide-right:hover span {
    opacity: 0;
    transform: translate(100%, 0)
}

/*------------ Bottom ------------*/

.zo-btn-slide-bottom:before {
    transform: translate(0, 250%);
}

.zo-btn-slide-bottom:hover:before {
    opacity: 1;
    transform: translate(0, -50%);
}

.zo-btn-slide-bottom span {
    display: block;
    transition: all .25s ease-in-out;
}

.zo-btn-slide-bottom:hover span {
    opacity: 0;
    transform: translate(0, -250%)
}

/*------------ Left ------------*/

.zo-btn-slide-left:before {
    transform: translate(-100%, -50%);
}

.zo-btn-slide-left:hover:before {
    opacity: 1;
    transform: translate(0, -50%);
}

.zo-btn-slide-left span {
    display: block;
    transition: all .15s ease-in-out;
}

.zo-btn-slide-left:hover span {
    opacity: 0;
    transform: translate(100%, 0)
}

/*------------ Cube ------------*/

.zo-btn-border {
    padding: 0;
    position: relative;
    overflow: visible;
    border-radius: 0;
}

.zo-btn-border:before,
.zo-btn-border:after {
    position: absolute;
    content: '';
    right: 0;
    top: 0;
    background: var(--Primary);
    transition: all 0.3s ease;
}

.zo-btn-border:before {
    width: 2px;
    height: 0;
}

.zo-btn-border:after {
    width: 0;
    height: 2px;
}

.zo-btn-border:hover {
    background: transparent;
    color: rgb(145, 115, 170);
}

.zo-btn-border:hover:before {
    height: 100%;
}

.zo-btn-border:hover:after {
    width: 100%;
}

.zo-btn-border span {
    width: 100%;
    height: 100%;
    display: block;
    padding: 10px 30px;
    position: relative;
}

.zo-btn-border span:before,
.zo-btn-border span:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    background: var(--Primary);
    transition: all 0.25s ease;
}

.zo-btn-border span:before {
    content: '';
    width: 2px;
    height: 0;
}

.zo-btn-border span:hover:before {
    height: 100%;
}

.zo-btn-border span:after {
    width: 0;
    height: 2px;
}

.zo-btn-border span:hover:after {
    width: 100%;
}

.zo-header {
    width: 100%;
    display: inline-block;
    margin: 0 0 30px;
}

.zo-header strong {
    font-family: 'YekanBakh-Black';
    font-size: 2rem;
}

.zo-about-section {
    width: 100%;
    display: inline-block;
    padding: 30px 0;
    margin: 90px 0 0;
}

.zo-about-section .zo-content {
    padding: 0 0 0 125px;
    font-size: 1.10rem;
    line-height: 1.75;
    text-align: justify;
}

.zo-about-section .zo-content h2 {
    font-family: 'YekanBakh-Black';
    font-size: 2rem;
}

.zo-about-section .zo-thumbnail {
    position: relative;
}

.zo-about-section .zo-thumbnail img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 0 5px 0 rgb(30 25 30 / 15%);
}

.zo-about-section .zo-thumbnail:before {
    content: '';
    width: 300px;
    height: 450px;
    margin: 0 auto;
    position: absolute;
    top: -45px;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--Primary);
    color: rgb(255, 255, 255);
    border-radius: 35px;
    z-index: -1;
}

.zo-about-section .zo-thumbnail .zo-feature {
    max-width: 335px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 15px;
    font-size: 1.15rem;
    position: absolute;
    background: rgb(255, 255, 255);
    outline: 2px solid rgb(255, 255, 255);
    outline-offset: 5px;
    border-radius: 300px;
    box-shadow: 0 0 5px 0 rgb(30 25 30 / 15%);
    z-index: 1;
}

.zo-about-section .zo-thumbnail .zo-feature strong {
    display: block;
    margin: 0 15px 10px
}

.zo-about-section .zo-thumbnail .zo-feature span {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 1.5rem;
    color: rgb(255, 255, 255);
    border-radius: 300px;
    box-shadow: 0 0 5px 0 rgb(30 25 30 / 15%);
}

.zo-about-section .zo-thumbnail .zo-feature.zo-feature-1 {
    top: -90px;
    left: -90px;
    animation: MoveLeftRight 3s linear infinite;
}

.zo-about-section .zo-thumbnail .zo-feature.zo-feature-1 span {
    background: var(--Primary);
}

.zo-about-section .zo-thumbnail .zo-feature.zo-feature-2 {
    top: 90px;
    right: -90px;
    animation: MoveDownUp 3s linear infinite;
}

.zo-about-section .zo-thumbnail .zo-feature.zo-feature-2 span {
    background: var(--Primary);
}

.zo-about-section .zo-thumbnail .zo-feature.zo-feature-3 {
    bottom: -90px;
    right: 0;
    animation: MoveRightLeft 3s linear infinite;
}

.zo-about-section .zo-thumbnail .zo-feature.zo-feature-3 span {
    background: var(--Primary);
}

.zo-about-section .zo-thumbnail .zo-feature.zo-feature-4 {
    bottom: 90px;
    left: -90px;
    animation: MoveUpDown 3s linear infinite;
}

.zo-about-section .zo-thumbnail .zo-feature.zo-feature-4 img {
    width: 60px;
    height: 60px;
    float: right;
    border: 1px solid rgb(255, 255, 255);
    border-radius: 50%;
    filter: grayscale(1);
}

.zo-about-section .zo-thumbnail .zo-feature.zo-feature-4 ul {
    display: flex;
    align-items: center;
}

.zo-about-section .zo-thumbnail .zo-feature.zo-feature-4 ul li {
    display: inline-block;
    margin: 0 -5px;
}

@keyframes MoveDownUp {

    0%,
    100% {
        top: 30px;
    }

    50% {
        top: 60px;
    }
}

@keyframes MoveUpDown {

    0%,
    100% {
        bottom: 30px;
    }

    50% {
        bottom: 60px;
    }
}

@keyframes MoveLeftRight {

    0%,
    100% {
        left: -60px;
    }

    50% {
        left: -85px;
    }
}

@keyframes MoveRightLeft {

    0%,
    100% {
        right: 30px;
    }

    50% {
        right: 60px;
    }
}

@media (max-width: 991px) {

    .zo-about-section .zo-content {
        padding: 0 0 30px;
    }

    .zo-about-section .zo-thumbnail:before {
        display: none;
    }

    .zo-about-section .zo-thumbnail .zo-feature {
        display: none;
    }
}

.zo-solutions-section {
    width: 100%;
    display: inline-block;
    padding: 30px 0;
    margin: 90px 0;
    position: relative;
    text-align: center;
}

.zo-solutions-section .zo-solution {
    margin: 0 0 25px;
}

.zo-solutions-section .zo-solution figure {
    position: relative;
}

.zo-solutions-section .zo-solution figure i {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    font-size: 3rem;
    color: rgb(255, 255, 255);
    text-shadow: 0 0 5px rgba(255, 255, 255, .5);
    transform: translateY(-50%);
}

.zo-solutions-section .zo-solution figure img {
    max-width: 150px;
}

.zo-solutions-section .zo-solution strong {
    display: block;
    margin: 15px 0 0;
}

.zo-solutions-section .zo-solution span {
    font-size: .875rem;
}

.zo-videos-section .zo-content {
    padding: 0 60px 0 0;
    font-size: 1.10rem;
    line-height: 1.75;
    text-align: justify;
}

@media (max-width: 1200px) {

    .zo-videos-section .zo-content {
        padding: 0;
    }
}

.zo-partners-section {
    width: 100%;
    display: inline-block;
    padding: 90px 0;
    text-align: center;
}

.zo-partners-section .zo-partner {
    width: 100%;
    display: inline-block;
    margin: 0 0 25px;
    padding: 15px;
    position: relative;
    border-radius: 20px;
    box-shadow: 0 0 15px 0 rgb(30 25 30 / 15%);
}

.zo-teams-section .zo-teams {
    padding: 60px 0;
}

.zo-teams-section .zo-teams li:nth-child(odd) {
    margin: -30px 0 0;
}

.zo-teams-section .zo-teams .zo-team-section {
    padding: 15px;
    text-align: center;
    transition: all .25s ease-in-out;
}

.zo-teams-section .zo-teams .zo-team-section:hover {
    opacity: .85;
}

.zo-teams-section .zo-teams .zo-team-section figure {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}

.zo-teams-section .zo-teams .zo-team-section figure:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--Primary-Color);
    opacity: .5;
}

.zo-teams-section .zo-teams .zo-team-section figure img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.zo-teams-section .zo-teams .zo-team-section .zo-info strong {
    display: block;
    margin: 15px 0 0;
}

.zo-teams-section .zo-teams .zo-team-section .zo-info span {
    display: block;
    margin: 0 0 15px;
}

.zo-teams-section .zo-teams .zo-team-section ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.zo-teams-section .zo-teams .zo-team-section ul li {
    display: inline-block;
    margin: 0;
}

.zo-teams-section .zo-teams .zo-team-section ul li a {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--Primary);
    color: rgb(255, 255, 255);
    border-radius: 50%;
}

.zo-teams-section .zo-teams .zo-team-section ul li a i {
    display: flex;
    line-height: 1;
}

.zo-teams-section .zo-teams .zo-team-section ul li a:hover {
    opacity: .85;
}