*
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: white;
}
html
{
    font-size: 1vw;
    font-family: "Rubik", sans-serif;
}
h2
{
    cursor: default;
}
p
{
    cursor: default;
}
body
{
    background:#402E1E;
    min-height: 100vh;
}
body::-webkit-scrollbar
{
    width:.8vw;
    background: #402E1E;
    height: 0;
}
body::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background:#A68263;
    cursor: pointer;
}
body::-webkit-scrollbar-thumb:hover
{
    background: #D9B9A7;
}
nav
{
    width:100%;
    position: fixed;
    top:0;
    left:0;
    right:0;
    height: 3rem;
    background-color: #402e1ee1;
    backdrop-filter: blur(10px);
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap:2rem;
    padding: .5rem 1rem;
    opacity: 0;
    transform: translate(0,-100%);
    transition: all .5s ease;
}
.overlay
{
    position: fixed;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    z-index: 25;
    pointer-events: none;
    background:linear-gradient(120deg,#402E1E,#735236);
    transition: opacity 1s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}
.overlayMask
{
    opacity: 0;
}
.overlayLogo
{
    width:50%;
    position: absolute;
    top:40%;
    left:50%;
    translate: -50% -50%;
    transition: all 1s ease;
    transform: scale(0);
}
.overlayLogoShow
{
    transform: scale(1);
}
.overlayLogoPos
{
    top:6rem;
    transform: scale(0.96);
}
.loading
{
    position: absolute;
    top:60%;
    left: 50%;
    translate: -50% -50%;
    width: 30%;
    background-color: grey;
    height: .5rem;
    border-radius: 10px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1s ease;
}
.showLoading
{
    opacity: 1;
}
.loadingFill
{
    height: 100%;
    width: 0%;
    border-radius: 10px;
    background-color: #D9B9A7;
    transition: width 1.5s linear;
}
.loadingFull
{
    width: 100%;
}
.navDisplay
{
    opacity: 1;
    transform: translate(0,0);
}
.navLogo
{
    height: 100%;
    transition: transform .3s ease;
    cursor: pointer;
}
.navLogo:hover
{
    transform: scale(1.1);
}
.navMenu
{
    display: flex;
    list-style-type: none;
    gap:2rem;
    font-size: 1.5rem;
    font-family: "Bangers", system-ui;
    letter-spacing: .2rem;
}
.navMenu>li
{
    color: grey;
    font-weight: 700;
    cursor: pointer;
    transition: color .3s ease;
}
.navMenu>li:hover
{
    color: white;
}
.menuIcon
{
    width:8rem;
    height: 8rem;
    display: none;
}
.menuIconSVG
{
    height: 100%;
    width: 100%;
    fill: #D9B9A7;
    transform: scale(1.5);
    justify-content: center;
    align-items: center;
}
.responsiveNav
{
    position: fixed;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    background:linear-gradient(120deg,#402E1E,#735236);
    z-index: 30;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 4rem 4rem 8rem 4rem;
    translate: 0 -120%;
    transition: all .5s ease;
    opacity: 0;
}
.responsiveNavShow
{
    transform: translate(0,120%);
    opacity: 1;
}
.responsiveNavLogo
{
    width: 80%;
    margin-right: 5rem;
    opacity: 0;
    transform: scale(0);
    transition: all .5s ease;
}
.responsiveNavOl
{
    height: 50%;
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    gap:8rem;
    font-size: 9rem;
    font-family: "Bangers", system-ui;
}
.responsiveNavOl>li
{
    width:100%;
    text-align: center;
    font-weight: 700;
    letter-spacing: 1rem;
    opacity: 0;
    transition: opacity .5s ease;
}
.responsiveNavContact
{
    width: 100%;
    display: grid;
    gap:8rem 0;
    grid-template-columns: 1fr 1fr;
}
.responsiveNavLine
{
    width:90%;
    height: 1rem;
    border-radius: 1rem;
    background-color: #A69580;
    opacity: 0;
    transition: opacity .5s ease;
}
.responsiveNavLink,
.responsiveNavContactItem
{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:2rem;
    transform: scale(0);
    transition: transform .5s ease;
}
.responsiveNavLink
{
    text-decoration: none;
    color: white;
}
.responsiveNavLink>img
{
    width:10rem;
    height: 10rem;
}
.responsiveNavLink>h2,
.responsiveNavContactItem>h2
{
    font-size: 3rem;
    width: 100%;
    text-align: center;
   font-family: "Knewave", system-ui;
   letter-spacing: .5rem;
}
.responsiveNavSVG
{
    width:10rem;
    height: 10rem;
    fill: white;
}
.responsiveNavCancel
{
    position: absolute;
    top:8rem;
    right: 4rem;
    width:7rem;
    height: 7rem;
    rotate: 270deg;
    fill: #D9B9A7;
    transform: scale(0);
    transition: transform .5s ease;
}
.responsiveAnimation
{
    opacity: 1 !important;
}
.responsiveAnimation2
{
    transform: scale(1);
}
.header
{
    width:100vw;
    height: 100vh;
    overflow: hidden;
    background-image: url("./media/img/gallery/11.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: fixed;
    will-change: background-image;
    transition: background-image .5s linear;
    z-index: 1;
    background-color: blue;
}
.logoContainer
{
    position: absolute;
    top:0%;
    left:0%;
    right: 0%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:1rem;
    padding: 1rem 2rem 2rem 2rem;
    background:linear-gradient(180deg,black,rgba(0, 0, 0, 0.5));
    box-shadow: 0 0 3rem 4rem rgba(0, 0, 0, 0.5);
}
.logo
{
    display: flex;
    justify-content: center;
    align-items: center;
    width:50%
}
.logo>img
{
    width:100%;
}
#menu
{
    list-style-type: none;
    display: flex;
    gap:2.5rem;
    font-size: 1.8rem;
    font-family: "Bangers", system-ui;
    letter-spacing: .2rem;
}
#menu>li
{
    cursor: pointer;
    color: rgb(156, 156, 156);
    font-weight: 900;
}
#menu>li:hover
{
    color: rgb(255, 255, 255);
}
.container
{
    position: absolute;
    top:100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 2;
    background-color: #735236;
}
.offer
{
    width:100%;
    background-color: #402E1E;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    align-items: center;
    padding: 3rem 2rem;
    gap:3rem 2rem;
}
.offer>h2
{
    grid-column:1/5;
    width:100%;
    text-align: center;
    font-size: 4rem;
    text-shadow: -.2rem .2rem 0rem #A68263;
    font-family: "Archivo Black", sans-serif;
    font-weight: 900;
}
.item
{
    width:100%;
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:1rem;
    padding: 1.5rem;
    border-radius: 1.7rem;
    cursor: default;
    opacity: 0;
    transition: opacity 1s ease;
}
.offerItemShow
{
    opacity: 1;
}
.imgContainer
{
    width:100%;
    border-radius: 1rem;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}
.imgContainer>img
{
    width:100%;
    filter:grayscale(0.5);
    transition: all .3s ease;
}
.item>h3
{
    font-size: 1.5rem;
    text-align: center;
}
.item>p
{
    font-size: 1rem;
    text-align: center;
    color: rgb(140, 140, 140);
    transition: color .3s ease;
}
.item:hover>.imgContainer>img
{
    filter: grayscale(0);
    transform: scale(1.1);
}
.item:hover>p
{
    color: rgb(181, 181, 181);
}
.gallery
{
    width:100%;
    background-color: #402E1E;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
.phoneShadow
{
    position: absolute;
    bottom: 0;
    left:0;
    right: 0;
    height: 2rem;
    background:linear-gradient(0deg,#402E1E,#402e1e05);
    
}
.gallery>h2
{
    font-size: 4rem;
    position: absolute;
    top:0;
    left:50%;
    translate: -50% 0;
    z-index: 4;
    background-color: #402E1E;
    padding: 0rem 4rem .8rem 4rem;
    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 1.5rem;
    text-shadow: -.5rem .4rem .8rem rgba(29, 29, 29, 0.746);
    color: rgba(0, 0, 0, 0);
    -webkit-text-stroke: rgb(255, 255, 255) .15rem;
    letter-spacing: .8rem;
    text-transform:uppercase;
     font-family: "Knewave", system-ui;
     z-index: 5;
     opacity: 0;
     transition: opacity .5s ease;
}
.galleryHeaderShow
{
    opacity: 1 !important;
}
.spinner
{
    width:100%;
    height: 50vw;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 2s ease;
}
.spinnerShow
{
    opacity: 1;
}
.galleryImg
{
    width:100%;
    position: absolute;
    top:50%;
    left:0;
    right:0;
    translate: 0 -50%;
    bottom: 0;
    transition: transform 1s linear;
    will-change: transform, z-index;
}
.position-1
{
    transform: translate(-100%,0);
    z-index: 2;
}
.position1
{
    transform: translate(100%,0);
    z-index: 2;
}
.positionMain
{
    transform: translate(0,0);
    z-index: 3;
}
.position-2
{
    transform: translate(-100%,0);
    z-index: 1;
}
.position2
{
    transform: translate(100%,0);
    z-index: 1;
}
.arrow
{
    position: absolute;
    top:50%;
    translate: 0% -50%;
    width: 4rem;
    height: 4rem;
    z-index: 4;
    cursor: pointer;
}
.arrow:hover>.arrowSvg
{
    fill: #d9B9A7;
}
.arrowLeft
{
    left:4rem;
}
.arrowRight
{
    right:4rem;
}
.arrowSvg
{
    width: 100%;
    height: 100%;
    fill: white;
    transition: fill .3s ease;
    cursor: pointer;
}
.arrowSvgRotated
{
    rotate: 180deg;
}
.phoneContainer
{
    width:100%;
    height: 46vw;
    background-image: url('./media/img/assets/bg0.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transition: opacity 1s ease;
    
}
.phoneContainerShow
{
    opacity: 1;
}
.phone
{
    width:22rem;
    height: 39.2rem;
    position:absolute;
    top: 50%;
    left:50%;
    translate: -50% -50%;
    opacity: 0;
    transition: opacity 1s ease;
}
.phoneShow
{
    opacity: 1;
}
.phoneTheme
{
    width:100%;
    position: absolute;
    left:0;
    right:0;
    bottom: 0;
    top: 0;
    z-index: 5;
}
.phoneContent
{
    position: absolute;
    top:.4rem;
    left:.8rem;
    right: .8rem;
    bottom: .6rem;
    border-radius: 3rem;
    z-index: 2;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 2rem 1rem rgba(181, 181, 181, 0.988);
}
.phoneOverlay
{
    position: absolute;
    width:22rem;
    height: 39.2rem;
    position:absolute;
    top: 50%;
    left:50%;
    translate: -50% -50%;
    background-color: #735236;
    z-index: 20 !important;
    background-image: url('./media/img/phone/phone20.png');
    background-position: center;
    background-size: 100% 100%;
    border-radius: 3.5rem;
    transition: opacity 1s ease;
}
.phoneOverlayHide
{
    opacity: 0;
}
.phoneOverlayLogo
{
    position: absolute;
    width:70%;
    top:45%;
    left: 50%;
    translate: -50% -50%;
    transition: all 1s ease;
}
.phoneOverlayLogoPos
{
    transform: scale(0.32);
    top:2.5rem;
}
.phoneLoading
{
    width:50%;
    height: .5rem;
    border-radius: 10px;
    background-color: grey;
    position: absolute;
    top:55%;
    left: 50%;
    translate: -50% -50%;
    overflow: hidden;
    opacity: 1;
    transition: opacity .5s ease;
}
.phoneLoadingHide
{
    opacity: 0;
}
.phoneLoadingFill
{
    position: absolute;
    top:0;
    left:0;
    bottom: 0;
    width: 0%;
    border-radius: 10px;
    background-color: #D9B9A7;
    will-change: width;
    transition: width 1.5s linear;
}
.phoneImg
{
    height: 100%;
    position: absolute;
    left:50%;
    top:0;
    translate: -50% 0;
    transition: all .5s linear;
    will-change: transform, z-index;
}
.phonePosition-2
{
    transform: translate(0,-100%);
    z-index: 2;
}
.phonePosition-1
{
    transform: translate(0,-100%);
    z-index: 3;
}
.phonePosition0
{
    transform: translate(0,0%);
    z-index: 4;
}
.phonePosition1
{
    transform: translate(0,100%);
    z-index: 3;
}
.phonePosition2
{
    transform: translate(0,100%);
    z-index: 2;
}
.phoneNav
{
    position: absolute;
    top:50%;
    right:32%;
    translate: 0% -50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:2rem;
    opacity: 0;
    transition: all.5s ease;
}
.phoneNavShow
{
    opacity: 1;
}
.phoneNavItem
{
    width:4rem;
    height: 4rem;
    background-color: rgb(33, 33, 33);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.phoneArrowSVG
{
    width:60%;
    height: 60%;
    fill: rgb(200, 200, 200);
    rotate: 0deg;
    transition: fill .3s ease;
    display: flex;
    cursor: pointer !important;
}
.phoneArrowSVGRotated
{
    rotate: 180deg;
}
.phoneNavItem:hover>.phoneArrowSVG
{
    fill: #A68263;
}
.about
{
    width: 100%;
    background:linear-gradient(0deg,#735236,#402E1E);
    justify-items: center;
    align-items: center;
    height: 73.5vw;
    overflow: hidden;
    position: relative;
    padding-top: 3rem;
    
}
#model
{
    width: 42vw;
    height: 42vw;
    grid-column: 1/2;
    position: absolute;
    top:6rem;
    left:5rem;
    transition: opacity 1s ease;
    opacity: 0;
}
.modelShow
{
    opacity: 1 !important;
}
.about>h2
{
    grid-column: 1/3;
    font-size: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-shadow: -.2rem .2rem 0rem #A68263;
    font-family: "Archivo Black", sans-serif;
}
.aboutP
{
    text-align: center;
    font-size: 1.2rem;
    position: absolute;
    opacity: 0;
    transition: all 1s ease;
}
.aboutP1
{
    top:12rem;
    right:6rem;
    width:40vw;
    transform: translate(150%,0);
}
.aboutP2
{
    top:50rem;
    left:10rem;
    width:40vw;
    transform: translate(-150%,0);
}
.pShow
{
    transform: translate(0,0);
    opacity: 1;
}
.myImgContainer
{
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    position: relative;
    height: 44vw;
    width: 44vw;
    position: absolute;
    top:29.5rem;
    right: 0;
    opacity: 0;
    transition: all 1s ease;
    transform: translate(0,150%);
}
.myImgShow
{
    opacity: 1;
    transform: translate(0,0);
}
.myImg
{
    width: 100%;
    height: 100%;
}
.aboutBottomShadow
{
    position: absolute;
    bottom: 0;
    left:0;
    right: 0;
    box-shadow: 0 0 4rem 6rem #735236;
}
.contact
{
    width:100%;
    background-color: #735236;
    display: flex;
    flex-wrap: wrap;
    padding: 2rem 3rem 6rem 3rem;
    gap:5rem 0;
}
.contact>h2
{
    width:100%;
    font-size: 4rem;
    text-align: center;
    text-shadow: -.2rem .2rem 0rem #A68263;
    font-family: "Archivo Black", sans-serif;
}
.contactInfo
{
    width:50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:3rem;
    transform: translate(-150%,0);
    transition: all 1s ease;
    opacity: 0;
}
.contactShow
{
    opacity: 1 !important;
    transform: translate(0,0) !important;
}
.contactInfo>p
{
    font-size: 1.2rem;
    text-align: center;
    width:80%;
}
.socialItemsContainer
{
    width:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:1.5rem;
}
.socialItem
{
    width:100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:1rem;
    cursor: default;
    opacity: 0;
    transform: scale(0);
    transition: all .5s ease;
}
.socialItemShow
{
    transform: scale(1);
    opacity: 1;
}
.socialItem>h3
{
    color: rgb(212, 212, 212);
}
.socialItemLink
{
    cursor: pointer;
    transition: transform .5s ease;
    text-decoration: none;
}
.socialItemLink>img
{
    cursor: pointer;
}
.socialItemLink:hover
{
    transform: translate(1rem,0);
    
}
.socialItemLink>h3
{
    color: rgb(212, 212, 212);
    cursor: pointer;
}
.socialItemLink>h3
{
    transition: color .3s ease;
}
.socialItemLink:hover>h3
{
    color: white;
}
.socialItem>img
{
    width:2rem;
    height: 2rem;
}
.socialItemSVG
{
    width:2rem;
    height: 2rem;
    fill: rgb(212, 212, 212);
}
.socialItem>h3
{
    font-size: 1.5rem;
    font-family: "Knewave", system-ui;
    font-weight: 400;
    letter-spacing: .2rem;
}
.contactForm
{
    width:50%;
    padding: 0 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap:1.2rem;
    transform: translate(150%,0);
    opacity: 0;
    transition: all 1s ease;
}
.contactFormShow
{
    transform: scale(1) !important;
    opacity: 1 !important;
}
.error
{
    width:100%;
    font-size: 1.2rem;
    font-weight: 700;
    color: rgb(255, 62, 4);
    text-align: center;
    height: 1.3rem;
    font-family: "Archivo Black", sans-serif;
}
.inputContainer
{
    width:100%;
    padding-top: 1rem;
    position: relative;
    cursor: pointer;
}
.inputContainer>input
{
    width:100%;
    font-size: 2rem;
    outline: none;
    background: none;
    border: 0;
    padding:.6rem .3rem;
    cursor: pointer;

}
.inputContainer>input:focus
{
    cursor: text;
}
.inputContainer>input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #735236 inset !important;
  -webkit-text-fill-color: white !important;
}
.inputPlaceholder
{
    position: absolute;
    bottom: .5rem;
    left:.3rem;
    font-size: 2rem;
    color: #402E1E;
    font-weight: 400;
    transition: all .3s ease;
    font-family: "Archivo Black", sans-serif; 
}
.inputPlaceholderWhileInputFocused
{
    bottom: 3.2rem;
    left:1rem;
    font-size: 1.3rem;
    color: rgb(184, 184, 184);
}
.inputBottomBorder
{
    position: absolute;
    bottom: 0;
    height: .3rem;
    left:0;
    right:0;
    border-radius: 10px;
    background-color: #402E1E;
    display: flex;
    justify-items: center;
    overflow: hidden;
}
.inputBottomBorderFill
{
    width:100%;
    height: 100%;
    background:linear-gradient(45deg,#D9B9A7,#A68263);
    border-radius: 10px;
    transform: scaleX(0);
    transition: transform .3s ease;
}
.inputBottomBorderFilled
{
    transform: scaleX(1);
}
.messageContainer
{
    width:100%;
    display: flex;
    flex-direction: column;
    gap:.5rem;
    position: relative;
    cursor: pointer;
    padding-bottom: 1rem;
}
.messagePlaceholder
{
    font-size: 2rem;
    color: #402E1E;
    font-weight: 400;
    cursor: pointer;
    width:100%;
    text-align: center;
    font-family: "Archivo Black", sans-serif; 
}
.messagePlaceholderFocused
{
    color: rgb(184, 184, 184);
}
.message
{
    width:100%;
    height: 6rem;
    outline: none;
    border:0;
    font-size: 1.5rem;
    padding: 0 .5rem;
    background: none;
    cursor: pointer;
    resize: none;
    font-family: "Rubik", sans-serif;
}
.message:focus
{
    cursor: text;
}
.message::-webkit-scrollbar
{
    height: 0;
    width:.5rem;
}
.message::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background:#A68263;
    cursor: pointer;
}
.message::-webkit-scrollbar-thumb:hover
{
    background: #D9B9A7;
}
.agreement
{
    width: 100%;
    display: grid;
    grid-template-columns: 2rem 1fr;
    gap:.8rem;
    font-size: .8rem;
    cursor: pointer;
}
.agreement::selection
{
    background: none;
}
.checkbox
{
    width:2rem;
    height: 2rem;
    border-radius: .5rem;
    border: .3rem solid #402E1E;
    cursor: pointer;
}
.checkboxChecked
{
    background: #A68263;
}
.checkboxError
{
    border:.3rem solid rgb(255, 62, 4);
}
.send
{
    width:100%;
    font-size: 2rem;
    border-radius: 1rem;
    background: #A68263;
    border:0;
    padding: .5rem;
    outline: none;
    cursor: pointer;
    transition: background .3s ease;
    font-family: "Archivo Black", sans-serif;
    letter-spacing: .2rem;
    margin-top: 1.5rem;
}
.send:hover
{
    background: #402E1E;
}
.smallGallery
{
    width:99.2vw;
    height: 23rem;
    overflow: hidden;
    background: #735236;
}
.smallGalleryContent
{
    display: flex;
    height: 100%;
    width: max-content;
    align-items: center;
    transition: transform 4s linear;
    will-change: transform;
    translate: -50% 0;
}
.infiniteGallery
{
    width: 35rem;
}
.calendar
{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:3rem;
    padding: 3rem 4rem;
    background:#735236;
}
.calendar>h2
{
    font-size: 4rem;
    text-shadow: -.2rem .2rem 0rem #A68263;
    font-family: "Archivo Black", sans-serif;
}
.selectContainer
{
    grid-column: 1/2;
    grid-row:4/5;
    width:100%;
    position: relative;
         opacity: 0;
     transition: opacity 1s ease;
}
.selectList
{
    font-size: 1.5rem;
    background: none;
    outline: none;
    border: 0;
    appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
    width:100%;
    padding:.8rem .5rem;
     font-family: "Archivo Black", sans-serif;

}
.selectList>option
{
    background:#402E1E;
    text-align: center;
    font-size: 1rem;
}
.calendarForm
{
    width:100%;
    display: grid;
    gap:0.5rem 5rem;
    grid-template-columns: 4fr 6fr;
    grid-template-rows: 8fr 4fr 1fr 4fr 1fr 4fr;
    justify-items: center;
    align-items: center;
}
.showCalendarForm
{
    opacity: 1 !important;
    transform: translate(0,0) !important;
}
.calendarContent
{
    grid-column: 2/3;
    grid-row: 1/5;
    width:100%;
    display: grid;
    gap:.5rem;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 5fr;
    justify-items: center;
    align-items: center;
    opacity: 0;
    transition: all 1s ease;
}
.showCalendar
{
    transform: scale(1);
    opacity: 1;
}
.day
{
    color: grey;
    font-size: 1.6rem;
    cursor: default;
    width:3rem;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}
.dayMenu
{
    font-size: 1.2rem;
    color: white;
    font-weight: 700;
    cursor: default;
}
.days
{
    grid-column: 1/8;
    grid-row: 3/4;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    justify-items: center;
    align-items: center;
    gap:.5rem;
    width:100%;
    font-family: "Archivo Black", sans-serif;
}
.daySelected
{
    background-color: #402E1E;
}
.available
{
    color: white;
    cursor: pointer;
}
.available:hover
{
    background-color: #402E1E;
}
.calendarHeader
{
    grid-column: 1/8;
    font-size: 2rem;
    cursor: default;
    display: flex;
    justify-items: center;
    align-items: center;
    gap:2rem;
    font-family: "Rubik", sans-serif;
}
.calendarArrow
{
    width:2rem;
    height: 2rem;
    fill: white;
    cursor: pointer;
}
.calendarArrow:hover
{
    fill: #A68263;
}
.calendarArrowRotated
{
    rotate: 180deg;
}
.calendarArrowDisabled
{
    fill: grey !important;
    cursor: default;
}
.send2
{
    grid-column: 2/3;
    grid-row: 6/7;
    transition: opacity 1s ease, background .3s ease;
    opacity: 0;
}
.agreement2
{
    grid-row: 6/7;
    opacity: 0;
    transition: opacity 1s ease;
}
.calendarError
{
    width:100%;
    font-size: 1.2rem;
    font-weight: 700;
    color: rgb(255, 62, 4);
    text-align: center;
    height: 1.3rem;
    font-family: "Archivo Black", sans-serif;
}
.calendarForm>p
{
    grid-column: 1/2;
    grid-row: 1/2;
    text-align: center;
    font-size: 1.2rem;
    opacity: 0;
    transform: translate(-150%,0);
    transition: all 1s ease;
}
.calendarInputContainer
{
    grid-column: 1/2;
    grid-row: 2/3;
    opacity: 0;
    transition: opacity 1s ease;
}
.showCalendarItem
{
    opacity: 1;
}
footer
{
    width:100%;
    background-color: #402E1E;
    display: flex;
    flex-wrap: wrap;
    padding: 1rem 1rem 2rem 1rem;
    gap:2rem 0; 
    justify-content: space-evenly;
    align-items: center;
}
.footerLogo
{
    width:45%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.footerLogo>img
{
    width: 100%;
}
.footerContact
{
    display: flex;
    gap:4rem;
}
.rules
{
    font-size: 1.7rem;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:2rem;
    font-weight: 700;
    text-align: center;
}
.rules>div
{
    color: rgb(180, 180, 180);
    transition: color .3s ease;

}
.rules>div:hover
{
    color: #A68263;
}
.footerContact>a
{
    text-decoration: none;
}
.footerContact>a>img
{
    width:5rem;
    height: 5rem;
    cursor: pointer;
    transition: transform .3s ease;
}
.footerContact>a>img:hover
{
    transform: scale(1.1);
}
.provider
{
    width: 100%;
}
.provider>a
{
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
     gap:.8rem;
     font-size: 1.5rem;
    font-weight: 700;
    color: white;
    transition: color .3s ease;
}
.provider>a:hover
{
    color: #2CBF04;
}
.provider>a>img
{
    height: 2rem;
    transition: transform .3s ease;
}
.provider>a:hover>img
{
    transform: scale(1.05);
}
.icons
{
    width:100%;
    font-size: .8rem;
    color: grey;
    text-align: center;
}
.loadingSVG
{
    fill: #735236;
    height: 100%;
    width:10%;
}
.loadingItem
{
    transition: all .2s ease;
}
.loadingAnimation
{
    transition: all .2s ease;
    fill: #D9B9A7;
}
.messageSend
{
    position: fixed;
    bottom: 1rem;
    right:1rem;
    gap:.2rem 1.2rem;
    background-color: #A69580;
    z-index: 8;
    display: grid;
    grid-column: 4rem 1fr 4rem;
    grid-row: 3fr 2fr;
    align-items: center;
    justify-items: center;
    padding: .5rem 1rem .6rem .5rem;
    border-radius: 1rem;
    overflow: hidden;
    transform: translate(200%,0);
    transition: all .5s ease;
}
.messageSendShow
{
    transform: translate(0,0);
}
.sendSVG
{
    width:3rem;
    height: 3rem;
    grid-column: 1/2;
    grid-row: 1/3;
}
.messageSend>h2
{
    grid-row: 1/2;
    grid-column: 2/3;
    font-size: 1rem;
    color: #402E1E;
}
.messageSend>h3
{
    grid-row: 2/3;
    grid-column: 2/3;
    font-size: .8rem;
    color: rgb(79, 79, 79);
}
.cancelSVG
{
    grid-row: 1/3;
    grid-column: 3/4;
    width: 1.2rem;
    height: 1.2rem;
    fill: #402E1E;
    cursor: pointer;
    transition: fill .3s ease;
}
.cancelSVG:hover
{
    fill: red;
}
.messageProgress
{
    position: absolute;
    bottom: 0;
    left:0;
    right:0;
    height: .3rem;
}
.messageProgressFill
{
    position: absolute;
    top:0;
    left:0;
    bottom: 0;
    width: 0%;
    background-color: #402E1E;
    border-radius: 10px;
    will-change: width;
}
.policyContainer
{
    position: fixed;
    top:0;
    left:0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 11;
    background: rgba(0, 0, 0, 0.297);
    backdrop-filter: blur(10px);
    display: none;
}
.cookiesPolicy,
.privacyPolicy
{
    max-height: 90vh;
    width:50vw;
    border-radius: 2rem;
    border:.5rem solid #402E1E;
    background: #735236;
    padding-bottom: 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:3rem;
    overflow: scroll;
    position: relative;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.policyShow
{
    opacity: 1;
}
.cookiesPolicy>ol,
.privacyPolicy>ol
{
    display: flex;
    flex-direction: column;
    gap:3rem;
    list-style-type: none;
    padding: 0 4rem;
}
.cookiesPolicy>ol>li,
.privacyPolicy>ol>li
{
    font-size: 1rem;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    gap:.8rem;
}
.cookiesPolicy>ol>li>h3,
.privacyPolicy>ol>li>h3
{
    font-size: 1.5rem;
    font-weight: 700;
}
.cookiesPolicy>ol>li>p,
.privacyPolicy>ol>li>p
{
    margin-left: 1.5rem;
    color: rgb(210, 210, 210);
}
.privacyPolicy>ol>li>h4
{
    margin-left: 1.5rem;
}
.cookiesPolicy>h2,
.privacyPolicy>h2
{
    font-family: "Archivo Black", sans-serif;
    font-size: 2rem;
    position: sticky;
    top:0;
    background-color: #735236;
    width: 100%;
    padding: 1rem 0;
    text-align: center;
}
.policyUl
{
    margin-left: 3rem;
    display: flex;
    flex-direction: column;
    gap:.5rem;
}
.policyUl>li
{
    color: rgb(210, 210, 210);

}
.cookiesPolicy::-webkit-scrollbar,
.privacyPolicy::-webkit-scrollbar
{
    width:.8vw;
    background: #402E1E;
    height: 0;
    border-radius: 10px;
}
.cookiesPolicy::-webkit-scrollbar-button,
.privacyPolicy::-webkit-scrollbar-button
{
    width:.8vw;
    height: .5vw;
}
.cookiesPolicy::-webkit-scrollbar-thumb,
.privacyPolicy::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    background:#A68263;
    cursor: pointer;
}
.cookiesPolicy::-webkit-scrollbar-thumb:hover,
.privacyPolicy::-webkit-scrollbar-thumb:hover
{
    background: #D9B9A7;
}
.cancelPolicySVG
{
    position: absolute;
    top:50%;
    translate: 0 -50%;
    right: 1rem;
    width:2rem;
    height: 2rem;
    fill: #402E1E;
    transition: fill .3s ease;
    cursor: pointer;
}
.cancelPolicySVG:hover
{
    fill: red;
}
.policyLink
{
    text-decoration: underline;
    font-weight: 700;
    cursor: pointer;
}
.policyLink:hover
{
    color: #d9B9A7;
}
.resContactFormHeader
{
    width: 100%;
    text-align: center;
    font-size: 8rem;
    text-shadow: -.8rem .8rem 0rem #A68263;
    display: none;
    margin-bottom: 5rem;
    font-family: "Archivo Black", sans-serif;
}
@media(max-width: 425px)
{
    .logoContainer
    {
        background:rgba(0, 0, 0, 0.8);
        box-shadow: 0 0 5rem 8rem rgba(0, 0, 0, 0.8);
        gap:3rem;
        padding: 5rem 0;
    }
    .logo
    {
        width:90%;
    }
    #menu
    {
        flex-wrap: wrap;
        font-size: 7rem;
        gap:3rem 10rem;
        justify-content: center;
    }
    .offer
    {
        grid-template-columns: 1fr;
        padding:8rem 5rem;
        gap:12rem;
    }
    .offer>h2
    {
        grid-column:1/2;
        font-size: 12rem;
        text-shadow: -.8rem .8rem 0rem #A68263;
    }
    .item
    {
        gap:5rem;
    }
    .imgContainer
    {
        border-radius: 5rem;
    }
    .item>h3
    {
        font-size: 8rem;
    }
    .item>p
    {
        font-size: 4.5rem;
    }
    .gallery>h2
    {
       font-size: 14rem;
       position: static;
       translate: 0% 0%;
       width:100%;
       padding-bottom: 8rem;
       text-align: center;
       -webkit-text-stroke: rgb(255, 255, 255) .8rem;
       letter-spacing: 2rem;
        text-shadow: none;
    }
    .spinner
    {
        height: 90vw;
    }
    .galleryImg
    {
        height: 100%;
        width:auto;
        top:0;
        left:50%;
        translate: -50% 0%;
    }
    .arrow
    {
        width:8rem;
        height: 8rem;
        background-color: rgba(0, 0, 0, 0.3);
        box-shadow:  0 0 1rem 2rem rgba(0, 0, 0, 0.3);
    }
    .arrow>.arrowSvg
    {
        fill: white !important;
    }
    .arrowLeft
    {
        left:0rem;
        border-top-right-radius: 35%;
        border-bottom-right-radius: 35%;
    }
    .arrowRight
    {
        right: 0rem;
        border-top-left-radius: 35%;
        border-bottom-left-radius: 35%;
    }
    .phoneContainer
    {
        background-image: none;
        background-color: #402E1E;
        height: 180vw;
    }
    .phone
    {
        width:92.4vw;
        height: 164.64vw;
    }
    .phoneContent
    {
        border-radius: 13rem;
        box-shadow: 0 0 5rem .5rem rgba(119, 119, 119, 0.988);
    }
    .phoneNav
    {
        right:10rem;
        gap:5rem;
    }
    .phoneNavItem
    {
        width:10rem;
        height: 10rem;
    }
    .phoneNavItem:hover>.phoneArrowSVG
    {
        fill: rgb(200, 200, 200);
    }
    .about
    {
        height: max-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 4rem 0rem;
    }
    .about>h2
    {
        font-size: 12rem;
        text-shadow: -.8rem .8rem 0rem #A68263;
        order:0;
        margin-bottom: 6rem;
    }
    #model
    {
        position: static;
        order: 2;
        width: 90vw;
        height: 90vw;
        margin-bottom: 6rem;
    }
    .aboutP
    {
        position: static;
        font-size: 3.5rem;
        width: auto;
        padding: 0 8rem;
    }
    .aboutP1
    {
        order: 1;
    }
    .aboutP2
    {
        order: 3;
        margin-bottom: 4rem;
    }
    .myImgContainer
    {
        position: static;
        order:4;
        height: 100vw;
        width: 100vw;
    }
    .aboutBottomShadow
    {
        box-shadow: 0 0 5rem 12rem #735236;
    }
    .contact
    {
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap:12rem;
    }
    .contact>h2
    {
        font-size: 12rem;
        text-shadow: -.8rem .8rem 0rem #A68263;
    }
    .contactInfo
    {
        width: 100%;
        gap:10rem;
        transform: translate(0,0);
    }
    .contactInfo>p
    {
        width:100%;
        font-size: 3.5rem;
        padding: 0 5rem;
    }
    .socialItemsContainer
    {
        gap:3rem;
    }
    .socialItem
    {
        gap:3rem;
    }
    .socialItem>img
    {
        width:10rem;
        height: 10rem;
    }
    .socialItemLink>h3
    {
        font-size: 6rem;
    }
    .socialItemLink:hover
    {
        transform: translate(0,0);

    }
    .socialItemLink:hover>h3
    {
        color: rgb(212, 212, 212);
    }
    .socialItem>h3
    {
        font-size: 6rem;
    }
    .socialItemSVG
    {
        width:10rem;
        height: 10rem;
    }
    .contactForm
    {
        width:100%;
        padding: 0 3rem;
        gap:4rem;
        transform: scale(0);
    }
    .inputContainer
    {
        padding-top: 7rem;
        padding-bottom: 2rem;
    }
    .inputContainer>input
    {
        font-size: 6rem;
    }
    .inputPlaceholder
    {
        font-size: 6rem;
        width:100%;
        text-align: center;
        bottom: 2.3rem;
        left:0%;
    }
    .inputBottomBorder
    {
        height: 1rem;
    }
    .inputPlaceholderWhileInputFocused
    {
        font-size: 5rem;
        bottom: 12rem;
    }
    .resContactFormHeader
    {
        display: block;
    }
    .error
    {
        font-size: 4.5rem;
        margin-bottom: 5rem;
        text-align: center;
    }
    .messageContainer
    {
        padding-bottom: 2rem;
    }
    .message
    {
        font-size: 4.5rem;
        height: 30rem;
        padding: 2rem 2rem;
    }
    .messagePlaceholder
    {
        font-size: 6rem;
    }
    .agreement
    {
        font-size: 2.5rem;
        grid-template-columns: 7rem 1fr;
        gap:2rem;
        align-items: center;
        margin-bottom: 3rem;
    }
    .checkbox
    {
        width:7rem;
        height: 7rem;
        border-radius: 2rem;
        border: 1rem solid #402E1E;
    }
    .checkboxError
    {
        border:1rem solid rgb(255, 62, 4);
    }
    .send
    {
        font-size: 5.5rem;
        letter-spacing: .7rem;
        border-radius: 2.5rem;
        padding: 3rem;
        margin-top: 4rem;
    }
    .send:hover
    {
        background: #A68263;
    }
    .message::-webkit-scrollbar
    {
        width: 2rem;
    }
    .smallGallery
    {
        width: 100vw;
    }
    .calendar
    {
        padding: 6rem 5rem 10rem 5rem;
        gap:8rem;
    }
    .calendar>h2
    {
        font-size: 12rem;
        text-shadow: -.8rem .8rem 0rem #A68263;
    }
    .calendarForm
    {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap:4rem;
    }
    .calendarContent
    {
        order:6;
        gap:4rem;
    }
    .send2
    {
        order: 9;
        margin-top: 3rem;
    }
    .agreement2
    {
        order:8;
    }
    .calendarForm>p
    {
        order:1;
        font-size: 3.5rem;
        transform: translate(0,0);
    }
    .calendarInputContainer
    {
        order:2;
    }
    .selectContainer
    {
        order:4;
    }
    .calendarSelectError
    {
        order: 5;
    }
    .calendarEmailError
    {
        order: 3;
    }
    .dayError
    {
        order: 7;
    }
    .calendarError
    {
        font-size: 4.5rem;
        margin-bottom: 4rem;
        text-align: center;
    }
    .selectContainer
    {
        grid-column: auto;
        grid-row: auto;
    }
    .selectList
    {
        font-size: 6rem;
        padding: 2.5rem 1rem;
        width: 100%;
    }
    .selectList>option
    {
        font-size: 3rem;
        width: 100%;
    }
    .calendarHeader
    {
        font-size: 6rem;
        gap:5rem;
    }
    .calendarArrow
    {
        width:7rem;
        height: 7rem;
    }
    .dayMenu
    {
        font-size: 5rem;
    }
    .days
    {
        gap:3rem 1rem;
    }
    .day
    {
        font-size: 5rem;
        height: 9rem;
        width: 9rem;
    }
    .calendarArrow:hover
    {
        fill: white;
    }
    footer
    {
        padding: 8rem 6rem;
        gap:7rem;
    }
    .footerLogo
    {
        width:100%;
    }
    .rules
    {
        width: 60%;
        font-size: 4rem;
        justify-content: space-around;
    }
    .rules>div:hover
    {
        color: rgb(180, 180, 180);
    }
    .footerContact
    {
        width:30%;
        justify-content: space-between;
        gap:0;
    }
    .footerContact>a>img
    {
        width:10rem;
        height:10rem;
    }
    .footerContact>a>img:hover
    {
        transform: scale(1);
    }
    .provider>a
    {
        font-size: 4rem;
        gap:2rem;
    }
    .provider>a:hover
    {
        color: white;
    }
    .available:hover
    {
        background: none;
    }
    .daySelected
    {
         background-color: #402E1E !important;
    }
    .provider>a>img
    {
        height: 5rem;
    }
    .icons
    {
        font-size: 2.5rem;
    }
    .provider>a:hover>img
    {
        transform: scale(1);
    }
    .cookiesPolicy,
    .privacyPolicy
    {
        width:90vw;
        border-radius: 4rem;
        border:1.5rem solid #402E1E;
        gap:4rem;
        padding-bottom: 7rem;
        max-height: 85vh;
    }
    .cookiesPolicy>ol,
    .privacyPolicy>ol
    {
         gap:6rem;
    }
    .cookiesPolicy>ol>li,
    .privacyPolicy>ol>li
    {
        font-size: 3rem;
        padding: 0 3rem;
        gap:5rem;
    }
    .cookiesPolicy>h2,
    .privacyPolicy>h2
    {
        font-size: 5rem;
        padding: 0 6rem;
        padding: 3rem 0;
    }
    .cookiesPolicy>ol>li>h3,
    .privacyPolicy>ol>li>h3
    {
        font-size: 4rem;
        gap:2rem;
    }
    .cookiesPolicy>ol>li>p,
    .privacyPolicy>ol>li>p
    {
        margin-left: 3rem;
    }
    .privacyPolicy>ol>li>h4
    {
        margin-left: 4rem;
    }
    .policyUl
    {
         margin-left: 8rem;
    }
    .cookiesPolicy::-webkit-scrollbar,
    .privacyPolicy::-webkit-scrollbar
    {
        width: 2rem;
    }
    .cancelPolicySVG
    {
        width: 5rem;
        height: 5rem;
        right: 2rem;
    }
    .policyLink:hover
    {
        color: white;
    }
    .cancelPolicySVG:hover
    {
        fill: #402E1E;
    }
    .loadingSVG
    {
        height: 100%;
        width:17%;
    }
    .messageSend
    {
        bottom: 0rem;
        right:0rem;
        left:0;
        grid-column: 10rem 1fr 6rem;
        padding: 2rem 2rem 3rem 2rem;
        border-radius: 0;
        gap:.8rem 5rem;
        transform: translate(0,120%);
    }
    .messageSendShow
    {
        transform: translate(0,0);
    }
    .sendSVG
    {
        width:10rem;
        height: 10rem;
    }
    .messageSend>h2
    {
        font-size: 5rem;
    }
    .messageSend>h3
    {
        font-size: 3rem;
    }
    .cancelSVG
    {
        width:6rem;
        height: 6rem;
    }
    .cancelSVG:hover
    {
        fill: #402E1E;
    }
    .messageProgress
    {
        height: 1rem;
    }
    .messageProgressFill
    {
        border-radius: 0;
    }
    nav
    {
        height: 12rem;
        padding: 3rem 3rem 3rem 2rem;
    }
    .navLogo:hover
    {
        transform: scale(1);
    }
    .navMenu
    {
        display: none;
    }
    .menuIcon
    {
        display: flex
    }
    #menu>li:hover
    {
        color: rgb(156, 156, 156);
    }
    .item:hover>.imgContainer>img
    {
        filter:grayscale(0.5);
        transform: none;
    }
    .item:hover>p
    {
        color: rgb(140, 140, 140);
    }
    .itemHoveredImg
    {
        filter: grayscale(0) !important;
        transform: scale(1.1) !important;
    }
    .itemHoveredP
    {
        color: rgb(181, 181, 181) !important;
    }
    .overlayLogoPos
    {
        top:14.4rem;
        transform: scale(1.123);
    }
    .overlayLogo
    {
        width:80%;
    }
    .loading
    {
        height: 2rem;
        top:50%;
        width: 60%;
    }
    .phoneOverlay
    {
        width:92.4vw;
        height: 164.64vw;
        border-radius: 13rem;
    }
    .phoneLoading
    {
        height: 1.5rem;
    }
    .phoneOverlayLogoPos
    {
        transform: scale(0.31);
        top:10.6rem;
    }
}