/* 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 */
}

/* 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 */
#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 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 */
.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: #131313; /* Sets the background color of the menu */
  /* 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 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 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 */
  }

  #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 Content CSS */
.main {
  background-color: #141414; /* Sets the background color for the main section */
}

.main__container {
  display: grid; /* Uses Grid layout */
  grid-template-columns: 1fr 1fr; /* Defines two equal columns */
  align-items: center; /* Vertically aligns items in the center */
  justify-self: center; /* Horizontally centers the container */
  margin: 0 auto; /* Centers the container within its parent element */
  height: 90vh; /* Sets the height to 90% of the viewport height */
  background-color: #131313; /* Sets the background color for the container */
  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-right: 50px; /* Adds padding to the right */
  padding-left: 50px; /* Adds padding to the left */
}

.main__content {
  color: #fff; /* Sets the text color to white */
  width: 100%; /* Sets the content width to 100% of its parent element */
}

.main__content h1 {
  font-size: 4rem; /* Sets the font size */
  background-color: #0800a0; /* Sets the background color */
  background-image: linear-gradient(
    -20deg,
    #0800a0 0%,
    #21d4fd 100%
  ); /* Sets a linear gradient background */
  background-size: 100%; /* Ensures the background covers the entire text */
  -webkit-background-clip: text; /* Clips the background to the text for WebKit browsers */
  -moz-background-clip: text; /* Clips the background to the text for Mozilla browsers */
  -webkit-text-fill-color: transparent; /* Makes the text transparent for WebKit browsers */
  -moz-text-fill-color: transparent; /* Makes the text transparent for Mozilla browsers */
}

.main__content h2 {
  font-size: 4rem; /* Sets the font size */
  background-color: #0800a0; /* Sets the background color */
  background-image: linear-gradient(
    -20deg,
    #0800a0 0%,
    #21d4fd 100%
  ); /* Sets a linear gradient background */
  background-size: 100%; /* Ensures the background covers the entire text */
  -webkit-background-clip: text; /* Clips the background to the text for WebKit browsers */
  -moz-background-clip: text; /* Clips the background to the text for Mozilla browsers */
  -webkit-text-fill-color: transparent; /* Makes the text transparent for WebKit browsers */
  -moz-text-fill-color: transparent; /* Makes the text transparent for Mozilla browsers */
}

.main__content h3 {
  font-size: 4rem; /* Sets the font size */
  margin-top: 10px; /* Adds margin to the top */
  background-color: #0800a0; /* Sets the background color */
  background-image: linear-gradient(
    -20deg,
    #0800a0 0%,
    #21d4fd 100%
  ); /* Sets a linear gradient background */
  background-size: 100%; /* Ensures the background covers the entire text */
  -webkit-background-clip: text; /* Clips the background to the text for WebKit browsers */
  -moz-background-clip: text; /* Clips the background to the text for Mozilla browsers */
  -webkit-text-fill-color: transparent; /* Makes the text transparent for WebKit browsers */
  -moz-text-fill-color: transparent; /* Makes the text transparent for Mozilla browsers */
}

.main__content h4 {
  font-size: 1.5rem; /* Sets the font size */
  margin-top: 10px; /* Adds margin to the top */
  background-color: #0800a0; /* Sets the background color */
  background-image: linear-gradient(
    -20deg,
    #0800a0 0%,
    #21d4fd 100%
  ); /* Sets a linear gradient background */
  background-size: 100%; /* Ensures the background covers the entire text */
  -webkit-background-clip: text; /* Clips the background to the text for WebKit browsers */
  -moz-background-clip: text; /* Clips the background to the text for Mozilla browsers */
  -webkit-text-fill-color: transparent; /* Makes the text transparent for WebKit browsers */
  -moz-text-fill-color: transparent; /* Makes the text transparent for Mozilla browsers */
  /*If you want this to actually work delete the top * font and overwrite everything, or put this before that point*/
  font-family: "UnifrakturMaguntia", cursive !important; /* Applies the gothic font with high specificity */
}

.main__content p {
  margin-top: 1rem; /* Adds margin to the top */
  font-size: 2rem; /* Sets the font size */
  font-weight: 700; /* Sets the font weight */
}

.main__btn {
  font-size: 1rem; /* Sets the font size */
  background-image: linear-gradient(
    -20deg,
    #000000 0%,
    #000000 100%
  ); /* Sets a linear gradient background */
  padding: 14px 32px; /* Adds padding to the button */
  border: none; /* Removes the border */
  border-radius: 4px; /* Rounds the corners */
  color: #fff; /* Sets the text color to white */
  margin-top: 2rem; /* Adds margin to the top */
  cursor: pointer; /* Changes the cursor to a pointer on hover */
  position: relative; /* Positions the button relative to its normal position */
  transition: all 0.35s; /* Adds a transition effect for all properties over 0.35 seconds */
  outline: none; /* Removes the outline */
  background: #131313;
}

.main__btn a {
  position: relative; /* Positions the link relative to its normal position */
  z-index: 2; /* Sets the stacking order of the link */
  color: #fff; /* Sets the text color to white */
  text-decoration: none; /* Removes the text decoration */
}

.main__btn:after {
  position: absolute; /* Positions the pseudo-element absolutely */
  content: ""; /* Adds an empty content */
  top: 0; /* Positions the pseudo-element at the top */
  left: 0; /* Positions the pseudo-element at the left */
  width: 0; /* Sets the initial width */
  height: 100%; /* Sets the height to 100% */
  background: #0800a0; /* Sets the background color */
  transition: all 0.35s; /* Adds a transition effect for all properties over 0.35 seconds */
  border-radius: 4px; /* Rounds the corners */
}

.main__btn:hover {
  color: #fff; /* Ensures the text color stays white on hover */
}

.main__btn:hover:after {
  width: 100%; /* Sets the width to 100% on hover */
}

.main__img--container {
  text-align: center; /* Centers the image container */
}

#main__img {
  height: 80%; /* Sets the image height to 80% of its container */
  width: 80%; /* Sets the image width to 80% of its container */
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
  .main__container {
    display: grid; /* Uses Grid layout */
    grid-template-columns: auto; /* Defines one column */
    align-items: center; /* Vertically aligns items in the center */
    justify-self: center; /* Horizontally centers the container */
    width: 100%; /* Sets the container width to 100% of its parent element */
    margin: 0 auto; /* Centers the container within its parent element */
    height: 90vh; /* Sets the height to 90% of the viewport height */
  }

  .main__content {
    text-align: center; /* Centers the text */
    margin-bottom: 4rem; /* Adds margin to the bottom */
  }

  .main__content h1 {
    font-size: 2.5rem; /* Sets the font size */
    margin-top: 2rem; /* Adds margin to the top */
  }

  .main__content h2 {
    font-size: 2.5rem; /* Sets the font size */
    margin-top: 2rem; /* Adds margin to the top */
  }

  .main__content h3 {
    font-size: 3rem; /* Sets the font size */
  }

  .main__content h4 {
    font-size: 1.5rem; /* Sets the font size */
  }

  .main__content p {
    margin-top: 1rem; /* Adds margin to the top */
    font-size: 1.5rem; /* Sets the font size */
  }
}

/* Media query for screens with a max-width of 480px */
@media screen and (max-width: 480px) {
  .main__content h1 {
    font-size: 2rem; /* Sets the font size */
    margin-top: 3rem; /* Adds margin to the top */
  }

  .main__content h2 {
    font-size: 2rem; /* Sets the font size */
  }
  .main__content h3 {
    font-size: 1.5rem; /* Sets the font size */
  }
  .main__content h4 {
    font-size: 1rem; /* Sets the font size */
  }

  .main__content p {
    margin-top: 2rem; /* Adds margin to the top */
    font-size: 1.5rem; /* Sets the font size */
  }

  .main__btn {
    padding: 12px 36px; /* Adds padding to the button */
    margin: 2.5rem 0; /* Adds margin to the top and bottom */
  }

  /* Ensure the main image scales */
  .main__img--container {
    width: 100%; /* Make the container full width */
    text-align: center; /* Center align the image */
  }

  #main__img {
    max-width: 100%; /* Make the image responsive */
    height: auto; /* Maintain aspect ratio */
  }
}

.button-link:hover {
  cursor: pointer;
  background: #0800a0; /* Sets the background color */
}

.button-link:hover:after {
  width: 100%; /* Sets the width to 100% on hover */
}

/* Services Section */
.services {
  background: #131313;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.services h1 {
  background-color: #21d4fd;
  background-image: linear-gradient(
    to right,
    #1722ec0e 0%,
    #1722ec42 0%,
    #1722ec90 21%,
    #1722ecc2 52%,
    #1722ecde 78%,
    #1721ec 100%
  );
  background-size: 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  margin-bottom: 5rem;
  font-size: 2.5rem;
}

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

.services__card {
  margin: 2rem;
  height: 525px;
  width: 400px;
  border-radius: 4px;
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgb(17, 17, 17) 100%
    ),
    url("images/education/GQhUG9MWkAAai0N.jpeg");
  background-position: 60% 100%; /* Center the background image */
  background-size: cover;
  position: relative;
  color: #fff;
}

.services__card:before {
  opacity: 0.2;
}

.services__card:nth-child(2) {
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(17, 17, 17, 0.9) 100%
    ),
    url("images/education/00f810d8-d624-4ed7-ab4c-f26ab467bc9a.png");
  background-position: 40% 75%; /* Center the background image */
  background-size: cover; /* Ensure the image covers the entire element */
}

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

.services__card p {
  position: absolute;
  top: 400px;
  left: 30px;
}

/*This is just creating the service card for the college portion */
.college__services__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, 0.6) 100%
    ),
    url("/images/college.webp");
  background-position: 60% 100%; /* Center the background image */
  background-size: cover;
  position: relative;
  color: #fff;
}

.college__services__card:before {
  opacity: 0.2;
}

.college__services__card:nth-child(2) {
  background-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0%,
      rgba(17, 17, 17, 0.9) 100%
    ),
    url("/images/college.webp");
  background-position: 40% 75%; /* Center the background image */
  background-size: cover; /* Ensure the image covers the entire element */
}

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

.college__services__card p {
  position: absolute;
  top: 400px;
  left: 30px;
}

/* Button link styles */
.button-link {
  display: inline-block;
  text-decoration: none;
}

/* Apply button styles to the link */
.services__card .button-link button {
  color: #fff;
  padding: 10px 20px;
  border: none;
  outline: none;
  border-radius: 4px;
  background: #131313; /* Sets the background color of the menu */

  position: absolute;
  top: 440px;
  left: 30px;
  font-size: 1rem;
}

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

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

/* Mobile Styles */
@media (max-width: 768px) {
  .services {
    height: auto;
    padding: 2rem 1rem;
  }

  .services h1 {
    font-size: 1.8rem; /* Smaller font size for the heading */
    margin-bottom: 2rem; /* Less margin for better spacing */
  }

  .services__container {
    flex-direction: column; /* Stack cards vertically */
    align-items: center;
  }

  .services__card {
    width: 400px; /* Full-width cards */
    height: 400px; /* Adjust height to fit content */
    margin: 1rem; /* Reduce margin */
  }

  .services__card h2 {
    top: 300px; /* Adjust position for smaller screens */
    left: 20px;
    font-size: 1.2rem; /* Smaller font size */
  }

  .services__card p {
    top: 350px; /* Adjust position for smaller screens */
    left: 20px;
    font-size: 1rem; /* Smaller font size */
  }
}

/* Mobile Responsive */
@media screen and (max-width: 768px) {
  .main__container {
    display: grid;
    grid-template-columns: auto;
    align-items: center;
    justify-self: center;
    width: 100%;
    margin: 0 auto;
    height: 90vh;
  }

  .main__content {
    text-align: center;
    margin-bottom: 4rem;
  }

  .main__content h1 {
    font-size: 2.5rem;
    margin-top: 2rem;
  }

  .main__content h2 {
    font-size: 3rem;
  }

  .main__content p {
    margin-top: 1rem;
    font-size: 1.5rem;
  }
}

@media screen and (max-width: 480px) {
  .main__content h1 {
    font-size: 2rem;
    margin-top: 3rem;
  }

  .main__content h2 {
    font-size: 2rem;
  }

  .main__content p {
    margin-top: 2rem;
    font-size: 1.5rem;
  }

  .main__btn {
    padding: 12px 36px;
    margin: 2.5rem 0;
  }
}
/* 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%;
  }
}