/*INFO
    This file contains the general styles for the website. It includes the font styles, body and scrollbar styling, preloader styling, marquee animation, and other general styles.
- Build Mobile First Or Create New Media Queries for Mobile Only
- General Styles here not embedded via tailwind
- Colors 
   Accent Color: #00bf62 (MAIN)
                 #00994e (DARK)
                 #33cc81 (LIGHT/Bluer)


/* Additional fonts */
.optima {
    font-family: 'Century Gothic', serif;
    font-weight: normal;
    user-select: none;
}
.didot {
    font-family: 'Didot', serif;
    font-style: italic;
    font-weight: normal;
    user-select: none;
}
@font-face {
    font-family: 'Sacco';
    src: url(/fonts/web/Sacco-SemBdCondObliq.woff2) format('woff2'), /* Use the best format */
         url(/fonts/web/Sacco-SemBdCondObliq.woff) format('woff'),
         url(/fonts/Sacco-SemiBoldCondensed.ttf) format('truetype'); /* Fallback */
    font-weight: normal; /* Adjust if needed */
    font-style: normal; /* Adjust if needed */
}


@font-face {
    font-family: 'TT Chocolates';
    src: url('/fonts/tt/TT\ Chocolates\ Trial\ Regular.otf') format('opentype'); /* Use OpenType */
    font-weight: normal; /* Adjust as necessary */
    font-style: normal; /* Adjust as necessary */
}

.font-sacco {
    font-family: 'Sacco', sans-serif; /* Use Sacco font, fallback to sans-serif if unavailable */
    font-weight: normal; /* Adjust to match the font definition */
    font-style: normal; /* Adjust to match the font definition */

}

.font-tt{
    font-family: 'TT Chocolates', sans-serif; /* Use TT Chocolates font, fallback to sans-serif if unavailable */
    font-weight: normal; /* Adjust to match the font definition */
    font-style: normal; /* Adjust to match the font definition */
}

/* Headings and paragraphs styles */
h1, h2, h3, h4, h5, h6 {
    font-family: "TT Chocolates", sans-serif;
    font-weight: 400;
}

p {
    font-family: 'Roboto', sans-serif;

}

/* Body and scrollbar styling */
body {
    height: 100%;
    background-color: rgb(255, 255, 255);
    overflow-y: auto;
    scrollbar-color: auto;
    overflow-x: hidden !important;
}

/* Initial scrollbar styles */
html {
    scrollbar-color: black black; /* Thumb color black, track color black */
    scrollbar-width: none; /* Adjust this as per your preference */
    transition: scrollbar-color 1s ease; /* Transition for color change with delay */
}

/* Scrollbar transition styles */
html.scrollbar-transition {
    scrollbar-color: rgba(0, 0, 0, 0.65) white; /* Thumb color black, track color white */
    scrollbar-width: none; /* Ensure width is set for both states */
    transition: scrollbar-color .9s ease; /* Transition for color change with delay */
}

/* Preloader styling */
#preloader {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 9999;
    opacity: 1;
    transition: opacity 1s ease, visibility 1s ease;
}
#preloader.hide {
    opacity: 0;
    visibility: hidden;
}

/* Marquee animation */
.marquee {
    position: relative;
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    margin-left: 200px;
    margin-right: 185px;
    width: 100%;
    user-select: none;
}
.marquee::before,
.marquee::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgb(255, 255, 255);
    transition: transform .8s ease;
}
.marquee::before {
    top: 0;
}
.marquee::after {
    bottom: 0;
}
#preloader.hide .marquee span {
    opacity: 0;
    transition: opacity .4s ease;
}
#preloader.hide .marquee::before {
    transform: translateY(20px);
}
#preloader.hide .marquee::after {
    transform: translateY(-20px);
}
.marquee span {
    display: inline-block;
    animation: scroll 28s linear infinite;
    user-select: none;
}
@keyframes scroll {
    0% {
        transform: translate(0);
    }
    100% {
        transform: translate(-100%);
    }
}
/*Navbar styling*/
#mobile-menu {
    transition: max-height 0.3s ease-out;
    overflow: hidden;
  }
#menu-toggle{
    background-color: transparent !important;
}  
#wave {
   
        background-color: #00bf62;
            
  }
  #nav-btn{
    background-color: black !important;
  }
  .nav_menu li a:hover {
    color: #00bf62;
  }
  
/* Section heading */

.accent{
    color:#00bf62
}


  
  
/* Button */
button{
    background-color: #00bf62!important;
    color:white;
    border-radius: 5px;
}
button:hover{
    background-color: #00994e!important;
}
.custom-line {
    display: block;
    height: 2px;
    width: 50px; /* Adjust the width as needed */
    background-color: #00bf62; 
  }
  .custom-line-text{
    color: #00bf62;
  }
  .custom-line2 {
    display: block;
    height: 10px;
    width: 40px; /* Adjust the width for balance */
    color: #00bf62 !important
  }


/* Parallax Section */
  .parallax {
    min-height: 50vh;
    background-attachment: fixed; /* Creates the parallax effect */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  /* mobile responsiveness for parallax section*/
  @media (orientation: landscape) {
    .parallax {
        height: 70vh;
    }
}
/* Scroll Indicator Container */
.scroll-indicator {
    position: fixed;
    right: 20px; /* Adjust as needed */
    top: 50%;
    transform: translateY(-50%);
    width: 6px; /* Thin bar */
    height: 150px; /* Adjust height */
    background: rgba(0, 0, 0, 0.2); /* Semi-transparent black */
    border-radius: 10px;
    overflow: hidden; /* Ensures fill stays inside */
  }
  
  /* Scroll Fill */
  .scroll-fill {
    width: 100%;
    height: 0%; /* Start empty */
    background: black;
    border-radius: 10px;
  }
  @media (max-width: 832px) {
    .scroll-indicator {
      display: none !important;
    }
  }
  #menu-toggle{
    background-color: transparent !important;
    color: #00bf62;
}
@media (max-width: 639px) {
    .hero-interior {
      height: 120px!important;
      display: none;
    }

}

@media (max-width: 494px) {
    #nav-btn {
      display: none !important;
    }

}