html{
  height: 100vh;
  overflow: hidden;
}
body {
  margin: 0;
  background-color: #000000;


}

a{
  text-decoration: none;
}

h1 {
  color: white;
  font-family: "Kanit", sans-serif;
  /* font-family: "Gwendolyn", cursive; */
  /* font-family: "Sassy Frass", cursive; */
  font-size: 5rem;
  text-align: center;
  margin: 0;
  /* padding: 100px 0 0; */

}
h2 {
  color: white;
  font-family: "Kanit", sans-serif;
  /* font-family: "Gwendolyn", cursive; */
  /* font-family: "Sassy Frass", cursive; */
  font-size: 2.5rem;
  margin: 0 0 20px;
}
h3 {
  color: white;
  font-family: "Kanit", sans-serif;
  font-size: 1.25rem;
}
p {
  color: white;
  font-family: "Kanit", sans-serif;
  font-size: 1.3rem;
  /* align-self: center; */
  margin: 0;
}



.section{
  height: 100vh;
  margin: 0;
  
}
.pageTitle{
  width: 100%;
  padding: 10px 0 50px;
}
.sectionLinks{
  text-align: center;
  padding: 50px 0 0;
}

.sectionLinks a{
  color: white;
  font-family: "Kanit", sans-serif;
  /* font-family: "Gwendolyn", cursive; */
  /* font-family: "Sassy Frass", cursive; */
  font-size: 1.2rem;
  width: 100%;
  padding: 0 12px;
}

.container{
  /* position:relative; */
  /* height: 100%; */
  display: flex;
  align-items: center;
  width: 100%;
  /* padding: 0 10%; */
  margin: auto;
  z-index: 1;
  margin-top: 2.5%;

}
#home{
  /* background-color: black; */
  /* background-image: url('images/hero2.jpeg'); */
  

}

#home .container{
/* background-color: black; */
flex-direction: column;
/* padding: 4% 0 0; */
height: 100%;
width: 100%;
padding: 0;
max-width: 100%;

}

.illustration{
  /* margin: 20px 0; */
  position: relative;
  height: 100%;
  width: 100%;
  /* background-color: aqua; */
  display: flex;
  justify-content: center;
}

.illustration img{
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#home h1 {
  margin: 0;
  color: white;
  /* font-family: "Kanit", sans-serif; */
  /* font-family: "Gwendolyn", cursive; */
  font-family: "Sassy Frass", cursive;
  font-size: 8rem;
  /* margin-left: -8%; */
  padding: 150px 100px 0 0;
  /* margin-top: 100px; */
  /* margin-left: -70px; */
  font-weight: bolder;
}
#home h2 {
  margin: 0;
  color: white;
  /* font-family: "Kanit", sans-serif; */
  /* font-family: "Gwendolyn", cursive; */
  font-family: "Sassy Frass", cursive;
  font-size: 7rem;
  font-weight: bolder;
  margin: -50px 0 0;
  /* margin-left: 8%; */
  padding: 0 0 0 100px;
  /* margin-left: 80px; */
}
#home h3 {
  margin: 0;
  color: white;
  font-family: "Kanit", sans-serif;
  font-size: 1.25rem;
  margin: 0;
}

/* About */
/* #about {
  background: #3f0071;
} */
#about{
  /* background-color: #150050;
  background-color: #000000; */
}

#about .container {
  width: 90%;

  padding: 0 5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* background: rgb(75, 29, 29); */
 
}
#about .left {
  /* background: red; */
  max-width: 650px;
  text-align: center;
  /* background: blue; */
  /* flex: 1;
  display: flex;
  justify-content: center;
  align-items: center; */
}

#about .right {
/* max-width: 700px; */
  /* background: green; */
  padding: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

}

.icon {
  width: 100px;
  /* height: 90px; */
  /* background: blue; */
  text-align: center;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#about svg{
  width: 70px;
}


#projects{
  /* background-color: black; */
}

#projects2{
  background-color: green;
  display: none;
}

#projects3{
  background-color: darkblue;
  display: none;
}

.projects .container{
  width: 90%;
  padding: 0 5%;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
gap: 30px;
}

.projects .left{
display: flex;
flex: 2;
min-width: 400px;
}

.projects .right{
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 300px;
  }

.projectImage{
  /* width: 800px; */
  /* height: 550px; */
  position: relative;
  flex: 1;
}

.projects img{
  /* position: absolute; */
  width: 100%;
  height:auto ;
  object-fit: cover;
  border-radius: 20px;
}

.projects p{
  margin: 0 0 20px;
}

button{
  border: medium none;
  background-color: rgb(249, 62, 62);
  width:fit-content;
  margin: 10px 0;
  padding: 15px 25px;
  font-size: 1.2rem;
  color: white;
  font-family: "Kanit", sans-serif;
  border-radius: 10px;
  cursor: pointer;
}

button:hover{
  background-color: rgb(221, 41, 41);
}


#contact{
    /* background-color: #000000; */
    display: flex;
    flex-direction: column;
  

}

#contact .container{
  width: 90%;
  padding: 0 5%;
  justify-content: center;
  align-items: flex-start;
  flex-direction: row;
  /* background-color: #f00; */
  flex-wrap: wrap;
  gap: 30px;
}

#contact .left {
  flex:1;
  min-width: 350px;
  max-width: 650px;
  /* background-color: aqua; */
}
#contact .right {
  /* background-color: blue; */
  flex:1;
  min-width: 350px;


}

form{
  width: 100%;
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; */
}



.inputs{
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 250px;
  font-family: "Kanit", sans-serif;
  font-size: 1.2 rem;
  width: 100%;
  
}

.inputTop{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.inputBottom{
  margin-top: 10px;
}

label{
  color: white;
  margin-left: 5px;
}

input{
  padding: 15px;
  margin-top: 5px;
  border-radius: 10px;
  border: 0;
}

textarea{
  min-height: 12rem;
  resize: none;
  padding: 15px;
  margin-top: 5px;
  margin-bottom: 20px;
  border-radius: 10px;
  border: 0;
}

.center{
  display: flex;
  justify-content: center;
}



/* Scrolling Effects */
html {
  scroll-behavior: smooth;
}
.scrollContainer {
  height: 100vh;
  overflow: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}
.scrollArea {
  height: 100vh;
  scroll-snap-align: start;
  overflow: hidden;
  
}



/* .projectScroll{
  height: 200vh;
} */

/* Scrolling Effects */


/* Carousel */
.carousel{
  /* height: 90%; */
}

.carousel-inner{
  width: 100%;
}

.carousel-indicators{
  margin-bottom: -75px;
  
}


/* Carousel */

/* Text Gradient */

.textGradient {
	animation: move 4s linear infinite;
	background-image: linear-gradient(to right, #77f, #33d0ff, #25ffbb, #33d0ff, #77f);
	background-size: 200% auto;
	/* font: 700 70px/1 Helvetica; */
	letter-spacing: 1px;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
@keyframes move { to { background-position: 200% center; } }




/* .hero{
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}  */

/* .herobg{
  position: fixed;
  background-attachment: scroll;
  z-index: -1;
  width: 100%;
  height: 100%;
  bottom: 0;
  object-fit: cover;

} */






.card {
   width: 100%;
   height: 100%;
   position: relative;
   /* background-color: #111111; */
   border-radius: 20px;
   padding: -5px;
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   margin: 8px;
   border: 0;
}

.card::before {
   content: '';
   position: absolute;
   top: -8px;
   left: -8px;
   width: calc(100% + 16px);
   height: calc(100% + 16px);
   background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
   background-size: 400%;
   z-index: -1;
   animation: anim 8s linear infinite;
   border-radius: 24px;
}

.card::after {
   content: '';
   position: absolute;
   top: -3px;
   left: -3px;
   /* width: calc(100% + 6px);
   height: calc(100% + 6px); */
   background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
   background-size: 400%;
   z-index: -2;
   animation: anim 15s linear infinite;
   border-radius: 20px;
   filter: blur(1rem);
}

@keyframes anim {
   from {background-position: 0}
   to {background-position: 400%}
}




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

.parallax {
  background-image: url('images/hero.webp'); /* Replace with your image path */
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  /* height: 100vh; */
}

.parallax-content {
}


.info{
  /* display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-content: flex-end; */
  /* width:100%; */
  /* height: 100%; */
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 20px 0;
  
  }

  #contact .textBg{
    background-color: rgba(0, 0, 0, .5);
    padding: 10px 20px;
    
    border-radius: 15px;
  }

  .intro{
    font-family: 'Audiowide', sans-serif;
    /* font-family: 'Orbitron', sans-serif;   */
    font-size: 8rem;
    margin: 150px 0 0;
  }

  #home h1 {
    font-family: 'Audiowide', sans-serif;
    /* font-family: 'Orbitron', sans-serif;   */
    font-size: 8rem;
    padding: 150px 0 0;
  }

  #home h1:hover{
    cursor:default;
    content: "noureldin";
  }

#home h3 {
  font-size: 2rem;
}


.blink {
  animation: blink 1s infinite;
}
@keyframes blink{
  to { opacity: .0; }
}
.flex {
	display: flex;
}
.header-sub-title {
  color: #fff;
  font-family: "Courier";
  font-size: 20px;
  padding: 0.05em;
}


span {
  display: inline;
  color: #fff;
}
span:after {
  width: 0px;
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
  transition: .2s linear;
}
span:nth-child(1):after {
  content: 'ou';
}
span:nth-child(2):after {
  content: 'e';
}
span:nth-child(4):after {
  content: 'i';
}
.intro:hover span:nth-child(1):after {
  width: 180px;
}
.intro:hover span:nth-child(2):after {
  width: 85px;
}
.intro:hover span:nth-child(3):after {
  width: 0;
}
.intro:hover span:nth-child(4):after {
  width: 30px;
}





@media(max-width:768px){

h1 {
  font-size: 3.5rem;
}
h2 {
  font-size: 1.5rem;
}
h3 {
  font-size: 1rem;
}
p {
  font-size: 1rem;
}
#about .right {
    padding: 20px;
  }


  .intro{
    font-family: 'Audiowide', sans-serif;
    /* font-family: 'Orbitron', sans-serif;   */
    font-size: 5rem;
    margin: 150px 0 0;
  }

  .intro:hover span:nth-child(1):after {
    width: 115px;
  }
  .intro:hover span:nth-child(2):after {
    width: 55px;
  }
  .intro:hover span:nth-child(3):after {
    width: 0;
  }
  .intro:hover span:nth-child(4):after {
    width: 20px;
  }
  
#home h1 {
    font-size: 6rem;
  }
  #home h2 {
    font-size: 5rem;
  }
  #home h3 {
    font-size: 1.5rem;
  }  

.icon {
  width: 80px;
  padding: 15px;
}

#about svg{
  width: 50px;
}

.projects .left{
  min-width: 250px;
  }
  
  .projects .right{
    min-width: 250px;
    }

/* edit button location */

    .carousel {
      position: relative;
   }           
   .carousel-control-prev , .carousel-control-next {
      position: absolute;
      top: 112%;
      /* transform: TranslateY(-50%); */
   }
   .carousel-control-prev {
      right: auto;
      left: 40px;
   }
   .carousel-control-next {
      left: auto;
      right: 40px;
   }

.carousel-control-next-icon, .carousel-control-prev-icon{

}

/* edit button location */

button{
  font-size: 1rem;
  padding: 10px 18px;
  /* align-self: center; */
}

.textBg{
  background-color: rgba(0, 0, 0, .5);
  padding: 10px;
  
  border-radius: 20px;
}

}


@media(max-width:480px){


  .pageTitle {
    padding: 10px 0 20px;
}


  h1 {
    font-size: 2.5rem;
  }
  h2 {
    font-size: 1.2rem;
  }
  h3 {
    font-size: 1rem;
  }
  p {
    font-size: 1rem;
  }
  #about .right {
      padding: 20px;
    }
  
  
    .intro{
      font-family: 'Audiowide', sans-serif;
      /* font-family: 'Orbitron', sans-serif;   */
      font-size: 3.7rem;
      margin: 150px 0 0;
    }
  
    .intro:hover span:nth-child(1):after {
      width: 85px;
    }
    .intro:hover span:nth-child(2):after {
      width: 40px;
    }
    .intro:hover span:nth-child(3):after {
      width: 0;
    }
    .intro:hover span:nth-child(4):after {
      width: 10px;
    }
    
  #home h1 {
      font-size: 6rem;
    }
    #home h2 {
      font-size: 3rem;
    }
    #home h3 {
      font-size: 1.2rem;
    }  
  
  .icon {
    width: 80px;
    padding: 15px;
  }
  
  #about svg{
    width: 50px;
  }
  
  .projects .left{
    min-width: 250px;
    }
    
    .projects .right{
      min-width: 250px;
      }

      .projects .container {
        gap: 10px;
    }
    .projects p {
      margin: 0 0 10px;
  }
  
 /* edit button location */

 .carousel {
  position: relative;
}           
.carousel-control-prev , .carousel-control-next {
  position: absolute;
  /* top: 112%; */
  /* transform: TranslateY(-50%); */
}
.carousel-control-prev {
  right: auto;
  left: 40px;
}
.carousel-control-next {
  left: auto;
  right: 40px;
}

.carousel-control-next-icon, .carousel-control-prev-icon{

}

/* edit button location */

.carousel-indicators {
  margin-bottom: -65px;
}



.card::before {

  top: -5px;
  left: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
}

  button{
    font-size: 1rem;
    padding: 10px 18px;
    /* align-self: center; */
  }
  
  .textBg{
    background-color: rgba(0, 0, 0, .5);
    padding: 10px;
    
    border-radius: 20px;
  }


  .inputs{

    font-size: 1 rem;
  
    
  }
  

  
  input{
    padding: 8px;

  }
  
  textarea{
    min-height: 8rem;

    padding: 8px;

  }


}