/**
* Template Name: Vesperr - v4.9.1
* Template URL: https://bootstrapmade.com/vesperr-free-bootstrap-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/
/* start global, helper classes , Components Rules*/
:root {
    /*Colors CSS Varibales*/
    /*================  main-color values */
    --clr-main: #228cdb;
    --clr-main-rgb: 34, 140, 219;
    /*================  secondary-color values */
    --clr-secondary: #1ab45f;
    --clr-secondary-rgb: 26, 180, 95;
    /*================  white-color values */
    --clr-white: #fff;
    --clr-white-rgb: 255, 255, 255;
    /*================  dark-blue-color values */
    --clr-dark-blue: #11466e;
    --clr-dark-blue-rgb: 6, 9, 34;
    /*================  semi-dark-blue-color values */
    --clr-semi-dark-blue: #03396c;
    --clr-semi-dark-blue-rgb: 29, 51, 71;
}
/*--------------------------------------------------------------
# Fonts
--------------------------------------------------------------*/
@font-face {
    font-family: "Lexend-Bold";
    src: url(../fonts/Lexend-Bold.ttf);
}

@font-face {
    font-family: "Lexend";
    src: url(../fonts/Lexend-Regular.ttf);
}

@font-face {
    font-family: "Lexend-Light";
    src: url(../fonts/Lexend-Light.ttf);
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
    font-family: Lexend,"Open Sans", sans-serif;
    color:#000; /*#444444;*/
}
a {
  color: inherit; /*#3498db;*/
  text-decoration: none;
}

a:hover {
  color: #5faee3;
  text-decoration: none;
}

h1 {
    font-family: Lexend-Bold, sans-serif;
}

h2, h3 {
    font-family: Lexend-Light, sans-serif;
}

h3 {
    font-size: 1.2rem;
}

h4,
h5,
h6 {
    font-family: Lexend, sans-serif;
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: #3498db;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #57aae1;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable AOS delay on mobile
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
    z-index: 997;
    transition: all 0.5s;
    padding: 0 0 22px 0;
    background: #f7fbfe;
}

    #header.header-scrolled {
        box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
        padding: 0 0 12px 0;
        background: #fff;
    }
        /*#header.header-scrolled .navbar a {
        color:#555555;
        }*/

        #header .logo h1 {
            font-size: 30px;
            margin: 0;
            padding: 0;
            line-height: 1;
            font-weight: 700;
            letter-spacing: 1px;
        }

#header .logo h1 a,
#header .logo h1 a:hover {
  color: #222222;
  text-decoration: none;
}

#header .logo img {
  padding: 0;
  margin: 0;
  max-height: 30px;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  position: relative;
}

    .navbar a,
    .navbar a:focus {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 10px 30px 10px 0px;
        font-size: 15px;
        font-weight: 400;
        color: #11466e;
        white-space: nowrap;
        transition: 0.3s;
    }

.navbar a i,
.navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

    .navbar a:hover,
    .navbar .active,
    .navbar .active:focus,
    .navbar li:hover > a {
        font-family: Lexend;
        border-bottom: 3px solid;
    }

#header .getstarted,
#header .getstarted:focus {
    /*background: #fff;*/
    padding: 8px 25px;
    margin-left: 30px;
    border-radius: 30px;
    /*color: #3498db;*/
    border: none;
}

    #header .getstarted:hover,
    #header .getstarted:focus:hover {
        color: #fff;
        background: #4aa3df;
    }

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 30px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-radius: 4px;
}

.navbar .dropdown ul li {
  min-width: 200px;
}

    .navbar .dropdown ul a {
        padding: 10px 20px;
        font-size: 14px;
        color: #11466e;
    }

.navbar .dropdown ul a i {
  font-size: 12px;
}

        .navbar .dropdown ul a:hover,
        .navbar .dropdown ul .active:hover,
        .navbar .dropdown ul li:hover > a {
            color: #11466e;
        }

.navbar .dropdown:hover>ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.navbar .dropdown .dropdown:hover>ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }

  .navbar .dropdown .dropdown:hover>ul {
    left: -100%;
  }
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color: #222222;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

.mobile-nav-toggle.bi-x {
  color: #fff;
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }

  .navbar ul {
    display: none;
  }
}

.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(9, 9, 9, 0.9);
  transition: 0.3s;
  z-index: 999;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  border-radius: 8px;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;
}

.navbar-mobile a,
.navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 15px;
  color: #222222;
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
  color: #3498db;
}

.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
  margin: 15px;
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover>a {
  color: #3498db;
}

.navbar-mobile .dropdown>.dropdown-active {
  display: block;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
#hero {
    width: 100%;
    height: 70vh;
    margin-top: 100px;
    background-image: none;
    position: relative;
}

    #hero h1 {
        margin: 0 0 10px 0;
        font-size: 48px;
        font-weight: 700;
        line-height: 56px;
        color: #11466e;
    }

    #hero h2 {
        color: #11466e;
        margin-bottom: 50px;
        font-size: 24px;
    }
    #hero h3, #hero p {
        color: #11466e;
    }

    #hero .btn-get-started {
        font-family: "Raleway", sans-serif;
        font-weight: 500;
        font-size: 16px;
        letter-spacing: 1px;
        display: inline-block;
        padding: 10px 30px;
        border-radius: 50px;
        transition: 0.5s;
    }

#hero .btn-get-started:hover {
  background: #3498db;
  color: #fff;
}

#hero .animated {
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@media (min-width: 1024px) {
  #hero {
    background-attachment: fixed;
  }
}

@media (max-width: 991px) {
  #hero {
    height: 100vh;
  }

  #hero .animated {
    -webkit-animation: none;
    animation: none;
  }

  #hero .hero-img {
    text-align: center;
  }

  #hero .hero-img img {
    width: 50%;
  }
}

@media (max-width: 768px) {
  #hero {
    margin-top: 90px;
  }

  #hero h1 {
    font-size: 28px;
    line-height: 36px;
  }

  #hero h2 {
    font-size: 18px;
    line-height: 24px;
    margin-bottom: 30px;
  }

  #hero .hero-img img {
    width: 70%;
  }
}

@media (max-width: 575px) {
  #hero .hero-img img {
    width: 80%;
  }
}

@-webkit-keyframes up-down {
  0% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-10px);
  }
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-10px);
  }
}
#banner {
padding:0 10rem;
}

/*--------------------------------------------------------------
# Sections General
--------------------------------------------------------------*/
section {
  padding: 60px 0;
  overflow: hidden;
}

.section-bg {
    background-color: #f7fbfe;
}

.section-title {
  text-align: center;
  padding-bottom: 30px;
}

    .section-title h1 {
        font-size: 2rem;
        font-weight: bold;
        /*text-transform: uppercase;*/
        position: relative;
        color: #11466e;
    }

/*.section-title h2::before,
.section-title h2::after {
  content: "";
  width: 50px;
  height: 2px;
  background: #3498db;
  display: inline-block;
}*/

.section-title h2::before {
  margin: 0 15px 10px 0;
}

.section-title h2::after {
  margin: 0 0 10px 15px;
}

.section-title p {
  margin: 15px 0 0 0;
}

/*--------------------------------------------------------------
# Clients
--------------------------------------------------------------*/
.clients {
  background: #f3f9fd;
  padding: 10px 0;
  text-align: center;
}

.clients .col-lg-2 {
  display: flex;
  align-items: center;
  justify-content: center;
}

.clients img {
  width: 50%;
  filter: grayscale(100);
  transition: all 0.4s ease-in-out;
  display: inline-block;
  padding: 10px 0;
}

.clients img:hover {
  filter: none;
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .clients img {
    width: 40%;
  }
}

@media (max-width: 575px) {
  .clients img {
    width: 30%;
  }
}

/*--------------------------------------------------------------
# About Us
--------------------------------------------------------------*/

.about .content-block:not(:last-child) {
    margin-bottom: 1rem;
}

.about .content-block.wide-section {
    margin-bottom: 0 !important;
    background-color: var(--clr-semi-dark-blue);
}

    .about .content-block.wide-section .text-area {
        padding: 10rem 4rem;
    }

@media (min-width: 1920px) {
    .about .content-block.wide-section .text-area {
        max-width: 950px;
        margin: 0 auto;
    }
}

@media (max-width: 991px) {
    .about .content-block.wide-section .text-area {
        margin: 0 auto;
        padding: 5rem 3rem;
    }
}

@media (max-width: 991px) {
    .about .content-block.wide-section .wide-img-area {
        max-height: 500px;
    }
}

.about .content-block .pad-start .text-area {
    padding-left: 2rem;
}

@media (max-width: 991px) {
    .about .content-block .pad-start .text-area {
        padding-left: 0;
    }
}

.about .content-block .pad-end .text-area {
    padding-right: 2rem;
}

@media (max-width: 991px) {
    .about .content-block .pad-end .text-area {
        padding-right: 0;
    }
}

.about .about-col,
.about .img-area {
    position: relative;
}

    .about .about-col .photo-banner-start,
    .about .about-col .photo-banner-end,
    .about .img-area .photo-banner-start,
    .about .img-area .photo-banner-end {
        position: absolute;
        min-width: 100px;
        min-height: 250px;
        background-color: var(--clr-main);
        color: var(--clr-white);
        padding: 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 3;
        top: -2rem;
        bottom: auto;
    }

        .about .about-col .photo-banner-start .number,
        .about .about-col .photo-banner-end .number,
        .about .img-area .photo-banner-start .number,
        .about .img-area .photo-banner-end .number {
            position: relative;
            font-size: 6rem;
            font-weight: 900;
            line-height: 1;
        }

@media (max-width: 767px) {
    .about .about-col .photo-banner-start .number,
    .about .about-col .photo-banner-end .number,
    .about .img-area .photo-banner-start .number,
    .about .img-area .photo-banner-end .number {
        font-size: 4rem;
        font-weight: 700;
    }
}

.about .about-col .photo-banner-start .banner-text,
.about .about-col .photo-banner-end .banner-text,
.about .img-area .photo-banner-start .banner-text,
.about .img-area .photo-banner-end .banner-text {
    position: relative;
    font-size: 1.25rem;
    font-weight: 500;
    text-transform: capitalize;
    margin: 0;
}

@media (max-width: 767px) {
    .about .about-col .photo-banner-start .banner-text,
    .about .about-col .photo-banner-end .banner-text,
    .about .img-area .photo-banner-start .banner-text,
    .about .img-area .photo-banner-end .banner-text {
        font-size: 1rem;
    }
}

.about .about-col .photo-banner-start .banner-icon,
.about .about-col .photo-banner-end .banner-icon,
.about .img-area .photo-banner-start .banner-icon,
.about .img-area .photo-banner-end .banner-icon {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    font-size: 4rem;
    color: var(--clr-white);
    opacity: 0.5;
    z-index: -1;
}

@media (max-width: 767px) {
    .about .about-col .photo-banner-start .banner-icon,
    .about .about-col .photo-banner-end .banner-icon,
    .about .img-area .photo-banner-start .banner-icon,
    .about .img-area .photo-banner-end .banner-icon {
        font-size: 2.5rem;
    }
}

@media (max-width: 767px) {
    .about .about-col .photo-banner-start,
    .about .about-col .photo-banner-end,
    .about .img-area .photo-banner-start,
    .about .img-area .photo-banner-end {
        top: -1.5rem !important;
        bottom: auto !important;
        left: auto !important;
        right: -1.5rem !important;
        min-height: 180px;
    }
}

@media (max-width: 575px) {
    .about .about-col .photo-banner-start,
    .about .about-col .photo-banner-end,
    .about .img-area .photo-banner-start,
    .about .img-area .photo-banner-end {
        top: 0rem !important;
        bottom: auto !important;
        left: auto !important;
        right: 0rem !important;
    }
}

.about .about-col .photo-banner-start,
.about .img-area .photo-banner-start {
    left: -2rem;
    right: auto;
}

.about .about-col .photo-banner-end,
.about .img-area .photo-banner-end {
    left: auto;
    right: -2rem;
}


.about .img-area {
    padding: 0;
}

    .about .img-area.framed::before, .about .img-area.framed::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        background: transparent;
        border: 2px solid var(--clr-white);
        z-index: 5;
    }

    .about .img-area.framed::before {
        border-right: none;
        border-bottom: none;
        top: 30px;
        left: 30px;
    }

    .about .img-area.framed::after {
        border-left: none;
        border-top: none;
        bottom: 30px;
        right: 30px;
    }

    .about .img-area .overlay-color {
        opacity: 0.5;
        z-index: 1;
    }

@media (max-width: 991px) {
    .about .img-area {
        padding: 0;
        width: 100%;
    }

        .about .img-area .about-img {
            max-height: 350px;
            width: 100%;
            object-fit: cover;
        }
}

.about .wide-img-area {
    position: absolute;
    width: 100%;
    height: 100%;
    max-height: 100%;
    right: 0;
    top: 0;
    overflow: hidden;
    z-index: 0;
}

    .about .wide-img-area .overlay-color {
        opacity: 0.5;
        z-index: 1;
    }

    .about .wide-img-area > img {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 100%;
        transform-origin: center;
        object-fit: cover;
        transition: all 0.5s ease-in-out 0s;
    }

@media (max-width: 991px) {
    .about .wide-img-area {
        position: relative;
        width: 100%;
        max-height: 360px;
    }
}

.about .text-area {
    position: relative;
    padding: 1rem 0 0 0;
}

    .about .text-area .sec-heading {
        margin-bottom: 1.5rem;
    }

    .about .text-area .about-text {
        font-weight: 400;
        font-size: 1.1rem;
        line-height: 1.7;
        margin-bottom: 2rem;
        opacity: 0.75;
        letter-spacing: 0.5px;
    }

        .about .text-area .about-text::first-letter {
            text-transform: capitalize;
        }

    .about .text-area .info-items-list .menu-items {
        margin: 0;
        padding: 2rem 0;
        list-style: none;
    }

    .about .text-area .info-items-list .info-item {
        margin-bottom: 1.25rem;
        display: flex;
        align-items: start;
        justify-content: start;
    }

@media (max-width: 767px) {
    .about .text-area .info-items-list .info-item {
        flex-direction: column;
    }
}

.about .text-area .info-items-list .info-item:hover .info-icon,
.about .text-area .info-items-list .info-item:hover .info-img-icon {
    transform: translateY(-5px);
}

.about .text-area .info-items-list .info-content {
    padding-right: 3rem;
}

.about .text-area .info-items-list .info-title {
    margin-bottom: 0.75rem;
    opacity: 0.95;
    font-weight: 600;
    font-size: 1.5rem;
    text-transform: capitalize;
    color: var(--clr-dark-blue);
}

.about .text-area .info-items-list .info-text {
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.75;
}

.about .text-area .info-items-list .info-icon {
    display: flex;
    margin-right: 1rem;
    margin-bottom: 1rem;
    color: var(--clr-secondary);
    font-size: 3rem;
    transition: transform 0.3s ease-in-out 0s;
}

.about .text-area .info-items-list .info-img-icon {
    margin-right: 1.5rem;
    margin-bottom: 1.5rem;
    width: 60px;
    height: 60px;
    transition: transform 0.3s ease-in-out 0s;
}

.about .info-item .info-list .info-list-icon {
    color: var(--clr-secondary);
    position: absolute;
    left: 0;
    top: 10px;
    font-size: 20px;
    line-height: 1;
}
.about .info-item .info-list p {
    margin-left:10px;
    margin-bottom:0;
}

.about .text-area .about-stats {
    margin-bottom: 2rem;
}

    .about .text-area .about-stats.stats-cards .stat-box {
        position: relative;
        text-align: center;
        padding: 1.5rem 0.5rem;
        margin-bottom: 0;
        margin-bottom: 2rem;
        border: 1px solid rgba(var(--clr-secondary-rgb), 0.35);
        border-bottom: 0.25rem solid rgba(var(--clr-secondary-rgb), 1);
        box-shadow: 1px 1px 10px 0px rgba(var(--clr-dark-blue-rgb), 0.1);
    }

        .about .text-area .about-stats.stats-cards .stat-box .stat-icon {
            position: absolute;
            top: 0.5rem;
            left: 0.5rem;
            font-size: 4rem;
            color: rgba(var(--clr-secondary-rgb), 0.35);
        }

@media (max-width: 575px) {
    .about .text-area .about-stats.stats-cards .stat-box .stat-icon {
        font-size: 2.5rem;
    }
}

.about .text-area .about-stats .stat-box {
    text-align: center;
    padding: 1.5rem 0.5rem;
    margin-bottom: 0;
}

    .about .text-area .about-stats .stat-box .stat-num {
        opacity: 0.95;
        font-size: 3rem;
        font-weight: 700;
        margin-bottom: 0.25rem;
        display: inline-block;
        position: relative;
    }

        .about .text-area .about-stats .stat-box .stat-num .sign {
            font-size: 2.5rem;
            font-weight: 600;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translate(-100%, -50%);
        }

    .about .text-area .about-stats .stat-box .stat-desc {
        font-size: 0.95rem;
        font-weight: 700;
        line-height: 1.2;
        opacity: 0.75;
        text-transform: capitalize;
    }

@media (max-width: 575px) {
    .about .text-area .about-stats .stat-box .stat-desc {
        font-size: 0.75rem;
        font-weight: 600;
    }
}

@media (max-width: 991px) {
    .about .text-area .about-stats .stat-box .stat-num {
        font-size: 2rem;
        font-weight: 700;
    }

        .about .text-area .about-stats .stat-box .stat-num .sign {
            font-size: 1.25rem;
        }
}


.about.has-dark-bg {
    background-color: var(--clr-semi-dark-blue);
}

    .about.has-dark-bg .text-area .section-title,
    .about.has-dark-bg .text-area .about-title,
    .about.has-dark-bg .text-area .init-text,
    .about.has-dark-bg .text-area .about-text,
    .about.has-dark-bg .text-area .info-items-list .info-title,
    .about.has-dark-bg .text-area .info-items-list .info-text,
    .about.has-dark-bg .text-area .about-stats .stat-box .stat-num,
    .about.has-dark-bg .text-area .about-stats .stat-box .stat-desc {
        color: var(--clr-white);
    }
.about .text-area .info-items-list .info-item .list-group-item {
background-color:transparent !important;
}
/*.about .content h3 {
  font-weight: 600;
  font-size: 26px;
}

.about .content ul {
  list-style: none;
  padding: 0;
}

.about .content ul li {
  padding-left: 28px;
  position: relative;
}

.about .content ul li+li {
  margin-top: 10px;
}

.about .content ul i {
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 20px;
  color: #3498db;
  line-height: 1;
}

.about .content p:last-child {
  margin-bottom: 0;
}

.about .content .btn-learn-more {
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 32px;
  border-radius: 50px;
  transition: 0.3s;
  line-height: 1;
  color: #3498db;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
  margin-top: 6px;
  border: 2px solid #3498db;
}

.about .content .btn-learn-more:hover {
  background: #3498db;
  color: #fff;
  text-decoration: none;
}*/
/*--------------------------------------------------------------
# Counts
--------------------------------------------------------------*/
/*.counts {
  padding-top: 0;
}*/
#counts {
    overflow: inherit;
    position: relative;
    background-color: #228cdb !important;
    padding-bottom:0;
    padding-top:0;
    /* background: url(/img/got-app.gif);
    background-repeat: no-repeat;
    min-height: 600px;
    background-size: contain;
    background-position: right;*/
}
.counts .content {
  padding: 0;
}
    .counts .content h1 {
    color:#fff;
    }
    .counts .content h3 {
        font-weight: 700;
        font-size: 34px;
        color: #222222;
    }

    .counts .content p {
        margin-bottom: 0;
        color: #fff;
    }

.counts .content .count-box {
  padding: 20px 0;
  width: 100%;
}

.counts .content .count-box i {
  display: block;
  font-size: 36px;
  color: #3498db;
  float: left;
  line-height: 0;
}

.counts .content .count-box span {
  font-size: 36px;
  line-height: 30px;
  display: block;
  font-weight: 700;
  color: #222222;
  margin-left: 50px;
}

.counts .content .count-box p {
  padding: 15px 0 0 0;
  margin: 0 0 0 50px;
  font-family: "Raleway", sans-serif;
  font-size: 14px;
  color: #484848;
}

.counts .content .count-box a {
  font-weight: 600;
  display: block;
  margin-top: 20px;
  color: #484848;
  font-size: 15px;
  font-family: "Poppins", sans-serif;
  transition: ease-in-out 0.3s;
}

.counts .content .count-box a:hover {
  color: #6f6f6f;
}

.counts .image {
    position: absolute;
    top: -130px;
    max-height: 380px;
    box-shadow: 1px 1px 10px 0px #000000ab;
    border-radius: 15px;
}
@media (max-width: 1024px) {
    .counts .image {
    text-align: center;
  }

  .counts .image img {
    max-width: 70%;
  }
}

@media (max-width: 667px) {
  .counts .image img {
    max-width: 100%;
  }
}
.counts .content .btn-counts {
    color:var(--clr-main);
    background-color:var(--clr-white);
    margin-top:2rem;
}
/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services {
    background-image: url(/img/left-bg.svg);
    background-repeat: no-repeat;
    background-size: 60%;
    background-position: left center;
}
.services .icon-box {
    padding:0 30px 30px 30px;
    position: relative;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 29px 0 rgba(68, 88, 144, 0.12);
    transition: all 0.3s ease-in-out;
    border-radius: 8px;
    z-index: 1;
}

.services .icon-box::before {
  content: "";
  position: absolute;
  background: #e1f0fa;
  right: -60px;
  top: -40px;
  width: 100px;
  height: 100px;
  border-radius: 50px;
  transition: all 0.3s;
  z-index: -1;
}

.services .icon-box:hover::before {
  background: #3498db;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 0px;
}

    .services .icon {
        transition: all 0.3s ease-in-out;
        position: relative;
        top: -1.5rem;
        /*display: inline-block;
    text-align: center;
    transition: all 0.3s ease-in-out;
    position: absolute;
    vertical-align: middle;
    top: -1.5rem;*/
    }

.services .meal .icon {
    width: 10rem;
}
    .services .echo .icon {
        width: 6rem;
    }
.services .echo .title .title-img {
    width: 50px;
    position: absolute;
    right: 10px;
    top: 15px;
}
.services .icon i {
  font-size: 36px;
  line-height: 1;
  color: #fff;
}

.services .title {
    font-weight: 700;
    margin-bottom: 15px;
}
/*.services .meal .title {
    padding-left: 9.5rem;
}*/
.services .meal .title .title-img {
    width: 50px;
    position: absolute;
    left: 10px;
    top: 15px;
}
.services .title a {
    color: #111;
}

.services .description {
    font-size: 15px;
    line-height: 28px;
    margin-bottom: 0;
}
/*.services .meal .description {
    padding: 20px 0 20px 9.5rem;
}
.services .echo .description {
    padding: 20px 150px 20px 0;
}*/

    .services .service-img {
    margin-bottom:1.5rem;
    max-height:100px;
    }
/*.services .icon-box:hover .title a,
.services .icon-box:hover .description {
  color: #fff;
}

.services .icon-box:hover .icon {
  background: #fff;
}

.services .icon-box:hover .icon i {
  color: #3498db;
}*/
/*--------------------------------------------------------------
# More Services
--------------------------------------------------------------*/
/*.more-services {
  padding-top: 20px;
}*/
.more-services .card {
    border: 0;
    padding: 160px 20px 20px 20px;
    position: relative;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.more-services .card-body {
  z-index: 10;
  background: rgba(255, 255, 255, 0.9);
  padding: 15px 30px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
  transition: ease-in-out 0.4s;
  border-radius: 5px;
}

.more-services .card-title {
  font-weight: 700;
  text-align: center;
  margin-bottom: 15px;
}

.more-services .card-title a {
  color: #222222;
}

.more-services .card-text {
  color: #5e5e5e;
}

.more-services .read-more a {
  color: #777777;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 12px;
  transition: 0.4s;
}

.more-services .read-more a:hover {
  text-decoration: underline;
}

.more-services .card:hover .card-body {
  background: #3498db;
}

.more-services .card:hover .read-more a,
.more-services .card:hover .card-title,
.more-services .card:hover .card-title a,
.more-services .card:hover .card-text {
  color: #fff;
}

/*--------------------------------------------------------------
# Features
--------------------------------------------------------------*/
/*.features {
    background-image: url(/img/features/bg.png), url(/img/features/bg2.png);
    background-size: contain, contain;
    background-position: left top, right top;
    background-repeat: no-repeat, no-repeat;
}*/

    .features .icon-box {
        display: flex;
        align-items: center;
        padding: 20px;
        transition: ease-in-out 0.3s;
        border-radius: 20px;
        box-shadow: 0 0 29px 0 rgb(68 88 144 / 12%);
    }

.features .icon-box img {
  padding-right: 20px;
}

.features .icon-box h3 {
  font-weight: 700;
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: 16px;
}

.features .icon-box h3 a {
  color: #222222;
  transition: ease-in-out 0.3s;
}

.features .icon-box h3 a:hover {
  color: #3498db;
}
    .features .icon-box .icon-box-img {
        padding: 1rem;
        padding-left: 0;
    }
        /*.features .icon-box:hover {
        background: linear-gradient(92deg, rgba(3,57,108,1) 0%, rgba(0,91,150,1) 40%);
    }*/
        /*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
        .testimonials .testimonial-wrap {
            padding-left: 50px;
        }

.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
  overflow: hidden;
}

.testimonials .testimonial-item {
  box-sizing: content-box;
  padding: 30px 30px 30px 60px;
  margin: 30px 15px;
  min-height: 200px;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.08);
  position: relative;
  background: #fff;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 10px;
  border: 6px solid #fff;
  position: absolute;
  left: -45px;
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
  color: #111;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: #999;
  margin: 0;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
  color: #e1f0fa;
  font-size: 26px;
}

.testimonials .testimonial-item .quote-icon-left {
  display: inline-block;
  left: -5px;
  position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
  display: inline-block;
  right: -5px;
  position: relative;
  top: 10px;
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 15px auto 15px auto;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #3498db;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #3498db;
}

@media (max-width: 767px) {
  .testimonials .testimonial-wrap {
    padding-left: 0;
  }

  .testimonials .testimonials-carousel,
  .testimonials .testimonials-slider {
    overflow: hidden;
  }

  .testimonials .testimonial-item {
    padding: 30px;
    margin: 15px;
  }

  .testimonials .testimonial-item .testimonial-img {
    position: static;
    left: auto;
  }
}

/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio .portfolio-item {
  margin-bottom: 30px;
}

.portfolio #portfolio-flters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio #portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 15px 10px 15px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  color: #222222;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
  border-radius: 3px;
}

.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
  color: #fff;
  background: #3498db;
}

.portfolio #portfolio-flters li:last-child {
  margin-right: 0;
}

.portfolio .portfolio-wrap {
  transition: 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: rgba(34, 34, 34, 0.6);
}

.portfolio .portfolio-wrap::before {
  content: "";
  background: rgba(34, 34, 34, 0.6);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  transition: all ease-in-out 0.3s;
  z-index: 2;
  opacity: 0;
}

.portfolio .portfolio-wrap img {
  transition: all ease-in-out 0.3s;
}

.portfolio .portfolio-wrap .portfolio-info {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 20px;
}

.portfolio .portfolio-wrap .portfolio-info h4 {
  font-size: 20px;
  color: #fff;
  font-weight: 600;
}

.portfolio .portfolio-wrap .portfolio-info p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
  font-style: italic;
}

.portfolio .portfolio-wrap .portfolio-links {
  text-align: center;
  z-index: 4;
}

.portfolio .portfolio-wrap .portfolio-links a {
  color: #fff;
  margin: 0 5px 0 0;
  font-size: 28px;
  display: inline-block;
  transition: 0.3s;
}

.portfolio .portfolio-wrap .portfolio-links a:hover {
  color: #3498db;
}

.portfolio .portfolio-wrap:hover::before {
  opacity: 1;
}

.portfolio .portfolio-wrap:hover img {
  transform: scale(1.2);
}

.portfolio .portfolio-wrap:hover .portfolio-info {
  opacity: 1;
}

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
  padding-top: 40px;
}

.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #3498db;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #3498db;
}

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px rgba(34, 34, 34, 0.08);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
}

/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
.team .member {
  margin-bottom: 20px;
  overflow: hidden;
  text-align: center;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

.team .member .member-img {
  position: relative;
  overflow: hidden;
}

.team .member .social {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 40px;
  opacity: 0;
  transition: ease-in-out 0.3s;
  background: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.team .member .social a {
  transition: color 0.3s;
  color: #222222;
  margin: 0 10px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.team .member .social a i {
  line-height: 0;
}

.team .member .social a:hover {
  color: #3498db;
}

.team .member .social i {
  font-size: 18px;
  margin: 0 2px;
}

.team .member .member-info {
  padding: 25px 15px;
}

.team .member .member-info h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 18px;
  color: #222222;
}

.team .member .member-info span {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: #aaaaaa;
}

.team .member .member-info p {
  font-style: italic;
  font-size: 14px;
  line-height: 26px;
  color: #777777;
}

.team .member:hover .social {
  opacity: 1;
}

/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
/*.pricing .box {
  padding: 20px;
  background: #f9f9f9;
  text-align: center;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  border: 2px solid #f9f9f9;
}

.pricing .box h3 {
  font-weight: 400;
  padding: 15px;
  margin-top: 15px;
  font-size: 18px;
  font-weight: 600;
  color: #222222;
}

.pricing .box h4 {
  font-size: 42px;
  color: #3498db;
  font-weight: 500;
  font-family: "Open Sans", sans-serif;
  margin-bottom: 20px;
}

.pricing .box h4 sup {
  font-size: 20px;
  top: -15px;
  left: -3px;
}

.pricing .box h4 span {
  color: #bababa;
  font-size: 16px;
  font-weight: 300;
}

.pricing .box ul {
  padding: 0;
  list-style: none;
  color: #222222;
  text-align: center;
  line-height: 20px;
  font-size: 14px;
}

.pricing .box ul li {
  padding-bottom: 16px;
}

.pricing .box ul i {
  color: #3498db;
  font-size: 18px;
  padding-right: 4px;
}

.pricing .box ul .na {
  color: #ccc;
  text-decoration: line-through;
}

.pricing .box .btn-wrap {
  padding: 15px;
  text-align: center;
}

.pricing .box .btn-buy {
  display: inline-block;
  padding: 10px 40px 12px 40px;
  border-radius: 50px;
  border: 2px solid #3498db;
  color: #3498db;
  font-size: 14px;
  font-weight: 400;
  font-family: "Raleway", sans-serif;
  font-weight: 600;
  transition: 0.3s;
}

.pricing .box .btn-buy:hover {
  background: #3498db;
  color: #fff;
}

.pricing .recommended {
  border-color: #3498db;
}

.pricing .recommended .btn-buy {
  background: #3498db;
  color: #fff;
}

.pricing .recommended .btn-buy:hover {
  background: #2383c4;
  border-color: #2383c4;
}
*/

/*   Start pricing Section  */
.pricing {
    overflow: hidden;
    position: relative;
    background-image: url(/img/right-bg.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top right;
}

@media (max-width: 991px) {
    .pricing .price-plan:not(:last-of-type) {
        margin-bottom: 3rem;
    }
}

.pricing .plan {
    position: relative;
    overflow: hidden;
    /*border: 1px solid rgba(var(--clr-main-rgb), 0.35);*/
    border-radius: 0.5rem 0.5rem 0 0;
    padding: 0 2.5rem 2rem 2.5rem;
    transition: all 0.3s ease-in-out 0s;
    box-shadow: 1px 1px 10px 0px rgba(var(--clr-dark-blue-rgb), 0.15);
}

    .pricing .plan .ribbon {
        display: inline-block;
        padding: 0.25rem 5rem;
        color: var(--clr-white);
        background-color: var(--clr-main);
        top: 3rem;
        right: -4rem;
        left: auto;
        position: absolute;
        font-weight: 800;
        font-size: 0.85rem;
        transform: rotate(45deg);
    }

.pricing .plan-head {
    position: relative;
    /*border-bottom: 1px solid rgba(var(--clr-main-rgb), 0.25);*/
}

    .pricing .plan-head .plan-icon {
        /*font-size: 4rem;
        line-height: 1;
        color: var(--clr-main);*/
        max-height:200px;
        padding-right:1rem;
    }

    .pricing .plan-head .plane-name {
        font-weight: 800;
        font-size: 1.6rem;
        margin: 0;
        margin-bottom: 3rem;
        /*border-left: 0.25rem solid var(--clr-dark-blue);
        padding-left: 1rem;*/
        display:inline-block;
        vertical-align:bottom;
    }

    .pricing .plan-head .plan-price {
        position: relative;
        display: inline-block;
        font-size: 4rem;
        font-weight: 700;
        margin: 0;
        margin-bottom: 1.5rem;
        padding: 0;
        line-height: 1;
    }

        .pricing .plan-head .plan-price .plan-currency {
            position: absolute;
            font-size: 1.5rem;
            font-weight: 500;
            top: 1rem;
            left: -1rem;
            line-height: 0;
            vertical-align: baseline;
            display: inline-block;
            color: var(--clr-main);
        }

        .pricing .plan-head .plan-price .per {
            font-size: 1rem;
            font-weight: 900;
            font-style: italic;
            opacity: 0.75;
            color: var(--clr-main);
            padding: 0.25rem;
        }

    .pricing .plan-head .plan-desc {
        font-size: 0.9rem;
        opacity: 0.75;
    }

.pricing .plan-list {
    list-style: none;
    margin: 0;
    padding: 1rem 0;
    margin-bottom: 1rem;
}

    .pricing .plan-list .plan-feat {
        position: relative;
        /*padding: 0.75rem 0;*/
        font-size: 1rem;
        /*font-weight: 600;*/
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .pricing .plan-list .plan-feat .feat-icon {
            color: #000;
            font-size: 1.5rem;
        }
            .pricing .plan-list .plan-feat .feat-icon:before {
                font-weight:bold;
            }

            .pricing .plan-cta .cta-btn {
                width: 100%;
            }

.pricing.dark-cards .plan {
    background: var(--clr-white) !important;
}

.pricing.dark-cards .plane-name,
.pricing.dark-cards .plan-price {
    color: #000;
}

.pricing.dark-cards .plan-list .plan-feat {
    color: #000;
    font-family:Lexend-Light;
}
.pricing .plan .plan-footer {
text-align:center;
}
    .pricing .plan .plan-footer .plan-btn {
        width:100%;
    }

.pricing .plan .plan-details {
    font-size: 15px;
    line-height: 28px;
    margin: 1rem 0;
}
    /*    End pricing Section  */
    /*--------------------------------------------------------------
# F.A.Q
--------------------------------------------------------------*/
    .faq .faq-item {
        margin: 20px 0;
        padding: 20px 0;
        border-bottom: 1px solid #eeeeee;
    }

.faq .faq-item i {
  color: #8bc4ea;
  font-size: 24px;
  float: left;
  line-height: 0;
  padding: 13px 0 0 0;
  margin: 0;
}

.faq .faq-item h4 {
  font-size: 16px;
  line-height: 26px;
  font-weight: 500;
  margin: 0 0 10px 32px;
  font-family: "Poppins", sans-serif;
}

.faq .faq-item p {
  font-size: 15px;
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
    text-align: center;
    box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
    padding: 20px 0 30px 0;
    background: #fff;
}

    .contact .info-box i {
        font-size: 32px;
        color: var(--clr-main);
        border-radius: 50%;
        padding: 8px;
        border: 2px dotted var(--clr-main);
    }

    .contact .info-box h3 {
        font-size: 20px;
        font-weight: 700;
        margin: 10px 0;
    }

    .contact .info-box p {
        padding: 0;
        line-height: 24px;
        font-size: 14px;
        margin-bottom: 0;
    }

.contact .php-email-form {
    box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
    padding: 30px;
    background: #fff;
}

    .contact .php-email-form .error-message {
        display: none;
        color: #fff;
        background: #ed3c0d;
        text-align: left;
        padding: 15px;
        font-weight: 600;
    }

        .contact .php-email-form .error-message br + br {
            margin-top: 25px;
        }

    .contact .php-email-form .sent-message {
        display: none;
        color: #fff;
        background: #18d26e;
        text-align: center;
        padding: 15px;
        font-weight: 600;
    }

    .contact .php-email-form .loading {
        display: none;
        background: #fff;
        text-align: center;
        padding: 15px;
    }

        .contact .php-email-form .loading:before {
            content: "";
            display: inline-block;
            border-radius: 50%;
            width: 24px;
            height: 24px;
            margin: 0 10px -6px 0;
            border: 3px solid #18d26e;
            border-top-color: #eee;
            -webkit-animation: animate-loading 1s linear infinite;
            animation: animate-loading 1s linear infinite;
        }

    .contact .php-email-form input,
    .contact .php-email-form textarea {
        border-radius: 0;
        box-shadow: none;
        font-size: 14px;
    }

        .contact .php-email-form input::focus,
        .contact .php-email-form textarea::focus {
            background-color: #fdc134;
        }

    .contact .php-email-form input {
        padding: 10px 15px;
    }

    .contact .php-email-form textarea {
        padding: 12px 15px;
    }

    .contact .php-email-form button[type=submit] {
        border: 0;
        padding: 10px 24px;
        color: #fff;
        transition: 0.4s;
    }

        .contact .php-email-form button[type=submit]:hover {
            background: #fdd067;
        }

@-webkit-keyframes animate-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes animate-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 15px 0;
  background: #f8f8f8;
  min-height: 40px;
  margin-top: 86px;
}

@media (max-width: 992px) {
  .breadcrumbs {
    margin-top: 72px;
  }
}

.breadcrumbs h2 {
  font-size: 28px;
  font-weight: 400;
  margin: 0;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
}

@media (max-width: 992px) {
  .breadcrumbs ol {
    margin-top: 10px;
  }
}

.breadcrumbs ol li+li {
  padding-left: 10px;
}

.breadcrumbs ol li+li::before {
  display: inline-block;
  padding-right: 10px;
  color: #3c3c3c;
  content: "/";
}

@media (max-width: 768px) {
  .breadcrumbs .d-flex {
    display: block !important;
  }

  .breadcrumbs ol {
    display: block;
  }

  .breadcrumbs ol li {
    display: inline-block;
  }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
    color: #11466e;
    font-size: 14px;
    background-color: #fff;
    padding: 50px 0;
    position: relative;
    box-shadow: 0px 0px 12px 0px rgb(0 0 0 / 10%);
}

    .footer .footer-info .logo {
        line-height: 0;
        margin-bottom: 25px;
    }

        .footer .footer-info .logo img {
            max-height: 70px;
            margin-right: 6px;
        }

        .footer .footer-info .logo span {
            font-size: 30px;
            font-weight: 700;
            letter-spacing: 1px;
            color: #fff;
        }

    .footer .footer-info p {
        font-size: 14px;
    }

    .footer .social-links a {
        display: flex;
        /*align-items: center;
        justify-content: center;*/
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.2);
        font-size: 16px;
        /*color: rgba(255, 255, 255, 0.7);*/
        margin-right: 10px;
        transition: 0.3s;
    }

        .footer .social-links a:hover {
            color: #3498db;
            border-color: #fff;
        }

    .footer h4 {
        font-size: 16px;
        font-weight: bold;
        position: relative;
        padding-bottom: 12px;
    }

    .footer .footer-links {
        margin-bottom: 30px;
    }

        .footer .footer-links ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

            .footer .footer-links ul i {
                padding-right: 2px;
                color: rgba(0, 131, 116, 0.8);
                font-size: 12px;
                line-height: 0;
            }

            .footer .footer-links ul li {
                padding: 10px 0;
                display: flex;
                align-items: center;
            }

                .footer .footer-links ul li:first-child {
                    padding-top: 0;
                }

            .footer .footer-links ul a {
                color: #11466e;
                transition: 0.3s;
                display: inline-block;
                line-height: 1;
            }

                .footer .footer-links ul a:hover {
                    color: #fff;
                }

    .footer .footer-contact p {
        line-height: 26px;
    }

    .footer .copyright {
        text-align: center;
    }

    .footer .credits {
        padding-top: 4px;
        text-align: center;
        font-size: 13px;
    }

        .footer .credits a {
            color: #fff;
        }


/*    Start blog Page  */
.blog {
    background-image: url(/img/left-bg.svg);
    background-repeat: no-repeat;
    background-size: contain;
}
.blog .post-main-area .post-info, .blog .posts-grid .post-summary .post-info {
    margin-bottom: 1rem;
}

    .blog .post-main-area .post-info .info, .blog .posts-grid .post-summary .post-info .info {
        position: relative;
        display: inline-flex;
        align-items: center;
        font-size: 0.85rem;
        text-transform: capitalize;
        text-decoration: none;
        margin-right: 1.5rem;
        margin-bottom: 0.75rem;
        opacity: 0.75;
        transition: color 0.3s ease 0s;
    }

        .blog .post-main-area .post-info .info:not(:last-child):before, .blog .posts-grid .post-summary .post-info .info:not(:last-child):before {
            content: "|";
            margin: 0 0.75rem;
            position: absolute;
            left: 100%;
            opacity: 0.75;
        }

        .blog .post-main-area .post-info .info:hover, .blog .posts-grid .post-summary .post-info .info:hover {
            color: var(--clr-main);
        }

        .blog .post-main-area .post-info .info .icon, .blog .posts-grid .post-summary .post-info .info .icon {
            color: var(--clr-dark-blue);
            margin-right: 0.5rem;
            font-size: 1.5rem;
        }

.blog .box {
    box-shadow: 0px 3px 20px 0px rgba(var(--clr-dark-blue-rgb), 0.1);
}

.blog .blog-sidebar {
    padding-left: 2rem;
}

@media (max-width: 991px) {
    .blog .blog-sidebar {
        padding-left: 0;
    }
}

.blog .sidebar-box {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
}

    .blog .sidebar-box .sidebar-list {
        list-style: none;
        padding: 0;
        margin-bottom: 0;
    }

    .blog .sidebar-box .sidebar-box-title {
        margin-bottom: 1rem;
        font-size: 1.25rem;
        font-weight: 700;
        text-transform: capitalize;
        border-bottom: 1px solid var(--clr-main);
        padding: 1rem 0;
    }

        .blog .sidebar-box .sidebar-box-title .icon {
            margin-right: 0.5rem;
            color: var(--clr-main);
            font-size: 1.5rem;
        }

.blog .search .search-form {
    position: relative;
    z-index: 0;
}

.blog .search .search-input {
    border: 2px solid rgba(var(--clr-main-rgb), 0.5);
    border-radius: 0.25rem;
    padding: 0.5rem 1rem;
    outline: none;
    -webkit-appearance: none;
    width: 100%;
    transition: all 0.5s ease-in-out 0s;
}

    .blog .search .search-input:focus {
        border-color: rgba(var(--clr-main-rgb), 1);
    }

.blog .search .search-btn {
    position: absolute;
    width: 50px;
    height: 100%;
    -webkit-appearance: none;
    border: none;
    outline: none;
    background: var(--clr-main);
    right: 0rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

    .blog .search .search-btn .icon {
        color: var(--clr-white);
        transition: all 0.5s ease-in-out 0s;
    }

.blog .cats .cat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

    .blog .cats .cat-item:last-child {
        margin-bottom: 0;
    }

    .blog .cats .cat-item .cat-link {
        font-weight: 600;
        text-transform: capitalize;
        text-decoration: none;
        transition: color 0.3s ease 0s;
    }

        .blog .cats .cat-item .cat-link:hover {
            color: var(--clr-main);
        }

    .blog .cats .cat-item .cat-count {
        width: 2rem;
        height: 2rem;
        color: var(--clr-white);
        background: var(--clr-main);
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
    }

.blog .tags .tags-list {
    list-style: none;
    padding: 0;
    margin-bottom: 0.5rem;
}

.blog .tags .tags-icon-label,
.blog .tags .tag-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    margin: 0.25rem 0.25rem 0.5rem;
    border: 1px solid var(--clr-main);
    border-radius: 0.25rem;
    transition: all 0.3s ease 0s;
}

.blog .tags .tags-icon-label {
    min-width: 3rem;
    background: var(--clr-main);
}

    .blog .tags .tags-icon-label .icon {
        font-size: 0.75rem;
        color: var(--clr-white);
        line-height: 1.3 !important;
    }

.blog .tags .tag-item {
    color: var(--clr-main);
}

    .blog .tags .tag-item .tag-link {
        font-weight: 700;
        color: var(--clr-main);
        text-decoration: none;
        text-transform: capitalize;
        line-height: 1.3 !important;
        font-size: 0.75rem;
        transition: all 0.3s ease 0s;
    }

    .blog .tags .tag-item:hover {
        background-color: var(--clr-main);
    }

        .blog .tags .tag-item:hover .tag-link {
            color: var(--clr-white);
        }

.blog .recent-posts .r-post-item {
    padding: 0.5rem 0;
    margin-bottom: 1rem;
}

    .blog .recent-posts .r-post-item:last-child {
        margin-bottom: 1rem;
    }

    .blog .recent-posts .r-post-item .r-post-link {
        display: flex;
        align-items: center;
        text-decoration: none;
    }

.blog .recent-posts .r-post-img-wrapper {
    margin-right: 1rem;
    overflow: hidden;
    width: 4rem;
    height: 4rem;
    flex-shrink: 0;
}

.blog .recent-posts .r-post-img {
    width: 100%;
    height: 100%;
}

.blog .recent-posts .content {
    text-transform: capitalize;
}

    .blog .recent-posts .content .r-post-title {
        font-size: 1rem;
        font-weight: 700;
        margin-bottom: 0.25rem;
        transition: color 0.3s ease 0s;
    }

        .blog .recent-posts .content .r-post-title:hover {
            color: var(--clr-main);
        }

    .blog .recent-posts .content .r-post-date {
        font-size: 0.9rem;
        opacity: 0.75;
    }

.blog .breadcrumb {
    display: flex;
    align-items: center;
    justify-content: start;
    background: transparent;
    margin: 0;
    padding: 0;
    margin-bottom: 1rem;
}

    .blog .breadcrumb .icon {
        margin-right: 0.5rem;
    }

.blog .breadcrumb-item {
    color: var(--clr-main);
    text-transform: capitalize;
    font-weight: 700;
}

    .blog .breadcrumb-item:before {
        /*Breadcrumb Separator Color*/
        color: var(--clr-main);
        padding-right: 0.5rem;
    }

    .blog .breadcrumb-item.active {
        color: rgba(var(--clr-main-rgb), 0.5);
    }

.blog .breadcrumb-link {
    color: var(--clr-main);
    text-decoration: none;
    transition: color 0.25s ease-in 0s;
}

    .blog .breadcrumb-link:hover {
        color: rgba(var(--clr-main-rgb), 1);
    }

.blog .posts-grid .post-box {
    position: relative;
    margin: 1rem 0;
    border-radius: 0.25rem;
}

    .blog .posts-grid .post-box:hover .post-img-wrapper .overlay-color {
        opacity: 0.65;
    }

    .blog .posts-grid .post-box:hover .post-img-wrapper .post-img {
        transform: scale(1.1);
    }

    .blog .posts-grid .post-box:hover .post-img-wrapper .icon {
        top: 50%;
        visibility: visible;
        opacity: 1;
    }

.blog .posts-grid .post-link {
    text-decoration: none;
}

.blog .posts-grid .post-img-wrapper {
    max-height: 270px;
    width: 100%;
    overflow: hidden;
    margin-bottom: 0.5rem;
    border-radius: 0.25rem 0.25rem 0 0;
    position: relative;
}

    .blog .posts-grid .post-img-wrapper .overlay-color {
        opacity: 0;
        z-index: 1;
    }

    .blog .posts-grid .post-img-wrapper .post-img {
        width: 100%;
        height: auto;
        object-fit: cover;
        transition: all 0.5s ease-in-out 0s;
    }

    .blog .posts-grid .post-img-wrapper .icon {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        color: var(--clr-white);
        z-index: 40;
        width: 4rem;
        height: 3rem;
        background-color: rgba(var(--clr-main-rgb), 0.85);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        visibility: hidden;
        opacity: 0;
        transition: all 0.5s ease-in-out 0s;
    }

.blog .posts-grid .post-summary {
    padding: 0.5rem 2rem 2rem 0;
    position: relative;
}

    .blog .posts-grid .post-summary .post-date {
        position: absolute;
        color: var(--clr-white);
        background: var(--clr-main);
        padding: 0.5rem;
        top: 0rem;
        right: 1.5rem;
        left: auto;
        transform: translateY(-50%);
        font-size: 1rem;
        font-weight: 600;
        text-align: center;
        border: 0.25rem solid var(--clr-white);
        z-index: 30;
        border-radius:0.5rem;
    }

        .blog .posts-grid .post-summary .post-date .day {
            display: block;
            font-size: 2rem;
            font-weight: 700;
        }

    .blog .posts-grid .post-summary .post-title {
        font-size: 1.5rem;
        font-weight: 800;
        line-height: 1.5;
        margin-bottom: 1rem;
        text-transform: capitalize;
        transition: color 0.3s ease 0s;
    }

        .blog .posts-grid .post-summary .post-title:hover {
            color: var(--clr-main);
        }

    .blog .posts-grid .post-summary .post-excerpt {
        opacity: 0.75;
    }

.blog.blog-post {
    margin-top: 8rem;
}

.blog .post-featured-area {
    width: 100%;
    height: auto;
    max-height: 600px;
    overflow: hidden;
    margin-bottom: 1rem;
    border-radius: 0.25rem 0.25rem 0 0;
}

    .blog .post-featured-area .featured-img {
        width: 100%;
        height: auto;
        object-fit: cover;
        transition: all 1s ease-in-out 0s;
    }

    .blog .post-featured-area .swiper-container {
        width: 100%;
        height: auto;
        max-height: 450px;
        margin-left: auto;
        margin-right: auto;
    }

        .blog .post-featured-area .swiper-container .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            /* Center slide text vertically */
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

            .blog .post-featured-area .swiper-container .swiper-slide img {
                width: 100%;
                height: auto;
                object-fit: cover;
                object-position: center;
            }

        .blog .post-featured-area .swiper-container .swiper-button-prev,
        .blog .post-featured-area .swiper-container .swiper-button-next {
            width: 4rem;
            height: 4rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.75rem;
            color: var(--clr-white);
            background-color: rgba(var(--clr-main-rgb), 1);
            cursor: pointer;
            transition: all 0.3s ease-in-out 0s;
        }

            .blog .post-featured-area .swiper-container .swiper-button-prev:hover,
            .blog .post-featured-area .swiper-container .swiper-button-next:hover {
                background-color: rgba(var(--clr-main-rgb), 0.8);
            }

            .blog .post-featured-area .swiper-container .swiper-button-prev:after,
            .blog .post-featured-area .swiper-container .swiper-button-next:after {
                content: "";
            }

            .blog .post-featured-area .swiper-container .swiper-button-prev .icon,
            .blog .post-featured-area .swiper-container .swiper-button-next .icon {
                display: flex;
            }

            .blog .post-featured-area .swiper-container .swiper-button-prev:hover,
            .blog .post-featured-area .swiper-container .swiper-button-next:hover {
                background-color: rgba(var(--clr-main-rgb), 1);
            }

    .blog .post-featured-area .video-source {
        width: 100%;
        height: 450px;
    }

.blog .social {
    margin-bottom: 1rem;
}

    .blog .social .share-us {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .blog .social .share-us .share-title {
            font-size: 1rem;
            font-weight: 700;
            text-transform: uppercase;
            margin-bottom: 0;
            color: var(--clr-main);
        }

    .blog .social .sc-item {
        margin-bottom: 0;
    }

.blog .post-title {
    font-size: 3rem;
    font-weight: 800;
    text-transform: capitalize;
    margin-bottom: 3rem;
}

@media (max-width: 991px) {
    .blog .post-title {
        font-size: 2.25rem;
        margin-bottom: 3rem;
    }
}

.blog .post-main-area {
    margin: 1rem 0;
}

    .blog .post-main-area .panel {
        padding-bottom: 3rem;
        margin-bottom: 3rem;
    }

        .blog .post-main-area .panel .panel-title {
            margin-bottom: 0.75rem;
            font-size: 1.75rem;
            font-weight: 700;
            text-transform: capitalize;
            padding-bottom: 0.5rem;
            margin-bottom: 1.5rem;
        }

    .blog .post-main-area .float-start-direction {
        float: left;
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;
        margin-right: 1.5rem;
        width: 50%;
    }

    .blog .post-main-area .float-end-direction {
        float: right;
        margin-top: 1.5rem;
        margin-bottom: 0.5rem;
        margin-left: 1.5rem;
        width: 50%;
    }

    .blog .post-main-area .share-title {
        margin-right: 1.5rem;
        margin-bottom: 0%;
        text-transform: capitalize;
        opacity: 0.75;
        font-weight: 800;
    }

    .blog .post-main-area .post-content {
        margin-bottom: 1.5rem;
    }

        .blog .post-main-area .post-content img {
            border-radius: 0.25rem;
        }

        .blog .post-main-area .post-content a {
            color: var(--clr-main);
            opacity: 0.85;
            text-decoration: underline;
            transition: all 0.1s ease-in-out 0s;
        }

            .blog .post-main-area .post-content a:hover {
                opacity: 1;
            }

        .blog .post-main-area .post-content .post-heading {
            font-size: 1.75rem;
            font-weight: 600;
            line-height: 1.2;
            text-transform: capitalize;
            margin-bottom: 1rem;
        }

        .blog .post-main-area .post-content .post-text {
            overflow: hidden;
            font-size: 1.25rem;
            opacity: 0.75;
            line-height: 1.6;
            margin-bottom: 1.25rem;
        }

        .blog .post-main-area .post-content .post-img-wrapper {
            margin: 1rem 0;
            height: 500px;
            overflow: hidden;
        }

@media (max-width: 767px) {
    .blog .post-main-area .post-content .post-img-wrapper {
        height: 350px;
    }
}

.blog .post-main-area .post-content .post-img-wrapper img {
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.blog .post-main-area .post-content .first-litter::first-letter {
    font-size: 4rem;
    line-height: 4rem;
    float: left;
    font-weight: 900;
    padding-right: 1rem;
    text-transform: capitalize;
    color: var(--clr-main);
}

.blog .post-main-area .post-content .post-list {
    list-style: none;
    margin: 0;
    margin-bottom: 1.5rem;
    padding-left: 0;
}

    .blog .post-main-area .post-content .post-list .post-list-item {
        opacity: 0.75;
        padding: 0.5rem 0;
        position: relative;
        font-size: 1.25rem;
        display: flex;
        align-items: baseline;
    }

        .blog .post-main-area .post-content .post-list .post-list-item .post-list-text {
            text-transform: capitalize;
        }

        .blog .post-main-area .post-content .post-list .post-list-item .icon {
            font-size: 0.75rem;
            color: var(--clr-main);
            margin-right: 0.5rem;
        }

.blog .post-main-area .post-content blockquote {
    margin: 2rem 0;
    padding: 3rem 2rem;
    border: none;
    border-left: 0.25rem solid var(--clr-main);
    border-top-left-radius: 0;
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0;
    position: relative;
    overflow: hidden;
    background-color: rgba(var(--clr-main-rgb), 0.15);
}

    .blog .post-main-area .post-content blockquote .post-quote {
        font-size: 1.5rem;
        font-weight: 500;
        font-style: italic;
        display: block;
        padding: 1.5rem 0;
    }

    .blog .post-main-area .post-content blockquote .person-name {
        position: absolute;
        right: 2rem;
        bottom: 1rem;
        display: block;
        font-size: 1rem;
        font-weight: 500;
        text-transform: capitalize;
        color: var(--clr-main);
    }

    .blog .post-main-area .post-content blockquote .icon {
        position: absolute;
        top: 1rem;
        left: 2rem;
        color: rgba(var(--clr-main-rgb), 0.35);
        font-size: 2rem;
    }

@media (max-width: 991px) {
    .blog .post-main-area .post-content blockquote {
        padding: 2rem;
    }

        .blog .post-main-area .post-content blockquote .icon {
            left: 3rem;
        }
}

.blog .post-main-area .other-posts .other-post-link {
    text-decoration: none;
}

    .blog .post-main-area .other-posts .other-post-link:hover img {
        transform: scale(1.05);
        filter: grayscale(0);
    }

    .blog .post-main-area .other-posts .other-post-link:hover .icon {
        background: rgba(var(--clr-main-rgb), 1);
    }

    .blog .post-main-area .other-posts .other-post-link:hover .other-post-title {
        color: var(--clr-main);
    }

.blog .post-main-area .other-posts .other-post-img {
    position: relative;
    border-radius: 0.25rem;
    overflow: hidden;
}

    .blog .post-main-area .other-posts .other-post-img > img {
        filter: grayscale(0.5);
        transition: all 0.5s ease-in-out 0s;
        transform-origin: center;
    }

.blog .post-main-area .other-posts .other-post-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
    text-transform: capitalize;
    padding-top: 1.5rem;
    margin: 0;
    transition: color 0.2s ease-in-out 0s;
}

.blog .post-main-area .other-posts .prev-post,
.blog .post-main-area .other-posts .next-post {
    position: relative;
}

    .blog .post-main-area .other-posts .prev-post .icon,
    .blog .post-main-area .other-posts .next-post .icon {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 4rem;
        height: 4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        color: var(--clr-white);
        background-color: rgba(var(--clr-main-rgb), 1);
        cursor: pointer;
        transition: all 0.3s ease-in-out 0s;
    }

        .blog .post-main-area .other-posts .prev-post .icon:hover,
        .blog .post-main-area .other-posts .next-post .icon:hover {
            background-color: rgba(var(--clr-main-rgb), 0.8);
        }

        .blog .post-main-area .other-posts .prev-post .icon:after,
        .blog .post-main-area .other-posts .next-post .icon:after {
            content: "";
        }

        .blog .post-main-area .other-posts .prev-post .icon .icon,
        .blog .post-main-area .other-posts .next-post .icon .icon {
            display: flex;
        }

    .blog .post-main-area .other-posts .prev-post .icon {
        left: 1rem;
    }

    .blog .post-main-area .other-posts .next-post .icon {
        right: 1rem;
    }

.blog .post-main-area .author-profile .author-info {
    padding: 2rem 1rem 1rem;
    background-color: rgba(var(--clr-main-rgb), 0.15);
}

.blog .post-main-area .author-profile .author-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    overflow: hidden;
    float: left;
    border: 3px solid var(--clr-main);
}

.blog .post-main-area .author-profile .avatar-img {
    width: 100%;
    height: 100%;
}

.blog .post-main-area .author-profile .author-disc {
    overflow: hidden;
    padding: 1rem;
    padding-top: 0;
}

    .blog .post-main-area .author-profile .author-disc .author-link {
        text-decoration: none;
        color: var(--clr-main);
        font-size: 1.1rem;
        font-weight: 700;
        text-transform: capitalize;
    }

    .blog .post-main-area .author-profile .author-disc .author-bio {
        font-weight: 600;
    }

.blog .post-main-area .comments-area .comment-wrapper {
    margin-bottom: 2rem;
}

.blog .post-main-area .comments-area .comment-reply {
    padding-left: 3rem;
}

.blog .post-main-area .comments-area .author-avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    overflow: hidden;
    float: left;
    border: 3px solid var(--clr-main);
}

    .blog .post-main-area .comments-area .author-avatar .author-avatar-img {
        width: 100%;
        height: 100%;
    }

.blog .post-main-area .comments-area .comment-body {
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(var(--clr-main-rgb), 0.5);
    padding: 1rem;
    padding-top: 0;
    overflow: hidden;
}

    .blog .post-main-area .comments-area .comment-body .comment-author-link {
        text-decoration: none;
        color: var(--clr-main);
        font-size: 1.1rem;
        font-weight: 700;
        text-transform: capitalize;
        transition: color 0.3s ease-in-out 0s;
    }

    .blog .post-main-area .comments-area .comment-body .comment-date {
        margin-bottom: 1rem;
    }

        .blog .post-main-area .comments-area .comment-body .comment-date .date-link {
            font-size: 0.8rem;
            opacity: 0.75;
            text-decoration: none;
        }

    .blog .post-main-area .comments-area .comment-body .comment-text {
        font-size: 1rem;
        opacity: 0.75;
    }

    .blog .post-main-area .comments-area .comment-body .reply-action {
        text-align: right;
    }

        .blog .post-main-area .comments-area .comment-body .reply-action .reply-link {
            text-decoration: none;
            text-transform: uppercase;
            color: rgba(var(--clr-main-rgb), 0.7);
            font-size: 1rem;
            font-weight: 600;
            position: relative;
            padding-left: 1.5rem;
        }

            .blog .post-main-area .comments-area .comment-body .reply-action .reply-link:hover {
                color: rgba(var(--clr-main-rgb), 1);
            }

            .blog .post-main-area .comments-area .comment-body .reply-action .reply-link .icon {
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                color: var(--clr-main);
            }

/*    End blog Page  */