@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

* {
    padding: 0;
    margin: 0;
}

a {
  outline-color: transparent;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
    color: #333333;
}

a:visited {
    color: #333333;
}

a:focus,
a:hover {
    color: #FA4869;
    border-bottom: 1px solid;
}

a:active {
    color: #FA4869;
}

a.logoLink:hover {
    border: none;
}

nav {
    width: 100%;
}

.margedBottom{
    margin-bottom: 2rem;
}

.nowrap {
    white-space: nowrap;
}

.nunito-sans-bold {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
  }

.nunito-sans-regular {
    font-family: "Nunito Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
  }

.wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(/img/gradientBackground.svg);
    background-size: cover;
}

.white {
    color: white;
}

.accent {
    color: #FA4869;
}

.blue{
    color: rgb(76 113 249);;
}

.text-m {
    font-size: 1.5rem;
}

.text-l {
    font-size: large;
}

.text-xl {
    font-size: x-large;
}

.text-xxl {
    font-size: 2rem;
}

.text-xxxl {
    font-size: 3rem;
}

.headerImage {
    width: 100%;
    margin: auto;
}

.footerImage {
    width: 100%;
    margin: auto;
}

.chatWindow {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 88%;
    display: none;
    overflow-y: auto;
    background-color: #ffffff;
    z-index: 300;
    opacity: 0;
    transition: .5s ease-in;
}


.chatWindow.visible {
    opacity: 1;
    transition: .5s ease-in;
    display: block;

}


.chatWindow.hidden {
    opacity: 0;
    transition: .5s ease-in;
    display: none;

}

.menuWindow {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 88%;
    display: none;
    overflow-y: auto;
    background-color: #ffffff;
    z-index: 300;
    opacity: 1;
    transition: .5s ease-in-out;
}


.menuWindow.visible {
    display: block;

}


.menuWindow.hidden {
    display: none;

}

.menuBar {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-around;
    top: 0;
    width: 100%;
    height: 12vh;
    overflow-y: auto;
    background-color: #ffffff;
    z-index: 400;
    opacity: 0.9;
    transition: 1s ease-in-out;
}


.menuBar.visible {
    display: flex;

}


.menuBar.hidden {
    display: none;

}

.logoFull {
    top: 1rem;
    height: 4rem;
}

.navList {
    display: none;
}

.callUs {
    width: 3rem;
    height: 3rem;
    background-image: url('/img/phone-color.png');
    background-size: cover;
    transition: .5s ease-out;
}

a.callUs:hover {
    border-bottom: none;
    scale: 1.1; 
    transition: .5s ease-out;
}

@keyframes fadeInFromNone {
    0% {
      display: none;
      opacity: 0;
    }
  
    1% {
      display: block;
      opacity: 0;
    }
  
    100% {
      display: block;
      opacity: 1;
    }
  }
  
  @keyframes fadeOut {
    0% {
      display: block;
      opacity: 1;
    }
  
    99% {
      display: block;
      opacity: 0;
    }
  
    100% {
      display: none;
      opacity: 0;
    }
  }

.closeButton {
    display: none;
}

.chatButton {
    margin-top: .7rem;
    top: 1.5rem;
    height: 3rem;
    width: 2.3rem;
    background-image: url(/img/chat.svg);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 500;
    transition: .2s ease-out;
}

div#chatButton:hover {
    border-bottom: none;
    scale: 1.1; 
    transition: .2s ease-out;
    cursor: pointer;
}

.chatButton.menu{
    background-image: url(/img/chat.svg);
}

.chatButton.close{
    background-image: url(/img/close-color.png);
}

.chatButton.visible {
    display: block;

}

.chatButton.hidden {
    display: none;

}

.actionButton {
    right: 10%;
    top: 1.5rem;
    height: 2.4rem;
    width: 2.4rem;
    background-image: url(/img/menu.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 500;
    transition: .2s ease-out;
}

div#actionButton:hover {
    border-bottom: none;
    scale: 1.1; 
    transition: .2s ease-out;
    cursor: pointer;
}

.actionButton.menu{
    background-image: url(/img/menu.png);
}

.actionButton.close{
    background-image: url(/img/close-color.png);
}

.actionButton.visible {
    display: block;

}

.actionButton.hidden {
    display: none;

}

.mobileNavigation {
    margin-right: auto;
    margin-left: auto;
    width: 80%;
    display: flex;
    align-items: center;
    height: 90%;
    justify-content: space-around;
    flex-direction: column;
}

.mobileNavigation_list {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    text-align: center;
    text-decoration: none;
    list-style-type: none;
    gap: 3rem;
    width: 70%;
}

.chatWrapper {
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: space-around;
    flex-direction: column;
}

.chatContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    text-align: center;
    text-decoration: none;
    list-style-type: none;
    gap: 2rem;
    width: 80%;
}

.chatCallBack {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
}

.chatSocials{
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2rem;
}

.navigation_callto {
    display: flex;
    flex-direction: column;
    width: 75%;
    max-width: 1100px;
}

.callto_text {
    margin-bottom: 2rem;
    font-size: 1.5rem;

}


.bigImage{
    display: block;
    position: relative;
    z-index: 2;
    margin-top: 12vh;
    width: 100%;
    max-width: 100%;
    height: auto;
    border: none;
}

.bigImage__header {
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
}

.bigImageInside__header {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.bigImageInside__about {
    margin-top: 2vh;
}


.bigImage__footer {
    clip-path: polygon(0 35%, 100% 0, 100% 100%, 0% 100%);
}
 

.mainContent {
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    width: 100%;    
}

.insideMainContent {
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -3rem;
    width: 100%;    
}

.insideMainContent_news {
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -9rem;
    width: 100%;    
}

.insideMainContent_kids {
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -9rem;
    width: 100%;    
}


.insideMainContent_adults {
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -6rem;
    width: 100%;    
}

.insideMainContent_about {
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -4rem;
    width: 100%;    
}

.insideMainContent_prices {
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -6rem;
    width: 100%;    
}


.rectDistortedLeft {
    padding-top: 8rem;
    padding-bottom: 8rem;
    display: flex;
    background-color: white;
    clip-path: polygon(0 3%, 100% 0, 100% 100%, 0 95%);
    width: 100%;
    flex-direction: column;
    gap: 5rem;
    align-items: center;
}

.rectDistortedLeft_kids {
    padding-top: 5rem;
    padding-bottom: 8rem;
    display: flex;
    background-color: white;
    clip-path: polygon(0 2%, 100% 0, 100% 100%, 0 98%);
    width: 100%;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
}

.rectDistortedLeft_adults {
    padding-top: 5rem;
    padding-bottom: 5rem;
    display: flex;
    background-color: white;
    clip-path: polygon(0 2%, 100% 0, 100% 100%, 0 98%);
    width: 100%;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
}

.rectDistortedLeft_about {
    padding-top: 2rem;
    padding-bottom: 5rem;
    display: flex;
    background-color: white;
    clip-path: polygon(0 4%, 100% 0, 100% 100%, 0 96%);
    width: 100%;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
}

.rectDistortedLeft_prices {
    padding-top: 5rem;
    padding-bottom: 8rem;
    display: flex;
    background-color: white;
    clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%);
    width: 100%;
    flex-direction: column;
    gap: 5rem;
    align-items: center;
}

.services {
    display: flex;
    gap: 1rem;
    padding-top: 1rem;
    flex-direction: column;
    justify-content: space-between;
    width: 75%;
    max-width: 1100px;
}

.serviceItem_img {
    width: 100%;
    border-radius: 10px;
    height: fit-content;
}

.aboutItem_img {
    width: 70%;
}

.serviceContent {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.sectionAction{
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 500;
    width: 100%;
    height: 160vh;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
    background-image: url(/img/homeSection2Mobile.png);
    margin-bottom: -10vh;
    margin-top: -10vh;
}

.sectionActionBlock {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 75%;
    max-width: 1100px;
}

.sectionActionHeader {
    font-size: 2rem;
    margin-top: 20vh;
}
.sectionActionContent {
    font-size: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    list-style: none;
}

.sectionLab{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.labItem_pic {
    width: 100%;
}

.labItem_img {
    width: 100%;
}

.labContent {
    width: 75%;

    padding-left: 2rem;
}

.labList {
    list-style: none;
    font-size: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 3rem;
    margin-bottom: 2rem;
}

.labHeader {
    font-size: 2rem;
}

.labQuote {
    margin-top: 3rem;
    background-color: #FA4869;
    outline: solid 2rem #FA4869;
}

.newsBlock {
    display: flex;
    gap: 4rem;
    padding-bottom: 2rem;
    flex-direction: column;
    justify-content: space-between;
    width: 75%;
}


.newsItemHome {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.newsItem_img {
    width: 100%;
    border-radius: 10px;
}


.map {
    width: 100%;
    max-width: 1100px;
    border: none;
}

.description__text {
    color: white;
    font-size: 1rem;
}

.description {
    padding-top: 2rem;
    padding-bottom: 4rem;
    width: 75%;
    max-width: 1100px;
    text-align: center;
}

.finalContent {
    padding-top: 4rem;
    padding-bottom: 3rem;
    width: 100%;
}


.contacts {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 4rem;
    width: 75%;
    max-width: 1100px;
    box-shadow: 0px 4px 12px 1px rgb(0 0 0 / 20%);
}

.address {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3rem;
    max-width: 1100px;
    width: 100%;
    max-width: 1100px;
    background-color: white;
    padding-bottom: 4rem;
}

.location {
    padding-top: 3rem;
}

.location__text {
    padding-left: 2rem;
    color: #333333;
    font-size: 1.3rem;
}

.link {
    padding-left: 1rem;
    font-size: 1rem;
    text-decoration: none;
    color: #333333;
}

.social__icon {
    width: 3rem;
    height: 3rem;
}

.social {
    padding-left: 2rem;
    display: flex;
    width: 75%;
}

.callto_description {
    color: #333333;
    font-size: 1.3rem;
}

.statusMessage {
    color: rgb(76 113 249);
    font-size: 1rem;
    text-align: center;
    width: 80%;
    margin: auto;
}


.form{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.form_input__field{
    padding: 5%;
    font-size: 1rem;
    border: none;
    border-radius: 1rem;
    background-color: #fafafa;
    width: 90%;
    /* height: 5rem; */
}

.formChat{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

input[type=submit] {
    font-size: 1rem;
    border: none;
    border-radius: 1rem;
    width: 100%;
    height: 4rem;
    background-color: rgb(164 216 253);
    cursor: pointer;
    transition: .5s ease;
}

input[type=submit]:hover {
    background-color: rgb(164, 170, 253);
    transition: .5s ease;
}

input[type=submit]:disabled {
    font-size: 1rem;
    border: none;
    border-radius: 1rem;
    width: 100%;
    height: 4rem;
    background-color: rgb(212, 212, 212);
    cursor:default;
}

.formChat_input__field{
    padding: 5%;
    font-size: 1rem;
    border: none;
    border-radius: 1rem;
    background-color: #fafafa;
    width: 90%;
    /* height: 5rem; */
}

.studioName {
    height: 25vh;
    width: 100%;
    background-size: 100%;
    background-position-x: center;
    background-position-y: center;
    background-repeat: no-repeat;
    background-image: url(/img/logo_name_mobile.png);
}

.limitedInside {
    width: 75%;
    max-width: 1100px;
    padding-top: 3rem;
   }

.priceContainer {
    padding-bottom: 4rem;
}

.pricesLabels {
    padding-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.pricesBlock {
    background-color: #efefef;
    padding: 2rem;
    border-radius: 5px;
}

@media (min-width: 640px) { 
    .studioName {
        height: 30vh;
    }

    .description__text {
        font-size: 1.2rem;
    }


    .link {
        font-size: 1.2rem;
    }

    .location__text {
        padding-left: 4rem;
        color: #333333;
        font-size: 1.5rem;
    }

    .social {
        padding-left: 4rem;
    }
}

@media (min-width: 768px) { 

    .sectionLab{
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        width: 100%;
        margin-top: 5vh;
        margin-bottom: 5vh;
    }

    .labItem_pic {
        width: 45%;
    }
    
    .labItem_img {
        width: 100%;
    }
    
    .labContent {
        width: 30%;
        margin-top: 5vh;
        padding-left: 2rem;
    }
    
    .labList {
        list-style: none;
        font-size: 1.4rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 3rem;
        margin-bottom: 2rem;
    }
    
    .labHeader {
        font-size: 2rem;
    }
    
    .labQuote {
        margin-top: 3rem;
        background-color: #FA4869;
        outline: solid 2rem #FA4869;
    }
    

    .studioName {
        height: 40vh;
    }

    .sectionAction{
        background-image: url(/img/homeSection2.png);
    }

    .sectionAction{
        height: 150vh;
    }

    .sectionAction{
        height: 140vh;
    }

    .description__text {
        font-size: 1.4rem;
    }


    .link {
        padding-left: 2rem;
        font-size: 1.5rem;
    }

    .location__text {
        padding-left: 4rem;
        color: #333333;
        font-size: 2rem;
    }
}

@media (min-width: 1024px) { 

    .closeButton {
        margin-top: 2rem;
        margin-right: -80%;
        top: 1.5rem;
        height: 2rem;
        width: 2rem;
        background-image: url(/img/close-color.png);
        background-repeat: no-repeat;
        background-size: contain;
        z-index: 500;
        transition: .2s ease-out;
        display: block;
        cursor: pointer;
    }

    .closeButton:hover {
        scale: 1.1;
        transition: .2s ease-out;
    }

    .pricesLabels {
        padding-top: 1rem;
        display: flex;
        flex-direction: row;
        gap: 1rem;
    }

    .rectDistortedLeft_kids {
        padding-top: 5rem;
        padding-bottom: 10rem;
        clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 95%);
    }

    .rectDistortedLeft_adults {
        padding-top: 8rem;
        padding-bottom: 8rem;
        display: flex;
        background-color: white;
        clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
    }

    .rectDistortedLeft_about {
        padding-top: 8rem;
        padding-bottom: 8rem;
        background-color: white;
        clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
    }

    .studioName {
        height: 50vh;
        background-image: url(/img/logo_name_wide.png);
    }

    .callto_description {
        width: 50%;
    }

    .navigation_callto {
        flex-direction: row;
    }

    .form {
        width: 80%;
    }


    .sectionAction{
        background-image: url(/img/homeSection2Wide.png);
    }

    .sectionActionBlock {
        max-width: 1100px;
    }

    .services {
        display: flex;
        gap: 4rem;
        padding-top: 1rem;
        flex-direction: row;
        justify-content: space-between;
        width: 75%;
    }
    
    .serviceItem_img {
        width: 50%;
        border-radius: 10px;
        height: fit-content;
    }

    .aboutItem_img {
        width: 25%;
        height: fit-content;
    }

    .newsBlock {
        flex-direction: row;
        width: 75%;
        max-width: 1100px;
    }

    .callto_text {
        margin-bottom: 2rem;
        font-size: 1.5rem;
    
    }
    .bigImage{
        margin-top: 0;
    }

    .navList {
        display: flex;
        justify-content: center;
        text-align: center;
        text-decoration: none;
        list-style-type: none;
        gap: 2rem;
        width: 65%;
    }

    .menuBar {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 12vh;
        top: 1rem;
        left: 50%;
        transform: translate(-50%);
        border-radius: 100px;
        width: 75%;
        max-width: 1100px;
    }

    .chatButton {
        margin-left: 1rem;
        cursor: pointer;
    }
   
    .actionButton {
        display: none;
    }

    .description__text {
        padding-top: 5rem;
        padding-bottom: 5rem;
        font-size: 3rem;
    }

    .social {
        flex-direction: row;
        max-width: 1100px;
    }

    .link {
        padding-left: 2rem;
        font-size: 1.5rem;
    }

    .location__text {
        padding-left: 6rem;
        color: #333333;
        font-size: 2rem;
    }

    .social {
        padding-left: 6rem;
    }

    .menuWindow {
        display: none;
    }

    .chatWindow {
        position: fixed;
        width: 45rem;
        height: 60%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: none;
        overflow-y: auto;
        background-color: #ffffff;
        z-index: 300;
        opacity: 1;
        transition: .5s ease-in-out;
        border-radius: 100px;
        box-shadow: 0px 4px 12px 1px rgb(0 0 0 / 20%);
    }
    
}

@media (min-width: 1280px) { 
    .chatButton {
        margin-left: 2rem;
    
    }

    .navList {
        display: flex;
        justify-content: center;
        text-align: center;
        text-decoration: none;
        list-style-type: none;
        gap: 3rem;
        width: 70%;
    }
}

@media (min-width: 1400px) { 

    .studioName {
        height: 60vh;
        background-image: url(/img/logo_name_full.png);
    }

    .sectionActionHeader {
        margin-top: 20vh;
        font-size: 3rem;
    }
    .sectionActionContent {
        width: 50%;
        font-size: 2rem;   
    }
    .sectionAction{
        background-image: url(/img/homeSection2Full.png);
    }
}