.hero-module{
    background-color:#eaeaea;
}
.AppSlider{
    text-align: left;
    color: #1e1e1e;
}
.hero-module.large-padding-with-mask{
    padding-top: 60px;
    padding-bottom: 60px;
}
.AppSlider h1{
    margin-bottom: 10px;
    font-size: 80px;
    letter-spacing: 4px;
    word-spacing: 3px;
    font-weight: normal;
}
.AppSlider h1.bold{
    font-weight: bold;
}
.AppSlider p{
    font-size: 21px;
    font-weight: bold;
    word-spacing: 1px;
    margin-bottom: 20px !important;
}

.App2ndSection{
    text-align: center;
}

.App2ndSection p {
    max-width: 700px;
}
.App3rdSection{
    text-align: center;
    color: white;
}
#features .single-feature {
    padding: 0.5rem;
}

.App3rdSection a{
    color: white;
    text-align: justify;
}

.App3rdSection a:hover{
    text-decoration: none;
}

.App3rdSection h3{
    margin-bottom: 20px !important;
}


#features {
    position: relative;
    background-size: cover;
    color: #ffffff; }
    #features .overlay {
      opacity: 0.9; }
    #features .container {
      position: relative;
      z-index: 10; }
    #features .single-feature {
      padding: 0.5rem; }
    #features .reflection-text,
    #features h5,
    #features p,
    #features a,
    #features i {
      color: inherit; }
    #features .feature-left a {
      text-align: right; }
      #features .feature-left a::after {
        content: '';
        position: absolute;
        top: 50%;
        right: -20%;
        width: 0;
        height: 2px;
        background-color: #0a0e0a;
        opacity: 0;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        -webkit-transition: width 0.4s ease-out;
        transition: width 0.4s ease-out; }
      #features .feature-left a::before {
        content: '';
        position: absolute;
        top: 50%;
        right: -21%;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #0a0e0a;
        opacity: 0;
        -webkit-transform: translateY(-48%);
                transform: translateY(-48%);
        -webkit-transition: opacity 0.4s ease-out;
        transition: opacity 0.4s ease-out; }
    #features .feature-right a {
      text-align: left;
      -webkit-transition: width 0.4s ease-out;
      transition: width 0.4s ease-out; }
      #features .feature-right a::after {
        content: '';
        position: absolute;
        top: 50%;
        left: -20%;
        width: 0;
        height: 2px;
        background-color: #0a0e0a;
        opacity: 0;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        -webkit-transition: width 0.4s ease-out;
        transition: width 0.4s ease-out; }
      #features .feature-right a::before {
        content: '';
        position: absolute;
        top: 50%;
        left: -21%;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: #0a0e0a;
        opacity: 0;
        -webkit-transform: translateY(-48%);
                transform: translateY(-48%);
        -webkit-transition: opacity 0.4s ease-out;
        transition: opacity 0.4s ease-out; }
    #features .feature-link {
      cursor: pointer;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: start;
      -webkit-justify-content: flex-start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      border-radius: 10px;
      position: relative;
      z-index: 10;
      overflow: visible; }
      #features .feature-link.active {
        box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
        #features .feature-link.active i::after {
          -webkit-animation: rotateEffect 8s linear infinite;
                  animation: rotateEffect 8s linear infinite;
          display: block; }
      #features .feature-link.active::after {
        opacity: 1;
        width: 19%; }
      #features .feature-link.active::before {
        opacity: 1; }
      #features .feature-link i {
        position: relative;
        margin: 0 1rem;
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
        text-align: center;
        font-size: 2rem;
        line-height: 4rem;
        background: rgba(0, 0, 0, 0.42); }
      #features .feature-link i::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 2px dashed white;
        top: 0;
        left: 0;
        display: none; }
  @-webkit-keyframes rotateEffect {
    from {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg); }
    to {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg); } }
  @keyframes rotateEffect {
    from {
      -webkit-transform: rotate(0deg);
              transform: rotate(0deg); }
    to {
      -webkit-transform: rotate(360deg);
              transform: rotate(360deg); } }
    #features .images-slider .owl-features {
      max-width: 300px;
      margin: 0 auto; }


      #features .overlay {
        opacity: 0.9;
    }
    .gradient-color {
        background: #d12924;
        background: -moz-linear-gradient(135deg, #d12924 0%, #60090c 100%);
        background: -webkit-linear-gradient(135deg, #d12924 0%, #60090c 100%);
        background: linear-gradient(30deg, #d12924, #60090c);
    }
    .reflection-text:not(.reflection-text-white)::after {
        background: url(/public/_resources/themes/fosroc/assets/img/mobileApp/line-break-16.svg) no-repeat;
    }
    .reflection-text-white::after {
        background: url(/public/_resources/themes/fosroc/assets/img/mobileApp/line-break-white.svg) no-repeat;
    }

    
    .reflection-text::after {
        content: '';
        bottom: 0;
        position: absolute;
        width: 150px;
        left: calc(50% - 75px);
        height: 20px;
    }
    h3.reflection-text {position: relative;height: 75px;}
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 10;
    }
    .featureSection{
        margin-top: 20px;
    }

    .feature-left {
        margin-top: 50px;
    }

    .feature-right {
        margin-top: 50px;
    }



    /* ------------------------------------- */
/* *. 8 - Showcase Styles .............. */
/* ------------------------------------- */
#showcase {
    position: relative;
    overflow: hidden; }
    #showcase .overlay {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      opacity: 0.05; }
    #showcase .container,
    #showcase h3 {
      position: relative;
      z-index: 20; }
    #showcase .row:last-child {
      padding-bottom: 0; }
    #showcase .col {
      position: relative; }
    #showcase .title {
      font-size: 110%; }
    #showcase img {
      max-width: 80%;
      width: 500px; }
    #showcase .absolute-image {
      position: absolute;
      left: 65px;
      top: 50px; }
    #showcase .opposite-container {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex; }
    #showcase .opposite {
      -webkit-box-ordinal-group: 0;
      -webkit-order: -1;
          -ms-flex-order: -1;
              order: -1; }
    #showcase .opposite .absolute-image {
      left: 15px;
      top: 50px; }
    #showcase .info {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex; }
      #showcase .info i {
        padding-right: 1rem;
        -webkit-background-clip: text;
        color: transparent;
        font-size: 1.7rem; }
  .singleShowcase h3{
      text-align: left;
  }
  .showcase .reflection-text{
      margin-bottom: 20px;
  }

  .showcase .reflection-text {
    margin-bottom: 30px !important;
}

#showcase img {
    max-width: 130%;
    width: 130%;
   /* width: 327px;*/
}
#showcase img {
    margin-left: 0%;
    margin-right: -50%;
}

#showcase .opposite img {
    margin-left: -50%;
    margin-right: 0px;
}

h3.top-3 {
    padding-top: 3rem;
}

.p-tb-3 {
    padding: 3rem 0;
}
#showcase .absolute-image {
    position: absolute;
    left: 8px;
    top: 50px;
}
span.ml-10 {
    margin-left: 22px;
    display: block;
}


/* ------------------------------------- */
/* *. 13 - Download Styles ............. */
/* ------------------------------------- */
#download {
    position: relative;
    background: url("https://apperle.dawoud.org/apperle/images/background/header-bg-1.jpg") center fixed;
    color: #ffffff;
    overflow: hidden; }
    #download .reflection-text {
      color: inherit; }
    #download p {
      color: inherit;
      text-align: left;
      margin-left: 0; }
    #download .overlay {
      opacity: 0.9; }
    #download .container {
      position: relative;
      z-index: 10; }
    
      #download img.sideImg {
        position: absolute;
        right: 8rem;
        width: 204px;
        bottom: 0;
        -webkit-transform: rotateZ(-40deg);
        transform: rotateZ(-40deg);
        top: -10rem;
        }
        

      .download-brochure {
        display: none;
    }



    p.badges a {
        display: inline-block;
        width: 180px;
        margin-right: 25px;
    }
    
    p.badges a img {
        width: 100%;
    }
    #download p {
        max-width: 460px;
        margin-bottom: 35px;
    }
    #download p.badges {
        margin: 0px;
    }

    .column-module.get-in-touch {
        padding-top: 80px;
    }

    section.AppSlider {
        background-size: 680px;
        background-position: 70%;
    }

    
    .hero-module .container p {
        text-align: justify;
    }
    #showcase p img {
        width: 15px;    
        display: block;
        position: absolute;
        margin-top: 6px;
    }
    .reflection-text {
        text-transform: uppercase;
    }
    .reflection-text h3{
        margin-bottom: 25px !important; 
    }
    @media (max-width: 1024px) {
        p.badges a {
            width: 120px;
        }
        .App2ndSection p{
            max-width: 100%;
        }
        p.badges{
            text-align: center !important;
            margin: 0px !important;
            max-width: 100% !important;
        }
        .images-slider {
            clear: both;
        }
        section.AppSlider {
            background-size: 550px;
            background-position: 60%;
        }
        
        #features .feature-left a::before{
            content: '';
            display: none;
        }
        #features .feature-left a::after{
            display: none;
        }
        .hero-module .container p{
            margin-left: 0;
            margin-right: 0;
        }
        .AppSlider h1 {
            font-size: 40px;
        }
        .singleShowcase {
            display: block !important;
        }
        section#showcase {
            padding-bottom: 110px;
        }
        #download img.sideImg{
            right: 0rem;
        }
        #features .feature-left a {
            text-align: left;
        }
        .images-slider {
            padding-top: 30px;
        }
      }
    
    @media (max-width: 770px) {
        p.badges a {
            width: 120px;
        }
        p.badges{
            text-align: center !important;
            margin: 0px !important;
            max-width: 100% !important;
        }
        .AppSlider {
            background-image: none !important;
        }
        .sideImg{
            display: none;
        }
        #features .feature-left a::before{
            content: '';
            display: none;
        }
        #features .feature-left a::after{
            display: none;
        }
        .hero-module .container p{
            margin-left: 0;
            margin-right: 0;
        }
        .AppSlider h1 {
            font-size: 40px;
        }
        .singleShowcase {
            display: block !important;
        }
        section#showcase {
            padding-bottom: 110px;
        }
        #features .feature-left a {
            text-align: left;
        }
        .images-slider {
            padding-top: 30px;
        }
      }

      .single-feature h3 {
        text-align: left !important;
    }