/*------------------------------------------------------------------
[Master Stylesheet]

Project: Needs HTML
Version: 1.0.0
Created: 03-09-2026
Author Name:  themomarket
Primary use:  digital marketing
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Table of contents]

01. Normalize CSS
02. Spacing CSS
03. Preloader CSS
04. Header CSS
05. pageTitle CSS
06. Banner CSS
07. Service CSS
08. About CSS
09. Feature CSS
10. HowProcess CSS
11. Project CSS
12. Team CSS
13. Counter CSS
14. Testimonial CSS
15. Blog CSS
16. Faq CSS
18. Pricing CSS
19. Contact CSS
20. Single CSS
21. Sidebar CSS
22. Footer CSS

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


/*
=========================================
01. Normalize CSS
==========================================
*/

:root {
  --bs-primary: #fa464a;
  --bs-primary-rgb: 250, 70, 74;
  --bs-secondary: #19274d;
  --bs-gray: #606060;
  --bs-warning: #ec1111;
  --bs-light: #f3f7fc;
  --bs-dark: #181234;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--bs-gray);
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: "Red Hat Display", sans-serif;
  font-weight: 700;
  color: var(--bs-secondary);
}

a {
  color: var(--bs-secondary);
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

a:focus,
a:active,
a:hover {
  color: var(--bs-primary);
}

img {
  max-width: 100%;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none !important;
  outline-width: 0 !important;
  box-shadow: none !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

input::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: var(--bs-gray);
}

input::-moz-placeholder {
  /* Firefox 19+ */
  color: var(--bs-gray);
}

input:-ms-input-placeholder {
  /* IE 10+ */
  color: var(--bs-gray);
}

input:-moz-placeholder {
  /* Firefox 18- */
  color: var(--bs-gray);
}

ol,
ul {
  padding-left: 1.25rem;
}

a {
  text-decoration: none;
}

hr {
  color: var(--bs-gray);
  ;
}

select {
  color: var(--bs-gray);
  ;
}

/*--------Bg Color---------*/

.bg-primary {
  background-color: var(--bs-primary) !important;
}

.bg-secondary {
  background-color: var(--bs-secondary) !important;
}

.bg-light {
  background-color: var(--bs-light) !important;
}

.bg-dark {
  background-color: var(--bs-dark) !important;
}

/*--------Text Color---------*/

.text-primary {
  color: var(--bs-primary) !important;
}

.text-secondary {
  color: var(--bs-secondary) !important;
}

.text-warning {
  color: var(--bs-warning) !important;
}

.text-gray {
  color: var(--bs-gray) !important;
}

.text-dark {
  color: var(--bs-dark) !important;
}

/*--------Btn---------*/


.btn {
  --bs-btn-padding-x: 32px;
  --bs-btn-padding-y: 12px;
  --bs-btn-font-size: 16px;
  --bs-btn-font-weight: 400;
  border-radius: 50px;
}

.btn-sm {
  --bs-btn-padding-y: 6px;
  --bs-btn-padding-x: 20px;
  --bs-btn-font-size: 14px;
}

.btn-primary {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bs-primary);
  --bs-btn-border-color: var(--bs-primary);
  --bs-btn-hover-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-white);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--bs-warning);
  --bs-btn-active-border-color: var(--bs-warning);
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-secondary {
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-white);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-light {
  --bs-btn-color: var(--bs-primary);
  --bs-btn-bg: var(--bs-white);
  --bs-btn-border-color: var(--bs-white);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--bs-secondary);
  --bs-btn-hover-border-color: var(--bs-secondary);
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--bs-secondary);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: var(--bs-secondary);
  --bs-btn-disabled-border-color: var(--bs-secondary);
}

.btn-outline-light {
  --bs-btn-color: var(--bs-white);
  --bs-btn-border-color: var(--bs-white);
  --bs-btn-hover-color: var(--bs-primary);
  --bs-btn-hover-bg: var(--bs-white);
  --bs-btn-hover-border-color: var(--bs-white);
  --bs-btn-active-color: var(--bs-primary);
  --bs-btn-active-bg: var(--bs-white);
  --bs-btn-active-border-color: var(--bs-white);
  --bs-btn-disabled-color: var(--bs-white);
  --bs-btn-disabled-bg: var(--bs-primary);
  --bs-btn-disabled-border-color: var(--bs-primary);
}

.progress-bar {
  color: var(--bs-white);
  background-color: var(--bs-primary);
}

/*--------Border Color---------*/
.shadow {
  -webkit-box-shadow: 0px 14px 30px rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0px 14px 30px rgba(0, 0, 0, 0.08) !important;
}

.border-primary {
  border-color: rgba(var(--bs-primary-rgb), var(--bs-border-opacity)) !important;
}

/*
=========================================
02. Spacing CSS
==========================================
*/

.secSpacingOuter {
  margin: 120px 0;
}

.secSpacingInner {
  padding: 120px 0;
}

.titleSpacing {
  margin-bottom: 60px;
}

@media screen and (max-width: 992px) {
  .secSpacingOuter {
    margin: 80px 0;
  }

  .secSpacingInner {
    padding: 80px 0;
  }

  .titleSpacing {
    margin-bottom: 32px;
  }
}

/*
=========================================
03. Preloader CSS
==========================================
*/
.preloader {
  position: fixed !important;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: var(--bs-secondary);
  z-index: 9999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

@-webkit-keyframes spinerloading {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

@keyframes spinerloading {
  0% {
    opacity: 1
  }

  100% {
    opacity: 0
  }
}

.spinerloading div {
  left: 94px;
  top: 48px;
  position: absolute;
  -webkit-animation: spinerloading linear 1.5s infinite;
  animation: spinerloading linear 1.5s infinite;
  background: var(--bs-primary);
  width: 12px;
  height: 24px;
  border-radius: 6px / 12px;
  -webkit-transform-origin: 6px 52px;
  transform-origin: 6px 52px;
}

.spinerloading div:nth-child(1) {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
  background: var(--bs-primary);
}

.spinerloading div:nth-child(2) {
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
  background: var(--bs-primary);
}

.spinerloading div:nth-child(3) {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
  background: var(--bs-primary);
}

.spinerloading div:nth-child(4) {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-animation-delay: -0.6s;
  animation-delay: -0.6s;
  background: var(--bs-primary);
}

.spinerloading div:nth-child(5) {
  -webkit-transform: rotate(120deg);
  transform: rotate(120deg);
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
  background: var(--bs-primary);
}

.spinerloading div:nth-child(6) {
  -webkit-transform: rotate(150deg);
  transform: rotate(150deg);
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
  background: var(--bs-primary);
}

.spinerloading div:nth-child(7) {
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  -webkit-animation-delay: -0.4s;
  animation-delay: -0.4s;
  background: var(--bs-primary);
}

.spinerloading div:nth-child(8) {
  -webkit-transform: rotate(210deg);
  transform: rotate(210deg);
  -webkit-animation-delay: -0.3s;
  animation-delay: -0.3s;
  background: var(--bs-primary);
}

.spinerloading div:nth-child(9) {
  -webkit-transform: rotate(240deg);
  transform: rotate(240deg);
  -webkit-animation-delay: -0.25s;
  animation-delay: -0.25s;
  background: var(--bs-primary);
}

.spinerloading div:nth-child(10) {
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  -webkit-animation-delay: -0.1s;
  animation-delay: -0.1s;
  background: var(--bs-primary);
}

.spinerloading div:nth-child(11) {
  -webkit-transform: rotate(300deg);
  transform: rotate(300deg);
  -webkit-animation-delay: -0.0s;
  animation-delay: -0.0s;
  background: var(--bs-primary);
}

.spinerloading div:nth-child(12) {
  -webkit-transform: rotate(330deg);
  transform: rotate(330deg);
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  background: var(--bs-primary);
}

.spinner-spinner {
  width: 200px;
  height: 200px;
  display: inline-block;
  overflow: hidden;
}

.spinerloading {
  width: 100%;
  height: 100%;
  position: relative;
  -webkit-transform: translateZ(0) scale(1);
  transform: translateZ(0) scale(1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

/*
=========================================
04. Header CSS
==========================================
*/
.header-section {
  z-index: 111;
}

.navbar-nav>li {
  margin: 0 12px;
}

.navbar-nav>li>a {
  position: relative;
  color: var(--bs-white) !important;
  padding: 4px 12px !important;
}

.headerDark .navbar-nav>li>a {
  color: var(--bs-secondary) !important;
}

.navbar-nav>li:not(.dropdown)>a::before {
  content: "";
  background-color: var(--bs-primary);
  width: 60%;
  height: 1px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  margin: auto;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.navbar-nav>li>a:hover::before,
.navbar-nav>li>a.active::before {
  opacity: 1;
  visibility: visible;
}

.dropdown-menu {
  padding: 8px !important;
}

.dropdown-item {
  padding: 4px 8px !important;
  border-radius: 4px;
}

@media screen and (max-width: 992px) {
  .navbar-collapse {
    background-color: var(--bs-secondary) !important;
    padding: 30px 12px;
  }

  .headerDark .navbar-collapse {
    background-color: var(--bs-light) !important;
  }

  .navbar-nav {
    margin-bottom: 15px;
  }

  .navbar-nav>li:not(.dropdown)>a:hover,
  .navbar-nav>li:not(.dropdown)>a.active {
    color: var(--bs-primary) !important;
  }

  .navbar-nav>li:not(.dropdown)>a::before {
    display: none;
  }
}


.dropdown-item.active,
.dropdown-item {
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.dropdown-item.active,
.dropdown-item:active,
.dropdown-item:focus,
.dropdown-item:hover {
  color: var(--bs-white);
  background-color: var(--bs-primary)
}

@media screen and (min-width: 992px) {
  .dropdown .dropdown-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 300ms ease;
    transition: all 300ms ease;
  }

  .dropdown:hover .dropdown-menu {
    visibility: visible;
    opacity: 1;
  }
}

.navbar-toggler .navbar-toggler-icon {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"><path stroke="%23fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"/></svg>');
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background-image: url('data:image/svg+xml,<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="%23fff"/></svg>')
}

.header-sticky {
  background-color: var(--bs-secondary);
  -webkit-box-shadow: 0 0px 20px -5px rgba(0, 0, 1, 0.1);
  box-shadow: 0 0px 20px -5px rgba(0, 0, 1, 0.1);
  position: fixed !important;
}

.header-sticky.headerDark {
  background-color: var(--bs-white);
}

/*
=========================================
05. pageTitle CSS
==========================================
*/
.pageTitleBg::before {
  content: "";
  background-color: var(--bs-secondary);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  opacity: 0.7;
}

.paginationNav .breadcrumb-item+.breadcrumb-item::before {
  color: var(--bs-white);
}

.paginationNav li a {
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.paginationNav li a.active,
.paginationNav li a:hover {
  color: var(--bs-primary) !important;
}

/*
=========================================
06. Banner CSS
==========================================
*/
.bannerSlider::before {
  content: "";
  width: 100%;
  max-width: 1170px;
  height: 100%;
  background-image: url(../images/banner-shape1.png);
  background-position: top right;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: 0;
  top: 0;
}

.bannerSlider::after {
  content: "";
  width: 100%;
  max-width: 265px;
  height: 100%;
  background-image: url(../images/banner-shape2.png);
  background-position: center left;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  top: 0;
}

.bannerSlider2 .bannerItem::before {
  content: "";
  width: 100%;
  max-width: 200px;
  height: 100%;
  background-image: url(../images/banner-shape3.png);
  background-position: top right;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0.5;
  z-index: 2;
}

.bannerSlider2 .bannerItem::after {
  content: "";
  width: 100%;
  max-width: 265px;
  height: 100%;
  background-image: url(../images/banner-shape4.png);
  background-position: center left;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.5;
  z-index: 2;
}

.bannerItem {
  padding: 120px 12px;
}

.bannerImage {
  max-width: 500px;
}

.bannerBg::before {
  content: "";
  background-color: var(--bs-secondary);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  opacity: 0.7;
}

.bannerContent p {
  max-width: 600px;
}

.plusButtonIcon {
  width: 40px;
  height: 40px;
  padding: 5px 7px;
}

.plusButtonIcon img {
  width: 24px;
  height: 24px;
}

.bannerSlider .swiper-button-prev,
.bannerSlider .swiper-button-next {
  color: var(--bs-primary);
  background-color: var(--bs-light);
  border-radius: 12px;
  margin-top: 200px !important;
}

.bannerSlider .swiper-button-prev::before,
.bannerSlider .swiper-button-next::before {
  content: "";
  width: 40px;
  height: 1px;
  background-color: var(--bs-primary);
  position: absolute;
  left: 0;
}

.bannerSlider .swiper-button-disabled {
  color: var(--bs-secondary);
  opacity: 1 !important;
}

.bannerSlider .swiper-button-disabled::before {
  background-color: var(--bs-secondary);
}

.bannerSlider .swiper-button-prev {
  padding-left: 60px;
}

.bannerSlider .swiper-button-next {
  padding-right: 60px;
}

.bannerSlider .swiper-button-next::before {
  left: auto;
  right: 0;
}

.bannerSlider2 .swiper-pagination {
  width: auto !important;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  top: auto !important;
  bottom: 24px !important;
  gap: 8px;
  right: auto;
  left: 20px !important;
}

@media screen and (min-width: 1580px) {
  .bannerSlider2 .swiper-pagination {
    top: 0 !important;
    bottom: 0 !important;
    left: 80px !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.bannerSlider2 .swiper-pagination .swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  border-radius: 50px;
  border: 2px solid var(--bs-white);
  position: static !important;
  opacity: 1 !important;
}

.bannerSlider2 .swiper-pagination .swiper-pagination-bullet-active {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
  background-color: var(--bs-primary) !important;

}

@media screen and (min-width: 992px) {
  .bannerItem {
    padding: 300px 0;
  }

  .bannerImage {
    max-width: 700px;
    margin-left: -140px;
  }

  .bannerSlider .swiper-button-prev,
  .bannerSlider .swiper-button-next {
    margin-top: -40px !important;
  }
}

/*
=========================================
07. Service CSS
==========================================
*/
.serviceBottomSpace {
  margin-bottom: 215px;
}

.sectionLabel {
  position: relative;
  padding-left: 30px;
}

.sectionLabel::after,
.sectionLabel::before {
  content: "";
  width: 15px;
  height: 12px;
  background-color: var(--bs-primary);
  position: absolute;
  left: 0;
  top: -4px;
  bottom: 0;
  margin: auto;
  opacity: 0.3;
}

.sectionLabel::after {
  top: 2px;
  left: 4px;
}

.serviceWrapper {
  margin-bottom: -335px;
}

.serviceBox {
  -webkit-transition: all 300ms ease-in;
  transition: all 300ms ease-in;
}

.serviceIcon {
  width: 56px;
  height: 56px;
}

.serviceIcon::before {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 64px;
  height: 64px;
  background-image: var(--serviceBeforeIcon);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.2;
}

.serviceButton .readMoreArrow {
  width: 30px;
  height: 30px;
}

.serviceBox:hover {
  background-color: var(--bs-primary) !important;
}

.serviceButton .readMoreArrow img,
.serviceBox:hover .serviceIcon::before,
.serviceBox:hover .serviceIcon img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

.serviceBox:hover * {
  color: var(--bs-white) !important;
}



/*
=========================================
08. About CSS
==========================================
*/

.aboutDots {
  width: 220px;
  height: 220px;
  left: -70px;
  top: -80px;
}

.aboutImage1 {
  width: 100%;
  height: 500px;
  max-width: 500px;
  padding-bottom: 70px;
}

.aboutImage2 {
  width: 300px;
  height: 350px;
  right: 0;
  bottom: 0;
}

@-webkit-keyframes pulse-shadow {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 81, 0, 0.7);
    box-shadow: 0 0 0 0 rgba(255, 81, 0, 0.7);
  }

  70% {
    -webkit-box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }

  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

@keyframes pulse-shadow {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 81, 0, 0.7);
    box-shadow: 0 0 0 0 rgba(255, 81, 0, 0.7);
  }

  70% {
    -webkit-box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }

  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

.aboutImage3::before {
  content: "";
  background-color: var(--bs-primary);
  -webkit-animation: pulse-shadow 2s infinite;
  animation: pulse-shadow 2s infinite;
  width: 500px;
  height: 500px;
  border-radius: 100%;
  position: absolute;
  right: -250px;
  bottom: -250px;
  opacity: 0.5;
}


.aboutList li {
  position: relative;
  padding-left: 30px;
  max-width: 320px;
}

.aboutList li::before {
  content: "";
  width: 18px;
  height: 18px;
  border: 5px solid var(--bs-primary);
  position: absolute;
  left: 0;
  top: 4px;
}

.aboutList .aboutDarkList::before {
  border-color: var(--bs-secondary);
}

/*
=========================================
09. Feature CSS
==========================================
*/
.featureBox {
  -webkit-transition: all 300ms ease-in;
  transition: all 300ms ease-in;
}

.featureBox .featureIcon {
  width: 50px;
  height: 50px;
  padding: 10px 12px;
  -webkit-transition: all 300ms ease-in;
  transition: all 300ms ease-in;
}

.featureBox .featureIcon img {
  width: 30px;
  height: 30px;
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
  -webkit-transition: all 300ms ease-in;
  transition: all 300ms ease-in;
}

.featureBox:hover .featureIcon {
  background-color: var(--bs-white) !important;
}

.featureBox:hover .featureIcon img {
  -webkit-filter: none;
  filter: none;
}

.featureBox:hover {
  background-color: var(--bs-primary) !important;
}

.featureBox:hover * {
  color: var(--bs-white) !important;
}

/*
=========================================
10. HowProcess CSS
==========================================
*/
.howProcessNumber {
  width: 32px;
  height: 32px;
  padding: 3px 7px;
  right: -12px;
  top: -12px;
}

.howProcessIcon {
  width: 64px;
  height: 64px;
  padding: 17px 16px;
}

.howProcessIcon img {
  width: 32px;
  height: 32px;
}

/*
=========================================
11. Project CSS
==========================================
*/
.project-section .swiper-wrapper {
  -webkit-transition-timing-function: linear !important;
  transition-timing-function: linear !important;
}

.project-section .swiper-slide {
  width: 500px;
}

.projectImage img {
  min-height: 300px;
}

.projectBox .projectContent {
  background: #1C1C25;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(28, 28, 37, 0)), color-stop(86%, rgba(28, 28, 37, 1)));
  background: linear-gradient(180deg, rgba(28, 28, 37, 0) 0%, rgba(28, 28, 37, 1) 86%);
  visibility: hidden;
  opacity: 0;
  text-align: center;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.projectBox:hover .projectContent {
  visibility: visible;
  opacity: 1;
}

.projectBox .btn {
  width: 40px;
  height: 40px;
  padding: 5px !important;
  position: absolute;
  right: 32px;
  bottom: 32px;
}

.projectBox .btn:hover {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.projectImage img {
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.projectBox:hover .projectImage img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.projectBox2 .btn img {
  width: 40px;
  height: 40px;
}

.ProjectSlider .swiper-pagination {
  display: inline-block;
  position: static !important;
  max-width: 150px;
}

.swiper-pagination-progressbar-fill {
  background: var(--bs-primary) !important;
}

/*
=========================================
12. Team CSS
==========================================
*/
.teamBox {
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.teamImage {
  width: 150px;
  height: 150px;
}

.teamSocial li a {
  text-align: center;
  width: 30px;
  height: 30px;
  background-color: var(--bs-light);
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.teamSocial li a img {
  width: 16px;
  height: 16px;
}

.teamSocial li a:hover {
  background-color: var(--bs-primary);
}

.teamSocial li a:hover img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

.teamBox:hover {
  border-color: var(--bs-primary) !important;
}

/*
=========================================
13. Counter CSS
==========================================
*/

.counterBottomSpace {
  margin-bottom: 60px;
}

.counterVideoBg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bs-secondary);
}

.counterVideoBg::before {
  content: "";
  background-color: var(--bs-black);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  opacity: 0.5;
}

.counterIcon {
  width: 64px;
  height: 64px;
}

.counterWrapper {
  bottom: -60px;
}

@keyframes pulse-shadow {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
  }

  70% {
    -webkit-box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }

  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

.videoModalPlay {
  width: 64px;
  height: 64px;
  padding: 18px 10px 16px 16px;
  -webkit-animation: pulse-shadow 2s infinite;
  animation: pulse-shadow 2s infinite;
}

.videoModalPlay img {
  width: 24px;
  height: 24px;
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

.videoModalPlay:hover img {
  -webkit-filter: none;
  filter: none;
}

.videoModalWrapper {
  position: relative;
  max-width: 800px;
  background-color: #0000007c;
  padding: 30px;
  margin: auto;
}

.videoModalWrapper iframe {
  width: 100% !important;
  border-radius: 12px;
}

.videoModalClose img {
  width: 24px;
  height: 24px;
}

/*
=========================================
14. Testimonial CSS
==========================================
*/

.testimonialBox {
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.testimonialAvatar {
  width: 64px;
  height: 64px;
}

.starRating li img {
  width: 16px;
  height: 16px;
}

.testimonialBox:hover {
  border-color: var(--bs-primary) !important;
}

.swiper-pagination-bullet {
  background-color: var(--bs-secondary);
}

.swiper-pagination-bullet-active {
  background-color: var(--bs-primary);
}

/*
=========================================
15. Blog CSS
==========================================
*/
.blogBox {
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.blogBox .authorImage {
  width: 40px;
  height: 40px;
}

.blogBox .btn {
  width: 40px;
  height: 40px;
  padding: 4px;
}

.blogBox .btn:hover {
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}

.blogBox:hover {
  border-color: var(--bs-primary) !important;
}

.blogImage img {
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.blogBox:hover .blogImage img {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.pagination .page-link {
  color: var(--bs-white);
  background-color: var(--bs-secondary);
  border: 1px solid var(--bs-secondary);
  margin: 0 4px;
}

.pagination .page-link:focus {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.pagination .page-link:hover,
.pagination .page-item.active .page-link {
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.pagination .page-link img {
  width: 24px;
  height: 24px;
  -o-object-fit: contain;
  object-fit: contain;
}

/*
=========================================
16. Faq CSS
==========================================
*/
.accordion {
  --bs-accordion-active-bg: var(--bs-white);
  --bs-accordion-active-color: var(--bs-dark);
}

.accordion-item {
  border-color: #dee2e6;
  margin-bottom: 12px;
}

.accordion-item:last-of-type,
.accordion-item:first-of-type,
.accordion-item:first-of-type>.accordion-header .accordion-button {
  border-radius: 0 !important;
}

.accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  border: 1px solid var(--bs-white);
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

.accordion-item:not(:first-of-type) {
  border-top: 1px solid #dee2e6;
}

.accordion-collapse {
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.accordion-button {
  font-weight: 600;
}

.accordion-button:not(.collapsed) {
  color: var(--bs-primary);
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

/*
=========================================
18. Pricing CSS
==========================================
*/
.pricingBox {
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.pricingLabel {
  font-size: 14px;
}

.pricingImage {
  width: 180px;
  height: 80px;
}

.pricingIcon img {
  width: 20px;
  height: 20px;
  -o-object-fit: contain;
  object-fit: contain;
}

.pricingBox:hover {
  border-color: var(--bs-primary) !important;
}

.companyLogo {
  max-width: 150px;
  height: 50px;
  opacity: 0.5;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.companyLogo:hover {
  opacity: 1;
}


/*
=========================================
19. Contact CSS
==========================================
*/
.contactInfo {
  max-width: 400px;
}

.errorLogo img {
  max-width: 400px;
}

.contactIcon {
  width: 32px;
  height: 32px;
}

.contactGoogleMap iframe {
  width: 100% !important;
}

/*
=========================================
20. Single CSS
==========================================
*/
.entryContent h1,
.entryContent h2,
.entryContent h3,
.entryContent h4,
.entryContent h5,
.entryContent h6 {
  margin-bottom: 16px;
}

.entryContent blockquote {
  text-align: right;
  padding: 24px;
  -webkit-box-shadow: 0px 14px 30px rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0px 14px 30px rgba(0, 0, 0, 0.08) !important;
}

.entryContent blockquote span {
  display: inline-block;
  position: relative;
  padding-left: 46px;
}

.entryContent blockquote span::before {
  content: "";
  width: 40px;
  height: 1px;
  background-color: var(--bs-primary);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.singleMeta li {
  font-size: 14px;
}

.singleSocial li a {
  width: 40px;
  height: 40px;
}

.singleSocial li img {
  width: 16px;
  height: 16px;
}

.commentBox .commentAvatar {
  width: 70px;
  height: 70px;
}

.commentBox .commentButton img {
  display: inline-block;
  width: 12px;
  height: 12px;
}

/*
=========================================
21. Sidebar CSS
==========================================
*/
.sidebarWidget .sidebarTitle {
  display: inline-block;
  position: relative;
  padding-right: 46px;
}

.sidebarWidget .sidebarTitle::before {
  content: "";
  width: 32px;
  height: 1px;
  background-color: var(--bs-secondary);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.searchSidebar input {
  height: 50px;
  border-color: var(--bs-light);
}

.searchSidebar img {
  width: 20px;
  height: 20px;
  -o-object-fit: contain;
  object-fit: contain;
}

.postSidebar .postImage {
  width: 70px;
  height: 70px;
}

.postSidebar .postMeta {
  font-size: 14px;
}

.categorySidebar img {
  width: 16px;
  height: 16px;
  display: inline-block;
  position: relative;
  bottom: 2px;
}

.tagSidebar li {
  margin: 4px !important;
}

.tagSidebar li .btn {
  background-color: var(--bs-light);
  color: var(--bs-secondary);
}

.tagSidebar li .btn:hover {
  color: var(--bs-white);
  background-color: var(--bs-primary);
  border-color: var(--bs-primary);
}

.authorSidebar .authorImage {
  width: 56px;
  height: 56px;
}

.authorSidebar .authorSocial li img {
  width: 16px;
  height: 16px;
  -o-object-fit: contain;
  object-fit: contain;
}

.phonecallRound {
  width: 120px;
  height: 120px;
}

/*
=========================================
22. Footer CSS
==========================================
*/

@media screen and (min-width: 992px) {
  .footer-section::before {
    content: "";
    background-image: url(../images/footer-shape1.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left bottom;
    width: 100%;
    max-width: 250px;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
  }

  .footer-section::after {
    content: "";
    background-image: url(../images/footer-shape2.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right top;
    width: 100%;
    max-width: 250px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
  }
}

.footerButton {
  color: var(--bs-white) !important;
}

.footerButton .readMoreIcon {
  width: 20px;
  height: 20px;
}

.footerList li {
  margin: 12px 0;
}

.footerList li a::before {
  content: "";
  width: 8px;
  height: 8px;
  background-color: var(--bs-light);
  display: inline-block;
  border-radius: 50px;
  margin: 2px 6px 2px 0px;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.footerlink li a,
.footerList li a {
  color: var(--bs-white);
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.footerlink li a:hover,
.footerList li a:hover,
.footerlink li a:focus,
.footerList li a:focus {
  color: var(--bs-primary);
}

.footerSocial li a {
  text-align: center;
  width: 30px;
  height: 30px;
  padding: 2px;
  background-color: var(--bs-light);
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.footerSocial li a img {
  width: 16px;
  height: 16px;
}

.footerSocial li a:hover {
  background-color: var(--bs-primary);
}

.footerSocial li a:hover img {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);
}

.footerInstaLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #18123467;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 300ms ease;
  transition: all 300ms ease;
}

.footerInstaLink img {
  width: 32px;
  height: 32px;
}

.footerInstagram:hover .footerInstaLink {
  opacity: 1;
  visibility: visible;
}

.footerInstagram>img {
  min-height: 90px;
}

.footerForm input {
  padding: 12px;
}

.footerForm .btn {
  padding: 8px 16px;
}

.footerForm .btn img {
  width: 32px;
  height: 32px;
}

.footerForm .btn:hover {
  background-color: var(--bs-dark);
  border-color: var(--bs-dark);
}