* {box-sizing:border-box}

/* ===================== */
/*        FONTS          */
/* ===================== */

@font-face {
  font-family: 'Bodoni Moda';
  src: url('fonts/BodoniModa_72pt-BlackItalic.ttf') format('ttf'); /* WOFF2 format for better browser support */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family:'Walbaum';
  src: url('fonts/WalbaumCom-Roman.ttf') format('ttf'); /* WOFF2 format for better browser support */
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family:'Cobe';
  src: url('fonts/cobeextrabold.ttf') format('ttf'); /* WOFF2 format for better browser support */
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family:'Scandia';
  src: url('fonts/Scandia-Regular.otf') format('ttf'); /* WOFF2 format for better browser support */
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}



// <weight>: Use a value from 400 to 900
// <uniquifier>: Use a unique and descriptive class name


/* ===================== */
/*        SECTIONS          */
/* ===================== */
  body, html {
    margin: 0; /* Remove default margins */
    height: 100%; /* Make sure the body takes full viewport height */
    overflow-x: hidden; /* Enables horizontal scrolling */
    overflow-y: auto; /* Prevent vertical scrolling */
    padding: 0;
  }

  body {
    color: rgb(124, 124, 124);
    box-sizing: border-box;
    font-family: "Helvetica";
    background-color: #fafafa;
    overflow-x: hidden;
    overscroll-behaviour: none;
    background-size: cover;   /* Makes the background image cover the full width and height */
    font-family: "forma-djr-deck", sans-serif;
    font-style: normal;   
    font-weight: 200;
  }
  a {
    color: rgb(124, 124, 124);
  }
  

  main {
    /*margin-left: 160px;*/
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;

  }

  

.section-info {

  display: flex;
flex-direction: column;
width: 100%;
padding-left: 35%;
padding-top: 30px;
  justify-content: space-evenly;
  margin-left: 0px;
  padding-bottom: 10%;
}
.top-section {
  height: 100vh;
}
/* ===================== */
/*        Headings and text styles          */
/* ===================== */
h1 {
  font-family: "scandia web" sans-serif;
  font-weight: 500;
font-style: normal;
}

h1 a {
  color: red;
}

.h1-white {
  color: white;
}

.h1-container {
  position: absolute;
  left: 0;
  top: 10%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 1em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  z-index: 1000;
  margin-left: 1%;
  font-size: 2em;

  /* Animation */
  animation: slideLeftRight 3s ease-in-out alternate;
}

@keyframes slideLeftRight {
  100% {
    transform: rotate(180deg) translateX(0);
  }
  0% {
    transform: rotate(180deg) translateX(100px);
  }
}

.mainly-text,
.ads-text {
  letter-spacing: 0.1em;
  margin: 0;
  padding: 0;
  cursor: grab;
  z-index: 1000;

}

.ads-text {
  writing-mode: vertical-rl;
  text-align: center;
}





h2 {
  font-size: 3em;
  font-weight: 100;
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  letter-spacing: 2px;
  font-family: "Scandia web", sans-serif;
  font-style: normal;   
  font-weight: 200;
  
}

h2.slidein {
  padding-top: 1%;
  padding-right: 2%;
  opacity: 0;
  position: relative; /* required for left/right to work */
  left: -1800px;
  font-size: 2em;
  line-height: 1.1;  
  padding-left: 25%;
  transition: all 2s ease-out;
}

h2.slidein.show {
  left: 0;
  opacity: 1;
}



h3 {
  font-size: 1.5em;
  font-family: "scandia-web-stencil", sans-serif;
  padding: 0;
  font-weight: 100;

  color:rgb(145, 143, 143)

}

h4{
  font-size: 1.2em;
  font-family: "scandia web", sans-serif;
  font-weight: 200;

}

p {
  font-family: "ltc-bodoni-175", serif;
  font-weight: 100;
  font-style: normal; 
}

/*list item*/
li {

  display: inline-block;
  padding-bottom: 4px;
  padding-top: 4px;
  text-decoration: none;
  border-radius: 20px;
  padding-right: 10px;
  padding-left: 10px;
  margin-bottom: 5px;
  width: max-content;
  list-style: none;   
}

.button-grid p {
  font-size: 0.8em;

}


img.svg {
  width: 80%;
  display: inline-block;
  z-index: -5;
}


/* ===================== */
/*        EXTRA COLORS          */
/* ===================== */

.mystyle {
  color: rgb(170, 4, 211);
  font-style: bold;
}

.mystyle2 {
  color: rgb(211, 4, 104);
  font-style: bold;
}

.mystyle3 {
  color: rgb(250, 12, 195);
  font-style: bold;
}

.full-width-image {
  width: 100%;
  height: auto;
  display: block;
}
/* ===================== */
/*        SECTIONS - container for case study items          */
/* ===================== */
.containerex {

  display: flex;
flex-direction: column;
width: 100%;
padding: 5%;
  justify-content: space-evenly;
  margin-left: 0px;
  padding-bottom: 50px;
}

.containerex p, h4 {
  padding-left: 25%;
}

.containerex img {
  margin-bottom: 3%;
-webkit-filter: drop-shadow(1px 1px 1px #aaaaaa);


}
.containerex img:hover {
transform: scale(1.01);
}

h5 {
  font-size: 1.2em;
  font-family: "scandia web", sans-serif;
  font-weight: 150;
}

/* ===================== */
/*        FOOTER          */
/* ===================== */
#footer {
  bottom: 0;
  display: flex;
  flex-direction: row;            /* Default to row on larger screens */
  justify-content: space-between; /* Space between items */
  align-items: center;            /* Center items vertically */
  color: rgb(0, 195, 255);        /* Footer text color */
  font-size: 0.7em;               /* Default font size */
  z-index: 4;
  background-color: black;
  margin-left: 0;
  margin-right: 0;
  padding: 10px;                  /* Padding to add space inside footer */
  width: 100%;                   /* Full width */
}

#footer li {
  padding: 10px;
  color: lightpink;               /* List item color */
}

/* ===================== */
/*        next project button          */
/* ===================== */
.next-project-button {
  font-size: 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  background-color: #fafafa;
  justify-content: center;
  display: inline-block;
  margin: 0 auto;
  text-align: left; /* if needed */
  /* keep your other styles */
flex-direction: column;
  align-items: center;
  transition: opacity 0.2s ease;
  z-index: 9999;
  padding-bottom: 30px;
  padding-left: 10px;
}


.next-project-button:hover {
  opacity: 1;
  visibility: visible;
  color: rgb(255, 174, 0);
}

.back-to-top-container {
  display: flex;
  flex-direction: column;
  align-items: center;       /* centers items horizontally */
  justify-content: center;  
  height: 50vh;
}

.back-to-top-btn {
  font-size: 20px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  background-color: #fafafa;
  justify-content: center;
  display: inline-block;
  margin: 0 auto;
  text-align: left; /* if needed */
  /* keep your other styles */
flex-direction: column;
  align-items: center;
  transition: opacity 0.2s ease;
  z-index: 9999;
}

.arrow-hover {
  opacity: 0;
  visibility: hidden;
  margin-left: 8px;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  font-size: 30px;
  font-weight: 100;
  position: relative;
    font-family: "Segoe UI Symbol", "Noto Sans Symbols", Arial, sans-serif, system-ui;
}

.back-to-top-btn:hover .arrow-hover, .next-project-button:hover .arrow-hover {
  opacity: 1;
  visibility: visible;
  color: rgb(255, 174, 0);
}
.back-to-top-btn:hover {
  color: rgb(255, 174, 0);
}

.shift {
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

.shift-tilt {
  /* Added via JS with custom values for each tap */
}

/* ===================== */
/*        case study onload styling          */
/* ===================== */



/*the two image rows and column gallery*/
    /* Remove hyperlink lines */
  


    .worldgif {
      z-index: -1;
      position: absolute;
    }

 
/* ===================== */
/*        EXTRA STYLES          */
/* ===================== */
    .dashed-line {
    width: 100%; /* Full width */
    height: 2px; /* Line height */
    border-top: 1px dashed #dbdada; /* Dashed line with 2px width and black color */
    position: relative; 
  }
   /*break space*/
.break {
  padding: 80px;
}
/*TEST FOR TREE LIST*/
    /* Remove hyperlink lines */

/*Responsive image grid*/

    .row {
      display: flex;
      flex-wrap: wrap;
      padding: 0 4px;
    }
    
    /* Create four equal columns that sits next to each other */
    .column {
      flex: 50%;
      max-width: 50%;
      padding: 0 4px;
    }
    
    .column img {
      margin-top: 8px;
      vertical-align: middle;
      width: 100%;
    }
    
    /* Responsive layout - makes a two column-layout instead of four columns */
    @media screen and (max-width: 800px) {
      .column {
        flex: 50%;
        max-width: 50%;
      }
    }
    
    /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
    @media screen and (max-width: 600px) {
      .column {
        flex: 100%;
        max-width: 100%;
      }
    }
/* ===================== */
/*        preload section         */
/* ===================== */
#preloader {
  position: fixed;
  top: 10px;
  right: 15px;
  z-index: 9999;
  background-color: rgba(34, 34, 34, 0.9);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  outline: 1px solid red; /* or any color you want */
}

    
    /* Spinner animation */
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
/*END - Responsive image grid*/
/* ===================== */
/*        PARALLAX SECTION         */
/* ===================== */


.parallax, .parallax-alt {
  display: flex;
  flex-direction: column;
  align-items: center;       /* centers items horizontally */
  justify-content: center;   /* centers items vertically (optional) */
  min-height: 500px;
  background-image: url("img/photography/431A7212 edited less res.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax-alt3 {
  display: flex;
  flex-direction: column;
  align-items: center;       /* centers items horizontally */
  justify-content: center;   /* centers items vertically (optional) */
  min-height: 500px;
  background-image: url("img/photography/431A7267.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax-alt3 h5 {
  color: red;
}

.scroll-content h5 {
  color: red;
}

.parallax-alt {
  display: flex;
  flex-direction: column;
  align-items: center;       /* centers items horizontally */
  justify-content: center;   /* centers items vertically (optional) */
  min-height: 500px;
  background-image: url("img/photography/431A7267.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax h1, .parallax-alt h1 {
  position: sticky;
  top: 20px; /* distance from top when sticky */
  z-index: 2;
  color: white;
  font-family: "scandia web";
  font-size: 2.5rem;
  margin: 0;
  line-height: 1.2;
  margin: 0 auto;
  padding-top: 20px; /* optional spacing */
  padding-bottom: 20px;
}

.parallax li, .parallax-alt li {
  color: white;
  display: inline-block;
  text-align: left; /* if needed */
  margin-top: 10px;
  /* keep your other styles */
flex-direction: column;
  font-size: 1rem;
  position: sticky;
  top: 15%; /* distance from top when sticky */
  gap: 30px;
  margin-top: 40px;
  align-items: center;
  font-family: "Bodoni";
  background-color: rgba(34, 34, 34, 0.9);
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: opacity 0.2s ease;
  z-index: 9999;
  outline: 1px solid red; /* or any color you want */
}

.parallax p, .parallax-alt p {
  padding-top: 5%;
}
.scroll-content, .scroll-content2 {
  height: max-content;
  background-color: rgba(250, 250, 250, 0.8);
  font-size: 21px;
  color: rgb(84, 83, 83);
  padding: 20px;
  font-family: "Bodoni";
  justify-content: center;
  width: 95%;
  margin: 0 auto;
}

.scroll-content p {
  font-family: "Bodoni Moda";
  font-size: 0.8em;
}

.scroll-content2 {
  width: 70%;
}
/* logo and awards bit*/
.logos-awards-section {
    color: white;
}

.section-content {
  padding: 40px;
  max-width: 900px;
  margin: auto;
}



.logos-row {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 30px;
}

.logos-row img {
  height: 60px;
}

.awards-press h2 {
  font-size: 1.8rem;
  margin-bottom: 10px;

}

.awards-press li {
}

.awards-press p {
  margin: 5px 0;
  font-size: 1rem;
}


/*about section Parallax*/

.parallax-alt {
  /* Replace with a different image URL */
  background-image: url('img/vogueparis/kunsthal_lind_012_jpg_3455.webp');
  min-height: 400px; 
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


.parallax-alt2 {
  background-color: #fafafa;
}

/*two image parallax */




.parallax-container {
  position: relative;
  width: 100%;
  height: auto;
  margin-top: 200px;
  display: block;
  padding: 5%;

}

/* Left image container holds the natural-size image */
.parallax-left {
  position: relative;
  width: fit-content;
  height: auto;
  /* or center with margin auto */
  z-index: 1;
}

.parallax-left img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

/* Right image overlaps the top-right */
.parallax-right {
  position: absolute;
  top: -50px;   /* shift upward to overlap */
  left: calc(50%); /* place it over the right side of the left image */
  z-index: 2;
  
}

.parallax-right img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
}



/* reverse parallax of this one above */

/* Reverse layout: left image on top, right image behind */
.parallax-container.reverse-style .parallax-left {
  position: absolute;
  left: 0;
  z-index: 2;
  width: 80%;

}

.parallax-container.reverse-style .parallax-right {
  position: relative;
  width: 50%;
  z-index: 1;
}

.reverse-style {
  padding-bottom: 250px;
}
/*poster*/

.spacer2 {
  height: 70.33vh;
}

.spacer {
  height: 100vh;
}


.poster-section {
  height: 150vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.poster-wrapper {
  position: relative;
  width: 400px; /* poster width */
}

/* Rectangle exactly same size & ratio as poster */
.slow-rectangle {
  position: absolute;
  width: 110%;
  height: 100%;
  background: rgba(190, 189, 189, 0.3);

  bottom: -10%;  /* offset down */
  right: -45%;    /* offset left */

  z-index: 1;
  will-change: transform;
  pointer-events: none;
}

/* Poster on top */
.poster-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  z-index: 2;
}

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

.text-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  color: white;
}

.text-overlay p{
  background-color: rgba(34, 34, 34, 0.9);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: opacity 0.2s ease;
  z-index: 9999;
  outline: 1px solid red; /* or any color you want */
}

.text-overlay h1 {
  outline-offset: 4px; /* Optional: makes it more visible */
  transition: opacity 0.2s ease;
  z-index: 9999;
  color: white;
 font-family: "forma-djr-deck", sans-serif;
  display: inline-block; /* KEY: ensures outline wraps all text lines */
}

.outlined-text {
  display: inline;
  outline-offset: 4px;
  transition: opacity 0.2s ease;
  z-index: 9999;
  background-color: rgb(255, 255, 255, 0.7);

}

.poster-section h1 {
  /* Your styles here */
  margin-left: 140%;
  margin-top: 90%;
  position: relative;
  background-color: none;
}

.poster-section p {
  margin-left: 150%;
}

.reverse-style h1 {
  position: relative;
}





/* Mobile-friendly fallback: remove fixed bg and use normal background */



/* intro section Parallax*/



.intro-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  
  gap: 40px;
  width: 80%;
  margin: 0 auto;
  margin-bottom: 200px; /* or any value you prefer */
  margin-top: 100px;
  z-index: -50;

}

.intro-images {
  display: flex;
  gap: 20px;
  flex: 1 1 300px; /* Allow it to shrink but have a minimum */
  position: relative;
    z-index: -50;

}

.parallax-thumb {
  width: 100%;
  max-width: 80%; /* Limit max width so images don't get too big */
  transition: transform 0.2s ease-out;
  will-change: transform;
}

.img2 {
  z-index: 1;
}

.intro-text {
  flex: 1 1 300px; /* Same for text, allow shrinking but set minimum */
  max-width: 45%;   /* Give it space but less than half for breathing room */
  height: max-content;
  display: block;
  
}
.intro-text p{
background-color: rgba(34, 34, 34, 0.9);
color: white;
padding: 6px 10px;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
transition: opacity 0.2s ease;
z-index: 9999;
outline: 1px solid red; /* or any color you want */
}

.intro-text h4 {
  outline: 1px solid red; /* or any color you want */

}
@media (max-width: 768px) {
 

  .intro-section {
    flex-direction: column;
    text-align: center;
    width: 100%;
  }

  .intro-images {
    justify-content: center;
  }
  .parallax-thumb {
    width: 80%;         /* scales width responsively */
    max-width: 300px;   /* optional max size to avoid huge images */
    height: auto;       /* keeps aspect ratio */
    transition: transform 0.2s ease-out;
    will-change: transform;
    display: block;     /* removes inline image spacing issues */
    object-fit: contain; /* ensures image fits inside without distortion */
  }
  
}

@media (max-width: 450px) {
  .slow-rectangle {
    position: absolute;
    width: 110%;
    height: 100%;
    background: rgba(190, 189, 189, 0.3);
  
    bottom: -5%;  /* offset down */
    right: -25%;    /* offset left */
  
    z-index: 1;
    will-change: transform;
    pointer-events: none;
  }
  .parallax-thumb {
    width: 45%;         /* scales width responsively */
   /* ensures image fits inside without distortion */
  }
  .parallax-container {
    position: relative;
    width: 100%;
    padding-bottom: 130px;
  }

 
    .parallax, .parallax-alt, .parallax-alt3 {
      background-attachment: scroll;
      background-size: cover;
      background-position: center;
  }

}




/* ===================== */
/*        VIEW THE WORK SECTION         */
/* ===================== */


.fullscreen-hero {
  position: relative;
  height: 100vh;
  background-color: #000; /* fallback */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  overflow: hidden;

}

.fullscreen-hero2 {
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  overflow: hidden;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}


/* Slideshow Layer */
.hero-slideshow {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
}

/* Dark overlay on top of images */
.fullscreen-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.hero-text {
  position: relative;
  z-index: 2;
  padding-left: 10px;
  padding: 10%;
  margin: 0 auto;
  justify-content: center;
  
}

.hero-text a {
  color: white;
  text-decoration: none;
  font-family: "scandia-web";
  font-size: 1.5rem;
}



/*END - Responsive image grid*/
/* ===================== */
/*        GRID TEST         */
/* ===================== */

.button-grid {
  display: grid;
  gap: 16px;
  max-width: 100%;
  margin: 40px auto;
  padding: 0 20px;
}

.grid-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  background-color: #f0f0f0;
  border-radius: 12px;
  padding: 16px 24px;
  transition: background-color 0.3s ease;
}

.grid-row:hover {
  background-color: rgb(255, 174, 0);
}

.button-text {
  font-size: 1.2rem;
  font-weight: 500;
  color: #333333;
  margin-right: 10px;
}

.overlaybutton-text {
  font-size: 1rem;
}






/*galleries in section pages */

/* list items before ham */
    /* Create four equal columns that sits next to each other */
  
/* ===================== */
/*        NAV          */
/* ===================== */

/*media queries*/


  ul, #myUL, li {
    z-index: 999;
  }

    a {
      text-decoration: none;  
    }

   .myUL a {
      color: rgb(219, 58, 219);
    }



    .myUL a:hover {
      color: rgb(147, 21, 111);

    }
 



/*ham menu - not displaying on desktop */

/* Styling for the hamburger menu and navigation links */
.offscreenmenu {
  position: relative;
  z-index: 6;

}

.hamburger-icon {
  font-size: 30px;
  cursor: pointer;
  z-index: 6;
  justify-content: center;
  align-items: center;
  color: red;
}

/* Make the navigation visible on larger screens */


/* Style the links */
.fade-item a {
  text-decoration: none;

    color: white;
  padding: 1px;
}



/* When in mobile view */

  h1 {
    z-index: 4;
    text-align: left;

  }

  .h1-white a {
    color: white;
  }

  .hamburger-icon-white {
    color: white;
  }
 
  .hamburger-icon {
    display: block; /* Show the hamburger icon on mobile */
    z-index: 99;
    margin-left: 2%;
    position: relative;
  }

  .myUL {
    display: none; /* Hide the links initially */
    flex-direction: row;
    position: absolute;
    transition: opacity 0.3s ease-in-out; /* Add smooth transition */
    text-align: left;
    left: 15%;
    padding-top: 10px;
    margin-top: 0px;
  }
  

  .myUL.show {
    display: flex; /* Show links when the menu is toggled */
    opacity: 1; /* Fade in effect */   
  }

/* the list of items */
  .myUL li {
padding-left: 10px;
padding-top: 10px;
text-decoration: none;
  }

  

  .myUL li a {
        color: white;

  }

  .off-screen-menu {
    background-color: rgb(250, 12, 195);
    height: 100vh;
    width:100%;
    top: 0;
    right: -1800px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.8rem;
    transition: .3s ease;
    z-index: 1;
    position: fixed;
  }

  .off-screen-menu.show {
    display: block;
    right: 0px;
  }
  .offscreenmenu ul {
    padding-left: 0px;
  }




@media screen and (max-width: 468px) {
  .hamburger-icon {
    display: block; /* Show the hamburger icon on mobile */
    z-index: 99;
  }

  .myUL {
    flex-direction: column;
    position: absolute;
    transition: opacity 0.3s ease-in-out; /* Add smooth transition */
    text-align: center;
    margin: 0 auto;
  }

  .myUL.show {
    display: flex; /* Show links when the menu is toggled */
  }

  .myUL li {
    font-size: 1.2em;
  }

  li.fade2.fadein {
    font-size: 1.1em;
  }

  div.banner {
    height: 300px;
    width: 100%;
  }
  div.banner img {
    height: 300px;
  }
  div.img-container {
width: 100%;
  }


 .top-section {
  height: 100%;
  }
  
}


/* end of ham*/





/* ===================== */
/*        CASE STUDY IMAGE CONTAINER     */
/* ===================== */

/*overlay image*/
/* Container for all the gallery items */

/* Container for the two columns */
.gallery-container {
  display: grid;
  width: 100%;
  top: -100px;
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  gap: 20px; /* Horizontal gap between the columns */
}

/* Individual gallery columns */
.gallery-column {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Vertical gap between items */
  z-index: 0;
}

/* Style for individual gallery items */
.gallery-item {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  height: auto; /* Let items take their natural height */
  overflow: visible;
}

/* tooltip test */


.tooltip-container {
  position: relative;
  display: inline-block;
  width: 100%;
  cursor: none; /* Hides the system cursor */

}

.tooltip-container:hover .tooltip-text,
.tooltip-container.active .tooltip-text {
  opacity: 1;
  pointer-events: auto;
}

.image-wrapper {
  display: block;
  width: 100%;
  transition: transform 0.3s ease;
}

.rotate-on-hover:hover {
  transform: scale(1.05) rotate(1deg);
}

.tooltip-text {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background-color: rgba(34, 34, 34, 0.9);
  color: white;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  font-size: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: opacity 0.2s ease;
  z-index: 9999;
  outline: 1px solid red; /* or any color you want */

}

.tooltip-text.show {
  visibility: visible;
  opacity: 1;
}



h2.image {
  background-color: red;
  -webkit-filter: drop-shadow(1px 1px 1px #110808);
  height: 120px;
  align-content: center;
}




/* Style for the images */
.gallery-item img {
  width: 100%; /* Make image take full width of the parent container */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove any space below the image */
  object-fit: cover; /* Ensure the images cover their container without distortion */
}

/* Style for the overlay */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(247, 17, 236, 0.5); /* Semi-transparent dark overlay */
  transition: opacity 0.3s ease; /* Smooth transition for overlay */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Text inside overlay */
.overlay .text {
  color: white;
  font-size: 24px;
  text-decoration: none;
}

a.text {
  font-size: 20px;
  align-items: center;
  z-index: 1000;
  color: rgb(0, 195, 255);        /* Footer text color */
}

/* Show overlay when hovering over the image */


.rotate-on-hover {
  transition: transform 0.3s ease;
  display: inline-block;
}

.rotate-on-hover:hover {
  transform: perspective(500px) rotateX(10deg) rotateY(10deg) translateY(-10px);
  ; /* You can change 5deg to any small angle */
}

/* Media Query for Mobile View */
@media screen and (max-width: 768px) {
  /* Change the layout to one column on mobile devices */
  .gallery-container {
    grid-template-columns: 1fr;
    padding-left: 10%; 
    padding-right: 10%; 
    padding-bottom: 10%; 
     /* Single column on small screens */
  }

  /* Adjust spacing between items in single column */
  .gallery-column {
    gap: 15px; /* Smaller gap on mobile */
  }

 
  .h1-container {
    flex-direction: row;
    gap: 1em;
    top: 7%;
    left: 0em;
  }
  
  .mainly-text,
  .ads-text {
  
  
  }
  .mainly-text,
  .ads-text {
  
  
  }

  .containerex {

  padding: 5%;
    justify-content: space-evenly;
    margin-left: 0px;
    padding-bottom: 50px;
  }
  
  .containerex p {
    padding-left: 25%;
  }
  
  /*parallax poster and rectangle section */

  .poster-section {
    height: 90vh;
    width: 60%;
    margin-top: 20%;
  }

  .poster-wrapper {
    padding-left: 5%;
  }

  h2.slidein {
    
  font-size: 1.6em;
  
  }
}



/*banners*/



  

   
      
 @media only screen and (max-width: 430px) {

          body {
            max-width: 100%;
            margin: 0;
            padding: 0;
          }
          main {
            
            padding: 0;
            margin: 0;
            height: 100%;

          }

     h1 {
        display: block;
        width: 5%;
        font-size: 2.5em;
        padding-top: 5px;
    
        white-space: nowrap;
        /*margin: auto;  */ 
        /*text-align: center;*/
     }

     h2.slidein {
  font-size: 1.8em;
  line-height: 1.1;  
  padding-right: 5%;
}

     .gallery-container {
      padding-left: 15%;
      padding-right: 15%;

       /* Single column on small screens */
    }

     .rotate-on-hover {
      transition: transform 0.4s ease;
      transition-delay: 0.2s; /* Add delay before the effect starts */
    
    }
    
    .rotate-on-hover:hover {
      transform: perspective(500px) rotateX(10deg) rotateY(10deg) translateY(-10px);
      transition-delay: 0.2s; /* Add delay before the effect starts */
    
    }
    
    .rotate-on-hover.active {
      transform: perspective(500px) rotateX(10deg) rotateY(10deg) translateY(-10px);
    }

    .tooltip-text {
      visibility:visible;
    }
    .parallax h1 {
      padding-right: 130px;
    }

       li {
            display: block;
            /*margin: auto;  */ 
            margin-top: 3px;
        }




        ul, #myUL {
            display: block;
            z-index: 99;
            padding-left: 7px;

            /*margin: auto;  */ 
        }

        html {
          box-sizing: border-box;
        }


        .h1-container {
          flex-direction: row;
          gap: 1em;
          top: 7%;
          left: 0em;
        }
        
        .mainly-text,
        .ads-text {
          margin: 0;
          font-size: 1.9em;
     
        }

        /*arrow hover*/
        .arrow-hover {
          opacity: 1;
          visibility: visible;
         
        }
/*parallax mobile*/

.text-overlay {
  position: relative;
  margin-top: -200px;
}
.text-overlay h1{

  font-size: 22px;
  transition: opacity 0.2s ease;
  z-index: 9999;
}

.poster-section h1 {
  /* Your styles here */
  margin-left: 0%;
  margin-top: 200px;
}

.poster-section p {
  margin-left: 20%;
  
  
}

/* Left image container holds the natural-size image */
.parallax-left {
  margin-left: 5px;
}
.parallax-section {
  width: 100%;
}

.parallax-right {
  position: absolute;
  top: -50px;   /* shift upward to overlap */
  left: calc(40%); /* place it over the right side of the left image */
  z-index: 2;
  
}


.parallax-left img {
  max-width: 90%;
}

.parallax-right img {
  
  max-width: 95%;
}


        .img-gallery img {
          
          z-index: -1;
         margin-left: 0;
         padding: 0;
         align-content: center;
      }
        

      .containerex img {
        width: 100%;

      }
      



    :root {
      overscroll-behavior: none;
    }

    h1 {
      margin-left: 2px;
    }

    .container {
      width: 100%;
    }



    /*back to top buttons*/

    .back-to-top-container {
     
      height: 20vh;
    }


    #footer {
      flex-direction: column;          /* Stack items vertically */
      align-items: center;             /* Center items horizontally */
      font-size: 0.9em;                /* Slightly larger font for mobile */
      padding: 15px; 
      position: static;
      /* Add more padding for mobile */
      z-index: 1500;
    }
  
    #footer li {
      padding: 5px;                    /* Reduce padding for mobile */
      font-size: 1em;                   /* Adjust list item font size */
    }

    
      .parallax {
        min-height: 100vh; /* Fill the screen */
      }

    
      
      .hero-text a {
        
        font-size: 0.6rem;
        padding: 10%;
      }

    }

    div.spacer2 {
      height: 15vh;
    }
    

    .image-container2 {
      display: grid;
      grid-template-columns: repeat(4, 1fr); /* 4 equal columns */
      gap: 10px; /* Optional, for space between images */
  
    }
  
    .image-container2 img {
      width: 40%; /* Ensure images are responsive */
      height: auto;
      display: block;
  
    }
  


  /*end of media query*/

  .fade-item:active {
    color: red;
  }


.fade-item {
  transition: 0.1s;
  opacity: 0;
}

.fadein {
  animation: fadeIn 0.9s 1;
  animation-fill-mode: forwards;
}


@keyframes fadeIn {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}


$total-items: 10;


li {
  position: relative;
  display: block;
  animation: 0.5s linear;
  animation-fill-mode: both;
}


@for $i from 1 through $total-items {
  .fade-item:nth-child(#{$i}) {
    animation-delay: 0s * $i;
  }
} 


.fade2 {
  transition: 0.1s;
  opacity: 0;
}

.fadein2 {
  animation: fadeIn2 0.9s 1;
  animation-fill-mode: forwards;
}


@keyframes fadeIn2 {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}


$total-items: 17;


@for $i from 1 through $total-items {
  .fade2:nth-child(#{$i}) {
    animation-delay: 0s * $i;
  }
}