@font-face {
  font-family: "Montserrat";
  src: url("/static/fonts/Montserrat/Montserrat-VariableFont_wght.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Mukta";
  src: url("/static/fonts/Mukta/Mukta-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "essc";
  src: url("/static/fonts/Encode_Sans_Semi_Condensed/EncodeSansSemiCondensed-Regular.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "c-one";
  src: url("/static/fonts/Contrail_One/ContrailOne-Regular.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Bayon";
  src: url("/static/fonts/Bayon/Bayon-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "bsid";
  src: url("/static/fonts/Big_Shoulders_Inline_Display/BigShouldersInlineDisplay-VariableFont_wght.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Aboreto";
  src: url("/static/fonts/Aboreto/Aboreto-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "zcool";
  src: url("/static/fonts/ZCOOL_QingKe_HuangYou/ZCOOLQingKeHuangYou-Regular.ttf")
    format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Federo";
  src: url("/static/fonts/Federo/Federo-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
/*.index {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.photo-gallery {
  width: 500px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}*/
/*
.photo-gallery img {
  width: 500px;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  opacity: 0;
  animation: rotation 9s infinite;
  /*position: absolute;
}
@keyframes rotation {
  0%, 100% { opacity: 0; }
  14.286%, 28.572%, 42.858%, 57.144%, 71.43%, 85.716%, 100% { opacity: 1; }
  40%, 90% { opacity: 0; }
}
.photo-gallery img:nth-child(2) {
  animation-delay: 3s;
}
.photo-gallery img:nth-child(3) {
  animation-delay: 3s;
}
.photo-gallery img:nth-child(4) {
  animation-delay: 3s;
}
.photo-gallery img:nth-child(5) {
  animation-delay: 3s;
}
.photo-gallery img:nth-child(6) {
  animation-delay: 3s;
}
.photo-gallery img:nth-child(7) {
  a*/

body {
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: normal;
  text-align: center;
  justify-content: flex-start;
  height: 100vh;
  overflow: hidden;
  background-image: url("/static/img/css-pattern-by-magicpattern3.png");
  background-position: 50% 50%;
  background-size: cover;
  padding: 20px;
  overflow-y: scroll;
  background-attachment: fixed; 
  background-repeat: no-repeat;



html {
  height: 100%;
}
.image-container {
  position: relative;
  width: 200px;
  height: auto;
  margin: 0 auto;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateY(0deg);
  transition: transform 0.7s;
}

.image-container span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform-origin: center;
  transform: rotateY(calc(var(--i) * 51.43deg)) translateZ(300px);
}

.image-container span img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: 100%;
  height: auto;
  image-rendering: optimizeQuality;
  image-rendering: crisp-edges;
}

.btn-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
  align-items: center;
  margin-top: 460px;
}

.btn {
  position: absolute;
  color: azure;
  cursor: pointer;
  font-family: "Mukta";
  font-size: 30px;
  background: transparent;
  font-weight: bolder;
}

#prev {
  left: 40%;
}

#next {
  right: 40%;
}

.btn:hover {
  color: darkorange;
}

.image-container span:nth-child(1) {
  --i: 0;
}
.image-container span:nth-child(2) {
  --i: 1;
}
.image-container span:nth-child(3) {
  --i: 2;
}
.image-container span:nth-child(4) {
  --i: 3;
}
.image-container span:nth-child(5) {
  --i: 4;
}
.image-container span:nth-child(6) {
  --i: 5;
}
.image-container span:nth-child(7) {
  --i: 6;
}

.home_heading h1 {
  text-align: center;
  color: azure;
  font-size: 50px;
  font-family: "Federo";
  position: sticky;
}

/* Main Project Container */
.project_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 20px;
  margin: 0 auto;
  max-width: 1800px; /* Adjust to your preferred width */
}

/* Project Heading */
.project_heading h1 {
  text-align: center;
  color: azure;
  font-size: 50px;
  font-family: "Federo";
  margin: 20px 0;
}

/* Individual Project Items */
.project_item {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 10px;
  flex-wrap: wrap;
}

/* Project Images */
.project_image {
  height: auto;
  width: 400px;
  max-width: 80%;
  justify-content: center;
  margin: 0 auto;
  align-items: center;
  border-radius: 10px;
}

/* Project Story Text */
.project_story, .project_story_2 {
  color: rgb(255, 255, 255);
  text-shadow: 1px 1px 2px #000;
  word-spacing: 2px;
  letter-spacing: 1px;
  font-family: "Mukta";
  padding: 0 10px;
  margin: 0;
  width: 45%;
  text-align: left;
  font-size: 1.2em;
}

/* Project Links */
.project_story_2 a {
  color: azure;
  font-size: 20px;
  font-family: "Bayon";
  margin-right: 10px;
}

.project_story_2 a:hover {
  color: darkorange;
  text-decoration: underline;
}

/* Center H2 Heading */
.project_listing h2 {
  color: azure;
  font-family: "Mukta";
  text-align: center;
  margin-bottom: 20px;
}
  /* Mobile responsiveness for screens less than 768px */
@media (max-width: 768px) {
  .project_item {
    flex-direction: column; /* Stack images and text vertically */
    align-items: center;
  }

  .project_image {
    max-width: 100%;
    margin: 0 auto 15px auto;
    width: auto;
  }

  .project_story, .project_story_2 {
    width: 100%;
    text-align: center;
    font-size: 1em; /* Adjust font size for readability */
    padding: 0 15px;
  }
}

/* Mobile responsiveness for screens less than 480px */
@media (max-width: 480px) {
  .project_container {
    padding: 10px;
  }
  
   .project_item {
    flex-direction: column;
  }

  .project_image {
    width: 100%;
    margin-bottom: 10px;
  }

  .project_story, .project_story_2 {
    font-size: 0.9em;
    padding: 0 10px;
    width: 100%;
    text-align: center;
  }

  .project_story_2 a {
    display: block; /* Make links stack vertically */
    margin-bottom: 10px;
  }
}

/*.project_container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding: 20px;
}

.project_heading h1 {
  text-align: center;
  color: azure;
  font-size: 50px;
  font-family: "Federo";
  width: 100%;
}

.project_story {
  color: rgb(255, 255, 255);
  text-shadow: 1px 1px 2px #000;
  word-spacing: 2px;
  letter-spacing: 1px;
  font-family: "Mukta";
  padding: 0 20px;
  margin-bottom: 80px;
}

.project_story_2 {
  color: rgb(255, 255, 255);
  text-shadow: 1px 1px 2px #000;
  word-spacing: 2px;
  letter-spacing: 1px;
  font-family: "Mukta";
  padding: 0 20px;
  margin-bottom: 80px;
}

.project_story_2 a {
  color: azure;
  font-size: 23px;
  text-align: right;
  font-family: "Bayon";
}

.project_story_2 a:hover {
  color: darkorange;
  text-decoration: underline;
}
.project_listing {
  font-family: "test";
  justify-self: center;
  align-items: center;
  margin: auto;
  color: azure;
}

.project_listing h2 {
  float: left;
  color: azure;
  font-family: "Mukta";
  text-align: left;
  
}

.project_item {
  flex-direction: row;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0 20px;
  margin: 0 auto;
  max-width: 80%;
}

.project_item p {
  width: 40%;
  color: azure;
  text-shadow: 1px 1px 2px #000;
  letter-spacing: 1px;
  font-family: "Mukta";
  justify-content: center;
  text-align: left;
  display: flex;
  font-size: 1.4em;
  font-weight: 450;
  grid-column: 1 / 2;
  padding: 0 20px;
}

.project_image {
  height: auto;
  width: 493px;
  max-width: 100%;
  flex: 1 1 auto;
  justify-content: center;
  display: block;
  margin: 0 auto;
  align-items: center;
  border-radius: 10px;
  padding: 0 20px;
}

  
*/

.about_heading h1 {
  text-align: center;
  color: azure;
  font-size: 50px;
  font-family: "Federo";
}

.about_story {
  color: rgb(255, 255, 255);
  text-shadow: 1px 1px 2px #000;
  word-spacing: 2px;
  letter-spacing: 1px;
  font-family: "Mukta";
}

/*.creating {
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}*/

.Cell {
  color: rgb(255, 255, 255);
}

@media (max-width: 768px) {
  .text-container {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .text-container {
    padding: 0 10px;
  }
  .text-container img,
  .text-container p {
    flex: none;
    width: 100%;
  }

  .text-container img {
    margin-bottom: 10px;
  }
}

@media (max-width: 768px) {
  .about-text-container {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .about-text-container {
    padding: 0 10px;
  }
  .about-text-container img,
  .about-text-container p {
    flex: none;
    width: 100%;
  }

  .about-text-container img {
    margin-bottom: 10px;
  }
}

.about-text-container {
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 20px;
  margin: 0 auto;
  max-width: 80%;
}

.about-text-container img {
  height: auto;
  width: 400px;
  max-width: 100%;
  flex: 1 1 auto;
  justify-content: center;
  display: block;
  margin: 0 auto;
  align-items: center;
  border-radius: 10px;
}

.about-text-container p {
  width: 40%;
  color: azure;
  text-shadow: 1px 1px 2px #000;
  letter-spacing: 1px;
  font-family: "Mukta";
  justify-content: center;
  text-align: left;
  font-size: 1.4em;
  font-weight: 450;
  flex: 1 1 auto;
}

.home_heading h1 {
  text-align: center;
  color: azure;
  font-size: 50px;
  font-family: "Federo";
  position: sticky;
}

.ham-nav {
  float: right;
  margin-right: 20px;
  position: relative;
}

.ham-nav ul li {
  float: left;
  margin-left: 25px;
  margin-top: 10px;
  list-style-type: none;
}

.menu-wrap {
  position: relative;
  z-index: 1;
}

.menu-wrap .toggler {
  position: relative;
  top: 0;
  left: 0;
  z-index: 2;
  cursor: pointer;
  width: 50px;
  height: 50px;
  opacity: 0;
}

.menu-wrap .hamburger {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 30px;
  height: 40px;
  padding: 1rem;
  background: #ffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-wrap .hamburger > div {
  position: relative;
  flex: none;
  width: 100%;
  height: 2px;
  background: #848484;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.4s ease;
  border-radius: 15px;
}

.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -10px;
  width: 100%;
  height: 2px;
  background: #848484;
  border-radius: 15px;
}

.menu-wrap .hamburger > div::after {
  top: 10px;
}

.menu-wrap .toggler:checked + .hamburger > div {
  transform: rotate(135deg);
}

.menu-wrap .toggler:checked + .hamburger > div:before,
.menu-wrap .toggler:checked + .hamburger > div:after {
  top: 0;
  transform: rotate(90deg);
}

.menu_wrap .toggler:checked:hover + .hamburger > div {
  transform: rotate(225deg);
}

.menu-wrap .toggler:checked ~ .menu {
  visibility: visible;
}

.menu-wrap .toggler:checked ~ .menu > div {
  transform: scale(1);
  transition-duration: var(--menu-speed);
}

.menu-wrap .toggler:checked ~ .menu > div > div {
  opacity: 1;
  transition: opacity 0.4s ease 0.4s;
}

.menu-wrap .menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-wrap .menu > div {
  background: #121713;
  width: 200vw;
  height: 140%;
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  margin-top: 200px;
}

.menu-wrap .menu > div > div {
  text-align: center;
  max-width: 300px;
  max-height: 100vh;
  opacity: 0;
  transition: opacity 0.4s ease;
  justify-content: center;
  margin-top: -200px;
}
.menu-wrap .menu > div > div > ul > li {
  list-style: none;
  color: azure;
  font-size: 1.5rem;
  padding: 1rem;
  text-align: center;
  flex: wrap;
  justify-content: center;
  font-family: "fanwood";
}

.menu-wrap .menu > div > div > ul > li > a {
  color: inherit;
  text-decoration: none;
  transition: color 0.4s ease;
  font-size: 50px;
  opacity: 1;
  float: none;
}

.ham-nav li a {
  font-family: "bsid";
  color: azure;
  font-size: 23px;
}

.ham-nav li a:hover {
  color: darkorange;
}

.nav-bar {
  float: left;
  position: relative;
  text-align: left;
}

.nav-bar a:hover {
  color: darkorange;
}

.nav-link {
  color: azure;
  font-size: 23px;
  text-align: left;
  font-family: "Bayon";
}

.contact_info {
  list-style-type: none;
  color: azure;
  font-size: 22px;
  text-align: center;
  padding: 50px;
  margin-top: 50px;
}

.contact_info li {
  margin-bottom: 80px;
  font-family: "Montserrat";
  font-weight: bold;
}

.contact_info li a:hover {
  color: darkorange;
  text-decoration: underline;
}

/*.home_head {
  display: flex;
  justify-content: center;
  align-items: center;
}

.home_head img {
  max-width: 400px;
  height: auto;
  padding: 5px;
  border-radius: 12px;
}

.ai_j1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ai_j1 img {
  max-width: 400px;
  height: auto;
  padding: 5px;
  border-radius: 12px;
}

.ai_j2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ai_j2 img {
  max-width: 400px;
  height: auto;
  padding: 5px;
  border-radius: 12px;
}

.ai_j3 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.ai_j3 img {
  max-width: 400px;
  height: auto;
  padding: 5px;
  border-radius: 12px;
}*/

.fa-linkedin,
.fa-github {
  color: #474646;
}

.fa-linkedin:hover,
.fa-github:hover {
  color: #0077b5;
}

.fa-github:hover {
  color: #6cc644;
}

.fa-envelope {
  color: #474646;
}

.fa-envelope:hover {
  color: rgb(214, 214, 92);
}
}