@import url(https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css);
/* @import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css); */

.page_container {
    width: 100% !important;
    padding: 50px !important;
    overflow-x: hidden !important;
    padding-top: 150px !important
}

.banner-img {
    background-image: url(../assets/images/elearning-content-development/elearning-content-development-banner.webp);
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    gap: 160px;
}

.grid-two-columns {
    width: 50%
}

.left-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

#sidebar.fixed {
    position: fixed;
    top: 25%;
    left: 52%
}

.form-fixed-container {
    border-radius: 6px;
    z-index: 1;
    width: 47%;
    position: fixed;
    padding: 0
}

.iti,
.timeline-box {
    position: relative;
    width: 100%
}

.mandatory-mark {
    color: red
}

.form-field-opn {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 20px #3680E230
}

.form-bg {
    padding: 8px 12px;
    background: #f9fcff
}

.cont-frm-title {
    text-align: center;
    padding-top: 10px;
    font-size: 18px;
    font-weight: 700
}

.agree-sbt-btn {
    font-size: 14px;
    margin: 5px 0
}

.label-form2 {
    text-align: left;
    margin-bottom: 0;
    margin-top: 15px;
    font-size: 14px;
    font-weight: 600
}

.form-input-field2 {
    border: 1px solid #98a5df;
    border-radius: 6px;
    width: 100%;
    padding: 8px;
    height: 40px;
    font-size: 14px;
    font-weight: 400
}

.autosize,
textarea#Message {
    height: 60px !important
}

.autosize {
    resize: none;
    overflow: hidden
}

.iti {
    display: inline-block;
    z-index: 0
}

.errormsgFname,
.errormsgIname,
.errormsgMail,
.errormsgPhone,
.errormsgRname,
.errormsgcourseDuration {
    font-size: 12px;
    color: #ee2828;
    text-align: left;
    display: none;
    padding: 0;
    margin: 0
}

.intro-heading {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.banner-img h1,
.heading-title {
    font-size: 30px;
    text-align: center;
    line-height: 1.5;
    font-weight: 700
}

.heading-title {
    margin: 0;
    /* font-size: 20px; */
}

#submit-btn {
    box-shadow: 0 12px 20px #7b68ED29;
    border: 1px solid #98a5df;
    border-radius: 10px;
    color: #fff;
    padding: 12px 20px;
    font-size: 14px;
    width: 80%;
    margin: 0;
    background: #098ff8;
    font-weight: 600;
    transition: transform .3s cubic-bezier(.5, 2.5, .7, .7), box-shadow .3s cubic-bezier(.5, 2.5, .7, .7);
    transform: translateY(0);
}

#submit-btn:hover {
    color: #fff;
    transform: translateY(calc(-1 * var(--animation-depth, .375em)));
    box-shadow: 0 5px 0 #35136b;
    animation: bounce 0.4s ease-out;
}

.banner-img h1 {
    color: #fff;
    padding: 0;
    margin: 0;
    font-family: Inter
}

.banner-img h2 {
    color: #fff;
    line-height: 1.5;
    font-size: 20px;
    padding: 0;
    text-align: center;
    font-weight: 700;
    margin: 0;
}

.text-data, .why-choose-items p {
    font-size: 16px;
    line-height: 1.5;
    color: #101010;
    margin: 0;
    font-weight: 400
}

.third-section {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.why-choose-items {
    padding: 20px;
    border-radius: 10px;
    margin: 0;
    border: 1px solid #93cefb;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.why-choose-items h4 {
    color: #101010;
    font-weight: 800;
    margin: 0;
}

/* .why-choose-items p {
    margin: 0;
} */

.why-choose-items:hover {
    background-color: #f9fcff;
    box-shadow: 2px 2px 6px #00000029
}

.howIt-works {
    padding: 20px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.howIt-works h4 {
    text-align: center;
    margin: 0;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 600;
    font-family: 'Inter';
}

.border-gradient {
    border-image-slice: 1;
    background: #f9fcff
}

.eLeraning-benefit-points h4,
.toggel-lms-tubes {
    font-size: 18px
}

.fifth-section {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.eLeraning-benefit-points {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.eLeraning-benefit-points h4 {
    color: #101010;
    line-height: 1.5;
    font-weight: 800;
    margin: 0;
}

.faq-section {
    background: #f9fcff;
    padding: 20px;
    border-radius: 10px;
    margin: 0;
}

.toggle-bg {
    background: #e3f2fe;
    border-radius: 12px;
    margin: 20px 0;
    box-shadow: 0 0 4px 0 #00000029
}

.toggel-lms-tubes {
    background-color: #fff;
    color: #101010;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    font-size: 18px;
    transition: .4s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    border-radius: 12px;
    margin: 0;
    border: 1px solid #93cefb
}

.toggeltextlms {
    max-height: 0;
    box-shadow: 0 3px 6px #0000001A;
    overflow: hidden;
    transition: max-height .2s ease-out;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px
}

.toggel-lms-tubes:hover {
    background-color: #e3f2fe;
    color: #101010
}

.toggel-lms-tubes.active {
    background-color: #fff;
    color: #101010;
    border: 1px solid #93cefb;
    box-shadow: 0 0 4px 0 #00000029
}

.toggeltextlms p {
    color: #101010;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 25px
}


.usecase-tab-container {
    padding: 3% 5%
}

.useCase-tab-content {
    margin: 10px 0
}

.timeline-box {
    /* padding-top: 0; */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 20px;
}

.timeline-box:before {
    content: '';
    position: absolute;
    margin-left: -1px;
    height: 86%;
    z-index: 1;
    border: 2px dashed #aaa;
    left: 65px !important;
    width: 0;
    top: 127px !important
}

.timeline-block {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-box-pack: justify;
    justify-content: space-between;
    clear: both;
    align-items: center;
    width: 100%;
    margin: 0;
}

.timeline-block-left {
    direction: rtl;
    float: none;
    direction: ltr
}

.timeline-block-right {
    float: none;
    margin: 0;
}

.marker {
    margin-top: 10px;
    z-index: 1000;
    text-align: center;
    position: relative;
    left: -4px
}

.progress-images {
    width: 126px;
    height: 45px;
    padding: 0 5px;
    z-index: 1;
}

.timeline-content {
    width: 100%;
    padding: 0 15px;
    color: #666
}

.timeline-content h4 {
    margin: 0;
    font-size: 20px;
    color: #101010;
    font-weight: 700;
    text-align: left;
}

.timeline-content span {
    font-size: 15px;
    color: #a4a4a4
}

.timeline-content ul {
    font-size: 16px;
    line-height: 1.5;
    color: #101010;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.timeline-content li {
    padding: 0;
    margin: 0;
}

.advanced-hidden-video,
.hidden-video,
.interactive-hidden-video,
i.fa.fa-check {
    display: none
}

.border-fixed {
    border: 1px solid transparent;
    position: relative;
    left: -54px;
    box-shadow: 0 0 6px #0000001A;
    border-radius: 10px;
    padding: 20px 20px 20px 70px;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.border-fixed-sec {
    border: 1px solid transparent;
    box-shadow: 0 0 6px #0000001A;
    border-radius: 10px;
    width: 100%;
    padding: 20px;
    /* color: #666; */
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.border-fixed-sec h3 {
    margin: 20px 0 10px;
    font-size: 20px;
    color: #101010
}

.border-fixed-sec img {
    width: 101px;
    height: 36px
}

.border-fixed-sec ul {
    line-height: 1.5;
    font-size: 16px;
    color: #101010;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.eleraningSucMsg {
    font-size: 15px;
    color: #54a17e;
    text-align: center;
    padding-top: 2%
}

.customer-name,
.testimonialslider-text {
    color: #101010;
    font-size: 16px;
    letter-spacing: normal;
    line-height: 1.5;
}

.sd-multiSelect {
    position: relative;
    margin-bottom: 0
}

.sd-multiSelect .placeholder {
    opacity: 1;
    background-color: transparent;
    cursor: pointer
}

.sd-multiSelect .ms-offscreen {
    height: 1px;
    width: 1px;
    opacity: 0;
    overflow: hidden;
    display: none !important;
}

.sd-CustomSelectSecond,
.sd-multiSelect .sd-CustomSelect {
    width: 100% !important
}

.sd-multiSelect .ms-choice {
    position: relative;
    text-align: left !important;
    width: 100%;
    border: 1px solid #98a5df;
    background: #ffff;
    box-shadow: none;
    font-size: 14px;
    height: 40px;
    color: #101010;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 6px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out
}

.sd-multiSelect .ms-choice:after {
    content: "\f0d7";
    font-family: FontAwesome;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px
}

.sd-multiSelect .ms-choice:focus {
    border-color: var(--theme-color)
}

.sd-multiSelect .ms-drop.bottom {
    display: none;
    background: #fff;
    border: 1px solid #e5e5e5;
    padding: 0;
    position: absolute;
    z-index: 1000;
    width: 100%;
    border-radius: 0
}

.sd-multiSelect .ms-drop ul {
    list-style: none;
    padding: 0;
    margin: 0;
    height: auto !important;
    font-size: 14px
}

.sd-multiSelect .ms-drop li {
    position: relative;
    margin-bottom: 0;
    padding: 5px 8px
}

.sd-multiSelect .ms-drop li:hover {
    background-color: #e5e5e5;
    color: #098ff8
}

.sd-multiSelect .ms-drop li input[type=checkbox] {
    padding: 0;
    height: initial;
    width: initial;
    margin-bottom: 0;
    display: none;
    cursor: pointer
}

.sd-multiSelect .ms-drop li label {
    cursor: pointer;
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none
}

.sd-multiSelect .ms-drop li label:before {
    content: "";
    -webkit-appearance: none;
    background-color: transparent;
    border: 1px solid #098ff8;
    box-shadow: none;
    padding: 8px;
    display: inline-block;
    position: relative;
    vertical-align: middle;
    cursor: pointer;
    margin-right: 10px
}

.sd-multiSelect .ms-drop li input:checked+span:after {
    content: url(../img/elearning-content-development/check-solid.svg);
    display: block;
    position: absolute;
    top: 7px;
    left: 11px;
    width: 10px;
    height: 10px;
    color: #7b68ee
}

.sd-CustomSelect span,
.sd-CustomSelectSecond span {
    font-weight: 400
}

.testimonialslider .owl-item.active {
    border-radius: 10px;
    background-color: #fff;
    margin-right: .5%;
    box-shadow: 0 0 4px 0 #00000029;
    margin: 10px
}

.owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    width: 100% !important;
    max-width: 100%;
    top: 0;
    left: -15px
}

.owl- .testimonials:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 30%;
    background-color: #ddd
}

.feedback-slider-item {
    padding: 5% 10%
}

.owl-carousel .owl-nav [class*=owl-] {
    transition: .3s
}

.owl-carousel .owl-nav [class*=owl-].disabled:hover {
    background-color: #d6d6d6
}

.owl-carousel {
    position: relative;
    display: none;
    width: 100%;
    z-index: 1;
    text-align: center !important;
    align-items: center
}

.owl-carousel .owl-next,
.owl-carousel .owl-prev {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 30%;
    font-size: 20px;
    color: #fff;
    border: 1px solid #ddd;
    text-align: center
}

.owl-carousel .owl-prev {
    left: -70px
}

.owl-carousel .owl-next {
    right: -70px
}

.tabs-container h4,
.customer-name,
.feedback-slider .owl-dots,
.tabSection h3,
.vd-sec {
    text-align: center;
}

.fa-angle-left:before {
    content: "\f104";
    color: #00f
}

.fa-angle-right:before {
    content: "\f105";
    color: #00f
}

.iti__flag.iti__in {
    height: 14px;
    background-position: -2413px 0;
    width: 20px
}

.testimonialslider-text {
    min-height: 300px;
    margin: 20px auto
}

.testimonialline {
    margin: 15% 0 8%;
    border-top: 1px solid #6e6e6e
}

.feedback-slider .owl-dots {
    padding-top: 5%
}

.feedback-slider .owl-dots .active span {
    background: #101010;
    opacity: 1
}

.feedback-slider .owl-dots span {
    background: #e5e5e5;
    border-radius: 20px;
    display: block;
    height: 8px;
    margin: 5px 7px;
    opacity: 1;
    width: 8px
}

.owl-prev span {
    font-size: 50px;
    position: absolute;
    top: 35%;
    left: 100%
}

.testimonial-image {
    margin: auto;
    width: auto !important
}

.owl-next span {
    font-size: 50px;
    position: absolute;
    top: 35%;
    right: 100%
}

.carousel-text {
    margin: 20px 0;
    font-size: 18px;
    line-height: 1.5;
    letter-spacing: normal;
    font-weight: 600;
    text-align: center;
}

.free-trial-button2 {
    font-size: 16px;
    padding: 12px 20px;
    border: none !important;
    background: #098ff8;
    color: #fff;
    border-radius: 10px;
    font-weight: 500;
    cursor: pointer;
    /* position: relative; */
    box-shadow: 0 5px 0 transparent;
    transition: transform .3s cubic-bezier(.5, 2.5, .7, .7), box-shadow .3s cubic-bezier(.5, 2.5, .7, .7);
    /* transform: translateY(0); */
    width: fit-content;
}

.free-trial-button2:hover {
    color: #fff;
    transform: translateY(calc(-1* var(--animation-depth, .375em)));
    box-shadow: 0 5px 0 #35136b;
    animation: bounce .4s ease-out
}

.tabSection {
    margin: 0;
    border-radius: 10px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* .tabs-contents {
    display: flex;
    flex-direction: column;
    gap: 20px
} */

.Tabs-level-1-subcontainer {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;
}

.level-1-button.starttab {
    border-bottom: 4px solid #101010
}

.level-1-button {
    color: #101010;
    background-color: transparent;
    font-size: 20px;
    margin: 0;
    border: none;
    font-weight: 600
}

.tab-contents {
    color: #101010;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    padding: 15px;
    font-weight: 500
}

.tab-contents li {
    margin-bottom: 0;
    line-height: 1.5
}

.tab-text-area {
    border-radius: 10px;
    background: #fff;
    padding: 20px;
    border: 1px solid #93cefb;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tab-text-area p {
    margin: 0;
}

.tab-text-area ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.content-space {
    margin: 0;
    align-items: center
}

.tabs-container h4 {
    font-size: 20px;
    margin: 0 0 20px 0;
    font-weight: 700;
    color: #101010
}

.vd-sec {
    padding: 0;
    margin-top: 20px !important
}

.tabSection h3 {
    line-height: 1.5;
    font-size: 16px;
    margin: 0;
}

.form-position {
    display: flex;
    justify-content: space-around;
    gap: 10px
}

.toggle-arrow {
    width: 26px;
    height: 26px
}

.advanced-video-container,
.interactive-video-container,
.video-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    aspect-ratio: 16/9;
    margin: auto
}

.advanced-video-placeholder,
.interactive-video-placeholder,
.video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ebe9e9;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

.advanced-video-placeholder img,
.interactive-video-placeholder img,
.video-placeholder img {
    width: 594px;
    height: 334px;
    object-fit: cover
}

.play-button {
    position: absolute;
    background: rgba(0, 0, 0, .7);
    color: #fff;
    font-size: 2rem;
    border: none;
    padding: .5em 1em;
    border-radius: 50%;
    cursor: pointer
}

@media only screen and (min-width:850px) {

    .mobileversion,
    .tabVersion {
        display: none
    }
}

@media only screen and (max-width:850px) {

    .eLeraning-benefit-points h4,
    .text-data,
    .third-section h4 {
        text-align: center
    }

    .desktopversion {
        display: none
    }

    .grid-two-columns {
        width: 100%;
    }

    .content-space,
    .form-position {
        display: block
    }

    .page_container {
        padding: 150px 20px 20px 20px !important;
    }

    #submit-btn {
        width: 100%;
    }

    .heading-title {
        font-size: 30px;
        margin: 0;
        line-height: 1.3
    }

    .col-full,
    .form-fixed-container {
        width: 100%
    }

    #sidebar.fixed {
        position: relative !important;
        left: 0 !important
    }

    .banner-img h1 {
        font-size: 25px;
        padding: 20px 10px
    }

    .banner-img {
        padding: 20px 0;
        gap: 80px;
    }

    .border-fixed {
        left: -35px;
        padding: 10px 10px 10px 48px
    }

    .carousel-text {
        margin: 0 0 20px
    }

    .mr-spc {
        margin: 15px 0 0
    }

    .form-bg {
        padding: 15px 12px
    }

    .free-trial-button2 {
        padding: 4% !important
    }

    .feedback-slider-item {
        padding: 5% 14%
    }

    .level-1-button {
        font-size: 18px
    }

    .tabs-container h4 {
        font-size: 18px;
        margin: 15px 0
    }

    .vd-sec iframe {
        height: auto !important
    }

    .third-section h4 {
        margin: 0;
        font-size: 20px
    }

    .howIt-works h4 {
        text-align: left;
    }

    .banner-img h5 {
        padding: 10px;
        font-size: 18px;
        line-height: 1.3
    }

    .owl-carousel .owl-stage-outer {
        left: 0
    }

    .fifth-section {
        padding: 20px 10px
    }

    .label-form2 {
        font-size: 16px
    }

    .advanced-video-placeholder img,
    .interactive-video-placeholder img,
    .video-placeholder img {
        width: 320px;
        height: 180px;
        object-fit: cover
    }

    .howItWorks-steps-sec {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
}

@media only screen and (min-width:768px) and (max-width:1024px) {
    .desktopversion {
        display: none
    }

    .col-full-tab {
        width: 100%
    }

    .tab-display-style,
    .tabVersion {
        display: block
    }

    .sd-multiSelect .ms-choice {
        height: 35px
    }

    textarea#Message {
        height: 40px !important
    }

    /* #submit-btn {
        margin: 0 0 15px
    } */

    #sidebar.fixed {
        top: 26%
    }

    .banner-img h1 {
        padding: 10px 10px 50px
    }

    .banner-img {
        padding: 20px 0
    }

    .banner-img h5 {
        padding: 10px
    }

    .level-1-button {
        font-size: 20px
    }

    .toggel-lms-tubes {
        font-size: 16px
    }

    .cont-frm-title {
        padding-top: 5px;
        font-size: 15px
    }

    .label-form2 {
        margin-top: 5px
    }

    .form-input-field2 {
        padding: 5px;
        height: 32px
    }

    .form-bg {
        padding: 10px 12px
    }

    .feedback-slider-item {
        padding: 5% 12%
    }

    .owl-carousel .owl-stage-outer {
        left: 0
    }

}

@media only screen and (min-width:768px) and (max-width:1130px) {
    .timeline-box:before {
        top: 189px !important
    }
}

@media only screen and (min-width:1024px) and (max-width:1200px) {
    #sidebar.fixed {
        top: 30%
    }

    .tabs-container h4 {
        font-size: 18px
    }

    .cont-frm-title {
        padding-top: 10px
    }

    .label-form2 {
        margin-top: 10px
    }

    .form-input-field2 {
        padding: 5px;
        height: 35px
    }

    .sd-multiSelect .ms-choice {
        height: 35px
    }

    textarea#Message {
        height: 45px !important
    }

    .owl-carousel .owl-stage-outer {
        left: 0
    }
}

@media only screen and (min-width:250px) and (max-width:400px) {
    .border-fixed-sec img {
        width: 101px;
        height: 35px
    }
}