/*==================================================
CLIENT LOGO SECTION
==================================================*/
.client-logo-section {
    background: var(--white);
    position: relative;
    overflow: hidden;
}

.client-logo-section::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -180px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(20, 175, 195, .05);
}

.client-logo-section::after {
    content: "";
    position: absolute;
    left: -180px;
    bottom: -180px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: rgba(20, 175, 195, .05);
}

.client-logo-section .container {
    position: relative;
    z-index: 2;
}

/*========================*/
.client-logo-card {
    height: 170px;
    background: #fff;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    overflow: hidden;
    position: relative;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.client-logo-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 4px;
    background: var(--primary);
    transform: scaleX(0);
    transition: .35s;
}

.client-logo-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.client-logo-card:hover::before {
    transform: scaleX(1);
}

.client-logo-card img {
    max-width: 170px;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .75;
    transition: .4s;
}

.client-logo-card:hover img {
    filter: none;
    opacity: 1;
    transform: scale(1.08);
}

/*========================*/
@media(max-width:991px) {
    .client-logo-card {
        height: 150px;
        padding: 25px;
    }
}

@media(max-width:767px) {
    .client-logo-card {
        height: 120px;
        padding: 20px;
    }

    .client-logo-card img {
        max-width: 120px;
        max-height: 60px;
    }
}

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

.content-section {

    position: relative;

    overflow: hidden;

    background: var(--light);

}

.content-section::before {

    content: "";

    position: absolute;

    right: -220px;
    top: -220px;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background: rgba(20, 175, 195, .08);

}

.content-section::after {

    content: "";

    position: absolute;

    left: -180px;
    bottom: -180px;

    width: 400px;
    height: 400px;

    border-radius: 50%;

    background: rgba(20, 175, 195, .08);

}

.content-editor {

    position: relative;

    z-index: 2;

    max-width: 1100px;

    margin: auto;

}

.content-editor h2 {

    margin: 20px 0 35px;

}

.content-editor p {

    color: var(--text);

    font-size: 18px;

    line-height: 2;

    margin-bottom: 25px;

}

.content-editor strong {

    color: var(--secondary);

    font-weight: 700;

}

/*==================================
READ MORE
==================================*/

.content-collapse {

    max-height: 280px;

    overflow: hidden;

    transition: max-height .6s ease;

}

.content-collapse.active {

    max-height: 3000px;

}

.content-toggle {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 30px;

    padding: 16px 40px;

    border: none;

    background: var(--primary);

    color: #fff;

    border-radius: 8px;

    font-weight: 600;

    transition: var(--transition);

}

.content-toggle:hover {

    background: var(--primary-dark);

}

.content-toggle i {

    transition: .4s;

}

.content-toggle.active i {

    transform: rotate(180deg);

}

/*==================================
RESPONSIVE
==================================*/

@media(max-width:767px) {

    .content-editor p {

        font-size: 16px;

        line-height: 1.9;

    }

    .content-collapse {

        max-height: 380px;

    }

}