/* General CSS */

:root {
    --section-padding-y: 30px;
    --content-max-width: 500px;
    --content-min-height: 0;
    --footer-title-font-size: 26px;
    --title-font-size: 30px;
    --subtitle-font-size: 22px;
    --text-item: 22px;
    --text-services-font-size: 20px;
    --text-about-font-size: 20px;
    --text-about-height: 20px;
    --text-inputs-font-size: 18px;
    --text-button-font-size: 18px;
    --text-adress-font-size: 17x;
    --panel-padding-x: 10px;
    --panel-padding-y: 10px;
    --home-item-width: 250px;
    --home-item-width-no-icons: 200px;
    --home-item-offset: -10px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: black;
}

html {
    scroll-behavior: smooth;
    font-family: Solway, serif;
    margin: auto;
    max-width: 1920px;
}


/* Fonts */

@font-face {
    font-family: "Solway";
    src: url("../fonts/Solway-Light.ttf") format("opentype");
    font-weight: lighter;
}

@font-face {
    font-family: "Solway";
    src: url("../fonts/Solway-Regular.ttf") format("opentype");
    font-weight: regular;
}

@font-face {
    font-family: "Manjari";
    src: url("../fonts/Manjari-Regular.ttf") format("opentype");
    font-weight: regular;
}

@font-face {
    font-family: "GentiumBookBasic";
    src: url("../fonts/GentiumBookBasic-Regular.ttf") format("opentype");
    font-weight: regular;
}


/* Shared */

.whatsapp {
    position: fixed;
    right: 20px;
    bottom: 15px;
    z-index: 100;
}

.whatsapp img {
    width: 50px;
    height: 50px;
}

.home__item {
    font-size: var(--text-item);
    display: flex;
    gap: 20px;
    background-color: white;
    border-radius: 40px;
    padding: 9px 18px;
    font-family: GentiumBookBasic, serif;
    /*width: var(--home-item-width);*/
    width: var(--home-item-width-no-icons);
    justify-content: center;
    align-items: center;
}

.menu > .home__item {
    width: var(--home-item-width-no-icons);
}

/* Sections */

.section {
    height: 100vh;
    min-height: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    gap: 20px;
    padding: 0 0.5rem;
    padding-top: var(--section-padding-y);
    padding-bottom: var(--section-padding-y);
    position: relative;
    scroll-snap-align: center;
}

.section__main {
    background-image: url('../imgs/index/home/wallpaper_home.jpg');
}

.section__services {
    background-image: url('../imgs/index/services/wallpaper_services.jpg');
}

.section__about {
    background-image: url('../imgs/index/about/wallpaper_about_me.jpg');
}

.section__titles {
    background-image: url('../imgs/index/titles/wallpaper_titles.jpg');
}

.section__patients {
    background-image: url('../imgs/index/patients/wallpaper_patients.jpg');
}

.section__footer {
    background-image: url('../imgs/index/footer/wallpaper_footer.jpg');
    background-repeat: repeat-y;
    background-size: initial;
    min-height: initial;
}


/* Panels */

.blur {
    backdrop-filter: blur(7.5px);
    filter: contrast(0.8);
}

.panel {
    padding: var(--panel-padding-y) var(--panel-padding-x);
    max-width: var(--content-max-width);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    align-items: center;
    gap: 10px;
}

.panel__title {
    border-radius: 30px;
    backdrop-filter: contrast(0.9);
    justify-content: center;
}

.panel__services {
    align-items: center;
    justify-content: space-around;
    border-radius: 30px;
    font-size: var(--text-services-font-size);
    text-align: center;
}

.panel__about {
    align-items: center;
    justify-content: center;
    border-radius: 0;
    line-height: var(--text-about-height);
    font-size: var(--text-about-font-size);
    padding-left: 4px;
    padding-right: 4px;
}

.panel__home {
    display: flex;
    flex-direction: column;
    gap: 30px;
}


/* Main  menu */

.menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    gap: 20px;
    justify-content: center;
}

.carouselContainer {
    display: flex;
    flex-grow: 1;
    width: 100%;
    max-width: 95vw;
    align-items: center;
    justify-content: center;
}

.textCenter {
    text-align: center;
}

.title {
    font-size: var(--title-font-size);
    line-height: 48px;
}

.subtitle {
    font-size: var(--subtitle-font-size);
    line-height: 26.4px;
    font-weight: lighter;
}

.logo {
    max-width: 150px;
}

.home__contact {
    background-color: #B55AB3;
    color: white;
    font-size: var(--text-item);
    display: flex;
    padding: 8px 12px;
    box-shadow: 4px 4px 15px #6442EF;
    gap: 20px;
    font-family: 'Manjari', serif;
}

.home__contact span {
    position: relative;
    bottom: -8px;
}

.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}


/* Separator */

.separator {
    display: flex;
    width: 90%;
    align-items: center;
}

.arrowRight {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid black;
}

.arrowLeft {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid black;
}

.line {
    background-color: black;
    border: none;
    flex-grow: 1;
    height: 1px;
    transform: translate(0, -0.5px);
}

.photo {
    width: fit-content;
}


/* About Me */

.about__photo {
    max-width: 130px;
    border-radius: 30px;
}


/* Footer */

.input {
    background-color: white;
    box-shadow: 5px 10px 20px 4px rgba(0, 0, 0, 0.25);
    font-size: var(--text-inputs-font-size);
    padding: 4px;
    border: none;
    width: 100%;
}

.input_textarea {
    flex-grow: 1;
    max-height: 50vh;
}

.formTitle {
    font-size: var(--footer-title-font-size);
    align-self: flex-start;
}

.formInputs {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 30px;
    justify-content: space-between;
    width: 100%;
}

.input:focus {
    outline: 2px solid #6442EF;
}

.footer__button {
    background: #6442EF;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    color: white;
    font-size: var(--text-button-font-size);
    width: fit-content;
    padding: 11px;
    border: none;
    align-self: center;
    cursor: pointer;
}

.panel__footer {
    justify-content: space-around;
    gap: 50px;
    padding-bottom: var(--section-padding-y);
    width: 100%;
}

.socialMedia {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-around;
}

.socialMedia__link {
    display: flex;
}

.buttonBr {
    display: none;
}

.footerNav {
    display: flex;
    flex-direction: column;
    gap: 50px;
    align-items: center;
}

.footerAddress {
    font-size: var(--text-adress-font-size);
    text-align: center;
}

.map {
    width: 100%;
    height: 500px;
}

.g-recaptcha {
    display: flex;
    justify-content: center;
}


/* Media Query */

@media screen and (min-width: 400px) {
     :root {
        --panel-padding-x: 20px;
        --text-adress-font-size: 21px;
    }
}

@media screen and (min-width: 834px) and (orientation: portrait) {
    .panel__about {
        justify-content: space-around;
    }
    .carouselContainer {
        max-width: 95vw;
    }
}

@media screen and (orientation: landscape) {
     :root {
        --content-max-width: 80vw;
        --content-min-height: 80vw;
    }
    .panel__title {
        width: initial;
        backdrop-filter: none;
    }
    .carouselContainer {
        max-width: 95vw;
    }
    .buttonBr {
        display: none;
    }
    .section__footer {
        height: initial;
    }
    .panel__about_container {
        display: flex;
        flex-direction: row;
    }
    .formInputs {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        align-items: center;
    }
    .formTitle {
        grid-column-start: span 6;
        grid-row-start: 1;
    }
    .input__1 {
        grid-column-start: span 3;
        grid-row-start: 2;
    }
    .input__2 {
        grid-column-start: span 3;
        grid-row-start: 2;
    }
    .input__3 {
        grid-column-start: span 6;
        grid-row-start: 3;
    }
    .socialMedia {
        grid-column-start: 1;
        grid-column-end: 3;
        grid-row-start: 4;
        justify-content: initial;
    }
    .g-recaptcha {
        grid-column-start: 3;
        grid-column-end: 5;
        grid-row-start: 4;
    }
    .footer__button {
        grid-column-start: 5;
        grid-column-end: 7;
        grid-row-start: 4;
        justify-self: flex-end;
    }
    .section__main {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .panel__home {
        filter: contrast(0.8);
        border-radius: 50px;
        display: grid;
        grid-template-columns: auto auto;
        backdrop-filter: blur(4.5px);
        min-height: var(--content-min-height);
        min-width: var(--content-max-width);
        align-items: center;
    }
    .footerAddress {
        display: none;
    }
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
     :root {
        --title-font-size: 34px;
        --subtitle-font-size: 25px;
        --content-max-width: 900px;
        --content-min-height: 640px;
        --text-item: 30px;
        --text-services-font-size: 26px;
        --text-about-font-size: 26px;
        --text-about-height: 26px;
        --home-item-width: 340px;
        --home-item-width-no-icons: 250px;
        --home-item-offset: -5px;
    }
    .header {
        gap: 0;
    }
    .footerAddress {
        display: block;
    }
    .socialMedia {
        justify-content: space-around;
    }
    .whatsapp img {
        width: 70px;
        height: 70px;
    }
    .section {
        gap: 20px;
    }
    .panel__about_container {
        letter-spacing: 1.6px;
    }
    .carouselContainer {
        max-width: 95vw;
    }
    .logo {
        max-width: 250px;
    }
    .about__photo {
        max-width: 300px;
    }
    .panel__about {
        border-radius: 10px;
    }
}

@media screen and (min-width: 1280px) and (orientation: landscape) {
    .buttonBr {
        display: none;
    }
    .carouselContainer {
        max-width: 95vw;
    }
    .menu {
        justify-content: flex-start;
    }
}

@media screen and (min-width: 1920px) and (orientation: landscape) {
     :root {
        --text-about-font-size: 28px;
        --text-about-height: 60px;
    }
    .panel__services {
        max-width: 500px;
    }
    .panel__about,
    .panel__about_container {
        max-width: 1700px;
    }
    .buttonBr {
        display: none;
    }
    .carouselContainer {
        max-width: 95vw;
    }
}