@font-face {
  font-family: 'Road Rage';
  src: url('../fonts/RoadRage.eot');
  src: url('../fonts/RoadRage.eot?#iefix') format('embedded-opentype'),
      url('../fonts/RoadRage.woff2') format('woff2'),
      url('../fonts/RoadRage.woff') format('woff'),
      url('../fonts/RoadRage.ttf') format('truetype'),
      url('../fonts/RoadRage.svg#RoadRage') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Futura Std';
  src: url('../fonts/FuturaStd-Light.eot');
  src: url('../fonts/FuturaStd-Light.eot?#iefix') format('embedded-opentype'),
      url('../fonts/FuturaStd-Light.woff2') format('woff2'),
      url('../fonts/FuturaStd-Light.woff') format('woff'),
      url('../fonts/FuturaStd-Light.ttf') format('truetype'),
      url('../fonts/FuturaStd-Light.svg#FuturaStd-Light') format('svg');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Futura Std';
  src: url('../fonts/FuturaStd-Bold.eot');
  src: url('../fonts/FuturaStd-Bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/FuturaStd-Bold.woff2') format('woff2'),
      url('../fonts/FuturaStd-Bold.woff') format('woff'),
      url('../fonts/FuturaStd-Bold.ttf') format('truetype'),
      url('../fonts/FuturaStd-Bold.svg#FuturaStd-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}



/* ===========================
   CSS Reset (Cross-browser)
=========================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  min-height: 100vh;
  scroll-behavior: smooth;
  font-family: "Arial", sans-serif;
  font-size: 16px;
  color: #333;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
}

input:-webkit-autofill {
  background-color: transparent !important;
  -webkit-box-shadow: 0 0 0px 1000px white inset !important; 
}

button {
  cursor: pointer;
}

a {
  text-decoration: none;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

/* ===========================
   Root Variables
=========================== */
:root {
  /* --white: #ffff; */
  --white: #e2e2e2;
  --black: #000;
  --dark-black:#050D28;
  --cyan : #00FFFF;
  /* --light-green : #61aa3d; */
  --light-green : #098c30;
  --dark-orange : #d80032;
  --light-yellow : #fdff4b;
  --dark-yellow : #fafd14;
  --neon-magenda: #ea40f7;
  --navy-blue:#08152b;
  --dark-blue:#03091B;
  --deep-navy-blue:#081239;
  /* --deep-shade-blue:#8182a4; */
  --bg-overlay-transparent: rgba(0, 0, 0, 0.72);

  --ff-road-rage: 'Road Rage', sans-serif;
  --ff-futura-std: 'Futura Std', sans-serif;

  --transition-delayed: all 1s ease;
  --transition-slow: all .7s ease;
  --transition-normal: all .5s ease;
  --transition-fast: all .3s ease;
  --transition-fastest: all .2s ease;

  /* ==== global font size variables ====  */
  --fs-sm: 16px;
  --fs-base: 18px;
  --fs-md: 20px;
  --fs-lg: 24px;
  --fs-xl: 27px;
  --fs-2xl: 30px;
  --fs-3xl: 34px;
  --fs-4xl: 48px;
  --fs-5xl: 64px;
  --fs-6xl: 96px;
  --fs-huge: 144px;

  /* ======= line height ======== */
  --lh-normal: normal;
  --lh-md: 28px;
  --lh-lg: 40px;

  --lh-xl: 55px;
  --lh-2xl: 70px; 
  --lh-3xl: 105px;
  --lh-huge: 155px;
  --lh-full: 100%;
}

/* =====================
  root variable responsiveness starts 
========================*/

@media only screen and (max-width: 767px) {
  :root {
    --transition-delayed: all .7s ease;
    --transition-slow: all .5s ease;
    --transition-normal: all .35s ease;
    --transition-fast: all .25s ease;
    --transition-fastest: all .15s ease;
  
    /* ==== global font size variables ====  */
    --fs-base: 16px;
    --fs-md: 18px;
    --fs-lg: 20px;

    --fs-xl: 20px; /* increase by 1px */
    --fs-2xl: 20px; /* increase by 1px */
    --fs-3xl: 25px; /* increase by 1.5 px */
    --fs-4xl: 27px; /* increase by 4px */

    --fs-5xl: 30px; /* increase by 7px */
    --fs-6xl: 30px; /* increase by 13px */
    --fs-huge: 32px; /* increase by 23 px */
  
    /* ======= line height ======== */
    --lh-normal: normal;
    --lh-md: 28px; 
    --lh-lg: 32px; /* increase by 1.5px */

    --lh-xl: 36px;/* increase by 4px */
    --lh-2xl: 40px; /* increase by 6px */
    --lh-3xl: 40px; /* increase by 13px */
    --lh-huge: 110%; /* increase by 25px */
    --lh-full: 100%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 894px) {
  :root {
    --transition-delayed: all .8s ease;
    --transition-slow: all .6s ease;
    --transition-normal: all .5s ease;
    --transition-fast: all .3s ease;
    --transition-fastest: all .2s ease;
  
    /* ==== global font size variables ====  */
    --fs-xl: 23px; /* increase by 1px */
    --fs-2xl: 21px; /* increase by 1px */
    --fs-3xl: 27.5px; /* increase by 1.5 px */
    --fs-4xl: 31px; /* increase by 4px */

    --fs-5xl: 37px; /* increase by 7px */
    --fs-6xl: 43px; /* increase by 13px */
    --fs-huge: 55px; /* increase by 23 px */
  
    /* ======= line height ======== */
    --lh-normal: normal;
    --lh-md: 28px; 
    --lh-lg: 33.5px; /* increase by 1.5px */

    --lh-xl: 40px;/* increase by 4px */
    --lh-2xl: 46px; /* increase by 6px */
    --lh-3xl: 53px; /* increase by 13px */
    --lh-huge: 53px; /* increase by 25px */
    --lh-full: 100%;
  }
}
@media only screen and (min-width: 895px) and (max-width: 1023px) {
  :root {
    --transition-delayed: all .8s ease;
    --transition-slow: all .6s ease;
    --transition-normal: all .5s ease;
    --transition-fast: all .3s ease;
    --transition-fastest: all .2s ease;
  
    /* ==== global font size variables ====  */
    --fs-lg: 21px;

    --fs-xl: 24px; /* increase by 1px */
    --fs-2xl: 22px; /* increase by 1px */
    --fs-3xl: 30px; /* increase by 1.5 px */
    --fs-4xl: 35px; /* increase by 4px */

    --fs-5xl: 44px; /* increase by 7px */
    --fs-6xl: 56px; /* increase by 13px */
    --fs-huge: 78px; /* increase by 23 px */
  
    /* ======= line height ======== */
    --lh-lg: 35px; /* increase by 1.5px */

    --lh-xl: 44px;/* increase by 4px */
    --lh-2xl: 52px; /* increase by 6px */
    --lh-3xl: 66px; /* increase by 13px */
    --lh-huge: 78px; /* increase by 25px */
  }
}
@media only screen and (min-width: 1024px) and (max-width: 1150px) {
  :root {
    --transition-slow: all .7s ease;
  
    /* ==== global font size variables ====  */
    --fs-lg: 22px;

    --fs-xl: 25px; /* increase by 1px */
    --fs-2xl: 23px; /* increase by 1px */
    --fs-3xl: 31.5px; /* increase by 1.5 px */
    --fs-4xl: 39px; /* increase by 4px */

    --fs-5xl: 51px; /* increase by 7px */
    --fs-6xl: 69px; /* increase by 13px */
    --fs-huge: 101px; /* increase by 23 px */
  
    /* ======= line height ======== */
    --lh-lg: 36.5px; /* increase by 1.5px */

    --lh-xl: 48px;/* increase by 4px */
    --lh-2xl: 58px; /* increase by 6px */
    --lh-3xl: 79px; /* increase by 13px */
    --lh-huge: 103px; /* increase by 25px */
  }
}
@media only screen and (min-width: 1151px) and (max-width: 1320px) {
  :root {
   /* ==== global font size variables ====  */
   --fs-lg: 23px;

   --fs-xl: 26px; /* increase by 1px */
   --fs-2xl: 24px; /* increase by 1px */
   --fs-3xl: 33px; /* increase by 1.5 px */
   --fs-4xl: 45px; /* increase by 4px */

   --fs-5xl: 58px; /* increase by 7px */
   --fs-6xl: 82px; /* increase by 13px */
   --fs-huge: 124px; /* increase by 23 px */
 
   /* ======= line height ======== */
   --lh-lg: 38px; /* increase by 1.5px */

   --lh-xl: 52px;/* increase by 4px */
   --lh-2xl: 64px; /* increase by 6px */
   --lh-3xl: 82px; /* increase by 13px */
   --lh-huge: 128px; /* increase by 25px */
  }
}
/* ========= 
                                              global font size */

.fs-sm {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.fs-base {
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

.fs-md {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
}

.fs-md-lh-md {
  font-size: var(--fs-md);
  line-height: var(--lh-md);
}

.fs-lg-lh-lg {
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
}

.fs-lg-lh-md {
  font-size: var(--fs-lg);
  line-height: var(--lh-md);
}

.fs-lg-lh-normal {
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
}

.fs-xl-lh-normal {
  font-size: var(--fs-xl);
  line-height: var(--lh-normal);
}

.fs-xl-lh-lg {
  font-size: var(--fs-xl);
  line-height: var(--lh-lg);
}

.fs-2xl {
  font-size: var(--fs-2xl);
  line-height: var(--lh-normal);
}

.fs-3xl {
  font-size: var(--fs-3xl);
  line-height: var(--lh-normal);
}

.fs-4xl {
  font-size: var(--fs-4xl);
  line-height: var(--lh-xl);
}

.fs-5xl {
  font-size: var(--fs-5xl);
  line-height: var(--lh-2xl);
}

.fs-6xl {
  font-size: var(--fs-6xl);
  line-height: var(--lh-3xl);
}

.fs-huge {
  font-size: var(--fs-huge);
  line-height: var(--lh-huge);
}


/* ===========================
   Utility Classes
=========================== */
/* ======== flex box styles =========== */
.ANS_flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.flex_column {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.flex_row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.flex_center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.flex_align_center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.flex_align_end {
  -webkit-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}

.justify_center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.justify_between {
  -webkit-box-pack: justify-between;
  -ms-flex-pack: justify-between;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.flex_grow {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}

.flex_grow_double {
  -webkit-box-flex: 2;
  -ms-flex-positive: 2;
  flex-grow: 2;
}

.flex_shrink {
  -webkit-flex-shrink: 1;
  -ms-flex: 1 1 auto;
  flex-shrink: 1;
}

.flex_shrink_double {
  -webkit-flex-shrink: 2;
  -ms-flex: 1 2 auto;
  flex-shrink: 2;
}


/* =============== animation utility ============ */
.text-fill {
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  position: relative;
  display: inline-block;
  color: var(--neon-magenda);
}

.text-fill span {
  display: inline-block;
  position: relative;
  color: var(--neon-magenda);
}

.text-fill span::before{
  top: 0;
  left: 0;
  width: 0;
  color: #fff;
  overflow: hidden;
  position: absolute;
  content: attr(data-text);
  -webkit-transition: all 1.0s ease;
  -moz-transition: all 1.0s ease;
  transition: all 1.0s ease;
  -webkit-text-fill-color: #fff;
  white-space: nowrap;
}

 .text-fill:hover span:before{
  width: 100%;
}
.text-fill.neon-stroke,
.text-fill.neon-stroke span {
  color: var(--neon-magenda);
}

.text-fill.neon-stroke span::before {
  color: var(--neon-magenda) !important;
  -webkit-text-fill-color: var(--neon-magenda) !important;
}

.text-fill.yellow-stroke span {
  color: var(--light-yellow) !important;
}

.text-fill.yellow-stroke span:before {
  color: var(--light-yellow) !important;
  -webkit-text-fill-color: var(--light-yellow) !important;
}

.text-fill.green-stroke span {
  color: var(--light-green) !important;
}
.text-fill.green-stroke span:before {
  color: var(--light-green) !important;
  -webkit-text-fill-color: var(--light-green) !important;
}

.sidenav-link {
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  position: relative;
  color: var(--white);
}

.sidenav-link {
  display: inline-block;
  position: relative
}

.sidenav-link::before{
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
  position: absolute;
  content: attr(data-text);
  -webkit-transition: var(--transition-fastest);
  -moz-transition: var(--transition-fastest);
  transition: var(--transition-fastest);
  white-space: nowrap;
  color:var(--white) !important;
-webkit-text-fill-color: var(--white) !important;
opacity: 0;
}

.sidenav-link.fill-fade-in:hover::before {
  opacity: 1 !important;
}


/* ======== test utility ======== */
.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-uppercase {
  text-transform: uppercase;
}

.text-bold {
  font-weight: bold;
}

.text-normal {
  text-decoration: normal;
}

.no-wrap{
  white-space: nowrap;
}

.underline{
  text-decoration: underline;
}

.desk{
 display: inherit;  
}

.mobi{
 display: none;
}


/* buttons */
.ANS_btn {
  display: inline-block;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  color: var(--white);
  font-size: var(--fs-sm);
  transition: var(--transition-normal);
  line-height: var(--lh-normal);
  font-weight: 600;
  position: relative;
}

.ANS_btn.btn-b-cyan{
  border: 1px solid var(--cyan);
  color: var(--cyan);
  background-color: transparent;
}

.ANS_btn.btn-b-yellow{
  border: 1px solid var(--light-yellow);
  color: var(--light-yellow);
  background-color: transparent;
  transition: var(--transition-normal);
}

.ANS_btn.btn-b-yellow:hover{
  background-color: var(--light-yellow);
  color: var(--black);
  box-shadow: inset 0 0 .5em 0 var(--light-yellow),0 0 .5em 0 var(--light-yellow);
}

.ANS_btn.btn-b-neon{
  border: 1px solid var(--neon-magenda);
  color: var(--neon-magenda);
  background-color: transparent;
}

.ANS_btn.btn-b-neon:hover{
  background-color: var(--neon-magenda);
  color: var(--white);
  box-shadow: inset 0 0 .5em 0 var(--neon-magenda),0 0 .5em 0 var(--neon-magenda);
}

/* .ANS_btn.btn-b-white{ */

.ANS_btn {}
.ANS_btn {}
.ANS_btn {}

.ANS_container{
  width: 100%;
  max-width: 1410px;
  padding: 0 20px;
  margin: 0 auto;  
}

.ANS_blog-container{
  max-width: 808px;
  width: 100%;
  padding: 0 20px;
  margin: 0 auto; 
}


@media (max-width: 767px){
  .mobi{
    display: inherit;
  }
  .desk{
    display: none;
  }
}

@media (max-width: 560px){
  .ANS_container{
      max-width: 1432px;
      padding: 0 16px;
  }
  
  .ANS_blog-container{
      max-width: 800px;
      padding: 0 16px;
  } 
}