.essential-resources {
  color: #fff;
  align-items: center;
  background: radial-gradient(ellipse at -132% 58%, #E34A21 -49%, #000000 68%);
  padding: 180px 0;
  margin-top: -180px;
}
.essential-resources a:hover {
  color: unset;
}
.essential-resources .container .left {
  flex: 1;
  display: flex;
  gap: 12px;
  align-items: baseline;
}
.essential-resources .container .left .title-dot {
  margin-top: 2%;
}
.essential-resources .container .essential-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.essential-resources .container .essential-grid a:hover {
  color: rgba(255, 255, 255, 0.56);
}
.essential-resources .container .essential-grid .essential-card {
  position: relative;
  background: rgb(21, 21, 21) url("../images/whychoose-gradient.png") no-repeat;
  background-size: cover;
  background-position: -366px;
  transition: background-position 0.6s ease;
  backdrop-filter: blur(29.41px);
  -webkit-backdrop-filter: blur(29.41px);
  border-radius: 16px;
  padding: 35px;
  overflow: hidden;
  z-index: 1;
}
.essential-resources .container .essential-grid .essential-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  border: 1px solid;
  -webkit-mask: linear-gradient(120.79deg, rgba(0, 0, 0, 0.56) 3.3%, rgba(0, 0, 0, 0.32) 51.34%, rgba(0, 0, 0, 0.56) 97.56%);
  mask: linear-gradient(120.79deg, rgba(0, 0, 0, 0.56) 3.3%, rgba(0, 0, 0, 0.32) 51.34%, rgba(0, 0, 0, 0.56) 97.56%);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 1.7s ease;
  pointer-events: none;
  z-index: 2;
}
.essential-resources .container .essential-grid .essential-card .shape {
  opacity: 0;
}
.essential-resources .container .essential-grid .essential-card:hover {
  background: #0A0A0A url("../images/whychoose-gradient.png") no-repeat center center;
  background-size: cover;
  transition: opacity 0.3s ease 0s, background-position 1s ease 0s;
}
.essential-resources .container .essential-grid .essential-card:hover::before {
  opacity: 1;
}
.essential-resources .container .essential-grid .essential-card:hover .icon {
  opacity: 100%;
}
.essential-resources .container .essential-grid .essential-card:hover .shape {
  position: absolute;
  background: url(../images/home/ellipse.png) no-repeat center;
  background-size: 69% !important;
  opacity: 1;
  width: 100%;
  height: 100%;
}
.essential-resources .container .essential-grid .essential-card:hover .card1-essential {
  right: -47%;
  top: -30%;
  transform: rotate(-60deg) scale(0.8);
  animation: essential-animation1 1s infinite ease-in-out alternate, whyfadeInOut 3s ease-in-out;
}
.essential-resources .container .essential-grid .essential-card:hover .card2-essential {
  right: -14%;
  top: -41%;
  transform: rotate(437deg) scaleX(-1) scale(0.8);
  animation: essential-animation2 1s infinite ease-in-out alternate, whyfadeInOut 3s ease-in-out;
}
.essential-resources .container .essential-grid .essential-card:hover .card3-essential {
  right: -55% !important;
  top: unset;
  bottom: 11px;
  transform: rotate(-189deg) scaleX(-1);
  animation: essential-animation3 3s infinite ease-in-out alternate, whyfadeInOut 3s ease-in-out;
}
.essential-resources .container .essential-grid .essential-card:hover .card4-essential {
  right: -42% !important;
  top: -43% !important;
  transform: rotate(-201deg) scaleX(-1);
  animation: essential-animation4 1s infinite ease-in-out alternate, whyfadeInOut 3s ease-in-out;
}
.essential-resources .container .essential-grid .essential-card:hover .card-title img {
  width: 15px;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}
.essential-resources .container .essential-grid .essential-card .icon {
  width: 42px;
  opacity: 50%;
  margin-bottom: 112px;
}
.essential-resources .container .essential-grid .essential-card .card-title {
  font-size: 18px;
  margin-bottom: 10px;
  position: relative;
  z-index: 3;
  font-weight: 400;
  line-height: 1.3;
  font-family: "Sentient";
  color: #C0B9B8;
  display: flex;
  align-items: center;
  gap: 12px;
}
.essential-resources .container .essential-grid .essential-card .card-title img {
  width: 15px;
  opacity: 0;
}
.essential-resources .container .essential-grid .essential-card .card-title span {
  display: block;
}
.essential-resources .container .essential-grid .essential-card .txt {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.72);
  position: relative;
  z-index: 3;
}
.essential-resources .container .essential-grid .essential-card .txt span {
  display: block;
}

@keyframes essential-animation1 {
  from {
    transform: rotate(-60deg) translateX(0);
  }
  to {
    transform: rotate(-50deg) translateX(5px);
  }
}
@keyframes essential-animation2 {
  from {
    transform: rotate(437deg) scaleX(-1) translateY(0);
  }
  to {
    transform: rotate(428deg) scaleX(-1) translateY(5px);
  }
}
@keyframes essential-animation3 {
  from {
    transform: rotate(-201deg) scaleX(-1) translateX(0);
  }
  to {
    transform: rotate(-220deg) scaleX(-1) translateX(5px);
  }
}
@keyframes essential-animation4 {
  from {
    transform: rotate(-201deg) scaleX(-1) translateX(0);
  }
  to {
    transform: rotate(-220deg) scaleX(-1) translateX(5px);
  }
}
@keyframes whyfadeInOut {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media (max-width: 575.98px) {
  .essential-resources {
    color: #fff;
    align-items: center;
    background: none;
    padding: 0;
    margin-top: unset;
  }
  .essential-resources .container .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  .essential-resources .container .left .title-dot {
    margin-top: 0;
  }
  .essential-resources .container .essential-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    background: none;
  }
  .essential-resources .container .essential-grid .essential-card {
    border-radius: 12px;
    padding: 20px;
    height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #0A0A0A url("../images/whychoose-gradient.png") no-repeat center center;
    background-size: cover;
  }
  .essential-resources .container .essential-grid .essential-card:hover {
    transition: opacity 0.3s ease 0.3s, background-position 2s ease 0.3s;
  }
  .essential-resources .container .essential-grid .essential-card:hover::before {
    opacity: 1;
  }
  .essential-resources .container .essential-grid .essential-card:hover .icon {
    opacity: 100%;
  }
  .essential-resources .container .essential-grid .essential-card:hover .shape {
    position: absolute;
    background: url(../images/home/ellipse.png) no-repeat center;
    background-size: 69% !important;
    opacity: 1;
    width: 100%;
    height: 100%;
  }
  .essential-resources .container .essential-grid .essential-card:hover .card1-essential {
    right: -57%;
    top: -30%;
    transform: rotate(-60deg) scale(0.8);
    animation: essential-animation1 3s infinite ease-in-out alternate, whyfadeInOut 3s ease-in-out;
  }
  .essential-resources .container .essential-grid .essential-card:hover .card2-essential {
    right: -36%;
    top: -32%;
    transform: rotate(113deg) scaleX(-1) scale(0.8);
    animation: essential-animation2 3s infinite ease-in-out alternate, whyfadeInOut 3s ease-in-out;
  }
  .essential-resources .container .essential-grid .essential-card:hover .card3-essential {
    right: -55% !important;
    top: unset;
    bottom: 11px;
    transform: rotate(-189deg) scaleX(-1);
    animation: essential-animation3 3s infinite ease-in-out alternate, whyfadeInOut 3s ease-in-out;
  }
  .essential-resources .container .essential-grid .essential-card .icon {
    width: 32px;
    opacity: 100%;
  }
  .essential-resources .container .essential-grid .essential-card .shape {
    position: absolute;
    background: url(../images/home/ellipse.png) no-repeat center;
    background-size: 69% !important;
    opacity: 1;
    width: 100%;
    height: 100%;
  }
  .essential-resources .container .essential-grid .essential-card .card1-essential {
    right: -57%;
    top: -30%;
    transform: rotate(-60deg) scale(0.8);
    animation: essential-animation1 3s infinite ease-in-out alternate, whyfadeInOut 3s ease-in-out;
  }
  .essential-resources .container .essential-grid .essential-card .card2-essential {
    right: -36%;
    top: -32%;
    transform: rotate(113deg) scaleX(-1) scale(0.8);
    animation: essential-animation2 3s infinite ease-in-out alternate, whyfadeInOut 3s ease-in-out;
  }
  .essential-resources .container .essential-grid .essential-card .card3-essential {
    right: -55% !important;
    top: unset;
    bottom: 11px;
    transform: rotate(-189deg) scaleX(-1);
    animation: essential-animation3 3s infinite ease-in-out alternate, whyfadeInOut 3s ease-in-out;
  }
  .essential-resources .container .essential-grid .essential-card .card4-essential {
    right: -34%;
    top: -41%;
    transform: rotate(437deg) scaleX(-1) scale(0.8);
    animation: essential-animation4 3s infinite ease-in-out alternate, whyfadeInOut 3s ease-in-out;
  }
  .essential-resources .container .essential-grid .essential-card .card-title {
    font-size: 24px;
    margin-bottom: 10px;
    font-weight: 400;
    line-height: 1.3;
    font-family: "Sentient";
    color: #C0B9B8;
  }
  .essential-resources .container .essential-grid .essential-card .card-title img {
    opacity: 1;
  }
  .essential-resources .container .essential-grid .essential-card .card-title span {
    display: block;
  }
  .essential-resources .container .essential-grid .essential-card .txt {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.72);
  }
  .essential-resources .container .essential-grid .essential-card .txt span {
    display: block;
  }
}
@media (max-width: 375.98px) {
  .essential-resources .container .essential-grid .essential-card .icon {
    width: 28px;
    margin-bottom: 60px;
  }
  .essential-resources .container .essential-grid .essential-card .card-title {
    font-size: 14px;
    margin-bottom: 6px;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .essential-resources .container .essential-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .essential-resources .container .essential-grid .essential-card .icon {
    width: 36px;
    margin-bottom: 80px;
  }
  .essential-resources .container .essential-grid .essential-card .card-title {
    font-size: 18px;
    margin-bottom: 6px;
  }
  .essential-resources .container .essential-grid .essential-card .txt {
    font-size: 14px;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .essential-resources {
    color: #fff;
    align-items: center;
    background: none;
    padding: 0;
    margin-top: unset;
  }
  .essential-resources .container .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
  .essential-resources .container .left .title-dot {
    margin-top: 0;
  }
  .essential-resources .container .essential-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    background: none;
  }
  .essential-resources .container .essential-grid .essential-card {
    border-radius: 12px;
    padding: 20px;
    height: 294px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #0A0A0A url("../images/whychoose-gradient.png") no-repeat center center;
    background-size: cover;
  }
  .essential-resources .container .essential-grid .essential-card:hover {
    transition: opacity 0.3s ease 0.3s, background-position 2s ease 0.3s;
  }
  .essential-resources .container .essential-grid .essential-card:hover::before {
    opacity: 1;
  }
  .essential-resources .container .essential-grid .essential-card:hover .icon {
    opacity: 100%;
  }
  .essential-resources .container .essential-grid .essential-card:hover .shape {
    position: absolute;
    background: url(../images/home/ellipse.png) no-repeat center;
    background-size: 69% !important;
    opacity: 1;
    width: 100%;
    height: 100%;
  }
  .essential-resources .container .essential-grid .essential-card:hover .card1-essential {
    right: -57%;
    top: -30%;
    transform: rotate(-60deg) scale(0.8);
    animation: essential-animation1 3s infinite ease-in-out alternate, whyfadeInOut 3s ease-in-out;
  }
  .essential-resources .container .essential-grid .essential-card:hover .card2-essential {
    right: -36%;
    top: -32%;
    transform: rotate(113deg) scaleX(-1) scale(0.8);
    animation: essential-animation2 3s infinite ease-in-out alternate, whyfadeInOut 3s ease-in-out;
  }
  .essential-resources .container .essential-grid .essential-card:hover .card3-essential {
    right: -55% !important;
    top: unset;
    bottom: 11px;
    transform: rotate(-189deg) scaleX(-1);
    animation: essential-animation3 3s infinite ease-in-out alternate, whyfadeInOut 3s ease-in-out;
  }
  .essential-resources .container .essential-grid .essential-card .icon {
    width: 42px;
    opacity: 100%;
  }
  .essential-resources .container .essential-grid .essential-card .shape {
    position: absolute;
    background: url(../images/home/ellipse.png) no-repeat center;
    background-size: 69% !important;
    opacity: 1;
    width: 100%;
    height: 100%;
  }
  .essential-resources .container .essential-grid .essential-card .card1-essential {
    right: -57%;
    top: -30%;
    transform: rotate(-60deg) scale(0.8);
    animation: essential-animation1 3s infinite ease-in-out alternate, whyfadeInOut 3s ease-in-out;
  }
  .essential-resources .container .essential-grid .essential-card .card2-essential {
    right: -36%;
    top: -32%;
    transform: rotate(113deg) scaleX(-1) scale(0.8);
    animation: essential-animation2 3s infinite ease-in-out alternate, whyfadeInOut 3s ease-in-out;
  }
  .essential-resources .container .essential-grid .essential-card .card3-essential {
    right: -55% !important;
    top: unset;
    bottom: 11px;
    transform: rotate(-189deg) scaleX(-1);
    animation: essential-animation3 3s infinite ease-in-out alternate, whyfadeInOut 3s ease-in-out;
  }
  .essential-resources .container .essential-grid .essential-card .card-title {
    font-size: 28px;
    margin-bottom: 10px;
    font-weight: 400;
    line-height: 1.3;
    font-family: "Sentient";
    color: #C0B9B8;
  }
  .essential-resources .container .essential-grid .essential-card .card-title img {
    opacity: 1;
    width: 18px;
  }
  .essential-resources .container .essential-grid .essential-card .card-title span {
    display: block;
  }
  .essential-resources .container .essential-grid .essential-card .txt {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.72);
  }
  .essential-resources .container .essential-grid .essential-card .txt span {
    display: block;
  }
}
@media (min-width: 1200px) and (max-width: 1280px) {
  .essential-resources .container .essential-grid .essential-card .card-title {
    font-size: 16px;
    margin-bottom: 8px;
  }
}
@media (min-width: 1920px) {
  .essential-resources .container .essential-grid .essential-card .card-title {
    font-size: 24px;
    margin-bottom: 18px;
  }
}/*# sourceMappingURL=essential-resources.css.map */