/* This creates the default styling for everything */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Kumbh Sans", sans-serif;
}

/* Is essentially creating the bar that is the navigation bar */
.navbar {
  background: #131313; /* Background color */
  height: 80px; /* Sets the height to 80 pixels */
  display: flex; /* Uses Flexbox for layout */
  justify-content: center; /* Centers items horizontally within the navigation bar */
  align-items: center; /* Centers items vertically within the navigation bar */
  font-size: 1.2rem; /* Sets the font size of the text within the navigation bar */
  position: sticky; /* Makes the navigation bar stick to the top of the viewport when scrolling */
  top: 0; /* Positions the sticky navigation bar at the top of the viewport */
  z-index: 999; /* Ensures the navigation bar appears above other elements */
}

/* Styles for the navigation bar container inside the navigation bar */
.navbar__container {
  display: flex; /* Uses Flexbox for layout */
  justify-content: space-between; /* Distributes items with space between them */
  height: 80px; /* Sets the height of the container to 80 pixels */
  z-index: 1; /* Sets the stacking order of the container */
  width: 100%; /* Sets the container width to 100% of its parent element */
  max-width: 1300px; /* Sets a maximum width for the container */
  margin-right: auto; /* Centers the container horizontally by setting the right margin to auto */
  margin-left: auto; /* Centers the container horizontally by setting the left margin to auto */
  padding-right: 50px; /* Adds 50 pixels of padding to the right side */
  padding-left: 50px; /* Adds 50 pixels of padding to the left side */
}

#fa-computer {
  border-radius: 300px;
  height: 110%; /* Sets the image height to 80% of its container */
  width: auto; /* Sets the image width to 80% of its container */
  margin-right: 1rem; /* Adds a right margin of 0.5 rem to create space between the icon and adjacent text */
}

/* Styles for the navigation bar logo/title */
#navbar__logo {
  background-color: #1721ec; /* Sets a background color (not visible due to background image and clipping) */
  background-image: linear-gradient(
    to top,
    #ffffff 5%,
    #ffffff 100%
  ); /* Applies a gradient background image */
  background-size: 100%; /* Ensures the background image covers the entire element */
  -webkit-background-clip: text; /* Clips the background to the foreground text for WebKit browsers */
  -moz-background-clip: text; /* Clips the background to the foreground text for Mozilla browsers */
  -webkit-text-fill-color: transparent; /* Makes the text color transparent for WebKit browsers */
  -moz-text-fill-color: transparent; /* Makes the text color transparent for Mozilla browsers */
  display: flex; /* Uses Flexbox for layout */
  align-items: center; /* Centers items vertically within the logo */
  cursor: pointer; /* Changes the cursor to a pointer on hover, indicating it is clickable */
  text-decoration: none; /* Removes any text decoration (like underlines) */
  font-size: 2rem; /* Sets the font size of the text to 2 rem units */
}

/* Increase size effect on logo*/
#navbar__logo:hover {
  /* Scale the element slightly */
  transform: scale(1.05);
}

/* Styles for the computer icon image */
#logo-photo {
  height: 60%; /* Sets the image height to 80% of its container */
  width: auto; /* Sets the image width to 80% of its container */
  margin-right: 1rem; /* Adds a right margin of 0.5 rem to create space between the icon and adjacent text */
}

/* Styles for the navigation menu, or the other items in the navigation bar */
.navbar__menu {
  display: flex; /* Uses Flexbox for layout */
  align-items: center; /* Centers items vertically within the menu */
  list-style: none; /* Removes default list styling (bullets) */
  text-align: center; /* Centers text within the menu items */
}

/* Styles for individual navigation items */
.navbar__item {
  height: 80px; /* Sets the height of each navigation item to 80 pixels */
}

/* Styles for the navigation links */
.navbar__links {
  color: #fff; /* Sets the text color to white */
  display: flex; /* Uses Flexbox for layout */
  align-items: center; /* Centers items vertically within the link */
  justify-content: center; /* Centers items horizontally within the link */
  text-decoration: none; /* Removes any text decoration (like underlines) */
  padding: 0 1rem; /* Adds padding: 0 on top and bottom, 1 rem on left and right */
  height: 100%; /* Sets the height of the link to 100% of its parent element */
}

/* Styles for the navigation button container */
.navbar__btn {
  display: flex; /* Uses Flexbox for layout */
  justify-content: center; /* Centers items horizontally within the button container */
  align-items: center; /* Centers items vertically within the button container */
  padding: 0 1rem; /* Adds padding: 0 on top and bottom, 1 rem on left and right */
  width: 100%; /* Sets the width of the button container to 100% of its parent element */
}

/* Styles for the button on hover */
.button:hover {
  background: #0800a0; /* Changes the background color of the button to blue on hover */
  transition: all 0.3s ease; /* Adds a transition effect for all properties over 0.3 seconds with an ease timing function */
}

/* Styles for the button */
.button {
  display: flex; /* Uses Flexbox for layout */
  justify-content: center; /* Centers items horizontally within the button */
  align-items: center; /* Centers items vertically within the button */
  text-decoration: none; /* Removes any text decoration (like underlines) */
  padding: 10px 20px; /* Adds padding: 10px top and bottom, 20px left and right */
  height: 100%; /* Sets the height of the button to 100% of its parent element */
  width: 100%; /* Sets the width of the button to 100% of its parent element */
  border: none; /* Removes any default border from the button */
  outline: none; /* Removes the default outline that browsers apply to focused elements */
  border-radius: 4px; /* Rounds the corners of the button with a radius of 4 pixels */
  background: #141414; /* Sets the background color of the button to a shade of orange-red */
  color: #ffffff; /* Sets the text color within the button to white */
}

/* Styles for the navigation links on hover */
.navbar__links:hover {
  color: #0800a0; /* Changes the text color of the navigation links to orange-red on hover */
  transition: all 0.3s ease; /* Adds a transition effect for all properties over 0.3 seconds with an ease timing function */
}

/* Media query for screens with a maximum width of 960px */
@media screen and (max-width: 960px) {
  /* Styles for the container inside the navigation bar */
  .navbar__container {
    display: flex; /* Uses Flexbox for layout */
    justify-content: space-between; /* Distributes items with space between them */
    height: 80px; /* Sets the height of the container to 80 pixels */
    z-index: 1; /* Sets the stacking order of the container */
    width: 100%; /* Sets the container width to 100% of its parent element */
    max-width: 1300px; /* Sets a maximum width for the container */
    padding: 0; /* Removes any padding from the container */
  }

  /* Styles for the navigation menu */
  .navbar__menu {
    display: grid; /* Uses Grid layout */
    grid-template-columns: auto; /* Defines one column with auto width */
    margin: 0; /* Removes any margin from the menu */
    width: 100%; /* Sets the menu width to 100% of its parent element */
    position: absolute; /* Positions the menu absolutely */
    top: -1000px; /* Moves the menu off-screen */
    opacity: 1; /* Sets the opacity of the menu */
    transition: all 0.5s ease; /* Adds a transition effect for all properties over 0.5 seconds with an ease timing function */
    height: 50vh; /* Sets the menu height to 50% of the viewport height */
    z-index: -1; /* Places the menu behind other elements */
  }

  /* Styles for the navigation menu when active */
  .navbar__menu.active {
    background: #131313; /* Sets the background color of the menu */
    top: 100%; /* Positions the menu below the navbar */
    opacity: 1; /* Ensures the menu is fully opaque */
    transition: all 0.5s ease; /* Adds a transition effect for all properties over 0.5 seconds with an ease timing function */
    z-index: 99; /* Brings the menu to the front */
    height: 50vh; /* Sets the menu height to 50% of the viewport height */
    font-size: 1.6rem; /* Sets the font size of the menu items */
  }

  /* Styles for the navigation bar logo */
  #navbar__logo {
    padding-left: 25px;
    font-size: 1.5rem; /* Adds padding to the left side */
  }

  /* Styles for the bars in the mobile menu toggle */
  .navbar__toggle .bar {
    width: 25px; /* Sets the width of the bars */
    height: 3px; /* Sets the height of the bars */
    margin: 5px auto; /* Adds vertical margin and centers horizontally */
    transition: all 0.3s ease-in-out; /* Adds a transition effect for all properties over 0.3 seconds with an ease-in-out timing function */
    background: #fff; /* Sets the background color of the bars to white */
  }

  /* Styles for individual navigation items */
  .navbar__item {
    width: 100%; /* Sets the width of each navigation item to 100% of its parent element */
  }

  /* Styles for the navigation links */
  .navbar__links {
    text-align: center; /* Centers text within the link */
    padding: 2rem; /* Adds padding to the link */
    width: 100%; /* Sets the link width to 100% of its parent element */
    display: table; /* Changes the display property to table */
  }

  /* Styles for the navigation button container */
  .navbar__btn {
    padding-bottom: 2rem; /* Adds padding to the bottom */
  }

  /* Styles for the button */
  .button {
    display: flex; /* Uses Flexbox for layout */
    justify-content: center; /* Centers items horizontally within the button */
    align-items: center; /* Centers items vertically within the button */
    width: 80%; /* Sets the width of the button to 80% of its parent element */
    height: 80px; /* Sets the height of the button to 80 pixels */
    margin: 0; /* Removes any margin from the button */
  }

  /* Styles for the mobile menu */
  #mobile-menu {
    position: absolute; /* Positions the menu absolutely */
    top: 20%; /* Positions the menu 20% from the top */
    right: 5%; /* Positions the menu 5% from the right */
    transform: translate(5%, 20%); /* Translates the menu position */
  }

  /* Styles for the bars in the mobile menu toggle */
  .navbar__toggle .bar {
    display: block; /* Changes the display property to block */
    cursor: pointer; /* Changes the cursor to a pointer on hover */
  }

  /* Styles for the second bar when the menu is active */
  #mobile-menu.is-active .bar:nth-child(2) {
    opacity: 0; /* Makes the second bar invisible */
  }

  /* Styles for the first bar when the menu is active */
  #mobile-menu.is-active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg); /* Moves the first bar and rotates it to form an "X" shape */
  }

  /* Styles for the third bar when the menu is active */
  #mobile-menu.is-active .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg); /* Moves the third bar and rotates it to form an "X" shape */
  }
}

.main {
  background-color: #141414;
}

h1 {
  text-align: center;
  font-size: 4rem;
  background-color: #0800a0;
  background-image: linear-gradient(-20deg, #0800a0 0%, #21d4fd 100%);
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}

h2 {
  color: #e9e9e9;
}

p {
  color: #e9e9e9;
}

span {
  color: #e9e9e9;
}

.main__container {
  display: grid;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.main__card {
  margin: 1rem;
  height: 525px;
  width: 400px;
  border-radius: 4px;
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(17, 17, 17, 17) 100%
    ),
    url("images/accomplishments/IMG_3095.PNG");
  background-position: 60% 0%;
  background-size: cover;
  position: relative;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.main__card:nth-child(2) {
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(17, 17, 17, 17) 100%
    ),
    url("images/accomplishments/t57h5m95ynt91.webp");
  background-position: 50% 50%;
}

.main__card:nth-child(3) {
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgb(17, 17, 17) 100%
    ),
    url("images/accomplishments/IMG_3735.jpg");
  background-position: 50% 0%;
}

.main__card:nth-child(4) {
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgb(17, 17, 17) 100%
    ),
    url("images/accomplishments/Duke.webp");
  background-position: 50% 0%;
}

.main__card:nth-child(5) {
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgb(17, 17, 17) 100%
    ),
    url("images/accomplishments/198419_hero.jpg");
  background-position: 50% 0%;
}

.main__card:nth-child(6) {
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgb(17, 17, 17) 100%
    ),
    url("images/accomplishments/IMG_2128.JPG");
  background-position: 40% 0%;
}

.main__card:nth-child(7) {
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgb(17, 17, 17) 100%
    ),
    url("images/accomplishments/M7N3ot2U_400x400.png");
  background-position: 40% 0%;
}

.main__card:nth-child(8) {
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgb(17, 17, 17) 100%
    ),
    url("images/accomplishments/275571619_3136423276573989_6104692644844802059_n.jpg");
  background-position: 40% 0%;
}

.main__card h2 {
  position: absolute;
  top: 350px;
  left: 30px;
}

.main__card p {
  position: absolute;
  top: 420px;
  left: 0px;
}

.main__card img {
  width: 100%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.main__card:hover {
  transform: scale(1.075);
  transition: 0.2s ease-in;
  cursor: pointer;
}

.button-link button {
  color: #fff;
  padding: 10px 20px;
  border: none;
  outline: none;
  border-radius: 4px;
  background: #141414;
  position: absolute;
  top: 440px;
  left: 30px;
  font-size: 1rem;
}

.button-link button:hover {
  cursor: pointer;
  background: #0800a0;
}

/* Mobile Styles */
@media (max-width: 768px) {
  h1 {
    font-size: 2.5rem; /* Adjust font size for mobile */
    padding-left: 6rem; /* Add padding to move it right */
    padding-top: 3rem;
    text-align: left; /* Align text to the left */
  }

  .main__card {
    width: 90%; /* Adjust width for mobile */
    margin: 2rem auto; /* Center cards and reduce margin */
  }

  .main__card h2 {
    position: relative;
    top: 95px;
    left: auto;
    font-size: 1.5rem;
  }

  .main__card p {
    position: relative;
    top: 100px;
    left: auto;
    font-size: 1rem;
  }

  .button-link button {
    position: relative;
    top: auto;
    left: auto;
    font-size: 0.875rem;
    padding: 8px 16px;
  }
}
/*Cart Section*/

.cart-icon {
  position: fixed;
  top: 20px;
  right: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  z-index: 1000; /* Bring to the front */
}

.cart-icon img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

#cart-count {
  background: red;
  color: white;
  border-radius: 50%;
  padding: 5px 10px;
  margin-left: -10px;
}

.cart {
  position: fixed;
  top: 0;
  right: -500px;
  width: 400px;
  height: 100%;
  background: #141414;
  border-left: 1px solid #141414;
  padding: 20px;
  transition: right 0.3s ease, transform 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  z-index: 999; /* Ensure it's behind the cart icon */
}

.cart.open {
  right: 0;
  transform: scale(0.9);
}

#cart-items {
  list-style-type: none;
  padding: 0;
  overflow-y: auto;
  flex-grow: 1;
}

#cart-items li {
  padding: 10px;
  border-bottom: 1px solid #ccc;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#cart-items li img {
  width: 50px;
  height: auto;
  margin-right: 10px;
}

#cart-items li input[type="number"] {
  width: 60px; /* Adjust the width */
  padding: 5px; /* Adjust the padding */
  text-align: center; /* Center the text */
}

button {
  color: #fff;
  padding: 10px 20px;
  margin-top: 10px;
  cursor: pointer;
  border: none;
  outline: none;
  border-radius: 4px;
  background: #7c0000;
  font-size: 1rem;
}

.button-checkout button {
  color: #fff;
  padding: 10px 20px;
  margin-top: 10px;
  cursor: pointer;
  border: none;
  outline: none;
  border-radius: 4px;
  background: #0800a0;
  font-size: 1rem;
}

.button-checkout button:hover {
  cursor: pointer;
  background: #141414;
}

.checkout-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}

/* Modal styles */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.modal label {
  display: block;
  margin: 10px 0 5px;
}

.modal input {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
}

/* Footer CSS */
.footer__container {
  background-color: #141414;
  padding: 10rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#footer__logo {
  color: #ffffff;
  display: flex;
  align-items: center;
  cursor: pointer;
  text-decoration: none;
  font-size: 2rem;
  position: 10 0;
}

#footer-picture {
  height: auto; /* Sets the image height to 70% of its container */
  width: auto; /* Ensures the width is proportional to the height */
  margin-right: 1rem;
  max-width: 200px; /* Optional: Limits the maximum width */
  border-radius: 8px; /* Adjust the radius as needed */
}

#footer__logo:hover {
  transform: scale(1.05);
}

.footer__link--wrapper {
  display: flex;
}

.footer__link--items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 20px;
  text-align: left;
  width: 200px;
}

.footer__link--items > h2 {
  color: #fff;
  margin-bottom: 20px;
}

.footer__link--items a {
  color: #fff;
  text-decoration: none;
  margin-bottom: 0.5rem;
}

/* Social Icons */
.social__icon--link {
  color: #fff;
  font-size: 24px;
}

.social__media {
  max-width: 1000px;
  width: 100%;
}

.social__media--wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  max-width: 1000px;
  margin: 40px auto 0 auto;
}

.social__icons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 240px;
}

.social__logo {
  color: #fff;
  justify-self: start;
  margin-left: 20px;
  cursor: pointer;
  text-decoration: none;
  font-size: 2rem;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.website__rights {
  color: #fff;
}

@media screen and (max-width: 820px) {
  .footer__links {
    padding-top: 2rem;
  }

  #footer__logo {
    margin-bottom: 2rem;
  }

  .website__rights {
    margin-bottom: 2rem;
  }

  .footer__link--wrapper {
    flex-direction: column;
  }

  .social__media--wrap {
    flex-direction: column;
  }
}

@media screen and (max-width: 480px) {
  .footer__link--items {
    margin: 0;
    padding: 10px;
    width: 100%;
  }
}