﻿
.videos-swiper {
    height: auto;
    padding: 40px 0px;
}

.videos-swiper .swiper-slide {
    width: calc(33.333% - 17px)!important;
}

.videos-swiper .swiper-slide-video {
    height: 240px !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    transition-duration:1s;
    position:relative;
}

.videos-swiper .swiper-slide.large {
    width: 693px !important;
}

.videos-swiper .swiper-slide.large .play-button {
    left: 20px !important;
}

body.rtl .videos-swiper .swiper-slide.large .play-button {
    right: 20px !important;
    left: auto!important;
}

.videos-swiper .swiper-slide.large .videos-description {
    margin-top:5px;
    width:40%;
}

.videos-name {
    color: var(--02-black, #151B26);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 170%; /* 30.6px */
    letter-spacing: -0.36px;
}

.videos-treatment {
    color: var(--02-black, #151B26);
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Montserrat;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 170%; /* 30.6px */
    letter-spacing: -0.36px;
}

.videos-info {
    width: 252.478px;
}

.videos-arrow {
    width: 120px;
    padding: 0px 10px 0px 0px;
    text-align: end;
}

.videos-bottom {
    display: inline-flex;
    align-items: end;
    justify-content: end;
    padding-left: 8px;
    padding-bottom: 18px;
    border-radius: 0px 0px 4px 4px;
    background: var(--base-white, #FFF);
    /* Medium Card */
    box-shadow: -2px 3px 40.000003814697266px 0px rgba(7, 17, 53, 0.05);
}

.videos-header {
    padding: 20px 80px 0px 0px;
}

body.rtl .videos-header {
    padding: 20px 20px 0px 80px;
}

.videos-surgery {
    color: #fff;
    leading-trim: both;
    text-edge: cap;
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 22px; /* 412.587% */
}

.videos-videos {
    color: #fff;
    font-family: Montserrat;
    font-size: 34px;
    font-style: normal;
    font-weight: 800;
    line-height: normal;
}

.all-videos-link {
    color: #151B26;
    text-align: right;
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 25px; /* 178.571% */
    text-decoration-line: underline;
    float: right;
    margin-right: 60px;
}

body.rtl .all-videos-link {
    float: left;
    margin-left: 60px;
    margin-right: 0;
}

body.rtl .all-videos-link svg{
    transform: rotate(180deg);
}

.videos-swiper-content-wrapper  {
    margin-top: 10px;
}

.videos-redline {
    width: 49.363px;
    height: 4.819px;
    background: var(--danger-color, #E74040);
    position: relative;
}

.videos-swiper-header {
    position: relative;
    color: var(--02-black, #151B26);
    leading-trim: both;
    text-edge: cap;
    font-family: Montserrat;
    font-size: 24.784px;
    font-style: normal;
    font-weight: 800;
    line-height: 23.587px; /* 95.173% */
}

.videos-description {
    margin-top: 5px;
    color: #5F6B76;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: Montserrat;
    font-size: 11px;
    font-style: normal;
    font-weight: 500;
    line-height: 180%; /* 14.87px */
  
}

.video-item-fader {
    width: 100%;
    height: 100%;
    padding: 20px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.00) 100%);
    position: relative;
}

.play-button {
    position: absolute;
    cursor: pointer;
    transform: translateX(-50%) translateY(-50%);
    top:50%;
    left:50%;
}

.video-modal .modal-content {
    width: 1000px !important;
   
}


.video-modal .modal-body {
    width: 1000px !important;
    height: auto;
}

.videos-buttons-row {
    padding-top: 20px;
    padding-left:20px;
}

body.rtl .videos-buttons-row {
    padding-right: 20px;
    padding-left: 0;
}

#videos-slide-next,
#videos-slide-prev {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    box-shadow: -2.47691px 3.71536px 49.53811px 0px rgba(7, 17, 53, 0.20);
}

body.rtl #videos-slide-next,
body.rtl #videos-slide-prev {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform-origin: center;
    -webkit-transform-origin: center;

}

.videos-description {
    max-height: 120px;
    overflow: hidden;
}

@media(max-width:768px) {
    .videos-swiper .swiper-slide    {
        width: calc(100% - 30px)!important;
    }
    .videos-swiper .swiper-slide.large {
        width: 270px !important;
        background-position-x: right !important;
    }

    .videos-swiper .swiper-slide.large .play-button {
        left: 37% !important;
    }

    .videos-swiper .swiper-slide-video  {
        height: 195px!important;
    }

    body.rtl .videos-swiper .swiper-slide.large .play-button {
        right: 37% !important;
        left: auto!important;
    }

    .videos-swiper .swiper-slide.large .videos-description {
        margin-top: 5px;
        width: 100%;
    }
    .videos-swiper {
        padding: 15px 25px 15px 25px;
    }

    .videos-header {
        padding: 20px 25px 0px;
    }

    .videos-videos {
        font-size: 22px;
    }

    .videos-swiper .swiper-slide {
        width: 264px;
        background-position-x: right !important;
    }
  
    .videos-image {
        width: 264px;
        height: 250px;
    }
    #video-modal {
        position: fixed;
        top: 100px;
        width: 90vw !important;
        left: 25px;
    }
  
    .videos-buttons-row,
    #videos-slide-next,
    #videos-slide-prev {
        display: none;
    }
}

@media(min-width:576px) {
    .modal-dialog {
        max-width: 893px !important;
    }
}

@media(max-width:375px) {
    .videos-swiper .swiper-slide-video  {
        height: 170px!important;
    }
}
