/* =======================================================
    Template Name: Appsrow - App Landing Page HTML Template
    Developed By: Md Tariqul Islam

/* ============================================
    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: 15px;
  line-height: 24px;
  color: #020351;
  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; }
  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 15px; }

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

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

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: 100px 0; }
  @media only screen and (max-width: 767px) {
    .section-padding {
      padding: 50px 0; } }

.padding0 {
  padding: 0; }

.section-intro, .about-intro {
  max-width: 460px;
  margin: 0 auto 55px;
  text-align: center; 
}
.section-title-1{
  padding-top: 60px;
  font-size: 36px;
  font-weight: 700;
  color: #fff;
}
.section-title, .promo-area .promo-txt .promo-title,
.promo-area .promo-search .promo-title {
  font-size: 36px;
  font-weight: 700;
  padding-top: 60px;
  color: #eb1689; }
  @media only screen and (max-width: 767px) {
    .section-title, .promo-area .promo-txt .promo-title,
    .promo-area .promo-search .promo-title {
      font-size: 28px; } }

.section-intro p, .about-intro p {
  color: #fff;
  font-size: 16px;
  font-weight: 500; }
  @media only screen and (max-width: 767px) {
    .section-intro p, .about-intro p{
      font-size: 15px; } }



.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
=============================================*/
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f7f7f7;
  z-index: 999999; }

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

.preloader span {
  position: absolute;
  display: inline-block;
  width: 50px;
  height: 50px;
  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: 15px; }
      .menu-area .navbar button span {
        color: #fff; } }
  .menu-area .navbar::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    content: "";
    background: #fff;
    opacity: 0.5;
    z-index: -1;
  }
  .menu-area .navbar .navbar-brand {
    margin: 0;
    height: 35px; }
    .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: 30px; } }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        .menu-area .navbar .navbar-brand img {
          height: 17px; } }
      @media only screen and (max-width: 767px) {
        .menu-area .navbar .navbar-brand img {
          height: 28px; } }
  .menu-area .navbar .navbar-nav {
    padding-right: 15px; }
    @media only screen and (max-width: 767px) {
      .menu-area .navbar .navbar-nav {
        padding: 30px 0 0; } }
    .menu-area .navbar .navbar-nav li {
      display: inline-block; }
      .menu-area .navbar .navbar-nav li a.nav-link {
        padding: 38px 10px;
        /*color: #fff;*/
        font-weight: 700;
        font-size: 18px;
        color:#2c2c49;
        -webkit-transition: all 0.4s ease;
        -moz-transition: all 0.4s ease;
        -o-transition: all 0.4s ease;
        transition: all 0.4s ease; }
        .menu-area .navbar .navbar-nav li a.nav-link.active, .menu-area .navbar .navbar-nav li a.nav-link:hover {
          color:#020351; 
          text-shadow:0 7.35px 15.896px #f056a73b, 0 -2px 1px #fafafa26;
        }
        @media only screen and (min-width: 992px) and (max-width: 1200px) {
          .menu-area .navbar .navbar-nav li a.nav-link {
            padding: 38px 6px;
            font-size: 15px; } }
        @media only screen and (min-width: 768px) and (max-width: 991px) {
          .menu-area .navbar .navbar-nav li a.nav-link {
            padding: 30px 3px;
            font-size: 12.5px; } }
        @media only screen and (max-width: 767px) {
          .menu-area .navbar .navbar-nav li a.nav-link {
            padding: 12px; } }
  .menu-area .navbar .custom-btn {
    background: #eb1b89;
    color: #fff; }

    @media only screen and (min-width: 992px) and (max-width: 1200px) {
      .custom-btn{
        padding: 11px 40px;
      }
      
    }

    .custom-btn{
      display: inline-block;
      border-radius: 100px;
      font-weight: 700;
      text-transform: capitalize;
      transition: all 0.4s ease;
      padding: 10px 40px;
      background: #eb1689;
      color: #fff;
    }
    .pull-right{
      float: right;
    }

.sticky .navbar::before {
  background: #fff;
  opacity: 1.95;
  box-shadow: 0px 15px 10px -15px #111;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
  filter: alpha(opacity=95); }
.sticky .navbar .navbar-nav li a.nav-link {
  padding: 25px 10px;
  -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: 25px 6px;
      font-size: 15px; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .sticky .navbar .navbar-nav li a.nav-link {
      padding: 20px 3px;
      font-size: 12.5px; } }
  @media only screen and (max-width: 767px) {
    .sticky .navbar .navbar-nav li a.nav-link {
      padding: 12px; } }
.sticky .navbar-brand img {
  height: 30px;
  padding: 2px;
  -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: url("../images/components/image-bg.jpg") no-repeat center center/cover;
  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: 0px;
    content: "";
    width: 100%;
    height: 100%;
    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: -2px; } }
    @media only screen and (min-width: 992px) and (max-width: 1200px) {
      .banner-area::before {
        bottom: -115px; } }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .banner-area::before {
        bottom: -145px; } }
    @media only screen and (max-width: 767px) {
      .banner-area::before {
        bottom: -185px; } }
  .banner-area::after {
    position: absolute;
    content: "";
    background: #2e2c7cfa;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
    opacity: 0.95;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
    filter: alpha(opacity=95); }
  .banner-area .banner-device {
    padding-top:230px; }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .banner-area .banner-device {
        padding-top: 195px; } }
    @media only screen and (max-width: 767px) {
      .banner-area .banner-device {
        display: none; } }
  .banner-area .banner-txt {
    padding: 160px 0 100px;
    margin-left: 60px; }
    @media only screen and (min-width: 1750px) and (max-width: 1920px) {
      .banner-area .banner-txt {
        padding: 220px 0 100px; } }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .banner-area .banner-txt {
        margin: 0;
        padding: 215px 0 100px; } }
    @media only screen and (max-width: 767px) {
      .banner-area .banner-txt {
        margin: 0;
        padding: 170px 0 100px; } }
    .banner-area .banner-txt .banner-intro {
      max-width: 586px;
      margin-left: 45px; }
      @media only screen and (max-width: 767px) {
        .banner-area .banner-txt .banner-intro {
          margin: 0; } }
      .banner-area .banner-txt .banner-intro .banner-title {
        color: rgb(255, 255, 255);
        line-height: 45px;
        font-size: 36px;
        margin-bottom: 20px; }
        @media only screen and (min-width: 768px) and (max-width: 991px) {
          .banner-area .banner-txt .banner-intro .banner-title {
            font-size: 32px; } }
        @media only screen and (max-width: 767px) {
          .banner-area .banner-txt .banner-intro .banner-title {
            font-size: 31px;
            line-height: 36px; } }
        .banner-area .banner-txt .banner-intro .banner-title span {
          color: #eb1b89; }
      .banner-area .banner-txt .banner-intro p {
        color: #fff;
        text-align: justify;
        font-weight: 500; }
    .banner-area .banner-txt .app-media {
      margin-top: 30px;
          margin-left: 40px; }
      @media only screen and (min-width: 1750px) and (max-width: 1920px) {
        .banner-area .banner-txt .app-media {
          margin-top: 65px; } }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        .banner-area .banner-txt .app-media {
          margin-left: 20px;
          margin-top: 60px; } }
      .banner-area .banner-txt .app-media .single-media {
        float: left;
        width: 33.33%;
        margin-bottom: 30px; }
        .banner-area .banner-txt .app-media .single-media a {
          width: 121px;
          height: 121px;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          -ms-border-radius: 50%;
          border-radius: 50%;
          text-align: center;
          display: table;
          background: #fff;
          margin-bottom: 15px;
          margin-left: 22px;
          -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2);
          -moz-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2); }
          .banner-area .banner-txt .app-media .single-media a i {
            color: #eb1b89;
            font-size: 40px;
            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: 30px; } }
            @media only screen and (max-width: 767px) {
              .banner-area .banner-txt .app-media .single-media a i {
                font-size: 25px; } }
          @media only screen and (min-width: 768px) and (max-width: 991px) {
            .banner-area .banner-txt .app-media .single-media a {
              width: 100px;
              height: 100px; } }
          @media only screen and (max-width: 767px) {
            .banner-area .banner-txt .app-media .single-media a {
              width: 80px;
              height: 80px; } }
          @media only screen and (min-width: 480px) and (max-width: 767px) {
            .banner-area .banner-txt .app-media .single-media a {
              width: 100px;
              height: 100px; } }
          .banner-area .banner-txt .app-media .single-media a:hover {
            -webkit-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.3);
            -moz-box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.3);
            box-shadow: 0px 0px 50px 0px rgba(66, 66, 66, 0.3); }
        .banner-area .banner-txt .app-media .single-media p {
          font-weight: 700;
          font-size: 18px;
          line-height: 27px;
          max-width: 160px; }
          @media only screen and (min-width: 768px) and (max-width: 991px) {
            .banner-area .banner-txt .app-media .single-media p {
              font-size: 16px; } }
          @media only screen and (max-width: 767px) {
            .banner-area .banner-txt .app-media .single-media p {
              font-size: 14px;
              line-height: 1.1; } }
      .banner-area .banner-txt .app-media .single-media:nth-child(2) {
        /*margin-top: 24px;*/
        padding-left: 15px; }
        @media only screen and (min-width: 768px) and (max-width: 991px) {
          .banner-area .banner-txt .app-media .single-media:nth-child(2) {
            margin-top: 20px; } }
        @media only screen and (max-width: 767px) {
          .banner-area .banner-txt .app-media .single-media:nth-child(2) {
            margin-top: 13px;
            padding-left: 13px; } }
      .banner-area .banner-txt .app-media .single-media:nth-child(3) {
        /*margin-top: 62px;*/
        padding-left: 25px; }
        @media only screen and (min-width: 992px) and (max-width: 1200px) {
          .banner-area .banner-txt .app-media .single-media:nth-child(3) {
            margin-top: 0px; } }
        @media only screen and (min-width: 768px) and (max-width: 991px) {
          .banner-area .banner-txt .app-media .single-media:nth-child(3) {
            margin-top: 40px;
            padding-left: 30px; } }
        @media only screen and (max-width: 767px) {
          .banner-area .banner-txt .app-media .single-media:nth-child(3) {
            margin-top: 30px; } }

.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: 100px;
    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: .75; }
  25% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: .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: .75; }
  25% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: .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: 0px; }
.home-2 .banner-txt .app-media .single-media:nth-child(1) {
  margin-top: 65px; }
  @media only screen and (max-width: 767px) {
    .home-2 .banner-txt .app-media .single-media:nth-child(1) {
      margin-top: 25px; } }

/* =====================================
3.2 Banner Area Home-3
========================================*/
.home-3::before {
  background: url("../images/components/home-3.png") no-repeat;
  background-position: center bottom;
  bottom: -70px; }
  @media only screen and (min-width: 1750px) and (max-width: 1920px) {
    .home-3::before {
      bottom: -2px; } }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .home-3::before {
      bottom: -190px; } }
  @media only screen and (max-width: 767px) {
    .home-3::before {
      bottom: -235px; } }
.home-3 .banner-txt .app-media {
  margin-top: 70px;
  margin-left: 40px; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .home-3 .banner-txt .app-media {
      margin-top: 50px; } }
  @media only screen and (max-width: 767px) {
    .home-3 .banner-txt .app-media {
      margin-top: 50px;
      margin-left: 0; } }
  @media only screen and (min-width: 1750px) and (max-width: 1920px) {
    .home-3 .banner-txt .app-media {
      margin-top: 35px; } }
  .home-3 .banner-txt .app-media .single-media:nth-child(3) {
    margin-top: 0px; }
  .home-3 .banner-txt .app-media .single-media:nth-child(2) {
    margin-top: 0px; }

/* =====================================
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: -100px; } }
.home-4 .banner-txt {
  margin-left: 70px;
  margin-top: 5px; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .home-4 .banner-txt {
      padding: 190px 0 100px;
      margin-left: 50px; } }
  @media only screen and (max-width: 767px) {
    .home-4 .banner-txt {
      padding: 140px 0 100px;
      margin-left: 0px; } }
  .home-4 .banner-txt .banner-intro {
    margin: 0; }
  .home-4 .banner-txt .app-media .single-media:nth-child(3) {
    margin-top: 0px; }
  .home-4 .banner-txt .app-media .single-media:nth-child(2) {
    margin-top: 0px; }

/* =====================================
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: 768px) and (max-width: 991px) {
    .home-5::before {
      bottom: -90px; } }
  @media only screen and (max-width: 767px) {
    .home-5::before {
      bottom: -80px; } }

/* =====================================
3.4 Banner Area Home-6
========================================*/
.img-banner {
  position: relative;
  z-index: 1;
  background: url("../images/banner-bg.html") no-repeat center center/cover; }
  .img-banner::after {
    background: linear-gradient(34deg, #341e97 0%, #341e97 1%, #5f27cd 100%);
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    position: absolute;
    height: 100%;
    z-index: -1; }

/* ============================================
4. Choose Area
===============================================*/
.choose-area {
  padding-top: 160px; }
  @media only screen and (max-width: 767px) {
    .choose-area {
      padding-top: 100px; } }
  .choose-area .single-use {
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 40px 23px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0px 0px 35px 0px rgba(0, 1, 1, 0.15);
    -moz-box-shadow: 0px 0px 35px 0px rgba(0, 1, 1, 0.15);
    box-shadow: 0px 0px 35px 0px rgba(0, 1, 1, 0.15); }
    @media only screen and (min-width: 992px) and (max-width: 1200px) {
      .choose-area .single-use {
        padding: 20px 14px; } }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .choose-area .single-use {
        padding: 30px 30px; } }
    .choose-area .single-use i {
      color: #eb1b89;
      font-size: 36px; }
    .choose-area .single-use h4 {
      margin: 15px 0;
      font-weight: 700;
      color: #7a7a7a; }
    .choose-area .single-use::after {
      position: absolute;
      left: -30px;
      top: 35%;
      content: "";
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      border-radius: 50%;
      width: 7px;
      height: 7px;
      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: -26px;
      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: -18px; } }
      @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: 48px;
    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: 10px;
    left: -145%;
    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: -19px;
    top: 38%; }

.version-1 .section-intro{
  text-align: left;
  margin: inherit;
  padding-top: 260px;
  left: -66%;
    top: 0;
    width: 780px;
    height: 780px;
    background: #020351;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    border-radius: 50%;
 }
  .version-1 .section-intro p{
    font-size: 15px;
    font-weight: 400;
    margin-bottom: 45px; 
    color: #eb1689;
  }
  @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 45px; } }
  .version-1 .section-intro .custom-btn{
    padding: 11px 37px; }
  .version-1 .section-intro::before{
    left: -66%;
    top: 0;
    width: 780px;
    height: 780px;
    background: #020351;
    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 45px; } }
.version-1 .single-use,
.version-1 .sp {
  position: relative;
  z-index: 1; }
.version-1 div > .single-use:nth-child(1) {
  margin-bottom: 30px; }
.version-1 div:nth-child(2) div:nth-child(2) .single-use:nth-child(1) {
  margin-top: 88px; }
  @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: 30px; } }
  @media only screen and (max-width: 767px) {
    .version-1 div:nth-child(2) div:nth-child(2) .single-use:nth-child(1) {
      margin-top: 30px; } }

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

/* ============================================
5. Work Area
===============================================*/

  .work-area .blue-bg {
    position: relative;
    padding: 75px 0 100px;
    z-index: 1;
    max-width: 510px; }
    @media only screen and (min-width: 480px) and (max-width: 767px) {
      .work-area .blue-bg {
        max-width: 380px; } }
    .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: -15px;
          top: -15px;
          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: 10px; } }
    .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: 430px;
      margin: 0 auto;
      color: #abaebd; }
      @media only screen and (max-width: 767px) {
        .work-area .blue-bg p, .admin-area{
          max-width: 280px; } }
      @media only screen and (min-width: 480px) and (max-width: 767px) {
        .work-area .blue-bg p, .admin-area{
          max-width: 430px; } }
  .work-area .single-work, .admin-work {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0px 0px 35px 0px rgba(0, 1, 1, 0.15);
    -moz-box-shadow: 0px 0px 35px 0px rgba(0, 1, 1, 0.15);
    box-shadow: 0px 0px 35px 0px rgba(0, 1, 1, 0.15);
    background: #fff;
    padding: 50px 20px 50px 20px;
    position: relative;
    max-width: 315px;
    margin: 0px 0 0 30px;
    -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, .admin-work, .admin-area{
        max-width: auto;
        margin: 0; } }
    @media only screen and (max-width: 767px) {
      .work-area .single-work, .admin-work, .admin-area {
        max-width: 100%;
        margin: 0; } }
    .work-area .single-work h4, .admin-work h4, .admin-area{
      color: #7a7a7a; }
    .work-area .single-work span, .admin-work span{
      position: absolute;
      left: 10px;
      top: -12px;
      font-size: 100px;
      font-weight: 700;
      opacity: 0.6;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
      filter: alpha(opacity=60); }
    .work-area .single-work p, .admin-work p, .admin-area {
      font-size: 15px;
      text-align: justify; }
   
  .work-area .row div:nth-child(1) span, .admin-area .row div:nth-child(1) span{
    color: #4dc2ff; }
  .work-area .row div:nth-child(2) span, .admin-area .row div:nth-child(2) span{
    color: #ff7fe5; }
  .work-area .row div:nth-child(3) span, .admin-area .row div:nth-child(3) span {
    color: #878aee; }
  .work-area .row div:nth-child(2) .single-work, .admin-area .row div:nth-child(2) .admin-work {
    margin-top: 85px; }
    @media only screen and (max-width: 767px) {
      .work-area .row div:nth-child(2) .single-work, .admin-area .row div:nth-child(2) .admin-work{
        margin-bottom: 85px; } }

/* ============================================
6. Screenshot Area
===============================================*/
.screenshot-area, .work-area{
  padding: 0px 0;
  margin-bottom: 2px;
  margin-top: 10px;
}
  @media only screen and (max-width: 767px) {
    .screenshot-area, .work-area {
      padding: 50px 0; } }
  .screenshot-area .swiper-container, .work-area{
    width: 100%;
    height: 100%;
    margin-top: 100px;
    padding-bottom: 80px; }
    .screenshot-area .swiper-container .swiper-wrapper .swiper-slide, .work-area{
      width: 360px;
      height: auto;
      padding: 0 10px;
      z-index: auto; }
      .screenshot-area .swiper-container .swiper-wrapper .swiper-slide .slider-image .preview-icon, .work-area {
        z-index: -1;
        width: calc(100% - 30px); }

.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: 20px;
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  width: 20px; }

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

  
/* ============================================
7. Review Area
===============================================*/
.review-area {
  margin-top: 100px;
  background: linear-gradient( 134deg, rgb(103 12 106) 35%, rgb(191 19 127) 75%) !important;
  padding: 70px 0 85px; }
  @media only screen and (max-width: 767px) {
    .review-area {
      padding: 50px 0; } }
 }
  .review-area::after {
    position: absolute;
    right: 0;
    content: ""; }
  .review-area .section-intro{
    max-width: 525px; }
  .review-area .owl-item {
    padding: 15px; }
  .review-area .owl-nav div {
    position: absolute;
    left: -7%;
    top: 50%;
    font-size: 16px;
    color: #7a7a7a; }
    .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: -7px; } }
    @media only screen and (max-width: 767px) {
      .review-area .owl-nav div {
        left: -7px; } }
  .review-area .single-review {
    background: #fff;
    padding: 45px 0 70px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    border-radius: 2px;
    -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: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
    text-align: center; }
    .review-area .single-review:hover {
      -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
      -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15); }
    .review-area .single-review .reviewer-img {
      max-width: 100px;
      margin: 0 auto; }
      .review-area .single-review .reviewer-img img {
        width: 100px !important;
        height: 100px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        border-radius: 50%; }
    .review-area .single-review p {
      max-width: 440px;
      margin: 30px auto 30px; }
      @media only screen and (min-width: 992px) and (max-width: 1200px) {
        .review-area .single-review p {
          max-width: 325px; } }
      @media only screen and (min-width: 768px) and (max-width: 991px) {
        .review-area .single-review p {
          max-width: 233px; } }
      @media only screen and (max-width: 767px) {
        .review-area .single-review p {
          max-width: 210px; } }

@media only screen and (min-width: 992px) and (max-width: 1200px) {
  .review-wrap {
    max-width: 830px;
    margin: 0 auto; } }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .review-wrap {
    max-width: 600px;
    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: #000d5e; }
  .down-load-area .section-intro {
    max-width: 510px; }
    .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,
    .down-load-area .section-intro p{
      color: #fff; }
    .down-load-area .section-intro P{
      color: #abaebd;
      font-weight: 500; }
  .down-load-area .download-wrap {
    max-width: 835px;
    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: 20px; } }
      .down-load-area .download-wrap .single-option a {
        display: inline-block;
        padding: 10px 24px 13px 24px;
        background: #eb1b89;
        border: 3px solid #810e4b;
        -webkit-border-radius: 100px;
        -moz-border-radius: 100px;
        -ms-border-radius: 100px;
        border-radius: 100px; }
        .down-load-area .download-wrap .single-option a:hover {
          background: #273442; }
        .down-load-area .download-wrap .single-option a i {
          color: #8393ca;
          font-size: 40px;
          float: left; }
        .down-load-area .download-wrap .single-option a .optino-txt {
          margin-left: 50px;
          text-align: left;
          margin-top: -5px; }
          .down-load-area .download-wrap .single-option a .optino-txt span {
            font-size: 16px;
            font-weight: 500;
            color: #fff; }
            @media only screen and (min-width: 768px) and (max-width: 991px) {
              .down-load-area .download-wrap .single-option a .optino-txt span {
                font-size: 14px; } }
          .down-load-area .download-wrap .single-option a .optino-txt h4 {
            font-size: 22px;
            color: #fff;
            margin-bottom: 0;
            line-height: 20px; }

/* ============================================
9. Subscribe Area
===============================================*/
.subscribe-area .section-intro {
  max-width: 650px; }
  .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: #020351;
    font-weight: 500;
    margin-top: 20px; }
.subscribe-area .subscribe {
  max-width: 550px;
  margin: 0 auto;
  position: relative;
  z-index: 3; }
  .subscribe-area .subscribe input {
    border: 3px solid #810e4b;
    color: #020351;
    font-weight: 500;
    width: 100%;
    border-radius: 100px;
    padding: 15px 30px; }
  .subscribe-area .subscribe ::-webkit-input-placeholder {
    color: #020351; }
  .subscribe-area .subscribe :-moz-placeholder {
    color: #020351; }
  .subscribe-area .subscribe ::-moz-placeholder {
    color: #020351; }
  .subscribe-area .subscribe :-ms-input-placeholder {
    color: #020351; }
  .subscribe-area .subscribe .custom-btn {
    position: absolute;
    right: 3px;
    border: none;
    padding: 15px 25px;
    top: 3px;
    font-size: 18px; }

/* ============================================
9.1 FAQ Area
===============================================*/
.faq-area .section-intro {
  max-width: 580px; }
.faq-area .panel-group .panel {
  background: transparent;
  margin-bottom: 30px; }
  .faq-area .panel-group .panel .panel-title {
    font-size: 20px;
    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: 17px 15px 17px 20px;
      position: relative; }
      .faq-area .panel-group .panel .panel-title a::after {
        color: #fff;
        content: "\f056";
        font-family: fontawesome;
        font-size: 20px;
        right: 26px;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 2; }
      .faq-area .panel-group .panel .panel-title a.collapsed::after {
        content: "\f055"; }
  .faq-area .panel-group .panel .panel-body {
    padding: 25px 10px 30px 20px;
    border: 1px 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: 80px 0 40px; } }
  .fun-area::before {
    background: #000d5e;
    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: 45px; } }
    .fun-area .single-fun span.counter {
      display: block;
      font-size: 48px;
      font-weight: 700;
      color: #eb1b89;
      padding: 40px 0 25px; }
    .fun-area .single-fun p {
      color: #eb1b89;
      font-weight: 700;
      font-size: 20px; }

/* ============================================
9.3 Blog Area
===============================================*/
.blog-area {
  padding-bottom: 70px; }
  .blog-area .blog-bg-2, .screenshot-area  .screenshot-bg-2,.work-area .website-bg-2{
    background: url("../images/components/blog-bg2.jpg") no-repeat center center/cover;
    max-width: 100%;
    padding: 5px 0;
    margin-bottom: 60px;
    margin-top: 50px;
    background: linear-gradient( 134deg, rgb(103 12 106) 35%, rgb(191 19 127) 75%) !important;
  }
    .blog-area .blog-bg-2::before, .screenshot-area  .screenshot-bg-2::before, .about-bg-2::before, .website-bg-2::before{
      background: #020351;
      opacity: 0.7;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
      filter: alpha(opacity=70); }
    .blog-area .blog-bg-2 .section-intro {
      max-width: 610px;
      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: #eb1b89; }

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

/* ============================================
9.5 Contact Area
===============================================*/

body {
  background-color: #9fc4fb
}

.container-fluid {
  max-width: 100%;
  background: linear-gradient( 134deg, rgb(103 12 106) 35%, rgb(191 19 127) 75%) !important;
    }


.msg-form {
  background-color: white;
  padding: 20px
}

.pad-icon {
  padding-top: 20px;
  margin-left: 10px;
}

.pad-icon a {
  text-decoration: none;
  margin-right: 15px;
}

.input-group input:focus {
  border: 1px solid #020351
}

.pad-icon a:active {
  height: 30px;
  width: 30px;
  background-color: #020351;
  border-radius: 100%
}
.text-white h3{
  font-size: 25px;
}
.text-white .links a{
  font-size: 18px;
}

.links {
  padding-top: 10px;
  width: 50%
}

#bordering a:active {
  border: 1px solid #0080ff
}

@media(min-width:568px) {
  .container-fluid {
      width: 100%;
      padding-top: 50px;
      padding-bottom: 50px
  }
}

@media(max-width:567px) {
  .container-fluid {
      margin: 10px 10px;
      width: 94%;
      padding-top: 20px;
  }

  .pad {
      padding-top: 20px
  }
}

/* ============================================
10. Footer Area
===============================================*/

  @media only screen and (max-width: 767px) {
    .footer-area .footer-top .footer-widget {
      margin-bottom: 45px; } }
  .footer-area .footer-top .footer-widget .widget-title {
    color: #fff;
    font-size: 22px;
    margin-bottom: 25px;
    text-transform: capitalize;
    font-weight: 700; }
  .footer-area .footer-top .footer-widget ul li {
    line-height: 30px;
    font-weight: 500; }
    .footer-area .footer-top .footer-widget ul li i {
      float: left;
      font-size: 16px;
      color: #fff;
      margin-top: 5px; }
    .footer-area .footer-top .footer-widget ul li a {
      color: #fff;
      font-weight: 500; }
    .footer-area .footer-top .footer-widget ul li:hover a {
      color: #eb1b89; }
  .footer-area .footer-top .footer-widget .contact-info li {
    line-height: inherit;
    margin-bottom: 15px; }
    .footer-area .footer-top .footer-widget .contact-info li a,
    .footer-area .footer-top .footer-widget .contact-info li span {
      display: block;
      margin-left: 30px;
      color: #fff; }
  .footer-area .footer-bottom {
    padding: 20px;
    background: linear-gradient(134deg, rgb(160 16 119) 35%, rgb(235 22 137) 75%) !important;
      border-top: 1px solid #fff;
   }
    .footer-area .footer-bottom p {
      margin: 0;
      font-weight: 700;
      color: #fff; }
    .footer-area .footer-bottom a {
      color: #fff;
      opacity: 0.5;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
      filter: alpha(opacity=50);
      margin: 0 10px;
      font-size: 18px; }
      .footer-area .footer-bottom a:hover {
        color: #fff;
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100); }

/* ============================================
11. Blog Page
===============================================*/
main {
  padding: 50px 0 40px;
 }

.promo-area {
  background: url("../images/components/promobg.html") no-repeat center right/cover;
  padding: 100px 0 145px;
  background-attachment: fixed; }
  @media only screen and (max-width: 767px) {
    .promo-area {
      padding: 100px 0; } }
  .promo-area::before {
    background: -webkit-linear-gradient(304deg, #34495d 0%, #3f556b 100%);
    background: -o-linear-gradient(304deg, #34495d 0%, #3f556b 100%);
    background: linear-gradient(146deg, #34495d 0%, #3f556b 100%);
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
    -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
    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: 130px; }
    @media only screen and (max-width: 767px) {
      .promo-area .promo-txt,
      .promo-area .promo-search {
        padding-top: 30px; } }
    .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: 30px; } }
      @media only screen and (max-width: 767px) {
        .promo-area .promo-txt .promo-title,
        .promo-area .promo-search .promo-title {
          font-size: 26px; } }
    .promo-area .promo-txt .breadcrumb,
    .promo-area .promo-search .breadcrumb {
      background: transparent;
      border-radius: 0;
      padding: 10px 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: 360px;
      margin: 25px 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: 285px; } }
      @media only screen and (max-width: 767px) {
        .promo-area .promo-txt form,
        .promo-area .promo-search form {
          min-width: 200px; } }
      .promo-area .promo-txt form::after,
      .promo-area .promo-search form::after {
        position: absolute;
        right: 30px;
        top: 15px;
        font-size: 18px;
        color: #fff;
        content: "\f002";
        font-family: fontawesome; }
      .promo-area .promo-txt form input,
      .promo-area .promo-search form input {
        background: #344658;
        padding: 16px 40px;
        border: 0 none;
        border-radius: 50px;
        width: 100%; }
      .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: 30px; }
  .single-article figure {
    margin: 0; }
    .single-article figure img {
      height: 220px;
      width: 100%; }
  .single-article .blog-txt {
    padding: 25px 20px 35px 20px;
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 1, 1, 0.1);
    -moz-box-shadow: 0px 0px 30px 0px rgba(0, 1, 1, 0.1);
    box-shadow: 0px 0px 30px 0px 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: 3px; }
      .single-article .blog-txt .blog-meta i {
        margin-right: 10px; }
      .single-article .blog-txt .blog-meta a {
        color: #9c9797;
        text-decoration: underline; }
    .single-article .blog-txt .blog-title {
      font-size: 18px;
      font-weight: 700;
      line-height: 27px; }
    .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; }
      .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: 5px; }
  .single-article:hover .blog-txt {
    -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 1, 1, 0.2);
    -moz-box-shadow: 0px 0px 30px 0px rgba(0, 1, 1, 0.2);
    box-shadow: 0px 0px 30px 0px rgba(0, 1, 1, 0.2); }
  .single-article:hover .blog-title a {
    color: #ffba00; }

.single-article.big-article img {
  height: 400px; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .single-article.big-article img {
      height: 220px; } }
  @media only screen and (max-width: 767px) {
    .single-article.big-article img {
      height: 220px; } }
.single-article.big-article .blog-txt {
  padding: 30px 35px; }

/* Pagination Nav*/
.pagination-wrap {
  text-align: center;
  position: relative;
  z-index: 3; }
  .pagination-wrap nav .pagination {
    margin: 30px 0 0; }
    @media only screen and (max-width: 767px) {
      .pagination-wrap nav .pagination {
        margin: 30px 0; } }
    @media only screen and (min-width: 768px) and (max-width: 991px) {
      .pagination-wrap nav .pagination {
        margin: 30px 0; } }
    .pagination-wrap nav .pagination li.page-item {
      display: inline-block;
      margin: 0 5px;
      font-weight: 600; }
      @media only screen and (max-width: 767px) {
        .pagination-wrap nav .pagination li.page-item {
          margin: 0 2px; } }
      .pagination-wrap nav .pagination li.page-item:first-child a, .pagination-wrap nav .pagination li.page-item:last-child a {
        border-radius: 30px; }
      .pagination-wrap nav .pagination li.page-item.active a.page-link, .pagination-wrap nav .pagination li.page-item:hover a.page-link {
        background: #344658;
        color: #fff;
        box-shadow: 0 none; }
      .pagination-wrap nav .pagination li.page-item a.page-link {
        border: none;
        background: #ebebeb;
        color: #000d5e;
        border-radius: 30px;
        width: 50px;
        height: 34px; }
        @media only screen and (max-width: 767px) {
          .pagination-wrap nav .pagination li.page-item a.page-link {
            width: 40px;
            height: 30px;
            line-height: 10px; } }
        .pagination-wrap nav .pagination li.page-item a.page-link:focus {
          box-shadow: none; }

.big-article .pagination-wrap .pagination {
  margin: 60px 0 0; }

/* ==============================================
11.2 Sidebar Area
================================================*/
.sidebar .widget {
  padding: 30px 20px;
  -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 1, 1, 0.1);
  -moz-box-shadow: 0px 0px 30px 0px rgba(0, 1, 1, 0.1);
  box-shadow: 0px 0px 30px 0px rgba(0, 1, 1, 0.1);
  margin-bottom: 30px; }
  .sidebar .widget .widget-title {
    font-size: 18px;
    text-transform: capitalize;
    margin-bottom: 30px;
    position: relative;
    z-index: 1; }
    .sidebar .widget .widget-title::after {
      position: absolute;
      left: 0;
      top: 30px;
      content: "";
      background: #ebebeb;
      height: 1px;
      width: 100%;
      z-index: -1; }
  .sidebar .widget li {
    line-height: 48px;
    font-weight: 500; }
    .sidebar .widget li a {
      color: #7a7a7a; }
      .sidebar .widget li a:hover {
        color: #ffba00; }
.sidebar .trending-post .single-trend {
  margin-bottom: 28px; }
  .sidebar .trending-post .single-trend a {
    float: left; }
    .sidebar .trending-post .single-trend a img {
      height: 74px;
      width: 120px; }
  .sidebar .trending-post .single-trend .t-post-heading {
    margin-left: 130px; }
    .sidebar .trending-post .single-trend .t-post-heading h4 {
      font-size: 15px;
      line-height: 22px; }
      .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: 22px;
    position: relative;
    line-height: inherit; }
    .sidebar .follow-wrap li::after {
      position: absolute;
      right: -18px;
      top: 11px;
      content: "";
      background: #c6c6c6;
      height: 2px;
      width: 10px; }
    .sidebar .follow-wrap li a {
      font-size: 18px; }
    .sidebar .follow-wrap li:last-child::after {
      background: none; }

/* ===================================================
12. Single Blog Page
======================================================*/
.single-post {
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
  padding-bottom: 60px;
  margin-bottom: 60px; }
  .single-post figure {
    margin: 0; }
    .single-post figure img {
      height: 400px;
      width: 100%; }
      @media only screen and (max-width: 767px) {
        .single-post figure img {
          height: 220px; } }
  .single-post .article-details {
    padding: 25px 35px 30px; }
    @media only screen and (max-width: 767px) {
      .single-post .article-details {
        padding: 25px 15px 30px; } }
    .single-post .article-details .blog-meta {
      margin-bottom: 5px; }
      .single-post .article-details .blog-meta a {
        color: #9c9797;
        text-decoration: underline; }
        .single-post .article-details .blog-meta a i {
          margin-right: 5px; }
    .single-post .article-details .blog-title {
      font-size: 28px;
      margin-bottom: 20px; }
    .single-post .article-details p {
      margin-bottom: 25px; }
    .single-post .article-details blockquote {
      background: #f5f5f5;
      padding: 25px 30px; }
      .single-post .article-details blockquote p {
        font-size: 18px;
        line-height: 27px;
        margin: 0;
        font-weight: 500; }
  .single-post .share-tag {
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    padding: 40px 30px; }
    .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: 18px;
        color: #7a7a7a;
        margin-right: 5px;
        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 4px; }
          .single-post .share-tag .post-share ul li a, .single-post .share-tag .post-tag ul li a {
            color: #cacaca;
            font-size: 20px; }
    .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 5px; }

/* =========================================
12.2 Comment Area 
===========================================*/
.comment-title {
  font-size: 18px;
  font-weight: 700;
  border-bottom: 1px solid #ebebeb; }
  .comment-title span {
    background: #000d5e;
    width: 37px;
    height: 26px;
    display: inline-table;
    color: #fff;
    margin-right: 10px;
    text-align: center;
    font-size: 15px; }
    .comment-title span i {
      display: table-cell;
      vertical-align: middle; }

.post-comments .comments-wrap {
  margin-top: 45px;
  list-style: none;
  padding: 0; }
  .post-comments .comments-wrap li {
    margin-bottom: 45px; }
    .post-comments .comments-wrap li .comment-body .comment-img {
      float: left; }
      .post-comments .comments-wrap li .comment-body .comment-img img {
        width: 83px;
        height: 83px;
        border-radius: 50%; }
    .post-comments .comments-wrap li .comment-body .comment-text {
      margin-left: 105px; }
      .post-comments .comments-wrap li .comment-body .comment-text h4 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 10px; }
      .post-comments .comments-wrap li .comment-body .comment-text p {
        margin-bottom: 5px; }
      .post-comments .comments-wrap li .comment-body .comment-text a {
        font-size: 14px;
        text-transform: capitalize; }
        .post-comments .comments-wrap li .comment-body .comment-text a i {
          margin-right: 5px; }
    .post-comments .comments-wrap li ol.child {
      margin: 0;
      padding: 30px 0 0 85px;
      list-style: none; }

.leave-comment {
  position: relative;
  z-index: 2; }
  @media only screen and (min-width: 768px) and (max-width: 991px) {
    .leave-comment {
      margin: 60px 0; } }
  @media only screen and (max-width: 767px) {
    .leave-comment {
      margin: 60px 0; } }
  .leave-comment .comment-box {
    margin-top: 45px; }
    .leave-comment .comment-box .roup {
      width: 100%;
      margin-bottom: 30px; }
      .leave-comment .comment-box .form-group input,
      .leave-comment .comment-box .form-group textarea {
        width: 100%;
        border: none;
        background: #fff;
        font-weight: 500;
        padding: 10px 25px;
        border-radius: 30px;
        -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 1, 1, 0.1);
        -moz-box-shadow: 0px 0px 30px 0px rgba(0, 1, 1, 0.1);
        box-shadow: 0px 0px 30px 0px rgba(0, 1, 1, 0.1); }
      .leave-comment .comment-box .form-group textarea {
        height: 125px; }
      .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: 30px; }
      @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: 30px; } }
    .leave-comment .comment-box .custom-btn {
      background: #000d5e;
      border: none; }
      .leave-comment .comment-box .custom-btn i {
        margin-right: 5px; }

        .carousel-inner{
          width: 100%;
        }