/* --------------------------- */
/*            FONTS            */
/* --------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=Dancing+Script:wght@400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap');

/* --------------------------- */
/*          VARIABLES          */
/* --------------------------- */
:root {
  /* ===== Colors ===== */
  --first-color: #764c24;
  --first-bg-color: #fffaf1;
  --container-color: #e8d29c;
  --text-color: #535865;

  /* ===== Size ===== */
  --form-size: clamp(16px, 2.7vw, 22px);
  --admin-size: clamp(16px, 2.5vw, 20px);
  --admin-nav-size: clamp(16px, 3.5vh, 20px);

  /* ===== Transitions, animations ===== */
  --transition-links: all 0.3s ease-in-out;

  /* ====== Alerts ====== */
  /* Success */
  --success-1: #5a7052;
  --success-bg-1: #def2d6;
  --success-bg-hover-1: #adc5a5;

  /* Info */
  --info-1: #4480ae;
  --info-bg-1: #cde8f5;
  --info-bg-hover-1: #a5c7d8;

  /* Warning */
  --warning-1: #967132;
  --warning-bg-1: #f8f3d6;
  --warning-bg-hover-1: #dcd4a2;

  /* Error */
  --error-1: #b32f2d;
  --error-bg-1: #ecc8c5;
  --error-bg-hover-1: #c79995;

  /* ===== Box-shadows ===== */
  --shadow-navbar: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
  --shadow-navbar-color: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
  --shadow-screen: 0 200vh 0 200vh rgba(0, 0, 0, 0.3);
  --shadow-simple: 0.7rem 0.5rem 1.3rem -0.6rem #000;
  --shadow-smooth: 0.5rem 0rem 2rem 0rem rgba(0, 0, 0, 0.15);
  --shadow-full-sides: 0rem 0rem 1rem 0rem #000;
}

/* --------------------------- */
/*    GLOBAL CONFIGURATIONS    */
/* --------------------------- */
/* Reset */
*,
::before,
::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ::selection {
    background-color: var(--first-color);
    color: var(--first-bg-color);
} */

html {
    font-size: 62.5%;
    scroll-behavior: smooth;
    overflow-x: hidden;
    word-wrap: break-word;
}
body {
    font-size: 1.6rem;
    background-image: url(/images/static/test-bg-5.png);
    background-attachment: fixed;
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    font-family: Quicksand, sans-serif;
    color: var(--text-color);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
li {
    margin-left: 1.5rem;
}
a {
    text-decoration: none;
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
h1 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: clamp(25px, 3.5vw, 45px);
}
h2 {
    text-align: center;
    font-size: clamp(20px, 3vw, 37px);
}
pre {
    text-wrap: wrap;
    overflow-x: scroll;
}

/* --------------------------- */
/*           CLASSES           */
/* --------------------------- */
.glass{
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border:1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    box-shadow: var(--shadow-smooth);
}

.logo {
    width: 19rem;
    height: 19rem;
    border-radius: 50%;
    position: relative;
    z-index: 50;
    box-shadow: var(--shadow-smooth);
}
.logo img {
    border-radius: 50%;
}
/* .logo::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
} */

.container {
    width: 90%;
    margin: 0 auto;
    max-width: 1500px;
}

.images {
    margin-top: 2.5rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
}
.image {
    flex-basis: 45%;
    max-height: 30rem;
}
.image img {
    border-radius: 1.5rem;
}

@media screen and (max-width: 1000px) {
    .image {
        flex-basis: 100%;
    }
}

.separator {
    width: 70%;
    border-bottom: 0.2rem solid black;
    margin: 3rem auto;
}

.subtitle {
    max-width: 700px;
    font-size: 2.2rem;
    margin: 0 auto 3.5rem;
    font-weight: 500;
    text-align: center;
}

.quotations {
    font-size: 2.1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    justify-content: center;
    gap: 2rem;
}
.quotation {
    width: 100%;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: var(--shadow-full-sides);
}
.quotation-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.quotation-content > i {
    font-size: 3.5rem;
}
.quotation-content > div {
    padding: 0.5rem 1.5rem;
}
.quotation-content > i:last-child {
    align-self: flex-end;
}
.quotation > div:last-child {
    text-align: right;
    margin-top: 1.8rem;
    font-size: 1.15em;
}
.quote {
    font-weight: bold;
    font-size: 3rem;
}

.btn {
    background: none;
    outline: none;
    border: none;
    padding: 1rem 1.3rem;
    border-radius: 1.5rem;
    cursor: pointer;
    font-size: 2.3rem;
}
/* --------------------------- */
/*            BURGER           */
/* --------------------------- */
.guest-burger {
    position: fixed;
    top: 2rem;
    left: 2rem;
    font-size: 2.7rem;
    cursor: pointer;
    z-index: 1000;
    display: none;
}


/* --------------------------- */
/*           SIDEBAR           */
/* --------------------------- */
.guest-sidebar {
    font-size: clamp(16px, 3.5vh, 20px);
    width: clamp(250px, 70%, 300px);
    background-color: rgba(241, 208, 177, 0.5);
    background-color: rgba(0, 0, 0, 0.1);
    background-color: #FFF9ED;
    /* background-image: url(/images/static/test-bg-3.jpg); */
    background-position: bottom;
    /* background-color: transparent; */
    /* box-shadow: var(--shadow-smooth); */
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}
.guest-sidebar::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* background-color: rgba(0, 0, 0, 0.05); */
}

.guest-sidebar li {
    list-style-type: none;
    margin: 0;
}

.guest-sidebar header {
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.guest-sidebar .logo img {
    position: relative;
    z-index: -2;
}

.guest-sidebar .guest-navbar {
    flex-grow: 1;
    font-size: 3rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow-y: scroll;
}
.guest-sidebar .guest-navbar ul {
    padding: 0 1.5rem;
    height: 85%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* align-items: center; */
    gap: 0.5rem;
}
.guest-sidebar .guest-navbar ul li {
    padding: 0.5rem 0;
}
.guest-sidebar .guest-navbar a {
    color: black;
}

@media screen and (max-width: 1300px) {
    .guest-burger {
        display: block;
    }

    .guest-sidebar {
        width: 100%;
        left: -100%;
    }

    .guest-sidebar.active {
        left: 0;
    }

    .guest-sidebar .guest-navbar ul {
        height: 100%;
    }
}

/* --------------------------- */
/*            HEADER           */
/* --------------------------- */
.guest-header {
    /* position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5; */
    min-height: 15rem;
    width: 100%;
    /* clip-path: polygon(0 0, 100% 0, 100% 100%, 0 61%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 65%); */
    /* background-color: rgba(255, 255, 255, 0.4); */
    padding: 5.5rem 0 1.5rem;
    /* box-shadow: var(--shadow-navbar-color); */
    font-family: Comfortaa, sans-serif;
    margin-bottom: 1.5rem;
}
.guest-header > div {
    width: calc(100% - 30rem);
    margin-left: auto;
    text-align: center;
    display: flex;
    justify-content: center;
}
@media screen and (max-width: 1300px) {
    .guest-header > div {
        width: 100%;
        margin: auto;
    }
}
.guest-header div > div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.guest-header div > div span:first-child {
    text-transform: uppercase;
    font-size: 3.5rem;
    font-size: clamp(23px, 4vw, 35px);
    font-weight: 700;
    color: black;
    text-decoration: underline;
    letter-spacing: 0.2rem;
    line-height: 5.5rem;
    line-height: clamp(35px, 5.5vw, 55px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.guest-header > div span:last-child {
    font-size: 2.5rem;
    font-weight: 500;
    font-size: clamp(20px, 3.5vw, 28px);
    /* text-align: right; */
}

/* --------------------------- */
/*             MAIN            */
/* --------------------------- */
.guest-main {
    width: calc(100% - 30rem);
    margin-left: auto;
    padding: 0 0 3rem;
}
@media screen and (max-width: 1300px) {
    .guest-main {
        width: 100%;
        margin: 0 auto;
    }
}

.paragraphs {
    font-size: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}
.paragraph {
    padding: 2rem;
    /* box-shadow: var(--shadow-full-sides); */
    border-radius: 1rem;
    width: 100%;
}

/* --------------------------- */
/*           HOMEPAGE          */
/* --------------------------- */
#home .container {
    text-align: center;
    margin-top: 5rem;
}
#home h1 {
    text-transform: uppercase;
    font-size: clamp(20px, 10vw, 110px);
    font-weight: 500;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#home .title-anime-item:first-child span {
    display: inline-block;
    animation: welcome 1s linear;
}

#home .title-anime-item:last-child span {
    display: inline-block;
    animation: welcome2 3s linear;
}

#home .title-anime-item:first-child > span:first-child {
    animation-duration: 0.5s;
}
#home .title-anime-item:first-child > span:nth-child(2) {
    animation-duration: 0.6s;
}
#home .title-anime-item:first-child > span:nth-child(3) {
    animation-duration: 0.8s;
}
#home .title-anime-item:first-child > span:nth-child(4) {
    animation-duration: 1s;
}
#home .title-anime-item:first-child > span:nth-child(5) {
    animation-duration: 1.2s;
}
#home .title-anime-item:first-child > span:nth-child(6) {
    animation-duration: 1.4s;
}
#home .title-anime-item:first-child > span:nth-child(7) {
    animation-duration: 1.6s;
}
#home .title-anime-item:first-child > span:nth-child(8) {
    animation-duration: 1.8s;
}
#home .title-anime-item:first-child > span:last-child {
    animation-duration: 2s;
}

@keyframes welcome {
    0% {
        opacity: 0;
        transform: rotateY(90deg);
        filter: blur(1rem);
    }

    100% {
        opacity: 1;
        transform: rotateY(0deg);
        filter: blur(0);
    }
}

@keyframes welcome2 {
    0% {
        opacity: 0;
        transform: rotateY(90deg);
        filter: blur(1rem);
    }

    100% {
        opacity: 1;
        transform: rotateY(0deg);
        filter: blur(0);
    }
}

#home .title-anime-item:last-child {
    text-transform: lowercase;
}

#home .you {
    font-family: Dancing Script, sans-serif;
    font-weight: 900;
    font-size: 1.4em;
}
#home .focus {
    text-transform: uppercase;
}

/* --------------------------- */
/*          LOGIN FORM         */
/* --------------------------- */
.login-form {
    width: clamp(270px, 95%, 400px);
    font-size: 2.1rem;
    padding: 2rem;
    border-radius: 2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.form-group {
    width: 100%;
}

.login-form .form-group input {
    width: 100%;
    padding: 1rem;
    background-color: transparent;
    outline: none;
    border: none;
    border-bottom: 0.2rem solid #000;
}

.login-form .form-group ::placeholder {
    font-size: 2.1rem;
}

.workshop-title {
    margin-bottom: 1.2rem;
    font-size: 2.9rem;
}

/* --------------------------- */
/*      PRICES AND CONTACT     */
/* --------------------------- */
#prices-and-contact {
    flex-direction: row;
    justify-content: center;
    align-items: start;
    margin: 0 auto;
}
#prices-and-contact h2 {
    text-align: center;
}
#prices-and-contact .paragraph {
    flex-basis: 100%;
}
#prices-and-contact h2 {
    margin-bottom: 1rem;
}

@media screen and (max-width: 1400px) {
    #prices-and-contact {
        flex-wrap: wrap-reverse;
    }
    /* #prices-and-contact .paragraph {
        max-width: 700px;
    } */
}

/* --------------------------- */
/*         CONSULTATIONS       */
/* --------------------------- */
#consultations > div {
    margin: 0 auto;
}

#consultations .subtitle {
    margin-bottom: 3rem;
}

#consultations .separator {
    margin: 4rem auto;
}

.consultation-box > .paragraphs {
    margin-bottom: 2rem;
}

#box {
    max-width: 500px;
}
#iew_aw_app {
    margin: 0 auto;
    max-width: 900px;
}
.iew-form {
    max-width: 900px !important;
}

@media screen and (max-width: 1000px) {
    #iew_aw_app {
        max-width: 600px;
    }
    .iew-form {
        max-width: 600px !important;
    }
}

/* --------------------------- */
/*          APPOINTMENTS       */
/* --------------------------- */
#box {
    margin: 0 auto;
}

/* --------------------------- */
/*          TESTIMONIALS       */
/* --------------------------- */
.testimonials {
    margin-top: 4.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ie-common-widget.ie-reviews .stars img {
    width: auto !important;
}