@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap");

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html, body {
  height: 100%;
  overflow: hidden; /* Prevent default overflow if necessary */
}
img {

  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block !important;
  visibility: visible !important;
}
.wrapper {
  width: 100%;
  height: 100vh;
  overflow: hidden; /* Prevent horizontal and vertical scroll */
  position: relative;
}
@media  (max-width: 900px){
  .wrapper{
    overflow: hidden;

  }
  
}
body.loading-active {
  overflow: hidden; /* Prevent scrolling */
  height: 100vh; /* Ensure body height is 100% of the viewport */
}

.transition {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  pointer-events: none;
  background: #ffffff;
  -webkit-transform: scaleY(0);
  transform: scaleY(0);
}

body {
  background: linear-gradient(135deg, #fff 55%, #000 75%);
  min-height: 100vh;
  width: 100%;
  justify-content: center;
  align-items: center;
  overflow-x: hidden;
  overflow-y: hidden;
}

/* Header Styles */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  box-shadow:  0 2px 5px rgba(0, 0, 0, 0.332);

}

.site-logo {
  font-size: 18px;
  color: #000000;
  text-decoration: none !important;
}
.site-logo a {
  text-decoration: none;
}
.hamburger {
  height: 3rem;
  width: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  cursor: pointer;
  transition: all 250ms ease-in-out;
}

.hamburger .bar {
  width: 100%;
  height: 2px;
  background: #121212;
  transition: transform, background 250ms ease-in-out;
}

.hamburger.cross {
  justify-content: center;
  transform: rotate(360deg);
}

.hamburger.cross #bar-1 {
  transform: rotate(45deg);
  background: #f7f7f7;
}

.hamburger.cross #bar-2 {
  transform: rotate(-45deg);
  background: #f7f7f7;
}
/* first page content */
.header {
  position: relative;
  text-transform: uppercase;
  display: flex;
  width: 110%;
  height: 100vh;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 2rem;
}

/* Style for the left section */
.header .left {
  max-width: 45%;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* Align items to the start (left) */
  padding-right: 1rem; /* Add some padding to prevent content from touching the edge */
}

/* Style the text and button */
.header .left h2 {
  font-size: 75px;
  color:#fff;
  mix-blend-mode: difference; /* Font size for the heading */
  margin-bottom: 1rem; /* Space below the heading */
}

.header .left h3 {
  mix-blend-mode: difference;
  color: #fff;
  font-size: 1rem; /* Font size for the paragraph */
  margin-bottom: 2rem; /* Space below the paragraph */
  
}

.header .left button {
  padding: 0.75rem 1.5rem; /* Button padding */
  font-size: 1rem; /* Button font size */
  border: 5px solid #000; /* Remove default border */
  background-color: #000000; /* Button background color */
  color: white; /* Button text color */
  border-radius: 20px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor on hover */
}

.header .left button:hover {
  background: #fffcfc; 
  color:#000;/* Darker background on hover */
}

.header .right {
  max-width: 111%; /* Adjust width of right section */
  margin-right: 11rem; /* Adjust right margin to move left */
  overflow:hidden;
  margin-left: auto;
  margin-top:100px;
  display: flex;
  align-items: center;
  justify-content: center;
  height:auto; 
}

.header .right img {
  width: 170%; /* Adjust as needed */
  height: auto; /* Adjust as needed */
  object-fit: cover; /* Adjust as needed */
  transform: translateX(5%); /* Adjust the position if needed to fit the design */
  transform: translateY(19px);
 
  display:block;
}
.header .left {
  margin-right: auto; /* Pushes left section towards the left */
}

.header .right {
  margin-left: auto; /* Pushes right section towards the right */
}
/* right image smaller screen */
@media (max-width: 768px) {
  .header .right {
    max-width: 300%;
    height: 800px; /* Adjust width of right section */
    margin-right: 0; /* Remove margin to adjust positioning */
    margin-left: 0;
    margin-top: 50px; 
    padding-left: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;/* Adjust margin top for smaller screens */
  }

  .header .right img {
    position: absolute;
    top: 70%;
    left: 30%;
    width: 100%; /* Make the image larger on smaller screens */
    height: auto; /* Keep the aspect ratio */
     /* Adjust as needed */
    transform: scale(1.5); /* Adjust as needed */
  }
  
}
/* circles */
.left .circle1{
  width: 220px;
  height:220px;
  background: #000;
  position: absolute;
  border-radius: 50%;
  top: 90px;
  left:10px;
  z-index:-1;
  animation: animate1 3s linear infinite alternate;
  animation-timing-function:cubic-bezier(1,0.4,0.4,1) ;

}
@keyframes animate1{
  from {
    left: 0;
  }
  to {
    left: 70vw; /* Relative to viewport width */
  }

}

.left .circle2{
  width: 100px;
  height:100px;
  background: #000;
  position: absolute;
  border-radius: 50%;
  top: 430px;
  left:80px;
  z-index:-1;
  animation: animate2 1.5s linear infinite alternate;

}
@keyframes animate2{
  100%{
    transform: translateX(9px) translateY(7px); /* Adjust as needed */
    
   

  }

}
.right .circle1{
  width: 300px;
  height:300px;
  background: #ffffff;
  position: absolute;
  border-radius: 50%;
  top: 380px;
  right:240px;
  z-index:-1;
  animation: animate3 1.5s linear infinite alternate;

}

@keyframes animate3 {
  100% {
    transform: translateX(14px) translateY(7px); /* Adjust as needed */
  }
}

@keyframes animate4 {
  100% {
    transform: translateX(-120px) translateY(-90px); /* Adjust as needed */
  }
}

.right .circle2{
  width: 120px;
  height:120px;
  background: #ffffff;
  position: absolute;
  border-radius: 50%;
  top: 190px;
  right:160px;
  z-index:-1;
  animation: animate4 1.5s linear infinite alternate;

}

/* For screens smaller than 768px */
@media (max-width: 768px) {
  .left .circle1 {
    width: 150px;
    height: 150px;
    top: 260px;
    left: 5px;
    animation: animate1 3s linear infinite alternate;
  }

  .left .circle2 {
    width: 70px;
    height: 70px;
    top: 460px;
    left: 40px;
    animation: animate2 1.5s linear infinite alternate;
  }

  .right .circle1 {
    width: 200px;
    height: 200px;
    top: 470px;
    right: 120px;
    animation: animate3 1.5s linear infinite alternate;
  }

  .right .circle2 {
    width: 80px;
    height: 80px;
    top: 100px;
    right: 80px;
    animation: animate4 1.5s linear infinite alternate;
  }
}

/* Navigation Styles */
#nav-container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
  background: #000;
  color: #fff;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden; /* Ensure hidden initially */
  opacity: 0; /* Ensure opacity is 0 initially */
}

.nav {
  width: 50%;
  display: flex;
  justify-content: space-between;
}

.flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.nav-logo {
  font-weight: 300;
  margin-top: -0.2em;
  text-transform: uppercase;
  font-size: 120px;
}

.nav-socials {
  display: flex;
  flex-direction: column;
}

.nav-socials a {
  font-weight: 400;
  text-decoration: none;
  color: #fff;
  font-size: 12px;
}

.nav-link {
  position: relative;
}

.nav-link a {
  position: relative;
  top: 60px;
  text-decoration: none;
  color: #fff;
  font-size: 60px;
  font-weight: lighter;
}

.nav-item-wrapper:after {
  content: "";
  position: absolute;
  top: 60px;
  left: 0;
  width: 500px;
  height: 60px;
  background: #000;
  margin: 0 auto;
  transition: 1s;
}

.nav-footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding: 2em 1em;
  display: flex;
  justify-content: space-between;
}

.nav-footer a {
  text-decoration: none;
  color: #fff;
  font-size: 12px;
  padding: 0 1em;
}

@media (max-width: 900px) {
  .nav {
    flex-direction: column-reverse;
    margin-top: 8em;
  }

  .nav-logo {
    margin-top: 1em; /* Adjust this value to move the logo down without affecting other elements too much */
    position: relative; /* Ensure this allows positioning adjustments */
    top: 1em; 
  }

  .nav-socials {
    flex-direction: row;
    margin-top: 10em;
  }

  .nav-socials a {
    padding: 0 0.4em;
  }

  .nav-footer {
    display: none;
  }

  .header {
    font-size: 50px;
  }

  .nav-link a {
    font-size: 30px;
    top: 30px;
  }
  .right img{
    width: 170%; /* Adjust as needed */
    height: auto; /* Adjust as needed */
    object-fit: cover; /* Adjust as needed */
    transform: translateX(500px); /* Adjust the position if needed to fit the design */
    transform: translateY(190px);
   
   
    display:block;
    
  }
}

/* Container Styles */
.container {
  width: 100%;
  height: 100%;
}

.container.show {
  pointer-events: all;
}

.container .stripe-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
}

.container .stripe {
  height: 0%;
  width: 25%;
  background: #121212;
  transition: height 250ms ease-in-out;
  transition-delay: var(--i);
}

.container.show .stripe {
  height: 100%;
}

.container .navbar {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .navbar .nav-list {
  display: flex;
  list-style: none;
}

.container .navbar .nav-item {
  font-size: 2em;
  margin: 0 2em;
  font-family: "Poppins", sans-serif;
  transform: translateX(-50%);
  opacity: 0;
  transition: 250ms ease-in-out;
  transition-delay: 0;
}

.container.show .navbar .nav-item {
  opacity: 1;
  transform: translate(0);
  transition-delay: var(--i);
}

.container .navbar .nav-link {
  position: relative;
  text-decoration: none;
  color: #f7f7f7;
  padding-bottom: 10px;
}

.container .navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0%;
  background: #f7f7f7;
}

/* New Section Styles */
/* Ensure the container for the full-screen navbar occupies the full viewport height */

#hover-effect-section {
   /* Adjust as needed to push the new section further down */
  padding: 20px; /* Add padding for spacing */
  background-color: #f9f9f9; /* Optional: Add background color */
}

.new-container {
  width: 100%;
  max-width: 1200px; /* Set a max-width to keep content aligned */
  margin: 0 auto;
  padding: 20px;
  height: 100%;
}


.menu {
  width: 100%;
  margin-top: 17.5em 0;
}

.menu-item {
  width: 100%;
  padding: 0 2em;
  display: flex;
  cursor: pointer;
  position: relative; /* Ensure positioning is relative */
}

p {
  position: absolute;
  top: 0%;
  width: 100%;
  font-family: "PP Neue Montreal";
  font-weight: 500;
  text-transform: uppercase;
  line-height: 100%;
  letter-spacing: -0.025em;
  transition: color 0.25s;
}

.info,
.tag,
.name {
  position: relative;
  overflow: hidden;
}

.info,
.tag {
  flex: 1;
  height: 14px;
  font-size: 14px;
}

.tag {
  text-align: right;
}

.name {
  flex: 4;
  height: 55px;
  font-size: 60px;
  text-align: center;
}

.info p:nth-child(2),
.name p:nth-child(2),
.tag p:nth-child(2) {
  top: 100%;
  color: #000;
}

.menu:hover .info p:nth-child(1),
.menu:hover .name p:nth-child(1),
.menu:hover .tag p:nth-child(1) {
  color: rgb(165, 165, 165);
}


.preview {
  position: relative;
  width: 225px;
  height: 275px;
  z-index: 2;
  pointer-events: none;


}



.preview-img-2 {
  top: 20px;
  left: 20px;
}
a{
  text-decoration: none;
}


.preview-img img {
  position: absolute;
  top: 0;
  left: 0;
}


.preview-img {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* loading */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Prevent scrolling */
  z-index: 9999; 
  padding:20px;
  box-sizing: border-box;/* Ensure it's on top of everything */
}


.counter {
  position: absolute;
  left: 50px;
  bottom: 150px;
  display: flex;

  height: 10px;
  font-size: 10vw;
  line-height: 0.99;
  clip-path: polygon(0 0, 100% 0, 100% 130px, 0 130px);
  font-weight: 400;
  white-space: nowrap;
  overflow: visible;
}

.counter-1,
.counter-2,
.counter-3 {
  position: relative;
  top: 0;
}

.num1offset1 {
  position: relative;
  right: -5%;
}

.num1offset2 {
  position: relative;
  right: -2%;
}

.loader {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 50px;
  transform: translate(-50%, -50%);
  display: flex;
  background: rgb(80, 80, 80);
}

.loader-1 {
  position: relative;
  background: #fff;
  width: 200px;
}

.loader-2 {
  position: relative;
  width: 100px;
  background: #fff;
}

.bar {
  height: 50px;
}

#middle-stuff{
  background-color: #000;
}
/* Media Queries */
@media (min-width: 1200px) {
  .counter {
    font-size: 8vw; /* Adjust font size for large screens */
    bottom: 25%; /* Adjust bottom position for large screens */
  }

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

  .loader {
    width: 200px; /* Adjust width for smaller screens */
    height: 40px; /* Adjust height for smaller screens */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Ensure centering */
  }

  .loader-1 {
    width: 130px; /* Adjust width for smaller screens */
  }

  .loader-2 {
    width: 70px;
     /* Adjust width for smaller screens */
  }

  .bar {
    height: 40px; /* Adjust height for smaller screens */
  }
}
@media (max-width: 768px) {
  .counter {
    height: 100px;
    font-size: 15vw; /* Larger font size for mobile */
    bottom: -5%; /* Adjust bottom position */
  }

 
  
}

/* block transitions */
.scroll-image{
  width: 100vw;
  min-height: 100vh;
  position: absolute;
}

main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  min-height: 100vh;
  z-index: 0;
}

.content {
  height: 300px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content__img {
  max-width: 150px;
  height: 150px;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  filter: grayscale(1);
}

@media screen and (min-width: 50em) {
  .content {
    height: 100vh;
    overflow: hidden;
  }
}


.container#dark {
  background: var(--colors-primary);
}



.text-container {
  font-size: 65px;
  color:#fff;
  mix-blend-mode: difference; /* Font size for the heading */
  margin-bottom: 1rem; 
  font-weight: bold;
  position: relative;
  display: inline-block;
}


.dynamic-text {
    display: inline-block;
    
    top: 0;
    left: 0;
    white-space: nowrap;
    transition: opacity 0.5s ease, transform 0.5s ease;
    font-size: 65px; /* Match intro-text size */
    font-weight: bold;
}
@media (max-width: 768px) {
  .dynamic-text{
    font-size: 50px;

  }
  .header .left h3{
    font-size: 1rem;
  }
}

.dynamic-text.hidden {
  opacity: 0;
  color: transparent;
}