html {
  font-size: 10px;
}

@media (min-width: 1921px) {
  html {
    font-size: 10px;
  }
}

@media (max-width: 1920.98px) {
  html {
    font-size: 8.5px;
  }
}

@media (max-width: 1399.98px) {
  html {
    font-size: 8.5px;
  }
}

@media (max-width: 1199.98px) {
  html {
    font-size: 8px;
  }
}

@media (max-width: 991.98px) {
  html {
    font-size: 8px;
  }
}

@media (max-width: 767.98px) {
  html {
    font-size: 7px;
  }
}

@media (min-width: 1920px) {
  :root {
    --container-width: 1245px;
  }
}

@media (max-width: 1920px) {
  :root {
    --container-width: 1245px;
  }
}

@media (max-width: 1399.98px) {
  :root {
    --container-width: 1140px;
  }
}

@media (max-width: 1199.98px) {
  :root {
    --container-width: 960px;
  }
}

@media (max-width: 991.98px) {
  :root {
    --container-width: 720px;
  }
}

@media (max-width: 767.98px) {
  :root {
    --container-width: 540px;
  }
}

@media (max-width: 575.98px) {
  :root {
    --container-width: 100%;
  }
}

input:focus,
select:focus,
.form-control:focus,
button:focus,
.btn:focus {
  box-shadow: none;
  outline: none;
  border-color: inherit;
}

img {
  width: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  height: auto;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-bottom: 0;
  text-transform: inherit;
}

p.mb-custom {
  margin-bottom: 2rem;
}

body {
  background-color: #ffffff;
  font: 400 1.6rem/1.5 "roboto-400";
  color: #121c27;
  position: relative;
  overflow-x: hidden;
}

@media (max-width: 767.98px) {
  body {
    font-size: 1.8rem;
  }
}

a,
a:hover {
  color: inherit;
  text-decoration: none;
  outline: none;
  transition: all 0.3s linear;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

blockquote,
blockquote p {
  font: 600 1.8rem/1.3 "quicksand-600";
  color: #455780;
  letter-spacing: 0.03rem;
  margin-bottom: 0;
}

@media (max-width: 767.98px) {

  blockquote,
  blockquote p {
    font-size: 1.8rem;
  }
}

blockquote>*:first-child {
  margin-top: 0 !important;
}

blockquote>* {
  font-style: italic !important;
}

@media (max-width: 575.98px) {

  .container,
  .container-fluid {
    padding-left: 1.62162rem;
    padding-right: 1.62162rem;
  }
}

.py-80 {
  padding-top: 8rem;
  padding-bottom: 8rem;
}

.pt-80 {
  padding-top: 8rem;
}

@media (min-width:992px) {
  .pt-lg-80 {
    padding-top: 8rem;
  }
}

.pb-80 {
  padding-bottom: 8rem;
}

.py-60 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.pt-60 {
  padding-top: 6rem;
}

.pb-60 {
  padding-bottom: 6rem;
}

.py-40 {
  padding-bottom: 4rem;
  padding-top: 4rem;
}

.pb-40 {
  padding-bottom: 4rem;
}

.pt-40 {
  padding-top: 4rem;
}

.pb-16 {
  padding-bottom: 1.6rem;
}

.mt-60 {
  margin-top: 6rem;
}

.mb-60 {
  margin-bottom: 6rem;
}

@media (max-width: 991.98px) {
  .py-80 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .pt-80 {
    padding-top: 7rem;
  }

  .pb-80 {
    padding-bottom: 7rem;
  }

  .py-60 {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }

  .pt-60 {
    padding-top: 5rem;
  }

  .pb-60 {
    padding-bottom: 5rem;
  }

  .mt-60 {
    margin-top: 5rem;
  }

  .mb-60 {
    margin-bottom: 5rem;
  }
}

@media (max-width: 575.98px) {
  .pb-xs-0 {
    padding-bottom: 0;
  }
}

.mb-40 {
  margin-bottom: 4rem;
}

.wpcf7-spinner {
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

form {
  position: relative;
}

.social-icon {
  gap: 1.5rem;
}

.social-icon .icon-item {
  display: block;
  line-height: 0;
}

.social-icon .icon-item img {
  height: 1.4rem;
  transition: all 0.1s linear;
}

.social-icon .icon-item img[alt=youtube] {
  height: 1.2rem;
}

.social-icon .icon-item:hover img {
  filter: invert(30%) sepia(15%) saturate(1676%) hue-rotate(352deg) brightness(100%) contrast(90%);
}


/*  buttons start  */
.theme-btn {
  font: 500 1.6rem/1.2 "roboto-500";
  color: #ffffff;
  padding: 2rem 3.8rem;
  display: inline-block;
  background: var(--gradient);
  border-radius: 0.4rem;
  text-align: center;
  position: relative;
  border: none;
  box-shadow: none;
  outline: none;
  transition: all 0.3s ease-in-out;
}

.theme-btn.border-btn {
  background: transparent;
}

.theme-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.2rem;
  border-radius: inherit;
  background: var(--gradient);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

.theme-btn.border-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.2rem;
  border-radius: 0.4rem;
  background: var(--gradient);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

.theme-btn:hover {
  background: #fff;
  color: #DCA449;
}

.theme-btn.arrow-btn:hover::after {
  filter: brightness(0) saturate(100%) invert(76%) sepia(33%) saturate(763%) hue-rotate(349deg) brightness(92%) contrast(89%);
}

.theme-btn.blue-btn {
  background: #455780;
}

.theme-btn.blue-btn:hover {
  color: #ffffff;
  background: #283658;
}

.theme-btn.blue-btn::before {
  content: none;
}

.theme-btn.blue-border-btn {
  background: transparent;
  color: #455780;
}

.theme-btn.blue-border-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #455780;
  background: transparent;
  border-radius: 0.4rem;
}

.theme-btn.dark-border-btn {
  background: transparent;
  color: #121c27;
  padding: 1.54rem 2rem;
}

.theme-btn.dark-border-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #121c27;
  background: transparent;
  border-radius: 0.4rem;
}

.theme-btn.dark-border-btn:hover {
  color: #ffffff;
  background: #121c27;
}

@media (max-width: 767.98px) {
  .theme-btn {
    font-size: 1.8rem;
  }
}


/* common css */
@font-face {
  font-family: "roboto-400";
  src: url("../fonts/roboto-regular.woff2") format("woff2"), url("../fonts/roboto-regular.ttf") format("ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}

@font-face {
  font-family: "roboto-500";
  src: url("../fonts/roboto-medium.woff2") format("woff2"), url("../fonts/roboto-medium.ttf") format("ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
}

@font-face {
  font-family: "roboto-600";
  src: url("../fonts/roboto-semibold.woff2") format("woff2"), url("../fonts/roboto-semibold.ttf") format("ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
}

@font-face {
  font-family: "roboto-700";
  src: url("../fonts/roboto-bold.woff2") format("woff2"), url("../fonts/roboto-bold.ttf") format("ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
}

@font-face {
  font-family: "roboto-800";
  src: url("../fonts/roboto-extrabold.woff2") format("woff2"), url("../fonts/roboto-extrabold.ttf") format("ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 800;
  font-stretch: normal;
}

@font-face {
  font-family: "eudoxus-300";
  src: url("../fonts/eudoxus-light.woff2") format("woff2"), url("../fonts/eudoxus-light.ttf") format("ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 300;
  font-stretch: normal;
}

@font-face {
  font-family: "eudoxus-400";
  src: url("../fonts/eudoxus-regular.woff2") format("woff2"), url("../fonts/eudoxus-regular.ttf") format("ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}

@font-face {
  font-family: "eudoxus-500";
  src: url("../fonts/eudoxus-medium.woff2") format("woff2"), url("../fonts/eudoxus-medium.ttf") format("ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
}

@font-face {
  font-family: "eudoxus-700";
  src: url("../fonts/eudoxus-bold.woff2") format("woff2"), url("../fonts/eudoxus-bold.ttf") format("ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
}

@font-face {
  font-family: "eudoxus-800";
  src: url("../fonts/eudoxus-extrabold.woff2") format("woff2"), url("../fonts/eudoxus-extrabold.ttf") format("ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 800;
  font-stretch: normal;
}

@font-face {
  font-family: "quicksand-600";
  src: url("../fonts/quicksand-semibold.woff2") format("woff2"), url("../fonts/quicksand-semibold.ttf") format("ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
}

@font-face {
  font-family: "anton-400";
  src: url("../fonts/anton-regular.woff2") format("woff2"), url("../fonts/anton-regular.ttf") format("ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}

@font-face {
  font-family: "publicsans-400";
  src: url("../fonts/publicsans-regular.woff2") format("woff2"), url("../fonts/publicsans-regular.ttf") format("ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}

@font-face {
  font-family: "publicsans-500";
  src: url("../fonts/publicsans-medium.woff2") format("woff2"), url("../fonts/publicsans-medium.ttf") format("ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 500;
  font-stretch: normal;
}

@font-face {
  font-family: "publicsans-600";
  src: url("../fonts/publicsans-semibold.woff2") format("woff2"), url("../fonts/publicsans-semibold.ttf") format("ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
}

@font-face {
  font-family: "publicsans-700";
  src: url("../fonts/publicsans-bold.woff2") format("woff2"), url("../fonts/publicsans-bold.ttf") format("ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 700;
  font-stretch: normal;
}

@font-face {
  font-family: "publicsans-800";
  src: url("../fonts/publicsans-extrabold.woff2") format("woff2"), url("../fonts/publicsans-extrabold.ttf") format("ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 800;
  font-stretch: normal;
}

@font-face {
  font-family: "inter";
  src: url("../fonts/inter-variablefont.woff2") format("woff2"), url("../fonts/inter-variablefont.ttf") format("ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 100 900;
  font-optical-sizing: auto;
  font-stretch: normal;
}

@font-face {
  font-family: "poppins-700";
  src: url("../fonts/Poppins-Bold.woff2") format("woff2"), url("../fonts/Poppins-Bold.ttf") format("ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 700;
  font-optical-sizing: auto;
  font-stretch: normal;
}

@font-face {
  font-family: "plus-jakarta-sans-600";
  src: url("../fonts/plusjakartasans-semibold.woff2") format("woff2"), url("../fonts/plusjakartasans-semibold.ttf") format("ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
}

@font-face {
  font-family: "outfit-400";
  src: url("../fonts/Outfit-Regular.woff2") format("woff2"), url("../fonts/Outfit-Regular.ttf") format("ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 400;
  font-stretch: normal;
}

@font-face {
  font-family: "outfit-600";
  src: url("../fonts/Outfit-SemiBold.woff2") format("woff2"), url("../fonts/Outfit-SemiBold.ttf") format("ttf");
  font-display: auto;
  font-style: normal;
  font-weight: 600;
  font-stretch: normal;
}

h1 {
  font-family: "eudoxus-400";
  font-style: normal;
  font-weight: 400;
  font-size: 3.8rem;
  line-height: 1.3;
  color: #ffffff;
}

h2 {
  font-family: "roboto-700";
  font-style: normal;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.2;
  color: #455780;
}

h3 {
  font-family: "eudoxus-400";
  font-style: normal;
  font-weight: 400;
  font-size: 3.8rem;
  line-height: 1.3;
  color: #ffffff;
}

h4 {
  font-family: "roboto-700";
  font-style: normal;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.5;
  color: #121c27;
}

h5 {
  font-family: "eudoxus-800";
  font-style: normal;
  font-weight: 800;
  font-size: 1.8rem;
  line-height: 1.44;
  color: #ffffff;
}

h6 {
  font-family: "roboto-400";
  font-style: normal;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.56;
  color: #ffffff;
}

/* Dummy Tags */
.dh1 {
  font-family: "eudoxus-400";
  font-style: normal;
  font-weight: 400;
  font-size: 3.8rem;
  line-height: 1.3;
  color: #ffffff;
}

.dh2 {
  font-family: "roboto-700";
  font-style: normal;
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.2;
  color: #455780;
}

.dh3 {
  font-family: "eudoxus-400";
  font-style: normal;
  font-weight: 400;
  font-size: 3.8rem;
  line-height: 1.3;
  color: #ffffff;
}

.dh4 {
  font-family: "roboto-700";
  font-style: normal;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.5;
  color: #121c27;
}

.dh5 {
  font-family: "eudoxus-800";
  font-style: normal;
  font-weight: 800;
  font-size: 1.8rem;
  line-height: 1.44;
  color: #ffffff;
}

.dh6 {
  font-family: "roboto-400";
  font-style: normal;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.56;
  color: #ffffff;
}

h1.editor-h,
h2.editor-h,
h3.editor-h,
h4.editor-h,
h5.editor-h,
h6.editor-h {
  color: #121C27;
  font-family: "eudoxus-700";
  font-weight: 700;
}

h2.editor-h {
  font-size: 3rem;
}

h3.editor-h {
  font-size: 2.4rem;
}

h4.editor-h {
  font-size: 2rem;
}

h5.editor-h {
  font-size: 1.8rem;
}

h6.editor-h {
  font-size: 1.4rem;
}

/* Dummy Tags End */

p {
  font-family: "roboto-400";
  font-style: normal;
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.56;
  color: #121c27;
}

@media (max-width: 767.98px) {
  p {
    font-size: 1.8rem;
  }
}

p b,
p strong {
  font-family: "roboto-700";
  font-weight: 700;
}

.dp {
  font-family: "roboto-400";
  font-style: normal;
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.56;
  color: #121c27;
}

@media (max-width: 767.98px) {
  .dp {
    font-size: 1.8rem;
  }
}

.dp b,
.dp strong {
  font-family: "roboto-700";
  font-weight: 700;
}

span {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  font-size: inheritrem;
  line-height: inherit;
  color: inherit;
}

a {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  font-size: inheritrem;
  line-height: inherit;
  color: inherit;
}

.da {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  font-size: inheritrem;
  line-height: inherit;
  color: inherit;
}

.txt-primary {
  color: #121C27;
}

/* typography css */
:root {
  --logo-width: 24.7rem;
  --header-height: -12.9rem;
  --n-header-height: calc(-1*var(--header-height));
}

@media (max-width: 575.98px) {
  :root {
    --logo-width: 16rem;
    --header-height: -9.66667rem;
  }
}


.preloader-bg,
#preloader {
  position: fixed;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #121c27;
  z-index: 10000009;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  min-height: 100vh;
  min-width: 100vw;
}

#preloader-status {
  display: table-cell;
  vertical-align: middle;
}

.preloader-logo {
  width: 8vw;
  min-width: 8rem;
  transform-style: preserve-3d;
  animation: flip-cycle 2.4s infinite ease-in-out;
  animation-delay: 0.2s;
}
 
@keyframes flip-cycle {
  0% {
    transform: rotateY(0deg);
  }

  30% {
    transform: rotateY(180deg);
  }

  50% {
    transform: rotateY(180deg);
  }

  80% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(0deg);
  }
}

body:not(.home) header {
  background: transparent;
  backdrop-filter: none;
}

body.\34 04 header,
body.page-template-404-template header,
body.search header,
body.page-template-thank-you header {
  background: #121C27 !important;
}

body.home:not(.header-sticked) header,
body.visible-sides:not(.header-sticked) header {
  background: rgba(0, 0, 0, 0.3) !important;
}

header {
  position: relative;
  background: #0000001A;
  background-repeat: no-repeat;
  background-size: cover;
  backdrop-filter: blur(0.3rem);
  z-index: 10;
}

header .top-bar {
  position: relative;
}

header .top-bar .top-head {
  width: calc(100% - var(--logo-width));
  gap: 2.6rem;
  padding: 0.7rem 0;
  background-color: #121C27;
}

header .top-bar .top-head .top-head-item {
  font-size: 1.4rem;
  color: #ffffff;
  gap: 0.8rem;
}

header .top-bar .top-head .top-head-item img {
  width: 1.2rem;
  transition: all 0.1s linear;
}

header .top-bar .top-head .top-head-item::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1.3rem;
  width: 1px;
  height: 100%;
  background-color: #ffffff;
}

header .top-bar .top-head .top-head-item:hover {
  color: #cc8c3d;
}

header .top-bar .top-head .top-head-item:hover img {
  filter: invert(30%) sepia(15%) saturate(1676%) hue-rotate(352deg) brightness(100%) contrast(90%);
}

header .top-bar .top-head::before {
  content: "";
  position: absolute;
  top: 0;
  right: 100%;
  width: var(--logo-width);
  height: 100%;
  background: #121C27;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 92% 68%, 0 68%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 92% 68%, 0 68%);
  z-index: 1;
  box-shadow: 1px 0 0 rgb(18, 28, 39);
}

header .top-bar::before,
header .top-bar::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: #121C27;
  z-index: -1;
}

header .top-bar::before {
  left: 0;
  height: 68%;
}

header .main-header {
  padding: 1.2rem 0;
}

header .main-header .logo img {
  margin-top: -0.8rem;
  margin-bottom: 0.6rem;
  width: var(--logo-width);
}

header .main-header .navbar .nav {
  gap: 3rem 5rem;
  width: 100%;
}

header .main-header .navbar>.nav>.nav-item>.nav-link {
  font: 500 1.8rem/1.2 "roboto-500";
  color: #ffffff;
  padding: 0;
  position: relative;
  transition: all 0.3s linear;
}

header .main-header .navbar>.nav>.nav-item>.nav-link img {
  position: absolute;
  top: calc(100% + 3.4rem);
  left: 50%;
  width: 3.4rem;
  transform: translateX(-50%) rotate(-90deg);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 2;
}

header .main-header .navbar>.nav>.nav-item>.nav-link::before {
  content: "";
  position: absolute;
  bottom: -0.8rem;
  left: 0;
  width: 0;
  height: 2px;
  transition: all 0.3s linear;
  background: var(--gradient);
}

header .main-header .navbar>.nav>.nav-item:has(> .sub-menu)>.nav-link {
  padding-right: 2.2rem;
}

header .main-header .navbar>.nav>.nav-item:has(> .sub-menu)>.nav-link::after {
  content: "";
  position: absolute;
  top: 0.6rem;
  right: 0;
  width: 1.2rem;
  height: 1rem;
  background-image: url("../images/down-arrow.png");
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  filter: brightness(0) invert(1);
  transition: all 0.3s linear;
}

header .main-header .navbar>.nav>.nav-item.active>.nav-link {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

header .main-header .navbar>.nav>.nav-item.active>.nav-link img {
  opacity: 1;
  visibility: visible;
}

header .main-header .navbar>.nav>.nav-item.active>.nav-link::after {
  filter: none;
}

header .main-header .navbar>.nav>.nav-item.active>.nav-link::before {
  width: 100%;
}

@media (min-width: 992px) {
  header .main-header .navbar>.nav>.nav-item:hover>.nav-link {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  header .main-header .navbar>.nav>.nav-item:hover>.nav-link img {
    opacity: 1;
    visibility: visible;
  }

  header .main-header .navbar>.nav>.nav-item:hover>.nav-link::after {
    filter: none;
  }

  header .main-header .navbar>.nav>.nav-item:hover>.nav-link::before {
    width: 100%;
  }

  header .main-header .navbar .nav .nav-item:hover .sub-menu {
    opacity: 1;
    visibility: visible;
  }

  header .main-header .navbar .nav .nav-item:hover::after {
    opacity: 1;
    visibility: visible;
  }
}

@media (max-width: 991.98px) {
  header .main-header .navbar .nav .nav-item.active .sub-menu {
    opacity: 1;
    visibility: visible;
  }
}

header .main-header .actions-btns {
  gap: 2rem;
}

header .main-header .actions-btns .search-icons {
  width: 3rem;
  border: none;
  background-color: transparent;
}

header .main-header .actions-btns .search-popup {
  position: fixed;
  top: 0;
  left: 20%;
  width: 60%;
  height: 60%;
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  transition: 0.3s all ease;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.3)
}

header .main-header .actions-btns .search-popup.active {
  left: 0;
  opacity: 1;
  visibility: visible;
  width: 100vw;
  height: 100vh;
}

header .main-header .actions-btns .search-popup .search-popup-content {
  background: white;
  border-radius: 30rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  width: 60%;
  padding: 1rem 1rem 1rem 3rem;
  opacity: 0;
  transform: translateY(-60%);
  transition: 0.4s all ease;
  transition-delay: 0.2s;
}

header .main-header .actions-btns .search-popup.active .search-popup-content {
  opacity: 1;
  transform: translateY(0);
}

header .main-header .actions-btns .search-popup .search-popup-content form {
  width: 100%;
  display: flex;
}

header .main-header .actions-btns .search-popup .search-popup-content .form-control {
  border: none;
}

header .main-header .actions-btns .search-popup .close-btn {
  position: absolute;
  top: 4rem;
  right: 4rem;
  height: 4.8rem;
  width: 4.8rem;
  border: none;
  border-radius: 0.8rem;
  background-color: rgb(170, 199, 229);
}

header .main-header .actions-btns .search-popup .close-btn img {
  width: 2.3rem;
}

header .main-header .actions-btns .search-popup .search-popup-content .search-submit-btn {
  border-radius: 50%;
  padding: 1rem;
}

header .main-header .actions-btns .search-popup .search-popup-content .search-submit-btn img {
  width: 3rem;
}

header .main-header .actions-btns .search-popup .search-popup-content .search-submit-btn:hover img {
  filter: brightness(0);
}

@media (max-width:767.98px) {
  header .main-header .actions-btns .search-popup .search-popup-content {
    width: 80%;
  }

  header .main-header .actions-btns .search-popup .close-btn {
    top: 2rem;
    right: 2rem;
  }
}

header .main-header .actions-btns .theme-btn {
  padding: 0.8rem 1.6rem;
}

header .main-header .navbar .backbtn {
  transform: translateY(-80%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

header .main-header .navbar .backbtn img {
  transform: rotate(-135deg);
}

@media (max-width: 991.98px) {
  header .main-header .navbar {
    position: fixed !important;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100vh;
    padding: 8.8rem 0;
    display: flex;
    background-color: #121c27;
    z-index: 2;
    transition: all 0.3s linear;
  }

  header .main-header .navbar>.nav {
    gap: 3rem;
    width: 20%;
    padding: 2rem;
    margin-top: 8rem;
    align-self: start;
  }

  header .main-header .navbar>.nav>.nav-item {
    width: 100%;
  }

  header .main-header .navbar>.nav>.nav-item>.nav-link {
    font-size: 2.6rem;
    color: #ffffff;
    max-width: 15rem;
    margin: 0 auto;
  }

  header .main-header .navbar>.nav>.nav-item.active>.nav-link {
    font-size: 2.6rem;
    line-height: 1.57;
  }

  header .main-header .navbar>.nav>.nav-item:has(> .sub-menu)>.nav-link::after {
    top: 50%;
    transform: rotate(-90deg) translatex(50%);
  }

  header .main-header .navbar>.nav>.nav-item.active>.nav-link::after {
    transform: rotate(-90deg) translate(50%, 60%);
  }

  header .main-header .navbar>.nav>.nav-item>.nav-link img {
    /* 		left: unset;
		right: -5.2rem;
		top: 50%;
		transform: translateY(-50%)
			rotate(180deg); */
    display: none;
  }

  header .main-header .navbar>.nav>.nav-item:last-child {
    margin-left: 0;
  }

  header .main-header .navbar>.nav>.nav-item:last-child>.nav-link {
    font-size: 2.6rem;
    line-height: 1.57;
  }

  header .main-header .navbar.active {
    left: 0;
  }

  header .main-header .navbar .close,
  header .main-header .navbar .backbtn {
    position: absolute;
    width: 4.8rem;
    height: 4.8rem;
    top: 2rem;
    border-radius: 0.8rem;
    background-color: rgb(170, 199, 229);
  }

  header .main-header .navbar .close {
    right: 2rem;
  }

  header .main-header .navbar .backbtn {
    left: 2rem;
  }

  header .main-header .navbar .close img,
  header .main-header .navbar .backbtn img {
    width: 2.3rem;
  }

  header .main-header .actions-btns .theme-btn {
    font-size: 1.8rem;
  }

  header .main-header .burger-menu {
    width: 3.75rem;
    height: 3.75rem;
    background: var(--gradient);
    border-radius: 0.4rem;
  }

  header .main-header .burger-menu img {
    width: 2rem;
  }
}

@media (max-width:767.98px) {
  header .main-header .navbar>.nav {
    width: 25%;
  }
}

@media (max-width: 575.98px) {
  header .top-bar .top-head::before {
    height: 2.8rem;
  }

  header .main-header .actions-btns {
    gap: 1.2rem 1rem;
  }

  header .main-header .navbar>.nav {
    width: 100%;
    transition: all 0.3s ease;
  }

  header .main-header .navbar>.nav>.nav-item>.nav-link {
    margin-left: 2rem;
  }

  header .main-header .navbar>.nav>.nav-item>.nav-link img {
    display: none;
  }

  header .main-header .navbar>.nav:has(> .nav-item.active) {
    transform: translateX(-100%);
  }

  header .main-header .navbar:has(.nav > .nav-item.active) .backbtn {
    transform: none;
    opacity: 1;
    visibility: visible;
  }
}

.sub-menu {
  position: absolute;
  left: 0;
  width: 100%;
  padding-top: 6.4rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

@media (min-width: 992px) {
  header .main-header>.navbar>.nav>.nav-item::after {
    z-index: -2;
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.3);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }
}

.sub-menu .sub-contain {
  background-color: #f5f5f5;
  border-radius: 0.6rem;
  overflow: hidden;
  --bs-gutter-x: 0;
}

.sub-menu .sub-contain .menus {
  padding: 2rem;
}

.sub-menu .sub-contain .menus .main-ttl {
  max-width: 50rem;
  gap: 3rem;
  padding: 1rem 1rem 3.5rem 1rem;
}

.sub-menu .sub-contain .menus .main-ttl .logo {
  width: auto;
  height: 8.7rem;
}

.sub-menu .sub-contain .menus .main-ttl .dh5 {
  font-family: "eudoxus-700";
  color: #121c27;
  padding-bottom: 1.2rem;
}

.sub-menu .sub-contain .menus .main-ttl .next-btn {
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 100%;
  background: var(--gradient);
  transition: all 0.3s linear;
}

.sub-menu .sub-contain .menus .main-ttl .next-btn img {
  width: 2.8rem;
}

.sub-menu .sub-contain .menus .main-ttl .next-btn:hover {
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.06);
}

.sub-menu .sub-contain .menus .main-ttl .next-btn.has-popup-card {
  position: relative;
}

.sub-menu .sub-contain .menus .main-ttl .next-btn.has-popup-card .popup-card {
  position: absolute;
  left: 100%;
  top: 0;
  padding: 1.6rem;
  width: 28rem;
  background: #fff;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);
  border-radius: 0.4rem;
  margin-left: 1.2rem;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  transform: translateX(-1.2rem);
}

.sub-menu .sub-contain .menus .main-ttl .next-btn.has-popup-card .popup-card .card-ttl {
  font-family: "eudoxus-700";
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.44;
  color: #121c27;
  margin-bottom: 1.2rem;
}

@media (max-width: 991.98px) {
  .sub-menu .sub-contain .menus .main-ttl .next-btn.has-popup-card .popup-card {
    display: none;
  }
}

.sub-menu .sub-contain .menus .main-ttl .next-btn.has-popup-card:hover .popup-card {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.sub-menu .sub-contain .menus .menu {
  gap: 1.6rem;
}

.sub-menu .sub-contain .menus .menu li {
  width: calc(33.33% - 1.1rem);
}

.sub-menu .sub-contain .menus .menu li .nav-link {
  background-color: #ffffff;
  color: #000000;
  border-radius: 0.6rem;
  padding: 0.8rem;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  transition: all 0.3s linear;
}

.sub-menu .sub-contain .menus .menu li .nav-link .menu-image {
  width: 4.5rem;
  height: 4.5rem;
  -o-object-fit: contain;
  object-fit: contain;
}

.sub-menu .sub-contain .menus .menu li .nav-link span {
  font: 500 1.4rem/1.28 "roboto-500";
  padding-left: 0;
  margin-bottom: -0.2rem;
}

.sub-menu .sub-contain .menus .menu li .nav-link:hover {
  color: #455780;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.06);
}

.sub-menu .sub-contain .highlight {
  padding: 2.6rem;
}

.sub-menu .sub-contain .highlight img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.sub-menu .sub-contain .highlight .dh4 {
  color: #455780;
  padding-bottom: 0.8rem;
}

.sub-menu .sub-contain .resources-list .nav-link,
.sub-menu .sub-contain .tab-link {
  color: #121C27;
}

.sub-menu .sub-contain .resources-list .menu-image,
.sub-menu .sub-contain .tab-icon {
  height: 3.4rem;
  width: 3.4rem;
  margin-right: 1.4rem;
  filter: brightness(0%) saturate(100%) invert(8%) sepia(6%) hue-rotate(185deg);
}

.sub-menu .sub-contain .resources-list .nav-link:hover,
.sub-menu .sub-contain .resources-list .nav-link.active,
.sub-menu .sub-contain .tab-link:hover,
.sub-menu .sub-contain .tab-link.active {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.sub-menu .sub-contain .resources-list .nav-link:hover .menu-image,
.sub-menu .sub-contain .resources-list .nav-link.active .resource-icon,
.sub-menu .sub-contain .tab-link:hover .tab-icon,
.sub-menu .sub-contain .tab-link.active .tab-icon {
  filter: none;
}

.sub-menu-resources {
  background-color: transparent;
}

@media (min-width:992px) {
  .sub-menu .sub-contain {
    max-height: calc(100vh - var(--n-header-height) - 3.2rem);
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .sub-menu .sub-contain::-webkit-scrollbar {
    display: none;
  }

  .sub-menu-resources .sub-contain {
    width: 65%;
  }
}

.sub-menu-resources .sub-contain .insight-hub {
  padding: 2.6rem 3.6rem 1.2rem 3.1rem;
}

.sub-menu-resources .sub-contain .insight-hub .dh4 {
  position: relative;
  display: inline-block;
  margin-bottom: 2rem;
}

.sub-menu-resources .sub-contain .insight-hub .dh4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 8rem;
  background: var(--gradient);
}

.sub-menu-resources .sub-contain .insight-hub .next-btn {
  width: 4.6rem;
  height: 4.6rem;
  border-radius: 100%;
  background: var(--gradient);
  transition: all 0.3s linear;
  margin-top: 2.5rem;
}

.sub-menu-resources .sub-contain .insight-hub .next-btn img {
  width: 2.8rem;
}

.sub-menu-resources .sub-contain .insight-hub .next-btn:hover {
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.06);
}

.sub-menu-resources .sub-contain .resources-list {
  padding: 2.6rem 1.6rem;
  background-color: #ededed;
}

.sub-menu-about {
  background-color: transparent;
}

@media (min-width:992px) {
  .sub-menu-about .sub-contain {
    width: 63%;
  }
}

.sub-menu-about .sub-contain .tab-content {
  padding: 3rem 4.8rem;
}

.sub-menu-about .sub-contain .tab-content .tab-pane .dh4 {
  position: relative;
  display: inline-block;
  margin-bottom: 2rem;
}

.sub-menu-about .sub-contain .tab-content .tab-pane .dh4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 8rem;
  background: var(--gradient);
}

.sub-menu-about .sub-contain .tab-content .tab-pane hr {
  transform: translateX(-4.8rem);
  width: calc(100% + 4.8rem);
  color: #000000;
  opacity: 0.1;
}

.sub-menu-about .sub-contain .tab-nav {
  background-color: #ededed;
  padding: 4.2rem 0 4.2rem 2.6rem;
  gap: 1.3rem;
}

@media (max-width:991.98px) {
  .sub-menu {
    width: 80%;
    max-height: calc(100% - 8rem);
    top: 8rem;
    left: 20%;
    overflow-y: auto;
    padding: 0;
  }

  .sub-menu .sub-contain .menus .menu li {
    width: calc(50% - 1.1rem);
  }
}

@media (max-width:767.98px) {
  .sub-menu {
    width: 75%;
    left: 25%;
  }
}

@media (max-width:575.98px) {
  .sub-menu {
    top: 0;
    max-height: calc(100vh - 8rem);
    width: 100%;
    left: 100%;
  }
}

@media (max-width:374.98px) {
  .sub-menu .sub-contain .menus .menu li {
    width: calc(100% - 1.1rem);
  }

  header .main-header .actions-btns .theme-btn {
    font-size: 1.4rem;
    padding: 1rem;
  }
}

.header-setter {
  padding: 6.3rem;
}

.title-wrapper.header-setter,
.title-wrapper .header-setter {
  background: #121c27;
}

/* header css */

.hero-wrapper {
  background: #121c27;
  --hero-height: 63rem;
  height: calc(var(--hero-height) - var(--header-height));
  margin-top: var(--header-height);
}

.hero-wrapper .hero-banner {
  opacity: 1;
}

.hero-wrapper .hero-banner img {
  height: calc(var(--hero-height) - var(--header-height));
}

.hero-wrapper .hero-content {
  position: absolute;
  top: 50%;
  right: 0;
  max-width: 56rem;
  transform: translateY(calc(-50% - var(--header-height) / 2));
  padding: 2.8rem 4rem 4rem 2.8rem;
  background-color: rgba(0, 0, 0, 0.25);
  z-index: 1;
}

.hero-wrapper .hero-content h1,
.hero-wrapper .hero-content .ttl-slider {
  position: initial;
}

.hero-wrapper .hero-content .ttl-slider,
.hero-wrapper .hero-content h1 {
  font-size: 3.2rem;
}

.hero-wrapper .hero-content h1 {
  font-weight: 700;
  font-family: "eudoxus-700";
}

.hero-wrapper .hero-content .ttl-slider strong {
  font-family: "eudoxus-700";
  display: block;
  color: #fff;
  /* background: linear-gradient(70.58deg, #ecbb55 0%, #cc8c3d 100%); */
  /* -webkit-background-clip: text; */
  /* -webkit-text-fill-color: transparent; */
}

.hero-wrapper .hero-content p {
  color: #ffffff;
}

.hero-wrapper .hero-content .btns {
  padding: 3rem 0 1.6rem;
  gap: 2rem;
}

.hero-wrapper .hero-content blockquote {
  color: #ffffff;
}

.hero-wrapper .hero-content::before {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: 0;
  width: 100%;
  height: 0.5rem;
  background: var(--gradient);
}

.hero-wrapper .hero-content .slick-arrow {
  top: auto;
  left: 3.4rem;
  bottom: -2rem;
  width: 4.8rem;
  height: 4.8rem;
  background: var(--gradient);
  transform: none;
}

.hero-wrapper .hero-content .slick-arrow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../images/right.png");
  background-size: 3rem;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
}

.hero-wrapper .hero-content .slick-arrow.slick-prev {
  left: -2rem;
}

.hero-wrapper .hero-content .slick-arrow.slick-prev::before {
  transform: rotate(180deg);
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .hero-wrapper {
    --hero-height: 52rem;
  }
}

@media (max-width: 991.98px) {
  .hero-wrapper {
    height: auto;
    --header-height: -10.6rem;
  }

  .hero-wrapper .hero-content {
    max-width: 52rem;
    padding: 1.8rem 1.8rem 4rem;
  }

  .hero-wrapper .hero-content h1 {
    font-size: 2.8rem;
  }

  .hero-wrapper .hero-content .ttl-slider {
    font-size: 3rem;
  }

  .hero-wrapper .hero-content .btns {
    padding: 1.6rem 0;
  }

  .hero-wrapper .hero-content .btns .theme-btn {
    padding: 1.6rem 2rem;
  }

  .hero-wrapper .hero-content .slick-arrow {
    left: 3.4rem;
    width: 4.6rem;
    height: 4.6rem;
  }

  .hero-wrapper .hero-banner img {
    height: auto;
    aspect-ratio: 2.37/1;
    min-height: 52rem;
  }
}

@media (max-width: 767.98px) {
  .hero-wrapper .hero-content .btns .theme-btn {
    padding: 2rem 2rem 1.6rem;
  }

  .hero-wrapper .hero-banner img {
    min-height: 50rem;
  }

  .hero-wrapper .hero-content {
    max-width: 56rem;
    padding: 1.4rem 1.4rem 3.6rem;
  }

  .hero-wrapper .hero-content .slick-arrow {
    left: 3.2rem;
    width: 3.6rem;
    height: 3.6rem;
    bottom: -1rem;
  }

  .hero-wrapper .hero-content .slick-arrow.slick-prev {
    left: -1.4rem;
  }
}

@media (max-width: 575.98px) {
  .hero-wrapper {
    --hero-height: auto;
    --header-height: -7rem;
  }

  .hero-wrapper .hero-banner img {
    min-height: auto;
  }

  .hero-wrapper .hero-banner img {
    aspect-ratio: 2.73073 / 1;
    min-height: 32rem;
  }

  .hero-wrapper .hero-content {
    position: relative;
    transform: none;
    width: 100%;
    max-width: 100%;
    z-index: 0;
    padding: 2rem 2rem 6.8rem;
  }

  .hero-wrapper .hero-content h1 {
    font-size: 3.2rem;
  }

  .hero-wrapper .hero-content .btns .theme-btn {
    padding-top: 1.6rem;
  }

  .hero-wrapper .hero-content .slick-arrow {
    width: 4rem;
    height: 4rem;
    bottom: calc(100% + 1.6rem);
    right: 1.2rem;
    left: auto;
  }

  .hero-wrapper .hero-content .slick-arrow::before {
    background-size: 2.6rem;
  }

  .hero-wrapper .hero-content .slick-arrow.slick-prev {
    right: 6rem;
    left: auto;
  }
}

@media (max-width: 424.98px) {
  .hero-wrapper .hero-banner img {
    min-height: 34rem;
  }
}

@media (min-width: 1440px) {

  .hero-wrapper,
  .hero-wrapper .hero-banner img {
    height: auto;
    aspect-ratio: 2.37037/1;
  }
}

.counter-wrapper {
  background-color: #F6F7F9;
  border-bottom: 1px solid #F6F7F9;
}

.counter-wrapper .counter-sec .experience .banner-man {
  background-color: #ecbb55;
  transform: skewX(-8deg);
}

.counter-wrapper .counter-sec .experience .banner-man .banner {
  width: 13rem;
  height: 11.5rem;
  opacity: 0.2;
}

.counter-wrapper .counter-sec .experience .banner-man .man {
  position: absolute;
  bottom: 0;
  left: 6rem;
  height: 17rem;
  width: auto;
  z-index: 1;
  transform: skewX(8deg);
}

.counter-wrapper .counter-sec .experience .exp-data {
  padding-left: 8.6rem;
}

@media (min-width:768px) and (max-width:991.98px) {
  .counter-wrapper .counter-sec .experience .exp-data {
    align-items: start !important;
    gap: 0 !important;
    flex-direction: column;
  }
}

.counter-wrapper .counter-sec .experience .exp-data .exp-year {
  font: 800 5.2rem/1.2 "roboto-800";
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.counter-wrapper .counter-sec .experience .exp-data p {
  text-transform: uppercase;
  font-family: "roboto-500";
  line-height: 1.2;
  margin-bottom: -0.5rem;
}

.counter-wrapper .counter-sec .experience .exp-data p span {
  display: block;
  font-family: "roboto-700";
  font-size: 3.8rem;
}

.counter-wrapper .counter-sec .experience::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  transform: skewX(-8deg);
}

.counter-wrapper .counter-sec .counters .counter h3 .counter-ttl {
  font-family: "eudoxus-800";
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-bottom: 0.4rem;
}

.counter-wrapper .counter-sec .counters .counter p {
  font-family: "roboto-500";
  text-transform: uppercase;
  line-height: 1.25;
  padding-top: 0.2rem;
  color: #121c27;
}

@media (max-width: 991.98px) {
  .counter-wrapper .counter-sec .counters .counter p {
    font-size: 1.6rem;
  }
}

@media (max-width: 575.98px) {
  .counter-wrapper .counter-sec .counters .counter h3 .counter-ttl {
    font-size: 3.2rem;
  }

  .counter-wrapper .counter-sec .experience .exp-data .exp-year {
    font-size: 3.8rem;
  }

  .counter-wrapper .counter-sec .experience .exp-data p {
    font-size: 1.5rem;
  }

  .counter-wrapper .counter-sec .experience .exp-data p span {
    font-size: 2.4rem;
  }
}