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

Project: Damdt HTML
Version: 1.0.0
Created: 02-11-2025
Author Name:  themomarket
Primary use:  business consulting
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Table of contents]
-------------------------------------------------------------------*/
/*
=========================================
01. Font CSS
02. Normalize CSS
03. Spacing CSS
04. Search Modal CSS
05. Preloader CSS
06. Header CSS
08. Page Title CSS
09. About CSS
10. Calltoaction CSS
11. Service CSS
12. Project CSS
13. Team CSS
14. Counter CSS
15. Pricing CSS
16. Testimonial CSS
17. WhyChoose CSS
18. Process CSS
19. Faq CSS
20. Blog CSS
21. Sidebar CSS
22. Single CSS
23. Contact CSS
24. Footer CSS
==========================================
*/


@font-face {
  font-family: 'Gordita';
  src: url('../fonts/Gordita-Bold.woff2') format('woff2'),
    url('../fonts/Gordita-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gordita';
  src: url('../fonts/Gordita-Medium.woff2') format('woff2'),
    url('../fonts/Gordita-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gordita';
  src: url('../fonts/Gordita-Black.woff2') format('woff2'),
    url('../fonts/Gordita-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gordita';
  src: url('../fonts/Gordita-Regular.woff2') format('woff2'),
    url('../fonts/Gordita-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/*
=========================================
02. Normalize CSS
==========================================
*/

:root {
  --bs-primary: #e80566;
  --bs-secondary: #1c1c25;
  --bs-gray: #606060;
  --bs-success: #0CC556;
  --bs-info: #19197D;
  --bs-warning: #ec1111;
  --bs-light: #F8F9FF;
  --bs-dark: #181234;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Heebo", 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: 'Gordita';
  color: var(--bs-secondary);
}

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

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

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

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

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

.bg-info {
  background-color: var(--bs-info) !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-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-primary {
  --bs-btn-color: var(--bs-secondary);
  --bs-btn-border-color: var(--bs-secondary);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-hover-border-color: var(--bs-primary);
  --bs-btn-active-color: var(--bs-secondary);
  --bs-btn-active-bg: var(--bs-white);
  --bs-btn-active-border-color: var(--bs-secondary);
  --bs-btn-disabled-color: var(--bs-secondary);
  --bs-btn-disabled-bg: var(--bs-white);
  ;
  --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 {
  box-shadow: 0px 15px 38px rgba(0, 0, 0, 0.15) !important;
}

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

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);
  ;
}


/*
=========================================
03. 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;
  }
}

/*
=========================================
04. Search Modal CSS
==========================================
*/
.SearchFormModal {
  max-width: 800px;
  background-color: #0000007c;
  padding: 30px;
  margin: auto;
}

.SearchFormModal .btn img {
  width: 24px;
  height: 24px;
}

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

.SearchModalClose img {
  width: 40px;
  height: 40px;
}

.headerSearchFade .SearchFormModal {
  opacity: 0;
  transition: all 0.2s ease-out;
  transform: translateY(-20px) perspective(600px) rotateX(10deg);

}

.headerSearchFade.mfp-ready .SearchFormModal {
  opacity: 1;
  transform: translateY(0) perspective(600px) rotateX(0);
}

.headerSearchFade.mfp-removing .SearchFormModal {
  opacity: 0;
  transform: translateY(-10px) perspective(600px) rotateX(10deg);
}

.headerSearchFade.mfp-bg {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.headerSearchFade.mfp-ready.mfp-bg {
  opacity: 0.8;
}

.headerSearchFade.mfp-removing.mfp-bg {
  opacity: 0;
}

/*
=========================================
05. Preloader CSS
==========================================
*/
@keyframes preloaderWrap {
  0% {
    opacity: 1;
    backface-visibility: hidden;
    transform: translateZ(0) scale(1.5, 1.5);
  }

  100% {
    opacity: 0;
    backface-visibility: hidden;
    transform: translateZ(0) scale(1, 1);
  }
}

.preloader {
  position: fixed !important;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: var(--bs-dark);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: blur(2px);
}

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

.preloaderWrap div>div {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bs-primary);
  animation: preloaderWrap 2.27s linear infinite;
}

.preloaderWrap div:nth-child(1)>div {
  left: 74px;
  top: 44px;
  animation-delay: -2.21s;
}

.preloaderWrap>div:nth-child(1) {
  transform: rotate(0deg);
  transform-origin: 80px 50px;
}

.preloaderWrap div:nth-child(2)>div {
  left: 74px;
  top: 49px;
  animation-delay: -2.15s;
}

.preloaderWrap>div:nth-child(2) {
  transform: rotate(9deg);
  transform-origin: 80px 55px;
}

.preloaderWrap div:nth-child(3)>div {
  left: 73px;
  top: 53px;
  animation-delay: -2.10s;
}

.preloaderWrap>div:nth-child(3) {
  transform: rotate(18deg);
  transform-origin: 79px 59px;
}

.preloaderWrap div:nth-child(4)>div {
  left: 71px;
  top: 58px;
  animation-delay: -2.045s;
}

.preloaderWrap>div:nth-child(4) {
  transform: rotate(27deg);
  transform-origin: 77px 64px;
}

.preloaderWrap div:nth-child(5)>div {
  left: 68px;
  top: 62px;
  animation-delay: -1.98s;
}

.preloaderWrap>div:nth-child(5) {
  transform: rotate(36deg);
  transform-origin: 74px 68px;
}

.preloaderWrap div:nth-child(6)>div {
  left: 65px;
  top: 65px;
  animation-delay: -1.93s;
}

.preloaderWrap>div:nth-child(6) {
  transform: rotate(45deg);
  transform-origin: 71px 71px;
}

.preloaderWrap div:nth-child(7)>div {
  left: 62px;
  top: 68px;
  animation-delay: -1.87s;
}

.preloaderWrap>div:nth-child(7) {
  transform: rotate(54deg);
  transform-origin: 68px 74px;
}

.preloaderWrap div:nth-child(8)>div {
  left: 58px;
  top: 71px;
  animation-delay: -1.81s;
}

.preloaderWrap>div:nth-child(8) {
  transform: rotate(63deg);
  transform-origin: 64px 77px;
}

.preloaderWrap div:nth-child(9)>div {
  left: 53px;
  top: 73px;
  animation-delay: -1.76s;
}

.preloaderWrap>div:nth-child(9) {
  transform: rotate(72deg);
  transform-origin: 59px 79px;
}

.preloaderWrap div:nth-child(10)>div {
  left: 49px;
  top: 74px;
  animation-delay: -1.70s;
}

.preloaderWrap>div:nth-child(10) {
  transform: rotate(81deg);
  transform-origin: 55px 80px;
}

.preloaderWrap div:nth-child(11)>div {
  left: 44px;
  top: 74px;
  animation-delay: -1.64s;
}

.preloaderWrap>div:nth-child(11) {
  transform: rotate(90deg);
  transform-origin: 50px 80px;
}

.preloaderWrap div:nth-child(12)>div {
  left: 39px;
  top: 74px;
  animation-delay: -1.59s;
}

.preloaderWrap>div:nth-child(12) {
  transform: rotate(99deg);
  transform-origin: 45px 80px;
}

.preloaderWrap div:nth-child(13)>div {
  left: 35px;
  top: 73px;
  animation-delay: -1.53s;
}

.preloaderWrap>div:nth-child(13) {
  transform: rotate(108deg);
  transform-origin: 41px 79px;
}

.preloaderWrap div:nth-child(14)>div {
  left: 30px;
  top: 71px;
  animation-delay: -1.47s;
}

.preloaderWrap>div:nth-child(14) {
  transform: rotate(117deg);
  transform-origin: 36px 77px;
}

.preloaderWrap div:nth-child(15)>div {
  left: 26px;
  top: 68px;
  animation-delay: -1.42s;
}

.preloaderWrap>div:nth-child(15) {
  transform: rotate(126deg);
  transform-origin: 32px 74px;
}

.preloaderWrap div:nth-child(16)>div {
  left: 23px;
  top: 65px;
  animation-delay: -1.36s;
}

.preloaderWrap>div:nth-child(16) {
  transform: rotate(135deg);
  transform-origin: 29px 71px;
}

.preloaderWrap div:nth-child(17)>div {
  left: 20px;
  top: 62px;
  animation-delay: -1.30s;
}

.preloaderWrap>div:nth-child(17) {
  transform: rotate(144deg);
  transform-origin: 26px 68px;
}

.preloaderWrap div:nth-child(18)>div {
  left: 17px;
  top: 58px;
  animation-delay: -1.25s;
}

.preloaderWrap>div:nth-child(18) {
  transform: rotate(153deg);
  transform-origin: 23px 64px;
}

.preloaderWrap div:nth-child(19)>div {
  left: 15px;
  top: 53px;
  animation-delay: -1.19s;
}

.preloaderWrap>div:nth-child(19) {
  transform: rotate(162deg);
  transform-origin: 21px 59px;
}

.preloaderWrap div:nth-child(20)>div {
  left: 14px;
  top: 49px;
  animation-delay: -1.13s;
}

.preloaderWrap>div:nth-child(20) {
  transform: rotate(171deg);
  transform-origin: 20px 55px;
}

.preloaderWrap div:nth-child(21)>div {
  left: 14px;
  top: 44px;
  animation-delay: -1.07s;
}

.preloaderWrap>div:nth-child(21) {
  transform: rotate(180deg);
  transform-origin: 20px 50px;
}

.preloaderWrap div:nth-child(22)>div {
  left: 14px;
  top: 39px;
  animation-delay: -1.02s;
}

.preloaderWrap>div:nth-child(22) {
  transform: rotate(189deg);
  transform-origin: 20px 45px;
}

.preloaderWrap div:nth-child(23)>div {
  left: 15px;
  top: 35px;
  animation-delay: -0.96s;
}

.preloaderWrap>div:nth-child(23) {
  transform: rotate(198deg);
  transform-origin: 21px 41px;
}

.preloaderWrap div:nth-child(24)>div {
  left: 17px;
  top: 30px;
  animation-delay: -0.90s;
}

.preloaderWrap>div:nth-child(24) {
  transform: rotate(207deg);
  transform-origin: 23px 36px;
}

.preloaderWrap div:nth-child(25)>div {
  left: 20px;
  top: 26px;
  animation-delay: -0.85s;
}

.preloaderWrap>div:nth-child(25) {
  transform: rotate(216deg);
  transform-origin: 26px 32px;
}

.preloaderWrap div:nth-child(26)>div {
  left: 23px;
  top: 23px;
  animation-delay: -0.79s;
}

.preloaderWrap>div:nth-child(26) {
  transform: rotate(225deg);
  transform-origin: 29px 29px;
}

.preloaderWrap div:nth-child(27)>div {
  left: 26px;
  top: 20px;
  animation-delay: -0.73s;
}

.preloaderWrap>div:nth-child(27) {
  transform: rotate(234deg);
  transform-origin: 32px 26px;
}

.preloaderWrap div:nth-child(28)>div {
  left: 30px;
  top: 17px;
  animation-delay: -0.68s;
}

.preloaderWrap>div:nth-child(28) {
  transform: rotate(243deg);
  transform-origin: 36px 23px;
}

.preloaderWrap div:nth-child(29)>div {
  left: 35px;
  top: 15px;
  animation-delay: -0.625s;
}

.preloaderWrap>div:nth-child(29) {
  transform: rotate(252deg);
  transform-origin: 41px 21px;
}

.preloaderWrap div:nth-child(30)>div {
  left: 39px;
  top: 14px;
  animation-delay: -0.56s;
}

.preloaderWrap>div:nth-child(30) {
  transform: rotate(261deg);
  transform-origin: 45px 20px;
}

.preloaderWrap div:nth-child(31)>div {
  left: 44px;
  top: 14px;
  animation-delay: -0.51s;
}

.preloaderWrap>div:nth-child(31) {
  transform: rotate(270deg);
  transform-origin: 50px 20px;
}

.preloaderWrap div:nth-child(32)>div {
  left: 49px;
  top: 14px;
  animation-delay: -0.45s;
}

.preloaderWrap>div:nth-child(32) {
  transform: rotate(279deg);
  transform-origin: 55px 20px;
}

.preloaderWrap div:nth-child(33)>div {
  left: 53px;
  top: 15px;
  animation-delay: -0.39s;
}

.preloaderWrap>div:nth-child(33) {
  transform: rotate(288deg);
  transform-origin: 59px 21px;
}

.preloaderWrap div:nth-child(34)>div {
  left: 58px;
  top: 17px;
  animation-delay: -0.34s;
}

.preloaderWrap>div:nth-child(34) {
  transform: rotate(297deg);
  transform-origin: 64px 23px;
}

.preloaderWrap div:nth-child(35)>div {
  left: 62px;
  top: 20px;
  animation-delay: -0.28s;
}

.preloaderWrap>div:nth-child(35) {
  transform: rotate(306deg);
  transform-origin: 68px 26px;
}

.preloaderWrap div:nth-child(36)>div {
  left: 65px;
  top: 23px;
  animation-delay: -0.22s;
}

.preloaderWrap>div:nth-child(36) {
  transform: rotate(315deg);
  transform-origin: 71px 29px;
}

.preloaderWrap div:nth-child(37)>div {
  left: 68px;
  top: 26px;
  animation-delay: -0.17s;
}

.preloaderWrap>div:nth-child(37) {
  transform: rotate(324deg);
  transform-origin: 74px 32px;
}

.preloaderWrap div:nth-child(38)>div {
  left: 71px;
  top: 30px;
  animation-delay: -0.11s;
}

.preloaderWrap>div:nth-child(38) {
  transform: rotate(333deg);
  transform-origin: 77px 36px;
}

.preloaderWrap div:nth-child(39)>div {
  left: 73px;
  top: 35px;
  animation-delay: -0.05s;
}

.preloaderWrap>div:nth-child(39) {
  transform: rotate(342deg);
  transform-origin: 79px 41px;
}

.preloaderWrap div:nth-child(40)>div {
  left: 74px;
  top: 39px;
  animation-delay: 0s;
}

.preloaderWrap>div:nth-child(40) {
  transform: rotate(351deg);
  transform-origin: 80px 45px;
}

.preloaderSpinner {
  width: 78px;
  height: 78px;
  display: inline-block;
  overflow: hidden;
  background: rgba(255, 255, 255, 0);
}

/*
=========================================
06. Header CSS
==========================================
*/
.header-section {
  z-index: 100;
}

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

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

.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;
  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 0;
  }

  .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;
  }
}

.navbar-nav>li:not(.dropdown)>a:hover,
.navbar-nav>li:not(.dropdown)>a.active {
  border-bottom: 1px solid #ffffff3d;
}

.dropdown-item.active,
.dropdown-item {
  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;
    transition: all 300ms ease;
  }

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

.searchModal {
  width: 40px;
  height: 40px;
  padding: 7px 10px;
}

.searchModal img {
  width: 18px;
  height: 18px;
}

.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-black);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  position: fixed !important;
}

/*
=========================================
08. Page Title CSS
==========================================
*/
@keyframes zoom-in-out {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

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

.swiper-slide {
  overflow: hidden;
}

.heroSliderItem {
  padding-top: 240px;
  padding-bottom: 380px;
}

@media screen and (max-width: 992px) {
  .heroSliderItem {
    padding-top: 100px;
    padding-bottom: 240px;
  }

  .hero-section .swiper-pagination {
    display: none !important;
  }
}

.heroSliderItem .hero-bg img {
  animation: zoom-in-out 20s ease infinite;
}

.heroThumbItem {
  padding: 30px;
}

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

.hero-content p {
  max-width: 600px;
}

.heroThumb-btn {
  margin-bottom: 60px;
}

.heroThumbItem::before {
  content: "";
  background: #1C1C25;
  background: linear-gradient(180deg, rgba(28, 28, 37, 0) 0%, rgba(28, 28, 37, 1) 86%);
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.heroThumbItem::before,
.heroThumbItem .heroThumb-bg {
  opacity: 0;
  transition: 300ms ease;
}

.swiper-slide-thumb-active .heroThumbItem::before {
  opacity: 0.8;
}

.swiper-slide-thumb-active .heroThumbItem .heroThumb-bg {
  opacity: 1;
}

.swiper-slide-thumb-active .heroThumb-btn {
  color: var(--bs-white) !important;
  background-color: var(--bs-primary) !important;
}

.swiper-pagination {
  width: auto !important;
  top: 0 !important;
  bottom: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  left: auto !important;
  right: 80px;
}

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

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

}



/*
=========================================
08. Page Title CSS
==========================================
*/
.paginationNav .breadcrumb-item+.breadcrumb-item::before {
  color: var(--bs-white);
}

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

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

/*
=========================================
09. About CSS
==========================================
*/
.section-label {
  font-size: 14px;
}

.about-year-box {
  transform: rotate(270deg);
  position: absolute;
  top: 48px;
  right: -48px;
}

.about-year-box::before {
  content: "";
  background-image: url("../images/about-arrow.svg");
  background-repeat: no-repeat;
  width: 28px;
  height: 24px;
  position: absolute;
  right: 16px;
  top: 0;
  transform: rotate(90deg);
}

.about-image-1 {
  max-width: calc(100% - 150px);
  padding-bottom: 118px;
}

.about-image-1 img {
  height: 405px;
  object-fit: cover;
}

.about-image-2 {
  width: 70%;
  position: absolute;
  bottom: 0;
  right: 0;
}

.about-image-2 img {
  height: 300px;
  object-fit: cover;
}

/*
=========================================
10. Calltoaction CSS
==========================================
*/
.shape-bg-1 img {
  width: 200px;
  height: 200px;
  object-position: left;
  object-fit: contain;
}

.shape-bg-2 img {
  width: 100px;
  height: 100px;
  object-position: right;
  object-fit: contain;
  right: 80px;
  position: relative;
}

.shape-bg-3 img {
  width: 100px;
  height: 100px;
  object-position: right;
  object-fit: contain;
  left: 10px;
  bottom: -25px;
  position: relative;
}

/*
=========================================
11. Service CSS
==========================================
*/

.service-box {
  margin-bottom: 20px;
  transition: all 300ms ease;
}

.service-box:hover {
  background-color: var(--bs-primary);
}

.service-box::before {
  content: "";
  width: 3px;
  height: 60px;
  background-color: var(--bs-white);
  position: absolute;
  left: 0;
  bottom: 0;
  transition: all 300ms ease;
}

.service-box::after {
  content: "";
  width: 3px;
  height: 60px;
  background-color: var(--bs-white);
  position: absolute;
  right: 0;
  top: 0;
  transition: all 300ms ease;
}

.service-box:hover::before {
  bottom: 50px;
}

.service-box:hover::after {
  top: 50px;
}

.service-box .service-icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  transition: all 300ms ease;
}

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

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

.service-box .service-content::before {
  content: "";
  background-image: url("../images/service-dots.svg");
  background-repeat: no-repeat;
  width: 60px;
  height: 60px;
  position: absolute;
  top: 0;
  right: 0;
}

.service-box .btn {
  background-image: url("../images/service-arrow-w.svg");
  background-repeat: no-repeat;
  background-position: center;
  color: transparent !important;
  width: 40px;
  height: 40px;
  padding: 5px !important;
  position: absolute;
  bottom: -20px;
  left: 0;
  right: 0;
  margin: auto;
}

.service-box:hover .btn {
  background-image: url("../images/service-arrow-h.svg");
  background-color: var(--bs-white) !important;
}

/*
=========================================
12. Project CSS
==========================================
*/
.imageBox {
  position: relative;
  overflow: hidden;
  margin-bottom: 0;
}

.imageBox img {
  border-right: 20px;
  position: relative;
  width: 100%;
  display: block;
  -webkit-transition: all 500ms ease;
  transition: all 300ms ease;
}

.imageBox img:first-child {
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 1;
  -webkit-transform: translateX(50%) scaleX(2);
  transform: translateX(50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

.project-bg img {
  min-height: 300px;
  object-fit: cover;
}

.project-content {
  background: #1C1C25;
  background: linear-gradient(180deg, rgba(28, 28, 37, 0) 0%, rgba(28, 28, 37, 1) 86%);
  visibility: hidden;
  opacity: 0;
  text-align: center;
  transition: all 300ms ease;
}

.project-box:hover .imageBox img:first-child {
  -webkit-transform: translateX(0) scaleX(1);
  transform: translateX(0) scaleX(1);
  opacity: 1;
  -webkit-filter: blur(0);
  filter: blur(0);
}

.project-box:hover .imageBox img:nth-child(2) {
  -webkit-transform: translateX(-50%) scaleX(2);
  transform: translateX(-50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

.project-box:hover .project-content {
  visibility: visible;
  opacity: 1;
}

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

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

.projectNav li {
  margin: .2rem !important;
}

.projectNav li a.active {
  color: var(--bs-primary);
}

.mixitup-control-active {
  background-color: var(--bs-primary) !important;
  color: var(--bs-white) !important;
}

/*
=========================================
13. Team CSS
==========================================
*/

.team-box:hover .imageBox img:first-child {
  -webkit-transform: translateX(0) scaleX(1);
  transform: translateX(0) scaleX(1);
  opacity: 1;
  -webkit-filter: blur(0);
  filter: blur(0);
}

.team-box:hover .imageBox img:nth-child(2) {
  -webkit-transform: translateX(-50%) scaleX(2);
  transform: translateX(-50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

.team-box .team-content {
  padding: 30px;
  margin: -100px 20px 0px 20px;
}

.team-social li {
  margin: 0 !important;
}

.team-social li a {
  width: 40px;
  height: 40px;
}

.team-social li a::before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--bs-primary);
  position: absolute;
  left: -100%;
  bottom: 0;
  transition: all 300ms ease;
  opacity: 0;
  visibility: hidden;
}

.team-social li a:hover::before {
  left: 0;
  opacity: 1;
  visibility: visible;
}

.team-social li a img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  transition: all 300ms ease;
}

.team-social li a:hover img {
  filter: none;
}

/*
=========================================
14. Counter CSS
==========================================
*/

@keyframes pulse-animation {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }

  70% {
    transform: scale(1.1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }

  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}

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

.counter-box .counter-icon {
  width: 64px;
  height: 64px;
  animation: pulse-animation 2s infinite;

}

.counter-box .counter-icon img {
  width: 40px;
  height: 40px;
  object-fit: cover;
}

/*
=========================================
15. Pricing CSS
==========================================
*/
.pricing-box {
  transition: all 300ms ease;
}

.pricing-box:hover {
  box-shadow: 0px 15px 38px rgba(0, 0, 0, 0.15) !important;
}

.pricing-list .list-icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.pricing-list li {
  margin: 20px 0;
}

.pricing-button {
  padding: 30px;
}

/*
=========================================
16. Testimonial CSS
==========================================
*/
.testimonial-image {
  aspect-ratio: 1.132;
  clip-path: shape(from 84.07% 0.13%, curve to 99.03% 30.86% with 92.94% 1.48%/97.18% 16.17%, curve to 94.26% 70.58% with 100.88% 45.55%/100.48% 60.23%, curve to 64.35% 92.16% with 88.18% 80.92%/76.53% 86.76%, curve to 29.28% 98.75% with 52.31% 97.55%/39.74% 102.35%, curve to 5.33% 70.73% with 18.83% 95.31%/10.49% 83.46%, curve to 1.75% 33.85% with 0.16% 57.99%/-1.69% 44.5%, curve to 22.93% 13.77% with 5.33% 23.06%/14.33% 15.27%, curve to 50.85% 13.77% with 31.66% 12.42%/40% 17.22%, curve to 84.07% 0.13% with 61.84% 10.32%/75.21% -1.37%, close);
  max-width: 500px;
}

.testimonial-star img {
  width: 16px;
  height: 16px;
}

/*
=========================================
17. WhyChoose CSS
==========================================
*/
.whychoose-year-box {
  transform: rotate(270deg);
  position: absolute;
  top: 48px;
  left: -48px;
}

.whychoose-image-1 {
  max-width: calc(100% - 150px);
  padding-bottom: 118px;
}

.whychoose-image-1 img {
  height: 405px;
  object-fit: cover;
}

.whychoose-image-2 {
  width: 70%;
  position: absolute;
  bottom: 0;
  right: 0;
}

.whychoose-image-2 img {
  height: 300px;
  object-fit: cover;
}

.whychoose-icon {
  width: 40px;
  height: 40px;
}

/*
=========================================
18. Process CSS
==========================================
*/

.process-image img {
  width: 250px;
  width: 250px;
  aspect-ratio: 1.132;
  clip-path: shape(from 84.07% 0.13%, curve to 99.03% 30.86% with 92.94% 1.48%/97.18% 16.17%, curve to 94.26% 70.58% with 100.88% 45.55%/100.48% 60.23%, curve to 64.35% 92.16% with 88.18% 80.92%/76.53% 86.76%, curve to 29.28% 98.75% with 52.31% 97.55%/39.74% 102.35%, curve to 5.33% 70.73% with 18.83% 95.31%/10.49% 83.46%, curve to 1.75% 33.85% with 0.16% 57.99%/-1.69% 44.5%, curve to 22.93% 13.77% with 5.33% 23.06%/14.33% 15.27%, curve to 50.85% 13.77% with 31.66% 12.42%/40% 17.22%, curve to 84.07% 0.13% with 61.84% 10.32%/75.21% -1.37%, close);
}

.process-number {
  top: 0px;
  left: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background-color: var(--bs-primary);
  color: var(--bs-white);
  margin: auto;
  padding: 8px;
  border-radius: 50px;
}

.process-number::before {
  content: "";
  width: 1px;
  height: 70px;
  border-left: 1px dashed var(--bs-primary);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.process-wrapper:before {
  content: "";
  width: 100%;
  max-width: 880px;
  height: 1px;
  border-bottom: 1px dashed var(--bs-primary);
  position: absolute;
  left: 0;
  right: 0;
  top: 2px;
  margin: auto;
}

@media screen and (max-width: 768px) {
  .process-wrapper:before {
    height: 100%;
    width: 1px;
    border-left: 1px dashed red;
    left: 0;
    right: auto;
  }

  .process-number {
    left: -20px;
    bottom: 0;
    top: 35px;
    right: auto;
  }

  .process-number::before {
    border-bottom: 1px dashed red;
    height: 1px;
    width: 20px;
    top: 0;
    left: -50px;
  }
}

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

.accordion-item {
  border-color: var(--bs-light);
  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-secondary);
  box-shadow: 5px 5px var(--bs-white);
}

.accordion-item:not(:first-of-type) {
  border-top: 1px solid var(--bs-light);
}

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

.accordion-button:not(.collapsed) {
  box-shadow: inset 0 calc(-1 * 1px) 0 var(--bs-light);
}

/*
=========================================
20. Blog CSS
==========================================
*/

.blog-image img {
  min-height: 250px;
  object-fit: cover;
}

.blog-image .btn {
  opacity: 0;
  visibility: hidden;
  transition: all 300ms ease;
}

.blog-box:hover .blog-image .btn {
  opacity: 1;
  visibility: visible;
}

.blog-content {
  padding: 30px;
}

.blog-calendar {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  left: 30px;
  bottom: -20px;
}

.blog-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  position: relative;
  bottom: 2px;
}

.blog-box:hover .imageBox img:first-child {
  -webkit-transform: translateX(0) scaleX(1);
  transform: translateX(0) scaleX(1);
  opacity: 1;
  -webkit-filter: blur(0);
  filter: blur(0);
}

.blog-box:hover .imageBox img:nth-child(2) {
  -webkit-transform: translateX(-50%) scaleX(2);
  transform: translateX(-50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

.author-image {
  width: 64px;
  width: 64px;
}

.author-social a img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

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

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

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

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

.sidebar-widget .sidebar-title::before {
  content: "";
  width: 40px;
  height: 1px;
  background-color: var(--bs-primary);
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.search-sidebar input {
  border-radius: 8px;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  height: 45px;
  border-color: var(--bs-white);
}

.search-sidebar .btn {
  border-radius: 8px;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  height: 45px;
  padding: 10px 22px;
}

.search-sidebar .btn img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.post-sidebar .post-image {
  width: 70px;
  height: 70px;
}

.post-sidebar .post-meta {
  font-size: 14px;
}

.category-sidebar .category-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  position: relative;
  bottom: 2px;
}

.tag-sidebar li {
  margin: 4px !important;
}

.tag-sidebar li .btn {
  color: var(--bs-secondary);
}

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

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

.entry-content blockquote {
  text-align: right;
  padding: 30px;
  box-shadow: 0px 15px 38px rgba(0, 0, 0, 0.15) !important;
  font-style: italic;
}

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

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

.single-social li a img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  transition: all 300ms ease;
}

.single-social li a:hover img {
  filter: none;
}

.comment-box .comment-avatar {
  width: 70px;
  height: 70px;
}

.comment-box .comment-btn .comment-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  filter: grayscale(100%);
  transition: all 300ms ease;
}

.comment-box .comment-btn {
  transition: all 300ms ease;
}

.comment-box .comment-btn:hover {
  color: var(--bs-primary);
}

.comment-box .comment-btn:hover .comment-icon {
  filter: none;
}

/*
=========================================
23. Contact CSS
==========================================
*/
.error-logo img {
  max-width: 400px;
}

.contact-icon {
  width: 40px;
  height: 40px;
}

.contact-icon img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
  object-fit: contain;
}

.contact-content a {
  color: var(--bs-white);
  transition: all 300ms ease;
}

.contact-content a:hover {
  color: var(--bs-primary);
}

.contact-share li img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
  object-fit: contain;
}

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

.contactMap small {
  width: 64px;
  height: 64px;
}

/*
=========================================
24. Footer CSS
==========================================
*/


.footerList li {
  margin: 12px 0;
}

.footerList li .footer-dot {
  width: 8px;
  height: 8px;
  background-color: var(--bs-light);
  display: inline-block;
  border-radius: 50px;
  margin: 2px;
  transition: all 300ms ease;
}

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

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

.footerList li a:active .footer-dot,
.footerList li a:hover .footer-dot,
.footerList li a:focus .footer-dot {
  background-color: var(--bs-primary);
}

.footerLink li a {
  color: var(--bs-white);
  transition: all 300ms ease;
}

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

.footer-icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.footer-icon img {
  width: 20px;
  height: 20px;
}

.footer-form input {
  padding: 12px;
}