@charset "UTF-8";
/* =======================================================
    Template Name: Appsrow - App Landing Page HTML Template
    Developed By: Md Tariqul Islam
    Contact: tariqulis91@gmail.com

/* ============================================
    Style Index 
===============================================

    1. Template Basic
    2. Header Menu Area
    3. Banner Area 
    3.1 Banner Area Home-2
    3.2 Banner Area Home-3
    3.3 Banner Area Home-4
    3.4 Banner Area Home-5
    4. Choose Area
    5. Work Area
    6. Screenshot Area
    7. Review Area
    8. Download Area
    9. Subscribe Area
    10. Footer Area
    11. Blog Page
    11.1 Single Article
    11.2 Sidebar Area
    12. Single Blog Page
    12.1 Comment Area
===============================================*/
body {
  font-family: "Ubuntu", sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5rem;
  color: #7a7a7a;
  font-weight: 400;
}

a {
  color: #000d5e;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  text-decoration: none;
}
a:focus, a:hover {
  text-decoration: none;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  color: #000d5e;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #000d5e;
  font-weight: 500;
  margin: 0 0 0.9375rem;
}

h4 {
  font-size: 1.375rem;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  h4 {
    font-size: 1.25rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  h4 {
    font-size: 1.25rem;
  }
}

img {
  max-width: 100%;
  object-fit: cover;
}

::-webkit-input-placeholder {
  font-style: normal;
  opacity: 1;
}

:-moz-placeholder {
  font-style: normal;
  opacity: 1;
}

::-moz-placeholder {
  font-style: normal;
  opacity: 1;
}

:-ms-input-placeholder {
  font-style: normal;
  opacity: 1;
}

.section-padding {
  padding: 6.25rem 0;
}
@media only screen and (max-width: 767px) {
  .section-padding {
    padding: 3.125rem 0;
  }
}

input:focus,
textarea:focus {
  outline: 0 none;
}

.padding0 {
  padding: 0;
}

.section-intro {
  max-width: 28.75rem;
  margin: 0 auto 3.4375rem;
  text-align: center;
}

.section-title, .promo-area .promo-txt .promo-title,
.promo-area .promo-search .promo-title {
  font-size: 2.25rem;
  font-weight: 700;
  color: #000d5e;
}
@media only screen and (max-width: 767px) {
  .section-title, .promo-area .promo-txt .promo-title,
.promo-area .promo-search .promo-title {
    font-size: 1.75rem;
  }
}

.section-intro p {
  color: #7a7a7a;
  font-size: 1rem;
  font-weight: 500;
}
@media only screen and (max-width: 767px) {
  .section-intro p {
    font-size: 0.9375rem;
  }
}

.clear::after, .single-post .share-tag::after, .sidebar .trending-post .single-trend::after, .footer-area .footer-top .footer-widget .contact-info li::after, .contact-area .contact-form form .form-group::after {
  clear: both;
  content: "";
  display: table;
}

.overly, .promo-area, .footer-area, .blog-area .blog-bg-2, .fun-area, .down-load-area, .review-area, .version-1 .section-intro {
  position: relative;
  z-index: 1;
}
.overly::before, .promo-area::before, .footer-area::before, .blog-area .blog-bg-2::before, .fun-area::before, .down-load-area::before, .review-area::before, .version-1 .section-intro::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: #000d5e;
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  z-index: -1;
}

#scrollUp {
  width: 3.125rem;
  height: 3.125rem;
  right: 1.875rem;
  bottom: 1.25rem;
  line-height: 3.125rem;
  text-align: center;
}
#scrollUp::after {
  position: absolute;
  content: "";
  background: #ffba00;
  width: 100%;
  height: 100%;
  z-index: -1;
  left: 0;
  top: 0;
  opacity: 0.78;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=78)";
  filter: alpha(opacity=78);
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  -webkit-border-radius: 1.25rem;
  -moz-border-radius: 1.25rem;
  -ms-border-radius: 1.25rem;
  border-radius: 1.25rem;
}
#scrollUp:hover::after {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
}
#scrollUp i {
  font-size: 1.125rem;
  color: #fff;
  font-weight: 700;
}

.custom-btn {
  display: inline-block;
  padding: 0.6875rem 3.3125rem;
  background: #ffba00;
  -webkit-border-radius: 6.25rem;
  -moz-border-radius: 6.25rem;
  -ms-border-radius: 6.25rem;
  border-radius: 6.25rem;
  font-weight: 700;
  color: #fff;
  text-transform: capitalize;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.custom-btn:hover {
  color: #fff;
  background: #e0a508;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .custom-btn {
    padding: 0.6875rem 2.5rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .custom-btn {
    padding: 0.4375rem 1.25rem;
  }
}

.body-bg {
  background: url("../images/components/bg-image.png") no-repeat center center;
}

.blog-bg {
  background: url("../images/components/blog-bg.png") no-repeat;
  background-position: 51% 7%;
}

/* ==========================================
3. Preloader
=============================================*/
.dark #preloader {
  background-color: #232323;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f7f7f7;
  z-index: 999999;
}

.preloader {
  width: 3.125rem;
  height: 3.125rem;
  display: inline-block;
  padding: 0rem;
  text-align: left;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -1.5625rem;
  margin-top: -1.5625rem;
}

.preloader span {
  position: absolute;
  display: inline-block;
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 100%;
  background: #000d5e;
  -webkit-animation: preloader 1.3s linear infinite;
  animation: preloader 1.3s linear infinite;
}

.preloader span:last-child {
  animation-delay: -0.8s;
  -webkit-animation-delay: -0.8s;
}

@keyframes preloader {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(1, 1);
    opacity: 0;
  }
}
@-webkit-keyframes preloader {
  0% {
    -webkit-transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(1, 1);
    opacity: 0;
  }
}
/* =====================================
2. Header Menu Area 
========================================*/
.menu-area .navbar {
  padding: 0;
}
@media only screen and (max-width: 767px) {
  .menu-area .navbar {
    padding: 13px 5px;
    background: linear-gradient(34deg, #341e97 0%, #341e97 1%, #5f27cd 100%);
  }
  .menu-area .navbar button span {
    color: #fff;
  }
}
.menu-area .navbar::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: #000;
  opacity: 0.05;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=5)";
  filter: alpha(opacity=5);
  z-index: -1;
}
.menu-area .navbar .navbar-brand {
  margin: 0;
  height: 2.1875rem;
}
.menu-area .navbar .navbar-brand img {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .menu-area .navbar .navbar-brand img {
    height: 1.875rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .menu-area .navbar .navbar-brand img {
    height: 1.0625rem;
  }
}
@media only screen and (max-width: 767px) {
  .menu-area .navbar .navbar-brand img {
    height: 1.75rem;
  }
}
.menu-area .navbar .navbar-nav {
  padding-right: 0.9375rem;
}
@media only screen and (max-width: 767px) {
  .menu-area .navbar .navbar-nav {
    padding: 1.875rem 0 0;
  }
}
.menu-area .navbar .navbar-nav li {
  display: inline-block;
}
.menu-area .navbar .navbar-nav li a.nav-link {
  padding: 1.875rem 0.625rem;
  font-weight: 700;
  font-size: 1rem;
  color: #e6e6e6;
}
.menu-area .navbar .navbar-nav li a.nav-link.active, .menu-area .navbar .navbar-nav li a.nav-link:hover {
  color: #ffba00;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .menu-area .navbar .navbar-nav li a.nav-link {
    padding: 25px 6px;
    font-size: 0.9375rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .menu-area .navbar .navbar-nav li a.nav-link {
    padding: 24px 4px;
    font-size: 0.7813rem;
  }
}
@media only screen and (max-width: 767px) {
  .menu-area .navbar .navbar-nav li a.nav-link {
    padding: 0.75rem;
  }
}
.menu-area .navbar .custom-btn {
  background: #ffba00;
  color: #fff;
}

.navbar-toggler {
  padding: 0;
}
.navbar-toggler:focus {
  box-shadow: none;
}

.sticky .navbar::before {
  background: linear-gradient(34deg, #341e97 0%, #341e97 1%, #5f27cd 100%);
  opacity: 0.95;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
  filter: alpha(opacity=95);
}
@media only screen and (max-width: 767px) {
  .sticky .navbar {
    padding: 0.6rem 0.313rem;
  }
}
.sticky .navbar .navbar-nav li a.nav-link {
  padding: 1.25rem 0.625rem;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .sticky .navbar .navbar-nav li a.nav-link {
    padding: 1.25rem 0.375rem;
    font-size: 0.9375rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .sticky .navbar .navbar-nav li a.nav-link {
    padding: 17px 4px;
    font-size: 0.7813rem;
  }
}
@media only screen and (max-width: 767px) {
  .sticky .navbar .navbar-nav li a.nav-link {
    padding: 0.75rem;
  }
}
.sticky .navbar-brand img {
  height: 1.875rem;
  padding: 0.125rem;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

@media only screen and (max-width: 767px) {
  .custom-btn.nav-btn {
    display: none;
  }
}
/* =====================================
3. Banner Area 
========================================*/
.banner-area {
  background: -moz-linear-gradient(56deg, #341e97 0%, #341e97 1%, #5f27cd 100%);
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #341e97), color-stop(1%, #341e97), color-stop(100%, #5f27cd));
  background: -webkit-linear-gradient(56deg, #341e97 0%, #341e97 1%, #5f27cd 100%);
  background: -o-linear-gradient(56deg, #341e97 0%, #341e97 1%, #5f27cd 100%);
  background: -ms-linear-gradient(56deg, #341e97 0%, #341e97 1%, #5f27cd 100%);
  background: linear-gradient(34deg, #341e97 0%, #341e97 1%, #5f27cd 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#5f27cd", endColorstr="#341e97", GradientType=0);
  position: relative;
  z-index: 1;
}
.banner-area::before {
  background: url("../images/components/b-bg.png") no-repeat;
  background-position: center bottom;
  position: absolute;
  left: 0;
  bottom: -3.625rem;
  content: "";
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
}
@media only screen and (min-width: 1750px) and (max-width: 1920px) {
  .banner-area::before {
    bottom: -0.125rem;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .banner-area::before {
    bottom: -7.1875rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner-area::before {
    bottom: -9.0625rem;
  }
}
@media only screen and (max-width: 767px) {
  .banner-area::before {
    bottom: -11.5625rem;
  }
}
.banner-area .banner-device {
  padding-top: 14.0625rem;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner-area .banner-device {
    padding-top: 12.1875rem;
  }
}
@media only screen and (max-width: 767px) {
  .banner-area .banner-device {
    display: none;
  }
}
.banner-area .banner-txt {
  padding: 15.625rem 0 6.25rem;
  margin-left: 3.75rem;
}
@media only screen and (min-width: 1750px) and (max-width: 1920px) {
  .banner-area .banner-txt {
    padding: 13.75rem 0 6.25rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner-area .banner-txt {
    margin: 0;
    padding: 13.4375rem 0 6.25rem;
  }
}
@media only screen and (max-width: 767px) {
  .banner-area .banner-txt {
    margin: 0;
    padding: 10.625rem 0 6.25rem;
  }
}
.banner-area .banner-txt .banner-intro {
  max-width: 34.6875rem;
  margin-left: 2.8125rem;
}
@media only screen and (max-width: 767px) {
  .banner-area .banner-txt .banner-intro {
    margin: 0;
  }
}
.banner-area .banner-txt .banner-intro .banner-title {
  color: #fff;
  line-height: 2.8125rem;
  font-size: 2.25rem;
  margin-bottom: 1.25rem;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner-area .banner-txt .banner-intro .banner-title {
    font-size: 2rem;
  }
}
@media only screen and (max-width: 767px) {
  .banner-area .banner-txt .banner-intro .banner-title {
    font-size: 1.9375rem;
    line-height: 2.25rem;
  }
}
.banner-area .banner-txt .banner-intro .banner-title span {
  color: #ffba00;
}
.banner-area .banner-txt .banner-intro p {
  color: #e6e6e6;
  font-weight: 500;
}
.banner-area .banner-txt .app-media {
  margin-top: 5.3125rem;
}
@media only screen and (min-width: 1750px) and (max-width: 1920px) {
  .banner-area .banner-txt .app-media {
    margin-top: 4.0625rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner-area .banner-txt .app-media {
    margin-left: 1.25rem;
    margin-top: 3.75rem;
  }
}
.banner-area .banner-txt .app-media .single-media {
  float: left;
  width: 33.33%;
}
.banner-area .banner-txt .app-media .single-media a {
  width: 7.5625rem;
  height: 7.5625rem;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  text-align: center;
  display: table;
  background: #fff;
  margin-bottom: 0.9375rem;
  -webkit-box-shadow: 0rem 0rem 3.125rem 0rem rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0rem 0rem 3.125rem 0rem rgba(0, 0, 0, 0.2);
  box-shadow: 0rem 0rem 3.125rem 0rem rgba(0, 0, 0, 0.2);
}
.banner-area .banner-txt .app-media .single-media a i {
  color: #cecece;
  font-size: 2.5rem;
  vertical-align: middle;
  display: table-cell;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner-area .banner-txt .app-media .single-media a i {
    font-size: 1.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .banner-area .banner-txt .app-media .single-media a i {
    font-size: 1.5625rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner-area .banner-txt .app-media .single-media a {
    width: 6.25rem;
    height: 6.25rem;
  }
}
@media only screen and (max-width: 767px) {
  .banner-area .banner-txt .app-media .single-media a {
    width: 5rem;
    height: 5rem;
  }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .banner-area .banner-txt .app-media .single-media a {
    width: 6.25rem;
    height: 6.25rem;
  }
}
.banner-area .banner-txt .app-media .single-media a:hover {
  -webkit-box-shadow: 0rem 0rem 3.125rem 0rem rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0rem 0rem 3.125rem 0rem rgba(0, 0, 0, 0.3);
  box-shadow: 0rem 0rem 3.125rem 0rem rgba(0, 0, 0, 0.3);
}
.banner-area .banner-txt .app-media .single-media p {
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.6875rem;
  max-width: 10rem;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner-area .banner-txt .app-media .single-media p {
    font-size: 1rem;
  }
}
@media only screen and (max-width: 767px) {
  .banner-area .banner-txt .app-media .single-media p {
    font-size: 0.875rem;
    line-height: 1.1;
  }
}
.banner-area .banner-txt .app-media .single-media:nth-child(2) {
  margin-top: 1.5rem;
  padding-left: 0.9375rem;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner-area .banner-txt .app-media .single-media:nth-child(2) {
    margin-top: 1.25rem;
  }
}
@media only screen and (max-width: 767px) {
  .banner-area .banner-txt .app-media .single-media:nth-child(2) {
    margin-top: 0.8125rem;
    padding-left: 0.8125rem;
  }
}
.banner-area .banner-txt .app-media .single-media:nth-child(3) {
  margin-top: 3.875rem;
  padding-left: 1.5625rem;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .banner-area .banner-txt .app-media .single-media:nth-child(3) {
    margin-top: 3.4375rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .banner-area .banner-txt .app-media .single-media:nth-child(3) {
    margin-top: 2.5rem;
    padding-left: 1.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .banner-area .banner-txt .app-media .single-media:nth-child(3) {
    margin-top: 1.875rem;
  }
}

.popup-vedio {
  position: relative;
  z-index: 1;
}
.popup-vedio::after, .popup-vedio::before {
  position: absolute;
  content: "";
  top: 0;
  width: 90%;
  height: 90%;
  left: 0;
  right: 0;
  z-index: -1;
  bottom: 0;
  margin: auto;
  display: block;
  border-radius: 50%;
  -webkit-animation: pulse 1.5s linear infinite;
  animation: pulse 1.5s linear infinite;
  background-color: rgba(255, 255, 255, 0.5);
}
.popup-vedio::before {
  background: rgba(255, 255, 255, 0.4);
}
.popup-vedio .circle {
  border-radius: 6.25rem;
  position: absolute;
  margin: auto;
  transform: scale(1);
  transform-origin: center center;
  left: 0;
  display: none;
  z-index: -1;
}
.popup-vedio .circle-1 {
  width: 100%;
  height: 100%;
  background-color: #4121a8;
  top: 0;
  animation: pulse 1.2s linear 0s infinite;
}
.popup-vedio .circle-2 {
  width: 100%;
  height: 100%;
  background-color: white;
  top: 0;
  animation: pulse-2 1.2s linear 0s infinite;
}
@keyframes pulse {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.75;
  }
  25% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.75;
  }
  100% {
    -webkit-transform: scale(1.6);
    transform: scale(1.6);
    opacity: 0;
  }
}
@keyframes pulse-2 {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.75;
  }
  25% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.75;
  }
  100% {
    -webkit-transform: scale(1.7);
    transform: scale(1.7);
    opacity: 0;
  }
}

/* =====================================
3.1 Banner Area Home-2 
========================================*/
.home-2::before {
  background: url("../images/components/home-2.png") no-repeat;
  background-position: center bottom;
}
.home-2 .banner-txt .app-media .single-media:nth-child(3) {
  margin-top: 0rem;
}
.home-2 .banner-txt .app-media .single-media:nth-child(1) {
  margin-top: 4.0625rem;
}
@media only screen and (max-width: 767px) {
  .home-2 .banner-txt .app-media .single-media:nth-child(1) {
    margin-top: 1.5625rem;
  }
}

/* =====================================
3.2 Banner Area Home-3
========================================*/
.home-3::before {
  background: url("../images/components/home-3.png") no-repeat;
  background-position: center bottom;
  bottom: -4.375rem;
}
@media only screen and (min-width: 1750px) and (max-width: 1920px) {
  .home-3::before {
    bottom: -0.125rem;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .home-3::before {
    bottom: -9.75rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .home-3::before {
    bottom: -11.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .home-3::before {
    bottom: -14.6875rem;
  }
}
.home-3 .banner-txt .app-media {
  margin-top: 4.375rem;
  margin-left: 2.5rem;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .home-3 .banner-txt .app-media {
    margin-top: 3.125rem;
  }
}
@media only screen and (max-width: 767px) {
  .home-3 .banner-txt .app-media {
    margin-top: 3.125rem;
    margin-left: 0;
  }
}
@media only screen and (min-width: 1750px) and (max-width: 1920px) {
  .home-3 .banner-txt .app-media {
    margin-top: 2.1875rem;
  }
}
.home-3 .banner-txt .app-media .single-media:nth-child(3) {
  margin-top: 0rem;
}
.home-3 .banner-txt .app-media .single-media:nth-child(2) {
  margin-top: 0rem;
}

/* =====================================
3.3 Banner Area Home-4
========================================*/
.home-4::before {
  background: url("../images/components/home4.png") no-repeat;
  background-position: center bottom;
}
@media only screen and (max-width: 767px) {
  .home-4::before {
    bottom: 0;
    height: 120px;
  }
}
.home-4 .banner-txt {
  margin-left: 4.375rem;
  margin-top: 0.3125rem;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .home-4 .banner-txt {
    padding: 11.875rem 0 6.25rem;
    margin-left: 3.125rem;
  }
}
@media only screen and (max-width: 767px) {
  .home-4 .banner-txt {
    padding: 8.75rem 0 6.25rem;
    margin-left: 0rem;
  }
}
.home-4 .banner-txt .banner-intro {
  margin: 0;
}
.home-4 .banner-txt .app-media .single-media:nth-child(3) {
  margin-top: 0rem;
}
.home-4 .banner-txt .app-media .single-media:nth-child(2) {
  margin-top: 0rem;
}

/* =====================================
3.4 Banner Area Home-5
========================================*/
.home-5::before {
  background: url("../images/components/home-5.png") no-repeat;
  background-position: center bottom;
  bottom: 0;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .home-5::before {
    bottom: -2.813rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .home-5::before {
    bottom: -5.625rem;
  }
}
@media only screen and (max-width: 767px) {
  .home-5::before {
    bottom: 0.625rem;
  }
}

/* ============================================
4. Choose Area
===============================================*/
.choose-area {
  padding-top: 10rem;
}
@media only screen and (max-width: 767px) {
  .choose-area {
    padding-top: 6.25rem;
  }
}
.choose-area .section-title, .choose-area .promo-area .promo-txt .promo-title, .promo-area .promo-txt .choose-area .promo-title,
.choose-area .promo-area .promo-search .promo-title,
.promo-area .promo-search .choose-area .promo-title {
  margin-bottom: 1.875rem;
}
.choose-area .single-use {
  position: relative;
  z-index: 1;
  background: #fff;
  padding: 2.5rem 1.4375rem;
  -webkit-border-radius: 0.4375rem;
  -moz-border-radius: 0.4375rem;
  -ms-border-radius: 0.4375rem;
  border-radius: 0.4375rem;
  -webkit-box-shadow: 0rem 0rem 1.875rem 0rem rgba(0, 0, 0, 0.08);
  -moz-box-shadow: 0rem 0rem 1.875rem 0rem rgba(0, 0, 0, 0.08);
  box-shadow: 0rem 0rem 1.875rem 0rem rgba(0, 0, 0, 0.08);
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .choose-area .single-use {
    padding: 1.25rem 0.875rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .choose-area .single-use {
    padding: 1.875rem 1.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .choose-area .single-use {
    margin-bottom: 2rem;
  }
}
.choose-area .single-use i {
  color: #ffba00;
  font-size: 2.25rem;
}
.choose-area .single-use h4 {
  margin: 0.9375rem 0;
  font-weight: 700;
  color: #7a7a7a;
}
.choose-area .single-use::after {
  position: absolute;
  left: -1.875rem;
  top: 35%;
  content: "";
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  width: 0.4375rem;
  height: 0.4375rem;
  background: #000d5e;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .choose-area .single-use::after {
    top: 37.3%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .choose-area .single-use::after {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .choose-area .single-use::after {
    display: none;
  }
}
.choose-area .single-use::before {
  position: absolute;
  left: -55%;
  top: -23px;
  background: url("../images/components/shape1.png") no-repeat center left;
  content: "";
  width: 100%;
  height: 100%;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .choose-area .single-use::before {
    left: -65%;
    top: -1.125rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .choose-area .single-use::before {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .choose-area .single-use::before {
    display: none;
  }
}
.choose-area .single-use:nth-child(2)::before {
  top: 3rem;
  background: url("../images/components/shape2.png") no-repeat center left;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .choose-area .single-use:nth-child(2)::before {
    top: 11%;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) and (min-width: 768px) and (max-width: 991px) {
  .choose-area .single-use:nth-child(2)::before {
    display: none;
  }
}
.choose-area .single-use:nth-child(2)::after {
  top: 69%;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .choose-area .single-use:nth-child(2)::after {
    top: 66.4%;
  }
}
.choose-area .sp::before {
    background: url("../images/components/shape3.png") no-repeat right center;
    top: 0px;
    left: -144%;
    width: 140%;
    height: 120%;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .choose-area .sp::before {
    top: 25px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .choose-area .sp::before {
    display: none;
  }
}
.choose-area .sp::after {
  left: -18px;
  top: 36%;
}

.version-1 .section-intro {
  text-align: left;
  margin: inherit;
  padding-top: 16.25rem;
}
.version-1 .section-intro p {
  font-size: 0.9375rem;
  font-weight: 400;
  margin-bottom: 2.8125rem;
}
.version-1 .section-intro .custom-btn {
  padding: 0.6875rem 2.3125rem;
}
.version-1 .section-intro::before {
    left: -66%;
    top: -10%;
    width: 190%;
    height: 48.75rem;
    background: #fcfcfc;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    border-radius: 50%;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .version-1 .section-intro::before {
    left: -102%;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .version-1 .section-intro::before {
    left: -130%;
  }
}
@media only screen and (max-width: 767px) {
  .version-1 .section-intro::before {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .version-1 .section-intro {
    padding: 0 0 2.8125rem;
  }
}
.version-1 .single-use,
.version-1 .sp {
  position: relative;
  z-index: 1;
}
.version-1 div > .single-use:nth-child(1) {
  margin-bottom: 1.875rem;
}
.version-1 div:nth-child(2) div:nth-child(2) .single-use:nth-child(1) {
  margin-top: 5.5rem;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .version-1 div:nth-child(2) div:nth-child(2) .single-use:nth-child(1) {
    margin-top: 1.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .version-1 div:nth-child(2) div:nth-child(2) .single-use:nth-child(1) {
    margin-top: 1.875rem;
  }
}

.choose-4 .section-intro {
  max-width: 35rem;
}
.choose-4 .single-use::before,
.choose-4 .single-use::after {
  background: none;
}

/* ============================================
5. Work Area
===============================================*/
.work-area {
  background: #FAF9FF;
}
.work-area .blue-bg {
  position: relative;
  padding: 4.6875rem 0 6.25rem;
  z-index: 1;
  max-width: 510px;
}
@media only screen and (max-width: 767px) {
  .work-area .blue-bg {
    max-width: 320px;
  }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .work-area .blue-bg {
    max-width: 23.75rem;
  }
}
.work-area .blue-bg::before {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: url("../images/components/blue-bg.png") no-repeat center center/contain;
  z-index: -1;
}
@media only screen and (max-width: 767px) {
  .work-area .blue-bg::before {
    left: -0.9375rem;
    top: -0.9375rem;
    width: 110%;
    height: 110%;
  }
}
@media only screen and (max-width: 767px) {
  .work-area .blue-bg .section-title, .work-area .blue-bg .promo-area .promo-txt .promo-title, .promo-area .promo-txt .work-area .blue-bg .promo-title,
.work-area .blue-bg .promo-area .promo-search .promo-title,
.promo-area .promo-search .work-area .blue-bg .promo-title {
    margin-bottom: 0.625rem;
  }
}
.work-area .blue-bg p,
.work-area .blue-bg .section-title,
.work-area .blue-bg .promo-area .promo-txt .promo-title,
.promo-area .promo-txt .work-area .blue-bg .promo-title,
.work-area .blue-bg .promo-area .promo-search .promo-title,
.promo-area .promo-search .work-area .blue-bg .promo-title {
  color: #fff;
}
.work-area .blue-bg p {
  max-width: 26.875rem;
  margin: 0 auto;
  color: #e6e6e6;
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .work-area .blue-bg p {
    max-width: 26.875rem;
  }
}
.work-area .single-work {
  cursor: pointer;
  -webkit-border-radius: 0.5rem;
  -moz-border-radius: 0.5rem;
  -ms-border-radius: 0.5rem;
  border-radius: 0.5rem;
  -webkit-box-shadow: 0rem 0rem 2.1875rem 0rem rgba(0, 1, 1, 0.08);
  -moz-box-shadow: 0rem 0rem 2.1875rem 0rem rgba(0, 1, 1, 0.08);
  box-shadow: 0rem 0rem 2.1875rem 0rem rgba(0, 1, 1, 0.08);
  background: #fff;
  padding: 3.75rem 1.25rem 3.75rem 1.5625rem;
  position: relative;
  max-width: 18.4375rem;
  margin: 2.5rem 0 0 3.75rem;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .work-area .single-work {
    max-width: auto;
    margin: 0;
  }
}
@media only screen and (max-width: 767px) {
  .work-area .single-work {
    max-width: 100%;
    margin: 0;
  }
}
.work-area .single-work h4 {
  color: #7a7a7a;
}
.work-area .single-work span {
  position: absolute;
  left: 0.625rem;
  top: -0.75rem;
  font-size: 6.25rem;
  font-weight: 700;
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
}
.work-area .single-work p {
  font-size: 0.9375rem;
}
.work-area .single-work:hover {
  transform: translateY(-0.625rem);
  -webkit-box-shadow: 0rem 0rem 2.8125rem 0rem rgba(0, 1, 1, 0.1);
  -moz-box-shadow: 0rem 0rem 2.8125rem 0rem rgba(0, 1, 1, 0.1);
  box-shadow: 0rem 0rem 2.8125rem 0rem rgba(0, 1, 1, 0.1);
}
.work-area .row div:nth-child(1) span {
  color: #4dc2ff;
}
.work-area .row div:nth-child(2) span {
  color: #ff7fe5;
}
.work-area .row div:nth-child(3) span {
  color: #878aee;
}
.work-area .row div:nth-child(2) .single-work {
  margin-top: 5.3125rem;
}
@media only screen and (max-width: 767px) {
  .work-area .row div:nth-child(2) .single-work {
    margin-bottom: 5.3125rem;
  }
}

/* ============================================
6. Screenshot Area
===============================================*/
.screenshot-area {
  padding: 6.25rem 0;
}
@media only screen and (max-width: 767px) {
  .screenshot-area {
    padding: 3.125rem 0;
  }
}
.screenshot-area .swiper-container {
  width: 100%;
  height: 100%;
  padding-bottom: 5rem;
}
.screenshot-area .swiper-container .swiper-wrapper .swiper-slide {
  width: 22.5rem;
  height: auto;
  padding: 0 0.625rem;
  z-index: auto;
}
.screenshot-area .swiper-container .swiper-wrapper .swiper-slide .slider-image .preview-icon {
  z-index: -1;
  width: calc(100% - 1.875rem);
}

.swiper-container-horizontal > .swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
  bottom: 0;
}

.swiper-pagination-bullet {
  background: #ebebeb;
  border: none;
  border-radius: 100%;
  display: inline-block;
  height: 1.25rem;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  width: 1.25rem;
}

.swiper-pagination-bullet-active {
  background: #ffba00;
  height: 1.25rem;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  width: 1.25rem;
}

/* ============================================
7. Review Area
===============================================*/
.review-area {
  background: #FAF9FF;
  padding: 4.375rem 0 5.3125rem;
}
@media only screen and (max-width: 767px) {
  .review-area {
    padding: 3.125rem 0;
  }
}
.review-area::before, .review-area::after {
  top: -3rem;
  width: 50%;
  height: 6.25rem;
  background: #FAF9FF;
  border-radius: 100%;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
}
.review-area::after {
  position: absolute;
  right: 0;
  content: "";
}
.review-area .section-intro {
  max-width: 32.8125rem;
}
.review-area .owl-item {
  padding: 1.25rem;
}
.review-area .owl-nav div {
  position: absolute;
  left: -7%;
  top: 50%;
  font-size: 1.875rem;
  color: #000d5e;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.review-area .owl-nav div:hover {
  color: #ffba00;
}
.review-area .owl-nav div.owl-next {
  left: auto;
  right: -7%;
}
@media only screen and (max-width: 767px) {
  .review-area .owl-nav div.owl-next {
    right: -0.4375rem;
  }
}
@media only screen and (max-width: 767px) {
  .review-area .owl-nav div {
    left: -0.4375rem;
  }
}
.review-area .single-review {
  background: #fff;
  padding: 55px 0 50px;
  -webkit-border-radius: 0.9375rem;
  -moz-border-radius: 0.9375rem;
  -ms-border-radius: 0.9375rem;
  border-radius: 0.9375rem;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  -webkit-box-shadow: 0rem 0rem 1.25rem 0rem rgba(0, 0, 0, 0.06);
  -moz-box-shadow: 0rem 0rem 1.25rem 0rem rgba(0, 0, 0, 0.06);
  box-shadow: 0rem 0rem 1.25rem 0rem rgba(0, 0, 0, 0.06);
  text-align: center;
}
.review-area .single-review:hover {
  transform: translateY(-0.625rem);
  -webkit-box-shadow: 0rem 0.3125rem 1.25rem 0rem rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0rem 0.3125rem 1.25rem 0rem rgba(0, 0, 0, 0.1);
  box-shadow: 0rem 0.3125rem 1.25rem 0rem rgba(0, 0, 0, 0.1);
}
.review-area .single-review .reviewer-img {
  max-width: 6.25rem;
  margin: 0 auto;
}
.review-area .single-review .reviewer-img img {
  width: 6.25rem !important;
  height: 6.25rem;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
}
.review-area .single-review p {
  max-width: 26.875rem;
  margin: 1.875rem auto 1.875rem;
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .review-area .single-review p {
    max-width: 20.3125rem;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .review-area .single-review p {
    max-width: 14.5625rem;
  }
}
@media only screen and (max-width: 767px) {
  .review-area .single-review p {
    max-width: 13.125rem;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .review-wrap {
    max-width: 51.875rem;
    margin: 0 auto;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .review-wrap {
    max-width: 37.5rem;
    margin: 0 auto;
  }
}
/* ============================================
8. Download Area
===============================================*/
.down-load-area {
  background: url("../images/donwload-bg.jpg") no-repeat center center/cover;
}
.down-load-area::before {
  opacity: 0.9;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=90);
  background-color: #5f27cd;
}
.down-load-area .section-intro {
  max-width: 30.625rem;
}
.down-load-area .section-intro .section-title, .down-load-area .section-intro .promo-area .promo-txt .promo-title, .promo-area .promo-txt .down-load-area .section-intro .promo-title,
.down-load-area .section-intro .promo-area .promo-search .promo-title,
.promo-area .promo-search .down-load-area .section-intro .promo-title {
  color: #fff;
}
.down-load-area .section-intro P {
  color: #abaebd;
  font-weight: 500;
}
.down-load-area .download-wrap {
  max-width: 52.1875rem;
  margin: 0 auto;
  text-align: center;
}
.down-load-area .download-wrap .single-option {
  float: left;
  width: 33.33%;
}
@media only screen and (max-width: 767px) {
  .down-load-area .download-wrap .single-option {
    float: none;
    width: 100%;
    margin-bottom: 1.25rem;
  }
}
.down-load-area .download-wrap .single-option a {
  display: inline-block;
  padding: 0.625rem 1.5rem 0.8125rem 1.5rem;
  background: #301d84;
  border: 0.1875rem solid #839ba9;
  -webkit-border-radius: 6.25rem;
  -moz-border-radius: 6.25rem;
  -ms-border-radius: 6.25rem;
  border-radius: 6.25rem;
}
.down-load-area .download-wrap .single-option a:hover {
  background: #301d84;
}
.down-load-area .download-wrap .single-option a i {
  color: #8393ca;
  font-size: 2.5rem;
  float: left;
}
.down-load-area .download-wrap .single-option a .optino-txt {
  margin-left: 3.125rem;
  text-align: left;
  margin-top: -0.3125rem;
}
.down-load-area .download-wrap .single-option a .optino-txt span {
  font-size: 1rem;
  font-weight: 500;
  color: #abaebd;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .down-load-area .download-wrap .single-option a .optino-txt span {
    font-size: 0.875rem;
  }
}
.down-load-area .download-wrap .single-option a .optino-txt h4 {
  font-size: 1.375rem;
  color: #fff;
  margin-bottom: 0;
  line-height: 1.25rem;
}

/* ============================================
9. Subscribe Area
===============================================*/
.subscribe-area .section-intro {
  max-width: 40.625rem;
}
.subscribe-area .section-intro .section-title, .subscribe-area .section-intro .promo-area .promo-txt .promo-title, .promo-area .promo-txt .subscribe-area .section-intro .promo-title,
.subscribe-area .section-intro .promo-area .promo-search .promo-title,
.promo-area .promo-search .subscribe-area .section-intro .promo-title,
.subscribe-area .section-intro p {
  color: #7a7a7a;
  font-weight: 500;
  margin-top: 1.25rem;
}
.subscribe-area .subscribe {
  max-width: 34.375rem;
  margin: 0 auto;
  position: relative;
  z-index: 3;
}
.subscribe-area .subscribe input {
  border: 0.1875rem solid #7980ad;
  color: #7a7a7a;
  font-weight: 500;
  width: 100%;
  border-radius: 6.25rem;
  padding: 0.9375rem 1.875rem;
}
.subscribe-area .subscribe ::-webkit-input-placeholder {
  color: #7a7a7a;
}
.subscribe-area .subscribe :-moz-placeholder {
  color: #7a7a7a;
}
.subscribe-area .subscribe ::-moz-placeholder {
  color: #7a7a7a;
}
.subscribe-area .subscribe :-ms-input-placeholder {
  color: #7a7a7a;
}
.subscribe-area .subscribe .custom-btn {
  position: absolute;
  right: 0.1875rem;
  border: none;
  padding: 0.9375rem 1.5625rem;
  top: 0.1875rem;
  font-size: 1.125rem;
}

/* ============================================
9.1 FAQ Area
===============================================*/
.faq-area .section-intro {
  max-width: 36.25rem;
}
.faq-area .panel-group .panel {
  background: transparent;
  margin-bottom: 1.875rem;
}
.faq-area .panel-group .panel .panel-title {
  font-size: 1.25rem;
  margin: 0;
}
.faq-area .panel-group .panel .panel-title a {
  background: #5b1dda none repeat scroll 0 0;
  border-radius: 0;
  color: #000d5e;
  display: block;
  padding: 1.0625rem 0.9375rem 1.0625rem 1.25rem;
  position: relative;
}
.faq-area .panel-group .panel .panel-title a::after {
  color: #fff;
  content: "";
  font-family: fontawesome;
  font-size: 1.25rem;
  right: 1.625rem;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.faq-area .panel-group .panel .panel-title a.collapsed::after {
  content: "";
}
.faq-area .panel-group .panel .panel-body {
  padding: 1.5625rem 0.625rem 1.875rem 1.25rem;
  border: 0.0625rem solid #000d5e;
  border-top: 0;
}
.faq-area .panel-group .panel:nth-child(1) .panel-title a {
  color: #fff;
}
.faq-area .panel-group .panel:nth-child(2) .panel-title a {
  background: #b7b9f5;
}
.faq-area .panel-group .panel:nth-child(3) .panel-title a {
  background: #ffb2ef;
}
.faq-area .panel-group .panel:nth-child(4) .panel-title a {
  background: #94daff;
}
.faq-area .panel-group .panel:nth-child(5) .panel-title a {
  background: #b7b9f5;
}
.faq-area .panel-group .panel:nth-child(6) .panel-title a {
  background: #ffb2ef;
}

/* ============================================
9.2 Fun Area
===============================================*/
.fun-area {
  background: url("../images/components/fun-bg.jpg") no-repeat center center;
  background-attachment: fixed;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .fun-area {
    padding: 5rem 0 2.5rem;
  }
}
.fun-area::before {
  background: #5b1dda;
  opacity: 0.94;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=94)";
  filter: alpha(opacity=94);
}
.fun-area .single-fun {
  text-align: center;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .fun-area .single-fun {
    margin-bottom: 2.8125rem;
  }
}
@media only screen and (max-width: 767px) {
  .fun-area .single-fun {
    margin-bottom: 2.8125rem;
  }
}
.fun-area .single-fun span.counter {
  display: block;
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
  padding: 2.5rem 0 1.5625rem;
}
.fun-area .single-fun p {
  color: #cdcdcd;
  font-size: 1.25rem;
}

/* ============================================
9.3 Blog Area
===============================================*/
.blog-area {
  padding-bottom: 4.375rem;
}
.blog-area .blog-bg-2 {
  background: url("../images/components/blog-bg2.jpg") no-repeat center center/cover;
  max-width: 100%;
  padding: 3.75rem 0;
  margin-bottom: 3.75rem;
  max-height: 15.3125rem;
}
.blog-area .blog-bg-2::after {
  content: "";
  display: table;
  clear: both;
}
.blog-area .blog-bg-2::before {
  background: #5b1dda;
  opacity: 0.7;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
  filter: alpha(opacity=70);
}
.blog-area .blog-bg-2 .section-intro {
  max-width: 38.125rem;
  margin: 0 auto;
}
.blog-area .blog-bg-2 .section-intro p,
.blog-area .blog-bg-2 .section-intro .section-title,
.blog-area .blog-bg-2 .section-intro .promo-area .promo-txt .promo-title,
.promo-area .promo-txt .blog-area .blog-bg-2 .section-intro .promo-title,
.blog-area .blog-bg-2 .section-intro .promo-area .promo-search .promo-title,
.promo-area .promo-search .blog-area .blog-bg-2 .section-intro .promo-title {
  color: #fff;
}

/* ============================================
9.4 Brand Area
===============================================*/
.brand-area {
  padding: 5rem 0;
}
.brand-area .single-item {
  background: #fff;
  padding: 1.875rem 1.25rem;
  -webkit-box-shadow: 0rem 0rem 1.25rem 0rem rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0rem 0rem 1.25rem 0rem rgba(0, 0, 0, 0.1);
  box-shadow: 0rem 0rem 1.25rem 0rem rgba(0, 0, 0, 0.1);
  margin: 1.25rem 0;
}
.brand-area .single-item img {
  width: inherit !important;
}

/* ============================================
9.5 Contact Area
===============================================*/
.contact-area {
  position: relative;
}
.contact-area #google-map {
  height: 50rem;
  width: 100%;
}
.contact-area .contact-form {
  position: absolute;
  left: 8%;
  bottom: 6.25rem;
  z-index: 4;
  width: 28.75rem;
  text-align: center;
  background: #fff;
  padding: 3.75rem 2.5rem 2.5rem;
}
@media only screen and (max-width: 767px) {
  .contact-area .contact-form {
    width: 18.75rem;
    padding: 1.25rem;
    left: 0.625rem;
    bottom: 3.125rem;
  }
}
.contact-area .contact-form form {
  text-align: left;
  margin-top: 1.875rem;
}
.contact-area .contact-form form .form-group {
  margin-bottom: 1.25rem;
}
@media only screen and (max-width: 767px) {
  .contact-area .contact-form form .form-group {
    float: none;
  }
}
.contact-area .contact-form form .form-group input {
  width: 11.25rem;
  height: 3.125rem;
  border: 0.0625rem solid #efefef;
  padding: 0 0.9375rem;
}
@media only screen and (max-width: 767px) {
  .contact-area .contact-form form .form-group input {
    width: 100%;
  }
}
.contact-area .contact-form form .form-group textarea {
  height: 6.875rem;
  width: 100%;
  padding: 0.3125rem 0.9375rem;
  border: 0.0625rem solid #efefef;
}
.contact-area .contact-form form .form-group button {
  margin-top: 0.625rem;
  border: none;
  font-size: 1rem;
  padding: 0.8125rem 2.0625rem;
}

/* ============================================
10. Footer Area
===============================================*/
.footer-area {
  padding-top: 3.75rem;
  padding-top: 3.75rem;
  background: #341e97;
  background: -moz-linear-gradient(56deg, #341e97 0%, #5f27cd 100%);
  background: -webkit-linear-gradient(56deg, #341e97 0%, #5f27cd 100%);
  background: -o-linear-gradient(56deg, #341e97 0%, #5f27cd 100%);
  background: -ms-linear-gradient(56deg, #341e97 0%, #5f27cd 100%);
  background: linear-gradient(146deg, #341e97 0%, #5f27cd 100%);
}
.footer-area::before {
  background: url("../images/components/footer-bg.png") center center/cover;
  opacity: 0.6;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
  filter: alpha(opacity=60);
  height: 129%;
  top: -30%;
}
@media only screen and (max-width: 767px) {
  .footer-area .footer-top .footer-widget {
    margin-bottom: 2.8125rem;
  }
}
.footer-area .footer-top .footer-widget .widget-title {
  color: #fff;
  font-size: 1.375rem;
  margin-bottom: 1.5625rem;
  text-transform: capitalize;
  font-weight: 700;
}
.footer-area .footer-top .footer-widget ul li {
  line-height: 1.875rem;
  font-weight: 500;
}
.footer-area .footer-top .footer-widget ul li i {
  float: left;
  font-size: 1rem;
  color: #e0e0e0;
  margin-top: 0.3125rem;
}
.footer-area .footer-top .footer-widget ul li a {
  color: #e0e0e0;
  font-weight: 500;
}
.footer-area .footer-top .footer-widget ul li:hover a {
  color: #ffba00;
}
.footer-area .footer-top .footer-widget .contact-info li {
  line-height: inherit;
  margin-bottom: 0.9375rem;
}
.footer-area .footer-top .footer-widget .contact-info li a,
.footer-area .footer-top .footer-widget .contact-info li span {
  display: block;
  margin-left: 1.875rem;
  color: #e0e0e0;
}
.footer-area .footer-bottom {
  background: #1f212c;
  padding: 1.25rem;
  margin-top: 1.25rem;
}
.footer-area .footer-bottom p {
  margin: 0;
  font-weight: 700;
  color: #abaebd;
}
.footer-area .footer-bottom a {
  color: #fff;
  opacity: 0.5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  margin: 0 0.625rem;
  font-size: 1.125rem;
}
.footer-area .footer-bottom a:hover {
  color: #ffba00;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
}

/* ============================================
11. Blog Page
===============================================*/
main {
  padding: 2.5rem 0 5rem;
}

.promo-area {
  background: url("../images/components/promobg.png") no-repeat center right/cover;
  padding: 6.25rem 0 9.0625rem;
  background-attachment: fixed;
}
@media only screen and (max-width: 767px) {
  .promo-area {
    padding: 6.25rem 0;
  }
}
.promo-area::before {
  background: linear-gradient(34deg, #341e97 0%, #341e97 1%, #5f27cd 100%);
  opacity: 0.97;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=97)";
  filter: alpha(opacity=97);
}
.promo-area .promo-txt,
.promo-area .promo-search {
  padding-top: 8.125rem;
}
@media only screen and (max-width: 767px) {
  .promo-area .promo-txt,
.promo-area .promo-search {
    padding-top: 1.875rem;
  }
}
.promo-area .promo-txt .promo-title,
.promo-area .promo-search .promo-title {
  color: #fff;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .promo-area .promo-txt .promo-title,
.promo-area .promo-search .promo-title {
    font-size: 1.875rem;
  }
}
@media only screen and (max-width: 767px) {
  .promo-area .promo-txt .promo-title,
.promo-area .promo-search .promo-title {
    font-size: 1.625rem;
  }
}
.promo-area .promo-txt .breadcrumb,
.promo-area .promo-search .breadcrumb {
  background: transparent;
  border-radius: 0;
  padding: 0.625rem 0 0;
  margin: 0;
}
.promo-area .promo-txt .breadcrumb li,
.promo-area .promo-search .breadcrumb li {
  font-weight: 500;
}
.promo-area .promo-txt .breadcrumb li a,
.promo-area .promo-search .breadcrumb li a {
  color: #abaebd;
}
.promo-area .promo-txt .breadcrumb li.active,
.promo-area .promo-search .breadcrumb li.active {
  color: #abaebd;
}
.promo-area .promo-txt form,
.promo-area .promo-search form {
  min-width: 22.5rem;
  margin: 1.5625rem 0 0;
  position: relative;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .promo-area .promo-txt form,
.promo-area .promo-search form {
    min-width: 17.8125rem;
  }
}
.promo-area .promo-txt form::after,
.promo-area .promo-search form::after {
  position: absolute;
  right: 1.875rem;
  top: 0.9375rem;
  font-size: 1.125rem;
  color: #fff;
  content: "";
  font-family: fontawesome;
}
.promo-area .promo-txt form input,
.promo-area .promo-search form input {
  background: #7148c7;
  padding: 1rem 2.5rem;
  border: 0 none;
  border-radius: 3.125rem;
  width: 100%;
  color: #fff;
}
.promo-area .promo-txt form ::-webkit-input-placeholder,
.promo-area .promo-search form ::-webkit-input-placeholder {
  color: #fff;
}
.promo-area .promo-txt form :-moz-placeholder,
.promo-area .promo-search form :-moz-placeholder {
  color: #fff;
}
.promo-area .promo-txt form ::-moz-placeholder,
.promo-area .promo-search form ::-moz-placeholder {
  color: #fff;
}
.promo-area .promo-txt form :-ms-input-placeholder,
.promo-area .promo-search form :-ms-input-placeholder {
  color: #fff;
}

/* ============================================
11.1 Single Article
===============================================*/
.single-article {
  margin-bottom: 1.875rem;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.single-article figure {
  margin: 0;
  -webkit-border-radius: 0.5rem;
  -moz-border-radius: 0.5rem;
  -ms-border-radius: 0.5rem;
  border-radius: 0.5rem;
  overflow: hidden;
}
.single-article figure img {
  height: 13.75rem;
  width: 100%;
}
.single-article .blog-txt {
  padding: 1.5625rem 1.25rem 2.1875rem 1.25rem;
  -webkit-box-shadow: 0rem 0rem 1.875rem 0rem rgba(0, 1, 1, 0.1);
  -moz-box-shadow: 0rem 0rem 1.875rem 0rem rgba(0, 1, 1, 0.1);
  box-shadow: 0rem 0rem 1.875rem 0rem rgba(0, 1, 1, 0.1);
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
.single-article .blog-txt .blog-meta {
  margin-bottom: 0.1875rem;
}
.single-article .blog-txt .blog-meta i {
  margin-right: 0.625rem;
}
.single-article .blog-txt .blog-meta a {
  color: #9c9797;
  text-decoration: underline;
}
.single-article .blog-txt .blog-title {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.6875rem;
}
.single-article .blog-txt .blog-btn {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  font-weight: 500;
}
.single-article .blog-txt .blog-btn:hover i {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  transition: all 0.4s ease;
  margin-left: 0.3125rem;
}
.single-article:hover {
  transform: translateY(-0.3125rem);
}
.single-article:hover .blog-txt {
  -webkit-box-shadow: 0rem 0rem 1.875rem 0rem rgba(0, 1, 1, 0.2);
  -moz-box-shadow: 0rem 0rem 1.875rem 0rem rgba(0, 1, 1, 0.2);
  box-shadow: 0rem 0rem 1.875rem 0rem rgba(0, 1, 1, 0.2);
}
.single-article:hover .blog-title a {
  color: #ffba00;
}

.single-article.big-article img {
  height: 25rem;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .single-article.big-article img {
    height: 13.75rem;
  }
}
@media only screen and (max-width: 767px) {
  .single-article.big-article img {
    height: 13.75rem;
  }
}
.single-article.big-article .blog-txt {
  padding: 1.875rem 2.1875rem;
}

/* Pagination Nav*/
.pagination-wrap {
  text-align: center;
  position: relative;
  z-index: 3;
}
.pagination-wrap nav .pagination {
  margin: 1.875rem 0 0;
}
@media only screen and (max-width: 767px) {
  .pagination-wrap nav .pagination {
    margin: 1.875rem 0;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .pagination-wrap nav .pagination {
    margin: 1.875rem 0;
  }
}
.pagination-wrap nav .pagination li.page-item {
  display: inline-block;
  margin: 0 0.3125rem;
  font-weight: 600;
}
@media only screen and (max-width: 767px) {
  .pagination-wrap nav .pagination li.page-item {
    margin: 0 0.125rem;
  }
}
.pagination-wrap nav .pagination li.page-item:first-child a, .pagination-wrap nav .pagination li.page-item:last-child a {
  border-radius: 1.875rem;
}
.pagination-wrap nav .pagination li.page-item.active a.page-link, .pagination-wrap nav .pagination li.page-item:hover a.page-link {
  background: #0093E9;
  color: #fff;
  box-shadow: 0 none;
}
.pagination-wrap nav .pagination li.page-item a.page-link {
  border: none;
  background: #ebebeb;
  color: #000d5e;
  border-radius: 1.875rem;
  width: 3.125rem;
  height: 2.125rem;
}
@media only screen and (max-width: 767px) {
  .pagination-wrap nav .pagination li.page-item a.page-link {
    width: 2.5rem;
    height: 1.875rem;
    line-height: 0.625rem;
  }
}
.pagination-wrap nav .pagination li.page-item a.page-link:focus {
  box-shadow: none;
}

.big-article .pagination-wrap .pagination {
  margin: 3.75rem 0 0;
}

/* ==============================================
11.2 Sidebar Area
================================================*/
.sidebar .widget {
  padding: 1.875rem 1.25rem;
  -webkit-box-shadow: 0rem 0rem 1.875rem 0rem rgba(0, 1, 1, 0.08);
  -moz-box-shadow: 0rem 0rem 1.875rem 0rem rgba(0, 1, 1, 0.08);
  box-shadow: 0rem 0rem 1.875rem 0rem rgba(0, 1, 1, 0.08);
  margin-bottom: 1.875rem;
  -webkit-border-radius: 0.5rem;
  -moz-border-radius: 0.5rem;
  -ms-border-radius: 0.5rem;
  border-radius: 0.5rem;
}
.sidebar .widget .widget-title {
  font-size: 1.125rem;
  text-transform: capitalize;
  margin-bottom: 1.875rem;
  position: relative;
  z-index: 1;
}
.sidebar .widget .widget-title::after {
  position: absolute;
  left: 0;
  top: 1.875rem;
  content: "";
  background: #ebebeb;
  height: 0.0625rem;
  width: 100%;
  z-index: -1;
}
.sidebar .widget li {
  line-height: 3rem;
  font-weight: 500;
}
.sidebar .widget li a {
  color: #7a7a7a;
}
.sidebar .widget li a:hover {
  color: #ffba00;
}
.sidebar .trending-post .single-trend {
  margin-bottom: 1.75rem;
}
.sidebar .trending-post .single-trend a {
  float: left;
}
.sidebar .trending-post .single-trend a img {
  height: 4.625rem;
  width: 7.5rem;
}
.sidebar .trending-post .single-trend .t-post-heading {
  margin-left: 8.125rem;
}
.sidebar .trending-post .single-trend .t-post-heading h4 {
  font-size: 0.9375rem;
  line-height: 1.375rem;
}
.sidebar .trending-post .single-trend .t-post-heading h4 a {
  color: #7a7a7a;
}
.sidebar .trending-post .single-trend .t-post-heading h4 a:hover {
  color: #ffba00;
}
.sidebar .trending-post .single-trend:last-child {
  margin-bottom: 0;
}
.sidebar .follow-wrap {
  margin: 0;
}
.sidebar .follow-wrap li {
  display: inline-block;
  margin-right: 1.375rem;
  position: relative;
  line-height: inherit;
}
.sidebar .follow-wrap li::after {
  position: absolute;
  right: -1.125rem;
  top: 0.6875rem;
  content: "";
  background: #c6c6c6;
  height: 0.125rem;
  width: 0.625rem;
}
.sidebar .follow-wrap li a {
  font-size: 1.125rem;
}
.sidebar .follow-wrap li:last-child::after {
  background: none;
}

/* ===================================================
12. Single Blog Page
======================================================*/
.single-post {
  box-shadow: 0rem 0rem 1.875rem 0rem rgba(0, 0, 0, 0.08);
  padding-bottom: 3.75rem;
  margin-bottom: 3.75rem;
  border-radius: 0.625rem;
  overflow: hidden;
}
.single-post figure {
  margin: 0;
}
.single-post figure img {
  height: 25rem;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .single-post figure img {
    height: 13.75rem;
  }
}
.single-post .article-details {
  padding: 1.5625rem 2.1875rem 1.875rem;
}
@media only screen and (max-width: 767px) {
  .single-post .article-details {
    padding: 1.5625rem 0.9375rem 1.875rem;
  }
}
.single-post .article-details .blog-meta {
  margin-bottom: 0.3125rem;
}
.single-post .article-details .blog-meta a {
  color: #9c9797;
  text-decoration: underline;
}
.single-post .article-details .blog-meta a i {
  margin-right: 0.3125rem;
}
.single-post .article-details .blog-title {
  font-size: 1.75rem;
  margin-bottom: 1.25rem;
}
.single-post .article-details p {
  margin-bottom: 1.5625rem;
}
.single-post .article-details blockquote {
  background: #FAF9FF;
  padding: 1.5625rem 1.875rem;
}
.single-post .article-details blockquote p {
  font-size: 1.125rem;
  line-height: 1.6875rem;
  margin: 0;
  font-weight: 500;
}
.single-post .share-tag {
  border-top: 0.0625rem solid #ebebeb;
  border-bottom: 0.0625rem solid #ebebeb;
  padding: 2.5rem 1.875rem;
}
.single-post .share-tag .post-share, .single-post .share-tag .post-tag {
  float: left;
}
.single-post .share-tag .post-share h4, .single-post .share-tag .post-tag h4 {
  display: inline-block;
  font-size: 1.125rem;
  color: #7a7a7a;
  margin-right: 0.3125rem;
  text-transform: capitalize;
  margin-bottom: 0;
}
.single-post .share-tag .post-share ul, .single-post .share-tag .post-tag ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
}
.single-post .share-tag .post-share ul li, .single-post .share-tag .post-tag ul li {
  display: inline-block;
  margin: 0 0.25rem;
}
.single-post .share-tag .post-share ul li a, .single-post .share-tag .post-tag ul li a {
  color: #cacaca;
  font-size: 1.25rem;
}
.single-post .share-tag .post-share ul li a:hover, .single-post .share-tag .post-tag ul li a:hover {
  color: #ffba00;
}
.single-post .share-tag .post-tag {
  float: right;
}
.single-post .share-tag .post-tag h4 {
  margin: 0;
}
.single-post .share-tag .post-tag a {
  color: #7a7a7a;
  margin: 0 0.3125rem;
}
.single-post .share-tag .post-tag a:hover {
  color: #ffba00;
}

/* =========================================
12.2 Comment Area 
===========================================*/
.comment-title {
  font-size: 1.125rem;
  font-weight: 700;
  border-bottom: 0.0625rem solid #ebebeb;
}
.comment-title span {
  background: #000d5e;
  width: 2.3125rem;
  height: 1.625rem;
  display: inline-table;
  color: #fff;
  margin-right: 0.625rem;
  text-align: center;
  font-size: 0.9375rem;
}
.comment-title span i {
  display: table-cell;
  vertical-align: middle;
}

.post-comments .comments-wrap {
  margin-top: 2.8125rem;
  list-style: none;
  padding: 0;
}
.post-comments .comments-wrap li {
  margin-bottom: 2.8125rem;
}
.post-comments .comments-wrap li .comment-body .comment-img {
  float: left;
}
.post-comments .comments-wrap li .comment-body .comment-img img {
  width: 5.1875rem;
  height: 5.1875rem;
  border-radius: 50%;
}
.post-comments .comments-wrap li .comment-body .comment-text {
  margin-left: 6.5625rem;
}
.post-comments .comments-wrap li .comment-body .comment-text h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.625rem;
}
.post-comments .comments-wrap li .comment-body .comment-text p {
  margin-bottom: 0.3125rem;
}
.post-comments .comments-wrap li .comment-body .comment-text a {
  font-size: 0.875rem;
  text-transform: capitalize;
}
.post-comments .comments-wrap li .comment-body .comment-text a i {
  margin-right: 0.3125rem;
}
.post-comments .comments-wrap li ol.child {
  margin: 0;
  padding: 1.875rem 0 0 5.3125rem;
  list-style: none;
}

.leave-comment {
  position: relative;
  z-index: 2;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .leave-comment {
    margin: 3.75rem 0;
  }
}
@media only screen and (max-width: 767px) {
  .leave-comment {
    margin: 3.75rem 0;
  }
}
.leave-comment .comment-box {
  margin-top: 2.8125rem;
}
.leave-comment .comment-box .form-group {
  width: 100%;
  margin-bottom: 1.875rem;
}
.leave-comment .comment-box .form-group input,
.leave-comment .comment-box .form-group textarea {
  width: 100%;
  border: none;
  background: #fff;
  font-weight: 500;
  padding: 0.625rem 1.5625rem;
  border-radius: 1.875rem;
  -webkit-box-shadow: 0rem 0rem 1.25rem 0rem rgba(0, 0, 0, 0.08);
  -moz-box-shadow: 0rem 0rem 1.25rem 0rem rgba(0, 0, 0, 0.08);
  box-shadow: 0rem 0rem 1.25rem 0rem rgba(0, 0, 0, 0.08);
}
.leave-comment .comment-box .form-group textarea {
  min-height: 9.375rem;
}
.leave-comment .comment-box .form-group ::-webkit-input-placeholder {
  color: #7a7a7a;
}
.leave-comment .comment-box .form-group :-moz-placeholder {
  color: #7a7a7a;
}
.leave-comment .comment-box .form-group ::-moz-placeholder {
  color: #7a7a7a;
}
.leave-comment .comment-box .form-group :-ms-input-placeholder {
  color: #7a7a7a;
}
.leave-comment .comment-box .half-group {
  width: 30.5%;
  float: left;
  margin-right: 1.875rem;
}
@media only screen and (max-width: 767px) {
  .leave-comment .comment-box .half-group {
    width: 100%;
  }
}
.leave-comment .comment-box .form-group.half-group + .half-group + .half-group {
  margin: 0;
  float: right;
}
@media only screen and (max-width: 767px) {
  .leave-comment .comment-box .form-group.half-group + .half-group + .half-group {
    margin-bottom: 1.875rem;
  }
}
.leave-comment .comment-box .custom-btn {
  background: #000d5e;
  border: none;
  cursor: pointer;
  padding: 0.8125rem 3.125rem;
}
.leave-comment .comment-box .custom-btn i {
  margin-right: 0.3125rem;
}
.leave-comment .comment-box .custom-btn:hover {
  background: #ffba00;
}

/* ====================================          End Of CSS             ====================================== */

/*# sourceMappingURL=style.css.map */