*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
}

html, body {
  height: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

li {
    list-style-type: none;
}

a {
    text-decoration: none;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

#root, #__next {
  isolation: isolate;
}

/*Style Reset*/

* {
    font-family: 'Nunito Sans', sans-serif;
}

.header {
    background-color: #fff3f3;
    height: calc(var(--headerHeight));
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.header.main {
    background-image: url(Images/headerBack1.JPG);
    background-size: 100%;
    background-repeat: no-repeat;
}

.header.agenda {
    background-image: url(Images/headerBackAgenda.JPG);
    background-size: 100%;
    background-repeat: no-repeat;
}

.header.equipo {
    background-image: url(Images/headerBackEquipo.JPG);
    background-size: 100%;
    background-repeat: no-repeat;
}

.header.servicio {
    background-image: url(Images/headerBackServicio.JPG);
    background-size: 100%;
    background-repeat: no-repeat;
}

.header.album {
    background-image: url(Images/headerBackAlbum.JPG);
    background-size: 100%;
    background-repeat: no-repeat;
}

    .logoTop {
        display: flex;
        padding: 10px;
        justify-content: center;
    }

        .linkLogoTop {
            width: 25%
        }

        #logoImg {
            display: block;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.3);
            transition: all 0.5s;
        }

        #logoImg:hover {
            transform: scale(1.2);
        }

        #menuButton {
            background-color: rgba(0, 0, 0, 0.3);
            padding: 5px;
            width: 8vw;
            height: 8vw;
            display: none;
        }

        .navigationBarUl {
            display: flex;
            justify-content: space-around;
            padding: 10px;
        }

        .navigationLink {
            display:inline-block;
            background-color: rgba(0, 0, 0, 0.3);
            color: white;
            width: 20vw;
            padding: 5px 20px;
            border-radius: 15px;
            text-align: center;
            font-size: 24px;
            transition: all 0.5s;
        }

        .navigationLink:hover {
            transform: scale(1.1);
            background-color: rgba(255, 255, 255, 0.8);
            color: black;
        }

    .hero {
        flex-grow: 1;
        padding: 2vw 6vw 3vw 6vw;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

        .heroTitleContainer {
            margin: 1vw 0;
        }

        .heroTitle {
            font-size: 6vw;
            letter-spacing: 10px;
            color: white;
        }

        #heroTitleSubPage {
            font-size: 5.3vw;
            text-align: center;
            padding: 2vw 0;
            color: white;
        }

        #heroTitleSubPageEquipo {
            font-size: 5.3vw;
            text-align: left;
            padding: 2vw 0 0 0;
            color: white;
        }

        .heroSubtitleContainer {
            display: flex;
        }

        #heroSubtitle {
            font-size: 2vw;
            margin: 1vw 0;
            color: white;
        }

        #line {
            width: 12vw;
            height: 0px;
            border: 1px solid white;
            margin: auto 5px;
        }

        .heroLink {
            display:inline-block;
            background-color: rgba(255, 255, 255, 0.8);
            color: black;
            padding: 0.3vw 40px;
            border-radius: 10px;
            text-align: center;
            font-size: 2vw;
            transition: all 0.3s;
        }

        .heroLinkContainerSubpage {
            display: flex;
            justify-content: center;
        }

        .heroLink:hover {
            background-color: rgba(255, 255, 255, 0.9);
            transform: scale(1.1);
        }
/*floatingbutton*/

    #floatingWhatsAppLink {
        position: fixed;
        background-color: #25d366;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 50px;
        right: 30px;
        bottom: 30px;
        padding: 1vw;
        gap: 1vw;
        transition: all 0.5s;
    }
    @media (min-width: 786px) {
        #floatingWhatsAppLink:hover {
            border-radius: 50px;
            color: white;
            font-size: 1.5vw;
            padding-right: 2vw;
        }
    
        #floatingWhatsAppLink:hover::after{
            content: "Agenda tu cita aquí";
        }
    }

    #floatingWhatsAppImg {
        height: 3vw;
    }

/*main*/

    .pinkBanner {
        display: flex;
        flex-direction: column;
        background-color: #fff3f3;
        align-items: center;
        padding: 3vw;
    }

        .pinkBannerTitle {
            font-size: 3vw;
            margin-bottom: 2vw;
        }

        .pinkBannerSubtitle {
            font-size: 2vw;
        }

        .pinkBannerParagraph {
            font-size: 1.6vw;
        }

        .pinkBannerButton {
            background-color: white;
            border: 1px solid rgb(255, 170, 184);
            border-radius: 15px;
            font-size: 2vw;
            padding: 2px 6vw;     
            margin-top: 2vw;  
            transition: all 0.3s;     
        }

        .pinkBannerButton:hover {
            background-color: rgb(255, 144, 162);
            color: white;
            transform: scale(1.1);
        }

    .whiteBanner{
        display: flex;
        justify-content: space-between;
        padding: 4vw;

    }
        .homeBrideContainer{
            display: flex;
            min-width: 50%;
            justify-content: space-around;
        }

        .homeBrideImg {
            width: 18vw;
        }

        .whiteBannerChild {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        #whiteBannerTitle {
            font-size: 2.8vw;
            margin-bottom: 2vw;
        }

        #whiteBannerSubtitle {
            font-size: 2vw;
        }

        #whiteBannerButton {
            background-color: white;
            border: 1px solid rgb(255, 170, 184);
            border-radius: 15px;
            font-size: 2vw;
            padding: 2px 3vw;     
            margin-top: 2vw;  
            transition: all 0.3s;     
        }

        #whiteBannerButton:hover {
            background-color: rgb(255, 144, 162);
            color: white;
            transform: scale(1.1);
        }

    #testimonios {
        font-size: 3vw;
        background-color: #fff3f3;
        text-align: center;
        padding: 4vw;
    }

    .bannerReviews {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 3vw;
        gap: 2vw;
        font-size: 2vw;
    }

    #bannerReviewsText {
        font-size: 2vw;
    }

    .servicioSectionUno {
        display: flex;
        justify-content: space-around;
        padding: 3vw;

    }

    .seccionUnoIcon {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 20%;
    }

    .seccionUnoIconImg{
        width: 10vw;
    }

    .seccionUnoText {
        font-size: 2vw;
        text-align: center;
    }

    .servicioSectionDos {
        background-color: #fff3f3;
        padding: 4vw 10vw;
    }

    .servicioSeccionDosText {
        text-align: center;
        font-size: 2vw;
    }

    .servicioSectionTres {
        display: flex;
        flex-direction: column;
        padding: 5vw;
        gap: 5vw;
    }

    .servicioTresDivision {
        display: flex;
        justify-content: space-between;
    }

    .servicioTresImg {
        width: 40%;
    }

    .servicioTresTexto {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        width: 55%;
    }

    .servicioTresTitulo {
        font-size: 3vw;
    }

    .servicioTresParrafo{
        font-size: 2vw;
    }

    /* Agenda */

    .agendaSeccionUno {
        background-color: #fff3f3;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 5vw;
        text-align: center;
    }

    #agendaSeccionUnoTitulo {
        font-size: 3vw;
    }

    #agendaSeccionUnoParrafo {
        font-size: 2vw;
    }

    .agendaSeccionDos {
        padding: 4vw 10vw;
    }

    #agendaForm {
        display: flex;
        flex-direction: column;
        gap: 2vw
    }

    label{
        display: none;
    }

    .formDiv {
        display: flex;
        justify-content: space-between;
        gap: 2vw;
    }

    .formInput {
        border: solid 1px black;
        padding: 1vw;
        flex: 1 1 0;
    }

    #fMensaje {
        border: solid 1px black;
        padding: 1vw;
    }

    .formDivInput {
        flex: 1 1 0;
        display: flex;
    }

    #fButton {
        background-color: white;
        border: 1px solid rgb(255, 170, 184);
        border-radius: 15px;
        font-size: 2vw;
        padding: 2px 3vw;     
        margin-top: 2vw;
        width: 30%;  
        transition: all 0.3s;  
        align-self: center;   
        color: black;
    }

    #fButton:hover {
        background-color: rgb(255, 144, 162);
        color: white;
        transform: scale(1.1);
    }
    
    /* Equipo */

    .equipoContainer {
        display: flex; 
        padding: 5vw;
        gap: 5vw;
    }

    #equipoImg {
        width: 40%;
    }

    .equipoTexto {
        width: 55%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    #equipoTitulo {
        font-size: 3vw;
    }

    .equipoParrafo {
        font-size: 2vw;
    }

    /* Album */

    #albumContainer{
        display: flex;
        padding: 5vw;
        gap: 2vw;
    }

    .albumRow{
        display: flex;
        flex-direction: column;
        gap: 2vw;
        width: 33.33%;
    }

    .albumImg {
        width: 100%;
    }

    #modalSlide {
        display: none;
        position: fixed;
        z-index: 1;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.9);
        padding: 60px 0;
        left: 0;
        top: 0;
        overflow: auto;
        align-items: center;
        justify-content: center;
    }

    .close {
        position: absolute;
        top: 15px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s;
    }

    .close:hover,
    .close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
    }

    .mySlides {
        display: none;
        height: auto;
        width: auto;
        max-width: 80vw;
        max-height: 90vh;
        margin: auto;
        left: 0;
        right: 0;
        text-align: center;
        z-index: 1;   
      }

    .prev, .next {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        margin-top: -22px;
        padding: 16px;
        color: white;
        font-weight: bold;
        font-size: 48px;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
    }

    .next {
        right: 0;
        border-radius: 3px 0 0 3px;
    }

    .prev {
        left: 0;
        border-radius: 3px 0 0 3px;
    }

    .prev:hover, .next:hover {
        background-color: rgba(0,0,0,0.8);
    }

.footer {
    background-color: #fff3f3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3vw;
}
    #footerBrand {
        min-width: 30%;
        font-size: 3vw;
        text-align: center;
    }

    .footerSocial {
        min-width: 30%;
    }

        #footerSocialText {
            font-size: 2vw;
            text-align: center;
        }

        .socialIcons{
            display: flex;
            gap: 1vw;
            justify-content: center;
            padding: 1vw 0;
        }

        .socialIconsLink{
            width: 3vw;
            transition: all 0.3s;
        }

        .socialIconsLink:hover {
            transform: scale(1.1);
        }

    .footerContact {
        min-width: 30%;
        padding-left: 4vw;
    }

        .contactInfo {
            font-size: 1.3vw;
        }

        #footerTel {
            color: black;
        }

@media (max-width: 1085px) {
    .navigationLink {
        width: 22vw;
        font-size: 18px;
    }
    }

@media (max-width: 785px) {
    .header {
        height: auto;  
    }

    .header.main {
        background-size: cover;
        background-position: right; 
    }
    
    .header.agenda {
        background-size: cover;
        background-position: center; 
    }
    
    .header.equipo {
        background-size: cover;
        background-position: right; 
    }
    
    .header.servicio {
        background-size: cover;
        background-position: right; 
    }
    
    .header.album {
        background-size: cover;
        background-position: center; 
    }

        .logoTop {
            justify-content: space-between;
        }

        .linkLogoTop {
            width: 150px;
        }

        #logoImg {
            object-fit: contain;
            height: 100%;
        }

        #menuButton {
            display: block;
        }

        .navigationBar {
            display: flex;
            justify-content: center;
        }
        
        .navigationBarUl {
            display: none;
        }

        .navigationBarUlResponsive {
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4vw;
            width: 90%;
            padding: 4vw 0;
            background-color: rgba(0, 0, 0, 0.8);
            border-radius: 15px;
        }

        .navigationLink {
            width: auto;
        }

        .heroTitle {
            font-size: 30px;
            letter-spacing: 10px;
        }

        #heroTitleSubPage {
            font-size: 30px;
        }

        #heroTitleSubPageEquipo {
            font-size: 30px;
        }

        #heroSubtitle {
            font-size: 16px;
            margin: 15px 0;
        }

        .heroLink {
            padding: 2px 20px;
            font-size: 16px;
            align-self: center;
        }

        #floatingWhatsAppLink {
            padding: 2vw;
            right: 15px;
            bottom: 15px;
        }

        #floatingWhatsAppImg {
            height: 30px;
        }

        #bannerReviewsText {
            font-size: 18px;
        }

    /*pinkBanner*/

        .pinkBannerTitle {
            font-size: 20px;
            text-align: center;
        }

        .pinkBannerSubtitle {
            font-size: 16px;
            text-align: center;
            margin-bottom: 10px;
        }

        .pinkBannerParagraph {
            font-size: 15px;
            text-align: center;
        }

        .pinkBannerButton {
            font-size: 16px;
            color: black;
        }

    .whiteBanner{
        flex-direction: column;
        gap: 3vw;
    }
        .homeBrideContainer{
            flex-direction: column;
            align-items: center;
            gap: 3vw;
        }

        .homeBrideImg {
            width: 70%;
        }

        .whiteBannerChild {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        #whiteBannerTitle {
            font-size: 20px;
        }

        #whiteBannerSubtitle {
            font-size: 16px;
        }

        #whiteBannerButton {
            font-size: 16px;
            color: black; 
        }

    #testimonios {
        font-size: 20px;
    }

    .servicioSectionUno {
       flex-direction: column;
       align-items: center;
       gap: 10px;
    }

    .seccionUnoIcon, .seccionUnoIconImg {
        width: 50%;
    }

    .seccionUnoText {
        font-size:  18px;
    }

    .servicioSeccionDosText {
        font-size: 18px;
    }

    .servicioTresDivision {
        flex-direction: column;
        align-items: center;
        gap: 5vw;
    }

    .servicioTresImg {
        width: 80%;
    }

    #servicioTresImgId {
        order: 1;
    }

    .servicioTresTexto {
        width: 90%;
        
    }

    #servicioTresTextoId {
        order: 2;
    }

    .servicioTresTitulo {
        font-size: 20px;
    }

    .servicioTresParrafo{
        font-size: 16px;
    }

    /* Agenda */

    #agendaSeccionUnoTitulo {
        font-size: 20px;
    }

    #agendaSeccionUnoParrafo {
        font-size: 16px;
    }

    .formDiv {
        flex-direction: column;
    }

    #fButton {
        font-size: 16px;
    }

    /* Equipo */

    .equipoContainer {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #equipoImg {
        width: 80%;
    }

    .equipoTexto {
        width: 90%;
    }

    #equipoTitulo {
        font-size: 20px;
    }

    .equipoParrafo {
        font-size: 16px;
    }

    /* Equipo */
    #albumContainer{
        flex-direction: column;
        align-items: center;
    }

    .albumRow{
        width: 90%;
    }

    .prev, .next {
        font-size: 18px;
    }

    /* footer */

    .footer {
        flex-direction: column;
    }

        #footerBrand {
            font-size: 30px;
        }
    
            #footerSocialText {
                font-size: 18px;
                margin-top: 3vw;
            }

            .socialIcons{
                margin: 3vw;
                gap: 30px;
            }
    
            .socialIconsLink{
                width: 20px;
            }
    
        .footerContact {
            padding: 0;
        }
    
            .contactInfo {
                font-size: 16px;
                text-align: center;
            }

}