:root{
    --brownish-red: #312727;
    --theme-color: #412525;
    --reddish-brown: #735B5B;
    --reddish-red: #924356;
    --pink-red: #6A4D4D;
    --light-gray : #F8F5F5;
    --light-grayish-red : #FBFAFA;
}

@font-face {
    font-family: 'Fontspring-theseasons-bd';
    src: url('../fonts/Fontspring-theseasons-bd.woff');
}
@font-face {
    font-family: 'Fontspring-theseasons-reg';
    src: url('../fonts/Fontspring-theseasons-reg.woff');
}

body{
    font-family: "Urbanist", sans-serif;
    font-style: normal;
}

.font-urbanist{
    font-family: "Urbanist", sans-serif;
}

.font-mono{
    font-family: "Geist Mono", monospace;
}

.font-theseasons-bold{
    font-family: 'Fontspring-theseasons-bd';
}
.font-theseasons-reg{
    font-family: 'Fontspring-theseasons-reg';
}

.font-abel{
    font-family: "Abel", sans-serif;
}

.theme-color{
    color: var(--theme-color);
}
.brownish-red{
    color: var(--brownish-red);
}
.reddish-brown{
    color: var(--reddish-brown);
}
.reddish-red{
    color: var(--reddish-red);
}
.pink-red{
    color: var(--pink-red);
}
.light-gray{
    color: var(--light-gray);
}
.light-grayish-red{
    color: var(--light-grayish-red);
}


/********** Header **********/

.container{
    max-width: 1440px;
    margin: 0px auto;
    padding: 0px;
}
.heart {
    transition: fill 0.5s ease;
  }


@keyframes smooth-wave {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-8px); } /* moves up smoothly */
    100% { transform: translateY(0); }
  }
  
.wave-smooth {
    animation: smooth-wave 3s ease-in-out infinite;
}


@keyframes smooth-x-wave {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(-8px); } /* moves up smoothly */
    100% { transform: translateX(0); }
  }
  
.wave-x-smooth {
    animation: smooth-wave 3s ease-in-out infinite;
}


@media screen and (min-width: 1620px) {
    .wide-overflow{
        overflow: inherit;
    }
}

#our-story-heading,
#abut-our-story,
#our-story {
  will-change: transform;
  transform: translateZ(0);
}



/* keyframes */
@keyframes spin360 {
    to { transform: rotate(360deg); }
  }
  
  /* apply */
  .spin-360 {
    display: inline-flex;
    transform-origin: center center;
    animation: spin360 50s linear infinite;
  }

.anim-moveUpDown:hover img{
    animation: moveUpDown 0.5s ease-in-out;

    will-change: transform;
    position: relative;
    z-index: 9
}

@keyframes moveUpDown {
    0% {
        transform: translate(0, 0);
      }
      40% {
        transform: translate(35px, -20px);
      }
      60% {
        transform: translate(-30px, -20px);
      }
      80% {
        transform: translate(-20px, 12px);
      }
      100% {
        transform: translate(0, 0);
      }
}


.mobile-menu{
   height: 100vh; 
}
.mobile-menu.open {
    transform: translateX(100%);
    opacity: 1;
    z-index: 0;
}

.menu-open header.header-filter {
    overflow: initial;
}

.hamburger.open .line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.open .line:nth-child(2) {
    opacity: 0;
}

.hamburger.open .line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}
.menu-open{
    overflow: hidden;
}



@media screen and (min-width: 767px) {
    .flex-wrap-inherit{
        flex-wrap: inherit;
    }
}


.back-to-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background-color: var(--reddish-red);
    outline: none;
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    min-width: 50px;
    max-width: 50px;
    min-height: 50px;
    max-height: 50px;
    border: 1px solid #fff;
    z-index: 999;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover img {
    top: 0px;
    transition: all 0.1s;
}
.back-to-top img {
    width: 24px;
    transform: rotate(-90deg);
    position: relative;
    top: 1px;
    left: 2px;
    transition: all 0.1s;
}  



.header-filter {
    width: 100%;
    overflow: hidden;
    transition: opacity 0.26s ease-out;
    filter: drop-shadow(-8px -10px 46px #0000005f);
    backdrop-filter: brightness(1.1) 
        blur(2px)
        url(#displacementFilter);

        position: fixed;
        /* top: 100px; */
        z-index: 9999;
}

.header-filter::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    /* -webkit-box-shadow: inset 2px 2px 0px -2px rgba(255, 255, 255, 0.7), 
                        inset 0 0 3px 1px rgba(255, 255, 255, 0.7);
    box-shadow: inset 6px 6px 0px -6px rgba(255, 255, 255, 0.7), 
                inset 0 0 8px 1px rgba(255, 255, 255, 0.7); */
    /* backdrop-filter: blur(4px); */
     backdrop-filter: blur(1px);
	/* box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.3),
    inset -2px -2px 2px 1px rgba(255, 255, 255, 0.3), 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); */
}


.is-safari .header-filter{
    background-color: rgba(255, 255, 255, 0.1); /* ✅ fallback for Safari */
  background-image: linear-gradient(to right, rgba(255,255,255,0.1), rgba(255,255,255,0.05), rgba(255,255,255,0.1));
  backdrop-filter: brightness(1.1) blur(9px);
  -webkit-backdrop-filter: brightness(1.1) blur(9px); /* ✅ iOS fix */
  filter: drop-shadow(-8px -10px 46px #0000005f);
}

.scroll-hidden{
    overflow: hidden;
}

.appearance-none{
    -webkit-appearance: none;
}
input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
  display: none;
}