html {
    font-size: 100%;
    color-scheme: light dark;
    overflow-x: clip;
  }
  
  *,*::before,
  *::after {
    box-sizing: border-box;
  }
  
  /* Remove default margin */
  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }
  
  /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
  ul[role='list'],
  ol[role='list'] {
    list-style: none;
  }
  
  /* Set core root defaults */
  html:focus-within {
    scroll-behavior: smooth;
  }
  
  /* Set core body defaults */
  body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    cursor: pointer;
    scroll-behavior: smooth;
  }
  
  /* A elements that don't have a class get default styles */
  a:not([class]) {
    text-decoration-skip-ink: auto;
  }
  
  /* Make images easier to work with */
  img,
  picture {
    max-width: 100%;
    display: block;
  }
  
  img {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
  }
  
  /* Inherit fonts for inputs and buttons */
  input,
  button,
  textarea,
  select {
    font: inherit;
  }
  
  /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
  @media (prefers-reduced-motion: reduce) {
    html:focus-within {
      scroll-behavior: auto;
    }
  
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

    @font-face{
        font-family:thunder;
        src:url("thunder.otf");
    }
    @font-face{
        font-family:j2;
        src:url("tarif.otf");
    }



html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}



:root{
    --h1-font:clamp(1.75rem,2vw + 1rem,3rem);
    --bg-1:#E8EAE6;
    --bg-2: white;
    --bg-3:#EDEADE;
    --bg-4:#151515;
    --bg-5:white;
    --bg-p:#787786;
    --bg-slider:black;
    --nav-p:#0e2954;
    --nav-a:white;
    --m-g:5rem;
    --btn-2:black;
    --btn-1:#b4b4b4;
    --nav-bg1:#dbdbdb;
    --nav-bg2:#e4e8ed;
    --r-fncy:white;
    --l-fncy:black;
    --ms-text: clamp(2rem, 1.5vw + .65rem, 2.25rem);
    --h2-text: clamp(2rem, 1.5vw + 0.75rem, 2.5rem);
    --l-text: clamp(1.5rem, 0.75vw + 0.875rem, 1.75rem);
    --p-text:clamp(1.15rem, 0.7vw + 0.5rem, 1.35rem);
    --p1-text:clamp(1.35rem, 1vw + 0.25rem, 1.45rem);
    --h1-text: clamp(2.8rem, 4vw + 1rem, 4rem);
    --m-text: clamp(1.35rem, 0.75vw + 0.75rem, 1.5rem);
  --ml-text: clamp(1.35rem, 2vw + 1rem, 1.75rem);
--brg-heading: clamp(1.65rem, 1vw + 1rem, 2.5rem);
--xl-text: 13vw;
  
}

body{
    text-rendering: optimizeSpeed;
    line-height:1.6;
    overflow-x: clip;
    min-height:100vh;
    width:100%;
    font-family:j2;
    color:black;
    scrollbar-width:thin;
    scrollbar-color:#760026;
    background:var(--bg-1);
  
}

a{
    text-decoration:none;
    color:black;
}
.dialog{
    padding:1.5rem;
    border-radius:1rem;
    margin-top:4rem;
    display:grid;
    place-items:center;
    gap:2rem;
    position: fixed;
    z-index:300;
    background:var(--bg-3);
    font-size:var(--p1-text);
    width:18rem;
    height:18rem;
    left:50%;
    transform:translateX(-50%);
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.itemD {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1rem;
}
.itemD img{
    width:100px;
    height:100px;
    aspect-ratio:3/4;
}


.introAnim{
    position:fixed;
    height:100vh;
    width:100%;
    overflow:clip;
    z-index:599;
}
.firstanim{
    position: absolute;
    display:flex;
    z-index:601;
    height:100%;
    width:100%;
}
.firstanim>* {
    flex:1;
    background:var(--bg-1);
}
.secondanim{
    position: absolute;
    width:100%;
    height:100%;
    display:flex;
    z-index:600;
    
}
.secondanim>* {
    flex:1;
    background:black;
}
.topHeader{
  position: fixed;
  top:0;
  display:flex;
  width:100%;
  padding:1.5rem 2rem;
  font-size:var(--l-text);
  align-items:center;
  font-family:thunder;
    z-index:201;
  justify-content:space-between;
}

.nav{
  position:fixed;
  inset:0;
    height:0;
  width:100vw;
  z-index:99;
  background:indianred;
  overflow:clip;
}
.top-nav{
  display:flex;
  height:100dvh;
}
.top-nav>*{
  flex:1;
}

.topNv{
  position:relative;
  justify-content:center;
  display:flex;
  flex-direction: column;
}
.topNavLine{
  position: absolute;
  left:0;
  height:100%;
  width:1px;
  background:black;
}

.bottomNavLine{
  position: absolute;
  top:0;
  height:1.5px;
  width:100%;
  background:black;
}
.bottom-nav{
  height:15vh;
  position: absolute;
  bottom:0;
  left:0;
  width:100%;
  display:flex;
}

.bottom-nav>*{
  flex:1;
}
.bottomLink{
  display:flex;
  align-items:center;
  justify-content:center;
}
.bottomLink i {
  font-size:2rem;
  color:black;
}


.border-left{
  border-left:1px solid black;
}

.nav-link{
  height:3.25rem;
  display:flex;
  width:100%;
  align-items:center;
  justify-content:center;
  opacity:0;
  font-size:var(--p1-text);
  transition:all .35s ease-in-out;
}
.nav-link:hover{
  background: #333;
  color:white;
}
h1{
    font-family:thunder;
    text-wrap:balance;
    font-size:var(--h1-text);
}
p{
font-size:var(--p-text);
    text-wrap:balance;
}
.cartToggle{
    position:relative;

}
.cartToggle i{
    font-size:1.5rem;
}
.cartLength{
    position: absolute;
    top:-1rem;
    right:0;
    font-weight:bold;
    font-size:var(--p1-text);
    font-family:j2;
    color:#8dc308;
}

.cart{
    position:fixed;
    inset:0;
   height:100dvh;
  width:55dvw;
    background:var(--bg-3);
    z-index:200;
    display:grid;
    grid-template-rows:auto 1fr;
    overflow-y:scroll;
}
.cartHead{
    display: flex;
    height:100%;
    align-items:center;
    justify-content:end;
    text-align:center;
    position:sticky;
    top:0;
    border-bottom:1px solid black;
}
.cartHead h1,.cartTotalCol h1{
    font-size:var(--h2-text);
    padding:.5rem;
    
}
.cartHead h1{
    width:50%;
    height:100%;
    border-left:1px solid black;
}
.cartContainer{
    display:grid;
    height:100%;
    grid-template-rows:1fr auto;
}
.cartItem{
    display:flex;
    flex-direction:column;
    width:100%;
    padding-inline:1rem;
    gap:1rem;
    padding-block:3rem;
    overflow-y:scroll;
}
.Cart-col{
    display:grid;
    grid-template-columns:.3fr .2fr .5fr;
    gap:1rem;
    place-items:center;
    border-bottom:1px solid black;
}
.cartPriceCol{
    display:grid;
    place-items:center;
    gap:1rem;
}
.cart-count-col{
    display:flex;
    align-items:center;
    gap:.5rem
}
.Cart-col img{
    max-width:100%;
    height:150px;
    aspect-ratio:3/4;
}
.cartTotalCol{
    display: flex;
    align-items:center;
    border-top:1px solid black;
}
.cartTotalCol>*{
    flex:1;
}
.cartTotalCol h1{
    display: grid;
    place-items:center;
}
.cartTotal{
    border-left:1px solid black;
    height:100%;
    font-weight:bold;
    display:grid;
    place-items:center;
    font-size:var(--p1-text);
}

.minus,.plus{
    background:none;
    font-size:1.8rem;
    font-weight:bold;
    border:none;
    outline:none;
    color:black;
}
.fa-trash{
    font-size:var(--p1-text);
}

.header{
    height:100vh;
    width:100%;
    padding-bottom:3rem;
    overflow:clip;
    background:url(img/foreground.jpg);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;
    background-attachment:fixed;
}
.header-content{
    height:100%;
    width:fit-content;
    display:flex;
    align-items:end;  
}
.marquee{
    display:flex;
}
.marquee h1{
    margin-inline:2rem;
    font-size:var(--xl-text);
    color:var(--bg-1);
    white-space:nowrap;
}
.service-container{
    min-height:100vh;
    width:100%;
    display:grid;
    place-items:center;
    padding-inline: 1rem;
    background:var(--bg-1);
}
.service-content{
    max-width:50rem;
}
.service-content p {
    margin-top:1rem;
}
.prlx-section,.thrlax-container{
    height:100vh;
    width:100%;
    overflow:clip; 
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding-inline:2rem;
}
.prlx-item{
    position: absolute;
    height:150%;
    width:100%;
    object-fit:cover;
}
.prlxp{
    color:white;
    position:relative;
    z-index:2;
    max-width:25.75rem;
    
}

.thrlax{
  height:50vh;
  width:50vh;
  position:relative;
  background:url(img/lax3.jpg);
  background-size:cover;
  background-position: center center;
  
}
.thrlax img{
  position: absolute;
  object-fit:cover;
}
.thrlax1,.thrlax3{
  width:60%;
  height:70%;
  left:-30%;
  top:50%;
}

  .thrlax2,.thrlax4{
  width:40%;
  height:55%;
  right:-30%;
    top:30%;
  }
.thrlax-content{
  min-height:50vh;
  padding:0rem 1rem;
}


.wineShow{
    min-height:100vh;
    width:100%;
    position:relative;
    z-index:2;
    background:var(--bg-1);
    padding:2rem;
}
.wineCase img{
   max-width:100%;
    aspect-ratio:3/4;
}
.wineCase{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:5rem
}
.wineShow a {
    font-size:var(--l-text);
    display:flex;
    margin-top:3rem;
    width:100%;
    justify-content:center;
}
.stickylax{
    height:260vh;
    width:100%;
    margin-block:-100vh;
background:#3b3c36;
    overflow:clip;
    text-align:center;
    position:relative;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
}
.quote{
    height:250vh;
}
.stickylax .quoteh{
    font-size:3rem;
    height:50vh;
    line-height:1;
    display:flex;
    align-items:end;
    max-width:30rem;
    margin-inline:auto;
}

.stickylax h1{
    font-size:5rem;
    color:red;
    font-family:thunder;
    height:60vh;
    position:sticky;
    top:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.footer{
    min-height:100vh;
    background:white;
    width:100%;
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
}
.footer>*{
    flex:1;
}
.footer-top{
    background:black;
    text-align:center;
    padding:1.5rem;
    display:flex;
    flex-direction:column;
    justify-content:center;
    color:var(--bg-1);
    place-items:center;
    min-height:50vh;
    border-bottom-left-radius:3rem;
    border-bottom-right-radius:3rem;
}

.footer-top h1{
    font-size:var(--ms-text);
    margin-bottom:2rem;
}
#email{
    padding:.75rem;
    width:100%;
    text-align:center;
    border:1px solid grey;
    border-radius:.5rem;
    font-weight:bold;
}
 .signup{
     outline:none;
     border: none;
     background:var(--bg-1);
     color:black;
     width:100%;
     margin-top:1rem;
     padding:.75rem;
     border-radius:.5rem;
     font-weight:bold;
     transition:all .35s.ease-in-out;
 }
.signup:hover{
    background:var(--bg-3);
}
.footer-bottom{
    height:100%;
}
.footer-bottom .header-content{
    padding-block:2rem;
}

.footer-bottom .header-content .marquee h1{
   color:black; 
    font-size:var(--h1-text);
margin-inline:6rem;
}
.footer-nav {
    display: grid;
    font-size:var(--p-text);
    font-weight:bold;
    padding-inline:3rem;
    padding-bottom:2rem;
    grid-template-columns:.65fr .35fr;
}
.footerNavBlock{
    display:flex;
    flex-direction:column;
    gap:1rem;
    align-items:end;
}

.contactPage{
    min-height:100vh;
    width:100%;
    display:grid;
    grid-template-columns:repeat(3,1fr);
}

.contactImg{
  background:url(img/contact.jpg);
  background-size:cover;
    background-repeat:no-repeat;
  background-position: center center;
}
.topContact{
    display:flex;
    align-items:end;
    padding-block:2rem;
}
.topContact h1{
    font-size:10vw;
    transform:translateX(40%);
}

.bottomContact{
    display:flex;
    flex-direction:column;
    gap:1rem;
    font-size:var(--p1-text);
    padding:2rem;
    justify-content:end;
}