*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body{
    background-color: #000;
    font-family: 'Google Sans Flex', sans-serif;
}

select, button, option{
    font-family: 'Google Sans Flex', sans-serif;
}

#navbar {
  width: 100%;
  position: sticky;
  top: 0;
  background-color: transparent !important;
  z-index: 9999999999999;
  border-bottom: 1px solid #ffffff1a;
  backdrop-filter: blur(24px);
}

.menu-area {
  margin: 0 auto;
  padding: 0px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media (max-width: 780px){
  .menu-area{
    padding: 8px 10px;
  }
}

.logo-site img {
  height: 52px;
}

.links-menu {
  display: flex;
  gap: 10px;
  list-style: none;
}

.nav-link {
  color: #fff;
  text-decoration: none;
  font-size: large;
  padding: 25px 15px;
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
}

.nav-link svg{
  width: 22px;
  height: 22px;
}

/* Hover com underline animado */
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 0;
  height: 3px;
  background: #fff;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link:hover{
  color: white;
}

/* Área extra */
.menu-extra {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Botão de busca */
.search {
  background: #ffffff1d;
  padding: 15px 13px;
  border-radius: 50%;
  border: none;
  color: #fff;
  font-size: medium;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: .2s;
}

.search:hover {
  color: #fff;
  background: #ffffff3a;
}

/* Responsivo */
@media (max-width: 768px) {
  .links-menu {
    display: none;
  }
}

.link-active{
    font-weight: bold;
    pointer-events: none;
}

.link-active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 3px;
  background: #fff;
  transition: width 0.3s ease;
}
#user{
  display: none;
}

#usericonphoto{
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNTAgMTAwYzI3LjYxNCAwIDUwLTIyLjM4NiA1MC01MFM3Ny42MTQgMCA1MCAwIDAgMjIuMzg2IDAgNTBzMjIuMzg2IDUwIDUwIDUwWiIgZmlsbD0idXJsKCNhKSIvPjxwYXRoIGQ9Ik04Ni43MTggODMuOTM5Qzc3LjU4MyA5My44MTYgNjQuNTE0IDEwMCA1MCAxMDBjLTE0LjczIDAtMjcuOTc0LTYuMzctMzcuMTI0LTE2LjUwNiAxLjIxMi0zLjA5IDIuOTIyLTUuOTAyIDUuMzA0LTguMjI4QzI1LjQ2IDY4LjE1NyAzOC40MjUgNjUuMjM1IDUwIDY1LjIzNWMxMS41NTQgMCAyMy42NTUgMi45MDYgMzAuOTMzIDkuOTkzIDIuNTEyIDIuNDQ2IDQuNDA1IDUuNDMgNS43ODUgOC43MVoiIGZpbGw9InVybCgjYikiLz48cGF0aCBkPSJNNjkuNTIgMzcuMTFjLjc5NC0xMi4yMTMtNS44OS0yMi4yNjYtMTkuNDY4LTIyLjI2Ni0xMy41NzkgMC0yMC4yNjMgMTAuMDUzLTE5LjQ2OCAyMi4yNjUuNzk1IDEyLjIxMyA4Ljc5NCAyMC43MDMgMTkuNDY4IDIwLjcwMyAxMC42NzMgMCAxOC42NzMtOC40OSAxOS40NjgtMjAuNzAzWiIgZmlsbD0idXJsKCNjKSIvPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgeDE9IjAiIHkxPSIwIiB4Mj0iMTAwIiB5Mj0iMTAwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iIzRDNzE4RSIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzJCNDA1MyIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJiIiB4MT0iNDEuNTU0IiB5MT0iMzAuMzQ3IiB4Mj0iODIuNzEyIiB5Mj0iNzEuNTM5IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIuODUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPjwvbGluZWFyR3JhZGllbnQ+PGxpbmVhckdyYWRpZW50IGlkPSJjIiB4MT0iNDEuNTU0IiB5MT0iMzAuMzQ3IiB4Mj0iODIuNzEyIiB5Mj0iNzEuNTM5IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agc3RvcC1jb2xvcj0iI2ZmZiIgc3RvcC1vcGFjaXR5PSIuODUiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjwvc3ZnPg==');
    height: 45px;
    width: 45px;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    border-radius: 50%;
    justify-content: center;
    text-align: center;
    align-items: center;
    outline: 0px;
    cursor: pointer;
    transition: .2s ease-in-out;
}

#usericonphoto:hover{
    outline: 3px solid white;
    outline-offset: 4px;
}

.home {
  margin: 0px auto;
  min-height: 100vh;
}

.titlearea{
    color: white;
}

        .carousel-container {
            position: relative;
        }

        .carousel-wrapper {
            overflow: hidden;
        }

        .carousel {
            padding-left: 75px;
            padding-right: 10px;
            display: flex;
            gap: 23px;
            padding-top: 40px;
            padding-bottom: 40px;
            transition: transform 0.4s ease-in-out;
        }

        .card {
            min-width: 225px;
            height: 360px;
            background-color: #202020;
            border-radius: 20px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: #888;
            transition: transform 0.3s ease, background-color 0.3s ease;
            cursor: pointer;
        }

        .card:hover {
            transform: scale(1.05);
            outline: 4px solid white;
            outline-offset: 4px;
        }

        .nav-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            border: none;
            color: white;
            width: 110px;
            height: 100%;
            background-color: transparent;
            cursor: pointer;
            font-size: 44px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10;
            transition: background-color 0.3s ease, opacity 0.3s ease;
            opacity: 0;
            pointer-events: none;
        }

        .nav-button.visible {
            opacity: 1;
            pointer-events: auto;
        }

        .nav-button.left {
            left: 0px;
            background: linear-gradient(to right, black 0%, rgba(0, 0, 0, 0.887) 10%, transparent 100%) !important;
        }

        .nav-button.right {
            right: 0px;
            opacity: 1;
            pointer-events: auto;
            background: linear-gradient(to left, black 0%, rgba(0, 0, 0, 0.887) 10%, transparent 100%) !important;
        }

        .nav-button:disabled {
            opacity: 0;
            cursor: not-allowed;
            display: none;
        }

        .nav-button svg{
          width: 40px;
          height: 40px;
        }

footer {
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  z-index: 99999;
}

.footer-container {
  margin: 0 auto;
  padding: 32px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Links sociais */
.footer-links {
  display: flex;
  gap: 20px;
}

.footer-links a {
  color: #ffffff;
  opacity: 0.7;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.footer-links a:hover {
  opacity: 1;
  transform: translateY(-3px);
}

.footer-links svg {
  width: 24px;
  height: 24px;
}

/* Copyright */
.footer-copyright {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.logo-copyright img {
  height: 28px;
  width: auto;
  opacity: 0.9;
}

.footer-copyright p {
  font-size: 13px;
  color: #bdbdbd;
}

/* Desktop */
@media (min-width: 768px) {
  .footer-container {
    flex-direction: row;
    justify-content: space-between;
  }

  .footer-copyright {
    display: flex !important;
    gap: 12px;
    text-align: left;
  }
}

.h2copyright img{
  width: 40px;
  height: 40px;
}

.h2copyright{
  margin-top: 40px;
  display: flex;
  color: white;
  justify-content: center;
  align-items: middle;
  font-size: xx-large;
  gap: 10px;
  margin-bottom: 40px;
}

.textcopyright{
  width: 95%;
  max-width: 1350px;
  margin: auto;
  color: white;
  font-size: larger;
  background-color: #101010;
  padding: 30px;
  border-radius: 15px;
}

.linkdirection{
  background-color: #101010;
  text-align: center;
  padding: 20px;
  max-width: 1350px;
  width: 95%;
  margin: 20px auto;
  border-radius: 10px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  gap: 10px;
}

a{
  text-decoration: none;
  color: white;
}

/* Bottom Menu Styles */
.bottom-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.887);
    backdrop-filter: blur(20px);
    display: none;
    justify-content: space-around;
    align-items: center;
    padding: 8px 0 12px;
    z-index: 99999999;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.bottom-menu a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 500;
    padding: 8px 12px;
    transition: all 0.3s ease;
    position: relative;
    flex: 1;
    max-width: 100px;
}

.bottom-menu a span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.bottom-menu a:hover {
    color: #fff;
    transform: translateY(-2px);
}

.bottom-menu a.active {
    color: #fff;
}

.bottom-menu a.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    border-radius: 0 0 3px 3px;
}

/* Icons for each menu item */
.bottom-menu a:nth-child(1) span::before {
    content: '';
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='currentColor' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpolyline points='9 22 9 12 15 12 15 22'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.bottom-menu a:nth-child(2) span::before {
    content: '';
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 26 26'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.63687 0.463052C7.89486 0.233728 8.2899 0.256966 8.51922 0.514955L12.7282 5.25001H13.2722L17.4812 0.514955C17.7105 0.256966 18.1055 0.233728 18.3635 0.463052L19.2978 1.29351C19.5558 1.52283 19.579 1.91788 19.3497 2.17586L16.6171 5.25001L20.577 5.25001C21.3947 5.24993 22.1293 5.24986 22.724 5.32981C23.3732 5.41709 24.0392 5.61976 24.5847 6.1653C25.1303 6.71085 25.3329 7.37687 25.4202 8.02607C25.5002 8.62071 25.5001 9.35536 25.5 10.173V20.327C25.5001 21.1447 25.5002 21.8793 25.4202 22.474C25.3329 23.1232 25.1303 23.7892 24.5847 24.3347C24.0392 24.8803 23.3732 25.0829 22.724 25.1702C22.1293 25.2502 21.3947 25.2501 20.577 25.25H5.423C4.60534 25.2501 3.8707 25.2502 3.27607 25.1702C2.62687 25.0829 1.96085 24.8803 1.4153 24.3347C0.869752 23.7892 0.667086 23.1232 0.579803 22.474C0.499857 21.8793 0.499927 21.1447 0.500005 20.327V10.173C0.499927 9.35535 0.499857 8.6207 0.579803 8.02607C0.667086 7.37687 0.869752 6.71085 1.4153 6.1653C1.96085 5.61976 2.62687 5.41709 3.27607 5.32981C3.8707 5.24986 4.60534 5.24993 5.423 5.25001L9.38328 5.25001L6.6507 2.17586C6.42138 1.91788 6.44461 1.52283 6.7026 1.29351L7.63687 0.463052ZM17.6875 11.9688C17.6875 10.8469 18.5969 9.93752 19.7188 9.93752C20.8406 9.93752 21.75 10.8469 21.75 11.9688C21.75 13.0906 20.8406 14 19.7188 14C18.5969 14 17.6875 13.0906 17.6875 11.9688ZM17.6875 18.8438C17.6875 17.7219 18.5969 16.8125 19.7188 16.8125C20.8406 16.8125 21.75 17.7219 21.75 18.8438C21.75 19.9656 20.8406 20.875 19.7188 20.875C18.5969 20.875 17.6875 19.9656 17.6875 18.8438Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.bottom-menu a:nth-child(3) span::before {
    content: '';
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg fill='white' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 26 26'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M20.5 6.75001C21.3485 6.75001 22.1109 6.74693 22.7241 6.82936C23.3733 6.91665 24.039 7.12009 24.5845 7.66554L24.7737 7.8755C25.179 8.37723 25.3443 8.95797 25.4207 9.52589C25.5031 10.1391 25.5 10.9015 25.5 11.75V20.5C25.5 21.3485 25.5031 22.1109 25.4207 22.7241C25.3443 23.2921 25.179 23.8728 24.7737 24.3745L24.5845 24.5845C24.039 25.13 23.3733 25.3334 22.7241 25.4207C22.1109 25.5031 21.3485 25.5 20.5 25.5H11.75C10.9015 25.5 10.1391 25.5031 9.52589 25.4207C8.95797 25.3443 8.37723 25.179 7.8755 24.7737L7.66554 24.5845C7.12009 24.039 6.91665 23.3733 6.82936 22.7241C6.74693 22.1109 6.75001 21.3485 6.75001 20.5V11.75C6.75001 10.9015 6.74692 10.1391 6.82936 9.52589C6.91666 8.87676 7.12005 8.21104 7.66554 7.66554L7.8755 7.47633C8.37724 7.07101 8.95796 6.90574 9.52589 6.82936C10.1391 6.74692 10.9015 6.75001 11.75 6.75001H20.5ZM16.125 10.4317C15.5119 10.4317 15.0144 10.9282 15.0142 11.5413V15.0142H11.5413C10.9282 15.0144 10.4317 15.5119 10.4317 16.125C10.4317 16.7381 10.9282 17.2356 11.5413 17.2359H15.0142V20.7088C15.0144 21.3218 15.5119 21.8183 16.125 21.8184C16.7381 21.8184 17.2356 21.3218 17.2359 20.7088V17.2359H20.7088C21.3218 17.2356 21.8184 16.7381 21.8184 16.125C21.8183 15.5119 21.3218 15.0144 20.7088 15.0142H17.2359V11.5413C17.2356 10.9282 16.7381 10.4317 16.125 10.4317Z'/%3E%3Cpath d='M14.25 0.500015C15.0985 0.500015 15.8609 0.496927 16.4741 0.579361C17.1233 0.666647 17.789 0.870095 18.3345 1.41554L18.5237 1.6255C18.929 2.12724 19.0943 2.70797 19.1707 3.27589C19.2101 3.56883 19.229 3.89588 19.239 4.25002H10.5C10.0168 4.25001 9.27697 4.24221 8.62868 4.32936C7.91977 4.42469 6.8538 4.68302 5.90285 5.53542L5.71486 5.71486C4.71908 6.71066 4.43107 7.87245 4.32936 8.62868C4.24223 9.27688 4.25001 10.0168 4.25002 10.5V19.239C3.89588 19.229 3.56883 19.2101 3.27589 19.1707C2.70797 19.0943 2.12724 18.929 1.6255 18.5237L1.41554 18.3345C0.870095 17.789 0.666647 17.1233 0.579361 16.4741C0.496927 15.8609 0.500015 15.0985 0.500015 14.25V5.50001C0.500015 4.65151 0.496916 3.88911 0.579361 3.27589C0.666658 2.62676 0.870048 1.96104 1.41554 1.41554L1.6255 1.22633C2.12724 0.82101 2.70796 0.655737 3.27589 0.579361C3.88911 0.496916 4.6515 0.500015 5.50001 0.500015H14.25Z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.bottom-menu a:nth-child(4) span::before {
    content: '';
    width: 40px;
    height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v8l3-3 3 3V2'/%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Responsive - Show bottom menu on mobile */
@media screen and (max-width: 768px) {
    .bottom-menu {
        display: flex;
    }

    .footer-container{
      margin-bottom: 60px;
    }
}

@media screen and (max-width: 480px) {
    .bottom-menu a {
        font-size: 10px;
        padding: 6px 8px;
    }
    
    .bottom-menu a span {
        width: 22px;
        height: 22px;
    }
}