.VPMI-btn a/*TABLE OF CONTENTS*/
/*=====================
01. VPMI Header Top Menu Area Css
02. VPMI Nav Menu Area Css
03. VPMI Slider Area Css
04. VPMI Section Title Css
05. VPMI Service Area css
06. VPMI About Area Css
07. VPMI Counter Area Css
08. VPMI Testimonial Area Css
09. VPMI Process Area Css
10. VPMI Team Area Css
11. VPMI Faq Area Css
12. VPMI Call Do Section Css
13. VPMI Form Box Css
14. VPMI Blog Area Css
15. VPMI footer Area Css
16. VPMI Subscribe Area Css
17. VPMI Prossess Ber Css
18. VPMI Scrollup Section
19. VPMI Breadcumb Area Css
20. VPMI abouts_areas Css
21. VPMI Pricing Section Css
22. VPMI Contact US Css
23. VPMI Blog Sidber Widget CSS
24. VPMI Search Box Css
25. VPMI Loader Css
=======================*/

/***** ScrollBar *****/
:root {
  --sb-track-color: #ffffff;
  --sb-thumb-color: #cee002;
  --sb-size: 11px;
  --elevated: 0px 0px 0px 1px rgb(0 0 0 / 0.06),
    0px 1px 1px -0.5px rgb(0 0 0 / 0.06), 0px 3px 3px -1.5px rgb(0 0 0 / 0.06),
    0px 6px 6px -3px rgb(0 0 0 / 0.06), 0px 12px 12px -6px rgb(0 0 0 / 0.06),
    0px 24px 24px -12px rgb(0 0 0 / 0.06);
}
body{
  position: relative !important;
}

body::-webkit-scrollbar {
  width: 12px;
}

body::-webkit-scrollbar-track {
  background: white;
  border-radius: 1px;
}

body::-webkit-scrollbar-thumb {
  background: #cee002 !important;
  border-radius: 1px;
}

@supports not selector(::-webkit-scrollbar) {
  body {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color) !important;
  }
}
html,
body {
  scroll-behavior: smooth;
}
/***** End ScrollBar *****/

:root {
  --brand-primary: #aab900;
}

.topbar-area {
  padding: 10px 0;
  background: #f4f4f4;
  text-align: center;
  position: relative;
  border-bottom: 1px solid #dddddd;
  overflow: hidden;
}

.topbar-area::before {
  position: absolute;
  content: "";
  width: 306px;
  height: 42px;
  background-color: var(--brand-primary);
  left: -11px;
  transform: skew(30deg);
  bottom: -1px;
}

.topbar-area::after {
  position: absolute;
  content: "";
  width: 130px;
  height: 36px;
  background-color: var(--brand-primary);
  left: -9px;
  top: 0;
}

.topbar-inner {
  position: relative;
}

.topbar-inner::before {
  position: absolute;
  content: "";
  width: 306px;
  height: 42px;
  background-color: var(--brand-primary);
  right: -9px;
  transform: skew(30deg);
  bottom: 11px;
}

.topbar-inner::after {
  position: absolute;
  content: "";
  width: 130px;
  height: 36px;
  background-color: var(--brand-primary);
  right: -9px;
  top: 12px;
}

.topbar-items ul {
  list-style: none;
}

.topbar-items ul li {
  display: inline-block;
  margin-right: 84px;
  font-size: 18px;
  color: #003d4d;
  font-weight: 400;
  position: relative;
}

.topbar-items ul li:not(:last-child):before {
  position: absolute;
  content: "";
  width: 1px;
  height: 30px;
  background: #dddddd;
  right: -45px;
}

.topbar-items ul li.inner::before {
  display: none;
}

.topbar-items ul li span {
  color: var(--brand-primary);
}

.topbar-items ul li a {
  font-size: 18px;
  color: #003d4d;
  font-weight: 400;
  text-decoration: none;
}

.topbar-items ul li i {
  margin-right: 5px;
  font-size: 20px;
}

/*==================================================
<-- VPMI Header Area Css-->
    ===================================================*/

.header-area {
  position: relative;
}

.header-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 6px 0;
}

.header-menu ul {
  list-style: none;
  display: inline-block;
}

.header-menu ul li {
  display: inline-block;
  margin-right: 39px;
}

.header-menu ul li a {
  font-size: 18px;
  color: #003d4d;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: 0.5s;
  padding: 50px 0;
}

.header-menu ul li a:hover {
  color: var(--brand-primary);
}

.header-menu ul li a::before {
  position: absolute;
  content: "";
  height: 1px;
  width: 0;
  background: var(--brand-primary);
  bottom: 50px;
  right: 0;
  transition: 0.5s;
}

.header-menu ul li a:hover:before {
  width: 100%;
  left: 0;
}

.header-menu ul li a i {
  font-size: 12px;
  margin-left: 5px;
}

/* sticky menu css */

.sticky-nav {
  left: 0;
  margin: auto;
  top: 0;
  right: 0;
  width: 100%;
  position: fixed !important;
  box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07);
  -webkit-animation: 300ms running fadeInDown;
  animation: 500ms running fadeInUp;
  -webkit-box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
  transition: 0.5s !important;
  background: #ffff !important;
  z-index: 9999 !important;
  animation-name: slideInDown;
  padding: 0 30px;
}

/* sub menu */

.header-menu ul .sub-menu {
  background: #fff;
  position: absolute;
  top: 125%;
  border-radius: 5px;
  width: 250px;
  text-align: left;
  margin: 0;
  -webkit-box-shadow: 0px 1px 3px rgb(0 0 0 / 30%);
  transition: 0.5s;
  visibility: hidden;
  border-top: 2px solid var(--brand-primary);
  opacity: 0;
  z-index: 11;
}

.header-menu ul .sub-menu ul li {
  display: inline-block;
  margin-left: 0;
  width: 100%;
}

.header-menu ul .sub-menu ul li a {
  padding: 8px 12px;
  text-align: left;
  width: 100%;
  display: inline-block;
  visibility: inherit !important;
  color: #003d4d;
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.header-menu ul .sub-menu ul li a:hover {
  color: #fff;
  background: var(--brand-primary);
}

.header-menu ul .sub-menu ul li a::before {
  display: none;
}

.header-menu ul li:hover .sub-menu {
  visibility: visible;
  opacity: 1;
  top: 99%;
}

/* mobile menu */

.mobile-menu-area {
  display: none;
}

/*==================================================
    <-- VPMI All Btn Css-->
        ===================================================*/
.header-menu .VPMI-btn a {
  height: auto !important;
  padding-block: 14px;
}
.VPMI-btn a {
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  padding: 17px 52px;
  background-color: #003d4d;
  text-decoration: none;
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  height: 63px;
  max-width: 228px;
  z-index: 1;
}

.VPMI-btn a::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-bottom: 80px solid var(--brand-primary);
  right: -50px;
  border-right: 50px solid transparent;
  transform: translateX(-100%);
  transition: 0.5s;
  width: 0;
  z-index: -1;
}

.VPMI-btn a::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  border-bottom: 80px solid var(--brand-primary);
  right: -98px;
  border-left: 50px solid transparent;
  transform: translateX(-100%);
  transition: 0.5s;
  width: 0;
  z-index: -1;
}
.VPMI-btn a:hover {
  color: black;
}
.VPMI-btn a:hover::before {
  transform: translateX(-10%);
  right: 0;
  width: 100%;
}

.VPMI-btn a:hover::after {
  transform: translateX(19%);
  right: 0;
  width: 100%;
}

/* slider btn */
.VPMI-btn.slider a {
  background: var(--brand-primary);
  color: black;
}
.VPMI-btn.slider:hover a {
  color: white !important;
}

.VPMI-btn.slider a:before,
.VPMI-btn.slider a:after {
  border-bottom: 80px solid #003d4d;
}

.slider-button {
  position: relative;
}

/* about style two btn */

.VPMI-btn.about2 a {
  background: var(--brand-primary);
}

.VPMI-btn.about2 a:before,
.VPMI-btn.about2 a:after {
  border-bottom: 80px solid #003d4d;
}

/*==================================================
        <-- VPMI Banner Area Css-->
            ===================================================*/

/* Banner Slider */
.banner-section {
  position: relative;
}

.banner-carousel .slide-item {
  position: relative;
  overflow: hidden;
  min-height: 900px;
}

.image-layer {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all 6000ms linear;
  -moz-transition: all 6000ms linear;
  -ms-transition: all 6000ms linear;
  -o-transition: all 6000ms linear;
  transition: all 6000ms linear;
}

.banner-carousel .active .slide-item .image-layer {
  -webkit-transform: scale(1.15);
  -ms-transform: scale(1.15);
  transform: scale(1.15);
}

/* slide content */

.slider-content {
  position: absolute;
  top: 50%;
  transform: translate(-50%);
  width: 42%;
}

.slider-title-shape {
  display: inline-block;
}

.slider-title-shape img {
  width: auto;
}

.slider-sub-title {
  display: inline-block;
}

.slider-sub-title h4 {
  color: #ffffff;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
  display: inline-block;
  margin-bottom: 32px;
}

.slider-main-title h1 {
  color: #fff;
  font-family: Jost;
  font-size: 70px;
  font-weight: 600;
  line-height: 82px;
}

.slider-discripton p {
  color: #dddddd;
  font-family: Jost;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  margin: 43px 10px 70px;
  width: 100%;
}

/* search box */

.banner-search-box {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 62%;
  width: 510px;
  /* height: 684px; */
  background-color: #ffffff;
  padding: 44px 54px 0;
  height: fit-content;
}

.banner-search-box-title h4 {
  font-size: 36px;
  line-height: 46px;
  color: #003d4d;
  font-weight: 600;
  margin-bottom: 30px;
}

.form-group input,
.form-group textarea {
  width: 100%;
  height: 56px;
  border: 1px solid #dbdbdb;
  padding: 0px 20px;
  margin-bottom: 20px;
}

.form-group input:focus,
.form-group textarea:focus {
  border: 1px solid #dbdbdb;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  font-size: 15px;
  color: #898989;
  font-weight: 400;
}

.form-group select {
  width: 100%;
  height: 56px;
  border: 1px solid #dbdbdb;
  padding: 0px 20px;
  margin-bottom: 20px;
  outline-color: #dbdbdb;
}

.form-group option:nth-child(1) {
  background: #003d4d;
  color: #fff;
  transition: 0.5s;
}

.form-group option:nth-child(1):hover {
  background: var(--brand-primary);
}

.form-group option:nth-child(2) {
  background: #003d4d;
  color: #fff;
}

.form-group option:nth-child(3) {
  background: #003d4d;
  color: #fff;
}

.form-group option:nth-child(4) {
  background: #003d4d;
  color: #fff;
}

.form-group option:nth-child(5) {
  background: #003d4d;
  color: #fff;
}

.form-group option:nth-child(6) {
  background: #003d4d;
  color: #fff;
}

.form-group option:nth-child(7) {
  background: #003d4d;
  color: #fff;
}

.form-group button {
  padding-inline: 20px;
  height: 64px;
  background-color: var(--brand-primary);
  border: 0;
  outline: 0;
  font-size: 20px;
  color: #000;
  font-weight: 500;
  transition: 0.5s;
}

.form-group button:hover {
  background: #003d4d;
  color: white;
}

.section-sub-thumb {
  display: inline-flex;
  align-items: center;
}

.section-sub-titile {
  display: inline-block;
  margin: 0 10px 0;
}

.section-sub-titile h4 {
  font-size: 20px;
  color: var(--brand-primary);
  font-weight: 500;
  margin-bottom: 30px;
}

.section-main-title h2 {
  font-size: 38px;
  color: #003d4d;
  font-weight: 600;
  margin-bottom: 48px;
}

/* about section title */

.section-sub-titile.about h4 {
  margin-bottom: 19px;
}

.section-main-title.about h2 {
  margin-bottom: 20px;
}

/* testi section title */
.section-sub-titile.testi h4 {
  color: #fff;
}

.section-main-title.testi h2 {
  color: #fff;
}

/*==================================================
            <-- VPMI Feature Area Css-->
===================================================*/

.feature-area {
  padding: 30px 0 0;
}

.feature-single-box {
  text-align: center;
  filter: drop-shadow(0px 1px 25.5px rgba(0, 0, 0, 0.08));
  background-color: #ffffff;
  padding: 58px 36px 54px;
  transition: 0.5s;
  position: relative;
  top: 0;
}

.feature-single-box:hover {
  top: -10px;
}

.feauture-icon {
  border: 1px dashed #dddddd;
  display: inline-block;
  padding: 23px 40px;
  margin-bottom: 35px;
}

.feauture-content h4 a {
  font-size: 32px;
  color: #003d4d;
  font-weight: 600;
  text-decoration: none;
}

.feauture-content h4 a:hover {
  color: var(--brand-primary);
}

.feauture-content p {
  font-size: 16px;
  line-height: 24px;
  color: #5b5858;
  font-weight: 400;
  margin: 15px 0 28px;
}

.feature-btn a {
  display: flex;
  justify-content: space-around;
  background: #f2f6f7;
  width: 345px;
  height: 60px;
  align-items: center;
  margin: auto;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: 0.5s;
}

.feature-single-box:hover .feature-btn a {
  color: #fff;
}

.feature-btn a::before {
  position: absolute;
  width: 250%;
  height: 200%;
  background: var(--brand-primary);
  content: "";
  transition-duration: 800ms;
  top: 110%;
  left: 44%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  border-radius: 50%;
  z-index: -1;
}

.feature-single-box:hover .feature-btn a::before {
  top: -40%;
}

/*==================================================
                <-- VPMI Service Area Css-->
                    ===================================================*/

.service-area {
  padding: 120px 0 118px;
  background: #f8f8f8;
}

.service-single-box {
  margin: 10px;
}

.service-thumb {
  position: relative;
  overflow: hidden;
}

.service-thumb img {
  width: 100%;
  transition: all 2s ease;
}

.service-single-box:hover .service-thumb img {
  transform: scale(1.15);
}

.service-rate {
  position: absolute;
  bottom: 0;
}

.service-rate h4 {
  font-size: 24px;
  color: #ffffff;
  font-weight: 600;
  background: var(--brand-primary);
  padding: 8px 24px;
}

.service-rate span {
  font-size: 18px;
  font-weight: 400;
}

.service-content {
  filter: drop-shadow(0px 1px 25.5px rgba(0, 0, 0, 0));
  background-color: #ffffff;
  padding: 45px 22px 28px;
}

.service-titile h4 a {
  font-size: 25px;
  color: #003d4d;
  font-weight: 600;
  text-decoration: none;
  transition: 0.5s;
}

.service-titile h4 a:hover {
  color: var(--brand-primary);
}

.service-discription p {
  font-size: 16px;
  line-height: 24px;
  color: #5b5858;
  font-weight: 400;
  margin: 15px 0 18px;
}

.service-faciliti ul li {
  list-style: none;
  display: inline-block;
  margin-right: 8px;
  filter: drop-shadow(0px 1px 25.5px rgba(0, 0, 0, 0.15));
  background-color: rgba(255, 255, 255, 0.7);
  padding: 4px 8px;
  margin-bottom: 25px;
  border-right: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  position: relative;
}

.service-faciliti ul li::before {
  position: absolute;
  content: "";
  width: 0;
  height: 1px;
  background: var(--brand-primary);
  bottom: 0;
  right: 0;
  transition: all 2s ease;
}

.service-single-box:hover .service-faciliti ul li::before {
  width: 100%;
  left: 0;
}

.service-faciliti ul li::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 0;
  background: var(--brand-primary);
  right: 0;
  bottom: 0;
  transition: all 2s ease;
}

.service-single-box:hover .service-faciliti ul li::after {
  height: 100%;
  top: 0;
}

.service-icon-thumb {
  float: left;
  margin-right: 10px;
  margin-top: -2px;
}

.service-faciliti ul li span {
  font-size: 18px;
  color: #5b5858;
  font-weight: 400;
}

.service-adress {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.service-location span {
  font-size: 18px;
  color: #5b5858;
  font-weight: 400;
}

.service-location span i {
  color: var(--brand-primary);
}

.service-icon span i {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #dedede;
  display: inline-block;
  line-height: 36px;
  text-align: center;
  color: var(--brand-primary);
  margin-left: 5px;
}

/* owl dots css */

.owl-dots {
  text-align: center;
  margin-top: 54px;
}

.owl-dot {
  margin-right: 9px;
  height: 17px;
  width: 17px;
  background: #d2d4d5;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
}

.owl-dot.active {
  height: 12px;
  width: 40px;
  background: var(--brand-primary);
  border-radius: 6px;
}

/*==================================================
                    <-- VPMI About Area Css-->
                        ===================================================*/

.about-discription p {
  font-size: 16px;
  line-height: 24px;
  color: #003d4d;
  font-weight: 400;
  border-bottom: 1px solid #f1f1f1;
  padding: 0 0 39px;
  margin-bottom: 37px;
}

.about-single-box {
  margin-bottom: 40px;
}

.about-icon {
  width: 74px;
  height: 71px;
  border-radius: 8px;
  background-color: var(--brand-primary);
  line-height: 69px;
  text-align: center;
  float: left;
  margin-right: 30px;
  margin-top: 4px;
}

.about-text h4 {
  font-size: 24px;
  line-height: 24px;
  color: #003d4d;
  font-weight: 500;
  margin-bottom: 9px;
}

.about-text p {
  font-size: 16px;
  line-height: 24px;
  color: #4e4e4e;
  font-weight: 400;
}

.about-shape {
  overflow: hidden;
  margin-bottom: 30px;
  border-radius: 0.4rem;
}

.about-shape img {
  width: 100%;

  transition: all 2s ease;
}

.about-shape img:hover {
  transform: scale(1.15);
}

.about-thumb {
  overflow: hidden;
  position: relative;
  border-radius: 0.4rem;
}

.about-thumb img {
  width: 100%;
  transition: all 2s ease;
}

.about-thumb img:hover {
  transform: scale(1.15);
}

/*==================================================
                        <-- VPMI Choose Us Area Area Css-->
                            ===================================================*/
.choose-us-area {
  position: relative;
  z-index: 1;
  padding: 0 0 41px;
}

.choose-us-area::before {
  position: absolute;
  content: "";
  background: url(../imgs/choose-shape.png);
  width: 55%;
  height: 100%;
  z-index: -1;
  right: -38px;
  background-size: contain;
  background-repeat: no-repeat;
}

.choose-us-area::after {
  position: absolute;
  content: "";
  background: url(../imgs/office.jpg);
  width: 47%;
  height: 100%;
  z-index: -1;
  left: 0;
  top: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.choose-us-left {
  margin-top: 130px;
}

.choose-us-box {
  background: #ffffff;
  padding: 20px 20px 1px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}

.choose-us-box::before {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  background: var(--brand-primary);
  top: 0;
  left: 0;
  z-index: -1;
  transition: 0.5s;
}

.choose-us-box:hover::before {
  width: 100%;
}

.choose-us-box.active::before {
  width: 100%;
}

.choose-icon-thumb {
  float: left;
  margin-right: 43px;
  margin-top: -5px;
  position: relative;
}

.choose-icon-thumb img {
  transition: 0.5s;
}

.choose-us-box:hover .choose-icon-thumb img {
  filter: brightness(0) invert(1);
}

.choose-icon-thumb::before {
  position: absolute;
  content: "";
  height: 44px;
  width: 1px;
  background: #d9d9d9;
  right: -23px;
}

.choose-content p {
  font-size: 16px;
  line-height: 28px;
  color: #003d4d;
  font-weight: 500;
  transition: 0.5s;
}

.choose-us-box:hover .choose-content p {
  color: #fff;
}

.choose-content.active p {
  color: #fff;
}

/*==================================================
                            <-- VPMI Apartment Area Area Css-->
                                ===================================================*/
.apartment-area {
  padding-bottom: 20px;
}

.apartment-single-box.inner {
  position: relative;
  margin-top: 60px;
}

.apartmnet-thumb {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.apartmnet-thumb img {
  transition: all 2s ease;
}

.apartmnet-thumb img:hover {
  transform: scale(1.15);
}

.apartment-text {
  position: absolute;
  bottom: -105px;
  text-align: center;
  width: 321px;
  height: 100px;
  border-radius: 0px 0px 8px 8px;
  background-color: var(--brand-primary);
  padding: 20px 0;
  transition: 0.5s;
  left: -7px;
}

.apartment-single-box:hover .apartment-text {
  bottom: 0;
}

.apartment-text h4 {
  font-size: 24px;
  line-height: 30px;
  color: #ffffff;
  font-weight: 500;
  margin-left: 94px;
  transition: all 2s ease;
}

.apartment-single-box:hover .apartment-text h4 {
  margin-left: 0;
}

.apartment-text h6 {
  font-size: 20px;
  line-height: 36px;
  color: #ffffff;
  font-weight: 400;
  margin-right: 94px;
  transition: all 2s ease;
}

.apartment-single-box:hover .apartment-text h6 {
  margin-right: 0;
}

/*==================================================
                                <-- VPMI Portfolio Area Area Css-->
                                    ===================================================*/

.portfolio-area {
  padding-bottom: 20px;
  background-color: #f2f6f7;
}

.project-menu {
  margin-bottom: 60px;
  display: inline-block;
}

ul.project-menu {
  list-style: none;
}

.project-menu li a {
  display: inline-block;
  padding: 20px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
}

.project-menu .active a {
  position: relative;
  color: #fff;
  z-index: 1;
  text-decoration: underline;
  background: var(--brand-primary);
}

/* portfio single box */

.portfolio-single-box {
  position: relative;
}

.portfolio-thumb {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.portfolio-thumb::before {
  position: absolute;
  content: "";
  height: 120px;
  width: 90%;
  background: #fff;
  bottom: 0;
  /* clip-path: ellipse(53% 62% at 50% -21%); */
  transform: rotate(180deg);
  left: 0;
  right: 0;
  margin: auto;
}

.portfolio-thumb::after {
  position: absolute;
  content: "";
  height: 0;
  width: 90%;
  background: var(--brand-primary);
  bottom: 0;
  /* clip-path: ellipse(53% 62% at 50% -21%); */
  transform: rotate(180deg);
  left: 0;
  right: 0;
  margin: auto;
  transition: 0.5s;
  z-index: 9;
}

.portfolio-single-box:hover .portfolio-thumb::after {
  height: 120px;
}

.portfolio-thumb img {
  width: 100%;
}

.portfolio-icon {
  position: absolute;
  top: 15px;
  right: 20px;
}

.portfolio-icon a {
  width: 81px;
  height: 81px;
  background-color: #ffffff;
  text-align: center;
  line-height: 88px;
  font-size: 38px;
}

.portfolio-icon a i {
  border: 1px dashed #003d4d;
  padding: 6px 12px 0;
}

.portfolio-content {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 99;
}

.portfolio-content h4 a {
  font-size: 20px;
  line-height: 30px;
  color: var(--brand-primary);
  font-weight: 400;
  text-decoration: none;
  transition: 0.5s;
}

.portfolio-single-box:hover .portfolio-content h4 a {
  color: #fff;
}

.portfolio-content h6 {
  font-size: 26px;
  line-height: 46px;
  color: #003d4d;
  font-weight: 600;
  transition: 0.5s;
}

.portfolio-single-box:hover .portfolio-content h6 {
  color: #fff;
}

/*==================================================
                                    <-- VPMI Apartment Area Area Css-->
                                        ===================================================*/

/* apartment box css */

.apartment-box {
  background: #f2f6f7;
  padding: 70px 40px 75px;
}

.apartment-content h2 {
  font-size: 36px;
  line-height: 46px;
  color: #003d4d;
  font-weight: 600;
}

.apartment-content p {
  font-size: 18px;
  line-height: 50px;
  color: #5b5858;
  font-weight: 400;
}

.form-box.inner {
  position: relative;
}

.form-box.inner input {
  background: none;
  border: none;
  border-bottom: 1px solid #b5c3c6;
  border-radius: 0;
  outline: 0;
  margin-bottom: 50px;
}

.form-box.inner input::placeholder {
  font-size: 16px;
  line-height: 30px;
  color: #5b5858;
  font-weight: 400;
}

.form-box.inner i {
  position: absolute;
  top: 15px;
  right: 0;
  font-size: 22px;
}

.form-box.inner textarea {
  background: none;
  border: none;
  outline: 0;
  border-bottom: 1px solid #b5c3c6;
  height: 76px;
  border-radius: 0;
  margin-bottom: 48px;
}

.form-box.inner textarea::placeholder {
  font-size: 16px;
  line-height: 30px;
  color: #5b5858;
  font-weight: 400;
}

.checkbox-box input {
  height: 20px;
  width: 20px;
  border: 1px solid #b5c3c6;
  background: #b5c3c6;
  position: relative;
  top: 5px;
}

.checkbox-box label {
  padding-left: 5px;
  font-size: 16px;
  color: #5b5858;
  font-weight: 400;
}

/*==================================================
                                        <-- VPMI Video Area Area Css-->
                                            ===================================================*/

.video-area {
  background: url(../imgs/mall.jpg);
  height: 520px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.single-video {
  text-align: center;
}

.video-icon a {
  font-size: 24px;
  font-weight: 500;
  text-decoration: none;
  color: #ffff;
  width: 91px;
  height: 76px;
  border: 1px solid #fff;
  display: inline-block;
  line-height: 72px;
  text-align: center;
  box-shadow: 0 0 rgba(255, 255, 255, 0.1), 0 0 0 15px rgba(255, 255, 255, 0.1),
    0 0 0 30px rgba(255, 255, 255, 0.1);
  animation: ripple-wave1 1s linear infinite;
  animation-play-state: running;
  -webkit-animation: ripple-wave1 1s linear infinite;
  transition: 0.5s;
}

.video-icon a:hover {
  background: var(--brand-primary);
}

@keyframes ripple-wave1 {
  to {
    box-shadow: 0 0 0 15px rgba(255, 255, 255, 0.1),
      0 0 0 30px rgba(255, 255, 255, 0.1), 0 0 0 45px rgba(255, 255, 255, 0.02);
  }
}

/*==================================================
                                            <-- VPMI Blog Area Area Css-->
                                                ===================================================*/

.blog-area {
  padding: 118px 0 120px;
}

.blog-items-box {
  border-radius: 3px;
  position: relative;
  filter: drop-shadow(0.5px 0.866px 25.5px rgba(0, 0, 0, 0.08));
  background-color: #ffffff;
  overflow: hidden;
  padding: 22px 12px 33px;
}

.blog-thumb {
  overflow: hidden;
  border-radius: 3px;
}

.blog-thumb img {
  width: 100%;
  transition: all 2s ease;
}

.blog-items-box:hover .blog-thumb img {
  transform: scale(1.15);
}

.blog-content {
  padding: 0 29px 0;
}

.blog-meta {
  margin: 25px 0 12px;
}

.blog-meta span {
  font-size: 16px;
  line-height: 34px;
  font-weight: 400;
  padding-right: 50px;
}

.blog-meta span i {
  color: var(--brand-primary);
}

.blog-title {
  margin-bottom: 18px;
  position: relative;
}

.blog-title h4 a {
  font-size: 24px;
  line-height: 34px;
  text-decoration: none;
  color: #292930;
  font-weight: 500;
  transition: 0.5s;
}

.blog-items-box:hover .blog-title h4 a {
  color: var(--brand-primary);
}

.blog-bottom-shape {
  display: inline-block;
  margin-right: 15px;
}

.blog-bottom-title {
  margin-right: 60px;
  display: inline-block;
}

.blog-bottom-title h5 {
  font-size: 18px;
}

.blog-btn {
  display: inline-block;
}

.blog-btn a {
  font-size: 18px;
  line-height: 34px;
  text-decoration: underline;
  color: var(--brand-primary);
  font-weight: 500;
}

.blog-btn a i {
  margin-left: 8px;
}

/*==================================================
                                                <-- VPMI Brand Area Css-->
                                                    ===================================================*/

.brand-area {
  position: relative;
  padding: 0;
}

.brand-area::before {
  position: absolute;
  content: "";
  width: 775px;
  height: 1px;
  background-color: #e1e1e1;
  top: 16px;
}

.brand-area::after {
  position: absolute;
  width: 775px;
  height: 1px;
  background-color: #e1e1e1;
  top: 16px;
  right: 0;
}

.brand-title h4 {
  text-align: center;
  font-size: 24px;
  line-height: 32px;
  color: #696969;
  font-weight: 500;
  position: relative;
}

.brand-thumb {
  position: relative;
}

.brand-thumb img {
  transition: 0.5s;
}

.brand-thumb img:hover {
  transform: scale(1.15);
}

.footer-area {
  background-color: #003d4d;
  padding: 116px 0 0px;
  position: relative;
}

/* footer widget */

.footer-wiget-text h4 {
  margin: 25px 0 22px;
  font-size: 16px;
  line-height: 28px;
  color: #ffffff;
  font-weight: 400;
}

.footer-wiget-title h4 {
  color: #fff;
  font-size: 24px;
  font-style: normal;
  line-height: 34px;
  font-weight: 600;
  padding: 0 0 18px;
  transition: 0.5s;
}

.footer-wiget-title h4 {
  color: #fff;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 34px;
  padding: 0 0 27px;
  position: relative;
}

.footer-wiget-title h4::before {
  position: absolute;
  content: "";
  width: 100px;
  height: 1px;
  background: var(--brand-primary);
  bottom: 17px;
}

.footer-socilal-title h4 {
  opacity: 0.8;
  font-size: 22px;
  line-height: 34px;
  color: #ffffff;
  font-weight: 500;
  margin-bottom: 16px;
  padding: 0 20px;
  position: relative;
}

.footer-socilal-title h4::before {
  position: absolute;
  content: "";
  width: 3px;
  height: 30px;
  background: var(--brand-primary);
  left: 0px;
}

/* footer social */

.footer-social ul li {
  list-style: none;
  display: inline-block;
  margin-right: 7px;
}

.footer-social ul li a i {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  display: inline-block;
  border: 1px dashed #1a3851;
  font-size: 16px;
  color: #fff;
  transition: 0.5s;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

.footer-social ul li a:hover i {
  color: var(--brand-primary);
  border: 1px dashed var(--brand-primary);
}

.footer-social ul li a i::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 0px;
  height: 100%;
  content: "";
  bottom: 0;
  background: #fff;
  z-index: -1;
  transition: 0.5s;
  margin: auto;
}

.footer-social ul li a i:hover::after {
  width: 100%;
  left: 0;
}

.footer-wiget-menu ul {
  list-style: none;
}

.footer-wiget-menu ul li {
  list-style: none;
  margin-top: 0px;
}

.footer-wiget-menu ul li a {
  display: inline-block;
  text-decoration: none;
  font-size: 18px;
  font-weight: 400;
  transition: 0.5s;
  margin: 0;
  line-height: 50px;
  color: #ffffff;
}

.footer-wiget-menu ul li a:hover {
  color: var(--brand-primary);
  margin-left: 10px;
}

.footer-wiget-menu ul li a i {
  color: var(--brand-primary);
}

.footer-widget-discription p {
  font-size: 16px;
  line-height: 24px;
  color: #c1c1c1;
  font-weight: 400;
  margin: 12px 0 48px;
}

.form-field {
  position: relative;
}

.form-field input {
  background: #ffff;
  outline: 0;
  border: 0;
  border-bottom: 1px solid #fff;
  width: 270px;
  height: 64px;
  padding: 0 18px;
}

.form-field input::placeholder {
  font-size: 16px;
  line-height: 52px;
  color: #939393;
  font-weight: 400;
}

button.newsletter-button {
  top: 4px;
  position: absolute;
  right: 52px;
}

button.newsletter-button i {
  width: 54px;
  height: 54px;
  display: inline-block;
  border: none;
  outline: none;
  line-height: 54px;
  color: #fff;
  background: var(--brand-primary);
}

.row.line {
  border-top: 1px solid var(--brand-primary);
  padding: 18px 0 8px;
}

.copyright-text {
  margin-top: 15px;
  text-align: center;
}

.copyright-text p {
  font-size: 18px;
  color: #ffffff;
  font-weight: 400;
}

.copyright-text p a {
  color: var(--brand-primary);
}

/*===============================================================
                                                    <-- Home Page Two Css-->
                                                        =================================================================*/

/* BANNER AREA CSS */

.banner-area {
  position: relative;
  height: 900px;
  z-index: 1;
}

.banner-area::before {
  position: absolute;
  content: "";
  width: 1012px;
  height: 100%;
  background: #f2f6f7;
  z-index: -1;
}

.slider-sub-title.style-two h4 {
  color: #003d4d;
  font-size: 20px;
  margin-bottom: 20px;
}

.slider-main-title.style-two h1 {
  color: #003d4d;
  font-size: 90px;
  line-height: 102px;
}

.slider-discripton.style-two p {
  color: #5b5858;
  width: 83%;
  margin: 27px 0 43px;
}

/* counter box */

.counter-content h4 {
  font-size: 24px;
  line-height: 24px;
  color: #003d4d;
  font-weight: 500;
  display: inline-block;
}

.counter-content span {
  font-size: 24px;
  color: #003d4d;
  position: relative;
  top: -2px;
  left: -5px;
}

.counter-content p {
  font-size: 20px;
  line-height: 24px;
  color: #5b5858;
  font-weight: 500;
}

/* banner slider */

.banner-slider {
  position: relative;
  left: 35%;
}

/* owl css */

.banner-area .owl-dots {
  position: absolute;
  bottom: -1px;
  width: 504px;
  height: 176px;
  background-color: #f2f6f7;
  line-height: 176px;
  text-align: center;
}

.banner-area .owl-dot.active {
  height: 17px;
  width: 17px;
  background: var(--brand-primary);
  border-radius: 50%;
}

/*===============================================================
                                                        <-- About Style Two Css-->
                                                            =================================================================*/

.about-shape3 {
  position: absolute;
  bottom: 47px;
  left: 27px;
  z-index: -1;
}

.about-shape3 img {
  width: 95%;
}

/* about list */

.about-list {
  margin-bottom: 40px;
}

.about-list ul li {
  list-style: none;
  opacity: 0.949;
  font-size: 20px;
  font-weight: 500;
  color: #003d4d;
  margin-bottom: 17px;
  position: relative;
  padding: 0 25px;
}

.about-list ul li::before {
  position: absolute;
  content: "";
  width: 9px;
  height: 9px;
  background-color: #2393c3;
  left: 0;
  bottom: 8px;
}

/* process bar */

/* process bar css */

.process-ber-plugin {
  margin-bottom: 62px;
}

span.process-bar {
  position: relative;
  font-size: 24px;
  color: #003d4d;
  font-weight: 500;
}

.barfiller {
  width: 530px;
  height: 13px;
  position: relative;
  margin-bottom: 25px;
  margin-top: 15px;
  background-color: #003d4d;
}

.barfiller .tipWrap {
  display: none;
}

.barfiller .tip {
  font-size: 18px;
  color: #252638;
  font-weight: 500;
  top: -42px;
  padding: 1px 6px;
  left: 0px;
  position: absolute;
}

.barfiller .fill {
  display: block;
  position: relative;
  width: 0px;
  height: 100%;
  z-index: 1;
  left: -6px;
}

.stat-bar:nth-of-type(1) .stat-bar-rating {
  animation-delay: 0.25s;
  -webkit-animation-delay: 0.25s;
}

span.fill {
  background: var(--brand-primary) !important;
  transform: skewX(45deg);
}

/* about info */

.about-info {
  display: inline-flex;
  align-items: center;
}

.about-bottom {
  display: inline-flex;
  align-items: center;
  margin-left: 46px;
}

.about-bottom-shape {
  margin-right: 26px;
}

.about-content h5 {
  font-size: 22px;
  color: #003d4d;
  font-weight: 500;
  margin-bottom: 5px;
}

.about-content span {
  font-size: 16px;
  color: #5b5858;
  font-weight: 400;
}

/*===============================================================
                                                            <-- Team Area Css-->
                                                                =================================================================*/

.team-area {
  padding: 118px 0 210px;
}

.team-single-box {
  position: relative;
  background: #f2f6f7;
  padding: 32px 20px 0px;
  display: inline-block;
}

.team-thumb {
  position: relative;
  left: -55px;
  overflow: hidden;
}

.team-thumb img {
  transition: all 2s ease;
}

.team-single-box:hover .team-thumb img {
  transform: scale(1.15);
}

.team-social-icon {
  position: absolute;
  top: 100px;
  right: 15px;
}

.team-social-icon ul li {
  list-style: none;
  display: block;
  margin-bottom: 14px;
}

.team-social-icon ul li a {
  font-size: 22px;
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  display: inline-block;
  line-height: 40px;
  text-align: center;
  position: relative;
  z-index: 1;
  transition: 0.5s;
}

.team-social-icon ul li a:hover {
  color: #fff;
}

.team-social-icon ul li a::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 0px;
  height: 100%;
  content: "";
  bottom: 0;
  background: var(--brand-primary);
  z-index: -1;
  transition: 0.5s;
  margin: auto;
}

.team-social-icon ul li a:hover::before {
  width: 100%;
  left: 0;
}

.team-content {
  padding: 22px 59px;
}

.team-content h4 a {
  font-size: 25px;
  line-height: 30px;
  color: #003d4d;
  font-weight: 600;
  text-decoration: none;
  transition: 0.5s;
}

.team-single-box:hover .team-content h4 a {
  color: var(--brand-primary);
}

.team-content h6 {
  font-size: 16px;
  line-height: 37px;
  color: #5b5858;
  font-weight: 400;
}

/*===============================================================
                                                                <-- Video Area Css-->
                                                                    =================================================================*/

.video-slider {
  background: #003d4d;
  height: 537px;
}

.video-item {
  background: url(../imgs/video-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 710px;
  position: relative;
  top: -86px;
}

.slide-video {
  position: absolute;
  top: 50%;
  transform: translateX(-50%);
  left: 50%;
}

.owl-prev {
  position: absolute;
  top: 50%;
  left: -16%;
}

.owl-prev i {
  width: 52px;
  height: 52px;
  border: 1px dotted #1585b5;
  display: inline-block;
  text-align: center;
  line-height: 52px;
  font-size: 20px;
  color: #fff;
  transition: 0.5s;
}

.owl-prev:hover i {
  background: #fff;
  color: #1585b5;
}

.owl-next {
  position: absolute;
  top: 50%;
  right: -15%;
}

.owl-next i {
  width: 52px;
  height: 52px;
  border: 1px dotted #1585b5;
  display: inline-block;
  text-align: center;
  line-height: 52px;
  color: #fff;
  font-size: 20px;
  transition: 0.5s;
}

.owl-next:hover i {
  background: #fff;
  color: #1585b5;
}

/*===============================================================
                                                                    <-- Service Area Style Two Css-->
                                                                        =================================================================*/

.service-area.style-two {
  padding: 116px 0 90px;
}

.service-items-box {
  filter: drop-shadow(0px 1px 25.5px rgba(0, 0, 0, 0.15));
  background-color: #ffffff;
  padding: 40px 30px 40px;
  margin-bottom: 30px;
  position: relative;
  top: 0;
  transition: 0.5s;
}

.service-items-box:hover {
  top: -10px;
}

.service-items-icon {
  height: 73px;
  width: 73px;
  background: #f2f6f7;
  text-align: center;
  line-height: 70px;
  margin-bottom: 26px;
}

.service-items-content h4 a {
  font-size: 28px;
  color: var(--brand-primary);
  font-weight: 600;
  text-decoration: none;
  transition: 0.5s;
}

.service-items-box:hover .service-items-content h4 a {
  color: #003d4d;
}

.service-items-content p {
  font-size: 16px;
  line-height: 24px;
  color: #5b5858;
  font-weight: 400;
  margin: 14px 0 20px;
  border-bottom: 1px solid #f2f6f7;
  padding: 0px 0 22px;
}

.service-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.service-btn a {
  font-size: 18px;
  line-height: 24px;
  color: #003d4d;
  font-weight: 500;
  text-decoration: none;
  transition: 0.5s;
}

.service-items-box:hover .service-btn a {
  color: var(--brand-primary);
}

.service-btn i {
  color: var(--brand-primary);
  font-size: 20px;
  transition: 0.5s;
  position: relative;
  left: 0;
}

.service-items-box:hover .service-btn i {
  color: #003d4d;
  left: 10px;
}

/*===============================================================
                                                                        <-- Testi Area Css-->
                                                                            =================================================================*/

.testi-area {
  background: url(../imgs/testi-bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  padding: 116px 0 122px;
}

.testi-itmes-box {
  background: #f2f6f7;
  border-radius: 0px 60px 0px 60px;
  position: relative;
  padding: 38px 30px 65px;
  position: relative;
  z-index: 1;
}

.testi-itmes-box::after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: var(--brand-primary);
  border-radius: 0px 60px 0px 60px;
  clip-path: polygon(50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 50%);
  z-index: -1;
  transition: 0.5s;
}

.testi-itmes-box:hover::after {
  clip-path: polygon(
    25% -70%,
    75% -70%,
    120% 50%,
    75% 170%,
    25% 170%,
    -20% 50%
  );
}

.testi-items {
  border-bottom: 1px solid #e4e4e4;
  padding: 17px 0 33px;
  margin-bottom: 36px;
}

.testi-thumb {
  float: left;
  margin-right: 18px;
  margin-top: -10px;
}

.testi-title h4 {
  font-size: 32px;
  color: #003d4d;
  font-weight: 600;
  transition: 0.5s;
}

.testi-itmes-box:hover .testi-title h4 {
  color: #fff;
}

.testi-title span {
  font-size: 17px;
  line-height: 32px;
  color: #5b5858;
  font-weight: 400;
  transition: 0.5s;
}

.testi-itmes-box:hover .testi-title span {
  color: #fff;
}

.testi-content p {
  font-size: 20px;
  line-height: 36px;
  color: #5b5858;
  font-weight: 400;
  transition: 0.5s;
}

.testi-itmes-box:hover .testi-content p {
  color: #fff;
}

.testi-icon {
  position: absolute;
  right: 32px;
  bottom: 14px;
}

.testi-icon i {
  font-size: 100px;
  opacity: 0.4;
  transition: 0.5s;
}

.testi-itmes-box:hover .testi-icon i {
  color: #fff;
}

/*===============================================================
                                                                            <-- Abou Area Style Three Css-->
                                                                                =================================================================*/

.about-skill h4 {
  font-size: 18px;
  color: #5b5858;
  font-weight: 400;
  border: 1px solid #e4e4e4;
  padding: 18px 35px;
  position: relative;
  z-index: 1;
  transition: 0.5s;
  margin-bottom: 20px;
}

.about-skill h4:hover {
  color: #ffff;
}

.about-skill h4::before {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  background: #1585b5;
  top: 0;
  right: 0;
  z-index: -1;
  transition: 0.5s;
}

.about-skill h4:hover::before {
  width: 100%;
  left: 0;
}

.about-skill h4 i {
  font-size: 12px;
  width: 22px;
  height: 22px;
  line-height: 21px;
  background: #1585b5;
  display: inline-block;
  text-align: center;
  color: #fff;
  border-radius: 50%;
  margin-right: 9px;
  position: relative;
  top: -3px;
}

/*===============================================================
                                                                                <-- Catagori Area Css-->
                                                                                    =================================================================*/

.catagori-area {
  padding: 115px 0 0px;
  background-color: #003d4d;
}

.catagori-search-box {
  filter: drop-shadow(0px 1px 20px rgba(0, 0, 0, 0.08));
  background-color: #ffffff;
  padding: 33px 70px 46px;
  margin-bottom: -67px;
}

.catagori-search-title h4 {
  font-size: 22px;
  line-height: 82px;
  color: #003d4d;
  font-weight: 500;
  position: relative;
  margin-bottom: 36px;
}

.catagori-search-title h4::before {
  position: absolute;
  content: "";
  width: 430px;
  height: 1px;
  background-color: #e1e1e1;
  bottom: 0px;
}

.catagori-search-title h4::after {
  position: absolute;
  content: "";
  width: 180px;
  height: 4px;
  background-color: var(--brand-primary);
  bottom: -1px;
  left: 50px;
}

.catagori-title h4 {
  font-size: 22px;
  color: #003d4d;
  font-weight: 500;
  margin-bottom: 25px;
}

.form-group.catagori {
  position: relative;
  top: 48px;
}

.form-group.catagori button {
  height: 60px;
}

/*===============================================================
                                                                                    <-- Blog Area Style Two Css-->
                                                                                        =================================================================*/
.blog-area.style-two {
  padding: 180px 0 265px;
}

.blog-items-box.style-two {
  border-radius: 0;
  padding: 0;
  background: none;
  filter: none;
  overflow: inherit;
}

.blog-content.style-two {
  border-radius: 10px;
  filter: drop-shadow(1.5px 2.598px 3.5px rgba(0, 0, 0, 0.1));
  background-color: #ffffff;
  position: absolute;
  bottom: -144px;
  width: 374px;
  height: 217px;
  left: 0;
  right: 0;
  margin: auto;
}

.blog-title.style-two {
  margin-bottom: 40px;
}

.blog-title.style-two h4 a {
  font-size: 23px;
  color: #003d4d;
  font-weight: 600;
}

.blog-meta.style-two {
  margin: 33px 0 5px;
}

.blog-meta.style-two span {
  color: #003d4d;
  font-weight: 500;
}

.blog-meta.style-two span i {
  color: #003d4d;
}

.blog-button {
  display: inline-block;
  margin-right: -13px;
}

.blog-button a {
  font-size: 18px;
  color: #003d4d;
  font-weight: 400;
  text-decoration: none;
  border-radius: 10px;
  background-color: #f2f6f7;
  padding: 13px 24px;
  position: relative;
  transition: 0.5s;
}

.blog-button a:hover {
  color: #ffff;
}

.blog-button a::before {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  background: var(--brand-primary);
  border-radius: 10px;
  transition: 0.5s;
}

.blog-button a:hover::before {
  width: 100%;
  left: 0;
}

.blog-button.two a {
  background: #e7e8e3;
}

.blog-button a i {
  position: relative;
  top: 3px;
}

/*===============================================================
                                                                                        <-- Footer Style Two Css-->
                                                                                            =================================================================*/

.footer-content h2 {
  font-size: 36px;
  line-height: 24px;
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 27px;
}

.footer-content p {
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
  font-weight: 400;
}

.footer-btn {
  margin-left: 77px;
}

/*===============================================================
                                                                                            <-- All Inner Page Css-->
                                                                                                =================================================================*/
/* breatcome
                                                                                                area css */

.breatcome-area {
  background: url(../imgs/bratcome-bg.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  padding: 154px 0;
}

.breatcome-content {
  position: relative;
}

.breatcome-discription p {
  text-align: center;
  font-size: 28px;
  line-height: 27px;
  color: #ffffff;
  font-weight: 400;
}

.breatcome-title h1 {
  color: #fff;
  font-size: 60px;
  font-weight: 700;
  margin-bottom: 19px;
  text-align: center;
}

.bratcome-text {
  position: absolute;
  left: 0;
  bottom: -173px;
  background: var(--brand-primary);
  padding: 23px 35px;
  border-radius: 5px 5px 0 0;
}

.bratcome-text ul {
  list-style: none;
}

.bratcome-text ul li {
  display: inline-block;
  margin-right: 12px;
  font-size: 22px;
  color: #ffffff;
  font-weight: 500;
  line-height: 27px;
  font-weight: 500;
}

.bratcome-text ul li a {
  display: inline-block;
  font-size: 22px;
  line-height: 27px;
  color: #ffffff;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: 0.5s;
}

.bratcome-text ul li a:hover {
  color: #003d4d;
}

.bratcome-text ul li a::before {
  position: absolute;
  content: "/";
  left: 62px;
}

/*==================================================
                                                                                                <-- About Inner Page
                                                                                                    Css-->
                                                                                                    ===================================================*/

/*
                                                                                                    team*/
.team-area.inner-page {
  padding: 110px 0 122px;
}

/* blog
                                                                                                    */

.blog-area.style-two.inner-page {
  padding: 120px 0 265px;
}

/*==================================================
                                                                                                    <-- Team Inner Page
                                                                                                        Css-->
                                                                                                        ===================================================*/

.team-area.inner-two {
  padding: 118px 0 122px;
}

.feature-area.inner-page {
  padding: 120px 0 200px;
}

.service-details-area {
  padding: 120px 0 72px;
}

.widget-categories-box {
  margin-bottom: 30px;
}

.widget-categories-menu ul li {
  list-style: none;
  padding: 15px;
  position: relative;
  margin-bottom: 17px;
  background: #f8f6f1;
  position: relative;
  z-index: 1;
  transition: 0.5s;
}

.widget-categories-menu ul li::after {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0%;
  height: 100%;
  left: 0;
  right: 0;
  margin: auto;
  transition: all 0.5s linear 0s;
  background-color: var(--brand-primary);
  content: "";
  z-index: -1;
}

.widget-categories-menu ul li:hover::after {
  width: 100%;
}

.widget-categories-menu ul li a {
  display: block;
  overflow: hidden;
  text-decoration: none;
  font-size: 22px;
  line-height: 27px;
  color: #003d4d;
  font-weight: 500;
  transition: 0.5s;
}

.widget-categories-menu ul li:hover a {
  color: #fff;
}

.widget-categories-menu ul li a span {
  float: right;
}

/*
                                                                                                                widget
                                                                                                                contact
                                                                                                                box
                                                                                                                */

.widget-contact-box {
  background: url(../imgs/widget-s-thumb.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  text-align: center;
  padding: 63px 30px 57px;
  margin-bottom: 40px;
}

.widget-contact-title h4 {
  font-size: 36px;
  line-height: 48px;
  color: #ffffff;
  font-weight: 600;
  margin-bottom: 27px;
}

.widget-contact-icon {
  width: 81px;
  height: 81px;
  display: inline-block;
  background: #fff;
  line-height: 75px;
  text-align: center;
  border-radius: 50%;
  margin-bottom: 34px;
}

.widget-contact-content h6 {
  font-size: 16px;
  line-height: 48px;
  color: #ededed;
  font-weight: 400;
}

.widget-contact-content h4 {
  font-size: 30px;
  line-height: 48px;
  color: #ededed;
  font-weight: 600;
}

/*
                                                                                                                widget
                                                                                                                pdf
                                                                                                                btn
                                                                                                                */

.widget-download-btn a {
  font-size: 24px;
  color: #ffffff;
  font-weight: 600;
  background: var(--brand-primary);
  text-decoration: none;
  padding: 22px 81px;
  transition: 0.5s;
}

.widget-download-btn a:hover {
  background: #003d4d;
}

.widget-download-btn a i {
  font-size: 38px;
  position: relative;
  top: 4px;
}

/*
                                                                                                                service
                                                                                                                details
                                                                                                                right
                                                                                                                bar
                                                                                                                */

.service-details-thumb {
  overflow: hidden;
  margin-bottom: 33px;
}

.service-details-thumb img {
  width: 100%;
  transition: all 2s ease;
}

.service-details-thumb img:hover {
  transform: scale(1.15);
}

.service-details-title h4 {
  font-size: 40px;
  color: #003d4d;
  font-weight: 600;
  margin-bottom: 12px;
}

.service-detials-discription {
  margin-bottom: 32px;
}

.service-detials-discription p {
  font-size: 16px;
  line-height: 24px;
  color: #003d4d;
  font-weight: 400;
}

.service-list-title h4 {
  font-size: 24px;
  color: #003d4d;
  font-weight: 600;
  margin-bottom: 12px;
  border-bottom: 1px solid #d5d5d5;
  padding: 0px 0 19px;
}

.service-detials-list span {
  font-size: 16px;
  line-height: 32px;
  color: #003d4d;
  font-weight: 500;
  padding: 0 28px 0;
  display: block;
  position: relative;
}

.service-detials-list span::before {
  position: absolute;
  content: "";
  width: 14px;
  height: 14px;
  background-color: #1585b5;
  left: 0;
  top: 9px;
}

/*==================================================
                                                                                                                <-- Project
                                                                                                                    Grid
                                                                                                                    Inner
                                                                                                                    Page
                                                                                                                    Css-->
                                                                                                                    ===================================================*/
.project-grid-area {
  padding: 120px 0 94px;
}

.project-grid-thumb {
  position: relative;
  overflow: hidden;
  margin-bottom: 29px;
}

.project-grid-thumb img {
  transition: all 2s ease;
}

.project-grid-thumb img:hover {
  transform: scale(1.15);
}

.project-grid-content {
  position: absolute;
  bottom: -100px;
  width: 554px;
  height: 128px;
  background-color: #ebebeb;
  padding: 20px 28px 0;
  left: 16px;
  border-radius: 0px 30px 0px 0px;
  opacity: 0;
  transition: 0.5s;
}

.project-grid-thumb:hover .project-grid-content {
  bottom: 10px;
  opacity: 1;
}

.project-grid-content h4 a {
  font-size: 26px;
  line-height: 52px;
  color: #003d4d;
  font-weight: 600;
  text-decoration: none;
  transition: 0.5s;
}

.project-grid-content h4 a:hover {
  color: var(--brand-primary);
}

.project-grid-content p {
  font-size: 18px;
  color: #003d4d;
  font-weight: 400;
}

.project-grid-icon {
  position: absolute;
  top: -50px;
  right: 20px;
  opacity: 0;
  transition: all 2s ease;
}

.project-grid-thumb:hover .project-grid-icon {
  top: 20px;
  opacity: 1;
}

.project-grid-icon a {
  color: #fff;
  font-size: 32px;
  width: 90px;
  height: 90px;
  background-color: var(--brand-primary);
  line-height: 90px;
  text-align: center;
  border-radius: 30px 0px 0px 0px;
  transition: 0.5s;
  display: inline-block;
}

.project-grid-icon a:hover {
  background: #fff;
  color: var(--brand-primary);
}

/*==================================================
                                                                                                                    <-- Project
                                                                                                                        Details
                                                                                                                        Inner
                                                                                                                        Page
                                                                                                                        Css-->
                                                                                                                        ===================================================*/

.project-detials-area {
  padding: 120px 0 100px;
}

.project-details-thumb {
  margin-bottom: 55px;
  overflow: hidden;
}

.project-details-thumb img {
  width: 100%;
  transition: all 2s ease;
}

.project-details-thumb img:hover {
  transform: scale(1.15);
}

.project-details-title h4 {
  font-size: 30px;
  color: #003d4d;
  font-weight: 600;
}

.porject-detials-discription {
  margin: 25px 0 57px;
}

.porject-detials-discription p {
  font-size: 16px;
  line-height: 24px;
  color: #434141;
  font-weight: 400;
}

.porject-detials-discription.inner {
  margin: -14px 0 0;
}

/*
                                                                                                                        accrodion
                                                                                                                        css
                                                                                                                        */

.accordion li {
  list-style: none;
  position: relative;
  z-index: 1;
  margin-bottom: -7px;
  border-radius: 3px;
}

.accordion li a {
  display: block;
  cursor: pointer;
  padding: 12px 34px 12px;
  text-decoration: none;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f4f4f9;
}

.accordion li a span {
  font-size: 20px;
  color: #003d4d;
  font-weight: 600;
}

.accordion li a i {
  width: 36px;
  height: 36px;
  background: #003d4d;
  display: inline-block;
  text-align: center;
  line-height: 38px;
  color: #fff;
}

.accordion a.active {
  background: #f4f4f9;
  border: none;
}

.accordion a.active i {
  color: #fff;
  background: var(--brand-primary);
  border: none;
  margin-bottom: 0;
  transform: rotate(90deg);
}

.accordion li p {
  display: none;
  font-size: 16px;
  font-weight: 400;
  line-height: 26px;
  color: #434141;
  background: #f4f4f9;
  padding: 11px 38px 28px;
  width: 100%;
  margin: 0;
  position: relative;
  top: -24px;
}

.accordion a.active:before {
  display: none;
}

a.active {
  color: #1c1632;
}

ul.accordion ul li a span {
  color: #fff;
}

/*==================================================
                                                                                                                        <-- Project
                                                                                                                            Details
                                                                                                                            Inner
                                                                                                                            Page
                                                                                                                            Css-->
                                                                                                                            ===================================================*/

.team-details-area {
  padding: 122px 0 0;
}

.team-author-thumb img {
  width: 100%;
}

/*
                                                                                                                            progress
                                                                                                                            bar
                                                                                                                            */

.team-details-area .process-ber-plugin {
  margin: 50px 60px 0;
}

.team-details-area .barfiller {
  margin-bottom: 40px;
}

/*
                                                                                                                            author
                                                                                                                            info
                                                                                                                            */

.row.author-info {
  background: #f8f6f1;
  padding: 35px 40px 25px;
  margin-top: -200px;
}

.team-author-exprience ul li {
  list-style: none;
  margin-bottom: 17px;
}

.team-author-exprience ul li span {
  font-size: 20px;
  color: #888888;
  font-weight: 400;
  line-height: 45px;
}

.team-author-exprience ul li h4 {
  font-size: 24px;
  color: #003d4d;
  font-weight: 600;
}

.team-author-socila {
  text-align: center;
  margin-right: -76px;
  margin-top: 24px;
}

.team-author-socila ul li {
  list-style: none;
  margin: 17px 0px 0;
}

.team-author-socila ul li a {
  display: inline-block;
  height: 40px;
  width: 40px;
  background: #ffffff;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  position: relative;
  z-index: 1;
}

.team-author-socila ul li a::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--brand-primary);
  border-radius: 50%;
  transform: scale(0);
  transition: 0.5s;
  z-index: -1;
}

.team-author-socila ul li a:hover::before {
  transform: scale(1);
}

.team-author-socila ul li a {
  transition: 0.5s;
}

.team-author-socila ul li a:hover i {
  color: #ffffff;
}

/*===============================================================
                                                                                                                            <-- Blog
                                                                                                                                Inner
                                                                                                                                page
                                                                                                                                Css-->
                                                                                                                                =================================================================*/
/*
                                                                                                                                pagination
                                                                                                                                css
                                                                                                                                */

.as-pagination {
  margin-top: 18px;
}

.as-pagination ul {
  list-style: none;
}

.as-pagination ul li {
  display: inline-block;
}

.as-pagination ul li a {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  border: 1px solid #c8c8c8;
  height: 41px;
  width: 41px;
  line-height: 41px;
  text-align: center;
  border-radius: 50%;
  margin-left: 5px;
  transition: 0.5s;
  text-decoration: none;
  position: relative;
  transition: 0.5s;
}

.as-pagination ul li a:hover {
  color: #ffffff;
}

.as-pagination ul li a::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--brand-primary);
  transform: scale(0);
  border-radius: 50%;
  z-index: -1;
  transition: 0.5s;
}

.as-pagination ul li a:hover::before {
  transform: scale(1);
}

/*===============================================================
                                                                                                                                <-- Blog
                                                                                                                                    Details
                                                                                                                                    Inner
                                                                                                                                    page
                                                                                                                                    Css-->
                                                                                                                                    =================================================================*/

.blog-details-area {
  padding: 122px 0 120px;
}

.blog-details-thumb img {
  width: 100%;
}

.blog-details-meta {
  margin: 29px 0 26px;
}

.blog-details-meta span {
  opacity: 0.902;
  font-size: 16px;
  line-height: 34px;
  color: #4d4e4f;
  font-weight: 400;
  margin-right: 27px;
}

.blog-details-meta span i {
  font-size: 22px;
  position: relative;
  top: 4px;
  margin-right: 12px;
}

.blog-details-content {
  margin-bottom: 42px;
}

.blog-details-content h4 {
  font-size: 40px;
  line-height: 28px;
  color: #003d4d;
  font-weight: 600;
  margin-bottom: 35px;
}

.blog-details-content p {
  font-size: 16px;
  line-height: 28px;
  color: #003d4d;
  font-weight: 400;
}

.blog-details-tag h6 {
  font-size: 24px;
  color: #003d4d;
  font-weight: 500;
  display: inline-block;
  margin-right: 60px;
}

.blog-details-tag {
  border: 1px solid #076d88;
  padding: 24px 38px;
  margin-bottom: 55px;
}

.blog-details-tag h6 {
  font-size: 24px;
  color: #003d4d;
  font-weight: 500;
  display: inline-block;
  margin-right: 32px;
}

.blog-details-tag a {
  font-size: 16px;
  color: #003d4d;
  font-weight: 500;
  text-decoration: none;
  display: inline-block;
  margin-right: 10px;
  border: 1px solid #eceae5;
  padding: 4px 22px;
  position: relative;
  z-index: 1;
  transition: 0.5s;
}

.blog-details-tag a:hover {
  color: #fff;
}

.blog-details-tag a:before {
  position: absolute;
  content: "";
  left: -2px;
  top: 0px;
  height: 102%;
  width: 0%;
  right: 0;
  margin: auto;
  background: var(--brand-primary);
  z-index: -1;
  border-radius: 3px;
  transition: 0.5s;
}

.blog-details-tag a:hover::before {
  width: 100%;
}

.blog-team-thumb {
  float: left;
  margin-right: 30px;
}

.blog-team-content h4 a {
  font-size: 24px;
  color: #003d4d;
  font-weight: 600;
  text-decoration: none;
}

.blog-team-content p {
  font-size: 20px;
  line-height: 30px;
  color: #003d4d;
  font-weight: 400;
  margin: 15px 0 9px;
}

.ba-blog-details-social-icons.two h6 {
  font-size: 18px;
  color: var(--brand-primary);
  font-weight: 400;
  display: inline-block;
  margin-right: 14px;
}

.ba-blog-details-social-icons.two a {
  font-size: 16px;
  margin-right: 10px;
}

.blog-team-thumb {
  float: left;
  margin-right: 30px;
  margin-top: -12px;
}

.row.blog-item {
  padding: 20px 68px 20px;
  border-top: 1px solid #076d88;
  border-bottom: 1px solid #076d88;
}

.blog-item-content h4 {
  font-size: 20px;
  color: #003d4d;
  font-weight: 500;
}

.blog-details-item.two {
  margin-left: 90px;
}

.blog-details-area .owl-prev {
  top: 0px;
  left: -58px;
}

.blog-details-area .owl-next {
  top: 0px;
  right: -58px;
}

.blog-details-area .owl-prev i {
  background: #003d4d;
}

.blog-details-area .owl-next i {
  background: #003d4d;
}

/*
                                                                                                                                    blog
                                                                                                                                    details
                                                                                                                                    comment
                                                                                                                                    */

.blog-details-comment {
  margin-top: 36px;
}

.blog-details-comment h5 {
  font-size: 30px;
  line-height: 28px;
  color: #292930;
  font-weight: 500;
  position: relative;
  margin-bottom: 36px;
}

.blog-details-comment h5::after {
  position: absolute;
  bottom: -10px;
  width: 70px;
  height: 3px;
  background: var(--brand-primary);
  content: "";
  left: 0;
}

.blog-comment-list ul li {
  list-style: none;
  margin-bottom: 0;
}

.blog-comment-box {
  position: relative;
}

.blog-comment-box::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  background: #e4e4e4;
  bottom: -30px;
}

.blog-comment-box.inner {
  margin-left: 50px;
}

.blog-comment-box.inner::before {
  display: none;
}

.blog-comment-thumb {
  float: left;
  margin-right: 24px;
  margin-top: 12px;
}

.blog-comment-thumb img {
  border-radius: 4px;
}

.blog-comment-list .title {
  margin-bottom: 5px;
  margin-left: -12px;
}

.blog-comment-list h6.title {
  color: #18191d;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

.blog-comment-list span.date {
  margin-left: -13px;
}

.content-main p {
  color: #747474;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  margin: 10px 0 0;
}

.text-sm-end a {
  display: inline-block;
  text-decoration: none;
  padding: 7px 13px;
  background: #efefef;
  border-radius: 3px;
  color: #102039;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  position: relative;
  transition: 0.5s;
  z-index: 1;
}

.text-sm-end a:hover {
  color: #fff;
}

.text-sm-end a::before {
  position: absolute;
  content: "";
  left: -2px;
  top: 0px;
  height: 102%;
  width: 0%;
  right: 0;
  margin: auto;
  background: var(--brand-primary);
  z-index: -1;
  border-radius: 3px;
  transition: 0.5s;
}

.text-sm-end a:hover::before {
  width: 100%;
}

/*
                                                                                                                                    blog
                                                                                                                                    contact
                                                                                                                                    box
                                                                                                                                    */

.blog-contact-title h4 {
  color: #18191d;
  font-size: 30px;
  font-weight: 500;
  margin-bottom: 54px;
  position: relative;
}

.blog-contact-title h4::before {
  position: absolute;
  bottom: -10px;
  width: 70px;
  height: 3px;
  background: var(--brand-primary);
  content: "";
  left: 0;
}

/*
                                                                                                                                    contact
                                                                                                                                    form
                                                                                                                                    */

.form-box input {
  width: 100%;
  height: 55px;
  background: #f8f6f1;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 0 17px;
  margin-bottom: 25px;
}

.form-box input::placeholder {
  color: #b1b1b1;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}

.form-box textarea {
  width: 100%;
  height: 145px;
  background: #f8f6f1;
  border: 1px solid #ddd;
  border-radius: 3px;
  padding: 5px 17px;
  margin-bottom: 25px;
}

.form-box textarea::placeholder {
  color: #b1b1b1;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
}

.form-box-button button {
  width: 210px;
  height: 60px;
  border-radius: 3px;
  background-color: var(--brand-primary);
  border: 0;
  outline: 0;
  font-size: 19px;
  font-weight: 500;
  color: #fff;
  position: relative;
  z-index: 1;
  transition: 0.5s;
}

.form-box-button button::before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  transform: scale(0, 1);
  opacity: 0;
  border-radius: 3px;
  z-index: -1;
  transition: 0.5s;
}

.form-box-button button:hover::before {
  background: #18191d;
  opacity: 1;
  transform: scale(1, 1);
}

.form-box-button.inner {
  text-align: center;
}

/*
                                                                                                                                    widget
                                                                                                                                    search
                                                                                                                                    box
                                                                                                                                    */

.widget_search.box {
  margin-bottom: 30px;
}

.widget_search form {
  position: relative;
}

.widget_search input {
  border-radius: 4px;
  padding-left: 20px;
  height: 60px;
  width: 100%;
  position: relative;
  color: #606060;
  font-weight: 400;
  background: #f8f6f1;
  border: none;
  outline: 0;
}

.widget_search input::placeholder {
  font-size: 16px;
  line-height: 28px;
  color: #868686;
  font-weight: 400;
}

button.icons {
  border: 0;
  font-size: 18px;
  color: #fff;
  padding: 1px 15px;
  position: absolute;
  right: 0;
  top: 0;
  height: 60px;
  width: 60px;
  background: var(--brand-primary);
  border-radius: 0 3px 3px 0;
}

/*
                                                                                                                                    widget
                                                                                                                                    recent
                                                                                                                                    box
                                                                                                                                    */

.widget-recent-box {
  background: #f8f6f1;
  padding: 50px 35px 55px;
  margin-bottom: 30px;
}

.widget-recent-title h4 {
  font-size: 30px;
  color: #003d4d;
  font-weight: 600;
  margin-bottom: 40px;
  border-bottom: 1px solid #ece6e6;
  padding: 0 0 14px;
}

.sidber-widget-recent-post {
  background: #ffffff;
  border-radius: 5px;
  padding: 16px 30px;
}

.recent-widget-thumb {
  float: left;
  margin-right: 20px;
  margin-top: 10px;
  overflow: hidden;
}

.recent-widget-thumb img {
  transition: all 2s ease;
}

.sidber-widget-recent-post:hover .recent-widget-thumb img {
  transform: scale(1.15);
}

.recent-widget-meta span {
  font-size: 14px;
  color: #4d4e4f;
  font-weight: 400;
}

.recent-widget-meta span i {
  color: var(--brand-primary);
  font-size: 12px;
  margin-right: 8px;
}

.recent-widget-title h4 a {
  font-size: 20px;
  color: #003d4d;
  font-weight: 600;
  text-decoration: none;
  transition: 0.5s;
}

.sidber-widget-recent-post:hover .recent-widget-title h4 a {
  color: var(--brand-primary);
}

/*
                                                                                                                                    widget
                                                                                                                                    recent
                                                                                                                                    menu
                                                                                                                                    */
.widget-recent-menu ul li {
  list-style: none;
  margin-bottom: 26px;
  position: relative;
  z-index: 1;
  transition: 0.5s;
  border-bottom: 1px solid #dddddd;
  padding: 0px 0 10px;
}

.widget-recent-menu ul li::before {
  position: absolute;
  right: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  transition: all 0.5s linear 0s;
  background-color: var(--brand-primary);
  content: "";
  z-index: -1;
}

.widget-recent-menu ul li:hover::before {
  width: 100%;
  right: auto;
  left: 0;
}

.widget-recent-menu ul li a {
  display: block;
  overflow: hidden;
  font-size: 16px;
  color: #4d4e4f;
  font-weight: 400;
  text-decoration: none;
  transition: 0.5s;
}

.widget-recent-menu ul li a:hover {
  color: var(--brand-primary);
}

.widget-recent-menu ul li a span {
  float: right;
}

/*
                                                                                                                                    widget
                                                                                                                                    tags
                                                                                                                                    */

.widget-tags a {
  display: inline-block;
  text-decoration: none;
  padding: 7px 13px;
  background: #fff;
  border-radius: 3px;
  font-size: 17px;
  color: #4d4e4f;
  font-style: normal;
  margin: 11px 5px;
  font-weight: 400;
  position: relative;
  transition: 0.5s;
  z-index: 1;
}

.widget-tags a:hover {
  color: #fff;
}

.widget-tags a:before {
  position: absolute;
  content: "";
  left: -2px;
  top: 0px;
  height: 102%;
  width: 0%;
  right: 0;
  margin: auto;
  background: var(--brand-primary);
  z-index: -1;
  border-radius: 3px;
  transition: 0.5s;
}

.widget-tags a:hover:before {
  width: 104%;
}

/*===============================================================
                                                                                                                                    <-- Contact
                                                                                                                                        Area
                                                                                                                                        Css-->
                                                                                                                                        =================================================================*/
.contact-area {
  padding: 120px 0 110px;
}

.row.contact {
  filter: drop-shadow(0px 1px 25.5px rgba(0, 0, 0, 0.15));
  background-color: #ffffff;
  padding: 110px 35px 70px;
}

.contact-single-box {
  background: var(--brand-primary);
  padding: 60px 18px 30px;
}

.contact-title h4 {
  font-size: 36px;
  line-height: 60px;
  color: #ffffff;
  font-weight: 600;
  border-bottom: 1px solid #38a8da;
  padding: 0 0 7px;
  margin-bottom: 30px;
}

.contact-items {
  margin-bottom: 30px;
  background: #fff;
  padding: 26px 15px;
}

.contact-icon {
  float: left;
  margin-right: 20px;
  width: 55px;
  height: 59px;
  background-color: #003d4d;
  display: inline-block;
  text-align: center;
  line-height: 59px;
}

.contact-icon i {
  color: #fff;
  font-size: 26px;
}

.contact-content h4 {
  font-size: 24px;
  color: #003d4d;
  font-weight: 500;
}

.contact-content h6 {
  font-size: 15px;
  line-height: 34px;
  color: #757575;
  font-weight: 400;
}

/*
                                                                                                                                        contact
                                                                                                                                        box
                                                                                                                                        title
                                                                                                                                        */

.contact-box-title h4 {
  font-size: 48px;
  line-height: 60px;
  color: #003d4d;
  font-weight: 600;
  margin-bottom: 35px;
}

/*===============================================================
                                                                                                                                        <-- Faq
                                                                                                                                            Area
                                                                                                                                            Css-->
                                                                                                                                            =================================================================*/

.faq-area {
  padding: 120px 0 100px;
}

/*===============================================================
                                                                                                                                            <-- Error
                                                                                                                                                Area
                                                                                                                                                Css-->
                                                                                                                                                =================================================================*/

.error-area {
  padding: 120px 0 110px;
}

.faq-thumb {
  text-align: center;
}

.VPMI-btn.error {
  margin-left: 160px;
}

/*===============================================================
                                                                                                                                                <-- VPMI
                                                                                                                                                    Sidebar
                                                                                                                                                    Css-->
                                                                                                                                                    =================================================================*/

.sidebar-textwidget .contact-info ul {
  padding: 0;
}

.sidebar-group .widget-heading {
  position: absolute;
  top: 55px;
  right: 32px;
}

.sidebar-group .sidebar-widget {
  position: fixed;
  right: -100%;
  top: 0;
  bottom: 0;
  width: 100%;
  max-width: 480px;
  z-index: 999999;
  overflow: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background-color: #010212;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.7s ease-out;
  -moz-transition: all 0.7s ease-out;
  -o-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
}

.sidebar-group.isActive .sidebar-widget {
  opacity: 1;
  visibility: visible;
  right: 0;
}

.sidebar-textwidget {
  padding: 40px 32px;
}

.close-side-widget i {
  color: #fff;
  font-size: 30px;
  display: block;
}

.sidebar-widget-container {
  position: relative;
  top: 150px;
  opacity: 0;
  visibility: hidden;
  /*-webkit-transition:
                                                                                                                                                    all
                                                                                                                                                    0.3s
                                                                                                                                                    ease-in
                                                                                                                                                    0.3s;
                                                                                                                                                    -o-transition:
                                                                                                                                                    all
                                                                                                                                                    0.3s
                                                                                                                                                    ease-in
                                                                                                                                                    0.3s;
                                                                                                                                                    transition:
                                                                                                                                                    all
                                                                                                                                                    0.3s
                                                                                                                                                    ease-in
                                                                                                                                                    0.3s;*/
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.sidebar-group.isActive .sidebar-widget-container {
  top: 0px;
  opacity: 1;
  visibility: visible;
  /*-webkit-transition:
                                                                                                                                                    all
                                                                                                                                                    1s
                                                                                                                                                    ease-out
                                                                                                                                                    1.2s;
                                                                                                                                                    -o-transition:
                                                                                                                                                    all
                                                                                                                                                    1s
                                                                                                                                                    ease-out
                                                                                                                                                    1.2s;
                                                                                                                                                    transition:
                                                                                                                                                    all
                                                                                                                                                    1s
                                                                                                                                                    ease-out
                                                                                                                                                    1.2s;*/
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.sidebar-logo {
  margin: 0 0 50px;
}

.sidebar-textwidget .sidebar-logo a img {
  width: 50%;
}

.sidebar-group .about-box h2 {
  color: #fff;
  font-size: 26px;
  font-weight: 600;
}

.sidebar-group .about-box p {
  display: inline-block;
  color: #fff;
  padding: 15px 0 0;
}

.sidebar-group .contact-info {
  margin-top: 60px;
}

.sidebar-group .contact-info h2 {
  color: #fff;
  font-size: 26px;
  margin-bottom: 15px;
  font-weight: 600;
}

.sidebar-group ul.list-style-one li {
  display: block;
  list-style: none;
  color: #fff;
  margin-top: 8px;
  overflow: hidden;
}

.sidebar-group ul.list-style-one li i {
  font-size: 20px;
  font-weight: 600;
  color: #0154f7;
  margin: 0 10px 0 0px;
}

.sidebar-group ul.social-box {
  margin: 58px 0 0;
  padding: 0;
}

.sidebar-group ul.social-box li {
  display: inline-block;
  list-style: none;
  margin: 0 6px 0 0;
}

.sidebar-group ul.social-box li a {
  display: inline-block;
  width: 35px;
  height: 35px;
  line-height: 36px;
  text-align: center;
  background: #fff;
  color: var(--primary-color);
  text-decoration: none;
  transition: 0.5s;
  font-size: 18px;
  border-radius: 3px;
}

.sidebar-group ul.social-box li a:hover {
  background: var(--primary-color);
  color: #0154f7;
}

/*
                                                                                                                                                    sidebar
                                                                                                                                                    menu
                                                                                                                                                    */

.sidebar-menu {
  position: absolute;
  right: 27px;
  top: 23px;
  display: none;
}

.sidebar-menu a {
  width: 52px;
  height: 52px;
  line-height: 52px;
  display: inline-block;
  text-align: center;
  color: var(--brand-primary);
  font-size: 26px;
}

.sidebar-widget-menu {
  position: relative;
}

.sidebar-widget-menu ul li {
  list-style: none;
  margin-top: 10px;
  padding: 0 0 14px;
}

.sidebar-widget-menu ul li .home-menu-title h4 {
  text-align: center;
  margin-top: 10px;
}

.sidebar-widget-menu ul li .home-menu-title h4 a {
  font-size: 20px;
  padding: 0px 0;
  font-weight: 500;
  color: #141422;
}

.sidebar-widget-menu ul li .home-menu-title h4 a:hover {
  color: #0154f7;
}

.sidebar-widget-menu ul li .home-menu-title h4 a::before {
  display: none;
}

/***
                                                                                                                                                    ====================================================================
                                                                                                                                                    Search
                                                                                                                                                    Popup
                                                                                                                                                    ====================================================================
                                                                                                                                                    ***/
.search-popup {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 100%;
  z-index: 99999;
  margin-top: -540px;
  transform: translateY(-100%);
  background-color: rgba(0, 0, 0, 0.9);
  -webkit-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
  -moz-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
  -o-transition: all 500ms cubic-bezier(0.86, 0, 0.07, 1);
  transition: all 1500ms cubic-bezier(0.86, 0, 0.07, 1);
  /*
                                                                                                                                                    easeInOutQuint
                                                                                                                                                    */
  -webkit-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -moz-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  -o-transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
  /*
                                                                                                                                                    easeInOutQuint
                                                                                                                                                    */
}

.search-popup {
  width: 100%;
}

.search-active .search-popup {
  transform: translateY(0%);
  margin-top: 0;
}

.search-popup .close-search {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  margin-top: -200px;
  border-radius: 50%;
  text-align: center;
  background-color: #0154f7;
  width: 70px;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  border-bottom: 3px solid #ffffff;
  -webkit-transition: all 500ms ease;
  height: 70px;
  line-height: 70px;
  text-align: center;
}

.search-active .search-popup .close-search {
  visibility: visible;
  opacity: 1;
  top: 50%;
  -webkit-transition-delay: 1500ms;
  -moz-transition-delay: 1500ms;
  -ms-transition-delay: 1500ms;
  -o-transition-delay: 1500ms;
  transition-delay: 1500ms;
}

.search-popup form {
  position: absolute;
  max-width: 700px;
  top: 50%;
  left: 15px;
  right: 15px;
  margin: -35px auto 0;
  transform: scaleX(0);
  transform-origin: center;
  background-color: #111111;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

.search-active .search-popup form {
  transform: scaleX(1);
  -webkit-transition-delay: 1200ms;
  -moz-transition-delay: 1200ms;
  -ms-transition-delay: 1200ms;
  -o-transition-delay: 1200ms;
  transition-delay: 1200ms;
}

.search-popup .form-group {
  position: relative;
  margin: 0px;
  overflow: hidden;
}

.search-popup .form-group input[type="text"],
.search-popup .form-group input[type="search"] {
  position: relative;
  display: block;
  font-size: 18px;
  line-height: 50px;
  color: #000000;
  height: 70px;
  width: 100%;
  padding: 10px 30px;
  background-color: #ffffff;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  font-weight: 500;
  text-transform: capitalize;
}

.search-popup .form-group input[type="submit"],
.search-popup .form-group button {
  position: absolute;
  right: 30px;
  top: 0px;
  height: 70px;
  line-height: 70px;
  background: transparent;
  text-align: center;
  font-size: 24px;
  color: #0154f7;
  padding: 0;
  cursor: pointer;
  -webkit-transition: all 500ms ease;
  border: none;
}

.search-popup .form-group input[type="submit"]:hover,
.search-popup .form-group button:hover {
  color: #000000;
}

.search-popup input::placeholder,
.search-popup textarea::placeholder {
  color: #000000;
}

.search-popup .close-search.style-two {
  position: absolute;
  right: 25px;
  left: auto;
  color: #ffffff;
  width: auto;
  height: auto;
  top: 25px;
  margin: 0px;
  border: none;
  background: none !important;
  box-shadow: none !important;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.flaticon-multiply:before {
  content: inherit;
}

button.close-search i {
  font-size: 25px;
  color: #fff;
  display: inline-block;
}

span.flaticon-multiply i {
  display: inline-block;
  color: #0154f7;
}

/*
                                                                                                                                                    <!-- ============================================================== -->
                                                                                                                                                    <!-- VPMI Scrollup Section -->
                                                                                                                                                    <!-- ============================================================== -->*/
.prgoress_scrollup {
  position: fixed;
  right: 55px;
  bottom: 80px;
  height: 48px;
  width: 48px;
  cursor: pointer;
  display: block;
  border-radius: 50px;
  box-shadow: inset 0 0 0 2px rgba(0, 119, 249, 0.2);
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  transform: translateY(15px) !important;
  transition: all 200ms linear !important;
}

.prgoress_scrollup.active-progress {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) !important;
}

.prgoress_scrollup::after {
  position: absolute;
  content: "\F286";
  font-family: bootstrap-icons;
  text-align: center;
  line-height: 46px;
  font-size: 16px;
  color: #0154f7;
  left: 0;
  top: 0;
  height: 46px;
  width: 46px;
  cursor: pointer;
  display: block;
  font-weight: 900;
  z-index: 1;
  transition: all 200ms linear !important;
}

.prgoress_scrollup:hover::after {
  color: #0154f7;
}

.prgoress_scrollup svg path {
  fill: none;
}

.prgoress_scrollup svg.progress-circle path {
  stroke: #0154f7;
  stroke-width: 4;
  box-sizing: border-box;
  transition: all 200ms linear !important;
}

@-webkit-keyframes ripple-blue {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3),
      0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3),
      0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
  }

  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3),
      0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3),
      0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
  }
}

@keyframes ripple-blue {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3),
      0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.3),
      0 0 0 10px rgba(255, 255, 255, 0.3), 0 0 0 20px rgba(255, 255, 255, 0.3);
  }

  100% {
    -webkit-box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3),
      0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3),
      0 0 0 20px rgba(255, 255, 255, 0.3), 0 0 0 30px rgba(255, 255, 255, 0);
  }
}

@keyframes loader {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0;
  }
}

/*===========================
                                                                                                                                                    <-- VPMI
                                                                                                                                                        Loader
                                                                                                                                                        Css
                                                                                                                                                        -->
                                                                                                                                                        =============================*/

.preloader {
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  background: #000;
}

.circles {
  width: 300px;
  height: 300px;
  position: relative;
  margin: auto;
}

.circles > * {
  background-color: transparent;
  box-sizing: border-box;
  border: 5px solid powderblue;
  border-top: 0 solid transparent;
  border-left: 0 solid transparent;
  border-radius: 50%;
  position: absolute;
  animation: spin 4s infinite linear alternate;
}

.circle1 {
  width: 300px;
  height: 300px;
  animation-delay: -5s;
  border-color: rgba(163, 207, 213, 1);
}

.circle2 {
  width: 280px;
  height: 280px;
  top: 10px;
  left: 10px;
  animation-delay: -4.9s;
  border-color: rgba(163, 207, 213, 0.95);
}

.circle3 {
  width: 260px;
  height: 260px;
  top: 20px;
  left: 20px;
  animation-delay: -4.8s;
  border-color: rgba(163, 207, 213, 0.9);
}

.circle4 {
  width: 240px;
  height: 240px;
  top: 30px;
  left: 30px;
  animation-delay: -4.7s;
  border-color: rgba(163, 207, 213, 0.85);
}

.circle5 {
  width: 220px;
  height: 220px;
  top: 40px;
  left: 40px;
  animation-delay: -4.6s;
  border-color: rgba(163, 207, 213, 0.8);
}

.circle6 {
  width: 200px;
  height: 200px;
  top: 50px;
  left: 50px;
  animation-delay: -4.5s;
  border-color: rgba(163, 207, 213, 0.75);
}

.circle7 {
  width: 180px;
  height: 180px;
  top: 60px;
  left: 60px;
  animation-delay: -4.4s;
  border-color: rgba(163, 207, 213, 0.7);
}

.circle8 {
  width: 160px;
  height: 160px;
  top: 70px;
  left: 70px;
  animation-delay: -4.3s;
  border-color: rgba(163, 207, 213, 0.65);
}

.circle9 {
  width: 140px;
  height: 140px;
  top: 80px;
  left: 80px;
  animation-delay: -4.2s;
  border-color: rgba(163, 207, 213, 0.6);
}

.circle10 {
  width: 120px;
  height: 120px;
  top: 90px;
  left: 90px;
  animation-delay: -4.1s;
  border-color: rgba(163, 207, 213, 0.55);
}

.circle11 {
  width: 100px;
  height: 100px;
  top: 100px;
  left: 100px;
  animation-delay: -4s;
  border-color: rgba(163, 207, 213, 0.5);
}

.circle12 {
  width: 80px;
  height: 80px;
  top: 110px;
  left: 110px;
  animation-delay: -3.9s;
  border-color: rgba(163, 207, 213, 0.45);
}

.circle13 {
  width: 60px;
  height: 60px;
  top: 120px;
  left: 120px;
  animation-delay: -3.8s;
  border-color: rgba(163, 207, 213, 0.4);
}

.circle14 {
  width: 40px;
  height: 40px;
  top: 130px;
  left: 130px;
  animation-delay: -3.7s;
  border-color: rgba(163, 207, 213, 0.35);
}

.circle15 {
  width: 20px;
  height: 20px;
  top: 140px;
  left: 140px;
  animation-delay: -3.6s;
  border-color: rgba(163, 207, 213, 0.3);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

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