:root {
  --bs-font-sans-serif: 'Jura', sans-serif;
  /* Override Bootstrap's default */
}
:root {
  --orange-100: #fff3cd; /* Light orange */
  --orange-200: #ffeeba; /* Lighter orange */
  --orange-300: #ffc107; /* Standard orange */
  --orange-400: #ffca2c; /* Slightly darker */
  --orange-500: #ff9800; /* Medium orange */
  --orange-600: #fb8c00; /* Darker orange */
  --orange-700: #f57c00; /* Even darker */
  --orange-800: #ef6c00; /* Dark orange */
  --orange-900: #e65100; /* Very dark orange */
}
body {
  font-family: var(--bs-font-sans-serif);
  font-weight: 300; /* Set to Light */
  background-color: black; /* Background color */
  margin: 0; /* Remove default margin */
}

.section-container {
  height: 100vh; /* Full viewport height */
}

.scroll-section {
  background-color: black;
  height: 100vh; /* Each section takes full viewport height */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white; /* Add text color for visibility */
  font-size: 2rem; /* Adjust font size */
  aspect-ratio: 16 / 9;
}

.text-gradient-BY {
  background-image: linear-gradient(to right, #8cc7e6, #e06347, #ffd9a8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* FOOTER */

.footer {
  position: fixed;
  bottom: 0;
  left: 0;

}

/* TEXT DECORATION 
      0 0 5px #ff0000,    Light red glow 
      0 0 10px #ff0000,  Medium red glow 
      0 0 15px #ff0000,   Stronger red glow 
      0 0 20px #ff0000,  Even stronger red glow 
      0 0 25px #ff0000;   Maximum red glow */
      .glow-red-low {
        color: #fff;
        /* Text color */
        text-shadow:
          0 0 5px #AA0000;
          
      }
.glow-red {
  color: #fff;
  /* Text color */
  text-shadow:
    0 0 5px #ff0000,
    0 0 10px #ff0000,
    0 0 15px #ff0000;
}
.glow-blue {
  color: #fff;
  /* Text color */
  text-shadow:
    0 0 5px #0000ff,
    0 0 10px #0000ff,
    0 0 15px #0000ff;
}
.glow-green {
  color: #a0ff73;
  /* Text color */
  text-shadow:
    0 0 5px #0c7f22,
    0 0 10px #0c7f22,
    0 0 15px #0c7f22,
    0 0 20px #0c7f22,
    0 0 25px #0c7f22;
}

.glow-magenta {
  color: #fff;
  /* Text color */
  text-shadow:
    0 0 5px #ff00ff,
    0 0 10px #ff00ff,
    0 0 15px #ff00ff;
}
.glow-purple {
  color: #fff; /* Text color */
  text-shadow:
    0 0 5px #800080, /* First shadow: purple glow with a blur radius of 5px */
    0 0 10px #800080, /* Second shadow: purple glow with a blur radius of 10px */
    0 0 15px #800080; /* Third shadow: purple glow with a blur radius of 15px */
}
.glow-white {
  color: #fff;
  /* Text color */
  text-shadow:
    0 0 5px #ffffff,    
    0 0 10px #ffffff,   
    0 0 15px #ffffff;  
}
.purple-bokeh {
  position: relative;
  color: #fff; /* Text color */
  text-align: center;
  font-size: 4rem; /* Adjust font size as needed */
}

.purple-bokeh::before {
  content: ''; /* Create a pseudo-element */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400%; /* Twice as wide as the heading */
  height: 100%; /* Match the height of the heading */
  background: linear-gradient(90deg, rgba(255, 0, 255, 0.8) 0%, rgba(128, 0, 128, 0.6) 50%, rgba(128, 0, 128, 0) 100%); /* Horizontal gradient for lens flare */
  transform: translate(-35%, -50%); /* Center the bokeh */
  filter: blur(40px); /* Blur effect for softness */
  z-index: -1; /* Place behind the text */
}
.chromatic {
  text-shadow: 
      2px 0 rgba(255, 0, 0, 0.6),   /* Red shadow */
      -2px 0 rgba(0, 255, 255, 0.6),   /* Blue shadow */
      0 2px rgba(255, 0, 0, 0.6),    /* Red shadow below */
      0 -2px rgba(0, 255, 255, 0.6);   /* Blue shadow above */
}
.text-shadow {
  text-shadow: 0 .5rem 0.5rem rgba(0, 0, 0, 1); /* Equivalent text shadow */
}

.text-orange-100 { color: var(--orange-100); }
.text-orange-200 { color: var(--orange-200); }
.text-orange-300 { color: var(--orange-300); }
.text-orange-400 { color: var(--orange-400); }
.text-orange-500 { color: var(--orange-500); }
.text-orange-600 { color: var(--orange-600); }
.text-orange-700 { color: var(--orange-700); }
.text-orange-800 { color: var(--orange-800); }
.text-orange-900 { color: var(--orange-900); }



/* TRANSITION IMG A6 */
.wipe-transition {
  position: relative;
  overflow: hidden;
  height: 100vh;
}

.image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.image-container.default {
  z-index: 1;
}

.image-container.reveal {
  z-index: 2;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 3s ease-in-out;
}

.image-container.reveal.active {
  clip-path: inset(0 0 0 0);
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}