/* ============================ */
/* ============================ */
/* ============================ */
/* Philia Solutions */
/* ============================ */
/* ============================ */
/* ============================ */

@import url(./root.css);
/* --------------------------- */
/* import font */
/* --------------------------- */

@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

@import url(./font.css);

.font_Clash {
  font-family: "ClashDisplay-Variable";
}
/* --------------------------- */
/* import font */
/* --------------------------- */

/* --------------------------- */
/* margins and padings class  */
/* ------------------------- */
p {
  margin-bottom: 0 !important;
}

.mr-4 {
  margin-right: 4px;
}

.mt-7 {
  margin-top: 7px;
}

.mr-7 {
  margin-right: 7px;
}

.ml-7 {
  margin-left: 7px;
}

.mb-7 {
  margin-bottom: 7px;
}

.mt-8 {
  margin-top: 8px;
}

.mr-8 {
  margin-right: 8px;
}

.ml-8 {
  margin-left: 8px;
}

.mb-8 {
  margin-bottom: 8px;
}

.mt-12 {
  margin-top: 12px;
}

.mr-12 {
  margin-right: 12px;
}

.ml-12 {
  margin-left: 12px;
}

.mb-12 {
  margin-bottom: 12px;
}

.mt-16 {
  margin-top: 16px;
}

.mr-16 {
  margin-right: 16px;
}

.ml-16 {
  margin-left: 16px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-24 {
  margin-top: 24px;
}

.mr-24 {
  margin-right: 24px;
}

.ml-24 {
  margin-left: 24px;
}

.mb-24 {
  margin-bottom: 24px;
}

.mt-28 {
  margin-top: 28px;
}

.mb-32 {
  margin-bottom: 32px;
}

.mt-32 {
  margin-top: 32px;
}

.mt-40 {
  margin-top: 40px;
}

.mr-40 {
  margin-right: 40px;
}

.ml-40 {
  margin-left: 40px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mt-48 {
  margin-top: 48px;
}

.mt-64 {
  margin-top: 64px;
}

.mr-64 {
  margin-right: 64px;
}

.ml-64 {
  margin-left: 64px;
}

.mb-64 {
  margin-bottom: 64px;
}

.mt-96 {
  margin-top: 96px;
}

.mr-96 {
  margin-right: 96px;
}

.ml-96 {
  margin-left: 96px;
}

.mb-96 {
  margin-bottom: 96px;
}

.mt-128 {
  margin-top: 128px;
}

.mr-128 {
  margin-right: 128px;
}

.ml-128 {
  margin-left: 128px;
}

.mb-128 {
  margin-bottom: 128px;
}

.mt-160 {
  margin-top: 160px;
}

.mb-160 {
  margin-bottom: 160px;
}

.pt-160 {
  padding-top: 160px;
}

.pb-160 {
  padding-bottom: 160px;
}

.pt-196 {
  padding-top: 196px;
}

.pb-196 {
  padding-bottom: 196px;
}

.pt-7 {
  padding-top: 7px;
}

.pr-7 {
  padding-right: 7px;
}

.pl-7 {
  padding-left: 7px;
}

.pb-7 {
  padding-bottom: 7px;
}

.pt-8 {
  padding-top: 8px;
}

.pr-8 {
  padding-right: 8px;
}

.pl-8 {
  padding-left: 8px;
}

.pb-8 {
  padding-bottom: 8px;
}

.pt-12 {
  padding-top: 12px;
}

.pr-12 {
  padding-right: 12px;
}

.pl-12 {
  padding-left: 12px;
}

.pb-12 {
  padding-bottom: 12px;
}

.pt-16 {
  padding-top: 16px;
}

.pr-16 {
  padding-right: 16px;
}

.pl-16 {
  padding-left: 16px;
}

.pb-16 {
  padding-bottom: 16px;
}

.pt-24 {
  padding-top: 24px;
}

.pr-24 {
  padding-right: 24px;
}

.pl-24 {
  padding-left: 24px;
}

.pb-24 {
  padding-bottom: 24px;
}

.pt-40 {
  padding-top: 40px;
}

.pr-40 {
  padding-right: 40px;
}

.pl-40 {
  padding-left: 40px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pt-64 {
  padding-top: 64px;
}

.pr-64 {
  padding-right: 64px;
}

.pl-64 {
  padding-left: 64px;
}

.pb-64 {
  padding-bottom: 64px;
}

.pt-96 {
  padding-top: 96px;
}

.pr-96 {
  padding-right: 96px;
}

.pl-96 {
  padding-left: 96px;
}

.pb-96 {
  padding-bottom: 96px;
}

.pt-128 {
  padding-top: 128px;
}

.pr-128 {
  padding-right: 128px;
}

.pl-128 {
  padding-left: 128px;
}

.pb-128 {
  padding-bottom: 128px;
}

.p-rl-32 {
  padding: 0 32px;
}

/* --------------------------- */
/* margins and padings class  */
/* ------------------------- */

/* body */
html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  background-color: #fff;
  color: #313131;
  font-size: var(--font-16) !important;
  font-weight: var(--font-w-500) !important;

  font-family: "Inter", sans-serif !important;
  text-align: left !important;
  overflow-x: hidden;
  line-height: 32px !important;
}

/* body */

/* style */
/* .section_hiro {
  background-image: url(../media/pattern01.svg);
  background-position: top;
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
} */

.section_hiro {
  /* Use a size that allows the pattern to repeat */
  background-image: url(../media/pattern01.svg);
  background-size: contain; /* Example size */
  background-repeat: repeat-x; /* Repeat horizontally */
  position: relative;

  /* Animation properties */
  animation: moveBackground 30s linear infinite;
}

/* Define the animation keyframes */
@keyframes moveBackground {
  from {
    /* Start at the original position */
    background-position: 0 0;
  }
  to {
    /* Move horizontally by the width of the pattern */
    background-position: 500px 0;
  }
}

.badge_hiro {
  display: flex;
  padding: 2px;
  align-items: flex-start;
  border-radius: 9px;
  background: #edf0f2;
  justify-content: center;
}
.badge_hir_txt {
  color: #1d1d1d;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  border-radius: 8px;
  border: 2px solid #fff;
  display: flex;
  padding: 4px 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
}
/* .left_side {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
}
.right_side {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
} */

/* Define an animation that goes up and then back down */
@keyframes slideUpDown {
  0%,
  100% {
    /* Start and end at the bottom */
    bottom: -50px;
    opacity: 1;
  }
  50% {
    /* Peak in the middle of the animation */
    bottom: 0;
    opacity: 1;
  }
}

.left_side,
.right_side {
  position: absolute;
  z-index: 1;

  /* Apply the looping animation */
  /* animation: name duration timing-function iteration-count; */
  animation: slideUpDown 6s ease-in-out infinite;
}

.left_side {
  left: 0;
}

.right_side {
  right: 0;
  /* Optional: delay one side to make them alternate */
  animation-delay: 1.5s;
}

.tit_hiro {
  color: #1d1d1d;
  text-align: center;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.txt_hiro {
  color: #5e5e5e;
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 140% */
}
.btn {
  display: flex;
  padding: 0px 12px 0px 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  width: fit-content;
  height: 40px;
}
.btn_dark {
  border: 1px solid #4b4b4b;
  background: linear-gradient(180deg, #3a3a3a 0%, #5b5b5b 100%);
  color: #fff;
  border: 1px solid #c8c8c8;
}
.btn_light {
  background: linear-gradient(180deg, #fff 0%, #d6e2e9 100%);
  color: #3a3a3a;
  border-radius: 12px;
  border: 1px solid #3a3a3a;
}

.btn_dark:hover {
  border: 1px solid #4b4b4b;
  background: linear-gradient(180deg, #3a3a3a 0%, #5b5b5b 100%);
  color: #fff;
  border: 1px solid #c8c8c8;
}
.btn_light:hover {
  background: linear-gradient(180deg, #fff 0%, #d6e2e9 100%);
  color: #3a3a3a;
  border-radius: 12px;
  border: 1px solid #3a3a3a;
}

.badge_light {
  border-radius: 8px;
  background: #fff;
  display: flex;
  padding: 2px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: fit-content;
}
.badge_txt {
  display: flex;
  height: 27px;
  padding: 4px 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 7px;
  border: 1px solid #edf0f2;
  color: #000;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.main_sec {
  background: #edf0f2;
  background-image: url(../media/map.svg);
  background-repeat: no-repeat;
  background-position: right;
  background-size: contain;
  position: relative;
  z-index: 3;
}
.min_tit {
  color: #1d1d1d;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.txt_min {
  color: #313131;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 175% */
}
.items_main_sec_tit {
  color: #1d1d1d;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.items_main_sec_txt {
  color: #5e5e5e;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}

.card_solutions {
  border-radius: 16px;
  background: #edf0f2;
  padding-top: 32px;
}
.card_solutions_badge {
  color: #fff;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  display: flex;
  padding: 8px 12px 8px 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  border: 1px solid #e07047;
  background: linear-gradient(180deg, #cb5d34 0%, #f38157 100%);
  width: fit-content;
}
.card_solutions_tit {
  color: #313131;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.card_solutions_txt {
  color: #313131;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}
.card_solutions_txt_lable {
  color: #5e5e5e;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.card_solutions ul li {
  color: #313131;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px;
}

.end_sec {
  background: #122a3a;
  background-image: url(../media/endsecpattern.svg);
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: contain;
}
.end_sec_tit {
  color: #fff;
  text-align: center;
  font-size: 32px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}
.end_sec_txt {
  color: #b3b3b3;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}
.footer_tit {
  color: #313131;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
}
.footer_txt {
  color: #5e5e5e;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 171.429% */
}
.zoneit_btn {
  border-radius: 8px;
  border: 1px solid #e07047;
  background: linear-gradient(180deg, #cb5d34 0%, #f38157 100%);
  display: flex;
  width: fit-content;
  height: 38px;
  padding: 8px 8px 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
}
.philla_btn {
  border-radius: 8px;
  border: 1px solid #9269eb;
  background: linear-gradient(180deg, #774bdc 0%, #a982f8 100%);
  display: flex;
  width: fit-content;
  height: 38px;
  padding: 8px 8px 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  text-decoration: none;
}
.btns_st {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.end_txt {
  color: #a5a5a5;
  text-align: center;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 200% */
}
header {
  border-bottom: 1px solid #e3e8eb;
  background: rgba(237, 240, 242, 0.5);
  backdrop-filter: blur(18px);
  height: 64px;
  padding: 16px 120px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 12;
}