/*
Theme Name: MT-FORUM - Modern Responsive Forum HTML5 & Next js, React js Template
Author: mtthemetech
Author URI: https://themeforest.net/user/mtthemetech
Tags: forum, theme,blog, forum website, simple forum, html, next js, react js
Description:  MT-Forum is an innovative and adaptable Modern Responsive Forum HTML Template designed in both styles (light and dark versions for all pages) with three unique modern home pages to enhance your online community and discussion platforms.
Version: 1.0.0
*/
/************************************** base css **************************************/
@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Poppins:wght@400;500;600;700&display=swap");
body {
  margin: 0;
  font-family: "Poppins", serif; }

input {
  outline: 0; }

select {
  outline: 0;
  border: 0; }

a {
  text-decoration: none;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; }

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

button {
  border: 0;
  background-color: transparent; }

.py-120 {
  padding: 120px 0px; }
  @media (max-width: 1439.98px) {
    .py-120 {
      padding: 80px 0px; } }
  @media (max-width: 767.98px) {
    .py-120 {
      padding: 60px 0px; } }

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

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

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

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

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

.mt-60 {
  margin-top: 60px; }
  @media (max-width: 767.98px) {
    .mt-60 {
      margin-top: 30px; } }

.mb-60 {
  margin-bottom: 60px; }
  @media (max-width: 767.98px) {
    .mb-60 {
      margin-bottom: 30px; } }

.ml-60 {
  margin-left: 60px; }
  @media (max-width: 767.98px) {
    .ml-60 {
      margin-left: 30px; } }
  @media (max-width: 575.98px) {
    .ml-60 {
      margin-left: 15px; } }

.ml-120 {
  margin-left: 120px; }
  @media (max-width: 767.98px) {
    .ml-120 {
      margin-left: 60px; } }
  @media (max-width: 575.98px) {
    .ml-120 {
      margin-left: 30px; } }

h1,
h2 {
  font-weight: 700;
  line-height: 120%;
  margin: 0; }

h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: 130%;
  margin: 0; }

h1 {
  font-size: 64px; }
  @media (max-width: 1599.98px) {
    h1 {
      font-size: 54px; } }
  @media (max-width: 991.98px) {
    h1 {
      font-size: 36px; } }
  @media (max-width: 767.98px) {
    h1 {
      font-size: 32px; } }

h2 {
  font-size: 48px; }
  @media (max-width: 1599.98px) {
    h2 {
      font-size: 42px; } }
  @media (max-width: 991.98px) {
    h2 {
      font-size: 30px; } }
  @media (max-width: 767.98px) {
    h2 {
      font-size: 28px; } }

h3 {
  font-size: 40px;
  line-height: 120%; }
  @media (max-width: 1599.98px) {
    h3 {
      font-size: 32px; } }
  @media (max-width: 991.98px) {
    h3 {
      font-size: 26px; } }
  @media (max-width: 767.98px) {
    h3 {
      font-size: 24px; } }

h4 {
  font-size: 32px; }
  @media (max-width: 1599.98px) {
    h4 {
      font-size: 28px; } }
  @media (max-width: 991.98px) {
    h4 {
      font-size: 22px; } }
  @media (max-width: 767.98px) {
    h4 {
      font-size: 20px; } }

h5 {
  font-size: 24px; }
  @media (max-width: 1599.98px) {
    h5 {
      font-size: 20px; } }
  @media (max-width: 991.98px) {
    h5 {
      font-size: 18px; } }
  @media (max-width: 767.98px) {
    h5 {
      font-size: 16px; } }

h6 {
  font-size: 20px; }
  @media (max-width: 1599.98px) {
    h6 {
      font-size: 18px; } }
  @media (max-width: 991.98px) {
    h6 {
      font-size: 16px; } }
  @media (max-width: 767.98px) {
    h6 {
      font-size: 14px; } }

p {
  font-size: 16px;
  line-height: 170%;
  font-weight: 400; }
  @media (max-width: 991.98px) {
    p {
      font-size: 14px; } }
  @media (max-width: 767.98px) {
    p {
      font-size: 12px; } }

/******************************* theme css **********************************/
.bg-class {
  background-size: cover;
  -o-object-fit: cover;
  object-fit: cover;
  background-repeat: no-repeat; }

.mf-nice-select {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 60px;
  min-width: 189px;
  padding: 16px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid #e6e6eb;
  background: #ffffff;
  -webkit-box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); }
  .mf-nice-select .current {
    color: #091e42;
    font-family: "Poppins", serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%; }

@media (min-width: 1919.98px) {
  .container {
    max-width: 1620px; } }

.item-rotate {
  -webkit-animation: rotted 6s infinite ease-in-out;
  animation: rotted 6s infinite ease-in-out;
  -webkit-animation-direction: alternate;
  animation-direction: alternate; }

@-webkit-keyframes rotted {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); }
  100% {
    -webkit-transform: rotate(320deg);
    transform: rotate(320deg); } }

@keyframes rotted {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg); }
  100% {
    -webkit-transform: rotate(320deg);
    transform: rotate(320deg); } }

.item-zooming {
  -webkit-animation: zooming 5s infinite ease-in-out;
  -o-animation: zooming 5s infinite ease-in-out;
  -ms-animation: zooming 5s infinite ease-in-out;
  -moz-animation: zooming 5s infinite ease-in-out;
  animation: zooming 5s infinite ease-in-out; }

@-webkit-keyframes zooming {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

@keyframes zooming {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1); }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1); }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1); } }

.item-bounce {
  -webkit-animation: bounce 3s infinite ease-in-out;
  -o-animation: bounce 3s infinite ease-in-out;
  -ms-animation: bounce 3s infinite ease-in-out;
  -moz-animation: bounce 3s infinite ease-in-out;
  animation: bounce 3s infinite ease-in-out; }

@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px); }
  50% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px); }
  100% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px); } }

@keyframes bounce {
  0% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px); }
  50% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px); }
  100% {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px); } }

.item-animateOne {
  -webkit-animation: animateOne 15s infinite ease-in-out;
  -o-animation: animateOne 15s infinite ease-in-out;
  -ms-animation: animateOne 15s infinite ease-in-out;
  -moz-animation: animateOne 15s infinite ease-in-out;
  animation: animateOne 15s infinite ease-in-out; }

@-webkit-keyframes animateOne {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  50% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

@keyframes animateOne {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0); }
  50% {
    -webkit-transform: translateX(-100px);
    transform: translateX(-100px); }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0); } }

.item-animateTwo {
  -webkit-animation: animateTwo 15s infinite ease-in-out;
  -o-animation: animateTwo 15s infinite ease-in-out;
  -ms-animation: animateTwo 15s infinite ease-in-out;
  -moz-animation: animateTwo 15s infinite ease-in-out;
  animation: animateTwo 15s infinite ease-in-out; }

@-webkit-keyframes animateTwo {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(-50px, 50px);
    transform: translate(-50px, 50px); }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); } }

@keyframes animateTwo {
  0% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); }
  50% {
    -webkit-transform: translate(-50px, 50px);
    transform: translate(-50px, 50px); }
  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0); } }

@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); } }

@keyframes ticker {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%); }
  100% {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%); } }

/******************************** layouts ******************************/
.mf-header-area {
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
  left: 0;
  width: 100%;
  z-index: 5;
  background-color: transparent;
  padding: 20px 0px;
  position: absolute;
  top: 0;
  border-bottom: 1px solid var(--neutral-700, #404953); }
  .mf-header-area.sticky {
    position: fixed;
    background-color: #141e31;
    z-index: 11; }
  .mf-header-area .logo {
    width: 247px;
    height: 48px;
    -o-object-fit: contain;
    object-fit: contain; }
    @media (max-width: 1199.98px) {
      .mf-header-area .logo {
        width: 180px; } }
    @media (max-width: 575.98px) {
      .mf-header-area .logo {
        width: 160px; } }
  .mf-header-area .mobile-mobile-trigger-btn {
    background-color: #3C72FC;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    margin-left: 10px;
    -webkit-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    border: 1px solid transparent; }
    @media (max-width: 575.98px) {
      .mf-header-area .mobile-mobile-trigger-btn {
        width: 48px;
        height: 48px; } }
    .mf-header-area .mobile-mobile-trigger-btn:hover {
      background-color: transparent;
      border: 1px solid #ff259b; }
      .mf-header-area .mobile-mobile-trigger-btn:hover svg path {
        stroke: #ff259b; }
    .mf-header-area .mobile-mobile-trigger-btn svg {
      -webkit-transition: all 0.3s ease-in;
      -o-transition: all 0.3s ease-in;
      transition: all 0.3s ease-in; }
      .mf-header-area .mobile-mobile-trigger-btn svg path {
        -webkit-transition: all 0.3s ease-in;
        -o-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
        stroke: #ffffff; }

.light-mode-logo {
  display: block; }

.dark-mode-logo {
  display: none; }

/******************************** components ******************************/
.template-btn, .primary-btn, .secondary-btn, .secondary-btn-2 {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 8px;
  font-family: "Poppins", serif;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  -webkit-transition: all 0.3s ease-in;
  -o-transition: all 0.3s ease-in;
  transition: all 0.3s ease-in; }
  .template-btn.xl, .xl.primary-btn, .xl.secondary-btn, .xl.secondary-btn-2 {
    font-size: 24px;
    gap: 10px;
    padding: 18px 60px;
    height: 74px; }
    @media (max-width: 1399.98px) {
      .template-btn.xl, .xl.primary-btn, .xl.secondary-btn, .xl.secondary-btn-2 {
        padding: 16px 54px;
        height: 70px; } }
    @media (max-width: 767.98px) {
      .template-btn.xl, .xl.primary-btn, .xl.secondary-btn, .xl.secondary-btn-2 {
        padding: 16px 30px;
        height: 56px;
        font-size: 18px; } }
  .template-btn.lg, .lg.primary-btn, .lg.secondary-btn, .lg.secondary-btn-2 {
    font-size: 18px;
    gap: 10px;
    padding: 18px 20px;
    height: 60px; }
    @media (max-width: 1399.98px) {
      .template-btn.lg, .lg.primary-btn, .lg.secondary-btn, .lg.secondary-btn-2 {
        padding: 16px 24px;
        height: 56px; } }
  .template-btn.md, .md.primary-btn, .md.secondary-btn, .md.secondary-btn-2 {
    font-size: 14px;
    gap: 6px;
    padding: 11px 22px;
    height: 42px; }
    @media (max-width: 1399.98px) {
      .template-btn.md, .md.primary-btn, .md.secondary-btn, .md.secondary-btn-2 {
        padding: 8px 14px;
        height: 36px; } }

.primary-btn {
  background: var(--primary-500, #3c72fc);
  color: #ffffff; }
  .primary-btn:hover {
    background-color: #004A99; }

.secondary-btn {
  background: #ffff07;
  color: var(--base-black, #030712); }
  .secondary-btn:hover {
    background: var(--warning-500, #ffbf0f); }

.secondary-btn-2 {
  background: var(--warning-500, #ffbf0f);
  color: var(--base-black, #030712); }
  .secondary-btn-2:hover {
    background: #ffff07; }

.mt-preloader-wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  z-index: 99;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center; }

.inner-spinner {
  position: relative;
  width: 15.7px;
  height: 15.7px; }

.inner-spinner div {
  -webkit-animation: spinner-4t3wzl 1.875s infinite backwards;
  animation: spinner-4t3wzl 1.875s infinite backwards;
  background-color: #5f3dc4;
  border-radius: 50%;
  height: 100%;
  position: absolute;
  width: 100%; }

.inner-spinner div:nth-child(1) {
  -webkit-animation-delay: 0.15s;
  animation-delay: 0.15s;
  background-color: rgba(95, 61, 196, 0.9); }

.inner-spinner div:nth-child(2) {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
  background-color: rgba(95, 61, 196, 0.8); }

.inner-spinner div:nth-child(3) {
  -webkit-animation-delay: 0.45s;
  animation-delay: 0.45s;
  background-color: rgba(95, 61, 196, 0.7); }

.inner-spinner div:nth-child(4) {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
  background-color: rgba(95, 61, 196, 0.6); }

.inner-spinner div:nth-child(5) {
  -webkit-animation-delay: 0.75s;
  animation-delay: 0.75s;
  background-color: rgba(95, 61, 196, 0.5); }

@-webkit-keyframes spinner-4t3wzl {
  0% {
    -webkit-transform: rotate(0deg) translateY(-200%);
    transform: rotate(0deg) translateY(-200%); }
  60%,
  100% {
    -webkit-transform: rotate(360deg) translateY(-200%);
    transform: rotate(360deg) translateY(-200%); } }

@keyframes spinner-4t3wzl {
  0% {
    -webkit-transform: rotate(0deg) translateY(-200%);
    transform: rotate(0deg) translateY(-200%); }
  60%,
  100% {
    -webkit-transform: rotate(360deg) translateY(-200%);
    transform: rotate(360deg) translateY(-200%); } }

.header-main-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 40px;
  padding: 10px 0;
  border-radius: 5px; }
  @media (max-width: 1399.98px) {
    .header-main-menu {
      gap: 20px; } }
  .header-main-menu li a {
    color: #ffffff;
    text-transform: capitalize;
    font-family: "Poppins", serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: 160%; }
    @media (max-width: 1199.98px) {
      .header-main-menu li a {
        font-size: 14px; } }
    .header-main-menu li a:hover {
      color: #fbcc5f; }

/************************ mobile menu start ****************/
.moble-menu-canvas .offcanvas-header {
  background-color: #3C72FC; }
  .moble-menu-canvas .offcanvas-header .logo {
    width: 200px; }
  .moble-menu-canvas .offcanvas-header .mobile-menu-close-btn svg {
    -webkit-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
    fill: #3C72FC;
    background: #ffffff;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #ffffff; }

.moble-menu-canvas .mobile-menu {
  overflow: hidden;
  padding: 30px 0px;
  height: 100%; }
  .moble-menu-canvas .mobile-menu li {
    width: 100%; }
    .moble-menu-canvas .mobile-menu li.has-submenu {
      position: relative; }
    .moble-menu-canvas .mobile-menu li a {
      color: #091e42;
      font-size: 18px;
      text-transform: capitalize;
      width: 100%;
      display: block;
      padding: 10px 20px; }
      .moble-menu-canvas .mobile-menu li a .angle-down {
        position: absolute;
        right: 20px; }
      .moble-menu-canvas .mobile-menu li a:hover {
        background-color: #3C72FC;
        color: #ffffff; }
        .moble-menu-canvas .mobile-menu li a:hover .angle-down {
          fill: #ffffff; }
          .moble-menu-canvas .mobile-menu li a:hover .angle-down path {
            fill: #ffffff; }
    .moble-menu-canvas .mobile-menu li .submenu {
      position: relative;
      left: 20px;
      background-color: #D4D6D8;
      margin-left: 20px; }

.single-demo {
  padding: 24px 16px;
  border-radius: 16px;
  background: #fff;
  position: relative;
  overflow: hidden; }
  .single-demo .badge {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 261.024px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    padding: 9px 55px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    position: absolute;
    left: -74px;
    top: 20px;
    background: #05e509;
    color: var(--base-black, #030712);
    text-align: center;
    z-index: 1;
    font-family: Poppins;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    /* 31.2px */ }
    .single-demo .badge.upcoming {
      top: 29px;
      background-color: #fbcc5f;
      font-size: 20px; }
    @media (max-width: 1399.98px) {
      .single-demo .badge {
        font-size: 18px;
        padding: 3px 30px;
        width: 231.024px; } }
  .single-demo .demo-link-with-img {
    display: block;
    width: 100%;
    height: 500px;
    background-size: cover;
    /* Ensures the image fits the container */
    background-position: top;
    /* Start with the image at the top */
    background-repeat: no-repeat;
    -webkit-transition: background-position 2s ease;
    -o-transition: background-position 2s ease;
    transition: background-position 2s ease;
    /* Smooth transition for background movement */
    position: relative;
    margin-bottom: 24px;
    border-radius: 8px;
    border: 1px solid var(--neutral-200, #d4d6d8);
    -webkit-transition: all 5s ease-in;
    -o-transition: all 5s ease-in;
    transition: all 5s ease-in; }
    @media (max-width: 1399.98px) {
      .single-demo .demo-link-with-img {
        height: 400px; } }
    @media (max-width: 1199.98px) {
      .single-demo .demo-link-with-img {
        height: 320px; } }
    .single-demo .demo-link-with-img:hover {
      background-position: bottom;
      /* Move the image to the bottom on hover */ }
  .single-demo h5 .demo-link {
    color: #030712;
    text-align: center;
    font-family: "Poppins", serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    -webkit-transition: color 0.3s ease;
    -o-transition: color 0.3s ease;
    transition: color 0.3s ease; }
    @media (max-width: 1919.98px) {
      .single-demo h5 .demo-link {
        font-size: 20px; } }
    @media (max-width: 1399.98px) {
      .single-demo h5 .demo-link {
        font-size: 18px; } }
    .single-demo h5 .demo-link:hover {
      color: #3C72FC; }

.single-fea-box {
  padding: 60px 24px;
  border-radius: 12px;
  background: #253342;
  text-align: center;
  height: 344px; }
  @media (max-width: 767.98px) {
    .single-fea-box {
      height: initial; } }
  .single-fea-box .icon-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 auto 24px auto; }
  .single-fea-box .title {
    color: #ffffff;
    text-align: center;
    font-family: "Poppins", serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%; }
    @media (max-width: 1199.98px) {
      .single-fea-box .title {
        font-size: 28px; } }

.single-feedback {
  padding: 32px 24px;
  border-radius: 8px;
  background: #ffffff; }
  .single-feedback .title {
    color: #000C1A;
    font-family: "Poppins", serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
    margin-bottom: 8px; }
  .single-feedback .star-wraper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 6px;
    margin-bottom: 16px; }
  .single-feedback .des {
    color: #333D48;
    font-family: "Poppins", serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 170%;
    margin-bottom: 0;
    padding-bottom: 0; }
  .single-feedback hr {
    margin: 24px 0;
    background: #D4D6D8; }
  .single-feedback .name-wraper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 12px; }
    .single-feedback .name-wraper .envato-logo {
      width: 21.843px;
      height: 31px;
      -o-object-fit: cover;
      object-fit: cover; }
    .single-feedback .name-wraper .name {
      color: #000C1A;
      font-family: #D4D6D8;
      font-size: 20px;
      font-style: normal;
      font-weight: 500;
      line-height: 130%; }

/****************************** page styles ******************************/
.hero-section {
  background-color: #091e42;
  height: 1080px;
  padding-top: 240px;
  overflow: hidden;
  position: relative; }
  @media (max-width: 1599.98px) {
    .hero-section {
      height: 900px; } }
  @media (max-width: 1399.98px) {
    .hero-section {
      height: 788px;
      padding-top: 180px; } }
  @media (max-width: 991.98px) {
    .hero-section {
      height: 620px; } }
  @media (max-width: 767.98px) {
    .hero-section {
      height: initial;
      padding-top: 140px;
      padding-bottom: 60px; } }
  .hero-section .lg {
    width: 180px; }
  .hero-section .shape {
    position: absolute; }
    @media (max-width: 991.98px) {
      .hero-section .shape {
        display: none; } }
    .hero-section .shape.shape-1 {
      top: 320px;
      left: 60px;
      width: 140px;
      height: 140px;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      z-index: 1; }
      @media (max-width: 1199.98px) {
        .hero-section .shape.shape-1 {
          width: 80px;
          height: 80px;
          top: 400px; } }
    .hero-section .shape.shape-2 {
      top: 460px;
      left: 215px;
      width: 78.1px;
      height: 78.1px;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      z-index: 1; }
    .hero-section .shape.shape-3 {
      top: 490px;
      left: 117px;
      width: 63px;
      height: 63px;
      -ms-flex-negative: 0;
      flex-shrink: 0;
      z-index: 1; }
  .hero-section .yellow-txt, .hero-section .blue-shade-txt {
    color: #ffff07;
    text-align: center;
    font-family: "Alfa Slab One", serif;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    /* 72px */
    letter-spacing: 0.96px;
    position: absolute;
    right: 208px;
    top: 37%;
    -webkit-transform: rotate(-14deg);
    -ms-transform: rotate(-14deg);
    transform: rotate(-14deg); }
    @media (max-width: 1599.98px) {
      .hero-section .yellow-txt, .hero-section .blue-shade-txt {
        top: 50%;
        font-size: 32px; } }
    @media (max-width: 1199.98px) {
      .hero-section .yellow-txt, .hero-section .blue-shade-txt {
        top: 60%; } }
    @media (max-width: 991.98px) {
      .hero-section .yellow-txt, .hero-section .blue-shade-txt {
        display: none; } }
  .hero-section .blue-shade-txt {
    right: 98px;
    top: 42%;
    color: #3c72fc; }
    @media (max-width: 1599.98px) {
      .hero-section .blue-shade-txt {
        top: 55%; } }
    @media (max-width: 1199.98px) {
      .hero-section .blue-shade-txt {
        top: 62%; } }
    @media (max-width: 991.98px) {
      .hero-section .blue-shade-txt {
        display: none; } }
  .hero-section .btns-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 30px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; }
    @media (max-width: 767.98px) {
      .hero-section .btns-wrapper {
        gap: 25px; } }
  .hero-section .hero-contents-wraper {
    padding: 0 15px;
    max-width: 1448px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    position: relative;
    z-index: 10; }
    @media (max-width: 991.98px) {
      .hero-section .hero-contents-wraper {
        width: calc(100% - 120px); } }
    @media (max-width: 767.98px) {
      .hero-section .hero-contents-wraper {
        width: 100%; } }
    .hero-section .hero-contents-wraper .title {
      color: #ffffff;
      text-align: center;
      font-family: "Alfa Slab One", serif;
      font-size: 64px;
      font-style: normal;
      font-weight: 400;
      line-height: 150%;
      letter-spacing: 1.28px;
      margin-bottom: 48px;
      color: #ffffff; }
      @media (max-width: 1599.98px) {
        .hero-section .hero-contents-wraper .title {
          font-size: 52px; } }
      @media (max-width: 1199.98px) {
        .hero-section .hero-contents-wraper .title {
          font-size: 42px; } }
      @media (max-width: 991.98px) {
        .hero-section .hero-contents-wraper .title {
          font-size: 32px; } }
      @media (max-width: 767.98px) {
        .hero-section .hero-contents-wraper .title {
          margin-bottom: 30px; } }
      .hero-section .hero-contents-wraper .title span {
        color: #fbcc5f; }
  .hero-section .hero-img {
    width: calc(100% - 120px);
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%); }
    @media (max-width: 767.98px) {
      .hero-section .hero-img {
        display: none; } }

.ticker-wrapper {
  overflow: hidden;
  padding: 20px 0;
  background: -webkit-linear-gradient(4deg, #00c6fb 0%, #005bea 100%);
  background: -o-linear-gradient(4deg, #00c6fb 0%, #005bea 100%);
  background: linear-gradient(86deg, #00c6fb 0%, #005bea 100%); }
  @media (max-width: 767.98px) {
    .ticker-wrapper {
      padding: 10px 0; } }
  .ticker-wrapper .ticker-inner-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-animation: 30s ticker linear infinite;
    animation: 30s ticker linear infinite;
    gap: 60px; }
    @media (max-width: 767.98px) {
      .ticker-wrapper .ticker-inner-wrapper {
        gap: 30px; } }
    .ticker-wrapper .ticker-inner-wrapper .single-ticker {
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      gap: 8px; }
      .ticker-wrapper .ticker-inner-wrapper .single-ticker h4 {
        color: #ffffff;
        white-space: nowrap; }

.title-box {
  text-align: center;
  margin-bottom: 60px; }
  .title-box .title {
    color: #3C72FC;
    text-align: center;
    font-family: "Alfa Slab One", serif;
    font-size: 80px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%; }
    @media (max-width: 1439.98px) {
      .title-box .title {
        font-size: 56px;
        line-height: 160%; } }
    @media (max-width: 1199.98px) {
      .title-box .title {
        font-size: 48px; } }
    @media (max-width: 991.98px) {
      .title-box .title {
        font-size: 36px; } }
    @media (max-width: 767.98px) {
      .title-box .title {
        font-size: 28px; } }
  .title-box .subtitle {
    color: #030712;
    text-align: center;
    font-family: "Poppins", serif;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    /* 57.6px */ }
    @media (max-width: 1439.98px) {
      .title-box .subtitle {
        font-size: 42px;
        line-height: 160%; } }
    @media (max-width: 1199.98px) {
      .title-box .subtitle {
        font-size: 32px; } }
    @media (max-width: 991.98px) {
      .title-box .subtitle {
        font-size: 30px; } }
    @media (max-width: 767.98px) {
      .title-box .subtitle {
        font-size: 16px; } }
  .title-box h6 {
    color: #ff259b; }

.highlight-title {
  color: var(--primary-500, #007bff);
  text-align: center;
  font-family: "Alfa Slab One";
  font-size: 80px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  /* 96px */ }

.demo-section {
  background-size: cover;
  background-repeat: no-repeat; }
  .demo-section .btns-wrapper {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 30px;
    margin-top: 32px; }

.fea-section {
  background-color: #000C1A; }
  .fea-section .title-box .title {
    color: #ffff07; }

.banner-area {
  padding: 120px 0px;
  background-size: cover;
  -o-object-fit: cover;
  object-fit: cover;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden; }
  .banner-area .shape {
    position: absolute;
    z-index: 5; }
    @media (max-width: 767.98px) {
      .banner-area .shape {
        display: none; } }
    .banner-area .shape.shape-1 {
      bottom: 55px;
      left: 68px;
      width: 115px;
      height: 115px; }
      @media (max-width: 1399.98px) {
        .banner-area .shape.shape-1 {
          width: 80px;
          height: auto; } }
    .banner-area .shape.shape-2 {
      top: 0px;
      right: 124px;
      width: 129px;
      height: 84px; }
      @media (max-width: 1399.98px) {
        .banner-area .shape.shape-2 {
          width: 80px;
          height: auto; } }
  @media (max-width: 767.98px) {
    .banner-area {
      padding: 60px 0; } }
  .banner-area .container {
    position: relative;
    z-index: 10; }
  .banner-area::after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background-color: rgba(9, 30, 66, 0.9);
    z-index: 2; }
  .banner-area .title-box {
    margin-bottom: 0; }
    .banner-area .title-box h2 {
      color: #ffffff;
      margin-bottom: 60px; }
      @media (max-width: 767.98px) {
        .banner-area .title-box h2 {
          margin-bottom: 30px; } }

.elementor-section {
  background-size: cover;
  background-repeat: no-repeat; }

.feedback-section {
  background: #f2f7ff; }
  .feedback-section .masonry-grid {
    -webkit-column-count: 4;
    column-count: 4;
    -webkit-column-gap: 24px;
    column-gap: 24px; }
    @media (max-width: 1439.98px) {
      .feedback-section .masonry-grid {
        -webkit-column-count: 3;
        column-count: 3; } }
    @media (max-width: 991.98px) {
      .feedback-section .masonry-grid {
        -webkit-column-count: 2;
        column-count: 2; } }
    @media (max-width: 575.98px) {
      .feedback-section .masonry-grid {
        -webkit-column-count: 1;
        column-count: 1; } }
    .feedback-section .masonry-grid .masonry-item {
      margin-bottom: 24px;
      -webkit-column-break-inside: avoid;
      break-inside: avoid; }

.footer-section {
  background-color: #000C1A;
  padding: 175px 0px;
  position: relative; }
  @media (max-width: 1439.98px) {
    .footer-section {
      padding: 120px 0px; } }
  @media (max-width: 767.98px) {
    .footer-section {
      padding: 80px 0px; } }
  .footer-section .shape1 {
    position: absolute;
    left: 40%;
    bottom: 100px; }
    @media (max-width: 1439.98px) {
      .footer-section .shape1 {
        left: 30%;
        bottom: 10px; } }
    @media (max-width: 767.98px) {
      .footer-section .shape1 {
        left: 0%;
        bottom: 0px; } }
  .footer-section .shape2 {
    position: absolute;
    right: 35%;
    bottom: 50px; }
    @media (max-width: 1439.98px) {
      .footer-section .shape2 {
        bottom: 6px;
        right: 30%; } }
    @media (max-width: 767.98px) {
      .footer-section .shape2 {
        bottom: 0px;
        right: 0px;
        width: 100px; } }
  .footer-section h2 {
    color: #ffffff;
    text-align: center;
    font-family: "Alfa Slab One", serif;
    font-size: 70px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    letter-spacing: 1.4px;
    margin-bottom: 40px; }
    @media (max-width: 1439.98px) {
      .footer-section h2 {
        font-size: 56px; } }
    @media (max-width: 991.98px) {
      .footer-section h2 {
        font-size: 42px; } }
    @media (max-width: 767.98px) {
      .footer-section h2 {
        font-size: 24px; } }
    .footer-section h2 span {
      color: #ffff07; }
  .footer-section h3 {
    color: #ffffff;
    font-family: Poppins;
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
    margin-bottom: 60px; }
    @media (max-width: 1439.98px) {
      .footer-section h3 {
        font-size: 42px; } }
    @media (max-width: 1199.98px) {
      .footer-section h3 {
        font-size: 32px; } }
    @media (max-width: 991.98px) {
      .footer-section h3 {
        font-size: 30px; } }
    @media (max-width: 767.98px) {
      .footer-section h3 {
        font-size: 16px; } }
    .footer-section h3 .green {
      color: var(--quaternary-500, #05e509); }
    .footer-section h3 .yellow {
      color: #ffff07; }

/**************** scroll top button ***************/
.scroll-top-btn {
  width: 40px;
  height: 40px;
  background-color: #3C72FC;
  color: #ffffff;
  border-radius: 3px;
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 100;
  font-size: 15px;
  border: 1px solid #ffffff; }