// Landing pages styles

// Band Landing Page
.band-lp {
  .view {
    background-image: url('https://mdbootstrap.com/img/Others/landings/concert.jpg'); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center center;
  }
  .navbar {
    background-color: #23242a;
    box-shadow: $z-depth-1;

    &:not(.top-nav-collapse) {
      background: transparent;

      @media (min-width: 769px) {
        box-shadow: none;
      }
      @media (max-width: 768px) {
        background: #23242a;
      }
      @media (min-width: 800px) and (max-width: 850px) {
        background: #23242a;
      }
    }
  }
  .btn,
  .btn-floating {
    transition: all .3s ease-in-out;
  }
  .btn {
    &.btn-pink-blue {
      background-color: #ec1368;
      color: #fff;

      &:hover,
      &:focus,
      &.active {
        background-color: #33b5e5;
      }
    }
    &.btn-white-red {
      background-color: rgba(255, 255, 255, 0.33);
    
      &:hover,
      &:focus,
      &.active {
        background-color: #cd201f;
      }
    }
  }
  .btn-floating {
    &.btn-blue-pink {
      background-color: #33b5e5;
    
      &:hover,
      &:focus,
      &.active {
        background-color: #ec1368;
      }
    }
  }
  .page-footer {
    background-color: #23242a;
  }
  .grey-background {
    background-color: #d9dee4;
  }
  .contact-section {
    .md-form {
      input[type="email"]:focus:not([readonly]),
      input[type="text"]:focus:not([readonly]),
      input[type="password"]:focus:not([readonly]),
      textarea.md-textarea:focus:not([readonly]) {
        border-color: #e91e63;
        box-shadow: 0 1px 0 0 #e91e63;

        & + label {
          color: #fff;
        }
      }
      label {
        color: #fff;
      }
    }
  }
}

// Organic Cafe Landing Page
.cafe-lp {
  .view {
    background-image: url('https://mdbootstrap.com/img/Photos/Horizontal/Food/full%20page/11.jpg'); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center center;
    h5 {
      &.spacing {
        @media (min-width: 550px) and (max-width: 750px) {
          margin-top: 2rem !important;
          margin-bottom: 2rem !important;
        }
        @media (min-width: 800px) and (max-width: 850px) {
          margin-top: 2rem !important;
          margin-bottom: 2rem !important;
        }
      }
    }
  }
  .navbar {
    background-color: #795548;
  }
  .display-4 {
    @media (max-width: 750px) {
      font-size: 2.5rem !important;
    }
    @media (min-width: 800px) and (max-width: 850px) {
      font-size: 3rem !important;
    }
  }
  .page-footer {
    background-color: #795548;
    ::placeholder {
      color: #fff;
    }
  }
  p {
    line-height: 1.8;
  }
  .spacing {
    letter-spacing: 3px;
  }
  ul {
    line-height: 1.8;
  }
  .streak {
    &.streak-md {
      height: auto;
    }
  }
}

// Construction Landing Page
.construction-lp {
  .view {
    background-image: url('https://mdbootstrap.com/img/Others/construction2.jpg'); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center center;
    .btn {
      &.blue-gradient {
        padding-bottom: .85rem;
        padding-left: 2.15rem;
      }
    }
  }
  .navbar {
    background-color: #23242a;
    box-shadow: $z-depth-1;

    &:not(.top-nav-collapse) {
      background: transparent;

      @media (min-width: 769px) {
        box-shadow: none;
      }
      @media (max-width: 768px) {
        background: #23242a;
      }
      @media (min-width: 800px) and (max-width: 850px) {
        background: #23242a;
      }
    }
  }
  .page-footer {
    background-color: #23242a;
    ::placeholder {
      color: #fff;
    }
  }
  .md-pills {
    .nav-item .nav-link {
      color: #000;
      background-color: #fff;

      &:hover {
        background-color: transparent;
        color: #a2a2a2;
      }

      &.active {
        box-shadow: none;
        color: #ffb400;
        background-color: transparent;
      }
    }
  }
}

// Creative Landing Page
.creative-lp {
  .view {
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center center;
  }
  .navbar {
    font-weight: 400;
    background-color: #dddde4;
    
    @media (max-width: 768px) {
      background: linear-gradient(40deg, #FF5858, #ee4392);
    }
    &:not(.top-nav-collapse) {
      @media (min-width: 769px) {
        box-shadow: none;
      }
    }
  }
  .page-footer {
    background-color: #6d7275;

    .top-footer-color {
      background-color: #f95169;
    }
  }
  .btn-white {
    color: #fb5364 !important;
  }
  .btn {
    &.pink-gradient {
      background: -webkit-linear-gradient(50deg, #FF5858, #ee4392);
      background: linear-gradient(40deg, #FF5858, #ee4392);
    }
  }
  .rgba-gradient-mask {
    background: -webkit-linear-gradient(45deg,rgba(255,88,88,.7),rgba(238,66,146,.8) 100%);
    background: -webkit-gradient(linear,45deg,from(rgba(255,88,88,.7)),to(rgba(238,66,146,.8)));
    background: -o-linear-gradient(45deg,rgba(255,88,88,.7),rgba(238,66,146,.8) 100%);
    background: linear-gradient(45deg,rgba(255,88,88,.7),rgba(238,66,146,.8));
  }
  .font-small {
    font-size: 0.85rem;
    line-height: 1.7rem;
  }
  .orange-text {
    color: #fb5364 !important;
  }
  .fa-2x {
    font-size: 2em;
    margin-bottom: 0.7rem;
  }
  p {
    font-size: 0.9rem;
  }
  .light-grey-background {
    background-color: #f4f4fa !important;
  }
  h6 {
    line-height: 1.7rem;
  }
  .title {
    color: #112f6b !important;
  }
  .spacing {
    letter-spacing: 1px;
  }
}

// Event Landing Page
.event-lp {
  .view {
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center center;
  }
  .navbar {
    background-color: #3f51b5;
    box-shadow: $z-depth-1;

    &:not(.top-nav-collapse) {
      background: transparent;

      @media (min-width: 769px) {
        box-shadow: none;
      }
      @media (max-width: 768px) {
        background: #3f51b5;
      }
      @media (min-width: 800px) and (max-width: 850px) {
        background: #3f51b5;
      }
    }
  }
  .font-small {
    font-size: 0.9rem;
  }
  .pricing-card {
    .price {
      .number {
        &:after {
          content: "/day";
        }
      }
    }
  } 
  .stepper {
    &.timeline {
      @media (max-width: 450px) {
        margin: auto;
      }
    }
  }
}

// Hostel Landing Page
.hostel-lp {
  .view {
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center center;
  }
  .navbar {
    background-color: #72BDE5;
    box-shadow: $z-depth-1;

    &:not(.top-nav-collapse) {
      background: transparent;

      @media (min-width: 769px) {
        box-shadow: none;
      }
      @media (max-width: 768px) {
        background: #72BDE5;
      }
      @media (min-width: 800px) and (max-width: 850px) {
        background: #72BDE5;
      }
    }
  }
  .display-4 {
    @media (max-width: 750px) {
      font-size: 2.5rem !important;
    }
    @media (min-width: 800px) and (max-width: 850px) {
      font-size: 3rem !important;
    }
  }
  .light-grey-background {
    background-color: #f4f4fa !important;
  }
  .top-footer-color {
    background-color: #72BDE5;
  }
  .spacing {
    letter-spacing: 4px;
  }
  p {
    font-size: 0.9rem;
    line-height: 1.8rem;
  }
  .font-small {
    font-size: 0.8rem;
    line-height: 1.6rem;
  }
  .line {
    width: 70px;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 5px solid #72BDE5;
  }
  .info-text {
    color: #33b5e5;
  }
  .input-group {
    .md-form {
      .form-sm {
        .form-4 input {
          border: 1px solid #bdbdbd;
        }
      }
    }
  }
  .input-group.md-form.form-sm.form-3 input {
    border: 1px solid #e0e0e0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    padding-left: 1rem;
  }
  .input-group.md-form.form-sm.form-3 input[type=text]:focus:not([readonly]).blue-border {
    border: 1px solid #4285F4;
    box-shadow: none;
  }
  .form-control {
    &:focus {
      border-color: #4285F4;
      box-shadow: none;
    }
  }
}

// Medical Landing Page
.medical-lp {
  .navbar {
    background-color: #3e4551;
    box-shadow: $z-depth-1;

    &:not(.top-nav-collapse) {
      background: transparent;

      @media (min-width: 769px) {
        box-shadow: none;
      }
      @media (max-width: 768px) {
        background: #3e4551;
      }
      @media (min-width: 800px) and (max-width: 850px) {
        background: #3e4551;
      }
    }
  }
  .top-footer-color {
    background-color: #0288d1;
  }
  p {
    line-height: 1.8rem;
  }
  .font-small {
    font-size: 0.9rem;
  }
  .pricing-card {
    .header,
    .form-header {
      box-shadow: none;
    }
    .price {
      .version {
        background-color: rgb(2, 136, 209);
      }
    }
  }
}

// Restaurant Landing Page
.restaurant-lp {
  .navbar {
    background-color: #272a2d;
    box-shadow: $z-depth-1;

    &:not(.top-nav-collapse) {
      background: transparent;

      @media (min-width: 769px) {
        box-shadow: none;
      }
      @media (max-width: 768px) {
        background: #272a2d;
      }
      @media (min-width: 800px) and (max-width: 850px) {
        background: #272a2d;
      }
    }
  }
  .page-footer {
    background-color: #272a2d;
    ::placeholder {
      color: #fff;
    }
  }
  .display-3 {
    @media (max-width: 450px) {
      font-size: 3rem;
    }
  }
  .divider-new {
    margin-left: 25%;
    margin-right: 25%;

    @media (max-width: 768px) {
      margin-left: 10%;
      margin-right: 10%;
    }

    &:before,
    &:after {
      height: 3px !important;
      background: #c7c7c7 !important;
      margin-top: -0.35rem;
    }
  }
}

// Software Landing Page
.software-lp {
  .navbar {
    background-color: #5991fb;
    box-shadow: $z-depth-1;

    &:not(.top-nav-collapse) {
      background: transparent;

      @media (min-width: 769px) {
        box-shadow: none;
      }
      @media (max-width: 768px) {
        background: #5991fb;
      }
      @media (min-width: 800px) and (max-width: 850px) {
        background: #5991fb;
      }
    }
  }
  .rgba-gradient {
    background: linear-gradient(45deg, rgb(104, 208, 255), rgba(69, 60, 245, 1));
  }
  .btn-white {
    color: #3e7fdb !important;
  }


  h3 {
    font-size: 1.5rem;
  }

  .img-fluid,
  .section img,
  .section .view,
  .card img {
    max-width: 90%;
  }

  .icon-area strong::after {
    background: #98cfff none repeat scroll 0 0;
  }

  .icon-area {
    .circle-icon {
      i {
        box-shadow: 0 8px 19px rgba(91, 154, 251, 0.41);
        width: 90px;
        height: 90px;
        background: #FFF;

        &:hover {
          background: #ebeef9;
        }
      }
    }
  }

 

  .btn .fas,
  .btn .far,
  .btn .fab {
    margin-left: 3px;
  }


  h6 {
    line-height: 1.7;
  }



  .btn-floating {
    box-shadow: 0 5px 11px 0 rgba(74, 124, 255, 0.24), 0 4px 15px 0 rgba(65, 97, 198, 0.15);
  }

  .btn-floating:hover {
    box-shadow: 0 8px 17px 0 rgba(45, 81, 202, 0.2), 0 6px 20px 0 rgba(43, 51, 205, 0.19);
  }

  .z-depth-2 {
    box-shadow: 0 8px 17px 0 rgba(76, 124, 226, 0.2), 0 6px 20px 0 rgba(49, 115, 211, 0.19);
  }

  .blue-text {
    color: #557ff9 !important;
  }

  .blue-gradient {
    background: linear-gradient(40deg, #74b8ff, #574ff0);
  }

  .card {
    font-weight: 300;
  }

  .btn-blue {
    background-color: #557ff9;
  }

  .streak.streak-md {
    height: auto;
  }

  .blue-gradient-mask {
    background: linear-gradient(40deg, rgba(116, 184, 255, 0.8), rgba(87, 79, 240, 0.8));
  }

  p {
    line-height: 1.8;
    font-size: 0.9rem;
  }

  .jarallax {
    max-height: 700px;
  }

  .icon-area .circle-icon i {
    background: #ffffff;
  }

  .icon-area .circle-icon i:hover {
    background: rgb(237, 240, 244);
  }
}

// Spa Landing Page
.spa-lp {
  .navbar {
    background-color: #8a6fb2;

    @media (max-width: 768px) {
      &:not(.top-nav-collapse) {
        background: #8a6fb2;
      }
    }
  }

  .page-footer {
    background-color: #69518d;
  }

  .md-pills {
    &.pills-secondary {
      .nav-item {
        .nav-link {
          &.active {
            background-color: #b18cec !important;
          }
        }
      }
    }
  }

  .btn-primary {
    background: #ff82ad;

    &:hover,
    &:focus {
      background-color: lighten(#ff82ad, 5%) !important;
    }
  }

  .pricing-card {
    .price {
      h1 {
        &:after {
          content: "/day";
        }
      }
    }
  }

  .btn-info {

    &:hover,
    &:focus {
      background-color: #7cdbff !important;
    }
  }

  .newsletter {
    img {
      @media (min-width: 1025px) {
        max-width: 104%;
      }
    }
  }
}

// Transport Landing Page
.transport-lp {
  .navbar {
    background-color: #24355c;

    @media (max-width: 768px) {
      &:not(.top-nav-collapse) {
        background: #24355c;
      }
    }
  }

  .page-footer {
    background-color: #1f2d4b;
  }

  .display-3 {
    @media (max-width: 450px) {
      font-size: 3rem;
    }
  }

  .background-z {
    background-color: #f3f5f7;
  }

  .md-pills {
    &.pills-primary {
      .nav-item {
        .nav-link {
          &.active {
            background-color: #1f2d4b;
          }
        }
      }
    }
  }

  .icon-area {
    .circle-icon {
      i {
        width: 90px;
        height: 90px;
        background: rgb(236, 42, 69);

        &:hover {
          background: #6a6f73;
        }
      }
    }
  }

  p {
    line-height: 1.8;
    font-size: 0.9rem;
  }

  .font-small {
    font-size: 0.8rem;
  }

  ul {
    line-height: 1.8;
  }

  .split-screen {
    background-color: #f2f2f2;
    background: linear-gradient(to right, #f2f2f2 50%, #7db9e8 50%);
  }

  .spacing {
    letter-spacing: 3px;
  }

  .pricing-card {
    border-radius: 0.3rem;
  }

  .accordion.accordion-5 .card {
    border: 0;
    background-color: transparent;
  }

  .accordion.accordion-5 .card .card-header {
    border: 0;
    background-color: #f44336;
    -webkit-transition: .3s;
    transition: .3s;
  }

  .accordion.accordion-5 .card .card-header:hover {
    -webkit-transition: .3s;
    transition: .3s;
    background-color: #455a64;
  }

  .accordion.accordion-5 .card .card-header .fas,
  .accordion.accordion-5 .card .card-header .fab,
  .accordion.accordion-5 .card .card-header .far {
    background-color: #fff;
    border-top-left-radius: 3px;
  }

  .accordion.accordion-5 .card .card-body {
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
  }

  .p-3 {
    padding: 1.3rem !important;
  }

  .card .card-text {
    font-weight: 300;
  }
}

// Travel Landing Page
.travel-lp {
  font-weight: 400;

  .navbar {
    background-color: #3E4551;

    @media (max-width: 768px) {
      &:not(.top-nav-collapse) {
        background: #3E4551;
      }
    }
  }

  .background-c {
    background-color: #f3f4f7;
  }

  .btn-default {
    background: #fbb23c;

    &:hover,
    &:focus {
      background-color: lighten(#fbb23c, 5%) !important;
    }

    &.active {
      background-color: darken(#fbb23c, 20%) !important;
    }
  }

  .md-pills {
    &.pills-primary {
      .nav-item {
        .nav-link {
          &.active {
            background-color: #147979 !important;
          }
        }
      }
    }
  }

  @media (max-width: 740px) {
    .display-1 {
      font-size: 4rem;
    }
  }

  .btn-white {
    color: rgb(97, 97, 97) !important;
  }

  .spacing {
    letter-spacing: 10px;
  }

  .display-1 {
    font-size: 8rem;
  }

  .font-small {
    font-size: 0.85rem;
    line-height: 1.7rem;
  }

  .card .card-body h5 {
    font-size: 1.1rem;
    letter-spacing: 2px;
    font-weight: 600;
  }
}

// University Landing Page
.university-lp {
  .navbar {
    background-color: #1C2A48;

    @media (max-width: 768px) {
      &:not(.top-nav-collapse) {
        background: #1C2A48;
      }
    }
  }

  .page-footer {
    background-color: #1C2A48;
  }

  .display-3 {
    @media (max-width: 450px) {
      font-size: 3rem;
    }
  }

  .background-r {
    background-color: #f6f6fc;
  }

  .md-pills {
    &.pills-primary {
      .nav-item {
        .nav-link {
          &.active {
            background-color: #33b5e5;
          }
        }
      }
    }
  }

  .fa-2x {
    margin-bottom: 0.6rem;
  }

  p {
    line-height: 1.7rem;
  }

  .font-small {
    font-size: 0.85rem;
  }
}

// Coworking Landing Page
.coworking-page {
  .pink-pastel {
    color: #f900ef;
  }
  .purple-pastel {
    color: #7f00ee;
  }
  .heather-color {
    color: #AB9CB1 !important;
  }
  .orange-pastel {
    color: #ff7157;
  }
  .green-pastel {
    color: #00c46d;
  }
  .navy-blue-color {
    color: #392466;
  }
  .blue-pastel {
    color: #0085e3;
  }
  .intro {
    .container-fluid {
      height: 100vh;
      .heading {
        letter-spacing: -4px;
        line-height: 1;
        color: #7f00ee;
        span {
          color: #f900ef;
        }
      }
      .subheading {
        color: #AB9CB1;
        letter-spacing: -1px;
        line-height: 1.3;
      }
      .btn {
        font-size: .9rem;
        letter-spacing: 1px;
        padding: .85rem 2.15rem
      }
      @media (min-width: 1900px) {
        .col-xl-5 {
          &.col-flex {
            flex: 0 0 25%;
            max-width: 25%;
          }
        }
        .heading {
          font-size: 5rem !important;
          letter-spacing: -4px;
        }
        .subheading {
          margin-bottom: 1.8rem !important;
        }
      }
      @media (min-width: 1024px) and (max-width: 1200px) {
        .heading {
          font-size: 4rem;
        }
        .subheading {
          font-size: 1.1rem;
        }
      }
      @media (max-width: 767px) {
        height: 100%;
      }
      @media (min-width: 800px) and (max-width: 850px) {
        height: 100%;
      }
    }
  }
  .navbar {
    .navbar-brand {
      line-height: 1.1;
      letter-spacing: -1px;
    }
    .nav-item {
      .nav-link {
        .btn {
          &.btn-outline-purple-pastel {
            padding-bottom: .4rem;
            font-weight: 500;
            letter-spacing: 1px;
          }
        }
        &.pt-0-1 {
          padding-top: 1px;
        }
      }
    }
  }
  .btn-outline-purple-pastel {
    border: 2px solid #7f00ee;
    background-color: transparent;
    color: #7f00ee;
  }
  .hr-pink {
    width: 40px;
    border-top: 3px solid #f900ef;
  }
  $button-pastels: () !default;
  $button-pastels: map-merge((
    "orange-pastel": #ff7157,
    "blue-pastel": #0085e3,
    "green-pastel": #00c46d
  ), $button-pastels);
  @each $btn_name, $color_value in $button-pastels {
    @include make-button($btn_name, $color_value);
  }
  .page-footer {
    background-color: #ffdfe7;
    .brand {
      line-height: 1.1;
      letter-spacing: -1px;
    }
    .list-unstyled {
      li {
        line-height: 2;
      }
    }
  }
}

// Gallery
.gallery {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
  -webkit-column-width: 33%;
  -moz-column-width: 33%;
  column-width: 33%;
}

.gallery .pics {
  -webkit-transition: all 350ms ease;
  transition: all 350ms ease;
}

.gallery .animation {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

@media (max-width: 450px) {
  .gallery {
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    -webkit-column-width: 100%;
    -moz-column-width: 100%;
    column-width: 100%;
  }

  .display-1 {
    font-size: 3.5rem;
  }
}

@media (max-width: 400px) {
  .btn.filter {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
}

.intro {
  hr {
    margin: 1.5rem 0 1.5rem 0;

    &.hr-light {
      margin-left: 31%;
      margin-right: 31%;
      background-color: #fff;
      height: 1px;

      @media (min-width: 769px) and (max-width: 1024px) {
        margin-left: 28%;
        margin-right: 28%;
      }

      @media (max-width: 768px) {
        margin-left: 21%;
        margin-right: 21%;
      }
    }
  }
}

// Table properties
.table td,
.table th {
  vertical-align: middle;
}

// Scroll box additional properties
.scroll-box {
  @media only screen and (max-width: 420px) {
    position: relative;

    .scrollspy-example {
      position: relative;
      overflow-y: scroll;
      height: 430px;
    }
  }
}

// 'About' section additional properties
.about {
  li:before {
    content: '✔';
    margin-left: -1em;
    margin-right: 0.5rem;
  }

  ul {
    padding-left: 20px;
    text-indent: 2px;
    list-style: none;
    list-style-position: outside;
  }
}

// Footer extras
footer.page-footer {
  h2 {
    font-weight: 600;
    font-size: 3rem;
  }
}

.footer-socials {
  .btn-floating {
    @media (max-width: 450px) {
      margin: 0;
    }
  }
}

// New icons
.icon-area {
  .circle-icon {
    display: block;
    display: inline-block;
    font-size: 35px;
    padding-bottom: 30px;
  }

  .circle-icon i {
    background: rgba(236, 42, 69, 0.4);
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    -moz-transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.46);

    &:hover {
      background: rgba(236, 42, 69, 0.6);
    }
  }

  strong {
    color: #343434;
    margin-bottom: 15px;
    padding-bottom: 15px;
    position: relative;
    text-transform: uppercase;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 700;

    &::after {
      background: #343434 none repeat scroll 0 0;
      bottom: 0;
      content: "";
      height: 2px;
      left: 50%;
      margin-left: -35px;
      position: absolute;
      width: 70px;
    }
  }

  p {
    font-size: 15px;
    padding-top: 20px;
    color: #6a6a6a;
  }
}

.logos-panel {
  img {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}

.modal-photo {
  max-width: 1050px;
}

.features-5 {
  h3 {
    text-transform: uppercase;
    font-weight: 600;
  }
}

.small-margins {
  margin-left: 1%;
  margin-right: 1%;
}


.nav-tabs {
  flex-wrap: wrap;
}


.section hr {
  display: block;
}

.hr-lgt {
  background-color: #fff;
  height: 0.5px;
}

.background-grey {
  background-color: #eeeeee;
}

.btn-blue-2 {
  background: #33b5e5;
}

.btn-danger-2 {
  background: #ec2a45;
}

.btn-orange-2 {
  background: #ffa726;
}

.btn-purple-2 {
  background: #9958e9;
}

.grey-text-3 {
  color: #7b7b7b !important;
}

.pink-text-2 {
  color: #ff82ad !important;
}

.red-text-2 {
  color: #ec2a45 !important;
}

.black-text-2 {
  color: #4b4b4b !important;
}

.purple-text-2 {
  color: #9958e9 !important;
}

.orange-text-2 {
  color: #ffa726 !important;
}