/*Home Section 1 CSS*/

.home-section1 {
    padding: 0 0 320px;
    position: relative;
    background: var(--white);
}

.home-section1 h2::after {
    color: #02B8BC
}

.video-block {
    position: relative;
    z-index: 1
}

.shape5 {
    position: absolute;
    right: -43px;
    top: 150px
}

.shape6 {
    position: absolute;
    top: 32%;
    left: 0
}

.line-connector2 {
    left: 24%;
    top: 100%;
    position: absolute;
    width: 11.5%
}

.dashed3 {
    stroke-dasharray: 10
}

.path3 {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation-name: dash3;
    animation-duration: 2s;
    animation-delay: 0s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-delay: 0s
}

@keyframes dash3 {
    from {
        stroke-dashoffset: 1000
    }
    to {
        stroke-dashoffset: 0
    }
}

.cls-5 {
    fill: #4bc1ba;
    animation-name: dot3;
    animation-duration: 0.1s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    animation-delay: 0s;
    opacity: 0
}

@keyframes dot3 {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

.cls-6 {
    fill: #ea7765;
    animation-name: dot4;
    animation-duration: 0.1s;
    animation-timing-function: linear;
    animation-delay: 0.7s;
    animation-iteration-count: 1;
    animation-fill-mode: both;
    opacity: 0
}

@keyframes dot4 {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

.shape40 {
    display: none;
}

.video-inr {
    background-color: var(--grey6);
    box-shadow: 0 3px 6px #1e204819;
    border-radius: 4px;
    height: 336px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media only screen and (max-width: 1199px) {
    .home-section1 {
        padding: 0 0 225px;
    }
}

@media only screen and (max-width: 991px) {
    .home-section1 {
        padding: 0 0 123px;
    }
    .line-connector2 {
        top: 84%;
    }
}

@media only screen and (max-width:767px) {
    .line-connector2 {
        display: none;
    }
    .home-section1 {
        text-align: center;
        padding: 0 0 190px;
    }
    .home-section1 .row [class*="col-"]:first-child {
        order: 2;
        padding: 80px 0 0;
    }
    .shape6 {
        display: none;
    }
    .shape5 {
        right: auto;
        top: 95%;
        left: 0;
    }
    .shape40 {
        display: block;
        position: absolute;
        left: 8px;
        top: 25px;
    }
    .video-inr {
        border-radius: 0;
    }
}


/*Home Section 1 CSS*/