/*Home Section 1 CSS*/
.service-video__form { 
  background: var(--white);
  box-shadow: 0 3px 6px rgb(30 32 72 / 10%);
  border: 1px solid #f1f1f1;
  padding: 35px 25px;
  text-align: left;
}
.service-section1.service-video { margin-top: 60px; }
.service-video__form .hs-button { margin-top: 20px; }

.service-video__form h3 { display: block; margin-bottom: 0px; padding: 0px; }
.service-video__form .form-title { display: none; margin: 0px; padding: 0px; }

.service-video__form .input input,
.service-video__form .input textarea{
  border-color: #D8D8D8;
  background-color:#F6F8FA;
  padding-left: 20px;
  padding-right 20px;
}

.service-video__form .input select{
	border-color: #D8D8D8;
  background-color:#F6F8FA !important;
}
.service-video__form .input textarea {
  min-height: 80px;
}
.service-video__form ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #D8D8D8;
}
.service-video__form ::-moz-placeholder { /* Firefox 19+ */
  color: #D8D8D8;
}
.service-video__form :-ms-input-placeholder { /* IE 10+ */
  color: #D8D8D8;
}
.service-video__form :-moz-placeholder { /* Firefox 18- */
  color: #D8D8D8;
}

.service-video .service-video__form  fieldset {
	margin:15px 0;
}
.service-video__form .hs_error_rollup {
    display: none;
}
.service-video__form  label.hs-error-msg {
    line-height: 1;
    margin-bottom: 0;
    padding: 0;
}

@media only screen and (min-width: 991px) {
  .service-video__form { margin-left: auto; max-width: 550px; }
}

.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*/