:root {
  --clr-darkblue: #002144;
}

.custom-navbar {
  background-color: var(--clr-white);
  > .container-xl {
    .navbar-collapse {
      .navbar-nav {
        .nav-item {
          .nav-link {
            font-family: var(--font-secondary);
            font-weight: 600;
            color: var(--clr-blue);
            transition: background-color 0s;
          }
          .dropdown-menu {
            margin-top: 0;
            border-radius: 0;
            border: none;
            background-color: var(--clr-darkblue);
          }
          &.is-language {
            .dropdown-menu {
              right: 0;
              left: auto;
              min-width: max-content;
              padding: .5rem;
            }
            /* Google Translate */
            .goog-logo-link,
            .gskiptranslate,
            .goog-te-gadget span,
            .goog-te-banner-frame,
            #goog-gt-tt,
            .goog-te-balloon-frame,
            div#goog-gt- {
              display: none !important;
            }
            .goog-te-gadget {
              color: transparent !important;
              font-size: 0px !important;
            }
            .goog-text-highlight {
              background: none !important;
              box-shadow: none !important;
            }
            select {
              width: 100%;
              font-size: 1rem;
              color: var(--clr-black);
              background: var(--clr-white);
              padding: 1rem;
              margin: 0;
              border: none;
              outline: none;
              -webkit-appearance: none;
              -moz-appearance: none;
              appearance: none;
              background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
              background-repeat: no-repeat;
              background-position: right .75rem center;
              background-size: 1.125rem 1rem;
            }
          }
        }
      }
    }
  }
}

@media (width < 992px) {
  .custom-navbar {
    > .container-xl {
      .navbar-toggler {
        border: none;

        &:focus {
          box-shadow: none;
        }

        .fa-bars {
          font-size: 2rem;
          color: var(--clr-blue);
        }
        .fa-close {
          display: none;
          font-size: 2.375rem;
          color: var(--clr-blue);
        }

        &[aria-expanded="true"] {
          .fa-bars {
            display: none;
          }
          .fa-close {
            display: block;
          }
        }
      }
      .navbar-collapse {
        width: 100%;
        .navbar-nav {
          background-color: var(--clr-darkblue);
          .nav-item {
            &:not(:last-child) {
              border-bottom: 1px solid var(--clr-white);
            }
            .dropdown-menu {
              border: none;
              border-radius: initial;
              background-color: var(--clr-darkblue);
              padding: 0 1rem 1.5rem;
            }
            .nav-link {
              padding: 1rem;
              color: var(--clr-white);
  
              &.show {
                color: var(--clr-white);
                background-color: var(--clr-darkblue);
              }
  
            }
            &.dropdown {
              .nav-link {
                display: flex;
                align-items: center;
                justify-content: space-between;
                &[aria-expanded="true"] {
                  .dropdown-icon {
                    rotate: 180deg;
                  }
                }
              }
            }
            &.has-megamenu {
              .megamenu {
                color: var(--clr-white);
                background-color: var(--clr-darkblue);
                border-radius: initial;
                border: none;
                padding: 0 1rem 1.5rem;
    
                > .container {
                  .megamenu-col {
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;
                    &:not(:last-child) {
                      margin-bottom: 1rem;
                    }
                  }
                  .megamenu-link {
                    display: flex;
                    flex-direction: column;
                    .link-title {
                      font-weight: 400;
                    }    
                    .link-desc {
                      display: none;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

@media (width >= 992px) {
  .custom-navbar {
    > .container-xl {
      align-items: initial;
      .navbar-collapse {
        align-items: initial;
        .navbar-nav {
          gap: 0;
          .nav-item {
            display: flex;
            padding-inline: 1rem;

            &:hover {
              &.dropdown {
                .nav-link {
                  color: var(--clr-white);
                  background-color: var(--clr-darkblue);
                }
              }
            }
            &.dropdown {
              .nav-link {
                pointer-events: none;
              }
            }
            &.has-megamenu {
              position: static;
              .megamenu {
                color: var(--clr-white);
                > .container {
                  max-width: 72rem;
                }
                .megamenu-link {
                  display: block;

                  &:not(:last-child) {
                    margin-bottom: 2rem;
                  }
                  &:hover {
                    .link-title,
                    .link-desc {
                      color: var(--clr-white);
                    }
                  }
                  .link-title {
                    display: block;
                    font-size: 1.25rem;
                    font-weight: 600;
                  }
                  .link-desc {
                    text-wrap: pretty;
                    color: color-mix(in srgb, var(--clr-white) 100%, transparent 25%);
                    margin-bottom: 0;
                  }
                }
              }
            }
            .nav-link {
              display: flex;
              align-items: center;
              justify-content: center;
              padding-inline: 1rem;
              position: relative;

              &[aria-current=page]:before {
                content: "";
                position: absolute;
                bottom: 50%;
                left: 50%;
                translate: -50% calc(-50% + 1em);
                width: calc(100% - 2rem);
                height: 3px;
                background-color: var(--clr-blue);
              }

              .dropdown-icon {
                display: none;
              }
              
              &.dropdown-toggle {
                pointer-events: none;
              }
              
              + .megamenu {
                width: 100%;
                position: absolute;
                top: 100%;
                left: 0;
                padding: 2rem;
              }
            }
          }
        }
      }
    }
  }
}

/* FOOTER */
#main-footer {
  position: relative;
  overflow: hidden;
  border-top: 2.5rem solid var(--clr-green);
  background-color: var(--clr-greenlight);
  color: var(--clr-white);

  .bg-image {
    position: absolute;
    top: -2rem;
    left: 50%;
    translate: -50%;
    filter: brightness(0) invert(1);
    opacity: 7%;
    max-width: 72rem;
    user-select: none;
    pointer-events: none;
  }

  h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--clr-white);
  }
  
  .footer-menu {
    li {
      a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        .fa {
          font-size: 1.25em;
        }
      }
    }  
  }

  .logo {
    img {
      filter: brightness(0) invert(1);
    }
  }

  .ada-icon {
    padding: .25rem;
    background-color: var(--clr-blue);
  }

  .social-media {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    li {
      a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 2em;
        height: 2em;
        border-radius: 50em;
        background-color: var(--clr-cyan);
        line-height: 1;
        &:hover {
          color: var(--clr-white);
          background-color: var(--clr-blue);
        }
      }
    }
  }
}

/* HERO */
.section-hero {
  position: relative;
  overflow: hidden;

  > .container {
    position: relative;

    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      translate: -100% 0;
      width: 500%;
      height: 100%;
      background: var(--clr-blue);
      pointer-events: none;
    }

    .row {
      .arrow-shape-col {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--clr-blue);
        min-height: 16rem;

        @media (width >= 768px) {
          min-height: 32rem;
        }

        &.after-arrow {
          &:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            translate: 25% 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 403.8 536"><path fill="rgba(141,198,63,.9)" d="M210.22 535.5 24 536l193-267.5L24 0h186.22L403.8 268.42 210.22 535.5Z"/><path fill="%2300457c" d="M0 0v536l193-267.5L0 0z"/><path fill="rgba(26,179,116,.9)" d="M0 0h24l193 268.5L24 536H0l193-267.5L0 0z"/></svg>') no-repeat center/cover;
            pointer-events: none;
            min-width: 440px;
            @media (width >= 768px) {
              top: 0;
              right: .5rem;
              translate: calc(100% - 1rem) 0;
            }
          }
        }

        .inner-col {
          z-index: 1;
          @media (width >= 768px) {
            margin-right: -25% !important;
          }
        }

        .arrow-shape {
          position: absolute;
          top: 0;
          right: 0%;
          translate: 75% 0;
          height: 100%;
          z-index: 0;
          pointer-events: none;
        }
      }
    }
  }
}