/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

body {
    /*min-height: 100vh;*/
    height:100vh;
    overflow-x: hidden;
    font-family: poppins, sans-serif;
    font-weight: 400;
    font-style: normal;
    overflow-y:hidden;
}



button:focus, button:active {
    outline: none;
}

body a, body a:hover {
    text-decoration: none;
    color: inherit;
}

    body, body a, body a:hover, body button, input:hover, #Message:hover, .slick-next:hover, .slick-prev:hover  {
        cursor: none !important;
    }

.navbar-fixed-top {
    top: 0;
    position: fixed;
}

.navbar-default {
    z-index: 21;
    width: 100%;
}

.hamburger {
    /*transform: scale(0.8);*/
    padding: 10px;
}

.hamburger--slider .hamburger-inner::before {
    width: 45px;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    height: 2px;
    transition-duration: 0.5s;
    background-color: white;
}

.dark .hamburger-inner, .dark .hamburger-inner::before, .dark .hamburger-inner::after {
    background-color: #050F57;
}

.hamburger:hover .hamburger-inner, .hamburger:hover .hamburger-inner::before, .hamburger:hover .hamburger-inner::after {
    background-color: #4AE8AD;
}

.hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {
    background-color: white;
}

.hamburger.is-active.dark .hamburger-inner, .hamburger.is-active.dark .hamburger-inner::before, .hamburger.is-active.dark .hamburger-inner::after {
    background-color: #050F57;
}

.hamburger:hover.is-active .hamburger-inner, .hamburger:hover.is-active .hamburger-inner::before, .hamburger:hover.is-active .hamburger-inner::after {
    background-color: #4AE8AD;
}

.is-active .hamburger-inner, .is-active .hamburger-inner::before, .is-active .hamburger-inner::after {
    height: 2px;
}

.codevid-logo img {
    width: 30%;
    margin-left: 5%;
    margin-top: 3%;
}

.menu-icon-right {
    float: right;
    margin-right: 3%;
}

#slider {
    height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
    margin: 0 auto;
    max-width: 100%;
}


/*custom cursor*/

.cursor {
    position: fixed;
    left: 0;
    top: 0;
    pointer-events: none;
}

.cursor--small {
    width: 5px;
    height: 5px;
    left: -2.5px;
    top: -2.5px;
    border-radius: 50%;
    z-index: 11000;
    background: #4AE8AD;
}

.cursor--canvas {
    width: 100vw;
    height: 100vh;
    z-index: 12000;
}

/*custom image comparer*/

/*body {
    max-height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y proximity;
}*/



.image_compare {
    --width: 100%;
    --height: calc(var(--vh, 1vh) * 200);
    position: relative;
    width: var(--width);
    height: var(--height);
    overflow-x: hidden;
}

.image1 {
    background-image: url(../images/before-new.jpg);
    background-size: cover;
    min-height: 100%;
    /* background-position: 27%; */
    background-position-y: 10%;
    background-position-x: calc(50% - 6px);
    background-attachment: fixed;
}

.image2 {
    background-image: url('../images/after-new.jpg');
    background-size: cover;
    min-height: 100%;
    /* background-position: 27%; */
    background-position-y: 10%;
    background-position-x: calc(50% - 6px);
    background-attachment: fixed;
}

.image__img {
    position: absolute;
    height: 50%;
    /*background: url('https://images.unsplash.com/photo-1498248193836-88f8c8d70a3f?w=2382&ixid=dW5zcGxhc2guY29tOzs7Ozs%3D');*/
    background-repeat: no-repeat;
}

    .image__img:first-child {
        left: 0;
        width: 100%;
        background-position: center left;
        background-image: url('../images/before.jpg');
        background-size: var(--width) var(--height);
    }

    .image__img:last-child {
        right: 0;
        width: calc(100% - var(--x, 50%));
        background-position: center right;
        background-image: url('../images/after.jpg');
        background-size: var(--width) var(--height);
        /*box-shadow: inset 1px 0 0 white, -1px 0 0 white;*/ /*If we want to see the line that divides the images*/
    }


.homepage-container {
    height:100vh;
    overflow:auto;
    scroll-snap-type: y mandatory;
    overflow-x:hidden;
}

.homepage-image-compare {
    height: calc(var(--vh, 1vh) * 100);
    position: relative;
}

body {
    
}
.scroll-child {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}
.home-title {
    position: absolute;
    color: white;
    bottom: 40%;
    font-size: 4.5rem;
    left: 3%;
    right: 0;
    text-align: left;
}

.home-subtitle {
    position: absolute;
    color: white;
    bottom: 10%;
    font-size: 1.8rem;
    right: 5%;
}

.process-section-text {
    height: calc(var(--vh, 1vh) * 100);
    z-index:5;
    background-color:white;
}

.process-section-image {
    /*background-image: url('../images/temp.png');
    background-size: cover;
    background-repeat: no-repeat;*/
}

.process-text {
    width: 55%;
    position: absolute;
    right: 15%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: right;
    line-height: 2.5;
    color: #050F57;
}

.process-title {
    position: absolute;
    bottom: 10%;
    width: 40%;
    color: #4AE8AD;
    left: 10%;
}

    .process-title h2 {
        font-size: 3rem;
        line-height: 1.4;
    }

.vertical-navigation {
    height: calc(var(--vh, 1vh) * 100);
    background-color: #050F57;
    overflow-y: hidden;
}

.crossroads-section {
    height: calc(var(--vh, 1vh) * 100);
    background-color: #050F57;
    overflow-y: hidden;
}

.testimonial-section {
    position:relative;
    height: calc(var(--vh, 1vh) * 100);
    background-image: url('../images/testimonials.png');
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 1000px rgba(3, 15, 73, .65);
}

.contact-left {
    position: absolute;
    width: 70%;
    left: 0;
    right: 0;
    margin: auto;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.contact-right {
    position: absolute;
    width: 70%;
    left: 0;
    right: 0;
    margin: auto;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.contact-subtitle {
    font-size: 2.6rem;
    text-transform: uppercase;
    color: #4AE8AD;
}

.contact-text {
    line-height: 2.3rem;
}

.testimonial-title {
    font-size: 4.5rem;
    color: #4AE8AD;
    text-align: left;
    font-weight: bold;
}

.testimonial-container {
    position: absolute;
    width: 70%;
    left: 0;
    right: 0;
    margin: auto;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.testimonial-text {
    color: white;
    text-align: right;
    line-height: 2rem;
    padding: 5px;
}

.slick-prev {
    left: -12%;
}

.slick-next {
    right: -12%;
}

.testimonials {
    margin-right: 15%;
}

.contact-section {
    height: calc(var(--vh, 1vh) * 100);
    /*background-color: #050F57;*/
    overflow-y: hidden;
}

.contact-left {
    background-color: white;
}

.contact-right-section {
    background-color: #050F57;
}

#contact-frm input, #contact-frm textarea {
    background-color: transparent;
    border: none;
    border-bottom: solid 1px white;
    border-radius: 0;
}

    #contact-frm input:active, #contact-frm textarea:active, #contact-frm input:focus, #contact-frm textarea:focus {
        box-shadow: none;
    }

    #contact-frm input::placeholder, #contact-frm textarea::placeholder {
        color: white;
    }

    #contact-frm input::-webkit-input-placeholder, #contact-frm textarea::-webkit-input-placeholder {
        color: white;
    }

    #contact-frm input:-ms-input-placeholder, #contact-frm textarea:-ms-input-placeholder {
        color: white;
    }

#contact-frm .form-control {
    color: white;
}

.contact-text a:hover {
    color: #4AE8AD;
}

.overlay ul li a {
    transition: 0.3s;
}

    .overlay ul li a:hover {
        color: #4AE8AD;
        transform: scale(1.05);
    }

.contact-info {
    line-height: 2.2rem;
    transition: 0.3s;
}

    .contact-info a:hover {
        color: #4AE8AD;
    }

.work_content_text a:hover img {
    transform: scale(1.1);
}

.work_content_text a img {
    transition: 0.3s;
}

.contact-send {
    background-color: #4AE8AD;
    color: white;
    border-radius: 50px;
    padding: 5px 15px 5px 15px;
    border: none;
    transition: 0.3s;
}

    .contact-send:hover {
        transform: scale(1.1);
        background-color: white;
        color: #4AE8AD;
    }

.g-recaptcha:hover + .cursor--canvas {
    display: none;
}

.step-bar-vertical {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}

.step-1-text {
    width: 70%;
    float: right;
}

.step-2-text {
    display: none;
}

    .step-2-text .analysis-text {
        width: 95%;
        float: right;
    }

.step-3-text {
    display: none;
    width: 70%;
    float: right;
}

.sample-title {
    line-height: 1.5rem;
    text-align: left;
}

.sample-text {
    width: 80%;
    position: absolute;
    left: 10%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: right;
    line-height: 2.5;
    color: #050F57;
}

/*steps css section*/

.work_content {
    width: 100%;
    float: left;
    position: relative;
}


.vert1 {
    position: absolute;
    width: 2px;
    height: calc(100% - 33px);
    background: white;
    left: -1px;
    top: 0%;
    z-index: 22;
}

    .vert1:hover:after, .vert2:hover:after, .vert3:hover:after {
        border: 2px solid #4AE8AD;
    }

.work_content:not(.middle) .vert1:hover + .step-title, .work_content:not(.middle) .vert2:hover + .step-title, .work_content:not(.middle) .vert3:hover + .step-title {
    color: #4AE8AD;
    transform: scale(1.1);
}

.work_content:not(.middle) .step-title:hover {
    color: #4AE8AD;
    transform: scale(1.1);
}

.step-content-3.middle .vert3:after, .step-content-1.middle .vert1:after, .step-content-2.middle .vert2:after {
    border: 2px solid #4AE8AD;
}


.vert2 {
    position: absolute;
    width: 2px;
    height: calc(100% - 33px);
    background: white;
    left: -1px;
    top: 0%;
    z-index: 22;
}

.vert3 {
    position: absolute;
    width: 2px;
    height: calc(100% - 33px);
    background: white;
    left: -1px;
    top: 0%;
    z-index: 22;
}

.vert4 {
    position: absolute;
    width: 2px;
    height: 100%;
    background: white;
    left: -1px;
    top: 0%;
    z-index: 22;
}

.vert1:after {
    content: " ";
    width: 33px;
    height: 33px;
    border-radius: 50%;
    display: block;
    border: 2px solid white;
    position: relative;
    left: -15px;
    top: 100%;
}

.vert2:after {
    content: " ";
    width: 33px;
    height: 33px;
    border-radius: 50%;
    display: block;
    border: 2px solid white;
    position: relative;
    left: -15px;
    top: 100%;
}

.vert3:after {
    content: " ";
    width: 33px;
    height: 33px;
    border-radius: 50%;
    display: block;
    border: 2px solid white;
    position: relative;
    left: -15px;
    top: 100%;
}

.vert4:after {
    content: " ";
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: block;
    position: relative;
    left: -5px;
    top: 100%;
}

.work_content_text {
    width: 80%;
    position: absolute;
    left: 10%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: right;
    /*line-height: 2;*/
    color: white;
}


.step-content-1 {
    height: calc(var(--vh, 1vh) * 50);
    overflow: visible !important;
}

.step-content-2 {
    height: calc(var(--vh, 1vh) * 30);
    overflow: visible !important;
}

.step-content-3 {
    height: calc(var(--vh, 1vh) * 10);
    overflow: visible !important;
}

.step-content-4 {
    height: calc(var(--vh, 1vh) * 10);
    overflow: visible !important;
}

.step-title {
    position: absolute;
    bottom: 5px;
    color: white;
    left: 5%;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    transition: all 0.6s ease;
    z-index: 22;
}

.work_content.middle .step-title {
    font-size: 3rem;
    bottom: -1rem;
    color: #4AE8AD;
}

.work_content_text ul {
direction:rtl;
}

.work_content_text ul {
    padding-inline-start: 20px;
}

    @media (max-width:1500px) {
        .home-title {
            position: absolute;
            color: white;
            bottom: 50%;
            font-size: 3.5rem;
            left: 3%;
            right: 0;
            text-align: left;
        }

        

        .step-1-text {
            width: 90%;
        }

        .work_content_text {
            width: 90%;
            left: 5%;
        }

        .home-subtitle {
            bottom: 5%;
        }

        .codevid-logo img {
            width: 40%;
        }

        .overlay ul li a {
            font-size: 3.5rem;
        }

        .testimonial-container {
            width: 90%;
        }

        .slick-prev, .slick-next {
            width: 15%;
        }

        .slick-next {
            right: -15%;
        }

        .slick-prev {
            left: -15%;
        }
    }

    @media (max-width:1200px) {
        .home-title {
            position: absolute;
            color: white;
            bottom: 20%;
            font-size: 3.5rem;
            left: 3%;
            right: 0;
            text-align: left;
        }

        .codevid-logo img {
            width: 50%;
        }

        .step-1-text {
            width: 95%;
        }

        

        .process-text {
            width: unset;
            position: absolute;
            right: 0;
            line-height: unset;
            font-size: 1rem;
            padding: 10%;
        }

        .process-title {
            width: 70%;
        }

        .work_content_text {
            width: 95%;
            line-height: unset;
            font-size: 0.8rem;
            padding: 10%;
            left: 0;

        }

        .overlay ul li a {
            font-size: 3rem;
        }

        .testimonial-title {
            font-size: 3.5rem;
        }

        .testimonial-container {
            width: 90%;
        }
    }

    @media (max-width:991px) {
        .home-title {
            font-size: 4.5rem;
        }

        .codevid-logo img {
            width: 65%;
        }

        .process-title {
            width: 90%;
        }

        .work_content.middle .step-title {
            font-size: 2.5rem;
        }

        .step-title {
            left: 10%;
        }

        .step-content-2.middle .step-title {
            bottom: -12%;
            color: #4AE8AD;
        }

        .overlay ul li a {
            font-size: 2.5rem;
        }

        .overlay.menu h2 {
            font-size: 1.7rem;
        }

        .overlay.menu h3 {
            font-size: 1.5rem;
        }



        .testimonial-title {
            font-size: 3rem;
        }

        .testimonial-text {
            text-align: left;
        }

        .testimonial-container {
            width: 90%;
        }

        .testimonials {
            margin-right: unset;
        }
    }

    @media (max-width:768px) {
        .codevid-logo img {
            width: 65%;
        }

        .contact-left h1 {
            font-size: 1.6rem;
        }

        .contact-subtitle {
            font-size: 1.9rem;
        }

        .work_content_text ul {
            padding-inline-start: 15px;
            direction: ltr;
        }

        .testimonial-container {
            width: 90%;
        }

        .home-title {
            font-size: 3.5rem;
        }

        .home-subtitle {
            font-size: 1rem;
        }

        .process-title h2 {
            font-size: 2.5rem;
        }

        .testimonials {
            margin-right: unset;
        }

        .work_content_text {
            width: 95%;
            line-height: unset;
            font-size: 12px;
            padding: 10%;
            left: 0;
        }

        .testimonial-title {
            font-size: 2rem;
        }

        .testimonial-text {
            text-align: left;
        }

        .work_content.middle .step-title {
            font-size: 1.4rem;
            bottom: 0rem;
            color: #4AE8AD;
        }

        .step-content-2.middle .step-title {
            bottom: -10px;
            color: #4AE8AD;
        }

        .step-title {
            left: 13%;
        }

        .process-text {
            font-size: 14px;
        }

        .step-1-text {
            width: unset;
        }

        .overlay ul li a {
            font-size: 2rem;
        }

        .overlay.menu h2 {
            font-size: 1.5rem;
        }

        .overlay.menu h3 {
            font-size: 1.3rem;
        }

        .contact-info {
            line-height: 1.8rem;
        }
    }

    @media (max-width:576px) {
        .codevid-logo img {
            width: 90%;
        }

        /*.homepage-container {
            scroll-snap-type: y proximity;
        }*/

        .image2, .image1 {
            background-position-x: 50%;
        }

        .overlay.analysis, .overlay.sample, .overlay.interpretation {
            font-size:12px;
        }

        .home-title {
            font-size: 3rem;
        }

        .process-title {
            width: unset;
        }

            .process-title h2 {
                font-size: 1.5rem;
            }

        .work_content.middle .step-title {
            font-size: 1.1rem;
            bottom: 0rem;
            color: #4AE8AD;
        }

        .process-text {
            width: unset;
            position: absolute;
            right: 0;
            line-height: unset;
            font-size: 12px;
            padding: 10%;
        }

        .work_content_text {
            width: 95%;
            line-height: unset;
            font-size: 9px;
            padding: 10%;
            left: 0;
        }

        .step-content-2.middle .step-title {
            bottom: -10px;
            color: #4AE8AD;
        }

        .step-content-3.middle .step-title {            
            color: #4AE8AD;
        }

        .step-1-text, .step-3-text {
            width: unset
        }


        .step-title {
            left: 13%;
            font-size: 0.8rem;
        }

        .sample-title {
            line-height: unset;
            text-align: center;
        }

        .work_content_text a img {
            width: 75%;
        }

        .work_content_text .step-2-text{
            font-size:9px;
        }

        .overlay-content h1 {
            text-align: left;
            font-size: 1.5rem;
        }

        .overlay-content h2 {
            font-size: 1.5rem;
            line-height: unset;
        }

        .overlay-content p, .overlay-content h2 {
            text-align: left;
        }

        .overlay ul li a {
            font-size: 1.5rem;
        }

        .overlay.menu h2 {
            font-size: 1.3rem;
        }

        .overlay.menu h3 {
            font-size: 1rem;
        }

        .contact-info {
            line-height: 1.3rem;
            font-size: 12px;
        }

        .contact-left {
            width: 100%;
            padding: 5%;
        }

            .contact-left h1 {
                font-size: 1.2rem;
            }

        .contact-subtitle {
            font-size: 1.3rem;
        }

        .contact-text {
            line-height: 1.2rem;
            font-size: 12px;
        }

        #contact-frm input, #contact-frm textarea {
            font-size: 12px;
        }

        .testimonials {
            margin-right: unset;
        }

        .testimonial-text h2 {
            font-size: 1.3rem;
        }

        .testimonial-text {
            font-size: 12px;
            line-height: unset;
            text-align: left;
        }

        .testimonial-container {
            width: 100%;
        }

        .testimonial-title {
            font-size: 1rem;
        }
    }


    @media (min-width:1921px) {
    }