@import url("layout/header.css");
@import url("layout/footer.css");
@import url("layout/banner.css");
@import url("pages/homepage.css");
@import url("pages/services.css");
@import url("pages/about.css");
@import url("pages/sources.css");
@import url("pages/contact.css");
@import url("pages/blog.css");
@import url("pages/blog-detail.css");
@import url("pages/faq.css");
@import url("pages/services-categories.css");
@import url("components/form.css");
@import url("components/accordion.css");
@import url("components/modal.css");
:root {
  color-scheme: light;
  --color-white: #fff;
  --color-white-2: #f7faff;
  --color-black: #000;
  --color-darkblue: #00313c;
  --color-navy: #0d3457;
  --color-gray: #c7c8ca;
  --color-green: #54b854;
  --color-gold: #a68f59;
  --color-darkgray: #55616d;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}
body {
  font-family: Satoshi;
  background: #f4f4f4;
  max-width: 1920px;
  margin: 0 auto;
}
.custom-container {
  padding: 0 5vw;
}
.right-padding {
  padding-left: 5vw;
}
.blue-btn {
  width: 200px;
  height: 60px;
  border-radius: 10px;
  border: 1px solid var(--color-darkblue);
  background: var(--color-darkblue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-family: Satoshi;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.3s ease all;
  -webkit-appearance: none;
}
.blue-btn:hover {
  box-shadow: 0 0 5px 0 var(--color-darkblue) inset, 0 0 10px 2px var(--color-darkblue);
  background: transparent;
  color: var(--color-darkblue);
}
.white-btn {
  width: 200px;
  height: 60px;
  border-radius: 10px;
  border: 1px solid var(--color-gray);
  background: var(--color-white-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-darkblue);
  font-family: Satoshi;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.3s ease all;
  -webkit-appearance: none;
}
.white-btn:hover {
  box-shadow: 0 0 5px 0 var(--color-darkblue) inset, 0 0 10px 2px var(--color-darkblue);
  border-color: var(--color-darkblue);
  background: var(--color-darkblue);
  color: var(--color-white);
}
.green-btn {
  width: 100%;
  height: 60px;
  border: 1px solid var(--color-green);
  border-radius: 5px;
  background: var(--color-green);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-family: Satoshi;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  text-decoration: none;
  transition: 0.3s ease all;
  -webkit-appearance: none;
}
.green-btn:hover {
  box-shadow: 0 0 5px 0 var(--color-green) inset, 0 0 10px 2px var(--color-green);
  background: transparent;
  color: var(--color-green);
}
.green-btn-xl {
  width: 330px;
  height: 60px;
  border: 1px solid var(--color-green);
  border-radius: 5px;
  background: var(--color-green);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-family: Satoshi;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%;
  text-decoration: none;
  transition: 0.3s ease all;
  -webkit-appearance: none;
}
.green-btn-xl:hover {
  box-shadow: 0 0 5px 0 var(--color-green) inset, 0 0 10px 2px var(--color-green);
  background: transparent;
  color: var(--color-green);
}
.gold-btn {
  width: 220px;
  height: 60px;
  border-radius: 10px;
  border: 1px solid var(--color-gold);
  background: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-family: Satoshi;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
  transition: 0.3s ease all;
  -webkit-appearance: none;
}
.gold-btn:hover {
  box-shadow: 0 0 5px 0 var(--color-gold) inset, 0 0 10px 2px var(--color-gold);
  background: transparent;
  color: var(--color-gold);
}
.gold-btn-rounded {
  width: 190px;
  height: 60px;
  border-radius: 90px;
  border: 1px solid var(--color-gold);
  background: var(--color-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-family: Satoshi;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
  transition: 0.3s ease all;
  -webkit-appearance: none;
}
.gold-btn-rounded:hover {
  box-shadow: 0 0 5px 0 var(--color-gold) inset, 0 0 10px 2px var(--color-gold);
  background: transparent;
  color: var(--color-gold);
}
.published-date {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 0.5rem;
}
.published-date > p {
  color: var(--color-gray);
  font-family: Satoshi;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.32px;
}
.blog-summary-card {
  display: flex;
  border-radius: 10px;
  border: 1px solid #d9d9d9;
  background: #fff;
  padding: 0.5rem;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.card-img {
  width: fit-content;
}
.card-img > img {
  width: 175px;
  height: 100%;
  aspect-ratio: 1/1;
}
.card-content > .publishing-date {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 0.5rem;
}
.card-content > .publishing-date > p {
  color: var(--color-gray);
  font-family: Satoshi;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.32px;
}
.card-heading > h2 {
  color: var(--color-darkblue);
  font-family: Satoshi;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 0.4px;
}
.card-content {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: space-between;
}
.card-content > .card-summary {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-summary > p {
  color: var(--color-darkblue);
  font-family: Satoshi;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
}
@media (max-width: 1600px) {
  .card-heading > h2 {
    font-size: 18px;
    line-height: 26px;
  }
  .card-summary > p {
    font-size: 16px;
    line-height: 26px;
  }
  .blue-btn,
  .white-btn {
    width: 180px;
    font-size: 16px;
  }
  .gold-btn {
    width: 200px;
    font-size: 16px;
  }
}
@media (max-width: 1400px) {
  .card-img > img {
    width: 150px;
  }
  .card-heading > h2 {
    font-size: 16px;
    line-height: 22px;
  }
  .card-summary > p {
    font-size: 14px;
    line-height: 22px;
  }
  .blue-btn,
  .white-btn {
    width: 160px;
    height: 55px;
    font-size: 14px;
  }
  .gold-btn {
    width: 180px;
    height: 55px;
    font-size: 14px;
  }
}
@media (max-width: 1200px) {
  .blue-btn,
  .white-btn {
    width: 140px;
    height: 50px;
  }
  .gold-btn {
    width: 160px;
    height: 50px;
  }
  .card-content > .publishing-date > p {
    font-size: 14px;
  }
}
@media (max-width: 768px) {
  .card-img > img {
    display: none;
  }
  .card-heading > h2 {
    font-size: 14px;
  }
  .card-summary > p {
    font-size: 12px;
    line-height: 18px;
  }
  .blue-btn,
  .white-btn {
    width: 120px;
    height: 45px;
    font-size: 12px;
  }
  .gold-btn {
    width: 140px;
    height: 45px;
    font-size: 12px;
  }
  .card-content > .publishing-date > p {
    font-size: 12px;
  }
}