@charset "UTF-8";



/* @FONT FACE (enable the use of 'custom fonts' inside your document) */

/* 
  You can use 'fontsquirrel' (https://www.fontsquirrel.com) 
  or 'transfonter' (https://transfonter.org)
  to generate your own font for the web from .ttf or .oft files 
*/

 
                    
@font-face {
  font-family: exposure50;
  src: url("/assets/fonts/ExposureTrial--50.woff2");
  
}

@font-face {
  font-family: exposure30;
  src: url("/assets/fonts/ExposureTrial--30.woff2");
  
}

@font-face {
  font-family: rubikmonoone;
  src: url("/assests/fonts/HaasGrotDisp-65Medium.woff2");
}

@font-face {
  font-family: avigea;
  src: url("/assets/fonts/Avigea.woff2");
}

@font-face {
  font-family: haas;
  src: url("/assets/fonts/HaasGrotDisp-65Medium.woff2");
}





/* VARIABLES */

:root {
  /* Color values */
  --color-background: rgba(255,255,255,1);
  --color-text: rgba(0,0,0,1);
  --color-text-link:rgba(142, 142, 142, 0.4);
  --color-text-link-hover: rgba(142, 142, 142, 0.4);
  /* Font values */
  --font-size: 24px;
  /* Margin values */
  --margin: 2.5rem;


  /* Examples of possible variables */

  --font-size-heading: calc(var(--font-size) * 2);
  --font-size-subheading: calc(var(--font-size) * 1.25);
  --font-size-caption: calc(var(--font-size) * 0.875);

  --margin-xs: calc(var(--margin) * 0.5);
  --margin-s: calc(var(--margin) * 1);
  --margin-m: calc(var(--margin) * 2);
  --margin-l: calc(var(--margin) * 3);
  --margin-xl: calc(var(--margin) * 5);

}



/* GENERAL STYLES */

html {
  font: var(--font-size) var(--font-family);
  color: var(--color-text);
  background-color: var(--color-background);
}

body {
  position:relative;
  background-color: var(--color-background);
  font: var(--font-size) var(--font-family);
  color: var(--color-text);
  width:100%;
  height:auto;
  overflow-y:auto;
  background-color: black;
  color: #b44e37;
list-style-type: none;
}

.logo {
  position: fixed;
  top: 10px;
  left: 10px;
  width: 200px; /* optional */
}

a {
  color: var(--color-text-link);
  /* text-decoration: underline; */
  color: white;
}

a:hover {
  color: var(--color-text-link-hover);
  /* text-decoration: underline; */
}


h1{
  /* h1 style */
  
  font-family: 'exposure50';
    font-size: clamp(
    var(--font-size-heading),
    4vw,
    calc(var(--font-size-heading) * 1.25)
  );
  font-size: 75pt;
  text-align: left;
  line-height: 0.85;
  max-width: 460px;
  margin-left: 250px;
}

h2{
   /* h2 style */
  
   font-family: 'exposure50';
   font-size: clamp(
   var(--font-size-heading),
   4vw,
   calc(var(--font-size-heading) * 1.25)
 );
 font-size: 35pt;
 text-align: left;
 line-height: 0.85;
 max-width: 460px;
 margin-left: 500px;
}

h3{
  /* h3 style */
  
    font-family: 'haas';
    font-size: clamp(
    var(--font-size-heading),
    4vw,
    calc(var(--font-size-heading) * 1.25));

  font-size: 20pt;
  line-height: 19pt;
  text-align: center;
  line-height: 0.85;
  max-width: 720px;
  margin: 0 auto;
  word-spacing: 2pt;
  text-transform: uppercase;
  
}

p {
font-size: 10pt;
line-height: 12pt;
font-family: 'haas';
text-transform: uppercase;
text-align: center;
margin-top: 50px;
}

ol, ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

ul li {
  float: left;
}

ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 15px 16px;
  text-decoration: none;
}

ul li a:hover {
  color: white;
  border: #b44e37;
  border-style: dotted;
  background-color: transparent;
}

blockquote{
  /* blockquote element style */
}

hr{
  /* horizontal rule style */
}

/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */

/* PAGE STYLES */

/* page structure */

div.page-wrapper {
  /* the element that 'wraps' everything */
  padding: var(--margin);
}

/* navigation */
 
nav{
font-family: 'avigea';
font-size: large;
display: flex;
justify-content: center;
list-style: none;
}

/* content */

main{
 
}

summary{
  
}

/* ------------------------HOVER TEXT------------------------------------ */
/* ------------------------SCRIPT DIV------------------------------------ */

.script1 {
  position: relative;
  margin-left: 65%; /* Using percentage-based left margin */
  top: -30px;         /* Move upwards based on percentage */
}


.script2 {
  position: relative;
  margin-top: 1%;   /* Slightly adjust margin-top, using percentages */
  margin-left: 45%;  /* Adjust with percentage for responsiveness */
}

.script3 {
  margin-left: 5%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -90px;          /* Move it upwards by 10% */
}

.script4 {
  margin-left: 25%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -60px;          /* Move it upwards by 10% */
}

.script5 {
  margin-left: 55%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -190px;          /* Move it upwards by 10% */
}

.script6 {
  margin-left: 35%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -130px;          /* Move it upwards by 10% */
}

.script7 {
  margin-left: 25%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -80px;          /* Move it upwards by 10% */
}

.script8 {
  margin-left: 1%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -220px;          /* Move it upwards by 10% */
}

.script9 {
  margin-left: 35%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -140px;          /* Move it upwards by 10% */
}

.script10 {
  margin-left: 35%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -120px;          /* Move it upwards by 10% */
}

.script11 {
  margin-left: 3%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -100px;          /* Move it upwards by 10% */
}

.script12 {
  margin-left: 3%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -90px;          /* Move it upwards by 10% */
}

.script13 {
  margin-left: 3%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -80px;          /* Move it upwards by 10% */
}

.script14 {
  margin-left: 40%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: 0px;          /* Move it upwards by 10% */
}

.script15 {
  margin-left: 10%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: 25px;          /* Move it upwards by 10% */
}

/* --------------------------PAGE 1-------------------------------- */

.script16 {
  margin-left: 55%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: 20px;          /* Move it upwards by 10% */
}

.script17 {
  margin-left: 60%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -100px;          /* Move it upwards by 10% */
}

.script18 {
  margin-left: 20%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -50px;          /* Move it upwards by 10% */
}

.script19 {
  margin-left: 40%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -10px;          /* Move it upwards by 10% */
}

.script20 {
  margin-left: 2%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -120px;          /* Move it upwards by 10% */
}

.script21 {
  margin-left: 10%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -50px;          /* Move it upwards by 10% */
}

.script22 {
  margin-left: 0%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -200px;          /* Move it upwards by 10% */
}

.script23 {
  margin-left: 5%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -100px;          /* Move it upwards by 10% */
}

.script24 {
  margin-left: 50%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -20px;          /* Move it upwards by 10% */
}

.script25 {
  margin-left: 60%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -200px;          /* Move it upwards by 10% */
}

.script26 {
  margin-left: 42%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -60px;          /* Move it upwards by 10% */
}

.script27 {
  margin-left: 55%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -50px;          /* Move it upwards by 10% */
}

.script28 {
  margin-left: 0%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -100px;          /* Move it upwards by 10% */
}

/* --------------------------PAGE 2-------------------------------- */

.script29 {
  margin-left: 5%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -100px;          /* Move it upwards by 10% */
}

.script30 {
  margin-left: -50px;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -200px;          /* Move it upwards by 10% */
}

.script31 {
  margin-left: 0%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -50px;          /* Move it upwards by 10% */
  text-align: right;
}

.script32 {
  margin-left: 20%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -40px;          /* Move it upwards by 10% */
}

.script33 {
  margin-left: 55%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -150px;          /* Move it upwards by 10% */
}

.script34 {
  margin-left: 65%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -50px;          /* Move it upwards by 10% */
}

.script35 {
  margin-left: 0%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: 0px;          /* Move it upwards by 10% */
}

.script36 {
  margin-left: 30%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: 0px;          /* Move it upwards by 10% */
}

.script37 {
  margin-left: 55%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: 0px;          /* Move it upwards by 10% */
}

.script38 {
  margin-left: 0%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -180px;          /* Move it upwards by 10% */
  text-align: right;
}

.script39 {
  margin-left: 20%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -50px;          /* Move it upwards by 10% */
}

.script40 {
  margin-left: -20px;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -150px;          /* Move it upwards by 10% */
}

.script41 {
  margin-left: -20px;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -150px;          /* Move it upwards by 10% */
}

.script42 {
  margin-left: 35%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -5px;          /* Move it upwards by 10% */
}

.script43 {
  margin-left: 65%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: 200px;          /* Move it upwards by 10% */
}

/* --------------------------PAGE 3-------------------------------- */

.script44 {
  margin-left: 55%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -50px;          /* Move it upwards by 10% */
}

.script45 {
  margin-left: 25%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -20px;          /* Move it upwards by 10% */
}

.script46 {
  margin-left: 20%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: 5px;          /* Move it upwards by 10% */
}

.script47 {
  margin-left: 55%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: 5px;          /* Move it upwards by 10% */
}

.script48 {
  margin-left: 55%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -20px;          /* Move it upwards by 10% */
}

.script49 {
  margin-left: 50%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -250px;          /* Move it upwards by 10% */
}

.script50 {
  margin-left: 35%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -20px;          /* Move it upwards by 10% */
}

.script51 {
  margin-left: 0%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -20px;          /* Move it upwards by 10% */
}

.script52 {
  margin-left: 20%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: 5px;          /* Move it upwards by 10% */
}

/* --------------------------PAGE 4-------------------------------- */

.script53 {
  margin-left: 5%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -160px;          /* Move it upwards by 10% */
}

.script54 {
  margin-left: 25%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -20px;          /* Move it upwards by 10% */
}

.script55 {
  margin-left: 20%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: 5px;          /* Move it upwards by 10% */
}

.script56 {
  margin-left: 45%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: 30px;          /* Move it upwards by 10% */
}

.script57 {
  margin-left: 55%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -130px;          /* Move it upwards by 10% */
}

.script58 {
  margin-left: 35%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -50px;          /* Move it upwards by 10% */
}

.script59 {
  margin-left: 15%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: 0px;          /* Move it upwards by 10% */
}

.script60 {
  margin-left: 0%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -160px;          /* Move it upwards by 10% */
}

.script61 {
  margin-left: 20%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -50px;          /* Move it upwards by 10% */
}

.script62 {
  margin-left: 0%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: 0px;          /* Move it upwards by 10% */
}

.script63 {
  margin-left: 55%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: 5px;          /* Move it upwards by 10% */
}

.script64 {
  margin-left: 54%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: 50px;          /* Move it upwards by 10% */
}

.script65 {
  margin-left: 55%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -15px;          /* Move it upwards by 10% */
}

.script66 {
  margin-left: 65%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -150px;          /* Move it upwards by 10% */
}

.script67 {
  margin-left: 0%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -150px;          /* Move it upwards by 10% */
}

.script68 {
  margin-left: 5%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -150px;          /* Move it upwards by 10% */
  text-align: right;
}

.script69 {
  margin-left: 45%;    /* Adjust with percentage for responsiveness */
  position: relative;
  top: -50px;          /* Move it upwards by 10% */
}

/* -------------------------------------------------------------------- */
/* Optional wrapper to center content */
.container {
  display: flex;
  justify-content: center;
  padding: 20px;
}

/* MAIN TEXT */
.hover-text {
  position: relative;
  display: inline-block;
  cursor: pointer;

  font-size: clamp(18px, 4vw, 35px);
  font-family: exposure30;
  font-weight: bold;

  color: #b44e37;
  transition: color 0.1s ease;

  width: 100%;
  max-width: 485px;
}

/* BOTH TEXT STATES */
.hover-text .default-content,
.hover-text .hover-content {
  display: block;
  width: 100%;
  transition: opacity 0.2s ease;
}

/* HOVER TEXT (on top) */
.hover-text .hover-content {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  color: aliceblue;
}

/* HOVER EFFECT */
.hover-text:hover .default-content {
  opacity: 0;
}

.hover-text:hover .hover-content {
  opacity: 1;
}


/* -------------------------------------------------------------------- */

/* .fade {
  pointer-events: none;
  background: linear-gradient(90deg, rgb(229, 182, 182), transparent 5%, transparent 85%, rgb(229, 182, 182));
  position: absolute;
  inset: 0;
} */

@keyframes loop {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}






/* ----------------------------VIDEO---------------------------------------- */
/* -------------------------------INDEX----------------------------------- */


figure{
  margin:0;
  padding:0;
   /* border-style: dotted;  */ 
}

.video1 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 50px;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */
}

.video2 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 38%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video3 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 1%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}


.video4 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 38%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}


.video5 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 40%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video6 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 30%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}
/* --------------------------PAGE 1-------------------------------- */

.video7 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 20%;  /* Center the video horizontally */
  margin-top: 10%;
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video8 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 2%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video9 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 42%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video10 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 35%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video11 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 5%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video12 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 25%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}
/* --------------------------PAGE 2-------------------------------- */

.video13 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 42%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video14 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 30%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video15 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 0%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video16 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 20%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video17 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 0%;  /* Center the video horizontally */
  margin-top: 2%;
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video18 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 42%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video19 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 36%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video20 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 20%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
  margin-top: 10px;
}

.video21 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 10%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
  margin-top: 10px;
}

/* --------------------------PAGE 3-------------------------------- */


.video22 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 0%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video23 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 30%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video24 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 25%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
  margin-top: 25px;
}

.video25 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 0%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video26 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 35%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video27 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 25%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
  margin-top: 20px;
}

/* --------------------------PAGE 4-------------------------------- */

.video28 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 42%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video29 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 30%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video30 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 0%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video31 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 35%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video32 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 30%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video33 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 0%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video34 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 5%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video35 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 38%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

.video36 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 0%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}
/* --------------------------AFTERWORD -------------------------------- */

.video37 {
  width: 100%;        /* Ensure it takes up full available width */
  max-width: 800px;   /* Limit the maximum width */
  margin-left: 20%;  /* Center the video horizontally */
  margin-right: auto; /* Center the video horizontally */
  display: block;     /* Make it block-level so it centers properly */ 
  /* Optionally adjust the height to maintain aspect ratio */
  height: auto;
}

/* -------------------------------------------------------------------- */
/* -------------------------------------------------------------------- */


/* UTILITY CLASSES */

/* hide desktop mobile etc */

.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}





/* WEBSITE MEDIA QUERIES */

/* responsive typeface for various breaking points, sets the default 'rem' value */
@media (max-width: 299px) { :root{--font-size: 18px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 299px) and (max-width: 340px) { :root{--font-size: 19px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 340px) and (max-width: 440px) { :root{--font-size: 20px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 441px) and (max-width: 779px) { :root{--font-size: 19px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 780px) and (max-width: 992px) { :root{--font-size: 20px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 993px) and (max-width: 1200px) { :root{--font-size: 21px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 1201px) and (max-width: 1320px) { :root{--font-size: 22px;} html, body {font: var(--font-size) var(--font-text); } }
@media (min-width: 1321px) { :root{--font-size: 24px;} html, body {font: var(--font-size) var(--font-text); } }

/* styles for 'mobile', screen sizes up to 779px, should covers 'mobile' and 'tablet' */
/* style this one first and then use the subsequent ones in a cascading way (from general to specific) */

@media (max-width: 779px) {

  /* your 'mobile' overriding css properties here */
  .hover-text {
    font-size: clamp(16px, 5vw, 30px);  /* Make text smaller on mobile */
    text-align: center;  /* Center the text */
  }

    .video1, .video2, .video3, .video4, .video5, .video6, .video7, .video8, .video9, .video10, .video11, .video12, .video13, .video14, .video15, .video16, .video17, .video18, .video19,
    .video20, .video21, .video22, .video23, .video24, .video25, .video26, .video27, .video28, .video29, .video30, .video31, .video32, .video33, .video34, .video35, .video36 {
  width: 60%;        /* Reduce width on smaller screens */
  max-width: 80%;   /* Allow full-width on very small screens */
}

.video37 {width: 80%;        /* Reduce width on smaller screens */
  max-width: 100%;   /* Allow full-width on very small screens */
}

@media (max-width: 779px) {
  h1 {
    margin-left: 20px; /* Adjust this to push it a bit right on smaller screens */
    text-align: center; /* Optionally center on mobile */
    font-size: clamp(2rem, 6vw, 50pt); /* Smaller text on mobile */
  }
  h3 {
    margin-left: 20px; /* Adjust this to push it a bit right on smaller screens */
    text-align: center; /* Optionally center on mobile */
    font-size: clamp(0.5rem, 6,5vw, 5pt); /* Smaller text on mobile */
  }

  .logo {
    width: 20vw; /* slightly bigger relative size on small screens */
  }


  /* utility classes, mobile */

  .desktop-only{
    display:none;
  }

  .mobile-only{
    display:block;
  }

}



/* use this query to apply style changes to smaller smartphones sizes (like an iPhone 5S or SE 2016), max size of 339px */

@media (max-width: 339px) {

  /* your overriding css properties here */

}



/* use this query to apply style changes for 'mobile' screen sizes that are flipped in 'landscape' mode */

@media (max-width: 779px) and (orientation: landscape) {}


  
}




  

/* use this query to apply style for 'small' desktop screens */

@media (min-width: 780px) and (max-width: 992px) {

  /* your overriding css properties here */

}