/* ================= STYLING FOR SHARED COMPONENTS =================   */

/* ================= TOP BAR =================   */
.top-bar {
  display: flex;
  background-color: var(--blue-theme);
  justify-content: space-between;
  color: var(--white);
  padding: 1.5rem;
  height: 1.8rem;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}
.top-bar-outer {
  display: flex;
  gap: 2rem;
}
.outer-flex-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.outer-flex-item > P {
  font-size: small;
  font-weight: 600;
  white-space: inherit;
}

.rounded-icons {
  height: 2.1rem;
  width: 2.1rem;
  border-radius: 50%;
  padding: 0.5rem;
  background-color: var(--light-gray);
}
.rounded-icons:hover {
  padding: 0.03rem;
}
.top-bar-inner {
  display: flex;
  gap: 0.5rem;
  margin-top: -1rem;
}

/* ================= NAVIGATION =================   */
.navbar {
  display: flex;
  justify-content: space-between;
  list-style: none;
  padding: 1.5rem 0.5rem;
  background-color: var(--white);
  box-shadow: 2px 0px 6px var(--gray);
  height: 110px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  margin-top: 3rem;
}
.outter-nav {
  margin: -1rem 1rem;
}
/* logo styling here */
.outter-nav img {
  height: 6rem;
}
.inner-nav {
  display: flex;
}
.inner-nav-item {
  margin: 0.5rem 1rem;
}
.inner-nav-item a {
  font-weight: 600;
  font-size: smaller;
  margin: 1rem 0.5rem;
  color: var(--gray);
  text-transform: uppercase;
}

/* styling for hover over bottom border */
.inner-nav-item a {
  position: relative;
}
.inner-nav-item a::after {
  content: "";
  position: absolute;
  width: 0%;
  height: 2px;
  background: var(--blue-theme);
  left: 0;
  bottom: -5px;
  transition: 0.3s;
}
.inner-nav-item a:hover::after {
  width: 100%;
}
/* END - styling for hover over bottom border */

.inner-nav-item button {
  margin: -1.7rem 0.5rem;
}

/* active page */
#header a.active {
  color: var(--gray);
}

.flex-calendar-icon > img {
  height: 20px;
}
.flex-calendar-icon {
  display: flex;
  align-items: center;
  gap: 3px;
}
/* ================= BUTTONS =================   */
.btn-tp-1 {
  border: none;
  background-color: var(--blue-theme);
  color: var(--white);

  font-weight: 600;
  padding: 0.75rem 1rem;
  min-width: 8rem;
  border-radius: 5px;
  cursor: pointer;
}
.btn-tp-1:hover {
  background-color: var(--gray);
  transition: scale(1.2);
}
.btn-tp-1 p {
  text-transform: uppercase;
  font-size: smaller;
}
/* ================= ANIMATIONS =================   */


/* ANIMATION 1 */

@keyframes myAnimation {
  from {
    right: 200px;
  }
  to {
    left: 200px;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ANIMATION 2 */
/*--reveal on scroll  --- */
.reveal {
  opacity: 0;
  transform: translateY(40px);

  animation: revealAnim linear forwards;
  animation-timeline: view();
  animation-range: entry 20% cover 40%;
}
@keyframes revealAnim {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
 /* ANIMATION 3 */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeDown {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ================= FOOTER =================   */
.footer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4rem;
  padding: 2.5rem;
  background-color: var(--dark-blue);
}
.footer-list {
  display: flex;
  flex-direction: column;
  /* gap: 0.5rem; */
  list-style: none;
}
.footer-item {
  list-style: none;
}
.logo-footer > img {
  height: 150px;
}
.footer-item li {
  color: var(--white);
  padding: 0.8rem;
}
.footer-item h2 {
  font-size: x-large;
  font-weight: 600;
  color: var(--white);
}
.footer-item a {
  padding: 1rem;
  font-weight: 600;
  color: var(--white);
}

/* =================  RESPONSIVE FOOTER  ================= */
@media (width <= 960px) {
  .footer {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--blue);
  }
}

/* ================= RESPONSIVE Top Bar & Navbar =================   */

/* top-bar */
@media screen and (max-width: 814px) {
  .top-bar {
    display: none !important;
  }
  .navbar {
    margin-top: 0;
  }
}

#menu__toggle {
  position: absolute;
  left: -9999px; /* moves horizontal navbar off-screen */
}

@media (width <= 970px) {
  .outter-nav img {
    width: 100%;
  }

  .inner-nav-item {
    text-align: center;
    margin-bottom: 30px;
  }
  .inner-nav-item a {
    color: var(--white);
  }

  #menu__toggle:checked ~ .menu__btn > span {
    transform: rotate(45deg);
  }
  #menu__toggle:checked ~ .menu__btn > span::before {
    top: 0;
    transform: rotate(0);
  }
  #menu__toggle:checked ~ .menu__btn > span::after {
    top: 0;
    transform: rotate(90deg);
  }
  #menu__toggle:checked ~ .inner-nav {
    visibility: visible;
    left: 0;
  }

  /* fadUp styling for the navbar on smaller screen */
  #menu__toggle:checked ~ .inner-nav {
    animation: fadeUp 1s ease forwards;
  }

  .menu__btn {
    display: flex;
    align-items: center;
    position: fixed;
    /* top: 20px; */
    right: 20px;
    width: 26px;
    height: 26px;
    margin: 5px 5px;
    cursor: pointer;
  }

  .menu__btn > span,
  .menu__btn > span::before,
  .menu__btn > span::after {
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: var(--blue-theme);
    transition-duration: 0.25s;
  }

  .menu__btn > span::before {
    content: "";
    top: -8px;
  }
  .menu__btn > span::after {
    content: "";
    top: 8px;
  }
  #menu__toggle {
    opacity: 0;
  }
  .inner-nav {
    flex-direction: column;
    place-items: center;
    display: block;
    position: fixed;
    visibility: hidden;
    top: 115px;
    left: 100%;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 80px 15px;

    opacity: 0.9;
    box-shadow: 1px 0px 6px var(--gray);
    transition-duration: 0.55s;
    z-index: -1;
    background-color: rgb(52, 52, 52);
  }

  .footer-list {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .footer-list-item {
    margin: 0.5rem 0.5rem;
  }
  .copyright {
    height: 15vh;
    display: flex;
    flex-wrap: wrap;
    padding: 1.5rem 2.5rem;
  }
  .copyright > p {
    margin: 5px 5px;
  }
}