/* Reset Box Model */
html,
body,
main,
section,
article,
aside,
nav,
header,
footer,
address,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
dfn,
em,
small,
s,
strong,
sub,
sup,
tt,
var,
u,
i,
mark,
time,
del,
ins,
kbd,
q,
code,
samp,
kbd,
select,
input,
button,
textarea,
label,
fieldset,
legend,
progress,
meter,
details,
summary,
div {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: inherit;
  font-style: inherit;
  font-family: inherit;
  vertical-align: middle;
  box-sizing: border-box;
}

main,
section,
article,
aside,
nav,
header,
footer,
address,
figure {
  display: block;
}

/* Reset Fonts */
body {
  line-height: 1;
  font-size: 100%;
  font-family: "Montserrat", sans-serif;
  background-color: #ffffff;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Reset Lists */
ol,
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Reset Form Elements */
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}

/* Custom ScrollBar */
html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #979c9e;
  border-radius: 4px;
  border: 1px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgb(149, 160, 162);
}

/* Reset Text Decoration */
a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

/* Reset Misc */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Display */
.dn {
  display: none;
}

.db {
  display: block;
}

.dib {
  display: inline-block;
}

.df,
.v-center,
.h-center,
.box-center {
  display: flex;
}

.dif {
  display: inline-flex;
}

/* Verticle and Horizantal Align */
.tac {
  text-align: center;
}

.tal {
  text-align: left;
}

.tar {
  text-align: right;
}

.tdu,
.tdhu:hover {
  text-decoration: underline;
}

.jcc,
.h-center,
.box-center {
  justify-content: center;
}

.jcsb {
  justify-content: space-between;
}

.jcse {
  justify-content: space-evenly;
}

.jcsa {
  justify-content: space-around;
}

.jce {
  justify-content: end;
}

.aic,
.v-center,
.box-center {
  align-items: center;
}
.ais {
  align-items: start;
}
.aie {
  align-items: end;
}
.ase {
  align-self: end;
}
.asc {
  align-self: center;
}
.aisc {
  align-items: stretch;
}
/* Column and Row */
.fdc {
  flex-direction: column;
}

.fdcr {
  flex-direction: column-reverse;
}

.fdrr {
  flex-direction: row-reverse;
}

.flx1 {
  flex: 1;
}

.flx2 {
  flex: 2;
}

.flx3 {
  flex: 3;
}

.flx100 {
  flex: 0 0 100%;
}

.flx40 {
  flex: 0 0 40%;
  max-width: 500px;
}

.flx50 {
  flex: 0 0 50%;
  max-width: 50%;
}

.flx75 {
  flex: 0 0 75%;
  max-width: 75%;
}

.flx48 {
  flex: 0 0 48%;
  max-width: 48%;
}

.flx31 {
  flex: 0 0 31.333333%;
  max-width: 31.33333%;
}

.flx33 {
  flex: 0 0 33.333333%;
  max-width: 33.33333%;
}

.flx40 {
  flex: 0 0 40%;
  max-width: 40%;
}

.flx24 {
  flex: 0 0 24%;
  max-width: 24%;
}
.flx25 {
  flex: 0 0 25%;
  max-width: 25%;
}

.flx16 {
  flex: 0 0 16%;
  max-width: 16%;
}

.flx295 {
  flex: 0 0 292px;
  max-width: 292px;
}

.flx48p {
  flex: 0 0 48px;
  max-width: 48px;
}

.fww {
  flex-wrap: wrap;
}

/* overflow style */
.ofh {
  overflow: hidden;
}

.ofa {
  overflow: auto;
}

/* Backgound Color & Font Color Style */
.bg1 {
  background-color: #2d72b4;
}

.bg2 {
  background-color: #d15342;
}

.bg3 {
  background-color: #fff;
}

.bg4 {
  background-color: #f0f0f0;
}

.bg5 {
  background-color: #0f172a;
}

.bg-grdnt-01 {
  background: rgb(0, 0, 0);
  background: radial-gradient(
    circle,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.9) 100%
  );
  opacity: 0.8;
  transition: background-color 0.3s, border-radius 0.3s, opacity 0.3s;
}
.bg-img-02 {
  background-color: #f0f3f4;
  background: #f0f3f4 url(images/experties-bg-01.jpg) no-repeat center/cover;
}
.bg-img-03 {
  background: url(images/about-bg-01.jpg) no-repeat center/cover,
    linear-gradient(135deg, rgba(1, 49, 98, 1) 0%, rgba(3, 1, 4, 1) 50%);
}
.fc1,
.fc-h2:hover,
.ac-active {
  color: #151616;
}

.fc2 {
  color: #606060;
}

.fc3,
.fc-h1:hover {
  color: #f1f3f4;
}

.fc4 {
  color: #d8dfe3;
}
.fc5 {
  color: #e7ebee;
}
.fc6 {
  color: #d15342;
}
.fc7 {
  color: #294b70;
}
.ff2 {
  font-family: "Inknut Antiqua", serif;
}

.fill1,
.fill-h1:hover svg {
  fill: #d15342;
}

.fill2,
.fill-h2:hover svg {
  fill: #fff;
}
.fill3 {
  fill: #2e8fea;
}

/* font style */
.fs12 {
  font-size: 12px;
}

.fs13 {
  font-size: 13px;
}

.fs14 {
  font-size: 14px;
}

.fs15 {
  font-size: 15px;
}

.fs16 {
  font-size: 16px;
}

.fs18 {
  font-size: 18px;
}

.fs20 {
  font-size: 20px;
}

.fs22 {
  font-size: 22px;
}

.fs24 {
  font-size: 24px;
}

.fs28 {
  font-size: 28px;
}

.fs32 {
  font-size: 32px;
}

.fs40 {
  font-size: 40px;
}

.fs48 {
  font-size: 48px;
}

.fs56 {
  font-size: 56px;
}

.lh14 {
  line-height: 14px;
}

.lh18 {
  line-height: 18px;
}

.lh24 {
  line-height: 24px;
}

.lh28 {
  line-height: 28px;
}

.lh34 {
  line-height: 34px;
}

.lh48 {
  line-height: 48px;
}

.lh56 {
  line-height: 56px;
}

.lh64 {
  line-height: 64px;
}

.lh72 {
  line-height: 72px;
}

.ls1 {
  letter-spacing: 0.5px;
}

.ls2 {
  letter-spacing: 0.8px;
}

.fw3 {
  font-weight: 300;
}

.fw4 {
  font-weight: 400;
}

.fw5 {
  font-weight: 500;
}

.fw6 {
  font-weight: 600;
}

.fw7 {
  font-weight: 700;
}

.ttu {
  text-transform: uppercase;
}

.text-row {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lc1 {
  -webkit-line-clamp: 1;
}

.lc2 {
  -webkit-line-clamp: 2;
}

.lc3 {
  -webkit-line-clamp: 3;
}

.lc4 {
  -webkit-line-clamp: 4;
}

/* Position Style */
.pr,
.navbar li {
  position: relative;
}

.pa,
.aft:after,
.bef:before {
  position: absolute;
}

.pf {
  position: fixed;
}

.ps {
  position: sticky;
}

.l0 {
  left: 0;
}

.r0 {
  right: 0;
}

.t0 {
  top: 0;
}

.t100 {
  top: 100%;
}

.b0 {
  bottom: 0;
}

.zi-1 {
  z-index: -1;
}

.zi1 {
  z-index: 1;
}

.zi2 {
  z-index: 2;
}

.zi99 {
  z-index: 99;
}

.zi999 {
  z-index: 999;
}

.cp {
  cursor: pointer;
}

/* Spacing Style */
.mlra {
  margin-left: auto;
  margin-right: auto;
}

.mla {
  margin-left: auto;
}

.m8 {
  margin: 8px;
}

.m12 {
  margin: 12px;
}

.m16 {
  margin: 16px;
}

.m32 {
  margin: 32px;
}

.mt4 {
  margin-top: 4px;
}

.mt8,
.mtb8 {
  margin-top: 8px;
}

.mt12,
.mtb12 {
  margin-top: 12px;
}

.mt16,
.mtb16 {
  margin-top: 16px;
}

.mt24,
.mtb24 {
  margin-top: 24px;
}

.mt32,
.mtb32 {
  margin-top: 32px;
}

.mt40,
.mtb40 {
  margin-top: 40px;
}

.mt48,
.mtb48 {
  margin-top: 48px;
}

.ml4,
.mlr4 {
  margin-left: 4px;
}

.ml8,
.mlr8 {
  margin-left: 8px;
}

.ml12,
.mlr12 {
  margin-left: 12px;
}

.ml16,
.mlr16 {
  margin-left: 16px;
}

.ml24,
.mlr24 {
  margin-left: 24px;
}

.ml32,
.mlr32 {
  margin-left: 32px;
}

.ml40,
.mlr40 {
  margin-left: 40px;
}

.ml48,
.mlr48 {
  margin-left: 48px;
}

.mr4 {
  margin-right: 4px;
}

.mr8,
.mlr8 {
  margin-right: 8px;
}

.mr12,
.mlr12 {
  margin-right: 12px;
}

.mr16,
.mlr16 {
  margin-right: 16px;
}

.mr24,
.mlr24 {
  margin-right: 24px;
}

.mr32,
.mlr32 {
  margin-right: 32px;
}

.mr40,
.mlr40 {
  margin-right: 40px;
}

.mr48,
.mlr48 {
  margin-right: 48px;
}

.mb4 {
  margin-bottom: 4px;
}

.mb8,
.mtb8 {
  margin-bottom: 8px;
}

.mb12,
.mtb12 {
  margin-bottom: 8px;
}

.mb16,
.mtb16 {
  margin-bottom: 16px;
}

.mb24,
.mtb24 {
  margin-bottom: 24px;
}

.mb32,
.mtb32 {
  margin-bottom: 32px;
}

.mb40,
.mtb40 {
  margin-bottom: 40px;
}

.mb48,
.mtb48 {
  margin-bottom: 48px;
}

.pla {
  padding-left: auto;
}

.p4 {
  padding: 4px;
}

.p8 {
  padding: 8px;
}

.p12 {
  padding: 12px;
}

.p16 {
  padding: 16px;
}

.p24 {
  padding: 24px;
}

.p32 {
  padding: 32px;
}

.pt4 {
  padding-top: 4px;
}

.pt8,
.ptb8 {
  padding-top: 8px;
}

.pt12,
.ptb12 {
  padding-top: 12px;
}

.pt16,
.ptb16 {
  padding-top: 16px;
}

.pt24,
.ptb24 {
  padding-top: 24px;
}

.pt32,
.ptb32 {
  padding-top: 32px;
}

.pt40,
.ptb40 {
  padding-top: 40px;
}

.pt48,
.ptb48 {
  padding-top: 48px;
}

.pt60,
.ptb60 {
  padding-top: 60px;
}

.pl4 {
  padding-left: 4px;
}

.pl8,
.plr8 {
  padding-left: 8px;
}

.pl12,
.plr12 {
  padding-left: 12px;
}

.pl16,
.plr16 {
  padding-left: 16px;
}

.pl24,
.plr24 {
  padding-left: 24px;
}

.pl32,
.plr32 {
  padding-left: 32px;
}

.pl40,
.plr40 {
  padding-left: 40px;
}

.pl48,
.plr48 {
  padding-left: 48px;
}

.pr4 {
  padding-right: 4px;
}

.pr8,
.plr8 {
  padding-right: 8px;
}

.pr12,
.plr12 {
  padding-right: 12px;
}

.pr16,
.plr16 {
  padding-right: 16px;
}

.pr24,
.plr24 {
  padding-right: 24px;
}

.pr32,
.plr32 {
  padding-right: 32px;
}

.pr40,
.plr40 {
  padding-right: 40px;
}

.pr48,
.plr48 {
  padding-right: 48px;
}

.pb4 {
  padding-bottom: 4px;
}

.pb8,
.ptb8 {
  padding-bottom: 8px;
}

.pb12,
.ptb12 {
  padding-bottom: 12px;
}

.pb16,
.ptb16 {
  padding-bottom: 16px;
}

.pb24,
.ptb24 {
  padding-bottom: 24px;
}

.pb32,
.ptb32 {
  padding-bottom: 32px;
}

.pb40,
.ptb40 {
  padding-bottom: 40px;
}

.pb48,
.ptb48 {
  padding-bottom: 48px;
}

.pb60,
.ptb60 {
  padding-bottom: 60px;
}

.ptb64 {
  padding-top: 64px;
  padding-bottom: 64px;
}
.gap4 {
  gap: 4px;
}
.gap8 {
  gap: 8px;
}
.gap12 {
  gap: 12px;
}
.gap16 {
  gap: 16px;
}
.gap24 {
  gap: 24px;
}
.gap32 {
  gap: 32px;
}
.gap40 {
  gap: 40px;
}
.gap48 {
  gap: 48px;
}
/* border Style */
.brd1 {
  border: 1px solid #222;
}

.brd2 {
  border: 1px solid #dedede;
}

.brd3 {
  border: 1px solid rgba(2, 1, 1, 0.078);
}

.brd-b1 {
  border-bottom: 1px solid #d4d4da;
}

.brd-b2 {
  border-bottom: 1px solid #d15342;
}
.brd-b3 {
  border-bottom: 1px solid #525252;
}

.brd-t1 {
  border-top: 1px solid rgba(2, 1, 1, 0.078);
}

.brd-b4 {
  border-bottom: 1px solid #294b70;
}

.brd-l1 {
  border-left: 2px solid #f0f0f2;
}
.brd-r1 {
  border-right: 1px solid rgba(240, 240, 242, 0.4);
}
.brd-all-l1 {
  border: 1px solid #f0f0f2;
  border-left-width: 4px;
}

.brd-all-l1:hover {
  border-color: #d15342;
  background-color: #f0f0f2;
  color: #d15342;
}
.brd-all-l1:hover svg {
  fill: #d15342;
}
.bs1,
.bs1-h1:hover {
  box-shadow: 0px 0px 1px 0px #fff;
}

.aft:after,
.bef:before {
  content: "";
}

.tf-h1:hover {
  transform: translateX(10px);
}

.transit1,
.md-btn {
  transition: all 0.2s;
}

.transit2 {
  transition: all 0.3s;
}

.wsnw {
  white-space: nowrap;
}

/* Shape Style */

.w50 {
  width: 50%;
}

.w100vw {
  width: 100vw;
}

.w100 {
  width: 100%;
}

.w12 {
  width: 12px;
}

.w18 {
  width: 18px;
}

.w24 {
  width: 24px;
}

.w36 {
  width: 36px;
}
.w40 {
  width: 40px;
}

.w48 {
  width: 48px;
}

.w56 {
  width: 56px;
}

.w-m24 {
  min-width: 24px;
  max-width: 24px;
}

.w-m48 {
  min-width: 48px;
  max-width: 48px;
}
.w64 {
  width: 64px;
}
.h12 {
  height: 12px;
}
.h18 {
  height: 18px;
}

.h24 {
  height: 24px;
}

.h40 {
  height: 40px;
}

.h48 {
  height: 48px;
}

.h56 {
  height: 56px;
}

.h64 {
  height: 64px;
}

.h100vh {
  height: 100vh;
}

.br2 {
  border-radius: 2px;
}

.br4 {
  border-radius: 4px;
}

.br8 {
  border-radius: 8px;
}

.br24 {
  border-radius: 24px;
}

.br50 {
  border-radius: 50%;
}

.wrapper {
  width: 92%;
  max-width: 1540px;
  margin-left: auto;
  margin-right: auto;
}

.logo img {
  height: 26px;
}

.nav-link {
  position: relative;
  transition: color 0.4s;
}

.nav-item:hover > a {
  color: #ffffff;
}

ul:not(.nav-list-top) .nav-item > a {
  border-bottom: 4px solid transparent;
}
.header.sticky .nav-item:hover a,
.header.header-light .nav-item:hover a {
  color: #000;
}
ul:not(.nav-list-top) .nav-item:hover > a {
  border-bottom: 4px solid #2962a0;
}

.sticky .header-brd,
.header-light .header-brd {
  border-bottom-color: #fff;
}

.nav-link:after {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 100%;
  left: 0;
  z-index: -1;
}

.nav-item:hover .nav-link:after {
  bottom: -20px;
}

.social-item {
  height: 26px;
  width: 26px;
}

.header.sticky,
.header.header-light {
  background-color: #fff;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}

.sticky .logo img:not(.dark-logo),
.header-light .logo img:not(.dark-logo) {
  display: none;
}

.sticky .logo img.dark-logo,
.header-light .logo img.dark-logo {
  display: block;
}

.sticky .nav-list,
.sticky .nav-list-top,
.header-light .nav-list,
.header-light .nav-list-top {
  color: #203556;
}
.sticky .brd-r1,
.header-light .brd-r1 {
  border-color: rgba(19, 33, 55, 0.45);
}
.sticky .fill2,
.header-light .fill2 {
  fill: #0d1728;
}

.hero {
  height: 100vh;
  min-height: 520px;
  background: url(images/banner-bg-01.png) no-repeat left/cover;
}
.hero.inside-hero {
  height: 90vh;
  min-height: 410px;
}
.hero.inside-page-name {
  background: url(images/inside-header-img-01.png) no-repeat left/cover;
  align-items: stretch;
  padding-top: 116px;
}
.t-rot-90 {
  transform: rotate(-90deg);
}
.bredcrumb-grp {
  margin-top: 12px;
}
.bredcrumb {
  letter-spacing: 0.3px;
}
.bredcrumb svg {
  width: 9px;
  height: 8px;
  fill: #fff;
}
.bredcrumb.bredcrumb-active {
  color: #2e8fea;
}
.section-list-navbar {
  top: 116px;
}
.side-navbar {
  min-width: 256px;
  margin-top: 56px;
  border-left: 1px solid #999;
}
.side-navbar-list {
  padding-left: 16px;
  position: relative;
  display: flex;
  align-items: center;
  transition: all 0.2s;
}
.side-navbar-list svg {
  fill: #999;
  width: 15px;
  height: 8px;
  position: absolute;
  left: -8px;
  transition: all 0.2s;
}
.side-navbar-list:hover svg {
  fill: #2e8fea;
}
.side-navbar-link {
  padding-top: 12px;
  padding-bottom: 12px;
  width: 100%;
}
.side-navbar-list:hover,
.side-navbar-list.active {
  color: #000;
  background: rgb(236, 246, 255);
  background: linear-gradient(
    90deg,
    rgba(236, 246, 255, 1) 0%,
    rgba(255, 255, 255, 1) 100%
  );
}
.side-navbar-list.active svg {
  display: none;
}
.side-navbar-list.active:after {
  content: "";
  position: absolute;
  top: 0;
  left: -2px;
  width: 4px;
  height: 100%;
  background-color: #2e8fea;
}
.section-light-heading {
  position: absolute;
  left: 0;
  top: 40px;
  font-size: 100px;
  color: #f3f3f3;
  z-index: -1;
}
.section-imgside {
  align-self: self-start;
}
.section-imgside img {
  max-width: 400px;
}
.section-imgside:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100%;
  background: #f7f5f5;
  background: linear-gradient(90deg, #f7f5f5 0%, #fff 100%);
  z-index: -1;
}
.section-heading {
  font-size: 36px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 0.3px;
}
.max-width-01 {
  max-width: 1042px;
}

.card-round {
  border-radius: 120px;
}
.card-btn svg {
  width: 32px;
  height: 24px;
}
.experties-card,
.experties-card svg {
  transition: all 0.2s;
}
.experties-card {
  border: 1px solid #f0f2f2;
  box-shadow: 0 0 6px rgba(201, 201, 201, 0.1);
}
.experties-card:hover {
  border: 1px solid #f0f1f1;
  box-shadow: 0 0 4px rgba(119, 119, 119, 0.1);
  transform: scale(1.03);
}
.experties-card svg:hover {
  transform: translateX(4px);
}
.tech-cards {
  border: 1px dashed #999999;
}
.tech-card:not(:nth-of-type(4n)) {
  border-right: 1px dashed #999999;
}
.tech-card:nth-of-type(-n + 4) {
  border-bottom: 1px dashed #999999;
}
.tech-top {
  width: 68px;
  height: 68px;
}
.tech-card .card-btn {
  transition: all 0.2s;
}
.tech-card:hover .card-btn {
  transform: translateX(4px);
}
.card-left .card {
  background-image: linear-gradient(
    134deg,
    rgba(255, 255, 255, 0.484) 0%,
    rgba(229, 243, 255, 0.267) 100%
  );
  border-radius: 4px;
}
.card-right .card {
  background-image: linear-gradient(
    134deg,
    rgba(255, 255, 255, 0.63) 0%,
    rgba(229, 243, 255, 0.537) 100%
  );
  border-radius: 4px;
}
.card-center .card {
  background-image: linear-gradient(
    134deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(229, 243, 255, 0.3) 100%
  );
  border-radius: 4px;
}
.card-title:after {
  width: 24px;
  height: 4px;
  background-color: #fff;
  top: 0;
  left: 0;
}
.card-right .card-title:after {
  background-color: #303132;
}
.footer-logo img {
  height: 40px;
}

.menu-btn {
  display: none;
}
.nav-item:hover > a {
  color: #ffffff;
}
.nav-dd {
  top: 108px;
  width: 100vw;
  min-height: 60vh;
  box-shadow: 0px 10px 10px rgba(159, 159, 159, 0.1);
  display: none;
}

.nav-item:hover .nav-dd {
  display: flex;
}
.nav-dd-wrapper {
  width: 92%;
  max-width: 1540px;
  margin-left: auto;
  margin-right: auto;
}
.nav-dd-items {
  min-width: 24vw;
  max-width: 24vw;
  border-right: 1px solid #d1d3d4;
  font-size: 14px;
  text-transform: capitalize;
}
.nav-dd-items a {
  display: block;
  margin-top: 2px;
  padding: 8px 16px;
}

.nav-dd-item:hover a {
  color: #1f1f20;
  background-color: #d2d5d9;
}
.menu-btn,
.logo {
  z-index: 100;
}

.nav-close .menu-line:first-of-type {
  transform: translate(1px, 3px) rotate(45deg);
}

.nav-close .menu-line:last-of-type {
  transform: translate(0px, -4px) rotate(-45deg);
}

.nav-close .menu-line:nth-of-type(2) {
  display: none;
}

.menu-line:not(:last-of-type) {
  margin-bottom: 4px;
}

.menu-line {
  width: 24px;
  height: 3px;
  background-color: #fff;
  border-radius: 2px;
  transition: all 0.2s;
}
.list-style-01 li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 16px;
}
.list-style-01 li:after,
.list-style-01 li:before {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.list-style-01 li:before {
  background-color: #d9d9d9;
  width: 16px;
  height: 15px;
  left: 0;
  top: 6px;
}
.list-style-01 li:after {
  background-color: #2d72b4;
  width: 8px;
  height: 7px;
  left: 8px;
  top: 10px;
}
.ai-section-icon {
  opacity: 0.7;
}
.ai-figure-bg {
  position: absolute;
  top: -16px;
  bottom: -16px;
  width: 106%;
  left: 6%;
  background-color: #f2f2f2;
}
.ai-figure-icon {
  width: 164px;
  height: 164px;
  border: 12px solid #fff;
  background-color: #dcedfe;
  bottom: -64px;
  left: -64px;
}

.team-overview {
  position: absolute;
  bottom: 32px;
  width: 100%;
  z-index: 2;
}
.team-bg-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
  background-image: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.1) 40%,
    rgba(0, 0, 0, 0.8) 100%
  );
}
.team-overview {
  max-height: 28px;
  overflow: hidden;
  transition: all 0.8s;
}
.team-card img {
  width: 100%;
}
.team-card {
  transition: all 0.3s;
}
.team-card:hover {
  transform: scale(1.1);
  position: relative;
  z-index: 2;
}

.team-card:hover .team-overview {
  max-height: 500px;
  bottom: 16px;
  overflow: hidden;
}

.team-card:hover .team-bg-overlay {
  background-image: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.9) 100%
  );
}
.card-year {
  width: 148px;
  height: 148px;
}
.journey-card-year:after {
  width: 100%;
  height: 0px;
  border-top: 2px dashed #999;
  top: 0;
  bottom: 0;
  margin: auto 0;
}
.journey-text {
  max-width: 330px;
  margin-bottom: 64px;
}
.journey-title:after {
  height: 4px;
  width: 112px;
  background-color: #000;
  top: -48px;
}
.journey-title:before {
  height: 112px;
  width: 4px;
  background-color: #000;
  top: -46px;
}
.year-bg1 {
  background-color: #a0a090;
}
.year-bg2 {
  background-color: #6b8a8e;
}
.year-bg3 {
  background-color: #2d72b4;
}
.home-enquiry {
  border: 1px dashed #999;
}
.input-box:nth-of-type(even) {
  padding-left: 16px;
}
.input-box:nth-of-type(odd) {
  padding-right: 16px;
}
.input-box input,
.home-service-box {
  border: 1px solid #e5e5e5;
}
.input-box input {
  padding: 0 16px;
}
.home-service-box {
  top: calc(100% - 1px);
  padding-top: 12px;
  width: calc(100% - 2px);
  height: 130px;
  overflow: hidden;
  overflow-y: auto;
  display: none;
}

.home-service-box.select-on {
  display: block;
}
.home-service-box li {
  padding: 12px 16px;
}
.textarea-box textarea {
  resize: none;
  height: 96px;
}
.home-form-btn {
  transform: translateY(48px);
}
.footer {
  border-top: 12px solid #2962a0;
}
.list-item-icon {
  position: relative;
  margin-right: 16px;
  min-width: 16px;
  max-width: 16px;
  height: 15px;
  top: 4px;
  border-radius: 50%;
  background-color: #d6d6d6;
}
.list-item-icon:after {
  content: "";
  position: absolute;
  min-width: 8px;
  max-width: 8px;
  height: 7px;
  top: 4px;
  right: 0;
  border-radius: 50%;
  background-color: #2d72b4;
}
@media screen and (min-width: 769px) {
  .reverse-card,
  .reverse-card .journey-card-text {
    flex-direction: column-reverse;
  }
  .reverse-card .journey-card-text {
    display: flex;
    margin-top: 48px;
  }
  .reverse-card .journey-card-text .journey-text {
    margin-bottom: 32px;
    margin-top: 48px;
  }
  .reverse-card {
    margin-top: 176px;
  }
  .reverse-card .journey-title:after {
    top: calc(100% + 24px);
  }
}
@media screen and (max-width: 768px) {
  .hero-content .fs28 {
    font-size: 20px;
  }
  .fs56 {
    font-size: 38px;
    line-height: 52px;
  }
  .nav-list li,
  .nav-list-top li {
    width: 100%;
    padding-top: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ccc;
  }
  .navbar {
    height: 64px;
  }
  section.ptb48 {
    padding-top: 0;
    padding-bottom: 0;
  }
  .menu-btn {
    display: flex;
    margin-left: 8px;
  }

  .nav-close .nav-list {
    visibility: visible;
    max-height: 100vh;
    color: #000;
  }
  .nav-list-top li a {
    color: #000;
  }
  .nav-close .nav {
    visibility: visible;
    max-height: 100vh;
  }

  .nav-item:hover > ul {
    display: contents;
    width: 100%;
  }

  .nav-list li.contact-btn {
    margin-left: 24px;
    margin-right: 24px;
    width: calc(80% - 48px);
    justify-content: center;
    margin-top: 16px;
  }
  .nav {
    position: fixed;
    width: 100%;
    background-color: #fff;
    right: 0;
    top: 64px;

    max-height: 0;
    visibility: hidden;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
  }
  .nav-list-top,
  .nav-list {
    flex-direction: column;
    align-items: start;
    justify-content: start;
  }
  .section-heading {
    font-size: 28px;
    line-height: 38px;
  }
  .experties-cards,
  .wrapper,
  .about-cards,
  .team-cards,
  .footer-navlist {
    flex-wrap: wrap;
  }
  .experties-card,
  .section-heading-grp,
  .about-cards > div,
  .input-box.flx50,
  .team-card,
  .footer-company,
  .footer-first-list {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .experties-card {
    margin-bottom: 16px;
  }
  .tech-card {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 40px 8px;
  }
  .tech-card .card-text h3 {
    font-size: 16px;
    font-weight: 500;
  }
  .tech-bottom {
    margin-left: 0;
  }
  .about-cards {
    margin-left: 0;
    margin-top: 40px;
  }
  .card-center .card {
    margin-left: 0;
    margin-right: 0;
  }
  .ai-section .wrapper {
    flex-direction: column-reverse;
  }
  .ai-figure {
    margin-bottom: 60px;
    margin-left: 0;
  }
  .ai-figure-icon {
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: -80px;
  }
  .team-cards {
    margin-top: 8px;
  }
  .team-card {
    margin-bottom: 24px;
  }
  .service-lists,
  .services .top-grp,
  .journey-cards {
    flex-direction: column;
  }
  .journey-card {
    margin-bottom: 40px;
    padding-bottom: 24px;
    border-bottom: 2px dashed #999;
  }
  .journey-card-year:after,
  .heading-img {
    display: none;
  }
  .input-box.flx50 {
    padding-left: 0;
    padding-right: 0;
  }
  .enquiry-section .form-grp {
    margin-left: 0;
  }
  .footer-first-list {
    margin-left: 0;
    margin-top: 24px;
  }
  .home-enquiry {
    padding-top: 16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .footer-first-list {
    margin-top: 40px;
  }
  .footer-first-list ul {
    margin-top: 4px;
  }
  .footer .ptb48,
  .contact-content.ptb48,
  .team .ptb48,
  .team .team-grp,
  .contact-top,
  .contact-top .top-grp,
  .key-highlight.ptb48,
  .services.ptb48,
  .nav-item a.nav-link,
  .service-lists.ptb48 {
    padding-bottom: 0;
    padding-top: 0;
  }
  .footer.ptb48 {
    padding-bottom: 16px;
    padding-top: 16px;
  }
}