/* CTA Form Container Styles */
.cta-form-container {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 400px;
    margin: 0 auto;
}

.cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    margin-right: 15px;
    flex-shrink: 0;
}

.cta-input-group {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 10px;
}

.cta-input-group input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 14px;
}

.cta-input-group input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.cta-input-group button {
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    background: var(--theme);
    color: white;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cta-input-group button:hover {
    background: var(--theme-2);
    transform: translateY(-2px);
}

/* Maroon Button Styles */
.bg-maroon {
    background-color: #58151c !important;
    color: white !important;
    transition: all 0.3s ease;
}

.bg-maroon:hover {
    background-color: #FFD700 !important;
    color: #58151c !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

/* Homepage Gold Hover Effect Only */
.bg-maroon-hover:hover {
    background-color: #FFD700 !important;
    color: #58151c !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

/* Gold Button Styles for Non-Homepage Pages */
.bg-theme {
    background-color: #bd9e70 !important;
    color: white !important;
    transition: all 0.3s ease;
}

.bg-theme:hover {
    background-color: #58151c !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.17);
}

/*
Theme Name: Oraxis
Author: ModinaTheme
Author URI: https://themeforest.net/user/modinatheme/
Description: Architecture & Interior Html Template
Version: 1.1.0
*/
/*CSS Table Of Content Ends Here*/
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
:root {
  --body: #fff;
  --black: #000;
  --white: #fff;
  --theme: #bd9e70;
  --theme-2: #bd9e70;
  --header: #000000;
  --base: #00813D;
  --text: #54595F;
  --text2: #bfbfbf;
  --border: #E6E6E6;
  --border2: #373737;
  --ratting: #F8BC26;
  --bg: #F8F8F8;
  --bg2: #0D0D0D;
  --color-gradient-1: linear-gradient(to left, #fd4a81, #ff5e73, #ff7269, #ff8662, #fc9860);
  ---color-gradient-2: linear-gradient(to left, #ff8662, #fc9860, #ff7269, #fd4a81, #ff5e73);
  ---box-shadow: 0px 6px 25px rgba(0, 0, 0, 0.05);
}

.theme-btn {
  background-color: var(--theme);
  color: var(--white);
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  padding: 22px 40px;
  border-radius: 0;
  letter-spacing: 1.2px;
  line-height: 1;
  text-transform: capitalize;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  position: relative;
  z-index: 1;
  border-radius: 20px;
}
.theme-btn::before {
  content: "";
  background-color: var(--header);
  width: 0;
  height: 50%;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  z-index: -1;
  border-radius: 20px 20px 0 0;
  display: none !important; /* Remove animation mechanics */
}
.theme-btn::after {
  content: "";
  background-color: var(--header);
  width: 0;
  height: 50%;
  position: absolute;
  bottom: 0;
  right: 0;
  -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
  z-index: -1;
  border-radius: 0 0 20px 20px;
  display: none !important; /* Remove animation mechanics */
}
.theme-btn i {
  margin-left: 20px;
}
.theme-btn:hover {
  color: var(--white) !important;
  background-color: #bd9e70 !important; /* Instant fill */
  transition: none !important;
}
.theme-btn:hover::before, .theme-btn:hover::after {
  display: none !important;
}
.theme-btn.bg-transparent {
  background-color: transparent;
  border: 1px solid var(--theme);
  color: var(--header);
}
.theme-btn.bg-transparent::before {
  border-radius: 20px 20px 0 0;
  background-color: var(--theme);
}
.theme-btn.bg-transparent::after {
  border-radius: 0 0 20px 20px;
  background-color: var(--theme);
}
.theme-btn.bg-transparent:hover {
  color: var(--white);
}
.theme-btn.padding-style {
  padding: 24px 40px;
  line-height: 1.3;
}
@media (max-width: 767px) {
  .theme-btn.padding-style {
    padding: 18px 32px;
  }
}
@media (max-width: 575px) {
  .theme-btn.padding-style {
    padding: 16px 30px;
    font-size: 14px;
  }
}
.theme-btn.bg-white {
  background: var(--white);
  color: var(--header);
}
.theme-btn.bg-gold {
  background: #bd9e70;
  color: var(--white);
  border: none;
}
.theme-btn.bg-gold:hover {
  background: #8b6914;
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.17);
}
.theme-btn.bg-white::before, .theme-btn.bg-white::after {
  background-color: var(--header);
}
.theme-btn.bg-white:hover {
  color: var(--white);
}
.theme-btn.radius-none {
  border-radius: 0;
}
.theme-btn.radius-none::before, .theme-btn.radius-none::after {
  border-radius: 0;
}
.theme-btn.hover-white::before, .theme-btn.hover-white::after {
  background-color: var(--white);
}
.theme-btn.hover-white:hover {
  color: var(--header);
}
@media (max-width: 767px) {
  .theme-btn {
    padding: 18px 32px;
  }
}
@media (max-width: 575px) {
  .theme-btn {
    padding: 16px 30px;
    font-size: 14px;
  }
}

.link-btn {
  letter-spacing: 1.2px;
  text-transform: capitalize;
  color: var(--header);
  font-weight: 600;
  display: inline-block;
  font-size: 14px;
}
.link-btn i {
  margin-left: 20px;
}
.link-btn:hover {
  color: var(--theme);
}
.link-btn.white-btn {
  color: var(--white);
}
.link-btn.white-btn:hover {
  color: var(--theme);
}

/* --------------------------------------------
    Template Default Fonts & Fonts Styles
 ---------------------------------------------- */
body {
  font-family: "Montserrat", sans-serif;
  font-size: 16px;
  font-weight: normal;
  line-height: 28px;
  color: var(--text);
  background-color: var(--white);
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

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

button {
  border: none;
  background-color: transparent;
  padding: 0;
}

input:focus {
  color: var(--white);
  outline: none;
}

input {
  color: var(--white);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", sans-serif;
  margin: 0px;
  padding: 0;
  color: var(--header);
  text-transform: capitalize;
  transition: all 0.4s ease-in-out;
}

h1 {
  font-size: 68px;
  font-weight: 400;
  line-height: 118%;
}

h2 {
  font-size: 48px;
  line-height: 125%;
  font-weight: 400;
}
@media (max-width: 1199px) {
  h2 {
    font-size: 42px;
  }
}
@media (max-width: 767px) {
  h2 {
    font-size: 36px;
  }
}
@media (max-width: 575px) {
  h2 {
    font-size: 32px;
  }
}

h3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 133%;
}
@media (max-width: 575px) {
  h3 {
    font-size: 20px;
  }
}

h4 {
  font-size: 20px;
  font-weight: 400;
}

h5 {
  font-size: 20px;
  font-weight: 400;
}

h6 {
  font-size: 16px;
  font-weight: 400;
  line-height: 145%;
}

a {
  text-decoration: none;
  outline: none !important;
  cursor: pointer;
  color: var(--header);
  transition: all 0.4s ease-in-out;
}

p {
  margin: 0px;
  transition: all 0.4s ease-in-out;
}

.preloader {
  align-items: center;
  cursor: default;
  display: flex;
  height: 100%;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9999999;
}
.preloader .animation-preloader {
  z-index: 1000;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.preloader .animation-preloader .spinner {
  animation: spinner 1s infinite linear;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--theme);
  height: 9em;
  width: 9em;
  z-index: 10;
  margin-bottom: 2em;
}
.preloader-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: -1em; /* Offsetting the spinner's relative center */
  z-index: 5;
}
.preloader-img {
  width: 50px !important;
  height: auto !important;
  z-index: 20;
}
@media (max-width: 767px) {
  .preloader .animation-preloader .spinner {
    width: 7.5em;
    height: 7.5em;
  }
  .preloader-img {
    width: 50px !important;
  }
}
.preloader .animation-preloader .txt-loading {
  font: bold 5em "Montserrat", sans-serif, "Montserrat", sans-serif;
  text-align: center;
  user-select: none;
}
@media (max-width: 767px) {
  .preloader .animation-preloader .txt-loading {
    font-size: 2.5em;
  }
}
.preloader .animation-preloader .txt-loading .letters-loading {
  color: var(--theme);
  position: relative;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(2):before {
  animation-delay: 0.2s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(3):before {
  animation-delay: 0.4s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(4):before {
  animation-delay: 0.6s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(5):before {
  animation-delay: 0.8s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(6):before {
  animation-delay: 1s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(7):before {
  animation-delay: 1.2s;
}
.preloader .animation-preloader .txt-loading .letters-loading:nth-child(8):before {
  animation-delay: 1.4s;
}
.preloader .animation-preloader .txt-loading .letters-loading::before {
  animation: letters-loading 4s infinite;
  color: var(--header);
  content: attr(data-text-preloader);
  left: 0;
  opacity: 0;
  font-family: "Montserrat", sans-serif;
  position: absolute;
  top: -3px;
  transform: rotateY(-90deg);
}
.preloader p {
  font-size: 20px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 8px;
  color: var(--theme);
}
.preloader .loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 0;
  z-index: 1;
  pointer-events: none;
}
.preloader .loader .row {
  height: 100%;
}
.preloader .loader .loader-section {
  padding: 0px;
}
.preloader .loader .loader-section .bg {
  background-color: #fff;
  height: 100%;
  left: 0;
  width: 100%;
  transition: all 800ms cubic-bezier(0.77, 0, 0.175, 1);
}
.preloader.loaded .animation-preloader {
  opacity: 0;
  transition: 0.3s ease-out;
}
.preloader.loaded .loader-section .bg {
  width: 0;
  transition: 0.7s 0.3s allcubic-bezier(0.1, 0.1, 0.1, 1);
}

.search-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  background-color: rgba(255, 255, 255, 0.9);
}
.search-wrap .search-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.search-wrap .search-cell {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}
.search-wrap .search-field-holder {
  width: 50%;
  margin: auto;
  position: relative;
  animation: slideInUp 0.3s;
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .search-wrap .search-field-holder {
    width: 70%;
  }
}
@media (max-width: 575px) {
  .search-wrap .search-field-holder {
    width: 80%;
  }
}
.search-wrap .main-search-input {
  width: 100%;
  height: 70px;
  border: 0;
  padding: 0 50px;
  text-transform: capitalize;
  background: transparent;
  font-size: 25px;
  color: var(--header);
  border-bottom: 2px solid var(--header);
  text-align: center;
  letter-spacing: 2px;
}

@media (max-width: 575px) {
  .search-wrap .main-search-input {
    height: 50px;
    padding: 0 0;
    line-height: 50px;
    font-size: 18px;
  }
}
.search-wrap input.form-control,
.search-wrap input.form-control:focus {
  background-color: var(--header);
}

input.main-search-input::placeholder {
  color: var(--header);
  opacity: 1;
  font-size: 25px;
}

@media (max-width: 575px) {
  input.main-search-input::placeholder {
    font-size: 18px;
  }
}
.search-close {
  position: absolute;
  top: 50px;
  right: 50px;
  font-size: 30px;
  color: var(--theme);
  cursor: pointer;
}

.scroll-up {
  cursor: pointer;
  display: block;
  border-radius: 50px;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  transform: translateY(15px);
  position: fixed;
  right: 25px;
  bottom: 35px;
  height: 50px;
  width: 50px;
  transition: all 0.4s ease-in-out;
}

.scroll-up::after {
  position: absolute;
  font-family: "Font Awesome 5 Pro";
  content: "\f176";
  text-align: center;
  line-height: 50px;
  font-weight: 700;
  font-size: 18px;
  color: var(--theme);
  left: 0;
  top: 0;
  height: 50px;
  width: 50px;
  cursor: pointer;
  display: block;
  z-index: 1;
  transition: all 0.4s ease-in-out;
}

.scroll-up svg path {
  fill: none;
}

.scroll-up svg.scroll-circle path {
  stroke: var(--theme);
  stroke-width: 4px;
  box-sizing: border-box;
  transition: all 0.4s ease-in-out;
}

.scroll-up.active-scroll {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mouse-cursor {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  border-radius: 50%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  visibility: hidden;
}
@media (max-width: 767px) {
  .mouse-cursor {
    display: none;
  }
}

.cursor-inner {
  width: 6px;
  height: 6px;
  z-index: 10000001;
  background-color: var(--theme);
  -webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
  -o-transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
  transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.cursor-inner.cursor-hover {
  margin-left: -35px;
  margin-top: -35px;
  width: 70px;
  height: 70px;
  background-color: var(--theme);
  opacity: 0.3;
}

.cursor-outer {
  margin-left: -12px;
  margin-top: -12px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--theme);
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  z-index: 10000000;
  opacity: 0.5;
  -webkit-transition: all 0.08s ease-out;
  -o-transition: all 0.08s ease-out;
  transition: all 0.08s ease-out;
}

.cursor-outer.cursor-hover {
  opacity: 0;
}

.section-title {
  position: relative;
  z-index: 99;
  margin-bottom: 30px;
  margin-top: -6px;
}
@media (max-width: 767px) {
  .section-title {
    margin-bottom: 0;
  }
}
.section-title h6 {
  color: var(--theme);
  margin-bottom: 20px;
  display: inline-block;
  font-weight: 400;
  text-transform: capitalize;
  font-size: 18px;
}
.section-title h2 {
  text-transform: capitalize !important;
}
.section-title span {
  text-transform: capitalize !important;
}
.section-title h3 {
  font-size: 28px;
  font-weight: 400;
}
@media (max-width: 767px) {
  .section-title br {
    display: none;
  }
}

.section-title-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 767px) {
  .section-title-area {
    flex-wrap: wrap;
    gap: 30px;
  }
}

.center {
  text-align: center;
  margin: 0 auto;
}

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

.section-bg-2 {
  background-color: var(--bg2);
}

.section-padding {
  padding: 120px 0;
}
@media (max-width: 1199px) {
  .section-padding {
    padding: 100px 0;
  }
}
@media (max-width: 991px) {
  .section-padding {
    padding: 80px 0;
  }
}

@-webkit-keyframes rippleOne {
  70% {
    -webkit-box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
    box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
    box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
  }
}
@keyframes rippleOne {
  70% {
    -webkit-box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
    box-shadow: 0 0 0 40px rgba(244, 68, 56, 0);
  }
  100% {
    -webkit-box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
    box-shadow: 0 0 0 0 rgba(244, 68, 56, 0);
  }
}
@keyframes cir36 {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rounded {
  50% {
    transform: rotate(15deg);
  }
}
@keyframes rounded-2 {
  50% {
    transform: rotate(5deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.animation__rotate {
  -webkit-animation: rotate 40s linear infinite;
  animation: rotate 40s linear infinite;
}

@-webkit-keyframes spinner {
  to {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}
@keyframes spinner {
  to {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}
@-webkit-keyframes letters-loading {
  0%, 75%, 100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  25%, 50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}
@keyframes letters-loading {
  0%, 75%, 100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }
  25%, 50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}
@keyframes loaderspin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes tpswing {
  0% {
    -webkit-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}
@keyframes width {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes width {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes loaderspin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes loaderpulse {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
.float-bob-y {
  -webkit-animation-name: float-bob-y;
  animation-name: float-bob-y;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

@-webkit-keyframes float-bob-y {
  0% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
}
@keyframes float-bob-y {
  0% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
}
@keyframes top-image-bounce {
  0% {
    transform: translateX(-8px);
  }
  50% {
    transform: translateX(12px);
  }
  100% {
    transform: translateX(-8px);
  }
}
@keyframes top-image-bounce-2 {
  0% {
    transform: translatey(-8px);
  }
  50% {
    transform: translatey(12px);
  }
  100% {
    transform: translatey(-8px);
  }
}
@keyframes toggle {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes moveCursor1 {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
}
@keyframes moveCursor1 {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  to {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
  }
}
@-webkit-keyframes moveCursor2 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes moveCursor2 {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
}
.splt-txt .whitespace {
  width: 8px;
}
.splt-txt.animated .char {
  -webkit-animation: fadeInUp 0.4s cubic-bezier(0.3, 0, 0.7, 1) both;
  animation: fadeInUp 0.4s cubic-bezier(0.3, 0, 0.7, 1) both;
  -webkit-animation-delay: calc(30ms * var(--char-index));
  animation-delay: calc(30ms * var(--char-index));
}

.header-top-section {
  position: relative;
  z-index: 9;
  background-color: #58151c;
  padding: 5px 0;
}

@media (max-width: 991px) {
  .header-top-section {
    display: block;
  }
}

.header-top-wrapper .top-right {
    display: flex;
    align-items: center;
}

.header-top-wrapper .contact-list {
    display: flex;
    align-items: center;
}

.header-top-wrapper .contact-list li i {
    color: var(--theme);
    margin-right: 20px;
}

.header-top-wrapper .contact-list li a {
    color: var(--text);
}

.header-top-wrapper .contact-list li .link {
    color: var(--white);
}

.header-top-wrapper .top-right {
  display: flex;
  align-items: center;
  gap: 80px;
}

.header-top-wrapper .top-right .social-icon {
  gap: 25px;
}

.header-top-wrapper .top-right .social-icon span {
  color: var(--white);
}
.header-top-wrapper .top-right .social-icon i {
  color: var(--white);
  transition: all 0.4s ease-in-out;
}
.header-top-wrapper .top-right .social-icon i:hover {
  color: var(--theme);
}

.header-main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 20px 0;
}
@media (max-width: 1199px) {
  .header-main {
    padding: 20px 0px;
  }
}
.header-main .main-menu ul {
  margin-bottom: 0;
}
.header-main .main-menu ul li {
  position: relative;
  list-style: none;
  display: inline-block;
  margin-inline-end: 30px;
  padding: 30px 0;
}
.header-main .main-menu ul li:last-child {
  margin-inline-end: 0;
}
.header-main .main-menu ul li a {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  color: var(--header);
  text-align: left;
  position: relative;
  text-transform: capitalize;
  transition: all 0.4s ease-in-out;
}
.header-main .main-menu ul li a i {
  font-size: 20px;
  font-weight: 400;
  margin-left: 20px;
}
.header-main .main-menu ul li a:hover {
  color: var(--theme) !important;
}
.header-main .main-menu ul li .submenu {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  min-width: 240px;
  background: var(--white);
  z-index: 99999;
  visibility: hidden;
  opacity: 0;
  transform-origin: top center;
  color: var(--header);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
  transform: translateY(10px);
  transition: all 0.4s ease-in-out;
}
.header-main .main-menu ul li .submenu li {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}
.header-main .main-menu ul li .submenu li a {
  position: relative;
  z-index: 11;
  font-size: 16px;
  font-weight: 500;
  color: var(--header);
  padding: 0 25px;
  padding-bottom: 11px;
  padding-top: 11px;
  width: 100%;
  border-bottom: 1px solid #eeeeee;
}
.header-main .main-menu ul li .submenu li:last-child a {
  border: none;
}
.header-main .main-menu ul li .submenu li .submenu {
  inset-inline-start: 100%;
  top: 0;
  visibility: hidden;
  opacity: 0;
}
.header-main .main-menu ul li .submenu li:hover > a {
  background: var(--theme);
  color: var(--white) !important;
}
.header-main .main-menu ul li .submenu li:hover > a::after {
  color: var(--theme);
}
.header-main .main-menu ul li .submenu li:hover > .submenu {
  -webkit-transform: translateY(1);
  -moz-transform: translateY(1);
  -ms-transform: translateY(1);
  -o-transform: translateY(1);
  transform: translateY(1);
  visibility: visible;
  opacity: 1;
}
.header-main .main-menu ul li .submenu li.has-dropdown > a::after {
  position: absolute;
  top: 50%;
  inset-inline-end: 25px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  color: var(--theme);
}
.header-main .main-menu ul li .has-homemenu {
  width: 1100px;
  padding: 30px 30px 20px 30px;
  opacity: 0;
  left: -250px;
  visibility: hidden;
  padding: 30px 30px 20px 30px;
}
.header-main .main-menu ul li .has-homemenu .homemenu {
  position: relative;
}
.header-main .main-menu ul li .has-homemenu .homemenu .homemenu-thumb {
  position: relative;
}
.header-main .main-menu ul li .has-homemenu .homemenu .homemenu-thumb .demo-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  gap: 20px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  margin-top: 20px;
}
.header-main .main-menu ul li .has-homemenu .homemenu .homemenu-thumb .demo-button .theme-btn {
  padding: 12px 20px;
  color: var(--white) !important;
  width: initial;
  font-size: 14px;
  text-align: center;
}
.header-main .main-menu ul li .has-homemenu .homemenu .homemenu-thumb .demo-button .theme-btn:hover {
  color: var(--white) !important;
}
.header-main .main-menu ul li .has-homemenu .homemenu .homemenu-thumb::before {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(99, 92, 92, 0)), to(#292930));
  background: linear-gradient(to bottom, rgba(99, 92, 92, 0) 0%, #292930 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  content: "";
}
.header-main .main-menu ul li .has-homemenu .homemenu .homemenu-thumb:hover::before {
  visibility: visible;
  opacity: 1;
}
.header-main .main-menu ul li .has-homemenu .homemenu .homemenu-thumb:hover .demo-button {
  opacity: 1;
  visibility: visible;
  margin-top: 0;
}
.header-main .main-menu ul li .has-homemenu .homemenu .homemenu-thumb:hover .homemenu-btn {
  opacity: 1;
  visibility: visible;
  bottom: 50%;
  transform: translateY(50%);
}
.header-main .main-menu ul li .has-homemenu .homemenu .homemenu-thumb img {
  width: 100%;
}
.header-main .main-menu ul li .has-homemenu .homemenu .homemenu-title {
  text-align: center;
  margin: 20px auto;
  display: inline-block;
  font-size: 16px;
}
.header-main .main-menu ul li:hover > a {
  color: var(--theme);
}
.header-main .main-menu ul li:hover > a::after {
  color: var(--theme);
}
.header-main .main-menu ul li:hover > .submenu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0px);
}

.header-1 {
  position: relative;
  z-index: 9;
}
/* Header 3-col: logo | centered nav | buttons */
.header-1 .mega-menu-wrapper .header-main .header-left {
  display: contents; /* flatten children into the grid */
}
.header-1 .mega-menu-wrapper .header-main .header-left .logo {
  /* sits in first grid column */
}
.header-1 .mega-menu-wrapper .header-main .header-left .mean__menu-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}
.header-1 .mega-menu-wrapper .header-main .header-right {
  gap: 40px;
}
@media (max-width: 1399px) {
  .header-1 .mega-menu-wrapper .header-main .header-right {
    gap: 20px;
  }
}
.header-1 .mega-menu-wrapper .header-main .header-right .menu-cart {
  position: relative;
}
@media (max-width: 1199px) {
  .header-1 .mega-menu-wrapper .header-main .header-right .menu-cart {
    display: none;
  }
}
.header-1 .mega-menu-wrapper .header-main .header-right .menu-cart .cart-box {
  background: var(--white) none repeat scroll 0 0;
  box-shadow: 0 0 7px 0.5px rgba(0, 0, 0, 0.15);
  padding: 20px 20px 0px;
  position: absolute;
  left: -70px;
  top: 150%;
  transform: rotateX(90deg);
  transform-origin: center top 0;
  transition: all 0.5s ease 0s;
  visibility: hidden;
  width: 340px;
  z-index: 9999;
}
@media (max-width: 1399px) {
  .header-1 .mega-menu-wrapper .header-main .header-right .menu-cart .cart-box {
    left: -260px;
  }
}
.header-1 .mega-menu-wrapper .header-main .header-right .menu-cart .cart-box ul li {
  display: flex;
  align-items: center;
  padding: 20px 0;
  gap: 20px;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
}
.header-1 .mega-menu-wrapper .header-main .header-right .menu-cart .cart-box ul li a {
  padding: 0;
  position: relative;
  font-size: 16px;
  text-transform: capitalize;
}
.header-1 .mega-menu-wrapper .header-main .header-right .menu-cart .cart-box ul li a::after {
  position: absolute;
  content: "\f00d";
  font-family: "Font Awesome 5 Pro";
  font-weight: 600;
  top: 20px;
  right: -88px;
  color: var(--white);
  font-size: 20px;
  width: 18px;
  height: 18px;
  line-height: 18px;
  border-radius: 30px;
  background-color: var(--theme);
  text-align: center;
}
.header-1 .mega-menu-wrapper .header-main .header-right .menu-cart .cart-box ul li span {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--header);
}
.header-1 .mega-menu-wrapper .header-main .header-right .menu-cart .cart-box ul li img {
  width: 90px;
}
.header-1 .mega-menu-wrapper .header-main .header-right .menu-cart .cart-box .shopping-items {
  margin-top: 20px;
}
.header-1 .mega-menu-wrapper .header-main .header-right .menu-cart .cart-box .shopping-items span {
  font-size: 16px;
  font-weight: 600;
  color: var(--header);
  text-transform: capitalize;
}
.header-1 .mega-menu-wrapper .header-main .header-right .menu-cart .cart-box .cart-button {
  margin-top: 20px;
}
.header-1 .mega-menu-wrapper .header-main .header-right .menu-cart .cart-box .cart-button .theme-btn {
  padding: 16px 28px;
  font-size: 14px;
}
.header-1 .mega-menu-wrapper .header-main .header-right .menu-cart .cart-icon {
  position: relative;
  width: 45px;
  height: 45px;
  text-align: center;
  line-height: 45px;
  background-color: var(--bg);
  display: inline-block;
  border-radius: 50%;
}
.header-1 .mega-menu-wrapper .header-main .header-right .menu-cart .cart-icon::before {
  position: absolute;
  top: -7px;
  right: -8px;
  content: "1";
  width: 18px;
  line-height: 18px;
  height: 18px;
  border-radius: 18px;
  background-color: var(--theme);
  color: var(--white);
  font-size: 12px;
  text-align: center;
  font-weight: 500;
}
.header-1 .mega-menu-wrapper .header-main .header-right .menu-cart .cart-icon i {
  color: var(--header);
}
.header-1 .mega-menu-wrapper .header-main .header-right .menu-cart:hover .cart-box {
  transform: rotateX(0deg);
  visibility: visible;
}
@media (max-width: 1399px) {
  .header-1 .mega-menu-wrapper .header-main .header-right .header-button {
    display: none;
  }
}
.header-1.header-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}
.header-1.header-2 .container-fluid {
  padding: 0 80px;
}
@media (max-width: 1399px) {
  .header-1.header-2 .container-fluid {
    padding: 0 20px;
  }
}
.header-1.header-2 .mega-menu-wrapper .header-main .main-menu ul li a {
  color: var(--white);
}
.header-1.header-2 .mega-menu-wrapper .header-main .main-menu ul li:hover a {
  color: var(--theme);
}
.header-1.header-2 .mega-menu-wrapper .header-main .main-menu ul li .submenu li a {
  color: var(--header);
}
.header-1.header-2 .mega-menu-wrapper .header-main .main-menu ul li .submenu li:hover a {
  color: var(--header);
}
.header-1.header-2 .mega-menu-wrapper .header-main .header-right {
  gap: 40px;
}
@media (max-width: 1399px) {
  .header-1.header-2 .mega-menu-wrapper .header-main .header-right .header-button {
    display: none;
  }
}
.header-1.header-2 .mega-menu-wrapper .header-right {
  gap: 50px;
}
.header-1.header-2 .mega-menu-wrapper .header-right .icon-items {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (max-width: 1399px) {
  .header-1.header-2 .mega-menu-wrapper .header-right .icon-items {
    display: none;
  }
}
.header-1.header-2 .mega-menu-wrapper .header-right .icon-items .icon {
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  background-color: var(--theme);
  border-radius: 20px;
  color: var(--white);
}
.header-1.header-2 .mega-menu-wrapper .header-right .icon-items .content p {
  color: var(--white);
  margin-bottom: 20px;
}
.header-1.header-2 .mega-menu-wrapper .header-right .icon-items .content h4 a {
  color: var(--white);
}
.header-1.header-2 .mega-menu-wrapper .header-right .search-icon {
  color: var(--white);
  border-left: 1px solid var(--text);
  border-right: 1px solid var(--text);
  padding: 0 20px;
}

.header-3 {
  background-color: var(--bg);
  position: relative;
  z-index: 9;
}
.header-3 .container-fluid {
  padding: 0 80px;
}
@media (max-width: 1399px) {
  .header-3 .container-fluid {
    padding: 0 20px;
  }
}
.header-3 .mega-menu-wrapper .header-main {
  padding: 0;
}
.header-3 .mega-menu-wrapper .header-main .header-right {
  gap: 40px;
}
@media (max-width: 1399px) {
  .header-3 .mega-menu-wrapper .header-main .header-right .header-button {
    display: none;
  }
}
.header-3 .mega-menu-wrapper .header-right {
  gap: 50px;
}
.header-3 .mega-menu-wrapper .header-right .icon-items {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (max-width: 1399px) {
  .header-3 .mega-menu-wrapper .header-right .icon-items {
    display: none;
  }
}
.header-3 .mega-menu-wrapper .header-right .icon-items .icon {
  color: var(--theme);
  font-size: 32px;
}
.header-3 .mega-menu-wrapper .header-right .icon-items .content p {
  color: var(--text);
  margin-bottom: 20px;
}
.header-3 .mega-menu-wrapper .header-right .icon-items .content h4 a {
  color: var(--text);
}
.header-3 .mega-menu-wrapper .header-right .search-icon {
  color: var(--white);
  padding: 30px;
  background-color: var(--theme);
}

.header-4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
}
@media (max-width: 1199px) {
  .header-4 {
    background-color: var(--white);
  }
}
.header-4 .mega-menu-wrapper .header-main {
  padding: 20px 40px;
  background-color: var(--white);
  box-shadow: var(---box-shadow);
}
@media (max-width: 1199px) {
  .header-4 .mega-menu-wrapper .header-main {
    box-shadow: none;
    padding: 20px 0;
  }
}
.header-4 .mega-menu-wrapper .header-main .header-left {
  display: flex;
  align-items: center;
  gap: 90px;
}
.header-4 .mega-menu-wrapper .header-main .header-right {
  gap: 40px;
}
.header-4 .mega-menu-wrapper .header-main .header-right .search-icon {
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 0 20px;
}

.header-5 {
  position: relative;
  z-index: 9;
}
@media (max-width: 1399px) {
  .header-5 .mega-menu-wrapper .header-main .main-menu ul li .has-homemenu {
    left: -350px;
  }
}
.header-5 .mega-menu-wrapper .header-main .main-menu ul li a {
  color: var(--white);
}
.header-5 .mega-menu-wrapper .header-main .main-menu ul li:hover a {
  color: var(--theme);
}
.header-5 .mega-menu-wrapper .header-main .main-menu ul li .submenu li a {
  color: var(--header);
}
.header-5 .mega-menu-wrapper .header-main .main-menu ul li .submenu li:hover a {
  color: var(--header);
}
.header-5 .mega-menu-wrapper .header-main .header-right {
  gap: 20px;
}
.header-5 .mega-menu-wrapper .header-main .header-right .search-icon {
  width: 55px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  background-color: var(--bg2);
  color: var(--white);
}
.header-5 .mega-menu-wrapper .header-main .header-right .sidebar__toggle {
  width: 55px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  background-color: var(--bg2);
}
@media (max-width: 1199px) {
  .header-5 .mega-menu-wrapper .header-main .header-right .sidebar__toggle {
    display: block !important;
  }
}
.header-5 .mega-menu-wrapper .header-main .header-right .header-button .theme-btn {
  border-radius: 0;
}
.header-5 .mega-menu-wrapper .header-main .header-right .header-button::before, .header-5 .mega-menu-wrapper .header-main .header-right .header-button::after {
  border-radius: 0;
}
@media (max-width: 1399px) {
  .header-5 .mega-menu-wrapper .header-main .header-right .header-button {
    display: none;
  }
}

.sidebar__toggle {
  cursor: pointer;
}

.sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  width: 100%;
  z-index: 100;
  transition: all 0.9s;
  background-color: var(--white);
  box-shadow: var(---box-shadow);
  -webkit-transition: all 0.9s;
  transition: all 0.9s;
  -webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
  animation: 500ms ease-in-out 0s normal none 1 running fadeInDown;
}
.sticky.header-2 {
  background-color: #bd9e70;
}
.sticky .header-main .main-menu ul li {
  padding: 20px 0;
}
.sticky.header-4 .mega-menu-wrapper .header-main {
  box-shadow: none;
}
.sticky.header-5 {
  background-color: #bd9e70;
}
.sticky.header-5 .mega-menu-wrapper .header-main .main-menu ul li .has-homemenu {
  left: -450px;
}
.sticky.header-5 .mega-menu-wrapper .header-main .header-right .search-icon {
  display: none;
}
.sticky.header-5 .mega-menu-wrapper .header-main .header-right .sidebar__toggle {
  display: none;
}
.sticky.header-5 .mega-menu-wrapper .header-main .header-right .header-button {
  display: none;
}

.offcanvas__info {
  background: var(--white) none repeat scroll 0 0;
  border-left: 2px solid var(--theme);
  position: fixed;
  right: 0;
  top: 0;
  width: 400px;
  height: 100%;
  -webkit-transform: translateX(calc(100% + 80px));
  -moz-transform: translateX(calc(100% + 80px));
  -ms-transform: translateX(calc(100% + 80px));
  -o-transform: translateX(calc(100% + 80px));
  transform: translateX(calc(100% + 80px));
  -webkit-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  -moz-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out;
  z-index: 99999;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
}
.offcanvas__info::-webkit-scrollbar {
  display: none;
}

.offcanvas__info.info-open {
  opacity: 1;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.offcanvas__wrapper {
  position: relative;
  height: 100%;
  padding: 30px 30px;
}
.offcanvas__wrapper .offcanvas__content .text {
  color: var(--text);
}
.offcanvas__wrapper .offcanvas__content .offcanvas__close {
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--theme);
  position: relative;
  z-index: 9;
  cursor: pointer;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__close i {
  color: var(--white);
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact {
  margin-top: 20px;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul {
  margin-top: 20px;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li {
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li:not(:last-child) {
  margin-bottom: 20px;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li .offcanvas__contact-icon {
  margin-right: 20px;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact ul li .offcanvas__contact-icon i {
  color: var(--theme);
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact .header-button .theme-btn {
  width: 100%;
  padding: 16px 40px;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact .social-icon {
  margin-top: 30px;
  gap: 20px;
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact .social-icon a {
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  font-size: 16px;
  display: block;
  background: transparent;
  color: var(--header);
  border-radius: 50%;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  text-align: center;
  border: 1px solid var(--border);
}
.offcanvas__wrapper .offcanvas__content .offcanvas__contact .social-icon a:hover {
  background-color: var(--theme);
  color: var(--white);
}

.offcanvas__overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  background: #151515;
  z-index: 900;
  top: 0;
  opacity: 0;
  visibility: hidden;
  right: 0;
}

.offcanvas__overlay.overlay-open {
  opacity: 0.8;
  visibility: visible;
}

@media (max-width: 450px) {
  .offcanvas__info {
    width: 300px;
  }
}
@media (max-width: 575px) {
  .offcanvas__wrapper {
    padding: 20px;
  }
}
.breadcrumb-wrapper {
  position: relative;
  overflow: hidden;
}
.breadcrumb-wrapper::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.8) 100%);
}
.breadcrumb-wrapper .page-heading {
  position: relative;
  z-index: 9;
  margin-top: 55px;
}
@media (max-width: 1199px) {
  .breadcrumb-wrapper .page-heading {
    margin-top: 35px;
  }
}
@media (max-width: 991px) {
  .breadcrumb-wrapper .page-heading {
    text-align: center;
  }
}
.breadcrumb-wrapper .page-heading h1 {
  color: var(--white);
  font-weight: 300!important;
  font-size: 68px;
  position: relative;
  z-index: 9;
  line-height: 1.3;
}
@media (max-width: 991px) {
  .breadcrumb-wrapper .page-heading h1 {
    font-size: 50px;
  }
}
@media (max-width: 575px) {
  .breadcrumb-wrapper .page-heading h1 {
    font-size: 42px;
  }
}
.breadcrumb-wrapper .page-heading .breadcrumb-items {
  display: flex;
  align-items: center;
  margin-left: 5px;
  gap: 20px;
  margin-top: 20px;
}
@media (max-width: 991px) {
  .breadcrumb-wrapper .page-heading .breadcrumb-items {
    justify-content: center;
  }
}
.breadcrumb-wrapper .page-heading .breadcrumb-items li {
  font-size: 16px;
  color: var(--white);
  font-weight: 500;
  text-transform: capitalize;
}
.breadcrumb-wrapper .page-heading .breadcrumb-items li a {
  color: var(--white);
  transition: all 0.4s ease-in-out;
}
.breadcrumb-wrapper .page-heading .breadcrumb-items li a:hover {
  color: var(--theme);
}
.breadcrumb-wrapper .page-heading .breadcrumb-items li i {
  color: var(--white);
}
@media (max-width: 575px) {
  .breadcrumb-wrapper .page-heading .breadcrumb-items li i {
    font-size: 16px;
  }
}

.error-items .error-image {
  margin-bottom: 50px;
}
.error-items .error-image img {
  width: 100%;
  height: 100%;
}

.mean-container a.meanmenu-reveal {
  display: none;
}

.mean-container .mean-nav {
  background: none;
  margin-top: 0;
}

.mean-container .mean-bar {
  padding: 0;
  min-height: auto;
  background: none;
}

.mean-container .mean-nav > ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}
.mean-container .mean-nav > ul .homemenu {
  position: relative;
}
.mean-container .mean-nav > ul .homemenu .homemenu-thumb {
  position: relative;
  width: 280px;
}
.mean-container .mean-nav > ul .homemenu .homemenu-thumb .demo-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  gap: 20px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}
.mean-container .mean-nav > ul .homemenu .homemenu-thumb .demo-button .theme-btn {
  padding: 20px 30px;
  color: var(--white) !important;
  width: initial;
  font-size: 14px;
  text-align: center;
}
.mean-container .mean-nav > ul .homemenu .homemenu-thumb .demo-button .theme-btn:hover {
  color: var(--white) !important;
}
.mean-container .mean-nav > ul .homemenu .homemenu-thumb::before {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(99, 92, 92, 0)), to(#292930));
  background: linear-gradient(to bottom, rgba(99, 92, 92, 0) 0%, #292930 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  content: "";
}
.mean-container .mean-nav > ul .homemenu .homemenu-thumb:hover::before {
  visibility: visible;
  opacity: 1;
}
.mean-container .mean-nav > ul .homemenu .homemenu-thumb:hover .demo-button {
  opacity: 1;
  visibility: visible;
  margin-top: 0;
}
.mean-container .mean-nav > ul .homemenu .homemenu-thumb:hover .homemenu-btn {
  opacity: 1;
  visibility: visible;
  bottom: 50%;
  transform: translateY(50%);
}
.mean-container .mean-nav > ul .homemenu .homemenu-thumb img {
  width: 100%;
}
.mean-container .mean-nav > ul .homemenu .homemenu-content .homemenu-title {
  margin-top: 20px;
  display: inline-block;
  font-size: 16px;
}

.mean-container a.meanmenu-reveal {
  display: none !important;
}

.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 20px 0;
  color: var(--header);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
}
.mean-container .mean-nav ul li a:hover {
  color: var(--theme);
}

.mean-container .mean-nav ul li a:last-child {
  border-bottom: 0;
}

.mean-container .mean-nav ul li a:hover {
  color: var(--theme);
}

.mean-container .mean-nav ul li a.mean-expand {
  margin-top: 20px;
  padding: 0 !important;
}

.mean-container .mean-nav ul li > a > i {
  display: none;
}

.mean-container .mean-nav ul li > a.mean-expand i {
  display: inline-block;
}

.mean-container .mean-nav > ul > li:first-child > a {
  border-top: 0;
}

.mean-container .mean-nav ul li a.mean-expand.mean-clicked i {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transition: all 0.4s ease-in-out;
}

.mean-container .mean-nav ul li .mega-menu li a {
  height: 200px;
  width: 100%;
  padding: 0;
  border-top: 0;
  margin-bottom: 20px;
}

@media (max-width: 1199px) {
  .mean-container .mean-nav ul li.menu-thumb {
    display: none;
  }
}

.hero-1 {
  position: relative;
  position: relative;
  padding: 215px 0 90px;
}
@media (max-width: 1199px) {
  .hero-1 {
    margin-bottom: -20px;
    padding: 160px 0 90px;
  }
}
@media (max-width: 991px) {
  .hero-1 {
    margin-bottom: -40px;
    padding: 130px 0 90px;
  }
}
@media (max-width: 767px) {
  .hero-1 {
    margin-bottom: -50px;
    padding: 100px 0 90px;
  }
}
@media (max-width: 575px) {
  .hero-1 {
    padding: 70px 0 90px;
  }
}
.hero-1 .star-image {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 3%;
}
.hero-1 .hero-image-2 {
  position: absolute;
  top: 55.5%;
  left: 17%;
}
@media (max-width: 1199px) {
  .hero-1 .hero-image-2 {
    left: 4%;
  }
}
@media (max-width: 991px) {
  .hero-1 .hero-image-2 {
    top: 40%;
    left: 45%;
    max-width: 300px;
    z-index: 9;
  }
  .hero-1 .hero-image-2 img {
    width: 100%;
    height: 100%;
  }
}
@media (max-width: 767px) {
  .hero-1 .hero-image-2 {
    top: 45%;
    left: 45%;
    max-width: 230px;
  }
}
@media (max-width: 575px) {
  .hero-1 .hero-image-2 {
    top: 39.5%;
    left: 42%;
    max-width: 200px;
  }
}
.hero-1 .hero-image-2 img {
  border-radius: 20px;
}
.hero-1 .hero-image-2::before {
  content: "";
  width: 100%;
  height: 109%;
  position: absolute;
  right: 0px;
  right: -15px;
  top: -15px;
  border: 1px solid var(--theme);
  border-radius: 20px;
  z-index: -1;
}
.hero-1 .hero-image-2::after {
  position: absolute;
  right: -12%;
  top: -12%;
  width: 22px;
  height: 22px;
  border-radius: 20px;
  content: "";
  background-color: var(--theme);
  z-index: 2;
}
.hero-1::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: var(--bg);
  height: 60%;
  z-index: -1;
}
.hero-1 .hero-content {
  position: relative;
  z-index: 9;
  margin-top: 130px;
}
@media (max-width: 991px) {
  .hero-1 .hero-content {
    margin-bottom: 70px;
    margin-top: 0;
  }
}
@media (max-width: 767px) {
  .hero-1 .hero-content {
    margin-bottom: 60px;
  }
}
@media (max-width: 575px) {
  .hero-1 .hero-content {
    text-align: center;
    margin-top: 0;
    margin-bottom: 50px;
  }
}
.hero-1 .hero-content h1 {
  margin-bottom: 20px;
}
@media (max-width: 1199px) {
  .hero-1 .hero-content h1 {
    font-size: 48px;
  }
}
@media (max-width: 767px) {
  .hero-1 .hero-content h1 {
    font-size: 42px;
  }
}
@media (max-width: 575px) {
  .hero-1 .hero-content h1 {
    font-size: 32px;
    margin-bottom: 20px;
  }
}
.hero-1 .hero-content h1 span {
  margin-left: 80px;
}
@media (max-width: 1199px) {
  .hero-1 .hero-content h1 span {
    margin-left: 0;
  }
}
.hero-1 .hero-content p {
  max-width: 300px;
  margin: 0 auto;
  text-align: right;
}
@media (max-width: 1199px) {
  .hero-1 .hero-content p {
    text-align: left;
    max-width: initial;
  }
}
@media (max-width: 575px) {
  .hero-1 .hero-content p {
    text-align: center;
  }
}
.hero-1 .hero-image {
  max-width: 660px;
  height: 750px;
  margin-left: -120px;
  position: relative;
  border-radius: 20px;
}
@media (max-width: 991px) {
  .hero-1 .hero-image {
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .hero-1 .hero-image {
    height: 500px;
  }
}
@media (max-width: 575px) {
  .hero-1 .hero-image {
    height: 400px;
  }
}
.hero-1 .hero-image::before {
  content: "";
  width: 100%;
  height: 104%;
  position: absolute;
  right: 0px;
  left: -20px;
  top: -15px;
  border: 1px solid var(--theme);
  border-radius: 20px;
  z-index: -1;
}
@media (max-width: 575px) {
  .hero-1 .hero-image::before {
    left: 0;
    height: 100%;
    top: 0;
  }
}
.hero-1 .hero-image .client-items {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background-color: var(--white);
  border-radius: 20px;
  box-shadow: var(---box-shadow);
  position: absolute;
  bottom: 20px;
  right: 20px;
}
.hero-1 .hero-image .client-items .client-content h3 {
  font-size: 28px;
  font-weight: 400;
}

.hero-2 {
  padding-top: 150px;
  padding-bottom: 110px;
  position: relative;
  z-index: 9;
}
@media (max-width: 767px) {
  .hero-2 {
    padding-top: 130px;
  }
}
@media (max-width: 575px) {
  .hero-2 {
    padding-top: 100px;
  }
}
.hero-2 .line {
  position: absolute;
  bottom: 20%;
  left: 5%;
  z-index: 2;
}
@media (max-width: 1600px) {
  .hero-2 .line {
    display: none;
  }
}
.hero-2 .star-shape {
  position: absolute;
  left: 3%;
  top: 20%;
}
.hero-2 .star-shape-2 {
  position: absolute;
  right: 10%;
  bottom: 20%;
}
.hero-2 .text {
  position: absolute;
  bottom: 12%;
  left: 72%;
  transform: translateX(-50%);
}
.hero-2 .text::before {
  position: absolute;
  top: 28px;
  left: -150px;
  content: "";
  width: 106px;
  height: 1px;
  background-color: var(--theme);
}
@media (max-width: 991px) {
  .hero-2 .text::before {
    display: none;
  }
}
@media (max-width: 575px) {
  .hero-2 .text {
    left: 50%;
    bottom: 7%;
    text-align: center;
  }
}
.hero-2 .text p {
  color: var(--white);
}
.hero-2::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image: url(../../assets/img/hero/overlay-shape.jpg);
  width: 50%;
  z-index: -1;
}
.hero-2::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  width: 100%;
  z-index: -1;
  left: 48%;
  background-color: var(--black);
  opacity: 0.7;
}
.hero-2 .hero-content {
  position: relative;
  z-index: 9;
}
@media (max-width: 575px) {
  .hero-2 .hero-content {
    text-align: center;
    margin: 0 auto;
  }
}
.hero-2 .hero-content h1 {
  font-size: 100px;
  color: var(--theme);
  margin-bottom: 20px;
}
@media (max-width: 1399px) {
  .hero-2 .hero-content h1 {
    font-size: 90px;
  }
}
@media (max-width: 1199px) {
  .hero-2 .hero-content h1 {
    font-size: 80px;
  }
}
@media (max-width: 991px) {
  .hero-2 .hero-content h1 {
    font-size: 62px;
  }
}
@media (max-width: 767px) {
  .hero-2 .hero-content h1 {
    font-size: 48px;
  }
}
@media (max-width: 575px) {
  .hero-2 .hero-content h1 {
    font-size: 38px;
  }
}
.hero-2 .hero-content h1 span {
  font-weight: 300;
}
.hero-2 .hero-content p {
  color: rgba(255, 255, 255, 0.7019607843);
  margin-bottom: 40px;
}
@media (max-width: 575px) {
  .hero-2 .hero-content p {
    margin-bottom: 20px;
  }
}
.hero-2 .hero-content .social-icon {
  gap: 20px;
  margin-top: 50px;
  position: relative;
}
@media (max-width: 575px) {
  .hero-2 .hero-content .social-icon {
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 75px;
  }
}
.hero-2 .hero-content .social-icon a {
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 20px;
  display: inline-block;
  background-color: transparent;
  color: var(--white);
  transition: all 0.4s ease-in-out;
  border: 1px solid var(--text);
}
.hero-2 .hero-content .social-icon a:hover {
  background-color: var(--theme);
  color: var(--white);
  border: 1px solid transparent;
}

.hero-3 {
  padding: 155px 0;
}
@media (max-width: 991px) {
  .hero-3 {
    padding-top: 130px;
  }
}
@media (max-width: 767px) {
  .hero-3 {
    padding-top: 100px;
  }
}
@media (max-width: 575px) {
  .hero-3 {
    padding-top: 80px;
  }
}
@media (max-width: 575px) {
  .hero-3 .hero-content {
    text-align: center;
    margin: 0 auto;
  }
}
.hero-3 .hero-content span {
  font-size: 18px;
  font-weight: 400;
  color: var(--header);
}
.hero-3 .hero-content h1 {
  margin-bottom: 20px;
}
@media (max-width: 1399px) {
  .hero-3 .hero-content h1 {
    font-size: 56px;
  }
}
@media (max-width: 1199px) {
  .hero-3 .hero-content h1 {
    font-size: 48px;
  }
}
@media (max-width: 991px) {
  .hero-3 .hero-content h1 {
    font-size: 52px;
  }
}
@media (max-width: 767px) {
  .hero-3 .hero-content h1 {
    font-size: 42px;
  }
}
@media (max-width: 575px) {
  .hero-3 .hero-content h1 {
    font-size: 32px;
  }
}
.hero-3 .hero-content p {
  color: var(--black);
}
.hero-3 .hero-content .hero-button {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 40px;
}
@media (max-width: 1199px) {
  .hero-3 .hero-content .hero-button {
    gap: 25px;
  }
}
@media (max-width: 767px) {
  .hero-3 .hero-content .hero-button {
    margin-top: 30px;
    gap: 30px;
  }
}
@media (max-width: 575px) {
  .hero-3 .hero-content .hero-button {
    margin-top: 25px;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }
}
.hero-3 .hero-content .hero-button .icon-items {
  display: flex;
  align-items: center;
  gap: 20px;
}
.hero-3 .hero-content .hero-button .icon-items .icon {
  width: 44px;
  height: 44px;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--theme);
  border: 20px solid rgba(166, 161, 130, 0.28);
  border-radius: 50%;
}
.hero-3 .hero-content .hero-button .icon-items .content {
  text-align: left !important;
}
.hero-3 .hero-content .hero-button .icon-items .content p {
  font-weight: 500;
  color: var(--black);
  margin-bottom: 5px;
}
.hero-3 .hero-slider-items {
  margin-right: -90%;
  transform: rotate(-45deg);
}
@media (max-width: 1199px) {
  .hero-3 .hero-slider-items {
    transform: rotate(0);
  }
}
@media (max-width: 991px) {
  .hero-3 .hero-slider-items {
    margin-right: 0;
  }
}
.hero-3 .hero-slider-items .hero-image {
  max-width: 410px;
}
.hero-3 .hero-slider-items .hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
  .hero-3 .hero-slider-items .hero-image {
    max-width: 590px;
    height: 500px;
  }
}
@media (max-width: 575px) {
  .hero-3 .hero-slider-items .hero-image {
    max-width: 450px;
    height: 420px;
  }
}

.hero-4 {
  position: relative;
  z-index: 9;
}
.hero-4 .hero-content {
  margin-top: 160px;
  margin-bottom: 90px;
  padding: 80px 60px;
  background-color: var(--white);
  position: relative;
  z-index: 9;
}
@media (max-width: 991px) {
  .hero-4 .hero-content {
    margin-bottom: 0;
  }
}
@media (max-width: 767px) {
  .hero-4 .hero-content {
    padding: 50px 40px;
  }
}
@media (max-width: 575px) {
  .hero-4 .hero-content {
    padding: 40px 30px;
    text-align: center;
  }
}
.hero-4 .hero-content::before {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  content: "";
  background-color: var(--theme);
  opacity: 0.4;
}
.hero-4 .hero-content span {
  font-size: 18px;
  font-weight: 400;
  color: var(--theme);
  margin-bottom: 20px;
  display: inline-block;
}
.hero-4 .hero-content h1 {
  margin-bottom: 20px;
}
@media (max-width: 1199px) {
  .hero-4 .hero-content h1 {
    font-size: 56px;
  }
}
@media (max-width: 1399px) {
  .hero-4 .hero-content h1 {
    font-size: 60px;
  }
}
@media (max-width: 991px) {
  .hero-4 .hero-content h1 {
    font-size: 50px;
  }
}
@media (max-width: 767px) {
  .hero-4 .hero-content h1 {
    font-size: 42px;
  }
}
@media (max-width: 575px) {
  .hero-4 .hero-content h1 {
    font-size: 32px;
  }
}
.hero-4 .hero-content p {
  margin-bottom: 40px;
}
@media (max-width: 767px) {
  .hero-4 .hero-content p {
    margin-bottom: 30px;
  }
}
@media (max-width: 575px) {
  .hero-4 .hero-content p {
    margin-bottom: 20px;
  }
}
.hero-4 .hero-image {
  width: 1050px;
  height: 650px;
  border-radius: 20px;
  margin-left: -80px;
  position: relative;
}
@media (max-width: 991px) {
  .hero-4 .hero-image {
    width: initial;
    max-width: 1050px;
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .hero-4 .hero-image {
    height: 500px;
  }
}
@media (max-width: 575px) {
  .hero-4 .hero-image {
    height: 430px;
  }
}
.hero-4 .hero-image::before {
  position: absolute;
  bottom: -7%;
  right: 0;
  width: 800px;
  height: 90px;
  content: "";
  background-color: var(--theme);
  z-index: -1;
}
@media (max-width: 1199px) {
  .hero-4 .hero-image::before {
    display: none;
  }
}

.hero-5 {
  overflow: hidden;
  margin-top: 120px;
}
.hero-5 .hero-wrapper {
  margin-left: -350px;
  margin-right: -350px;
  overflow: hidden;
}
@media (max-width: 1199px) {
  .hero-5 .hero-wrapper {
    margin-left: 0;
    margin-right: 0;
  }
}
.hero-5 .hero-wrapper .hero-items {
  overflow: hidden;
}
.hero-5 .hero-wrapper .hero-items .hero-image img {
  width: 100%;
  height: 100%;
}
.hero-5 .hero-wrapper .hero-items .hero-content {
  padding: 60px 80px;
  background-color: var(--bg2);
  max-width: 1070px;
  margin: 0 auto;
  margin-top: -110px;
  position: relative;
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  border-left: 4px solid var(--theme);
}
@media (max-width: 1199px) {
  .hero-5 .hero-wrapper .hero-items .hero-content {
    margin-top: 0;
  }
}
@media (max-width: 767px) {
  .hero-5 .hero-wrapper .hero-items .hero-content {
    padding: 50px 40px;
  }
}
@media (max-width: 575px) {
  .hero-5 .hero-wrapper .hero-items .hero-content {
    padding: 40px 30px;
  }
}
.hero-5 .hero-wrapper .hero-items .hero-content h1 {
  color: var(--white);
  margin-bottom: 20px;
}
@media (max-width: 1399px) {
  .hero-5 .hero-wrapper .hero-items .hero-content h1 {
    font-size: 60px;
  }
}
@media (max-width: 1199px) {
  .hero-5 .hero-wrapper .hero-items .hero-content h1 {
    font-size: 52px;
  }
}
@media (max-width: 991px) {
  .hero-5 .hero-wrapper .hero-items .hero-content h1 {
    font-size: 48px;
  }
}
@media (max-width: 767px) {
  .hero-5 .hero-wrapper .hero-items .hero-content h1 {
    font-size: 42px;
  }
}
@media (max-width: 575px) {
  .hero-5 .hero-wrapper .hero-items .hero-content h1 {
    font-size: 32px;
  }
}
.hero-5 .hero-wrapper .hero-items .hero-content h1 span {
  font-weight: 300;
}
.hero-5 .hero-wrapper .hero-items .hero-content p {
  color: var(--white);
}
.hero-5 .hero-wrapper .swiper-slide.swiper-slide-active .hero-items .hero-content {
  visibility: visible;
  opacity: 1;
}

.work-process-items {
  margin-top: 30px;
  padding: 40px;
  background-color: var(--white);
  text-align: center;
  position: relative;
  z-index: 1;
  border-radius: 20px;
  transition: all 0.3s ease;
}
.work-process-items:hover {
  outline: 3px solid #bd9e70;
  outline-offset: 3px;
  background-color: var(--white) !important;
}
.work-process-items:hover::before {
  opacity: 0 !important;
  visibility: hidden !important;
}
@media (max-width: 575px) {
  .work-process-items {
    padding: 30px;
  }
}
.work-process-items::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../../assets/img/process-bg.jpg);
  z-index: -1;
  border-radius: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}
.work-process-items::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: #f8f8f8;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  border-radius: 20px;
}
.work-process-items h6 {
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: #bd9e70;
  -webkit-text-fill-color: transparent;
  font-weight: 400;
  font-size: 48px;
  opacity: 1;
  margin-bottom: 40px;
  display: inline-block;
  line-height: 1;
  transition: all 0.4s ease-in-out;
}
@media (max-width: 575px) {
  .work-process-items h6 {
    margin-bottom: 20px;
  }
}
.work-process-items h3 {
  margin-bottom: 20px;
  border-bottom: 2px solid var(--border);
  padding-bottom: 20px;
}
.work-process-items .icon {
  margin-top: 25px;
  transition: all 0.4s ease-in-out;
  position: relative;
  z-index: 9;
  font-size: 48px;
  color: var(--black);
}
@media (max-width: 575px) {
  .work-process-items .icon {
    margin-top: 20px;
  }
}
.work-process-items:hover h6 {
  -webkit-text-stroke-color: #bd9e70;
  opacity: 1;
}
.work-process-items:hover h3 {
  border-bottom: none;
}
.work-process-items:hover h3, .work-process-items:hover p {
  color: inherit;
}
.work-process-items:hover .icon {
  color: inherit;
}
.work-process-items:hover::before, .work-process-items:hover::after {
  opacity: 0.7;
  visibility: visible;
}
.work-process-items.active h6 {
  -webkit-text-stroke-color: var(--white);
  opacity: 1;
}
.work-process-items.active h3 {
  border-bottom: 2px solid rgba(230, 230, 230, 0.5);
}
.work-process-items.active h3, .work-process-items.active p {
  color: var(--header);
}
.work-process-items.active .icon {
  color: var(--theme);
}
.work-process-items.active::before, .work-process-items.active::after {
  opacity: 1;
  visibility: visible;
}

.achievement-section {
  position: relative;
}
.achievement-section .shape-left {
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.1;
}

.achievement-wrapper {
  position: relative;
  z-index: 9;
}
.achievement-wrapper .achievement-content .about-button {
  margin-top: 40px;
}
.achievement-wrapper .counter-area {
  margin-left: 40px;
}
@media (max-width: 1199px) {
  .achievement-wrapper .counter-area {
    margin-left: 0;
  }
}
.achievement-wrapper .counter-area .counter-item {
  background-color: var(--white);
  text-align: center;
  padding: 30px;
  border-radius: 20px;
}
.achievement-wrapper .counter-area .counter-item .icon {
  color: var(--theme);
  font-size: 48px;
}
.achievement-wrapper .counter-area .counter-item .content {
  margin-top: 20px;
}
.achievement-wrapper .counter-area .counter-item .content h2 {
  font-size: 48px;
  color: var(--header);
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .achievement-wrapper .counter-area .counter-item .content h2 {
    font-size: 36px;
  }
}
@media (max-width: 575px) {
  .achievement-wrapper .counter-area .counter-item .content h2 {
    font-size: 32px;
  }
}

.cta-video-wrapper {
  padding: 230px 0;
  margin: 0 120px;
  position: relative;
}
@media (max-width: 1399px) {
  .cta-video-wrapper {
    padding: 210px 0;
  }
}
@media (max-width: 1199px) {
  .cta-video-wrapper {
    margin: 0;
    padding: 190px 0;
  }
}
@media (max-width: 991px) {
  .cta-video-wrapper {
    padding: 150px 0;
  }
}
@media (max-width: 767px) {
  .cta-video-wrapper {
    padding: 100px 0;
  }
}
@media (max-width: 575px) {
  .cta-video-wrapper {
    padding: 80px 0;
  }
}
.cta-video-wrapper::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
}
.cta-video-wrapper .video-box {
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 9;
}
.cta-video-wrapper .video-box .video-btn {
  width: 115px;
  height: 115px;
  line-height: 115px;
  text-align: center;
  background-color: var(--theme);
  display: inline-block;
  border-radius: 50%;
  font-size: 28px;
  color: var(--white);
}
@media (max-width: 767px) {
  .cta-video-wrapper .video-box .video-btn {
    width: 80px;
    height: 80px;
    line-height: 80px;
    font-size: 20px;
  }
}
@media (max-width: 575px) {
  .cta-video-wrapper .video-box .video-btn {
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .cta-video-wrapper .video-box .ripple::before, .cta-video-wrapper .video-box .ripple::after {
    width: 80px;
    height: 80px;
  }
}
@media (max-width: 575px) {
  .cta-video-wrapper .video-box .ripple::before, .cta-video-wrapper .video-box .ripple::after {
    width: 70px;
    height: 70px;
  }
}

.work-process-wrapper .section-title h2 {
  font-size: 68px;
}
@media (max-width: 1399px) {
  .work-process-wrapper .section-title h2 {
    font-size: 62px;
  }
}
@media (max-width: 1199px) {
  .work-process-wrapper .section-title h2 {
    font-size: 58px;
  }
}
@media (max-width: 991px) {
  .work-process-wrapper .section-title h2 {
    font-size: 48px;
  }
}
@media (max-width: 767px) {
  .work-process-wrapper .section-title h2 {
    font-size: 42px;
  }
}
@media (max-width: 575px) {
  .work-process-wrapper .section-title h2 {
    font-size: 32px;
  }
}
.work-process-wrapper .section-title h2 span {
  font-size: 68px;
  font-weight: 400;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--white);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--white);
  -webkit-text-fill-color: transparent;
}
@media (max-width: 1399px) {
  .work-process-wrapper .section-title h2 span {
    font-size: 62px;
  }
}
@media (max-width: 1199px) {
  .work-process-wrapper .section-title h2 span {
    font-size: 58px;
  }
}
@media (max-width: 991px) {
  .work-process-wrapper .section-title h2 span {
    font-size: 48px;
  }
}
@media (max-width: 767px) {
  .work-process-wrapper .section-title h2 span {
    font-size: 42px;
  }
}
@media (max-width: 575px) {
  .work-process-wrapper .section-title h2 span {
    font-size: 32px;
  }
}
.work-process-wrapper .work-process-items-2 {
  margin-top: 30px;
}
.work-process-wrapper .work-process-items-2 .work-process-content {
  position: relative;
}
.work-process-wrapper .work-process-items-2 .work-process-content h3 {
  color: var(--white);
  border-bottom: 1px solid var(--text);
  padding-bottom: 30px;
}
.work-process-wrapper .work-process-items-2 .work-process-content .number {
  font-weight: 400;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--white);
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--white);
  -webkit-text-fill-color: transparent;
  font-size: 68px;
  opacity: 0.2;
  position: absolute;
  top: -30px;
  right: 0;
}
@media (max-width: 575px) {
  .work-process-wrapper .work-process-items-2 .work-process-content .number {
    font-size: 48px;
    top: -20px;
  }
}
.work-process-wrapper .work-process-items-2 .work-process-content p {
  padding-top: 30px;
  color: var(--white);
}
@media (max-width: 575px) {
  .work-process-wrapper .work-process-items-2 .work-process-content p {
    padding-top: 20px;
  }
}
.work-process-wrapper.style-2 .section-title h2 {
  color: var(--header) !important;
}
.work-process-wrapper.style-2 .work-process-items-2 {
  margin-top: 30px;
}
.work-process-wrapper.style-2 .work-process-items-2 .work-process-content {
  position: relative;
}
.work-process-wrapper.style-2 .work-process-items-2 .work-process-content h3 {
  color: var(--header);
}
.work-process-wrapper.style-2 .work-process-items-2 .work-process-content .number {
  -webkit-text-stroke-color: var(--black);
}
.work-process-wrapper.style-2 .work-process-items-2 .work-process-content p {
  color: var(--text);
}

.counter-wrapper {
  margin-top: -30px;
}
@media (max-width: 1199px) {
  .counter-wrapper {
    margin-top: -80px;
  }
}
@media (max-width: 991px) {
  .counter-wrapper {
    margin-top: -100px;
  }
}
.counter-wrapper .counter-box-items {
  padding: 30px 20px;
  text-align: center;
  background-color: var(--white);
  box-shadow: var(---box-shadow);
}
@media (max-width: 575px) {
  .counter-wrapper .counter-box-items {
    padding: 20px;
  }
}

.counter-items {
  display: flex;
  align-items: center;
  gap: 40px;
  border-radius: 20px;
}
@media (max-width: 767px) {
  .counter-items {
    display: inline;
    text-align: center;
    margin: 0 auto;
    border-radius: 20px;
}
}
.counter-items .icon {
  width: 80px;
  line-height: 90px;
  height: 80px;
  background-color: var(--theme);
  color: var(--white);
  border-radius: 50%;
  text-align: center;
  font-size: 38px;
}
@media (max-width: 767px) {
  .counter-items .icon {
    text-align: center;
    margin: 0 auto;
    width: 70px;
    height: 70px;
    line-height: 80px;
  }
}
@media (max-width: 575px) {
  .counter-items .icon {
    width: 60px;
    height: 60px;
    line-height: 75px;
  }
}
.counter-items .content {
  border-left: 1px solid var(--black);
  padding-left: 20px;
}
@media (max-width: 767px) {
  .counter-items .content {
    padding-left: 0;
    margin-top: 30px;
    border: none;
  }
}
.counter-items .content p {
  color: var(--black);
}

.counter-wrapper-2 {
  padding: 60px 50px;
}
.counter-wrapper-2 .counter-items-2 {
  display: flex;
  align-items: center;
  gap: 40px;
  border-radius: 20px;
}
.counter-wrapper-2 .counter-items-2 .icon {
  font-size: 60px;
  color: var(--theme);
}
.counter-wrapper-2 .counter-items-2 .content {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding-left: 25px;
}
.counter-wrapper-2 .counter-items-2 .content h2 {
  color: var(--white);
  margin-bottom: 20px;
}
.counter-wrapper-2 .counter-items-2 .content p {
  color: var(--white);
}

.about-wrapper {
  margin-top: 45px;
}
.about-wrapper .about-left-items {
  position: relative;
}
.about-wrapper .about-left-items .dot-shape {
  position: absolute;
  bottom: 55px;
  right: 20px;
}
.about-wrapper .about-left-items .about-counter-items {
  background-color: var(--theme);
  padding: 50px 45px;
  border-radius: 20px;
  height: 100%;
  border-radius: 20px;
  border-radius: 20px;
}
@media (max-width: 575px) {
  .about-wrapper .about-left-items .about-counter-items {
    padding: 30px;
    text-align: center;
    border-radius: 20px;
  border-radius: 20px;
}
}
.about-wrapper .about-left-items .about-counter-items h2 {
  color: var(--white);
}
.about-wrapper .about-left-items .about-counter-items h5 {
  color: var(--white);
  margin-top: 20px;
}
.about-wrapper .about-left-items .about-image-1 img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
.about-wrapper .about-left-items .about-image-2 {
  max-width: 480px;
  height: 300px;
  border-radius: 20px;
  position: relative;
}
@media (max-width: 991px) {
  .about-wrapper .about-left-items .about-image-2 {
    max-width: 800px;
  }
}
.about-wrapper .about-left-items .about-image-2 .client-items {
  padding: 12px 20px;
  background-color: var(--white);
  box-shadow: var(---box-shadow);
  display: flex;
  align-items: center;
  gap: 20px;
  position: absolute;
  top: 40px;
  right: -90px;
  border-radius: 20px;
}
.about-wrapper .about-left-items .about-image-2 .client-items .clinet-img {
  width: 63px;
  height: 63px;
  border-radius: 50%;
}
@media (max-width: 1199px) {
  .about-wrapper .about-left-items .about-image-2 .client-items {
    right: -30px;
  }
}
@media (max-width: 991px) {
  .about-wrapper .about-left-items .about-image-2 .client-items {
    right: 0;
  }
}
.about-wrapper .about-content {
  margin-left: 40px;
}
@media (max-width: 991px) {
  .about-wrapper .about-content {
    margin-left: 0;
  }
}
@media (max-width: 1199px) {
  .about-wrapper .about-content br {
    display: none;
  }
}
.about-wrapper .about-content .about-button {
  margin-top: 40px;
}
@media (max-width: 767px) {
  .about-wrapper .about-content .about-button {
    margin-top: 30px;
  }
}
@media (max-width: 575px) {
  .about-wrapper .about-content .about-button {
    margin-top: 20px;
  }
}
.about-wrapper .about-content.style-3 .icon-items {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 30px;
}
@media (max-width: 575px) {
  .about-wrapper .about-content.style-3 .icon-items {
    flex-wrap: wrap;
    gap: 20px;
  }
}
.about-wrapper .about-content.style-3 .icon-items .icon {
  width: 100px;
  height: 100px;
  line-height: 100px;
  background-color: var(--bg2);
  text-align: center;
}
.about-wrapper .about-content.style-3 .icon-items .content h3 {
  color: var(--white);
  margin-bottom: 20px;
}
.about-wrapper .about-content.style-3 .icon-items .content p {
  color: var(--white);
}
.about-wrapper .about-image-2 img {
  width: 100%;
  height: 100%;
}

.about-wrapper-2 {
  position: relative;
  z-index: 9;
}
.about-wrapper-2 .about-content p {
  color: rgba(255, 255, 255, 0.7019607843);
}
.about-wrapper-2 .about-content .progress-wrap {
  margin-top: 30px;
  margin-bottom: 55px;
}
.about-wrapper-2 .about-content .progress-wrap .pro-items:not(:last-child) {
  margin-bottom: 30px;
}
.about-wrapper-2 .about-content .progress-wrap .pro-items .pro-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.about-wrapper-2 .about-content .progress-wrap .pro-items .pro-head .title {
  font-size: 12px;
  font-weight: 400;
  color: var(--white);
  letter-spacing: 2.4px;
}
.about-wrapper-2 .about-content .progress-wrap .pro-items .pro-head .point {
  font-size: 12px;
  font-weight: 400;
  color: var(--white);
  letter-spacing: 2.4px;
}
.about-wrapper-2 .about-content .progress-wrap .pro-items .progress {
  background: var(--bg);
  justify-content: flex-start;
  border-radius: 100px;
  align-items: center;
  position: relative;
  display: flex;
  height: 20px;
  width: 100%;
  border-radius: 0;
}
.about-wrapper-2 .about-content .progress-wrap .pro-items .progress-value {
  animation: load 3s normal forwards;
  border-radius: 0;
  background: var(--theme);
  height: 20px;
  width: 0;
  border-radius: 0;
}
.about-wrapper-2 .about-content .progress-wrap .pro-items .style-two {
  animation: load2 3s normal forwards;
}
@keyframes load {
  0% {
    width: 0;
  }
  100% {
    width: 75%;
  }
}
@keyframes load2 {
  0% {
    width: 0;
  }
  100% {
    width: 55%;
  }
}
.about-wrapper-2 .about-image {
  max-width: 510px;
  height: 539px;
  border-radius: 20px;
  margin-left: 100px;
  position: relative;
  margin-bottom: 20px;
}
@media (max-width: 1199px) {
  .about-wrapper-2 .about-image {
    margin-left: 55px;
  }
}
@media (max-width: 991px) {
  .about-wrapper-2 .about-image {
    margin-left: 0;
    max-width: 730px;
  }
}
@media (max-width: 767px) {
  .about-wrapper-2 .about-image {
    margin-bottom: 0;
  }
}
@media (max-width: 767px) {
  .about-wrapper-2 .about-image {
    height: 500px;
  }
}
@media (max-width: 575px) {
  .about-wrapper-2 .about-image {
    height: 450px;
  }
}
.about-wrapper-2 .about-image::before {
  position: absolute;
  top: 20%;
  right: -10px;
  content: "";
  height: 440px;
  width: 411px;
  background-color: var(--theme);
  z-index: -1;
  border-radius: 20px;
}
@media (max-width: 767px) {
  .about-wrapper-2 .about-image::before {
    display: none;
  }
}
.about-wrapper-2 .about-image .counter-shape {
  position: absolute;
  bottom: 40px;
  left: -14%;
  padding: 25px;
  background-color: var(--bg2);
  display: inline-block;
  color: rgba(255, 255, 255, 0.7019607843);
  border-radius: 20px;
  border: 1px solid var(--theme);
}
.about-wrapper-2 .about-image .counter-shape h3 {
  font-size: 28px;
  color: rgba(255, 255, 255, 0.7019607843);
  margin-bottom: 20px;
}
@media (max-width: 991px) {
  .about-wrapper-2 .about-image .counter-shape {
    left: 0;
    bottom: 0;
  }
}
.about-wrapper-2 .about-image .line-shape {
  position: absolute;
  bottom: 30%;
  left: -7%;
}
@media (max-width: 991px) {
  .about-wrapper-2 .about-image .line-shape {
    left: 40px;
    bottom: 123px;
  }
}

.about-wrapper-3 .about-image img {
  width: 100%;
  height: 100%;
}
.about-wrapper-3 .about-content {
  margin-left: 40px;
}
@media (max-width: 1399px) {
  .about-wrapper-3 .about-content {
    margin-left: 20px;
  }
  .about-wrapper-3 .about-content br {
    display: none;
  }
}
@media (max-width: 991px) {
  .about-wrapper-3 .about-content {
    margin-left: 0;
  }
}
.about-wrapper-3 .about-content .about-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30px;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 20px;
}
@media (max-width: 767px) {
  .about-wrapper-3 .about-content .about-list {
    margin-top: 20px;
    margin-bottom: 30px;
  }
}
@media (max-width: 575px) {
  .about-wrapper-3 .about-content .about-list {
    margin-top: 20px;
    margin-bottom: 25px;
  }
}
.about-wrapper-3 .about-content .about-list ul li:not(:last-child) {
  margin-bottom: 20px;
}
.about-wrapper-3 .about-content .about-list ul li i {
  color: var(--theme);
  margin-right: 20px;
}
.about-wrapper-3.style-2 .about-image-items .about-image-1 {
  max-width: 490px;
  height: 465px;
  border-radius: 20px;
  margin-left: 100px;
  position: relative;
}
@media (max-width: 991px) {
  .about-wrapper-3.style-2 .about-image-items .about-image-1 {
    margin-left: 0;
  }
}
@media (max-width: 575px) {
  .about-wrapper-3.style-2 .about-image-items .about-image-1 {
    height: 450px;
    max-width: 550px;
  }
}
.about-wrapper-3.style-2 .about-image-items .about-image-1::before {
  position: absolute;
  top: 0;
  left: -30px;
  content: "";
  height: 100%;
  width: 20px;
  border-radius: 20px;
  background-color: var(--theme);
}
.about-wrapper-3.style-2 .about-image-items .about-image-1 .about-image-2 {
  position: absolute;
  bottom: -65px;
  left: -100px;
  max-width: 300px;
}
@media (max-width: 991px) {
  .about-wrapper-3.style-2 .about-image-items .about-image-1 .about-image-2 {
    left: 0;
    bottom: 0;
  }
}
@media (max-width: 767px) {
  .about-wrapper-3.style-2 .about-image-items .about-image-1 .about-image-2 {
    max-width: 250px;
  }
}
@media (max-width: 575px) {
  .about-wrapper-3.style-2 .about-image-items .about-image-1 .about-image-2 {
    max-width: 200px;
  }
}
.about-wrapper-3.style-2 .about-image-items .about-image-1 .about-image-2 img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
.about-wrapper-3.style-2 .about-content {
  margin-left: 20px;
}
.about-wrapper-3.style-2 .about-content .progress-wrap {
  margin-bottom: 55px;
  margin-top: 30px;
}
.about-wrapper-3.style-2 .about-content .progress-wrap .pro-items:not(:last-child) {
  margin-bottom: 30px;
}
.about-wrapper-3.style-2 .about-content .progress-wrap .pro-items .pro-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.about-wrapper-3.style-2 .about-content .progress-wrap .pro-items .pro-head .title {
  font-size: 16px;
  font-weight: 500;
  color: var(--black);
}
.about-wrapper-3.style-2 .about-content .progress-wrap .pro-items .pro-head .point {
  font-size: 16px;
  font-weight: 500;
  color: var(--theme);
}
.about-wrapper-3.style-2 .about-content .progress-wrap .pro-items .progress {
  background: var(--white);
  justify-content: flex-start;
  border-radius: 20px;
  align-items: center;
  position: relative;
  display: flex;
  height: 6px;
  width: 100%;
  border-radius: 20px;
}
.about-wrapper-3.style-2 .about-content .progress-wrap .pro-items .progress-value {
  animation: load 3s normal forwards;
  border-radius: 0;
  background: var(--theme);
  height: 6px;
  width: 0;
  border-radius: 20px;
}
.about-wrapper-3.style-2 .about-content .progress-wrap .pro-items .style-two {
  animation: load2 3s normal forwards;
}
@keyframes load {
  0% {
    width: 0;
  }
  100% {
    width: 70%;
  }
}
@keyframes load2 {
  0% {
    width: 0;
  }
  100% {
    width: 85%;
  }
}

.service-section {
  position: relative;
}
.service-section .bg-shape {
  position: absolute;
  top: 0;
  left: 0;
}
.service-section .bg-shape img {
  width: 100%;
  height: 100%;
}

.service-items {
  position: relative;
  z-index: 9;
  padding: 30px;
}
@media (max-width: 991px) {
  .service-items {
    margin-top: 0 !important;
  }
}
.service-items::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: var(--white);
  border-radius: 20px;
  z-index: -1;
  height: initial;
  top: 23%;
}
.work-process-items .icon {
   width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center; 
  border-radius: 50%;
  background-color: transparent;
  margin: 0; 
  display: block;
  font-size: 48px; 
  color: var(--black);
  z-index: 9;
  transition: all 0.4s ease-in-out;
  position: relative;
  margin-top: 10px !important;
}
.service-items .content {
  margin-top: 20px;
}
.service-items .content h3 {
  margin-bottom: 20px;
}
.service-items .content h3 a:hover {
  color: var(--theme);
}
.service-items .content p {
  margin-bottom: 20px;
}
.service-items.style-2 {
  margin-top: -30px !important;
}
.service-items.style-2::before {
  background-color: var(--bg);
}

.service-wrapper .service-image {
  max-width: 615px;
  height: 740px;
  margin-right: -100%;
  margin-top: -120px;
  margin-bottom: -120px;
}
@media (max-width: 1199px) {
  .service-wrapper .service-image {
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
  }
}
@media (max-width: 991px) {
  .service-wrapper .service-image {
    height: 600px;
  }
}
@media (max-width: 767px) {
  .service-wrapper .service-image {
    height: 500px;
  }
}
@media (max-width: 575px) {
  .service-wrapper .service-image {
    height: 430px;
  }
}

.service-box-items {
  margin-top: 30px;
  background-color: var(--bg2);
  padding: 40px;
  border-radius: 20px;
}
@media (max-width: 575px) {
  .service-box-items {
    padding: 30px 25px;
  }
}
.service-box-items .icon {
  font-size: 55px;
  color: var(--theme);
}
.service-box-items .content {
  margin-top: 30px;
}
@media (max-width: 575px) {
  .service-box-items .content {
    margin-top: 20px;
  }
}
.service-box-items .content h3 {
  margin-bottom: 20px;
}
.service-box-items .content h3 a {
  color: var(--white);
}
.service-box-items .content h3 a:hover {
  color: var(--theme);
}
.service-box-items .content p {
  color: rgba(255, 255, 255, 0.7019607843);
}
.service-box-items .content ul {
  margin-top: 20px;
}
.service-box-items .content ul li {
  color: rgba(255, 255, 255, 0.7019607843);
}
.service-box-items .content ul li i {
  color: var(--text);
  margin-right: 20px;
}
.service-box-items .content ul li:not(:last-child) {
  margin-bottom: 20px;
}
.service-box-items .content .link-btn {
  color: var(--white);
  margin-top: 30px;
}
.service-box-items .content .link-btn i {
  color: var(--theme);
}
.service-box-items .content .link-btn:hover {
  color: var(--theme);
}
.service-box-items.style-2 {
  padding: 40px 30px;
  border: 1px solid transparent;
  transition: all 0.4s ease-in-out;
}
@media (max-width: 767px) {
  .service-box-items.style-2 {
    padding: 30px;
  }
}
@media (max-width: 575px) {
  .service-box-items.style-2 {
    padding: 25px 20px;
  }
}
.service-box-items.style-2 .icon {
  font-size: 45px;
}
.service-box-items.style-2 .content h4 {
  margin-bottom: 20px;
}
@media (max-width: 575px) {
  .service-box-items.style-2 .content h4 {
    margin-bottom: 20px;
  }
}
.service-box-items.style-2 .content h4 a {
  color: var(--white);
}
.service-box-items.style-2 .content h4 a:hover {
  color: var(--theme);
}
.service-box-items.style-2 .content .link-btn {
  margin-top: 20px;
  color: var(--theme);
}
@media (max-width: 575px) {
  .service-box-items.style-2 .content .link-btn {
    margin-top: 20px;
  }
}
.service-box-items.style-2:hover {
  border: 1px solid var(--theme);
}
.service-box-items.style-2.active {
  border: 1px solid var(--theme);
}
.service-box-items.style-3 {
  background-color: transparent;
  border: 1px solid var(--bg2);
  transition: all 0.4s ease-in-out;
  border-radius: 0;
}
.service-box-items.style-3 .icon {
  color: var(--theme);
  font-size: 48px;
}
.service-box-items.style-3 .content h3 {
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 20px;
  margin-bottom: 0;
}
.service-box-items.style-3 .content p {
  color: var(--white);
  padding-top: 20px;
}
.service-box-items.style-3:hover {
  background-color: var(--bg2);
  border-bottom: 3px solid var(--theme);
}
.service-box-items.style-3.active {
  background-color: var(--bg2);
  border-bottom: 3px solid var(--theme);
}

@media (max-width: 1399px) {
  .service-section-2 .section-title-area {
    flex-wrap: wrap;
  }
}

.service-section-3 {
  position: relative;
}
.service-section-3 .bg-shape {
  position: absolute;
  top: 0;
  left: 0;
}
.service-section-3 .bg-shape img {
  width: 100%;
  height: 100%;
}

.service-box-items-2 {
  margin-top: 30px;
  padding: 40px;
  background-color: var(--bg2);
  position: relative;
  z-index: 9;
}
@media (max-width: 767px) {
  .service-box-items-2 {
    padding: 30px 35px;
  }
}
@media (max-width: 767px) {
  .service-box-items-2 {
    padding: 25px 20px;
  }
}
.service-box-items-2 .icon {
  color: var(--theme);
  font-size: 45px;
}
.service-box-items-2 .content {
  margin-top: 30px;
}
@media (max-width: 575px) {
  .service-box-items-2 .content {
    margin-top: 20px;
  }
}
.service-box-items-2 .content h3 a {
  color: var(--white);
}
.service-box-items-2 .content h3 a:hover {
  color: var(--theme);
}
.service-box-items-2 .content p {
  color: var(--white);
  margin-top: 20px;
}
@media (max-width: 575px) {
  .service-box-items-2 .content p {
    margin-top: 20px;
  }
}

.service-wrapper-2 .main-service-items .theme-btn {
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}
.service-wrapper-2 .main-service-items:hover .theme-btn {
  opacity: 1;
  visibility: visible;
}
.service-wrapper-2 .theme-btn {
  width: 100%;
  text-align: center;
}

.service-details-wrapper .service-details-items .service-image img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
.service-details-wrapper .service-details-items .details-content {
  margin-top: 30px;
}
.service-details-wrapper .service-details-items .details-content h3 {
  font-size: 28px;
}
.service-details-wrapper .service-details-items .details-content .list {
  margin-top: 30px;
  margin-bottom: 40px;
}
.service-details-wrapper .service-details-items .details-content .list li {
  position: relative;
  padding-left: 25px;
}
.service-details-wrapper .service-details-items .details-content .list li::before {
  position: absolute;
  top: 20px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  content: "";
  background-color: var(--theme);
}
.service-details-wrapper .service-details-items .details-content .list li:not(:last-child) {
  margin-bottom: 20px;
}
.service-details-wrapper .service-details-items .details-content h4 {
  font-size: 24px;
  margin-bottom: 20px;
}
.service-details-wrapper .service-details-items .details-content .list-items {
  margin-top: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}
.service-details-wrapper .service-details-items .details-content .list-items .d-list li i {
  color: var(--theme);
  margin-right: 20px;
}
.service-details-wrapper .service-details-items .details-content .list-items .d-list li:not(:last-child) {
  margin-bottom: 20px;
}
.service-details-wrapper .service-details-items .details-content .list-items .icon-box {
  padding: 30px 30px;
  text-align: center;
  background-color: var(--bg);
}
.service-details-wrapper .service-details-items .details-content .list-items .icon-box i {
  font-size: 40px;
  color: var(--theme);
  margin-bottom: 20px;
}
.service-details-wrapper .service-details-items .details-content .list-items .icon-box h4 {
  margin-bottom: 20px;
}
.service-details-wrapper .main-sidebar .single-sidebar-widget {
  margin-bottom: 40px;
}
.service-details-wrapper .main-sidebar .single-sidebar-widget .widget-categories ul li {
  padding: 18px 30px;
  background-color: var(--bg);
  font-size: 20px;
  font-weight: 400;
  color: var(--header);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}
@media (max-width: 1199px) {
  .service-details-wrapper .main-sidebar .single-sidebar-widget .widget-categories ul li {
    font-size: 16px;
  }
}
@media (max-width: 991px) {
  .service-details-wrapper .main-sidebar .single-sidebar-widget .widget-categories ul li {
    font-size: 18px;
  }
}
.service-details-wrapper .main-sidebar .single-sidebar-widget .widget-categories ul li i {
  font-size: 22px;
  color: var(--theme);
  transition: all 0.4s ease-in-out;
}
.service-details-wrapper .main-sidebar .single-sidebar-widget .widget-categories ul li:not(:last-child) {
  margin-bottom: 20px;
}
.service-details-wrapper .main-sidebar .single-sidebar-widget .widget-categories ul li:hover {
  background-color: var(--theme);
  color: var(--white);
}
.service-details-wrapper .main-sidebar .single-sidebar-widget .widget-categories ul li:hover i {
  color: var(--white);
}
.service-details-wrapper .main-sidebar .single-sidebar-widget .widget-categories ul li:hover a {
  color: var(--white);
}
.service-details-wrapper .main-sidebar .bg-image {
  max-width: 500px;
  position: relative;
}
@media (max-width: 991px) {
  .service-details-wrapper .main-sidebar .bg-image {
    max-width: 800px;
  }
}
.service-details-wrapper .main-sidebar .bg-image::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: var(--black);
  opacity: 0.7;
  border-radius: 20px;
}
.service-details-wrapper .main-sidebar .bg-image .contact-text {
  position: relative;
  text-align: center;
  padding: 40px 35px;
  margin: 0 auto;
}
.service-details-wrapper .main-sidebar .bg-image .contact-text .icon {
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  background-color: var(--theme);
  text-align: center;
  color: var(--white);
  border-radius: 50%;
  margin: 0 auto 20px;
  position: relative;
}
.service-details-wrapper .main-sidebar .bg-image .contact-text p {
  color: var(--white);
}
.service-details-wrapper .main-sidebar .bg-image .contact-text h3 {
  margin-top: 20px;
}
.service-details-wrapper .main-sidebar .bg-image .contact-text h3 a {
  color: var(--white);
}
.service-details-wrapper .main-sidebar .download-service-doc .theme-btn {
  font-size: 22px;
  font-weight: 400;
}
@media (max-width: 1199px) {
  .service-details-wrapper .main-sidebar .download-service-doc .theme-btn {
    font-size: 16px;
    padding: 22px 20px;
  }
}
@media (max-width: 991px) {
  .service-details-wrapper .main-sidebar .download-service-doc .theme-btn {
    font-size: 18px;
  }
}
.service-details-wrapper .main-sidebar .download-service-doc .theme-btn.style-2 {
  text-align: left;
  background-color: var(--bg);
  color: var(--header);
}
.service-details-wrapper .main-sidebar .download-service-doc .theme-btn.style-2 i {
  font-size: 24px;
  margin-right: 20px;
}
@media (max-width: 1199px) {
  .service-details-wrapper .main-sidebar .download-service-doc .theme-btn.style-2 i {
    font-size: 16px;
  }
}
@media (max-width: 991px) {
  .service-details-wrapper .main-sidebar .download-service-doc .theme-btn.style-2 i {
    font-size: 18px;
  }
}
.service-details-wrapper .main-sidebar .download-service-doc .theme-btn.style-2::before, .service-details-wrapper .main-sidebar .download-service-doc .theme-btn.style-2::after {
  background-color: var(--theme);
}
.service-details-wrapper .main-sidebar .download-service-doc .theme-btn.style-2:hover {
  color: var(--white);
}

.project-carousel-items {
  margin-top: 30px;
  overflow: hidden;
}
.project-carousel-items .project-image {
  position: relative;
}
@media (max-width: 767px) {
  .project-carousel-items .project-image {
    height: 550px;
  }
}
@media (max-width: 575px) {
  .project-carousel-items .project-image {
    height: 450px;
  }
}
.project-carousel-items .project-image img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
}
.project-carousel-items .project-image .project-content {
  position: absolute;
  bottom: -150px;
  left: 30px;
  right: 30px;
  background-color: var(--white);
  padding: 30px;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
}
.project-carousel-items .project-image .project-content h3 {
  margin-bottom: 20px;
}
.project-carousel-items .project-image .project-content h3 a:hover {
  color: var(--theme);
}
.project-carousel-items .project-image .project-content p {
  color: #616670;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2.4px;
}
.project-carousel-items .project-image .project-content .icon {
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  background-color: var(--theme);
  color: var(--white);
  display: inline-block;
  border-radius: 50%;
  transition: all 0.4s ease-in-out;
  position: absolute;
  right: 20px;
  top: -25px;
}
.project-carousel-items .project-image .project-content .icon:hover {
  background-color: var(--header);
  color: var(--white);
}
.project-carousel-items:hover .project-image .project-content {
  opacity: 1;
  visibility: visible;
  bottom: 30px;
}

.project-wrapper .swiper-slide.swiper-slide-active .project-carousel-items .project-image .project-content {
  opacity: 1;
  visibility: visible;
  bottom: 30px;
}

.project-details-wrapper .project-details-items .project-image img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
.project-details-wrapper .project-details-items .project-details-content {
  background-color: var(--bg);
  border: 1px solid var(--border);
  padding: 40px;
  border-radius: 20px;
  margin: -150px 40px 0;
  position: relative;
  z-index: 9;
}
@media (max-width: 767px) {
  .project-details-wrapper .project-details-items .project-details-content {
    margin: 0;
    padding: 30px;
  }
}
.project-details-wrapper .project-details-items .project-details-content h2 {
  font-size: 28px;
  margin-bottom: 20px;
}
.project-details-wrapper .project-details-items .project-details-content .d-list {
  margin-top: 20px;
}
.project-details-wrapper .project-details-items .project-details-content .d-list li i {
  color: var(--theme);
  margin-right: 20px;
}
.project-details-wrapper .project-details-items .project-details-content .d-list li:not(:last-child) {
  margin-bottom: 20px;
}
.project-details-wrapper .project-details-items .pro-details-items {
  margin-top: 50px;
}
.project-details-wrapper .project-details-items .pro-details-items .thumb img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
.project-details-wrapper .project-details-items .pro-details-items .pro-details-content-items {
  padding: 40px 30px;
  background-color: var(--bg);
  height: 100%;
}
.project-details-wrapper .project-details-items .pro-details-items .pro-details-content-items .pro-details-cont {
  margin-bottom: 17px;
}
.project-details-wrapper .project-details-items .pro-details-items .pro-details-content-items .pro-details-cont h3 {
  margin-bottom: 20px;
}
.project-details-wrapper .main-sidebar .single-sidebar-widget .project-catagory {
  background-color: var(--bg);
  padding: 30px;
  border-radius: 20px;
}
.project-details-wrapper .main-sidebar .single-sidebar-widget .project-catagory h3 {
  margin-bottom: 20px;
}
.project-details-wrapper .main-sidebar .single-sidebar-widget .project-catagory ul {
  margin-top: 30px;
}
.project-details-wrapper .main-sidebar .single-sidebar-widget .project-catagory ul li {
  font-weight: 400;
  color: var(--header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--white);
  padding: 14px 20px;
  font-size: 20px;
  border-radius: 20px;
}
.project-details-wrapper .main-sidebar .single-sidebar-widget .project-catagory ul li:not(:last-child) {
  margin-bottom: 20px;
}
.project-details-wrapper .main-sidebar .single-sidebar-widget .project-catagory ul li span {
  font-weight: 400;
  font-size: 16px;
  color: var(--text);
}
.project-details-wrapper .main-sidebar .single-sidebar-widget .project-catagory .social-icon {
  margin-top: 30px;
  gap: 20px;
}
.project-details-wrapper .main-sidebar .single-sidebar-widget .project-catagory .social-icon a {
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 20px;
  background-color: var(--black);
  color: var(--white);
  transition: all 0.4s ease-in-out;
}
.project-details-wrapper .main-sidebar .single-sidebar-widget .project-catagory .social-icon a:hover {
  background-color: var(--theme);
}

::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 20px var(--theme);
  border-radius: 20px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--theme);
  border-radius: 20px;
}

.fix {
  overflow: hidden;
}

.ralt {
  position: relative;
}

.ripple {
  position: relative;
}
.ripple::before, .ripple::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 115px;
  height: 115px;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(166, 161, 130, 0.7);
  animation: rippleOne 3s infinite;
}
.ripple::before {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
}
.ripple::after {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
}

.swiper-dot {
  text-align: center;
  margin-top: 40px;
  margin-bottom: -7px;
}
.swiper-dot .swiper-pagination-bullet {
  width: 12px;
  height: 8px;
  transition: 0.6s;
  background-color: #D9D9D9;
  opacity: 1;
  border-radius: 60px;
  position: relative;
}
.swiper-dot .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--theme);
  transition: 0.6s;
  position: relative;
  width: 51px;
}

.array-button {
  position: relative;
  z-index: 99;
  display: flex;
  align-items: center;
  gap: 20px;
}
.array-button .array-prev {
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  background-color: rgba(166, 161, 130, 0.2);
  color: var(--theme);
  font-size: 18px;
  font-weight: 400;
  transition: all 0.4s ease-in-out;
}
@media (max-width: 575px) {
  .array-button .array-prev {
    width: 45px;
    height: 45px;
    line-height: 45px;
  }
}
.array-button .array-prev:hover {
  background-color: var(--theme);
  color: var(--white);
}
.array-button .array-next {
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  background-color: var(--theme);
  color: var(--white);
  font-size: 18px;
  font-weight: 600;
  transition: all 0.4s ease-in-out;
}
@media (max-width: 575px) {
  .array-button .array-next {
    width: 45px;
    height: 45px;
    line-height: 45px;
  }
}
.array-button .array-next:hover {
  background-color: rgba(166, 161, 130, 0.2);
  color: var(--theme);
}
.array-button.radius-none .array-prev, .array-button.radius-none .array-next {
  border-radius: 0 !important;
}

.mt-10 {
  margin-top: 20px;
}

@media (max-width: 575px) {
  br {
    display: none;
  }
}

/* background */
.bg-cover {
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  background-position: center;
}

.nice-select {
  font-size: 16px;
  width: unset;
  outline: none;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  padding: 16px 20px;
  font-weight: normal;
  border-radius: 20px;
  transition: all 0.4s ease-in-out;
}
@media (max-width: 767px) {
  .nice-select {
    padding: 14px 20px;
  }
}
@media (max-width: 575px) {
  .nice-select {
    padding: 12px 18px;
  }
}
.nice-select span {
  color: rgba(255, 255, 255, 0.7019607843);
  font-size: 16px;
  margin-bottom: 0 !important;
}

.nice-select option {
  color: rgba(255, 255, 255, 0.7019607843);
}

.nice-select .current {
  margin-right: 12px;
}

.nice-select:after {
  right: 23px;
  border-bottom: 1px solid var(--theme);
  border-right: 1px solid var(--theme);
  width: 20px;
  height: 20px;
}

.nice-select.open .list {
  background: var(--black);
  margin-top: 16px;
  width: 100%;
  text-transform: capitalize;
  color: var(--text);
}

.nice-select .option.selected.focus {
  background: var(--black);
  outline: none;
  color: var(--theme);
  text-transform: capitalize;
  font-size: 16px;
}

.nice-select .option {
  border: none;
}

.nice-select .option:hover {
  background: transparent;
}

.head-color {
  color: var(--header);
}

.footer-bg {
  background-color: var(--black);
}

.background-black {
  background-color: var(--black) !important;
}

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

.border-none {
  border-top: none !important;
}

.ml-100 {
  margin-left: 100px !important;
}
@media (max-width: 991px) {
  .ml-100 {
    margin-left: 0 !important;
  }
}

.border-radius-none {
  border-radius: 0 !important;
}
.border-radius-none input {
  border-radius: 0 !important;
}

.text-color {
  color: rgba(255, 255, 255, 0.7019607843);
}

@media (max-width: 991px) {
  .title-responsive {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }
}

.mb-10 {
  margin-bottom: -10px !important;
}

.style-2-bg {
  position: relative;
}
.style-2-bg::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: var(--bg);
  top: -100px;
  z-index: -1;
}

.pt-80 {
  padding-top: 80px;
}

.pb-80 {
  padding-bottom: 80px;
}

.box-shadow {
  background-color: var(--white);
  box-shadow: var(---box-shadow);
}

.w-100 {
  width: 100% !important;
}

.mt-30 {
  margin-top: 30px !important;
}

.mb-15 {
  margin-bottom: -15px !important;
}

.mt-40 {
  padding-top: 40px;
}

.team-section {
  position: relative;
}
.team-section .light-shape {
  position: absolute;
  top: 30%;
  transform: translateY(-50%);
  right: 0;
}
@media (max-width: 1399px) {
  .team-section .light-shape {
    display: none;
  }
}

.single-team-items {
  margin-top: 30px;
  overflow: hidden;
}
.single-team-items .team-image {
  max-width: 370px;
  height: 353px;
  border-radius: 20px;
  position: relative;
}
@media (max-width: 1199px) {
  .single-team-items .team-image {
    max-width: 550px;
  }
}
.single-team-items .team-image .team-content {
  padding: 20px;
  background-color: var(--bg);
  border-radius: 20px 0 20px 0;
  position: absolute;
  bottom: 0;
  left: 40px;
  width: 100%;
}
@media (max-width: 1399px) {
  .single-team-items .team-image .team-content {
    left: 0;
    border-radius: 0;
  }
}
.single-team-items .team-image .team-content h3 a:hover {
  color: var(--theme);
}
.single-team-items .team-image .team-content p {
  margin-bottom: 20px;
}
.single-team-items .team-image .team-content .social-profile {
  position: absolute;
  right: -5px;
  bottom: 56px;
  content: "";
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 2;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
}
.single-team-items .team-image .team-content .social-profile ul {
  transform: translateY(100px);
  transition: all 0.6s ease-in-out;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}
.single-team-items .team-image .team-content .social-profile ul li a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: block;
  background: var(--theme);
  color: var(--white);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  text-align: center;
  margin: 0 auto;
  border-radius: 0 20px 20px 0;
  margin-bottom: 20px;
}
.single-team-items .team-image .team-content .social-profile .plus-btn {
  z-index: 2;
  cursor: pointer;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  display: inline-block;
  background: var(--header);
  color: var(--white);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  border-radius: 0 20px 0 20px;
}
.single-team-items .team-image .team-content .social-profile .plus-btn:hover {
  background-color: var(--theme);
  color: var(--white);
}
.single-team-items .team-image .team-content .social-profile:hover ul {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.team-card-items {
  margin-top: 30px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: var(--bg2);
  text-align: center;
}
.team-card-items .team-image img {
  width: 100%;
  height: 100%;
  border-radius: 20px 20px 0 0;
}
.team-card-items .team-content {
  padding: 30px 20px;
}
.team-card-items .team-content h3 {
  margin-bottom: 20px;
}
.team-card-items .team-content h3 a {
  color: var(--white);
}
.team-card-items .team-content h3 a:hover {
  color: var(--theme);
}
.team-card-items .team-content p {
  color: var(--white);
}
.team-card-items .team-content .social-icon {
  gap: 20px;
  position: relative;
  margin-top: 20px;
}
.team-card-items .team-content .social-icon a {
  width: 35px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  border-radius: 20px;
  display: inline-block;
  background-color: transparent;
  color: var(--white);
  transition: all 0.4s ease-in-out;
  border: 1px solid var(--text);
}
.team-card-items .team-content .social-icon a:hover {
  background-color: var(--theme);
  color: var(--white);
  border: 1px solid transparent;
}
.team-card-items.style-2 {
  margin-top: 0;
  background-color: var(--bg);
  border: none;
}
.team-card-items.style-2 .team-content h3 a {
  color: var(--header);
}
.team-card-items.style-2 .team-content h3 a:hover {
  color: var(--theme);
}
.team-card-items.style-2 .team-content p {
  color: var(--text);
}
.team-card-items.style-2 .team-content .social-icon a {
  border: 1px solid var(--border);
  color: var(--header);
}
.team-card-items.style-2 .team-content .social-icon a:hover {
  color: var(--white);
}

.team-box-items {
  margin-top: 30px;
}
.team-box-items .team-image img {
  width: 100%;
  height: 100%;
}
.team-box-items .contact-info-content {
  padding: 50px 40px;
  background-color: var(--bg2);
  position: relative;
  border-radius: 20px;
  z-index: 9;
  margin-top: -120px;
  margin-left: 20px;
  margin-right: 25px;
  opacity: 0;
  visibility: hidden;
}
.team-box-items .team-content {
  padding: 40px;
  background-color: var(--bg2);
  position: relative;
  z-index: 9;
  margin-top: -120px;
  margin-left: 20px;
  margin-right: 25px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}
@media (max-width: 1199px) {
  .team-box-items .team-content {
    padding: 30px;
  }
}
@media (max-width: 575px) {
  .team-box-items .team-content {
    padding: 25px 20px;
  }
}
.team-box-items .team-content p {
  color: var(--white);
  margin-bottom: 20px;
}
.team-box-items .team-content h3 {
  font-size: 28px;
}
@media (max-width: 1199px) {
  .team-box-items .team-content h3 {
    font-size: 26px;
  }
}
@media (max-width: 767px) {
  .team-box-items .team-content h3 {
    font-size: 24px;
  }
}
@media (max-width: 575px) {
  .team-box-items .team-content h3 {
    font-size: 22px;
  }
}
.team-box-items .team-content h3 a {
  color: var(--white);
}
.team-box-items .team-content h3 a:hover {
  color: var(--theme);
}
.team-box-items .team-content .social-profile {
  position: absolute;
  right: 30px;
  bottom: 40px;
  content: "";
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  z-index: 2;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
}
@media (max-width: 1399px) {
  .team-box-items .team-content .social-profile {
    bottom: 90px;
  }
}
@media (max-width: 1199px) {
  .team-box-items .team-content .social-profile {
    right: 30px;
    bottom: 40px;
  }
}
@media (max-width: 991px) {
  .team-box-items .team-content .social-profile {
    right: 20px;
    bottom: 70px;
  }
}
@media (max-width: 767px) {
  .team-box-items .team-content .social-profile {
    right: 20px;
    bottom: 60px;
  }
}
@media (max-width: 575px) {
  .team-box-items .team-content .social-profile {
    right: 30px;
    bottom: 40px;
  }
}
.team-box-items .team-content .social-profile ul {
  transform: translateY(100px);
  transition: all 0.6s ease-in-out;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
}
.team-box-items .team-content .social-profile ul li a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: block;
  background: var(--theme);
  color: var(--white);
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  text-align: center;
  margin: 0 auto;
  border-radius: 20px;
  margin-bottom: 20px;
  font-size: 16px;
}
.team-box-items .team-content .social-profile .plus-btn {
  z-index: 2;
  cursor: pointer;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: inline-block;
  background: var(--white);
  color: var(--black);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  border-radius: 20px;
  font-size: 16px;
}
.team-box-items .team-content .social-profile .plus-btn:hover {
  background-color: var(--theme);
  color: var(--white);
}
.team-box-items .team-content .social-profile:hover ul {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.team-box-items:hover .team-content {
  opacity: 1;
  visibility: visible;
}
.team-box-items.active .team-content {
  opacity: 1;
  visibility: visible;
}

.team-details-wrapper .team-details-image {
  max-width: 630px;
  height: 714px;
  position: relative;
  z-index: -1;
}
@media (max-width: 991px) {
  .team-details-wrapper .team-details-image {
    height: 650px;
  }
}
@media (max-width: 767px) {
  .team-details-wrapper .team-details-image {
    height: 550px;
  }
}
@media (max-width: 575px) {
  .team-details-wrapper .team-details-image {
    height: 450px;
  }
}
.team-details-wrapper .team-details-content {
  background-color: var(--white);
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  padding: 60px 40px;
  margin-left: -100px;
  z-index: 9;
}
@media (max-width: 991px) {
  .team-details-wrapper .team-details-content {
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .team-details-wrapper .team-details-content {
    padding: 40px 30px;
  }
}
.team-details-wrapper .team-details-content .progress-wrap {
  margin-bottom: 40px;
}
.team-details-wrapper .team-details-content .progress-wrap .pro-items:not(:last-child) {
  margin-bottom: 30px;
}
.team-details-wrapper .team-details-content .progress-wrap .pro-items .pro-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.team-details-wrapper .team-details-content .progress-wrap .pro-items .pro-head .title {
  font-size: 20px;
  font-weight: 400;
  color: var(--header);
}
.team-details-wrapper .team-details-content .progress-wrap .pro-items .pro-head .point {
  font-size: 16px;
  font-weight: 400;
  color: var(--header);
}
.team-details-wrapper .team-details-content .progress-wrap .pro-items .progress {
  background: #E6E6E6;
  justify-content: flex-start;
  border-radius: 100px;
  align-items: center;
  position: relative;
  display: flex;
  height: 20px;
  width: 100%;
  border-radius: 20px;
}
.team-details-wrapper .team-details-content .progress-wrap .pro-items .progress-value {
  animation: load 3s normal forwards;
  border-radius: 0;
  background: var(--theme);
  height: 20px;
  width: 0;
  border-radius: 20px;
}
.team-details-wrapper .team-details-content .progress-wrap .pro-items .style-two {
  animation: load2 3s normal forwards;
}
.team-details-wrapper .team-details-content .progress-wrap .pro-items .style-three {
  animation: load3 3s normal forwards;
}
.team-details-wrapper .team-details-content .progress-wrap .pro-items .style-four {
  animation: load4 3s normal forwards;
}
@keyframes load {
  0% {
    width: 0;
  }
  100% {
    width: 80%;
  }
}
@keyframes load2 {
  0% {
    width: 0;
  }
  100% {
    width: 70%;
  }
}
@keyframes load3 {
  0% {
    width: 0;
  }
  100% {
    width: 85%;
  }
}
@keyframes load4 {
  0% {
    width: 0;
  }
  100% {
    width: 90%;
  }
}

.team-contact-wrapper .contact-form-items .form-clt {
  position: relative;
}
.team-contact-wrapper .contact-form-items .form-clt input, .team-contact-wrapper .contact-form-items .form-clt textarea {
  width: 100%;
  outline: none;
  border: none;
  background-color: var(--bg);
  border: none;
  color: var(--text);
  padding: 16px 30px;
  border-radius: 20px;
  font-weight: 500;
}
@media (max-width: 767px) {
  .team-contact-wrapper .contact-form-items .form-clt input, .team-contact-wrapper .contact-form-items .form-clt textarea {
    padding: 14px 20px;
  }
}
@media (max-width: 575px) {
  .team-contact-wrapper .contact-form-items .form-clt input, .team-contact-wrapper .contact-form-items .form-clt textarea {
    padding: 12px 18px;
  }
}
.team-contact-wrapper .contact-form-items .form-clt input::placeholder, .team-contact-wrapper .contact-form-items .form-clt textarea::placeholder {
  color: var(--text);
}
.team-contact-wrapper .contact-form-items .form-clt textarea {
  padding-bottom: 135px;
}
.team-contact-wrapper .team-biography h3 {
  font-size: 28px;
  margin-bottom: 20px;
}
.team-contact-wrapper .team-biography .contact-info-items {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
}
.team-contact-wrapper .team-biography .contact-info-items .icon {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  text-align: center;
  color: var(--header);
  background-color: var(--bg);
}
.team-contact-wrapper .team-biography .contact-info-items .content h6 {
  font-size: 16px;
  font-weight: 400;
}
.team-contact-wrapper .team-biography .contact-info-items .content h6 a {
  color: var(--text);
}

.shop-section .array-button .array-prev {
  background-color: transparent;
  width: 50px;
  height: 50px;
  border-radius: 20px;
  line-height: 50px;
  border: 1px solid var(--border);
  color: var(--white);
  font-weight: 400;
}
.shop-section .array-button .array-prev:hover {
  background-color: var(--theme);
  color: var(--white);
  border: 1px solid transparent;
}
.shop-section .array-button .array-next {
  background-color: transparent;
  width: 50px;
  height: 50px;
  border-radius: 20px;
  line-height: 50px;
  border: 1px solid var(--theme);
  color: var(--theme);
  font-weight: 400;
}
.shop-section .array-button .array-next:hover {
  background-color: var(--theme);
  color: var(--white);
}

.shop-items {
  margin-top: 30px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: var(--bg2);
}
.shop-items .shop-image img {
  width: 100%;
  height: 100%;
  border-radius: 20px 20px 0 0;
}
.shop-items .shop-content {
  padding: 30px;
}
@media (max-width: 575px) {
  .shop-items .shop-content {
    padding: 25px;
  }
}
.shop-items .shop-content .price {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.shop-items .shop-content .price .star i {
  font-size: 14px;
  color: var(--theme);
}
.shop-items .shop-content .price .star .color-2 {
  color: var(--text);
}
.shop-items .shop-content .price h4 {
  color: var(--theme);
}
.shop-items .shop-content .title {
  margin-top: 25px;
}
@media (max-width: 575px) {
  .shop-items .shop-content .title {
    margin-top: 20px;
  }
}
.shop-items .shop-content .title a {
  color: var(--white);
}
.shop-items .shop-content .title a:hover {
  color: var(--theme);
}
.shop-items .shop-content .link-btn {
  margin-top: 20px;
  color: var(--theme);
}
@media (max-width: 575px) {
  .shop-items .shop-content .link-btn {
    margin-top: 20px;
  }
}

.shop-card-items .shop-image img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
.shop-card-items .shop-content {
  padding: 20px;
  background-color: var(--white);
  position: relative;
  box-shadow: var(---box-shadow);
  z-index: 9;
  border-radius: 0 20px 20px 20px;
  margin-right: 30px;
  margin-top: -60px;
}
.shop-card-items .shop-content h3 {
  margin-bottom: 20px;
}
.shop-card-items .shop-content h3 a:hover {
  color: var(--theme);
}
.shop-card-items .shop-content .star {
  margin-top: 20px;
}
.shop-card-items .shop-content .star i {
  color: var(--ratting);
}
.shop-card-items .shop-content .star .color-2 {
  color: #E6E6E6;
}
.shop-card-items .shop-content h4 {
  font-size: 24px;
  margin-top: 20px;
}

.main-cart-wrapper {
  border-radius: 20px;
}
.main-cart-wrapper .cart-wrapper {
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.06);
  padding: 40px 40px;
}
.main-cart-wrapper .cart-wrapper .cart-items-wrapper table {
  width: 100%;
}
.main-cart-wrapper .cart-wrapper .cart-items-wrapper table thead {
  border-bottom: 1px solid var(--border);
}
.main-cart-wrapper .cart-wrapper .cart-items-wrapper table thead tr th {
  padding-bottom: 16px;
  color: var(--header);
  text-transform: capitalize;
}
.main-cart-wrapper .cart-wrapper .cart-items-wrapper table tbody .cart-item td {
  border-bottom: 1px solid var(--border);
  padding: 16px 0;
}
.main-cart-wrapper .cart-wrapper .cart-items-wrapper table tbody .cart-item .cart-item-info {
  display: flex;
  align-items: center;
  gap: 16px;
}
.main-cart-wrapper .cart-wrapper .cart-items-wrapper table tbody .cart-item .cart-item-price {
  color: var(--header);
}
.main-cart-wrapper .cart-wrapper .cart-items-wrapper table tbody .cart-item .cart-item-quantity {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--bg);
  width: 100px;
  border-radius: 20px;
  padding: 2px 20px;
}
.main-cart-wrapper .cart-wrapper .cart-items-wrapper table tbody .cart-item .cart-item-quantity span {
  display: block;
  color: var(--header);
}
.main-cart-wrapper .cart-wrapper .cart-items-wrapper table tbody .cart-item .cart-item-quantity .cart-item-quantity-controller a {
  display: block;
}
.main-cart-wrapper .cart-wrapper .cart-items-wrapper table tbody .cart-item .cart-item-quantity .cart-item-quantity-controller a i {
  color: var(--header);
}
.main-cart-wrapper .cart-wrapper .cart-items-wrapper table tbody .cart-item .cart-item-remove a i {
  color: var(--header);
}
.main-cart-wrapper .cart-wrapper-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
.main-cart-wrapper .cart-wrapper-footer form {
  border: 1px solid var(--border);
  padding: 8px;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.main-cart-wrapper .cart-wrapper-footer form input {
  padding: 20px 20px;
  border: none;
  text-transform: capitalize;
  font-size: 16px;
  outline: none;
  background: transparent;
  color: var(--text);
}
.main-cart-wrapper .cart-wrapper-footer form button {
  outline: none;
  border: none;
}
.main-cart-wrapper .cart-pragh-box {
  margin-top: 24px;
  padding-right: 30px;
}
.main-cart-wrapper .cart-graph {
  border: 1px solid var(--border);
  padding: 30px 30px;
  border-radius: 20px;
}
.main-cart-wrapper .cart-graph h4 {
  text-align: center;
  color: var(--header);
  margin-bottom: 30px;
}
.main-cart-wrapper .cart-graph ul {
  margin-bottom: 30px;
}
.main-cart-wrapper .cart-graph ul li {
  display: flex;
}
.main-cart-wrapper .cart-graph ul li:not(:last-child) {
  border-bottom: 1px solid var(--border);
}
.main-cart-wrapper .cart-graph ul li span {
  width: 50%;
  color: var(--header);
  font-size: 18px;
  text-transform: capitalize;
  padding: 16px 0;
  font-weight: 500;
}

@media (max-width: 767px) {
  .cart-wrapper {
    overflow-x: scroll;
  }
  .cart-wrapper .cart-items-wrapper {
    width: 700px;
  }
  .cart-wrapper .cart-wrapper-footer {
    width: 700px;
  }
}
.checkout-radio {
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  padding: 24px;
}
.checkout-radio .primary-text {
  font-size: 24px;
  font-weight: 500;
  line-height: 150%;
  margin-bottom: 16px;
  color: var(--header);
  text-transform: capitalize;
}
.checkout-radio h4 {
  color: var(--header);
  margin-bottom: 16px;
  font-weight: 400;
}
.checkout-radio .checkout-radio-wrapper .checkout-radio-single .form-check-input {
  border-radius: 50%;
  width: 18px;
  height: 18px;
  box-shadow: none;
  outline: none;
  border: 1px solid var(--border);
  font-weight: 500;
}
.checkout-radio .checkout-radio-wrapper .checkout-radio-single label {
  color: var(--header);
  text-transform: capitalize;
}
.checkout-radio .checkout-radio-wrapper .checkout-radio-single:not(:last-child) {
  margin-bottom: 12px;
}
@media (max-width: 500px) {
  .checkout-radio {
    padding: 20px;
  }
}

.checkout-single-wrapper .checkout-single h4 {
  color: var(--header);
  margin-bottom: 2rem;
  font-weight: 400;
}
.checkout-single-wrapper .checkout-single .checkout-single-form .input-single textarea,
.checkout-single-wrapper .checkout-single .checkout-single-form .input-single .country-select,
.checkout-single-wrapper .checkout-single .checkout-single-form .input-single input {
  width: 100%;
  outline: none;
  box-shadow: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 12px 24px;
  color: var(--header);
  text-transform: capitalize;
  font-weight: 500;
}
.checkout-single-wrapper .checkout-single .checkout-single-form .input-single label {
  color: var(--header);
  font-size: 18px;
  text-transform: capitalize;
  margin-bottom: 20px;
  font-weight: 500;
}
.checkout-single-wrapper .checkout-single .checkout-single-form .input-single ::placeholder {
  color: var(--header);
}
.checkout-single-wrapper .checkout-single .checkout-single-form .input-single .nice-select {
  background-color: var(--white);
}
.checkout-single-wrapper .checkout-single .checkout-single-form .input-single .nice-select span {
  font-size: 18px;
  color: var(--header);
  font-weight: 500;
}
.checkout-single-wrapper .checkout-single .checkout-single-form .input-single .nice-select::after {
  border-right: 1px solid var(--header);
  border-bottom: 1px solid var(--header);
}
.checkout-single-wrapper .checkout-single .checkout-single-form .payment {
  color: var(--header);
  margin-bottom: 12px;
  text-transform: capitalize;
}
.checkout-single-wrapper .boxshado-single {
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 24px;
}
@media (max-width: 575px) {
  .checkout-single-wrapper .boxshado-single {
    padding: 14px;
  }
}
.checkout-single-wrapper .checkout-single-bg {
  box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  padding: 32px;
}
.checkout-single-wrapper .checkout-single-bg .checkout-single-form .input-single textarea,
.checkout-single-wrapper .checkout-single-bg .checkout-single-form .input-single .country-select,
.checkout-single-wrapper .checkout-single-bg .checkout-single-form .input-single input {
  border: 1px solid var(--border);
  background: transparent;
  text-transform: capitalize;
}
@media (max-width: 575px) {
  .checkout-single-wrapper .checkout-single-bg {
    padding: 14px;
  }
}
.checkout-single-wrapper .checkout-single-bg .payment-save {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
.checkout-single-wrapper .checkout-single-bg .payment-save input {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background-color: var(--theme);
  outline: none;
  color: var(--header);
}
.checkout-single-wrapper .checkout-single-bg .payment-save label {
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
}

.shop-details-wrapper .shop-details-image {
  position: relative;
}
.shop-details-wrapper .shop-details-image .nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
.shop-details-wrapper .shop-details-image .nav img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
.shop-details-wrapper .shop-details-image .nav .nav-link {
  padding: 0;
}
.shop-details-wrapper .shop-details-image .shop-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
.shop-details-wrapper .product-details-content {
  margin-left: 60px;
}
@media (max-width: 1399px) {
  .shop-details-wrapper .product-details-content {
    margin-left: 30px;
  }
}
@media (max-width: 991px) {
  .shop-details-wrapper .product-details-content {
    margin-left: 0;
  }
}
.shop-details-wrapper .product-details-content .star a {
  color: var(--theme);
  font-size: 16px;
  font-weight: 400;
}
.shop-details-wrapper .product-details-content .star span {
  margin-left: 20px;
}
.shop-details-wrapper .product-details-content .price-list {
  gap: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 30px;
}
.shop-details-wrapper .product-details-content .price-list h3 {
  font-size: 40px;
}
.shop-details-wrapper .product-details-content .cart-wrp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
  margin-bottom: 40px;
}
.shop-details-wrapper .product-details-content .cart-wrp .cart-quantity {
  padding-right: 20px;
}
.shop-details-wrapper .product-details-content .cart-wrp .cart-quantity input {
  width: 50px;
  height: 40px;
  text-align: center;
  background-color: transparent;
  border: 1px solid var(--border);
  color: var(--header);
}
.shop-details-wrapper .product-details-content .cart-wrp .cart-quantity .minus {
  color: var(--header);
}
.shop-details-wrapper .product-details-content .cart-wrp .cart-quantity .plus {
  color: var(--header);
}
.shop-details-wrapper .product-details-content .cart-wrp .cart-quantity .qty {
  color: var(--header);
}
.shop-details-wrapper .product-details-content .cart-wrp .icon {
  width: 50px;
  height: 40px;
  text-align: center;
  background-color: transparent;
  border: 1px solid var(--border);
  color: var(--header);
  line-height: 40px;
}
.shop-details-wrapper .product-details-content .cart-wrp .theme-btn {
  padding: 20px 35px;
}
.shop-details-wrapper .product-details-content .details-info {
  position: relative;
}
.shop-details-wrapper .product-details-content .details-info:not(:last-child) {
  margin-bottom: 20px;
}
.shop-details-wrapper .product-details-content .details-info span {
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
  position: absolute;
  left: 0;
  top: 2px;
}
.shop-details-wrapper .product-details-content .details-info a {
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
  margin-left: 150px;
  text-transform: capitalize;
}
.shop-details-wrapper .single-tab {
  padding-top: 80px;
}
@media (max-width: 575px) {
  .shop-details-wrapper .single-tab {
    padding-top: 50px;
  }
}
.shop-details-wrapper .single-tab .nav {
  justify-content: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 20px;
}
.shop-details-wrapper .single-tab .nav .nav-link.active {
  position: relative;
}
.shop-details-wrapper .single-tab .nav .nav-link.active h6 {
  color: var(--theme);
}
.shop-details-wrapper .single-tab .nav .nav-link.active::before {
  position: absolute;
  bottom: -21px;
  left: 0;
  height: 2px;
  width: 100%;
  content: "";
  background: var(--theme);
  transition: 0.3s;
}
@media (max-width: 470px) {
  .shop-details-wrapper .single-tab .nav .nav-link.active::before {
    display: none;
  }
}
.shop-details-wrapper .single-tab .nav .nav-link h6 {
  font-size: 18px;
}
.shop-details-wrapper .single-tab .description-items .description-content {
  margin-right: 50px;
}
@media (max-width: 1399px) {
  .shop-details-wrapper .single-tab .description-items .description-content {
    margin-right: 30px;
  }
}
@media (max-width: 991px) {
  .shop-details-wrapper .single-tab .description-items .description-content {
    margin-right: 0;
  }
}
.shop-details-wrapper .single-tab .description-items .description-content h3 {
  margin-bottom: 20px;
}
.shop-details-wrapper .single-tab .description-items .description-content .description-list-items {
  margin-top: 30px;
}
@media (max-width: 575px) {
  .shop-details-wrapper .single-tab .description-items .description-content .description-list-items {
    flex-wrap: wrap;
    gap: 30px;
  }
}
.shop-details-wrapper .single-tab .description-items .description-content .description-list-items .description-list li {
  font-size: 16px;
  text-transform: capitalize;
  color: var(--header);
  font-weight: 400;
}
.shop-details-wrapper .single-tab .description-items .description-content .description-list-items .description-list li span {
  color: var(--text);
  font-weight: 400;
}
@media (max-width: 767px) {
  .shop-details-wrapper .single-tab .review-items .admin-items {
    justify-content: center;
    gap: 30px;
  }
}
.shop-details-wrapper .single-tab .review-items .admin-items .admin-img {
  width: 100px;
  height: 100px;
}
.shop-details-wrapper .single-tab .review-items .admin-items .admin-img img {
  border-radius: 50%;
}
.shop-details-wrapper .single-tab .review-items .admin-items .content {
  position: relative;
  border: 1px solid var(--border);
}
.shop-details-wrapper .single-tab .review-items .admin-items .content::before {
  position: absolute;
  content: "";
  width: 30px;
  height: 30px;
  background-color: var(--white);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
  top: 40%;
  left: -16px;
}
@media (max-width: 575px) {
  .shop-details-wrapper .single-tab .review-items .admin-items .content::before {
    display: none;
  }
}
.shop-details-wrapper .single-tab .review-items .admin-items .content .head-content h5 span {
  font-size: 14px;
  margin-left: 30px;
}
.shop-details-wrapper .single-tab .review-items .admin-items .content .star i {
  font-size: 16px;
  color: var(--theme);
}
.shop-details-wrapper .single-tab .review-title .rate-now {
  margin-top: 20px;
  gap: 20px;
}
.shop-details-wrapper .single-tab .review-title .rate-now p {
  font-size: 16px;
  text-transform: capitalize;
}
.shop-details-wrapper .single-tab .review-title .rate-now i {
  font-size: 16px;
  color: var(--theme);
}
.shop-details-wrapper .single-tab .review-form {
  margin-top: 40px;
}
.shop-details-wrapper .single-tab .review-form .form-clt input {
  width: 100%;
  outline: none;
  border: none;
  padding: 18px 35px;
  color: var(--text);
  background-color: var(--bg);
  font-size: 16px;
  text-transform: capitalize;
}
@media (max-width: 575px) {
  .shop-details-wrapper .single-tab .review-form .form-clt input {
    padding: 20px 20px;
  }
}
.shop-details-wrapper .single-tab .review-form .form-clt-big textarea {
  padding: 18px 35px 170px;
  width: 100%;
  outline: none;
  color: var(--text);
  background-color: rgb(245, 245, 245);
  font-size: 14px;
  border: none;
  text-transform: uppercase;
}
@media (max-width: 575px) {
  .shop-details-wrapper .single-tab .review-form .form-clt-big textarea {
    padding: 20px 20px;
  }
}

.faq-section {
  position: relative;
}

.faq-wrapper .faq-box-area {
  padding: 30px 50px 30px 30px;
  border-radius: 20px;
  border: 1px solid var(--theme);
  display: inline-block;
  margin-top: 40px;
}
.faq-wrapper .faq-box-area .box-items {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.faq-wrapper .faq-box-area .box-items .content {
  display: flex;
  align-items: center;
  gap: 20px;
}
.faq-wrapper .faq-box-area .box-items .content h3 {
  font-size: 28px;
  font-weight: 400;
}
.faq-wrapper .accordion-item {
  border: none !important;
  background-color: var(--white);
  border-radius: 20px !important;
  overflow: hidden;
}
.faq-wrapper .accordion-item .accordion-header .accordion-button {
  font-weight: 400;
  color: var(--white);
  letter-spacing: -0.2px;
  border: none !important;
  border-radius: 0;
  box-shadow: none;
  background-color: var(--theme);
  padding: 30px 30px 0;
  text-transform: capitalize;
  font-size: 24px;
  border-radius: 20px 20px 0 0;
}
@media (max-width: 1199px) {
  .faq-wrapper .accordion-item .accordion-header .accordion-button {
    font-size: 20px;
  }
}
@media (max-width: 575px) {
  .faq-wrapper .accordion-item .accordion-header .accordion-button {
    font-size: 18px;
    padding: 20px 20px 0;
  }
}
.faq-wrapper .accordion-item .accordion-header .accordion-button span {
  margin-right: 20px;
}
.faq-wrapper .accordion-item .accordion-header .accordion-button::after {
  content: "\f324";
  font-family: "Font Awesome 5 Pro";
  background: transparent;
  font-weight: 500;
  transition: all 0.3s ease-in-out !important;
  color: var(--header);
  font-size: 16px;
}
.faq-wrapper .accordion-item .accordion-header .accordion-button:not(.collapsed)::after {
  content: "\f325";
  font-family: "Font Awesome 5 Pro";
  background: transparent;
  font-weight: 500;
  color: var(--white);
}
.faq-wrapper .accordion-item .accordion-header .accordion-button.collapsed {
  background-color: var(--white);
  box-shadow: var(---box-shadow);
  padding: 25px 30px;
  color: var(--header);
}
.faq-wrapper .accordion-item .accordion-collapse .accordion-body {
  padding-left: 70px;
  padding-top: 25px;
  padding-right: 40px;
  color: rgba(255, 255, 255, 0.7019607843);
  background-color: var(--theme);
  border-radius: 0 0 20px 20px;
  padding-bottom: 28px;
}
@media (max-width: 767px) {
  .faq-wrapper .accordion-item .accordion-collapse .accordion-body {
    padding-left: 60px;
  }
}
@media (max-width: 575px) {
  .faq-wrapper .accordion-item .accordion-collapse .accordion-body {
    padding-left: 50px;
    padding-bottom: 20px;
  }
}

.cta-banner-section {
  position: relative;
  z-index: 9;
}
.cta-banner-section::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: var(--bg);
  z-index: -1;
  height: 50%;
}

.cta-banner-wrapper {
  background-color: var(--black);
  padding: 60px 120px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 110px;
  border-radius: 20px;
}
@media (max-width: 991px) {
  .cta-banner-wrapper {
    flex-wrap: wrap;
    gap: 40px;
  }
}
@media (max-width: 767px) {
  .cta-banner-wrapper {
    gap: 30px;
    padding: 50px 40px;
  }
}
@media (max-width: 575px) {
  .cta-banner-wrapper {
    padding: 40px;
    text-align: center;
  }
}
.cta-banner-wrapper .icon {
  position: relative;
  z-index: 9;
}
@media (max-width: 575px) {
  .cta-banner-wrapper .icon {
    margin: 0px auto;
  }
}
.cta-banner-wrapper .icon::before {
  position: absolute;
  top: -120%;
  left: -12px;
  content: "";
  width: 180px;
  height: 390px;
  background-image: linear-gradient(180deg, #bd9e70 0%, rgba(189, 158, 112, 0) 100%);
  z-index: -1;
  transform: rotate(15deg);
  bottom: 0;
}
@media (max-width: 1399px) {
  .cta-banner-wrapper .icon::before {
    display: none;
  }
}
.cta-banner-wrapper .content h2 {
  color: var(--white);
  margin-bottom: 20px;
}
.cta-banner-wrapper .content p {
  color: rgba(255, 255, 255, 0.7019607843);
}
.cta-banner-wrapper .newsletter-items {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (max-width: 1399px) {
  .cta-banner-wrapper .newsletter-items {
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    gap: 20px;
  }
}
.cta-banner-wrapper .newsletter-items .form-clt {
  flex-basis: 60%;
}
@media (max-width: 1199px) {
  .cta-banner-wrapper .newsletter-items .form-clt {
    flex-basis: 100%;
  }
}
.cta-banner-wrapper .newsletter-items .form-clt input {
  position: relative;
  padding: 14px 25px;
  border: none;
  outline: none;
  background-color: transparent;
  border: 1px solid var(--white);
  width: 100%;
  font-size: 16px;
  color: var(--white);
  border-radius: 20px;
}
@media (max-width: 767px) {
  .cta-banner-wrapper .newsletter-items .form-clt input {
    padding: 14px 30px;
  }
}
@media (max-width: 575px) {
  .cta-banner-wrapper .newsletter-items .form-clt input {
    padding: 14px 25px;
  }
}
.cta-banner-wrapper .newsletter-items .form-clt input::placeholder {
  color: var(--white);
}
.cta-banner-wrapper .newsletter-items .theme-btn {
  padding: 28px 40px;
}
@media (max-width: 1199px) {
  .cta-banner-wrapper .newsletter-items .theme-btn {
    width: 100%;
  }
}
@media (max-width: 767px) {
  .cta-banner-wrapper .newsletter-items .theme-btn {
    width: 100%;
    padding: 20px 30px;
  }
}
@media (max-width: 575px) {
  .cta-banner-wrapper .newsletter-items .theme-btn {
    padding: 18px 25px;
  }
}
.cta-banner-wrapper.style-2 {
  gap: 0;
  justify-content: space-between;
  padding: 60px 80px;
  background-color: var(--theme);
  border-radius: 0;
}
@media (max-width: 1199px) {
  .cta-banner-wrapper.style-2 {
    gap: 30px;
  }
}
@media (max-width: 991px) {
  .cta-banner-wrapper.style-2 {
    gap: 0;
  }
}
@media (max-width: 767px) {
  .cta-banner-wrapper.style-2 {
    padding: 50px 40px;
  }
}
@media (max-width: 575px) {
  .cta-banner-wrapper.style-2 {
    padding: 40px 30px;
  }
}
.cta-banner-wrapper.style-2 .newsletter-items {
  flex-basis: 70%;
}
@media (max-width: 1399px) {
  .cta-banner-wrapper.style-2 .newsletter-items {
    flex-basis: 100%;
    flex-wrap: initial;
  }
}
@media (max-width: 1199px) {
  .cta-banner-wrapper.style-2 .newsletter-items {
    flex-wrap: wrap;
  }
}
.cta-banner-wrapper.style-2 .newsletter-items .form-clt {
  flex-basis: 65%;
}
@media (max-width: 1399px) {
  .cta-banner-wrapper.style-2 .newsletter-items .form-clt {
    flex-basis: 50%;
  }
}
@media (max-width: 1199px) {
  .cta-banner-wrapper.style-2 .newsletter-items .form-clt {
    flex-basis: 100%;
  }
}
.cta-banner-wrapper.style-3 {
  background-color: transparent;
  border-radius: 0;
  display: initial;
  position: relative;
  z-index: 9;
}
.cta-banner-wrapper.style-3 .cta-shape {
  position: absolute;
  bottom: 0;
  left: -20px;
  z-index: -1;
}
@media (max-width: 1399px) {
  .cta-banner-wrapper.style-3 .cta-shape {
    bottom: -315px;
  }
}
@media (max-width: 1199px) {
  .cta-banner-wrapper.style-3 .cta-shape {
    display: none;
  }
}
.cta-banner-wrapper.style-3 .cta-img-2 img {
  width: 100%;
  height: 100%;
}
.cta-banner-wrapper.style-3 .content {
  position: relative;
}
.cta-banner-wrapper.style-3 .content .arrow-shape {
  position: absolute;
  right: 15%;
  top: 30%;
}
@media (max-width: 1199px) {
  .cta-banner-wrapper.style-3 .content .arrow-shape {
    display: none;
  }
}
@media (max-width: 1399px) {
  .cta-banner-wrapper.style-3 .content .newsletter-items .form-clt {
    flex-basis: 74%;
  }
}
@media (max-width: 1199px) {
  .cta-banner-wrapper.style-3 .content .newsletter-items .form-clt {
    flex-basis: 100%;
  }
}
.cta-banner-wrapper.style-3 .content .newsletter-items .form-clt input {
  background: rgba(255, 255, 255, 0.1) !important;
  border: none;
  border-radius: 0;
}
.cta-banner-wrapper.style-3 .content .newsletter-items .theme-btn {
  border-radius: 0;
}
.cta-banner-wrapper.style-3 .content .newsletter-items .theme-btn::before, .cta-banner-wrapper.style-3 .content .newsletter-items .theme-btn::after {
  border-radius: 0;
}

.cta-banner-wrapper-2 {
  background-color: #58151c;
  border-radius: 20px;
  padding: 75px 60px;
  position: relative;
  margin-top: 70px;
}
@media (max-width: 1399px) {
  .cta-banner-wrapper-2 {
    margin-top: -30px;
  }
}
@media (max-width: 767px) {
  .cta-banner-wrapper-2 {
    padding: 50px 40px;
  }
}
@media (max-width: 575px) {
  .cta-banner-wrapper-2 {
    padding: 40px 30px;
  }
}
.cta-banner-wrapper-2 .cta-image {
  position: absolute;
  bottom: 0;
  left: 30px;
  z-index: 9;
}
@media (max-width: 1399px) {
  .cta-banner-wrapper-2 .cta-image {
    display: none;
  }
}
.cta-banner-wrapper-2 .cta-image .circle-shape {
  position: absolute;
  bottom: 0;
  left: -30px;
  z-index: -1;
}
.cta-banner-wrapper-2 .section-title-area {
  margin-left: 350px;
}
@media (max-width: 1399px) {
  .cta-banner-wrapper-2 .section-title-area {
    margin-left: 0;
  }
}
@media (max-width: 991px) {
  .cta-banner-wrapper-2 .section-title-area {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    gap: 30px;
  }
}

.cta-banner-section-2 {
  position: relative;
}
.cta-banner-section-2::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: var(--bg2);
  top: 50%;
}

.cta-banner-section-3 {
  position: relative;
  z-index: 9;
}
.cta-banner-section-3::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: var(--black);
  top: 50%;
  z-index: -1;
}

.cta-banner-section-4 {
  background-color: var(--theme);
}

.cta-banner-wrapper-3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--bg2);
  padding: 70px 80px;
  position: relative;
}
@media (max-width: 1199px) {
  .cta-banner-wrapper-3 {
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    text-align: center;
  }
}
@media (max-width: 767px) {
  .cta-banner-wrapper-3 {
    padding: 50px 40px;
  }
}
@media (max-width: 575px) {
  .cta-banner-wrapper-3 {
    padding: 40px 30px;
  }
}
.cta-banner-wrapper-3 .dot-shape {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.cta-banner-wrapper-3 .dot-shape img {
  width: 100%;
  height: 100%;
}
.cta-banner-wrapper-3 .content {
  position: relative;
  z-index: 9;
}
.cta-banner-wrapper-3 .content h2 {
  color: var(--white);
}
.cta-banner-wrapper-3 .content .newsletter-items .form-clt {
  position: relative;
  margin-top: 40px;
}
.cta-banner-wrapper-3 .content .newsletter-items .form-clt input {
  border: 1px solid var(--white);
  width: 600px;
  padding: 25px 20px;
  background-color: transparent;
  border-radius: 20px;
}
@media (max-width: 767px) {
  .cta-banner-wrapper-3 .content .newsletter-items .form-clt input {
    width: 450px;
    padding: 18px 20px;
  }
}
@media (max-width: 575px) {
  .cta-banner-wrapper-3 .content .newsletter-items .form-clt input {
    width: 480px;
  }
}
@media screen and (max: 550px) {
  .cta-banner-wrapper-3 .content .newsletter-items .form-clt input {
    width: 400px;
  }
}
@media (max-width: 470px) {
  .cta-banner-wrapper-3 .content .newsletter-items .form-clt input {
    width: 345px;
  }
}
.cta-banner-wrapper-3 .content .newsletter-items .form-clt input::placeholder {
  color: var(--white);
}
.cta-banner-wrapper-3 .content .newsletter-items .form-clt .theme-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  bottom: 20px;
}
@media (max-width: 767px) {
  .cta-banner-wrapper-3 .content .newsletter-items .form-clt .theme-btn {
    padding: 14px 18px;
    font-size: 12px;
  }
}

.marque-section {
  position: relative;
}
@media (max-width: 1199px) {
  .marque-section .line-area {
    display: none;
  }
}
.marque-section .line-area span {
  position: absolute;
  content: "";
  width: 1px;
  height: 100%;
  top: 0;
  left: 26%;
  background-color: #efefef;
  z-index: -1;
}
.marque-section .line-area span:nth-child(2) {
  left: 50%;
}
.marque-section .line-area span:nth-child(3) {
  left: 80%;
}

.marquee-wrapper {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 45px;
  margin-top: -2px;
}
@media (max-width: 575px) {
  .marquee-wrapper {
    margin-top: -25px;
  }
}
.marquee-wrapper.style-2 {
  line-height: 40px;
}
.marquee-wrapper.style-2 .text-slider {
  font-size: 24px;
  color: var(--header);
  margin-right: 40px;
}

.text-slider {
  font-size: 120px;
  height: 100px;
  line-height: 90px;
  font-weight: 400;
  text-transform: uppercase;
  margin-right: 20px;
  color: #e1e1de;
}
@media (max-width: 575px) {
  .text-slider {
    font-size: 50px;
    height: 70px;
    line-height: 65px;
  }
}

.marquee-inner {
  position: absolute;
  display: inline-flex;
  width: 200%;
}

.marquee-list {
  float: left;
  width: 50%;
}

.marquee-item {
  float: left;
  transition: animation 0.2s ease-out;
}

.marquee-inner.to-left {
  animation: marqueeLeft 25s linear infinite;
}

@keyframes marqueeLeft {
  0% {
    left: 0;
  }
  100% {
    left: -100%;
  }
}
.marquee-inner.to-right {
  animation: marqueeRight 25s linear infinite;
}

@keyframes marqueeRight {
  0% {
    right: 0;
  }
  100% {
    right: -100%;
  }
}
.testimonial-wrapper {
  position: relative;
  margin-top: 30px;
  display: inline-block;
}
@media (max-width: 991px) {
  .testimonial-wrapper {
    width: 100%;
  }
}
.testimonial-wrapper .array-button {
  position: absolute;
  top: 0;
  right: 0;
}
@media (max-width: 1199px) {
  .testimonial-wrapper .array-button {
    display: none;
  }
}
.testimonial-wrapper .array-button .array-prev {
  background-color: transparent;
  width: 50px;
  height: 50px;
  border-radius: 20px;
  line-height: 50px;
  border: 1px solid var(--border);
  color: var(--header);
  font-weight: 400;
}
.testimonial-wrapper .array-button .array-prev:hover {
  background-color: var(--theme);
  color: var(--white);
  border: 1px solid transparent;
}
.testimonial-wrapper .array-button .array-next {
  background-color: transparent;
  width: 50px;
  height: 50px;
  border-radius: 20px;
  line-height: 50px;
  border: 1px solid var(--theme);
  color: var(--theme);
  font-weight: bold;
}
.testimonial-wrapper .array-button .array-next:hover {
  background-color: var(--theme);
  color: var(--white);
}
.testimonial-wrapper .testimonial-image {
  height: 534px;
  width: 850px;
  border-radius: 20px;
}
@media (max-width: 1199px) {
  .testimonial-wrapper .testimonial-image {
    width: 600px;
  }
}
@media (max-width: 991px) {
  .testimonial-wrapper .testimonial-image {
    width: initial;
    max-width: 850px;
  }
}
@media (max-width: 767px) {
  .testimonial-wrapper .testimonial-image {
    height: 480px;
  }
}
@media (max-width: 575px) {
  .testimonial-wrapper .testimonial-image {
    height: 430px;
  }
}
.testimonial-wrapper .testimonial-area {
  max-width: 670px;
}
.testimonial-wrapper .testimonial-items {
  padding: 60px;
  background-color: var(--white);
  border-radius: 20px;
  position: relative;
  z-index: 9;
}
@media (max-width: 767px) {
  .testimonial-wrapper .testimonial-items {
    padding: 40px 30px;
  }
}
.testimonial-wrapper .testimonial-items .icon {
  position: absolute;
  top: 60px;
  right: 60px;
  font-size: 48px;
  color: var(--theme);
}
@media (max-width: 767px) {
  .testimonial-wrapper .testimonial-items .icon {
    top: 50px;
    right: 50px;
  }
}
@media (max-width: 575px) {
  .testimonial-wrapper .testimonial-items .icon {
    top: 40px;
    right: 20px;
    font-size: 38px;
  }
}
.testimonial-wrapper .testimonial-items .client-items {
  display: flex;
  align-items: center;
  gap: 20px;
}
.testimonial-wrapper .testimonial-items .client-items .client-image {
  width: 70px;
  height: 70px;
  border-radius: 50%;
}
.testimonial-wrapper .testimonial-items .client-items .client-content h3 {
  margin-bottom: 20px;
}
.testimonial-wrapper .testimonial-items .star {
  margin-top: 30px;
}
@media (max-width: 575px) {
  .testimonial-wrapper .testimonial-items .star {
    margin-top: 20px;
  }
}
.testimonial-wrapper .testimonial-items .star i {
  color: var(--ratting);
}
.testimonial-wrapper .testimonial-items .star .text-color {
  color: #E6E6E6;
}
.testimonial-wrapper .testimonial-items p {
  font-size: 18px;
  margin-top: 20px;
}
@media (max-width: 575px) {
  .testimonial-wrapper .testimonial-items p {
    margin-top: 20px;
    font-size: 16px;
  }
}
.testimonial-wrapper.style-2 {
  position: relative;
}
.testimonial-wrapper.style-2 .testimonial-image {
  height: 393px;
  margin-top: -160px;
  width: 960px;
}
@media (max-width: 991px) {
  .testimonial-wrapper.style-2 .testimonial-image {
    max-width: 960px;
    margin-top: 0;
    width: initial;
  }
}
.testimonial-wrapper.style-2 .testimonial-area {
  padding-top: 110px;
  max-width: 740px;
  margin-left: -100px;
}
@media (max-width: 991px) {
  .testimonial-wrapper.style-2 .testimonial-area {
    padding-top: 0;
    margin-left: 0;
  }
}
.testimonial-wrapper.style-2 .testimonial-items {
  background-color: var(--black);
  border-radius: 0;
  position: relative;
}
.testimonial-wrapper.style-2 .testimonial-items::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 45px;
  height: 45px;
  content: "";
  background-color: var(--theme);
  opacity: 0.5;
}
.testimonial-wrapper.style-2 .testimonial-items h4 {
  color: var(--white);
  font-weight: 400;
  line-height: 145%;
  font-size: 18px;
}
@media (max-width: 575px) {
  .testimonial-wrapper.style-2 .testimonial-items h4 {
    font-size: 16px;
  }
}
.testimonial-wrapper.style-2 .testimonial-items .client-content {
  margin-top: 30px;
}
.testimonial-wrapper.style-2 .testimonial-items .client-content h3 {
  color: var(--white);
  margin-bottom: 20px;
}
.testimonial-wrapper.style-2 .testimonial-items .client-content span {
  color: var(--white);
  font-weight: 400;
}
.testimonial-wrapper.style-2 .testimonial-items .icon {
  bottom: 55px;
  right: 60px;
  top: initial;
  opacity: 0.5;
}
.testimonial-wrapper.style-2 .array-button {
  position: absolute;
  bottom: -88%;
  left: 55%;
  transform: translateX(-50%);
  gap: 0;
}
.testimonial-wrapper.style-2 .array-button .array-prev {
  color: var(--black);
  border-radius: 0;
}
.testimonial-wrapper.style-2 .array-button .array-prev:hover {
  background-color: var(--theme);
  color: var(--white);
}
.testimonial-wrapper.style-2 .array-button .array-next {
  background-color: var(--theme);
  color: var(--white);
  border-radius: 0;
}
.testimonial-wrapper.style-2 .array-button .array-next:hover {
  background-color: var(--black);
}
.testimonial-wrapper.style-2::before {
  position: absolute;
  bottom: 25px;
  left: 0;
  height: 1px;
  width: 350px;
  content: "";
  background-color: var(--theme);
}

.testimonial-wrapper-2 {
  position: relative;
}
.testimonial-wrapper-2 .testimonial-image {
  max-width: 630px;
  height: 507px;
}
@media (max-width: 767px) {
  .testimonial-wrapper-2 .testimonial-image {
    height: 480px;
  }
}
@media (max-width: 575px) {
  .testimonial-wrapper-2 .testimonial-image {
    height: 430px;
  }
}
.testimonial-wrapper-2 .testimonial-content {
  padding: 0 90px;
  position: relative;
  z-index: 9;
}
@media (max-width: 1199px) {
  .testimonial-wrapper-2 .testimonial-content {
    padding: 0 40px;
  }
}
@media (max-width: 991px) {
  .testimonial-wrapper-2 .testimonial-content {
    padding: 0;
  }
}
.testimonial-wrapper-2 .testimonial-content .client-info {
  margin-bottom: 30px;
}
@media (max-width: 575px) {
  .testimonial-wrapper-2 .testimonial-content .client-info {
    margin-bottom: 20px;
  }
}
.testimonial-wrapper-2 .testimonial-content .client-info h3 {
  color: var(--white);
  margin-bottom: 20px;
}
.testimonial-wrapper-2 .testimonial-content .client-info span {
  color: var(--white);
}
.testimonial-wrapper-2 .testimonial-content p {
  color: var(--white);
  font-size: 18px;
}
.testimonial-wrapper-2 .testimonial-content .social-icon {
  padding: 20px 35px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-block;
  margin-top: 30px;
}
.testimonial-wrapper-2 .testimonial-content .social-icon a {
  color: var(--white);
}
.testimonial-wrapper-2 .testimonial-content .social-icon a:hover {
  color: var(--theme);
}
.testimonial-wrapper-2 .array-button {
  position: absolute;
  bottom: 0;
  right: 0;
}
@media (max-width: 767px) {
  .testimonial-wrapper-2 .array-button {
    display: none;
  }
}
.testimonial-wrapper-2 .array-button .array-prev {
  background-color: transparent;
  color: var(--theme) !important;
  border: 1px solid var(--theme);
}
.testimonial-wrapper-2 .array-button .array-prev i {
  color: var(--theme);
}
.testimonial-wrapper-2 .array-button .array-prev:hover {
  background-color: var(--theme);
  color: var(--white);
}
.testimonial-wrapper-2 .array-button .array-next {
  background-color: transparent;
  color: var(--white);
  border: 1px solid var(--white);
}
.testimonial-wrapper-2 .array-button .array-next i {
  color: var(--theme);
  transition: all 0.4s ease-in-out;
}
.testimonial-wrapper-2 .array-button .array-next:hover {
  background-color: var(--theme);
  border: 1px solid transparent;
}
.testimonial-wrapper-2 .array-button .array-next:hover i {
  color: var(--white);
}

.testimonial-section-5 {
  position: relative;
}
.testimonial-section-5::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: var(--bg2);
  left: 45%;
}
@media (max-width: 991px) {
  .testimonial-section-5::before {
    display: none;
  }
}
.testimonial-section-5 .frame-shape {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}

.brand-wrapper .brand-image {
  text-align: center;
}
.brand-wrapper .brand-image img {
  transform: scale(0.8);
}
.brand-wrapper.style-2 {
  border-bottom: 1px solid var(--text);
}

.pricing-box-items {
  margin-top: 30px;
}
.pricing-box-items .pricing-image img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
.pricing-box-items .pricing-content {
  padding: 20px;
  margin: 0 20px;
  margin-top: -30px;
  position: relative;
  z-index: 9;
  z-index: 9;
}
.pricing-box-items .pricing-content::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: var(--white);
  box-shadow: var(---box-shadow);
  z-index: -1;
  height: 83%;
  border-radius: 20px;
}
.pricing-box-items .pricing-content h3 {
  margin-bottom: 20px;
}
.pricing-box-items .pricing-content h3 a:hover {
  color: var(--theme);
}
.pricing-box-items .pricing-content h4 {
  background-color: var(--theme);
  color: var(--white);
  padding: 20px 30px;
  border-radius: 20px;
  display: inline-block;
  margin-top: 25px;
  margin-bottom: -25px;
}

.pricing-card-items {
  border: 1px solid var(--border);
  padding: 40px;
  position: relative;
  border-radius: 20px;
  transition: all 0.4s ease-in-out;
}
@media (max-width: 767px) {
  .pricing-card-items {
    padding: 30px 30px;
  }
}
@media (max-width: 575px) {
  .pricing-card-items {
    padding: 30px 20px;
  }
}
.pricing-card-items .icon {
  position: absolute;
  right: 40px;
  top: 40px;
  font-size: 70px;
  color: var(--theme);
}
@media (max-width: 767px) {
  .pricing-card-items .icon {
    top: 30px;
    right: 30px;
  }
}
@media (max-width: 575px) {
  .pricing-card-items .icon {
    top: 20px;
    right: 20px;
  }
}
.pricing-card-items .pricing-header {
  position: relative;
}
.pricing-card-items .pricing-header h2 {
  font-size: 42px;
  color: var(--header);
}
.pricing-card-items .pricing-header h2 span {
  font-size: 16px;
  color: var(--text);
  margin-left: -5px;
  font-weight: 400;
}
.pricing-card-items .pricing-header h3 {
  font-size: 22px;
  color: var(--header);
  margin-bottom: 20px;
  font-weight: 400;
}
@media (max-width: 767px) {
  .pricing-card-items .pricing-header h3 {
    font-size: 20px;
  }
}
@media (max-width: 575px) {
  .pricing-card-items .pricing-header h3 {
    font-size: 18px;
  }
}
.pricing-card-items .pricing-header p {
  border-bottom: 1px solid var(--border);
  padding-bottom: 30px;
}
@media (max-width: 575px) {
  .pricing-card-items .pricing-header p {
    padding-bottom: 20px;
  }
}
.pricing-card-items ul {
  margin-top: 30px;
}
@media (max-width: 575px) {
  .pricing-card-items ul {
    margin-top: 20px;
  }
}
.pricing-card-items ul li:not(:last-child) {
  margin-bottom: 12px;
}
.pricing-card-items ul li i {
  margin-right: 20px;
  color: var(--theme);
}
.pricing-card-items .pricing-button {
  margin-top: 40px;
}
.pricing-card-items .pricing-button .theme-btn {
  background-color: var(--bg);
  width: 100%;
  text-align: center;
  color: var(--header);
}
.pricing-card-items .pricing-button .theme-btn::before, .pricing-card-items .pricing-button .theme-btn::after {
  background-color: var(--theme);
}
.pricing-card-items .pricing-button .theme-btn:hover {
  color: var(--white);
}
.pricing-card-items:hover {
  border: 1px solid var(--theme);
  transform: translateY(-10px);
}

.news-card-items {
  margin-top: 30px;
}
.news-card-items .news-image {
  max-width: 370px;
  height: 340px;
  border-radius: 20px;
}
@media (max-width: 1399px) {
  .news-card-items .news-image {
    max-width: 550px;
  }
}
.news-card-items .news-content {
  position: relative;
  z-index: 9;
  padding: 30px;
  background-color: var(--bg);
  margin-left: 40px;
  border-radius: 20px;
  margin-top: -50px;
  border-bottom: 3px solid transparent;
  transition: all 0.4s ease-in-out;
}
@media (max-width: 1399px) {
  .news-card-items .news-content {
    margin: 0;
  }
}
.news-card-items .news-content ul {
  display: flex;
  align-items: center;
  gap: 20px;
}
.news-card-items .news-content ul li {
  font-size: 14px;
}
.news-card-items .news-content ul li i {
  margin-right: 7px;
}
.news-card-items .news-content h3 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.news-card-items .news-content h3 a:hover {
  color: var(--theme);
}
.news-card-items .news-content .link-btn {
  font-weight: 400;
}
.news-card-items:hover .news-content {
  border-bottom: 3px solid var(--theme);
}
.news-card-items.style-2 .news-image {
  height: 301px;
  max-width: 410px;
  border-radius: 20px;
}
@media (max-width: 1199px) {
  .news-card-items.style-2 .news-image {
    max-width: 500px;
  }
}
@media (max-width: 767px) {
  .news-card-items.style-2 .news-image {
    max-width: 650px;
    height: 450px;
  }
}
@media (max-width: 575px) {
  .news-card-items.style-2 .news-image {
    max-width: 550px;
    height: 350px;
  }
}
.news-card-items.style-2 .news-content {
  padding: 20px 0 0px;
  margin: 0;
  border-radius: 0;
  background-color: transparent;
  border-bottom: none;
}
.news-card-items.style-2 .news-content ul li {
  color: var(--black);
  letter-spacing: 2.4px;
  font-weight: 400;
}
.news-card-items.style-2 .news-content ul li i {
  color: var(--theme);
}
@media (max-width: 575px) {
  .news-card-items.style-2 .news-content h3 {
    margin-bottom: 20px;
  }
}
.news-card-items.style-2 .news-content p {
  margin-bottom: 20px;
}
@media (max-width: 575px) {
  .news-card-items.style-2 .news-content p {
    margin-bottom: 20px;
  }
}
.news-card-items.style-3 .news-image {
  height: 340px;
  max-width: 410px;
  border-radius: 20px;
}
@media (max-width: 767px) {
  .news-card-items.style-3 .news-image {
    max-width: 650px;
  }
}
.news-card-items.style-3 .news-content {
  margin-left: 20px;
  margin-right: 20px;
  border-radius: 0;
  border: none;
  margin-top: -60px;
}
.news-card-items.style-3 .news-content ul {
  flex-wrap: wrap;
  gap: 20px;
}
.news-card-items.style-3 .news-content ul li i {
  color: var(--theme);
}
.news-card-items.style-3 .news-content .link-btn i {
  color: var(--theme);
}

.section-title-area .array-prev {
  background-color: transparent;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
  border: 1px solid var(--border);
  color: var(--header);
  font-weight: 400;
}
.section-title-area .array-prev:hover {
  background-color: var(--theme);
  color: var(--white);
  border: 1px solid transparent;
}
.section-title-area .array-next {
  background-color: transparent;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
  border: 1px solid var(--theme);
  color: var(--theme);
  font-weight: 400;
}
.section-title-area .array-next:hover {
  background-color: var(--theme);
  color: var(--white);
}

.news-slider-items {
  margin-top: 30px;
  display: flex;
  align-items: center;
}
@media (max-width: 1399px) {
  .news-slider-items {
    margin: 30px auto;
    max-width: 650px;
  }
}
@media (max-width: 767px) {
  .news-slider-items {
    flex-wrap: wrap;
  }
}
.news-slider-items .news-content {
  padding: 30px;
  border: 1px solid var(--text);
  border-radius: 20px;
  margin-right: -2px;
}
@media (max-width: 767px) {
  .news-slider-items .news-content {
    flex-basis: 100%;
  }
}
.news-slider-items .news-content ul {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 575px) {
  .news-slider-items .news-content ul {
    margin-bottom: 20px;
  }
}
.news-slider-items .news-content ul li {
  font-size: 14px;
  color: var(--white);
}
.news-slider-items .news-content ul li i {
  margin-right: 7px;
  color: var(--theme);
}
.news-slider-items .news-content h3 {
  margin-bottom: 20px;
  font-size: 22px;
}
@media (max-width: 575px) {
  .news-slider-items .news-content h3 {
    margin-bottom: 20px;
    font-size: 20px;
  }
}
.news-slider-items .news-content h3 a {
  color: var(--white);
}
.news-slider-items .news-content h3 a:hover {
  color: var(--theme);
}
.news-slider-items .news-content p {
  margin-bottom: 20px;
  color: var(--white);
}
@media (max-width: 575px) {
  .news-slider-items .news-content p {
    margin-bottom: 20px;
  }
}
.news-slider-items .news-image {
  max-width: 264px;
  height: 361px;
  border-radius: 20px;
  flex-basis: 50%;
}
@media (max-width: 767px) {
  .news-slider-items .news-image {
    flex-basis: 100%;
    max-width: 550px;
  }
}

@media (max-width: 767px) {
  .news-section .section-title-area {
    text-align: center;
    justify-content: center;
  }
}

.news-box-items {
  margin-top: 30px;
}
.news-box-items .news-image {
  height: 228px;
  border-radius: 20px;
}
.news-box-items .news-content {
  margin-top: 20px;
}
.news-box-items .news-content ul {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}
.news-box-items .news-content ul li {
  color: var(--white);
}
.news-box-items .news-content ul li i {
  margin-right: 20px;
}
.news-box-items .news-content h3 {
  margin-bottom: 20px;
}
.news-box-items .news-content h3 a {
  color: var(--white);
}
.news-box-items .news-content h3 a:hover {
  color: var(--theme);
}

.blog-wrapper h1, .blog-wrapper h2, .blog-wrapper h3, .blog-wrapper h4, .blog-wrapper h5, .blog-wrapper h6 {
  font-weight: 400;
}
.blog-wrapper .single-blog-post {
  margin-bottom: 40px;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background-color: #fff;
}
.blog-wrapper .single-blog-post .video__button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.blog-wrapper .single-blog-post .video__button .video__btn__wrp {
  margin-bottom: 0;
}
.blog-wrapper .single-blog-post.post-details.format-quote .post-content {
  position: relative;
  background: transparent;
  border: none;
}
.blog-wrapper .single-blog-post.post-details .post-content {
  border: none;
}
.blog-wrapper .single-blog-post.post-details .post-content img {
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 20px;
}
.blog-wrapper .single-blog-post.post-details .post-content .single-post-image {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
.blog-wrapper .single-blog-post.post-details .post-content h1 {
  font-size: 36px;
  line-height: 1.4;
}
.blog-wrapper .single-blog-post.post-details .post-content h1, .blog-wrapper .single-blog-post.post-details .post-content h2, .blog-wrapper .single-blog-post.post-details .post-content h3, .blog-wrapper .single-blog-post.post-details .post-content h4, .blog-wrapper .single-blog-post.post-details .post-content h5, .blog-wrapper .single-blog-post.post-details .post-content h6 {
  margin-top: 20px;
}
.blog-wrapper .single-blog-post.post-details .post-content table {
  margin-top: 20px;
}
@media (max-width: 767px) {
  .blog-wrapper .single-blog-post.post-details .post-content h1 {
    font-size: 28px;
  }
  .blog-wrapper .single-blog-post.post-details .post-content h3 {
    font-size: 20px;
  }
}
.blog-wrapper .single-blog-post.post-details blockquote, .blog-wrapper .single-blog-post.post-details .wp-block-quote {
  background-color: var(--theme);
  color: var(--white);
  font-size: 26px;
  line-height: 1.4;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  padding: 60px;
  text-align: center;
  margin: 40px 0px;
  position: relative;
  z-index: 1;
}
.blog-wrapper .single-blog-post.post-details blockquote a, .blog-wrapper .single-blog-post.post-details .wp-block-quote a {
  color: var(--white);
}
.blog-wrapper .single-blog-post.post-details blockquote a:hover, .blog-wrapper .single-blog-post.post-details .wp-block-quote a:hover {
  color: var(--text);
}
@media (max-width: 767px) {
  .blog-wrapper .single-blog-post.post-details blockquote, .blog-wrapper .single-blog-post.post-details .wp-block-quote {
    padding: 30px 20px;
    font-size: 18px;
    line-height: 1.5;
  }
}
.blog-wrapper .single-blog-post.post-details blockquote::before, .blog-wrapper .single-blog-post.post-details .wp-block-quote::before {
  right: 30px;
  font-size: 110px;
  line-height: 1;
  font-family: "Font Awesome 5 Pro";
  position: absolute;
  content: "\f10d";
  bottom: -20px;
  color: var(--white);
  z-index: -1;
  opacity: 0.1;
  font-weight: 900;
}
.blog-wrapper .single-blog-post.format-video .post-featured-thumb, .blog-wrapper .single-blog-post.category-video-post .post-featured-thumb {
  z-index: 1;
  position: relative;
}
.blog-wrapper .single-blog-post.format-video .post-featured-thumb::before, .blog-wrapper .single-blog-post.category-video-post .post-featured-thumb::before {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  content: "";
  background-color: #282835;
  opacity: 0.3;
  z-index: -1;
}
.blog-wrapper .single-blog-post.quote-post .post-content, .blog-wrapper .single-blog-post.format-quote .post-content {
  position: relative;
  background-color: var(--theme);
  border: none;
}
.blog-wrapper .single-blog-post.quote-post .post-content::before, .blog-wrapper .single-blog-post.format-quote .post-content::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-image: url(../../assets/img/quotepost.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.blog-wrapper .single-blog-post.quote-post .quote-content, .blog-wrapper .single-blog-post.format-quote .quote-content {
  overflow: hidden;
  padding: 50px;
}
@media (max-width: 585px) {
  .blog-wrapper .single-blog-post.quote-post .quote-content, .blog-wrapper .single-blog-post.format-quote .quote-content {
    text-align: center;
    font-size: 24px;
    padding: 30px;
  }
}
.blog-wrapper .single-blog-post.quote-post .quote-content .icon, .blog-wrapper .single-blog-post.format-quote .quote-content .icon {
  font-size: 70px;
  line-height: 80px;
  float: left;
  overflow: hidden;
  margin-right: 30px;
}
@media (max-width: 585px) {
  .blog-wrapper .single-blog-post.quote-post .quote-content .icon, .blog-wrapper .single-blog-post.format-quote .quote-content .icon {
    float: none;
    margin-bottom: 20px;
    margin-right: 0;
    font-size: 50px;
    line-height: 60px;
  }
}
.blog-wrapper .single-blog-post.quote-post .quote-content .quote-text, .blog-wrapper .single-blog-post.format-quote .quote-content .quote-text {
  overflow: hidden;
}
.blog-wrapper .single-blog-post.quote-post .quote-content h2, .blog-wrapper .single-blog-post.format-quote .quote-content h2 {
  margin-top: -2px;
  font-size: 30px;
  color: var(--white);
}
.blog-wrapper .single-blog-post.quote-post .quote-content .post-meta, .blog-wrapper .single-blog-post.format-quote .quote-content .post-meta {
  margin-top: 20px;
}
.blog-wrapper .single-blog-post.quote-post .quote-content .post-meta span, .blog-wrapper .single-blog-post.quote-post .quote-content .post-meta i, .blog-wrapper .single-blog-post.format-quote .quote-content .post-meta span, .blog-wrapper .single-blog-post.format-quote .quote-content .post-meta i {
  color: var(--white);
}
.blog-wrapper .single-blog-post:last-child {
  margin-bottom: 0;
}
.blog-wrapper .single-blog-post .post-featured-thumb {
  height: 350px;
  width: 100%;
  position: relative;
  margin-bottom: -2px;
  border-radius: 20px;
}
.blog-wrapper .single-blog-post .post-featured-thumb .post-date {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 20px 30px;
  background-color: var(--theme);
  text-align: center;
  border-radius: 20px;
}
.blog-wrapper .single-blog-post .post-featured-thumb .post-date h4 {
  color: var(--white);
}
.blog-wrapper .single-blog-post .post-featured-thumb .post-date h4 span {
  color: var(--white);
  text-transform: uppercase;
  font-size: 20px;
}
@media (max-width: 991px) {
  .blog-wrapper .single-blog-post .post-featured-thumb {
    height: 280px;
  }
}
@media (max-width: 767px) {
  .blog-wrapper .single-blog-post .post-featured-thumb {
    height: 230px;
  }
}
.blog-wrapper .single-blog-post .post-featured-thumb .video-play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.blog-wrapper .single-blog-post .post-featured-thumb .video-play-btn .play-video {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
}
.blog-wrapper .single-blog-post .post-content {
  padding-top: 30px;
  overflow: hidden;
  box-sizing: border-box;
}
@media (max-width: 575px) {
  .blog-wrapper .single-blog-post .post-content {
    padding-top: 20px;
  }
}
.blog-wrapper .single-blog-post .post-content h2 {
  line-height: 1.4;
  font-size: 48px;
  font-weight: 400;
}
@media (max-width: 575px) {
  .blog-wrapper .single-blog-post .post-content h2 {
    font-size: 28px;
  }
}
.blog-wrapper .single-blog-post .post-content h2 a:hover {
  color: var(--theme);
}
.blog-wrapper .single-blog-post .post-content p {
  font-size: 16px;
}
@media (max-width: 767px) {
  .blog-wrapper .single-blog-post .post-content {
    padding: 30px 20px;
  }
}
@media (max-width: 414px) {
  .blog-wrapper .single-blog-post .post-content h2 {
    font-size: 22px;
  }
}
.blog-wrapper .single-blog-post .post-content .post-cat a {
  color: var(--white);
  display: inline-block;
  background-color: var(--theme);
  padding: 14px 18px 12px;
  line-height: 1;
  font-size: 16px;
  font-weight: 400;
  transition: all 0.3s ease-in-out;
  margin-bottom: 20px;
  text-transform: capitalize;
  font-family: "Montserrat", sans-serif;
}
@media (max-width: 767px) {
  .blog-wrapper .single-blog-post .post-content .post-cat a {
    font-size: 12px;
  }
}
.blog-wrapper .single-blog-post .post-content .post-cat a:hover {
  background-color: var(--header);
}
.blog-wrapper .single-blog-post .post-content ul {
  margin-bottom: 0;
  list-style-type: disc;
  margin-top: 30px;
}
.blog-wrapper .single-blog-post .post-content ul ol {
  margin-bottom: 0;
}
.blog-wrapper .single-blog-post .post-content ul ul {
  margin-bottom: 0;
}
.blog-wrapper .single-blog-post .post-content ul li {
  line-height: 1.5;
  margin-top: 20px;
  list-style-type: disc;
  color: var(--text);
  position: relative;
  font-size: 18px;
  padding-left: 30px;
}
.blog-wrapper .single-blog-post .post-content ul li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Font Awesome 5 Pro";
  content: "\f00c";
  color: var(--theme);
}
.blog-wrapper .single-blog-post .post-content ol {
  margin-bottom: 0;
  list-style-type: decimal;
}
.blog-wrapper .single-blog-post .post-content ol ul {
  margin-bottom: 0;
}
.blog-wrapper .single-blog-post .post-content ol ol {
  margin-bottom: 0;
}
.blog-wrapper .single-blog-post .post-content ol li {
  line-height: 1.5;
  margin-top: 20px;
  list-style-type: decimal;
}
.blog-wrapper .single-blog-post .post-content p {
  margin-top: 20px;
}
.blog-wrapper .single-blog-post .post-content .post-meta {
  margin-bottom: 20px;
}
.blog-wrapper .single-blog-post .post-content .post-meta span {
  color: var(--text);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  margin-right: 25px;
}
@media (max-width: 767px) {
  .blog-wrapper .single-blog-post .post-content .post-meta span {
    font-size: 20px;
  }
}
.blog-wrapper .single-blog-post .post-content .post-meta span i {
  margin-right: 20px;
  color: var(--theme);
  font-weight: 400;
}
.blog-wrapper .single-blog-post .post-content .author-info {
  overflow: hidden;
}
.blog-wrapper .single-blog-post .post-content .author-info .author-img {
  height: 40px;
  width: 40px;
  line-height: 40px;
  border-radius: 50%;
  background-color: #f2f2f2;
  margin-right: 20px;
  float: left;
  overflow: hidden;
  background-position: center;
  background-size: cover;
}
@media (max-width: 767px) {
  .blog-wrapper .single-blog-post .post-content .author-info .author-img {
    margin-right: 20px;
  }
}
.blog-wrapper .single-blog-post .post-content .author-info h5 {
  display: inline-block;
  line-height: 1;
  font-size: 16px;
  margin-top: 9px;
}
.blog-wrapper .single-blog-post .post-content .author-info h5 a:hover {
  color: var(--theme);
}
@media (max-width: 767px) {
  .blog-wrapper .single-blog-post .post-content .author-info h5 {
    font-size: 14px;
  }
}
.blog-wrapper .single-blog-post .post-content .post-link a {
  font-weight: 400;
}
.blog-wrapper .single-blog-post .post-content .post-link a:hover {
  color: var(--theme);
}
@media (max-width: 767px) {
  .blog-wrapper .single-blog-post .post-content .post-link a {
    font-size: 14px;
  }
}
.blog-wrapper .single-blog-post .post-content .post-link a i {
  margin-right: 20px;
}
@media (max-width: 767px) {
  .blog-wrapper .single-blog-post .post-content .post-link a i {
    margin-right: 3px;
  }
}

@media (min-width: 991px) {
  .news-area .main-sidebar {
    margin-left: 20px;
  }
}
@media (max-width: 991px) {
  .news-area .main-sidebar {
    margin-top: 40px;
  }
}
.news-area .main-sidebar .single-sidebar-widget {
  border: 2px solid #ededed;
  box-sizing: border-box;
  padding: 30px;
  margin-bottom: 40px;
}
.news-area .main-sidebar .single-sidebar-widget ul {
  padding-left: 0;
}
.news-area .main-sidebar .single-sidebar-widget ul > li {
  margin-bottom: 20px;
}
.news-area .main-sidebar .single-sidebar-widget ul > li a {
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
}
.news-area .main-sidebar .single-sidebar-widget ul > li a:hover {
  color: var(--theme);
}
.news-area .main-sidebar .single-sidebar-widget ul ul {
  padding-left: 20px;
}
.news-area .main-sidebar .single-sidebar-widget ul ul li {
  margin-top: 20px;
}
.news-area .main-sidebar .single-sidebar-widget:last-child {
  margin-bottom: 0;
}
.news-area .main-sidebar .single-sidebar-widget .wid-title {
  margin-bottom: 25px;
  padding-left: 45px;
  position: relative;
}
.news-area .main-sidebar .single-sidebar-widget .wid-title::before {
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  height: 4px;
  width: 18px;
  border-radius: 20px;
  position: absolute;
  background-color: var(--theme);
}
.news-area .main-sidebar .single-sidebar-widget .wid-title::after {
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  height: 4px;
  width: 4px;
  border-radius: 50%;
  position: absolute;
  background-color: var(--theme);
}
.news-area .main-sidebar .single-sidebar-widget .wid-title h4 {
  font-size: 24px;
  font-weight: 400;
}
.news-area .main-sidebar .single-sidebar-widget .social-link a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--bg);
  font-size: 14px;
  margin-right: 20px;
  margin-bottom: 20px;
}
.news-area .main-sidebar .single-sidebar-widget .social-link a:hover {
  background-color: var(--theme);
  color: var(--white);
}

.search_widget form {
  width: 100%;
  position: relative;
}
.search_widget form input {
  background-color: var(--bg);
  font-size: 20px;
  padding: 20px;
  width: 100%;
  border: none;
  text-transform: capitalize;
  color: var(--header);
}
.search_widget form button {
  position: absolute;
  right: 0;
  top: 0;
  width: 70px;
  font-size: 18px;
  height: 100%;
  background-color: var(--theme);
  color: var(--white);
  text-align: center;
  transition: all 0.3s ease-in-out;
}
.search_widget form button:hover {
  background-color: var(--header);
}

.popular-posts .single-post-item, .popular_posts .single-post-item {
  overflow: hidden;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #f2f2f2;
}
.popular-posts .single-post-item:last-child, .popular_posts .single-post-item:last-child {
  margin-bottom: 0;
  border: none;
  padding-bottom: 0;
}
.popular-posts .single-post-item .thumb, .popular_posts .single-post-item .thumb {
  height: 95px;
  width: 95px;
  background-color: #f2f2f2;
  float: left;
  overflow: hidden;
  margin-right: 20px;
}
.popular-posts .single-post-item .post-content, .popular_posts .single-post-item .post-content {
  overflow: hidden;
}
.popular-posts .single-post-item .post-content h5, .popular_posts .single-post-item .post-content h5 {
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  margin-bottom: 0;
  text-transform: capitalize;
}
.popular-posts .single-post-item .post-content h5 a:hover, .popular_posts .single-post-item .post-content h5 a:hover {
  color: var(--theme);
}
.popular-posts .single-post-item .post-content .post-date, .popular_posts .single-post-item .post-content .post-date {
  margin-top: 20px;
  color: var(--theme);
  font-weight: 400;
  font-size: 20px;
  text-transform: capitalize;
}
.popular-posts .single-post-item .post-content .post-date i, .popular_posts .single-post-item .post-content .post-date i {
  margin-right: 7px;
}

.widget_categories ul li {
  display: block;
}
.widget_categories ul li:last-child a {
  margin-bottom: 0;
}
.widget_categories ul li a {
  position: relative;
  background: var(--bg);
  padding: 17px 20px;
  line-height: 1;
  font-size: 14px;
  display: block;
  margin-bottom: 12px;
  font-weight: 500;
  transition: all 0.4s ease-in-out;
}
.widget_categories ul li a:hover {
  color: var(--theme);
}
.widget_categories ul li a i {
  margin-right: 20px;
}
.widget_categories ul li a span {
  position: absolute;
  width: 60px;
  line-height: 55px;
  height: 100%;
  content: "";
  background-color: var(--theme);
  right: 0;
  top: 0;
  text-align: center;
  color: var(--white);
}

.tagcloud a {
  display: inline-block;
  padding: 11px 26px;
  line-height: 1;
  font-size: 20px;
  font-weight: 400;
  background: var(--bg);
  margin-right: 20px;
  text-transform: capitalize;
  margin-bottom: 20px;
}
.tagcloud a:last-child {
  margin-right: 0;
}
.tagcloud a:hover {
  background-color: var(--theme);
  color: var(--white);
}

.widget_categories ul li {
  display: block;
  margin-bottom: 20px;
}

p.sticky-label {
  position: absolute;
  right: 0;
  background: var(--theme);
  color: var(--white);
  padding: 20px 40px;
  z-index: -1;
  top: 0;
  font-weight: 700;
}

.page-nav-wrap ul li {
  display: inline-block;
}
.page-nav-wrap ul li .page-numbers {
  display: inline-block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  background: #f6f6f6;
  font-weight: 400;
  transition: all 0.3s ease-in-out;
  margin: 0 2px;
}
.page-nav-wrap ul li .page-numbers.current {
  background-color: var(--theme);
  color: var(--white);
}
@media (max-width: 767px) {
  .page-nav-wrap ul li .page-numbers {
    margin-top: 20px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
  }
}
.page-nav-wrap ul li .page-numbers i {
  margin-top: 2px;
}
.page-nav-wrap ul li .page-numbers:hover {
  background-color: var(--theme);
  color: var(--white);
}

.social-share a {
  margin-left: 20px;
  transition: all 0.4s ease-in-out;
}
.social-share a:hover {
  color: var(--theme);
}

.tag-share-wrap {
  padding-bottom: 50px;
}
.tag-share-wrap h4 {
  margin-bottom: 25px;
}
@media (max-width: 767px) {
  .tag-share-wrap h4 {
    margin-bottom: 20px;
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .tag-share-wrap .tagcloud {
    margin-bottom: 20px;
  }
}

.comments-section-wrap {
  overflow: hidden;
}

.comments-heading h3, .related-post-wrap h3, .comment-form-wrap h3 {
  font-size: 26px;
}
@media (max-width: 767px) {
  .comments-heading h3, .related-post-wrap h3, .comment-form-wrap h3 {
    font-size: 20px;
  }
}

.comments-item-list .single-comment-item {
  margin-top: 30px;
}
.comments-item-list .single-comment-item ul {
  margin-bottom: 20px;
}
.comments-item-list .single-comment-item p, .comments-item-list .single-comment-item span {
  font-size: 16px;
}
.comments-item-list .single-comment-item .author-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  float: left;
  overflow: hidden;
  margin-right: 30px;
}
@media (max-width: 991px) {
  .comments-item-list .single-comment-item .author-img {
    width: 80px;
    height: 80px;
    margin-right: 20px;
  }
}
@media (max-width: 767px) {
  .comments-item-list .single-comment-item .author-img {
    width: 70px;
    height: 70px;
    margin-right: 20px;
  }
}
@media (max-width: 585px) {
  .comments-item-list .single-comment-item .author-img {
    float: none;
    margin-bottom: 20px;
  }
}
.comments-item-list .single-comment-item .author-info-comment {
  overflow: auto;
  padding-bottom: 25px;
  border-bottom: 1px solid #e2e2e2;
}
.comments-item-list .single-comment-item .author-info-comment .info {
  position: relative;
}
.comments-item-list .single-comment-item .author-info-comment .info .theme-btn {
  padding: 12px 18px;
  font-size: 14px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  color: #727475;
  border: 1px solid #ebebeb;
  background: transparent;
  border-radius: 0;
  transition: all 0.4s ease-in-out;
  box-shadow: inherit;
}
@media (max-width: 767px) {
  .comments-item-list .single-comment-item .author-info-comment .info .theme-btn {
    font-size: 12px;
  }
}
.comments-item-list .single-comment-item .author-info-comment .info .theme-btn i {
  margin-right: 20px;
}
.comments-item-list .single-comment-item .author-info-comment .info .theme-btn.minimal-btn::before, .comments-item-list .single-comment-item .author-info-comment .info .theme-btn.minimal-btn::after {
  background-color: initial;
}
.comments-item-list .single-comment-item .author-info-comment .info .theme-btn:hover {
  background-color: var(--theme);
  color: var(--white);
}
.comments-item-list .single-comment-item .author-info-comment .info .theme-btn:hover a {
  color: var(--white) !important;
}
.comments-item-list .single-comment-item .author-info-comment .info .theme-btn:hover i {
  transform: translate(0);
}
.comments-item-list .single-comment-item .author-info-comment .info h5 {
  margin-bottom: 20px;
}
@media (max-width: 767px) {
  .comments-item-list .single-comment-item .author-info-comment .info h5 {
    font-size: 16px;
  }
}
.comments-item-list .single-comment-item .author-info-comment span {
  color: var(--theme);
  font-weight: 500;
}
.comments-item-list .single-comment-item .author-info-comment .theme-btn {
  padding: 7px 18px;
  font-size: 14px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
@media (max-width: 767px) {
  .comments-item-list .single-comment-item .author-info-comment .theme-btn {
    font-size: 12px;
  }
}
.comments-item-list .single-comment-item .author-info-comment .theme-btn i {
  margin-right: 20px;
}
.comments-item-list .single-comment-item .author-info-comment .theme-btn:hover a {
  color: var(--white);
}
.comments-item-list .single-comment-item .author-info-comment .comment-text {
  margin-top: 20px;
}

.comment-form {
  background-color: var(--white);
  width: 100%;
  margin-top: 30px;
}
@media (max-width: 767px) {
  .comment-form {
    padding: 30px;
  }
}
@media (max-width: 585px) {
  .comment-form {
    padding: 30px 20px;
  }
}
.comment-form label {
  margin-bottom: 4px;
}
.comment-form input, .comment-form textarea {
  margin-bottom: 20px;
  outline: none;
  padding: 20px 30px;
  line-height: 1;
  font-size: 16px;
  width: 100%;
  border: none;
  font-weight: 500;
  text-transform: capitalize;
  color: var(--header);
  background-color: var(--bg);
}
@media (max-width: 585px) {
  .comment-form input, .comment-form textarea {
    padding: 20px;
  }
}
.comment-form textarea {
  height: 200px;
  line-height: 1.3;
  border: none;
}
@media (max-width: 767px) {
  .comment-form textarea {
    height: 120px;
  }
}
.comment-form .theme-btn {
  display: inline-block;
  line-height: 1.2;
  padding: 24px 60px;
  transition: all 0.3s ease-in-out;
  margin-bottom: 0;
  margin-top: 20px;
}
@media (max-width: 767px) {
  .comment-form .theme-btn {
    padding: 20px 40px;
  }
}
@media (max-width: 585px) {
  .comment-form .theme-btn {
    padding: 20px 40px;
    font-size: 14px;
  }
}
.comment-form .theme-btn i {
  margin-right: 20px;
}
.comment-form .theme-btn:hover i {
  transform: translate(0);
}

.comment ul {
  list-style-type: disc;
}
.comment ul ol {
  margin-bottom: 0;
}
.comment ul li {
  line-height: 1.5;
  margin-top: 20px;
  list-style-type: disc;
}
.comment ol ul {
  margin-bottom: 0;
}
.comment ol ol {
  margin-bottom: 0;
}
.comment ol li {
  line-height: 1.5;
  margin-top: 20px;
}

.site_info_widget .single-contact-info {
  overflow: auto;
  margin-bottom: 20px;
}
.site_info_widget .single-contact-info span {
  display: block;
  color: var(--theme);
}
.site_info_widget .single-contact-info .icon {
  width: 40px;
  height: 40px;
  line-height: 40px;
  color: var(--white);
  background-color: var(--theme);
  float: left;
  text-align: center;
  overflow: hidden;
  font-size: 16px;
  margin-right: 20px;
}
.site_info_widget .single-contact-info:nth-child(2n) .icon {
  background-color: var(--theme);
}
.site_info_widget .single-contact-info:nth-child(3n) .icon {
  background-color: var(--theme);
}
.site_info_widget .social-link {
  margin-top: 35px;
}
.site_info_widget .social-link a {
  margin-right: 8px !important;
}

.alignleft {
  float: left;
  margin-right: 1.5em;
  margin-bottom: 1.5em;
}

.portfolio-wrapper {
  margin-right: -35%;
}
@media (max-width: 1199px) {
  .portfolio-wrapper {
    margin-right: 0;
  }
}
.portfolio-wrapper.style-2 {
  margin-right: 0;
  padding: 0 95px;
}
@media (max-width: 1399px) {
  .portfolio-wrapper.style-2 {
    padding: 0;
  }
}
.portfolio-wrapper.style-2 .portfolio-items {
  margin-top: 0;
}
@media (max-width: 767px) {
  .portfolio-wrapper.style-2 .portfolio-items .portfolio-image {
    max-width: 700px;
  }
}

.portfolio-items {
  margin-top: 30px;
  position: relative;
}
.portfolio-items::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: #58151c!important;
  z-index: 1;
  top: 20px;
  width: 90%;
  height: 93%;
  left: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  border-radius: 20px;
}
@media (max-width: 1399px) {
  .portfolio-items::before {
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
  }
}
.portfolio-items .portfolio-image {
  max-width: 410px;
  height: 534px;
  border-radius: 20px;
  position: relative;
}
@media (max-width: 1399px) {
  .portfolio-items .portfolio-image {
    max-width: 550px;
  }
}
@media (max-width: 1199px) {
  .portfolio-items .portfolio-image {
    margin-right: 0;
  }
}
@media (max-width: 767px) {
  .portfolio-items .portfolio-image {
    height: 500px;
  }
}
@media (max-width: 575px) {
  .portfolio-items .portfolio-image {
    max-width: 550px;
  }
}
.portfolio-items .portfolio-image .portfolio-content {
  padding: 20px !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}
@media (max-width: 991px) {
  .portfolio-items .portfolio-image .portfolio-content br {
    display: block;
  }
}
.portfolio-items .portfolio-image .portfolio-content .icon {
  width: 55px;
  height: 55px;
  line-height: 55px;
  border-radius: 50%;
  text-align: center;
  background-color: var(--theme);
  color: var(--white);
  display: inline-block;
  transition: all 0.4s ease-in-out;
  margin-bottom: 30px;
}
.portfolio-items .portfolio-image .portfolio-content .icon:hover {
  background-color: #58151c;
  color: var(--white);
}
.portfolio-items .portfolio-image .portfolio-content h3 {
  margin-bottom: 20px;
}
.portfolio-items .portfolio-image .portfolio-content h3 a {
  color: var(--white);
}
.portfolio-items .portfolio-image .portfolio-content h3 a:hover {
  color: var(--theme);
}
.portfolio-items .portfolio-image .portfolio-content p {
  color: var(--white);
  
}
.portfolio-items:hover::before {
  opacity: 0.8;
  visibility: visible;
}
.portfolio-items:hover .portfolio-image .portfolio-content {
  opacity: 1;
  visibility: visible;
}

.portfolio-wrapper-2 {
  margin-bottom: 30px;
}
.portfolio-wrapper-2 .portfolio-content {
  display: flex;
  align-items: center;
  gap: 110px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 40px 0;
}
@media (max-width: 767px) {
  .portfolio-wrapper-2 .portfolio-content {
    gap: 90px;
    padding: 30px 0;
  }
}
@media (max-width: 575px) {
  .portfolio-wrapper-2 .portfolio-content {
    gap: 70px;
    padding: 25px 0;
  }
}
.portfolio-wrapper-2 .portfolio-content:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.portfolio-wrapper-2 .portfolio-content .content {
  position: relative;
  overflow: hidden;
}
.portfolio-wrapper-2 .portfolio-content .content::before {
  position: absolute;
  top: 6px;
  left: 0px;
  content: "";
  width: 90px;
  height: 16px;
  background-size: cover;
  background-image: url(../../assets/img/arrow.svg);
  left: -100px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}
.portfolio-wrapper-2 .portfolio-content .content p {
  color: var(--theme);
  transition: all 0.4s ease-in-out;
}
.portfolio-wrapper-2 .portfolio-content h3 a {
  color: var(--white);
}
.portfolio-wrapper-2 .portfolio-content h3 a:hover {
  color: var(--theme);
}
.portfolio-wrapper-2 .portfolio-content:hover .content::before {
  opacity: 1;
  visibility: visible;
  left: 0;
}
.portfolio-wrapper-2 .portfolio-content:hover .content p {
  padding-left: 110px;
}
.portfolio-wrapper-2 .portfolio-image {
  margin-left: 100px;
  position: relative;
  z-index: 9;
}
@media (max-width: 1399px) {
  .portfolio-wrapper-2 .portfolio-image {
    margin-left: 50px;
  }
}
@media (max-width: 1199px) {
  .portfolio-wrapper-2 .portfolio-image {
    margin-left: 0;
  }
}
.portfolio-wrapper-2 .portfolio-image img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
.portfolio-wrapper-2 .portfolio-image::before {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  width: 535px;
  height: 410px;
  border-radius: 20px;
  background-color: var(--theme);
  transform: rotate(-15deg);
  z-index: -1;
  opacity: 0.5;
}
@media (max-width: 1399px) {
  .portfolio-wrapper-2 .portfolio-image::before {
    width: 495px;
  }
}
@media (max-width: 1199px) {
  .portfolio-wrapper-2 .portfolio-image::before {
    display: none;
  }
}

@media (max-width: 767px) {
  .portfolio-wrapper-3 {
    margin-top: -20px;
  }
}
.portfolio-wrapper-3 .portfolio-content {
  margin-left: 33px;
}
@media (max-width: 1199px) {
  .portfolio-wrapper-3 .portfolio-content {
    margin-left: 0;
  }
  .portfolio-wrapper-3 .portfolio-content br {
    display: block;
  }
}
@media (max-width: 575px) {
  .portfolio-wrapper-3 .portfolio-content {
    text-align: center;
  }
}
.portfolio-wrapper-3 .portfolio-content h6 {
  font-size: 18px;
  font-weight: 400;
  color: var(--theme);
  display: inline-block;
  margin-bottom: 20px;
  line-height: 1;
}
.portfolio-wrapper-3 .portfolio-content h3 {
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 20px;
}
@media (max-width: 991px) {
  .portfolio-wrapper-3 .portfolio-content h3 {
    font-size: 26px;
  }
}
@media (max-width: 767px) {
  .portfolio-wrapper-3 .portfolio-content h3 {
    font-size: 24px;
  }
}
@media (max-width: 575px) {
  .portfolio-wrapper-3 .portfolio-content h3 {
    font-size: 20px;
    margin-bottom: 20px;
  }
}
.portfolio-wrapper-3 .portfolio-content h3 a:hover {
  color: var(--theme);
}
.portfolio-wrapper-3 .portfolio-content p {
  margin-bottom: 35px;
}
@media (max-width: 767px) {
  .portfolio-wrapper-3 .portfolio-content p {
    margin-bottom: 25px;
  }
}
.portfolio-wrapper-3 .portfolio-content ul {
  margin-bottom: 35px;
  margin-top: -10px;
}
.portfolio-wrapper-3 .portfolio-content ul li i {
  color: var(--theme);
  margin-right: 20px;
}
.portfolio-wrapper-3 .portfolio-content ul li:not(:last-child) {
  margin-bottom: 20px;
}
.portfolio-wrapper-3 .portfolio-content .counter-item {
  display: inline-flex;
  gap: 20px;
  padding: 20px;
  background-color: #C1995B;
}
.portfolio-wrapper-3 .portfolio-content .counter-item h2 {
  font-size: 48px;
}
.portfolio-wrapper-3 .portfolio-content .counter-item h2 span {
  font-size: 48px;
  color: var(--white);
  font-weight: 400;
  margin-bottom: 0;
}
.portfolio-wrapper-3 .portfolio-content .counter-item p {
  margin-bottom: 0;
}
.portfolio-wrapper-3 .project-image {
  margin-left: 33px;
}
@media (max-width: 1199px) {
  .portfolio-wrapper-3 .project-image {
    margin-left: 0;
  }
}
.portfolio-wrapper-3 .project-image img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.portfolio-section-2 .swiper-slide.swiper-slide-active .portfolio-single-items .portfolio-image .portfolio-content {
  opacity: 1;
  visibility: visible;
  bottom: 20px;
}

.portfolio-single-items {
  margin-top: 30px;
  overflow: hidden;
}
.portfolio-single-items .portfolio-image {
  height: 402px;
  transition: all 0.4s ease-in-out;
  position: relative;
}
.portfolio-single-items .portfolio-image .portfolio-content {
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  padding: 30px;
  background-color: var(--black);
  bottom: -150px;
  opacity: 0;
  transition: all 0.4s ease-in-out;
}
.portfolio-single-items .portfolio-image .portfolio-content h3 {
  margin-bottom: 20px;
}
.portfolio-single-items .portfolio-image .portfolio-content h3 a {
  color: var(--white);
}
.portfolio-single-items .portfolio-image .portfolio-content h3 a:hover {
  color: var(--theme);
}
.portfolio-single-items .portfolio-image .portfolio-content p {
  color: var(--white);
}
.portfolio-single-items:hover .portfolio-image .portfolio-content {
  opacity: 1;
  visibility: visible;
  bottom: 20px;
}

.contact-wrapper .contact-left {
  padding: 60px;
  background-color: var(--bg2);
}
@media (max-width: 767px) {
  .contact-wrapper .contact-left {
    padding: 50px 40px;
  }
}
@media (max-width: 575px) {
  .contact-wrapper .contact-left {
    padding: 40px 30px;
  }
}
.contact-wrapper .contact-form-items .form-clt input, .contact-wrapper .contact-form-items .form-clt textarea {
  width: 100%;
  outline: none;
  border: none;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--white);
  padding: 16px 20px;
  border-radius: 20px;
}
@media (max-width: 767px) {
  .contact-wrapper .contact-form-items .form-clt input, .contact-wrapper .contact-form-items .form-clt textarea {
    padding: 14px 20px;
  }
}
@media (max-width: 575px) {
  .contact-wrapper .contact-form-items .form-clt input, .contact-wrapper .contact-form-items .form-clt textarea {
    padding: 12px 18px;
  }
}
.contact-wrapper .contact-form-items .form-clt input::placeholder, .contact-wrapper .contact-form-items .form-clt textarea::placeholder {
  color: rgba(255, 255, 255, 0.7019607843);
}
.contact-wrapper .contact-form-items .form-clt textarea {
  padding-bottom: 75px;
}
.contact-wrapper .contact-image {
  width: 980px;
  height: 811px;
  border-radius: 20px;
}
@media (max-width: 1199px) {
  .contact-wrapper .contact-image {
    width: inherit;
    max-width: 900px;
    height: 650px;
  }
}
@media (max-width: 991px) {
  .contact-wrapper .contact-image {
    height: 600px;
  }
}
@media (max-width: 767px) {
  .contact-wrapper .contact-image {
    height: 500px;
  }
}
@media (max-width: 575px) {
  .contact-wrapper .contact-image {
    height: 430px;
  }
}

.contact-wrapper-2 .section-title {
  margin-top: -12px;
}
.contact-wrapper-2 .contact-form-items .form-clt {
  position: relative;
}
.contact-wrapper-2 .contact-form-items .form-clt input, .contact-wrapper-2 .contact-form-items .form-clt textarea {
  width: 100%;
  outline: none;
  border: none;
  background-color: var(--white);
  border: none;
  color: var(--text);
  padding: 16px 30px;
  border-radius: 20px;
  font-weight: 500;
}
@media (max-width: 767px) {
  .contact-wrapper-2 .contact-form-items .form-clt input, .contact-wrapper-2 .contact-form-items .form-clt textarea {
    padding: 14px 20px;
  }
}
@media (max-width: 575px) {
  .contact-wrapper-2 .contact-form-items .form-clt input, .contact-wrapper-2 .contact-form-items .form-clt textarea {
    padding: 12px 18px;
  }
}
.contact-wrapper-2 .contact-form-items .form-clt input::placeholder, .contact-wrapper-2 .contact-form-items .form-clt textarea::placeholder {
  color: var(--text);
}
.contact-wrapper-2 .contact-form-items .form-clt textarea {
  padding-bottom: 175px;
}
.contact-wrapper-2 .contact-form-items .form-clt .icon {
  position: absolute;
  top: 16px;
  right: 30px;
  color: var(--black);
}
.contact-wrapper-2 .contact-form-items .form-clt .nice-select {
  background-color: var(--white);
  font-weight: 500;
  border: none;
  padding: 16px 30px;
}
@media (max-width: 767px) {
  .contact-wrapper-2 .contact-form-items .form-clt .nice-select {
    padding: 14px 20px;
  }
}
@media (max-width: 575px) {
  .contact-wrapper-2 .contact-form-items .form-clt .nice-select {
    padding: 12px 18px;
  }
}
.contact-wrapper-2 .contact-form-items .form-clt .nice-select span {
  color: var(--text);
}
.contact-wrapper-2 .contact-form-items .form-clt .nice-select::after {
  border-bottom: 1px solid var(--black);
  border-right: 1px solid var(--black);
  right: 30px;
}
.contact-wrapper-2 .contact-form-items .form-clt .nice-select .option.selected.focus {
  background: transparent;
  color: var(--white);
}
.contact-wrapper-2 .contact-form-items .form-clt .nice-select .list {
  background-color: var(--theme);
  color: var(--white);
}

.contact-info-wrapper {
  background-color: var(--bg);
}
.contact-info-wrapper .google-map {
  margin-bottom: -9px;
}
.contact-info-wrapper .google-map iframe {
  width: 100%;
  height: 560px;
}
.contact-info-wrapper .contact-info-content {
  padding: 40px;
  border-radius: 20px;
}
.contact-info-wrapper .col-xl-6.col-lg-6 {
  border-radius: 20px;
}
.contact-info-wrapper .contact-info-content h3 {
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 20px;
}
.contact-info-wrapper .contact-info-content .contact-info-area {
  margin-top: 40px;
}
.contact-info-wrapper .contact-info-content .contact-info-area .contact-info-items .icon {
  width: 45px;
  height: 45px;
  line-height: 45px;
  margin-bottom:-10px;
  border-radius: 50%;
  background-color: rgba(166, 161, 130, 0.1);
  color: var(--theme);
  text-align: center;
}
.contact-info-wrapper .contact-info-content .contact-info-area .contact-info-items .content {
  margin-top: 20px;
}
.contact-info-wrapper .contact-info-content .contact-info-area .contact-info-items .content h3 {
  font-weight: 400;
  margin-bottom: 10px;
}
.contact-info-wrapper .contact-info-content .contact-info-area .contact-info-items .content h6 {
  font-weight: 400;
  color: var(--text);
}
.contact-info-wrapper .contact-info-content .contact-info-area .contact-info-items .content h6 a {
  color: var(--text);
}

@media (max-width: 1399px) {
  .contact-section-4 {
    padding-top: 40px;
  }
}
@media (max-width: 1199px) {
  .contact-section-4 {
    padding-top: 20px;
  }
}
@media (max-width: 991px) {
  .contact-section-4 {
    margin-top: -40px;
  }
}

.contact-wrapper-3 {
  background-image: url(../../assets/img/contact.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0 0 80px 0;
  border-radius: 20px;
}
.contact-wrapper-3 .contact-content {
  background-color: var(--white);
  border-radius: 0 0 20px 0;
  padding: 40px;
  padding-left: 0;
}
.contact-wrapper-3 .contact-content .contact-form-items .form-clt {
  position: relative;
}
.contact-wrapper-3 .contact-content .contact-form-items .form-clt input, .contact-wrapper-3 .contact-content .contact-form-items .form-clt textarea {
  width: 100%;
  outline: none;
  border: 1px solid var(--border);
  background-color: transparent;
  color: var(--text);
  padding: 16px 20px;
  border-radius: 20px;
  font-weight: 500;
}
@media (max-width: 767px) {
  .contact-wrapper-3 .contact-content .contact-form-items .form-clt input, .contact-wrapper-3 .contact-content .contact-form-items .form-clt textarea {
    padding: 14px 20px;
  }
}
@media (max-width: 575px) {
  .contact-wrapper-3 .contact-content .contact-form-items .form-clt input, .contact-wrapper-3 .contact-content .contact-form-items .form-clt textarea {
    padding: 12px 18px;
  }
}
.contact-wrapper-3 .contact-content .contact-form-items .form-clt input::placeholder, .contact-wrapper-3 .contact-content .contact-form-items .form-clt textarea::placeholder {
  color: var(--text);
}
.contact-wrapper-3 .contact-content .contact-form-items .form-clt textarea {
  padding-bottom: 115px;
}

.footer-widgets-wrapper {
  padding: 60px 0 40px;
  position: relative;
  z-index: 9;
}
@media (max-width: 1199px) {
  .footer-widgets-wrapper {
    padding: 70px 0 100px;
  }
}
@media (max-width: 991px) {
  .footer-widgets-wrapper {
    padding: 50px 0 80px;
  }
}
.footer-widgets-wrapper .single-footer-widget {
  margin-top: 30px;
}
.footer-widgets-wrapper .single-footer-widget .widget-head {
  margin-bottom: 30px;
}
.footer-widgets-wrapper .single-footer-widget .widget-head h3 {
  font-weight: 400;
  color: var(--white);
}
.footer-widgets-wrapper .single-footer-widget .footer-content p {
  color: var(--white);
}
.footer-widgets-wrapper .single-footer-widget .footer-content .footer-input {
  position: relative;
  margin-top: 40px;
}
.footer-widgets-wrapper .single-footer-widget .footer-content .footer-input input {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  outline: none;
  padding: 18px 20px;
  width: 100%;
  border-radius: 20px;
}
.footer-widgets-wrapper .single-footer-widget .footer-content .footer-input input::placeholder {
  color: var(--white);
}
.footer-widgets-wrapper .single-footer-widget .footer-content .footer-input .newsletter-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 64px;
  line-height: 60px;
  border-radius: 20px;
  text-align: center;
  background-color: var(--theme);
  color: var(--white);
}
.footer-widgets-wrapper .single-footer-widget .footer-content .footer-input.style-two {
  position: relative;
  margin-top: 40px;
}
.footer-widgets-wrapper .single-footer-widget .footer-content .footer-input.style-two input {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.7019607843);
}
.footer-widgets-wrapper .single-footer-widget .footer-content .footer-input.style-two input::placeholder {
  color: var(--white);
}
.footer-widgets-wrapper .single-footer-widget .footer-content .footer-input.style-two .newsletter-btn {
  border-radius: 0 20px 20px 0;
}
.footer-widgets-wrapper .single-footer-widget .footer-content .footer-input.style-three input {
  background-color: var(--black);
  border-radius: 0;
}
.footer-widgets-wrapper .single-footer-widget .footer-content .footer-input.style-three .newsletter-btn {
  border-radius: 0;
  color: var(--black);
  font-size: 18px;
  top: 20px;
  right: 20px;
  height: 54px;
}
.footer-widgets-wrapper .single-footer-widget .footer-content .social-icon {
  gap: 20px;
  margin-top: 40px;
}
.footer-widgets-wrapper .single-footer-widget .footer-content .social-icon a {
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  border-radius: 20px;
  display: inline-block;
  background-color: #0D0D0D;
  color: rgba(255, 255, 255, 0.7019607843);
  transition: all 0.4s ease-in-out;
}
.footer-widgets-wrapper .single-footer-widget .footer-content .social-icon a:hover {
  background-color: var(--theme);
  color: var(--white);
}
.footer-widgets-wrapper .single-footer-widget .footer-content .contact-info-area .contact-items {
  display: flex;
  gap: 20px;
}
.footer-widgets-wrapper .single-footer-widget .footer-content .contact-info-area .contact-items:not(:last-child) {
  margin-bottom: 20px;
}
.footer-widgets-wrapper .single-footer-widget .footer-content .contact-info-area .contact-items .icon {
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 1px solid var(--theme);
  color: rgba(255, 255, 255, 0.7019607843);
  border-radius: 50%;
}
.footer-widgets-wrapper .single-footer-widget .footer-content .contact-info-area .contact-items .content {
  flex-basis: 79%;
}
.footer-widgets-wrapper .single-footer-widget .footer-content .contact-info-area .contact-items .content h4 {
  color: var(--white);
  font-weight: 400;
  margin-top: 20px;
}
.footer-widgets-wrapper .single-footer-widget .footer-content .contact-info-area .contact-items .content h4 a {
  color: var(--white);
}
.footer-widgets-wrapper .single-footer-widget .footer-content .contact-info-area-2 .contact-items {
  display: flex;
  align-items: center;
  gap: 20px;
}
.footer-widgets-wrapper .single-footer-widget .footer-content .contact-info-area-2 .contact-items:not(:last-child) {
  margin-bottom: 20px;
}
.footer-widgets-wrapper .single-footer-widget .footer-content .contact-info-area-2 .contact-items .icon {
  font-size: 20px;
  color: var(--theme);
}
.footer-widgets-wrapper .single-footer-widget .footer-content .contact-info-area-2 .contact-items .content p {
  color: var(--white);
}
.footer-widgets-wrapper .single-footer-widget .footer-content .contact-info-area-2 .contact-items .content h6 {
  font-size: 16px;
  font-weight: 400;
}
.footer-widgets-wrapper .single-footer-widget .footer-content .contact-info-area-2 .contact-items .content h6 a {
  color: var(--white);
}
.footer-widgets-wrapper .single-footer-widget .list-items li {
  text-transform: capitalize;
}
.footer-widgets-wrapper .single-footer-widget .list-items li:not(:last-child) {
  margin-bottom: 20px;
}
.footer-widgets-wrapper .single-footer-widget .list-items li a {
  font-size: 16px;
  color: var(--white);
  position: relative;
}
.footer-widgets-wrapper .single-footer-widget .list-items li a::before {
  position: absolute;
  top: 8px;
  left: 0;
  width: 20px;
  height: 2px;
  content: "";
  background-color: var(--theme);
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}
.footer-widgets-wrapper .single-footer-widget .list-items li a:hover {
  padding-left: 20px;
  color: var(--theme);
}
.footer-widgets-wrapper .single-footer-widget .list-items li a:hover::before {
  opacity: 1;
  visibility: visible;
}
.footer-widgets-wrapper.style-2 .single-footer-widget {
  margin-top: 30px;
}
.footer-widgets-wrapper.style-2 .single-footer-widget .footer-content .social-icon a {
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}
.footer-widgets-wrapper.style-2 .single-footer-widget .footer-content .social-icon a:hover {
  background-color: var(--theme);
  color: var(--white);
}
.footer-widgets-wrapper.style-2 .single-footer-widget .list-items li i {
  margin-right: 20px;
  color: var(--theme);
}

.footer-bottom {
  padding: 30px 0;
  position: relative;
  z-index: 9;
  background-color: rgba(255, 255, 255, 0.0509803922);
}
@media (max-width: 575px) {
  .footer-bottom {
    padding: 20px 0;
    text-align: center;
  }
}
@media (max-width: 991px) {
  .footer-bottom .footer-wrapper {
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center !important;
    margin-top: 30px;
  }
}
.footer-bottom .footer-wrapper p {
  color: rgba(255, 255, 255, 0.7019607843);
}
.footer-bottom .footer-wrapper p a {
  color: rgba(255, 255, 255, 0.7019607843);
}
.footer-bottom .footer-wrapper .footer-menu {
  display: flex;
  align-items: center;
  gap: 20px;
}
@media (max-width: 575px) {
  .footer-bottom .footer-wrapper .footer-menu {
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
  }
}
.footer-bottom .footer-wrapper .footer-menu li a {
  color: rgba(255, 255, 255, 0.7019607843);
  background-image: linear-gradient(var(--theme), var(--theme));
  background-position: 0 95%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  display: inline-block;
  transition: all 0.4s ease-in-out;
}
.footer-bottom .footer-wrapper .footer-menu li a:hover {
  background-size: 100% 1px;
}
.footer-bottom .footer-wrapper.border-style {
  border-top: 1px solid var(--text) !important;
}
.footer-bottom.style-2 {
  background-color: transparent;
  padding: 0;
  position: relative;
  z-index: 9;
  margin-top: -5px;
}
@media (max-width: 991px) {
  .footer-bottom.style-2 {
    margin-top: -35px;
  }
}
.footer-bottom.style-2 .footer-wrapper {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 30px 0;
}

.footer-section {
  position: relative;
  overflow: hidden;
  background-color: var(--black);
}
.footer-section .shape-img {
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.1;
  pointer-events: none;
}
.footer-section .shape-img-2 {
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.05;
  pointer-events: none;
}
.footer-section .footer-shape-3 {
  position: absolute;
  bottom: 0;
  right: 0;
  pointer-events: none;
}
.footer-section .bg-shape {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  pointer-events: none;
}
.footer-section .bg-shape img {
  width: 100%;
  height: 100%;
}
/*# sourceMappingURL=main.css.map */
/* Overrides for H1-H4 Font Weight */
h1, h2, h3, h4, .section-title h2, .section-title h3, h2.splt-txt, h3.splt-txt { font-weight: 300 !important; }


/* Fix Get Quote button border-radius */
.theme-btn.bg-red-2, .theme-btn.bg-red-2::before, .theme-btn.bg-red-2::after {
    border-radius: 50px !important;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* CTA Refinement: Combined Input & Button */
.text-end {
  text-align: right !important;
}

.cta-form-combined {
  display: flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--white);
  border-radius: 50px;
  padding: 20px;
  width: 100%;
  max-width: 500px;
  margin-left: auto; /* Align the whole group to the right */
}

.cta-form-combined input {
  border: none !important;
  background: transparent !important;
  color: var(--white);
  padding: 20px 25px !important;
  flex-grow: 1;
  outline: none;
  min-width: 0; /* Allow shrinking */
}

.cta-form-combined .theme-btn {
  border-radius: 50px !important;
  padding: 12px 30px !important;
  white-space: nowrap;
  font-size: 14px;
  height: auto;
  line-height: 1.2;
}

.cta-form-combined .theme-btn::before,
.cta-form-combined .theme-btn::after {
  border-radius: 50px !important;
}

.cta-form-combined input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 991px) {
  .cta-form-combined {
    max-width: 100%;
    margin: 20px auto 0;
  }
}

@media (max-width: 575px) {
  .cta-form-combined {
    flex-direction: column;
    border: none;
    padding: 0;
  }
  .cta-form-combined input {
    border: 1px solid var(--white) !important;
    border-radius: 50px;
    margin-bottom: 20px;
    width: 100%;
  }
  .cta-form-combined .theme-btn {
    width: 100%;
  }
}

/* Global Button Hover Override: Brand Red */
.theme-btn:hover::before, 
.theme-btn:hover::after,
.newsletter-btn:hover,
.theme-btn.bg-transparent:hover::before,
.theme-btn.bg-transparent:hover::after {
  background-color: #bd9e70 !important;
}

/* Portfolio Hero Button: Maroon default, Gold on hover */
.portfolio-hero-btn { 
  background-color: #58151c !important; 
  color: white !important; 
  border-radius: 50px !important; 
  border: none; 
  padding: 22px 40px; 
  font-weight: 600; 
  display: inline-block; 
  transition: background-color 0.3s ease, box-shadow 0.3s ease !important; 
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);
}
.portfolio-hero-btn:hover { 
  background-color: #bd9e70 !important; 
  color: white !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.11) !important;
}
.portfolio-hero-btn::before, 
.portfolio-hero-btn::after { 
  display: none !important; 
}

/* Homepage Logo Visibility & Size */
.header-logo-2 img {
  max-height: 95px !important;
  width: auto !important;
  transition: all 0.3s ease;
  /* filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3)); */ /* Ensures white logo stands out on any background */
}

/* Standardized Footer Layout: Centered with Equal Gaps */
.footer-widgets-wrapper .row {
  justify-content: center;
}

.single-footer-widget {
  margin-left: 0 !important;
  padding-left: 0 !important;
  text-align: left;
}

.single-footer-widget .widget-head {
  margin-bottom: 25px;
}

.single-footer-widget .list-items {
  display: grid !important;
  grid-template-columns: 1fr !important; /* Stacked to prevent side-by-side overlap in shared columns */
  gap: 12px 20px !important;
  text-align: left !important;
  width: 100%;
}
.single-footer-widget .list-items li {
  white-space: nowrap;
}

.footer-widgets-wrapper [class^="col-"] {
  padding-left: 25px;
  padding-right: 25px;
}

@media (max-width: 991px) {
  .footer-widgets-wrapper .col-xl-3 {
    margin-bottom: 40px;
  }
}

/* WhatsApp Floating Button */
.whatsapp-float {
  position: fixed;
  left: 25px;
  bottom: 35px;
  height: 50px;
  width: 50px;
  background-color: #25d366; /* WhatsApp Green */
  color: #fff !important;
  text-align: center;
  font-size: 24px;
  border-radius: 50px;
  z-index: 10000;
  transition: all 0.3s ease-in-out;
  display: flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 20px 20px rgba(0, 0, 0, 0.1);
}

.whatsapp-float:hover {
  background-color: #128c7e; /* Darker WhatsApp Green */
  transform: translateY(-5px);
  color: #fff !important;
}
/* Circular Button Styles for CTAs and About Page */
.cta-banner-section .theme-btn,
.cta-banner-section-2 .theme-btn,
.cta-banner-wrapper .theme-btn,
.cta-banner-wrapper-2 .theme-btn,
.about-button .theme-btn {
  border-radius: 50px !important;
}

/* Ensure sub-elements also follow the pill shape if necessary */
.cta-banner-section .theme-btn::before,
.cta-banner-section-2 .theme-btn::before,
.about-button .theme-btn::before {
  border-radius: 50px !important;
}

/* Work Process Image Style */
.work-process-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 20px;
  margin-bottom: 25px;
  box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.1);
}

/* Global Button Standard: Fully Circular (Pill-shape) */
.theme-btn, 
.newsletter-btn, 
.submit-btn, 
.array-prev, 
.array-next,
.pagination li a,
.pagination-btn {
  border-radius: 50px !important;
  transition: background-color 0s !important, color 0.3s ease !important;
}

/* Force Hover Colors for real buttons only */
.theme-btn:hover, 
.newsletter-btn:hover, 
.submit-btn:hover, 
.array-prev:hover, 
.array-next:hover,
.pagination li a:hover,
.pagination-btn:hover {
  background-color: #bd9e70 !important;
  color: #fff !important;
  transition: background-color 0s !important;
}

/* Link-btn: text-only style, no background, no border-radius */
.link-btn {
  border-radius: 0 !important;
  background-color: transparent !important;
  color: var(--header);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1.2px;
  text-transform: capitalize;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding-bottom: 2px;
  transition: color 0.3s ease !important;
}
.link-btn::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--theme);
  transition: width 0.3s ease;
}
.link-btn:hover {
  background-color: transparent !important;
  color: var(--theme) !important;
  transition: color 0.3s ease !important;
}
.link-btn:hover::after {
  width: 100%;
}
.link-btn i {
  margin-left: 6px;
  font-size: 12px;
  transition: transform 0.3s ease;
}
.link-btn:hover i {
  transform: translateX(4px);
}

/* Remove expanded pseudo-animations for all buttons */
.theme-btn::before, .theme-btn::after,
.newsletter-btn::before, .newsletter-btn::after,
.submit-btn::before, .submit-btn::after {
  display: none !important;
}

/* Footer Logo Scaling */
.single-footer-widget .widget-head img {
  max-width: 53% !important;
  height: auto !important;
  display: block;
}

/* ============================================================
   Project Info Sidebar — Maroon outline + drop shadow
   ============================================================ */
.project-info-sidebar {
  background-color: #fff;
  border: 2px solid #58151c;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.07), 0px 6px 16px rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.3s ease;
}
.project-info-sidebar:hover {
  box-shadow: 0px 24px 48px rgba(0, 0, 0, 0.1), 0px 8px 20px rgba(0, 0, 0, 0.08);
}
.project-info-sidebar h4 {
  color: #58151c;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(128, 0, 32, 0.15);
}
.project-info-list li {
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 15px;
  color: var(--text);
}
.project-info-list li:last-child {
  border-bottom: none;
}
.project-info-list li strong {
  color: var(--header);
  margin-right: 6px;
}

/* ============================================================
   Header: ensure grid collapses cleanly on mobile
   ============================================================ */
@media (max-width: 1199px) {
  .header-main {
    grid-template-columns: auto auto; /* logo | hamburger */
  }
  .header-1 .mega-menu-wrapper .header-main .header-left .mean__menu-wrapper {
    display: none; /* hidden on mobile, mean-menu handles this */
  }
}

/* ============================================================
   Custom Sticky Header (Burgundy for Inner Pages)
   ============================================================ */
body.inner-page .sticky,
.inner-page #header-sticky.sticky {
    background-color: #58151c !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
}

/* Ensure Logo is visible on burgundy background */
body.inner-page .sticky .logo img,
.inner-page #header-sticky.sticky .logo img {
    filter: brightness(0) invert(1) !important; /* Forces logo to white */
}

/* Reduce sticky header logo height by 10% */
.sticky .logo img[style*="height: 72px"] {
    height: 65px !important; /* 72px * 0.9 = 64.8px ≈ 65px */
}
.sticky .logo img[style*="scale(0.64)"] {
    transform: scale(0.58) translateY(-12px) !important; /* 0.64 * 0.9 = 0.576 ≈ 0.58 */
}


/* Fix for transparent header on some inner pages */
.inner-page header .header-1 {
    background-color: rgba(128, 0, 32, 0.05); /* Very subtle tint before scroll */
}

/* Mobile Drawer Improvements */
.offcanvas__logo {
    max-width: 250px !important; /* Increased to fit "Burj Al Wasl" text */
    overflow: visible !important;
}
.offcanvas__logo img {
  max-width: 100% !important;
  height: auto;
  display: block;
}


.offcanvas__wrapper {
  padding: 40px !important;
}

.offcanvas__content .giant-illustration {
    display: none; /* Occupies too much space on mobile drawer */
}

@media (max-width: 767px) {
    .offcanvas__info {
        width: 300px;
    }
    .single-footer-widget .list-items {
        grid-template-columns: 1fr !important; /* Stack columns on tiny phones to prevent overlap */
    }
}

/* Contact Page "Crafting Spaces" Text Overflow Fix */
.contact-content .section-title h2 {
    line-height: 1.4;
    margin-bottom: 20px;
}

.contact-content p {
    margin-bottom: 30px;
    max-width: 90%;
}

/* Button Color Standardization */
.theme-btn.bg-red-2, 
.theme-btn.bg-maroon {
    background-color: #58151c !important;
}

.theme-btn:not(.bg-transparent):not(.bg-white) {
    background-color: #bd9e70; /* Brand Gold as default primary */
}

.theme-btn:hover {
    background-color: #58151c !important; /* Maroon on hover consistently */
    color: #fff !important;
}


/* Maroon Highlight for Work Process Item */
.work-process-items.highlight-maroon {
    background-color: #58151c !important;
    border-color: #58151c !important;
}
.work-process-items.highlight-maroon h6,
.work-process-items.highlight-maroon h3,
.work-process-items.highlight-maroon p {
    color: white !important;
}
.work-process-items.highlight-maroon .icon {
    background-color: white !important;
    border-color: white !important;
    color: #58151c !important;
}
.work-process-items.highlight-maroon .icon i {
    color: #58151c !important;
}


/* Custom Service Image Sizing */
.service-details-items .service-image img {
    max-height: 450px;
    object-fit: cover;
    width: 100%;
    border-radius: 12px;
}


/* Inner page header link colors */
body:not(.home) header .main-menu nav > ul > li > a,
body.inner-page header .main-menu nav > ul > li > a {
    color: #ffffff !important;
}
body:not(.home) header .main-menu nav > ul > li > a:hover,
body.inner-page header .main-menu nav > ul > li > a:hover {
    color: #bd9e70 !important;
}
body:not(.home) header .icon-items .content p,
body:not(.home) header .icon-items .content h4 a,
body:not(.home) header .icon-items .icon i,
body:not(.home) header .search-icon i,
body.inner-page header .icon-items .content p,
body.inner-page header .icon-items .content h4 a,
body.inner-page header .icon-items .icon i,
body.inner-page header .search-icon i {
    color: #ffffff !important;
    transition: color 0.3s ease;
}

body:not(.home) header .icon-items .content h4 a:hover,
body.inner-page header .icon-items .content h4 a:hover,
body:not(.home) header .search-icon:hover i,
body.inner-page header .search-icon:hover i {
    color: #bd9e70 !important;
}

/* Fix inner page hamburger icon */
body:not(.home) header .sidebar__toggle img,
body.inner-page header .sidebar__toggle img {
    filter: brightness(0) invert(1) !important;
}

/* Service icons rounded corners */
.service-items .icon, .service-details-items .icon-box .icon {
    border-radius: 12px !important;
}

/* 1. Only Index page header fonts should be black */
body.home header .main-menu nav > ul > li > a {
    color: #000000 !important;
}

/* 2. Centre align text in get a quote, reduce width, decent space */
.header-1 .theme-btn.bg-red-2, .header-quote-btn {
    text-align: center !important;
    padding: 16px 30px 24px 30px !important;
    min-width: unset !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* 3. Sticky header on other pages maroon, reduce height 20% */
body:not(.home) .sticky {
    background-color: #58151c !important;
}
body:not(.home) .sticky .header-main {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Work Process Maroon Override */
.work-process-items.highlight-maroon .icon {
    background-color: rgba(255, 255, 255, 0) !important;
    border-color: rgba(255, 255, 255, 0) !important;
}
.work-process-items.highlight-maroon .icon i {
    color: #ffffff !important;
}

/* Work Process Maroon Override - Fill Card */
.work-process-items.highlight-maroon.active::after {
    background-color: #58151c !important;
    opacity: 1 !important;
}

/* Remove pricing section safely */
.pricing-section {
    display: none !important;
}

/* Project Gallery Navigation */
.project-gallery-nav {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(128, 0, 32, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 10;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.project-gallery-nav:hover {
    background: rgba(160, 26, 42, 0.95);
    transform: translateY(-2px);
}

.project-gallery-nav i {
    font-size: 11px;
}

/* Project Details Gallery */
.project-detail-gallery {
    position: relative;
    margin-bottom: 40px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.project-main-image {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}

.project-gallery-thumbnails {
    display: flex;
    gap: 10px;
    padding: 20px;
    background: #f8f9fa;
    overflow-x: auto;
}

.project-gallery-thumbnails img {
    width: 100px;
    height: 80px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 3px solid transparent;
}

.project-gallery-thumbnails img:hover,
.project-gallery-thumbnails img.active {
    border-color: #800020;
    transform: scale(1.05);
}

.project-gallery-nav-arrows {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    pointer-events: none;
}

.project-gallery-nav-arrows button {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(128, 0, 32, 0.9);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: all;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.project-gallery-nav-arrows button:hover {
    background: rgba(160, 26, 42, 0.95);
    transform: scale(1.1);
}

.project-gallery-nav-arrows button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.project-gallery-nav-arrows button:disabled:hover {
    transform: scale(1);
}

/* Hero Icon filled circle */
.hero-3 .hero-content .hero-button .icon-items .icon {
        width: 55px;
    height: 55px;
    background-color: transparent;
    text-align: center;
    line-height: 45px;
    color: #bd9e70;
    border: 5px solid rgba(166, 161, 130, 0.28);
    border-radius: 50%;
}


/* Service Image Border Radius */
.service-image.bg-cover {
    border-radius: 20px !important;
}

@media (max-width: 767px) {
    .header-top-section {
        display: none !important;
    }
}


/*new*/

.header-top-wrapper .top-right {
    margin-left: auto; 
    display: flex; 
    align-items: center; 
    gap: 80px;
}


.header-top-wrapper .top-right .contact-icons {
    margin-left: auto; 
}

@media (min-width: 992px) {
    .hero-3 .hero-content h1 .no-wrap-text {
        white-space: nowrap !important;
        font-size: 68px;
        font-weight: 300 !important;
    }
}

@media (max-width: 767px) {
    .hero-3 .hero-content h1 .no-wrap-text {
         font-weight: 300 !important;
        font-size: 32px;
      
    }

    .hero-3 .hero-content h1
 {
        margin-top: -172px !important;
    }
}

.cta-banner-wrapper-2 .theme-btn.bg-white {
    color: #bd9e70!important;
}

.cta-banner-wrapper-2 .theme-btn.bg-white:hover {
    background: #bd9e70!important;
    color: #ffffff!important;
}

.work-process-items {
    text-align: left !important;
}

.work-process-items h6,
.work-process-items h3,
.work-process-items p {
    text-align: left !important;
    margin-left: 0 !important;
}

.work-process-items .icon {
    text-align: left !important;
}

.contact-info-items h4,
.contact-info-items h6,
.contact-info-items a {
    text-transform: none !important;
} 

.contact-info-items h4,
.contact-info-items h6,
.contact-info-items a {
    font-size: 15px!important;
    letter-spacing: 0.3px;
}



.widget-categories ul li {
    display: flex;
    align-items: center;
   
}

.widget-categories ul li i {
    flex-shrink: 0;
}


/* 
   footer */


.footer-widgets-wrapper .row {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 80px !important;
    flex-wrap: nowrap !important;
    padding: 0 10px !important;        /* left/right space */
    max-width: 1600px !important;
    margin: 0 auto !important;
}


.footer-col:first-child {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;    
    flex: 0 0 1px !important;
    gap: 30px !important;
    text-align: center !important;     
}

.footer-logo {
    width: 230px !important;
    max-width: 100% !important;
    display: block !important;
    margin: 0 0 22px 0 !important;
}

/* Center social icons container */
.footer-social-icons {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 !important;
    width: 100% !important;
}

.footer-social-icons a {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all .3s ease !important;
}

.footer-social-icons a:hover {
    background: #bd9e70 !important;
}

/* services column */
.footer-services {
    flex: 0 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* quick links column */
.footer-col:last-child {
    flex: 0 1 auto !important;
    min-width: 270px !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

/* Headings */
.footer-widgets-wrapper .widget-head {
    margin-bottom: 30px !important;
}

.footer-widgets-wrapper .widget-head h3 {
    margin: 0 !important;
    padding: 0 !important;
}


.footer-services .list-items li,
.footer-col:last-child .list-items li {
    margin: 0 !important;
    padding: 0 !important;
}


.footer-services .list-items li a,
.footer-col:last-child .list-items li a {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
}

.footer-services .list-items li a i,
.footer-col:last-child .list-items li a i {
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    font-size: 12px !important;
}

.footer-bottom .footer-wrapper {
    padding-top: 25px !important;
}

/* 
   DESKTOP 
   */
@media (min-width: 992px) {
    /* services */
    .footer-services .list-items {
        display: grid !important;
        grid-template-columns: repeat(8, minmax(120px, 1fr)) !important;
        gap: 60px !important;
        width: 100% !important;
    }

    .footer-services .list-items li {
        white-space: nowrap !important;
    }

    /* Quick Links: 2 columns with equal gap */
    .footer-col:last-child .list-items {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        column-gap: 50px !important;
        row-gap: 12px !important;
        width: 100% !important;
    }
    
    .footer-col:last-child .list-items li {
        white-space: nowrap !important;
    }
}

/* 
   MOBILE 
    */
@media (max-width: 991px) {
    .footer-widgets-wrapper .row {
        flex-direction: column !important;
        align-items: center !important;
        gap: 40px !important;
        padding: 30px 20px !important;   
        max-width: 100% !important;
    }

    .footer-widgets-wrapper {
        padding: 30px 0 10px !important;
    }
    
    .footer-col:first-child,
    .footer-services,
    .footer-col:last-child {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        text-align: left !important;
    }

    .footer-col:first-child {
        gap: 20px !important;
        align-items: center !important;   
    }

    .footer-logo {
        margin: 0 auto !important;
    }

    .footer-social-icons {
        justify-content: center !important;
        margin-bottom: 10px !important;
        margin-top: -7px !important;
    }
    
    .single-footer-widget,
    .single-footer-widget *,
    .footer-services .list-items,
    .footer-col .list-items {
        text-align: left !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
    }

    .footer-services .list-items {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        column-gap: 20px !important;
        row-gap: 20px !important;
        width: 100% !important;
    }

    .footer-col:last-child .list-items {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        column-gap: 20px !important;
        row-gap: 20px !important;
        width: 100% !important;
    }

    .footer-services .list-items li,
    .footer-col .list-items li {
        white-space: normal !important;
        font-size: 14px !important;
    }

    .footer-bottom .footer-wrapper {
        text-align: center !important;
        gap: 15px !important;
        flex-direction: column !important;
    }

    .footer-widgets-wrapper .single-footer-widget .widget-head {
        margin-bottom: 20px !important;
    }
    
    .footer-widgets-wrapper.style-2 .single-footer-widget .list-items li i {
        margin-right: 5px !important;
    }
}

@media (min-width: 1200px) {
    .footer-widgets-wrapper .container {
        max-width: 1400px !important;
    }
}
/* =====================================================================
 *  BAW v2 — Mobile bottom nav, floating WhatsApp, contact action cards
 *  Mobile-only layout overhauls. Loaded sitewide; mobile bits gate on
 *  @media (max-width: 991px).
 * ================================================================== */

/* ---------- Floating WhatsApp ---------- */
.baw-floating-wa {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25D366;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    z-index: 9990;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
}
.baw-floating-wa:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
    color: #fff !important;
}
.baw-floating-wa::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: rgba(37, 211, 102, 0.35);
    z-index: -1;
    animation: bawWaPulse 2s infinite;
}
@keyframes bawWaPulse {
    0% { transform: scale(0.95); opacity: 0.7; }
    70% { transform: scale(1.25); opacity: 0; }
    100% { transform: scale(0.95); opacity: 0; }
}

/* ---------- Mobile bottom navigation ---------- */
.baw-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9995;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.08);
    padding-bottom: env(safe-area-inset-bottom);
}
.baw-bottom-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    height: 64px;
}
.baw-bottom-nav li {
    flex: 1;
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.baw-bottom-nav li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    color: #58151c;
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    width: 100%;
    height: 100%;
    transition: color 0.2s ease;
}
.baw-bottom-nav li a .icon {
    font-size: 20px;
    line-height: 1;
}
.baw-bottom-nav li a .label {
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.2px;
}
.baw-bottom-nav li.active a {
    color: #800020;
    font-weight: 700;
}
.baw-bottom-nav li.active a::before {
    content: "";
    position: absolute;
    top: 0;
    width: 28px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, #58151c, #a01a2a);
}
.baw-bottom-nav li { position: relative; }

/* Center raised pill — Call icon, brand maroon */
.baw-bottom-nav li.center a {
    position: relative;
    background: linear-gradient(135deg, #a01a2a 0%, #58151c 100%);
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-top: -28px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    border: 3px solid #fff;
    transition: transform 0.2s ease;
}
.baw-bottom-nav li.center a::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(160, 26, 42, 0.35) 0%, rgba(160, 26, 42, 0) 70%);
    z-index: -1;
    animation: bawCallPulse 2.4s ease-in-out infinite;
}
@keyframes bawCallPulse {
    0%, 100% { transform: scale(1);   opacity: 0.7; }
    50%      { transform: scale(1.18); opacity: 0;   }
}
.baw-bottom-nav li.center a:hover { transform: translateY(-2px); }
.baw-bottom-nav li.center a .icon { font-size: 22px; }
.baw-bottom-nav li.center a .label { display: none; }

/* Hide the floating WhatsApp on mobile (the bottom nav has its own) */
@media (max-width: 991.98px) {
    .baw-floating-wa { display: none !important; }
    body { padding-bottom: 72px; }
    body.home { padding-bottom: 72px; }
}

/* ---------- Contact action cards (replaces contact form) ---------- */
.baw-contact-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 40px 0;
}
@media (max-width: 768px) {
    .baw-contact-cards { grid-template-columns: 1fr; }
}
.baw-contact-card {
    background: #fff;
    border-radius: 20px;
    padding: 36px 24px;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}
.baw-contact-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
    color: inherit;
    text-decoration: none;
}
.baw-contact-card .baw-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
}
.baw-contact-card.call .baw-icon    { background: linear-gradient(135deg, #800020, #a01a2a); }
.baw-contact-card.email .baw-icon   { background: linear-gradient(135deg, #1a1a2e, #3a3a5e); }
.baw-contact-card.whatsapp .baw-icon{ background: linear-gradient(135deg, #25D366, #128C7E); }
.baw-contact-card h4 { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: #1a1a2e; }
.baw-contact-card p  { color: #6c757d; font-size: 14px; margin: 0 0 16px; }
.baw-contact-card .baw-action {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 50px;
    background: #58151c;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.2s ease;
}
.baw-contact-card:hover .baw-action { background: #800020; }
.baw-contact-card.whatsapp .baw-action { background: #25D366; }
.baw-contact-card.whatsapp:hover .baw-action { background: #128C7E; }

/* ---------- Mobile-first layout overhauls ---------- */
@media (max-width: 991.98px) {
    /* Tighter heading sizes on mobile */
    h1, .h1 { font-size: clamp(28px, 6vw, 36px) !important; line-height: 1.2; }
    h2, .h2 { font-size: clamp(22px, 5vw, 28px) !important; line-height: 1.25; }

    /* Hero: stack content, reduce slide height */
    .hero-1-section .swiper-slide { min-height: 520px !important; }
    .hero-1-content h1 { font-size: 30px !important; }
    .hero-1-content p  { font-size: 15px !important; }
    .hero-1-content .header-button .theme-btn { padding: 10px 22px !important; font-size: 14px !important; }

    /* Two-column service grid on mobile (instead of 1) */
    .single-service-style-1, .service-card { margin-bottom: 16px; }

    /* Section padding reduction */
    section, .section { padding-top: 50px !important; padding-bottom: 50px !important; }

    /* Footer center alignment and stacking */
    .footer-widgets-wrapper .footer-col { margin-bottom: 32px; text-align: center; }
    .footer-widgets-wrapper .footer-col .single-footer-widget { align-items: center; }
    .footer-widgets-wrapper .single-footer-widget .list-items { padding: 0; }

    /* Hide chunky desktop top bar on mobile */
    .header-top-section { display: none !important; }
}

@media (max-width: 575.98px) {
    /* Even tighter on phones */
    .hero-1-content h1 { font-size: 26px !important; }
    .container { padding-left: 18px !important; padding-right: 18px !important; }

    /* News / project grid: single column */
    .news-card, .project-card { width: 100% !important; }
}

/* ---------- Service-as-product hidden catalog page (GMC) ---------- */
.baw-service-catalog { display: none; }


/* Reusable section heading — used by the Clients (brand) section and
   the Testimonial section so page rhythm stays consistent.            */
.brand-heading { margin-bottom: 28px; }
.brand-heading .brand-title {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 8px;
    letter-spacing: -0.3px;
    position: relative;
    display: inline-block;
}
.brand-heading .brand-title::after {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    background: linear-gradient(90deg, #800020, #a01a2a);
    margin: 8px 0 0;
    border-radius: 2px;
}
.brand-heading .brand-subtitle {
    font-size: 14px;
    max-width: 560px;
    margin: 0;
    line-height: 1.5;
    text-align: left;
}
@media (max-width: 575.98px) {
    .brand-heading .brand-title { font-size: 22px; }
    .brand-heading .brand-subtitle { font-size: 13px; }
}

/* =====================================================================
 *  BAW v2 — CTA sections (homepage + inner-page)
 * ================================================================== */

.baw-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: rgba(128, 0, 32, 0.08);
    color: #800020;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.baw-eyebrow.light {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.baw-eyebrow i { font-size: 10px; }

/* ---------- Homepage CTA ---------- */
.baw-home-cta {
    padding: 80px 0;
    background: #f8f9fa;
}
.baw-home-cta-wrapper {
    background: #fff;
    border-radius: 28px;
    padding: 56px 48px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.04);
    overflow: hidden;
    position: relative;
}
.baw-home-cta-wrapper::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(128, 0, 32, 0.08) 0%, transparent 70%);
    pointer-events: none;
}
.baw-home-cta-content h2 {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    color: #1a1a2e;
    line-height: 1.2;
    margin: 0 0 18px;
    letter-spacing: -0.5px;
}
.baw-home-cta-content > p {
    color: #6c757d;
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 28px;
    max-width: 540px;
}
.baw-home-cta-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
    max-width: 420px;
}
.baw-home-cta-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 22px;
    border-radius: 14px;
    text-decoration: none;
    color: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: #1a1a2e;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.baw-home-cta-btn:hover {
    transform: translateX(4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    color: #fff;
    text-decoration: none;
}
.baw-home-cta-btn i {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.baw-home-cta-btn span { display: flex; flex-direction: column; line-height: 1.2; }
.baw-home-cta-btn small { font-size: 11px; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; }
.baw-home-cta-btn strong { font-size: 16px; font-weight: 700; margin-top: 2px; }
.baw-home-cta-btn.primary  { background: linear-gradient(135deg, #800020, #a01a2a); }
.baw-home-cta-btn.whatsapp { background: linear-gradient(135deg, #25D366, #128C7E); }
.baw-home-cta-btn.email    { background: linear-gradient(135deg, #1a1a2e, #3a3a5e); }

.baw-home-cta-trust {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}
.baw-home-cta-trust li {
    color: #495057;
    font-size: 13px;
    font-weight: 500;
}
.baw-home-cta-trust li i { color: #25D366; margin-right: 6px; }

.baw-home-cta-visual {
    position: relative;
    height: 100%;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 40px;
}
.baw-home-cta-photo {
    width: 100%;
    height: 420px;
    border-radius: 24px;
    background-size: cover;
    background-position: center;
    background-color: #58151c;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.14);
    position: relative;
    z-index: 1;
}
.baw-home-cta-photo::after {
    content: "";
    position: absolute;
    inset: 16px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    pointer-events: none;
}
.baw-home-cta-badge {
    position: absolute;
    top: 30px;
    right: -10px;
    background: #fff;
    border-radius: 18px;
    padding: 16px 22px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    text-align: center;
    z-index: 2;
}
.baw-home-cta-badge strong {
    display: block;
    font-size: 32px;
    color: #800020;
    font-weight: 800;
    line-height: 1;
}
.baw-home-cta-badge small {
    display: block;
    font-size: 11px;
    color: #6c757d;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.baw-home-cta-rating {
    position: absolute;
    bottom: 24px;
    left: 24px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 50px;
    padding: 10px 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
}
.baw-home-cta-rating i { color: #f5b800; font-size: 12px; }
.baw-home-cta-rating span { font-size: 12px; color: #1a1a2e; font-weight: 600; margin-left: 6px; }

@media (max-width: 991.98px) {
    .baw-home-cta-wrapper { padding: 40px 28px; }
    .baw-home-cta-visual { padding-left: 0; margin-top: 40px; min-height: auto; }
    .baw-home-cta-photo { height: 320px; }
}
@media (max-width: 575.98px) {
    .baw-home-cta { padding: 50px 0; }
    .baw-home-cta-wrapper { padding: 32px 20px; border-radius: 20px; }
    .baw-home-cta-btn { padding: 12px 16px; gap: 12px; }
    .baw-home-cta-btn i { width: 38px; height: 38px; font-size: 15px; }
    .baw-home-cta-btn strong { font-size: 14px; }
    .baw-home-cta-photo { height: 240px; }
    .baw-home-cta-badge { top: 16px; right: 0; padding: 12px 16px; }
    .baw-home-cta-badge strong { font-size: 24px; }
}

/* ---------- Inner-page CTA (replaces cta-banner-section-2) ---------- */
.baw-inner-cta {
    padding: 70px 0;
    position: relative;
}
.baw-inner-cta-wrapper {
    background: linear-gradient(135deg, #58151c 0%, #800020 50%, #a01a2a 100%);
    border-radius: 28px;
    padding: 60px 56px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}
.baw-inner-cta-shape {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    pointer-events: none;
}
.baw-inner-cta-shape-1 { width: 360px; height: 360px; top: -180px; right: -120px; }
.baw-inner-cta-shape-2 { width: 220px; height: 220px; bottom: -110px; left: 10%; background: rgba(255, 255, 255, 0.04); }

.baw-inner-cta-content { position: relative; z-index: 2; }
.baw-inner-cta-content h2 {
    color: #fff;
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 800;
    line-height: 1.2;
    margin: 0 0 14px;
    letter-spacing: -0.5px;
}
.baw-inner-cta-content > p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 28px;
    max-width: 600px;
}
.baw-inner-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.baw-inner-cta-actions .theme-btn {
    padding: 12px 26px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.baw-inner-cta-actions .theme-btn:hover { transform: translateY(-2px); }
.baw-inner-cta-actions .bg-white { background: #fff; color: #800020 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); }
.baw-inner-cta-actions .bg-white:hover { background: #fff; color: #800020 !important; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); }
.baw-btn-whatsapp { background: #25D366; color: #fff !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.17); }
.baw-btn-whatsapp:hover { background: #128C7E; color: #fff !important; }
.baw-btn-outline {
    background: transparent;
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, 0.45);
}
.baw-btn-outline:hover { background: rgba(255, 255, 255, 0.12); color: #fff !important; }

.baw-inner-cta-image {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.baw-inner-cta-image > img {
    width: 100%;
    height: 280px;
    max-width: 360px;
    object-fit: cover;
    border-radius: 18px;
    position: relative;
    z-index: 2;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.55);
}
.baw-inner-cta-circle {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    opacity: 0.5;
    animation: bawCtaCircleSpin 30s linear infinite;
}
.baw-inner-cta-circle img { max-width: 320px; height: auto; }
@keyframes bawCtaCircleSpin { to { transform: rotate(360deg); } }

@media (max-width: 991.98px) {
    .baw-inner-cta { padding: 50px 0; }
    .baw-inner-cta-wrapper { padding: 44px 28px; text-align: center; }
    .baw-inner-cta-actions { justify-content: center; }
    .baw-inner-cta-content > p { margin-left: auto; margin-right: auto; }
}
@media (max-width: 575.98px) {
    .baw-inner-cta-wrapper { padding: 36px 22px; border-radius: 20px; }
    .baw-inner-cta-actions .theme-btn { width: 100%; justify-content: center; }
}

/* RTL flips */
html[dir="rtl"] .baw-home-cta-btn:hover { transform: translateX(-4px); }
html[dir="rtl"] .baw-home-cta-trust li i { margin-right: 0; margin-left: 6px; }
html[dir="rtl"] .baw-home-cta-badge { right: auto; left: -10px; }
html[dir="rtl"] .baw-home-cta-rating { left: auto; right: 24px; }
html[dir="rtl"] .baw-home-cta-visual { padding-left: 0; padding-right: 40px; }
html[dir="rtl"] .baw-inner-cta-shape-1 { right: auto; left: -120px; }
html[dir="rtl"] .baw-inner-cta-shape-2 { left: auto; right: 10%; }

/* =====================================================================
 *  HOMEPAGE COMPACT CTA — replaces the tall .baw-home-cta block.
 *  ~50% shorter; minimalist line icons.
 * ================================================================== */
/* Modern minimalist CTA — white surface, brand-accent only, channel cards */
.baw-home-cta-compact {
    padding: 90px 0;
    background: #fff;
    position: relative;
}
.baw-home-cta-compact::before {
    /* Subtle dot-grid texture top-right for visual interest */
    content: "";
    position: absolute;
    top: 24px;
    right: 24px;
    width: 120px;
    height: 120px;
    background-image: radial-gradient(rgba(128, 0, 32, 0.08) 1px, transparent 1px);
    background-size: 14px 14px;
    pointer-events: none;
    opacity: 0.6;
}
.baw-home-cta-compact-wrapper {
    background: #fff;
    border: 1px solid rgba(128, 0, 32, 0.08);
    border-radius: 22px;
    padding: 48px 52px;
    display: flex;
    align-items: center;
    gap: 48px;
    flex-wrap: wrap;
    box-shadow: 0 18px 50px -28px rgba(0, 0, 0, 0.09);
    position: relative;
    z-index: 1;
}
.baw-home-cta-compact-text {
    flex: 1 1 320px;
    min-width: 280px;
}
.baw-cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 11.5px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: #800020;
    font-weight: 500;
    margin-bottom: 14px;
}
.baw-cta-eyebrow::before {
    content: "";
    width: 28px;
    height: 1.5px;
    background: #800020;
    display: inline-block;
}
.baw-home-cta-compact-text h2 {
    color: #1a1a1a;
    font-size: 30px;
    line-height: 1.2;
    margin: 0 0 10px;
    font-weight: 500;
    letter-spacing: -0.4px;
}
.baw-home-cta-compact-text p {
    color: #6e6e6e;
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    max-width: 420px;
}
.baw-home-cta-compact-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    flex: 1 1 540px;
    justify-content: flex-end;
}
.baw-cta-mini {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 12px 22px 12px 14px;
    background: #fff;
    border: 1px solid rgba(128, 0, 32, 0.14);
    color: #1a1a1a;
    border-radius: 999px;                /* full-pill */
    text-decoration: none;
    transition: background .3s ease, transform .25s ease,
                border-color .3s ease, box-shadow .3s ease, color .3s ease;
    position: relative;
    min-width: 0;
}
.baw-cta-mini:hover {
    background: #800020;
    border-color: #800020;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.18);
}
.baw-cta-mini-ico {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: rgba(128, 0, 32, 0.06);
    border: 1px solid rgba(128, 0, 32, 0.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #800020;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.baw-cta-mini:hover .baw-cta-mini-ico {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
}
.baw-cta-mini-ico svg { display: block; }
.baw-cta-mini-txt {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
    padding-right: 2px;
}
.baw-cta-mini-txt small {
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 500;
    transition: color .3s ease;
}
.baw-cta-mini:hover .baw-cta-mini-txt small { color: rgba(255, 255, 255, 0.68); }
.baw-cta-mini-txt strong {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    margin-top: 4px;
    white-space: nowrap;
    transition: color .3s ease;
}
.baw-cta-mini:hover .baw-cta-mini-txt strong { color: #fff; }
.baw-cta-mini-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #800020;
    margin-left: 2px;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .25s ease, transform .25s ease, color .3s ease;
}
.baw-cta-mini:hover .baw-cta-mini-arrow {
    opacity: 1;
    transform: translateX(0);
    color: #fff;
}

@media (max-width: 991.98px) {
    .baw-home-cta-compact { padding: 60px 0; }
    .baw-home-cta-compact::before { display: none; }
    .baw-home-cta-compact-wrapper {
        padding: 36px 28px;
        gap: 28px;
        flex-direction: column;
        align-items: stretch;
    }
    .baw-home-cta-compact-text {
        flex: 1 1 100%;
        text-align: center;
    }
    .baw-home-cta-compact-text p { margin-left: auto; margin-right: auto; }
    .baw-cta-eyebrow { justify-content: center; }
    .baw-home-cta-compact-actions {
        justify-content: center;
        flex: 1 1 100%;
    }
    .baw-home-cta-compact-text h2 { font-size: 24px; }
}
/* Mobile / tablet — collapse the three CTA buttons to bare circular
   icon-only chips. The phone number / handle / email address are
   removed so the section reads as a clean, elegant icon row.        */
@media (max-width: 767.98px) {
    .baw-home-cta-compact-actions {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        gap: 16px !important;
    }
    .baw-cta-mini {
        width: 56px !important;
        height: 56px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        border: 1px solid rgba(128, 0, 32, 0.18) !important;
        background: #fff !important;
        flex-shrink: 0;
        justify-content: center !important;
        gap: 0 !important;
    }
    .baw-cta-mini:hover {
        background: #800020 !important;
        border-color: #800020 !important;
        transform: translateY(-2px);
    }
    .baw-cta-mini-txt,
    .baw-cta-mini-arrow {
        display: none !important;
    }
    .baw-cta-mini-ico {
        width: auto !important;
        height: auto !important;
        background: transparent !important;
        color: #800020 !important;
        margin: 0 !important;
    }
    .baw-cta-mini:hover .baw-cta-mini-ico {
        background: transparent !important;
        color: #fff !important;
    }
    .baw-cta-mini-ico svg {
        width: 24px;
        height: 24px;
    }
}
@media (max-width: 575.98px) {
    .baw-home-cta-compact { padding: 48px 0; }
    .baw-home-cta-compact-wrapper {
        padding: 28px 20px;
        border-radius: 18px;
        gap: 22px;
    }
    .baw-home-cta-compact-text h2 { font-size: 22px; }
    .baw-cta-mini { width: 52px !important; height: 52px !important; }
    .baw-cta-mini-ico svg { width: 22px; height: 22px; }
}

/* RTL */
html[dir="rtl"] .baw-home-cta-compact-actions { justify-content: flex-start; }
html[dir="rtl"] .baw-home-cta-compact-text { text-align: right; }
html[dir="rtl"] .baw-cta-mini-txt strong { direction: ltr; }
@media (max-width: 991.98px) {
    html[dir="rtl"] .baw-home-cta-compact-text { text-align: center; }
}

/* =====================================================================
 *  FOOTER WhatsApp left-CTA pill (replaces the standalone wa icon)
 * ================================================================== */
.footer-wa-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: #25D366;
    color: #fff !important;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.footer-wa-cta i { font-size: 20px; }
.footer-wa-cta:hover {
    background: #128C7E;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.18);
}

/* =====================================================================
 *  INNER-PAGE CTA — sits flush above the footer with a comfortable gap.
 *  (Earlier overlap-into-footer effect removed because it produced an
 *  empty black band on pages without a CTA.)
 * ================================================================== */
.baw-inner-cta { position: relative; z-index: 5; padding: 70px 0; margin-bottom: 0; }
.baw-inner-cta-wrapper { position: relative; z-index: 6; }
.footer-section { position: relative; z-index: 1; padding-top: 60px; }
@media (max-width: 991.98px) {
    .baw-inner-cta { padding: 50px 0; }
    .footer-section { padding-top: 50px; }
}

/* =====================================================================
 *  RTL — full breadcrumb + page-nav + content flips
 * ================================================================== */
html[dir="rtl"] .breadcrumb-items { display: flex; flex-wrap: wrap; justify-content: flex-end; padding: 0; }
html[dir="rtl"] .breadcrumb-items li { direction: rtl; }
html[dir="rtl"] .breadcrumb-items li i.fa-chevron-right:before { content: "\f053"; } /* chevron-left */
html[dir="rtl"] .page-heading { text-align: left; }
html[dir="rtl"] .page-heading h1, html[dir="rtl"] .page-heading .breadcrumb-items { text-align: left; }

/* Page nav (pagination) — flip arrow direction */
html[dir="rtl"] .page-nav-wrap ul { direction: ltr; display: inline-flex; }

/* News / project / service cards — text alignment */
html[dir="rtl"] .news-card-items .news-content,
html[dir="rtl"] .news-card-items h3,
html[dir="rtl"] .news-card-items p,
html[dir="rtl"] .portfolio-content,
html[dir="rtl"] .service-box-items,
html[dir="rtl"] .service-details-items,
html[dir="rtl"] .details-content,
html[dir="rtl"] .single-service-style-1,
html[dir="rtl"] .about-content,
html[dir="rtl"] .about-1-content,
html[dir="rtl"] .single-process-items { text-align: right; direction: rtl; }

/* Headings flip — but never reverse Latin chars, just keep in RTL flow */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] h6 { unicode-bidi: plaintext; }

/* Splitting.js reverses character direction — disable on AR */
html[dir="rtl"] .splt-txt .word { direction: rtl; unicode-bidi: plaintext; }
html[dir="rtl"] .splt-txt .char { display: inline; }
html[dir="rtl"] [data-splitting] { direction: rtl; unicode-bidi: plaintext; }

/* News card meta — reorder icon/text */
html[dir="rtl"] .news-card-items ul { padding: 0; }
html[dir="rtl"] .news-card-items ul li i { margin-right: 0; margin-left: 6px; }

/* Footer columns: reverse so logo column is on right */
html[dir="rtl"] .footer-section .shape-img { right: auto; left: 0; transform: scaleX(-1); }
html[dir="rtl"] .footer-widgets-wrapper .row { flex-direction: row-reverse; }

/* Headings inside cards */
html[dir="rtl"] .news-card-items h3 a, html[dir="rtl"] .portfolio-content h3 a { display: inline-block; }

/* Inner CTA buttons stay LTR-flow for icon+text spacing inside Arabic line */
html[dir="rtl"] .baw-inner-cta-actions { flex-wrap: wrap; }

/* Service detail sidebar list */
html[dir="rtl"] .widget-categories ul li { text-align: right; }
html[dir="rtl"] .widget-categories ul li i { margin-right: 0; margin-left: 12px; }

/* About-area square image card alignment */
html[dir="rtl"] .about-image-1 { direction: rtl; }

/* Footer contact column tidy-up */
.footer-contact-list { list-style: none; padding: 0; margin: 0; }
.footer-contact-list li {
    display: flex;
    align-items: center;
    color: #cfcfcf;
    font-size: 14px;
    margin-bottom: 12px;
    line-height: 1.5;
}
.footer-contact-list li i { color: #bd9e70; flex-shrink: 0; }
.footer-contact-list a:hover { color: #bd9e70 !important; }

/* Header Get In Touch button matched to hero Portfolio button size */
.header-cta-btn {
    padding: 22px 40px !important;
    border-radius: 50px !important;
    font-weight: 600;
    line-height: 1.3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
@media (max-width: 991.98px) {
    .header-cta-btn { padding: 16px 30px !important; font-size: 14px; }
}

/* =====================================================================
 *  FOOTER v3 — Bootstrap 4-column grid with proper spacing.
 *  Overrides the legacy flex-nowrap / grid rules above.
 * ================================================================== */
.footer-section .container { padding-left: 40px; padding-right: 40px; max-width: 1400px; }

.footer-widgets-wrapper .row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
}

/* Each column = quarter width, no overlapping */
.footer-widgets-wrapper .row > [class*="col-"] {
    padding-left: 12px !important;
    padding-right: 12px !important;
    flex: 0 0 auto !important;
}
.footer-widgets-wrapper .row > .col-lg-3 { width: 25% !important; }

/* Reset legacy single-list overrides (we want plain stacked lists) */
.footer-services .list-items,
.footer-col:last-child .list-items {
    display: block !important;
    grid-template-columns: none !important;
    column-gap: 0 !important;
    row-gap: 0 !important;
}
.footer-widgets-wrapper .single-footer-widget .list-items li {
    display: block !important;
    margin-bottom: 12px !important;
    white-space: normal !important;
}
.footer-widgets-wrapper .single-footer-widget .list-items li a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    line-height: 1.5 !important;
    color: #cfcfcf !important;
    transition: color .25s ease !important;
}
.footer-widgets-wrapper .single-footer-widget .list-items li a:hover { color: #bd9e70 !important; }
.footer-widgets-wrapper .single-footer-widget .list-items li a i {
    font-size: 11px !important;
    color: #bd9e70 !important;
    margin-top: 0 !important;
}

/* Logo column — left-aligned text */
.footer-section .col-lg-3:first-child .single-footer-widget {
    text-align: left;
}
.footer-section .col-lg-3:first-child .footer-logo {
    width: 160px !important;
    margin: 0 0 20px 0 !important;
}

/* Tablet and below — stack to 2 cols then 1 col */
@media (max-width: 991.98px) {
    .footer-widgets-wrapper .row > .col-lg-3 { width: 50% !important; margin-bottom: 30px; }
    .footer-section .container { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 575.98px) {
    .footer-widgets-wrapper .row > .col-lg-3 { width: 100% !important; }
}

/* =====================================================================
 *  FOOTER v4 — definitive override. Kill legacy multi-col grid + nowrap.
 *  Use Bootstrap row/col with explicit widths, gaps, and no wrap.
 * ================================================================== */

/* Container with breathing room on both sides */
.footer-section .container,
.footer-bottom .container {
    max-width: 1320px !important;
    padding-left: 60px !important;
    padding-right: 60px !important;
}

/* Row: standard Bootstrap flex, no nowrap, even spacing */
.footer-section .footer-widgets-wrapper .row {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 -16px !important;
    max-width: none !important;
}

/* Each column = 25%, with consistent inner gutter */
.footer-section .footer-widgets-wrapper .row > [class*="col-"] {
    flex: 0 0 25% !important;
    max-width: 25% !important;
    width: 25% !important;
    padding: 0 16px !important;
    margin: 0 !important;
    min-width: 0 !important;
}

/* Single-list columns: stack vertically, NO grid, NO multi-col */
.footer-section .single-footer-widget .list-items,
.footer-section .footer-contact-list {
    display: block !important;
    grid-template-columns: none !important;
    column-count: 1 !important;
    columns: auto !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.footer-section .single-footer-widget .list-items li,
.footer-section .footer-contact-list li {
    display: block !important;
    white-space: normal !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    line-height: 1.5 !important;
}

.footer-section .single-footer-widget .list-items li a {
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    color: #cfcfcf !important;
    font-size: 15px !important;
    text-decoration: none !important;
    line-height: 1.45 !important;
    padding-left: 0 !important;
    transition: color .25s ease !important;
}
.footer-section .single-footer-widget .list-items li a::before { display: none !important; }
.footer-section .single-footer-widget .list-items li a:hover {
    color: #bd9e70 !important;
    padding-left: 0 !important;
}
.footer-section .single-footer-widget .list-items li a i {
    color: #bd9e70 !important;
    font-size: 11px !important;
    margin-top: 6px !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
}

/* Headings: consistent size, decent gap below */
.footer-section .single-footer-widget .widget-head {
    margin-bottom: 26px !important;
}
.footer-section .single-footer-widget .widget-head h3 {
    font-size: 22px !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Logo column: left-aligned, large prominent logo */
.footer-section .row > .col-lg-3:first-child .single-footer-widget {
    text-align: left !important;
    align-items: flex-start !important;
}
.footer-section .footer-logo,
.footer-section .row > .col-lg-3:first-child .widget-head img {
    width: 230px !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 240px !important;
    object-fit: contain !important;
    margin: 0 0 22px 0 !important;
    display: block !important;
}
.footer-section .row > .col-lg-3:first-child .widget-head { margin-bottom: 0 !important; }
.footer-section .row > .col-lg-3:first-child .top-right { width: 100%; margin-top: 8px; }
.footer-section .row > .col-lg-3:first-child .contact-icons {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    margin-top: 18px !important;
    flex-direction: column !important;
    gap: 14px !important;
}
.footer-section .row > .col-lg-3:first-child .footer-social-icons {
    justify-content: flex-start !important;
    width: auto !important;
    display: flex !important;
    gap: 10px !important;
}

/* Contact column: phone / email / address — no heading, icons inline */
.footer-section .footer-contact-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    color: #cfcfcf !important;
    font-size: 15px !important;
}
.footer-section .footer-contact-list li i {
    color: #bd9e70 !important;
    font-size: 16px !important;
    margin-top: 4px !important;
    flex-shrink: 0 !important;
    width: 18px !important;
    text-align: center !important;
}
.footer-section .footer-contact-list li a,
.footer-section .footer-contact-list li span {
    color: #cfcfcf !important;
    text-decoration: none !important;
    line-height: 1.55 !important;
    word-break: break-word !important;
}
.footer-section .footer-contact-list li a:hover { color: #bd9e70 !important; }

/* Contact column has its own heading now — no extra top padding needed */
.footer-section .footer-contact-col .single-footer-widget { padding-top: 0 !important; }

/* Tablet: 2 columns */
@media (max-width: 991.98px) {
    .footer-section .container { padding-left: 30px !important; padding-right: 30px !important; }
    .footer-section .footer-widgets-wrapper .row > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        margin-bottom: 36px !important;
    }
    .footer-section .footer-contact-col .single-footer-widget { padding-top: 0 !important; }
}

/* Mobile: 1 column */
@media (max-width: 575.98px) {
    .footer-section .container { padding-left: 20px !important; padding-right: 20px !important; }
    .footer-section .footer-widgets-wrapper .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* =====================================================================
 *  IMAGE LOCK-DOWN — fixed display dimensions per use case so uploads of
 *  arbitrary sizes never break the layout. Uses object-fit to crop/contain
 *  cleanly without distortion.
 * ================================================================== */

/* ---------- Brand carousel (logos): 140x140, contain so logos aren't cropped ---------- */
.brand-section .swiper-slide,
.brand-section .brand-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.brand-section .brand-image {
    width: 140px !important;
    height: 140px !important;
    margin: 0 auto !important;
    padding: 12px !important;
    background: transparent;
}
.brand-section .brand-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 140px !important;
    max-height: 140px !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
}

/* ---------- Hero slider: square 1:1 aspect ---------- */
.hero-slider .hero-image,
.hero-1-section .hero-image {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    border-radius: 12px;
}
.hero-slider .hero-image img,
.hero-1-section .hero-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}
.hero-slider .swiper-slide,
.hero-1-section .swiper-slide { height: auto !important; }

/* ---------- News card image: fixed 4:3, cover ---------- */
.news-card-items .news-image {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    overflow: hidden;
}
.news-card-items .news-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* ---------- News details featured image ---------- */
.news-details-section img,
.news-details-image img,
.single-news-details img.feature-img,
.blog-details img.wp-post-image {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    object-position: center;
    border-radius: 16px;
    display: block;
}

/* ---------- Project / portfolio cards: fixed 3:4 portrait ---------- */
.portfolio-section .portfolio-image,
.portfolio-section .portfolio-items .portfolio-image {
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
    border-radius: 14px;
}
.portfolio-section .portfolio-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* ---------- Service card image / icon (cards only — NOT the homepage
   right-side full-bleed panel under .service-section, which keeps its
   original edge-to-edge tall layout) ---------- */
.service-box-items .service-image,
.single-service-style-1 .service-image {
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 12px;
}
.service-box-items .service-image img,
.single-service-style-1 .service-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* ---------- Service-details hero image ---------- */
.service-details-section .service-image,
.service-details-items .service-image {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    border-radius: 16px;
    margin-bottom: 24px;
}
.service-details-section .service-image img,
.service-details-items .service-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* ---------- About page images ---------- */
.about-image-1,
.about-image-1 img,
.about-section .about-image-1 {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 12px;
}
.about-image-1 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
}
.about-image-2 {
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 12px;
    overflow: hidden;
}

/* ---------- Testimonial section: kept at the theme's original layout. ---------- */

/* ---------- Team member card ---------- */
.team-image,
.single-team-items .team-image {
    width: 100% !important;
    aspect-ratio: 3 / 4 !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 14px;
    overflow: hidden;
}

/* ---------- Pricing card image ---------- */
.pricing-image {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    border-radius: 12px;
}
.pricing-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* ---------- Project gallery thumbnails (project-details page) ---------- */
.project-gallery-image,
.project-gallery img {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 10px;
    display: block;
}

/* ---------- Inner CTA visual (already capped) ---------- */
.baw-inner-cta-image > img {
    width: 100% !important;
    height: 280px !important;
    max-width: 360px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 18px;
}

/* ---------- Sidebar widget BG image ---------- */
.single-sidebar-widget.bg-image {
    width: 100%;
    aspect-ratio: 4 / 5;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 14px;
    overflow: hidden;
}

/* ---------- Breadcrumb / hero banner ---------- */
.breadcrumb-wrapper {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* ---------- Footer logo (large, prominent) ---------- */
.footer-logo,
.footer-section .footer-logo {
    width: 230px !important;
    height: auto !important;
    max-height: 240px !important;
    object-fit: contain !important;
    display: block;
}

/* ---------- Responsive shrinking for brand carousel on mobile ---------- */
@media (max-width: 575.98px) {
    .brand-section .brand-image {
        width: 110px !important;
        height: 110px !important;
        max-width: 110px !important;
        max-height: 110px !important;
    }
}

/* =====================================================================
 *  FOOTER v6 — CSS Grid: 4 equal tracks with truly equal gaps.
 *  Logo column is fully centered (logo + description + icons).
 * ================================================================== */

.footer-section .container {
    max-width: 1320px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Equal left/right padding inside the wrapper */
.footer-section .footer-widgets-wrapper {
    padding-left: 80px !important;
    padding-right: 80px !important;
}

/* CSS Grid guarantees 4 equal-width tracks with equal gaps */
.footer-section .footer-widgets-wrapper .row {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    column-gap: 60px !important;
    row-gap: 36px !important;
    align-items: start !important;
    margin: 0 !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
}
.footer-section .footer-widgets-wrapper .row > [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: initial !important;
}

/* All column headings sit on the same baseline */
.footer-section .single-footer-widget .widget-head {
    margin-bottom: 22px !important;
    min-height: 30px;
}

/* ----- LOGO COLUMN: everything centered horizontally ----- */
.footer-section .row > [class*="col-"]:first-child .single-footer-widget {
    text-align: center !important;
    align-items: center !important;
    display: flex !important;
    flex-direction: column !important;
}
.footer-section .row > [class*="col-"]:first-child .footer-logo,
.footer-section .row > [class*="col-"]:first-child .widget-head img {
    margin: 0 auto 22px !important;
    display: block !important;
}
.footer-section .row > [class*="col-"]:first-child p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 260px !important;
}
.footer-section .row > [class*="col-"]:first-child .top-right {
    width: 100% !important;
    margin-top: 18px !important;
    display: flex !important;
    justify-content: center !important;
}
.footer-section .row > [class*="col-"]:first-child .contact-icons {
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: auto !important;
}
.footer-section .row > [class*="col-"]:first-child .footer-social-icons {
    justify-content: center !important;
    width: auto !important;
    display: flex !important;
    gap: 12px !important;
}

/* Tablet: 2 x 2 grid */
@media (max-width: 991.98px) {
    .footer-section .footer-widgets-wrapper {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
    .footer-section .footer-widgets-wrapper .row {
        grid-template-columns: repeat(2, 1fr) !important;
        column-gap: 40px !important;
        row-gap: 40px !important;
    }
}
/* Mobile: single column */
@media (max-width: 575.98px) {
    .footer-section .footer-widgets-wrapper {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    .footer-section .footer-widgets-wrapper .row {
        grid-template-columns: 1fr !important;
        row-gap: 36px !important;
    }
}

/* =====================================================================
 *  GLOBAL TYPOGRAPHY — neutral, neat, modern. NO bold weights anywhere.
 *  Loads Inter (variable font) and caps weights at 500 for emphasis.
 * ================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');

html, body,
button, input, select, textarea {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

/* Headings: medium weight only */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
strong, b, .fw-bold, .fw-bolder, .fw-semibold {
    font-weight: 500 !important;
}

/* Anywhere the theme used 600/700/800/900 — flatten it */
[style*="font-weight: 600"],
[style*="font-weight: 700"],
[style*="font-weight: 800"],
[style*="font-weight: 900"],
[style*="font-weight:600"],
[style*="font-weight:700"],
[style*="font-weight:800"],
[style*="font-weight:900"] {
    font-weight: 500 !important;
}

/* Buttons: medium weight, no all-caps shouting */
.theme-btn, .btn, .baw-cta-mini,
.header-cta-btn, .portfolio-hero-btn,
.baw-home-cta-btn, .footer-wa-cta {
    font-weight: 500 !important;
}

/* =====================================================================
 *  HERO SECTION — let the rotated square image extend fully without being
 *  clipped by `.fix { overflow:hidden }`. Adds breathing room top + bottom.
 * ================================================================== */
.hero-section.hero-3.fix,
section.hero-section.hero-3 {
    overflow: visible !important;
    padding-bottom: 220px !important;
}
/* On smaller screens the slider isn't rotated — drop the extra padding */
@media (max-width: 1199px) {
    .hero-section.hero-3.fix,
    section.hero-section.hero-3 {
        padding-bottom: 80px !important;
    }
}
@media (max-width: 991px) {
    .hero-section.hero-3.fix,
    section.hero-section.hero-3 {
        padding-bottom: 60px !important;
    }
}

/* Make sure the row's image column has enough room for the diamond's
   downward-pointing corner */
.hero-3 .hero-slider-items {
    padding-bottom: 60px;
}
@media (max-width: 1199px) {
    .hero-3 .hero-slider-items { padding-bottom: 0; }
}

/* =====================================================================
 *  GLOBAL ZOOM — match the 90% browser-zoom visual at default 100%.
 *  Scales the whole layout down by 10%, keeping pixel-perfect proportions.
 * ================================================================== */
html { zoom: 0.9; }
@supports not (zoom: 1) {
    /* Firefox <126 fallback: visual scale via transform */
    body {
        transform: scale(0.9);
        transform-origin: top center;
        width: 111.11%;
        margin-left: -5.55%;
    }
}

/* =====================================================================
 *  CONTACT PAGE — proper vertical breathing room above and below the
 *  map+contact-info section.
 * ================================================================== */
.contact-map-spaced {
    padding-top: 90px !important;
    padding-bottom: 90px !important;
}
@media (max-width: 991.98px) {
    .contact-map-spaced { padding-top: 60px !important; padding-bottom: 60px !important; }
}
@media (max-width: 575.98px) {
    .contact-map-spaced { padding-top: 40px !important; padding-bottom: 40px !important; }
}

/* Contact page — rounded corners on the map + contact-info card */
.contact-map-spaced .contact-info-wrapper {
    border-radius: 20px !important;
    overflow: hidden !important;
}
.contact-map-spaced .contact-info-wrapper .google-map,
.contact-map-spaced .contact-info-wrapper .google-map iframe {
    border-radius: 0 !important;
}

/* =====================================================================
 *  WOW.js — when ScrollSmoother is killed, wow's "visibility: hidden until
 *  scrolled into view" trick can leave content invisible. Force-show every
 *  .wow element. Animations still play via their animation-name.
 * ================================================================== */
.wow,
.fadeIn, .fadeInUp, .fadeInDown, .fadeInLeft, .fadeInRight {
    visibility: visible !important;
    opacity: 1 !important;
}

/* =====================================================================
 *  HEADER — transparent on every inner page (not the homepage).
 *  Floats over the breadcrumb hero so the page background never shows
 *  through. Sticky state still goes maroon for legibility.
 * ================================================================== */
body.inner-page header {
    position: absolute !important;
    top: 0; left: 0; right: 0;
    z-index: 99;
    background: transparent !important;
}
body.inner-page header #header-sticky,
body.inner-page header .header-1 {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}
/* When sticky kicks in we pin to the top in fixed position with maroon bg */
body.inner-page header #header-sticky.sticky,
body.inner-page header .header-1.sticky,
body.inner-page #header-sticky.sticky,
body.inner-page .header-1.sticky {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    background-color: #58151c !important;
    background: #58151c !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
    z-index: 999;
}
/* Breadcrumb hero on inner pages should extend upward under the
   transparent header so there's no white strip behind the nav */
body.inner-page .breadcrumb-wrapper {
    margin-top: 0 !important;
    padding-top: 220px !important;
}
@media (max-width: 991px) {
    body.inner-page .breadcrumb-wrapper { padding-top: 160px !important; }
}

/* =====================================================================
 *  SERVICES CATALOG — page used as the GMC product catalog landing.
 *  Clean, product-card aesthetic that matches the rest of the site.
 * ================================================================== */
.catalog-section { background: #f7f7f9; }
.catalog-intro h6 {
    color: #800020;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 13px;
    margin-bottom: 8px;
}
.catalog-intro h2 {
    color: #1a1a2e;
    font-size: 36px;
    line-height: 1.25;
    margin-bottom: 12px;
}
.catalog-intro p {
    max-width: 680px;
    margin: 0 auto;
    color: #54595f;
    line-height: 1.65;
}

.catalog-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 24px -10px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.04);
}
.catalog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.14);
}
.catalog-card-img {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f1f3f5;
}
.catalog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}
.catalog-card:hover .catalog-card-img img { transform: scale(1.04); }
.catalog-card-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #800020;
    color: #fff;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 12px;
    letter-spacing: 0.4px;
    box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.18);
}

.catalog-card-body {
    padding: 22px 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}
.catalog-card-title {
    font-size: 19px;
    color: #1a1a2e;
    margin: 0;
    line-height: 1.3;
}
.catalog-card-desc {
    color: #6c757d;
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
    min-height: 44px;
}

.catalog-card-price {
    display: flex;
    flex-direction: column;
    padding: 14px 16px;
    background: #f7f7f9;
    border-radius: 12px;
    border-left: 3px solid #800020;
}
.catalog-card-price .price-label {
    font-size: 11px;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}
.catalog-card-price .price-value {
    font-size: 26px;
    color: #800020;
    line-height: 1.1;
}
.catalog-card-price .price-curr {
    font-size: 14px;
    color: #6c757d;
    margin-left: 4px;
}

.catalog-card-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}
.catalog-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.25s ease;
    border: 1px solid transparent;
}
.catalog-btn-primary {
    flex: 1;
    background: #25D366;
    color: #fff;
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.18);
}
.catalog-btn-primary:hover {
    background: #128C7E;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -6px rgba(0, 0, 0, 0.18);
}
.catalog-btn-icon {
    width: 44px;
    height: 44px;
    background: #fff;
    color: #800020;
    border-color: #e5dcde;
    flex-shrink: 0;
    padding: 0;
}
.catalog-btn-icon:hover {
    background: #800020;
    color: #fff;
    border-color: #800020;
}

.catalog-card-link {
    margin-top: 4px;
    font-size: 13px;
    color: #800020;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.25s ease;
}
.catalog-card-link:hover { gap: 10px; color: #a01a2a; }

@media (max-width: 575.98px) {
    .catalog-intro h2 { font-size: 26px; }
}

/* Hero eyebrow — small uppercase tagline above main H1 */
.hero-3 .hero-content .hero-eyebrow {
    display: inline-block;
    color: #800020;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 14px;
    padding: 6px 14px;
    background: rgba(128, 0, 32, 0.08);
    border-radius: 30px;
    border: 1px solid rgba(128, 0, 32, 0.18);
}
@media (max-width: 575.98px) {
    .hero-3 .hero-content .hero-eyebrow { font-size: 11px; letter-spacing: 2px; padding: 5px 12px; }
}

/* =====================================================================
 *  MOBILE OPTIMIZATION LAYER — phone-first polish for ≤991px screens.
 *  Authored as a single, opinionated pass over every visual surface:
 *  fixes zoom, padding, typography, tap targets, overflow, and bottom-
 *  nav clearance. Loaded last so it wins specificity battles cleanly.
 * ================================================================== */

/* 1. Disable global zoom on phones — 0.9 scale makes text feel tiny on
 *    a 360-390px viewport. Native 100% is best for mobile readability.   */
@media (max-width: 767px) {
    html { zoom: 1 !important; }
    @supports not (zoom: 1) {
        body {
            transform: none !important;
            width: 100% !important;
            margin-left: 0 !important;
        }
    }
}

/* 2. Prevent any horizontal scroll on every phone/tablet                */
@media (max-width: 991.98px) {
    html, body { overflow-x: hidden !important; max-width: 100vw; }
    img { max-width: 100%; height: auto; }
}

/* 3. Section-padding — phones recover vertical screen real estate       */
@media (max-width: 767px) {
    .section-padding,
    section.section-padding { padding: 60px 0 !important; }
}
@media (max-width: 480px) {
    .section-padding,
    section.section-padding { padding: 46px 0 !important; }
}

/* 4. Container side-padding — tighter on small screens                  */
@media (max-width: 575px) {
    .container, .container-fluid {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

/* 5. Body bottom padding — clear the fixed bottom-nav + iOS safe area   */
@media (max-width: 991.98px) {
    body { padding-bottom: calc(68px + env(safe-area-inset-bottom)) !important; }
}

/* 6. HERO — phone-first proportions for the homepage hero               */
@media (max-width: 767px) {
    .hero-section.hero-3 {
        padding: 24px 0 36px !important;
        min-height: auto !important;
    }
    .hero-section.hero-3 .hero-content {
        margin-top: 0 !important;
        text-align: center;
    }
    .hero-section.hero-3 .hero-content h1 {
        font-size: 32px !important;
        line-height: 1.18 !important;
        margin-bottom: 14px !important;
    }
    .hero-section.hero-3 .hero-content h1 br { display: none; }
    .hero-section.hero-3 .hero-content p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin-bottom: 22px !important;
    }
    .hero-section.hero-3 .hero-button {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 14px !important;
    }
    .hero-section.hero-3 .hero-button .portfolio-hero-btn,
    .hero-section.hero-3 .hero-button .theme-btn {
        width: 100% !important;
        max-width: 280px !important;
        justify-content: center !important;
        padding: 13px 22px !important;
    }
    .hero-section.hero-3 .hero-button .icon-items {
        gap: 10px !important;
        justify-content: center !important;
    }
    .hero-section.hero-3 .hero-button .icon-items h4,
    .hero-section.hero-3 .hero-button .icon-items h4 a {
        font-size: 16px !important;
    }
    .hero-section.hero-3 .hero-slider-items {
        margin-top: 28px !important;
        padding: 0 !important;
    }
    .hero-section.hero-3 .hero-image img,
    .hero-section.hero-3 .swiper-slide img {
        width: 100% !important;
        height: auto !important;
        border-radius: 16px !important;
        aspect-ratio: 4 / 3 !important;
        object-fit: cover !important;
    }
}

/* 7. SECTION TITLES — keep heading hierarchy readable on phones         */
@media (max-width: 767px) {
    .section-title h2,
    .brand-heading .brand-title,
    .catalog-intro h2,
    h2 { font-size: 26px !important; line-height: 1.22 !important; }
    h3 { font-size: 20px !important; }
    h4 { font-size: 16.5px !important; }
}

/* 8. BUTTONS — 44px min tap targets across all primary CTAs             */
@media (max-width: 575px) {
    .theme-btn,
    .btn-primary,
    .catalog-btn {
        min-height: 44px !important;
        font-size: 14px !important;
        padding: 12px 22px !important;
    }
}

/* 9. BRAND CAROUSEL — compact logo tiles on phones                      */
@media (max-width: 575px) {
    .brand-wrapper { padding: 12px 0 !important; }
    .brand-wrapper .brand-item,
    .brand-wrapper .swiper-slide {
        height: 90px !important;
        min-height: 90px !important;
    }
    .brand-wrapper img,
    .brand-wrapper .swiper-slide img {
        max-width: 100px !important;
        max-height: 80px !important;
        width: auto !important;
        height: auto !important;
    }
    .brand-heading { text-align: center !important; }
    .brand-heading .brand-title { font-size: 22px !important; }
    .brand-heading .brand-subtitle { font-size: 13px !important; }
}

/* 10. COUNTER STRIP — 2x2 grid on phones, smaller digits                */
@media (max-width: 575px) {
    .counter-area, .counter-section { padding: 30px 0 !important; }
    .counter-section .row > [class*="col-"],
    .counter-area .row > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-bottom: 18px;
    }
    .counter-item .counter-number,
    .counter-content h2,
    .counter-content .odometer {
        font-size: 28px !important;
    }
    .counter-item p,
    .counter-content p {
        font-size: 12px !important;
        margin: 0;
    }
}

/* 11. SERVICE CARDS — comfortable spacing, full-width on small phones   */
@media (max-width: 575px) {
    .service-section .row,
    .services-section .row { --bs-gutter-y: 16px; }
    .service-box-items,
    .service-item,
    .single-service-box {
        padding: 22px 20px !important;
    }
    .service-box-items h3,
    .service-box-items h4,
    .single-service-box h3 {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }
    .service-box-items p,
    .single-service-box p {
        font-size: 14px !important;
        line-height: 1.55 !important;
    }
}

/* 12. PORTFOLIO / PROJECT — square thumbs, even spacing                 */
@media (max-width: 575px) {
    .project-box-items img,
    .portfolio-image img,
    .single-portfolio-items img,
    .single-project-box img {
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        width: 100% !important;
        border-radius: 14px !important;
    }
    .project-section .row { --bs-gutter-y: 16px; }
}

/* 13. CTA SECTION — stacked, breathing room                             */
@media (max-width: 575px) {
    .cta-section,
    .cta-section .cta-wrapper {
        padding: 36px 22px !important;
        text-align: center !important;
    }
    .cta-section h2 {
        font-size: 22px !important;
        margin-bottom: 16px !important;
    }
    .cta-section .theme-btn {
        width: 100% !important;
        max-width: 280px !important;
        margin: 8px auto 0 !important;
        display: inline-flex !important;
    }
}

/* 14. CATALOG / SERVICE PACKAGES — comfortable cards                    */
@media (max-width: 575px) {
    .catalog-card { margin-bottom: 4px !important; }
    .catalog-card-img img { aspect-ratio: 16 / 10 !important; }
    .catalog-card-body { padding: 18px !important; }
    .catalog-intro h2 { font-size: 24px !important; }
    .catalog-intro p { font-size: 14px !important; }
}

/* 15. FOOTER — tighter spacing on phones, keep logo-col centered        */
@media (max-width: 575px) {
    .footer-section { padding-top: 36px !important; }
    .footer-section .single-footer-widget {
        text-align: left !important;
        align-items: flex-start !important;
    }
    .footer-section .footer-widgets-wrapper .row > [class*="col-"]:first-child .single-footer-widget {
        text-align: center !important;
        align-items: center !important;
    }
    .footer-section .single-footer-widget .widget-head h3 {
        font-size: 18px !important;
        margin-bottom: 16px !important;
    }
    .footer-section .single-footer-widget .list-items li,
    .footer-section .footer-contact-list li {
        margin-bottom: 10px !important;
    }
    .footer-section .single-footer-widget .list-items li a,
    .footer-section .footer-contact-list li a {
        font-size: 14px !important;
    }
    .footer-bottom { padding: 16px 0 !important; text-align: center !important; }
    .footer-bottom .row > * {
        text-align: center !important;
        margin-bottom: 6px;
    }
}

/* 16. HEADER — bigger tap targets, cleaner spacing                      */
@media (max-width: 991.98px) {
    .header-section .container,
    .header-section .container-fluid {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
    .header-section { padding-top: 8px !important; padding-bottom: 8px !important; }
    .header-logo img { max-height: 44px !important; width: auto !important; }
    .mobile-menu-icon,
    .menu-button,
    .navbar-toggler,
    .meanmenu-reveal {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* 17. MEAN MENU (mobile drawer) — readable item rows                    */
@media (max-width: 991.98px) {
    .mean-container .mean-nav ul li a {
        font-size: 15px !important;
        padding: 14px 16px !important;
    }
}

/* 18. BREADCRUMB — phones get a compact, focused header                 */
@media (max-width: 575px) {
    .breadcrumb-wrapper {
        padding: 88px 0 56px !important;
        background-position: center !important;
    }
    .breadcrumb-wrapper .page-heading h1 { font-size: 30px !important; }
    .breadcrumb-items li { font-size: 14px !important; }
}

/* 19. FORMS — prevent iOS auto-zoom by enforcing 16px input font        */
@media (max-width: 575px) {
    input[type="text"], input[type="email"], input[type="tel"],
    input[type="password"], input[type="search"], select, textarea {
        font-size: 16px !important;
        min-height: 44px !important;
    }
    textarea { min-height: 96px !important; }
}

/* 20. BOTTOM-NAV — refined sizing on the smallest phones                */
@media (max-width: 575px) {
    .baw-bottom-nav ul { height: 60px; }
    .baw-bottom-nav li a .icon { font-size: 18px; }
    .baw-bottom-nav li a .label { font-size: 10px; }
    .baw-bottom-nav li.center a {
        width: 54px;
        height: 54px;
        margin-top: -22px;
    }
    .baw-bottom-nav li.center a .icon { font-size: 22px; }
}

/* 21. COOKIE CONSENT — full-width bottom sheet, above bottom-nav        */
@media (max-width: 575px) {
    .cookie-consent,
    #cookie-consent-modal,
    .baw-cookie-modal {
        left: 12px !important;
        right: 12px !important;
        bottom: calc(76px + env(safe-area-inset-bottom)) !important;
        max-width: none !important;
        width: auto !important;
    }
}

/* 22. ABOUT / NEWS / GENERIC content — readable body text on phones     */
@media (max-width: 575px) {
    .about-section p,
    .news-section p,
    .service-details-content p,
    .project-details-content p,
    main p, article p {
        font-size: 15px !important;
        line-height: 1.65 !important;
    }
}

/* 23. NEWS GRID — single-column, full-width cards on phones             */
@media (max-width: 575px) {
    .news-section .row,
    .news-grid .row { --bs-gutter-y: 18px; }
    .news-card-items,
    .single-news-box {
        padding: 0 !important;
    }
    .news-card-items img,
    .single-news-box img {
        aspect-ratio: 16 / 9 !important;
        object-fit: cover !important;
        width: 100% !important;
        border-radius: 14px 14px 0 0 !important;
    }
}

/* 24. TESTIMONIALS — readable on phones                                  */
@media (max-width: 575px) {
    .testimonial-section .testimonial-card,
    .testimonial-box-items {
        padding: 24px 20px !important;
    }
    .testimonial-section p,
    .testimonial-box-items p {
        font-size: 14.5px !important;
        line-height: 1.65 !important;
    }
}

/* 25. CONTACT PAGE — stacked cards, full-width tap surfaces             */
@media (max-width: 575px) {
    .baw-contact-cards {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .baw-contact-cards .baw-contact-card {
        padding: 22px 18px !important;
    }
}

/* 26. WOW.JS visibility safeguard — never leave content invisible       */
@media (max-width: 767px) {
    .wow {
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* 27. Tap-highlight + smoother scrolling on mobile WebKit               */
@media (max-width: 991.98px) {
    * { -webkit-tap-highlight-color: rgba(128, 0, 32, 0.12); }
    html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
}

/* 28. FLOATING WhatsApp — desktop only; respects safe-area              */
@media (min-width: 992px) {
    .baw-floating-wa {
        bottom: 22px !important;
        right: 22px !important;
    }
}

/* =====================================================================
 *  PROJECT GALLERY — phone-first redesign of project.php
 *  Desktop layout untouched; on phones every card becomes a tall,
 *  tappable magazine-style tile with gradient overlay, count badge,
 *  and a stagger reveal animation.
 * ================================================================== */

/* Desktop: keep the mobile-only <img> hidden                            */
.portfolio-items .portfolio-img-mobile { display: none; }

/* Make the full card tappable via an absolute-positioned link overlay  */
.portfolio-items { position: relative; }
.portfolio-items .portfolio-card-link {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    text-indent: -9999px;
    overflow: hidden;
}

@media (max-width: 991.98px) {
    /* Tighter section padding on the project listing page              */
    .portfolio-section.section-padding {
        padding-top: 32px !important;
        padding-bottom: 32px !important;
    }
    /* Pull cards a little closer side-to-side                          */
    .portfolio-section .container,
    .portfolio-section .portfolio-wrapper {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    .portfolio-section .row {
        --bs-gutter-x: 14px !important;
        --bs-gutter-y: 16px !important;
    }
}

@media (max-width: 767.98px) {
    /* Two-column gallery on tablets / large phones                     */
    .portfolio-section .col-md-6,
    .portfolio-section [class*="col-xxl"],
    .portfolio-section [class*="col-xl"],
    .portfolio-section [class*="col-lg"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
        margin-bottom: 14px;
    }

    /* The card itself: real <img> instead of bg-image for crispness    */
    .portfolio-items {
        position: relative;
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
        background: #f4ecec;
        transition: transform .25s ease, box-shadow .25s ease;
    }
    .portfolio-items:active { transform: scale(0.98); }

    /* Hide the background-image variant on phones — use the real img   */
    .portfolio-items .portfolio-image {
        background-image: none !important;
        position: absolute !important;
        inset: 0 !important;
        height: 100% !important;
        padding: 0 !important;
        z-index: 2;
        pointer-events: none;  /* the card-link sits on top */
        background: transparent !important;
    }
    .portfolio-items .portfolio-img-mobile {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 5 !important;
        object-fit: cover !important;
        z-index: 1;
        position: relative;
        transition: transform .5s ease;
    }
    .portfolio-items:hover .portfolio-img-mobile,
    .portfolio-items:focus-within .portfolio-img-mobile {
        transform: scale(1.04);
    }

    /* Dark gradient overlay so title/description stay legible          */
    .portfolio-items::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            to top,
            rgba(20, 5, 8, 0.85) 0%,
            rgba(20, 5, 8, 0.55) 30%,
            rgba(20, 5, 8, 0.15) 55%,
            rgba(20, 5, 8, 0) 100%
        );
        z-index: 3;
        pointer-events: none;
    }

    /* Title + description block, pinned to the bottom                  */
    .portfolio-items .portfolio-content {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        top: auto !important;
        padding: 14px 14px 16px !important;
        z-index: 4;
        background: transparent !important;
        transform: none !important;
        opacity: 1 !important;
    }
    .portfolio-items .portfolio-content h3 {
        font-size: 15.5px !important;
        line-height: 1.25 !important;
        margin: 0 0 4px 0 !important;
        color: #fff !important;
        font-weight: 600 !important;
        text-shadow: 0 1px 2px rgba(0,0,0,.45);
    }
    .portfolio-items .portfolio-content h3 a {
        color: #fff !important;
        text-decoration: none !important;
        pointer-events: none;   /* the card-link handles clicks */
    }
    .portfolio-items .portfolio-content p {
        font-size: 12px !important;
        line-height: 1.45 !important;
        margin: 0 !important;
        color: rgba(255, 255, 255, 0.88) !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Arrow icon — small circular badge in the top-right               */
    .portfolio-items .portfolio-content > a.icon,
    .portfolio-items .portfolio-content > .icon {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        bottom: auto !important;
        left: auto !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        background: rgba(255, 255, 255, 0.92) !important;
        color: #800020 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        margin: 0 !important;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
        pointer-events: none;
        opacity: 0;
        transform: translateY(-4px);
        transition: opacity .25s ease, transform .25s ease;
    }
    .portfolio-items:hover .portfolio-content > a.icon,
    .portfolio-items:hover .portfolio-content > .icon,
    .portfolio-items:focus-within .portfolio-content > a.icon,
    .portfolio-items:focus-within .portfolio-content > .icon {
        opacity: 1;
        transform: translateY(0);
    }

    /* Gallery-count pill — top-left of the card                         */
    .portfolio-items .project-gallery-nav {
        position: absolute !important;
        top: 12px !important;
        left: 12px !important;
        bottom: auto !important;
        right: auto !important;
        z-index: 5;
    }
    .portfolio-items .project-gallery-nav .gallery-info {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 5px 10px !important;
        background: rgba(255, 255, 255, 0.92) !important;
        color: #58151c !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
    }
    .portfolio-items .project-gallery-nav .gallery-info i { font-size: 10px; }
    .portfolio-items .project-gallery-nav .gallery-info span {
        font-size: 11px !important;
        color: #58151c !important;
    }

    /* Stagger reveal — keep things lively without depending on WOW.js  */
    .portfolio-section .row > [class*="col-"] {
        opacity: 0;
        transform: translateY(14px);
        animation: bawProjectReveal .55s ease forwards;
    }
    .portfolio-section .row > [class*="col-"]:nth-child(1) { animation-delay: .05s; }
    .portfolio-section .row > [class*="col-"]:nth-child(2) { animation-delay: .12s; }
    .portfolio-section .row > [class*="col-"]:nth-child(3) { animation-delay: .19s; }
    .portfolio-section .row > [class*="col-"]:nth-child(4) { animation-delay: .26s; }
    .portfolio-section .row > [class*="col-"]:nth-child(5) { animation-delay: .33s; }
    .portfolio-section .row > [class*="col-"]:nth-child(6) { animation-delay: .40s; }
    .portfolio-section .row > [class*="col-"]:nth-child(n+7) { animation-delay: .47s; }
    @keyframes bawProjectReveal {
        to { opacity: 1; transform: translateY(0); }
    }
}

/* Smallest phones (≤420px) — keep the 2-col grid, just tighter           */
@media (max-width: 420px) {
    .portfolio-section .col-md-6,
    .portfolio-section [class*="col-xxl"],
    .portfolio-section [class*="col-xl"],
    .portfolio-section [class*="col-lg"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin-bottom: 10px;
    }
    .portfolio-section .container,
    .portfolio-section .portfolio-wrapper {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .portfolio-items { border-radius: 14px; }
    .portfolio-items .portfolio-img-mobile { aspect-ratio: 4 / 5 !important; }
    .portfolio-items .portfolio-content { padding: 12px 12px 14px !important; }
    .portfolio-items .portfolio-content h3 { font-size: 13.5px !important; }
    .portfolio-items .portfolio-content p  {
        font-size: 11.5px !important;
        -webkit-line-clamp: 2;
    }
    .portfolio-items .portfolio-content > a.icon,
    .portfolio-items .portfolio-content > .icon {
        width: 30px !important; height: 30px !important;
        font-size: 11px !important;
        opacity: 1; transform: none;
        top: 10px !important; right: 10px !important;
    }
    .portfolio-items .project-gallery-nav { top: 10px !important; left: 10px !important; }
    .portfolio-items .project-gallery-nav .gallery-info {
        padding: 3px 8px !important;
        font-size: 10px !important;
    }
}

/* Pagination — friendlier touch targets on phones                     */
@media (max-width: 767.98px) {
    .portfolio-section .page-nav-wrap { margin-top: 24px !important; }
    .portfolio-section .page-nav-wrap ul {
        display: inline-flex !important;
        gap: 6px !important;
        padding: 6px !important;
        background: #faf6f6;
        border-radius: 999px;
    }
    .portfolio-section .page-nav-wrap .page-numbers {
        min-width: 38px !important;
        height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        border-radius: 50% !important;
        padding: 0 !important;
    }
}

/* Breadcrumb on the project page — tighter, on-brand                  */
@media (max-width: 575.98px) {
    .breadcrumb-wrapper { padding: 84px 0 50px !important; }
    .breadcrumb-wrapper .page-heading h1 { font-size: 28px !important; margin: 0 0 8px !important; }
    .breadcrumb-wrapper .breadcrumb-items {
        display: inline-flex !important;
        gap: 6px !important;
        padding: 5px 14px !important;
        background: rgba(255,255,255,.12) !important;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        border-radius: 999px !important;
    }
    .breadcrumb-wrapper .breadcrumb-items li { font-size: 12.5px !important; }
}

/* =====================================================================
 *  SCROLL-LOCK GUARDS — ScrollSmoother bakes inline styles into the
 *  wrapper that occasionally survive its kill() call on mobile. These
 *  safety rules guarantee native scrolling stays alive on every viewport.
 * ================================================================== */
@media (max-width: 991.98px) {
    html, body {
        overflow-y: auto !important;
        height: auto !important;
        position: static !important;
        touch-action: manipulation;
        -webkit-overflow-scrolling: touch;
    }
    .ScrollSmoother-content,
    #smooth-wrapper,
    #smooth-content {
        transform: none !important;
        position: static !important;
        height: auto !important;
        will-change: auto !important;
        overflow: visible !important;
    }
}

/* =====================================================================
 *  HOMEPAGE HERO — phone-first rebuild
 *  Earlier mobile pass left a fixed-height .hero-image parent which
 *  fought the responsive <img>, producing the "crumpled" look. This
 *  block resets the slider container to natural height and lays the
 *  two columns out cleanly on phones.
 * ================================================================== */
@media (max-width: 991.98px) {
    .hero-section.hero-3 {
        padding: 30px 0 40px !important;
        min-height: auto !important;
        overflow: visible !important;
    }
    .hero-section.hero-3 > .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    .hero-section.hero-3 .row {
        --bs-gutter-x: 24px !important;
        --bs-gutter-y: 28px !important;
        align-items: flex-start !important;
    }
    .hero-section.hero-3 .hero-content {
        margin-top: 0 !important;
        padding: 0 !important;
        text-align: center !important;
    }
    .hero-section.hero-3 .hero-content h1 {
        font-size: 30px !important;
        line-height: 1.18 !important;
        margin: 0 0 14px 0 !important;
        font-weight: 500 !important;
    }
    .hero-section.hero-3 .hero-content h1 br { display: none !important; }
    .hero-section.hero-3 .hero-content p {
        font-size: 15px !important;
        line-height: 1.6 !important;
        margin: 0 0 22px 0 !important;
        padding: 0 6px;
    }

    /* Reset the rotated/oversized slider container that the desktop CSS
       leaves behind. Force the image to lay flat at natural width.       */
    .hero-section.hero-3 .hero-slider-items {
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
        max-width: 100% !important;
        width: 100% !important;
        overflow: hidden !important;
        border-radius: 18px !important;
    }
    .hero-section.hero-3 .hero-slider-items .swiper,
    .hero-section.hero-3 .hero-slider-items .hero-slider {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        overflow: hidden !important;
        border-radius: 18px !important;
    }
    .hero-section.hero-3 .hero-slider-items .swiper-wrapper {
        align-items: stretch !important;
    }
    .hero-section.hero-3 .hero-slider-items .swiper-slide {
        height: auto !important;
        display: block !important;
    }
    .hero-section.hero-3 .hero-slider-items .hero-image {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: none !important;
        border-radius: 18px !important;
        overflow: hidden !important;
        display: block !important;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14);
    }
    .hero-section.hero-3 .hero-slider-items .hero-image img,
    .hero-section.hero-3 .hero-slider-items .swiper-slide img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        aspect-ratio: 16 / 11 !important;
        object-fit: cover !important;
        display: block !important;
        border-radius: 18px !important;
    }

    /* Hero buttons: stack centered, equal-width tap targets             */
    .hero-section.hero-3 .hero-content .hero-button {
        margin-top: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 16px !important;
        flex-wrap: nowrap !important;
    }
    .hero-section.hero-3 .hero-content .hero-button .portfolio-hero-btn,
    .hero-section.hero-3 .hero-content .hero-button .theme-btn {
        width: 100% !important;
        max-width: 300px !important;
        justify-content: center !important;
        padding: 13px 24px !important;
        font-size: 14px !important;
    }
    .hero-section.hero-3 .hero-content .hero-button .icon-items {
        gap: 12px !important;
        justify-content: center !important;
        align-items: center !important;
        flex-direction: row !important;
    }
    .hero-section.hero-3 .hero-content .hero-button .icon-items .icon {
        width: 42px !important;
        height: 42px !important;
        border: 1.5px solid rgba(128, 0, 32, 0.35) !important;
        background: rgba(128, 0, 32, 0.05) !important;
        color: #800020 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 14px !important;
        border-radius: 50% !important;
    }
    .hero-section.hero-3 .hero-content .hero-button .icon-items .content { text-align: left !important; }
    .hero-section.hero-3 .hero-content .hero-button .icon-items .content p {
        font-size: 11px !important;
        margin: 0 !important;
        color: #6e6e6e !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .hero-section.hero-3 .hero-content .hero-button .icon-items .content h4,
    .hero-section.hero-3 .hero-content .hero-button .icon-items .content h4 a {
        font-size: 15px !important;
        line-height: 1.2 !important;
        margin: 2px 0 0 !important;
        color: #800020 !important;
    }
}

/* =====================================================================
 *  CIRCULAR OUTLINED ICON SYSTEM — minimalist look applied to:
 *    · Mobile bottom-nav items (non-center)
 *    · Footer social icons
 *    · Hero phone-icon
 *    · Header phone icon
 *    · Service / news meta icons
 * ================================================================== */

/* =====================================================================
 *  OUTLINED MINIMALIST ICONS — bare glyphs, no circle wrappers anywhere
 *  except the bottom-nav center call pill. Uses Font Awesome Light (fal)
 *  for a thin, elegant, rounded-corner aesthetic throughout the site.
 * ================================================================== */

/* Bottom-nav (non-center): just the icon, no ring, no fill */
.baw-bottom-nav li:not(.center) a .icon {
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    color: #58151c;
    font-size: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 3px 0;
    transition: color .2s ease, transform .2s ease;
}
.baw-bottom-nav li:not(.center) a .icon i { line-height: 1; }
.baw-bottom-nav li:not(.center) a:hover .icon { color: #800020; }
.baw-bottom-nav li.active:not(.center) a .icon {
    color: #800020 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: translateY(-1px) !important;
}
.baw-bottom-nav li:not(.center) a .label { margin-top: 0; }
.baw-bottom-nav ul { align-items: center !important; height: 64px; }
@media (max-width: 575px) {
    .baw-bottom-nav li:not(.center) a .icon { font-size: 20px; }
    .baw-bottom-nav ul { height: 60px; }
}

/* Footer social icons — bare, no rings. Outlined glyph only. */
.footer-section .social-icon a,
.footer-section .footer-social-icons a {
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.78) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    padding: 0 !important;
    transition: color .2s ease, transform .2s ease !important;
    box-shadow: none !important;
}
.footer-section .social-icon a:hover,
.footer-section .footer-social-icons a:hover {
    color: #bd9e70 !important;
    background: transparent !important;
    border: 0 !important;
    transform: translateY(-2px);
}
.footer-section .social-icon,
.footer-section .footer-social-icons { gap: 16px !important; }

/* Header — phone / contact icons: bare, no ring */
.header-section .info-content .icon,
.header-section .contact-info .icon,
.header-section .header-info .icon {
    width: auto;
    height: auto;
    border: 0;
    background: transparent;
    border-radius: 0;
    color: #800020;
    font-size: 18px;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
}

/* Hero phone-icon CTA (homepage) — remove the maroon ring we added */
.hero-section.hero-3 .hero-content .hero-button .icon-items .icon {
    width: auto !important;
    height: auto !important;
    border: 0 !important;
    background: transparent !important;
    color: #800020 !important;
    font-size: 22px !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* =====================================================================
 *  FLOATING BUTTONS — clear-of-bottom-nav positioning
 *  Mobile (≤991px): bottom-nav is fixed at 0 (height ~60-64px). All
 *  floating UI is pushed up so nothing tucks underneath it.
 *    - Scroll-up        : right corner,    bottom = 80px + safe-area
 *    - Floating WhatsApp: left corner,     bottom = 80px + safe-area
 *    - Element inspector: above WhatsApp,  bottom = 150px + safe-area
 *  Desktop:
 *    - WhatsApp pill stays at left:30 / bottom:30
 *    - Inspector sits directly above it (left:30 / bottom:96)
 *    - Scroll-up at right:25 / bottom:35
 * ================================================================== */
@media (max-width: 991.98px) {
    .scroll-up {
        right: 18px !important;
        bottom: calc(80px + env(safe-area-inset-bottom)) !important;
        height: 46px !important;
        width: 46px !important;
        z-index: 9991 !important;
    }
    .floating-whatsapp-btn {
        left: 18px !important;
        bottom: calc(80px + env(safe-area-inset-bottom)) !important;
        width: 52px !important;
        height: 52px !important;
        line-height: 52px !important;
        font-size: 26px !important;
        z-index: 9991 !important;
    }
}
@media (max-width: 575.98px) {
    /* Smaller phones: tighter side gutters                              */
    .scroll-up, .floating-whatsapp-btn {
        bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    }
}


/* =====================================================================
 *  WORK PROCESS — dual mode
 *  Desktop (≥992px): 3-column CSS grid (Swiper is destroyed via JS).
 *  Mobile  (≤991px): Swiper carousel with peek + dynamic bullets.
 * ================================================================== */

/* Desktop: force a clean 3-column grid even though the markup is
   structured for Swiper. Override any inline styles Swiper leaves. */
@media (min-width: 992px) {
    .baw-work-slider {
        position: relative;
    }
    .baw-work-swiper {
        overflow: visible !important;
    }
    .baw-work-swiper .swiper-wrapper {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 30px !important;
        transform: none !important;
        width: 100% !important;
    }
    .baw-work-swiper .swiper-slide {
        width: 100% !important;
        margin: 0 !important;
        height: auto !important;
        flex-shrink: 1 !important;
    }
    .baw-work-pagination { display: none !important; }
}

/* Mobile carousel polish */
@media (max-width: 991.98px) {
    .work-process.section-padding {
        padding-top: 56px !important;
        padding-bottom: 64px !important;
        overflow: hidden;
    }
    .work-process .section-title h6 { font-size: 12px; letter-spacing: 2px; }
    .work-process .section-title h2 {
        font-size: 26px !important;
        line-height: 1.22 !important;
        margin: 8px 0 28px !important;
    }
    .work-process .section-title h2 br { display: none; }

    .baw-work-slider {
        position: relative;
        margin: 0 -18px;
    }
    .baw-work-swiper {
        padding: 14px 18px 8px !important;
        overflow: visible !important;
    }
    .baw-work-swiper .swiper-slide {
        height: auto !important;
        transition: transform .5s ease, opacity .5s ease;
        opacity: 0.55;
        transform: scale(0.95);
    }
    .baw-work-swiper .swiper-slide-active {
        opacity: 1;
        transform: scale(1);
        z-index: 2;
    }

    /* Card itself — keep the existing .work-process-items styling but
       neutralize any awkward margins introduced by the desktop layout. */
    .baw-work-swiper .work-process-items {
        margin: 0 !important;
        height: 100%;
        background: #fff;
        border-radius: 18px;
        border: 1px solid rgba(128, 0, 32, 0.08);
        box-shadow: 0 14px 36px -22px rgba(0, 0, 0, 0.18);
        transition: border-color .35s ease, box-shadow .35s ease;
        padding: 26px 22px 24px;
        position: relative;
    }
    .baw-work-swiper .swiper-slide-active .work-process-items {
        border-color: rgba(128, 0, 32, 0.22);
        box-shadow: 0 22px 50px -24px rgba(0, 0, 0, 0.18);
    }
    .baw-work-swiper .work-process-items h6 {
        color: #800020;
        font-size: 28px;
        font-weight: 500;
        margin: 0 0 14px;
        letter-spacing: -0.5px;
    }
    .baw-work-swiper .work-process-img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 10 !important;
        object-fit: cover !important;
        border-radius: 12px !important;
        margin-bottom: 18px !important;
        display: block;
    }
    .baw-work-swiper .work-process-items h3 {
        font-size: 19px !important;
        line-height: 1.25 !important;
        margin: 0 0 8px !important;
        color: #1a1a1a !important;
        font-weight: 500 !important;
    }
    .baw-work-swiper .work-process-items p {
        font-size: 14px !important;
        line-height: 1.55 !important;
        color: #6e6e6e !important;
        margin: 0 0 12px !important;
    }
    .baw-work-swiper .work-process-items .icon {
        font-size: 28px;
        color: #800020;
        line-height: 1;
    }
    /* Active highlight-maroon middle card keeps the dark maroon look on
       mobile too — every text node inside is forced to white so nothing
       is ever the inherited dark-grey body color. */
    .baw-work-swiper .work-process-items.active.highlight-maroon {
        background-color: #58151c !important;
        color: #fff !important;
        border-color: #58151c !important;
    }
    .baw-work-swiper .work-process-items.active.highlight-maroon *,
    .baw-work-swiper .work-process-items.active.highlight-maroon h3,
    .baw-work-swiper .work-process-items.active.highlight-maroon p,
    .baw-work-swiper .work-process-items.active.highlight-maroon h6,
    .baw-work-swiper .work-process-items.active.highlight-maroon a,
    .baw-work-swiper .work-process-items.active.highlight-maroon span,
    .baw-work-swiper .work-process-items.active.highlight-maroon .icon i {
        color: #fff !important;
    }
    /* h6 number outline switches to white on the dark bg */
    .baw-work-swiper .work-process-items.active.highlight-maroon h6 {
        -webkit-text-stroke-color: #fff !important;
        -webkit-text-fill-color: transparent !important;
    }
    .baw-work-swiper .work-process-items.active.highlight-maroon h3 {
        border-bottom-color: rgba(255, 255, 255, 0.22) !important;
    }
    /* Larger shadow on the active slide reads cleanly grey now */
    .baw-work-swiper .swiper-slide-active .work-process-items.active.highlight-maroon {
        box-shadow: 0 22px 50px -22px rgba(0, 0, 0, 0.28) !important;
    }

    /* Pagination */
    .baw-work-pagination {
        margin-top: 22px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .baw-work-pagination .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        background: rgba(128, 0, 32, 0.22);
        opacity: 1;
        margin: 0 !important;
        transition: width .25s ease, background .25s ease;
        border-radius: 999px;
    }
    .baw-work-pagination .swiper-pagination-bullet-active {
        width: 28px;
        background: #800020;
    }
}

/* =====================================================================
 *  HOMEPAGE CORE SERVICES — dual mode (mobile carousel + bleed image)
 *  Desktop ≥768px: existing 3-column grid + image bleeding off the right
 *  (unchanged from base layout).
 *  Mobile  ≤767px: side-by-side
 *    · Left ~65%: services swipeable carousel (one card at a time)
 *    · Right ~38%: image bleeds off the right edge (the "speaking out"
 *      design preserved from desktop).
 * ================================================================== */

/* Desktop: keep Swiper transforms inert so the inner row stays a grid */
@media (min-width: 768px) {
    .baw-home-svc-swiper {
        overflow: visible !important;
    }
    .baw-home-svc-swiper .swiper-wrapper {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 24px !important;
        transform: none !important;
        width: 100% !important;
    }
    .baw-home-svc-swiper .swiper-slide {
        width: 100% !important;
        margin: 0 !important;
        height: auto !important;
        flex-shrink: 1 !important;
    }
    .baw-home-svc-pagination { display: none !important; }
}

/* Mobile: side-by-side layout — carousel left, image bleeding right */
@media (max-width: 767.98px) {
    .service-section.section-padding {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
        overflow: hidden;  /* clip the image's bleed-off cleanly */
    }
    .service-section .container {
        padding-right: 0 !important;  /* let the image kiss the right edge */
        padding-left: 18px !important;
    }

    /* Outer row becomes a real side-by-side flex layout */
    .service-section .service-wrapper > .row.g-4 {
        --bs-gutter-x: 0 !important;
        --bs-gutter-y: 0 !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        margin: 0 !important;
    }
    .service-section .col-xl-9.col-lg-12 {
        flex: 0 0 65% !important;
        max-width: 65% !important;
        padding: 0 14px 0 0 !important;
    }
    .service-section .col-xl-3.col-lg-6 {
        flex: 0 0 38% !important;
        max-width: 38% !important;
        padding: 0 !important;
        margin-right: -8% !important;  /* the bleed */
    }

    /* Section title — left-aligned above the carousel + image */
    .service-section .service-left .section-title {
        margin-bottom: 22px;
    }
    .service-section .service-left .section-title h6 {
        font-size: 11.5px !important;
        letter-spacing: 2px !important;
        margin-bottom: 8px !important;
    }
    .service-section .service-left .section-title h2 {
        font-size: 22px !important;
        line-height: 1.22 !important;
        margin: 0 !important;
        font-weight: 500 !important;
        letter-spacing: -0.3px;
    }
    .service-section .service-left .section-title h2 br { display: none; }

    /* The carousel itself */
    .baw-home-svc-slider {
        position: relative;
    }
    .baw-home-svc-swiper {
        overflow: visible !important;
        padding: 6px 0 8px !important;
    }
    .baw-home-svc-swiper .swiper-slide {
        height: auto !important;
        transition: opacity .4s ease, transform .4s ease;
        opacity: 0.55;
        transform: scale(0.96);
    }
    .baw-home-svc-swiper .swiper-slide-active {
        opacity: 1;
        transform: scale(1);
    }

    /* Clean compact card design for the mobile slides */
    .baw-home-svc-swiper .service-items {
        margin: 0 !important;
        height: 100%;
        background: #fff;
        border-radius: 16px;
        padding: 22px 20px !important;
        box-shadow: 0 10px 28px -16px rgba(0, 0, 0, 0.16);
        border: 1px solid rgba(0, 0, 0, 0.05);
    }
    /* Mobile icon → white glyph inside a maroon circular badge */
    .baw-home-svc-swiper .service-items .icon {
        width: 54px !important;
        height: 54px !important;
        border-radius: 50% !important;
        background: #800020 !important;
        color: #fff !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 22px !important;
        margin-bottom: 14px !important;
        line-height: 1 !important;
        box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.18);
    }
    .baw-home-svc-swiper .service-items .icon i {
        color: #fff !important;
        font-size: 22px !important;
        line-height: 1 !important;
    }
    .baw-home-svc-swiper .service-items h3 {
        font-size: 17px !important;
        line-height: 1.25 !important;
        margin: 0 0 8px !important;
        font-weight: 500 !important;
    }
    .baw-home-svc-swiper .service-items h3 a {
        color: #1a1a1a !important;
        text-decoration: none;
    }
    .baw-home-svc-swiper .service-items p {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        color: #6e6e6e !important;
        margin: 0 0 14px !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .baw-home-svc-swiper .service-items .link-btn {
        font-size: 12.5px !important;
        color: #800020 !important;
        text-decoration: none !important;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 500;
    }

    /* Image: keep it speaking out from the right edge, tall column */
    .service-section .service-wrapper .service-image {
        height: 100% !important;
        min-height: 360px !important;
        max-width: none !important;
        margin: 0 !important;
        border-radius: 18px 0 0 18px !important;
        box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.22);
    }

    /* Pagination — small bullets under the carousel only */
    .baw-home-svc-pagination {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        margin-top: 16px;
    }
    .baw-home-svc-pagination .swiper-pagination-bullet {
        width: 7px;
        height: 7px;
        background: rgba(128, 0, 32, 0.22);
        opacity: 1;
        margin: 0 !important;
        transition: width .25s ease, background .25s ease;
        border-radius: 999px;
    }
    .baw-home-svc-pagination .swiper-pagination-bullet-active {
        width: 24px;
        background: #800020;
    }
}

/* Smaller phones — tighten everything but keep the visual concept */
@media (max-width: 420px) {
    .service-section .col-xl-9.col-lg-12 {
        flex: 0 0 63% !important;
        max-width: 63% !important;
    }
    .service-section .col-xl-3.col-lg-6 {
        flex: 0 0 40% !important;
        max-width: 40% !important;
        margin-right: -10% !important;
    }
    .service-section .service-left .section-title h2 { font-size: 20px !important; }
    .baw-home-svc-swiper .service-items { padding: 20px 18px !important; }
    .baw-home-svc-swiper .service-items h3 { font-size: 16px !important; }
    .baw-home-svc-swiper .service-items p { font-size: 13px !important; }
}

/* =====================================================================
 *  NEWS PAGE — 2-column grid on phones (≤767px)
 *  Desktop layout untouched. Mobile gets a clean grid of magazine-style
 *  cards: real <img> at top, glossy meta chip, title, 2-line excerpt
 *  clamp, and a maroon "Read More →" link. No editorial single-column
 *  feed; every card is the same compact tile.
 * ================================================================== */
.news-section .news-card-mobile .news-img-mobile { display: none; }
.news-section .news-card-mobile .news-thumb-link  { display: none; }

@media (max-width: 991.98px) {
    .news-section.section-padding {
        padding-top: 44px !important;
        padding-bottom: 44px !important;
    }
    .news-section .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

@media (max-width: 767.98px) {
    .news-section .row {
        --bs-gutter-x: 14px !important;
        --bs-gutter-y: 18px !important;
    }

    /* Two-column grid on phones */
    .news-section [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 7px !important;
        padding-right: 7px !important;
    }

    /* Show real <img>, hide the bg-cover sibling */
    .news-section .news-card-mobile .news-thumb-link { display: block !important; }
    .news-section .news-card-mobile .news-img-mobile {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
        object-fit: cover !important;
        border-radius: 14px 14px 0 0 !important;
        margin: 0 !important;
        transition: transform .4s ease;
    }
    .news-section .news-card-mobile .news-thumb-link:active .news-img-mobile {
        transform: scale(0.985);
    }
    .news-section .news-card-mobile .news-image {
        display: none !important;
    }

    /* Card itself — boxed magazine tile */
    .news-section .news-card-mobile {
        background: #fff !important;
        border: 1px solid rgba(0, 0, 0, 0.05) !important;
        border-radius: 14px !important;
        box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06) !important;
        padding: 0 !important;
        margin: 0 !important;
        position: relative;
        overflow: hidden;
        transition: transform .25s ease, box-shadow .25s ease;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .news-section .news-card-mobile:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.10) !important;
    }

    /* Content block: clean tight typography */
    .news-section .news-card-mobile .news-content {
        padding: 12px 12px 14px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    /* Meta row — single compact line, no chips */
    .news-section .news-meta {
        list-style: none !important;
        padding: 0 !important;
        margin: 0 0 8px 0 !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        font-size: 10.5px !important;
        color: #888 !important;
        letter-spacing: 0.3px;
        overflow: hidden;
    }
    .news-section .news-meta li {
        display: inline-flex !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        color: #888 !important;
        font-size: 10.5px !important;
        font-weight: 500 !important;
        margin: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .news-section .news-meta li:nth-child(2)::before {
        content: "·";
        margin-right: 2px;
        color: #ccc;
    }
    .news-section .news-meta li i {
        font-size: 9px !important;
        color: #800020 !important;
    }

    .news-section .news-card-mobile h3 {
        font-size: 14px !important;
        line-height: 1.3 !important;
        margin: 0 0 6px 0 !important;
        font-weight: 500 !important;
        color: #1a1a1a !important;
        letter-spacing: -0.1px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .news-section .news-card-mobile h3 a {
        color: inherit !important;
        text-decoration: none !important;
    }

    .news-section .news-card-mobile p {
        font-size: 11.5px !important;
        line-height: 1.5 !important;
        color: #6e6e6e !important;
        margin: 0 0 10px 0 !important;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .news-section .news-card-mobile .link-btn {
        margin-top: auto !important;
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        color: #800020 !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        padding: 0 !important;
        background: none !important;
        border: none !important;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        transition: gap .2s ease;
    }
    .news-section .news-card-mobile .link-btn:hover { gap: 10px !important; }
    .news-section .news-card-mobile .link-btn i {
        font-size: 10px !important;
        transition: transform .2s ease;
    }

    /* No more featured-card treatment — every tile is the same size  */
    .news-section .news-featured-col .news-card-mobile::after {
        display: none !important;
    }
    .news-section .news-featured-col .news-card-mobile .news-img-mobile {
        aspect-ratio: 4 / 3 !important;
        border-radius: 14px 14px 0 0 !important;
    }
    .news-section .news-featured-col .news-card-mobile h3 {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }
    .news-section .news-featured-col .news-card-mobile p {
        font-size: 11.5px !important;
        -webkit-line-clamp: 2;
    }

    /* Pagination pill on news page */
    .news-section .page-nav-wrap { margin-top: 28px !important; }
    .news-section .page-nav-wrap ul {
        display: inline-flex !important;
        gap: 6px !important;
        padding: 6px !important;
        background: #faf6f6;
        border-radius: 999px;
    }
    .news-section .page-nav-wrap .page-numbers {
        min-width: 36px !important;
        height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        color: #58151c;
    }

    /* Stagger reveal animation */
    .news-section .row > [class*="col-"] {
        opacity: 0;
        transform: translateY(12px);
        animation: bawNewsReveal .55s ease forwards;
    }
    .news-section .row > [class*="col-"]:nth-child(1) { animation-delay: .05s; }
    .news-section .row > [class*="col-"]:nth-child(2) { animation-delay: .10s; }
    .news-section .row > [class*="col-"]:nth-child(3) { animation-delay: .16s; }
    .news-section .row > [class*="col-"]:nth-child(4) { animation-delay: .22s; }
    .news-section .row > [class*="col-"]:nth-child(5) { animation-delay: .28s; }
    .news-section .row > [class*="col-"]:nth-child(6) { animation-delay: .34s; }
    .news-section .row > [class*="col-"]:nth-child(n+7) { animation-delay: .40s; }
    @keyframes bawNewsReveal {
        to { opacity: 1; transform: translateY(0); }
    }
}

/* Smaller phones (≤420px) — tighter side gutters but keep 2-col       */
@media (max-width: 420px) {
    .news-section .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .news-section .row { --bs-gutter-x: 10px !important; }
    .news-section [class*="col-"] {
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    .news-section .news-card-mobile .news-content {
        padding: 10px 10px 12px !important;
    }
    .news-section .news-card-mobile h3 { font-size: 13px !important; }
    .news-section .news-card-mobile p {
        font-size: 11px !important;
        -webkit-line-clamp: 2;
    }
    .news-section .news-meta { font-size: 10px !important; gap: 6px !important; }
    .news-section .news-meta li { font-size: 10px !important; }
}

/* =====================================================================
 *  TESTIMONIAL — keep the desktop side-by-side layout on mobile too
 *  Earlier mobile rules collapsed col-lg-6 → col-12, stacking the
 *  image above the slider. The brief was to mirror desktop on phones,
 *  so force the row back to 50/50 and tighten typography.
 * ================================================================== */
@media (max-width: 991.98px) {
    .testimonial-section .testimonial-wrapper > .row.g-0 {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }
    .testimonial-section .testimonial-wrapper > .row.g-0 > .col-lg-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-top: 0 !important;
    }
    .testimonial-wrapper .testimonial-image {
        width: 100% !important;
        height: 100% !important;
        min-height: 360px !important;
        border-radius: 16px 0 0 16px !important;
        margin: 0 !important;
    }
    .testimonial-wrapper .testimonial-area {
        max-width: 100% !important;
        height: 100%;
    }
    .testimonial-wrapper .testimonial-items {
        padding: 24px 18px !important;
        margin-left: -18px;  /* overlap onto the image, like desktop */
        position: relative;
        z-index: 2;
        height: 100%;
    }
    .testimonial-wrapper .testimonial-items .icon {
        position: absolute !important;
        top: 16px !important;
        right: 16px !important;
        font-size: 26px !important;
        opacity: 0.6;
    }
    .testimonial-wrapper .testimonial-items .client-items {
        gap: 12px !important;
    }
    .testimonial-wrapper .testimonial-items .client-items .client-image {
        width: 44px !important;
        height: 44px !important;
    }
    .testimonial-wrapper .testimonial-items .client-items .client-content h3 {
        font-size: 14px !important;
        margin-bottom: 4px !important;
    }
    .testimonial-wrapper .testimonial-items .client-items .client-content span {
        font-size: 11.5px !important;
    }
    .testimonial-wrapper .testimonial-items .star {
        margin-top: 12px !important;
    }
    .testimonial-wrapper .testimonial-items .star i {
        font-size: 11px !important;
    }
    .testimonial-wrapper .testimonial-items p {
        margin-top: 12px !important;
        font-size: 12.5px !important;
        line-height: 1.5 !important;
    }
    /* Testimonial section heading on mobile — uses the brand-heading
       style; keep it compact and left-aligned.                         */
    .testimonial-section .brand-heading { margin-bottom: 22px; }
    .testimonial-section .brand-heading .brand-title { font-size: 22px; }
}
@media (max-width: 575.98px) {
    .testimonial-wrapper .testimonial-image {
        min-height: 320px !important;
    }
    .testimonial-wrapper .testimonial-items {
        padding: 22px 16px !important;
        margin-left: -14px;
    }
    .testimonial-wrapper .testimonial-items p { font-size: 12px !important; }
}
@media (max-width: 380px) {
    .testimonial-wrapper .testimonial-image { min-height: 280px !important; }
    .testimonial-wrapper .testimonial-items {
        padding: 18px 14px !important;
        margin-left: -10px;
    }
    .testimonial-wrapper .testimonial-items .client-items .client-image {
        width: 38px !important;
        height: 38px !important;
    }
    .testimonial-wrapper .testimonial-items .client-items .client-content h3 {
        font-size: 13px !important;
    }
}

/* =====================================================================
 *  HOMEPAGE CORE SERVICES (mobile) — cards slide UNDER the image
 *  The bleeding image on the right is set above the carousel via
 *  z-index, so as cards swipe they disappear beneath it instead of
 *  riding over the top edge. The image keeps an inner shadow on its
 *  left edge so the transition reads as a clean tuck.
 * ================================================================== */
@media (max-width: 767.98px) {
    .service-section .service-wrapper > .row.g-4 {
        position: relative;
    }
    /* Image column sits above the carousel */
    .service-section .col-xl-3.col-lg-6 {
        position: relative;
        z-index: 4;
    }
    /* Carousel column tucked under */
    .service-section .col-xl-9.col-lg-12 {
        position: relative;
        z-index: 1;
    }
    /* Soft left-edge shadow on the image so cards visibly slide under */
    .service-section .service-wrapper .service-image {
        position: relative;
        z-index: 4;
        box-shadow:
            -16px 0 20px -16px rgba(0, 0, 0, 0.22),
            0 12px 30px -18px rgba(0, 0, 0, 0.22);
    }
    /* Clip overflow on the carousel container so peek slides
       don't poke through under the image                              */
    .baw-home-svc-slider {
        overflow: hidden;
        padding-right: 4px;
    }
    .baw-home-svc-swiper {
        overflow: hidden !important;  /* tighten clip — was visible */
    }
}


/* =====================================================================
 *  PROJECT LISTING — make the original magazine card click-to-lightbox
 *  Keeps the existing card visual (bg-cover image + bottom-overlay
 *  title/description) exactly as designed. Adds:
 *    · cursor: zoom-in over the card
 *    · keyboard focus ring
 *    · subtle hover lift
 *    · hides the mobile-only <img> we keep for the mobile gallery (so
 *      desktop still uses the bg-cover for the original look).
 * ================================================================== */
.portfolio-items[data-baw-gallery] {
    cursor: zoom-in;
    outline: none;
}
.portfolio-items[data-baw-gallery]:focus-visible {
    box-shadow: 0 0 0 3px rgba(128, 0, 32, 0.35), 0 14px 32px rgba(0, 0, 0, 0.10);
}

/* Desktop: hide the real <img> that we render for mobile crispness */
.portfolio-items > img.portfolio-img-mobile { display: none; }

/* Title and description inside the overlay should not capture clicks
   independently — the WHOLE card is the lightbox trigger.            */
.portfolio-items .portfolio-content h3,
.portfolio-items .portfolio-content p,
.portfolio-items .portfolio-content .icon { pointer-events: none; }

/* Overlay typography — gold title, white description, comfortably
   fitted, with a 2-line clamp so only half the description shows.
   The full text is revealed inside the lightbox caption.             */
.portfolio-items .portfolio-image .portfolio-content {
    padding: 28px 32px !important;
}
.portfolio-items .portfolio-image .portfolio-content h3,
.portfolio-items .portfolio-image .portfolio-content h3 a {
    color: #bd9e70 !important;        /* brand gold */
    font-size: 22px !important;
    line-height: 1.25 !important;
    margin: 0 0 12px !important;
    font-weight: 500 !important;
    letter-spacing: -0.2px;
    /* Title can wrap to 2 lines if long; otherwise stays compact */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.portfolio-items .portfolio-image .portfolio-content p {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    /* Clamp to 2 lines — only "half" of the description visible */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 92%;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Tighten the arrow icon so it doesn't compete with the title */
.portfolio-items .portfolio-image .portfolio-content .icon {
    width: 46px !important;
    height: 46px !important;
    line-height: 46px !important;
    margin-bottom: 18px !important;
    font-size: 16px !important;
}

/* Mobile overlay (≤767px) — keep gold title + 2-line description */
@media (max-width: 767.98px) {
    .portfolio-items .portfolio-content h3 {
        color: #bd9e70 !important;
        font-size: 15px !important;
        -webkit-line-clamp: 2;
    }
    .portfolio-items .portfolio-content p {
        color: rgba(255, 255, 255, 0.86) !important;
        -webkit-line-clamp: 2;
    }
}

/* =====================================================================
 *  SERVICE PAGE — mobile-only Swiper carousel polish
 *  Desktop renders the plain Bootstrap row/col grid (no .swiper class
 *  at all — the JS only injects the swiper container when innerWidth
 *  ≤ 991px, and removes it on the way back out). So these rules only
 *  fire when the JS is active.
 *  Card visual (.service-items.style-2) is unchanged.
 * ================================================================== */
@media (max-width: 991.98px) {
    .baw-svc-page-swiper {
        padding: 14px 0 8px !important;
        overflow: visible !important;
        margin: 0 -14px;
    }
    .baw-svc-page-swiper .swiper-wrapper {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        margin: 0 !important;
        padding: 0 14px;
    }
    .baw-svc-page-swiper .swiper-slide {
        height: auto !important;
        flex-shrink: 0 !important;
        transition: opacity .35s ease;
        opacity: 0.78;
    }
    .baw-svc-page-swiper .swiper-slide > .service-items {
        height: 100%;
        margin: 0;
    }
    .baw-svc-page-swiper .swiper-slide-active,
    .baw-svc-page-swiper .swiper-slide-visible { opacity: 1; }

    /* Pagination — dynamic-bullet pill row beneath the carousel */
    .baw-svc-page-pagination {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin-top: 18px;
    }
    .baw-svc-page-pagination .swiper-pagination-bullet {
        width: 7px;
        height: 7px;
        background: rgba(128, 0, 32, 0.22);
        opacity: 1;
        margin: 0 !important;
        transition: width .25s ease, background .25s ease;
        border-radius: 999px;
    }
    .baw-svc-page-pagination .swiper-pagination-bullet-active {
        width: 26px;
        background: #800020;
    }
}

/* =====================================================================
 *  PER-CONTEXT LOGO SYSTEM — desktop/mobile × head/sticky variants.
 *  The header renders 4 <img> tags; CSS picks which one is visible
 *  based on viewport width and whether the page-level scroll has
 *  added the .sticky class to #header-sticky.
 * ================================================================== */
.logo .site-logo { display: none; }

/* Default (page just loaded, no scroll) → show the "head" logos    */
@media (min-width: 768px) {
    #header-sticky:not(.sticky) .logo .logo-head.logo-desktop { display: inline-block; }
    #header-sticky.sticky        .logo .logo-sticky.logo-desktop { display: inline-block; }
}
@media (max-width: 767.98px) {
    #header-sticky:not(.sticky) .logo .logo-head.logo-mobile { display: inline-block; }
    #header-sticky.sticky        .logo .logo-sticky.logo-mobile { display: inline-block; }
}

/* Base sizing — keeps logos readable across variants */
.logo .site-logo {
    height: 56px;
    width: auto;
    object-fit: contain;
    max-width: 200px;
    transition: opacity .2s ease;
}
@media (max-width: 767.98px) {
    .logo .site-logo { height: 44px; max-width: 150px; }
}
/* Sticky state — slightly tighter logo                          */
#header-sticky.sticky .logo .site-logo {
    height: 44px;
    max-width: 170px;
}
@media (max-width: 767.98px) {
    #header-sticky.sticky .logo .site-logo { height: 38px; max-width: 130px; }
}

/* =====================================================================
 *  TESTIMONIAL CARD — comfortable spacing on mobile
 *  Side-by-side layout (image left, slider right) is preserved from
 *  earlier work; this just gives the card's internal elements more
 *  breathing room so the quote doesn't feel crammed.
 * ================================================================== */
@media (max-width: 991.98px) {
    .testimonial-wrapper .testimonial-items {
        padding: 32px 24px !important;
        margin-left: -22px;
        border-radius: 16px;
    }
    .testimonial-wrapper .testimonial-items .icon {
        top: 22px !important;
        right: 22px !important;
        font-size: 28px !important;
        opacity: 0.55;
    }
    .testimonial-wrapper .testimonial-items .client-items {
        gap: 14px !important;
        margin-bottom: 6px;
    }
    .testimonial-wrapper .testimonial-items .client-items .client-image {
        width: 48px !important;
        height: 48px !important;
    }
    .testimonial-wrapper .testimonial-items .client-items .client-content h3 {
        font-size: 15px !important;
        margin-bottom: 6px !important;
    }
    .testimonial-wrapper .testimonial-items .client-items .client-content span {
        font-size: 12px !important;
    }
    .testimonial-wrapper .testimonial-items .star {
        margin-top: 18px !important;
    }
    .testimonial-wrapper .testimonial-items .star i {
        font-size: 12px !important;
    }
    .testimonial-wrapper .testimonial-items p {
        margin-top: 18px !important;
        font-size: 13px !important;
        line-height: 1.65 !important;
    }
}
@media (max-width: 575.98px) {
    .testimonial-wrapper .testimonial-items {
        padding: 28px 20px !important;
        margin-left: -18px;
    }
    .testimonial-wrapper .testimonial-items p {
        font-size: 12.5px !important;
        line-height: 1.65 !important;
        margin-top: 16px !important;
    }
    .testimonial-wrapper .testimonial-items .star { margin-top: 16px !important; }
}
@media (max-width: 380px) {
    .testimonial-wrapper .testimonial-items {
        padding: 24px 18px !important;
        margin-left: -14px;
    }
    .testimonial-wrapper .testimonial-items .client-items {
        gap: 12px !important;
    }
    .testimonial-wrapper .testimonial-items .client-items .client-image {
        width: 42px !important;
        height: 42px !important;
    }
    .testimonial-wrapper .testimonial-items .client-items .client-content h3 {
        font-size: 14px !important;
    }
}