body, html {
padding: 0;
margin: 0;
background-color: 	#ffffff;
/*cursor: url('arrow-cursor.png') 0 0, auto; /* set hot spot (x y) */
}

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  /* Adjust size as needed */
    width: 25px;
  height: 25px;
 /* border: 2px solid #1A191A;*/
  /* black outline */
  background-color: rgba(236, 236, 236, 0.5);
  background-color: #1A191A;
  /* light gray with 40% opacity */
  border-radius: 50%;
  /* Make it a circle */
  pointer-events: none;
  /* Ensure it doesn't block clicks */
  z-index: 10000;
  /* Keep it above all other elements */
  transition: transform 0.1s ease, background-color 0.2s ease, opacity 0.2s ease;
  transform: translate(-50%, -50%);
  opacity: 0;
  /* Start as hidden */
}

/* Expanded and color-changed cursor when hovering links */
.custom-cursor.link-hover {
  transform: translate(-50%, -50%) scale(2);
  background-color: rgba(236, 236, 236, 0.5);
  /*border: 1px solid #1A191A;*/
}

/* Expanded cursor when hovering topnav */
.custom-cursor.topnav-hover {
  transform: translate(-50%, -50%) scale(2);
  background-color: rgba(236, 236, 236, 0.5);
}

@media screen and (max-width: 600px) {
.column, input[type=submit] {
width: 100%;
margin-top: 0;
}
}

.icon {
margin-left: 5px;
width: 70px;
height: auto;
cursor: pointer;
}

/* Hamburger icon */
.hamburger {
  display: none;
  font-size: 30px;
  cursor: pointer;
  padding-right: 10px;
}

@media screen and (max-width: 600px) {
  .nav-items {
    display: none;
    width: 100%;
     background-color: #ececec;
    /*background-color: #e1e1e1;*/
    position: absolute;
    top: 55px; /* Adjust based on your .topnav height */
    right: 0; /* Align to the right */
    z-index: 999;
   /* border-bottom: 1px solid #ccc;*/
   /* border: 1px solid #ccc;*/
    /*border-radius: 4px;*/
    padding: 0;
    padding-bottom: 20px;
  }

  .nav-items ul {
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    padding: 0;
    margin: 0;
  }

  .nav-items li {
    margin: 0;
    margin-right: -10px;
  }

  .hamburger {
    display: block;
   /* font-size: 24px;*/
    cursor: pointer;
    margin-left: auto;
  }

  .nav-items.show {
    display: block;
  }
}




.gabe {
font-family: "articulat-cf", sans-serif;
font-weight: 700;
font-style: normal;
font-size: clamp(15px, 8vw, 15px);
color: #1A191A;
}

.heading1:hover:not(.active) {
color: #6b6b6b;
}

.topnav {
/*padding-left: 30px;
padding-right: 30px;*/
  width: 100%;
  position: fixed;
  top: 0; /* safer than margin-top */
  left: 50%;
  transform: translateX(-50%); /* centers horizontally */
  display: flex;
  justify-content: space-between; /* centers content inside */
  align-items: center; 
  font-family: "articulat-cf", sans-serif;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
   font-size: clamp(10px, 2vw, 13px);
  background-color: #ffffff;
 /* border-bottom: 2px solid #1A191A;*/
}

.name a {
 
  text-decoration: none;
  color: inherit;
}

.nav-items ul {
 
  display: flex;
  gap: 20px; /* spacing between links */
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.nav-items li a {
  margin-right: 20px;
  display: block;
  line-height: 30px;
  color: #1A191A;
 /* color: #1A191A;*/
  text-decoration: none;
}

.nav-items a:hover:not(.active) {
  text-decoration: line-through;
  /*text-decoration: overline dotted;*/
  text-decoration-thickness: 2px;
  color: #7f7f7f;
}

.nav-items .active {
   text-decoration: line-through;
  text-decoration-thickness: 2px;
  /*text-decoration: overline dotted;
  text-decoration-thickness: 3px;*/
}

.line {
border-top: 2px solid #7f7f7f;
padding: 20px 0; /* optional: add space between borders and content */
margin-left: 20px;
margin-right:20px;
}

.divider {
border-top: 2px dashed #7f7f7f;
margin-top: 50px;
margin-left: 20px;
margin-right:20px;
}

.divider2 {
border-top: 2px solid #7f7f7f;
padding: 5px 0; /* optional: add space between borders and content */
margin-top: 30px;

}


a {
  text-decoration: underline;
  /*color: #69df46;*/
  color: #1A191A;
  
}

.link {
line-height: 0px;
text-transform: uppercase;
font-family: "indivisible", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 25px;
/*font-size: clamp(1rem, 2vw + 0.1rem, 1.5rem);*/
}

.header {
font-family: "indivisible", sans-serif;
font-weight: 700;
font-style: normal;
text-transform: uppercase;
/* font-size: clamp(1rem, 2vw + 0.5rem, 2.5rem);*/
 font-size: clamp(1rem, 2vw + 0.1rem, 1.5rem);
  display: inline; /* makes background only cover the text */
  background-color: #69df46;
  margin: 0;       /* remove default margin */
  padding: 0;      /* remove any padding */
}
h3 {
padding-top: 40px;
padding-bottom: 20px;
margin: 20px;
color: #7f7f7f;
font-family: "indivisible", sans-serif;
font-weight: 500;
font-style: normal;
font-size: clamp(0.9rem, 2vw, 8rem);
/*text-transform: uppercase;*/
}
.title2 {
  margin: 20px;
}


p {
font-size: 13px;
color: #1A191A;
font-family: "owners-text", sans-serif;
font-weight: 500;
font-style: normal;
}

.text {
font-size: 13px;
padding-top: -30px;
}


@media (max-width: 768px) {
  .text {
    width: 100%;
  }
}

video {
        width: 100%    !important;
        height: auto   !important;
       object-fit: contain;
      }
  img {
    border-radius: 7px;
        max-width: 100%;
        height: auto;
        object-fit: cover;
        flex: 1 1 300px; 
      }

@media (max-width: 600px) {
  .project,
  .main_content5 {
    width: 100%;
    
  }

  /* force stacking order on mobile only */
  .project {
    order: 1;
   
  }

  .main_content5 {
    order: 2;
  }

  /* make sure their parent uses flex column on mobile */
  .parent-container {
    display: flex;
    flex-direction: column;
  }
}

/* Mobile and small tablet layout */
@media (max-width: 768px) {
.container {
flex-direction: column; /* stack vertically */
align-items: stretch;
/*padding-top: 10px; /* slightly less padding for small screens */
margin: 10px; /* tighter margin for narrow viewports */
gap: 1.5rem;
box-sizing: border-box;
}

.project {
top: 0;
position: static !important; /* enforce fixed positioning */
width: 100%;          /* FULL WIDTH */
max-width: none;      /* prevents shrinking */
padding: 0;
margin: 0;            /* remove auto-centering */
box-sizing: border-box;
}

.project_name {
font-size: clamp(18px, 6vw, 32px);
line-height: 1.2;
}

  .project-descriptor,
  .project-type,
  .project-year {
    font-size: clamp(12px, 3.5vw, 16px);
    line-height: 1.4;
  }

  .main_content5 {
   
    width: 100%;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    box-sizing: border-box;
  }

  .picture_wrapper5 {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
   /* gap: 8px;*/
    max-width: 100%;
  }

  .picture_wrapper5 img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* Extra-small screens (phones under 480px) */
@media (max-width: 480px) {
  .project {
    padding: 0;
  }

  .project_name {
    font-size: clamp(16px, 7vw, 26px);
  }

  .container {
    margin: auto;
  }
}


.container {
/*padding-top: 70px;*/
margin: 20px;
padding-bottom: 20px;
display: flex;
align-items: flex-start; /* keeps top edges aligned */
gap: 3rem; /* space between the two sections */
}

.project {
  flex: 1;
  max-width: 500px;
  position: sticky;
  top: 70px; /* sticks to top of viewport */
  align-self: flex-start;
  height: fit-content;
  /*padding-left: 10px;
  padding-right: 20px;*/
  /*border: 2px dashed #1A191A;
  border-radius: 5px;*/
  line-height: 25px;
  margin: 0; /* remove margin auto */
  /*padding-top: 30px; /* aligns with .main_content5 top */
  /*padding-bottom: 30px;*/
}

.project-info {
   color: #7f7f7f;
  display: flex;
  /*justify-content: space-between; /* pushes them to opposite sides */
  align-items: center; /* keeps text aligned nicely */
  gap: 7rem;
  /*gap: 24%;*/
  font-family: "indivisible", sans-serif;
font-weight: 500;
font-style: italic;
 font-size: clamp(0.9rem, 1vw, 1rem);
 padding-top: 7px;
}
.project_name{
  font-family: "articulat-cf", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: clamp(20px, 2.5vw, 25px);
  line-height: clamp(20px, 3vw, 25px);
text-transform: uppercase;
  color: #1A191A;
  /*padding-top: 5px;*/
  padding-bottom: 15px;
}

.project-descriptor{
  font-family: "dico-code-one", mono;
  font-weight: 400;
  font-style: normal;
   font-size: clamp(13px, 0.9vw, 20px);
  line-height: clamp(20px, 1.4vw, 30px);
  width: 100%;
  color: #1A191A;
  padding-bottom: 30px;
}
.project-type {
  /*font-family: "dico-code-one", mono;
  font-weight: 700;
  font-style: normal;
   font-size: clamp(13px, 0.9vw, 15px);
  line-height: clamp(20px, 1.4vw, 30px);*/
   font-family: "articulat-cf", sans-serif;
  font-weight: 600;
  font-style: normal;
   font-size: clamp(20px, 2.5vw, 23px);
  line-height: clamp(20px, 3vw, 23px);
text-transform: uppercase;
  color: #e4e4e4;
  /*padding: 5px 15px; 
  border: 2px solid #1A191A;
  border-radius: 9999px; 
  display: inline-block; 
 margin-top: 10px;*/
}

.project-year{
  font-family: "dico-code-one", mono;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(13px, 0.9vw, 15px);
  line-height: clamp(20px, 1.4vw, 30px);
 /* font-size: 13px;
 line-height: 20px;*/
  color: #1A191A;
 /* background-color: #1A191A;*/
  padding-bottom: 15px;
  /*padding: 5px 15px; 
  border: 2px solid #1A191A;
  border-radius: 5px; 
  display: inline-block;*/
}

.title1 {
  text-transform: uppercase;
  color: #1A191A;
  font-family: "dico-code-one", mono;
  font-weight: bold;
  font-style: normal;
  font-size: 13px;
  }

 

.w-col {
  width: 100%;
 /* padding-bottom: 20px;*/
}


    

.main_content5 {
  flex: 2;
  display: flex;
  align-items: stretch; /* stretch children instead of centering */
  /*align-items: center;*/
  width: 100%;
  margin-top: 55px;
  box-sizing: border-box;
}

.picture_wrapper5 {
display: flex;
flex-wrap: wrap;
/*justify-content: center;*/
justify-content: flex-start; /* align items from left edge */
gap: 10px;
width: 100%;
max-width: 100%; /* remove previous hard limit */
/*max-width: 2560px;*/
object-fit: cover;

}




 .mockup1{
         /* width: 900px;*/
          width: 100%;
         
         /* width: 835px;
          /*width:57vw;*/
          height: auto;
          object-fit: contain;
          /*top:100vh;*/
        }
        .mockup2{
          width: 700px;
          height: auto;
          object-fit: contain;
        }
        .sd-gif {
          width: 700px;
          max-width: 100%;
          height: auto;
           object-fit: contain;
        }

     .poster{
        /*width:39.5%;*/
        /*width: 500px;*/
         width: 700px;
        height: auto;
        object-fit: contain;
      }
  .mockup1{
  /* width: 900px;*/
  width: 100%;
         
  /* width: 835px;
  /*width:57vw;*/
  height: auto;
  object-fit: contain;
  /*top:100vh;*/
  }
 .mockup2{
width: 700px;
height: auto;
object-fit: contain;
}
 .mag-gif {
      object-fit: contain;
      /*width: 883px;*/
      width: 100%;
      height: auto;
    }
    .mag-cover {
      width: 600px;
    /* width: 463px;
     /*width: 100%;
     padding-right: 50%;*/
        height: auto;
       object-fit: contain;
    }
 .poster_mockup{
width: 700px;
height: auto;
object-fit: contain;
}
    .poster_m2 {
      width: 700px;
         
          height: auto;
          object-fit: contain;
    }

  .tabu_poster2 {
        /*width: 800px;*/
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    .clip {
      width: 700px;
      max-width: 100%;
      height: auto;
      object-fit: contain;
    }
.alphabet {
width: 700px;
max-width: 100%;
height: auto;
object-fit: contain;
}

  .logo2 {
        width: 500px;
        height: auto;
        object-fit: contain;
      }


#myBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 50px; /* Place the button at the bottom of the page */
right: 20px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
/*outline-style: solid;
outline-color: #1A191A;
outline-width: 2px;
background-color: rgba(236, 236, 236, 0.5); 
color: #1A191A; */
background-color: #ececec;
color: #7f7f7f;
cursor: pointer; /* Add a mouse pointer on hover */
padding: 5px 10px 5px;
border-radius: 2px; /* Rounded corners */
font-size: 15px; /* Increase font size */
}
  
#myBtn:hover {
    background-color: #1A191A; /* Add a dark-grey background on hover */
    color: #ececec;
  }


  html {
  scroll-behavior: smooth;
}


/*.picture_wrapper5 img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}     */

      
      /* responsive */
@media (min-width: 2560px) {
  .main_content .main_content2 .main_content3 .main_content5{
    column-count: 5;
  }
}

@media (min-width: 1200px) {
  .main_content .main_content2 .main_content3 .main_content5{
    column-count: 4;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .main_content .main_content2 .main_content3 .main_content5{
    column-count: 3;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .main_content .main_content2 .main_content3 .main_content5{
    column-count: 2;
  }
}

@media (max-width: 575px) {
  .main_content .main_content2 .main_content3 .main_content5{
    column-count: 1;
  }
}







.Articulat-CF-Bold {
      font-family: "articulat-cf", sans-serif;
      font-weight: 700;
      font-style: normal;
      }
      
      .Articulat-CF-Bold {
        font-family: "articulat-cf", sans-serif;
        font-weight: 800;
        font-style: normal;
        }
  
      .Articulat-CF-Extra-Bold {
        font-family: "articulat-cf", sans-serif;
        font-weight: 900;
        font-style: normal;
      }
      .Articulat-CF-Heavy {
        font-family: "articulat-heavy-cf", sans-serif;
      font-weight: 900;
      font-style: normal;
      }
      
      .Articulat-CF-Medium {
        font-family: "articulat-cf", sans-serif;
        font-weight: 600;
        font-style: normal;
      }
      .Articulat-CF-Regular {
        font-family: "articulat-cf", sans-serif;
        font-weight: 500;
        font-style: normal;
      }
      .Articulat-CF-Regular {
      font-family: "articulat-cf", sans-serif;
      font-weight: 300;
      font-style: normal;
      }
      
      .Dico-Code-One-Regular {
        font-family: "dico-code-one", mono;
        font-weight: 400;
        font-style: normal;
      }
      
      .Dico-Code-One-Bold {
        font-family: "dico-code-one", mono;
        font-weight: 700;
        font-style: normal;
      }
      
      .Dico-Code-One-Bold-Italic {
        font-family: "dico-code-one", mono;
        font-weight: 700;
        font-style: italic;
      }


.footer {
  width: 100%;
  /*background-color: #f0f0f0; /* Light gray background */
  background-color: #ececec;
  text-align: center;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.footer-text {
    font-family: "articulat-cf", sans-serif;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
   font-size: clamp(10px, 2vw, 13px);
  margin: 0;
    color: #1A191A; /* Dark gray text */
}

.footer-text2 {
  position: absolute;
    font-family: "articulat-cf", sans-serif;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
   font-size: clamp(10px, 2vw, 13px);
  left: 20px;
  margin: 0;
  color: #1A191A;
}

.footer-right {
  position: absolute;
  right: 20px;
  display: flex;
  gap: 20px;
  align-items: center;
}

.footer-text3, .footer-text4 {
    font-family: "articulat-cf", sans-serif;
  font-weight: 600;
  font-style: normal;
  text-transform: uppercase;
   font-size: clamp(10px, 2vw, 13px);
  margin: 0;
  color: #1A191A;
}

.footer a {
  text-decoration: none;
  color: inherit;
}