@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500&family=Poppins:wght@400;500&display=swap");

:root {
  --header-height: 4.5rem;
  --max-width: 1600px;
  --header-font: "Oswald", sans-serif;

  /*Color mode HSL(hue, saturation, lightness)*/
  --white-color: hsl(0, 0%, 100%);
  --black-color: hsl(0, 0%, 0%);

  /*========== Font and typography ==========*/
  --body-font: "Poppins", sans-serif;

  /*========== Font weight ==========*/
  --font-regular: 400;
  --font-medium: 500;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;

  /* animation for blogs container */
  --secondary-color: #2c3afc;
  --first-color: hsl(82, 60%, 28%);
  --title-color: hsl(0, 0%, 15%);
  --text-color: hsl(0, 0%, 35%);
  --body-color: hsl(0, 0%, 95%);
  --container-color: hsl(0, 0%, 100%);
  --h2-font-size: 1.25rem;
  --small-font-size: 0.813rem;
}

/* ================================================Footer Section============================================ */

.footer_section__container {
  max-width: var(--max-width);
  margin: auto;
  padding: 5rem 1rem;
  overflow: hidden;
}

.footer {
  overflow: hidden;
  background: linear-gradient(90deg, #fff, #c2c4fd);
  border-bottom: 10px solid var(--white);
}

.footer__container {
  display: grid;
  gap: 4rem;
  text-align: center;
}

.quick_link {
  max-width: 125px;
  max-height: 125px;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 400;
  font-family: var(--body-font);
  color: var(--secondary-color);
  margin-inline: auto;
}

.quick_link_details {
  max-width: 125px;
  max-height: 125px;
  margin-inline: auto;
}

.footer__col img {
  max-width: 125px;
  max-height: 125px;
  margin-inline: auto;
}

.footer__socials {
  margin-block: 4rem 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer__socials a {
  padding: 5px 10px;
  font-size: 1.25rem;
  color: var(--text-dark);
  background-color: var(--white);
  border-radius: 100%;
  transition: 0.3s;
}

.footer__socials a:hover {
  color: var(--white);
  background-color: var(--text-light);
}

.footer__bar {
  font-size: 0.9rem;
  color: var(--secondary-color);
  text-align: center;
}

.contact_details {
  max-width: 125px;
  max-height: 125px;
  margin-bottom: 1rem;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  font-weight: 400;
  font-family: var(--header-font);
  color: var(--secondary-color);
  margin-inline: auto;
}

.footer__col p {
  max-width: 425px;
  max-height: 125px;
  margin-bottom: 1rem;
  color: var(--secondary-color);
  margin-inline: auto;
}

.footer__col p span {
  font-size: 1.2rem;
  margin-right: 10px;
}

.footer__col input {
  padding: 0.75rem 0.5rem;
  width: 100%;
  font-size: 1rem;
  color: var(--text-light);
  outline: none;
  border: none;
  background: transparent;
}

.footer__col .btn:hover {
  color: var(--primary-color);
  background-color: var(--white);
}

.footer__bar__link {
  position: relative;
  isolation: isolate;
  margin-bottom: -10px;
  margin-inline: auto;
  width: 60px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer; /* Add this to indicate it's clickable */
}


.footer__bar__link::after {
  position: absolute;
  content: "";
  top: 25%;
  width: 125%;
  height: 125%;
  rotate: 45deg;
  background-color: var(--white);
  z-index: -1;
}

.footer__bar__link i {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-dark);
}

.footer__bar__link span {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-dark);
}

@media (width > 480px) {
  .blog__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .instagram__flex img {
    max-width: 135px;
  }
}

@media (width > 768px) {
  .blog__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .instagram__flex img {
    max-width: 150px;
  }

  .footer__container {
    grid-template-columns: repeat(3, 1fr);
    text-align: left;
    gap: 2rem;
  }

  .footer__col:nth-child(1) {
    grid-area: 1/2/2/3;
  }

  .footer__col form {
    margin-inline-start: unset;
  }
}