#demo-hero {
    /*background-color: #0B60D7;*/
    background-image: url("../jpg/kipp_demo_img.jpg");
    background-repeat: no-repeat;
    background-position: right;
    background-size: cover;
}

.contact-us #demo-hero {
    /*background-color: #0B60D7;*/
    background-image: url("../png/contact-hero-mob.png");
    background-repeat: no-repeat;
    background-position: right;
    background-size: cover;
}

#demo-hero > div {
    padding: 130px 20px 65px;
}

#demo-hero .elementor-background-video-container::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: linear-gradient(259.92deg, rgba(0, 190, 255, 0.5) -2.22%, rgba(0, 158, 255, 0.355459) 12.26%, rgba(0, 124, 255, 0.20737) 27.11%, rgba(0, 89, 255, 0.4) 44.5%, #0941BB 58.86%, #0F2E87 78.85%, #151E5B 102.97%);
}

.contact-us #demo-hero::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 1;
    background: linear-gradient(260.12deg, rgba(0, 190, 255, 0.5) -7.4%, rgba(0, 158, 255, 0.355459) 5.17%, rgba(0, 124, 255, 0.20737) 18.05%, rgba(0, 89, 255, 0.4) 28.9%, #0941BB 48.11%, #0F2E87 62.93%, #151E5B 83.85%);
}

#demo-hero .elementor-html5-video {
    object-position: right;
    width: 100% !important;
}

#demo-hero .short-title {
    margin-bottom: 20px;
}

.demo-hero-title h1 {
    font: var(--heading-4);
    color: var(--cyan-blue);
    letter-spacing: -0.05em;
}

.demo-hero-title h1 span {
    color: var(--white);
}

.demo-hero-text p {
    margin-top: 30px;
    font: var(--text-medium);
    color: var(--white);
}

#form-section {
    padding: 0 17px;
    margin-top: -60px;
    z-index: 55;
}

#form-section .form-content {
    background-color: var(--white);
    padding: 35px 22px;
    border-radius: 20px;
    box-shadow: 0 4px 4px 0 #00000040;
}

.form-content .form-title h2 {
    font: var(--heading-5);
    letter-spacing: -0.01em;
    text-align: center;
}

.form-content .form-subtitle p {
    font: 400 13px/14px var(--DM-Sans);
    text-align: center;
    color: var(--text-primary);
    margin: 13px auto 27px;
}

.form-content .p-policy p {
    font: var(--text-small-h9);
    line-height: 14px;
    text-align: center;
    color: var(--text-grey);
}

.form-content form label {
    font: var(--text-medium);
    color: var(--dark-blue);
    margin-bottom: 12px;
}

.form-content form .elementor-field-group-agreement label {
    font: var(--text-small-h9);
    width: fit-content;
    margin: 0;
}

.form-content form .elementor-field-group-agreement span.elementor-field-option {
    display: flex;
    gap: 12px;
    /*margin-top: 14px;*/
}

input#form-field-agreement {
    width: 23px;
    height: 23px;
}

.form-content form input.elementor-field-textual,
.form-content form input.elementor-acceptance-field {
    border-radius: 8px;
    border-color: #D6D7E3;
}

.form-content form button {
    font: 500 24px/22px var(--DM-Sans);
    color: var(--white) !important;
    margin: 30px auto;
    border-radius: var(--radius-8);
    position: relative;
    width: 100%;
    height: 48px;
    transition: all 0.3s ease;
    outline: none;
    background: none;
    border: none;
}

.form-content form button span {
    position: relative;
    z-index: 2;
}

.form-content form button:hover {
    color: var(--dark-blue) !important;
}

.form-content form button::before {
    content: '';
    background: linear-gradient(180deg, #00BEFF 0%, #000BB1 100%) border-box;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
    border-radius: var(--radius-8);
    opacity: 0;
    transition: opacity 0.3s linear;

    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
}

.form-content form button:hover::before {
    opacity: 1;
}

.form-content form button::after {
    content: '';
    background: var(--gradient-blue) padding-box,
    linear-gradient(180deg, #00BEFF 0%, #000BB1 100%) border-box;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid transparent;
    border-radius: var(--radius-8);
    opacity: 1;
    transition: opacity 0.3s linear;
}

.form-content form button:hover::after {
    opacity: 0;
}

#demo-testimonial {
    padding: 20px 0 0;
}

#demo-testimonial.testimonials-carousel {
    max-width: 500px;
}

#demo-testimonial .swiper {
    width: 100%;
    margin: 0;
    padding: 0;
}

#demo-testimonial .swiper-slide {
    padding: 20px 16px 26px 38px;
}


#demo-testimonial .elementor-testimonial__text {
    font: var(--text-small);
    color: var(--white);
    font-weight: 500;
}

#demo-testimonial .elementor-testimonial__text:before {
    content: url("../svg/cyan-quotes.svg");
    position: absolute;
    left: 0;
    top: 6px;
}

#demo-testimonial .elementor-testimonial__footer {
    margin-top: 20px;
}

#demo-testimonial .elementor-testimonial__name {
    font: var(--text-small-h9);
    color: var(--white);
}

#demo-testimonial .elementor-testimonial__title {
    font: var(--text-small);
    color: var(--cyan-blue);
}

#demo-testimonial .swiper-pagination-bullet {
    margin: 0 4px;
    background: linear-gradient(264.46deg, #00BEFF 12.6%, #003AC6 65.42%, #000BB1 84.45%);
    width: 7px;
    height: 7px;
}

.partners-logos figure.swiper-slide-inner {
    display: flex;
    justify-content: center;
    max-height: 44px;
    width: auto;
    max-width: 120px;
}

.contact-us .contact-photo {
    margin-top: 80px;
}

.contact-us .image-square {
    padding: 0 20px;
    max-width: 100vw;
}

.contact-us .image-wrapper {
    width: calc(100% - 40px);
    height: auto;
}

.elementor-field-type-acceptance {
    margin-top: 10px;
}

@media (min-width: 768px) {

}

@media (min-width: 1025px) {
    #demo-hero > div {
        padding: 150px 30px 30px;
        min-height: 600px;
        justify-content: center;
    }

    #demo-hero .demo-hero-title {
        max-width: 580px;
    }

    .demo-hero-title h1 {
        font: var(--heading-2);
    }

    #demo-hero .demo-hero-text {
        max-width: 500px;
    }

    .demo-hero-text p {
        margin-top: 30px;
        font: var(--text-medium);
        color: var(--white);
    }

    #form-section {
        margin-top: -430px;
    }

    #form-section .form-content {
        /*max-width: 635px;*/
        max-width: 45%;
        padding: 35px 40px 60px;
        margin-left: auto;
    }

    .form-content .form-title h2 {
        font: var(--heading-4);
    }

    .form-content .form-subtitle p {
        font: 400 14px/14px var(--DM-Sans);
        margin: 13px auto 30px;
    }

    .form-content form button {
        margin: 20px auto 30px;
    }

    #demo-testimonial.testimonials-carousel {
        max-width: 540px;
    }

    #demo-testimonial .elementor-testimonial__text {
        font: var(--text-regular);
    }

    #demo-testimonial .elementor-testimonial__title {
        font: var(--text-regular);
    }

    .contact-us #demo-hero {
        background-image: url("../png/contact-hero.png");
        background-size: auto;
    }

    .contact-us #demo-hero > div {
        padding: 150px 30px 30px;
        min-height: 600px;
        justify-content: flex-start;
    }

    /*.contact-us #form-section {*/
    /*    margin-top: -320px;*/
    /*}*/

    .contact-us #demo-hero .demo-hero-title {
        max-width: max-content;
    }

    .contact-us #demo-hero .demo-hero-text {
        max-width: 53%;
    }

    .contact-us .image-square {
        max-width: 540px;
        width: 540px;
    }

    .contact-us .contact-photo {
        margin-top: -240px;
        margin-bottom: 60px;
    }
}

@media (min-width: 1360px) {
    #demo-hero > div {
        padding: 150px 0 30px;
    }

    .contact-us #demo-hero > div {
        padding: 170px 0 30px;
    }

    #form-section .form-content {
        max-width: 635px;
    }

    .contact-us #demo-hero .demo-hero-text {
        max-width: 660px;
    }
}