:root {
    /*--padding: max(4vw, 3vh);*/
    --paddingS: 1rem;
    --paddingM: 4vw;
    --paddingL: 8vw;
    /*--headerHeight: min(5.5rem, max(4rem, 5vw));*/
    --headerHeight: min(5.5rem, max(5rem, 5vw));
    --footerHeight: 7rem;
    --ctaHeight: 2.5rem;
}

* {
    background-position: center;
    background-size: cover;
}

#dHea {
    background-color: white;
    height: var(--headerHeight);
    min-height: var(--headerHeight);
    position: fixed;
    width: 100%;
    z-index: 2;
}
#dCta {
    height: var(--ctaHeight);
    align-content: center;
    background-color: rgba(calc(var(--blueR) - 25), calc(var(--blueG) - 25),calc(var(--blueB) - 25), 0.9);
    color: white;
    padding: 0px var(--paddingS);
    position: absolute;
    width: 100%;
    bottom: -2.5rem;
    font-size: 1rem;
    backdrop-filter: blur(4px);
    cursor: pointer;
}
#dCta:hover {
    background-color: rgba(calc(var(--blueR) - 35), calc(var(--blueG) - 35),calc(var(--blueB) - 35), 0.9);
}
#dCta:active {
    background-color: rgba(calc(var(--blueR) - 45), calc(var(--blueG) - 45),calc(var(--blueB) - 45), 0.9);
}
#dMenS, #dMenC {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 1.5rem;
    aspect-ratio: 1 / 1;
    background-image: url(./img/menu.svg);
    background-size: 3rem 1.5rem;
    background-position-x: 0px;
    opacity: 0.5;
    cursor: pointer;
}
#dMenC {
    background-position-x: 1.5rem;
}
#dHal, #dHal2, #dHal3, #dHal4, #dHal5, #dHal6 {
    background-image: url(./img/halo.jpg);
    width: 100%;
    height: calc(100vh - var(--headerHeight));
    align-content: center;
    position: fixed;
    margin-top: var(--headerHeight);
}
#dHal2 {
    background-image: url(./img/halo2.jpg);
}
#dHal3 {
    background-image: url(./img/halo3.jpg);
}
#dHal4 {
    background-image: url(./img/halo4.jpg);
}
#dHal5 {
    background-image: url(./img/halo5.jpg);
}
#dHal6 {
    background-image: url(./img/halo6.jpg);
}
#dHol {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1;
    position: relative;
}
#dHat {
    min-height: 100vh;
    align-content: center;
    padding-top: calc(var(--headerHeight) + var(--ctaHeight));
}
#dHat2 {
    min-height: 100vh;
    align-content: center;
    padding-top: calc(var(--headerHeight));
}
#dHat2_90 {
    min-height: 90vh;
    align-content: center;
    padding-top: calc(var(--headerHeight));
}
#dMai {
    min-height: calc(100vh - var(--headerHeight) - var(--footerHeight));
    align-content: center;
}
#dFoo {
    background-color: white;
    min-height: var(--footerHeight);
    padding: 1.5rem;
    align-content: end;
    font-size: 80%;
}
#menu {
    position: fixed;
    top: 0px;
    height: 100%;
    width: min(80%, 600px);
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 2;
    right: 0px;
    display: none;
    backdrop-filter: blur(0.25rem);
    overflow: auto;
}
#menu:target {
    display: block;
}
#quoH {
    position: relative;
    width: 100%;
    max-width: 800px;
    left: 50%;
    transform: translateX(-50%);
}
#quoI, .lau {
    width: 60%;
    max-width: 350px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: relative;
    top: calc(var(--paddingS) * 2);
    left: 50%;
    transform: translateX(-50%);
    background-image: url(./img/client0.jpg);
    background-size: cover;
    z-index: 2;
}
.lau {
    background-image: url(./img/laura.jpg);
    top: 0px;
}
#quoT {
    width: 100%;
    background-color: rgba(255,255,255,0.9);
    border-radius: 0.5rem;
    padding: calc(var(--paddingS) * 3) var(--paddingS) var(--paddingS) var(--paddingS);
    color: rgba(0,0,0,0.6);
}
#quoL {
    height: 0.5rem;
    width: 100%;
    max-width: 800px;
    background-color: rgba(255,255,255,0.5);
    border-radius: 0.25rem;
    position: relative;
    margin-top: var(--paddingS);
}
#quoC {
    padding-left: 0.5rem;
}
#ale {
    width: 100%;
    position: fixed;
    top: -10000px;
    background-color: rgba(calc(var(--blueR) - 50), calc(var(--blueG) - 50),calc(var(--blueB) - 50), 0.9);
    backdrop-filter: blur(0.25rem);
    color: white;
    padding: var(--paddingS);
    z-index: 2;
}

.mi {
    padding: 0.5rem 1rem;
    cursor: pointer;
    width: 100%;
}
.mi:hover {
    background-color: rgba(0,0,0,0.05);
}
.mi:active {
    background-color: rgba(0,0,0,0.1);
}
.log {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 30%;
    text-align: center;
    font-family: serif;
    color: rgba(0,0,0,0.5);
}
.logDot {
    display: inline-block;
    vertical-align: sub;
    color: rgb(var(--yellow));
    font-weight: normal;
}
.str {
    font-size: 0.8rem;
    font-weight: normal;
    position: absolute;
    top: 2rem;
    transform: translateX(-50%);
    left: 50%;
    color: rgb(var(--yellow));
}
.hat1 {
    color: white;
    padding: min(5vw, 5vh);
    font-weight: bold;
    font-size: min(15vw, 15vh);
    line-height: min(15vw, 15vh);
    text-shadow: 0px 0px 0.15rem rgba(0,0,0,0.6);
}
.hat2 {
    color: white;
    padding: min(5vw, 5vh);
    font-weight: bold;
    font-size: min(6vw, 6vh);
    line-height: min(6vw, 6vh);
    text-shadow: 0px 0px 0.15rem rgba(0,0,0,0.6);
}
.bg1 {
    background-image: url('./img/pink_flowers.png');
    padding: 0px var(--paddingM) var(--paddingM) var(--paddingM);
}
.pan1 {
    background-color: rgba(255,255,255,0.8);
    padding: var(--paddingL);
    height: 100%;
}
.pan2 {
    background-color: rgba(255,255,255,0.9);
    padding: var(--paddingL);
    height: 100%;
}
.panT {
    max-width: 800px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.butL {
    padding: 1.5rem 1rem;
    border-radius: 0.5rem;
    display: inline-block;
    width: 100%;
    max-width: 700px;
}
.prsH {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto; /* Center horizontally */
    width: 100%; 
    gap: var(--paddingS);

}
.prsB {
    flex: 1 1 0;
    min-width: 200px;
}
.prsP {
    background-color: rgb(calc(var(--blueR) - 40), calc(var(--blueG) - 40),calc(var(--blueB) - 40));
    color: white;
    padding: var(--paddingS);
    border-radius: 0px 0.5rem;
    margin-bottom: 0.5rem;
}
.pla {
/*    position: relative;
    left: 50%;*/
    /*transform: translateX(-50%);*/
    /*width: 80vw;*/
    /*max-width: 600px;*/
    font-size: 65%;
    text-align: left;
    padding-left: 0.2rem;
    padding-top: 0.4rem;
    color: rgba(0, 100, 200, 0.5);
}
.ep {
    color: rgb(var(--orange));
}

.ei {
    border-bottom: 1px solid rgb(var(--orange)) !important;
}

.poi {
    cursor: pointer;
}
.bcb {
    background-color: rgb(var(--blue));
}
.bclb {
    background-color: rgb(var(--blue), 0.2);
}
.fcw {
    color: white;
}
.padS {
    padding: var(--paddingS);
}
.padM {
    padding: var(--paddingM);
}
.padL {
    padding: var(--paddingL);
}
.padTH {
    padding-top: var(--headerHeight);
}
.marS {
    margin: var(--paddingS);
}
.marM {
    margin: var(--paddingM);
}
.marL {
    margin: var(--paddingL);
}
.mh {
    min-height: 1000px;
}
.w100 {
    width: 100%;
}
.h100 {
    height: 100%;
}
.mt1 {
    margin-top: 1rem;
}
.mt2 {
    margin-top: 2rem;
}
.mt3 {
    margin-top: 3rem;
}
.mb0 {
    margin-bottom: 0px;
}
.mb1 {
    margin-bottom: 1rem;
}
.mb2 {
    margin-bottom: 2rem;
}
.mb3 {
    margin-bottom: 3rem;
}
.mr05 {
    margin-right: 0.5rem;
}
.tac {
    text-align: center;
}
.tas {
    text-align: left;
}
@media (min-aspect-ratio: 1/1) {
    .tas {
        text-align: center;
    }
}
.fs80 {
    font-size: 80%;
}
.nw {
    white-space: nowrap;
}
.o60 {
    opacity: 0.6;
}
.non {
    display: none;
}