@font-face {
  font-family: 'Myriad Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Regular'), url('myriadpro-regular.woff') format('woff');
}
@font-face {
  font-family: 'Myriad Pro Condensed';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Condensed'), url('myriadpro-cond.woff') format('woff');
}
@font-face {
  font-family: 'Myriad Pro Condensed Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Condensed Italic'),
    url('MYRIADPRO-CONDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Light';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Light'), url('myriadpro-light.woff') format('woff');
}
@font-face {
  font-family: 'Myriad Pro Semibold';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Semibold'),
    url('myriadpro-semibold.woff') format('woff');
}
@font-face {
  font-family: 'Myriad Pro Semibold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Semibold Italic'),
    url('myriadpro-semiboldit.woff') format('woff');
}
@font-face {
  font-family: 'Myriad Pro Bold Condensed';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Condensed'),
    url('myriadpro-boldcond.woff') format('woff');
}
@font-face {
  font-family: 'Myriad Pro Bold';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold'), url('myriadpro-bold.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Italic'),
    url('myriadpro-boldit.woff') format('woff');
}
@font-face {
  font-family: 'Myriad Pro Bold Condensed Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Condensed Italic'),
    url('myriadpro-boldcondit.woff') format('woff');
}
@font-face {
  font-family: 'helveticamed';
  src: url('helveticaneue medium.ttf');
}

@font-face {
  font-family: 'helveticareg';
  src: url('helveticaneue light.ttf');
}
@font-face {
  font-family: 'helveticabold';
  src: url('helvetica neu bold.ttf');
}
::-webkit-scrollbar {
  /* width: 0; Remove scrollbar space */
  /* background: transparent; Optional: just make scrollbar invisible */
}
.myriadreg {
  font-family: 'Myriad Pro Regular';
  font-size: 15px;
}
.helveticamed {
  font-family: 'helveticamed';
}
.helveticareg {
  font-family: 'helveticareg';
}
.helveticabold {
  font-family: 'helveticabold';
}
.color1 {
  color: #242f51;
}
.color2 {
  color: #616368;
}
.color3 {
  color: #2fc3dd;
}
.color4 {
  color: #2ac1dc;
}
.color5 {
  color: #3b82f3;
}
.color6 {
  color: #17800d;
}
.color7 {
  color: #0dadc9;
}
.color8 {
  color: #5a80f7;
}
.color9 {
  color: #c3ecf3;
}
.color10 {
  color: #f5f7fa;
}
.color11 {
  color: #09142e;
}
.color12 {
  color: #575b67;
}
.color13 {
  color: #fff;
}
.color14 {
  color: #000;
}
.color15 {
  color: #f1f0f3;
}
.color16 {
  color: #fefcfe;
}
.color17 {
  color: #0099cc;
}
.color18 {
  color: #99ccff;
}
.bg-color1 {
  background-color: #242f51;
}
.bg-color2 {
  background-color: #616368;
}
.bg-color3 {
  background-color: #2fc3dd;
}
.bg-color4 {
  background-color: #2ac1dc;
}
.bg-color5 {
  background-color: #3b82f3;
}
.bg-color6 {
  background-color: #17800d;
}
.bg-color7 {
  background-color: #0dadc9;
}
.bg-color8 {
  background-color: #5a80f7;
}
.bg-color9 {
  background-color: #c3ecf3;
}
.bg-color10 {
  background-color: #f5f7fa;
}
.bg-color11 {
  background-color: #09142e;
}
.bg-color12 {
  background-color: #575b67;
}
.bg-color13 {
  background-color: #fff;
}
.bg-color14 {
  background-color: #000;
}
.bg-color15 {
  background-color: #f1f0f3;
}
.bg-color16 {
  background-color: #fefcfe;
}
.bg-color17 {
  background-color: #0099cc;
}
.bg-color18 {
  background-color: #99ccff;
}
body {
  overflow-x: hidden;
}
.sustain {
  background: url(../images/sustain.jpg) repeat fixed 100%;
  background-size: cover;
}
.sustain-container {
  background: rgba(8, 61, 1, 0.295);
  box-shadow: 0 8px 32px 0 rgba(69, 135, 31, 0.37);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.accordion-button:not(.collapsed) {
  color: #000 !important;
  background-color: #f1f0f3 !important;
}
.accordion-button:focus {
  box-shadow: none;
}
.faq-container {
  width: 65%;
}
.nav-active {
  border-bottom: 2px solid #28b0dc;
}
.accordion-button::after {
  background-image: url(../images/plus-solid.svg);
}
.accordion-button:not(.collapsed)::after {
  background-image: url(../images/minus-solid.svg);
}
.btn:focus {
  outline: 0;
  box-shadow: none;
}
.container {
  max-width: 1200px;
}

.store-icon {
  width: 170px;
}

.meraid_copyright {
  margin-top: 1.5rem;
}

.max_h {
  height: 500px;
  text-align: center;
  margin-top: 2rem;
}

.h_100 {
  height: 100%;
}

@media screen and (max-width: 450px) {
  .img-hide img {
    display: none !important;
  }
  .div-hide div {
    display: none !important;
  }
  .apple-icon-responsive {
    width: 95px;
  }
  .google-icon-responsive {
    width: 45%;
  }
  .container {
    max-width: 450px;
  }

  .hide-object {
    display: none !important;
  }
  h6 {
    font-size: 18px !important;
  }

  .store-icon:first-child {
    margin-bottom: 10px;
  }

  .meraid_copyright {
    margin-top: 1.5rem;
  }
}

@media screen and (min-width: 768px) {
  .max_h {
    height: 100%;
    justify-content: center;
  }

  .meraid_copyright {
    margin-top: 0;
    margin-left: 0.9rem;
  }
}

@media screen and (min-width: 1441px) {
  p {
    font-size: 20px;
    letter-spacing: 0.5px;
  }
  h1,
  h2,
  h3 {
    font-size: 60px;
  }
  h5 {
    font-size: 40px;
  }
  h6 {
    font-size: 40px;
  }
  /* .manondesk img{
        width: 16.5%;
        height: 846px;
        margin-left: 57%;
        margin-top: 11.5%;
        border-radius: 42px;
        border-bottom-left-radius: 1px;
        border-bottom-right-radius: 1px;
    } */
}
@media screen and (min-width: 1367px) and (max-width: 1440px) {
  p {
    font-size: 20px;
    letter-spacing: 0.5px;
  }
  h1,
  h2,
  h3 {
    font-size: 55px;
  }
  h5 {
    font-size: 25px;
  }
  h6 {
    font-size: 30px;
  }
  /* .manondesk img{
        width: 16.5%;
        height: 495px;
        margin-left: 57%;
        margin-top: -1.5%;
        border-radius: 26px;
        border-bottom-left-radius: 1px;
        border-bottom-right-radius: 1px;
    } */
}
@media screen and (min-width: 1025px) and (max-width: 1366px) {
  p {
    font-size: 15px;
    letter-spacing: 0.5px;
  }
  h1,
  h2,
  h3 {
    font-size: 45px;
  }
  h5 {
    font-size: 35px;
  }
  h6 {
    font-size: 25px;
  }
}

/* TODO: REMOVE THE ANIMATION ON SMALLER SCREENS,
SHOULD SCROLL LIKE NORMAL 
FIX THE HEIGHTS OF THE MOBILE IMAGES IN SMALLER SCREENS */

@media screen and (min-width: 768px) {
  .heading_details {
    margin-left: 1.5rem;
  }

  .image_sticky {
    position: sticky;
    top: 2rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  p {
    font-size: 15px;
    letter-spacing: 0.5px;
  }
  h1,
  h2,
  h3 {
    font-size: 35px;
  }
  h5 {
    font-size: 25px;
  }
  h6 {
    font-size: 20px;
  }

  .meraid_description {
    width: 25rem;
  }

  .min_h_100 {
    min-height: 100vh;
  }
}
.manondesk {
  background-image: url(../images/manondesk.png);
  background-size: 100%;
  background-repeat: no-repeat;
}
/* .manondesk img{
    width: 16.5%;
    height: 655px;
    margin-left: 57%;
    margin-top: 8.5%;
    border-radius: 42px;
    border-bottom-left-radius: 1px;
    border-bottom-right-radius: 1px;
} */
#mob-animation {
  background-image: url('../images/base.gif');
  background-repeat: no-repeat;
}

@media screen and (max-width: 1366px) {
  #mob-animation {
    background-image: url('../images/base.gif');
    background-repeat: no-repeat;
    background-size: cover;
  }
}

.IconText {
  font-size: 23px;
}
.IconImg {
  height: 70px;
}

.StepNumberText {
  font-size: 30px;
}

.ul_fontsize {
  font-size: 20px;
  letter-spacing: 0.5px;
}