html {
    scroll-behavior: smooth;
}


.bo{
border: 2px solid black;
}


:root {


  --color-primary-50: #eef7fc;
  --color-primary-100: #dceff9;
  --color-primary-200: #c6e6f7;
  --color-primary-300: #8dd3fb;
  --color-primary-400: #4ec0fb;
  --color-primary-500: #05b0f9; /* brand color */
  --color-primary-600: #026cb1;
  --color-primary-700: #04558b;
  --color-primary-800: #04385e;
  --color-primary-850: #010915;
  --color-primary-900: #031d3e; /* brand color */
  --color-primary-950: #021125;
  
  --color-accent-500: #026CB1;

  --color-siteblack: #333333;
  --color-siteblack-modal : #333333E6;
  --color-sitewhite: #f2f2f2;

  --color-sitegrey-primary: #999999;
  --color-sitegrey-secondary: #e0e0e0;
  --color-sitegrey-tertiary: #d9d9d9;

  --color-success-primary: #329A39;
  --color-success-primary-hover: #93CD92;

  --color-danger-primary: #9f0712;
  --color-danger-primary-hover: #E86E5E;

  --gradient-line :linear-gradient(90deg,transparent,#031D3E 30%,#031D3E 50%,#031D3E 70%,transparent);
  --gradient-line-white :linear-gradient(90deg,transparent,#f2f2f2 30%,#f2f2f2 50%,#f2f2f2 70%,transparent);
  --gradient-primary: linear-gradient( 135deg,#031D3E 0%, #026CB1 50%, #05B0F9 100%);
  --gradient-blue: linear-gradient( 90deg,#026CB1 0%,#05B0F9 100%);
  --gradient-soft: linear-gradient(135deg, #031D3E 0%, #05B0F9 60%, #C6E6F7 100%);

}

.bg-gradient-primary {
  background: var(--gradient-primary);
}

.bg-gradient-blue {
  background: var(--gradient-blue);
}

.bg-gradient-soft {
  background: var(--gradient-soft);
}

.bg-gradient-line {
  background: var(--gradient-line);
}

.bg-gradient-line-white {
  background: var(--gradient-line-white);
}


.font-primary {
  font-family: "Montserrat", sans-serif;
}

.font-secondary {
  font-family: "Inter", sans-serif;
}


/* container */
.container {
  padding: 0rem 4rem 0rem 4rem  ;
  margin: 0 auto;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .container {
    padding: 0rem 4rem 0rem 4rem  ;
  }
}

@media screen and (min-width: 0px) and (max-width: 767px) {
  .container {
    padding: 0rem 4rem 0rem 4rem  ;
  }
}




.nav-bar-container {
  padding: 0rem 4rem 0rem 4rem  ;
  margin: 0 auto;
  max-width: 1536px;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .nav-bar-container {
    padding: 0rem 4rem 0rem 4rem  ;
  }

}

@media screen and (min-width: 425px) and (max-width: 768px) {
  .nav-bar-container {
    padding: 0rem 4rem 0rem 4rem  ;
  }
}

@media screen and (min-width: 0px) and (max-width: 425px) {
  .nav-bar-container {
    padding: 0rem 2rem 0rem 2rem  ;
  }
}

.section-container {
  padding: 4rem 4rem 4rem 4rem  ;
  margin: 0 auto;
  max-width: 1536px;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .section-container {
    padding: 2rem 2rem 2rem 2rem  ;
  }
}

@media screen and (min-width: 425px) and (max-width: 768px) {
  .section-container {
    padding: 4rem 1rem 4rem 1rem  ;
  }
}

@media screen and (min-width: 0px) and (max-width: 425px) {
  .section-container {
    padding: 4rem 1.5rem 4rem 2rem  ;
  }
}


.title-container {
  padding: 1rem 4rem 1rem 4rem  ;
  margin: 0 auto;
  max-width: 1536px;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .title-container {
    padding: 1rem 2rem 1rem 2rem  ;
  }
}

@media screen and (min-width: 425px) and (max-width: 768px) {
  .title-container {
    padding: 2rem 1rem 2rem 1rem  ;
  }
}

@media screen and (min-width: 0px) and (max-width: 425px) {
  .title-container {
    padding: 2rem 1.5rem 2rem 2rem  ;
  }
}





/* user selection */
::selection {
  background-color: #333333;
  color: white;
}

::-moz-selection {
  background-color: #333333;
  color: white;
}





/* scrollbar  */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;  /* IE & Edge */
    scrollbar-width: none;     /* Firefox */
}







.underline-effect{
  position: relative;

}

.underline-effect::after{
  border: 1px solid var(--color-primary-600);
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-primary-600);
  transform: scaleX(0); 
  transform-origin: left;
  transition: all 0.5s ease ; 
}

.group:hover .underline-effect::after {
  transform: scaleX(1);
  transform-origin: right;
}



/* header contact btn */
.cta-btn {
  position: relative;
  display: inline-block;
  overflow: hidden;
  color: white;
  background: var(--gradient-primary);
}

.cta-btn::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -100%;
  width: 40px;
  height: 200%;
  background: rgba(255, 255, 255, 0.35);
  transform: rotate(25deg);
  filter: blur(8px);
  animation: shuttle 1.5s linear infinite;
}

@keyframes shuttle {
  from {
    left: -120%;
  }
  to {
    left: 130%;
  }
}


#menuBtn {
  position: relative;
  width: 28px;
  height: 24px;
}

.line {
  position: absolute;
  left: 0;
  width: 28px;
  height: 3px;
  transition: all 0.3s ease;
}

.line:nth-child(1) { top: 0; }
.line:nth-child(2) { top: 10px; }
.line:nth-child(3) { top: 20px; }

#menuBtn.active .line:nth-child(1),
#menuBtn.active .line:nth-child(3) {
  top: 10px; /* move both to the middle */
}

#menuBtn.active .line:nth-child(1) {
  transform: rotate(45deg);
}

#menuBtn.active .line:nth-child(2) {
  opacity: 0;
}

#menuBtn.active .line:nth-child(3) {
  transform: rotate(-45deg);
}



#mobileMenu.active {
  transform: translateX(0);
}

  
#overlay.active {
    opacity: 1;
    visibility: visible;
}

#mobileMenu.active {
    transform: translateX(0);
}



/* hero section zoom */
@keyframes slowZoom {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
}

.animate-slow-zoom {
    animation: slowZoom 10s ease-in-out infinite;
}


/* modal image zoom */
#modalImage {
    animation: zoomIn 0.25s ease;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* prodcuts page tab  */
.bio-tab-content, .ketone-bio-tab-content  {
    animation: fadeIn .3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}