@font-face {
    font-family: 'Neue Machina';
    src: url('fonts/NeueMachina-Light.otf') format('otf'),
         url('fonts/NeueMachina-Regular.otf') format('otf'),
         url('fonts/NeueMachina-Ultrabold.otf') format('otf');
    font-weight: normal;
    font-style: regular;
}
body h1, h3, h5{font-family: 'Neue Machina';}
.navbar-area.navbar-transparent .navbar .navbar-brand .logo-white,.navbar-area.navbar-transparent.sticky .navbar .navbar-brand .logo-black{display:flex;}
.navbar-area.navbar-transparent .navbar .navbar-brand .logo-black,.navbar-area.navbar-transparent.sticky .navbar .navbar-brand .logo-white{display: none;}
.navbar-area.navbar-transparent .navbar .navbar-nav .nav-item a{color: #ffffff; text-transform: none; font-weight: 500;}
.navbar-area.navbar-transparent .navbar .navbar-nav .nav-item.active a, .navbar-area.navbar-transparent .navbar .navbar-nav .nav-item:hover a{color: #17a2b8;}
.navbar-area.navbar-transparent.sticky .navbar .navbar-nav .nav-item.active a, .navbar-area.navbar-transparent.sticky .navbar .navbar-nav .nav-item:hover a{ color: #17a2b8; }
.navbar-area.navbar-transparent .navbar .navbar-nav .nav-item a::before{background-color: #fdca00;}
.header-hero::before{background:transparent!important}
.header-hero{ height: auto!important; letter-spacing: 2px;}
/* .back-to-top{background-image: Radial-gradient( #fdca00 , #fff);} */
.back-to-top, .back-to-top:hover{background-color:#fdca00;}
@media (min-width:801px) {.cust-nav{background-color: #b119dd!important; color: #fff!important;}}
navbar-area.navbar-transparent.sticky .navbar .navbar-nav .nav-item.active a .cust-nav,.navbar-area.navbar-transparent.sticky .navbar .navbar-nav .nav-item:hover .cust-nav{color: #fff!important;}
.navbar-area.navbar-transparent .navbar .navbar-toggler .toggler-icon{background-color: #ffffff;}
.navbar-area.navbar-transparent.sticky .navbar .navbar-toggler .toggler-icon{background-color: #181818;}
video {position: fixed;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;z-index: -1;}
@media (max-width: 767px){.about-area-3 .about-content .about-title{line-height: 50px}
.navbar-area.navbar-transparent .navbar .navbar-nav .nav-item a{color: #000000;}}
.disable-selection {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none;
}
#home h1, #about h1, #features h1,#benefits h1, #whyUs h1,#contact h1{text-transform: uppercase;}
.cust-section-bg{background-color: black;}
#highlight{background-color: yellow;}
/* home */
#home.header-hero .header-content{padding: 170px 0px;}
#home h1{text-transform: uppercase;}
@media (max-width: 767px){
  #home h1{font-size: 35px; font-weight: bold;}
  #home.header-hero .header-content {
    padding: 110px 0px 50px;
}
}
.rounded-buttons .rounded-three{background:  #FAFB63; color: #000000; border-radius: 5px;}
/* E :: Home */
/* about */
#about .container{padding-top: 30px; padding-bottom: 30px;}
#about img{height: 80%; width: 80%; z-index: 2; position: relative; }
#about .image-bg{
  background-image: url("../images/WHAT IS 1MXG BG.png");
  animation-name: example;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  height: 100%;
  width: 100%;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 0;
}
  
@keyframes example {
  0%   {background-size: 100% 90%}
  50%  {background-size: 90% 100%}
  100%  {background-size: 100% 90%}
}
/* E :: about */
/* features */

@media (max-width: 767px){
#features img{border-radius: 1000px 1000px 1000px 100px; border:2px solid #fff;}
.separator{display: none;}
#features h5{text-align: center!important;}}
#features .title{font-size: 40px;}
#features .separator{padding: 2px 0px; background-color: #fff; width: 70px;}
#features .services-title{text-transform: uppercase; color: yellow; font-size: 20px;}
#features .text{color: #fff;}
/* E :: features */
/* benefits */
#benefits .container{padding-top: 100px; padding-bottom: 100px;}
#benefits .services-title{text-transform: uppercase;  font-size: 20px; margin-bottom: 10px;}

@media (max-width: 767px){
#benefits h5, #benefits p{text-align: center!important;}}
/* E :: benefits */
/* quote-1mxg */
#quote-1mxg .container{padding-top: 100px; padding-bottom: 100px;}
#quote-1mxg .decore{text-decoration: underline; font-weight: 600px;}
@media (max-width: 767px){
  #quote-1mxg h1{font-size: 20px;line-height: 1;
  
  }
}
/* E :: quote-1mxg */
/* whyUs */
#whyUs .container{padding-top: 100px; padding-bottom: 200px;}
#whyUs h5{text-transform: uppercase; color: yellow; font-size: 35px; }
#whyUs .text{color: #fff; text-align: justify; font-size: 18px;}
/* E :: whyUs */
/* contact */
#contact .container{padding-top: 100px; padding-bottom: 100px;}
#contact h6{color: yellow; font-size: 14px; margin-bottom: 0px; line-height: 1;}
#contact p{color: #fff; margin-bottom: 20px;}
#contact p>i{margin-right: 15px;}
#contact .glassmorphism{
background: rgba( 255, 255, 255, 0.25 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 10px );
-webkit-backdrop-filter: blur( 10px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
}
/* E :: contact */
/* Modal */
@media (max-width: 767px) {
  .modal-body{max-height: 60vh;overflow-y: auto;}
}
/* E :: Modal */
/* CSS SHAPES */
.parallelogram{width: 20px;height: 25px;}
.parallelogram.x1{width: 40px;height: 50px;border-radius:6px;}
.parallelogram.x2{width: 70px;height: 75px;border-radius:9px;}
.parallelogram {
  border-radius:3px;
	transform: skew(-30deg);
	background-image: linear-gradient(to right, #6BFFF7 , #FAFB63);
  display: block;
}
.parallelogram-inline .parallelogram{display:inline-flex;}
/* E :: CSS SHAPES */
.brand-wrapper {
  display: flex;
  align-items: center;      /* vertically center logo + text */
  gap: 6px;                 /* space between logo and text */
  line-height: 1;           /* remove any line height gaps */
}

.brand-wrapper img {
  height: 30px;             /* adjust this for perfect alignment */
  width: auto;
  display: block;           /* remove image baseline gap */
  margin: 0;
  padding: 0;
}

/* text beside logo */
.brand-text {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  line-height: 1;           /* match image alignment */
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* link inside text */
 .watall-link {
  color: #fff !important;
  text-decoration: none;
  font-weight: 500;
}

/* scroll color change */
nav.navbar.fixed .brand-text,
nav.navbar.fixed .brand-text .watall-link,
nav.navbar.scrolled .brand-text,
nav.navbar.scrolled .brand-text .watall-link {
  color: #000 !important;
}

/* hover effect */
.brand-text .watall-link:hover {
  text-decoration: underline;
}

/* mobile responsive */
@media (max-width: 576px) {
  .brand-text {
    font-size: 14px;
  }
}