html {
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Poppins, sans-serif; /*import a new font*/
}

.navbar {
  background: #242424;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  position: sticky;
  top: 0;
  z-index: 999;
}

.navbar__container {
  display: flex;
  justify-content: center;
  height: 80px;
  z-index: 1;
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  align-items: center;
  padding: 10px 100px;
}

.navbar__menu {
  display: flex;
  align-items: center;
  list-style: none;
  text-align: center;
}

.navbar__item {
  height: 100%;
}

.navbar__links {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0 1rem;
  height: 100%;
}

.navbar__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 1rem;
  width: 100%;
}

.button {
  background-color: #242424;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  padding: 10px 20px;
  height: 90%;
  width: 90%;
  border: none;
  outline: none;
  border-radius: 0.5rem;
  margin: 10px 20px;
  color: #fff;
  transition: all 0.4s ease-in-out;
}

.button:hover {
  background: #cf4420;
  transition: all 0.35s ease;
}

/* mobile responsiveness */
@media screen and (max-width: 960px) {
  .navbar__container {
    display: flex;
    justify-content: center;
    height: 150px;
    z-index: 1;
    width: 100%;
    max-width: 1300px;
    padding: 0;
  }

  .navbar__menu {
    display: grid;
    width: 100%;
    position: absolute;
    top: -1000px;
    opacity: 0;
    transition: all 0.5 ease-in-out;
    height: 50vh;
    z-index: -1;
    background: #242424;
  }

  .navbar__menu.active {
    background: #242424;
    top: 100%;
    opacity: 1;
    transition: all 0.5s ease-in-out;
    z-index: 99;
    height: 50vh;
    font-size: 1.5rem;
    justify-content: center;
  }

  .navbar__menu.active li {
    display: flex; /* Display as flex */
    justify-content: center; /* Center items horizontally */
  }

  .navbar__toggle .bar {
    width: 25px;
    height: 3px;
    margin: 4px auto;
    transition: all 0.3s ease-in-out;
    background: #fff;
  }

  .navbar__links {
    text-align: center;
    width: 100%;
    display: table;
    position: absolute;
  }

  #mobile-menu {
    position: absolute;
    top: 20%;
    right: 5%;
    transform: translate(5%, 20%);
  }

  .button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: 80px;
    margin: 0;
  }

  .navbar__toggle .bar {
    display: block;
    cursor: pointer;
  }

  #mobile-menu.is-active .bar:nth-child(2) {
    opacity: 0;
  }
  #mobile-menu.is-active .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  #mobile-menu.is-active .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* Hero Section CSS */
.main {
  padding-top: 200px;
  padding-bottom: 400px;
  background-color: #313131;
}

.main__container {
  display: flex;
  align-items: center;
  justify-content: space-around; /* Evenly spaces items within the container with space around each */
  flex-wrap: wrap; /* Allows items to wrap if there isn't enough space */
  margin: 0 auto;
  height: auto;
  background-color: #313131;
  z-index: 1;
  width: 100%;
  max-width: 1300px;
  padding: 20px 50px; /* Adjust padding as necessary */
}


.main__container > * { /* Apply to all direct children */
  flex: 1 1 auto; /* Allows items to grow and shrink as needed */
}


/* profile p */

.main__img--container img {
  max-width: 400px;
  height: auto; /* Maintain aspect ratio */
  object-fit: contain; /* Ensure the whole image fits within the box */
  border-radius: 40px;
}

.main__content h2 {
  font-size: calc(1vw + 1vh);
}

.main__content h1,
.main__content h2 {
  background-color: #fff;
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  
}

.main__content h1,
.main__content h2 .text {
  font-size: calc(2.8vw + 2.8vh);
  white-space: nowrap;
}

.main__btn {
  font-size: 1.2rem;
  background-color: #747474;
  padding: 14px 32px;
  border: none;
  border-radius: 4px;
  color: #fff;
  margin-top: 50px;
  display: inline-block;
  position: relative;
  cursor: pointer;
  transition: all 0.35s;
  outline: none;
}

.main__btn a {
  position: relative;
  z-index: 2;
  color: #fff;
  text-decoration: none;
}

.main__btn:after {
  border-radius: 4px;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #630031;
  transition: all 0.5s;
}

.main__btn:hover {
  color: #313131;
}

.main__btn:hover:after {
  width: 100%;
}

/* Mobile responsiveness */
@media screen and (max-width: 960px) {
  .main__img--container :hover {
    animation: none;
  }

  /* Additional adjustments for other elements */
  .main__img--container img {
    margin-right: 0; /* Remove margin between the image and the text */
    width: 250px; /* Adjust width as necessary */
  }

  .main__content {
    text-align: center; /* Center the text for smaller screens */
  }

  .main__container {
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center items horizontally */
  }

  .main__img--container {
    margin-right: 0; /* Align image above the text */
    margin-bottom: 20px; /* Space between image and text below */
  }

  .main__content {
    text-align: center; /* Center the text for smaller screens */
    padding: 0;
  }

  .main__content h1,
  .main__content h2 .text {
  font-size: calc(1vw + 1vh);
  }

  .main__content h1 {
    font-size: 2.2rem; /* Adjust font size for smaller screens */
    margin-top: 3rem;
  }
  .main__content h2 {
    font-size: 1rem; /* Adjust font size for smaller screens */
    margin-top: 1rem;
  }

  .main__icon {
    width: auto; /* Allow icons to size themselves */
  }

  .main__icon img {
    width: 30px; /* Adjust the icon size */
    height: auto; /* Maintain aspect ratio */
  }

  /* Adjust the navbar height if you are adding the icons to the bottom */
  .navbar__container {
    height: auto; /* Adjust the height as needed */
    padding-bottom: 60px; /* Make room for icons */
  }
}

/* icons */

.main__icon {
  margin: 10px; /* Ensure there is space around icons but adjust as needed */
  flex: 1 0 20%; 
}

.main__icon a {
  display: block; /* Makes the link fill the area of the list item */
}

.main__icon--container ul {
  list-style-type: none; /* This removes the bullet points */
  margin: 0; /* Resets default margin */
  padding: 0; /* Resets default padding */
}

.main__icon img {
  max-width: 50px; /* Ensures the image does not exceed 50px */
  border-radius: 14px;
  height: auto; /* Maintains aspect ratio */
  transition: all 0.3s ease-in-out; /* Smooth transition for hover effect */
}

.main__icon a:hover img {
  opacity: 0.5;
}

.main__icon--container {
  text-align: center;  
}

@media screen and (max-width: 960px) {
  .main__icon--container {
    padding-left: 0; /* Remove padding left */
    display: flex; /* Display as flex */
    justify-content: center; /* Center items horizontally */
    flex-wrap: wrap; /* Allow the items to wrap */
  }

  .main__icon--container ul {
    width: 100%; /* Full width */
    display: flex; /* Display as flex */
    justify-content: center; /* Center items horizontally */
    padding: 0; /* Remove padding */
  }

  .main__icon {
    display: flex; /* Display as flex */
    justify-content: center; /* Center content */
    align-items: center; /* Center items vertically */
    margin: 0 5px; /* Add some horizontal space */
    padding-top: 40px; /* Remove padding */
    list-style: none; /* Remove list styles */
  }

  .main__icon a {
    display: flex; /* Display as flex */
    justify-content: center; /* Center content */
    align-items: center; /* Center items vertically */
  }

  .main__icon img {
    width: 50px; /* Set a fixed width */
    height: auto; /* Keep the aspect ratio */
  }
}

/* ------------------- */
/* About me section */
/* ------------------- */
.about-me {
  padding-top: 40px;
  padding-bottom: 200px;
  background-color: #313131; /* or any color you prefer */
}

.about-me__container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 800px;
  margin: 0 auto;
}

.about-me__header h2 {
  text-align: center;
  font-size: 3rem;
  margin-bottom: 30px;
  margin-top: 30px;
  color: #fff;
}

.about-me__content {
  display: flex;
  gap: 20px; /* Adjust the space between the description and the gallery */
}

.about-me__description {
  flex: 1;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px #fff; /* a subtle shadow */
  font-size: larger;
  text-align: center;
}
.about-me__description p2 {
  font-style: italic;
}

/* image gallery */
.about-me__slider {
  flex: 1; /* Adjust this if you need to control the width relative to the description */
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px #fff; /* a subtle shadow */
  overflow: hidden; /* Hide overflow */
  /* Set a fixed height or minimum height */
  min-height: 300px; /* Adjust this value based on your needs */
  position: relative;
}

.about-me__slider img {
  width: 100%; /* Make image responsive */
  height: auto; /* Maintain aspect ratio */
  object-fit: center; /* Cover the area of the container without stretching */
  border-radius: 20px;
}

/* Add this to make sure only the first slide is displayed initially */
.slide {
  display: none;
}

img.displaySlide {
  display: block;
  animation-name: fade;
  animation-duration: 1.5s;
}

.about-me__slider button.prev,
.about-me__slider button.next {
  opacity: 0; /* Start fully transparent */
  position: absolute;
  top: 50%;
  z-index: 10;
  color: white;
  background-color: rgba(0, 0, 0, 0.2);
  border: none;
  cursor: pointer;
  font-size: 100px;
  transition: opacity 1.5s ease-in-out; /* Smooth transition for opacity change */
}

.about-me__slider button.prev {
  left: 0;
  transform: translateY(-50%);
}

.about-me__slider button.next {
  right: 0;
  transform: translateY(-50%);
}

.about-me__slider:hover button.prev,
.about-me__slider:hover button.next {
  opacity: 1; /* Fully visible on hover */
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media screen and (max-width: 960px) {
  .about-me__container {
    flex-direction: column;
    padding: 20px;
    align-items: center;
  }

  .about-me__content {
    flex-direction: column;
    max-width: 550px;
  }

  .about-me__description p {
    text-align: left;
  }

  .about-me__description,
  .about-me__slider {
    width: 100%;
    margin-bottom: 20px;
  }
}

/* SKILLS SECTIONS*/
.skills-section {
  padding-top: 100px;
  padding-bottom: 200px;
  background-color: #313131; /* Adjust the background color as needed */
  color: #000000; /* Adjust text color as needed */
}

.skills-box {
  flex: 1;
  padding: 20px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px #fff; /* a subtle shadow */
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
}

.skills-section h2 {
  text-align: center;
  font-size: 3rem;
  color: #fff; /* Adjust the color to fit your design */
  margin-bottom: 20px; /* Space below the heading */
}

.skills-list {
  list-style: none; /* Remove default list styling */
  padding: 0; /* Remove default padding */
  font-size: 1.5rem;
  text-align: center;
  font-weight: bold;
}


.skills-list li {
  position: relative; /* Allows absolute positioning of pseudo-elements relative to each list item */
  padding-left: 20px; /* Provides space for the custom bullet */
  margin-bottom: 10px; /* Space between items */
}

/* .skills-list li::before { */
  /* content: ""; Required for the pseudo-element to display */
  /* position: absolute; */
  /* left: 0; Align with the start of the list item */
  /* top: 50%; Center vertically */
  /* transform: translateY(-50%); Precise vertical centering */
  /* width: 10px; Custom bullet width */
  /* height: 10px; Custom bullet height */
  /* background-color: #000000; Custom bullet color */
  /* border-radius: 3px; */
/*}*/

@media screen and (max-width: 960px) {
  .skills-section,
  .skills-list {
    flex-direction: column;
    padding: 20px;
  }

  .skills-list {
    width: 100%;
    margin-bottom: 20px;
  }

  .skills-box
  {
    margin-bottom: 50px;
    margin-top: 50px;
  }
}

/* Projects */

.projects__section {
  padding-top: 40px; /* Add padding to the top and bottom */
  padding-bottom: 200px; /* Add padding to the top and bottom */
  background-color: #313131;
}

.projects__section h2 {
  text-align: center;
  font-size: 3rem;
  margin-bottom: 30px;
  margin-top: 30px;
  color: #fff;
}


.projects__box a,
.projects__box a:visited, /* Override visited link color */
.projects__box a:hover, /* Override hover link color */
.projects__box a:active {
  /* Override active link color */
  color: #000; /* This sets the text color to black */
  text-decoration: none; /* This removes the underline from the link */
}


.projects__box {
  scale: 1;
  background-color: #fff;
  text-decoration: none;
  border-radius: 10px;
  box-shadow: 0 2px 5px #fff; /* Initial shadow */
  max-width: 500px;
  padding: 20px;
  transition: all 1s ease-in-out, box-shadow 1s ease-in-out; /* Add box-shadow transition */
}

.projects__box:hover {
  background-color: #747474;
  transform: scale(1.03);
  transition: all 1s ease;
  box-shadow: none; /* This removes the shadow when hovering */
}

.projects__container{
  display: flex;
  width: 100%; /* Take the full width of the section */
  flex-wrap: wrap; /* Wrap the items if necessary */
  max-width: 1100px;
  gap: 20px;
  justify-content: center; /* Center align the flex items */
  margin: 0 auto; /* Center the container within its parent */
}

.image1:hover {
  background-color: #747474;
}

.image1, .p{
  /* Adjust max-width if the image should be smaller than the box */
  width: 100%; /* Full width within the box */
  height: auto; /* Maintain aspect ratio */
  object-fit: contain; /* Ensure the whole image fits within the box */
  border-radius: 10px;

}

/* Adjustments for mobile responsiveness */
@media screen and (max-width: 960px) {

  .projects__box {
    /* Make each box take the full width of its container */
    width: 90%;
    /* Reset any specific flex-basis or width set outside media query */
    flex: 0 0 auto;
    margin-bottom: 20px; /* Add space between vertically stacked boxes */
  }

  .projects__section h2 {
    font-size: 3rem; /* Adjust the header font size for smaller screens */
  }

  /* Adjust image size within each project box */
  .image1, .p{
    /* Adjust max-width if the image should be smaller than the box */
    width: 100%; /* Full width within the box */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure the whole image fits within the box */
  }

}

/* Extracurricular */
.extracurricular__section {
  display: flex;
  flex-direction: column; /* Stack the header and projects vertically */
  align-items: center; /* Center the items horizontally */
  margin: 0 auto;
  padding: 40px 0; /* Add padding to the top and bottom */
  background-color: #313131;
}

.extracurricular__section h2 {
  text-align: center;
  font-size: 3rem;
  margin-bottom: 30px;
  margin-top: 30px;
  color: #fff;
}

.wrapper {
  max-width: 1100px;
  width: 100%;
  position: relative;
}

.wrapper h2 {
  color: #000;
}

.wrapper i {
  top: 50%;
  height: 50px;
  width: 50px;
  cursor: pointer;
  font-size: 1.25rem;
  position: absolute;
  text-align: center;
  line-height: 50px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
  transform: translateY(-50%);
  transition: transform 0.1s linear;
}
.wrapper i:active {
  transform: translateY(-50%) scale(0.85);
}
.wrapper i:first-child {
  left: -2%;
}
.wrapper i:last-child {
  right: -2%;
}
.wrapper .carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% / 3) - 12px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  border-radius: 8px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar {
  display: none;
}
.carousel.no-transition {
  scroll-behavior: auto;
}
.carousel.dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.carousel.dragging .card {
  cursor: grab;
  user-select: none;
}
.carousel :where(.card, .img) {
  display: flex;
  justify-content: center;
  align-items: center;
}
.carousel .card {
  scroll-snap-align: start;
  list-style: none;
  background: #fff;
  cursor: pointer;
  padding-bottom: 15px;
  flex-direction: column;
  border-radius: 8px;
  box-shadow: 0 2px 5px #fff;
}

.card .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 4px solid #fff;
  border-radius: 20px;
}

.wrapper i:first-child {
  left: 24px;
}
.wrapper i:last-child {
  right: 24px;
}

.card p {
  padding: 10px;
}

.carousel .card h2 {
  font-weight: 500;
  font-size: 1.56rem;
  margin: 30px 0 5px;
}
.carousel .card span,
h3 {
  color: #4f5051;
  font-size: 1rem;
  justify-content: center;
}
@media screen and (max-width: 960px) {
  .wrapper .carousel {
    grid-auto-columns: calc((100% / 2) - 9px);
  }
  .wrapper i:first-child {
    left: 24px;
  }
  .wrapper i:last-child {
    right: 24px;
  }
  .extracurricular__section
  {
    padding: 20px;
  }
}
@media screen and (max-width: 600px) {
  .wrapper .carousel {
    grid-auto-columns: 100%;
  }
}

footer {
  display: block;
  text-align: center;
  color: #fff;
  padding-top: 50px;
  padding-bottom: 20px;
  background-color: #313131;
}


/* Fade animation */
.fade {
  -webkit-transition: all 1s;
  transition: all 1s;
  opacity: 0;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
}

.fade.inview2 {
  opacity: 1;
  -webkit-transform: none;
  transform: none;
}

.delay-0.inview2 {
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.delay-1.inview2 {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  
}

.delay-2.inview2 {
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.delay-3.inview2 {
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.delay-4.inview2 {
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}