body{
    background-color: rgb(32, 32, 32) !important;
    width: 100%;
    overflow-x: hidden;
}


.navbar-section{
    
    width: 100%;
    background-color: #fff0;
    color: #fff;
}

.navbar-brand  {
    color: #fff;
}

.nav-link{
    color: #fff;
}



.nav-link:hover{
  color: #fff;
  font-weight: 900;
  text-decoration: none;
}

.navbar-brand{
  color: #fff;
  font-weight: 900;
  text-decoration: none;
}


.section-h1{
    position: absolute;
    top: 50%;
    left: 30px;
    color: rgb(255, 255, 255);
}

h1{
    font-size: 70px !important;
    font-weight: 700 !important;
    font-family: 'Bebas Neue', sans-serif;
    text-transform: uppercase;
    color: #fff;
}

h2{
    font-size: 50px !important;
    font-weight: 700 !important;
    font-family: 'Bebas Neue', sans-serif;
    text-transform: uppercase;
    color: #fff;
}

h3{
    font-size: 30px !important;
    font-weight: 700 !important;
    font-family: 'Bebas Neue', sans-serif;
    text-transform: uppercase;
    color: #ffffff;
}

h4{
    font-size: 25px !important;
    font-weight: 700 !important;
    font-family: 'Bebas Neue', sans-serif;
    text-transform: uppercase;
    color: #FFD700
    ;
}

h5{
    font-size: 20px !important;
    font-weight: 700 !important;
    font-family: 'Josefin Sans', sans-serif;
    text-transform: uppercase;
    color: #FFD700;
}

h6{
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: 'Bebas Neue', sans-serif;
    text-transform: uppercase;
    color: #ffffff;
}

sub{
    color: #ffffff;
    font-weight: 900 !important;
}

p {
    font-family: 'Josefin Sans', sans-serif;
    text-transform: uppercase;
    font-size: 16px;
    color: #fff;
    
}

.cnt-btn{
    border: 2px solid #fff;
    background-color: #fff0;
    color: #fff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 40px;
    margin: 40px 0px 0px 0px;
    padding: 10px 20px;
}


.cnt-btn:hover{
  border: 2px solid #fff;
  background-color: #fff0;
  color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 40px;
  margin: 40px 0px 0px 0px;
  padding: 10px 20px;
  text-decoration: none;
}

/* Section 2 */

.section-2{
    background-color: rgb(32, 32, 32);
    /* padding: 0px 5%; */
    height: 140vh;
}

/* Project Section */

.project-section{
    background-color: rgb(32, 32, 32);
    padding: 5%;
}

.project-name{
    margin: auto 0px;
}

.btn-project {
    border: 2px solid #fff;
    background-color: #fff0;
    color: #fff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 20px;
    margin: 20px 0px 0px 0px;
    padding: 5px 10px;
}

.btn-project:hover {
  border: 2px solid #fff;
  background-color: #fff0;
  color: #fff;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  margin: 20px 0px 0px 0px;
  padding: 5px 10px;
  text-decoration: none;
}

.project{
    margin: 50px 0px;

}
.text-end{
    text-align: end;
}


/* */
.navbar {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
  }

  /* Set the initial background color of the navbar */
  .navbar {
    background-color: #fffff000; /* Change this to your desired background color */
    transition: background-color 1s ease-in-out;
  }

  /* Change the background color when scrolled */
  .navbar.scrolled {
    background-color: #686868b6; /* Change this to your desired background color when scrolled */
    background: rgb(19 17 17 / 72%);
    /* Semi-transparent white background */
    backdrop-filter: blur(10px); /* Blur effect for glassmorphism */
    border: 0px 0px 3px 0px solid rgba(255, 255, 255, 0.18); /* Border color for contrast */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.12); /* Shadow effect */
  }

  /* Adjust the padding and color of the brand text when scrolled */
  .navbar.scrolled .navbar-brand {
    padding-top: 10px; /* Adjust as needed */
    color: #ffffff; /* Change this to your desired text color when scrolled */
  }

  /* Change the color of the links in the navbar when scrolled */
  .navbar.scrolled .navbar-nav .nav-link {
    color: #ffffff !important; /* Change this to your desired text color when scrolled */
  }

  /* Add a box shadow to the navbar when scrolled (optional) */
  .navbar.scrolled {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Change as needed */
  }

  /*  */


  .text-pop-up-top{animation:text-pop-up-top 2s cubic-bezier(.25,.46,.45,.94) both}

  @keyframes text-pop-up-top{0%{transform:translateY(50px);transform-origin:50% 50%;text-shadow:none}100%{transform:translateY(0px);transform-origin:50% 50%;text-shadow:0 1px 0 #000,0 2px 0 #000,0 3px 0 #000,0 4px 0 #000,0 5px 0 #000,0 6px 0 #000,0 7px 0 #000,0 8px 0 #000,0 9px 0 #000,0 50px 30px rgba(0,0,0,.3)}}


/*  */



.overlay {
position: sticky;
height: 100vh;
top: 0;
}

.text {
display: flex;
height: 100%;
width: 100%;

align-items: center;
position: absolute;
top: 0;
left: 130px;
right: 0;
bottom: 0;
}

.text-inner {
transform: translatex(0vw);
font-size: 2.5rem;
}

.track{ 
height: 400vh;
}

.gradient {
width: 100%;
height: 100%;
background: linear-gradient(
255deg,
#facb0e,
#f06ba8 30%,
#78bae6 65%,
#fff
);
z-index: -1;
width: 100%;
height: 100vh;
position: absolute;
top: 0%;
bottom: 0%;
left: 0%;
right: 0%;
}

.shape {
display: flex;
justify-content:center;
align-items: center;
height: 100%;
mix-blend-mode: multiply;
background: black;
}

.shape .img {
width: 20rem;
height: 20rem;
transform: rotate(70deg);
scale: 9;
}

.img svg{
width: 100%;
height: 100%;
}

.img svg .hsc-img-path {
fill: white;
}

.overlay {
overflow: hidden;
}

.box-c{
    position: static;

    top: 100px;
    bottom: 100px;
}


/*  */

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

:root {
  --gutter: 40px;
  --image-width: 60vw;
  --image-height: calc(100vh - 160px);
  --image-max-height: 70vh;
  --section-count: 3;

  @media screen and (max-width: 800px) {
    --gutter: 26px;
  }
}

/* html,
body {
  
  margin: 0;
  padding: 0;
  overflow-x: hidden;
 
} */

.images-wrapper {
  display: flex;
  width: calc(var(--section-count) * 100vw);
  position: sticky;
}

.image-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image {
  width: var(--image-width);
  height: var(--image-height);
  max-height: var(--image-max-height);
  background-color: dodgerblue;
  background-size: cover;
  background-position: center;
 
}

.image-1 .image {
  background-image: url(/assests/upsilon-front.png);
}

.image-2 .image {
  background-image: url(/assests/digital.png);
}

.image-3 .image {
    background-image: url(/assests/upsilon.png);
}

.text-container {
  position: static;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.text-wrapper {
  width: var(--image-width);
  height: var(--image-height);
  max-height: var(--image-max-height);
  overflow: visible;
  font-family: "Notable";
  position: static;
}

.title-container {
  overflow: hidden;
  position: static;
  font-size: 100px;
  color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: white;
  width: 100vw;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  text-align: center;

  .title-item {
    transition: 0.5s ease-in-out;

    &:not(.active) {
      position: sticky;
      width: 100%;
      left: 0;
      top: 0;
      transform: translateY(100%);
    }
  }
}

.number-container {
  position: sticky;
  overflow: hidden;
  top: -55px;
  left: -40px;
  color: #ce0;
  font-size: 72px;

  .number-item {
    transition: 0.5s ease-in-out;

    &:not(.active) {
      position: absolute;
      transform: translateY(100%);
    }
  }
}

.date-container {
  position: sticky;
  bottom: 8px;
  right: 16px;
  text-align: right;
  font-size: 28px;
  color: white;
  overflow: hidden;
  color: transparent;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #ce0;

  .date-item {
    transition: 0.5s ease-in-out;

    &:not(.active) {
      position: sticky;
      right: 0;
      transform: translateY(100%);
    }
  }
}


/*  */


body{
	overflow-x: hidden;
	overflow-y: scroll;
	
}

.top, .footer{
	background: #181818 ;
	height: 600px ;
	width: 100% ;
}

.main{
	padding: 60px ;
	height: 100vh ;
	position: relative;
	width: 100% ;
}



.filled-text{
	position: absolute;
	top: 200px ;
	left: 100px ;
	z-index: 1 ;
	font-size: 100px ;
	font-weight: 600 ;
	font-family: 'Instrument Serif', serif;

}

.outline-text {
	position: absolute;
	top: 200px ;
	left: 100px ;
	z-index: 3 ;
	font-size: 100px !important;
	font-weight: 600 !important;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: ghostwhite !important;
	color: transparent !important;
  font-family: 'Instrument Serif', serif;


	
}

.skill-img {
	position: absolute;
	top: 50px ;
	left: 600px ;
	z-index: 2 ;
	height: 400px ;
	width: 600px ;
}


.float{
	position:fixed;
	/* width:60px;
	height:60px; */
	bottom:40px;
	right:40px;
	background-color:#25d366;
	color:#FFF;
	border: 0.3px solid;
	text-align:center;
  font-size:30px;
	box-shadow: 5px 5px 5px #ffffff;
  z-index:100;
    background-color: #202020;
    color: #fff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 40px;
    margin: 0px 0px 0px 0px;
    padding: 10px 20px;
}


/*  */

.form-control{
  background-color: rgba(255, 255, 255, 0) !important;
  color: #fff !important;
  padding: 1.375rem 0.75rem !important;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px !important;
  /* height: 70px !important;  */

}

.icon-svg{
  padding: 30px;
}