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

:root {
  /*================================== FONT-SIZES ================================================ */
  --font-xs: 16px;
  --font-sm: 20px;
  --font-md: 24px;
  --font-lg: 48px;
  --font-36: 36px;
  --font-xl: 56px;
  --font-xxl: 64px;

  /*================================== COLOR-CLASS ================================================ */
  --color-dark-green: #004225;
  --color-white: #fff;
  --color-black: #000000;
  --color-light_black: #222222;
  --color-gray: rgba(0, 66, 37, 0.06);
}

/*====================================== Media-queries-start ======================================== */
@media (max-width: 575.98px) {
  :root {
    /*================================== FONT-SIZES ================================================ */
    --font-xs: 14px;
    --font-sm: 18px;
    --font-md: 20px;
    --font-lg: 28px;
    --font-36: 30px;
    --font-xl: 32px;
    --font-xxl: 40px;
  }
}

@media (min-width: 576px) and (max-width: 1199.98px) {
  :root {
    /*================================== FONT-SIZES ================================================ */
    --font-xs: 15px;
    --font-sm: 18px;
    --font-md: 20px;
    --font-lg: 35px;
    --font-36: 32px;
    --font-xl: 42px;
    --font-xxl: 50px;
  }
}

body {
  font-family: "Rubik", sans-serif;
}

/*====================================== Media-queries-end =========================================== */
/*====================================== FONT-SIZE CLASS START ======================================= */
.text-error {
  font-size: 12px;
  color: red;
}

.font_xs {
  font-size: var(--font-xs) !important;
}

.font_sm {
  font-size: var(--font-sm) !important;
}

.font_md {
  font-size: var(--font-md) !important;
}

.font_lg {
  font-size: var(--font-lg) !important;
}

.font_36 {
  font-size: var(--font-36) !important;
}

.font_xl {
  font-size: var(--font-xl) !important;
}

.font_xxl {
  font-size: var(--font-xxl) !important;
}

/*====================================== FONT-SIZE CLASS END ======================================= */
/*====================================== FONT-WEIGHT SIZE CLASS START ============================== */

.fw_semibold {
  font-weight: 600 !important;
}

.fw_500 {
  font-weight: 500 !important;
}

/*====================================== FONT-WEIGHT SIZE CLASS END ========================================= */
/*====================================== COLOR CLASS START =================================================== */

.text_white {
  color: var(--color-white) !important;
}

.text_black {
  color: var(--color-black) !important;
}

.text_light_black {
  color: var(--color-light_black) !important;
}

.text_dark_green {
  color: var(--color-dark-green) !important;
}

/*===================================== COLOR CLASS END ======================================================== */
/*===================================== BACKGROUND-COLOR CLASS START =========================================== */

.bg_white {
  background-color: var(--color-white) !important;
}

.bg_black {
  background-color: var(--color-black) !important;
}

.bg_dark_green {
  background-color: var(--color-dark-green) !important;
}

.bg_gray {
  background-color: var(--color-gray) !important;
}

/*================================== BACKGROUND-COLOR CLASS END ================================================= */
/*================================== OPACITY CLASS START ======================================================== */

.opacity_07 {
  opacity: 0.7 !important;
}

/*================================== OPACITY CLASS END ======================================================== */
/* ================================== COMMON CLASS START  ===================================================== */
.common_btn {
  background: #004225;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  padding: 13px 30px;
  border: 0;
  color: var(--color-white);
  font-size: var(--font-xs);
  font-weight: 600;
  z-index: 1;
}

.common_btn span {
  z-index: 1;
  position: relative;
}

.common_btn::after {
  position: absolute;
  content: "";
  background-color: #000;
  color: #fff;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) scale(0);
  transition: all 0.3s ease-in-out;
  border-radius: 50%;
  z-index: -1;
}

.common_btn:hover::after {
  transform: translate(-50%, -50%) scale(1);
  border-radius: 0%;
}

.cursor_pointer {
  cursor: pointer;
}

.br_24 {
  border-radius: 24px;
}

.w_md_365 {
  max-width: 365px;
}

.letter_spacing_1 {
  letter-spacing: 1px;
}

/* SERVICE SECTION */
.service_circle {
  transform: translate(-40px, -30px);
}

.service_1 {
  transform: translateX(50px);
  padding-top: 60px !important;
}

.service_2 {
  transform: translateX(70px);
  padding-top: 140px !important;
}

.service_3 {
  padding-right: 110px;
  transform: translateX(-20px);
  padding-top: 120px !important;
}

.service_4 {
  padding-right: 90px;
  transform: translateX(-100px);
  padding-top: 120px !important;
}

/* SERVICE SECTION ANIMATION */

/* .mover2 {
  animation: rotation2 10s infinite linear;
}

@keyframes rotation2 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(-360deg);
  }
} */

@media (min-width: 1200px) and (max-width: 1599.98px) {
  .custom_container {
    max-width: 1200px;
  }
}

@media (max-width: 1399.98px) {
  /* SERVICE SECTION */

  .service_1 {
    transform: translateX(20px);
    padding-top: 60px !important;
  }

  .service_2 {
    transform: translateX(20px);
    padding-top: 70px !important;
  }

  .service_3 {
    padding-right: 90px;
    transform: translateX(-20px);
    padding-top: 90px !important;
  }

  .service_4 {
    padding-right: 40px;
    transform: translateX(-80px);
    padding-top: 90px !important;
  }
}

@media (max-width: 1199.98px) {

  /* SERVICE SECTION */
  .service_circle {
    transform: translate(-10px, -30px);
  }

  .service_1 {
    transform: translateX(0px);
    padding-top: 30px !important;
  }

  .service_2 {
    transform: translateX(0px);
    padding-top: 50px !important;
  }

  .service_3 {
    padding-right: 90px;
    transform: translateX(0px);
    padding-top: 40px !important;
  }

  .service_4 {
    padding-right: 40px;
    transform: translateX(-30px);
    padding-top: 70px !important;
  }
}

@media (max-width: 991.98px) {

  /* SERVICE SECTION */
  .service_1,
  .service_2,
  .service_3,
  .service_4,
  .service_circle {
    transform: translate(0) !important;
  }

  .service_1,
  .service_3 {
    padding-right: 0 !important;
    padding-top: 0 !important;
  }

  .service_2,
  .service_4 {
    padding-top: 20px !important;
    padding-right: 0 !important;
  }

  .service_circle {
    max-width: 400px;
    margin: 0 auto;
  }
}

@media (max-width: 767.98px) {
  nav li a::after {
    background-color: rgb(255, 255, 255) !important;
  }

  .w_md_365 {
    max-width: 100%;
  }

  .service_circle {
    max-width: 300px;
  }
}

@media (max-width: 575.98px) {
  .service_circle {
    max-width: 250px;
  }
}

/* ================================== COMMON CLASS END ================================================== */
.footer_icon {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  position: relative;
}

.footer_icon svg {
  transition: all 0.3s ease-in-out;
}

.footer_icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.4);
  height: 100%;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
}

.footer_icon:hover::after {
  transform: translate(-50%, -50%) scale(0);
}

.footer_icon:hover svg {
  transform: scale(1.5);
}

.footer_links li a {
  color: white;
  text-decoration: none;
  opacity: 0.7;
}

.footer_links li a:hover {
  opacity: 1;
}

.border_top {
  border-top: 1px solid #ffffff73;
}