@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap);


/* Defaults */
/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
html {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}


body {
  font-family: Montserrat, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  font-weight: 100;
  background: #000;
  color: #465665;
  width: 100%;
  cursor: auto;
}

a {
  color: #5b7083;
  transition: all .25s ease-in-out;
}

/* #customCursor {
  width: 20px; 
  height: 20px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.729);
  position: absolute;
  pointer-events: none; 
  z-index: 1000; 
  display: none;
  cursor: none;
} */



/* The title */
.title {
  font-weight: 700;
}

/* The description */
.desc {
  font-size: 1em;
  font-style: italic;
  font-family: Georgia, serif;
}

/* Text-centering */
.title,
.desc,
.intro {
  text-align: center;
}

/* Intro section */
.intro {
  margin: 1.75em 0 .75em;
  border-bottom: 3px double rgba(0, 0, 0, 0.05);
  margin-bottom: 1.75em;
}

.intro a {
  opacity: .7;
}

.intro a:hover {
  opacity: 1;
}

.intro h3 {
  font-size: .825em;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  margin: .25em .75em .75em;
}

.intro h3 a {
  font-weight: 400;
}


/* menu top */

.top-bar {
  position: sticky;
  height: 60px;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  background-color: #000000; 
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 1.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 10;
  cursor: auto;
}
.top-bar-hide {
  position: sticky;
  top: -50px; /* Adjust based on the height of your top bar */
  transition: top 0.3s ease-in-out;
}
.top-bar-shrink {
  position: fixed;
  padding: 20px;
  top: 0;
  width: 36%;
  left: 30%; 
  right: 30%;
  z-index: 10; 
  border-radius: 0 0 6px 6px;
  transition: all 1.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 0 18px rgba(131, 170, 224, 0.357);
  animation-duration: 0.5s;
}

/* Prevent shrinking on mobile sizes */
@media screen and (max-width: 768px) {
  .top-bar-shrink {
    padding: 2.5%; /* Reset padding */
    width: 100%; /* Full width */
    left: 0; /* Align to left */
    right: 0; /* Align to right */
  }
}

.top-bar-content {
  width: 100%; /* Adjust as needed */
  display: flex;
  font-weight: 100;
  justify-content: space-between;
  align-items: center;
  color: #81c0f7b2;
  cursor: auto;
}

.top-bar-text-wrap{
  background-color: #000;
  width: max-content;
  height: inherit;
}

.top-bar-text {
  text-transform: uppercase;
  font-size: 14px; /* Adjust as needed */
  font-weight: 100;
  letter-spacing: .07em;
  cursor: auto;
  user-select: none;
  z-index: 2;
}
@media screen and (max-width: 768px){
.top-bar-text {
  font-size: 8px; /* Adjust as needed */
}
}

.top-bar-icons {
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.fa-circle {
  font-size: 4px;
  color: #81c0f7a3;
  margin: 5px;
}
.top-bar-icon {
  text-decoration: none;
  color: #81c0f774; /* Icon color */
  margin-left: 20px; /* Space between icons */
  font-size: 14px; /* Adjust as needed */
}

.top-bar-icon:hover {
  color: #81c0f7a3; /* LinkedIn color on hover, adjust as needed */
}


.circle {
  width: 8px;
  z-index: 0;
  height: 8px;
  border-radius: 50%;
  background-color: #81c0f7a3;
  position: absolute;
  left: 2.5%;
  top: 50%;
  transform: translateY(-50%);
  opacity: 1;
  animation: shootCircle linear forwards;
}

@keyframes shootCircle {
  0% { left: 0; opacity: 0; }
  20% { left: 20%; opacity: 1; }
  70% { left: 70%; opacity: 1; }
  90% { left: 90%; opacity: 1; }
  100% { left: 100%; opacity: 0; }
}


@keyframes popIcon {
  0%, 50% { transform: scale(1.2); opacity: 1; }
  50%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0); opacity: 0; }
}

/* Media query for mobile devices */
@media screen and (max-width: 768px) {
  .circle {
      animation-duration: 0.5s; /* Faster animation for mobile devices */
  }
}



/* Masonry grid */
.masonry {
  transition: all .5s ease-in-out;
  /* column-gap: 12px; */
  column-count: 3;
  perspective: 800px;
  cursor: auto;
  margin-right: auto;
  margin-left: auto;
}


/* Masonry item */
.masonry .brick {
  /* padding: 12px; */
  margin-bottom: 12px;
  display: inline-block;
  vertical-align: top;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  break-inside: avoid;
  width: calc(33.333% - 12px); /* Calculate width, accounting for gutters */

  /* width: calc(23.25% - 9px) / 4; */
  font-family: Montserrat, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  opacity: 0;
  /* transition: opacity 2s ease-in; */
  transition: transform 0.3s ease-in-out;
  will-change: transform;
  
}

.brick-fade-in {
  opacity: 1; /* fully visible */
}


/* Masonry image effects */
.masonry .brick img {
  transition: transform .3s ease-in-out; /* Apply the delay to the opacity transition */
  /* transition-delay: 2s; */
  backface-visibility: hidden; /* Remove Image flickering on hover */
  max-width: 100%; /* Ensures image does not exceed the width of the brick */
  width: 100%; /* Image will scale according to the width of the brick */
  height: auto; /* Maintain the aspect ratio of the image */
  opacity: 1;
  display: block;
}

.masonry .brick-fade-in img {
  opacity: 1; /* Fade in images along with the brick */
}

.masonry .brick:hover img {
  transform: scale(1.04);
  /* opacity: 1; */
}

.masonry .brick .brick-info {
  display: none; 
  /* font-weight: 100;
  font-size: large;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
  color: rgba(255, 255, 255, 0.883);
  font-size: small;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0; 
  transition: opacity 0.5s ease-in-out; 
  cursor: pointer;
  font-family: Montserrat, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  gap: 3px; */
}

.masonry .brick:hover .brick-info {
  opacity: 1; /* Fully visible on hover */
}

.masonry .brick .brick-info h2,
.masonry .brick .brick-info .fa-plus {
    transition: opacity 0.5s ease-in-out 0.3s; /* Delay fade-in of title and icon */
    opacity: 0; /* Initially fully transparent */
}

.masonry .brick:hover .brick-info h2,
.masonry .brick:hover .brick-info .fa-plus {
    opacity: 1; /* Fully visible on hover */
}

.masonry .brick .brick-info h2 {
  margin: .5em .5em;
  text-align: center;
  font-weight: 100;
}

.fa-plus {
  display: block; /* Ensure the icon is displayed as a block element */
  margin-top: 10px; /* Space above the icon */
  font-size: 24px;
  color: #fff; /* Icon size */
}


/* Bordered masonry */
.masonry.bordered {
  column-rule: 1px solid #eee;
  column-gap: 50px;
}

.masonry.bordered .brick {
  padding-bottom: 25px;
  margin-bottom: 25px;
  border-bottom: 1px solid #eee;
}

/* Gutterless masonry */
.masonry.gutterless {
  column-gap: 0;
}

.masonry.gutterless .brick {
  margin-bottom: 0;
}

/* Masonry on tablets */
/* @media only screen and (min-width: 768px) and (max-width: 1023px) {
  .masonry {
    column-count: 4;
  }
  .masonry .brick {
    width: calc((100% - 2*12px) / 3); 
  }
} */


/* Adjust to 3 columns when the viewport width is less than 1024px */
@media only screen and (max-width: 621px) {
  .masonry {
    column-count: 3;
  }
  .masonry .brick {
    width: calc((100% / 3) - 24px); /* 3 columns */
  }
  /* .masonry .brick {
    width: calc((100% - 2*12px) / 3); 
  } */
}

/* Masonry on big screens */
/* @media only screen and (min-width: 1024px) {
  .desc {
    font-size: 1.25em;
  }

  .intro {
    letter-spacing: 1px;
  }

  .masonry {
    column-count: 4;
  }
  .masonry .brick {
    width: calc((100% - 3*12px) / 4);
  }
} */
/* Masonry on big screens */
@media only screen and (min-width: 1024px) {
  .masonry {
    column-count: 3;
  }
  .masonry .brick {
    width: calc((100% / 3) - 24px); /* 3 columns */
  }
  .desc {
    font-size: 1.25em;
  }

  .intro {
    letter-spacing: 1px;
  }
}