/*
Theme Name: Well-Being Superheroes
Author: Yana Panko
Description: A minimal structure WordPress theme.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: wellbeing-superheroes
*/

body.page-template-home {
    margin: 0;
    height: 100%;
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #1E90FF;
}
.green_bg{
    background-color: #297411;
}
.container{
    z-index: 10;
}
section:not(.form-section){
    height: 100vh;
    scroll-snap-align: start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
/*Стилізація форми---------------------------------------*/
.form-section{
    margin-top: 50px;
}
#custom-contact-form{
    gap: 10px;
    padding: 30px 15px;
    width: 100%;
}
.form-section .img-form{
    max-width: 100%;
}
#custom-contact-form input, #custom-contact-form textarea{
    width: 100%;
    border: 1px solid #000;
    padding: 5px;
}
.form-section .mail-field{
    position: relative;
}
#email-response{
    position: absolute;
    top: 100%;
    font-size: 14px;
}
#custom-contact-form input:focus-visible, #custom-contact-form textarea:focus-visible{
    outline: 5px auto #000;
}
#custom-contact-form button, .wpcf7-submit{
    background-color: transparent;
    border: 1px solid #000;
    padding: 10px;
    border-radius: 20px;
    color: #000;
}
#custom-contact-form button:focus, #custom-contact-form button:hover, #custom-contact-form button:focus-visible{
    outline: 5px auto #000;
    background-color: #000;
    color: #fff;
    transition: background-color 1s ease;
}

/* Друга форма */

.page-id-49{
    margin: 50px 20px;
}
.page-id-49 .wp-block-image{
    display: flex;
    justify-content: center;
}
.wpcf7{
    display: flex;
    justify-content: center;
}
.wpcf7-form{
    max-width: 400px;
    width: 100%;
}
.wpcf7-form input, .wpcf7-form textarea{
    width: 100%;
    border: 1px solid #000;
    padding: 5px;
}
.wpcf7-form label{
    width: 100%;
    margin-bottom: 0;
}
.wpcf7-spinner{
    margin: 5px auto;
    display: block;
}


/*Кінець стилізації форми---------------------------------------*/
h1{
    font-family: "Gagalin";
    font-size: 60px;
    line-height: 1.4;
    color: #C7D7C1;
    padding: 35px;
    text-align: center;
}
h2{
    font-family: "Gagalin";
    font-size: 50px;
    line-height: 1;
    color: #C7D7C1;
    margin-bottom: 30px;
}
h3{
    font-family: 'Quicksand';
    font-size: 32px;
    line-height: 1.5;
    color: #C7D7C1;
}
.oval{
    padding: 50px 80px;
    border-radius: 230px;
    min-height: 450px;
}
.vector{
    position: absolute;
}
@keyframes complexAnimation {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0;}
}

.vector svg{
    max-width: 90px;
    max-height: 90px;
    animation: complexAnimation 6s infinite;
}
.blue-sp{
    background-color: #B8D8BD;
    color: #203E4D;
}
.green-sp{
    background-color: #CDD3B6;
    color: #064117;
}
.red-sp{
    background-color: #C1D0B1;
    color: #5D1A2C;
}
.orange-sp{
    background-color: #CDCD9B;
    color: #7D4500;
}
.blue-sp .vector-top{
    left: -14%;
    top: -5%;
}
.blue-sp .vector-bottom{
    right: -3%;
    bottom: -10%;
}
.green-sp .vector-top{
    right: 25%;
    top: 0;
}
.green-sp .vector-bottom{
    left: -14%;
    bottom: -3%;
}
.red-sp .vector-top{
    left: -25%;
    top: -1%;
}
.red-sp .vector-bottom{
    right: -5%;
    bottom: -4%;
}
.orange-sp .vector-top{
    right: 15%;
    top: -4%;
}
.orange-sp .vector-bottom{
    left: -15%;
    bottom: -13%;
}
.mtop-5{
    margin-top: -5%;
}
.first_img{
    z-index: 100;
    position: relative;
    width: 100%;
}
.speaker{
    position: relative;
    overflow: hidden;
}
.speaker img.speaker_photo{
    object-fit: contain;
    width: 100%;
    margin-left: -25%;
}
.speaker_img{
    width: 270%;
    position: absolute;
    margin-left: -63%;
}
.speaker:before{
    content: '';
    position: absolute;
    left: 5%;
    width: 600px;
    height: 600px;
    border-radius: 100%;
    transform: translate(-50%, 0);
}
.speaker:after{
    content: '';
    position: absolute;
    top: 0;
    right: -15%;
    z-index: 1;
    width: 35%;
    height: 111%;
    transform: rotate(11deg);
}
.speaker .title{
    font-family: "Sailors";
    font-size: 36px;
    line-height: 1.4;
    margin-bottom: 25px;
}
.speaker .title span{
    font-size: 70px;
    margin-bottom: 10px;
}
.speaker .desc{
    font-family: 'Quicksand';
    font-size: 22px;
    line-height: normal;
    margin-bottom: 20px;
}
.speaker .desc_pow{
    font-weight: 700;
}
.speaker.blue-sp:before{
    background-color: #FBB948;
}
.speaker.blue-sp:after{
    background-color: #9CCCB3;
}
.speaker.green-sp:before{
    background-color: #9e3730;
}
.speaker.green-sp:after{
    background-color: #CC615C;
}
.speaker.red-sp:before{
    background-color: #9C997D;
}
.speaker.red-sp:after{
    background-color: #B6C0A1;
}
.speaker.orange-sp:before{
    background-color: #fdb954;
}
.speaker.orange-sp:after{
    background-color: #C7B950;
}
.footer p{
    color: #297411;
    font-family: "Sailors";
    margin-bottom: 0;
}
@keyframes diagonalScroll {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 1000% 1000%;
    }
}
.bg-img{
    position: relative;
}


@media screen and (max-width: 1024px) {
    section {
        padding: 120px 0;
    }
    h1{
        font-size: 42px;
        padding: 40px 60px;
    }
    h2{
        font-size: 40px;
    }
    h3{
        font-size: 20px;
    }
    .oval {
        padding: 50px 60px;
        border-radius: 180px;
        min-height: 280px;
    }
    .speaker .title {
        font-size: 26px;
        margin-bottom: 20px;
    }
    .speaker .title span {
        font-size: 55px;
        margin-bottom: 4px;
    }
    .speaker .desc {
        font-size: 16px;
        margin-bottom: 15px;
    }
    .speaker img.speaker_photo {
        margin-left: -15%;
    }
    .vector svg {
        max-width: 75px;
        max-height: 75px;
    }
    .speaker:before {
        left: 3%;
        width: 450px;
        height: 450px;
    }
}
@media screen and (max-width: 992px) {
    .speaker .row{
        align-items: center;
    }
    .speaker:before {
        top: 10%;
        left: 13%;
    }
    .speaker img.speaker_photo {
        margin-left: 0;
    }
    .speaker img.speaker_photo {
        width: 75%;
    }
    .blue-sp .vector-top {
        left: 30%;
        top: -5%;
    }
    .blue-sp .vector-bottom {
        right: 10%;
        bottom: -25%;
    }
    .green-sp .vector-top {
        right: 11%;
        top: 0;
    }
    .green-sp .vector-bottom {
        left: 3%;
        bottom: -24%;
    }
    .red-sp .vector-top {
        left: 33%;
        top: -40%;
    }
    .red-sp .vector-bottom {
        right: 8%;
        bottom: -21%;
    }
    .orange-sp .vector-top {
        right: 12%;
        top: 14%;
    }
    .orange-sp .vector-bottom {
        left: 9%;
        bottom: -27%;
    }
    .speaker_img {
        width: 175%;
        position: absolute;
        margin-left: -33%;
    }
}
@media screen and (max-width: 768px){
    h1{
        padding: 30px;
    }
    h2{
        font-size: 40px;
    }
    h3{
        font-size: 22px;
    }
    .oval {
        border-radius: 185px;
    }
    .speaker:before {
        top: 7%;
        left: 8%;
    }
}
@media screen and (max-width: 480px){
    section {
        padding: 120px 15px;
    }
    h1 {
        font-size: 39px;
        padding: 20px;
    }
    h2 {
        font-size: 35px;
        margin-bottom: 20px;
    }
    h3{
        font-size: 20px;
    }
    .oval {
        padding: 25px 40px;
        border-radius: 150px;
        min-height: 300px;
    }
    .speaker {
        height: auto;
        padding: 100px 0;
    }
    .blue-sp .vector-top {
        left: 35%;
        top: -9%;
    }
    .blue-sp .vector-bottom {
        bottom: -11%;
    }
    .green-sp .vector-bottom {
        bottom: -13%;
    }
    .speaker:before {
        top: -2%;
        width: 300px;
        height: 300px;
    }
    .speaker img.speaker_photo {
        width: 90%;
    }
    .speaker:after {
        right: -22%;
        width: 45%;
    }
    .speaker .title {
        font-size: 22px;
        margin-bottom: 10px;
    }
    .speaker .title span {
        font-size: 42px;
        margin-bottom: 0;
    }
    .red-sp .vector-bottom {
        right: 4%;
        bottom: -7%;
    }
    .red-sp .vector-top {
        left: 35%;
        top: -43%;
    }
    .orange-sp .vector-bottom {
        bottom: -16%;
        left: 14%;
    }
    .green-sp .vector-top {
        right: 12%;
        top: 0;
    }
    .first_img{
        width: 130%;
    }
    .vector svg {
        max-width: 55px;
        max-height: 55px;
    }
    .speaker_img {
        width: 150%;
        margin-left: -18%;
    }
}
@media screen and (max-width: 400px){
    h1 {
        font-size: 35px;
    }
    h2 {
        font-size: 30px;
    }
    h3{
        font-size: 18px;
    }
    .red-sp .vector-bottom{
        display: none;
    }
    .speaker .title {
        font-size: 22px;
        margin-bottom: 10px;
    }
    .speaker .title span {
        font-size: 40px;
        margin-bottom: 0;
    }
    .speaker .desc {
        font-size: 16px;
        margin-bottom: 15px;
    }
}
@media screen and (max-width: 380px){
    h1 {
        font-size: 30px;
    }
    h2 {
        font-size: 26px;
    }
    h3{
        font-size: 16px;
    }
    .oval {
        padding: 20px 30px;
        border-radius: 100px;
        min-height: 220px;
    }
}
@media screen and (max-width: 350px){
    h1 {
        font-size: 18px;
    }
}