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

:root {
  --main-green-dark: #337a71;
  --main-green: #3e978c;
  --dark-green: #031f23;
}

body {
  overflow-x: hidden;
  font-family: "Cairo", sans-serif;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0 !important;
}

a.nav-link {
  color: rgba(0, 0, 0, 0.4);
  font-weight: 600;
  position: relative;
  height: 100%;
}
/*a.nav-link::after {*/
/*  content: "";*/
/*  background: var(--main-green) !important;*/
/*  width: 0;*/
/*  height: 2px;*/
/*  right: 50%;*/
/*  left: 50%;*/
/*  bottom: 0;*/
/*  transform: translateX(50%);*/
/*  position: absolute;*/
/*  transition: ease-in-out all 0.1s;*/
/*}*/
/*a.nav-link:hover::after {*/
/*  width: 100%;*/
/*}*/

/*a.nav-link:hover.active::after,*/
/*a.nav-link.router-link-active::after {*/
/*  width: 0;*/
/*}*/

a.nav-link.active,
a.nav-link.router-link-active {
  color: var(--main-green) !important;
  border-bottom: 2px solid var(--main-green);
}

.bg-green-main-dark {
  background-color: var(--main-green-dark);
}
.bg-green-main {
  background-color: var(--main-green);
}
.bg-dark-green {
  background-color: var(--dark-green);
}
.text-main-green {
  color: var(--main-green);
  fill: var(--main-green);
}

.mt-32 {
  margin-top: 32px;
}
.mt-60px {
  margin-top: 60px;
}
.pt-60px {
  padding-top: 60px;
}

.mt-120px {
  margin-top: 120px;
}
.pt-120px {
  padding-top: 120px;
}
.w-24px {
  width: 24px;
}
.h-24px {
  height: 24px;
}

.w-32px {
  width: 32px;
}
.h-32px {
  height: 32px;
}
.w-80px {
  width: 80px;
}
.h-80px {
  height: 80px;
}
.h-140px {
  height: 140px;
}
.h-250px {
  height: 250px;
}
.h-350px {
  height: 350px;
}
.h-520px {
  height: 520px;
}
.minh-520px {
  min-height: 520px;
}

.w-48px {
  width: 48px;
}
.h-48px {
  height: 48px;
}

.w-80px {
  width: 80px;
}

.h-80px {
  height: 80px;
}
.h-400px {
  height: 400px;
}

.flex-1 {
  flex: 1;
}
.flex-2 {
  flex: 2;
}
.dir-ltr {
  direction: ltr;
}
.dir-rtl {
  direction: rtl;
}

.z--1 {
  z-index: -1;
}
.top-75 {
  top: 75px;
}
.top--100 {
  top: -100%;
}

.object-cover {
  object-fit: cover;
}
/* max width screen */
.mw-xs {
  max-width: 380px;
}

.mw-sm {
  max-width: 576px;
}
.mw-md {
  max-width: 768px;
}
.mw-lg {
  max-width: 992px;
}

/* components */
.btn.btn-primary {
  background-color: var(--main-green);
  border: none;
}

.btn.btn-primary:active {
  background-color: var(--main-green-dark);
}

.btn-text {
  text-decoration: underline;
  font-weight: bold;
  color: var(--main-green);
  font-size: 16px;
}
.btn-text:hover {
  color: var(--main-green-dark);
}
.btn-text:active {
  border: 1px solid transparent !important;
  background-color: #f2f2f2 !important;
}

.v-line {
  width: 1px;
  height: 54px;
  background-color: #d9d9d9;
}
.v-line-full {
  width: 1px;
  background-color: #d9d9d9;
}

.h-line {
  width: 54px;
  height: 1px;
  background-color: #d9d9d9;
}
.gutter-line-l {
  width: 1px;
  background-color: #000;
  height: 95%;
  position: absolute;
  left: -2px;
  top: 48px;
}
.gutter-line-r {
  right: -2px;
  width: 1px;
  background-color: #000;
  height: 95%;
  position: absolute;
  top: 48px;
}

.sm-blog-img {
  max-width: 100px;
  height: auto;
}

.no {
  display: block !important;
}