/* Hero */
.ai-interviewer-page .hero-two-halves .content{ flex-direction: row-reverse; }
.ai-interviewer-page .hero-two-halves .background-image{ background: linear-gradient(129.1deg, #DD60A3 -5.93%, #8562EC 106.21%); min-width: 50%; }
.ai-interviewer-page .hero-two-halves .background-image:before{ content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("../img/ai/bg-violet.jpg"); background-repeat: no-repeat; background-size: cover; }
.ai-interviewer-page .hero-two-halves .background-image img{ max-width: 760px; width: auto; position: absolute; right: auto; left: -120px; bottom: -10px; }
.ai-interviewer-page .hero-two-halves .right{ justify-content: flex-end; padding: 0 170px 0 20px; }
.ai-interviewer-page .hero-two-halves .right .text-wrapper h1{ max-width: 440px; }
.ai-interviewer-page .hero-two-halves .right .text-wrapper figure img{ width: 130px; }
.ai-interviewer-page .hero-two-halves .right .text-wrapper .btn{ background: linear-gradient(90deg, #D64994 0%, #8663EE 100%); color: var(--white); border: none; }

/* Standalone */
.ai-interviewer-page .standalone{ background: #F5F5F5; color: var(--black); text-align: center; padding: 80px 0; }
.ai-interviewer-page .standalone .label{ text-transform: uppercase; background: linear-gradient(90deg, #D64994 0%, #8663EE 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px; display: block; font-size: 14px; }
.ai-interviewer-page .standalone h3{ font-size: 36px; font-weight: 600; margin-bottom: 10px; letter-spacing: -1px; }
.ai-interviewer-page .standalone h3 span{ display: block; }
.ai-interviewer-page .standalone p{ font-size: 17px; line-height: 1.5; color: #041835; }
.ai-interviewer-page .standalone p span{ display: block; }

/* Single Feature */
.ai-interviewer-page .single-feature #video{ position: relative; top: -200px; }
.ai-interviewer-page .single-feature .left .title{ color: var(--black); font-size: 32px; background: linear-gradient(90deg, #D64994 0%, #8663EE 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-style: italic; }
.ai-interviewer-page .single-feature .right{ border-radius: 20px; }
.ai-interviewer-page .single-feature .right iframe{ border: none; }

/*Planning*/
.ai-interviewer-page .text-with-img-section{ background: none; padding: 90px 0 0; }
.ai-interviewer-page .text-with-img-section .top h3{ margin-bottom: 15px; font-size: 40px; font-weight: 600; background: linear-gradient(90deg, #D64994 0%, #8663EE 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: center; font-style: italic; padding: 0 5px; }
.ai-interviewer-page .text-with-img-section .top .text-wrapper p{ font-size: 17px; line-height: 1.5; color: #041835; text-align: center; max-width: 900px; margin: 0 auto; }

.ai-interviewer-page .list-of-features { position: relative; z-index: 10; padding: 20px 0 70px; }
.ai-interviewer-page .list-of-features .content {}
.ai-interviewer-page .list-of-features ul { display: flex; align-items: stretch; justify-content: center; gap: 20px; flex-wrap: wrap; margin-bottom: 40px; }
.ai-interviewer-page .list-of-features ul li { width: calc(50% - 20px); display: flex; background-color: var(--white); border-radius: 16px; border: 2px solid #E5ECF6; box-shadow: 0 2px 20px 0 rgba(160, 189, 255, 0.30); padding: 45px; }
.ai-interviewer-page .list-of-features ul li figure { min-width: 80px; position: relative; top: -10px; }
.ai-interviewer-page .list-of-features ul li figure img { max-width: 120px; max-height: 80px; }
.ai-interviewer-page .list-of-features ul li p { font-size: 22px; font-weight: 600; text-align: left; margin-bottom: 24px; }
.ai-interviewer-page .list-of-features ul li span { color: #717983; font-size: 18px; text-align: left; max-width: 260px; }

/* Prefooter */
.ai-interviewer-page .pre-footer{ background: linear-gradient(92.31deg, #D64994 -7.38%, #8663EE 104.45%); position: relative; padding: 55px 20px; }
.ai-interviewer-page .pre-footer:before{ content: ""; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url("../img/ai/bg-footer.svg"); background-repeat: no-repeat; background-size: cover; }
.ai-interviewer-page .pre-footer h3,
.ai-interviewer-page .pre-footer a{ position: relative; z-index: 1; }
.ai-interviewer-page .pre-footer h3 span{ display: block; }
.ai-interviewer-page .pre-footer a{ background: var(--white); border-color: var(--white); }
.ai-interviewer-page .pre-footer a span{ background: linear-gradient(90deg, #D64994 0%, #8663EE 100%); text-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.ai-interviewer-page .pre-footer a:hover span{ color: var(--white); background: transparent; text-clip: none; -webkit-background-clip: none; -webkit-text-fill-color: initial; }

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

    /* Features */
    .ai-interviewer-page .list-of-features{ padding: 20px 20px 100px; }

    /* Standalone */
    .ai-interviewer-page .standalone h3{ font-size: 32px; }
    .ai-interviewer-page .standalone p{ font-size: 16px; }

    /* Single Feature */
    .ai-interviewer-page .single-feature{ padding: 60px 20px; }
    .ai-interviewer-page .single-feature .left{ max-width: 450px; }
    .ai-interviewer-page .single-feature .left .title{ font-size: 32px; }
    .ai-interviewer-page .single-feature .left .text-content{ font-size: 15px; }
    .ai-interviewer-page .single-feature .right{ width: 500px; height: 315px; }
    .ai-interviewer-page .single-feature .right:hover{ transform: none; }

    /* Flexible Planning */
    .ai-interviewer-page .list-of-features ul li p{ font-size: 20px; }
    .ai-interviewer-page .list-of-features ul li span{ font-size: 17px; }
    
    .ai-interviewer-page .text-with-img-section{ padding: 70px 20px 0; }
    .ai-interviewer-page .text-with-img-section .top h3{ font-size: 32px; text-align: center; }
    .ai-interviewer-page .text-with-img-section .top .text-wrapper p{ font-size: 16px; }

}

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

    /* Hero */
    .ai-interviewer-page .hero-two-halves .background-image img{ max-width: 500px; left: -70px; }
    .ai-interviewer-page .hero-two-halves .right .text-wrapper figure img{ width: 120px; }
    .ai-interviewer-page .hero-two-halves .right{ padding: 0 70px 0 20px; }

    /* Standalone */
    .ai-interviewer-page .standalone{ padding: 60px 20px; }
    .ai-interviewer-page .standalone h3{ font-size: 28px; }
    .ai-interviewer-page .standalone p{ font-size: 15px; }
    .ai-interviewer-page .standalone p span{ display: inline; }

    /* Single Feature */
    .ai-interviewer-page .single-feature .left{ max-width: 100%; margin-bottom: 30px; }
    .ai-interviewer-page .single-feature .left .title{ font-size: 28px; }
    .ai-interviewer-page .single-feature .left .text-content{ font-size: 14px; }
    .ai-interviewer-page .single-feature .right{ width: 100%; height: auto; padding-top: 65%; position: relative; }
    .ai-interviewer-page .single-feature .right iframe{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

    /* Prefooter */
    .ai-interviewer-page .pre-footer h3 span{ display: inline; }

    /* Flexible Planning */
    .ai-interviewer-page .list-of-features{ padding: 20px 20px 60px; }
    .ai-interviewer-page .list-of-features ul{ flex-direction: column; }
    .ai-interviewer-page .list-of-features ul li{ width: 100%; flex-direction: column; }
    .ai-interviewer-page .list-of-features ul li p{ font-size: 19px; }
    .ai-interviewer-page .list-of-features ul li span{ font-size: 16px; }

    .ai-interviewer-page .text-with-img-section .top h3{ font-size: 28px; }
    .ai-interviewer-page .text-with-img-section .top .text-wrapper p{ font-size: 15px; }

}

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

    /* Hero */
    .ai-interviewer-page .hero-two-halves .content{ flex-direction: column; }
    .ai-interviewer-page .hero-two-halves .background-image img { max-width: 440px; right: auto; left: 50%; transform: translateX(-50%); }
    .ai-interviewer-page .hero-two-halves .right{ padding: 40px 20px 0; }
    .ai-interviewer-page .hero-two-halves .right .text-wrapper h1{ font-size: 28px; max-width: 100%; }
    .ai-interviewer-page .hero-two-halves .right .text-wrapper{ max-width: 100%; }
    .ai-interviewer-page .hero-two-halves .right .text-wrapper .btn{ display: block; height: auto; }
    
    /* Single Feature */
    .ai-interviewer-page .single-feature #video{ position: relative; top: -160px; }
    
}


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

    /* Hero */
    .ai-interviewer-page .hero-two-halves .background-image{ height: 315px; }
    .ai-interviewer-page .hero-two-halves .background-image img{ width: 100%; padding: 0 20px; }
    
}