/*-----------------------------------------------------------------------------------

    Template Name: AYRO UI - STARTUP AND SAAS BUSINESS UI KIT
    Template URI: https://ayroui.com/
    Description: AYRO UI - STARTUP AND SAAS BUSINESS UI KIT
    Author: Uideck
    Author URI: https://uideck.com/
    Version: 1.1

-----------------------------------------------------------------------------------

    CSS INDEX
    ===================

    01.COMMON
    02.PAGE BANNER
    03.TYPOGRAPHY
    04.TABLE
    05.PROGRESS BARS
    06.FORM ELEMENTS
    07.LIST STYLES
    08.TABS AND ACCORDIONS	
    09.NAVBAR
    10.SLIDER
    11.BUTTON 
    12.ALERTS
    13.TEAM
    14.CARD
    15.ABOUT
    16.PRICING
    17.FEATURES
    18.PORTFOLIO
    19.CONTACT
    20.BLOG
    21.FOOTER
    22.HEADER
    23.ERROR
    24.CHECKOUT
    25.SING IN SING UP 
    26.TESTIMONIAL
    27.PRODUCT PAGE
    28.CLIENT
    29.CALL TO ACTION
    30.COMING SOON
    31.VIDEO
    32.PROFILE

-----------------------------------------------------------------------------------*/
/*===========================
      01.COMMON css 
===========================*/


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

a:focus,
input:focus,
textarea:focus,
button:focus {
  text-decoration: none;
  outline: none;
}

a {
  text-decoration: none;
  transition: all 0.3s ease-out 0s;
}

button {
  transition: all 0.3s ease-out 0s;
}

a:focus,
a:hover {
  text-decoration: none;
}

i,
span,
a {
  display: inline-block;
}



ul, ol {
  margin: 0px;
  padding: 0px;
  list-style-type: none;
}



.bg_cover {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

*:focus {
  outline: none;
}

/*===========================
     02.PAGE BANNER css 
===========================*/
.page-banner {
  background-color: #005ad5;
  padding-top: 30px;
  padding-bottom: 30px;
}

.page-banner .page-banner-content .sub-title {
  font-size: 38px;
  font-weight: 400;
  color: #fff;
  opacity: 0.6;
  line-height: 40px;
  text-transform: uppercase;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .page-banner .page-banner-content .sub-title {
    font-size: 38px;
    line-height: 45px;
  }
}

@media (max-width: 767px) {
  .page-banner .page-banner-content .sub-title {
    font-size: 20px;
    line-height: 25px;
  }
}

.page-banner .page-banner-content .page-title {
  font-size: 60px;
  line-height: 60px;
  color: #fff;
  text-transform: uppercase;
  margin-top: 16px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .page-banner .page-banner-content .page-title {
    font-size: 56px;
    line-height: 65px;
  }
}

@media (max-width: 767px) {
  .page-banner .page-banner-content .page-title {
    font-size: 40px;
    line-height: 55px;
  }
}

/*===========================
      03.TYPOGRAPHY css 
===========================*/
.heading {
  margin-top: 20px;
}

.heading .heading-one {
  font-size: 44px;
  font-weight: 600;
  line-height: 55px;
}

@media (max-width: 767px) {
  .heading .heading-one {
    font-size: 36px;
  }
}

.heading .heading-two {
  font-size: 36px;
  font-weight: 600;
  line-height: 45px;
}

@media (max-width: 767px) {
  .heading .heading-two {
    font-size: 28px;
  }
}

.heading .heading-three {
  font-size: 28px;
  font-weight: 600;
  line-height: 35px;
}

@media (max-width: 767px) {
  .heading .heading-three {
    font-size: 24px;
  }
}

.heading .heading-fore {
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
}

@media (max-width: 767px) {
  .heading .heading-fore {
    font-size: 20px;
  }
}

.heading .heading-five {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
}

@media (max-width: 767px) {
  .heading .heading-five {
    font-size: 16px;
  }
}

.heading .heading-six {
  font-size: 14px;
  font-weight: 600;
  line-height: 17.5px;
}

.heading .info {
  margin-top: 5px;
}

.paragraph {
  margin-top: 20px;
}

.display {
  margin-top: 20px;
}

.display .display-fore {
  font-size: 52px;
  font-weight: 400;
  line-height: 65px;
}

@media (max-width: 767px) {
  .display .display-fore {
    font-size: 38px;
  }
}

.display .display-three {
  font-size: 64px;
  font-weight: 400;
  line-height: 65px;
}

@media (max-width: 767px) {
  .display .display-three {
    font-size: 46px;
  }
}

.display .display-two {
  font-size: 76px;
  font-weight: 400;
  line-height: 95px;
}

@media (max-width: 767px) {
  .display .display-two {
    font-size: 52px;
  }
}

.display .display-one {
  font-size: 88px;
  font-weight: 400;
  line-height: 110px;
}

@media (max-width: 767px) {
  .display .display-one {
    font-size: 64px;
  }
}

.display .info {
  margin-top: 5px;
}

.typography-paragraph {
  margin-top: 50px;
}

.typography-paragraph .paragraph-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  margin-bottom: 20px;
}

.typography-paragraph .paragraph-text-one {
  font-size: 18px;
  line-height: 26px;
}

.typography-paragraph .paragraph-text-tow {
  font-size: 16px;
  line-height: 24px;
}

.typography-paragraph .paragraph-text-three {
  font-size: 14px;
  line-height: 20px;
}

.typography-paragraph .paragraph-text-fore {
  font-size: 12px;
  line-height: 18px;
}

.text-color.style-one p {
  margin-top: 10px;
  padding: 9px 0;
}

.text-color.style-one .default {
  color: #121212;
}

.text-color.style-one .primary {
  color: #0067f4;
}

.text-color.style-one .success {
  color: #4da422;
}

.text-color.style-one .info {
  color: #00b8d8;
}

.text-color.style-one .warning {
  color: #ffb400;
}

.text-color.style-one .danger {
  color: #fc3832;
}

.text-color.style-two p {
  margin-top: 10px;
  padding: 9px 15px;
}

.text-color.style-two .default {
  color: #121212;
  background-color: #f4f6f7;
  border-radius: 5px;
}

.text-color.style-two .primary {
  color: #0067f4;
  background-color: #deebfd;
  border-radius: 5px;
}

.text-color.style-two .success {
  color: #4da422;
  background-color: #e8f3e2;
  border-radius: 5px;
}

.text-color.style-two .info {
  color: #00b8d8;
  background-color: #def5f9;
  border-radius: 5px;
}

.text-color.style-two .warning {
  color: #ffb400;
  background-color: #fff5de;
  border-radius: 5px;
}

.text-color.style-two .danger {
  color: #fc3832;
  background-color: #fee5e4;
  border-radius: 5px;
}

.text-color.style-three p {
  margin-top: 10px;
  padding: 9px 15px;
}

.text-color.style-three .default {
  color: #fff;
  background-color: #121212;
  border-radius: 5px;
}

.text-color.style-three .primary {
  color: #fff;
  background-color: #0067f4;
  border-radius: 5px;
}

.text-color.style-three .success {
  color: #fff;
  background-color: #4da422;
  border-radius: 5px;
}

.text-color.style-three .info {
  color: #fff;
  background-color: #00b8d8;
  border-radius: 5px;
}

.text-color.style-three .warning {
  color: #fff;
  background-color: #ffb400;
  border-radius: 5px;
}

.text-color.style-three .danger {
  color: #fff;
  background-color: #fc3832;
  border-radius: 5px;
}

.text-color.style-fore p {
  margin-top: 10px;
  padding: 9px 15px;
}

.text-color.style-fore .default {
  color: #fff;
  background: #a4a4a4;
  background: linear-gradient(to right, #a4a4a4 0%, #121212 100%);
  border-radius: 5px;
}

.text-color.style-fore .primary {
  color: #fff;
  background: #0067f4;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  border-radius: 5px;
}

.text-color.style-fore .success {
  color: #fff;
  background: #4da422;
  background: linear-gradient(to right, #4da422 0%, #69e02e 100%);
  border-radius: 5px;
}

.text-color.style-fore .info {
  color: #fff;
  background: #00b8d8;
  background: linear-gradient(to right, #00b8d8 0%, #32fbfc 100%);
  border-radius: 5px;
}

.text-color.style-fore .warning {
  color: #fff;
  background: #ffb400;
  background: linear-gradient(to right, #ffb400 0%, #f7e500 100%);
  border-radius: 5px;
}

.text-color.style-fore .danger {
  color: #fff;
  background: #fc3832;
  background: linear-gradient(to right, #fc3832 0%, #dc312b 100%);
  border-radius: 5px;
}

.blockquotes-title .title {
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
}

.blockquotes-content.style-one {
  padding: 20px 40px 20px 0;
  position: relative;
}

.blockquotes-content.style-one::before {
  width: 100%;
  height: 4px;
  position: absolute;
  content: '';
  background-color: #f4f6f7;
  top: 0;
  left: 0;
  border-radius: 5px;
}

.blockquotes-content.style-one::after {
  width: 100%;
  height: 4px;
  position: absolute;
  content: '';
  background-color: #f4f6f7;
  bottom: 0;
  left: 0;
  border-radius: 5px;
}

.blockquotes-content.style-one .text {
  font-size: 16px;
  font-style: italic;
  margin-bottom: 15px;
}

.blockquotes-content.style-one .content-title {
  font-weight: 20;
  font-weight: 600;
  line-height: 25px;
}

.blockquotes-content.style-two {
  padding: 20px 25px;
  background: #9166fe;
  background: #9166fe;
  background: linear-gradient(to right, rgba(145, 102, 254, 0.078869) 0%, rgba(201, 122, 237, 0.0760679) 100%);
  border-radius: 5px;
  position: relative;
}

.blockquotes-content.style-two::before {
  width: 4px;
  height: 100%;
  position: absolute;
  content: '';
  background: #9166fe;
  background: linear-gradient(to right, #9166fe 0%, #c97aed 100%);
  top: 0;
  right: 0;
  border-radius: 5px;
}

.blockquotes-content.style-two .text {
  font-size: 16px;
  font-style: italic;
  margin-bottom: 10px;
}

.blockquotes-content.style-two .content-title {
  font-weight: 20;
  font-weight: 600;
  line-height: 25px;
}

.blockquotes-content.style-three {
  padding: 20px 25px;
  background: #9166fe;
  background: #9166fe;
  background: linear-gradient(to right, rgba(145, 102, 254, 0.078869) 0%, rgba(201, 122, 237, 0.0760679) 100%);
  border-radius: 5px;
  position: relative;
}

.blockquotes-content.style-three::before {
  width: 100%;
  height: 4px;
  position: absolute;
  content: '';
  background: #9166fe;
  background: linear-gradient(to right, #9166fe 0%, #c97aed 100%);
  top: 0;
  left: 0;
  border-radius: 5px;
}

.blockquotes-content.style-three .text {
  font-size: 16px;
  font-style: italic;
  margin-bottom: 10px;
}

.blockquotes-content.style-three .content-title {
  font-weight: 20;
  font-weight: 600;
  line-height: 25px;
}

.blockquotes-content.style-fore {
  padding: 20px 25px;
  background: #9166fe;
  background: #9166fe;
  background: linear-gradient(to right, rgba(145, 102, 254, 0.078869) 0%, rgba(201, 122, 237, 0.0760679) 100%);
  border-radius: 5px;
  position: relative;
}

.blockquotes-content.style-fore::before {
  width: 100%;
  height: 4px;
  position: absolute;
  content: '';
  background: #9166fe;
  background: linear-gradient(to right, #9166fe 0%, #c97aed 100%);
  top: 0;
  left: 0;
  border-radius: 5px;
}

.blockquotes-content.style-fore::after {
  width: 100%;
  height: 4px;
  position: absolute;
  content: '';
  background: #9166fe;
  background: linear-gradient(to right, #9166fe 0%, #c97aed 100%);
  bottom: 0;
  left: 0;
  border-radius: 5px;
}

.blockquotes-content.style-fore .text {
  font-size: 16px;
  font-style: italic;
  margin-bottom: 10px;
}

.blockquotes-content.style-fore .content-title {
  font-weight: 20;
  font-weight: 600;
  line-height: 25px;
}

.blockquotes-content.style-five {
  padding: 20px 25px;
  background-color: rgba(203, 206, 209, 0.08);
  position: relative;
}

.blockquotes-content.style-five::before {
  width: 100%;
  height: 4px;
  position: absolute;
  content: '';
  background-color: #cbced1;
  top: 0;
  left: 0;
  border-radius: 5px;
}

.blockquotes-content.style-five .text {
  font-size: 16px;
  font-style: italic;
  margin-bottom: 10px;
}

.blockquotes-content.style-five .content-title {
  font-weight: 20;
  font-weight: 600;
  line-height: 25px;
}

.blockquotes-content.style-six {
  padding: 20px 25px;
  background: #9166fe;
  background: #9166fe;
  background: linear-gradient(to right, rgba(145, 102, 254, 0.078869) 0%, rgba(201, 122, 237, 0.0760679) 100%);
  border-radius: 5px;
  position: relative;
}

.blockquotes-content.style-six::before {
  width: 4px;
  height: 100%;
  position: absolute;
  content: '';
  background: #9166fe;
  background: linear-gradient(to right, #9166fe 0%, #c97aed 100%);
  top: 0;
  left: 0;
  border-radius: 5px;
}

.blockquotes-content.style-six .text {
  font-size: 16px;
  font-style: italic;
  margin-bottom: 10px;
}

.blockquotes-content.style-six .content-title {
  font-weight: 20;
  font-weight: 600;
  line-height: 25px;
}

/*===========================
        04.TABLE css 
===========================*/
.table-title {
  font-size: 36px;
  font-weight: 600;
  line-height: 45px;
  color: #6c6c6c;
}

@media (max-width: 767px) {
  .table-title {
    font-size: 24px;
    line-height: 35px;
  }
}

.table-style .table {
  border-bottom: 2px solid #cbced1;
}

.table-style .table .table-thead tr th {
  border: 0;
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  font-weight: 700;
  padding: 13px 16px;
  min-width: 170px;
}

@media (max-width: 767px) {
  .table-style .table .table-thead tr th {
    font-size: 14px;
    padding: 10px 13px;
    min-width: 140px;
  }
}

.table-style .table .table-tbody tr td {
  border: 0;
  font-size: 16px;
  line-height: 24px;
  color: #121212;
  font-weight: 400;
  padding: 13px 16px;
}

@media (max-width: 767px) {
  .table-style .table .table-tbody tr td {
    font-size: 14px;
    padding: 10px 13px;
  }
}

.table-style.style-one .table.striped .table-tbody tr:nth-of-type(2n+2) {
  background-color: #f4f6f7;
}

.table-style.style-one .table .table-thead tr {
  background: #0067f4;
  background: linear-gradient(#0067f4 0%, #2bdbdc 100%);
}

.table-style.style-two .table.striped .table-tbody tr:nth-of-type(2n+2) {
  background-color: #deebfd;
}

.table-style.style-two .table .table-thead tr {
  background-color: #0067f4;
}

.table-style.style-two .table .table-thead tr th {
  border-left: 1px solid #cbced1;
  border-right: 1px solid #cbced1;
}

.table-style.style-two .table .table-tbody tr td {
  border-left: 1px solid #cbced1;
  border-right: 1px solid #cbced1;
}

.table-style.style-three .table.striped .table-tbody tr:nth-of-type(2n+2) {
  background-color: #f4f6f7;
}

.table-style.style-three .table .table-thead tr {
  background-color: #deebfd;
}

.table-style.style-three .table .table-thead tr th {
  color: #0067f4;
  border-left: 1px solid #cbced1;
  border-right: 1px solid #cbced1;
}

.table-style.style-three .table .table-tbody tr td {
  border-left: 1px solid #cbced1;
  border-right: 1px solid #cbced1;
}

.table-style.style-four .table .table-thead tr {
  border-top: 2px solid #6c6c6c;
  border-bottom: 2px solid #6c6c6c;
}

.table-style.style-four .table .table-thead tr th {
  color: #121212;
}

.table-style.style-four .table .table-tbody tr {
  border-bottom: 1px solid #cbced1;
}

.table-style.style-five .table.striped .table-tbody tr:nth-of-type(2n+2) {
  background-color: #f4f6f7;
}

.table-style.style-five .table .table-thead tr {
  background: #f45e7a;
  background: linear-gradient(#f45e7a 0%, #ffa97c 100%);
}

.table-style.style-six .table.striped .table-tbody tr:nth-of-type(2n+2) {
  background-color: #f4f6f7;
}

.table-style.style-six .table .table-thead tr {
  background: #9166fe;
  background: linear-gradient(#9166fe 0%, #c97aed 100%);
}

/*===========================
    05.PROGRESS BARS css 
===========================*/
.progress-title {
  font-size: 36px;
  font-weight: 600;
  line-height: 45px;
  color: #6c6c6c;
}

@media (max-width: 767px) {
  .progress-title {
    font-size: 24px;
    line-height: 35px;
  }
}

.color-one {
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
}

.color-two {
  background: linear-gradient(to right, #4da422 0%, #69e02e 100%);
}

.color-three {
  background: linear-gradient(to right, #00b8d8 0%, #32fbfc 100%);
}

.color-four {
  background: linear-gradient(to right, #ffb400 0%, #f7e500 100%);
}

.color-five {
  background: linear-gradient(to right, #fc3832 0%, #dc312b 100%);
}

.progress-style .single-progress-bar {
  margin-top: 30px;
}

.progress-style .single-progress-bar .progress-outter {
  width: 100%;
  background-color: #e9ecef;
  height: 32px;
  border-radius: 50px;
  position: relative;
}

.progress-style .single-progress-bar .progress-outter .progress-content {
  position: absolute;
  top: 0;
  left: 0;
  height: 32px;
  border-radius: 50px;
  width: 0;
  transition: all 2s ease-out 0s;
}

.progress-style.style-two .single-progress-bar .progress-text {
  color: #fff;
  padding: 0 25px;
  position: absolute;
  top: 0;
  left: 0;
  line-height: 32px;
}

.progress-style.style-three .single-progress-bar {
  margin-top: 68px;
}

.progress-style.style-three .single-progress-bar .progress-outter {
  height: 16px;
}

.progress-style.style-three .single-progress-bar .progress-outter .progress-content {
  height: 16px;
}

.progress-style.style-four .single-progress-bar {
  margin-top: 35px;
}

.progress-style.style-four .single-progress-bar .progress-title-holder {
  margin-bottom: 8px;
}

.progress-style.style-four .single-progress-bar .progress-title-holder .holder-title p {
  font-size: 16px;
  line-height: 24px;
  color: #121212;
}

.progress-style.style-four .single-progress-bar .progress-title-holder .holder-percent span {
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  color: #121212;
}

.progress-style.style-four .single-progress-bar .progress-outter {
  height: 16px;
}

.progress-style.style-four .single-progress-bar .progress-outter .progress-content {
  height: 16px;
}

.progress-style.style-five .single-progress-bar {
  margin-top: 70px;
}

.progress-style.style-five .single-progress-bar .progress-title-holder {
  margin-top: 8px;
}

.progress-style.style-five .single-progress-bar .progress-title-holder .holder-percent span {
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
  color: #121212;
}

.progress-style.style-five .single-progress-bar .progress-outter {
  height: 16px;
}

.progress-style.style-five .single-progress-bar .progress-outter .progress-content {
  height: 16px;
}

.progress-style.style-five .single-progress-bar .progress-outter .progress-content .holder-title {
  width: 120px;
  text-align: center;
  height: 30px;
  border-radius: 50px;
  position: absolute;
  top: -45px;
  right: -60px;
}

.progress-style.style-five .single-progress-bar .progress-outter .progress-content .holder-title p {
  font-size: 16px;
  line-height: 30px;
  color: #fff;
}

/*===== COUNTER STYLE =====*/
.counter-style .counter-one {
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16);
  padding-top: 55px;
  padding-bottom: 40px;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  text-align: center;
}

.counter-style .counter-one::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 4px;
  top: 0;
  left: 0;
  background: #0067f4;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
}

.counter-style .counter-one .counter-icon {
  margin-bottom: 5px;
}

.counter-style .counter-one .counter-icon i {
  font-size: 80px;
  line-height: 60px;
  color: #0067f4;
}

.counter-style .counter-one .counter-content .count {
  font-size: 44px;
  font-weight: 600;
  line-height: 55px;
  color: #121212;
  margin-bottom: 4px;
}

.counter-style .counter-one .counter-content .text {
  font-size: 24px;
  color: #6c6c6c;
}

.counter-style .counter-two {
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16);
  padding: 23px;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
}

.counter-style .counter-two::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 4px;
  top: 0;
  left: 0;
  background: #fc3832;
  background: linear-gradient(to right, #fc3832 0%, #dc312b 100%);
}

.counter-style .counter-two .counter-icon {
  margin-bottom: 5px;
}

.counter-style .counter-two .counter-icon i {
  font-size: 66px;
  line-height: 60px;
  color: #fc3832;
}

.counter-style .counter-two .counter-content {
  padding-left: 11px;
}

.counter-style .counter-two .counter-content .count {
  font-size: 36px;
  font-weight: 600;
  line-height: 45px;
  color: #121212;
  margin-bottom: 4px;
}

.counter-style .counter-two .counter-content .text {
  font-size: 16px;
  color: #6c6c6c;
}

.counter-style .counter-three {
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16);
  padding: 23px;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  background: #4da422;
  background: linear-gradient(to right, #4da422 0%, #69e02e 100%);
}

.counter-style .counter-three .counter-icon {
  margin-bottom: 5px;
}

.counter-style .counter-three .counter-icon i {
  font-size: 66px;
  line-height: 60px;
  color: #fff;
}

.counter-style .counter-three .counter-content {
  padding-left: 11px;
}

.counter-style .counter-three .counter-content .count {
  font-size: 36px;
  font-weight: 600;
  line-height: 45px;
  color: #fff;
  margin-bottom: 4px;
}

.counter-style .counter-three .counter-content .text {
  font-size: 16px;
  color: #fff;
}

.counter-style .counter-four {
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16);
  padding: 23px;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
}

.counter-style .counter-four::before {
  position: absolute;
  content: '';
  width: 4px;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(#2bdbdc 0%, #0067f4 100%);
}

.counter-style .counter-four .counter-icon {
  margin-bottom: 5px;
}

.counter-style .counter-four .counter-icon i {
  font-size: 66px;
  line-height: 60px;
  color: #0067f4;
}

.counter-style .counter-four .counter-content {
  padding-left: 11px;
}

.counter-style .counter-four .counter-content .count {
  font-size: 36px;
  font-weight: 600;
  line-height: 45px;
  color: #121212;
  margin-bottom: 4px;
}

.counter-style .counter-four .counter-content .text {
  font-size: 16px;
  color: #6c6c6c;
}

.counter-style .counter-five {
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16);
  padding: 23px;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
}

.counter-style .counter-five .counter-icon {
  margin-bottom: 5px;
}

.counter-style .counter-five .counter-icon i {
  font-size: 66px;
  line-height: 60px;
  color: #fff;
}

.counter-style .counter-five .counter-content {
  padding-left: 11px;
}

.counter-style .counter-five .counter-content .count {
  font-size: 36px;
  font-weight: 600;
  line-height: 45px;
  color: #fff;
  margin-bottom: 4px;
}

.counter-style .counter-five .counter-content .text {
  font-size: 16px;
  color: #fff;
}

.counter-style .counter-six {
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.16);
  padding-top: 55px;
  padding-bottom: 40px;
  position: relative;
  border-radius: 5px;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
}

.counter-style .counter-six .counter-icon {
  margin-bottom: 5px;
}

.counter-style .counter-six .counter-icon i {
  font-size: 80px;
  line-height: 60px;
  color: #fff;
}

.counter-style .counter-six .counter-content .count {
  font-size: 44px;
  font-weight: 600;
  line-height: 55px;
  color: #fff;
  margin-bottom: 4px;
}

.counter-style .counter-six .counter-content .text {
  font-size: 24px;
  color: #fff;
}

.single-counter .counter-shape {
  width: 55px;
}

.single-counter .counter-shape .shape-1,
.single-counter .counter-shape .shape-2 {
  width: 14px;
  height: 70px;
  position: relative;
  transform: rotate(25deg);
  left: 12px;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .single-counter .counter-shape .shape-1,
  .single-counter .counter-shape .shape-2 {
    width: 10px;
  }
}

.single-counter .counter-shape .shape-1::before, .single-counter .counter-shape .shape-1::after,
.single-counter .counter-shape .shape-2::before,
.single-counter .counter-shape .shape-2::after {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  top: -1px;
  right: -1px;
  border-top: 12px solid #fff;
  border-left: 16px solid transparent;
}

.single-counter .counter-shape .shape-1::after,
.single-counter .counter-shape .shape-2::after {
  border-top: 0;
  border-bottom: 6px solid #fff;
  top: auto;
  bottom: -1px;
}

.single-counter .counter-shape .shape-1 {
  opacity: 0.5;
  left: 15px;
  bottom: 1px;
}

.single-counter .counter-content {
  padding-left: 10px;
}

.single-counter .counter-content .counter-count {
  font-size: 48px;
  font-weight: 700;
  line-height: 50px;
  color: #121212;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .single-counter .counter-content .counter-count {
    font-size: 32px;
  }
}

.single-counter .counter-content .text {
  font-weight: 500;
  color: #a4a4a4;
}

.single-counter.counter-color-1 .counter-shape .shape-1,
.single-counter.counter-color-1 .counter-shape .shape-2 {
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
}

.single-counter.counter-color-2 .counter-shape .shape-1,
.single-counter.counter-color-2 .counter-shape .shape-2 {
  background: linear-gradient(to right, #4da422 0%, #69e02e 100%);
}

.single-counter.counter-color-3 .counter-shape .shape-1,
.single-counter.counter-color-3 .counter-shape .shape-2 {
  background: linear-gradient(to right, #00b8d8 0%, #32fbfc 100%);
}

.single-counter.counter-color-4 .counter-shape .shape-1,
.single-counter.counter-color-4 .counter-shape .shape-2 {
  background: linear-gradient(to right, #ffb400 0%, #f7e500 100%);
}

/*===== COUNTER STYLE =====*/
.circle-progress .circles-text {
  font-size: 24px !important;
  font-weight: 700;
  color: #000;
}

.circle-progress .circle-progress-content {
  padding-left: 30px;
}

.circle-progress .circle-progress-content .circle-progress-title {
  font-size: 18px;
  line-height: 30px;
}

.circle-progress .ldBar.label-center > .ldBar-label {
  font-size: 24px;
  font-weight: 700;
  color: #000;
}

/*===========================
    06.FORM ELEMENTS css 
===========================*/
.form-elements-title {
  font-size: 36px;
  font-weight: 600;
  line-height: 45px;
  color: #6c6c6c;
}

@media (max-width: 767px) {
  .form-elements-title {
    font-size: 24px;
    line-height: 35px;
  }
}

.form-group {
  margin-bottom: 0;
}

.form-input .help-block {
  margin-top: 2px;
}

.form-input .help-block .list-unstyled li {
  font-size: 12px;
  line-height: 16px;
  color: #fc3832;
}

.form-input label {
  font-size: 12px;
  line-height: 18px;
  color: #6c6c6c;
  margin-bottom: 8px;
  display: inline-block;
}

.form-input .input-items {
  position: relative;
}

.form-input .input-items input,
.form-input .input-items textarea {
  width: 100%;
  height: 44px;
  border: 2px solid;
  padding-left: 44px;
  padding-right: 12px;
  position: relative;
  font-size: 16px;
}

.form-input .input-items textarea {
  padding-top: 8px;
  height: 130px;
  resize: none;
}

.form-input .input-items i {
  position: absolute;
  top: 11px;
  left: 13px;
  font-size: 20px;
  z-index: 9;
}

.form-input .input-items.default input,
.form-input .input-items.default textarea {
  border-color: #a4a4a4;
  color: #6c6c6c;
}

.form-input .input-items.default input:focus,
.form-input .input-items.default textarea:focus {
  border-color: #0067f4;
}

.form-input .input-items.default input::placeholder,
.form-input .input-items.default textarea::placeholder {
  color: #6c6c6c;
  opacity: 1;
}

.form-input .input-items.default input::-moz-placeholder,
.form-input .input-items.default textarea::-moz-placeholder {
  color: #6c6c6c;
  opacity: 1;
}

.form-input .input-items.default input::-moz-placeholder,
.form-input .input-items.default textarea::-moz-placeholder {
  color: #6c6c6c;
  opacity: 1;
}

.form-input .input-items.default input::-webkit-input-placeholder,
.form-input .input-items.default textarea::-webkit-input-placeholder {
  color: #6c6c6c;
  opacity: 1;
}

.form-input .input-items.default i {
  color: #6c6c6c;
}

.form-input .input-items.active input,
.form-input .input-items.active textarea {
  border-color: #0067f4;
  color: #121212;
}

.form-input .input-items.active input::placeholder,
.form-input .input-items.active textarea::placeholder {
  color: #121212;
  opacity: 1;
}

.form-input .input-items.active input::-moz-placeholder,
.form-input .input-items.active textarea::-moz-placeholder {
  color: #121212;
  opacity: 1;
}

.form-input .input-items.active input::-moz-placeholder,
.form-input .input-items.active textarea::-moz-placeholder {
  color: #121212;
  opacity: 1;
}

.form-input .input-items.active input::-webkit-input-placeholder,
.form-input .input-items.active textarea::-webkit-input-placeholder {
  color: #121212;
  opacity: 1;
}

.form-input .input-items.active i {
  color: #0067f4;
}

.form-input .input-items.error input,
.form-input .input-items.error textarea {
  border-color: #fc3832;
  color: #fc3832;
}

.form-input .input-items.error input::placeholder,
.form-input .input-items.error textarea::placeholder {
  color: #fc3832;
  opacity: 1;
}

.form-input .input-items.error input::-moz-placeholder,
.form-input .input-items.error textarea::-moz-placeholder {
  color: #fc3832;
  opacity: 1;
}

.form-input .input-items.error input::-moz-placeholder,
.form-input .input-items.error textarea::-moz-placeholder {
  color: #fc3832;
  opacity: 1;
}

.form-input .input-items.error input::-webkit-input-placeholder,
.form-input .input-items.error textarea::-webkit-input-placeholder {
  color: #fc3832;
  opacity: 1;
}

.form-input .input-items.error i {
  color: #fc3832;
}

.form-input .input-items.success input,
.form-input .input-items.success textarea {
  border-color: #4da422;
  color: #4da422;
}

.form-input .input-items.success input::placeholder,
.form-input .input-items.success textarea::placeholder {
  color: #4da422;
  opacity: 1;
}

.form-input .input-items.success input::-moz-placeholder,
.form-input .input-items.success textarea::-moz-placeholder {
  color: #4da422;
  opacity: 1;
}

.form-input .input-items.success input::-moz-placeholder,
.form-input .input-items.success textarea::-moz-placeholder {
  color: #4da422;
  opacity: 1;
}

.form-input .input-items.success input::-webkit-input-placeholder,
.form-input .input-items.success textarea::-webkit-input-placeholder {
  color: #4da422;
  opacity: 1;
}

.form-input .input-items.success i {
  color: #4da422;
}

.form-input .input-items.disabled input,
.form-input .input-items.disabled textarea {
  border-color: #a4a4a4;
  color: #6c6c6c;
  background: none;
}

.form-input .input-items.disabled input::placeholder,
.form-input .input-items.disabled textarea::placeholder {
  color: #6c6c6c;
  opacity: 1;
}

.form-input .input-items.disabled input::-moz-placeholder,
.form-input .input-items.disabled textarea::-moz-placeholder {
  color: #6c6c6c;
  opacity: 1;
}

.form-input .input-items.disabled input::-moz-placeholder,
.form-input .input-items.disabled textarea::-moz-placeholder {
  color: #6c6c6c;
  opacity: 1;
}

.form-input .input-items.disabled input::-webkit-input-placeholder,
.form-input .input-items.disabled textarea::-webkit-input-placeholder {
  color: #6c6c6c;
  opacity: 1;
}

.form-input .input-items.disabled i {
  color: #6c6c6c;
}

.form-style-two .form-input .input-items input,
.form-style-two .form-input .input-items textarea {
  border-radius: 5px;
  padding-left: 12px;
  padding-right: 44px;
}

.form-style-two .form-input .input-items i {
  left: auto;
  right: 13px;
}

.form-style-three .form-input {
  text-align: center;
}

.form-style-three .form-input .input-items input,
.form-style-three .form-input .input-items textarea {
  border-radius: 50px;
  text-align: center;
}

.form-style-four .form-input label {
  padding-left: 44px;
  margin-bottom: 0;
}

.form-style-four .form-input .input-items input,
.form-style-four .form-input .input-items textarea {
  border-top: 0;
  border-left: 0;
  border-right: 0;
}

.form-style-five .form-input {
  position: relative;
}

.form-style-five .form-input label {
  position: absolute;
  top: -10px;
  left: 10px;
  background-color: #fff;
  z-index: 5;
  padding: 0 5px;
}

.form-style-five .form-input .input-items input,
.form-style-five .form-input .input-items textarea {
  border-radius: 5px;
}

/*===========================
    07.LIST STYLES css 
===========================*/
.list-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  color: #6c6c6c;
}

@media (max-width: 767px) {
  .list-title {
    font-size: 20px;
    line-height: 30px;
  }
}

.list-style .list-style-one ul li {
  font-size: 16px;
  line-height: 24px;
  margin-top: 13px;
  color: #121212;
}

.list-style .list-style-one ul li span {
  font-size: 16px;
  font-weight: 600;
  color: #121212;
  line-height: 25px;
  margin-right: 13px;
}

.list-style .list-style-two ul li {
  font-size: 16px;
  line-height: 24px;
  margin-top: 13px;
  color: #121212;
}

.list-style .list-style-two ul li i {
  font-size: 16px;
  font-weight: 600;
  color: #0067f4;
  line-height: 25px;
  margin-right: 7px;
}

.list-style .list-style-three ul li {
  font-size: 16px;
  line-height: 24px;
  margin-top: 13px;
  color: #121212;
}

.list-style .list-style-three ul li i {
  font-size: 16px;
  font-weight: 600;
  color: #00b8d8;
  line-height: 25px;
  margin-right: 6px;
}

.list-style .list-style-four ul li {
  font-size: 16px;
  line-height: 24px;
  margin-top: 13px;
  color: #121212;
}

.list-style .list-style-four ul li i {
  font-size: 16px;
  font-weight: 600;
  color: #ffb400;
  line-height: 25px;
  margin-right: 6px;
}

.list-style .list-style-five ul li {
  font-size: 16px;
  line-height: 24px;
  margin-top: 13px;
  color: #121212;
}

.list-style .list-style-five ul li i {
  font-size: 16px;
  font-weight: 600;
  color: #4da422;
  line-height: 25px;
  margin-right: 7px;
}

.list-style .list-style-six ul li {
  font-size: 16px;
  line-height: 24px;
  margin-top: 13px;
  color: #121212;
}

.list-style .list-style-six ul li i {
  font-size: 16px;
  font-weight: 600;
  color: #fc3832;
  line-height: 25px;
  margin-right: 7px;
}

.list-style .list-style-seven ul li {
  font-size: 16px;
  line-height: 24px;
  margin-top: 13px;
  color: #121212;
}

.list-style .list-style-seven ul li i {
  font-size: 16px;
  font-weight: 600;
  color: #4da422;
  line-height: 25px;
  margin-right: 7px;
}

.list-style .list-style-eight ul li {
  font-size: 16px;
  line-height: 24px;
  margin-top: 13px;
  color: #121212;
}

.list-style .list-style-eight ul li i {
  font-size: 16px;
  font-weight: 600;
  color: #00b8d8;
  line-height: 25px;
  margin-right: 7px;
}

.list-style .list-style-nine ul li {
  font-size: 16px;
  line-height: 24px;
  margin-top: 13px;
  color: #121212;
}

.list-style .list-style-nine ul li i {
  font-size: 16px;
  font-weight: 600;
  color: #0067f4;
  line-height: 25px;
  margin-right: 7px;
}

.list-style .list-style-ten ul li {
  font-size: 16px;
  line-height: 24px;
  margin-top: 13px;
  color: #121212;
}

.list-style .list-style-ten ul li i {
  font-size: 16px;
  font-weight: 600;
  color: #0067f4;
  line-height: 25px;
  margin-right: 6px;
}

.list-style .list-style-eleven ul li {
  font-size: 16px;
  line-height: 24px;
  margin-top: 13px;
  color: #121212;
}

.list-style .list-style-eleven ul li i {
  font-size: 16px;
  font-weight: 600;
  color: #0067f4;
  line-height: 25px;
  margin-right: 6px;
}

.list-style .list-style-twenty ul li {
  font-size: 16px;
  line-height: 24px;
  margin-top: 13px;
  color: #121212;
}

.list-style .list-style-twenty ul li span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #121212;
  margin-right: 6px;
}

/*===========================
  08.TABS AND ACCORDIONS css 
===========================*/
.tabs-title {
  font-size: 36px;
  font-weight: 600;
  line-height: 45px;
  color: #6c6c6c;
}

@media (max-width: 767px) {
  .tabs-title {
    font-size: 24px;
    line-height: 35px;
  }
}

.tebs-one {
  border: 1px solid #cbced1;
}

.tebs-one .nav {
  border-bottom: 1px solid #cbced1;
}

@media (max-width: 767px) {
  .tebs-one .nav {
    display: block;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tebs-one .nav {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
  }
}

.tebs-one .nav .nav-item a {
  font-size: 16px;
  line-height: 24px;
  color: #a4a4a4;
  font-weight: 700;
  padding: 13px;
  transition: all 0.3s ease-out 0s;
  display: block;
}

.tebs-one .nav .nav-item a.active {
  color: #fff;
  background: #0067f4;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
}

.tebs-one .tab-content .tab-text {
  padding: 15px;
}

.tebs-one .tab-content .tab-text .text {
  font-size: 14px;
  color: #121212;
  line-height: 20px;
}

.tebs-two {
  border: 1px solid #cbced1;
}

@media (max-width: 767px) {
  .tebs-two .nav {
    display: block;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tebs-two .nav {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
  }
}

.tebs-two .nav .nav-item a {
  font-size: 16px;
  line-height: 24px;
  color: #a4a4a4;
  font-weight: 700;
  padding: 13px;
  transition: all 0.3s ease-out 0s;
  display: block;
  border-bottom: 1px solid #cbced1;
  position: relative;
}

.tebs-two .nav .nav-item a.active {
  color: #0067f4;
  border: 1px solid #cbced1;
  border-bottom: 0;
  border-top: 0;
}

@media (max-width: 767px) {
  .tebs-two .nav .nav-item a.active {
    border: 1px solid #cbced1;
    border-top: 0;
    border-left: 0;
    border-right: 0;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tebs-two .nav .nav-item a.active {
    border: 1px solid #cbced1;
    border-bottom: 0;
    border-top: 0;
  }
}

.tebs-two .nav .nav-item a.active::before {
  position: absolute;
  content: '';
  top: 0;
  width: 100%;
  height: 4px;
  left: 0;
  background: #0067f4;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
}

.tebs-two .nav .nav-item:first-child a.active {
  border-left: 0;
}

.tebs-two .nav .nav-item:last-child a.active {
  border-right: 0;
}

.tebs-two .tab-content .tab-text {
  padding: 15px;
}

.tebs-two .tab-content .tab-text .text {
  font-size: 14px;
  color: #121212;
  line-height: 20px;
}

@media (max-width: 767px) {
  .tebs-three .nav {
    display: block;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tebs-three .nav {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
  }
}

.tebs-three .nav .nav-item a {
  font-size: 16px;
  line-height: 24px;
  color: #a4a4a4;
  font-weight: 700;
  padding: 13px;
  transition: all 0.3s ease-out 0s;
  display: block;
  position: relative;
}

.tebs-three .nav .nav-item a i {
  margin-right: 5px;
  font-size: 18px;
}

.tebs-three .nav .nav-item a::before {
  position: absolute;
  content: '';
  background-color: #a4a4a4;
  width: 100%;
  height: 4px;
  left: 0;
  bottom: 0;
}

.tebs-three .nav .nav-item a.active {
  color: #0067f4;
}

.tebs-three .nav .nav-item a.active::before {
  background: #0067f4;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
}

.tebs-three .tab-content .tab-text {
  padding: 15px;
}

.tebs-three .tab-content .tab-text .text {
  font-size: 14px;
  color: #121212;
  line-height: 20px;
}

@media (max-width: 767px) {
  .tebs-four .nav {
    display: block;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tebs-four .nav {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
  }
}

.tebs-four .nav .nav-item a {
  font-size: 16px;
  line-height: 24px;
  color: #a4a4a4;
  font-weight: 700;
  padding: 13px;
  transition: all 0.3s ease-out 0s;
  display: block;
  position: relative;
}

@media (max-width: 767px) {
  .tebs-four .nav .nav-item a {
    margin-top: -4px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .tebs-four .nav .nav-item a {
    margin-top: 0;
  }
}

.tebs-four .nav .nav-item a i {
  margin-right: 5px;
  font-size: 18px;
}

.tebs-four .nav .nav-item a::before {
  position: absolute;
  content: '';
  background-color: #a4a4a4;
  width: 100%;
  height: 4px;
  left: 0;
  bottom: 0;
}

.tebs-four .nav .nav-item a.active {
  color: #fff;
  background: #0067f4;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
}

.tebs-four .nav .nav-item a.active::before {
  background: #0067f4;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
}

.tebs-four .tab-content .tab-text {
  padding: 15px;
}

.tebs-four .tab-content .tab-text .text {
  font-size: 14px;
  color: #121212;
  line-height: 20px;
}

.tebs-four .nav .nav-item a {
  font-size: 16px;
  line-height: 24px;
  color: #a4a4a4;
  font-weight: 700;
  padding: 13px;
  transition: all 0.3s ease-out 0s;
  display: block;
  position: relative;
}

.tebs-four .nav .nav-item a i {
  margin-right: 5px;
  font-size: 18px;
}

.tebs-four .nav .nav-item a::before {
  position: absolute;
  content: '';
  background-color: #a4a4a4;
  width: 100%;
  height: 4px;
  left: 0;
  bottom: 0;
}

.tebs-four .nav .nav-item a.active {
  color: #fff;
  background: #0067f4;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
}

.tebs-four .nav .nav-item a.active::before {
  background: #0067f4;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
}

.tebs-four .tab-content .tab-text {
  padding: 15px;
}

.tebs-four .tab-content .tab-text .text {
  font-size: 14px;
  color: #121212;
  line-height: 20px;
}

.tebs-five {
  border: 1px solid #cbced1;
}

.tebs-five .nav {
  border-right: 1px solid #cbced1;
  height: 100%;
}

.tebs-five .nav a {
  font-size: 16px;
  line-height: 24px;
  color: #a4a4a4;
  font-weight: 700;
  padding: 13px;
  transition: all 0.3s ease-out 0s;
  display: block;
  position: relative;
  text-align: center;
}

.tebs-five .nav a i {
  margin-right: 5px;
  font-size: 18px;
}

.tebs-five .nav a.active {
  color: #fff;
  background: #0067f4;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
}

.tebs-five .tab-content .tab-text {
  padding: 15px;
}

.tebs-five .tab-content .tab-text .text {
  font-size: 14px;
  color: #121212;
  line-height: 20px;
}

.tebs-six .nav {
  height: 100%;
  position: relative;
}

.tebs-six .nav::before {
  position: absolute;
  content: '';
  width: 4px;
  height: 100%;
  background-color: #cbced1;
  top: 0;
  right: 0;
}

.tebs-six .nav a {
  font-size: 16px;
  line-height: 24px;
  color: #a4a4a4;
  font-weight: 700;
  padding: 13px;
  transition: all 0.3s ease-out 0s;
  display: block;
  position: relative;
  text-align: center;
}

.tebs-six .nav a i {
  margin-right: 5px;
  font-size: 18px;
}

.tebs-six .nav a.active {
  color: #0067f4;
}

.tebs-six .nav a.active::before {
  position: absolute;
  content: '';
  width: 4px;
  height: 100%;
  background: #2bdbdc;
  background: linear-gradient(#2bdbdc 0%, #0067f4 100%);
  top: 0;
  right: 0;
}

.tebs-six .tab-content .tab-text {
  padding: 15px;
}

.tebs-six .tab-content .tab-text .text {
  font-size: 14px;
  color: #121212;
  line-height: 20px;
}

.accordion-style-one .accordion .card {
  margin-top: 8px;
  border: 1px solid #cbced1 !important;
  border-radius: 0;
}

.accordion-style-one .accordion .card .card-header {
  padding: 0;
  background: none;
}

.accordion-style-one .accordion .card .card-header a {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  position: relative;
  color: #0067f4;
  transition: all 0.3s ease-out 0s;
  border: 1px solid #0067f4;
  margin: -1px;
  border-radius: 0;
  padding: 13px 16px;
  z-index: 5;
}

.accordion-style-one .accordion .card .card-header a::before {
  position: absolute;
  content: "\ea58";
  font-family: lineicons !important;
  right: 16px;
  top: 14px;
  font-size: 16px;
  transition: all 0.3s ease-out 0s;
  transform: rotate(180deg);
}

.accordion-style-one .accordion .card .card-header a.collapsed {
  color: #121212;
  border-color: #cbced1;
}

.accordion-style-one .accordion .card .card-header a.collapsed::before {
  transform: rotate(0);
}

.accordion-style-one .accordion .card .card-body {
  padding: 16px;
}

.accordion-style-one .accordion .card .card-body .text {
  font-size: 14px;
  color: #121212;
  line-height: 24px;
}

.accordion-style-two .accordion .card {
  margin-top: 8px;
  border: 1px solid #cbced1 !important;
  border-radius: 0;
}

.accordion-style-two .accordion .card .card-header {
  padding: 0;
  background: none;
}

.accordion-style-two .accordion .card .card-header a {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  position: relative;
  color: #fff;
  transition: all 0.3s ease-out 0s;
  border: 1px solid #0067f4;
  margin: -1px;
  border-radius: 0;
  padding: 13px 16px;
  z-index: 5;
  background-color: #0067f4;
}

.accordion-style-two .accordion .card .card-header a::before {
  position: absolute;
  content: "\ea58";
  font-family: lineicons !important;
  right: 16px;
  top: 14px;
  font-size: 16px;
  transition: all 0.3s ease-out 0s;
  transform: rotate(180deg);
}

.accordion-style-two .accordion .card .card-header a.collapsed {
  color: #121212;
  border-color: #cbced1;
  background-color: transparent;
}

.accordion-style-two .accordion .card .card-header a.collapsed::before {
  transform: rotate(0);
}

.accordion-style-two .accordion .card .card-body {
  padding: 16px;
}

.accordion-style-two .accordion .card .card-body .text {
  font-size: 14px;
  color: #121212;
  line-height: 24px;
}

.accordion-style-three .accordion .card {
  border-radius: 0;
  border: 0;
  overflow: visible;
}

.accordion-style-three .accordion .card .card-header {
  padding: 0;
  background: none;
}

.accordion-style-three .accordion .card .card-header a {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  position: relative;
  color: #fff;
  transition: all 0.3s ease-out 0s;
  border: 2px solid linear-gradient(90deg, #0067f4 0%, #2bdbdc 100%);
  border-radius: 0;
  padding: 13px 16px;
  z-index: 5;
  border-left: 0;
  border-right: 0;
  background: #0067f4;
  background: linear-gradient(90deg, #0067f4 0%, #2bdbdc 100%);
  margin-top: -2px;
}

.accordion-style-three .accordion .card .card-header a::before {
  position: absolute;
  content: "\ea58";
  font-family: lineicons !important;
  right: 16px;
  top: 14px;
  font-size: 16px;
  transition: all 0.3s ease-out 0s;
  transform: rotate(180deg);
}

.accordion-style-three .accordion .card .card-header a.collapsed {
  color: #121212;
  border: 2px solid #e9ecef;
  background: transparent;
  border-left: 0;
  border-right: 0;
}

.accordion-style-three .accordion .card .card-header a.collapsed::before {
  transform: rotate(0);
}

.accordion-style-three .accordion .card .card-body {
  padding: 16px;
}

.accordion-style-three .accordion .card .card-body .text {
  font-size: 14px;
  color: #121212;
  line-height: 24px;
}

.accordion-style-four .accordion .card {
  margin-top: 8px;
  border-radius: 0;
  border: 0;
}

.accordion-style-four .accordion .card .card-header {
  padding: 0;
  background: none;
}

.accordion-style-four .accordion .card .card-header a {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  position: relative;
  color: #fff;
  transition: all 0.3s ease-out 0s;
  margin: -1px;
  border-radius: 0;
  padding: 13px 16px;
  z-index: 5;
  border: 0;
  background: #0067f4;
  background: linear-gradient(90deg, #0067f4 0%, #2bdbdc 100%);
}

.accordion-style-four .accordion .card .card-header a::before {
  position: absolute;
  content: "\ea58";
  font-family: lineicons !important;
  right: 16px;
  top: 14px;
  font-size: 16px;
  transition: all 0.3s ease-out 0s;
  transform: rotate(180deg);
}

.accordion-style-four .accordion .card .card-header a.collapsed {
  color: #121212;
  border-color: #cbced1;
  background: #f4f6f7;
}

.accordion-style-four .accordion .card .card-header a.collapsed::before {
  transform: rotate(0);
}

.accordion-style-four .accordion .card .card-body {
  padding: 16px;
}

.accordion-style-four .accordion .card .card-body .text {
  font-size: 14px;
  color: #121212;
  line-height: 24px;
}

/*===========================
        09.NAVBAR css 
===========================*/
.navbar-toggler:focus {
  box-shadow: none;
}

/*===== NAVBAR ONE =====*/
.navbar-area.navbar-one {
  background: #0067f4;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  padding: 10px 0;
}

.navbar-area.navbar-one .navbar {
  position: relative;
  padding: 0;
}

.navbar-area.navbar-one .navbar .navbar-toggler .toggler-icon {
  width: 30px;
  height: 2px;
  background-color: #fff;
  margin: 5px 0;
  display: block;
  position: relative;
  transition: all 0.3s ease-out 0s;
}

.navbar-area.navbar-one .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) {
  transform: rotate(45deg);
  top: 7px;
}

.navbar-area.navbar-one .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) {
  opacity: 0;
}

.navbar-area.navbar-one .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) {
  transform: rotate(135deg);
  top: -7px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-one .navbar .navbar-collapse {
    position: absolute;
    top: 116%;
    left: 0;
    width: 100%;
    background-color: #0067f4;
    z-index: 8;
    padding: 10px 0;
  }
}

.navbar-area.navbar-one .navbar .navbar-nav .nav-item {
  margin: 0 16px;
  position: relative;
}

.navbar-area.navbar-one .navbar .navbar-nav .nav-item a {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  padding: 26px 0;
  color: #fff;
  text-transform: uppercase;
  position: relative;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-one .navbar .navbar-nav .nav-item a {
    padding: 10px 0;
    display: block;
  }
}

.navbar-area.navbar-one .navbar .navbar-nav .nav-item a.active::before, .navbar-area.navbar-one .navbar .navbar-nav .nav-item a.active::after {
  opacity: 1;
}

.navbar-area.navbar-one .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-one .navbar .navbar-nav .nav-item a::after {
  position: absolute;
  content: '';
  width: 8px;
  height: 4px;
  background-color: #2bdbdc;
  left: 50%;
  margin: 0 2px;
  bottom: 14px;
  opacity: 0;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-one .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-one .navbar .navbar-nav .nav-item a::after {
    display: none;
  }
}

.navbar-area.navbar-one .navbar .navbar-nav .nav-item a::after {
  left: auto;
  right: 50%;
}

.navbar-area.navbar-one .navbar .navbar-nav .nav-item:hover > a::before, .navbar-area.navbar-one .navbar .navbar-nav .nav-item:hover > a::after {
  opacity: 1;
}

.navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu {
  position: absolute;
  right: 0;
  top: 100%;
  width: 260px;
  background-color: #005ad5;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
  z-index: 99;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    top: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    right: auto;
    transform: translateX(0%);
    transition: all none ease-out 0s;
    box-shadow: none;
    text-align: left;
    border-top: 0;
    height: 0;
  }
}

.navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
  height: auto;
  display: block;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
    height: 0;
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu.show {
    height: auto;
  }
}

.navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li {
  position: relative;
}

.navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li a {
  display: block;
  padding: 8px 24px;
  position: relative;
  color: #fff;
  transition: all 0.3s ease-out 0s;
  z-index: 5;
}

.navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li a i {
  float: right;
  font-size: 14px;
  margin-top: 5px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li a i {
    display: none;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li a i {
    display: none;
  }
}

.navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler i {
  display: inline-block;
}

.navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li a::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  border-radius: 5px;
  background-color: #fff;
  opacity: 0;
  transition: all 0.3s ease-out 0s;
  margin: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li a::before {
    display: block;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li a::before {
    display: block;
  }
}

.navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li a::after {
  position: absolute;
  content: '';
  top: 0;
  left: -2px;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  opacity: 0;
  transition: all 0.3s ease-out 0s;
  z-index: -1;
}

.navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
  right: auto;
  left: 100%;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
    padding-left: 30px;
    height: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li .sub-menu.show {
    visibility: visible;
    height: auto;
    position: relative;
  }
}

.navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  height: auto;
}

.navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li:hover > a::after {
  opacity: 1;
}

.navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-menu li:hover > a::before {
  opacity: 1;
}

.navbar-area.navbar-one .navbar .navbar-nav .nav-item:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  height: auto;
}

.navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-nav-toggler {
  display: none;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-one .navbar .navbar-nav .nav-item .sub-nav-toggler {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 14px;
    font-size: 16px;
    background: none;
    border: 0;
    color: #fff;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-one .navbar .navbar-btn {
    position: absolute;
    right: 70px;
    top: 7px;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-one .navbar .navbar-btn {
    position: absolute;
    right: 60px;
    top: 7px;
  }
}

.navbar-area.navbar-one .navbar .navbar-btn ul {
  display: flex;
}

.navbar-area.navbar-one .navbar .navbar-btn ul li {
  display: inline-block;
  margin-right: 5px;
}

.navbar-area.navbar-one .navbar .navbar-btn ul li a {
  padding: 10px 16px;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  border: 2px solid;
  border-radius: 4px;
  transition: all 0.3s ease-out 0s;
  white-space: nowrap;
}

.navbar-area.navbar-one .navbar .navbar-btn ul li a.light {
  border-color: #fff;
}

.navbar-area.navbar-one .navbar .navbar-btn ul li a.light:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.navbar-area.navbar-one .navbar .navbar-btn ul li a.solid {
  background-color: #fff;
  border-color: #fff;
  color: #0067f4;
}

.navbar-area.navbar-one .navbar .navbar-btn ul li a.solid:hover {
  background-color: transparent;
  color: #fff;
}

/*===== NAVBAR TWO =====*/
.navbar-area.navbar-two {
  background-color: #f4f6f7;
  padding: 10px 0;
}

.navbar-area.navbar-two .navbar {
  position: relative;
  padding: 0;
}

.navbar-area.navbar-two .navbar .navbar-toggler .toggler-icon {
  width: 30px;
  height: 2px;
  background-color: #121212;
  margin: 5px 0;
  display: block;
  position: relative;
  transition: all 0.3s ease-out 0s;
}

.navbar-area.navbar-two .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) {
  transform: rotate(45deg);
  top: 7px;
}

.navbar-area.navbar-two .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) {
  opacity: 0;
}

.navbar-area.navbar-two .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) {
  transform: rotate(135deg);
  top: -7px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-two .navbar .navbar-collapse {
    position: absolute;
    top: 116%;
    left: 0;
    width: 100%;
    background-color: #f4f6f7;
    z-index: 8;
    padding: 10px 0;
  }
}

.navbar-area.navbar-two .navbar .navbar-nav .nav-item {
  margin: 0 16px;
  position: relative;
}

.navbar-area.navbar-two .navbar .navbar-nav .nav-item a {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  padding: 26px 0;
  color: #121212;
  text-transform: uppercase;
  position: relative;
  opacity: 0.7;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-two .navbar .navbar-nav .nav-item a {
    padding: 10px 0;
    display: block;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-two .navbar .navbar-nav .nav-item a {
    padding: 10px 0;
    display: block;
  }
}

.navbar-area.navbar-two .navbar .navbar-nav .nav-item a::before {
  position: absolute;
  content: '';
  width: 32px;
  height: 4px;
  background: #0067f4;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  left: 50%;
  margin: 0 2px;
  bottom: 14px;
  transition: all 0.3s ease-out 0s;
  transform: translate(-50%) scaleX(0);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-two .navbar .navbar-nav .nav-item a::before {
    display: none;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-two .navbar .navbar-nav .nav-item a::before {
    display: none;
  }
}

.navbar-area.navbar-two .navbar .navbar-nav .nav-item a.active {
  opacity: 1;
  color: #121212;
}

.navbar-area.navbar-two .navbar .navbar-nav .nav-item a.active::before {
  transform: translate(-50%) scaleX(1);
}

.navbar-area.navbar-two .navbar .navbar-nav .nav-item:hover > a {
  opacity: 1;
  color: #121212;
}

.navbar-area.navbar-two .navbar .navbar-nav .nav-item:hover > a::before {
  transform: translate(-50%) scaleX(1);
}

.navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu {
  position: absolute;
  right: 0;
  top: 100%;
  width: 260px;
  background-color: #fff;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16);
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    top: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    right: auto;
    transform: translateX(0%);
    transition: all none ease-out 0s;
    box-shadow: none;
    text-align: left;
    border-top: 0;
    height: 0;
  }
}

.navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
  height: auto;
  display: block;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
    height: 0;
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu.show {
    height: auto;
  }
}

.navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li {
  position: relative;
}

.navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li a {
  display: block;
  padding: 8px 24px;
  position: relative;
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

.navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li a i {
  float: right;
  font-size: 14px;
  margin-top: 5px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li a i {
    display: none;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li a i {
    display: none;
  }
}

.navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler i {
  display: inline-block;
}

.navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li a::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  border-radius: 5px;
  background: #0067f4;
  background: linear-gradient(3600deg, #0067f4 0%, #2bdbdc 100%);
  opacity: 0;
  transition: all 0.3s ease-out 0s;
  margin: 0;
  transform: scaleX(1);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li a::before {
    display: block;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li a::before {
    display: block;
  }
}

.navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
  right: auto;
  left: 100%;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
    padding-left: 30px;
    height: 0;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li .sub-menu.show {
    visibility: visible;
    height: auto;
    position: relative;
  }
}

.navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}

.navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li:hover > a {
  background-color: #f4f6f7;
  color: #0067f4;
  opacity: 1;
}

.navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-menu li:hover > a::before {
  opacity: 1;
}

.navbar-area.navbar-two .navbar .navbar-nav .nav-item:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}

.navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-nav-toggler {
  display: none;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-nav-toggler {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 14px;
    font-size: 16px;
    background: none;
    border: 0;
    color: #121212;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-two .navbar .navbar-nav .nav-item .sub-nav-toggler {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 14px;
    font-size: 16px;
    background: none;
    border: 0;
    color: #121212;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-two .navbar .navbar-btn {
    position: absolute;
    right: 70px;
    top: 7px;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-two .navbar .navbar-btn {
    position: absolute;
    right: 60px;
    top: 7px;
  }
}

.navbar-area.navbar-two .navbar .navbar-btn ul {
  display: flex;
}

.navbar-area.navbar-two .navbar .navbar-btn ul li {
  display: inline-block;
  margin-right: 5px;
}

.navbar-area.navbar-two .navbar .navbar-btn ul li a {
  padding: 10px 16px;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  border: 2px solid;
  border-radius: 4px;
  transition: all 0.3s ease-out 0s;
  white-space: nowrap;
}

.navbar-area.navbar-two .navbar .navbar-btn ul li a.light {
  border-image-source: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%);
  border-image-source: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%);
  border-image-source: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  border-image-slice: 1;
  color: #0067f4;
  position: relative;
  z-index: 5;
}

.navbar-area.navbar-two .navbar .navbar-btn ul li a.light::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  left: 0;
  top: 0;
  z-index: -1;
  opacity: 0;
  transition: all 0.3s ease-out 0s;
}

.navbar-area.navbar-two .navbar .navbar-btn ul li a.light:hover {
  color: #fff;
}

.navbar-area.navbar-two .navbar .navbar-btn ul li a.light:hover::before {
  opacity: 1;
}

.navbar-area.navbar-two .navbar .navbar-btn ul li a.solid {
  color: #fff;
  position: relative;
  border-image-source: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%);
  border-image-source: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%);
  border-image-source: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  border-image-slice: 1;
  z-index: 5;
}

.navbar-area.navbar-two .navbar .navbar-btn ul li a.solid::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  left: 0;
  top: 0;
  z-index: -1;
  transition: all 0.3s ease-out 0s;
  opacity: 1;
}

.navbar-area.navbar-two .navbar .navbar-btn ul li a.solid:hover {
  color: #0067f4;
}

.navbar-area.navbar-two .navbar .navbar-btn ul li a.solid:hover::before {
  opacity: 0;
}

/*===== NAVBAR THREE =====*/
.navbar-area.navbar-three {
  background: #0067f4;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  padding: 10px 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-three {
    padding: 10px 0;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-three {
    padding: 10px 0;
  }
}

.navbar-area.navbar-three .navbar {
  position: relative;
  padding: 0;
}

.navbar-area.navbar-three .navbar .navbar-toggler .toggler-icon {
  width: 30px;
  height: 2px;
  background-color: #fff;
  margin: 5px 0;
  display: block;
  position: relative;
  transition: all 0.3s ease-out 0s;
}

.navbar-area.navbar-three .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) {
  transform: rotate(45deg);
  top: 7px;
}

.navbar-area.navbar-three .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) {
  opacity: 0;
}

.navbar-area.navbar-three .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) {
  transform: rotate(135deg);
  top: -7px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-three .navbar .navbar-collapse {
    position: absolute;
    top: 116%;
    left: 0;
    width: 100%;
    background-color: #0067f4;
    z-index: 8;
    padding: 10px 16px;
  }
}

.navbar-area.navbar-three .navbar .navbar-nav {
  margin-right: 24px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-three .navbar .navbar-nav {
    margin-right: 0;
  }
}

.navbar-area.navbar-three .navbar .navbar-nav .nav-item {
  position: relative;
}

.navbar-area.navbar-three .navbar .navbar-nav .nav-item a {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  padding: 11px 14px;
  color: #fff;
  text-transform: uppercase;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: 5px;
  transition: all 0.3s ease-out 0s;
  margin: 14px 4px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-three .navbar .navbar-nav .nav-item a {
    padding: 10px 0;
    display: block;
    border: 0;
    margin: 0;
  }
}

.navbar-area.navbar-three .navbar .navbar-nav .nav-item a.active {
  border: 1px solid rgba(255, 255, 255, 0.3);
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-three .navbar .navbar-nav .nav-item a.active {
    border: 0;
  }
}

.navbar-area.navbar-three .navbar .navbar-nav .nav-item a.active::before, .navbar-area.navbar-three .navbar .navbar-nav .nav-item a.active::after {
  transform: translateX(-50%) scaleX(1);
}

.navbar-area.navbar-three .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-three .navbar .navbar-nav .nav-item a::after {
  position: absolute;
  content: '';
  width: 32px;
  height: 2px;
  background-color: #fff;
  left: 50%;
  margin: 0 2px;
  top: 0;
  transition: all 0.3s ease-out 0s;
  transform: translateX(-50%) scaleX(0);
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-three .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-three .navbar .navbar-nav .nav-item a::after {
    display: none;
  }
}

.navbar-area.navbar-three .navbar .navbar-nav .nav-item a::after {
  top: auto;
  bottom: 0;
}

.navbar-area.navbar-three .navbar .navbar-nav .nav-item:hover > a {
  border: 1px solid rgba(255, 255, 255, 0.3);
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-three .navbar .navbar-nav .nav-item:hover > a {
    border: 0;
  }
}

.navbar-area.navbar-three .navbar .navbar-nav .nav-item:hover > a::before, .navbar-area.navbar-three .navbar .navbar-nav .nav-item:hover > a::after {
  transform: translateX(-50%) scaleX(1);
}

.navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu {
  position: absolute;
  right: 0;
  top: 100%;
  width: 260px;
  background-color: #fff;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
  z-index: 99;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16);
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    top: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    right: auto;
    transform: translateX(0%);
    transition: all none ease-out 0s;
    box-shadow: none;
    text-align: left;
    border-top: 0;
    height: 0;
  }
}

.navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
  height: auto;
  display: block;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
    height: 0;
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu.show {
    height: auto;
  }
}

.navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li {
  position: relative;
}

.navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li .sub-nav-toggler {
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

.navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li a {
  display: block;
  padding: 8px 24px;
  position: relative;
  color: #121212;
  transition: all 0s ease-out 0s;
  border-radius: 0;
  margin: 0 0;
  border: 0;
}

.navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li a i {
  float: right;
  font-size: 14px;
  margin-top: 5px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li a i {
    display: none;
  }
}

.navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler i {
  display: inline-block;
}

.navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li a::before {
  display: none;
}

.navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li a::after {
  display: none;
}

.navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
  right: auto;
  left: 100%;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
    padding-left: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li .sub-menu.show {
    visibility: visible;
    height: auto;
    position: relative;
  }
}

.navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}

.navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-nav-toggler {
  color: #fff;
}

.navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li:hover > a {
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  color: #fff;
}

.navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-menu li:hover > a::before {
  opacity: 1;
}

.navbar-area.navbar-three .navbar .navbar-nav .nav-item:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}

.navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-nav-toggler {
  display: none;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-three .navbar .navbar-nav .nav-item .sub-nav-toggler {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 14px;
    font-size: 16px;
    background: none;
    border: 0;
    color: #fff;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-three .navbar .navbar-social {
    position: absolute;
    right: 70px;
    top: 7px;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-three .navbar .navbar-social {
    position: absolute;
    right: 60px;
    top: 7px;
  }
}

.navbar-area.navbar-three .navbar .navbar-social ul {
  display: flex;
}

.navbar-area.navbar-three .navbar .navbar-social ul li {
  display: inline-block;
  margin-left: 12px;
}

.navbar-area.navbar-three .navbar .navbar-social ul li a {
  font-size: 32px;
  color: #fff;
  transition: all 0.3s ease-out 0s;
}

/*===== NAVBAR FOUR =====*/
.navbar-area.navbar-four {
  background-color: #f4f6f7;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-four {
    padding: 10px 0;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-four {
    padding: 10px 0;
  }
}

.navbar-area.navbar-four .navbar {
  position: relative;
  padding: 0;
}

.navbar-area.navbar-four .navbar .navbar-brand img {
  max-width: 40px;
  margin-right: 10px;
}

.navbar-area.navbar-four .navbar .navbar-toggler .toggler-icon {
  width: 30px;
  height: 2px;
  background-color: #121212;
  margin: 5px 0;
  display: block;
  position: relative;
  transition: all 0.3s ease-out 0s;
}

.navbar-area.navbar-four .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) {
  transform: rotate(45deg);
  top: 7px;
}

.navbar-area.navbar-four .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) {
  opacity: 0;
}

.navbar-area.navbar-four .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) {
  transform: rotate(135deg);
  top: -7px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-four .navbar .navbar-collapse {
    position: absolute;
    top: 116%;
    left: 0;
    width: 100%;
    background-color: #f4f6f7;
    z-index: 8;
    padding: 10px 0;
  }
}

.navbar-area.navbar-four .navbar .navbar-nav .nav-item {
  margin: 0 16px;
  position: relative;
}

.navbar-area.navbar-four .navbar .navbar-nav .nav-item a {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  padding: 26px 0;
  color: #121212;
  text-transform: uppercase;
  position: relative;
  opacity: 0.7;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-four .navbar .navbar-nav .nav-item a {
    padding: 10px 0;
    display: block;
  }
}

.navbar-area.navbar-four .navbar .navbar-nav .nav-item a.active {
  opacity: 1;
}

.navbar-area.navbar-four .navbar .navbar-nav .nav-item a.active::before, .navbar-area.navbar-four .navbar .navbar-nav .nav-item a.active::after {
  opacity: 1;
}

.navbar-area.navbar-four .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-four .navbar .navbar-nav .nav-item a::after {
  position: absolute;
  content: '';
  width: 8px;
  height: 4px;
  background-color: #2bdbdc;
  left: 50%;
  margin: 0 2px;
  bottom: 14px;
  opacity: 0;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-four .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-four .navbar .navbar-nav .nav-item a::after {
    display: none;
  }
}

.navbar-area.navbar-four .navbar .navbar-nav .nav-item a::after {
  left: auto;
  right: 50%;
}

.navbar-area.navbar-four .navbar .navbar-nav .nav-item:hover > a {
  opacity: 1;
}

.navbar-area.navbar-four .navbar .navbar-nav .nav-item:hover > a::before, .navbar-area.navbar-four .navbar .navbar-nav .nav-item:hover > a::after {
  opacity: 1;
}

.navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu {
  position: absolute;
  left: 0;
  top: 100%;
  width: 260px;
  background-color: #fff;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
  z-index: 99;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16);
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    top: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    right: auto;
    transform: translateX(0%);
    transition: all none ease-out 0s;
    box-shadow: none;
    text-align: left;
    border-top: 0;
    height: 0;
  }
}

.navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
  height: auto;
  display: block;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
    height: 0;
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu.show {
    height: auto;
  }
}

.navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li {
  position: relative;
}

.navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li a {
  display: block;
  padding: 8px 24px;
  position: relative;
  color: #121212;
  transition: all 0.3s ease-out 0s;
  opacity: 1;
  z-index: 5;
}

.navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li a:hover {
  background: rgba(0, 103, 244, 0.05);
}

.navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li a i {
  float: right;
  font-size: 14px;
  margin-top: 5px;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li a i {
    display: none;
  }
}

.navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler i {
  display: inline-block;
}

.navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li a::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  border-radius: 5px;
  background-color: #fff;
  opacity: 0;
  transition: all 0.3s ease-out 0s;
  margin: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li a::before {
    display: block;
  }
}

.navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li a::after {
  position: absolute;
  content: '';
  top: 0;
  left: -2px;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  opacity: 0;
  transition: all 0.3s ease-out 0s;
  z-index: -1;
}

.navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
  right: auto;
  left: 100%;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
    padding-left: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li .sub-menu.show {
    visibility: visible;
    height: auto;
    position: relative;
  }
}

.navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}

.navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li:hover > a {
  color: #fff;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li:hover > a {
    color: #121212;
  }
}

.navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li:hover > a::after {
  opacity: 1;
}

.navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-menu li:hover > a::before {
  opacity: 1;
}

.navbar-area.navbar-four .navbar .navbar-nav .nav-item:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}

.navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-nav-toggler {
  display: none;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-nav-toggler {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 14px;
    font-size: 16px;
    background: none;
    border: 0;
    color: #121212;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-four .navbar .navbar-nav .nav-item .sub-nav-toggler {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 14px;
    font-size: 16px;
    background: none;
    border: 0;
    color: #121212;
  }
}

.navbar-area.navbar-four .navbar .navbar-social span {
  font-size: 16px;
  line-height: 24px;
  color: #6c6c6c;
  text-transform: uppercase;
  font-weight: 700;
  margin-right: 14px;
  white-space: nowrap;
}

.navbar-area.navbar-four .navbar .navbar-social ul {
  display: flex;
}

.navbar-area.navbar-four .navbar .navbar-social ul li {
  display: inline-block;
  margin-right: 5px;
}

.navbar-area.navbar-four .navbar .navbar-social ul li a {
  font-size: 32px;
  color: #0067f4;
  transition: all 0.3s ease-out 0s;
}

/*===== NAVBAR FIVE =====*/
.navbar-area.navbar-five {
  background: #0067f4;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  padding: 10px 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-five {
    padding: 10px 0;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-five {
    padding: 10px 0;
  }
}

.navbar-area.navbar-five .navbar {
  position: relative;
  padding: 0;
}

.navbar-area.navbar-five .navbar .navbar-toggler .toggler-icon {
  width: 30px;
  height: 2px;
  background-color: #fff;
  margin: 5px 0;
  display: block;
  position: relative;
  transition: all 0.3s ease-out 0s;
}

.navbar-area.navbar-five .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) {
  transform: rotate(45deg);
  top: 7px;
}

.navbar-area.navbar-five .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) {
  opacity: 0;
}

.navbar-area.navbar-five .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) {
  transform: rotate(135deg);
  top: -7px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-five .navbar .navbar-collapse {
    position: absolute;
    top: 116%;
    left: 0;
    width: 100%;
    background-color: #0067f4;
    z-index: 8;
    padding: 10px 16px;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-five .navbar .navbar-collapse {
    position: absolute;
    top: 116%;
    left: 0;
    width: 100%;
    background-color: #0067f4;
    z-index: 8;
    padding: 10px 16px;
  }
}

.navbar-area.navbar-five .navbar .navbar-nav {
  margin-right: 24px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-five .navbar .navbar-nav {
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-five .navbar .navbar-nav {
    margin-right: 0;
  }
}

.navbar-area.navbar-five .navbar .navbar-nav .nav-item {
  position: relative;
}

.navbar-area.navbar-five .navbar .navbar-nav .nav-item a {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  padding: 11px 16px;
  color: #fff;
  text-transform: uppercase;
  position: relative;
  border-radius: 5px;
  transition: all 0.3s ease-out 0s;
  margin: 14px 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-five .navbar .navbar-nav .nav-item a {
    padding: 10px 0;
    display: block;
    border: 0;
    margin: 0;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-five .navbar .navbar-nav .nav-item a {
    padding: 10px 0;
    display: block;
    border: 0;
    margin: 0;
  }
}

.navbar-area.navbar-five .navbar .navbar-nav .nav-item a.active::before {
  transform: translateX(-50%) scaleX(1);
}

.navbar-area.navbar-five .navbar .navbar-nav .nav-item a::before {
  position: absolute;
  content: '';
  width: 32px;
  height: 4px;
  background-color: #fff;
  left: 50%;
  bottom: 0;
  transition: all 0.3s ease-out 0s;
  transform: translateX(-50%) scaleX(0);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-five .navbar .navbar-nav .nav-item a::before {
    display: none;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-five .navbar .navbar-nav .nav-item a::before {
    display: none;
  }
}

.navbar-area.navbar-five .navbar .navbar-nav .nav-item a::after {
  top: auto;
  bottom: 0;
}

.navbar-area.navbar-five .navbar .navbar-nav .nav-item:hover > a::before {
  transform: translateX(-50%) scaleX(1);
}

.navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu {
  position: absolute;
  right: 0;
  top: 100%;
  width: 260px;
  background-color: #fff;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
  z-index: 99;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16);
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    top: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    right: auto;
    transform: translateX(0%);
    transition: all none ease-out 0s;
    box-shadow: none;
    text-align: left;
    border-top: 0;
    height: 0;
  }
}

.navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
  height: auto;
  display: block;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
    height: 0;
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu.show {
    height: auto;
  }
}

.navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li {
  position: relative;
}

.navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li .sub-nav-toggler {
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

.navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li a {
  display: block;
  padding: 8px 24px;
  position: relative;
  color: #121212;
  transition: all 0.3s ease-out 0s;
  border-radius: 0;
  margin: 0 0;
  z-index: 5;
}

.navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li a i {
  float: right;
  font-size: 14px;
  margin-top: 5px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li a i {
    display: none;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li a i {
    display: none;
  }
}

.navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler i {
  display: inline-block;
}

.navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li a::before {
  display: none;
}

.navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li a::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  opacity: 0;
  transition: all 0.3s ease-out 0s;
  z-index: -1;
}

.navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
  right: auto;
  left: 100%;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
    padding-left: 30px;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
    padding-left: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li .sub-menu.show {
    visibility: visible;
    height: auto;
    position: relative;
  }
}

.navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}

.navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-nav-toggler {
  color: #fff;
}

.navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li:hover > a {
  color: #fff;
}

.navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li:hover > a::after {
  opacity: 1;
}

.navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-menu li:hover > a::before {
  opacity: 1;
}

.navbar-area.navbar-five .navbar .navbar-nav .nav-item:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}

.navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-nav-toggler {
  display: none;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-nav-toggler {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 14px;
    font-size: 16px;
    background: none;
    border: 0;
    color: #fff;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-five .navbar .navbar-nav .nav-item .sub-nav-toggler {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 14px;
    font-size: 16px;
    background: none;
    border: 0;
    color: #fff;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-five .navbar .navbar-btn {
    position: absolute;
    right: 70px;
    top: 7px;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-five .navbar .navbar-btn {
    position: absolute;
    right: 60px;
    top: 7px;
  }
}

.navbar-area.navbar-five .navbar .navbar-btn .main-btn {
  z-index: 5;
  overflow: hidden;
  background: linear-gradient(#f4f6f7 0%, #deebfd 100%);
  line-height: 52px;
  border: 0;
}

.navbar-area.navbar-five .navbar .navbar-btn .main-btn:hover {
  color: #0067f4;
  background: linear-gradient(to top, #f4f6f7 0%, #deebfd 100%);
}

/*===== NAVBAR SIX =====*/
.navbar-area.navbar-six {
  background-color: #f4f6f7;
  padding: 10px 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-six {
    padding: 10px 0;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-six {
    padding: 10px 0;
  }
}

.navbar-area.navbar-six .navbar {
  position: relative;
  padding: 0;
}

.navbar-area.navbar-six .navbar .navbar-toggler .toggler-icon {
  width: 30px;
  height: 2px;
  background-color: #121212;
  margin: 5px 0;
  display: block;
  position: relative;
  transition: all 0.3s ease-out 0s;
}

.navbar-area.navbar-six .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) {
  transform: rotate(45deg);
  top: 7px;
}

.navbar-area.navbar-six .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) {
  opacity: 0;
}

.navbar-area.navbar-six .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) {
  transform: rotate(135deg);
  top: -7px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-six .navbar .navbar-collapse {
    position: absolute;
    top: 116%;
    left: 0;
    width: 100%;
    background-color: #f4f6f7;
    z-index: 8;
    padding: 10px 16px;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-six .navbar .navbar-collapse {
    position: absolute;
    top: 116%;
    left: 0;
    width: 100%;
    background-color: #f4f6f7;
    z-index: 8;
    padding: 10px 16px;
  }
}

.navbar-area.navbar-six .navbar .navbar-nav {
  margin-right: 24px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-six .navbar .navbar-nav {
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-six .navbar .navbar-nav {
    margin-right: 0;
  }
}

.navbar-area.navbar-six .navbar .navbar-nav .nav-item {
  position: relative;
}

.navbar-area.navbar-six .navbar .navbar-nav .nav-item a {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  padding: 11px 14px;
  color: #121212;
  text-transform: uppercase;
  position: relative;
  border-radius: 5px;
  transition: all 0.3s ease-out 0s;
  margin: 14px 4px;
  opacity: 0.7;
  border: 1px solid transparent;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-six .navbar .navbar-nav .nav-item a {
    padding: 10px 0;
    display: block;
    border: 0;
    margin: 0;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-six .navbar .navbar-nav .nav-item a {
    padding: 10px 0;
    display: block;
    border: 0;
    margin: 0;
  }
}

.navbar-area.navbar-six .navbar .navbar-nav .nav-item a.active {
  opacity: 1;
  border-color: #e5e5e8;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-six .navbar .navbar-nav .nav-item a.active {
    border: 0;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-six .navbar .navbar-nav .nav-item a.active {
    border: 0;
  }
}

.navbar-area.navbar-six .navbar .navbar-nav .nav-item a.active::before, .navbar-area.navbar-six .navbar .navbar-nav .nav-item a.active::after {
  transform: translateX(-50%) scaleX(1);
}

.navbar-area.navbar-six .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-six .navbar .navbar-nav .nav-item a::after {
  position: absolute;
  content: '';
  width: 32px;
  height: 2px;
  background: #0067f4;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  left: 50%;
  top: 0;
  transition: all 0.3s ease-out 0s;
  transform: translateX(-50%) scaleX(0);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-six .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-six .navbar .navbar-nav .nav-item a::after {
    display: none;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-six .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-six .navbar .navbar-nav .nav-item a::after {
    display: none;
  }
}

.navbar-area.navbar-six .navbar .navbar-nav .nav-item a::after {
  top: auto;
  bottom: 0;
}

.navbar-area.navbar-six .navbar .navbar-nav .nav-item:hover > a {
  opacity: 1;
  border-color: #e5e5e8;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-six .navbar .navbar-nav .nav-item:hover > a {
    border: 0;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-six .navbar .navbar-nav .nav-item:hover > a {
    border: 0;
  }
}

.navbar-area.navbar-six .navbar .navbar-nav .nav-item:hover > a::before, .navbar-area.navbar-six .navbar .navbar-nav .nav-item:hover > a::after {
  transform: translateX(-50%) scaleX(1);
}

.navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-nav-toggler {
  display: none;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-nav-toggler {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 14px;
    font-size: 16px;
    background: none;
    border: 0;
    color: #121212;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-nav-toggler {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 14px;
    font-size: 16px;
    background: none;
    border: 0;
    color: #121212;
  }
}

.navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu {
  position: absolute;
  right: 0;
  top: 100%;
  width: 260px;
  background-color: #fff;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
  z-index: 99;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16);
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    top: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    right: auto;
    transform: translateX(0%);
    transition: all none ease-out 0s;
    box-shadow: none;
    text-align: left;
    border-top: 0;
    height: 0;
  }
}

.navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
  height: auto;
  display: block;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
    height: 0;
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu.show {
    height: auto;
  }
}

.navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li {
  position: relative;
}

.navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li .sub-nav-toggler {
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

.navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li a {
  display: block;
  padding: 8px 24px;
  position: relative;
  color: #121212;
  transition: all 0s ease-out 0s;
  border-radius: 0;
  margin: 0 0;
  opacity: 1;
  border: 0;
}

.navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler {
  color: #121212;
}

.navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li a i {
  float: right;
  font-size: 14px;
  margin-top: 5px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li a i {
    display: none;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li a i {
    display: none;
  }
}

.navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler i {
  display: inline-block;
}

.navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li a::after, .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li a::before {
  display: none;
}

.navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
  right: auto;
  left: 100%;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
    padding-left: 30px;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
    padding-left: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li .sub-menu.show {
    visibility: visible;
    height: auto;
    position: relative;
  }
}

.navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}

.navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-nav-toggler {
  color: #fff;
}

.navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li:hover > a {
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  color: #fff;
}

.navbar-area.navbar-six .navbar .navbar-nav .nav-item .sub-menu li:hover > a::before {
  opacity: 1;
}

.navbar-area.navbar-six .navbar .navbar-nav .nav-item:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-six .navbar .navbar-btn {
    position: absolute;
    right: 70px;
    top: 7px;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-six .navbar .navbar-btn {
    position: absolute;
    right: 60px;
    top: 7px;
  }
}

/*===== NAVBAR SAVEN =====*/
.navbar-area.navbar-saven {
  background: #0067f4;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  padding: 10px 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-saven {
    padding: 10px 0;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-saven {
    padding: 10px 0;
  }
}

.navbar-area.navbar-saven .navbar {
  position: relative;
  padding: 0;
}

.navbar-area.navbar-saven .navbar .navbar-toggler .toggler-icon {
  width: 30px;
  height: 2px;
  background-color: #fff;
  margin: 5px 0;
  display: block;
  position: relative;
  transition: all 0.3s ease-out 0s;
}

.navbar-area.navbar-saven .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) {
  transform: rotate(45deg);
  top: 7px;
}

.navbar-area.navbar-saven .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) {
  opacity: 0;
}

.navbar-area.navbar-saven .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) {
  transform: rotate(135deg);
  top: -7px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-saven .navbar .navbar-collapse {
    position: absolute;
    top: 116%;
    left: 0;
    width: 100%;
    background-color: #0067f4;
    z-index: 8;
    padding: 10px 16px;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-saven .navbar .navbar-collapse {
    position: absolute;
    top: 116%;
    left: 0;
    width: 100%;
    background-color: #0067f4;
    z-index: 8;
    padding: 10px 16px;
  }
}

.navbar-area.navbar-saven .navbar .navbar-nav {
  margin-right: 24px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-saven .navbar .navbar-nav {
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-saven .navbar .navbar-nav {
    margin-right: 0;
  }
}

.navbar-area.navbar-saven .navbar .navbar-nav .nav-item {
  position: relative;
}

.navbar-area.navbar-saven .navbar .navbar-nav .nav-item a {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  padding: 11px 16px;
  color: #fff;
  text-transform: uppercase;
  position: relative;
  border-radius: 5px;
  transition: all 0.3s ease-out 0s;
  margin: 14px 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-saven .navbar .navbar-nav .nav-item a {
    padding: 10px 0;
    display: block;
    border: 0;
    margin: 0;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-saven .navbar .navbar-nav .nav-item a {
    padding: 10px 0;
    display: block;
    border: 0;
    margin: 0;
  }
}

.navbar-area.navbar-saven .navbar .navbar-nav .nav-item a.active::before {
  transform: translateX(-50%) scaleX(1);
}

.navbar-area.navbar-saven .navbar .navbar-nav .nav-item a::before {
  position: absolute;
  content: '';
  width: 32px;
  height: 4px;
  background-color: #fff;
  left: 50%;
  bottom: 0;
  transition: all 0.3s ease-out 0s;
  transform: translateX(-50%) scaleX(0);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-saven .navbar .navbar-nav .nav-item a::before {
    display: none;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-saven .navbar .navbar-nav .nav-item a::before {
    display: none;
  }
}

.navbar-area.navbar-saven .navbar .navbar-nav .nav-item a::after {
  top: auto;
  bottom: 0;
}

.navbar-area.navbar-saven .navbar .navbar-nav .nav-item:hover > a::before {
  transform: translateX(-50%) scaleX(1);
}

.navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu {
  position: absolute;
  right: 0;
  top: 100%;
  width: 260px;
  background-color: #fff;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
  z-index: 99;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16);
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    top: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    right: auto;
    transform: translateX(0%);
    transition: all none ease-out 0s;
    box-shadow: none;
    text-align: left;
    border-top: 0;
    height: 0;
  }
}

.navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
  height: auto;
  display: block;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
    height: 0;
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu.show {
    height: auto;
  }
}

.navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li {
  position: relative;
}

.navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li .sub-nav-toggler {
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

.navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li a {
  display: block;
  padding: 8px 24px;
  position: relative;
  color: #121212;
  transition: all 0.3s ease-out 0s;
  border-radius: 0;
  margin: 0 0;
}

.navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li a i {
  float: right;
  font-size: 14px;
  margin-top: 5px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li a i {
    display: none;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li a i {
    display: none;
  }
}

.navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler i {
  display: inline-block;
}

.navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li a::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0px;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  opacity: 0;
  transition: all 0.3s ease-out 0s;
  z-index: -1;
}

.navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li a::before {
  display: none;
}

.navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
  right: auto;
  left: 100%;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
    padding-left: 30px;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
    padding-left: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li .sub-menu.show {
    visibility: visible;
    height: auto;
    position: relative;
  }
}

.navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}

.navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-nav-toggler {
  color: #fff;
}

.navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li:hover > a {
  color: #fff;
}

.navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li:hover > a::after {
  opacity: 1;
}

.navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-menu li:hover > a::before {
  opacity: 1;
}

.navbar-area.navbar-saven .navbar .navbar-nav .nav-item:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}

.navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-nav-toggler {
  display: none;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-nav-toggler {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 14px;
    font-size: 16px;
    background: none;
    border: 0;
    color: #fff;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-saven .navbar .navbar-nav .nav-item .sub-nav-toggler {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 14px;
    font-size: 16px;
    background: none;
    border: 0;
    color: #fff;
  }
}

.navbar-area.navbar-saven .navbar .navbar-btn {
  margin-top: 15px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-saven .navbar .navbar-btn {
    position: absolute;
    right: 70px;
    top: 7px;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-saven .navbar .navbar-btn {
    position: absolute;
    right: 60px;
    top: 7px;
  }
}

.navbar-area.navbar-saven .navbar .navbar-btn .menu-bar {
  font-size: 32px;
  position: relative;
  overflow: hidden;
  color: #fff;
}

/*===== NAVBAR EIGHT =====*/
.navbar-area.navbar-eight {
  background-color: #f4f6f7;
  padding: 10px 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-eight {
    padding: 10px 0;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-eight {
    padding: 10px 0;
  }
}

.navbar-area.navbar-eight .navbar {
  position: relative;
  padding: 0;
}

.navbar-area.navbar-eight .navbar .navbar-toggler .toggler-icon {
  width: 30px;
  height: 2px;
  background-color: #121212;
  margin: 5px 0;
  display: block;
  position: relative;
  transition: all 0.3s ease-out 0s;
}

.navbar-area.navbar-eight .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) {
  transform: rotate(45deg);
  top: 7px;
}

.navbar-area.navbar-eight .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) {
  opacity: 0;
}

.navbar-area.navbar-eight .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) {
  transform: rotate(135deg);
  top: -7px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-eight .navbar .navbar-collapse {
    position: absolute;
    top: 116%;
    left: 0;
    width: 100%;
    background-color: #f4f6f7;
    z-index: 8;
    padding: 10px 16px;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-eight .navbar .navbar-collapse {
    position: absolute;
    top: 116%;
    left: 0;
    width: 100%;
    background-color: #f4f6f7;
    z-index: 8;
    padding: 10px 16px;
  }
}

.navbar-area.navbar-eight .navbar .navbar-nav {
  margin-right: 24px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-eight .navbar .navbar-nav {
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-eight .navbar .navbar-nav {
    margin-right: 0;
  }
}

.navbar-area.navbar-eight .navbar .navbar-nav .nav-item {
  position: relative;
}

.navbar-area.navbar-eight .navbar .navbar-nav .nav-item a {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  padding: 11px 14px;
  color: #121212;
  text-transform: uppercase;
  position: relative;
  border-radius: 5px;
  transition: all 0.3s ease-out 0s;
  margin: 14px 4px;
  opacity: 0.7;
  border: 1px solid transparent;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-eight .navbar .navbar-nav .nav-item a {
    padding: 10px 0;
    display: block;
    border: 0;
    margin: 0;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-eight .navbar .navbar-nav .nav-item a {
    padding: 10px 0;
    display: block;
    border: 0;
    margin: 0;
  }
}

.navbar-area.navbar-eight .navbar .navbar-nav .nav-item a.active {
  opacity: 1;
  border-color: #e5e5e8;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-eight .navbar .navbar-nav .nav-item a.active {
    border: 0;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-eight .navbar .navbar-nav .nav-item a.active {
    border: 0;
  }
}

.navbar-area.navbar-eight .navbar .navbar-nav .nav-item a.active::before, .navbar-area.navbar-eight .navbar .navbar-nav .nav-item a.active::after {
  transform: translateX(-50%) scaleX(1);
}

.navbar-area.navbar-eight .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-eight .navbar .navbar-nav .nav-item a::after {
  position: absolute;
  content: '';
  width: 32px;
  height: 2px;
  background: #0067f4;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  left: 50%;
  top: 0;
  transition: all 0.3s ease-out 0s;
  transform: translateX(-50%) scaleX(0);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-eight .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-eight .navbar .navbar-nav .nav-item a::after {
    display: none;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-eight .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-eight .navbar .navbar-nav .nav-item a::after {
    display: none;
  }
}

.navbar-area.navbar-eight .navbar .navbar-nav .nav-item a::after {
  top: auto;
  bottom: 0;
}

.navbar-area.navbar-eight .navbar .navbar-nav .nav-item:hover > a {
  opacity: 1;
  border-color: #e5e5e8;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-eight .navbar .navbar-nav .nav-item:hover > a {
    border: 0;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-eight .navbar .navbar-nav .nav-item:hover > a {
    border: 0;
  }
}

.navbar-area.navbar-eight .navbar .navbar-nav .nav-item:hover > a::before, .navbar-area.navbar-eight .navbar .navbar-nav .nav-item:hover > a::after {
  transform: translateX(-50%) scaleX(1);
}

.navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-nav-toggler {
  display: none;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-nav-toggler {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 14px;
    font-size: 16px;
    background: none;
    border: 0;
    color: #121212;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-nav-toggler {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 14px;
    font-size: 16px;
    background: none;
    border: 0;
    color: #121212;
  }
}

.navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu {
  position: absolute;
  right: 0;
  top: 100%;
  width: 260px;
  background-color: #fff;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
  z-index: 99;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16);
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    top: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    right: auto;
    transform: translateX(0%);
    transition: all none ease-out 0s;
    box-shadow: none;
    text-align: left;
    border-top: 0;
    height: 0;
  }
}

.navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
  height: auto;
  display: block;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
    height: 0;
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu.show {
    height: auto;
  }
}

.navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li {
  position: relative;
}

.navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li .sub-nav-toggler {
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

.navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li a {
  display: block;
  padding: 8px 24px;
  position: relative;
  color: #121212;
  transition: all 0s ease-out 0s;
  border-radius: 0;
  margin: 0 0;
  opacity: 1;
  border: 0;
}

.navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler {
  color: #121212;
}

.navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li a i {
  float: right;
  font-size: 14px;
  margin-top: 5px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li a i {
    display: none;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li a i {
    display: none;
  }
}

.navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler i {
  display: inline-block;
}

.navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li a::after, .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li a::before {
  display: none;
}

.navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
  right: auto;
  left: 100%;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
    padding-left: 30px;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
    padding-left: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li .sub-menu.show {
    visibility: visible;
    height: auto;
    position: relative;
  }
}

.navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}

.navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-nav-toggler {
  color: #fff;
}

.navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li:hover > a {
  background: #0067f4;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  color: #fff;
}

.navbar-area.navbar-eight .navbar .navbar-nav .nav-item .sub-menu li:hover > a::before {
  opacity: 1;
}

.navbar-area.navbar-eight .navbar .navbar-nav .nav-item:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}

.navbar-area.navbar-eight .navbar .navbar-btn {
  margin-top: 15px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-eight .navbar .navbar-btn {
    position: absolute;
    right: 70px;
    top: 7px;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-eight .navbar .navbar-btn {
    position: absolute;
    right: 60px;
    top: 7px;
  }
}

.navbar-area.navbar-eight .navbar .navbar-btn .menu-bar {
  font-size: 32px;
  position: relative;
  overflow: hidden;
  color: #121212;
}

/*===== NAVBAR SAVEN =====*/
.navbar-area.navbar-nine {
  background: #0067f4;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  padding: 10px 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-nine {
    padding: 10px 0;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-nine {
    padding: 10px 0;
  }
}

.navbar-area.navbar-nine .navbar {
  position: relative;
  padding: 0;
}

.navbar-area.navbar-nine .navbar .navbar-toggler .toggler-icon {
  width: 30px;
  height: 2px;
  background-color: #fff;
  margin: 5px 0;
  display: block;
  position: relative;
  transition: all 0.3s ease-out 0s;
}

.navbar-area.navbar-nine .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) {
  transform: rotate(45deg);
  top: 7px;
}

.navbar-area.navbar-nine .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) {
  opacity: 0;
}

.navbar-area.navbar-nine .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) {
  transform: rotate(135deg);
  top: -7px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-nine .navbar .navbar-collapse {
    position: absolute;
    top: 116%;
    left: 0;
    width: 100%;
    background-color: #0067f4;
    z-index: 8;
    padding: 10px 16px;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-nine .navbar .navbar-collapse {
    position: absolute;
    top: 116%;
    left: 0;
    width: 100%;
    background-color: #0067f4;
    z-index: 8;
    padding: 10px 16px;
  }
}

.navbar-area.navbar-nine .navbar .navbar-nav {
  margin-right: 24px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-nine .navbar .navbar-nav {
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-nine .navbar .navbar-nav {
    margin-right: 0;
  }
}

.navbar-area.navbar-nine .navbar .navbar-nav .nav-item {
  position: relative;
}

.navbar-area.navbar-nine .navbar .navbar-nav .nav-item a {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  padding: 11px 16px;
  color: #fff;
  text-transform: uppercase;
  position: relative;
  border-radius: 5px;
  transition: all 0.3s ease-out 0s;
  margin: 14px 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item a {
    padding: 10px 0;
    display: block;
    border: 0;
    margin: 0;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item a {
    padding: 10px 0;
    display: block;
    border: 0;
    margin: 0;
  }
}

.navbar-area.navbar-nine .navbar .navbar-nav .nav-item a.active::before, .navbar-area.navbar-nine .navbar .navbar-nav .nav-item a.active::after {
  opacity: 1;
}

.navbar-area.navbar-nine .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-nine .navbar .navbar-nav .nav-item a::after {
  position: absolute;
  content: '';
  width: 8px;
  height: 4px;
  background-color: #2bdbdc;
  left: 50%;
  margin: 0 2px;
  bottom: 0;
  opacity: 0;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-nine .navbar .navbar-nav .nav-item a::after {
    display: none;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item a::before, .navbar-area.navbar-nine .navbar .navbar-nav .nav-item a::after {
    display: none;
  }
}

.navbar-area.navbar-nine .navbar .navbar-nav .nav-item a::after {
  left: auto;
  right: 50%;
}

.navbar-area.navbar-nine .navbar .navbar-nav .nav-item:hover > a::before, .navbar-area.navbar-nine .navbar .navbar-nav .nav-item:hover > a::after {
  opacity: 1;
}

.navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu {
  position: absolute;
  left: 0;
  top: 100%;
  width: 260px;
  background-color: #fff;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
  z-index: 99;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16);
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    top: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    right: auto;
    transform: translateX(0%);
    transition: all none ease-out 0s;
    box-shadow: none;
    text-align: left;
    border-top: 0;
    height: 0;
  }
}

.navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
  height: auto;
  display: block;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
    height: 0;
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu.show {
    height: auto;
  }
}

.navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li {
  position: relative;
}

.navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li .sub-nav-toggler {
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

.navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li a {
  display: block;
  padding: 8px 24px;
  position: relative;
  color: #121212;
  transition: all 0.3s ease-out 0s;
  border-radius: 0;
  margin: 0 0;
  z-index: 5;
}

.navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li a i {
  float: right;
  font-size: 14px;
  margin-top: 5px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li a i {
    display: none;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li a i {
    display: none;
  }
}

.navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler i {
  display: inline-block;
}

.navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li a::after {
  position: absolute;
  content: '';
  top: 0;
  left: -2px;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  opacity: 0;
  transition: all 0.3s ease-out 0s;
  z-index: -1;
}

.navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li a::before {
  display: none;
}

.navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
  right: auto;
  left: 100%;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
    padding-left: 30px;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
    padding-left: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li .sub-menu.show {
    visibility: visible;
    height: auto;
    position: relative;
  }
}

.navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}

.navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-nav-toggler {
  color: #fff;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-nav-toggler {
    color: #121212;
  }
}

.navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li:hover > a {
  color: #fff;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li:hover > a {
    color: #121212;
  }
}

.navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li:hover > a::after {
  opacity: 1;
}

.navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-menu li:hover > a::before {
  opacity: 1;
}

.navbar-area.navbar-nine .navbar .navbar-nav .nav-item:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}

.navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-nav-toggler {
  display: none;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-nav-toggler {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 14px;
    font-size: 16px;
    background: none;
    border: 0;
    color: #fff;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-nine .navbar .navbar-nav .nav-item .sub-nav-toggler {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 14px;
    font-size: 16px;
    background: none;
    border: 0;
    color: #fff;
  }
}

.navbar-area.navbar-nine .navbar .navbar-btn {
  margin-top: 15px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-nine .navbar .navbar-btn {
    position: absolute;
    right: 70px;
    top: 7px;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-nine .navbar .navbar-btn {
    position: absolute;
    right: 60px;
    top: 7px;
  }
}

.navbar-area.navbar-nine .navbar .navbar-btn .menu-bar {
  font-size: 32px;
  position: relative;
  overflow: hidden;
  color: #fff;
}

/*===== NAVBAR NINE =====*/
.navbar-area.navbar-ten {
  background-color: #f4f6f7;
  padding: 10px 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-ten {
    padding: 10px 0;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-ten {
    padding: 10px 0;
  }
}

.navbar-area.navbar-ten .navbar {
  position: relative;
  padding: 0;
}

.navbar-area.navbar-ten .navbar .navbar-toggler .toggler-icon {
  width: 30px;
  height: 2px;
  background-color: #121212;
  margin: 5px 0;
  display: block;
  position: relative;
  transition: all 0.3s ease-out 0s;
}

.navbar-area.navbar-ten .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) {
  transform: rotate(45deg);
  top: 7px;
}

.navbar-area.navbar-ten .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) {
  opacity: 0;
}

.navbar-area.navbar-ten .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) {
  transform: rotate(135deg);
  top: -7px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-ten .navbar .navbar-collapse {
    position: absolute;
    top: 116%;
    left: 0;
    width: 100%;
    background-color: #f4f6f7;
    z-index: 8;
    padding: 10px 16px;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-ten .navbar .navbar-collapse {
    position: absolute;
    top: 116%;
    left: 0;
    width: 100%;
    background-color: #f4f6f7;
    z-index: 8;
    padding: 10px 16px;
  }
}

.navbar-area.navbar-ten .navbar .navbar-nav {
  margin-right: 24px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-ten .navbar .navbar-nav {
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-ten .navbar .navbar-nav {
    margin-right: 0;
  }
}

.navbar-area.navbar-ten .navbar .navbar-nav .nav-item {
  position: relative;
}

.navbar-area.navbar-ten .navbar .navbar-nav .nav-item a {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  padding: 11px 16px;
  color: #121212;
  text-transform: uppercase;
  position: relative;
  border-radius: 5px;
  transition: all 0.3s ease-out 0s;
  margin: 14px 0;
  opacity: 0.7;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-ten .navbar .navbar-nav .nav-item a {
    padding: 10px 0;
    display: block;
    border: 0;
    margin: 0;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-ten .navbar .navbar-nav .nav-item a {
    padding: 10px 0;
    display: block;
    border: 0;
    margin: 0;
  }
}

.navbar-area.navbar-ten .navbar .navbar-nav .nav-item a.active {
  opacity: 1;
}

.navbar-area.navbar-ten .navbar .navbar-nav .nav-item a.active::before {
  transform: translateX(-50%) scaleX(1);
}

.navbar-area.navbar-ten .navbar .navbar-nav .nav-item a::before {
  position: absolute;
  content: '';
  width: 32px;
  height: 4px;
  background: #0067f4;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  left: 50%;
  bottom: 0;
  transition: all 0.3s ease-out 0s;
  transform: translateX(-50%) scaleX(0);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-ten .navbar .navbar-nav .nav-item a::before {
    display: none;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-ten .navbar .navbar-nav .nav-item a::before {
    display: none;
  }
}

.navbar-area.navbar-ten .navbar .navbar-nav .nav-item:hover > a {
  opacity: 1;
}

.navbar-area.navbar-ten .navbar .navbar-nav .nav-item:hover > a::before {
  transform: translateX(-50%) scaleX(1);
}

.navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-nav-toggler {
  display: none;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-nav-toggler {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 14px;
    font-size: 16px;
    background: none;
    border: 0;
    color: #121212;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-nav-toggler {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 14px;
    font-size: 16px;
    background: none;
    border: 0;
    color: #121212;
  }
}

.navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu {
  position: absolute;
  left: 0;
  top: 100%;
  width: 260px;
  background-color: #fff;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
  z-index: 99;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16);
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    top: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    right: auto;
    transform: translateX(0%);
    transition: all none ease-out 0s;
    box-shadow: none;
    text-align: left;
    border-top: 0;
    height: 0;
  }
}

.navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
  height: auto;
  display: block;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
    height: 0;
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu.show {
    height: auto;
  }
}

.navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li {
  position: relative;
}

.navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li .sub-nav-toggler {
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

.navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li a {
  display: block;
  padding: 8px 24px;
  position: relative;
  color: #121212;
  transition: all 0.3s ease-out 0s;
  border-radius: 0;
  margin: 0 0;
  opacity: 1;
  border: 0;
  z-index: 5;
}

.navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler {
  color: #121212;
}

.navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li a i {
  float: right;
  font-size: 14px;
  margin-top: 5px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li a i {
    display: none;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li a i {
    display: none;
  }
}

.navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler i {
  display: inline-block;
}

.navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li a::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  opacity: 0;
  transition: all 0.3s ease-out 0s;
  z-index: -1;
}

.navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li a::before {
  display: none;
}

.navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
  right: auto;
  left: 100%;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
    padding-left: 30px;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
    padding-left: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li .sub-menu.show {
    visibility: visible;
    height: auto;
    position: relative;
  }
}

.navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}

.navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-nav-toggler {
  color: #fff;
}

.navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li:hover > a {
  color: #fff;
}

.navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li:hover > a::after {
  opacity: 1;
}

.navbar-area.navbar-ten .navbar .navbar-nav .nav-item .sub-menu li:hover > a::before {
  opacity: 1;
}

.navbar-area.navbar-ten .navbar .navbar-nav .nav-item:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}

.navbar-area.navbar-ten .navbar .navbar-btn {
  margin-top: 15px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .navbar-area.navbar-ten .navbar .navbar-btn {
    position: absolute;
    right: 70px;
    top: 7px;
  }
}

@media (max-width: 767px) {
  .navbar-area.navbar-ten .navbar .navbar-btn {
    position: absolute;
    right: 60px;
    top: 7px;
  }
}

.navbar-area.navbar-ten .navbar .navbar-btn .menu-bar {
  font-size: 32px;
  position: relative;
  overflow: hidden;
  color: #121212;
}

/*===== NAVBAR ELEVEN =====*/
.navbar-eleven {
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  padding: 10px 0;
}

.navbar-eleven .navbar {
  padding: 0;
}

.navbar-eleven .navbar .navbar-menu .menu-bar {
  font-size: 32px;
  position: relative;
  overflow: hidden;
  color: #fff;
  line-height: 28px;
}

.navbar-eleven .navbar .navbar-brand {
  margin-right: 0;
}

@media (max-width: 767px) {
  .navbar-eleven .navbar .navbar-brand img {
    width: 40px;
  }
}

.navbar-eleven .navbar .navbar-btn ul li {
  display: inline-block;
  margin-right: 5px;
}

.navbar-eleven .navbar .navbar-btn ul li a {
  padding: 10px 16px;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  border: 2px solid;
  border-radius: 4px;
  transition: all 0.3s ease-out 0s;
}

@media (max-width: 767px) {
  .navbar-eleven .navbar .navbar-btn ul li a {
    padding: 6px 8px;
    font-size: 14px;
  }
}

.navbar-eleven .navbar .navbar-btn ul li a.light {
  border-color: #fff;
}

.navbar-eleven .navbar .navbar-btn ul li a.light:hover {
  background-color: rgba(255, 255, 255, 0.4);
}

.navbar-eleven .navbar .navbar-btn ul li a.solid {
  background-color: #fff;
  border-color: #fff;
  color: #0067f4;
}

.navbar-eleven .navbar .navbar-btn ul li a.solid:hover {
  background-color: transparent;
  color: #fff;
}

/*===== NAVBAR TWELVE =====*/
.navbar-twelve {
  background-color: #f4f6f7;
  padding: 10px 0;
}

.navbar-twelve .navbar {
  padding: 0;
}

.navbar-twelve .navbar .navbar-menu .menu-bar {
  font-size: 32px;
  position: relative;
  overflow: hidden;
  color: #0067f4;
  line-height: 28px;
}

.navbar-twelve .navbar .navbar-brand {
  margin-right: 0;
}

@media (max-width: 767px) {
  .navbar-twelve .navbar .navbar-brand img {
    width: 40px;
  }
}

.navbar-twelve .navbar .navbar-btn ul li {
  display: inline-block;
  margin-right: 5px;
}

.navbar-twelve .navbar .navbar-btn ul li a {
  padding: 10px 16px;
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 700;
  color: #fff;
  border: 2px solid;
  border-radius: 4px;
  transition: all 0.3s ease-out 0s;
}

@media (max-width: 767px) {
  .navbar-twelve .navbar .navbar-btn ul li a {
    padding: 6px 8px;
    font-size: 14px;
  }
}

.navbar-twelve .navbar .navbar-btn ul li a.light {
  border-image-source: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%);
  border-image-source: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%);
  border-image-source: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  border-image-slice: 1;
  color: #0067f4;
  position: relative;
  z-index: 5;
}

.navbar-twelve .navbar .navbar-btn ul li a.light::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  left: 0;
  top: 0;
  z-index: -1;
  opacity: 0;
  transition: all 0.3s ease-out 0s;
}

.navbar-twelve .navbar .navbar-btn ul li a.light:hover {
  color: #fff;
}

.navbar-twelve .navbar .navbar-btn ul li a.light:hover::before {
  opacity: 1;
}

.navbar-twelve .navbar .navbar-btn ul li a.solid {
  color: #fff;
  position: relative;
  border-image-source: -webkit-linear-gradient(left, #0067f4 0%, #2bdbdc 100%);
  border-image-source: -o-linear-gradient(left, #0067f4 0%, #2bdbdc 100%);
  border-image-source: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  border-image-slice: 1;
  z-index: 5;
}

.navbar-twelve .navbar .navbar-btn ul li a.solid::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  left: 0;
  top: 0;
  z-index: -1;
  transition: all 0.3s ease-out 0s;
  opacity: 1;
}

.navbar-twelve .navbar .navbar-btn ul li a.solid:hover {
  color: #0067f4;
}

.navbar-twelve .navbar .navbar-btn ul li a.solid:hover::before {
  opacity: 0;
}

/*===== NAVBAR THIRTEEN =====*/
.navbar-thirteen {
  background-color: #f4f6f7;
}

.navbar-thirteen .navbar .navbar-right .navbar-social span {
  font-size: 16px;
  line-height: 24px;
  color: #6c6c6c;
  text-transform: uppercase;
  font-weight: 700;
  margin-right: 14px;
}

.navbar-thirteen .navbar .navbar-right .navbar-social ul li {
  display: inline-block;
  margin-right: 5px;
}

.navbar-thirteen .navbar .navbar-right .navbar-social ul li a {
  font-size: 32px;
  color: #0067f4;
  transition: all 0.3s ease-out 0s;
}

.navbar-thirteen .navbar .navbar-right .navbar-btn {
  margin-left: 30px;
}

/*===== SAIDEBAR ONE =====*/
.sidebar-left {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #f4f6f7;
  height: 100%;
  width: 300px;
  padding-top: 80px;
  z-index: 99;
  transform: translateX(-100%);
  transition: all 0.3s ease-out 0s;
}

.sidebar-left.open {
  transform: translateX(0);
}

@media (max-width: 767px) {
  .sidebar-left {
    width: 250px;
  }
}

.sidebar-left .sidebar-close {
  position: absolute;
  top: 30px;
  right: 30px;
}

.sidebar-left .sidebar-close .close {
  font-size: 24px;
  color: #121212;
}

.sidebar-left .sidebar-content .sidebar-menu {
  margin-top: 40px;
}

.sidebar-left .sidebar-content .sidebar-menu ul li a {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  padding: 11px 16px;
  color: #121212;
  text-transform: uppercase;
  position: relative;
  border-radius: 5px;
  transition: all 0.3s ease-out 0s;
  border-bottom: 1px solid #cbced1;
  display: block;
}

.sidebar-left .sidebar-content .sidebar-menu ul li a:hover {
  color: #0067f4;
}

.sidebar-left .sidebar-content .sidebar-social {
  margin-top: 30px;
}

.sidebar-left .sidebar-content .sidebar-social span {
  font-size: 16px;
  line-height: 24px;
  color: #6c6c6c;
  text-transform: uppercase;
  font-weight: 700;
  margin-right: 14px;
}

.sidebar-left .sidebar-content .sidebar-social ul li {
  display: inline-block;
  margin-right: 5px;
}

.sidebar-left .sidebar-content .sidebar-social ul li a {
  font-size: 32px;
  color: #0067f4;
  transition: all 0.3s ease-out 0s;
}

.sidebar-right {
  position: fixed;
  top: 0;
  right: 0;
  background-color: #f4f6f7;
  height: 100%;
  width: 300px;
  padding-top: 80px;
  z-index: 99;
  transform: translateX(100%);
  transition: all 0.3s ease-out 0s;
}

.sidebar-right.open {
  transform: translateX(0);
}

@media (max-width: 767px) {
  .sidebar-right {
    width: 250px;
  }
}

.sidebar-right .sidebar-close {
  position: absolute;
  top: 30px;
  left: 30px;
}

.sidebar-right .sidebar-close .close {
  font-size: 24px;
  color: #121212;
}

.sidebar-right .sidebar-content .sidebar-menu {
  margin-top: 40px;
}

.sidebar-right .sidebar-content .sidebar-menu ul li a {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  padding: 11px 16px;
  color: #121212;
  text-transform: uppercase;
  position: relative;
  border-radius: 5px;
  transition: all 0.3s ease-out 0s;
  border-bottom: 1px solid #cbced1;
  display: block;
}

.sidebar-right .sidebar-content .sidebar-menu ul li a:hover {
  color: #0067f4;
}

.sidebar-right .sidebar-content .sidebar-social {
  margin-top: 30px;
}

.sidebar-right .sidebar-content .sidebar-social span {
  font-size: 16px;
  line-height: 24px;
  color: #6c6c6c;
  text-transform: uppercase;
  font-weight: 700;
  margin-right: 14px;
}

.sidebar-right .sidebar-content .sidebar-social ul li {
  display: inline-block;
  margin-right: 5px;
}

.sidebar-right .sidebar-content .sidebar-social ul li a {
  font-size: 32px;
  color: #0067f4;
  transition: all 0.3s ease-out 0s;
}

.overlay-left {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 9;
}

.overlay-left.open {
  display: block;
}

.overlay-right {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.6);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 9;
}

.overlay-right.open {
  display: block;
}

/*===========================
       10.SLIDER css 
===========================*/
/*===== SLIDER ONE =====*/
.slider-one .bd-example .carousel .carousel-inner {
  background-color: #0067f4;
}

.slider-one .bd-example .carousel .carousel-inner .carousel-item {
  height: 600px;
}

@media (max-width: 767px) {
  .slider-one .bd-example .carousel .carousel-inner .carousel-item {
    height: 400px;
  }
}

.slider-one .bd-example .carousel .carousel-inner .carousel-item .carousel-caption {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: 100%;
    left: 0;
    right: 0;
}

.slider-one .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-title {
  font-size: 44px;
  font-weight: 700;
  color: #fff;
  line-height: 55px;
}

@media (max-width: 767px) {
  .slider-one .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-title {
    font-size: 24px;
    line-height: 32px;
  }
}

.slider-one .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-btn li {
  display: inline-block;
  margin: 16px 8px 0;
}

@media (max-width: 767px) {
  .slider-one .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-btn li {
    margin: 16px 3px 0;
  }
}

.slider-one .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-btn li a.rounded-three {
  border: 0;
}

.slider-one .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-btn li a.rounded-one {
  border-color: #fff;
  color: #fff;
}

.slider-one .bd-example .carousel .carousel-inner .carousel-item .carousel-caption .carousel-btn li a.rounded-one:hover {
  background-color: #fff;
  color: #0067f4;
}

.slider-one .bd-example .carousel .carousel-control-prev,
.slider-one .bd-example .carousel .carousel-control-next {
  top: 50%;
  width: auto;
  height: auto;
  font-size: 70px;
  color: #fff;
  transform: translateY(-50%);
  bottom: auto;
  left: 70px;
  opacity: 1;
  z-index: 99;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .slider-one .bd-example .carousel .carousel-control-prev,
  .slider-one .bd-example .carousel .carousel-control-next {
    left: 30px;
    font-size: 50px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider-one .bd-example .carousel .carousel-control-prev,
  .slider-one .bd-example .carousel .carousel-control-next {
    left: 30px;
    font-size: 50px;
  }
}

@media (max-width: 767px) {
  .slider-one .bd-example .carousel .carousel-control-prev,
  .slider-one .bd-example .carousel .carousel-control-next {
    left: 20px;
    font-size: 20px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .slider-one .bd-example .carousel .carousel-control-prev,
  .slider-one .bd-example .carousel .carousel-control-next {
    font-size: 34px;
  }
}

.slider-one .bd-example .carousel .carousel-control-next {
  right: 70px;
  left: auto;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .slider-one .bd-example .carousel .carousel-control-next {
    right: 40px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider-one .bd-example .carousel .carousel-control-next {
    right: 40px;
  }
}

@media (max-width: 767px) {
  .slider-one .bd-example .carousel .carousel-control-next {
    right: 20px;
  }
}

.slider-one .bd-example .carousel .carousel-indicators {
  margin-bottom: 20px;
}

.slider-one .bd-example .carousel .carousel-indicators li {
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  border: 0;
}

.slider-one .bd-example .carousel .carousel-indicators li.active {
  width: 16px;
  background-color: #fff;
  border-radius: 5px;
}

/*===== SLIDER TWO =====*/
.slider-area.slider-two {
  background-color: #f4f6f7;
  position: relative;
}

.slider-area.slider-two .slider-content {
  padding-top: 232px;
  padding-bottom: 232px;
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 767px) {
  .slider-area.slider-two .slider-content {
    padding-top: 132px;
    padding-bottom: 132px;
  }
}

.slider-area.slider-two .slider-content .slider-title {
  font-size: 44px;
  line-height: 55px;
  color: #121212;
  padding: 0 5px;
}

@media (max-width: 767px) {
  .slider-area.slider-two .slider-content .slider-title {
    font-size: 24px;
    line-height: 32px;
  }
}

.slider-area.slider-two .slider-content .text {
  font-size: 16px;
  line-height: 24px;
  color: #6c6c6c;
  margin-top: 16px;
}

@media (max-width: 767px) {
  .slider-area.slider-two .slider-content .text {
    font-size: 14px;
  }
}

.slider-area.slider-two .slider-content .slider-btn {
  margin-top: 14px;
}

.slider-area.slider-two .slider-content .slider-btn li {
  display: inline-block;
  margin: 10px 8px 0;
}

@media (max-width: 767px) {
  .slider-area.slider-two .slider-content .slider-btn li {
    margin: 10px 3px 0;
  }
}

.slider-area.slider-two .carousel {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider-area.slider-two .carousel {
    position: relative;
    height: 700px;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .slider-area.slider-two .carousel {
    position: relative;
    height: 400px;
    width: 100%;
  }
}

.slider-area.slider-two .carousel .carousel-inner {
  width: 100%;
  height: 100%;
}

.slider-area.slider-two .carousel .carousel-inner .carousel-item {
  width: 100%;
  height: 100%;
}

.slider-area.slider-two .carousel .carousel-control-prev,
.slider-area.slider-two .carousel .carousel-control-next {
  top: 30%;
  width: auto;
  height: auto;
  font-size: 32px;
  color: #fff;
  bottom: auto;
  left: 8px;
  right: auto;
  opacity: 1;
}

@media (max-width: 767px) {
  .slider-area.slider-two .carousel .carousel-control-prev,
  .slider-area.slider-two .carousel .carousel-control-next {
    font-size: 24px;
  }
}

.slider-area.slider-two .carousel .carousel-control-next {
  top: auto;
  bottom: 30%;
}

.slider-area.slider-two .carousel .carousel-indicators {
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 20px;
  bottom: auto;
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 767px) {
  .slider-area.slider-two .carousel .carousel-indicators {
    left: 16px;
  }
}

.slider-area.slider-two .carousel .carousel-indicators li {
  display: block;
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50px;
  border: 0;
  margin: 5px 0;
}

.slider-area.slider-two .carousel .carousel-indicators li.active {
  background-color: #fff;
  height: 16px;
  border-radius: 5px;
}

/*===== SLIDER THREE =====*/
.slider-three {
  background-color: #f4f6f7;
  padding-top: 112px;
  padding-bottom: 130px;
}

.slider-three .section-title .title {
  font-size: 44px;
  line-height: 55px;
  font-weight: 700;
  color: #121212;
}

@media (max-width: 767px) {
  .slider-three .section-title .title {
    font-size: 28px;
    line-height: 32px;
  }
}

.slider-three .section-title .text {
  font-size: 16px;
  line-height: 24px;
  color: #6c6c6c;
  margin-top: 24px;
}

@media (max-width: 767px) {
  .slider-three .section-title .text {
    font-size: 14px;
  }
}

.slider-three .slider-items-wrapper {
  position: relative;
}

.slider-three .slider-items-wrapper .tns-nav {
  width: 100%;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-top: 38px;
}

.slider-three .slider-items-wrapper .tns-nav button {
  width: 8px;
  height: 8px;
  border-radius: 50px;
  background-color: rgba(0, 103, 244, 0.3);
  border: 0;
  margin: 0 2px;
}

.slider-three .slider-items-wrapper .tns-nav button.tns-nav-active {
  width: 16px;
  background-color: #0067f4;
  border-radius: 5px;
}

.slider-three .single-items-one img {
  width: 100%;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
  border-radius: 10px;
}

/*===== SLIDER FOUR =====*/
.slider-four .carousel-item {
  background-color: #0067f4;
  position: relative;
}

.slider-four .carousel-item::before {
  position: absolute;
  content: '';
  width: 33%;
  height: 100%;
  background: #0067f4;
  background: linear-gradient(rgba(0, 103, 244, 0.3) 0%, rgba(43, 219, 220, 0.3) 100%);
  top: 0;
  right: 15%;
  transform: skewX(20deg);
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .slider-four .carousel-item::before {
    width: 40%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider-four .carousel-item::before {
    width: 60%;
  }
}

@media (max-width: 767px) {
  .slider-four .carousel-item::before {
    width: 50%;
    right: 45%;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .slider-four .carousel-item::before {
    right: 25%;
  }
}

.slider-four .carousel-item .slider-content {
  padding-top: 124px;
  padding-bottom: 136px;
  position: relative;
  z-index: 9;
}

.slider-four .carousel-item .slider-content .title {
  font-size: 88px;
  line-height: 96px;
  color: #fff;
  font-weight: 700;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .slider-four .carousel-item .slider-content .title {
    font-size: 68px;
    line-height: 90px;
  }
}

@media (max-width: 767px) {
  .slider-four .carousel-item .slider-content .title {
    font-size: 48px;
    line-height: 65px;
  }
}

.slider-four .carousel-item .slider-content .text {
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  margin-top: 16px;
}

.slider-four .carousel-item .slider-content .slider-btn {
  padding-top: 16px;
}

.slider-four .carousel-item .slider-content .slider-btn li {
  display: inline-block;
  margin: 16px 8px 0;
}

@media (max-width: 767px) {
  .slider-four .carousel-item .slider-content .slider-btn li {
    margin: 16px 3px 0;
  }
}

.slider-four .carousel-item .slider-content .slider-btn li a.rounded-one {
  background-color: #fff;
  border-color: #fff;
}

.slider-four .carousel-item .slider-content .slider-btn li a.rounded-one:hover {
  background-color: transparent;
  color: #fff;
}

.slider-four .carousel-item .slider-content .slider-btn li a.rounded-two {
  border-color: #fff;
}

.slider-four .carousel-item .slider-content .slider-btn li a.rounded-two:hover {
  background-color: #fff;
  color: #0067f4;
}

.slider-four .carousel-item .slider-image-box {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  z-index: 9;
}

.slider-four .carousel-item .slider-image-box .slider-image {
  max-width: 680px;
  width: 100%;
}

.slider-four .carousel .carousel-control-prev,
.slider-four .carousel .carousel-control-next {
  top: 50%;
  font-size: 32px;
  color: #fff;
  bottom: auto;
  left: 60px;
  right: auto;
  opacity: 1;
  transform: translateY(-50%);
  z-index: 99;
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 5px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .slider-four .carousel .carousel-control-prev,
  .slider-four .carousel .carousel-control-next {
    left: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider-four .carousel .carousel-control-prev,
  .slider-four .carousel .carousel-control-next {
    left: 30px;
  }
}

@media (max-width: 767px) {
  .slider-four .carousel .carousel-control-prev,
  .slider-four .carousel .carousel-control-next {
    font-size: 24px;
    width: 38px;
    height: 38px;
    left: 30px;
  }
}

.slider-four .carousel .carousel-control-next {
  right: 60px;
  left: auto;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .slider-four .carousel .carousel-control-next {
    right: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider-four .carousel .carousel-control-next {
    right: 30px;
  }
}

@media (max-width: 767px) {
  .slider-four .carousel .carousel-control-next {
    right: 30px;
  }
}

.slider-four .carousel .carousel-indicators {
  margin-bottom: 50px;
}

.slider-four .carousel .carousel-indicators li {
  display: block;
  width: 8px;
  height: 8px;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 50px;
  border: 0;
  margin: 0px 2px;
}

.slider-four .carousel .carousel-indicators li.active {
  background-color: #fff;
  width: 16px;
  border-radius: 5px;
}

/*===== SLIDER FIVE =====*/
.slider-five {
  background-color: #0067f4;
  position: relative;
}

.slider-five .slider-content {
  max-width: 560px;
  margin: 0 auto;
  padding-top: 230px;
  padding-bottom: 236px;
}

@media (max-width: 767px) {
  .slider-five .slider-content {
    padding-top: 100px;
    padding-bottom: 106px;
  }
}

.slider-five .slider-content .slider-title {
  font-size: 44px;
  font-weight: 600;
  color: #fff;
  line-height: 55px;
}

@media (max-width: 767px) {
  .slider-five .slider-content .slider-title {
    font-size: 28px;
    line-height: 38px;
  }
}

.slider-five .slider-content .text {
  font-size: 16px;
  color: #fff;
  line-height: 24px;
  margin-top: 16px;
}

@media (max-width: 767px) {
  .slider-five .slider-content .text {
    font-size: 14px;
  }
}

.slider-five .slider-content .slider-newsletter {
  max-width: 410px;
  position: relative;
  margin: 24px auto 0;
}

.slider-five .slider-content .slider-newsletter i {
  font-size: 26px;
  color: #0067f4;
  position: absolute;
  left: 18px;
  top: 12px;
}

.slider-five .slider-content .slider-newsletter input {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 50px;
  background-color: #fff;
  padding-left: 60px;
  padding-right: 30px;
}

.slider-five .slider-content .slider-newsletter input::placeholder {
  opacity: 1;
  color: #6c6c6c;
}

.slider-five .slider-content .slider-newsletter input::-moz-placeholder {
  opacity: 1;
  color: #6c6c6c;
}

.slider-five .slider-content .slider-newsletter input::-moz-placeholder {
  opacity: 1;
  color: #6c6c6c;
}

.slider-five .slider-content .slider-newsletter input::-webkit-input-placeholder {
  opacity: 1;
  color: #6c6c6c;
}

.slider-five .slider-content .slider-newsletter .slider-btn {
  border: 0;
  position: absolute;
  top: 0;
  right: 0;
}

@media (max-width: 767px) {
  .slider-five .slider-content .slider-newsletter .slider-btn {
    position: relative;
    right: auto;
    margin-top: 15px;
  }
}

.slider-five .slider-content .slider-newsletter .slider-btn .main-btn {
  border: 0;
  border-radius: 50px;
  line-height: 48px;
}

.slider-five .carousel {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider-five .carousel {
    height: 720px;
    position: relative;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .slider-five .carousel {
    height: 420px;
    position: relative;
    width: 100%;
  }
}

.slider-five .carousel .carousel-inner {
  height: 100%;
  width: 100%;
}

.slider-five .carousel .carousel-inner .carousel-item {
  height: 100%;
  width: 100%;
}

.slider-five .carousel .carousel-control-prev,
.slider-five .carousel .carousel-control-next {
  top: 50%;
  width: auto;
  height: auto;
  font-size: 32px;
  color: rgba(0, 103, 244, 0.3);
  transform: translateY(-50%);
  bottom: auto;
  left: 70px;
  opacity: 1;
  z-index: 99;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .slider-five .carousel .carousel-control-prev,
  .slider-five .carousel .carousel-control-next {
    left: 40px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider-five .carousel .carousel-control-prev,
  .slider-five .carousel .carousel-control-next {
    left: 40px;
  }
}

@media (max-width: 767px) {
  .slider-five .carousel .carousel-control-prev,
  .slider-five .carousel .carousel-control-next {
    left: 20px;
    font-size: 20px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .slider-five .carousel .carousel-control-prev,
  .slider-five .carousel .carousel-control-next {
    font-size: 34px;
  }
}

.slider-five .carousel .carousel-control-prev:hover,
.slider-five .carousel .carousel-control-next:hover {
  color: #0067f4;
}

.slider-five .carousel .carousel-control-next {
  right: 70px;
  left: auto;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .slider-five .carousel .carousel-control-next {
    right: 40px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .slider-five .carousel .carousel-control-next {
    right: 40px;
  }
}

@media (max-width: 767px) {
  .slider-five .carousel .carousel-control-next {
    right: 20px;
  }
}

.slider-five .carousel .carousel-indicators {
  margin-bottom: 20px;
}

.slider-five .carousel .carousel-indicators li {
  width: 8px;
  height: 8px;
  background-color: rgba(0, 103, 244, 0.3);
  border-radius: 50px;
  border: 0;
}

.slider-five .carousel .carousel-indicators li.active {
  width: 16px;
  background-color: #0067f4;
  border-radius: 5px;
}

/*===== SLIDER SIX =====*/
.slider-six {
  background-color: #0067f4;
  padding-top: 124px;
  padding-bottom: 130px;
}

.slider-six .section-title .title {
  font-size: 44px;
  font-weight: 600;
  line-height: 55px;
  color: #fff;
}

@media (max-width: 767px) {
  .slider-six .section-title .title {
    font-size: 32px;
    line-height: 40px;
  }
}

.slider-six .single-items-two .items-image img {
  width: 100%;
  border-radius: 10px;
}

.slider-six .single-items-two .items-content {
  margin-top: 16px;
}

.slider-six .single-items-two .items-content .items-title a {
  font-size: 24px;
  line-height: 30px;
  color: #fff;
  font-weight: 600;
}

@media (max-width: 767px) {
  .slider-six .single-items-two .items-content .items-title a {
    font-size: 20px;
    line-height: 28px;
  }
}

.slider-six .single-items-two .items-content .text {
  color: #fff;
  font-size: 16px;
  line-height: 24px;
  margin-top: 8px;
}

.slider-six .slider-items-two-wrapper {
  position: relative;
}

.slider-six .slider-items-two-wrapper .tns-nav {
  width: 100%;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-top: 38px;
}

.slider-six .slider-items-two-wrapper .tns-nav button {
  width: 8px;
  height: 8px;
  border-radius: 50px;
  background-color: rgba(255, 255, 255, 0.3);
  border: 0;
  margin: 0 2px;
}

.slider-six .slider-items-two-wrapper .tns-nav button.tns-nav-active {
  width: 16px;
  background-color: #fff;
  border-radius: 5px;
}

.slider-six .slider-items-two-wrapper .tns-controls {
  position: absolute;
  right: 20px;
  top: -30px;
  display: flex;
  align-items: center;
}

.slider-six .slider-items-two-wrapper .tns-controls button {
  font-size: 32px;
  color: rgba(255, 255, 255, 0.3);
  background: none;
  border: none;
  margin: 0 8px;
}

.slider-six .slider-items-two-wrapper .tns-controls button:hover {
  color: #fff;
}

/*===== SLIDER SAVEN =====*/
.slider-seven {
  background-color: #f4f6f7;
  padding-top: 100px;
  padding-bottom: 100px;
}

.slider-seven .single-items-three .items-image img {
  width: 100%;
  border-radius: 10px;
}

.slider-seven .single-items-three .items-content {
  margin-top: 16px;
  position: relative;
}

.slider-seven .single-items-three .items-content .items-title {
  padding-right: 30px;
}

.slider-seven .single-items-three .items-content .items-title a {
  font-size: 24px;
  line-height: 30px;
  color: #121212;
  font-weight: 600;
  transition: all 0.3s ease-out 0s;
}

@media (max-width: 767px) {
  .slider-seven .single-items-three .items-content .items-title a {
    font-size: 20px;
    line-height: 28px;
  }
}

.slider-seven .single-items-three .items-content .items-title a:hover {
  color: #0067f4;
}

.slider-seven .single-items-three .items-content i {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 24px;
  color: #121212;
}

.slider-seven .slider-items-three-wrapper {
  position: relative;
}

.slider-seven .slider-items-three-wrapper .tns-nav {
  width: 100%;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-top: 38px;
}

.slider-seven .slider-items-three-wrapper .tns-nav button {
  width: 8px;
  height: 8px;
  border-radius: 50px;
  background-color: rgba(0, 103, 244, 0.3);
  border: 0;
  margin: 0 2px;
}

.slider-seven .slider-items-three-wrapper .tns-nav button.tns-nav-active {
  width: 16px;
  background-color: #0067f4;
  border-radius: 5px;
}

.slider-seven .slider-items-three-wrapper .tns-controls {
  z-index: 2;
}

.slider-seven .slider-items-three-wrapper .tns-controls button {
  background: none;
  border: none;
  position: absolute;
  top: 50%;
  left: -40px;
  font-size: 32px;
  line-height: 30px;
  color: #a4a4a4;
  transform: translateY(-50%);
  cursor: pointer;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .slider-seven .slider-items-three-wrapper .tns-controls button {
    left: -20px;
    font-size: 28px;
  }
}

@media (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .slider-seven .slider-items-three-wrapper .tns-controls button {
    font-size: 24px;
    left: -24px;
  }
}

.slider-seven .slider-items-three-wrapper .tns-controls button:hover {
  color: #0067f4;
}

.slider-seven .slider-items-three-wrapper .tns-controls button[data-controls="next"] {
  left: auto;
  right: -40px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .slider-seven .slider-items-three-wrapper .tns-controls button[data-controls="next"] {
    right: -20px;
    font-size: 28px;
  }
}

@media (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .slider-seven .slider-items-three-wrapper .tns-controls button[data-controls="next"] {
    right: -24px;
  }
}

.slider-seven .slider-items-three-active .slick-dots {
  text-align: center;
  margin-top: 38px;
}

.slider-seven .slider-items-three-active .slick-dots li {
  display: inline-block;
  margin: 0 2px;
}

.slider-seven .slider-items-three-active .slick-dots li button {
  width: 8px;
  height: 8px;
  border-radius: 50px;
  background-color: rgba(0, 103, 244, 0.3);
  border: 0;
  font-size: 0;
}

.slider-seven .slider-items-three-active .slick-dots li.slick-active button {
  width: 16px;
  background-color: #0067f4;
  border-radius: 5px;
}

.slider-seven .slider-items-three-active .slick-arrow {
  font-size: 32px;
  color: #a4a4a4;
  position: absolute;
  top: 50%;
  left: -46px;
  transform: translateY(-50%);
  transition: all 0.3s ease-out 0s;
  cursor: pointer;
}

@media (max-width: 767px) {
  .slider-seven .slider-items-three-active .slick-arrow {
    left: -28px;
    font-size: 24px;
  }
}

.slider-seven .slider-items-three-active .slick-arrow.next {
  left: auto;
  right: -46px;
}

@media (max-width: 767px) {
  .slider-seven .slider-items-three-active .slick-arrow.next {
    right: -28px;
  }
}

.slider-seven .slider-items-three-active .slick-arrow:hover {
  color: #0067f4;
}

/*===========================
    11.BUTTON css 
===========================*/
.buttons-title .title {
  font-size: 36px;
  line-height: 45px;
  color: #6c6c6c;
}

@media (max-width: 767px) {
  .buttons-title .title {
    font-size: 24px;
    line-height: 35px;
  }
}

.main-btn {
  display: inline-block;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 2px solid transparent;
  padding: 0 32px;
  font-size: 16px;
  line-height: 46px;
  color: #0067f4;
  cursor: pointer;
  z-index: 5;
  transition: all 0.4s ease-out 0s;
  position: relative;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .main-btn {
    font-size: 14px;
    padding: 0 20px;
    line-height: 40px;
  }
}

/*===== standard Buttons =====*/
.standard-buttons ul li {
  display: inline-block;
  margin-left: 18px;
  margin-top: 20px;
}

@media (max-width: 767px) {
  .standard-buttons ul li {
    margin-left: 0;
  }
}

.standard-buttons ul li:first-child {
  margin-left: 0;
}

.standard-buttons .standard-one {
  border-color: #0067f4;
}

.standard-buttons .standard-one:hover {
  color: #0067f4;
  background-color: rgba(0, 103, 244, 0.4);
}

.standard-buttons .standard-two {
  color: #fff;
  background-color: #0067f4;
  border-color: #0067f4;
}

.standard-buttons .standard-two:hover {
  color: #0067f4;
  background-color: transparent;
}

.standard-buttons .standard-three {
  overflow: hidden;
  line-height: 50px;
  color: #fff;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%);
  border: 0;
  line-height: 52px;
  background-size: 200% auto;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .standard-buttons .standard-three {
    line-height: 44px;
  }
}

@media (max-width: 767px) {
  .standard-buttons .standard-three {
    line-height: 44px;
  }
}

.standard-buttons .standard-three:hover {
  background-position: right center;
}

.standard-buttons .standard-four {
  border-color: #0067f4;
  padding-left: 60px;
}

@media (max-width: 767px) {
  .standard-buttons .standard-four {
    padding-left: 40px;
  }
}

.standard-buttons .standard-four span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  left: 30px;
  line-height: normal;
  padding: 0 1px;
}

@media (max-width: 767px) {
  .standard-buttons .standard-four span {
    left: 15px;
  }
}

.standard-buttons .standard-four:hover {
  color: #0067f4;
  background-color: rgba(0, 103, 244, 0.4);
}

.standard-buttons .standard-four:hover i {
  animation: iconTranslateY 0.5s forwards;
}

.standard-buttons .standard-five {
  color: #fff;
  background-color: #0067f4;
  border-color: #0067f4;
  padding-left: 60px;
}

@media (max-width: 767px) {
  .standard-buttons .standard-five {
    padding-left: 40px;
  }
}

.standard-buttons .standard-five span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  left: 30px;
  line-height: normal;
  padding: 0 1px;
}

@media (max-width: 767px) {
  .standard-buttons .standard-five span {
    left: 15px;
  }
}

.standard-buttons .standard-five:hover {
  color: #0067f4;
  background-color: transparent;
}

.standard-buttons .standard-five:hover i {
  animation: iconTranslateY 0.5s forwards;
}

.standard-buttons .standard-six {
  padding-right: 60px;
  overflow: hidden;
  line-height: 50px;
  color: #fff;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%);
  border: 0;
  line-height: 52px;
  background-size: 200% auto;
}

@media (max-width: 767px) {
  .standard-buttons .standard-six {
    padding-right: 40px;
    line-height: 44px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .standard-buttons .standard-six {
    line-height: 44px;
  }
}

.standard-buttons .standard-six span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  right: 30px;
  line-height: normal;
  padding: 0 1px;
}

@media (max-width: 767px) {
  .standard-buttons .standard-six span {
    right: 15px;
  }
}

.standard-buttons .standard-six:hover {
  background-position: right center;
}

.standard-buttons .standard-six:hover i {
  animation: iconTranslateY 0.5s forwards;
}

/*===== Light Rounded Buttons =====*/
.light-rounded-buttons ul li {
  display: inline-block;
  margin-left: 18px;
  margin-top: 20px;
}

@media (max-width: 767px) {
  .light-rounded-buttons ul li {
    margin-left: 0;
  }
}

.light-rounded-buttons ul li:first-child {
  margin-left: 0;
}

.light-rounded-buttons .main-btn {
  border-radius: 5px;
}

.light-rounded-buttons .light-rounded-one {
  border-color: #0067f4;
}

.light-rounded-buttons .light-rounded-one:hover {
  color: #0067f4;
  background-color: rgba(0, 103, 244, 0.4);
}

.light-rounded-buttons .light-rounded-two {
  color: #fff;
  background-color: #0067f4;
  border-color: #0067f4;
}

.light-rounded-buttons .light-rounded-two:hover {
  color: #0067f4;
  background-color: transparent;
}

.light-rounded-buttons .light-rounded-three {
  overflow: hidden;
  line-height: 50px;
  color: #fff;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%);
  background-size: 200% auto;
  line-height: 52px;
  border: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .light-rounded-buttons .light-rounded-three {
    line-height: 44px;
  }
}

@media (max-width: 767px) {
  .light-rounded-buttons .light-rounded-three {
    line-height: 44px;
  }
}

.light-rounded-buttons .light-rounded-three:hover {
  background-position: right center;
}

.light-rounded-buttons .light-rounded-four {
  border-color: #0067f4;
  padding-left: 60px;
}

@media (max-width: 767px) {
  .light-rounded-buttons .light-rounded-four {
    padding-left: 40px;
  }
}

.light-rounded-buttons .light-rounded-four span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  left: 30px;
  line-height: normal;
  padding: 0 1px;
}

@media (max-width: 767px) {
  .light-rounded-buttons .light-rounded-four span {
    left: 15px;
  }
}

.light-rounded-buttons .light-rounded-four:hover {
  color: #0067f4;
  background-color: rgba(0, 103, 244, 0.4);
}

.light-rounded-buttons .light-rounded-four:hover i {
  animation: iconTranslateY 0.5s forwards;
}

.light-rounded-buttons .light-rounded-five {
  color: #fff;
  background-color: #0067f4;
  border-color: #0067f4;
  padding-left: 60px;
}

@media (max-width: 767px) {
  .light-rounded-buttons .light-rounded-five {
    padding-left: 40px;
  }
}

.light-rounded-buttons .light-rounded-five span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  left: 30px;
  line-height: normal;
  padding: 0 1px;
}

@media (max-width: 767px) {
  .light-rounded-buttons .light-rounded-five span {
    left: 15px;
  }
}

.light-rounded-buttons .light-rounded-five:hover {
  color: #0067f4;
  background-color: transparent;
}

.light-rounded-buttons .light-rounded-five:hover i {
  animation: iconTranslateY 0.5s forwards;
}

.light-rounded-buttons .light-rounded-six {
  padding-right: 60px;
  overflow: hidden;
  line-height: 50px;
  color: #fff;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%);
  background-size: 200% auto;
  line-height: 52px;
  border: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .light-rounded-buttons .light-rounded-six {
    line-height: 44px;
  }
}

@media (max-width: 767px) {
  .light-rounded-buttons .light-rounded-six {
    padding-right: 40px;
    line-height: 44px;
  }
}

.light-rounded-buttons .light-rounded-six span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  right: 30px;
  line-height: normal;
  padding: 0 1px;
}

@media (max-width: 767px) {
  .light-rounded-buttons .light-rounded-six span {
    right: 15px;
  }
}

.light-rounded-buttons .light-rounded-six:hover {
  background-position: right center;
}

.light-rounded-buttons .light-rounded-six:hover i {
  animation: iconTranslateY 0.5s forwards;
}

/*===== Semi Rounded Buttons =====*/
.semi-rounded-buttons ul li {
  display: inline-block;
  margin-left: 18px;
  margin-top: 20px;
}

@media (max-width: 767px) {
  .semi-rounded-buttons ul li {
    margin-left: 0;
  }
}

.semi-rounded-buttons ul li:first-child {
  margin-left: 0;
}

.semi-rounded-buttons .main-btn {
  border-radius: 10px;
}

.semi-rounded-buttons .semi-rounded-one {
  border-color: #0067f4;
}

.semi-rounded-buttons .semi-rounded-one:hover {
  color: #0067f4;
  background-color: rgba(0, 103, 244, 0.4);
}

.semi-rounded-buttons .semi-rounded-two {
  color: #fff;
  background-color: #0067f4;
  border-color: #0067f4;
}

.semi-rounded-buttons .semi-rounded-two:hover {
  color: #0067f4;
  background-color: transparent;
}

.semi-rounded-buttons .semi-rounded-three {
  overflow: hidden;
  line-height: 52px;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%);
  background-size: 200% auto;
  border: 0;
  color: #fff;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .semi-rounded-buttons .semi-rounded-three {
    line-height: 44px;
  }
}

@media (max-width: 767px) {
  .semi-rounded-buttons .semi-rounded-three {
    line-height: 44px;
  }
}

.semi-rounded-buttons .semi-rounded-three:hover {
  background-position: right center;
}

.semi-rounded-buttons .semi-rounded-four {
  border-color: #0067f4;
  padding-left: 60px;
}

@media (max-width: 767px) {
  .semi-rounded-buttons .semi-rounded-four {
    padding-left: 40px;
  }
}

.semi-rounded-buttons .semi-rounded-four span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  left: 30px;
  line-height: normal;
  padding: 0 1px;
}

@media (max-width: 767px) {
  .semi-rounded-buttons .semi-rounded-four span {
    left: 15px;
  }
}

.semi-rounded-buttons .semi-rounded-four:hover {
  color: #0067f4;
  background-color: rgba(0, 103, 244, 0.4);
}

.semi-rounded-buttons .semi-rounded-four:hover i {
  animation: iconTranslateY 0.5s forwards;
}

.semi-rounded-buttons .semi-rounded-five {
  color: #fff;
  background-color: #0067f4;
  border-color: #0067f4;
  padding-left: 60px;
}

@media (max-width: 767px) {
  .semi-rounded-buttons .semi-rounded-five {
    padding-left: 40px;
  }
}

.semi-rounded-buttons .semi-rounded-five span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  left: 30px;
  line-height: normal;
  padding: 0 1px;
}

@media (max-width: 767px) {
  .semi-rounded-buttons .semi-rounded-five span {
    left: 15px;
  }
}

.semi-rounded-buttons .semi-rounded-five:hover {
  color: #0067f4;
  background-color: transparent;
}

.semi-rounded-buttons .semi-rounded-five:hover i {
  animation: iconTranslateY 0.5s forwards;
}

.semi-rounded-buttons .semi-rounded-six {
  padding-right: 60px;
  overflow: hidden;
  line-height: 52px;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%);
  background-size: 200% auto;
  border: 0;
  color: #fff;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .semi-rounded-buttons .semi-rounded-six {
    line-height: 44px;
  }
}

@media (max-width: 767px) {
  .semi-rounded-buttons .semi-rounded-six {
    padding-right: 40px;
    line-height: 44px;
  }
}

.semi-rounded-buttons .semi-rounded-six span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  right: 30px;
  line-height: normal;
  padding: 0 1px;
}

@media (max-width: 767px) {
  .semi-rounded-buttons .semi-rounded-six span {
    right: 15px;
  }
}

.semi-rounded-buttons .semi-rounded-six:hover {
  background-position: right center;
}

.semi-rounded-buttons .semi-rounded-six:hover i {
  animation: iconTranslateY 0.5s forwards;
}

/*===== Rounded Buttons =====*/
.rounded-buttons ul li {
  display: inline-block;
  margin-left: 18px;
  margin-top: 20px;
}

@media (max-width: 767px) {
  .rounded-buttons ul li {
    margin-left: 0;
  }
}

.rounded-buttons ul li:first-child {
  margin-left: 0;
}

.rounded-buttons .main-btn {
  border-radius: 50px;
}

.rounded-buttons .rounded-one {
  border-color: #0067f4;
}

.rounded-buttons .rounded-one:hover {
  color: #0067f4;
  background-color: rgba(0, 103, 244, 0.4);
}

.rounded-buttons .rounded-two {
  color: #fff;
  background-color: #0067f4;
  border-color: #0067f4;
}

.rounded-buttons .rounded-two:hover {
  color: #0067f4;
  background-color: transparent;
}

.rounded-buttons .rounded-three {
  overflow: hidden;
  line-height: 52px;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%);
  background-size: 200% auto;
  color: #fff;
  border: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .rounded-buttons .rounded-three {
    line-height: 44px;
  }
}

@media (max-width: 767px) {
  .rounded-buttons .rounded-three {
    line-height: 44px;
  }
}

.rounded-buttons .rounded-three:hover {
  background-position: right center;
}

.rounded-buttons .rounded-four {
  border-color: #0067f4;
  padding-left: 60px;
}

@media (max-width: 767px) {
  .rounded-buttons .rounded-four {
    padding-left: 40px;
  }
}

.rounded-buttons .rounded-four span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  left: 30px;
  line-height: normal;
  padding: 0 1px;
}

@media (max-width: 767px) {
  .rounded-buttons .rounded-four span {
    left: 15px;
  }
}

.rounded-buttons .rounded-four:hover {
  color: #0067f4;
  background-color: rgba(0, 103, 244, 0.4);
}

.rounded-buttons .rounded-four:hover i {
  animation: iconTranslateY 0.5s forwards;
}

.rounded-buttons .rounded-five {
  color: #fff;
  background-color: #0067f4;
  border-color: #0067f4;
  padding-left: 60px;
}

@media (max-width: 767px) {
  .rounded-buttons .rounded-five {
    padding-left: 40px;
  }
}

.rounded-buttons .rounded-five span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  left: 30px;
  line-height: normal;
  padding: 0 1px;
}

@media (max-width: 767px) {
  .rounded-buttons .rounded-five span {
    left: 15px;
  }
}

.rounded-buttons .rounded-five:hover {
  color: #0067f4;
  background-color: transparent;
}

.rounded-buttons .rounded-five:hover i {
  animation: iconTranslateY 0.5s forwards;
}

.rounded-buttons .rounded-six {
  padding-right: 60px;
  overflow: hidden;
  line-height: 52px;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%);
  background-size: 200% auto;
  color: #fff;
  border: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .rounded-buttons .rounded-six {
    line-height: 44px;
  }
}

@media (max-width: 767px) {
  .rounded-buttons .rounded-six {
    padding-right: 40px;
    line-height: 44px;
  }
}

.rounded-buttons .rounded-six span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  right: 30px;
  line-height: normal;
  padding: 0 1px;
}

@media (max-width: 767px) {
  .rounded-buttons .rounded-six span {
    right: 15px;
  }
}

.rounded-buttons .rounded-six:hover {
  background-position: right center;
}

.rounded-buttons .rounded-six:hover i {
  animation: iconTranslateY 0.5s forwards;
}

/*===== Success Buttons =====*/
.success-buttons ul li {
  display: inline-block;
  margin-left: 18px;
  margin-top: 20px;
}

@media (max-width: 767px) {
  .success-buttons ul li {
    margin-left: 0;
  }
}

.success-buttons ul li:first-child {
  margin-left: 0;
}

.success-buttons .success-one {
  border-color: #4da422;
  color: #4da422;
}

.success-buttons .success-one:hover {
  color: #4da422;
  background-color: rgba(77, 164, 34, 0.4);
}

.success-buttons .success-two {
  color: #fff;
  background-color: #4da422;
  border-color: #4da422;
}

.success-buttons .success-two:hover {
  color: #4da422;
  background-color: transparent;
}

.success-buttons .success-three {
  overflow: hidden;
  line-height: 52px;
  color: #fff;
  border: 0;
  background: linear-gradient(to right, #4da422 0%, #69e02e 50%, #4da422 100%);
  background-size: 200% auto;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .success-buttons .success-three {
    line-height: 44px;
  }
}

@media (max-width: 767px) {
  .success-buttons .success-three {
    line-height: 44px;
  }
}

.success-buttons .success-three:hover {
  background-position: right center;
}

.success-buttons .success-four {
  padding-left: 60px;
  border-color: #4da422;
  color: #4da422;
}

@media (max-width: 767px) {
  .success-buttons .success-four {
    padding-left: 40px;
  }
}

.success-buttons .success-four span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  left: 30px;
  line-height: normal;
  padding: 0 1px;
}

@media (max-width: 767px) {
  .success-buttons .success-four span {
    left: 15px;
  }
}

.success-buttons .success-four:hover {
  color: #4da422;
  background-color: rgba(77, 164, 34, 0.4);
}

.success-buttons .success-four:hover i {
  animation: iconTranslateY 0.5s forwards;
}

.success-buttons .success-five {
  padding-left: 60px;
  color: #fff;
  background-color: #4da422;
  border-color: #4da422;
}

@media (max-width: 767px) {
  .success-buttons .success-five {
    padding-left: 40px;
  }
}

.success-buttons .success-five span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  left: 30px;
  line-height: normal;
  padding: 0 1px;
}

@media (max-width: 767px) {
  .success-buttons .success-five span {
    left: 15px;
  }
}

.success-buttons .success-five:hover {
  color: #4da422;
  background-color: transparent;
}

.success-buttons .success-five:hover i {
  animation: iconTranslateY 0.5s forwards;
}

.success-buttons .success-six {
  padding-right: 60px;
  overflow: hidden;
  line-height: 52px;
  color: #fff;
  border: 0;
  background: linear-gradient(to right, #4da422 0%, #69e02e 50%, #4da422 100%);
  background-size: 200% auto;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .success-buttons .success-six {
    line-height: 44px;
  }
}

@media (max-width: 767px) {
  .success-buttons .success-six {
    padding-right: 40px;
    line-height: 44px;
  }
}

.success-buttons .success-six span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  right: 30px;
  line-height: normal;
  padding: 0 1px;
}

@media (max-width: 767px) {
  .success-buttons .success-six span {
    right: 15px;
  }
}

.success-buttons .success-six:hover {
  background-position: right center;
}

.success-buttons .success-six:hover i {
  animation: iconTranslateY 0.5s forwards;
}

/*===== Warning Buttons =====*/
.warning-buttons ul li {
  display: inline-block;
  margin-left: 18px;
  margin-top: 20px;
}

@media (max-width: 767px) {
  .warning-buttons ul li {
    margin-left: 0;
  }
}

.warning-buttons ul li:first-child {
  margin-left: 0;
}

.warning-buttons .warning-one {
  border-color: #ffb400;
  color: #ffb400;
}

.warning-buttons .warning-one:hover {
  color: #ffb400;
  background-color: rgba(255, 180, 0, 0.4);
}

.warning-buttons .warning-two {
  color: #fff;
  background-color: #ffb400;
  border-color: #ffb400;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .warning-buttons .warning-two {
    line-height: 44px;
  }
}

@media (max-width: 767px) {
  .warning-buttons .warning-two {
    padding-right: 40px;
    line-height: 44px;
  }
}

.warning-buttons .warning-two:hover {
  color: #ffb400;
  background-color: transparent;
}

.warning-buttons .warning-three {
  overflow: hidden;
  line-height: 52px;
  color: #fff;
  border: 0;
  background: linear-gradient(to right, #ffb400 0%, #f7e500 50%, #ffb400 100%);
  background-size: 200% auto;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .warning-buttons .warning-three {
    line-height: 44px;
  }
}

@media (max-width: 767px) {
  .warning-buttons .warning-three {
    line-height: 44px;
  }
}

.warning-buttons .warning-three:hover {
  background-position: right center;
}

.warning-buttons .warning-four {
  padding-left: 60px;
  border-color: #ffb400;
  color: #ffb400;
}

@media (max-width: 767px) {
  .warning-buttons .warning-four {
    padding-left: 40px;
  }
}

.warning-buttons .warning-four span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  left: 30px;
  line-height: normal;
  padding: 0 1px;
}

@media (max-width: 767px) {
  .warning-buttons .warning-four span {
    left: 15px;
  }
}

.warning-buttons .warning-four:hover {
  color: #ffb400;
  background-color: rgba(255, 180, 0, 0.4);
}

.warning-buttons .warning-four:hover i {
  animation: iconTranslateY 0.5s forwards;
}

.warning-buttons .warning-five {
  padding-left: 60px;
  color: #fff;
  background-color: #ffb400;
  border-color: #ffb400;
}

@media (max-width: 767px) {
  .warning-buttons .warning-five {
    padding-left: 40px;
  }
}

.warning-buttons .warning-five span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  left: 30px;
  line-height: normal;
  padding: 0 1px;
}

@media (max-width: 767px) {
  .warning-buttons .warning-five span {
    left: 15px;
  }
}

.warning-buttons .warning-five:hover {
  color: #ffb400;
  background-color: transparent;
}

.warning-buttons .warning-five:hover i {
  animation: iconTranslateY 0.5s forwards;
}

.warning-buttons .warning-six {
  padding-right: 60px;
  overflow: hidden;
  line-height: 52px;
  color: #fff;
  border: 0;
  background: linear-gradient(to right, #ffb400 0%, #f7e500 50%, #ffb400 100%);
  background-size: 200% auto;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .warning-buttons .warning-six {
    line-height: 44px;
  }
}

@media (max-width: 767px) {
  .warning-buttons .warning-six {
    padding-right: 40px;
    line-height: 44px;
  }
}

.warning-buttons .warning-six span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  right: 30px;
  line-height: normal;
  padding: 0 1px;
}

@media (max-width: 767px) {
  .warning-buttons .warning-six span {
    right: 15px;
  }
}

.warning-buttons .warning-six:hover {
  background-position: right center;
}

.warning-buttons .warning-six:hover i {
  animation: iconTranslateY 0.5s forwards;
}

/*===== Info Buttons =====*/
.info-buttons ul li {
  display: inline-block;
  margin-left: 18px;
  margin-top: 20px;
}

@media (max-width: 767px) {
  .info-buttons ul li {
    margin-left: 0;
  }
}

.info-buttons ul li:first-child {
  margin-left: 0;
}

.info-buttons .info-one {
  border-color: #00b8d8;
  color: #00b8d8;
}

.info-buttons .info-one:hover {
  color: #00b8d8;
  background-color: rgba(0, 184, 216, 0.4);
}

.info-buttons .info-two {
  color: #fff;
  background-color: #00b8d8;
  border-color: #00b8d8;
}

.info-buttons .info-two:hover {
  color: #00b8d8;
  background-color: transparent;
}

.info-buttons .info-three {
  overflow: hidden;
  line-height: 52px;
  color: #fff;
  border: 0;
  background: linear-gradient(to right, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%);
  background-size: 200% auto;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .info-buttons .info-three {
    line-height: 44px;
  }
}

@media (max-width: 767px) {
  .info-buttons .info-three {
    line-height: 44px;
  }
}

.info-buttons .info-three:hover {
  background-position: right center;
}

.info-buttons .info-four {
  padding-left: 60px;
  border-color: #00b8d8;
  color: #00b8d8;
}

@media (max-width: 767px) {
  .info-buttons .info-four {
    padding-left: 40px;
  }
}

.info-buttons .info-four span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  left: 30px;
  line-height: normal;
  padding: 0 1px;
}

@media (max-width: 767px) {
  .info-buttons .info-four span {
    left: 15px;
  }
}

.info-buttons .info-four:hover {
  color: #00b8d8;
  background-color: rgba(0, 184, 216, 0.4);
}

.info-buttons .info-four:hover i {
  animation: iconTranslateY 0.5s forwards;
}

.info-buttons .info-five {
  padding-left: 60px;
  color: #fff;
  background-color: #00b8d8;
  border-color: #00b8d8;
}

@media (max-width: 767px) {
  .info-buttons .info-five {
    padding-left: 40px;
  }
}

.info-buttons .info-five span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  left: 30px;
  line-height: normal;
  padding: 0 1px;
}

@media (max-width: 767px) {
  .info-buttons .info-five span {
    left: 15px;
  }
}

.info-buttons .info-five:hover {
  color: #00b8d8;
  background-color: transparent;
}

.info-buttons .info-five:hover i {
  animation: iconTranslateY 0.5s forwards;
}

.info-buttons .info-six {
  padding-right: 60px;
  overflow: hidden;
  line-height: 52px;
  color: #fff;
  border: 0;
  background: linear-gradient(to right, #00b8d8 0%, #32fbfc 50%, #00b8d8 100%);
  background-size: 200% auto;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .info-buttons .info-six {
    line-height: 44px;
  }
}

@media (max-width: 767px) {
  .info-buttons .info-six {
    padding-right: 40px;
    line-height: 44px;
  }
}

.info-buttons .info-six span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  right: 30px;
  line-height: normal;
  padding: 0 1px;
}

@media (max-width: 767px) {
  .info-buttons .info-six span {
    right: 15px;
  }
}

.info-buttons .info-six:hover {
  background-position: right center;
}

.info-buttons .info-six:hover i {
  animation: iconTranslateY 0.5s forwards;
}

/*===== Danger Buttons =====*/
.danger-buttons ul li {
  display: inline-block;
  margin-left: 18px;
  margin-top: 20px;
}

@media (max-width: 767px) {
  .danger-buttons ul li {
    margin-left: 0;
  }
}

.danger-buttons ul li:first-child {
  margin-left: 0;
}

.danger-buttons .danger-one {
  border-color: #fc3832;
  color: #fc3832;
}

.danger-buttons .danger-one:hover {
  color: #fc3832;
  background-color: rgba(252, 56, 50, 0.4);
}

.danger-buttons .danger-two {
  color: #fff;
  background-color: #fc3832;
  border-color: #fc3832;
}

.danger-buttons .danger-two:hover {
  color: #fc3832;
  background-color: transparent;
}

.danger-buttons .danger-three {
  overflow: hidden;
  line-height: 52px;
  color: #fff;
  border: 0;
  background: linear-gradient(to right, #fc3832 0%, #dc312b 50%, #fc3832 100%);
  background-size: 200% auto;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .danger-buttons .danger-three {
    line-height: 44px;
  }
}

@media (max-width: 767px) {
  .danger-buttons .danger-three {
    line-height: 44px;
  }
}

.danger-buttons .danger-three:hover {
  background-position: right center;
}

.danger-buttons .danger-four {
  padding-left: 60px;
  border-color: #fc3832;
  color: #fc3832;
}

@media (max-width: 767px) {
  .danger-buttons .danger-four {
    padding-left: 40px;
  }
}

.danger-buttons .danger-four span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  left: 30px;
  line-height: normal;
  padding: 0 1px;
}

@media (max-width: 767px) {
  .danger-buttons .danger-four span {
    left: 15px;
  }
}

.danger-buttons .danger-four:hover {
  color: #fc3832;
  background-color: rgba(252, 56, 50, 0.4);
}

.danger-buttons .danger-four:hover i {
  animation: iconTranslateY 0.5s forwards;
}

.danger-buttons .danger-five {
  padding-left: 60px;
  color: #fff;
  background-color: #fc3832;
  border-color: #fc3832;
}

@media (max-width: 767px) {
  .danger-buttons .danger-five {
    padding-left: 40px;
  }
}

.danger-buttons .danger-five span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  left: 30px;
  line-height: normal;
}

@media (max-width: 767px) {
  .danger-buttons .danger-five span {
    left: 15px;
  }
}

.danger-buttons .danger-five:hover {
  color: #fc3832;
  background-color: transparent;
}

.danger-buttons .danger-five:hover i {
  animation: iconTranslateY 0.5s forwards;
}

.danger-buttons .danger-six {
  padding-right: 60px;
  overflow: hidden;
  line-height: 52px;
  color: #fff;
  border: 0;
  background: linear-gradient(to right, #fc3832 0%, #dc312b 50%, #fc3832 100%);
  background-size: 200% auto;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .danger-buttons .danger-six {
    line-height: 44px;
  }
}

@media (max-width: 767px) {
  .danger-buttons .danger-six {
    padding-right: 40px;
    line-height: 44px;
  }
}

.danger-buttons .danger-six span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  overflow: hidden;
  right: 30px;
  line-height: normal;
  padding: 0 1px;
}

@media (max-width: 767px) {
  .danger-buttons .danger-six span {
    right: 15px;
  }
}

.danger-buttons .danger-six:hover {
  background-position: right center;
}

.danger-buttons .danger-six:hover i {
  animation: iconTranslateY 0.5s forwards;
}

@keyframes iconTranslateY {
  49% {
    -webkit-transform: translateY(100%);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
  }
  51% {
    opacity: 1;
  }
}

.lg-btn {
  line-height: 64px !important;
  font-size: 18px;
}

@media (max-width: 767px) {
  .lg-btn {
    font-size: 16px;
    ine-height: 52px;
  }
}

.el-btn {
  line-height: 80px !important;
  font-size: 20px;
}

@media (max-width: 767px) {
  .el-btn {
    font-size: 18px;
    line-height: 74px;
  }
}

.sm-btn {
  line-height: 40px !important;
  font-size: 12px;
}

/*===== Regular Icon Buttons =====*/
.regular-icon-buttons ul li {
  display: inline-block;
  margin-left: 10px;
  margin-top: 20px;
}

.regular-icon-buttons ul li:first-child {
  margin-left: 0;
}

.regular-icon-buttons ul li .regular-icon-light-one {
  width: 40px;
  height: 40px;
  line-height: 36px;
  border: 2px solid #0067f4;
  text-align: center;
  font-size: 24px;
  transition: all 0.3s ease-out 0s;
  overflow: hidden;
  color: #0067f4;
}

.regular-icon-buttons ul li .regular-icon-light-one:hover {
  color: #fff;
  background-color: #0067f4;
}

.regular-icon-buttons ul li .regular-icon-light-two {
  width: 40px;
  height: 40px;
  line-height: 36px;
  border: 2px solid #0067f4;
  text-align: center;
  font-size: 24px;
  border-radius: 5px;
  transition: all 0.3s ease-out 0s;
  overflow: hidden;
  color: #0067f4;
}

.regular-icon-buttons ul li .regular-icon-light-two:hover {
  color: #fff;
  background-color: #0067f4;
}

.regular-icon-buttons ul li .regular-icon-light-three {
  width: 40px;
  height: 40px;
  line-height: 36px;
  border: 2px solid #0067f4;
  text-align: center;
  font-size: 24px;
  border-radius: 10px;
  transition: all 0.3s ease-out 0s;
  overflow: hidden;
  color: #0067f4;
}

.regular-icon-buttons ul li .regular-icon-light-three:hover {
  color: #fff;
  background-color: #0067f4;
}

.regular-icon-buttons ul li .regular-icon-light-four {
  width: 40px;
  height: 40px;
  line-height: 36px;
  border: 2px solid #0067f4;
  text-align: center;
  font-size: 24px;
  border-radius: 50%;
  transition: all 0.3s ease-out 0s;
  overflow: hidden;
}

.regular-icon-buttons ul li .regular-icon-light-four:hover {
  color: #fff;
  background-color: #0067f4;
}

.regular-icon-buttons ul li .regular-icon-light-five {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border: 0;
  text-align: center;
  font-size: 24px;
  transition: all 0.3s ease-out 0s;
  position: relative;
  z-index: 5;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%);
  background-size: 200% auto;
}

.regular-icon-buttons ul li .regular-icon-light-five:hover {
  background-position: right center;
}

.regular-icon-buttons ul li .regular-icon-light-six {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border: 0;
  text-align: center;
  font-size: 24px;
  transition: all 0.3s ease-out 0s;
  position: relative;
  z-index: 5;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%);
  background-size: 200% auto;
  border-radius: 5px;
}

.regular-icon-buttons ul li .regular-icon-light-six:hover {
  background-position: right center;
}

.regular-icon-buttons ul li .regular-icon-light-seven {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border: 0;
  text-align: center;
  font-size: 24px;
  transition: all 0.3s ease-out 0s;
  position: relative;
  z-index: 5;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%);
  background-size: 200% auto;
  border-radius: 10px;
}

.regular-icon-buttons ul li .regular-icon-light-seven:hover {
  background-position: right center;
}

.regular-icon-buttons ul li .regular-icon-light-eight {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border: 0;
  text-align: center;
  font-size: 24px;
  transition: all 0.3s ease-out 0s;
  position: relative;
  z-index: 5;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%);
  background-size: 200% auto;
  border-radius: 50%;
}

.regular-icon-buttons ul li .regular-icon-light-eight:hover {
  background-position: right center;
}

.regular-icon-buttons ul li .regular-icon-light-nine {
  width: 40px;
  height: 40px;
  line-height: 36px;
  border: 2px solid #0067f4;
  text-align: center;
  font-size: 24px;
  transition: all 0.3s ease-out 0s;
  overflow: hidden;
  color: #fff;
  background-color: #0067f4;
}

.regular-icon-buttons ul li .regular-icon-light-nine:hover {
  color: #0067f4;
  background-color: transparent;
}

.regular-icon-buttons ul li .regular-icon-light-ten {
  width: 40px;
  height: 40px;
  line-height: 36px;
  border: 2px solid #0067f4;
  text-align: center;
  font-size: 24px;
  border-radius: 5px;
  transition: all 0.3s ease-out 0s;
  overflow: hidden;
  color: #fff;
  background-color: #0067f4;
}

.regular-icon-buttons ul li .regular-icon-light-ten:hover {
  color: #0067f4;
  background-color: transparent;
}

.regular-icon-buttons ul li .regular-icon-light-eleven {
  width: 40px;
  height: 40px;
  line-height: 36px;
  border: 2px solid #0067f4;
  text-align: center;
  font-size: 24px;
  border-radius: 10px;
  transition: all 0.3s ease-out 0s;
  overflow: hidden;
  color: #fff;
  background-color: #0067f4;
}

.regular-icon-buttons ul li .regular-icon-light-eleven:hover {
  color: #0067f4;
  background-color: transparent;
}

.regular-icon-buttons ul li .regular-icon-light-twelve {
  width: 40px;
  height: 40px;
  line-height: 36px;
  border: 2px solid #0067f4;
  text-align: center;
  font-size: 24px;
  border-radius: 50%;
  transition: all 0.3s ease-out 0s;
  overflow: hidden;
  color: #fff;
  background-color: #0067f4;
}

.regular-icon-buttons ul li .regular-icon-light-twelve:hover {
  color: #0067f4;
  background-color: transparent;
}

/*===== Group Buttons =====*/
.group-buttons .btn-group {
  margin-left: 30px;
}

.group-buttons .group-one {
  margin-left: 0;
}

.group-buttons .group-one .main-btn {
  background: none;
  border: 2px solid #0067f4;
  transition: all 0.3s ease-out 0s;
}

.group-buttons .group-one .main-btn:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-right: 0;
}

.group-buttons .group-one .main-btn:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-left: 0;
}

.group-buttons .group-one .main-btn:hover {
  background-color: #0067f4;
  color: #fff;
}

.group-buttons .group-two .main-btn {
  background: none;
  transition: all 0.3s ease-out 0s;
  overflow: hidden;
  color: #fff;
  line-height: 52px;
  background: linear-gradient(#0067f4 0%, #2bdbdc 50%, #0067f4 100%);
  background-size: auto 200%;
  border-top: 0;
  border-bottom: 0;
  border-color: rgba(244, 246, 247, 0.2);
}

.group-buttons .group-two .main-btn:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-right: 0;
}

.group-buttons .group-two .main-btn:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-left: 0;
}

.group-buttons .group-two .main-btn:hover {
  background-position: bottom center;
}

.group-buttons .group-three .main-btn {
  background: none;
  transition: all 0.3s ease-out 0s;
  overflow: hidden;
  color: #fff;
  line-height: 52px;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%);
  background-size: 200% auto;
  border: 0;
}

.group-buttons .group-three .main-btn:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-right: 0;
}

.group-buttons .group-three .main-btn:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-left: 0;
}

.group-buttons .group-three .main-btn:hover {
  background-position: right center;
}

.group-buttons .group-four {
  margin-left: 0;
}

.group-buttons .group-four .main-btn {
  background: none;
  border: 2px solid #0067f4;
  transition: all 0.3s ease-out 0s;
  padding: 0 12px;
}

.group-buttons .group-four .main-btn i {
  font-size: 24px;
}

.group-buttons .group-four .main-btn:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-right: 0;
}

.group-buttons .group-four .main-btn:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-left: 0;
}

.group-buttons .group-four .main-btn:hover {
  background-color: #0067f4;
  color: #fff;
}

.group-buttons .group-five .main-btn {
  background: none;
  transition: all 0.3s ease-out 0s;
  overflow: hidden;
  color: #fff;
  line-height: 52px;
  background: linear-gradient(#0067f4 0%, #2bdbdc 50%, #0067f4 100%);
  background-size: auto 200%;
  border-top: 0;
  border-bottom: 0;
  border-color: rgba(244, 246, 247, 0.2);
  padding: 0 16px;
}

.group-buttons .group-five .main-btn:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-right: 0;
}

.group-buttons .group-five .main-btn:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-left: 0;
}

.group-buttons .group-five .main-btn:hover {
  background-position: bottom center;
}

.group-buttons .group-six .main-btn {
  background: none;
  transition: all 0.3s ease-out 0s;
  overflow: hidden;
  color: #fff;
  line-height: 52px;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 50%, #0067f4 100%);
  background-size: 200% auto;
  border: 0;
  padding: 0 16px;
}

.group-buttons .group-six .main-btn:first-child {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  border-right: 0;
}

.group-buttons .group-six .main-btn:last-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-left: 0;
}

.group-buttons .group-six .main-btn:hover {
  background-position: right center;
}

/*===========================
       12.ALERTS css 
===========================*/
.alerts-title .title {
  font-size: 36px;
  line-height: 45px;
  color: #6c6c6c;
}

@media (max-width: 767px) {
  .alerts-title .title {
    font-size: 24px;
    line-height: 35px;
  }
}

.label {
  line-height: 48px;
  padding: 0 16px;
  font-size: 16px;
  color: #fff;
  font-weight: 500;
  margin-right: 15px;
  margin-bottom: 0;
  margin-top: 30px;
}

.label.label-default {
  background-color: #0067f4;
  border-radius: 50px;
}

.label.label-success {
  background-color: #4da422;
}

.label.label-info {
  background-color: #00b8d8;
}

.label.label-warning {
  background-color: #ffb400;
}

.label.label-danger {
  background-color: #fc3832;
}

.label.label-gradient-default {
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
}

.label.label-gradient-success {
  background: linear-gradient(to right, #4da422 0%, #69e02e 100%);
}

.label.label-gradient-info {
  background: linear-gradient(to right, #00b8d8 0%, #32fbfc 100%);
}

.label.label-gradient-warning {
  background: linear-gradient(to right, #ffb400 0%, #f7e500 100%);
}

.label.label-gradient-danger {
  background: linear-gradient(to right, #fc3832 0%, #dc312b 100%);
}

.tg-btn {
  position: relative;
  display: inline-block;
  height: 30px;
  cursor: pointer;
}

.tg-btn [type="checkbox"] {
  position: absolute;
  opacity: 0;
  z-index: -1;
  visibility: hidden;
}

.tg-btn .tg-body {
  width: 144px;
  height: 48px;
  background: white;
  display: inline-block;
  position: relative;
  border-radius: 50px;
}

.tg-btn .tg-body .tg-switch {
  width: 48px;
  height: 48px;
  display: inline-block;
  background-color: white;
  position: absolute;
  left: -1px;
  top: 0;
  border-radius: 50%;
  transition: all 0.3s ease-out 0s;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
  border: solid 2px #f4f6f7;
  z-index: 1;
}

.tg-btn .tg-body .tg-track {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  border-radius: 50px;
}

.tg-btn .tg-body .tg-track .tg-bgd {
  font-size: 16px;
  position: absolute;
  right: -10px;
  top: 0;
  bottom: 0;
  width: 144px;
  transition: all 0.3s ease-out 0s;
  background-color: #f4f6f7;
  color: #6c6c6c;
  padding: 0 45px;
  text-align: center;
  line-height: 46px;
  border-radius: 50px;
}

.tg-btn .tg-body .tg-track .tg-bgd.tg-bgd-negative {
  right: auto;
  left: -120px;
  background-color: #0067f4;
  color: #fff;
}

.tg-btn > :not(:checked) ~ .tg-body > .tg-switch {
  left: 97px;
  right: auto;
}

.tg-btn > :not(:checked) ~ .tg-body .tg-bgd {
  right: -120px;
}

.tg-btn > :not(:checked) ~ .tg-body .tg-bgd.tg-bgd-negative {
  right: auto;
  left: -10px;
}

.tg-btn.tg-gradient .tg-body .tg-track .tg-bgd.tg-bgd-negative {
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
}

.tg-btn.small-tg .tg-body {
  width: 96px;
}

.tg-btn.small-tg .tg-body .tg-track .tg-bgd {
  width: 96px;
}

.tg-btn.small-tg .tg-body .tg-track .tg-bgd.tg-bgd-negative {
  left: -75px;
}

.tg-btn.small-tg > :not(:checked) ~ .tg-body > .tg-switch {
  left: 48px;
}

.tg-btn.small-tg > :not(:checked) ~ .tg-body .tg-bgd {
  right: -75px;
}

.tg-btn.small-tg > :not(:checked) ~ .tg-body .tg-bgd.tg-bgd-negative {
  right: auto;
  left: -10px;
}

.alerts-default-bg {
  background-color: #0067f4;
}

.alerts-default-gradient-bg {
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
}

.alerts-success-bg {
  background-color: #4da422;
}

.alerts-success-gradient-bg {
  background: linear-gradient(to right, #4da422 0%, #69e02e 100%);
}

.alerts-danger-bg {
  background-color: #fc3832;
}

.alerts-danger-gradient-bg {
  background: linear-gradient(to right, #fc3832 0%, #dc312b 100%);
}

.alerts-info-bg {
  background-color: #00b8d8;
}

.alerts-info-gradient-bg {
  background: linear-gradient(to right, #00b8d8 0%, #32fbfc 100%);
}

.alerts-warning-bg {
  background-color: #ffb400;
}

.alerts-warning-gradient-bg {
  background: linear-gradient(to right, #ffb400 0%, #f7e500 100%);
}

.single-alerts-message {
  position: relative;
  padding: 20px 24px;
  border-radius: 8px;
}

@media (max-width: 767px) {
  .single-alerts-message {
    padding: 16px 20px;
  }
}

.single-alerts-message .alerts-message-icon {
  position: absolute;
  top: 20px;
  left: 24px;
}

@media (max-width: 767px) {
  .single-alerts-message .alerts-message-icon {
    top: 16px;
    left: 20px;
  }
}

.single-alerts-message .alerts-message-icon i {
  font-size: 32px;
  color: #fff;
}

@media (max-width: 767px) {
  .single-alerts-message .alerts-message-icon i {
    font-size: 28px;
  }
}

.single-alerts-message .alerts-message-content {
  padding-left: 50px;
}

@media (max-width: 767px) {
  .single-alerts-message .alerts-message-content {
    padding-left: 40px;
  }
}

.single-alerts-message .alerts-message-content .message-title {
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  color: #fff;
}

@media (max-width: 767px) {
  .single-alerts-message .alerts-message-content .message-title {
    font-size: 20px;
  }
}

.single-alerts-message .alerts-message-content .text {
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  margin-top: 8px;
}

@media (max-width: 767px) {
  .single-alerts-message .alerts-message-content .text {
    font-size: 14px;
  }
}

.single-alerts-message-small {
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 0;
  border: 0;
}

.single-alerts-message-small .alerts-message-small-icon {
  position: absolute;
  top: 12px;
  left: 16px;
}

.single-alerts-message-small .alerts-message-small-icon i {
  font-size: 24px;
  color: #fff;
}

@media (max-width: 767px) {
  .single-alerts-message-small .alerts-message-small-icon i {
    font-size: 16px;
  }
}

.single-alerts-message-small .alerts-message-small-content {
  padding-left: 36px;
}

@media (max-width: 767px) {
  .single-alerts-message-small .alerts-message-small-content {
    padding-left: 28px;
  }
}

.single-alerts-message-small .alerts-message-small-content .text {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

@media (max-width: 767px) {
  .single-alerts-message-small .alerts-message-small-content .text {
    font-size: 14px;
  }
}

.single-alerts-message-small .close {
  font-size: 10px;
  color: #fff;
  border: 0;
  padding: 0;
  position: absolute;
  top: 5px;
  right: 5px;
  opacity: 1;
  transition: all 0.3s ease-out 0s;
  background-color: transparent;
}

@media (max-width: 767px) {
  .single-alerts-message-small .close {
    font-size: 12px;
  }
}

.single-alerts-message-small .close:hover {
  color: #fff;
}

/*===========================
        13.TEAM css 
===========================*/
.single-team {
  position: relative;
}

.single-team .team-image img {
  width: 100%;
}

.single-team .team-content {
  padding: 16px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  border-radius: 8px;
}

.single-team .team-content .name a {
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .single-team .team-content .name a {
    font-size: 20px;
  }
}

.single-team .team-content .sub-title {
  font-size: 16px;
  line-height: 24px;
  color: #a4a4a4;
  margin-top: 8px;
}

.single-team .team-content .social {
  margin-top: 8px;
}

.single-team .team-content .social li {
  display: inline-block;
  margin: 0 8px;
}

.single-team .team-content .social li a {
  font-size: 20px;
  color: #0067f4;
}

/*===== TEAM STYLE ONE =====*/
.team-style-one .team-content {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 62px;
  background-color: #fff;
}

.team-style-one .team-content::before {
  position: absolute;
  content: '';
  width: 72px;
  height: 4px;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.team-style-one .team-content .name a:hover {
  color: #0067f4;
}

/*===== TEAM STYLE TWo =====*/
.team-style-two .team-content {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 62px;
  background: -linear-gradient(90deg, #0467f4 0%, #2bdbdc 50%, #0467f4 100%);
  background: linear-gradient(90deg, #0467f4 0%, #2bdbdc 50%, #0467f4 100%);
  background-size: 200%;
  transition: all 0.3s ease-out 0s;
}

.team-style-two .team-content .name a {
  color: #fff;
}

.team-style-two .team-content .sub-title {
  color: #fff;
}

.team-style-two .team-content .social li a {
  color: #fff;
}

.team-style-two .team-content:hover {
  background-position: right center;
}

/*===== TEAM STYLE THREE =====*/
.team-style-three .team-content {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 62px;
  background-color: #fff;
}

.team-style-three .team-content::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  top: 0;
  left: 0;
}

.team-style-three .team-content .name a:hover {
  color: #0067f4;
}

/*===== TEAM STYLE FOUR =====*/
.team-style-four .team-content {
  position: relative;
  background-color: #fff;
}

.team-style-four .team-content::before {
  position: absolute;
  content: '';
  width: 4px;
  height: 72px;
  background: linear-gradient(#f09819 0%, #ff5858 100%);
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.team-style-four .team-content .name a:hover {
  color: #4da422;
}

/*===== TEAM STYLE FIVE =====*/
.team-style-five .team-content {
  background: linear-gradient(#f09819 0%, #ff5858 100%);
}

.team-style-five .team-content .name a {
  color: #fff;
}

.team-style-five .team-content .sub-title {
  color: #fff;
}

.team-style-five .team-content .social li a {
  color: #fff;
}

/*===== TEAM STYLE SIX =====*/
.team-style-six .team-content {
  position: relative;
  background-color: #fff;
}

.team-style-six .team-content::before {
  position: absolute;
  content: '';
  width: 4px;
  height: 100%;
  background: linear-gradient(#f09819 0%, #ff5858 100%);
  top: 0;
  right: 0;
}

.team-style-six .team-content .name a:hover {
  color: #4da422;
}

/*===== TEAM STYLE SAVEN =====*/
.team-style-saven .team-content {
  position: relative;
  background-color: #fff;
  box-shadow: none;
}

.team-style-saven .team-content::before {
  position: absolute;
  content: '';
  width: 72px;
  height: 4px;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.team-style-saven .team-content .name a:hover {
  color: #0067f4;
}

/*===== TEAM STYLE EIGHT =====*/
.team-style-eight .team-content {
  position: relative;
  background-color: #fff;
}

.team-style-eight .team-content::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  bottom: 0;
  left: 0;
}

.team-style-eight .team-content .name a:hover {
  color: #0067f4;
}

/*===== TEAM STYLE NINE =====*/
.team-style-nine {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  border-radius: 20px;
  overflow: hidden;
}

.team-style-nine .team-content {
  background-color: #fff;
  box-shadow: none;
}

.team-style-nine .team-content .name {
  position: relative;
}

.team-style-nine .team-content .name::before {
  position: absolute;
  content: '';
  width: 72px;
  height: 8px;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  top: 0;
  left: 0;
  border-radius: 25px;
}

.team-style-nine .team-content .name a {
  margin-top: 16px;
}

.team-style-nine .team-content .name a:hover {
  color: #0067f4;
}

/*===== TEAM STYLE TEN =====*/
.team-style-ten .team-image img {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  border-radius: 50%;
}

.team-style-ten .team-content {
  box-shadow: none;
}

.team-style-ten .team-content .name {
  position: relative;
}

.team-style-ten .team-content .name::before {
  position: absolute;
  content: '';
  width: 72px;
  height: 8px;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  top: 0;
  left: 0;
  border-radius: 25px;
}

.team-style-ten .team-content .name a {
  margin-top: 16px;
}

.team-style-ten .team-content .name a:hover {
  color: #0067f4;
}

/*===== TEAM STYLE ELEVEN =====*/
.team-style-eleven {
  position: relative;
  box-shadow: 0px 8px 16px 0px rgba(72, 127, 255, 0.1);
}

.team-style-eleven .team-image img {
  width: 100%;
}

.team-style-eleven .team-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  padding-top: 25px;
  padding-bottom: 25px;
  z-index: 5;
  transition: all 0.3s ease-out 0s;
}

@media (max-width: 767px) {
  .team-style-eleven .team-content {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}

.team-style-eleven .team-content::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  z-index: -1;
  transition: all 0.3s ease-out 0s;
  opacity: 0;
}

.team-style-eleven .team-content .team-social {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: all 0.3s ease-out 0s;
  visibility: hidden;
  opacity: 0;
}

.team-style-eleven .team-content .team-social .social {
  background-color: #fff;
  display: inline-block;
  padding: 10px 20px 6px;
  border-radius: 50px;
}

.team-style-eleven .team-content .team-social .social li {
  display: inline-block;
  margin: 0 8px;
}

.team-style-eleven .team-content .team-social .social li a {
  font-size: 16px;
  color: #a4a4a4;
  transition: all 0.3s ease-out 0s;
}

.team-style-eleven .team-content .team-social .social li a:hover {
  color: #0067f4;
}

.team-style-eleven .team-content .team-name a {
  color: #121212;
  font-size: 24px;
  font-weight: 600;
  transition: all 0.3s ease-out 0s;
}

@media (max-width: 767px) {
  .team-style-eleven .team-content .team-name a {
    font-size: 18px;
  }
}

.team-style-eleven .team-content .sub-title {
  font-size: 16px;
  color: #0067f4;
  transition: all 0.3s ease-out 0s;
}

@media (max-width: 767px) {
  .team-style-eleven .team-content .sub-title {
    font-size: 14px;
  }
}

.team-style-eleven:hover .team-content {
  padding-top: 50px;
}

@media (max-width: 767px) {
  .team-style-eleven:hover .team-content {
    padding-top: 35px;
  }
}

.team-style-eleven:hover .team-content::before {
  opacity: 1;
}

.team-style-eleven:hover .team-content .team-social {
  top: -20px;
  visibility: visible;
  opacity: 1;
}

.team-style-eleven:hover .team-content .team-name a {
  color: #fff;
}

.team-style-eleven:hover .team-content .sub-title {
  color: #fff;
}

/*===========================
         14.CARD css 
===========================*/
.single-card {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
  border-radius: 8px;
  overflow: hidden;
}

.single-card .card-image img {
  width: 100%;
  height: 100%;
}

.single-card .card-content {
  padding: 16px;
}

.single-card .card-content .card-title {
  margin-bottom: 0;
}

.single-card .card-content .card-title a {
  font-size: 24px;
  line-height: 30px;
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .single-card .card-content .card-title a {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .single-card .card-content .card-title a {
    font-size: 20px;
  }
}

.single-card .card-content .card-title a:hover {
  color: #0067f4;
}

.single-card .card-content .text {
  color: #121212;
  font-size: 16px;
  line-height: 24px;
  margin-top: 8px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .single-card .card-content .text {
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .single-card .card-content .text {
    font-size: 14px;
  }
}

.single-card .card-content .card-btn {
  margin-top: 24px;
}

.single-card .card-content .card-btn .main-btn {
  line-height: 48px;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .card-style-two .card-content {
    padding: 14px;
    padding-left: 5px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .card-style-two .card-content .card-btn {
    margin-top: 15px;
  }
}

.card-style-two .card-content .card-btn .main-btn {
  line-height: 50px;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .card-style-two .card-content .card-btn .main-btn {
    line-height: 48px;
  }
}

.card-style-three .card-content {
  background-color: #0067f4;
}

.card-style-three .card-content .card-title a {
  color: #fff;
}

.card-style-three .card-content .card-title a:hover {
  color: #fff;
}

.card-style-three .card-content .text {
  color: #fff;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .card-style-four .card-content {
    padding: 14px;
    padding-left: 5px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .card-style-four .card-content .card-btn {
    margin-top: 16px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .card-style-four .card-content .card-btn .main-btn {
    line-height: 44px;
  }
}

.card-style-five {
  box-shadow: none;
}

.card-style-five .card-content {
  position: relative;
  padding-left: 0;
  padding-right: 0;
}

.card-style-five .card-content .card-icon {
  position: absolute;
  top: -20px;
  right: 8px;
}

.card-style-five .card-content .card-icon i {
  width: 40px;
  line-height: 40px;
  height: 40px;
  text-align: center;
  color: #fff;
  background-color: #0067f4;
  border-radius: 50%;
  font-size: 24px;
  transition: all 0.3s ease-out 0s;
}

.card-style-five .card-content .card-icon:hover i {
  background-color: #fff;
  color: #0067f4;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
}

.card-style-six {
  background: linear-gradient(to right, #0acffe 0%, #495aff 100%);
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .card-style-six .card-content {
    padding: 14px;
    padding-left: 5px;
  }
}

.card-style-six .card-content .card-title a {
  color: #fff;
}

.card-style-six .card-content .card-title a:hover {
  color: #fff;
}

.card-style-six .card-content .text {
  color: #fff;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .card-style-six .card-content .card-btn {
    margin-top: 16px;
  }
}

.card-style-six .card-content .card-btn .main-btn {
  line-height: 50px;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .card-style-six .card-content .card-btn .main-btn {
    line-height: 48px;
  }
}

.card-style-saven {
  background: linear-gradient(90deg, #9166fe 0%, #c97aed 100%);
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .card-style-saven .card-content {
    padding: 14px;
    padding-left: 5px;
  }
}

.card-style-saven .card-content .card-title a {
  color: #fff;
}

.card-style-saven .card-content .card-title a:hover {
  color: #fff;
}

.card-style-saven .card-content .text {
  color: #fff;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .card-style-saven .card-content .card-btn {
    margin-top: 16px;
  }
}

.card-style-saven .card-content .card-btn .main-btn {
  border-color: #fff;
  background-color: #fff;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .card-style-saven .card-content .card-btn .main-btn {
    line-height: 44px;
  }
}

.card-style-saven .card-content .card-btn .main-btn:hover {
  background-color: transparent;
  color: #fff;
}

/*===== CARD MINI =====*/
.single-mini-card {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
  border-radius: 8px;
  overflow: hidden;
}

.single-mini-card .card-image img {
  width: 100%;
  height: 100%;
}

.single-mini-card .card-content {
  padding: 16px;
}

.single-mini-card .card-content .card-title {
  margin-bottom: 0;
}

.single-mini-card .card-content .card-title a {
  font-size: 20px;
  line-height: 30px;
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

@media (max-width: 767px) {
  .single-mini-card .card-content .card-title a {
    font-size: 18px;
  }
}

.single-mini-card .card-content .card-title a:hover {
  color: #4da422;
}

.single-mini-card .card-content .text {
  color: #121212;
  font-size: 14px;
  line-height: 24px;
  margin-top: 8px;
}

.single-mini-card .card-content .card-btn {
  margin-top: 24px;
}

.single-mini-card .card-content .card-btn .main-btn {
  border: 2px solid #0067f4;
  font-size: 14px;
  line-height: 40px;
  padding: 0 24px;
}

.mini-card-style-two {
  background: linear-gradient(to right, #ff5858 0%, #f09819 100%);
}

.mini-card-style-two .card-content .card-title a {
  color: #fff;
}

.mini-card-style-two .card-content .text {
  color: #fff;
}

.mini-card-style-three .card-image img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 767px) {
  .mini-card-style-three .card-image img {
    height: 210px;
  }
}

.mini-card-style-three .card-content .card-btn .main-btn {
  border: 0;
  line-height: 42px;
}

.mini-card-style-four {
  background: linear-gradient(to right, #0067f4 0%, #9c09db 100%);
}

.mini-card-style-four .card-image img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 767px) {
  .mini-card-style-four .card-image img {
    height: 210px;
  }
}

.mini-card-style-four .card-content .card-title a {
  color: #fff;
}

.mini-card-style-four .card-content .card-title a:hover {
  color: #fff;
}

.mini-card-style-four .card-content .text {
  color: #fff;
}

.mini-card-style-four .card-content .card-btn .main-btn {
  border: 0;
  line-height: 42px;
}

.mini-card-style-five {
  background: linear-gradient(to right, #9be15d 0%, #00e3ae 100%);
}

.mini-card-style-five .card-image img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 767px) {
  .mini-card-style-five .card-image img {
    height: 210px;
  }
}

.mini-card-style-five .card-content .card-title a {
  color: #fff;
}

.mini-card-style-five .card-content .card-title a:hover {
  color: #fff;
}

.mini-card-style-five .card-content .text {
  color: #fff;
}

.mini-card-style-five .card-content .card-btn .main-btn {
  border-color: #fff;
  background-color: #fff;
}

.mini-card-style-five .card-content .card-btn .main-btn:hover {
  background-color: transparent;
  color: #fff;
}

.mini-card-style-six {
  box-shadow: none;
}

.mini-card-style-six .card-content {
  position: relative;
  padding-left: 0;
  padding-right: 0;
}

.mini-card-style-six .card-content .card-icon {
  position: absolute;
  top: -20px;
  right: 8px;
}

.mini-card-style-six .card-content .card-icon i {
  width: 40px;
  line-height: 40px;
  height: 40px;
  text-align: center;
  color: #fff;
  background-color: #0067f4;
  border-radius: 50%;
  font-size: 24px;
  transition: all 0.3s ease-out 0s;
}

.mini-card-style-six .card-content .card-icon:hover i {
  background-color: #fff;
  color: #0067f4;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
}

.mini-card-style-saven {
  box-shadow: none;
}

.mini-card-style-saven .card-content {
  position: relative;
  padding-left: 0;
  padding-right: 0;
}

.mini-card-style-saven .card-content .card-icon {
  position: absolute;
  top: -20px;
  right: 8px;
}

.mini-card-style-saven .card-content .card-icon i {
  width: 40px;
  line-height: 40px;
  height: 40px;
  text-align: center;
  color: #0067f4;
  background-color: #fff;
  border-radius: 50%;
  font-size: 24px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease-out 0s;
}

.mini-card-style-saven .card-content .card-icon:hover i {
  background-color: #0067f4;
  color: #fff;
}

.mini-card-style-nine {
  box-shadow: none;
}

.mini-card-style-nine .card-image img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 767px) {
  .mini-card-style-nine .card-image img {
    height: 210px;
  }
}

/*===========================
       15.ABOUT css 
===========================*/
.about-title .title {
  font-size: 44px;
  line-height: 55px;
  color: #121212;
}

@media (max-width: 767px) {
  .about-title .title {
    font-size: 28px;
    line-height: 35px;
  }
}

.about-one {

}

.single-about-items .items-icon {
  max-width: 120px;
  width: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .single-about-items .items-icon {
    max-width: 90px;
  }
}

@media (max-width: 767px) {
  .single-about-items .items-icon {
    max-width: 80px;
  }
}

.single-about-items .items-content {
  margin-top: 24px;
}

@media only screen and (min-width: 1400px) {
  .single-about-items .items-content {
    padding-right: 45px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .single-about-items .items-content {
    padding-right: 35px;
  }
}

.single-about-items .items-content .items-title a {
  font-size: 20px;
  color: #121212;
  line-height: 25px;
}

.single-about-items .items-content .text {
  color: #121212;
  font-size: 14px;
  line-height: 24px;
  margin-top: 8px;
}

/*===== ABOUT TWO =====*/
.about-two {

}

@media only screen and (min-width: 1400px) {
  .single-features-one-items {
    padding: 0 45px;
  }
}

.single-features-one-items .features-image img {
  width: 255px;
}

.single-features-one-items .features-content {
  margin-top: 32px;
}

.single-features-one-items .features-content .features-title {
  font-size: 36px;
  font-weight: 500;
  line-height: 45px;
  color: #121212;
}

@media (max-width: 767px) {
  .single-features-one-items .features-content .features-title {
    font-size: 24px;
    line-height: 35px;
  }
}

.single-features-one-items .features-content .text {
  font-size: 16px;
  line-height: 24px;
  color: #121212;
  margin-top: 8px;
}

/*===== ABOUT THREE =====*/
.about-three {

}

.about-feature-three .about-feature-image img {
  width: 100%;
}

.about-feature-three .about-feature-content {
  margin-top: 48px;
}

.about-feature-three .about-feature-content .feature-title {
  font-size: 44px;
  font-weight: 600;
  line-height: 55px;
  color: #121212;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about-feature-three .about-feature-content .feature-title {
    font-size: 38px;
    line-height: 45px;
  }
}

@media (max-width: 767px) {
  .about-feature-three .about-feature-content .feature-title {
    font-size: 30px;
    line-height: 35px;
  }
}

.about-feature-three .about-feature-content .text {
  font-size: 20px;
  line-height: 25px;
  color: #121212;
  margin-top: 8px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about-feature-three .about-feature-content .text {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .about-feature-three .about-feature-content .text {
    font-size: 18px;
  }
}

.about-feature-items-three .feature-items-icon {
  max-width: 120px;
  width: 100%;
}

@media (max-width: 767px) {
  .about-feature-items-three .feature-items-icon {
    max-width: 100%;
    text-align:center;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about-feature-items-three .feature-items-icon {
    max-width: 100%;
    text-align:center;
  }

}

.about-feature-items-three .feature-items-content {
  padding-left: 30px;
}

@media (max-width: 767px) {
  .about-feature-items-three .feature-items-content {
    padding-left: 0;
    padding-top: 25px;
    text-align:center;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about-feature-items-three .feature-items-content {
    padding-left: 30px;
    padding-top: 0;
    text-align:center;
  }
}

.about-feature-items-three .feature-items-content .items-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  color: #121212;
}

@media (max-width: 767px) {
  .about-feature-items-three .feature-items-content .items-title {
    font-size: 18px;
  }
}

.about-feature-items-three .feature-items-content .text {
  font-size: 16px;
  line-height: 24px;
  color: #121212;
  margin-top: 16px;
}

@media (max-width: 767px) {
  .about-feature-items-three .feature-items-content .text {
    font-size: 14px;
  }
}

/*===== ABOUT FOUR =====*/
.about-four {

}

.feature-image-four {
  position: absolute;
  width: 45%;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .feature-image-four {
    position: relative;
    width: 720px;
    transform: translateY(0);
    margin: 50px auto 0;
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (max-width: 767px) {
  .feature-image-four {
    position: relative;
    width: 100%;
    transform: translateY(0);
    margin: 50px auto 0;
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .feature-image-four {
    width: 540px;
  }
}

.feature-image-four .image {
  max-width: 720px;
}

.feature-image-four .image img {
  width: 100%;
}

.about-feature-four .about-feature-image img {
  width: 100%;
}

.about-feature-four .about-feature-content {
  margin-top: 48px;
}

.about-feature-four .about-feature-content .feature-title {
  font-size: 44px;
  font-weight: 600;
  line-height: 55px;
  color: #121212;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about-feature-four .about-feature-content .feature-title {
    font-size: 38px;
    line-height: 45px;
  }
}

@media (max-width: 767px) {
  .about-feature-four .about-feature-content .feature-title {
    font-size: 30px;
    line-height: 35px;
  }
}

.about-feature-four .about-feature-content .text {
  font-size: 20px;
  line-height: 25px;
  color: #121212;
  margin-top: 8px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about-feature-four .about-feature-content .text {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .about-feature-four .about-feature-content .text {
    font-size: 18px;
  }
}

.about-feature-items-four .feature-items-icon {
  max-width: 120px;
  width: 100%;
  height: 120px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

@media (max-width: 767px) {
  .about-feature-items-four .feature-items-icon {
    max-width: 90px;
    height: 90px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about-feature-items-four .feature-items-icon {
    max-width: 120px;
    height: 120px;
  }
}

.about-feature-items-four .feature-items-content {
  padding-left: 30px;
}

@media (max-width: 767px) {
  .about-feature-items-four .feature-items-content {
    padding-left: 0;
    padding-top: 25px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .about-feature-items-four .feature-items-content {
    padding-left: 30px;
    padding-top: 0;
  }
}

.about-feature-items-four .feature-items-content .items-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  color: #121212;
}

@media (max-width: 767px) {
  .about-feature-items-four .feature-items-content .items-title {
    font-size: 18px;
  }
}

.about-feature-items-four .feature-items-content .text {
  font-size: 16px;
  line-height: 24px;
  color: #121212;
  margin-top: 16px;
}

@media (max-width: 767px) {
  .about-feature-items-four .feature-items-content .text {
    font-size: 14px;
  }
}

/*===== ABOUT FIVE =====*/
.about-five {

}

.about-content-five .sub-title {

  text-transform: uppercase;
}

@media (max-width: 767px) {

}

.about-content-five .about-title {

}

@media (max-width: 767px) {
  .about-content-five .about-title {

  }
}

.about-image-five {
  margin-top: 50px;
}

.about-image-five img {
  width: 100%;
}

/*===== ABOUT SIX =====*/
.about-six {

}

.about-six .faq-title .sub-title {
  font-size: 18px;
  font-weight: 400;
  color: #0067f4;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .about-six .faq-title .sub-title {
    font-size: 16px;
  }
}

.about-six .faq-title .title {
  font-size: 32px;
  padding-top: 10px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about-six .faq-title .title {
    font-size: 30px;
  }
}

@media (max-width: 767px) {
  .about-six .faq-title .title {
    font-size: 24px;
  }
}

.about-six .faq-accordion .accordion .card {
  border: 0;
  background: none;
}

.about-six .faq-accordion .accordion .card .card-header {
  padding: 0;
  border: 0;
  background: none;
  margin-top: 40px;
}

.about-six .faq-accordion .accordion .card .card-header a {
  font-size: 18px;
  font-weight: 500;
  color: #000;
  display: block;
  position: relative;
  padding-right: 20px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .about-six .faq-accordion .accordion .card .card-header a {
    font-size: 16px;
  }
}

@media (max-width: 767px) {
  .about-six .faq-accordion .accordion .card .card-header a {
    font-size: 16px;
  }
}

.about-six .faq-accordion .accordion .card .card-header a::before {
  content: "\eb53";
  font-family: 'LineIcons';
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.about-six .faq-accordion .accordion .card .card-header .collapsed::before {
  content: "\eb2c";
}

.about-six .faq-accordion .accordion .card .card-body {
  padding: 20px 20px 0;
}

.about-six .faq-image img {
  width: 100%;
}

/*===========================
      16.PRICING css 
===========================*/
/*===== PRICING STYLE ONE =====*/
.pricing-style-one {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  padding: 24px 20px 50px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background-color: #fff;
}

.pricing-style-one .pricing-header .sub-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  color: #121212;
  position: relative;
  padding-bottom: 8px;
}

.pricing-style-one .pricing-header .sub-title::before {
  position: absolute;
  content: '';
  width: 72px;
  height: 4px;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #2bdbdc;
  margin: 0 auto;
}

.pricing-style-one .pricing-header .price {
  display: block;
  font-size: 64px;
  font-weight: 600;
  line-height: 80px;
  margin-top: 32px;
  color: #121212;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pricing-style-one .pricing-header .price {
    font-size: 50px;
    margin-top: 16px;
  }
}

@media (max-width: 767px) {
  .pricing-style-one .pricing-header .price {
    font-size: 50px;
    margin-top: 16px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-one .pricing-header .price {
    font-size: 64px;
    margin-top: 32px;
  }
}

.pricing-style-one .pricing-header .year {
  font-size: 20px;
  font-weight: 500;
  line-height: 25px;
  color: #6c6c6c;
  margin-top: 3px;
}

.pricing-style-one .pricing-list {
  margin-top: 40px;
}

.pricing-style-one .pricing-list ul li {
  font-size: 16px;
  line-height: 24px;
  color: #121212;
  margin-top: 16px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pricing-style-one .pricing-list ul li {
    font-size: 14px;
    margin-top: 12px;
  }
}

@media (max-width: 767px) {
  .pricing-style-one .pricing-list ul li {
    font-size: 14px;
    margin-top: 12px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-one .pricing-list ul li {
    font-size: 16px;
    margin-top: 16px;
  }
}

.pricing-style-one .pricing-list ul li i {
  color: #0067f4;
  margin-right: 8px;
}

.pricing-style-one .pricing-btn {
  margin-top: 42px;
}

.pricing-style-one .pricing-btn .main-btn {
  background-color: #0067f4;
  color: #fff;
  border-color: #0067f4;
}

.pricing-style-one .pricing-btn .main-btn:hover {
  background-color: #005ad5;
  border-color: #005ad5;
}

.pricing-style-one .bottom-shape {
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 101%;
}

/*===== PRICING STYLE TWO =====*/
.pricing-style-two {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  padding: 24px 20px 50px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background-color: #fff;
}

.pricing-style-two .pricing-header .sub-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  color: #121212;
  position: relative;
  padding-bottom: 8px;
}

.pricing-style-two .pricing-header .sub-title::before {
  position: absolute;
  content: '';
  width: 72px;
  height: 4px;
  bottom: 0;
  left: 0;
  background-color: #0067f4;
  margin: 0 auto;
}

.pricing-style-two .pricing-header .price {
  display: block;
  font-size: 64px;
  font-weight: 600;
  line-height: 80px;
  margin-top: 32px;
  color: #121212;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pricing-style-two .pricing-header .price {
    font-size: 50px;
    margin-top: 16px;
  }
}

@media (max-width: 767px) {
  .pricing-style-two .pricing-header .price {
    font-size: 50px;
    margin-top: 16px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-two .pricing-header .price {
    font-size: 64px;
    margin-top: 32px;
  }
}

.pricing-style-two .pricing-header .year {
  font-size: 20px;
  font-weight: 500;
  line-height: 25px;
  color: #6c6c6c;
  margin-top: 3px;
}

.pricing-style-two .pricing-baloon {
  position: absolute;
  top: 0;
  right: -78px;
  width: 156px;
}

.pricing-style-two .pricing-list {
  margin-top: 40px;
}

.pricing-style-two .pricing-list ul li {
  font-size: 16px;
  line-height: 24px;
  color: #121212;
  margin-top: 16px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pricing-style-two .pricing-list ul li {
    font-size: 14px;
    margin-top: 12px;
  }
}

@media (max-width: 767px) {
  .pricing-style-two .pricing-list ul li {
    font-size: 14px;
    margin-top: 12px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-two .pricing-list ul li {
    font-size: 16px;
    margin-top: 16px;
  }
}

.pricing-style-two .pricing-list ul li i {
  color: #0067f4;
  margin-right: 8px;
}

.pricing-style-two .pricing-btn {
  margin-top: 42px;
}

.pricing-style-two .pricing-btn .main-btn {
  background-color: #0067f4;
  color: #fff;
  border-color: #0067f4;
}

.pricing-style-two .pricing-btn .main-btn:hover {
  background-color: #005ad5;
  border-color: #005ad5;
}

.pricing-style-two .bottom-shape {
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 101%;
}

/*===== PRICING STYLE THREE =====*/
.pricing-style-three {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  padding: 24px 20px 50px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background-color: #fff;
}

.pricing-style-three .pricing-header .sub-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  color: #121212;
  position: relative;
  padding-bottom: 8px;
}

.pricing-style-three .pricing-header .sub-title::before {
  position: absolute;
  content: '';
  width: 72px;
  height: 4px;
  bottom: 0;
  right: 0;
  background-color: #0067f4;
  margin: 0 auto;
}

.pricing-style-three .pricing-header .price {
  display: block;
  font-size: 64px;
  font-weight: 600;
  line-height: 80px;
  margin-top: 32px;
  color: #121212;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pricing-style-three .pricing-header .price {
    font-size: 50px;
    margin-top: 16px;
  }
}

@media (max-width: 767px) {
  .pricing-style-three .pricing-header .price {
    font-size: 50px;
    margin-top: 16px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-three .pricing-header .price {
    font-size: 64px;
    margin-top: 32px;
  }
}

.pricing-style-three .pricing-header .year {
  font-size: 20px;
  font-weight: 500;
  line-height: 25px;
  color: #6c6c6c;
  margin-top: 3px;
}

.pricing-style-three .pricing-flower {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 144px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pricing-style-three .pricing-flower {
    width: 110px;
  }
}

@media (max-width: 767px) {
  .pricing-style-three .pricing-flower {
    width: 110px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-three .pricing-flower {
    width: 144px;
  }
}

.pricing-style-three .pricing-flower img {
  width: 100%;
}

.pricing-style-three .pricing-list {
  margin-top: 40px;
}

.pricing-style-three .pricing-list ul li {
  font-size: 16px;
  line-height: 24px;
  color: #121212;
  margin-top: 16px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pricing-style-three .pricing-list ul li {
    font-size: 14px;
    margin-top: 12px;
  }
}

@media (max-width: 767px) {
  .pricing-style-three .pricing-list ul li {
    font-size: 14px;
    margin-top: 12px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-three .pricing-list ul li {
    font-size: 16px;
    margin-top: 16px;
  }
}

.pricing-style-three .pricing-list ul li i {
  color: #0067f4;
  margin-right: 8px;
}

.pricing-style-three .pricing-btn {
  margin-top: 42px;
}

.pricing-style-three .pricing-btn .main-btn {
  background-color: #0067f4;
  color: #fff;
  border-color: #0067f4;
}

.pricing-style-three .pricing-btn .main-btn:hover {
  background-color: #005ad5;
  border-color: #005ad5;
}

.pricing-style-three .bottom-shape {
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 101%;
}

/*===== PRICING FOUR =====*/
.pricing-style-four {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  padding: 24px 20px 50px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background-color: #0067f4;
}

.pricing-style-four .pricing-header .sub-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  color: #fff;
  position: relative;
  padding-bottom: 8px;
}

.pricing-style-four .pricing-header .sub-title::before {
  position: absolute;
  content: '';
  width: 72px;
  height: 4px;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #2bdbdc;
  margin: 0 auto;
}

.pricing-style-four .pricing-header .price {
  display: block;
  font-size: 64px;
  font-weight: 600;
  line-height: 80px;
  margin-top: 32px;
  color: #fff;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pricing-style-four .pricing-header .price {
    font-size: 50px;
    margin-top: 16px;
  }
}

@media (max-width: 767px) {
  .pricing-style-four .pricing-header .price {
    font-size: 50px;
    margin-top: 16px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-four .pricing-header .price {
    font-size: 64px;
    margin-top: 32px;
  }
}

.pricing-style-four .pricing-header .year {
  font-size: 20px;
  font-weight: 500;
  line-height: 25px;
  color: #fff;
  margin-top: 3px;
}

.pricing-style-four .pricing-list {
  margin-top: 40px;
}

.pricing-style-four .pricing-list ul li {
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  margin-top: 16px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pricing-style-four .pricing-list ul li {
    font-size: 14px;
    margin-top: 12px;
  }
}

@media (max-width: 767px) {
  .pricing-style-four .pricing-list ul li {
    font-size: 14px;
    margin-top: 12px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-four .pricing-list ul li {
    font-size: 16px;
    margin-top: 16px;
  }
}

.pricing-style-four .pricing-list ul li i {
  color: #fff;
  margin-right: 8px;
}

.pricing-style-four .pricing-btn {
  margin-top: 42px;
}

.pricing-style-four .pricing-btn .main-btn {
  background-color: #fff;
  border-color: #fff;
}

.pricing-style-four .pricing-btn .main-btn:hover {
  color: #0067f4;
  box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16);
}

.pricing-style-four .bottom-shape {
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 101%;
}

/*===== PRICING FIVE =====*/
.pricing-style-five {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  padding: 24px 20px 50px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(#1067ff, #8544eb);
}

.pricing-style-five .pricing-header .sub-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  color: #fff;
  position: relative;
  padding-bottom: 8px;
}

.pricing-style-five .pricing-header .sub-title::before {
  position: absolute;
  content: '';
  width: 72px;
  height: 4px;
  bottom: 0;
  left: 0;
  background-color: #2bdbdc;
  margin: 0 auto;
}

.pricing-style-five .pricing-header .price {
  display: block;
  font-size: 64px;
  font-weight: 600;
  line-height: 80px;
  margin-top: 32px;
  color: #fff;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pricing-style-five .pricing-header .price {
    font-size: 50px;
    margin-top: 16px;
  }
}

@media (max-width: 767px) {
  .pricing-style-five .pricing-header .price {
    font-size: 50px;
    margin-top: 16px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-five .pricing-header .price {
    font-size: 64px;
    margin-top: 32px;
  }
}

.pricing-style-five .pricing-header .year {
  font-size: 20px;
  font-weight: 500;
  line-height: 25px;
  color: #fff;
  margin-top: 3px;
}

.pricing-style-five .pricing-baloon {
  position: absolute;
  top: 0;
  right: -78px;
  width: 156px;
}

.pricing-style-five .pricing-list {
  margin-top: 40px;
}

.pricing-style-five .pricing-list ul li {
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  margin-top: 16px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pricing-style-five .pricing-list ul li {
    font-size: 14px;
    margin-top: 12px;
  }
}

@media (max-width: 767px) {
  .pricing-style-five .pricing-list ul li {
    font-size: 14px;
    margin-top: 12px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-five .pricing-list ul li {
    font-size: 16px;
    margin-top: 16px;
  }
}

.pricing-style-five .pricing-list ul li i {
  color: #fff;
  margin-right: 8px;
}

.pricing-style-five .pricing-btn {
  margin-top: 42px;
}

.pricing-style-five .pricing-btn .main-btn {
  background-color: #fff;
  border-color: #fff;
}

.pricing-style-five .pricing-btn .main-btn:hover {
  color: #0067f4;
  box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16);
}

.pricing-style-five .bottom-shape {
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 101%;
}

/*===== PRICING SIX =====*/
.pricing-style-six {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  padding: 24px 20px 50px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(#0067f4, #2bdbdc);
}

.pricing-style-six .pricing-header .sub-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  color: #fff;
  position: relative;
  padding-bottom: 8px;
}

.pricing-style-six .pricing-header .sub-title::before {
  position: absolute;
  content: '';
  width: 72px;
  height: 4px;
  bottom: 0;
  right: 0;
  background-color: #2bdbdc;
  margin: 0 auto;
}

.pricing-style-six .pricing-header .price {
  display: block;
  font-size: 64px;
  font-weight: 600;
  line-height: 80px;
  margin-top: 32px;
  color: #fff;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pricing-style-six .pricing-header .price {
    font-size: 50px;
    margin-top: 16px;
  }
}

@media (max-width: 767px) {
  .pricing-style-six .pricing-header .price {
    font-size: 50px;
    margin-top: 16px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-six .pricing-header .price {
    font-size: 64px;
    margin-top: 32px;
  }
}

.pricing-style-six .pricing-header .year {
  font-size: 20px;
  font-weight: 500;
  line-height: 25px;
  color: #fff;
  margin-top: 3px;
}

.pricing-style-six .pricing-baloon-two {
  position: absolute;
  top: 0;
  left: -45px;
  width: 140px;
  opacity: 0.5;
}

.pricing-style-six .pricing-list {
  margin-top: 40px;
}

.pricing-style-six .pricing-list ul li {
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  margin-top: 16px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pricing-style-six .pricing-list ul li {
    font-size: 14px;
    margin-top: 12px;
  }
}

@media (max-width: 767px) {
  .pricing-style-six .pricing-list ul li {
    font-size: 14px;
    margin-top: 12px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-six .pricing-list ul li {
    font-size: 16px;
    margin-top: 16px;
  }
}

.pricing-style-six .pricing-list ul li i {
  color: #fff;
  margin-right: 8px;
}

.pricing-style-six .pricing-btn {
  margin-top: 42px;
}

.pricing-style-six .pricing-btn .main-btn {
  background-color: #fff;
  border-color: #fff;
}

.pricing-style-six .pricing-btn .main-btn:hover {
  color: #0067f4;
  box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16);
}

.pricing-style-six .bottom-shape {
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 101%;
}

/*===== PRICING STYLE SEVEN =====*/
.pricing-style-seven {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  padding: 112px 20px 38px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background-color: #fff;
}

.pricing-style-seven .top-shape {
  position: absolute;
  top: -20px;
  left: 0;
  width: 101%;
  transform: rotate(180deg);
}

.pricing-style-seven .pricing-header .sub-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  color: #121212;
  position: relative;
}

.pricing-style-seven .pricing-header .price {
  display: block;
  font-size: 64px;
  font-weight: 600;
  line-height: 80px;
  color: #121212;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pricing-style-seven .pricing-header .price {
    font-size: 50px;
    margin-top: 16px;
  }
}

@media (max-width: 767px) {
  .pricing-style-seven .pricing-header .price {
    font-size: 50px;
    margin-top: 16px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-seven .pricing-header .price {
    font-size: 64px;
    margin-top: 32px;
  }
}

.pricing-style-seven .pricing-header .year {
  font-size: 20px;
  font-weight: 500;
  line-height: 25px;
  color: #6c6c6c;
  margin-top: 3px;
}

.pricing-style-seven .pricing-list {
  margin-top: 24px;
}

.pricing-style-seven .pricing-list ul li {
  font-size: 16px;
  line-height: 24px;
  color: #121212;
  margin-top: 16px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pricing-style-seven .pricing-list ul li {
    font-size: 14px;
    margin-top: 12px;
  }
}

@media (max-width: 767px) {
  .pricing-style-seven .pricing-list ul li {
    font-size: 14px;
    margin-top: 12px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-seven .pricing-list ul li {
    font-size: 16px;
    margin-top: 16px;
  }
}

.pricing-style-seven .pricing-list ul li i {
  color: #0067f4;
  margin-right: 8px;
}

.pricing-style-seven .pricing-btn {
  margin-top: 26px;
}

/*===== PRICING STYLE EIGHT =====*/
.pricing-style-eight {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  padding: 24px 20px 38px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background-color: #fff;
}

.pricing-style-eight .pricing-icon img {
  width: 200px;
}

.pricing-style-eight .pricing-header .sub-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  color: #121212;
  position: relative;
  margin-top: 24px;
}

.pricing-style-eight .pricing-header .month {
  font-size: 20px;
  font-weight: 300;
  line-height: 25px;
  color: #6c6c6c;
  margin-top: 3px;
}

.pricing-style-eight .pricing-header .month .price {
  font-size: 36px;
  font-weight: 600;
  line-height: 45px;
  color: #121212;
  margin-top: 8px;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-eight .pricing-header .month .price {
    font-size: 24px;
    margin-top: 32px;
    line-height: 30px;
  }
}

.pricing-style-eight .pricing-list {
  margin-top: 24px;
}

.pricing-style-eight .pricing-list ul li {
  font-size: 16px;
  line-height: 24px;
  color: #121212;
  margin-top: 16px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pricing-style-eight .pricing-list ul li {
    font-size: 14px;
    margin-top: 12px;
  }
}

@media (max-width: 767px) {
  .pricing-style-eight .pricing-list ul li {
    font-size: 14px;
    margin-top: 12px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-eight .pricing-list ul li {
    font-size: 16px;
    margin-top: 16px;
  }
}

.pricing-style-eight .pricing-list ul li i {
  color: #0067f4;
  margin-right: 8px;
}

.pricing-style-eight .pricing-btn {
  margin-top: 31px;
}

/*===== PRICING STYLE NINE =====*/
.pricing-style-nine {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  padding: 24px 20px 38px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(#2bdbdc 0%, #0067f4 100%);
}

.pricing-style-nine .pricing-icon img {
  width: 190px;
}

.pricing-style-nine .pricing-header .sub-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  color: #fff;
  position: relative;
  margin-top: 24px;
}

.pricing-style-nine .pricing-header .month {
  font-size: 20px;
  font-weight: 300;
  line-height: 25px;
  color: #fff;
  margin-top: 3px;
}

.pricing-style-nine .pricing-header .month .price {
  font-size: 36px;
  font-weight: 600;
  line-height: 45px;
  color: #fff;
  margin-top: 8px;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-nine .pricing-header .month .price {
    font-size: 24px;
    margin-top: 32px;
    line-height: 30px;
  }
}

.pricing-style-nine .pricing-list {
  margin-top: 24px;
}

.pricing-style-nine .pricing-list ul li {
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  margin-top: 16px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pricing-style-nine .pricing-list ul li {
    font-size: 14px;
    margin-top: 12px;
  }
}

@media (max-width: 767px) {
  .pricing-style-nine .pricing-list ul li {
    font-size: 14px;
    margin-top: 12px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-nine .pricing-list ul li {
    font-size: 16px;
    margin-top: 16px;
  }
}

.pricing-style-nine .pricing-list ul li i {
  color: #fff;
  margin-right: 8px;
}

.pricing-style-nine .pricing-btn {
  margin-top: 31px;
}

.pricing-style-nine .pricing-btn .main-btn {
  background-color: #fff;
  border-color: #fff;
}

.pricing-style-nine .pricing-btn .main-btn:hover {
  color: #0067f4;
  box-shadow: 0 3px 16px 0 rgba(0, 0, 0, 0.16);
}

/*===== PRICING TEN =====*/
.pricing-style-ten {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background-color: #fff;
}

.pricing-style-ten .pricing-header {
  background: linear-gradient(to right, #1067ff 0%, #8544eb 100%);
  padding: 20px;
}

.pricing-style-ten .pricing-header .sub-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  color: #fff;
  position: relative;
}

.pricing-style-ten .pricing-header .pricing-year .price {
  font-size: 64px;
  font-weight: 600;
  line-height: 80px;
  color: #fff;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pricing-style-ten .pricing-header .pricing-year .price {
    font-size: 50px;
  }
}

@media (max-width: 767px) {
  .pricing-style-ten .pricing-header .pricing-year .price {
    font-size: 50px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-ten .pricing-header .pricing-year .price {
    font-size: 64px;
  }
}

.pricing-style-ten .pricing-header .pricing-year .year {
  font-size: 20px;
  font-weight: 300;
  line-height: 25px;
  color: #fff;
  margin-top: -10px;
}

.pricing-style-ten .pricing-list {
  padding: 16px 20px 20px;
  height: 348px;
}

.pricing-style-ten .pricing-list ul li {
  font-size: 16px;
  line-height: 24px;
  color: #121212;
  margin-top: 16px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pricing-style-ten .pricing-list ul li {
    font-size: 14px;
    margin-top: 12px;
  }
}

@media (max-width: 767px) {
  .pricing-style-ten .pricing-list ul li {
    font-size: 14px;
    margin-top: 12px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-ten .pricing-list ul li {
    font-size: 16px;
    margin-top: 16px;
  }
}

.pricing-style-ten .pricing-list ul li i {
  color: #0067f4;
  margin-right: 8px;
}

.pricing-style-ten .pricing-btn .main-btn {
  color: #fff;
  border: 0;
  line-height: 50px;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  width: 100%;
}

/*===== PRICING ELEVEN =====*/
.pricing-style-eleven {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background-color: #fff;
}

.pricing-style-eleven .pricing-header {
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  padding: 8px 20px;
}

.pricing-style-eleven .pricing-header .sub-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  color: #fff;
  position: relative;
}

.pricing-style-eleven .pricing-list {
  padding: 32px 20px 20px;
  height: 448px;
}

.pricing-style-eleven .pricing-list .pricing-year .price {
  font-size: 64px;
  font-weight: 600;
  line-height: 80px;
  color: #121212;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pricing-style-eleven .pricing-list .pricing-year .price {
    font-size: 50px;
    margin-top: 16px;
  }
}

@media (max-width: 767px) {
  .pricing-style-eleven .pricing-list .pricing-year .price {
    font-size: 50px;
    margin-top: 16px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-eleven .pricing-list .pricing-year .price {
    font-size: 64px;
    margin-top: 32px;
  }
}

.pricing-style-eleven .pricing-list .pricing-year .year {
  font-size: 20px;
  font-weight: 300;
  line-height: 25px;
  color: #6c6c6c;
  margin-top: -10px;
}

.pricing-style-eleven .pricing-list ul {
  margin-top: 40px;
}

.pricing-style-eleven .pricing-list ul li {
  font-size: 16px;
  line-height: 24px;
  color: #121212;
  margin-top: 16px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pricing-style-eleven .pricing-list ul li {
    font-size: 14px;
    margin-top: 12px;
  }
}

@media (max-width: 767px) {
  .pricing-style-eleven .pricing-list ul li {
    font-size: 14px;
    margin-top: 12px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-eleven .pricing-list ul li {
    font-size: 16px;
    margin-top: 16px;
  }
}

.pricing-style-eleven .pricing-list ul li i {
  color: #0067f4;
  margin-right: 8px;
}

.pricing-style-eleven .pricing-btn .main-btn {
  color: #fff;
  border: 0;
  line-height: 50px;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  width: 100%;
}

/*===== PRICING TWELVE =====*/
.pricing-style-twelve {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  padding: 24px 20px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  background-color: #fff;
}

.pricing-style-twelve .pricing-icon img {
  width: 112px;
}

.pricing-style-twelve .pricing-header {
  margin-top: 24px;
}

.pricing-style-twelve .pricing-header .sub-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  color: #121212;
}

.pricing-style-twelve .pricing-header .price {
  display: block;
  font-size: 64px;
  font-weight: 600;
  line-height: 80px;
  color: #121212;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pricing-style-twelve .pricing-header .price {
    font-size: 50px;
    margin-top: 16px;
  }
}

@media (max-width: 767px) {
  .pricing-style-twelve .pricing-header .price {
    font-size: 50px;
    margin-top: 16px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-twelve .pricing-header .price {
    font-size: 64px;
    margin-top: 32px;
  }
}

.pricing-style-twelve .pricing-header .year {
  font-size: 20px;
  font-weight: 500;
  line-height: 25px;
  color: #6c6c6c;
  margin-top: -10px;
}

.pricing-style-twelve .pricing-list {
  margin-top: 33px;
}

.pricing-style-twelve .pricing-list ul li {
  font-size: 16px;
  line-height: 24px;
  color: #121212;
  margin-top: 16px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .pricing-style-twelve .pricing-list ul li {
    font-size: 14px;
    margin-top: 12px;
  }
}

@media (max-width: 767px) {
  .pricing-style-twelve .pricing-list ul li {
    font-size: 14px;
    margin-top: 12px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .pricing-style-twelve .pricing-list ul li {
    font-size: 16px;
    margin-top: 16px;
  }
}

.pricing-style-twelve .pricing-list ul li i {
  color: #0067f4;
  margin-right: 8px;
}

.pricing-style-twelve .pricing-btn {
  margin-top: 26px;
}

/*===== PRICING THIRTEEN =====*/
.pricing-style-thirteen {
  padding: 65px 50px 70px;
}

@media (max-width: 767px) {
  .pricing-style-thirteen {
    padding: 45px 30px 50px;
  }
}

.pricing-style-thirteen .pricing-price .price {
  font-size: 42px;
  color: #121212;
}

.pricing-style-thirteen .pricing-price .price b {
  font-weight: 800;
}

.pricing-style-thirteen .pricing-price .price .symbol {
  font-size: 18px;
  color: #0067f4;
  font-weight: 700;
}

.pricing-style-thirteen .pricing-title {
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  padding-bottom: 50px;
}

.pricing-style-thirteen .pricing-title .btn {
  padding: 0 15px;
  line-height: 25px;
  border-radius: 50px;
  background-color: #4bb3f9;
  color: #fff;
  font-size: 14px;
}

.pricing-style-thirteen .pricing-title .title {
  font-weight: 600;
  font-size: 24px;
  padding-left: 10px;
}

.pricing-style-thirteen .pricing-list ul li {
  font-size: 14px;
  color: #a4a4a4;
  margin-top: 20px;
}

.pricing-style-thirteen.pricing-color-1 .pricing-title .btn {
  background-color: #005ad5;
}

.pricing-style-thirteen.pricing-color-2 .pricing-title .btn {
  background-color: #fc3832;
}

.pricing-style-thirteen.pricing-color-3 .pricing-title .btn {
  background-color: #4da422;
}

.pricing-style-thirteen.pricing-active {
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.07);
}

/*===========================
      17.FEATURES css 
===========================*/
.services-area .section-title .title {
  font-size: 50px;
  font-weight: 600;
  line-height: 55px;
  color: #121212;
}

@media (max-width: 767px) {
  .services-area .section-title .title {
    font-size: 30px;
    line-height: 40px;
  }
}

.services-area .section-title .text {
  font-size: 16px;
  line-height: 24px;
  color: #6c6c6c;
  margin-top: 24px;
}

/*===== SERVICES ONE =====*/
.services-one {
  position: relative;
  background-color: #f4f6f7;
  padding-top: 120px;
  padding-bottom: 120px;
}

.services-one .services-content .services-icon i {
  font-size: 64px;
  color: #0067f4;
}

.services-one .services-content .services-content {
  padding-left: 15px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .services-one .services-content .services-content {
    padding-right: 10px;
  }
}

@media (max-width: 767px) {
  .services-one .services-content .services-content {
    padding-left: 0;
    padding-top: 15px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .services-one .services-content .services-content {
    padding-left: 15px;
    padding-top: 0;
  }
}

.services-one .services-content .services-content .services-title {
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  color: #121212;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .services-one .services-content .services-content .services-title {
    font-size: 22px;
  }
}

.services-one .services-content .services-content .text {
  font-size: 14px;
  line-height: 20px;
  color: #121212;
  margin-top: 8px;
}

.services-one .services-image {
  position: absolute;
  width: 40%;
  height: 100%;
  top: 0;
  right: 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .services-one .services-image {
    width: 35%;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .services-one .services-image {
    width: 34%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .services-one .services-image {
    position: relative;
    width: 720px;
    margin: 0 auto;
  }
}

@media (max-width: 767px) {
  .services-one .services-image {
    position: relative;
    width: 100%;
    padding-left: 15px;
    padding-right: 16px;
    margin: 0 auto;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .services-one .services-image {
    position: relative;
    width: 540px;
    margin: 0 auto;
  }
}

.services-one .services-image .image {
  max-width: 580px;
  width: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .services-one .services-image .image {
    margin: 0 auto;
    padding-top: 50px;
  }
}

@media (max-width: 767px) {
  .services-one .services-image .image {
    margin: 0 auto;
    padding-top: 50px;
  }
}

.services-one .services-image .image img {
  width: 100%;
}

/*===== SERVICES TWO =====*/
.services-two {
  position: relative;
  background-color: #f4f6f7;
  padding-top: 120px;
  padding-bottom: 120px;
  height: 600px;
}

@media only screen and (min-width: 1400px) {
  .services-two {
    height: 920px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .services-two {
    height: auto;
  }
}

@media (max-width: 767px) {
  .services-two {
    height: auto;
  }
}

.services-two .services-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .services-two .services-image {
    position: relative;
    max-width: 720px;
    width: 100%;
    margin: 50px auto 0;
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (max-width: 767px) {
  .services-two .services-image {
    position: relative;
    max-width: 100%;
    width: 100%;
    margin: 50px auto 0;
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .services-two .services-image {
    max-width: 540px;
  }
}

.services-two .services-image .image {
  max-width: 720px;
  margin-left: auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .services-two .services-image .image {
    max-width: 470px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .services-two .services-image .image {
    max-width: 520px;
  }
}

.services-two .services-image .image img {
  width: 100%;
}

.services-two .services-content .sub-title {
  color: #121212;
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  text-transform: uppercase;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .services-two .services-content .sub-title {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .services-two .services-content .sub-title {
    font-size: 20px;
  }
}

.services-two .services-content .services-title {
  font-size: 44px;
  font-weight: 500;
  line-height: 55px;
  color: #121212;
  margin-top: 16px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .services-two .services-content .services-title {
    font-size: 38px;
    line-height: 45px;
  }
}

@media (max-width: 767px) {
  .services-two .services-content .services-title {
    font-size: 32px;
    line-height: 35px;
  }
}

.services-two .services-content .text {
  color: #6c6c6c;
  font-size: 20px;
  font-weight: 500;
  margin-top: 16px;
  line-height: 25px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .services-two .services-content .text {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .services-two .services-content .text {
    font-size: 16px;
    line-height: 24px;
  }
}

/*===== SERVICES THREE =====*/
.services-three {
  position: relative;
  background-color: #f4f6f7;
  padding-top: 120px;
  padding-bottom: 120px;
  height: 600px;
}

@media only screen and (min-width: 1400px) {
  .services-three {
    height: 920px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .services-three {
    height: auto;
  }
}

@media (max-width: 767px) {
  .services-three {
    height: auto;
  }
}

.services-three .services-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .services-three .services-image {
    position: relative;
    max-width: 720px;
    width: 100%;
    margin: 50px auto 0;
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (max-width: 767px) {
  .services-three .services-image {
    position: relative;
    max-width: 100%;
    width: 100%;
    margin: 50px auto 0;
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .services-three .services-image {
    max-width: 540px;
  }
}

.services-three .services-image .image {
  max-width: 720px;
  margin-right: auto;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .services-three .services-image .image {
    max-width: 470px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .services-three .services-image .image {
    max-width: 520px;
  }
}

.services-three .services-image .image img {
  width: 100%;
}

.services-three .services-content .sub-title {
  color: #121212;
  font-size: 24px;
  line-height: 30px;
  font-weight: 700;
  text-transform: uppercase;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .services-three .services-content .sub-title {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .services-three .services-content .sub-title {
    font-size: 20px;
  }
}

.services-three .services-content .services-title {
  font-size: 44px;
  font-weight: 500;
  line-height: 55px;
  color: #121212;
  margin-top: 16px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .services-three .services-content .services-title {
    font-size: 38px;
    line-height: 45px;
  }
}

@media (max-width: 767px) {
  .services-three .services-content .services-title {
    font-size: 32px;
    line-height: 35px;
  }
}

.services-three .services-content .text {
  color: #6c6c6c;
  font-size: 20px;
  font-weight: 500;
  margin-top: 16px;
  line-height: 25px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .services-three .services-content .text {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .services-three .services-content .text {
    font-size: 16px;
    line-height: 24px;
  }
}

/*===== SERVICES FOUR =====*/
.services-four {
  position: relative;
  background-color: #f4f6f7;
  padding-top: 120px;
  padding-bottom: 120px;
}

.services-four .services-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .services-four .services-image {
    position: relative;
    max-width: 690px;
    width: 100%;
    margin: 50px auto 0;
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (max-width: 767px) {
  .services-four .services-image {
    position: relative;
    max-width: 100%;
    width: 100%;
    margin: 50px auto 0;
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .services-four .services-image {
    max-width: 540px;
  }
}

.services-four .services-image .image {
  max-width: 720px;
  margin-right: auto;
}

.services-four .services-image .image img {
  width: 100%;
}

.services-four .single-services .services-icon {
  position: relative;
  display: inline-block;
}

.services-four .single-services .services-icon i {
  font-size: 64px;
  color: #0067f4;
  position: relative;
  z-index: 5;
}

.services-four .single-services .services-icon .shape {
  position: absolute;
  top: 0;
  left: 0;
}

.services-four .single-services .services-content {
  margin-top: 16px;
}

.services-four .single-services .services-content .services-title a {
  font-size: 24px;
  line-height: 30px;
  color: #121212;
  transition: all 0.3s ease-out 0s;
  font-weight: 500;
}

@media (max-width: 767px) {
  .services-four .single-services .services-content .services-title a {
    font-size: 20px;
  }
}

.services-four .single-services .services-content .services-title a:hover {
  color: #0067f4;
}

.services-four .single-services .services-content .text {
  font-size: 14px;
  color: #121212;
  line-height: 20px;
  margin-top: 8px;
}

/*===== SERVICES FIVE =====*/
.services-five {
  position: relative;
  background-color: #f4f6f7;
  padding-top: 120px;
  padding-bottom: 120px;
}

.services-five .section-title .title {
  font-size: 44px;
  font-weight: 600;
  line-height: 55px;
  color: #121212;
}

@media (max-width: 767px) {
  .services-five .section-title .title {
    font-size: 28px;
    line-height: 40px;
  }
}

.services-five .section-title .text {
  font-size: 20px;
  line-height: 25px;
  color: #121212;
  margin-top: 8px;
}

@media (max-width: 767px) {
  .services-five .section-title .text {
    font-size: 16px;
  }
}

.services-five .single-services .services-icon {
  max-width: 120px;
  width: 100%;
}

@media (max-width: 767px) {
  .services-five .single-services .services-icon {
    max-width: 100px;
  }
}

.services-five .single-services .services-content {
  padding-left: 30px;
}

@media (max-width: 767px) {
  .services-five .single-services .services-content {
    padding-left: 0;
    padding-top: 30px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .services-five .single-services .services-content {
    padding-left: 30px;
    padding-top: 0;
  }
}

.services-five .single-services .services-content .services-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  color: #121212;
}

.services-five .single-services .services-content .text {
  font-size: 16px;
  color: #121212;
  margin-top: 16px;
}

.features-area .section-title .title {
  font-size: 44px;
  font-weight: 500;
  color: #121212;
  line-height: 55px;
}

@media (max-width: 767px) {
  .features-area .section-title .title {
    font-size: 30px;
    line-height: 35px;
  }
}

.features-area .section-title .text {
  font-size: 16px;
  line-height: 24px;
  color: #6c6c6c;
  margin-top: 24px;
}

/*===== features One =====*/
.features-one {
  background-color: #f4f6f7;
  padding-top: 120px;
  padding-bottom: 120px;
}

.features-one .single-features {
  background-color: #fff;
  padding: 40px 20px;
}

.features-one .single-features .features-icon {
  position: relative;
  display: inline-block;
}

.features-one .single-features .features-icon i {
  font-size: 88px;
  line-height: 70px;
  color: #0067f4;
}

.features-one .single-features .features-icon .shape {
  position: absolute;
  top: 0;
  left: 0;
}

.features-one .single-features .features-content {
  margin-top: 24px;
}

.features-one .single-features .features-content .features-title a {
  font-size: 28px;
  line-height: 35px;
  font-weight: 500;
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .features-one .single-features .features-content .features-title a {
    font-size: 22px;
  }
}

@media (max-width: 767px) {
  .features-one .single-features .features-content .features-title a {
    font-size: 22px;
  }
}

.features-one .single-features .features-content .features-title a:hover {
  color: #0067f4;
}

.features-one .single-features .features-content .text {
  font-size: 14px;
  line-height: 20px;
  color: #121212;
  margin-top: 16px;
}

.features-one .single-features .features-content .features-btn {
  margin-top: 32px;
}

/*===== features TWO =====*/
.features-two {
  background-color: #f4f6f7;
  padding-top: 120px;
  padding-bottom: 120px;
}

.features-two .single-features {
  padding: 40px 20px 52px;
  background-color: #fff;
}

.features-two .single-features .features-title-icon .features-title a {
  font-size: 36px;
  line-height: 45px;
  color: #121212;
  transition: all 0.3s ease-out 0s;
  font-weight: 400;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .features-two .single-features .features-title-icon .features-title a {
    font-size: 24px;
    line-height: 35px;
  }
}

@media (max-width: 767px) {
  .features-two .single-features .features-title-icon .features-title a {
    font-size: 24px;
    line-height: 35px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .features-two .single-features .features-title-icon .features-title a {
    font-size: 36px;
    line-height: 45px;
  }
}

.features-two .single-features .features-title-icon .features-title a:hover {
  color: #0067f4;
}

.features-two .single-features .features-title-icon .features-icon {
  position: relative;
  display: inline-block;
}

.features-two .single-features .features-title-icon .features-icon i {
  font-size: 88px;
  line-height: 70px;
  color: #0067f4;
}

.features-two .single-features .features-title-icon .features-icon .shape {
  position: absolute;
  top: 0;
  left: 0;
}

.features-two .single-features .features-content .text {
  font-size: 14px;
  line-height: 20px;
  color: #121212;
  margin-top: 16px;
}

.features-two .single-features .features-content .features-btn {
  color: #0067f4;
  font-size: 16px;
  font-weight: 700;
  margin-top: 29px;
}

/*===== features THREE =====*/
.features-three {
  background-color: #f4f6f7;
  padding-top: 120px;
  padding-bottom: 120px;
}

@media only screen and (min-width: 1400px) {
  .features-three .single-features {
    padding: 0 45px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .features-three .single-features {
    padding: 0 30px;
  }
}

.features-three .single-features .features-icon {
  position: relative;
  display: inline-block;
  padding-bottom: 16px;
}

.features-three .single-features .features-icon::before {
  position: absolute;
  content: '';
  width: 72px;
  height: 4px;
  background-color: #9c09db;
  bottom: 0;
  left: 0;
}

.features-three .single-features .features-icon i {
  font-size: 72px;
  line-height: 70px;
  color: #9c09db;
  position: relative;
  z-index: 5;
}

.features-three .single-features .features-icon .shape {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.5;
}

.features-three .single-features .features-content {
  margin-top: 24px;
}

.features-three .single-features .features-content .features-title a {
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .features-three .single-features .features-content .features-title a {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .features-three .single-features .features-content .features-title a {
    font-size: 20px;
  }
}

.features-three .single-features .features-content .features-title a:hover {
  color: #0067f4;
}

.features-three .single-features .features-content .text {
  font-size: 14px;
  line-height: 20px;
  color: #121212;
  margin-top: 16px;
}

/*===== features FOUR =====*/
.features-four {
  background-color: #f4f6f7;
  padding-top: 120px;
  padding-bottom: 120px;
}

@media only screen and (min-width: 1400px) {
  .features-four .single-features {
    padding-right: 95px;
  }
}

.features-four .single-features .features-icon {
  position: relative;
  display: inline-block;
  padding-bottom: 16px;
  max-width: 120px;
  width: 100%;
  height: 105px;
}

.features-four .single-features .features-icon i {
  font-size: 80px;
  line-height: 80px;
  color: #fc3832;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

.features-four .single-features .features-icon .shape {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.4;
}

.features-four .single-features .features-content {
  padding-left: 16px;
}

@media (max-width: 767px) {
  .features-four .single-features .features-content {
    padding-top: 15px;
    padding-left: 0;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .features-four .single-features .features-content {
    padding-top: 0;
    padding-left: 15px;
  }
}

.features-four .single-features .features-content .features-title a {
  font-size: 20px;
  line-height: 25px;
  font-weight: 600;
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

.features-four .single-features .features-content .features-title a:hover {
  color: #fc3832;
}

.features-four .single-features .features-content .text {
  font-size: 16px;
  line-height: 24px;
  color: #121212;
  margin-top: 16px;
}

/*===== features Five =====*/
.features-five {
  background-color: #f4f6f7;
  padding-top: 120px;
  padding-bottom: 120px;
}

.features-five .single-features {
  position: relative;
  padding: 0 20px;
}

.features-five .single-features::before {
  position: absolute;
  content: '';
  height: 100%;
  width: 4px;
  top: 0;
  left: 0;
  background: linear-gradient(#0067f4 0%, #2bdbdc 100%);
}

.features-five .single-features .features-title a {
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .features-five .single-features .features-title a {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .features-five .single-features .features-title a {
    font-size: 20px;
  }
}

.features-five .single-features .features-title a:hover {
  color: #0067f4;
}

.features-five .single-features .text {
  font-size: 14px;
  line-height: 20px;
  color: #121212;
  margin-top: 16px;
}

/*===== features SIX =====*/
.features-six {
  background-color: #f4f6f7;
  padding-top: 120px;
  padding-bottom: 120px;
}

.features-six .single-features {
  position: relative;
}

.features-six .single-features .features-title a {
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  color: #121212;
  transition: all 0.3s ease-out 0s;
  position: relative;
  z-index: 5;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .features-six .single-features .features-title a {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .features-six .single-features .features-title a {
    font-size: 20px;
  }
}

.features-six .single-features .features-title a:hover {
  color: #0067f4;
}

.features-six .single-features .text {
  font-size: 14px;
  line-height: 20px;
  color: #121212;
  margin-top: 27px;
}

.features-six .single-features .shape {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
}

/*===== features SAVEN =====*/
.features-saven {
  background-color: #f4f6f7;
  padding-top: 120px;
  padding-bottom: 120px;
}

.features-saven .single-features {
  position: relative;
  background-color: #fff;
  padding: 16px 20px;
  border: 1px solid #f4f6f7;
}

.features-saven .single-features::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 0.3s ease-out 0s;
}

.features-saven .single-features .features-title a {
  font-size: 24px;
  line-height: 30px;
  font-weight: 600;
  color: #121212;
  transition: all 0.3s ease-out 0s;
  position: relative;
  z-index: 5;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .features-saven .single-features .features-title a {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .features-saven .single-features .features-title a {
    font-size: 20px;
  }
}

.features-saven .single-features .text {
  font-size: 14px;
  line-height: 20px;
  color: #121212;
  margin-top: 16px;
  transition: all 0.3s ease-out 0s;
  position: relative;
  z-index: 5;
}

.features-saven .single-features:hover::before {
  opacity: 1;
}

.features-saven .single-features:hover .features-title a {
  color: #fff;
}

.features-saven .single-features:hover .text {
  color: #fff;
}

/*===== features Eight =====*/
.features-eight {
  background-color: #f4f6f7;
  padding-top: 120px;
  padding-bottom: 120px;
}

.features-eight .section-title .text {
  color: #121212;
}

.features-eight .single-features {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 40px 20px;
}

.features-eight .single-features .features-icon {
  position: relative;
  display: inline-block;
}

.features-eight .single-features .features-icon i {
  font-size: 88px;
  line-height: 70px;
  color: #0067f4;
}

.features-eight .single-features .features-icon .shape {
  position: absolute;
  top: 0;
  left: 0;
}

.features-eight .single-features .features-content {
  margin-top: 24px;
}

.features-eight .single-features .features-content .features-title a {
  font-size: 28px;
  line-height: 35px;
  font-weight: 500;
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .features-eight .single-features .features-content .features-title a {
    font-size: 22px;
  }
}

.features-eight .single-features .features-content .features-title a:hover {
  color: #0067f4;
}

.features-eight .single-features .features-content .text {
  font-size: 14px;
  line-height: 20px;
  color: #121212;
  margin-top: 16px;
}

.features-eight .single-features .features-content .features-btn {
  margin-top: 32px;
}

/*===== features Nine =====*/
.features-nine .features-title .sub-title {
  font-size: 24px;
  font-weight: 500;
  color: #a4a4a4;
  line-height: 30px;
}

@media (max-width: 767px) {
  .features-nine .features-title .sub-title {
    font-size: 18px;
    line-height: 28px;
  }
}

.features-nine .features-title .main-title {
  font-size: 36px;
  font-weight: 600;
  line-height: 45px;
  margin-top: 10px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .features-nine .features-title .main-title {
    font-size: 32px;
    line-height: 38px;
  }
}

@media (max-width: 767px) {
  .features-nine .features-title .main-title {
    font-size: 26px;
    line-height: 34px;
  }
}

.features-nine .features-title .text {
  margin-top: 19px;
}

.features-nine .features-image img {
  width: 100%;
  border-radius: 8px;
  transition: all 0.3s ease-out 0s;
}

.features-nine .features-image:hover img {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
}

/*===========================
      18.PORTFOLIO css 
===========================*/
/*===== portfolio ONE =====*/
.portfolio-one .portfolio-menu button {
  border: none;
  background: none;
  font-size: 16px;
  font-weight: 700;
  color: #6c6c6c;
  line-height: 48px;
  padding: 0 30px;
  position: relative;
  border-radius: 50px;
  overflow: hidden;
  display: inline-block;
  z-index: 5;
  transition: all 0.3s ease-out 0s;
  cursor: pointer;
  margin-right: 4px;
  text-transform: uppercase;
}

.portfolio-one .portfolio-menu button:last-child {
  margin-right: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio-one .portfolio-menu button {
    font-size: 14px;
    padding: 0 26px;
  }
}

@media (max-width: 767px) {
  .portfolio-one .portfolio-menu button {
    font-size: 14px;
    padding: 0 22px;
    line-height: 42px;
  }
}

.portfolio-one .portfolio-menu button::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  z-index: -1;
  opacity: 0;
  transition: all 0.3s ease-out 0s;
}

.portfolio-one .portfolio-menu button:hover, .portfolio-one .portfolio-menu button.active {
  color: #fff;
}

.portfolio-one .portfolio-menu button:hover::before, .portfolio-one .portfolio-menu button.active::before {
  opacity: 1;
}

.portfolio-one .single-portfolio {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.portfolio-one .single-portfolio .portfolio-image img {
  width: 100%;
  transition: all 0.3s ease-out 0s;
}

.portfolio-one .single-portfolio .portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease-out 0s;
}

.portfolio-one .single-portfolio .portfolio-overlay .portfolio-content {
  padding: 16px;
}

.portfolio-one .single-portfolio .portfolio-overlay .portfolio-content .portfolio-icon {
  position: relative;
  display: inline-block;
}

.portfolio-one .single-portfolio .portfolio-overlay .portfolio-content .portfolio-icon a {
  font-size: 88px;
  color: #fff;
  position: relative;
  z-index: 5;
  line-height: 90px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio-one .single-portfolio .portfolio-overlay .portfolio-content .portfolio-icon a {
    font-size: 70px;
    line-height: 70px;
  }
}

@media (max-width: 767px) {
  .portfolio-one .single-portfolio .portfolio-overlay .portfolio-content .portfolio-icon a {
    font-size: 70px;
    line-height: 70px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .portfolio-one .single-portfolio .portfolio-overlay .portfolio-content .portfolio-icon a {
    font-size: 60px;
    line-height: 60px;
  }
}

.portfolio-one .single-portfolio .portfolio-overlay .portfolio-content .portfolio-icon .shape {
  position: absolute;
  top: 17px;
  left: 0;
}

.portfolio-one .single-portfolio .portfolio-overlay .portfolio-content .portfolio-text {
  padding-top: 24px;
}

@media (max-width: 767px) {
  .portfolio-one .single-portfolio .portfolio-overlay .portfolio-content .portfolio-text {
    padding-top: 10px;
  }
}

.portfolio-one .single-portfolio .portfolio-overlay .portfolio-content .portfolio-text .portfolio-title a {
  color: #fff;
  font-size: 24px;
  line-height: 30px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio-one .single-portfolio .portfolio-overlay .portfolio-content .portfolio-text .portfolio-title a {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .portfolio-one .single-portfolio .portfolio-overlay .portfolio-content .portfolio-text .portfolio-title a {
    font-size: 20px;
  }
}

.portfolio-one .single-portfolio .portfolio-overlay .portfolio-content .portfolio-text .text {
  color: #fff;
  font-size: 14px;
  line-height: 20px;
  margin-top: 8px;
  opacity: 0.7;
}

.portfolio-one .single-portfolio:hover .portfolio-image img {
  -moz-filter: blur(8px);
  filter: blur(8px);
}

.portfolio-one .single-portfolio:hover .portfolio-overlay {
  opacity: 1;
  visibility: visible;
}

/*===== portfolio TWO =====*/
.portfolio-two .portfolio-menu-2 button {
  border: none;
  background: none;
  font-size: 16px;
  font-weight: 700;
  color: #6c6c6c;
  line-height: 48px;
  padding: 0 30px;
  position: relative;
  border-radius: 50px;
  overflow: hidden;
  display: inline-block;
  z-index: 5;
  transition: all 0.3s ease-out 0s;
  cursor: pointer;
  margin: 0 2px;
  text-transform: uppercase;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio-two .portfolio-menu-2 button {
    font-size: 14px;
    padding: 0 26px;
  }
}

@media (max-width: 767px) {
  .portfolio-two .portfolio-menu-2 button {
    font-size: 14px;
    padding: 0 22px;
    line-height: 42px;
  }
}

.portfolio-two .portfolio-menu-2 button::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  z-index: -1;
  opacity: 0;
  transition: all 0.3s ease-out 0s;
}

.portfolio-two .portfolio-menu-2 button:hover, .portfolio-two .portfolio-menu-2 button.active {
  color: #fff;
}

.portfolio-two .portfolio-menu-2 button:hover::before, .portfolio-two .portfolio-menu-2 button.active::before {
  opacity: 1;
}

.portfolio-two .single-portfolio {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.portfolio-two .single-portfolio .portfolio-image img {
  width: 100%;
  transition: all 0.3s ease-out 0s;
}

.portfolio-two .single-portfolio .portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease-out 0s;
  background-color: rgba(255, 255, 255, 0.8);
  transform: scale(0.95);
  border-radius: 8px;
}

.portfolio-two .single-portfolio .portfolio-overlay .portfolio-content {
  padding: 16px;
}

.portfolio-two .single-portfolio .portfolio-overlay .portfolio-content .portfolio-icon {
  position: relative;
  display: inline-block;
  margin: 0 20px;
}

.portfolio-two .single-portfolio .portfolio-overlay .portfolio-content .portfolio-icon a {
  font-size: 48px;
  color: #0067f4;
  position: relative;
  z-index: 5;
  line-height: 50px;
}

.portfolio-two .single-portfolio .portfolio-overlay .portfolio-content .portfolio-icon .shape {
  position: absolute;
  top: 7px;
  left: 0;
}

.portfolio-two .single-portfolio .portfolio-overlay .portfolio-content .portfolio-text {
  padding-top: 24px;
}

@media (max-width: 767px) {
  .portfolio-two .single-portfolio .portfolio-overlay .portfolio-content .portfolio-text {
    padding-top: 10px;
  }
}

.portfolio-two .single-portfolio .portfolio-overlay .portfolio-content .portfolio-text .portfolio-title a {
  color: #121212;
  font-size: 24px;
  line-height: 30px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio-two .single-portfolio .portfolio-overlay .portfolio-content .portfolio-text .portfolio-title a {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .portfolio-two .single-portfolio .portfolio-overlay .portfolio-content .portfolio-text .portfolio-title a {
    font-size: 20px;
  }
}

.portfolio-two .single-portfolio .portfolio-overlay .portfolio-content .portfolio-text .text {
  color: #121212;
  font-size: 14px;
  line-height: 20px;
  margin-top: 8px;
}

.portfolio-two .single-portfolio:hover .portfolio-overlay {
  opacity: 1;
  visibility: visible;
}

/*===== portfolio THREE =====*/
.portfolio-three .portfolio-menu-3 button {
  border: none;
  background: none;
  font-size: 16px;
  font-weight: 700;
  color: #6c6c6c;
  line-height: 48px;
  padding: 0 30px;
  position: relative;
  display: inline-block;
  z-index: 5;
  transition: all 0.3s ease-out 0s;
  cursor: pointer;
  margin: 0 2px;
  text-transform: uppercase;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio-three .portfolio-menu-3 button {
    font-size: 14px;
    padding: 0 26px;
  }
}

@media (max-width: 767px) {
  .portfolio-three .portfolio-menu-3 button {
    font-size: 14px;
    padding: 0 22px;
    line-height: 42px;
  }
}

.portfolio-three .portfolio-menu-3 button::before {
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  z-index: -1;
  opacity: 0;
  transition: all 0.3s ease-out 0s;
  border-radius: 4px;
}

.portfolio-three .portfolio-menu-3 button:hover, .portfolio-three .portfolio-menu-3 button.active {
  color: #0067f4;
}

.portfolio-three .portfolio-menu-3 button:hover::before, .portfolio-three .portfolio-menu-3 button.active::before {
  opacity: 1;
}

.portfolio-three .single-portfolio .portfolio-image {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.portfolio-three .single-portfolio .portfolio-image img {
  width: 100%;
  transition: all 0.3s ease-out 0s;
}

.portfolio-three .single-portfolio .portfolio-image .portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease-out 0s;
  background-color: rgba(255, 255, 255, 0.8);
  transform: scale(0.95);
  border-radius: 8px;
}

.portfolio-three .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content {
  padding: 16px;
}

.portfolio-three .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon {
  position: relative;
  display: inline-block;
  margin: 0 20px;
}

.portfolio-three .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon a {
  font-size: 48px;
  color: #0067f4;
  position: relative;
  z-index: 5;
  line-height: 50px;
}

.portfolio-three .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon .shape {
  position: absolute;
  top: 7px;
  left: 0;
}

.portfolio-three .single-portfolio .portfolio-text {
  padding-top: 16px;
}

.portfolio-three .single-portfolio .portfolio-text .portfolio-title a {
  color: #121212;
  font-size: 24px;
  line-height: 30px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .portfolio-three .single-portfolio .portfolio-text .portfolio-title a {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .portfolio-three .single-portfolio .portfolio-text .portfolio-title a {
    font-size: 20px;
  }
}

.portfolio-three .single-portfolio .portfolio-text .text {
  color: #121212;
  font-size: 14px;
  line-height: 20px;
  margin-top: 8px;
}

.portfolio-three .single-portfolio:hover .portfolio-overlay {
  opacity: 1;
  visibility: visible;
}

/*===== portfolio FOUR =====*/
.portfolio-four .portfolio-menu-4 button {
  background: none;
  border: none;
  font-size: 16px;
  font-weight: 700;
  color: #6c6c6c;
  line-height: 48px;
  padding: 0 30px;
  position: relative;
  z-index: 5;
  transition: all 0.3s ease-out 0s;
  cursor: pointer;
  width: 100%;
  border-radius: 50px;
  overflow: hidden;
  margin-top: 4px;
  text-transform: uppercase;
}

.portfolio-four .portfolio-menu-4 button:last-child {
  margin-right: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .portfolio-four .portfolio-menu-4 button {
    font-size: 14px;
    padding: 0 26px;
  }
}

@media (max-width: 767px) {
  .portfolio-four .portfolio-menu-4 button {
    font-size: 14px;
    padding: 0 22px;
    line-height: 42px;
  }
}

.portfolio-four .portfolio-menu-4 button::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  z-index: -1;
  opacity: 0;
  transition: all 0.3s ease-out 0s;
}

.portfolio-four .portfolio-menu-4 button:hover, .portfolio-four .portfolio-menu-4 button.active {
  color: #fff;
}

.portfolio-four .portfolio-menu-4 button:hover::before, .portfolio-four .portfolio-menu-4 button.active::before {
  opacity: 1;
}

.portfolio-four .single-portfolio .portfolio-image {
  position: relative;
  overflow: hidden;
}

.portfolio-four .single-portfolio .portfolio-image img {
  width: 100%;
  transition: all 0.3s ease-out 0s;
}

.portfolio-four .single-portfolio .portfolio-image .portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease-out 0s;
  background-color: rgba(255, 255, 255, 0.8);
  transform: scale(0.9);
  border-radius: 8px;
}

.portfolio-four .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content {
  padding: 16px;
}

.portfolio-four .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon {
  position: relative;
  display: inline-block;
  margin: 0 20px;
}

.portfolio-four .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon a {
  font-size: 48px;
  color: #0067f4;
  position: relative;
  z-index: 5;
  line-height: 50px;
}

.portfolio-four .single-portfolio .portfolio-image .portfolio-overlay .portfolio-content .portfolio-icon .shape {
  position: absolute;
  top: 7px;
  left: 0;
}

.portfolio-four .single-portfolio:hover .portfolio-overlay {
  opacity: 1;
  visibility: visible;
}

/*===== portfolio FIVE =====*/
.image-gallery-one .single-image-gallery {
  position: relative;
}

.image-gallery-one .single-image-gallery .image img {
  width: 100%;
}

    .image-gallery-one .single-image-gallery .gallery-icon {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: scale(0.9);
        background-color: rgba(255, 255, 255, 0.6);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease-out 0s;
        border-radius:5px;
    }

    .image-gallery-one .single-image-gallery .gallery-icon a {
        color: dimgray;
  
           /*   font-size: 140px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);*/
        text-align: center;
        display: flex ;
        justify-content: center ;
        align-items: center ;
        position: absolute ;
        top: 0 ;
        left: 0 ;
        width: 100% ;
        height: 100% ;
    }

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .image-gallery-one .single-image-gallery .gallery-icon a {
    font-size: 30px;
  }
}

@media (max-width: 767px) {
  .image-gallery-one .single-image-gallery .gallery-icon a {
    font-size: 30px;
  }
}

.image-gallery-one .single-image-gallery:hover .gallery-icon {
  opacity: 1;
  visibility: visible;
}

/*===========================
      19.CONTACT css 
===========================*/
.contact-area .section-title .title {
  font-size: 28px;
  font-weight: 600;
  line-height: 55px;
}

@media (max-width: 767px) {
  .contact-area .section-title .title {
    font-size: 24px;
    line-height: 35px;
  }
}

.contact-area .section-title-2 .title {
  font-size: 42px;
  font-weight: 600;
  line-height: 55px;
}

@media (max-width: 767px) {
  .contact-area .section-title-2 .title {
    font-size: 24px;
    line-height: 35px;
  }
}

.contact-form .single-form label {
  font-size: 12px;
  color: #a4a4a4;
  line-height: 18px;
  margin-left: 44px;
}

.contact-form .single-form .input-form {
  position: relative;
}

.contact-form .single-form .input-form i {
  font-size: 24px;
  position: absolute;
  top: 10px;
  left: 10px;
  color: #6c6c6c;
}

.contact-form .single-form .input-form textarea,
.contact-form .single-form .input-form input {
  width: 100%;
  height: 44px;
  padding-left: 45px;
  padding-right: 30px;
  color: #6c6c6c;
  font-size: 16px;
  border: 0;
  border-bottom: 1px solid #a4a4a4;
  font-weight: 500;
}

.contact-form .single-form .input-form textarea::placeholder,
.contact-form .single-form .input-form input::placeholder {
  opacity: 1;
  color: #6c6c6c;
}

.contact-form .single-form .input-form textarea::-moz-placeholder,
.contact-form .single-form .input-form input::-moz-placeholder {
  opacity: 1;
  color: #6c6c6c;
}

.contact-form .single-form .input-form textarea::-moz-placeholder,
.contact-form .single-form .input-form input::-moz-placeholder {
  opacity: 1;
  color: #6c6c6c;
}

.contact-form .single-form .input-form textarea::-webkit-input-placeholder,
.contact-form .single-form .input-form input::-webkit-input-placeholder {
  opacity: 1;
  color: #6c6c6c;
}

.contact-form .single-form .input-form textarea {
  padding-top: 10px;
}

.contact-form .single-form .input-form .main-btn {
  border: 0;
  border-radius: 50px;
}

.contact-info ul li .single-info {
  position: relative;
  margin-top: 19px;
}

.contact-info ul li .single-info .info-icon {
  position: absolute;
  top: 0;
  left: 0;
}

.contact-info ul li .single-info .info-icon i {
  color: #6c6c6c;
  font-size: 18px;
  line-height: 24px;
}

.contact-info ul li .single-info .info-content {
  padding-left: 30px;
}

.contact-info ul li .single-info .info-content .text {
  font-size: 16px;
  line-height: 24px;
  color: #6c6c6c;
  font-weight: 500;
}

.contact-info .social li {
  display: inline-block;
  margin-right: 12px;
}

.contact-info .social li a {
  font-size: 32px;
  color: #6c6c6c;
  transition: all 0.3s ease-out 0s;
}

.contact-info .social li a:hover {
  color: #0067f4;
}

/*===== CONTACT BOX STYLE =====*/
.contact-box {
  padding-top: 70px;
  padding-bottom: 120px;
  background-color: #f4f6f7;
}

.single-contact-box {
  background-color: #fff;
  border-radius: 8px;
  padding: 24px 35px;
  height: 255px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .single-contact-box {
    padding: 24px 30px;
  }
}

@media (max-width: 767px) {
  .single-contact-box {
    padding: 24px 20px;
  }
}

.single-contact-box .box-icon {
  position: relative;
  display: inline-block;
}

.single-contact-box .box-icon i {
  font-size: 88px;
  position: relative;
  z-index: 5;
  color: #0067f4;
}

.single-contact-box .box-icon .shape {
  position: absolute;
  top: 0;
  left: 0;
}

.single-contact-box .box-content {
  margin-top: 24px;
}

.single-contact-box .box-content .box-title {
  font-size: 28px;
  line-height: 35px;
  color: #121212;
}

.single-contact-box .box-content .text {
  font-size: 14px;
  line-height: 20px;
  color: #121212;
  margin-top: 16px;
}

/*===== CONTACT TWO STYLE =====*/
.contact-area-two {
  background-color: #f4f6f7;
}

.contact-two .contact-title {
  font-size: 20px;
  font-weight: 600;
  color: #121212;
}

.contact-two .text {
  font-size: 16px;
  line-height: 24px;
  margin-top: 8px;
  color: #6c6c6c;
}

.contact-two .contact-info {
  margin-top: 40px;
}

.contact-two .contact-info li {
  color: #6c6c6c;
  margin-top: 8px;
  font-size: 16px;
}

.contact-two .contact-info li i {
  margin-right: 5px;
  color: #121212;
}

/*===== CONTACT THREE STYLE =====*/
.contact-area-three {
  background-color: #f4f6f7;
}

.contact-area-three .contact-map .gmap_canvas iframe {
  width: 100%;
  height: 400px;
}

/*===== CONTACT FOUR STYLE =====*/
.contact-area-four {
  background-color: #f4f6f7;
  padding-top: 120px;
  padding-bottom: 120px;
}

.contact-map-four iframe {
  width: 100%;
  height: 550px;
}

@media (max-width: 767px) {
  .contact-map-four iframe {
    height: 350px;
  }
}

.contact-info-four .single-contact-info .contact-info-icon i {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 24px;
  color: #fff;
  border-radius: 50%;
}

.contact-info-four .single-contact-info .contact-info-content {
  padding-left: 20px;
}

.contact-info-four .single-contact-info .contact-info-content .text {
  color: #121212;
}

.contact-info-four .single-contact-info.contact-color-1 .contact-info-icon i {
  background-color: #121212;
}

.contact-info-four .single-contact-info.contact-color-2 .contact-info-icon i {
  background-color: #fc3832;
}

.contact-info-four .single-contact-info.contact-color-3 .contact-info-icon i {
  background-color: #005ad5;
}

.contact-wrapper-form .contact-title {
  font-size: 32px;
  font-weight: 700;
  color: #000;
}

@media (max-width: 767px) {
  .contact-wrapper-form .contact-title {
    font-size: 26px;
  }
}

.contact-wrapper-form .contact-title i {
  color: #121212;
  margin-right: 8px;
}

.contact-wrapper-form .contact-title span {
  font-weight: 400;
}

/*===========================
       20.BLOG css 
===========================*/
/*===== BLOG STYLE ONE =====*/
.blog-style-one .blog-image img {
  width: 100%;
  border-radius: 8px;
}

.blog-style-one .blog-content {
  padding-top: 16px;
}

.blog-style-one .blog-content .blog-title a {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-style-one .blog-content .blog-title a {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .blog-style-one .blog-content .blog-title a {
    font-size: 18px;
  }
}

.blog-style-one .blog-content .blog-title a:hover {
  color: #0067f4;
}

.blog-style-one .blog-content span {
  font-size: 14px;
  line-height: 20px;
  color: #6c6c6c;
  margin-top: 8px;
  margin-right: 10px;
}

.blog-style-one .blog-content .text {
  font-size: 14px;
  line-height: 20px;
  color: #121212;
  margin-top: 16px;
}

.blog-style-one .blog-content .more {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700;
  color: #0067f4;
  margin-top: 29px;
}

/*===== BLOG STYLE TWO =====*/
.blog-style-two .blog-image img {
  width: 100%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.blog-style-two .blog-content {
  border: 1px solid #cbced1;
  border-top: 0;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  padding: 16px 16px 28px;
}

.blog-style-two .blog-content .blog-title a {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-style-two .blog-content .blog-title a {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .blog-style-two .blog-content .blog-title a {
    font-size: 18px;
  }
}

.blog-style-two .blog-content .blog-title a:hover {
  color: #0067f4;
}

.blog-style-two .blog-content span {
  font-size: 14px;
  line-height: 20px;
  color: #6c6c6c;
  margin-top: 8px;
  margin-right: 10px;
}

.blog-style-two .blog-content .text {
  font-size: 14px;
  line-height: 20px;
  color: #121212;
  margin-top: 16px;
}

.blog-style-two .blog-content .more {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700;
  color: #0067f4;
  margin-top: 29px;
}

/*===== BLOG STYLE THREE =====*/
.blog-style-three .blog-image img {
  width: 100%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.blog-style-three .blog-content {
  border: 1px solid #cbced1;
  border-top: 0;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  padding: 16px 16px 28px;
}

.blog-style-three .blog-content .blog-title a {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-style-three .blog-content .blog-title a {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .blog-style-three .blog-content .blog-title a {
    font-size: 18px;
  }
}

.blog-style-three .blog-content .blog-title a:hover {
  color: #0067f4;
}

.blog-style-three .blog-content span {
  font-size: 14px;
  line-height: 20px;
  color: #6c6c6c;
  margin-top: 8px;
  margin-right: 10px;
}

.blog-style-three .blog-content .text {
  font-size: 14px;
  line-height: 20px;
  color: #121212;
  margin-top: 16px;
}

.blog-style-three .blog-content .more {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700;
  color: #0067f4;
  margin-top: 29px;
  padding: 0 39px;
  line-height: 48px;
  border-radius: 50px;
  border: 1px solid #0067f4;
  transition: all 0.3s ease-out 0s;
}

.blog-style-three .blog-content .more:hover {
  background-color: #0067f4;
  color: #fff;
}

/*===== BLOG STYLE FOUR =====*/
.blog-style-four .blog-image img {
  width: 100%;
  border-radius: 8px;
}

.blog-style-four .blog-content {
  padding-top: 16px;
}

.blog-style-four .blog-content .blog-title a {
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-style-four .blog-content .blog-title a {
    font-size: 22px;
  }
}

@media (max-width: 767px) {
  .blog-style-four .blog-content .blog-title a {
    font-size: 20px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .blog-style-four .blog-content .blog-title a {
    font-size: 22px;
  }
}

.blog-style-four .blog-content .blog-title a:hover {
  color: #0067f4;
}

.blog-style-four .blog-content span {
  font-size: 14px;
  line-height: 20px;
  color: #6c6c6c;
  margin-top: 8px;
  margin-right: 10px;
}

.blog-style-four .blog-content .text {
  font-size: 14px;
  line-height: 20px;
  color: #121212;
  margin-top: 16px;
}

.blog-style-four .blog-content .more {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700;
  color: #0067f4;
  margin-top: 29px;
  padding: 0 39px;
  line-height: 48px;
  border-radius: 50px;
  border: 1px solid #0067f4;
  transition: all 0.3s ease-out 0s;
}

.blog-style-four .blog-content .more:hover {
  background-color: #0067f4;
  color: #fff;
}

/*===== BLOG STYLE FIVE =====*/
.blog-style-five .blog-image {
  max-width: 240px;
  width: 100%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-style-five .blog-image {
    max-width: 200px;
  }
}

@media (max-width: 767px) {
  .blog-style-five .blog-image {
    max-width: 100%;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .blog-style-five .blog-image {
    max-width: 240px;
  }
}

.blog-style-five .blog-image img {
  width: 100%;
  border-radius: 8px;
}

.blog-style-five .blog-content {
  padding-left: 16px;
}

@media (max-width: 767px) {
  .blog-style-five .blog-content {
    padding-left: 0;
    padding-top: 16px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .blog-style-five .blog-content {
    padding-left: 16px;
    padding-top: 0;
  }
}

.blog-style-five .blog-content .blog-title a {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-style-five .blog-content .blog-title a {
    font-size: 18px;
  }
}

.blog-style-five .blog-content .blog-title a:hover {
  color: #0067f4;
}

.blog-style-five .blog-content span {
  font-size: 14px;
  line-height: 20px;
  color: #6c6c6c;
  margin-top: 8px;
  margin-right: 10px;
}

.blog-style-five .blog-content .text {
  font-size: 14px;
  line-height: 20px;
  color: #121212;
  margin-top: 16px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-style-five .blog-content .text {
    margin-top: 8px;
  }
}

.blog-style-five .blog-content .more {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700;
  color: #0067f4;
  margin-top: 29px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-style-five .blog-content .more {
    margin-top: 16px;
  }
}

/*===== BLOG STYLE SIX =====*/
.blog-style-six .blog-image {
  max-width: 240px;
  width: 100%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-style-six .blog-image {
    max-width: 200px;
  }
}

@media (max-width: 767px) {
  .blog-style-six .blog-image {
    max-width: 100%;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .blog-style-six .blog-image {
    max-width: 240px;
  }
}

.blog-style-six .blog-image img {
  width: 100%;
  border-radius: 8px;
}

.blog-style-six .blog-content {
  padding-left: 16px;
}

@media (max-width: 767px) {
  .blog-style-six .blog-content {
    padding-left: 0;
    padding-top: 16px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .blog-style-six .blog-content {
    padding-left: 16px;
    padding-top: 0;
  }
}

.blog-style-six .blog-content .blog-title a {
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-style-six .blog-content .blog-title a {
    font-size: 18px;
  }
}

.blog-style-six .blog-content .blog-title a:hover {
  color: #0067f4;
}

.blog-style-six .blog-content span {
  font-size: 14px;
  line-height: 20px;
  color: #6c6c6c;
  margin-top: 8px;
  margin-right: 10px;
}

.blog-style-six .blog-content .text {
  font-size: 14px;
  line-height: 20px;
  color: #121212;
  margin-top: 16px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-style-six .blog-content .text {
    margin-top: 8px;
  }
}

.blog-style-six .blog-content .more {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700;
  color: #0067f4;
  margin-top: 29px;
  padding: 0 39px;
  line-height: 48px;
  border-radius: 50px;
  border: 1px solid #0067f4;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-style-six .blog-content .more {
    margin-top: 16px;
  }
}

.blog-style-six .blog-content .more:hover {
  background-color: #0067f4;
  color: #fff;
}

/*===== BLOG STYLE SAVEN =====*/
.blog-style-seven .blog-image img {
  width: 100%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.blog-style-seven .blog-content {
  border: 1px solid #cbced1;
  border-top: 0;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  padding: 16px 16px 28px;
}

.blog-style-seven .blog-content .blog-title a {
  font-size: 24px;
  font-weight: 500;
  line-height: 30px;
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-style-seven .blog-content .blog-title a {
    font-size: 22px;
  }
}

@media (max-width: 767px) {
  .blog-style-seven .blog-content .blog-title a {
    font-size: 20px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .blog-style-seven .blog-content .blog-title a {
    font-size: 22px;
  }
}

.blog-style-seven .blog-content .blog-title a:hover {
  color: #0067f4;
}

.blog-style-seven .blog-content .text {
  font-size: 14px;
  line-height: 20px;
  color: #121212;
  margin-top: 16px;
}

.blog-style-seven .blog-content span {
  font-size: 14px;
  line-height: 20px;
  color: #6c6c6c;
  margin-right: 10px;
}

.blog-style-seven .blog-content .more {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700;
  color: #0067f4;
  padding: 0 39px;
  line-height: 48px;
  border-radius: 50px;
  border: 1px solid #0067f4;
  transition: all 0.3s ease-out 0s;
}

.blog-style-seven .blog-content .more:hover {
  background-color: #0067f4;
  color: #fff;
}

/*===== BLOG STYLE EIGHT =====*/
.blog-style-eight .blog-image img {
  width: 100%;
  border-radius: 8px;
}

.blog-style-eight .blog-content {
  padding-top: 16px;
}

.blog-style-eight .blog-content .blog-title a {
  font-size: 36px;
  font-weight: 600;
  line-height: 45px;
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-style-eight .blog-content .blog-title a {
    font-size: 30px;
    line-height: 40px;
  }
}

@media (max-width: 767px) {
  .blog-style-eight .blog-content .blog-title a {
    font-size: 24px;
    line-height: 35px;
  }
}

.blog-style-eight .blog-content .blog-title a:hover {
  color: #0067f4;
}

.blog-style-eight .blog-content span {
  font-size: 14px;
  line-height: 20px;
  color: #6c6c6c;
  margin-top: 8px;
  margin-right: 10px;
}

.blog-style-eight .blog-content .text {
  font-size: 14px;
  line-height: 20px;
  color: #121212;
  margin-top: 16px;
}

.blog-style-eight .blog-content .more {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700;
  color: #0067f4;
  margin-top: 29px;
  padding: 0 39px;
  line-height: 48px;
  border-radius: 50px;
  border: 1px solid #0067f4;
  transition: all 0.3s ease-out 0s;
}

.blog-style-eight .blog-content .more:hover {
  background-color: #0067f4;
  color: #fff;
}

/*===== BLOG STYLE NINE =====*/
.blog-author-one .blog-image img {
  width: 100%;
  border-radius: 50%;
}

.blog-author-one .blog-content {
  padding-top: 20px;
}

.blog-author-one .blog-content .sub-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-transform: uppercase;
}

.blog-author-one .blog-content .blog-title a {
  font-size: 36px;
  font-weight: 300;
  line-height: 45px;
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

@media (max-width: 767px) {
  .blog-author-one .blog-content .blog-title a {
    font-size: 24px;
    line-height: 35px;
  }
}

.blog-author-one .blog-content .blog-title a:hover {
  color: #0067f4;
}

.blog-author-one .blog-content .text {
  font-size: 14px;
  line-height: 20px;
  color: #121212;
  margin-top: 16px;
}

.blog-author-one .blog-content .more {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700;
  color: #0067f4;
  margin-top: 29px;
}

/*===== BLOG STYLE TEN =====*/
.blog-author-two .blog-image img {
  width: 100%;
  border-radius: 8px;
}

.blog-author-two .blog-content {
  padding-top: 20px;
}

.blog-author-two .blog-content .sub-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  text-transform: uppercase;
}

.blog-author-two .blog-content .blog-title a {
  font-size: 36px;
  font-weight: 300;
  line-height: 45px;
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

@media (max-width: 767px) {
  .blog-author-two .blog-content .blog-title a {
    font-size: 24px;
    line-height: 35px;
  }
}

.blog-author-two .blog-content .blog-title a:hover {
  color: #0067f4;
}

.blog-author-two .blog-content .text {
  font-size: 14px;
  line-height: 20px;
  color: #121212;
  margin-top: 16px;
}

.blog-author-two .blog-content .more {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700;
  color: #0067f4;
  margin-top: 29px;
}

/*===== BLOG STYLE ELEVEN =====*/
.blog-style-nine .blog-image img {
  width: 100%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.blog-style-nine .blog-content {
  border: 1px solid #cbced1;
  border-top: 0;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  padding: 16px 16px 28px;
}

.blog-style-nine .blog-content .blog-title a {
  font-size: 36px;
  font-weight: 600;
  line-height: 45px;
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .blog-style-nine .blog-content .blog-title a {
    font-size: 30px;
    line-height: 40px;
  }
}

@media (max-width: 767px) {
  .blog-style-nine .blog-content .blog-title a {
    font-size: 24px;
    line-height: 35px;
  }
}

.blog-style-nine .blog-content .blog-title a:hover {
  color: #0067f4;
}

.blog-style-nine .blog-content .text {
  font-size: 14px;
  line-height: 20px;
  color: #121212;
  margin-top: 16px;
}

.blog-style-nine .blog-content span {
  font-size: 14px;
  line-height: 20px;
  color: #6c6c6c;
  margin-right: 10px;
}

.blog-style-nine .blog-content .more {
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700;
  color: #0067f4;
  padding: 0 39px;
  line-height: 48px;
  border-radius: 50px;
  border: 1px solid #0067f4;
  transition: all 0.3s ease-out 0s;
}

.blog-style-nine .blog-content .more:hover {
  background-color: #0067f4;
  color: #fff;
}

/*===== BLOG MINI STYLE =====*/
.single-mini-blog .blog-image {
  max-width: 80px;
  width: 100%;
  height: 80px;
  border-radius: 4px;
}

.single-mini-blog .blog-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.single-mini-blog .blog-content {
  padding-left: 12px;
}

.single-mini-blog .blog-content .blog-tille a {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .single-mini-blog .blog-content .blog-tille a {
    font-size: 14px;
    line-height: 20px;
  }
}

@media (max-width: 767px) {
  .single-mini-blog .blog-content .blog-tille a {
    font-size: 14px;
    line-height: 20px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .single-mini-blog .blog-content .blog-tille a {
    font-size: 16px;
    line-height: 24px;
  }
}

.single-mini-blog .blog-content .blog-tille a:hover {
  color: #0067f4;
}

.single-mini-blog .blog-content span {
  font-size: 13px;
  line-height: 18px;
  color: #6c6c6c;
  margin-top: 8px;
  margin-right: 8px;
}

.single-mini-blog.mini-style-two .blog-image img {
  border-radius: 50%;
}

/*===========================
    21.FOOTER css 
===========================*/
/*===== FOOTER ONE =====*/
.footer-one {
  background-color: #f4f6f7;
}

.footer-one .footer-widget {
  padding-top: 90px;
  padding-bottom: 120px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer-one .footer-widget {
    padding-top: 70px;
    padding-bottom: 100px;
  }
}

@media (max-width: 767px) {
  .footer-one .footer-widget {
    padding-top: 50px;
    padding-bottom: 80px;
  }
}

.footer-one .footer-widget .footer-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  color: #6c6c6c;
}

.footer-one .footer-widget .footer-support {
  padding-top: 21px;
}

.footer-one .footer-widget .footer-support span {
  font-size: 16px;
  line-height: 24px;
  color: #121212;
  font-weight: 600;
  margin-top: 9px;
  display: block;
}

@media (max-width: 767px) {
  .footer-one .footer-widget .footer-support span {
    display: block;
  }
}

.footer-one .footer-widget .footer-app-store {
  padding-top: 27px;
}

.footer-one .footer-widget .footer-app-store ul li {
  display: inline-block;
  margin-right: 8px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer-one .footer-widget .footer-app-store ul li {
    margin-right: 6px;
  }
}

.footer-one .footer-widget .footer-app-store ul li:last-child {
  margin-right: 0;
}

@media (max-width: 767px) {
  .footer-one .footer-widget .footer-app-store ul li {
    width: 120px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .footer-one .footer-widget .footer-app-store ul li {
    width: auto;
  }
}

.footer-one .footer-widget .footer-link {
  margin-top: 32px;
}

.footer-one .footer-widget .footer-link ul {
  margin-top: 8px;
}

.footer-one .footer-widget .footer-link ul li a {
  font-size: 16px;
  line-height: 24px;
  color: #121212;
  margin-top: 16px;
  font-weight: 500;
  transition: all 0.3s ease-out 0s;
}

.footer-one .footer-widget .footer-link ul li a:hover {
  color: #0067f4;
}

.footer-one .footer-copyright .copyright {
  padding-bottom: 23px;
  padding-top: 13px;
}

.footer-one .footer-copyright .copyright .text {
  color: #6c6c6c;
  margin-top: 10px;
}

.footer-one .footer-copyright .copyright .social {
  margin-top: 10px;
}

.footer-one .footer-copyright .copyright .social li {
  display: inline-block;
  margin-right: 10px;
}

.footer-one .footer-copyright .copyright .social li:last-child {
  margin-right: 0;
}

.footer-one .footer-copyright .copyright .social li a {
  font-size: 24px;
  color: #6c6c6c;
  transition: all 0.3s ease-out 0s;
}

.footer-one .footer-copyright .copyright .social li a:hover {
  color: #0067f4;
}

.footer-one.footer-dark-one {
  background-color: #121212;
}

.footer-one.footer-dark-one .footer-widget .footer-title {
  color: #fff;
}

.footer-one.footer-dark-one .footer-widget .footer-support span {
  color: #fff;
}

.footer-one.footer-dark-one .footer-widget .footer-app-store ul li {
  color: #fff;
}

.footer-one.footer-dark-one .footer-widget .footer-link ul li a {
  color: #fff;
}

.footer-one.footer-dark-one .footer-copyright .copyright .text {
  color: #fff;
}

.footer-one.footer-dark-one .footer-copyright .copyright .social li a {
  color: #fff;
}

/*===== FOOTER TWO =====*/
.footer-two {
  background-color: #f4f6f7;
}

.footer-two .footer-widget {
  padding-top: 90px;
  padding-bottom: 120px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer-two .footer-widget {
    padding-top: 70px;
    padding-bottom: 100px;
  }
}

@media (max-width: 767px) {
  .footer-two .footer-widget {
    padding-top: 50px;
    padding-bottom: 80px;
  }
}

.footer-two .footer-widget .footer-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  color: #6c6c6c;
}

.footer-two .footer-widget .footer-support {
  padding-top: 21px;
}

.footer-two .footer-widget .footer-support span {
  font-size: 16px;
  line-height: 24px;
  color: #121212;
  font-weight: 600;
  margin-top: 9px;
  display: block;
}

@media (max-width: 767px) {
  .footer-two .footer-widget .footer-support span {
    display: block;
  }
}

.footer-two .footer-widget .social {
  padding-top: 27px;
}

.footer-two .footer-widget .social li {
  display: inline-block;
  margin-right: 10px;
}

.footer-two .footer-widget .social li:last-child {
  margin-right: 0;
}

.footer-two .footer-widget .social li a {
  font-size: 24px;
  color: #6c6c6c;
  transition: all 0.3s ease-out 0s;
}

.footer-two .footer-widget .social li a:hover {
  color: #0067f4;
}

.footer-two .footer-widget .footer-link {
  margin-top: 32px;
}

.footer-two .footer-widget .footer-link ul {
  margin-top: 8px;
}

.footer-two .footer-widget .footer-link ul li a {
  font-size: 16px;
  line-height: 24px;
  color: #121212;
  margin-top: 16px;
  font-weight: 500;
  transition: all 0.3s ease-out 0s;
}

.footer-two .footer-widget .footer-link ul li a:hover {
  color: #0067f4;
}

.footer-two .footer-copyright .copyright {
  padding-bottom: 23px;
  padding-top: 13px;
}

.footer-two .footer-copyright .copyright .text {
  color: #6c6c6c;
  margin-top: 10px;
}

.footer-two.footer-dark-two {
  background-color: #121212;
}

.footer-two.footer-dark-two .footer-widget .footer-title {
  color: #fff;
}

.footer-two.footer-dark-two .footer-widget .footer-support span {
  color: #fff;
}

.footer-two.footer-dark-two .footer-widget .social li a {
  color: #fff;
}

.footer-two.footer-dark-two .footer-widget .footer-link ul li a {
  color: #fff;
}

.footer-two.footer-dark-two .footer-copyright .copyright .text {
  color: #fff;
}

/*===== FOOTER THREE =====*/
.footer-three {
  background-color: #f4f6f7;
}

.footer-three .footer-widget {
  padding-top: 90px;
  padding-bottom: 120px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer-three .footer-widget {
    padding-top: 70px;
    padding-bottom: 100px;
  }
}

@media (max-width: 767px) {
  .footer-three .footer-widget {
    padding-top: 50px;
    padding-bottom: 80px;
  }
}

.footer-three .footer-widget .footer-logo-support .footer-logo .social {
  margin-left: 35px;
}

.footer-three .footer-widget .footer-logo-support .footer-logo .social li {
  display: inline-block;
  margin-right: 10px;
}

.footer-three .footer-widget .footer-logo-support .footer-logo .social li a {
  font-size: 24px;
  color: #6c6c6c;
  transition: all 0.3s ease-out 0s;
}

.footer-three .footer-widget .footer-logo-support .footer-logo .social li a:hover {
  color: #0067f4;
}

.footer-three .footer-widget .footer-logo-support .footer-support span {
  font-size: 20px;
  line-height: 25px;
  color: #6c6c6c;
  font-weight: 600;
}

@media (max-width: 767px) {
  .footer-three .footer-widget .footer-logo-support .footer-support span {
    display: block;
  }
}

.footer-three .footer-widget .footer-logo-support .footer-support span.mail {
  margin-left: 32px;
}

@media (max-width: 767px) {
  .footer-three .footer-widget .footer-logo-support .footer-support span.mail {
    margin-left: 0;
  }
}

.footer-three .footer-widget .footer-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  color: #6c6c6c;
}

.footer-three .footer-widget .footer-link {
  margin-top: 32px;
}

.footer-three .footer-widget .footer-link ul {
  margin-top: 8px;
}

.footer-three .footer-widget .footer-link ul li a {
  font-size: 16px;
  line-height: 24px;
  color: #121212;
  margin-top: 16px;
  font-weight: 500;
  transition: all 0.3s ease-out 0s;
}

.footer-three .footer-widget .footer-link ul li a:hover {
  color: #0067f4;
}

.footer-three .footer-widget .footer-newsletter {
  margin-top: 32px;
}

.footer-three .footer-widget .footer-newsletter .newsletter {
  margin-top: 24px;
  position: relative;
}

.footer-three .footer-widget .footer-newsletter .newsletter input {
  width: 100%;
  height: 44px;
  border-radius: 50px;
  padding: 0 24px;
  border: 0;
  background-color: rgba(33, 33, 33, 0.12);
  font-weight: 500;
}

.footer-three .footer-widget .footer-newsletter .newsletter input::placeholder {
  opacity: 1;
  color: #6c6c6c;
}

.footer-three .footer-widget .footer-newsletter .newsletter input::-moz-placeholder {
  opacity: 1;
  color: #6c6c6c;
}

.footer-three .footer-widget .footer-newsletter .newsletter input::-moz-placeholder {
  opacity: 1;
  color: #6c6c6c;
}

.footer-three .footer-widget .footer-newsletter .newsletter input::-webkit-input-placeholder {
  opacity: 1;
  color: #6c6c6c;
}

.footer-three .footer-widget .footer-newsletter .newsletter button {
  position: absolute;
  top: 0;
  right: 0;
  height: 44px;
  width: 44px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  border: 0;
  font-size: 20px;
  color: #121212;
  cursor: pointer;
  background: none;
}

.footer-three .footer-widget .footer-newsletter .text {
  margin-top: 16px;
}

.footer-three .footer-copyright .copyright {
  padding: 23px 0;
}

.footer-three .footer-copyright .copyright .text {
  color: #121212;
}

.footer-three.footer-bark-three {
  background-color: #121212;
}

.footer-three.footer-bark-three .footer-widget .footer-logo-support .footer-logo .social li a {
  color: #fff;
}

.footer-three.footer-bark-three .footer-widget .footer-logo-support .footer-support span.number {
  color: #fff;
}

.footer-three.footer-bark-three .footer-widget .footer-logo-support .footer-support span.mail {
  color: #fff;
}

.footer-three.footer-bark-three .footer-widget .footer-title {
  color: #fff;
}

.footer-three.footer-bark-three .footer-widget .footer-link ul li a {
  color: #fff;
}

.footer-three.footer-bark-three .footer-widget .footer-newsletter .newsletter input {
  color: #fff;
  background-color: rgba(233, 236, 239, 0.12);
}

.footer-three.footer-bark-three .footer-widget .footer-newsletter .newsletter input::placeholder {
  opacity: 1;
  color: #fff;
}

.footer-three.footer-bark-three .footer-widget .footer-newsletter .newsletter input::-moz-placeholder {
  opacity: 1;
  color: #fff;
}

.footer-three.footer-bark-three .footer-widget .footer-newsletter .newsletter input::-moz-placeholder {
  opacity: 1;
  color: #fff;
}

.footer-three.footer-bark-three .footer-widget .footer-newsletter .newsletter input::-webkit-input-placeholder {
  opacity: 1;
  color: #fff;
}

.footer-three.footer-bark-three .footer-widget .footer-newsletter .newsletter button {
  color: #fff;
}

.footer-three.footer-bark-three .footer-widget .footer-newsletter .text {
  color: #fff;
}

.footer-three.footer-bark-three .footer-copyright .copyright {
  padding: 23px 0;
}

.footer-three.footer-bark-three .footer-copyright .copyright .text {
  color: #fff;
}

/*===== FOOTER FOUR =====*/
.footer-four {
  background-color: #f4f6f7;
}

.footer-four .footer-widget {
  padding-top: 90px;
  padding-bottom: 120px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .footer-four .footer-widget {
    padding-top: 70px;
    padding-bottom: 100px;
  }
}

@media (max-width: 767px) {
  .footer-four .footer-widget {
    padding-top: 50px;
    padding-bottom: 80px;
  }
}

.footer-four .footer-widget .footer-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
  color: #6c6c6c;
}

.footer-four .footer-widget .footer-link {
  margin-top: 32px;
}

.footer-four .footer-widget .footer-link ul {
  margin-top: 8px;
}

.footer-four .footer-widget .footer-link ul li a {
  font-size: 16px;
  line-height: 24px;
  color: #121212;
  margin-top: 16px;
  font-weight: 500;
  transition: all 0.3s ease-out 0s;
}

.footer-four .footer-widget .footer-link ul li a:hover {
  color: #0067f4;
}

.footer-four .footer-copyright {
  padding-top: 13px;
  padding-bottom: 23px;
}

.footer-four .footer-copyright .copyright .text {
  color: #121212;
}

.footer-four .footer-copyright .social li {
  display: inline-block;
  margin-right: 10px;
}

.footer-four .footer-copyright .social li:last-child {
  margin-right: 0;
}

.footer-four .footer-copyright .social li a {
  font-size: 24px;
  color: #6c6c6c;
  transition: all 0.3s ease-out 0s;
}

.footer-four .footer-copyright .social li a:hover {
  color: #0067f4;
}

.footer-four.footer-bark-four {
  background-color: #121212;
}

.footer-four.footer-bark-four .footer-widget .footer-title {
  color: #fff;
}

.footer-four.footer-bark-four .footer-widget .footer-link ul li a {
  color: #fff;
}

.footer-four.footer-bark-four .footer-copyright .copyright .text {
  color: #fff;
}

.footer-four.footer-bark-four .footer-copyright .social li a {
  color: #fff;
}

/*===== FOOTER FIVE =====*/
.footer-five {
  background-color: #f4f6f7;
  padding-top: 90px;
  padding-bottom: 120px;
}

.footer-five .social li {
  display: inline-block;
  margin: 0 5px;
}

.footer-five .social li a {
  font-size: 24px;
  color: #6c6c6c;
  transition: all 0.3s ease-out 0s;
}

.footer-five .social li a:hover {
  color: #0067f4;
}

.footer-five .footer-support {
  padding-top: 21px;
}

.footer-five .footer-support span {
  font-size: 16px;
  line-height: 24px;
  color: #121212;
  font-weight: 600;
  margin-top: 9px;
  display: block;
}

@media (max-width: 767px) {
  .footer-five .footer-support span {
    display: block;
  }
}

.footer-five .footer-app-store {
  padding-top: 27px;
}

.footer-five .footer-app-store ul li {
  display: inline-block;
  margin-right: 8px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .footer-five .footer-app-store ul li {
    margin-right: 6px;
  }
}

.footer-five .footer-app-store ul li:last-child {
  margin-right: 0;
}

@media (max-width: 767px) {
  .footer-five .footer-app-store ul li {
    width: 120px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .footer-five .footer-app-store ul li {
    width: auto;
  }
}

.footer-five .copyright .text {
  color: #121212;
}

.footer-five.footer-bark-five {
  background-color: #121212;
}

.footer-five.footer-bark-five .social li a {
  color: #fff;
}

.footer-five.footer-bark-five .footer-support {
  padding-top: 21px;
}

.footer-five.footer-bark-five .footer-support span {
  color: #fff;
}

.footer-five.footer-bark-five .footer-app-store {
  padding-top: 27px;
}

.footer-five.footer-bark-five .footer-app-store ul li {
  color: #fff;
}

.footer-five.footer-bark-five .copyright .text {
  color: #fff;
}

/*===========================
       22.HEADER css 
===========================*/
/*===== HEADER ONE =====*/
.header-one {
  position: relative;
}

.header-one .navbar-transparent {
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9;
}

.header-one .navbar-area .navbar .navbar-nav .nav-item .sub-menu {
  background-color: #fff;
}

.header-one .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a {
  color: #0067f4;
}

.header-one .navbar-area .navbar .navbar-nav .nav-item .sub-menu li:hover > a {
  color: #fff;
}

.header-one .header-content-area {
  background-color: #005ad5;
  position: relative;
  height: 650px;
}

@media only screen and (min-width: 1400px) {
  .header-one .header-content-area {
    height: 900px;
  }
}

@media (max-width: 767px) {
  .header-one .header-content-area {
    height: 550px;
  }
}

.header-one .header-content-area .header-wrapper {
  position: relative;
}

.header-one .header-content-area .header-wrapper .header-content {
  padding-top: 95px;
  max-width: 540px;
  position: relative;
  z-index: 5;
}

.header-one .header-content-area .header-wrapper .header-content .header-title {
  font-size: 44px;
  line-height: 55px;
  font-weight: 600;
  color: #fff;
}

@media (max-width: 767px) {
  .header-one .header-content-area .header-wrapper .header-content .header-title {
    font-size: 30px;
    line-height: 35px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header-one .header-content-area .header-wrapper .header-content .header-title {
    font-size: 36px;
    line-height: 45px;
  }
}

.header-one .header-content-area .header-wrapper .header-content .text {
  font-size: 20px;
  line-height: 32px;
  color: #fff;
  font-weight: 300;
  margin-top: 16px;
}

@media (max-width: 767px) {
  .header-one .header-content-area .header-wrapper .header-content .text {
    font-size: 16px;
    line-height: 24px;
  }
}

.header-one .header-content-area .header-wrapper .header-content .header-btn {
  margin-top: 40px;
}

.header-one .header-content-area .header-wrapper .header-content .header-btn .main-btn {
  background-color: #fff;
  color: #0067f4;
  border-color: #fff;
}

.header-one .header-content-area .header-wrapper .header-content .header-btn .main-btn:hover {
  background-color: transparent;
  color: #fff;
}

.header-one .header-content-area .header-wrapper .header-image {
  position: absolute;
  right: 0;
  top: 50px;
  z-index: 9;
}

.header-one .header-content-area .header-wrapper .header-image .image {
  max-width: 730px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .header-one .header-content-area .header-wrapper .header-image .image {
    max-width: 600px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-one .header-content-area .header-wrapper .header-image .image {
    max-width: 550px;
  }
}

.header-one .header-content-area .header-wrapper .header-image .image img {
  width: 100%;
}

.header-one .header-content-area .header-shape {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  width: 100%;
}

.header-one .header-content-area .header-shape img {
  width: 100%;
}

/*===== HEADER TWO =====*/
.header-two {
  position: relative;
}

.header-two .navbar-area {
  padding: 10px 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9;
  background-color: transparent;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-two .navbar-area {
    padding: 10px 0;
  }
}

@media (max-width: 767px) {
  .header-two .navbar-area {
    padding: 10px 0;
  }
}

.header-two .navbar-area .navbar {
  position: relative;
  padding: 0;
}

.header-two .navbar-area .navbar .navbar-toggler .toggler-icon {
  width: 30px;
  height: 2px;
  background-color: #121212;
  margin: 5px 0;
  display: block;
  position: relative;
  transition: all 0.3s ease-out 0s;
}

.header-two .navbar-area .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) {
  transform: rotate(45deg);
  top: 7px;
}

.header-two .navbar-area .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) {
  opacity: 0;
}

.header-two .navbar-area .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) {
  transform: rotate(135deg);
  top: -7px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-two .navbar-area .navbar .navbar-collapse {
    position: absolute;
    top: 116%;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 8;
    padding: 10px 16px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16);
  }
}

@media (max-width: 767px) {
  .header-two .navbar-area .navbar .navbar-collapse {
    position: absolute;
    top: 116%;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 8;
    padding: 10px 16px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16);
  }
}

.header-two .navbar-area .navbar .navbar-nav {
  margin-right: 24px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-two .navbar-area .navbar .navbar-nav {
    margin-right: 0;
  }
}

@media (max-width: 767px) {
  .header-two .navbar-area .navbar .navbar-nav {
    margin-right: 0;
  }
}

.header-two .navbar-area .navbar .navbar-nav .nav-item {
  position: relative;
}

.header-two .navbar-area .navbar .navbar-nav .nav-item a {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  padding: 11px 16px;
  color: #121212;
  text-transform: uppercase;
  position: relative;
  border-radius: 5px;
  transition: all 0.3s ease-out 0s;
  margin: 14px 0;
  opacity: 0.7;
}

.header-two .navbar-area .navbar .navbar-nav .nav-item a::before {
  position: absolute;
  content: '';
  width: 32px;
  height: 4px;
  background: #0067f4;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  left: 50%;
  margin: 0 2px;
  bottom: 0;
  transition: all 0.3s ease-out 0s;
  transform: translateX(-50%) scaleX(0);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-two .navbar-area .navbar .navbar-nav .nav-item a::before {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-two .navbar-area .navbar .navbar-nav .nav-item a::before {
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-two .navbar-area .navbar .navbar-nav .nav-item a {
    padding: 10px 0;
    display: block;
    border: 0;
    margin: 0;
  }
}

@media (max-width: 767px) {
  .header-two .navbar-area .navbar .navbar-nav .nav-item a {
    padding: 10px 0;
    display: block;
    border: 0;
    margin: 0;
  }
}

.header-two .navbar-area .navbar .navbar-nav .nav-item a.active {
  opacity: 1;
}

.header-two .navbar-area .navbar .navbar-nav .nav-item a.active::before {
  transform: translateX(-50%) scaleX(1);
}

.header-two .navbar-area .navbar .navbar-nav .nav-item:hover > a {
  opacity: 1;
}

.header-two .navbar-area .navbar .navbar-nav .nav-item:hover > a::before {
  transform: translateX(-50%) scaleX(1);
}

.header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu {
  position: absolute;
  left: 0;
  top: 100%;
  width: 260px;
  background-color: #fff;
  border-radius: 5px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
  z-index: 99;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.16);
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    top: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    right: auto;
    transform: translateX(0%);
    transition: all none ease-out 0s;
    box-shadow: none;
    text-align: left;
    border-top: 0;
    height: 0;
  }
}

.header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
  height: auto;
  display: block;
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu.collapse:not(.show) {
    height: 0;
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu.show {
    height: auto;
  }
}

.header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li {
  position: relative;
}

.header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li .sub-nav-toggler {
  color: #121212;
  transition: all 0.3s ease-out 0s;
}

.header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a {
  display: block;
  padding: 8px 24px;
  position: relative;
  color: #121212;
  transition: all 0.3s ease-out 0s;
  border-radius: 0;
  margin: 0 0;
  border: 0;
  z-index: 5;
}

.header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a i {
  float: right;
  font-size: 14px;
  margin-top: 5px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a i {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a i {
    display: none;
  }
}

.header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a .sub-nav-toggler i {
  display: inline-block;
}

.header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  opacity: 0;
  transition: all 0.3s ease-out 0s;
  z-index: -1;
}

.header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li a::before {
  display: none;
}

.header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
  right: auto;
  left: 100%;
  top: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
    padding-left: 30px;
  }
}

@media (max-width: 767px) {
  .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li .sub-menu {
    padding-left: 30px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li .sub-menu.show {
    visibility: visible;
    height: auto;
    position: relative;
  }
}

.header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}

.header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li:hover .sub-nav-toggler {
  color: #fff;
}

.header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li:hover > a {
  color: #fff;
}

.header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li:hover > a::after {
  opacity: 1;
}

.header-two .navbar-area .navbar .navbar-nav .nav-item .sub-menu li:hover > a::before {
  opacity: 1;
}

.header-two .navbar-area .navbar .navbar-nav .nav-item:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}

.header-two .navbar-area .navbar .navbar-nav .nav-item .sub-nav-toggler {
  display: none;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-nav-toggler {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 14px;
    font-size: 16px;
    background: none;
    border: 0;
    color: #121212;
  }
}

@media (max-width: 767px) {
  .header-two .navbar-area .navbar .navbar-nav .nav-item .sub-nav-toggler {
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 14px;
    font-size: 16px;
    background: none;
    border: 0;
    color: #121212;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-two .navbar-area .navbar .navbar-social {
    position: absolute;
    right: 70px;
    top: 7px;
  }
}

@media (max-width: 767px) {
  .header-two .navbar-area .navbar .navbar-social {
    position: absolute;
    right: 60px;
    top: 7px;
  }
}

.header-two .navbar-area .navbar .navbar-social span {
  font-size: 16px;
  line-height: 24px;
  color: #6c6c6c;
  text-transform: uppercase;
  font-weight: 700;
  margin-right: 14px;
  white-space: nowrap;
}

.header-two .navbar-area .navbar .navbar-social ul {
  display: flex;
}

.header-two .navbar-area .navbar .navbar-social ul li {
  display: inline-block;
  margin-right: 5px;
}

.header-two .navbar-area .navbar .navbar-social ul li a {
  font-size: 32px;
  color: #0067f4;
  transition: all 0.3s ease-out 0s;
}

.header-two .header-content-area {
  height: 700px;
  background: linear-gradient(#0067f4 0%, #2bdbdc 100%);
  position: relative;
  z-index: 1;
}

@media only screen and (min-width: 1400px) {
  .header-two .header-content-area {
    height: 900px;
  }
}

@media (max-width: 767px) {
  .header-two .header-content-area {
    height: 550px;
  }
}

.header-two .header-content-area::before {
  position: absolute;
  z-index: -1;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 80%;
  background-color: #fff;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 300px;
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.16);
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-two .header-content-area::before {
    height: 90%;
  }
}

@media (max-width: 767px) {
  .header-two .header-content-area::before {
    height: 90%;
    border-bottom-right-radius: 150px;
  }
}

.header-two .header-content-area .header-content {
  padding-top: 95px;
}

.header-two .header-content-area .header-content .header-title {
  font-size: 44px;
  line-height: 55px;
  color: #121212;
}

@media (max-width: 767px) {
  .header-two .header-content-area .header-content .header-title {
    font-size: 30px;
    line-height: 35px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header-two .header-content-area .header-content .header-title {
    font-size: 36px;
    line-height: 45px;
  }
}

.header-two .header-content-area .header-content .text {
  font-size: 20px;
  line-height: 25px;
  color: #6c6c6c;
  font-weight: 300;
  margin-top: 16px;
}

@media (max-width: 767px) {
  .header-two .header-content-area .header-content .text {
    font-size: 16px;
  }
}

.header-two .header-content-area .header-content .header-btn {
  margin-top: 40px;
}

.header-two .header-content-area .header-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
}

.header-two .header-content-area .header-image .image {
  max-width: 760px;
  margin-left: auto;
  padding-top: 130px;
}

.header-two .header-content-area .header-image .image img {
  width: 100%;
}

/*===== HEADER THREE =====*/
.header-three {
  position: relative;
}

.header-three .navbar-transparent {
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9;
}

.header-three .header-content-area {
  background: linear-gradient(#495aff 0%, #0acffe 100%);
}

.header-three .header-content-area .header-content {
  padding-top: 220px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-three .header-content-area .header-content {
    padding-top: 150px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-three .header-content-area .header-content {
    padding-top: 150px;
  }
}

@media (max-width: 767px) {
  .header-three .header-content-area .header-content {
    padding-top: 120px;
  }
}

.header-three .header-content-area .header-content .header-title {
  font-size: 44px;
  line-height: 55px;
  color: #fff;
  font-weight: 600;
}

@media (max-width: 767px) {
  .header-three .header-content-area .header-content .header-title {
    font-size: 30px;
    line-height: 35px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header-three .header-content-area .header-content .header-title {
    font-size: 36px;
    line-height: 45px;
  }
}

.header-three .header-content-area .header-content .text {
  font-size: 16px;
  line-height: 24px;
  color: #fff;
  margin-top: 8px;
}

.header-three .header-content-area .header-content .header-btn {
  margin-top: 40px;
}

.header-three .header-content-area .header-image {
  padding-top: 80px;
}

@media (max-width: 767px) {
  .header-three .header-content-area .header-image {
    padding-top: 30px;
  }
}

.header-three .header-content-area .header-image img {
  width: 100%;
}

@media (max-width: 767px) {
  .header-three .header-content-area .header-image img {
    height: 160px;
    object-fit: cover;
    object-position: center;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header-three .header-content-area .header-image img {
    height: 200px;
  }
}

/*===== HEADER FOUR =====*/
.header-four {
  position: relative;
}

.header-four .navbar-transparent {
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9;
}

.header-four .header-content-area {
  background: linear-gradient(#deebfd 0%, rgba(255, 255, 255, 0) 100%);
}

.header-four .header-content-area .header-content {
  padding-top: 220px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-four .header-content-area .header-content {
    padding-top: 150px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-four .header-content-area .header-content {
    padding-top: 150px;
  }
}

@media (max-width: 767px) {
  .header-four .header-content-area .header-content {
    padding-top: 120px;
  }
}

.header-four .header-content-area .header-content .header-title {
  font-size: 44px;
  line-height: 55px;
  color: #121212;
  font-weight: 600;
}

@media (max-width: 767px) {
  .header-four .header-content-area .header-content .header-title {
    font-size: 30px;
    line-height: 35px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header-four .header-content-area .header-content .header-title {
    font-size: 36px;
    line-height: 45px;
  }
}

.header-four .header-content-area .header-content .text {
  font-size: 16px;
  line-height: 24px;
  color: #6c6c6c;
  margin-top: 8px;
}

.header-four .header-content-area .header-content .header-newslatter {
  max-width: 410px;
  position: relative;
  margin: 0 auto;
  margin-top: 40px;
}

.header-four .header-content-area .header-content .header-newslatter i {
  position: absolute;
  top: 12px;
  left: 20px;
  font-size: 24px;
  color: #0067f4;
}

.header-four .header-content-area .header-content .header-newslatter input {
  width: 100%;
  height: 48px;
  padding-left: 60px;
  padding-right: 30px;
  border-radius: 50px;
  border: 2px solid #cbced1;
  font-size: 16px;
  font-weight: 600;
  color: #6c6c6c;
}

.header-four .header-content-area .header-content .header-newslatter input:focus {
  border-color: #0067f4;
}

.header-four .header-content-area .header-content .header-newslatter .header-btn {
  position: absolute;
  top: 0;
  right: 0;
}

.header-four .header-content-area .header-content .header-newslatter .header-btn .main-btn {
  border: 0;
  line-height: 48px;
  border-radius: 50px;
}

@media (max-width: 767px) {
  .header-four .header-content-area .header-image {
    padding-top: 30px;
  }
}

.header-four .header-content-area .header-image img {
  width: 100%;
}

@media (max-width: 767px) {
  .header-four .header-content-area .header-image img {
    height: 160px;
    object-fit: cover;
    object-position: center;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header-four .header-content-area .header-image img {
    height: 200px;
  }
}

/*===== HEADER FIVE =====*/
.header-five {
  position: relative;
}

.header-five .navgition {
  padding: 10px 0;
  transition: all 0.3s ease-out 0s;
}

.header-five .navgition.navgition-transparent {
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}

.header-five .navgition .navbar {
  position: relative;
  padding: 0;
}

.header-five .navgition .navbar .navbar-toggler .toggler-icon {
  width: 30px;
  height: 2px;
  background-color: #121212;
  margin: 5px 0;
  display: block;
  position: relative;
  transition: all 0.3s ease-out 0s;
}

.header-five .navgition .navbar .navbar-toggler.active .toggler-icon:nth-of-type(1) {
  transform: rotate(45deg);
  top: 7px;
}

.header-five .navgition .navbar .navbar-toggler.active .toggler-icon:nth-of-type(2) {
  opacity: 0;
}

.header-five .navgition .navbar .navbar-toggler.active .toggler-icon:nth-of-type(3) {
  transform: rotate(135deg);
  top: -7px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-five .navgition .navbar .navbar-collapse {
    position: absolute;
    top: 116%;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 8;
    padding: 10px 0;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
  }
}

@media (max-width: 767px) {
  .header-five .navgition .navbar .navbar-collapse {
    position: absolute;
    top: 116%;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 8;
    padding: 10px 0;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16);
  }
}

.header-five .navgition .navbar .navbar-nav .nav-item {
  margin: 0 16px;
  position: relative;
}

.header-five .navgition .navbar .navbar-nav .nav-item a {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  padding: 26px 0;
  color: #121212;
  text-transform: uppercase;
  position: relative;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-five .navgition .navbar .navbar-nav .nav-item a {
    padding: 10px 0;
    display: block;
  }
}

@media (max-width: 767px) {
  .header-five .navgition .navbar .navbar-nav .nav-item a {
    padding: 10px 0;
    display: block;
  }
}

.header-five .navgition .navbar .navbar-nav .nav-item a::before, .header-five .navgition .navbar .navbar-nav .nav-item a::after {
  position: absolute;
  content: '';
  width: 8px;
  height: 4px;
  background-color: #0067f4;
  left: 50%;
  margin: 0 2px;
  bottom: 14px;
  opacity: 0;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-five .navgition .navbar .navbar-nav .nav-item a::before, .header-five .navgition .navbar .navbar-nav .nav-item a::after {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-five .navgition .navbar .navbar-nav .nav-item a::before, .header-five .navgition .navbar .navbar-nav .nav-item a::after {
    display: none;
  }
}

.header-five .navgition .navbar .navbar-nav .nav-item a::after {
  left: auto;
  right: 50%;
}

.header-five .navgition .navbar .navbar-nav .nav-item.active > a, .header-five .navgition .navbar .navbar-nav .nav-item:hover > a {
  color: #0067f4;
}

.header-five .navgition .navbar .navbar-nav .nav-item.active > a::before, .header-five .navgition .navbar .navbar-nav .nav-item.active > a::after, .header-five .navgition .navbar .navbar-nav .nav-item:hover > a::before, .header-five .navgition .navbar .navbar-nav .nav-item:hover > a::after {
  opacity: 1;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-five .navgition .navbar .navbar-social {
    position: absolute;
    right: 70px;
    top: 7px;
  }
}

@media (max-width: 767px) {
  .header-five .navgition .navbar .navbar-social {
    position: absolute;
    right: 60px;
    top: 7px;
  }
}

.header-five .navgition .navbar .navbar-social span {
  font-size: 16px;
  font-weight: 700;
  color: #6c6c6c;
  line-height: 24px;
  margin-right: 14px;
  white-space: nowrap;
}

.header-five .navgition .navbar .navbar-social ul {
  display: flex;
}

.header-five .navgition .navbar .navbar-social ul li {
  display: inline-block;
  margin-right: 5px;
}

.header-five .navgition .navbar .navbar-social ul li a {
  font-size: 32px;
  text-transform: uppercase;
  font-weight: 700;
  color: #0067f4;
  border-radius: 4px;
  transition: all 0.3s ease-out 0s;
}

.header-five .header-hero {
  height: 850px;
  position: relative;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-five .header-hero {
    height: 700px;
  }
}

@media (max-width: 767px) {
  .header-five .header-hero {
    height: 650px;
  }
}

.header-five .header-hero::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(232, 237, 255, 0.9), rgba(239, 254, 255, 0.9) 50%, rgba(254, 255, 244, 0.3) 68%, rgba(255, 255, 255, 0.12));
}

.header-five .header-hero .header-content {
  padding-top: 195px;
  position: relative;
  z-index: 9;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-five .header-hero .header-content {
    padding-top: 130px;
  }
}

@media (max-width: 767px) {
  .header-five .header-hero .header-content {
    padding-top: 120px;
  }
}

.header-five .header-hero .header-content .header-title {
  font-size: 44px;
  line-height: 55px;
  color: #121212;
  font-weight: 600;
}

@media (max-width: 767px) {
  .header-five .header-hero .header-content .header-title {
    font-size: 30px;
    line-height: 40px;
  }
}

.header-five .header-hero .header-content .text {
  font-size: 20px;
  line-height: 32px;
  color: #6c6c6c;
  margin-top: 16px;
}

@media (max-width: 767px) {
  .header-five .header-hero .header-content .text {
    font-size: 16px;
    line-height: 24px;
  }
}

.header-five .header-hero .header-content .header-btn {
  margin-top: 22px;
}

.header-five .header-hero .header-content .header-btn li {
  display: inline-block;
  margin: 10px 10px 0;
}

.header-five .header-hero .header-content .header-btn li a.main-btn {
  border-radius: 50px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  border: 0;
  line-height: 50px;
}

.header-five .header-hero .header-content .header-btn li a.main-btn i {
  margin-left: 18px;
}

.header-five .header-hero .header-content .header-btn li a.main-btn.btn-two:hover {
  box-shadow: 0 3px 25px 0 rgba(0, 0, 0, 0.16);
}

.header-five .header-hero .header-shape {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.header-five .header-hero .header-shape img {
  width: 100%;
}

/*===== HEADER SIX =====*/
.header-six .header-content-area .header-image img {
  width: 100%;
}

.header-six .header-content-area .header-content {
  position: relative;
  z-index: 9;
  margin-top: -50px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-six .header-content-area .header-content {
    margin-top: 0;
  }
}

@media (max-width: 767px) {
  .header-six .header-content-area .header-content {
    margin-top: 0;
  }
}

.header-six .header-content-area .header-content .header-title {
  font-size: 64px;
  line-height: 80px;
  color: #121212;
  font-weight: 700;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-six .header-content-area .header-content .header-title {
    font-size: 52px;
    line-height: 70px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-six .header-content-area .header-content .header-title {
    font-size: 52px;
    line-height: 70px;
  }
}

@media (max-width: 767px) {
  .header-six .header-content-area .header-content .header-title {
    font-size: 30px;
    line-height: 40px;
  }
}

.header-six .header-content-area .header-content .header-btn {
  margin-top: 22px;
}

.header-six .header-content-area .header-content .header-btn li {
  display: inline-block;
  margin-top: 10px;
  margin-right: 10px;
}

.header-six .header-content-area .header-content .header-btn li:last-child {
  margin-right: 0;
}

.header-six .header-content-area .header-content .header-btn li a.main-btn {
  border-radius: 50px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  border: 0;
  line-height: 50px;
}

.header-six .header-content-area .header-content .header-btn li a.main-btn i {
  margin-left: 18px;
}

.header-six .header-content-area .header-content .header-btn li a.main-btn.btn-two:hover {
  box-shadow: 0 3px 25px 0 rgba(0, 0, 0, 0.16);
}

/*===== HEADER SAVEN =====*/
.header-saven .header-content-area {
  background-color: #f4f6f7;
}

.header-saven .header-content-area .header-content {
  position: relative;
  padding-top: 180px;
  padding-bottom: 180px;
}

@media (max-width: 767px) {
  .header-saven .header-content-area .header-content {
    padding-top: 130px;
    padding-bottom: 130px;
  }
}

.header-saven .header-content-area .header-content .header-image {
  position: absolute;
}

.header-saven .header-content-area .header-content .header-image.image-one {
  width: 348px;
  left: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-saven .header-content-area .header-content .header-image.image-one {
    width: 300px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-saven .header-content-area .header-content .header-image.image-one {
    width: 120px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.header-saven .header-content-area .header-content .header-image.image-two {
  width: 280px;
  left: 50%;
  transform: translateX(-50%);
  top: 58px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-saven .header-content-area .header-content .header-image.image-two {
    width: 220px;
    top: 84px;
  }
}

@media (max-width: 767px) {
  .header-saven .header-content-area .header-content .header-image.image-two {
    width: 180px;
    top: 52px;
  }
}

.header-saven .header-content-area .header-content .header-image.image-three {
  width: 332px;
  right: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header-saven .header-content-area .header-content .header-image.image-three {
    width: 290px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header-saven .header-content-area .header-content .header-image.image-three {
    width: 120px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.header-saven .header-content-area .header-content .header-content-wrapper {
  max-width: 730px;
  margin: 0 auto;
  border: 1px solid #cbced1;
  border-radius: 16px;
  background-color: #fff;
  padding: 85px 140px;
}

@media (max-width: 767px) {
  .header-saven .header-content-area .header-content .header-content-wrapper {
    padding: 50px 30px;
  }
}

.header-saven .header-content-area .header-content .header-content-wrapper .header-title {
  font-size: 44px;
  line-height: 55px;
  color: #121212;
}

@media (max-width: 767px) {
  .header-saven .header-content-area .header-content .header-content-wrapper .header-title {
    font-size: 30px;
    line-height: 35px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .header-saven .header-content-area .header-content .header-content-wrapper .header-title {
    font-size: 36px;
    line-height: 45px;
  }
}

.header-saven .header-content-area .header-content .header-content-wrapper .text {
  font-size: 16px;
  line-height: 24px;
  color: #6c6c6c;
  margin-top: 8px;
}

.header-saven .header-content-area .header-content .header-content-wrapper .header-btn {
  margin-top: 40px;
}

/*===========================
        23.ERROR css 
===========================*/
/*===== ERROR ONE Style =====*/
.error-content {
  padding-top: 120px;
  padding-bottom: 120px;
}

.error-content .erro-404 {
  font-size: 98px;
  font-weight: 600;
  color: #121212;
  line-height: 90px;
}

.error-content .sub-title {
  font-size: 24px;
  font-weight: 500;
  color: #121212;
  margin-top: 16px;
}

.error-content .text {
  font-size: 16px;
  line-height: 24px;
  color: #6c6c6c;
  margin-top: 8px;
}

.error-content .error-form {
  max-width: 410px;
  position: relative;
  margin: 0 auto;
  margin-top: 40px;
  position: relative;
}

.error-content .error-form i {
  position: absolute;
  top: 12px;
  left: 20px;
  font-size: 24px;
  color: #0067f4;
}

.error-content .error-form input {
  width: 100%;
  height: 48px;
  padding-left: 60px;
  padding-right: 30px;
  border-radius: 50px;
  border: 2px solid #cbced1;
  font-size: 16px;
  font-weight: 600;
  color: #6c6c6c;
}

.error-content .error-form input:focus {
  border-color: #0067f4;
}

.error-content .error-form .error-btn {
  position: absolute;
  top: 0;
  right: 0;
}

@media (max-width: 767px) {
  .error-content .error-form .error-btn {
    position: relative;
    width: 100%;
    margin-top: 8px;
  }
}

.error-content .error-form .error-btn .main-btn {
  border: 0;
  line-height: 48px;
  border-radius: 50px;
}

@media (max-width: 767px) {
  .error-content .error-form .error-btn .main-btn {
    width: 100%;
  }
}

/*===== ERROR TWO Style =====*/
.error-two {
  height: 750px;
  background-color: #e9ecef;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .error-two {
    height: 550px;
  }
}

@media (max-width: 767px) {
  .error-two {
    height: 450px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .error-content img {
    width: 450px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .error-content img {
    width: 350px;
  }
}

.error-content .text {
  font-size: 16px;
  text-transform: uppercase;
  margin-top: 55px;
  color: #a4a4a4;
}

.error-content .text span {
  color: #0067f4;
}

/*===========================
      24.CHECKOUT css 
===========================*/
.checkout-area .section-title .title {
  font-size: 44px;
  font-weight: 500;
  color: #121212;
  line-height: 55px;
}

@media (max-width: 767px) {
  .checkout-area .section-title .title {
    font-size: 30px;
    line-height: 35px;
  }
}

.checkout-title .title {
  font-size: 20px;
  font-weight: 500;
  color: #121212;
}

.single-checkout-form label {
  font-size: 14px;
  color: #121212;
  margin-bottom: 8px !important;
}

.single-checkout-form .input-items select {
  width: 100%;
  height: 44px;
  border: 2px solid;
  border-color: #a4a4a4;
  color: #6c6c6c;
  border-radius: 5px;
}

.checkout-checkbox {
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 1px solid #cbced1;
}

.checkout-checkbox .checkbox_common li label {
  color: #121212;
  font-size: 14px;
  cursor: pointer;
  font-weight: 400;
  margin-bottom: 0;
}

.checkout-checkbox .checkbox_common li input[type="checkbox"] {
  display: none;
}

.checkout-checkbox .checkbox_common li input[type="checkbox"] + label span {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: -1px 8px 0 0;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 5px;
  position: relative;
  transition: all 0.3s ease-out 0s;
  background-color: #cbced1;
}

.checkout-checkbox .checkbox_common li input[type="checkbox"] + label span::before {
  color: #fff;
  content: "";
  font-size: 11px;
  position: absolute;
  text-align: center;
  left: 3px;
  top: -4px;
  transform: scale(0);
  transition: all 0.3s ease-out 0s;
}

.checkout-checkbox .checkbox_common li input[type="checkbox"]:checked + label span {
  background-color: #0067f4;
  transition: all 0.3s ease-out 0s;
}

.checkout-checkbox .checkbox_common li input[type="checkbox"]:checked + label span::before {
  transform: scale(1);
}

.checkout-payment {
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 1px solid #cbced1;
}

.checkout-radio .pay-top label {
  color: #121212;
  font-size: 14px;
  margin-bottom: 0;
  cursor: pointer;
  font-weight: 400;
}

.checkout-radio .pay-top input[type="radio"] {
  display: none;
}

.checkout-radio .pay-top input[type="radio"] + label span {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: -1px 8px 0 0;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 50%;
  position: relative;
  border-radius: 50%;
  transition: all 0.3s ease-out 0s;
  background-color: #cbced1;
}

.checkout-radio .pay-top input[type="radio"] + label span::before {
  background-color: #0067f4;
  border-radius: 100%;
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  transform: scale(0);
  transition: all 0.3s ease-out 0s;
}

.checkout-radio .pay-top input[type="radio"]:checked + label span {
  transition: all 0.3s ease-out 0s;
}

.checkout-radio .pay-top input[type="radio"]:checked + label span::before {
  transform: scale(1);
}

.checkout-radio .payment-box {
  height: 0;
  padding-bottom: 10px;
  overflow: hidden;
  transition: all 300ms ease-out;
}

.checkout-radio #radio1:checked ~ .payment-box-1,
.checkout-radio #radio2:checked ~ .payment-box-2,
.checkout-radio #radio3:checked ~ .payment-box-3 {
  height: auto;
}

.sin-payment {
  transition: all 0.3s ease-out 0s;
}

.checkout-btn {
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 1px solid #cbced1;
}

.checkout-btn .main-btn {
  width: 100%;
  border-radius: 5px;
}

.checkout-cart .checkout-cart-product {
  border: 2px solid #cbced1;
  border-radius: 5px;
}

.checkout-cart .checkout-cart-product ul li {
  border-bottom: 2px solid #cbced1;
}

.checkout-cart .checkout-cart-product ul li:last-child {
  border-bottom: 0;
}

.checkout-cart .checkout-cart-product ul li .single-product {
  padding: 12px 20px;
}

.checkout-cart .checkout-cart-product ul li .single-product .product-name .product {
  font-size: 20px;
  color: #121212;
  line-height: 24px;
  font-weight: 500;
}

.checkout-cart .checkout-cart-product ul li .single-product .product-name p {
  font-size: 16px;
  line-height: 24px;
  color: #a4a4a4;
}

.checkout-cart .checkout-cart-product ul li .single-product .product-price span {
  font-size: 18px;
  color: #a4a4a4;
  font-weight: 500;
}

.checkout-cart .checkout-cart-product ul li .single-product.promo .product-name .product {
  color: #4da422;
}

.checkout-cart .checkout-cart-product ul li .single-product.promo .product-name p {
  color: #4da422;
}

.checkout-cart .checkout-cart-product ul li .single-product.promo .product-price span {
  color: #4da422;
}

.checkout-promo-code {
  border: 2px solid #cbced1;
  border-radius: 5px;
  padding: 8px;
}

.checkout-promo-code .promo-code {
  position: relative;
}

.checkout-promo-code .promo-code input {
  width: 100%;
}

.checkout-promo-code .promo-code .main-btn {
  position: absolute;
  top: 0;
  right: 0;
  height: 44px;
  line-height: 42px;
  border-radius: 5px;
  padding: 0 16px;
}

/*===========================
    25.SING IN SING UP css 
===========================*/
.signin-area {
  padding-top: 100px;
  padding-bottom: 100px;
  background-color: #f4f6f7;
}

/*===== SING IN ONE =====*/
.signin-one .form-input .main-btn,
.signin-two .form-input .main-btn {
  width: 100%;
}

.signin-one .form-input .text,
.signin-two .form-input .text {
  font-size: 16px;
  line-height: 24px;
  color: #a4a4a4;
}

.signin-one .form-input .text a,
.signin-two .form-input .text a {
  color: #0067f4;
}

.signin-content .signin-title {
  font-size: 24px;
  line-height: 30px;
  color: #121212;
}

.signin-content .text {
  font-size: 16px;
  line-height: 24px;
  color: #a4a4a4;
  margin-top: 8px;
}

.signin-checkbox label {
  color: #121212;
  font-size: 14px;
  cursor: pointer;
  font-weight: 400;
  margin-bottom: 0;
}

.signin-checkbox input[type="checkbox"] {
  display: none;
}

.signin-checkbox input[type="checkbox"] + label {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: -1px 8px 0 0;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 5px;
  position: relative;
  transition: all 0.3s ease-out 0s;
  background-color: #cbced1;
}

.signin-checkbox input[type="checkbox"] + label::before {
  color: #fff;
  content: "";
  font-size: 13px;
  position: absolute;
  text-align: center;
  left: 2px;
  top: -2px;
  transform: scale(0);
  transition: all 0.3s ease-out 0s;
}

.signin-checkbox input[type="checkbox"]:checked + label {
  background-color: #0067f4;
  transition: all 0.3s ease-out 0s;
}

.signin-checkbox input[type="checkbox"]:checked + label::before {
  transform: scale(1);
}

.signin-checkbox span a {
  color: #0067f4;
}

/*===== SING IN THREE =====*/
.signin-three {
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  background-color: #f4f6f7;
  border-radius: 8px;
  overflow: hidden;
}

.signin-three .signin-header {
  background-color: #fff;
  padding: 70px 30px;
}

@media (max-width: 767px) {
  .signin-three .signin-header {
    padding: 50px 15px;
  }
}

.signin-three .signin-header p {
  font-size: 16px;
  line-height: 24px;
  color: #a4a4a4;
}

.signin-three .signin-header .social-signin li {
  display: inline-block;
  margin: 16px 8px 0;
}

.signin-three .signin-header .social-signin li a {
  font-size: 16px;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 48px;
  padding: 0 32px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  border-radius: 5px;
  color: #0067f4;
  background-color: #fff;
  transition: all 0.3s ease-out 0s;
}

.signin-three .signin-header .social-signin li a i {
  padding-right: 8px;
}

.signin-three .signin-header .social-signin li a:hover {
  color: #fff;
  background-color: #0067f4;
}

.signin-three .signin-form {
  padding: 70px 30px;
  background-color: #f4f6f7;
}

@media (max-width: 767px) {
  .signin-three .signin-form {
    padding: 50px 15px;
  }
}

.signin-three .signin-form .text {
  font-size: 16px;
  line-height: 24px;
  color: #a4a4a4;
}

.signin-three .signin-form .password {
  font-size: 16px;
  line-height: 24px;
  color: #a4a4a4;
  font-style: italic;
  margin-top: 24px;
}

.signin-three .signin-form .password span {
  color: #4da422;
  font-weight: 700;
}

/*===== SING IN FOUR =====*/
.signin-area-four {
  position: relative;
}

.signin-area-four .sing-in-image {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .signin-area-four .sing-in-image {
    position: relative;
    width: 720px;
    margin: 0 auto;
    padding-top: 50px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (max-width: 767px) {
  .signin-area-four .sing-in-image {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-top: 50px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .signin-area-four .sing-in-image {
    width: 540px;
  }
}

.signin-area-four .sing-in-image .image {
  padding-left: 70px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .signin-area-four .sing-in-image .image {
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  .signin-area-four .sing-in-image .image {
    padding-left: 0;
  }
}

.signin-area-four .sing-in-title {
  font-size: 32px;
  font-weight: 600;
  color: #000;
}

.signin-area-four .sing-in-title i {
  color: #0067f4;
  margin-right: 8px;
}

.signin-area-four .sing-in-title span {
  font-weight: 400;
}

.signin-area-four .text {
  font-size: 16px;
  margin-top: 25px;
}

.signin-area-four .form-checkbox span {
  font-size: 18px;
  color: #a4a4a4;
}

.signin-area-four .form-checkbox input[type="checkbox"] {
  display: none;
}

.signin-area-four .form-checkbox input[type="checkbox"] + label {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: -1px 15px 0 0;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 3px;
  border: 1px solid #121212;
  position: relative;
  transition: all 0.3s ease-out 0s;
}

.signin-area-four .form-checkbox input[type="checkbox"] + label::before {
  color: #fff;
  content: "";
  font-size: 16px;
  position: absolute;
  text-align: center;
  left: 2px;
  top: -4px;
  transform: scale(0);
  transition: all 0.3s ease-out 0s;
}

.signin-area-four .form-checkbox input[type="checkbox"]:checked + label {
  background: #0067f4;
  border-color: #0067f4;
}

.signin-area-four .form-checkbox input[type="checkbox"]:checked + label::before {
  transform: scale(1);
}

.signin-area-four .form-forget a {
  font-size: 18px;
  color: #0067f4;
}

.signin-area-four .main-btn {
  width: 100%;
}

.signin-area-four .new-user {
  margin-top: 15px;
}

.signin-area-four .new-user .text {
  font-size: 18px;
  color: #121212;
}

.signin-area-four .new-user .text a {
  color: #a4a4a4;
}

/*===== SING IN FIVE =====*/
.signin-area-five {
  position: relative;
}

.signin-area-five .sing-in-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .signin-area-five .sing-in-image {
    position: relative;
    width: 720px;
    margin: 0 auto;
    padding-top: 50px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media (max-width: 767px) {
  .signin-area-five .sing-in-image {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding-top: 50px;
    padding-left: 15px;
    padding-right: 15px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .signin-area-five .sing-in-image {
    width: 540px;
  }
}

.signin-area-five .sing-in-image .image {
  padding-left: 70px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .signin-area-five .sing-in-image .image {
    padding-left: 0;
  }
}

@media (max-width: 767px) {
  .signin-area-five .sing-in-image .image {
    padding-left: 0;
  }
}

.signin-area-five .sing-in-title {
  font-size: 32px;
  font-weight: 600;
  color: #000;
}

.signin-area-five .sing-in-title i {
  color: #0067f4;
  margin-right: 8px;
}

.signin-area-five .sing-in-title span {
  font-weight: 400;
}

.signin-area-five .text {
  font-size: 16px;
  margin-top: 25px;
}

.signin-area-five .facebook-sing-up a {
  width: 100%;
  height: 65px;
  line-height: 65px;
  text-align: center;
  border-radius: 7px;
  background-color: #164aa9;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}

.signin-area-five .gooogle-sing-up a {
  width: 100%;
  height: 65px;
  line-height: 65px;
  text-align: center;
  border-radius: 7px;
  background-color: #df3527;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
}

.signin-area-five .form-checkbox span {
  font-size: 18px;
  color: #a4a4a4;
}

.signin-area-five .form-checkbox input[type="checkbox"] {
  display: none;
}

.signin-area-five .form-checkbox input[type="checkbox"] + label {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: -1px 15px 0 0;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 3px;
  border: 1px solid #121212;
  position: relative;
  transition: all 0.3s ease-out 0s;
}

.signin-area-five .form-checkbox input[type="checkbox"] + label::before {
  color: #fff;
  content: "";
  font-size: 16px;
  position: absolute;
  text-align: center;
  left: 2px;
  top: -4px;
  transform: scale(0);
  transition: all 0.3s ease-out 0s;
}

.signin-area-five .form-checkbox input[type="checkbox"]:checked + label {
  background: #0067f4;
  border-color: #0067f4;
}

.signin-area-five .form-checkbox input[type="checkbox"]:checked + label::before {
  transform: scale(1);
}

.signin-area-five .main-btn {
  width: 100%;
}

.signin-area-five .new-user {
  margin-top: 15px;
}

.signin-area-five .new-user .text {
  font-size: 18px;
  color: #121212;
}

.signin-area-five .new-user .text a {
  color: #a4a4a4;
}

/*===========================
      26.TESTIMONIAL css 
===========================*/
/*===== TESTIMONIAL STYLE ONE =====*/
.testimonial-one {
  padding-top: 100px;
  padding-bottom: 100px;
  background-color: #f4f6f7;
}

.testimonial-one .section-title .title {
  font-size: 42px;
  font-weight: 600;
  line-height: 55px;
}

@media (max-width: 767px) {
  .testimonial-one .section-title .title {
    font-size: 24px;
    line-height: 35px;
  }
}

.testimonial-one .testimonial-one-wrapper {
  position: relative;
}

.testimonial-one .testimonial-one-wrapper .tns-nav {
  position: absolute;
  z-index: 2;
  bottom: -40px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.testimonial-one .testimonial-one-wrapper .tns-nav button {
  font-size: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #cbced1;
  border: 0;
  margin: 0 3px;
}

.testimonial-one .testimonial-one-wrapper .tns-nav button.tns-nav-active {
  background-color: #0067f4;
}

@media only screen and (min-width: 1400px) {
  .testimonial-one .single-testimonial {
    padding: 0 15px;
  }
}

.testimonial-one .single-testimonial .testimonial-image img {
  width: 120px;
  border-radius: 50%;
  display: inline-block;
}

.testimonial-one .single-testimonial .testimonial-content {
  padding-top: 30px;
}

.testimonial-one .single-testimonial .testimonial-content .text {
  font-size: 14px;
  line-height: 24px;
  color: #121212;
}

.testimonial-one .single-testimonial .testimonial-content .author-name {
  font-size: 18px;
  font-weight: 600;
  color: #121212;
  margin-top: 24px;
}

.testimonial-one .single-testimonial .testimonial-content .sub-title {
  font-size: 14px;
  line-height: 24px;
  color: #a4a4a4;
}

/*===== TESTIMONIAL STYLE TWO =====*/
.testimonial-two {
  padding-top: 100px;
  padding-bottom: 100px;
  background-color: #f4f6f7;
}

.testimonial-two .single-testimonial {
  border: 1px solid #cbced1;
  padding: 25px 30px;
  border-radius: 8px;
  background-color: #fff;
}

.testimonial-two .single-testimonial .testimonial-author .author-image img {
  width: 80px;
  border-radius: 50%;
}

.testimonial-two .single-testimonial .testimonial-author .author-name {
  padding-left: 20px;
}

.testimonial-two .single-testimonial .testimonial-author .author-name .name {
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: #121212;
}

.testimonial-two .single-testimonial .testimonial-author .author-name .sub-title {
  font-size: 14px;
  line-height: 24px;
  color: #a4a4a4;
}

.testimonial-two .single-testimonial .testimonial-text {
  margin-top: 25px;
}

.testimonial-two .single-testimonial .testimonial-text .text {
  font-size: 14px;
  line-height: 24px;
  color: #121212;
}

.testimonial-two .testimonial-two-wrapper {
  position: relative;
}

.testimonial-two .testimonial-two-wrapper .tns-nav {
  position: absolute;
  z-index: 2;
  bottom: -40px;
  left: -10px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.testimonial-two .testimonial-two-wrapper .tns-nav button {
  font-size: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #cbced1;
  border: 0;
  margin: 0 3px;
}

.testimonial-two .testimonial-two-wrapper .tns-nav button.tns-nav-active {
  background-color: #0067f4;
}

/*===== TESTIMONIAL STYLE THREE =====*/
.testimonial-three {
  padding-top: 100px;
  padding-bottom: 70px;
  background-color: #f4f6f7;
}

.testimonial-three .single-testimonial {
  background-color: #fff;
  padding: 30px;
  box-shadow: 0 0px 20px 0 rgba(0, 0, 0, 0.1);
}

.testimonial-three .single-testimonial .testimonial-image img {
  width: 90px;
  border-radius: 50%;
  display: inline-block;
}

.testimonial-three .single-testimonial .testimonial-content {
  padding-top: 25px;
}

.testimonial-three .single-testimonial .testimonial-content .text {
  font-size: 16px;
  line-height: 24px;
  color: #121212;
  border-bottom: 1px solid #cbced1;
  padding-bottom: 24px;
}

.testimonial-three .single-testimonial .testimonial-content .author-name {
  font-size: 18px;
  font-weight: 600;
  color: #121212;
  margin-top: 24px;
}

.testimonial-three .single-testimonial .testimonial-content .sub-title {
  font-size: 14px;
  line-height: 24px;
  color: #a4a4a4;
}

.testimonial-three .testimonial-three-wrapper {
  position: relative;
}

.testimonial-three .testimonial-three-wrapper .tns-nav {
  position: absolute;
  z-index: 2;
  bottom: -40px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.testimonial-three .testimonial-three-wrapper .tns-nav button {
  font-size: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #cbced1;
  border: 0;
  margin: 0 3px;
}

.testimonial-three .testimonial-three-wrapper .tns-nav button.tns-nav-active {
  background-color: #0067f4;
}

/*===== TESTIMONIAL STYLE THREE =====*/
.testimonial-four {
  padding-top: 100px;
  padding-bottom: 100px;
}

.testimonial-four .testimonial-left-content .sub-title {
  font-size: 18px;
  font-weight: 400;
  color: #0067f4;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .testimonial-four .testimonial-left-content .sub-title {
    font-size: 16px;
  }
}

.testimonial-four .testimonial-left-content .title {
  font-size: 32px;
  padding-top: 10px;
  color: #121212;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial-four .testimonial-left-content .title {
    font-size: 30px;
  }
}

@media (max-width: 767px) {
  .testimonial-four .testimonial-left-content .title {
    font-size: 24px;
  }
}

.testimonial-four .testimonial-left-content .testimonial-line {
  padding-top: 10px;
}

.testimonial-four .testimonial-left-content .testimonial-line li {
  height: 5px;
  background-color: #0067f4;
  opacity: 0.2;
  display: inline-block;
  border-radius: 50px;
  margin-right: 3px;
}

.testimonial-four .testimonial-left-content .testimonial-line li:nth-of-type(1) {
  width: 40px;
}

.testimonial-four .testimonial-left-content .testimonial-line li:nth-of-type(2) {
  width: 15px;
}

.testimonial-four .testimonial-left-content .testimonial-line li:nth-of-type(3) {
  width: 10px;
}

.testimonial-four .testimonial-left-content .testimonial-line li:nth-of-type(4) {
  width: 5px;
}

.testimonial-four .testimonial-left-content .text {
  padding-top: 15px;
}

.testimonial-four .testimonial-right-content {
  position: relative;
  background-color: #e9ecef;
  box-shadow: 0px 30px 70px 0px rgba(0, 0, 0, 0.07);
  border-radius: 50px;
  max-width: 500px;
  padding-top: 50px;
}

.testimonial-four .testimonial-right-content .quota {
  position: absolute;
  top: 10px;
  left: 15px;
  transform: rotate(180deg);
  opacity: 0.1;
}

.testimonial-four .testimonial-right-content .quota i {
  font-size: 130px;
  line-height: 95px;
  color: #0067f4;
}

.testimonial-four .testimonial-right-content .tns-controls {
  position: absolute;
  z-index: 2;
  left: -660px;
  bottom: 0;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .testimonial-four .testimonial-right-content .tns-controls {
    left: -570px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial-four .testimonial-right-content .tns-controls {
    left: -480px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 767px) {
  .testimonial-four .testimonial-right-content .tns-controls {
    left: 0;
    margin-top: 50px;
    position: static;
  }
}

.testimonial-four .testimonial-right-content .tns-controls button {
  border: none;
  background: none;
  font-size: 35px;
  margin-right: 15px;
}

.testimonial-four .testimonial-right-content .tns-controls button:hover {
  color: #0067f4;
}

.testimonial-four .testimonial-content-wrapper {
  position: relative;
}

.testimonial-four .single-testimonial {
  background-color: #fff;
  padding: 40px 30px 50px;
  border-radius: 50px;
}

.testimonial-four .single-testimonial .testimonial-text .text {
  font-size: 24px;
  font-weight: 400;
  line-height: 36px;
  color: #121212;
  padding-bottom: 25px;
}

@media (max-width: 767px) {
  .testimonial-four .single-testimonial .testimonial-text .text {
    font-size: 18px;
    line-height: 32px;
  }
}

.testimonial-four .single-testimonial .testimonial-author {
  border-top: 1px solid #e9ecef;
  padding-top: 50px;
}

.testimonial-four .single-testimonial .testimonial-author .author-info .author-image img {
  border-radius: 50%;
  width: 70px;
}

.testimonial-four .single-testimonial .testimonial-author .author-info .author-name {
  padding-left: 30px;
}

.testimonial-four .single-testimonial .testimonial-author .author-info .author-name .name {
  font-size: 16px;
  font-weight: 700;
  color: #121212;
}

.testimonial-four .single-testimonial .testimonial-author .author-info .author-name .sub-title {
  font-size: 14px;
  color: #a4a4a4;
  margin-top: 5px;
}

@media (max-width: 767px) {
  .testimonial-four .single-testimonial .testimonial-author .author-review {
    padding-left: 100px;
    padding-top: 15px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .testimonial-four .single-testimonial .testimonial-author .author-review {
    padding-left: 0;
    padding-top: 15px;
  }
}

.testimonial-four .single-testimonial .testimonial-author .author-review .star li {
  display: inline-block;
  font-size: 14px;
  color: #ffb400;
}

.testimonial-four .single-testimonial .testimonial-author .author-review .review {
  font-size: 14px;
  color: #000;
  margin-top: 5px;
}

.testimonial-four .testimonial-four-active .slick-arrow {
  position: absolute;
  bottom: 0;
  left: -635px;
  font-size: 22px;
  cursor: pointer;
  color: #a4a4a4;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial-four .testimonial-four-active .slick-arrow {
    left: -480px;
  }
}

.testimonial-four .testimonial-four-active .slick-arrow:hover {
  color: #000;
}

.testimonial-four .testimonial-four-active .slick-arrow.next {
  left: -600px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .testimonial-four .testimonial-four-active .slick-arrow.next {
    left: -445px;
  }
}

/*===========================
    27.PRODUCT PAGE css 
===========================*/
.product-page {
  padding-top: 50px;
  padding-bottom: 100px;
}

.product-details-image .product-image .single-product-image img {
  width: 100%;
}

.product-details-image .product-thumbs {
  display: flex;
}

.product-details-image .product-thumbs .single-thumbs a img {
  opacity: 0.5;
  width: 100%;
  transition: all 0.3s ease-out 0s;
}

.product-details-image .product-thumbs .single-thumbs a.active img {
  opacity: 1;
}

.product-details-image .product-thumbs .slick-current .single-thumbs img {
  opacity: 1;
}

.product-details-content .product-title {
  font-size: 24px;
  color: #121212;
  font-weight: 600;
  line-height: 30px;
}

.product-details-content .product-rating .rating-star {
  color: #4da422;
  font-size: 15px;
  margin-top: 16px;
  margin-right: 16px;
}

.product-details-content .product-rating .rating-review {
  font-size: 14px;
  margin-top: 16px;
  color: #a4a4a4;
}

.product-details-content .product-price {
  margin-top: 16px;
}

.product-details-content .product-price .running-price {
  font-weight: 600;
  font-size: 24px;
  color: #121212;
  line-height: 30px;
  margin-right: 16px;
}

.product-details-content .product-price .discount-price {
  font-size: 18px;
  color: #a4a4a4;
  position: relative;
}

.product-details-content .product-price .discount-price::before {
  position: absolute;
  content: '';
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #a4a4a4;
}

.product-details-content .product-stock {
  margin-top: 16px;
}

.product-details-content .product-stock p {
  font-size: 15px;
  color: #121212;
}

.product-details-content .product-stock p span {
  color: #4da422;
  margin-left: 8px;
}

.product-details-content .product-overview {
  margin-top: 16px;
}

.product-details-content .product-overview .overview-title {
  font-size: 18px;
  font-weight: 600;
  color: #121212;
}

.product-details-content .product-overview .text {
  color: #a4a4a4;
  line-height: 27px;
  margin-top: 8px;
}

.product-details-content .product-quantity-addcart .product-quantity {
  margin-right: 16px;
}

.product-details-content .product-quantity-addcart .product-quantity button {
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  background-color: #0067f4;
  font-size: 18px;
  color: #fff;
}

@media (max-width: 767px) {
  .product-details-content .product-quantity-addcart .product-quantity button {
    width: 40px;
    height: 40px;
  }
}

.product-details-content .product-quantity-addcart .product-quantity input {
  width: 60px;
  height: 50px;
  border: 1px solid #0067f4;
  padding: 0 10px;
  text-align: center;
}

@media (max-width: 767px) {
  .product-details-content .product-quantity-addcart .product-quantity input {
    height: 40px;
  }
}

.product-details-content .product-share {
  margin-top: 16px;
}

.product-details-content .product-share span {
  font-size: 16px;
  font-weight: 600;
  color: #121212;
}

.product-details-content .product-share .social li {
  display: inline-block;
  margin-left: 10px;
}

.product-details-content .product-share .social li a {
  color: #a4a4a4;
  font-size: 16px;
  transition: all 0.3s ease-out 0s;
}

.product-details-content .product-share .social li a:hover {
  color: #0067f4;
}

.product-content {
  padding: 24px;
}

.product-content .product-title {
  font-size: 24px;
  color: #121212;
  line-height: 30px;
  font-weight: 600;
}

.product-content .text {
  font-size: 16px;
  color: #a4a4a4;
  line-height: 27px;
  margin-top: 16px;
}

.product-review {
  padding: 24px;
  padding-top: 0;
}

.product-review .single-product-review {
  padding-top: 24px;
}

.product-review .single-product-review .review-author img {
  width: 90px;
  border-radius: 50%;
}

.product-review .single-product-review .review-content {
  padding-left: 25px;
}

@media (max-width: 767px) {
  .product-review .single-product-review .review-content {
    padding-left: 0;
    padding-top: 15px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .product-review .single-product-review .review-content {
    padding-left: 15px;
    padding-top: 0;
  }
}

.product-review .single-product-review .review-content .author-name {
  font-size: 18px;
  color: #121212;
  font-weight: 600;
  line-height: 25px;
}

.product-review .single-product-review .review-content .reply-date {
  color: #a4a4a4;
  font-size: 14px;
  margin-top: 4px;
}

.product-review .single-product-review .review-content .text {
  margin-top: 8px;
  font-size: 16px;
  line-height: 27px;
  color: #121212;
}

.review-title {
  font-size: 24px;
  line-height: 30px;
  color: #121212;
  font-weight: 600;
}

.product-review-rating span {
  font-size: 16px;
  font-weight: 600;
  color: #121212;
  margin-right: 8px;
}

.product-review-rating ul li {
  display: inline-block;
}

.product-review-rating ul li a {
  font-size: 16px;
  color: #4da422;
}

/*===== order Style =====*/
.order-title .sub-title {
  font-size: 24px;
  font-weight: 500;
  color: #a4a4a4;
  line-height: 30px;
}

@media (max-width: 767px) {
  .order-title .sub-title {
    font-size: 18px;
    line-height: 28px;
  }
}

.order-title .main-title {
  font-size: 52px;
  font-weight: 600;
  line-height: 65px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .order-title .main-title {
    font-size: 32px;
    line-height: 38px;
  }
}

@media (max-width: 767px) {
  .order-title .main-title {
    font-size: 38px;
    line-height: 45px;
  }
}

.order-title .text {
  margin-top: 19px;
}

.order-area {
  background-color: #e9ecef;
}

.single-order {
  background-color: #fff;
  padding: 38px 16px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  margin-top: 32px;
}

.single-order .order-title {
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
}

@media (max-width: 767px) {
  .single-order .order-title {
    font-size: 18px;
  }
}

.single-order .text {
  margin-top: 4px;
  font-size: 16px;
  line-height: 20px;
  color: #a4a4a4;
}

.single-order .main-btn {
  margin-top: 16px;
}

.order-link {
  padding-top: 22px;
}

.order-link a {
  font-size: 16px;
  font-weight: 500;
  color: #121212;
  text-transform: uppercase;
  line-height: 24px;
  padding: 8px 16px;
  background-color: rgba(255, 255, 255, 0.38);
  margin: 10px 3px 0;
  transition: all 0.3s ease-out 0s;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
}

.order-link a i {
  margin-right: 5px;
}

.order-link a:hover {
  color: #0067f4;
}

.order-image img {
  width: 100%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .brand-area {
    margin-top: 50px;
  }
}

.bread-title .main-title {
  font-size: 36px;
  font-weight: 500;
  line-height: 45px;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .bread-title .main-title {
    font-size: 32px;
    line-height: 38px;
  }
}

@media (max-width: 767px) {
  .bread-title .main-title {
    font-size: 26px;
    line-height: 34px;
  }
}

.bread-logo {
  margin-top: 15px;
}

/*===========================
       28.CLIENT css 
===========================*/
.client-logo-area .client-title .title {
  font-size: 44px;
  line-height: 55px;
  color: #121212;
}

@media (max-width: 767px) {
  .client-logo-area .client-title .title {
    font-size: 28px;
    line-height: 35px;
  }
}

/*===== Client Logo One =====*/
.client-logo-one {
  padding-top: 100px;
  padding-bottom: 100px;
}

/*===== Client Logo Two =====*/
.client-logo-two {
  padding-top: 100px;
  padding-bottom: 100px;
}

/*===== Client Logo Three =====*/
.client-logo-three {
  padding-top: 100px;
  padding-bottom: 100px;
}

.client-logo-three .single-client img {
  filter: grayscale(100%);
  transition: all 0.3s ease-out 0s;
}

.client-logo-three .single-client:hover img {
  filter: grayscale(0);
}

/*===========================
    29.CALL TO ACTION css 
===========================*/
/*===== call action one =====*/
.call-action-one {
  background-color: #f4f6f7;
}

.call-action-one .call-action-content .call-action-text .action-title {
  font-size: 48px;
  font-weight: 600;
  line-height: 55px;
  color: #121212;
}

@media (max-width: 767px) {
  .call-action-one .call-action-content .call-action-text .action-title {
    font-size: 30px;
    line-height: 40px;
  }
}

.call-action-one .call-action-content .call-action-text .text {
  font-size: 20px;
  color: #121212;
  line-height: 30px;
  margin-top: 16px;
}

@media (max-width: 767px) {
  .call-action-one .call-action-content .call-action-text .text {
    font-size: 16px;
    line-height: 27px;
  }
}

/*===== call action two =====*/
.call-action-two {
  background-color: #f4f6f7;
}

.call-action-two .call-action-content .action-title {
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
  color: #121212;
}

@media (max-width: 767px) {
  .call-action-two .call-action-content .action-title {
    font-size: 24px;
    line-height: 35px;
  }
}

.call-action-two .call-action-content .text {
  font-size: 16px;
  color: #121212;
  line-height: 27px;
  margin-top: 16px;
}

.call-action-two .call-action-form {
  position: relative;
}

.call-action-two .call-action-form input {
  width: 100%;
  height: 60px;
  border: 1px solid #cbced1;
  background: none;
  padding: 0 25px;
  border-radius: 50px;
}

@media (max-width: 767px) {
  .call-action-two .call-action-form input {
    height: 50px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .call-action-two .call-action-form input {
    height: 60px;
  }
}

.call-action-two .call-action-form input::placeholder {
  opacity: 1;
  color: #a4a4a4;
}

.call-action-two .call-action-form input::-moz-placeholder {
  opacity: 1;
  color: #a4a4a4;
}

.call-action-two .call-action-form input::-moz-placeholder {
  opacity: 1;
  color: #a4a4a4;
}

.call-action-two .call-action-form input::-webkit-input-placeholder {
  opacity: 1;
  color: #a4a4a4;
}

.call-action-two .call-action-form input:focus {
  border-color: #0067f4;
}

.call-action-two .call-action-form .action-btn {
  position: absolute;
  top: 5px;
  right: 5px;
}

@media (max-width: 767px) {
  .call-action-two .call-action-form .action-btn .main-btn {
    width: 100%;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .call-action-two .call-action-form .action-btn .main-btn {
    width: auto;
  }
}

@media (max-width: 767px) {
  .call-action-two .call-action-form .action-btn {
    position: relative;
    top: 0;
    right: 0;
    margin-top: 10px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .call-action-two .call-action-form .action-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    margin-top: 0;
  }
}

/*===== call action three =====*/
.call-action-three {
  background-color: #f4f6f7;
}

.call-action-three .call-action-content .action-title {
  font-size: 48px;
  font-weight: 500;
  line-height: 55px;
  color: #121212;
}

@media (max-width: 767px) {
  .call-action-three .call-action-content .action-title {
    font-size: 30px;
    line-height: 40px;
  }
}

.call-action-three .call-action-content .main-btn {
  margin-top: 24px;
}

/*===== call action four =====*/
.call-action-four {
  background-color: #0067f4;
}

.call-action-four .call-action-content .action-title {
  font-size: 42px;
  font-weight: 600;
  line-height: 55px;
  color: #fff;
}

@media (max-width: 767px) {
  .call-action-four .call-action-content .action-title {
    font-size: 30px;
    line-height: 40px;
  }
}

.call-action-four .call-action-content .text {
  font-size: 16px;
  color: #fff;
  line-height: 27px;
  margin-top: 16px;
}

.call-action-four .call-action-form {
  position: relative;
  max-width: 480px;
  margin: 45px auto 0;
}

.call-action-four .call-action-form input {
  width: 100%;
  height: 60px;
  border: 1px solid #fff;
  background: none;
  padding: 0 25px;
  border-radius: 50px;
  color: #fff;
}

@media (max-width: 767px) {
  .call-action-four .call-action-form input {
    height: 50px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .call-action-four .call-action-form input {
    height: 60px;
  }
}

.call-action-four .call-action-form input::placeholder {
  opacity: 1;
  color: #fff;
}

.call-action-four .call-action-form input::-moz-placeholder {
  opacity: 1;
  color: #fff;
}

.call-action-four .call-action-form input::-moz-placeholder {
  opacity: 1;
  color: #fff;
}

.call-action-four .call-action-form input::-webkit-input-placeholder {
  opacity: 1;
  color: #fff;
}

.call-action-four .call-action-form .action-btn {
  position: absolute;
  top: 5px;
  right: 5px;
}

@media (max-width: 767px) {
  .call-action-four .call-action-form .action-btn {
    position: relative;
    top: 0;
    right: 0;
    margin-top: 10px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .call-action-four .call-action-form .action-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    margin-top: 0;
  }
}

.call-action-four .call-action-form .action-btn .main-btn {
  background-color: #fff;
  color: #0067f4;
  border-color: #fff;
}

@media (max-width: 767px) {
  .call-action-four .call-action-form .action-btn .main-btn {
    width: 100%;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .call-action-four .call-action-form .action-btn .main-btn {
    width: auto;
  }
}

.call-action-four .call-action-form .action-btn .main-btn:hover {
  background-color: #fff;
  border-color: #fff;
  color: #0067f4;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

/*===== call action four =====*/
.call-action-five {
  background-color: #121212;
}

.call-action-five .call-action-content .action-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  color: #fff;
}

.call-action-five .call-action-form {
  position: relative;
  max-width: 480px;
  margin: 45px auto 0;
}

.call-action-five .call-action-form input {
  width: 100%;
  height: 60px;
  border: 1px solid #fff;
  background: none;
  padding: 0 25px;
  border-radius: 50px;
  color: #fff;
}

@media (max-width: 767px) {
  .call-action-five .call-action-form input {
    height: 50px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .call-action-five .call-action-form input {
    height: 60px;
  }
}

.call-action-five .call-action-form input::placeholder {
  opacity: 1;
  color: #fff;
}

.call-action-five .call-action-form input::-moz-placeholder {
  opacity: 1;
  color: #fff;
}

.call-action-five .call-action-form input::-moz-placeholder {
  opacity: 1;
  color: #fff;
}

.call-action-five .call-action-form input::-webkit-input-placeholder {
  opacity: 1;
  color: #fff;
}

.call-action-five .call-action-form .action-btn {
  position: absolute;
  top: 5px;
  right: 5px;
}

@media (max-width: 767px) {
  .call-action-five .call-action-form .action-btn {
    position: relative;
    top: 0;
    right: 0;
    margin-top: 10px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .call-action-five .call-action-form .action-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    margin-top: 0;
  }
}

.call-action-five .call-action-form .action-btn .main-btn {
  background-color: #fff;
  color: #0067f4;
  border-color: #fff;
}

@media (max-width: 767px) {
  .call-action-five .call-action-form .action-btn .main-btn {
    width: 100%;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .call-action-five .call-action-form .action-btn .main-btn {
    width: auto;
  }
}

.call-action-five .call-action-form .action-btn .main-btn:hover {
  background-color: #fff;
  border-color: #fff;
  color: #0067f4;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

/*===========================
     30.COMING SOON css 
===========================*/
/*===== COMING SOON ONE =====*/
.coming-soon-one {
  height: 700px;
}

.coming-soon-one .coming-soon-content .countdown ul {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.coming-soon-one .coming-soon-content .countdown ul li {
  padding: 0 45px;
  text-align: center;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .coming-soon-one .coming-soon-content .countdown ul li {
    padding: 0px 30px;
  }
}

@media (max-width: 767px) {
  .coming-soon-one .coming-soon-content .countdown ul li {
    padding: 0 10px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .coming-soon-one .coming-soon-content .countdown ul li {
    padding: 0 15px;
  }
}

.coming-soon-one .coming-soon-content .countdown ul li .count {
  font-size: 72px;
  font-weight: 600;
  line-height: 60px;
  color: #fff;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .coming-soon-one .coming-soon-content .countdown ul li .count {
    font-size: 55px;
  }
}

@media (max-width: 767px) {
  .coming-soon-one .coming-soon-content .countdown ul li .count {
    font-size: 24px;
    line-height: 30px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .coming-soon-one .coming-soon-content .countdown ul li .count {
    font-size: 36px;
    line-height: 40px;
  }
}

.coming-soon-one .coming-soon-content .countdown ul li .text {
  font-size: 20px;
  font-weight: 600;
  margin-top: 10px;
  color: #fff;
}

@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) {
  .coming-soon-one .coming-soon-content .countdown ul li .text {
    font-size: 18px;
  }
}

@media (max-width: 767px) {
  .coming-soon-one .coming-soon-content .countdown ul li .text {
    font-size: 14px;
    margin-top: 0;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .coming-soon-one .coming-soon-content .countdown ul li .text {
    font-size: 18px;
    margin-top: 0;
  }
}

.coming-soon-one .coming-soon-content .coming-soon-title {
  font-size: 72px;
  color: #fff;
  line-height: 85px;
  text-transform: uppercase;
  margin-top: 30px;
}

@media (max-width: 767px) {
  .coming-soon-one .coming-soon-content .coming-soon-title {
    font-size: 38px;
    line-height: 45px;
  }
}

@media (max-width: 767px) {
  .coming-soon-one .coming-soon-content .coming-soon-title {
    font-size: 60px;
    line-height: 70px;
  }
}

.coming-soon-one .coming-soon-content .coming-soon-btn {
  padding-top: 20px;
}

.coming-soon-one .coming-soon-content .coming-soon-btn .main-btn.rounded-one {
  background-color: #fff;
  border-color: #fff;
}

.coming-soon-one .coming-soon-content .coming-soon-btn .main-btn.rounded-one:hover {
  background-color: #0067f4;
  border-color: #0067f4;
  color: #fff;
}

/*===== COMING SOON TWO =====*/
.coming-soon-two {
  background-color: #f4f6f7;
}

.coming-soon-two .coming-soon-content {
  position: relative;
  padding-top: 180px;
  padding-bottom: 180px;
}

@media (max-width: 767px) {
  .coming-soon-two .coming-soon-content {
    padding-top: 130px;
    padding-bottom: 130px;
  }
}

.coming-soon-two .coming-soon-content .coming-soon-image {
  position: absolute;
}

.coming-soon-two .coming-soon-content .coming-soon-image.image-one {
  width: 348px;
  left: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .coming-soon-two .coming-soon-content .coming-soon-image.image-one {
    width: 300px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .coming-soon-two .coming-soon-content .coming-soon-image.image-one {
    width: 120px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.coming-soon-two .coming-soon-content .coming-soon-image.image-two {
  width: 280px;
  left: 50%;
  transform: translateX(-50%);
  top: 58px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .coming-soon-two .coming-soon-content .coming-soon-image.image-two {
    width: 220px;
    top: 84px;
  }
}

@media (max-width: 767px) {
  .coming-soon-two .coming-soon-content .coming-soon-image.image-two {
    width: 180px;
    top: 52px;
  }
}

.coming-soon-two .coming-soon-content .coming-soon-image.image-three {
  width: 332px;
  right: 0;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .coming-soon-two .coming-soon-content .coming-soon-image.image-three {
    width: 290px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .coming-soon-two .coming-soon-content .coming-soon-image.image-three {
    width: 120px;
    top: 50%;
    transform: translateY(-50%);
  }
}

.coming-soon-two .coming-soon-content .coming-soon-content-wrapper {
  max-width: 730px;
  margin: 0 auto;
  border: 1px solid #cbced1;
  border-radius: 16px;
  background-color: #fff;
  padding: 30px 140px 55px;
}

@media (max-width: 767px) {
  .coming-soon-two .coming-soon-content .coming-soon-content-wrapper {
    padding: 50px 30px;
  }
}

.coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-title {
  font-size: 44px;
  line-height: 55px;
  color: #121212;
  margin: 16px;
}

@media (max-width: 767px) {
  .coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-title {
    font-size: 30px;
    line-height: 35px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-title {
    font-size: 36px;
    line-height: 45px;
  }
}

.coming-soon-two .coming-soon-content .coming-soon-content-wrapper .text {
  font-size: 22px;
  line-height: 35px;
  color: #6c6c6c;
  margin-top: 8px;
  font-weight: 500;
}

@media (max-width: 767px) {
  .coming-soon-two .coming-soon-content .coming-soon-content-wrapper .text {
    font-size: 16px;
    line-height: 24px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .coming-soon-two .coming-soon-content .coming-soon-content-wrapper .text {
    font-size: 22px;
    line-height: 35px;
  }
}

.coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-newslatter {
  max-width: 410px;
  position: relative;
  margin: 0 auto;
  margin-top: 40px;
}

.coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-newslatter i {
  position: absolute;
  top: 12px;
  left: 20px;
  font-size: 24px;
  color: #0067f4;
}

.coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-newslatter input {
  width: 100%;
  height: 48px;
  padding-left: 60px;
  padding-right: 30px;
  border-radius: 50px;
  border: 2px solid #cbced1;
  font-size: 16px;
  font-weight: 600;
  color: #6c6c6c;
}

.coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-newslatter input:focus {
  border-color: #0067f4;
}

.coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-newslatter .coming-soon-btn {
  position: absolute;
  top: 0;
  right: 0;
}

@media (max-width: 767px) {
  .coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-newslatter .coming-soon-btn {
    position: relative;
    margin-top: 10px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-newslatter .coming-soon-btn {
    position: absolute;
    margin-top: 0;
  }
}

.coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-newslatter .coming-soon-btn .main-btn {
  border: 0;
  line-height: 48px;
  border-radius: 50px;
}

@media (max-width: 767px) {
  .coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-newslatter .coming-soon-btn .main-btn {
    width: 100%;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .coming-soon-two .coming-soon-content .coming-soon-content-wrapper .coming-soon-newslatter .coming-soon-btn .main-btn {
    width: auto;
  }
}

.coming-soon-two .coming-soon-content .coming-soon-content-wrapper .subscribe-text {
  font-size: 14px;
  color: #0067f4;
  line-height: 24px;
  margin-top: 8px;
}

/*===========================
        31.VIDEO css 
===========================*/
/*===== VIDEO ONE =====*/
.video-one {
  background-color: #e9ecef;
  padding-top: 120px;
}

.video-one .video-title .sub-title {
  font-size: 24px;
  font-weight: 500;
  color: #a4a4a4;
  line-height: 30px;
}

@media (max-width: 767px) {
  .video-one .video-title .sub-title {
    font-size: 18px;
    line-height: 28px;
  }
}

.video-one .video-title .main-title {
  font-size: 36px;
  font-weight: 600;
  line-height: 45px;
  color: #121212;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .video-one .video-title .main-title {
    font-size: 32px;
    line-height: 38px;
  }
}

@media (max-width: 767px) {
  .video-one .video-title .main-title {
    font-size: 26px;
    line-height: 34px;
  }
}

.video-one .video-title .text {
  margin-top: 19px;
  color: #121212;
}

.video-one .video-content {
  position: relative;
}

.video-one .video-content a {
  width: 88px;
  height: 88px;
  line-height: 88px;
  text-align: center;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-out 0s;
}

@media (max-width: 767px) {
  .video-one .video-content a {
    width: 68px;
    height: 68px;
    line-height: 68px;
    font-size: 46px;
  }
}

.video-one .video-content a:hover {
  background-color: rgba(51, 51, 51, 0.6);
}

/*===== VIDEO TWO =====*/
.video-two {
  background-color: #e9ecef;
  padding-top: 120px;
  padding-bottom: 120px;
}

.video-two .video-menu button {
  background: none;
  border: none;
  font-size: 16px;
  font-weight: 700;
  color: #6c6c6c;
  line-height: 48px;
  padding: 0 30px;
  position: relative;
  border-radius: 50px;
  overflow: hidden;
  display: inline-block;
  z-index: 5;
  transition: all 0.3s ease-out 0s;
  cursor: pointer;
  margin-right: 4px;
}

.video-two .video-menu button:last-child {
  margin-right: 0;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .video-two .video-menu button {
    font-size: 14px;
    padding: 0 26px;
  }
}

@media (max-width: 767px) {
  .video-two .video-menu button {
    font-size: 13px;
    padding: 0 18px;
    line-height: 38px;
  }
}

.video-two .video-menu button::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, #0067f4 0%, #2bdbdc 100%);
  z-index: -1;
  opacity: 0;
  transition: all 0.3s ease-out 0s;
}

.video-two .video-menu button:hover, .video-two .video-menu button.active {
  color: #fff;
}

.video-two .video-menu button:hover::before, .video-two .video-menu button.active::before {
  opacity: 1;
}

.video-two .single-video-items {
  position: relative;
}

.video-two .single-video-items .video-image img {
  width: 100%;
}

.video-two .single-video-items .video-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-two .single-video-items .video-icon::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0067f4;
  opacity: 0;
  transition: all 0.3s ease-out 0s;
}

.video-two .single-video-items .video-icon a {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 3px solid #fff;
  font-size: 24px;
  color: #fff;
  border-radius: 50%;
  padding-left: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-out 0s;
}

.video-two .single-video-items:hover .video-icon::before {
  opacity: 0.4;
}

.video-two .single-video-items:hover .video-icon a {
  transform: translate(-50%, -50%) scale(1.1);
}

/*===== VIDEO THREE =====*/
.video-three {
  padding-top: 120px;
  padding-bottom: 120px;
  background-color: #e9ecef;
}

.video-three .single-video-items {
  position: relative;
}

.video-three .single-video-items .video-image img {
  width: 100%;
}

.video-three .single-video-items .video-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video-three .single-video-items .video-icon::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0067f4;
  opacity: 0;
  transition: all 0.3s ease-out 0s;
}

.video-three .single-video-items .video-icon a {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 3px solid #fff;
  font-size: 24px;
  color: #fff;
  border-radius: 50%;
  padding-left: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease-out 0s;
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 767px) {
  .video-three .single-video-items .video-icon a {
    width: 45px;
    height: 45px;
    line-height: 45px;
    font-size: 20px;
    border: 2px solid #fff;
  }
}

.video-three .single-video-items:hover .video-icon::before {
  opacity: 0.4;
}

.video-three .single-video-items:hover .video-icon a {
  transform: translate(-50%, -50%) scale(1.1);
  opacity: 1;
  visibility: visible;
}

.video-three .video-active-wrapper {
  position: relative;
}

.video-three .video-active-wrapper .tns-nav {
  position: absolute;
  left: 0;
  bottom: -40px;
  width: 100%;
  display: flex;
  justify-content: center;
}

.video-three .video-active-wrapper .tns-nav button {
  width: 12px;
  height: 12px;
  border: none;
  background: #333333;
  border-radius: 50%;
  margin: 0 5px;
}

.video-three .video-active-wrapper .tns-controls {
  z-index: 2;
}

.video-three .video-active-wrapper .tns-controls button {
  background: none;
  border: none;
  position: absolute;
  top: 50%;
  left: -40px;
  font-size: 40px;
  line-height: 30px;
  color: #121212;
  transform: translateY(-50%);
  cursor: pointer;
  transition: all 0.3s ease-out 0s;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .video-three .video-active-wrapper .tns-controls button {
    left: -20px;
    font-size: 28px;
  }
}

@media (max-width: 767px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .video-three .video-active-wrapper .tns-controls button {
    font-size: 24px;
    left: -24px;
  }
}

.video-three .video-active-wrapper .tns-controls button:hover {
  color: #0067f4;
}

.video-three .video-active-wrapper .tns-controls button[data-controls="next"] {
  left: auto;
  right: -40px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .video-three .video-active-wrapper .tns-controls button[data-controls="next"] {
    right: -20px;
    font-size: 28px;
  }
}

@media (max-width: 767px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .video-three .video-active-wrapper .tns-controls button[data-controls="next"] {
    right: -24px;
  }
}

/*===========================
       32.PROFILE css 
===========================*/
.profile-area {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.profile-area::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(0, 102, 244, 0.7) 0%, rgba(43, 219, 220, 0.7) 100%);
  z-index: 99;
}

.profile-card {
  max-width: 560px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 99;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .profile-card {
    max-width: 540px;
  }
}

@media (max-width: 767px) {
  .profile-card {
    max-width: 90%;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .profile-card {
    max-width: 420px;
  }
}

.profile-card .profile-card-wrapper {
  background-color: #fff;
  z-index: 999;
  border-radius: 5px;
  overflow: hidden;
}

.profile-card .profile-card-wrapper .card-header {
  height: 170px;
  width: 100%;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .profile-card .profile-card-wrapper .card-header {
    height: 200px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .profile-card .profile-card-wrapper .card-header {
    height: 170px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .profile-card .profile-card-wrapper .card-header {
    height: 160px;
  }
}

@media (max-width: 767px) {
  .profile-card .profile-card-wrapper .card-header {
    height: 90px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .profile-card .profile-card-wrapper .card-header {
    height: 140px;
  }
}

.profile-card .profile-card-wrapper .card-profile {
  max-width: 150px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: -75px;
  position: relative;
  z-index: 9;
}

@media only screen and (min-width: 1400px) {
  .profile-card .profile-card-wrapper .card-profile {
    max-width: 170px;
    margin-top: -85px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .profile-card .profile-card-wrapper .card-profile {
    max-width: 150px;
    margin-top: -75px;
  }
}

@media (max-width: 767px) {
  .profile-card .profile-card-wrapper .card-profile {
    max-width: 100px;
    margin-top: -50px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .profile-card .profile-card-wrapper .card-profile {
    max-width: 140px;
    margin-top: -70px;
  }
}

.profile-card .profile-card-wrapper .card-profile img {
  border-radius: 50%;
  width: 100%;
  padding: 8px;
  background-color: #fff;
}

.profile-card .profile-card-wrapper .card-content {
  padding: 25px;
}

@media only screen and (min-width: 1400px) {
  .profile-card .profile-card-wrapper .card-content {
    padding: 30px;
  }
}

@media (max-width: 767px) {
  .profile-card .profile-card-wrapper .card-content {
    padding: 10px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .profile-card .profile-card-wrapper .card-content {
    padding: 20px;
  }
}

.profile-card .profile-card-wrapper .card-content .card-title {
  font-size: 48px;
  color: #121212;
  margin-bottom: 20px;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .profile-card .profile-card-wrapper .card-content .card-title {
    font-size: 44px;
  }
}

@media (max-width: 767px) {
  .profile-card .profile-card-wrapper .card-content .card-title {
    font-size: 26px;
    margin-bottom: 10px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .profile-card .profile-card-wrapper .card-content .card-title {
    font-size: 36px;
    margin-bottom: 10px;
  }
}

.profile-card .profile-card-wrapper .card-content .text {
  font-size: 16px;
  padding-bottom: 20px;
}

@media (max-width: 767px) {
  .profile-card .profile-card-wrapper .card-content .text {
    font-size: 14px;
    line-height: 24px;
    padding-bottom: 10px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .profile-card .profile-card-wrapper .card-content .text {
    font-size: 15px;
    line-height: 26px;
    padding-bottom: 20px;
  }
}

.profile-card .profile-card-wrapper .card-social {
  padding-top: 10px;
  padding-bottom: 30px;
}

@media (max-width: 767px) {
  .profile-card .profile-card-wrapper .card-social {
    padding-top: 5px;
    padding-bottom: 10px;
  }
}

.profile-card .profile-card-wrapper .card-social ul li {
  display: inline-block;
  margin: 0px 9px;
}

@media (max-width: 767px) {
  .profile-card .profile-card-wrapper .card-social ul li {
    margin: 0 5px;
  }
}

.profile-card .profile-card-wrapper .card-social ul li a {
  width: 41px;
  height: 40px;
  line-height: 42px;
  border: 1px solid;
  border-radius: 50%;
  font-size: 18px;
  transition: all 0.3s ease-out 0s;
  position: relative;
  z-index: 5;
}

.profile-card .profile-card-wrapper .card-social ul li a.facebook {
  color: #3b5998;
  border-color: #3b5998;
}

.profile-card .profile-card-wrapper .card-social ul li a.facebook:hover {
  color: #fff;
  background-color: #3b5998;
}

.profile-card .profile-card-wrapper .card-social ul li a.twitter {
  color: #00acee;
  border-color: #00acee;
}

.profile-card .profile-card-wrapper .card-social ul li a.twitter:hover {
  color: #fff;
  background-color: #00acee;
}

.profile-card .profile-card-wrapper .card-social ul li a.instagram {
  color: #e1306c;
  border-color: #e1306c;
}

.profile-card .profile-card-wrapper .card-social ul li a.instagram:hover {
  color: #fff;
  background-color: #e1306c;
}

.profile-card .profile-card-wrapper .card-social ul li a.linkedin {
  color: #0077b5;
  border-color: #0077b5;
}

.profile-card .profile-card-wrapper .card-social ul li a.linkedin:hover {
  color: #fff;
  background-color: #0077b5;
}