/* Header */

.educational .header::before {
    background-image: url(../../images/new/svg/g-bg-1.svg);
    background-size: 50%;
    background-position: top -115px right -3px;
}

.educational-banner::before {
    background-image: url(../../images/new/svg/ep-bg-design.svg);
}

@media (max-width: 580px) {
    .educational-banner .dt-image {
        height: 325px;
    }
}


/* Section 1 */

.ep-s1 {
    position: relative;
}

.ep-s1::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10%;
    background-image: url(../../images/new/svg/ep-bg-1.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top 70% left 0;
    width: 60%;
    height: 100%;
    z-index: -1;
}

@media (max-width: 901px) {
    .ep-s1.text-image.image-text-2 {
        padding-top: 90px;
    }
}

@media (max-width: 380px) {
    .ep-s1.text-image.image-text-2 {
        padding-top: 45px;
    }
}


/* Section 2 */

.ep-s2.dt-s3 {
    padding-top: 180px;
}

.ep-s2-image {
    width: 420px;
    height: 205px;
    background-image: url(../../images/new/astute-learning-tools.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top -55px right 0;
    margin-top: 40px;
    border-radius: 20px;
}

.ep-s2 .flex-elem-item {
    max-width: unset;
    width: 420px;
}

.ep-s2 .flex-elem-item.elem-1,
.ep-s2 .flex-elem-item.elem-3,
.ep-s2 .flex-elem-item.elem-5 {
    padding-right: 10px;
}

.ep-s2 .flex-elem-item.elem-5 {
    margin-top: 20px;
}

@media (max-width: 1025px) {
    .ep-s2 .flex-elem-item,
    .ep-s2-image {
        width: 390px;
    }
}

@media (max-width: 901px) {
    .ep-s2 .flex-elem-item,
    .ep-s2-image {
        width: 350px;
    }
    .ep-s2-image {
        background-position: top 0 left 0;
    }
    .ep-s2.dt-s3 {
        padding-top: 140px;
    }
}

@media (max-width: 769px) {
    .ep-s2 .flex-elem-item, 
    .ep-s2-image {
        width: 100%;
    }
    .ep-s2 .flex-elem-item {
        margin-top: 20px;
        order: 1;
    }
    .ep-s2 .flex-elem-item:first-child {
        margin-top: 0;
    }
    .ep-s2-image {
        order: 0;
        height: 400px;
        margin-top: 0;
        margin-bottom: 20px;
    }
}

@media (max-width: 580px) {
    .ep-s2-image {
        height: 297px;
    }
}

@media (max-width: 380px) {
    .ep-s2.dt-s3 {
        padding-top: 60px;
    }
}


/* Section 3 */

.ep-s3.image-text {
    padding-top: 80px;
}

.ep-s3 .dt-bg-design-4 {
    background-image: url(../../images/new/svg/initiale/EP.svg);
}

@media (max-width: 769px) {
    .ep-s3.image-text .flex-elem.left {
        width: 100%;
    }
}

@media (max-width: 450px) {
    .ep-s3.image-text .it-image {
        height: 283px;
    }
}

@media (max-width: 380px) {
    .ep-s3 br {
        display: none;
    }
    .ep-s3.image-text {
        padding-top: 45px;
    }
}


/* Section 4 */

.ep-s4.three-bubbles-section {
    padding-bottom: 580px;
    position: relative;
    z-index: 1;
}

.ep-s4 .three-bubbles-desktop .bubble-elem.elem-1 {
    bottom: unset;
    top: 0;
    left: 120px;
}
.ep-s4 .three-bubbles-desktop .bubble-elem.elem-2 {
    top: unset;
    bottom: -85px;
    right: -300px;
}
.ep-s4 .three-bubbles-desktop .bubble-elem.elem-3 {
    bottom: -420px;
    right: unset;
    left: -530px;
}

.ep-s4 .three-bubbles-desktop .bubble-elem.elem-1::before {
    background-image: url(../../images/new/svg/ep-bubble-1.svg);
    top: -30%;
    left: -40%;
    width: 180%;
    height: 180%;
}
.ep-s4 .three-bubbles-desktop .bubble-elem.elem-2::before {
    background-image: url(../../images/new/svg/ep-bubble-2.svg);
    top: -34%;
    left: -36%;
}
.ep-s4 .three-bubbles-desktop .bubble-elem.elem-3::before {
    background-image: url(../../images/new/svg/ep-bubble-3.svg);
    top: -43%;
    left: -23%;
}

.ep-s4 .three-bubbles-desktop .bubble-elem.elem-1::after {
    left: -23%;
    top: -21%;
}

.ep-s4 .three-bubbles-desktop .bubble-elem.elem-3::after {
    top: -45%;
    left: -25%;
    right: unset;
}

.ep-s4 .three-bubbles-desktop .bubble-elem.elem-3 .carousel-text {
    margin-top: 24px;
}

@media (max-width: 1201px) {
    .ep-s4 .three-bubbles-desktop .bubble-elem.elem-2 {
        bottom: -195px;
        right: -240px;
    }
}

@media (max-width: 1025px) {
    .ep-s4 .three-bubbles-desktop .bubble-elem.elem-2::before {
        top: -50%;
        left: -50%;
    }
    .ep-s4 .three-bubbles-desktop .bubble-elem.elem-3::before {
        width: 170%;
        height: 170%;
    }
    .ep-s4 .three-bubbles-desktop .bubble-elem.elem-2 {
        right: -265px;
    }
    .ep-s4 .three-bubbles-desktop .bubble-elem.elem-3 {
        bottom: -440px;
        left: -555px;
    }
}

@media (max-width: 901px) {
    .ep-s4.three-bubbles-section {
        padding-bottom: 130px;
    }
    .ep-s4 .three-bubbles-responsive::after {
        background-image: url(../../images/new/svg/ep-bubble-4.svg);
        width: 110%;
        height: 110%;
        top: -15px;
        left: -38px;
    }
    .three-bubbles-responsive .bubble-elem .carousel-text {
        margin-top: 37px;
    }
}

@media (max-width: 580px) {
    .three-bubbles-responsive .bubble-elem .carousel-text {
        width: 82%;
    }
    .three-bubbles-responsive::after {
        width: 110%;
        height: 100%;
        top: 3%;
        left: -3%;
    }
    .three-bubbles-responsive::before {
        top: 8%;
        left: 5%;
    }
    .ep-s4 .three-bubbles-responsive::after {
        left: -20px;
    }
}

@media (max-width: 450px) {
    .three-bubbles-responsive::after {
        width: 120%;
        height: 110%;
        top: 0%;
        left: -10%;
    }
    .ep-s4.three-bubbles-section {
        padding-bottom: 60px;
    }
    .three-bubbles-responsive::after {
        background-size: 115%;
    }
}

@media (max-width: 380px) {
    .ep-s4 .three-bubbles-responsive::after {
        width: 130%;
        height: 130%;
        top: -43px;
        left: -48px;
    }
    .three-bubbles-responsive::before {
        left: -1%;
    }
    .three-bubbles-responsive .bubble-elem .carousel-text {
        width: 100%;
    }
}

@media (max-width: 340px) {
    .ep-s4 .three-bubbles-responsive::after {
        background-size: 140%;
    }
}



/* Background */

.ep-bg-1 {
    position: relative;
    overflow: hidden;
}

.ep-bg-1a {
    position: absolute;
    top: 11%;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../../images/new/svg/ep-bg-10.svg);
    background-repeat: no-repeat;
    background-size: 115%;
    background-position: top 0 left 0;
    z-index: -3;
}

.laptop-bg-1 {
    position: absolute;
    top: 46%;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top 0 left 0;
    background-image: url(../../images/new/svg/ep-bg-5.svg);
    z-index: -1;
}



.educational .latest-bottom {
    min-height: 200px;
}

@media (max-width: 1800px) {
    .ep-bg-1a {
        background-size: 140%;
    }
}

@media (max-width: 1600px) {
    .ep-bg-1a {
        top: 12%;
        background-size: 162%;
        background-position: top 0 left -220px;
    }
}

@media (max-width: 1201px) {
    .header-dots {
        display: none;
    }
    .ep-bg-1a {
        background-size: 205%;
    }
    .laptop-bg-1 {
        background-size: 145%;
    }
} 

@media (max-width: 1025px) {
    .laptop-bg-1 {
        background-size: 185%;
    }
    .ep-bg-1a {
        background-size: 230%;
        top: 9%;
    }
}

@media (max-width: 901px) {
    .ep-bg-1a {
        top: 14%;
    }
    .laptop-bg-1 {
        background-size: 150%;
        top: 54%;
    }
}

@media (max-width: 769px) {
    .ep-bg-1a {
        background-size: 100%;
        background-image: url(../../images/new/svg/ep-bg-r-1.svg);
        background-position: top 0 left 0;
        height: 60%;
        top: 21%;
    }
    .laptop-bg-1 {
        background-size: 165%;
        top: 59%;
    }
    .educational .latest-bottom {
        min-height: 130px;
    }
}

@media (max-width: 700px) {
    .laptop-bg-1 {
        background-size: 200%;
        background-position: top 0 left -350px;
    }
}

@media (max-width: 600px) {
    .laptop-bg-1 {
        top: 60%;
    }
    .ep-bg-1a {
        height: 58%;
    }
}

@media (max-width: 580px) {
    .header.educational::before {
        background-size: 70%;
        background-position: top -20px right -30px;
    }
    .laptop-bg-1 {
        background-size: 150%;
        top: 57%;
        background-position: top 0 left -200px;
    }
}

@media (max-width: 550px) {
    .laptop-bg-1 {
        background-size: 170%;
        top: 58%;
    }
}

@media (max-width: 500px) {
    .laptop-bg-1 {
        background-size: 186%;
        top: 59%;
        background-position: top 0 left -270px;
    }
    .laptop-bg-1 {
        background-size: 180%;
    }
}

@media (max-width: 450px) {
    .ep-bg-1a {
        top: 18%;
    }
    .laptop-bg-1 {
        top: 62%;
    }
    .ep-s1::before {
        top: 140px;
        left: unset;
        right: 0;
        background-size: 122%;
        background-position: top 70% right -100px;
        width: 100%;
    }
    .text-image.image-text-2 {
        margin-top: 0;
        padding-top: 41px;
        padding-bottom: 20px;
    }
    .dt-bg-design-4 {
        width: 270px;
    }
}

@media (max-width: 380px) {
    .laptop-bg-1 {
        background-size: 245%;
    }
    .ep-bg-1a {
        height: 70%;
    }
    .educational .header::before {
        background-size: 90%;
    }
    .laptop-bg-1 {
        top: 62%;
    }
}

@media (max-width: 350px) {
    .ep-bg-1a {
        background-size: 115%;
    }
    .laptop-bg-1 {
        top: 64%;
    }
}

@media (max-width: 320px) {
    .ep-bg-1a {
        background-size: 126%;
    }
}