.wcs-dashboard-sections{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.wcs-dashboard-banner {
    background-color: #6877FF;
    padding: clamp(24px, 5vw, 65px);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.wcs-dashboard-banner__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
}
.wcs-dashboard-banner__left h2 {
    font-weight: 600;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.22;
    color: var(--white);
    margin-bottom: 8px;
}

.wcs-dashboard-banner__left p {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.71;
    color: var(--white);
    max-width: 460px;
    margin-bottom: 27px;
}
.wcs-dashboard-banner__thumb{
    img.shape-1 {
        bottom: 62px;
        position: absolute;
        left: 527px;
        @media (max-width:1200px){
            display: none;
        }
    }
    img.shape-2 {
        max-width: 34px;
        top: 49px;
        position: absolute;
        left: 638px;
        @media (max-width:1200px){
            display: none;
        }
    }
    img.shape-3 {
        width: 49px;
        height: 53px;
        position: absolute;
        right: 17px;
        top: 103px;
        @media (max-width:1200px){
            display: none;
        }
    }

}
.wcs-dashboard-banner__mainImage {
    position: absolute;
    bottom: 0;
    right: 80px;
    width: clamp(320px, 50vw, 527px);
    @media (max-width:1366px){
        max-width: 410px;
    }
    @media (max-width:767px){
        display: none;
    }
}

.wcs-btn-primary{
    &.white-bg{
        background-color: var(--white);
        color: var(--black);
        &:hover{
            background-color: var(--action);
            color: var(--white);
        }
    }
    &.action-bg{
        background-color: var(--action);
        color: var(--white);
        border: 1px solid transparent;
        &:hover{
            background-color: var(--white);
            color: var(--black);
            border-color: var(--action);
        }  
    }
}

/* card section  */

.wcs-dashboard-cards__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 24px;
}
.wcs-dashboard-cards__card {
    background-color: var(--white);
    padding: 24px;
    border-radius: 16px;
    text-align: center;
}
.wcs-dashboard-cards__cardinner{
    background-color: #F0F3F6;
    padding: 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    h3{
        font-weight: 600;
        font-size: 18px;
        line-height: 1.5;
        color: #2C76E6;
    }
    .wcs-dashboard-cards__thumb {
        padding-bottom: 35px;
    }
}
.wcs-dashboard-cards__thumb {
    padding-bottom: 30px;
}

.wcs-dashboard-cards__content{
    h3{
        padding-bottom: 18px;
        font-weight: 600;
        font-size: 16px;
        line-height: 1.5;
    }
}
.wcs-dashboard-cards__content{
    p{
        font-weight: 400;
        font-size: 16px;
        line-height: 1.5;
        color: var(--black-2);
        margin-bottom: 30px;
    }
}

/* video player  */

.wcs-video {
    position: relative;
    width: 100%;
    max-width: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
}

.wcs-video__media {
    width: 100%;
    height: auto;
    display: block;
}

.wcs-video__control {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.9);
    color: #000;
    font-size: 28px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.wcs-video__control:hover {
    transform: scale(1.05);
}

.wcs-video.is-playing .wcs-video__control {
    opacity: 0;
    pointer-events: none;
}