@charset "UTF-8";
/*======================================================================================
Theme Name: Orixo
Author: Gramentheme
Author URI: https://themeforest.net/user/Gramentheme/portfolio
Description: Orixo - Creative Agency & Portfolio HTML Template 
Version: 1.0.0
=======================================================================================*/
/*======================================================================================
  >> TABLE OF CONTENTS <<
========================================================================================
01. Mixins & Variables
02. Base
03. Components
04. Layouts
05. Sections
======================================================================================*/
/*---------------------------------------
01. Mixins & Variables
---------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap");
:root {
  --body: #101010;
  --black: #000;
  --white: #fff;
  --theme: #FF471C;
  --header: #fff;
  --text: #B1B1B1;
  --border: #FCFCFC;
  --bg: #272727;
  --box-shadow: 0px 1px 14px 0px rgba(0, 0, 0, 0.13);
}

/*---------------------------------------
02. Base
---------------------------------------*/
/* --------------------------------------------
    Template Default Fonts & Fonts Styles
 ---------------------------------------------- */
body {
  font-family: "Urbanist", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  color: var(--text);
  background-color: var(--body);
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}
@media (max-width: 1399px) {
  body {
    font-size: 18px;
  }
}
@media (max-width: 1199px) {
  body {
    font-size: 16px;
  }
}
@media (max-width: 575px) {
  body {
    font-size: 16px;
  }
}

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: "Urbanist", sans-serif;
  margin: 0px;
  padding: 0;
  color: var(--header);
  transition: all 0.4s ease-in-out;
}

h1 {
  font-size: 120px;
  font-weight: 600;
  line-height: 92%;
}
@media (max-width: 1600px) {
  h1 {
    font-size: 100px;
  }
}
@media (max-width: 1399px) {
  h1 {
    font-size: 90px;
  }
}
@media (max-width: 1199px) {
  h1 {
    font-size: 80px;
  }
}
@media (max-width: 991px) {
  h1 {
    font-size: 60px;
    line-height: 110% !important;
  }
}
@media (max-width: 767px) {
  h1 {
    font-size: 48px;
  }
}
@media (max-width: 575px) {
  h1 {
    font-size: 45px;
  }
}
@media (max-width: 470px) {
  h1 {
    font-size: 40px;
  }
}

h2 {
  font-size: 65px;
  font-weight: 600;
  line-height: 117%;
}
@media (max-width: 1399px) {
  h2 {
    font-size: 50px;
  }
}
@media (max-width: 1199px) {
  h2 {
    font-size: 40px;
  }
}
@media (max-width: 991px) {
  h2 {
    font-size: 36px;
  }
}
@media (max-width: 767px) {
  h2 {
    /* was 42px - larger than the 36px at 991px, so headings grew as the
       screen narrowed. The ladder now descends monotonically. */
    font-size: 34px;
  }
}
@media (max-width: 575px) {
  h2 {
    font-size: 30px;
  }
}
@media (max-width: 470px) {
  h2 {
    font-size: 26px;
  }
}

h3 {
  font-size: 30px;
  font-weight: 500;
  line-height: 150%;
}
@media (max-width: 575px) {
  h3 {
    font-size: 22px;
  }
}

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

h5 {
  font-size: 18px;
  font-weight: 700;
}

h6 {
  font-size: 16px;
  font-weight: 700;
}

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

span {
  margin: 0px;
}

.theme-btn-main {
  display: inline-flex;
  align-items: center;
  gap: 0;
  position: relative;
  transition: all 0.4s ease;
  text-transform: capitalize;
  border-radius: 10px;
}
/* Brand navy, not var(--theme). The arrow circle below is now orange site-wide,
   and this pill used to be orange too — so on any style-2 button without a
   section-level background override (the 404 "Back to home page" is the plain
   case) the circle vanished into the pill. Navy is the same dark the
   .bg-white-style CTAs already resolve to on light pages. */
.theme-btn-main.style-2 {
  background-color: #183057;
  padding: 7px 25px;
  padding-right: 7px;
  border-radius: 70px;
}
/* Orange circle, white arrow — the site-wide standard.
   This used to be a white circle with a #000 arrow, which broke two ways: the
   arrow read black on light pages, and on body.wt-light the rule at ~13934
   forces arrow glyphs to #ffffff, producing a white arrow on a white circle
   (invisible) on About / Services / 404. Filling the circle fixes both.
   .bg-white-style and .border-style are defined AFTER this block and still
   override it, so those variants are deliberately unaffected. */
.theme-btn-main.style-2 .theme-btn-arrow-left,
.theme-btn-main.style-2 .theme-btn-arrow-right {
  width: 43px;
  height: 43px;
  background: var(--theme);
  border-radius: 50%;
  color: #fff;
}
.theme-btn-main.style-2 .theme-btn-arrow-left img,
.theme-btn-main.style-2 .theme-btn-arrow-right img {
  animation: cir36 10s linear infinite;
}
.theme-btn-main.style-2 .theme-btn {
  background-color: transparent;
  padding: 0;
  margin-right: 25px;
}
.theme-btn-main.style-2:hover {
  padding-right: 25px;
  padding-left: 7px;
}
.theme-btn-main.style-2:hover .theme-btn {
  background-color: transparent;
}
.theme-btn-main.style-2:hover .theme-btn-arrow-left {
  left: 7px;
}
.theme-btn-main .theme-btn-arrow-left,
.theme-btn-main .theme-btn-arrow-right {
  width: 43px;
  height: 43px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--theme);
  border-radius: 50%;
  transition: 0.4s;
  text-align: center;
}
.theme-btn-main .theme-btn-arrow-left i,
.theme-btn-main .theme-btn-arrow-right i {
  font-weight: 400;
}
.theme-btn-main .theme-btn-arrow-left {
  scale: 0;
  position: absolute;
  left: 7px;
}
.theme-btn-main .theme-btn {
  background: var(--theme);
  color: var(--header);
  font-weight: 600;
  font-size: 18px;
  padding: 13px 30px;
  display: inline-flex;
  align-items: center;
  gap: 30px;
  transition: 0.4s;
}
@media (max-width: 575px) {
  .theme-btn-main .theme-btn {
    font-size: 14px;
    padding: 10px 25px;
  }
}
.theme-btn-main:hover .theme-btn-arrow-left {
  scale: 1;
}
.theme-btn-main:hover .theme-btn-arrow-left img {
  animation: cir36 10s linear infinite;
}
.theme-btn-main:hover .theme-btn-arrow-right {
  scale: 0;
}
.theme-btn-main:hover .theme-btn-arrow-right img {
  animation: cir36 10s linear infinite;
}
.theme-btn-main:hover .theme-btn {
  transform: translateX(60px);
  background-color: var(--header);
}
.theme-btn-main.bg-white-style {
  background-color: var(--white);
}
.theme-btn-main.bg-white-style .theme-btn-arrow-left,
.theme-btn-main.bg-white-style .theme-btn-arrow-right {
  background: var(--theme);
  color: #fff;
}
.theme-btn-main.bg-white-style .theme-btn {
  color: #101010;
}
.theme-btn-main.bg-black-style {
  background-color: #101010;
}
.theme-btn-main.bg-black-style .theme-btn-arrow-left,
.theme-btn-main.bg-black-style .theme-btn-arrow-right {
  background: var(--theme);
  color: #fff;
}
.theme-btn-main.bg-black-style .theme-btn {
  color: #fff;
}
.theme-btn-main.border-style {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.theme-btn-main.border-style .theme-btn-arrow-left,
.theme-btn-main.border-style .theme-btn-arrow-right {
  color: var(--theme);
  background: #fff;
}
.theme-btn-main.border-style .theme-btn {
  color: #fff;
}

@keyframes slideRight {
  49% {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  51% {
    opacity: 1;
  }
}
@keyframes slideUp {
  49% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  50% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
  51% {
    opacity: 1;
  }
}
/*---------------------------------------
03. Components
---------------------------------------*/
.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;
  background: none;
}

.mean-container .mean-nav > ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style-type: none;
  display: block !important;
}

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

.mean-container .mean-nav ul li a {
  width: 100%;
  padding: 10px 0;
  color: #fff;
  font-size: 16px;
  line-height: 2;
  font-weight: 500;
  text-transform: capitalize;
  border-bottom: 1px solid rgba(193, 210, 206, 0.0705882353) !important;
  border: none;
  font-family: "Urbanist", sans-serif;
}
.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: 5px;
  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;
  font-size: 18px;
}

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

.mean-container .mean-nav ul li a.mean-expand.mean-clicked i {
  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;
}

.search-popup {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -2;
  -webkit-transition: all 1s ease;
  -khtml-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.search-popup__overlay {
  position: fixed;
  width: 224vw;
  height: 224vw;
  top: calc(90px - 112vw);
  right: calc(50% - 112vw);
  z-index: 3;
  display: block;
  -webkit-border-radius: 50%;
  -khtml-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -webkit-transform: scale(0);
  -khtml-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-transition: transform 0.8s ease-in-out;
  -khtml-transition: transform 0.8s ease-in-out;
  -moz-transition: transform 0.8s ease-in-out;
  -ms-transition: transform 0.8s ease-in-out;
  -o-transition: transform 0.8s ease-in-out;
  transition: transform 0.8s ease-in-out;
  transition-delay: 0s;
  transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  background-color: #000000;
  opacity: 0.7;
  cursor: url(../../assets/img/close.png), auto;
}

@media (max-width: 767px) {
  .search-popup__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: 100%;
    height: 100%;
    border-radius: 0;
    transform: translateY(-110%);
  }
}
.search-popup__content {
  position: fixed;
  width: 0;
  max-width: 560px;
  padding: 30px 15px;
  left: 50%;
  top: 50%;
  opacity: 0;
  z-index: 3;
  -webkit-transform: translate(-50%, -50%);
  -khtml-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s;
  -khtml-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s;
  -moz-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s;
  -ms-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s;
  -o-transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s;
  transition: opacity 0.5s 0s, width 0.8s 0.8s cubic-bezier(0.225, 0.01, 0.475, 1.01), transform 0.2s 0s;
  transition-delay: 0s, 0.8s, 0s;
  transition-delay: 0s, 0.4s, 0s;
  transition-delay: 0.2s;
  -webkit-transition-delay: 0.2s;
}

.search-popup__form {
  position: relative;
}

.search-popup__form input[type=search],
.search-popup__form input[type=text] {
  width: 100%;
  height: 66px;
  border: none;
  outline: none;
  padding-left: 20px;
  background-color: var(--white);
  font-size: 16px;
  font-weight: 400;
  color: #000000;
  transition: all 500ms ease;
  border-radius: 4px;
  padding-right: 80px;
}

.search-popup__form input[type=search]:focus,
.search-popup__form input[type=text]:focus {
  color: #000000;
}

.search-popup__form .search-btn {
  padding: 0;
  width: 66px;
  height: 66px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  right: -1px;
  border-radius: 4px;
  font-size: 20px;
  color: var(--header);
  background-color: var(--theme);
  transition: all 0.4s ease-in-out;
}
.search-popup__form .search-btn:hover {
  background-color: var(--header);
  color: var(--white);
}

.search-popup__form .eolexi-btn svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

.search-popup.active {
  z-index: 999999;
}

.search-popup.active .search-popup__overlay {
  top: auto;
  bottom: calc(90px - 112vw);
  -webkit-transform: scale(1);
  -khtml-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
  opacity: 0.7;
  -webkit-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1);
  -khtml-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1);
  -moz-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1);
  -ms-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1);
  -o-transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1);
  transition: transform 1.6s cubic-bezier(0.4, 0, 0, 1);
}

@media (max-width: 767px) {
  .search-popup.active .search-popup__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: none;
    width: 100%;
    height: 100%;
    border-radius: 0;
    transform: translateY(0%);
  }
}
.search-popup.active .search-popup__content {
  width: 100%;
  opacity: 1;
  transition-delay: 0.7s;
  -webkit-transition-delay: 0.7s;
}

/* PRELOADER */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #183057;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 36px;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#preloader.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
/* Once hidden, stop the four infinite spinner animations so the page can reach
   network/CPU idle (Lighthouse was timing out because they never stopped). The
   element is also removed from the tree by JS after the fade (display:none). */
#preloader.hide .loader-ring svg,
#preloader.hide .ring-arc,
#preloader.hide .ring-center-dot { animation: none !important; }

/* Brackets */
.bracket {
  position: absolute;
  width: 36px;
  height: 36px;
}

.bracket::before, .bracket::after {
  content: "";
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
}

.bracket::before {
  width: 100%;
  height: 1px;
  top: 0;
  left: 0;
}

.bracket::after {
  width: 1px;
  height: 100%;
  top: 0;
  left: 0;
}

.bracket.tl {
  top: 28px;
  left: 28px;
}

.bracket.tr {
  top: 28px;
  right: 28px;
  transform: scaleX(-1);
}

.bracket.bl {
  bottom: 28px;
  left: 28px;
  transform: scaleY(-1);
}

.bracket.br {
  bottom: 28px;
  right: 28px;
  transform: scale(-1, -1);
}

/* Logo */
.pre-logo {
  font-size: clamp(3.5rem, 12vw, 7rem);
  letter-spacing: 0.25em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.12);
  position: relative;
  line-height: 1;
}

.pre-logo-fill {
  position: absolute;
  top: 0;
  left: 0;
  font-size: inherit;
  letter-spacing: inherit;
  color: #fff;
  white-space: nowrap;
  -webkit-clip-path: inset(100% 0 0 0);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s cubic-bezier(0.76, 0, 0.24, 1);
}

.pre-logo-fill.reveal {
  -webkit-clip-path: inset(0% 0 0 0);
  clip-path: inset(0% 0 0 0);
}

/* Loader Ring */
.loader-ring {
  position: relative;
  width: 72px;
  height: 72px;
}

.loader-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  animation: ring-spin 2s linear infinite;
}

.ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 2;
}

.ring-arc {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 180 226;
  animation: arc-chase 2s ease-in-out infinite;
}

.ring-arc.a1 {
  stroke: rgba(255, 71, 28, 0.9);
  filter: drop-shadow(0 0 5px rgba(255, 71, 28, 0.9));
}

.ring-arc.a2 {
  stroke: rgba(255, 71, 28, 0.9);
  stroke-dasharray: 60 346;
  animation: arc-chase2 2s ease-in-out infinite;
}

.ring-center-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: rgba(255, 71, 28, 0.9);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(255, 71, 28, 0.9);
  animation: dot-breathe 2s ease-in-out infinite;
}

@keyframes ring-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes arc-chase {
  0% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: -180;
  }
  100% {
    stroke-dashoffset: -406;
  }
}
@keyframes arc-chase2 {
  0% {
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dashoffset: -80;
  }
  100% {
    stroke-dashoffset: -406;
  }
}
@keyframes dot-breathe {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 1;
  }
}
/* Counter */
.pre-count {
  font-size: 18px;
  color: #fff;
}

.pre-count span {
  font-weight: 700;
}

/* Page hidden initially */
#page {
  opacity: 0;
  transition: opacity 0.25s ease;
}

#page.visible {
  opacity: 1;
}

@-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 gelatine {
  from, to {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.7, 1.1);
  }
  50% {
    transform: scale(1.1, 0.7);
  }
  75% {
    transform: scale(0.95, 1.05);
  }
}
@keyframes scale-up-two {
  0% {
    -webkit-transform: scale(0.2);
    transform: scale(0.5);
  }
  40% {
    -webkit-transform: scale(0.4);
    transform: scale(0.8);
  }
  100% {
    -webkit-transform: scale(0.15);
    transform: scale(0.15);
  }
}
@keyframes cir36 {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rounded {
  50% {
    transform: rotate(15deg);
  }
}
@keyframes up-down {
  0% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(-10px);
  }
}
@-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);
  }
}
@keyframes rounded {
  50% {
    transform: rotate(20deg);
  }
}
@keyframes cir36 {
  100% {
    transform: rotate(360deg);
  }
}
.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);
  }
}
.float-bob-x {
  -webkit-animation-name: float-bob-x;
  animation-name: float-bob-x;
  -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-x {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(30px);
  }
  50% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
}
@keyframes float-bob-x {
  0% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
  50% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
}
@keyframes bounce-x {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  50% {
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.bounce-x {
  -webkit-animation: bounce-x 7s infinite linear;
  animation: bounce-x 7s infinite linear;
}

@keyframes criss-cross-left {
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 50%;
    width: 375px;
    height: 375px;
  }
}
@keyframes criss-cross-right {
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    right: 50%;
    width: 375px;
    height: 375px;
  }
}
@keyframes rotated2 {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(-360deg);
  }
}
@keyframes wave {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-25%);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes zoom {
  0% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.5);
  }
}
@keyframes translateY2 {
  0% {
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  100% {
    -webkit-transform: translateY(20px);
    -moz-transform: translateY(20px);
    -ms-transform: translateY(20px);
    -o-transform: translateY(20px);
    transform: translateY(20px);
  }
}
@keyframes translateX2 {
  0% {
    -webkit-transform: translateX(-30px);
    -moz-transform: translateX(-30px);
    -ms-transform: translateX(-30px);
    -o-transform: translateX(-30px);
    transform: translateX(-30px);
  }
  100% {
    -webkit-transform: translatXY(20px);
    -moz-transform: translateX(20px);
    -ms-transform: translateX(20px);
    -o-transform: translateX(20px);
    transform: translateX(20px);
  }
}
@keyframes moving {
  0% {
    transform: translatey(0px);
  }
  20% {
    transform: translateX(-50px);
  }
  50% {
    transform: translatey(-40px);
  }
  100% {
    transform: translatey(0px);
  }
}
/*img-animation**********************/
.img-custom-anim-right {
  animation: img-anim-right 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
  opacity: 0;
}

@keyframes img-anim-right {
  0% {
    transform: translateX(5%);
    clip-path: inset(0 0 0 100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
.img-custom-anim-left {
  animation: img-anim-left 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1) 0.4s;
  opacity: 0;
}

@keyframes img-anim-left {
  0% {
    transform: translateX(-5%);
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
.img-custom-anim-top {
  animation: img-anim-top 1.3s forwards cubic-bezier(0.645, 0.045, 0.355, 1);
  opacity: 0;
}

@keyframes img-anim-top {
  0% {
    transform: translateY(-5%);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}
@keyframes animate-positive {
  0% {
    width: 0;
  }
}
@keyframes scale {
  0% {
    top: -1000px;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0;
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
.animation-infinite {
  animation: ShapeAnim 50s linear infinite;
  height: 30px;
  width: 100%;
  background-repeat: repeat;
  overflow: hidden;
}

@keyframes ShapeAnim {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top left 3000px;
  }
}
.splt-txt .whitespace {
  width: 8px;
}

.splt-txt.animated .char {
  -webkit-animation: fadeIn 0.4s cubic-bezier(0.3, 0, 0.7, 1) both;
  animation: fadeIn 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));
}

.splt-txt-bounce .whitespace {
  width: 20px;
}

@media (max-width: 991px) {
  .splt-txt-bounce .whitespace {
    width: 10px;
  }
}
.splt-txt-bounce.animated .char {
  -webkit-animation: bounceIn 0.4s cubic-bezier(0.3, 0, 0.7, 1) both;
  animation: bounceIn 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));
}

/*---------------------------------------
04. Layouts
---------------------------------------*/
.sticky-menu {
  background-color: #191a18;
  animation: 400ms ease-in-out 0s normal none 1 running fadeInDown;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);
  border-radius: 0;
  position: fixed !important;
  top: 0 !important;
  left: 0;
  padding: 18px 150px;
  border: none;
}
@media (max-width: 1899px) {
  .sticky-menu {
    padding-left: 60px;
    padding-right: 60px;
  }
}
@media (max-width: 1399px) {
  .sticky-menu {
    padding-left: 60px;
    padding-right: 60px;
  }
}
@media (max-width: 1199px) {
  .sticky-menu {
    padding-left: 90px;
    padding-right: 90px;
  }
}
@media (max-width: 991px) {
  .sticky-menu {
    padding-left: 50px;
    padding-right: 50px;
  }
}
@media (max-width: 767px) {
  .sticky-menu {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (max-width: 575px) {
  .sticky-menu {
    padding-left: 15px;
    padding-right: 15px;
  }
}

.sticky-menu .mobile-menu-area {
  background-color: #191a18;
}

/* ===============================
   NAVBAR
================================= */
.header-main .navbar .navbar-nav .menu-thumb {
  position: inherit !important;
}
.header-main .navbar .navbar-nav .has-homemenu::-webkit-scrollbar {
  display: none;
}
.header-main .navbar .navbar-nav .has-homemenu {
  -ms-overflow-style: none;
}
.header-main .navbar .navbar-nav .nav-item {
  position: relative;
  margin-inline-end: 30px;
}
.header-main .navbar .navbar-nav .nav-item:last-child {
  margin-inline-end: 0;
}
.header-main .navbar .navbar-nav .nav-item .nav-link {
  color: var(--header);
  font-size: 16px;
  font-weight: 700;
}
.header-main .navbar .navbar-nav .nav-item .nav-link i {
  font-size: 10px;
  position: relative;
  top: -1px;
  margin-left: 3px;
  transition: all 0.4s ease-in-out;
}
.header-main .navbar .navbar-nav .nav-item {
  /* ===============================
     FIRST LEVEL SUBMENU
  ================================= */
}
.header-main .navbar .navbar-nav .nav-item > .sub-menu {
  min-width: 235px;
  background-color: #171414;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: scaleY(0);
  transform-origin: top;
  transition: all 0.4s ease;
  border-radius: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: rgba(20, 20, 21, 0.2) 0px 7px 29px 0px;
}
.header-main .navbar .navbar-nav .nav-item > .sub-menu li {
  position: relative;
}
.header-main .navbar .navbar-nav .nav-item > .sub-menu li a {
  color: var(--header);
  display: block;
  width: 100%;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-main .navbar .navbar-nav .nav-item > .sub-menu li a:hover {
  color: var(--theme);
}
.header-main .navbar .navbar-nav .nav-item > .sub-menu li a i {
  font-size: 12px;
  transition: all 0.4s ease-in-out;
}
.header-main .navbar .navbar-nav .nav-item > .sub-menu li:not(:last-child) a {
  border-bottom: 1px solid #211e1e;
}
.header-main .navbar .navbar-nav .nav-item > .sub-menu li:last-child a {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.header-main .navbar .navbar-nav .nav-item > .sub-menu li:hover i {
  transform: rotate(90deg);
}
.header-main .navbar .navbar-nav .nav-item .has-homemenu {
  padding: 20px 20px 10px 20px !important;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 0;
  right: 0;
  padding: 0;
  width: 100%;
  z-index: 999;
  overflow: hidden;
  margin: auto;
  overflow: hidden;
  margin: auto;
  max-height: 740px;
  overflow-y: auto;
  overflow-x: hidden;
}
.header-main .navbar .navbar-nav .nav-item .has-homemenu .homemenu-items .homemenu .homemenu-thumb {
  border-radius: 10px;
  position: relative;
}
.header-main .navbar .navbar-nav .nav-item .has-homemenu .homemenu-items .homemenu .homemenu-thumb::before {
  background: linear-gradient(to bottom, rgba(255, 71, 28, 0) 0%, #FF471C 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: "";
  border-radius: 10px;
}
.header-main .navbar .navbar-nav .nav-item .has-homemenu .homemenu-items .homemenu .homemenu-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.header-main .navbar .navbar-nav .nav-item .has-homemenu .homemenu-items .homemenu .homemenu-thumb .demo-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
  margin-top: 20px;
  left: 25px;
  right: 25px;
  max-width: 160px;
  margin: 20px auto 0;
}
.header-main .navbar .navbar-nav .nav-item .has-homemenu .homemenu-items .homemenu .homemenu-thumb .demo-button .theme-btn {
  padding: 16px 18px;
  justify-content: center;
  line-height: 1;
  background-color: var(--theme);
  color: var(--white);
  border-radius: 30px;
}
.header-main .navbar .navbar-nav .nav-item .has-homemenu .homemenu-items .homemenu .homemenu-thumb .demo-button .theme-btn:hover {
  background-color: var(--white);
  color: #000;
}
.header-main .navbar .navbar-nav .nav-item .has-homemenu .homemenu-items .homemenu .homemenu-thumb .demo-button .theme-btn i {
  margin-left: 10px;
  transform: initial;
}
.header-main .navbar .navbar-nav .nav-item .has-homemenu .homemenu-items .homemenu .homemenu-content {
  text-align: center;
}
.header-main .navbar .navbar-nav .nav-item .has-homemenu .homemenu-items .homemenu .hometitle {
  text-align: center;
  font-family: "Urbanist", sans-serif;
  display: inline-block;
  font-size: 18px;
  font-weight: 500;
  color: var(--white);
  padding: 0;
  padding-top: 15px;
}
.header-main .navbar .navbar-nav .nav-item .has-homemenu .homemenu-items .homemenu:hover .homemenu-thumb::before {
  visibility: visible;
  opacity: 1;
}
.header-main .navbar .navbar-nav .nav-item .has-homemenu .homemenu-items .homemenu:hover .homemenu-thumb .demo-button {
  opacity: 1;
  visibility: visible;
  margin-top: 0;
}
.header-main .navbar .navbar-nav .nav-item {
  /* SHOW FIRST LEVEL */
}
.header-main .navbar .navbar-nav .nav-item:hover > .sub-menu,
.header-main .navbar .navbar-nav .nav-item .sub-menu:hover {
  opacity: 1;
  visibility: visible;
  transform: scaleY(1);
}
.header-main .navbar .navbar-nav .nav-item:hover .nav-link i {
  transform: rotate(-180deg);
}
.header-main .sidebar__toggle {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 6px;
  width: 25px;
  height: 25px;
  position: relative;
  top: 0;
  inset-inline-start: 0;
  -webkit-margin-start: 5px;
  margin-inline-start: 5px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.header-main .sidebar__toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background-color: var(--white);
  border-radius: 10px;
  margin-inline-end: auto;
  backface-visibility: hidden;
  transition: all 0.3s;
}
.header-main .sidebar__toggle span:last-child, .header-main .sidebar__toggle span:first-child {
  width: 25px;
}
.header-main .sidebar__toggle.mobile_menu_bar {
  width: 50px;
  height: 50px;
  padding: 12px;
  background: var(--white);
  border-radius: 7px;
}
.header-main .sidebar__toggle.mobile_menu_bar span {
  background-color: var(--white);
}
.header-main .sidebar__toggle:hover span {
  width: 100%;
}

/* ===============================
   NESTED SUBMENU (LEVEL 2+)
================================= */
.sub-menu li {
  position: relative;
  /* CHILD SUBMENU */
}
.sub-menu li > .sub-menu {
  position: absolute;
  top: 0;
  left: 100%;
  margin-top: 0;
  min-width: 235px;
  background-color: #171414;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  border-radius: 10px;
  box-shadow: rgba(20, 20, 21, 0.2) 0px 7px 29px 0px;
}
.sub-menu li > .sub-menu li a {
  padding: 12px 18px;
}
.sub-menu li {
  /* SHOW CHILD */
}
.sub-menu li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mobile-menu-area {
  z-index: 999999;
  width: 100%;
  transition: all 0.4s ease-in-out;
  margin-top: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 18px 0;
}
.mobile-menu-area .mobile-topbar {
  width: 100%;
}
.mobile-menu-area .mobile-topbar .bars {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  gap: 6px;
  width: 25px;
  height: 25px;
  position: relative;
  top: 0;
  inset-inline-start: 0;
  -webkit-margin-start: 5px;
  margin-inline-start: 5px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.mobile-menu-area .mobile-topbar .bars span {
  display: block;
  width: 18px;
  height: 2px;
  background-color: var(--white);
  border-radius: 10px;
  margin-inline-end: auto;
  backface-visibility: hidden;
  transition: all 0.3s;
}
.mobile-menu-area .mobile-topbar .bars span:last-child, .mobile-menu-area .mobile-topbar .bars span:first-child {
  width: 25px;
}
.mobile-menu-area .mobile-topbar .bars.mobile_menu_bar {
  width: 50px;
  height: 50px;
  padding: 12px;
  background: var(--white);
  border-radius: 7px;
}
.mobile-menu-area .mobile-topbar .bars.mobile_menu_bar span {
  background-color: var(--white);
}
.mobile-menu-area .mobile-topbar .bars:hover span {
  width: 100%;
}
.mobile-menu-area {
  /* =========================
     OVERLAY
  ========================= */
}
.mobile-menu-area .mobile-menu-overlay {
  width: 100%;
  height: 100%;
  backdrop-filter: blur(15px);
  background-color: rgba(252, 245, 234, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease;
}
.mobile-menu-area .mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}
.mobile-menu-area {
  /* =========================
     MAIN MENU (FIXED)
  ========================= */
}
.mobile-menu-area .mobile-menu-main {
  width: 390px;
  height: 100%;
  background-color: #0c0c0c;
  position: fixed;
  top: 0;
  left: -390px;
  z-index: 999;
  overflow-y: scroll;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  top: 15px;
  height: calc(100% - 30px);
  border-start-start-radius: 12px;
  border-end-start-radius: 12px;
  border-radius: 12px;
}
@media (max-width: 470px) {
  .mobile-menu-area .mobile-menu-main {
    width: 300px;
  }
}
.mobile-menu-area .mobile-menu-main .logo {
  padding: 30px;
}
@media (max-width: 470px) {
  .mobile-menu-area .mobile-menu-main .logo img {
    width: 130px;
  }
}
.mobile-menu-area .mobile-menu-main .close-mobile-menu {
  position: absolute;
  top: 34px;
  right: 10px;
}
.mobile-menu-area .mobile-menu-main .close-mobile-menu i {
  width: 35px;
  height: 35px;
  text-align: center;
  line-height: 35px;
  color: var(--white);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.4s ease-in-out;
}
.mobile-menu-area .mobile-menu-main .menu-body .menu-list {
  padding-top: 10px;
}
.mobile-menu-area .mobile-menu-main .menu-body .menu-list ul li a {
  color: var(--white);
  font-size: 18px;
  font-weight: 500;
  border-top: 1px solid rgba(193, 210, 206, 0.0705882353) !important;
  width: 100%;
  padding: 12px 30px;
  padding-right: 10px;
  transition: all 0.4s ease-in-out;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobile-menu-area .mobile-menu-main .menu-body .menu-list ul li a i {
  width: 32px;
  height: 32px;
  background-color: var(--white);
  color: #000;
  text-align: center;
  line-height: 32px;
  font-size: 12px;
  border-radius: 3px;
  transition: all 0.4s ease-in-out;
  margin-right: 15px;
}
.mobile-menu-area .mobile-menu-main .menu-body .menu-list ul li a:hover {
  color: var(--theme);
}
.mobile-menu-area .mobile-menu-main .menu-body .menu-list ul li a:hover i {
  background-color: var(--theme);
  color: var(--white);
}
.mobile-menu-area .mobile-menu-main .menu-body .menu-list ul li ul {
  padding-left: 0;
  display: none;
}
.mobile-menu-area .mobile-menu-main .menu-body .menu-list ul li ul a {
  padding-left: 40px;
}
.mobile-menu-area .mobile-menu-main .menu-body .menu-list ul li ul li:last-child a {
  border-bottom: 0;
}
.mobile-menu-area .mobile-menu-main .menu-body .menu-list ul li:last-child a {
  border-bottom: 1px solid rgba(193, 210, 206, 0.0705882353) !important;
}
.mobile-menu-area .mobile-menu-main .off-contact-area {
  padding: 30px;
  padding-top: 0;
  display: none;
}
.mobile-menu-area .mobile-menu-main .off-contact-info {
  margin-top: 30px;
}
.mobile-menu-area .mobile-menu-main .off-contact-info .info-title {
  font-size: 24px;
  color: var(--white);
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
}
@media (max-width: 575px) {
  .mobile-menu-area .mobile-menu-main .off-contact-info .info-title {
    font-size: 20px;
  }
}
.mobile-menu-area .mobile-menu-main .off-contact-info .contact-details {
  margin-top: 14px;
}
.mobile-menu-area .mobile-menu-main .off-contact-info .contact-details .sub-info {
  color: #C1D2CE;
}
@media (max-width: 575px) {
  .mobile-menu-area .mobile-menu-main .off-contact-info .contact-details .sub-info {
    font-size: 14px;
  }
}
.mobile-menu-area .mobile-menu-main .off-contact-info .contact-details p {
  color: var(--white);
  font-family: "Urbanist", sans-serif;
  font-size: 17px;
  font-weight: 600;
}
@media (max-width: 575px) {
  .mobile-menu-area .mobile-menu-main .off-contact-info .contact-details p {
    font-size: 15px;
  }
}
.mobile-menu-area .mobile-menu-main .off-contact-info .contact-details p a {
  color: var(--white);
}
.mobile-menu-area .mobile-menu-main .social-icon-list {
  margin-top: 30px;
}
.mobile-menu-area .mobile-menu-main .social-icon-list .follow-title {
  font-size: 24px;
  color: var(--white);
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
}
@media (max-width: 575px) {
  .mobile-menu-area .mobile-menu-main .social-icon-list .follow-title {
    font-size: 20px;
  }
}
.mobile-menu-area .mobile-menu-main .social-icon-list .social-icon {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
}
.mobile-menu-area .mobile-menu-main .social-icon-list .social-icon a {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
  background: rgba(193, 210, 206, 0.0705882353);
  color: var(--white);
  font-size: 14px;
}
.mobile-menu-area .mobile-menu-main .social-icon-list .social-icon a:hover {
  background-color: var(--theme);
  color: var(--header);
}
.mobile-menu-area {
  /* 🔥 ACTIVE STATE */
}
.mobile-menu-area .mobile-menu-main.active {
  left: 15px !important;
}
.mobile-menu-area .mobile-menu-action-btn {
  padding: 20px;
}
.mobile-menu-area .mobile-menu-action-btn a {
  color: var(--theme);
  padding: 12px 0;
  font-size: 16px;
  font-weight: 700;
  border-radius: 5px;
  width: 100%;
  text-align: center;
}
.mobile-menu-area .mobile-menu-action-btn a i {
  font-size: 14px;
  margin-left: 8px;
}
.mobile-menu-area .mobile-menu-action-btn a:hover {
  background-color: var(--header);
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
  z-index: 2000;
}

/* Mobile Menu Main */
.mobile-menu-main {
  z-index: 2001;
}

/* --------------------------------------------------------------------------
   Mobile menu, detached to <body> by main.js.

   The sticky header carries backdrop-filter, which makes it the containing
   block for its position:fixed descendants. The panel lived inside it and used
   height: calc(100% - 30px), so when the header went sticky that resolved
   against the 80px header: the menu collapsed to 50px and its close button
   disappeared behind the header. Moving it to <body> is the fix; these rules
   support the move.

   The wrapper reuses .mobile-menu-area so every rule scoped under that class
   keeps matching, but must NOT inherit the top bar's absolute, full-width,
   padded positioning.
   -------------------------------------------------------------------------- */
.mobile-menu-area.wt-mm-detached {
  position: static;
  width: auto;
  padding: 0;
  margin-top: 0;
  z-index: auto;
}

/* Above the header (99999) and the mobile top bar (999999). The open panel sat
   at 999, so the header painted over it. */
.mobile-menu-area.wt-mm-detached .mobile-menu-overlay { z-index: 1000000; }
.mobile-menu-area.wt-mm-detached .mobile-menu-main    { z-index: 1000001; }

/* Measured against the real viewport now. dvh tracks collapsing browser chrome
   on phones, where 100vh overshoots and pushes the last menu items out of reach. */
.mobile-menu-area.wt-mm-detached .mobile-menu-main {
  height: calc(100vh - 30px);
  height: calc(100dvh - 30px);
}

/*=============================
	12. Offcanvas CSS Start
===============================*/
.offcanvas-overlay {
  backdrop-filter: blur(15px);
  background-color: rgba(252, 245, 234, 0.1);
  z-index: 999;
  transition: all 0.4s ease-in-out;
  visibility: hidden;
  opacity: 0;
  cursor: crosshair;
}
.offcanvas-overlay.active {
  visibility: visible;
  opacity: 1;
}

.offcanvas-menu {
  max-width: 450px;
  z-index: 9999;
  padding: 40px;
  overflow-y: auto;
  scrollbar-width: thin;
  font-size: 20px;
  right: -450px;
  transition: all 0.4s ease-in-out;
  visibility: hidden;
  opacity: 0;
  background-color: #0c0c0c;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  top: 15px;
  width: 470px;
  height: calc(100% - 30px);
  border-start-start-radius: 12px;
  border-end-start-radius: 12px;
  border-radius: 12px;
}
.offcanvas-menu .offcasvas-close {
  width: 50px;
  height: 50px;
  background: var(--theme);
}
.offcanvas-menu .header-top {
  margin-bottom: 30px;
}
.offcanvas-menu .action-title {
  font-size: 24px;
  display: block;
  font-family: "Urbanist", sans-serif;
  font-weight: 600;
  color: var(--header);
}
.offcanvas-menu .news-btn {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  font-family: "Urbanist", sans-serif;
  color: var(--white);
  overflow: hidden;
  text-transform: capitalize;
  margin-top: 18px;
}
.offcanvas-menu .news-btn i {
  margin-left: 7px;
}
.offcanvas-menu .news-btn .text {
  position: relative;
  display: inline-block;
  height: 22px;
  overflow: hidden;
}
.offcanvas-menu .news-btn .text-default,
.offcanvas-menu .news-btn .text-hover {
  display: block;
  transition: transform 0.4s ease;
}
.offcanvas-menu .news-btn .text-hover {
  position: absolute;
  left: 0;
  top: 100%;
  color: var(--theme);
}
.offcanvas-menu .news-btn:hover .text-default {
  transform: translateY(-100%);
}
.offcanvas-menu .news-btn:hover .text-hover {
  transform: translateY(-100%);
}
.offcanvas-menu .news-btn i {
  transition: transform 0.4s ease;
}
.offcanvas-menu .offcanvas_gallery {
  height: 264px;
  position: relative;
  margin-top: 30px;
}
.offcanvas-menu .offcanvas_gallery .gallery_img {
  --i: 0;
  max-width: 146px;
  width: 100%;
  aspect-ratio: 146/167;
  object-fit: cover;
  position: absolute;
  left: calc(var(--i) * 82px);
  bottom: calc(var(--i) * 32px);
  z-index: 0;
  transform: translateY(0) scale(1);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
  border-radius: 8px;
}
.offcanvas-menu .offcanvas_gallery .gallery_img:nth-child(2) {
  --i: 1;
}
.offcanvas-menu .offcanvas_gallery .gallery_img:nth-child(3) {
  --i: 2;
}
.offcanvas-menu .offcanvas_gallery .gallery_img:nth-child(4) {
  --i: 3;
}
.offcanvas-menu .offcanvas_gallery .gallery_img:hover {
  z-index: 1;
  transform: translateY(-5px) scale(1.02);
}
.offcanvas-menu .offcanvas_gallery .gallery_img:hover ~ .gallery_img {
  z-index: 0;
}
.offcanvas-menu .off-contact-info {
  margin-top: 40px;
}
.offcanvas-menu .off-contact-info .info-title {
  font-size: 24px;
  color: var(--white);
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
}
@media (max-width: 575px) {
  .offcanvas-menu .off-contact-info .info-title {
    font-size: 20px;
  }
}
.offcanvas-menu .off-contact-info .contact-details {
  margin-top: 14px;
}
.offcanvas-menu .off-contact-info .contact-details .sub-info {
  color: #C1D2CE;
}
@media (max-width: 575px) {
  .offcanvas-menu .off-contact-info .contact-details .sub-info {
    font-size: 14px;
  }
}
.offcanvas-menu .off-contact-info .contact-details p {
  color: var(--white);
  font-family: "Urbanist", sans-serif;
  font-size: 17px;
  font-weight: 600;
}
@media (max-width: 575px) {
  .offcanvas-menu .off-contact-info .contact-details p {
    font-size: 15px;
  }
}
.offcanvas-menu .off-contact-info .contact-details p a {
  color: var(--white);
}
.offcanvas-menu .social-icon-list {
  margin-top: 30px;
}
.offcanvas-menu .social-icon-list .follow-title {
  font-size: 24px;
  color: var(--white);
  font-family: "Urbanist", sans-serif;
  font-weight: 700;
}
@media (max-width: 575px) {
  .offcanvas-menu .social-icon-list .follow-title {
    font-size: 20px;
  }
}
.offcanvas-menu .social-icon-list .social-icon {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
}
.offcanvas-menu .social-icon-list .social-icon a {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
  background: rgba(193, 210, 206, 0.0705882353);
  color: var(--white);
  font-size: 14px;
}
.offcanvas-menu .social-icon-list .social-icon a:hover {
  background-color: var(--theme);
  color: var(--header);
}
.offcanvas-menu.active {
  right: 0;
  visibility: visible;
  opacity: 1;
  right: 15px;
}

/* ===============================
   HEADER
================================= */
.header-1 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99999;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding: 25px 150px;
}
@media (max-width: 1899px) {
  .header-1 {
    padding-left: 60px;
    padding-right: 60px;
  }
}
@media (max-width: 1399px) {
  .header-1 {
    padding-left: 60px;
    padding-right: 60px;
  }
}
@media (max-width: 1199px) {
  .header-1 {
    padding-left: 90px;
    padding-right: 90px;
    border-bottom: none;
  }
}
@media (max-width: 991px) {
  .header-1 {
    padding-left: 50px;
    padding-right: 50px;
  }
}
@media (max-width: 767px) {
  .header-1 {
    padding-left: 30px;
    padding-right: 30px;
  }
}
@media (max-width: 575px) {
  .header-1 {
    padding-left: 15px;
    padding-right: 15px;
  }
}
.header-1 .menu-right-info {
  display: flex;
  align-items: center;
  gap: 40px;
}
.header-1 .menu-right-info .search-toggler {
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  border-radius: 50%;
}

.header-2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99999;
}
.header-2 .mobile-menu-area {
  padding-left: 30px;
  padding-right: 30px;
}
.header-2 .mobile-menu-main {
  left: initial !important;
  right: -390px !important;
}
.header-2 .mobile-menu-area .mobile-menu-main.active {
  right: 15px !important;
  left: initial !important;
}
.header-2 .header-right {
  display: flex;
  align-items: center;
  gap: 35px;
}
@media (max-width: 1199px) {
  .header-2 .header-right {
    gap: 20px;
  }
}
@media (max-width: 1199px) {
  .header-2 .header-right .theme-btn-main {
    display: none;
  }
}
.header-2 .header-text {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.35em;
}
@media (max-width: 1199px) {
  .header-2 .header-text {
    display: none;
  }
}

.header-3 {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99999;
  padding: 18px 30px;
}
@media (max-width: 1199px) {
  .header-3 {
    top: 0;
  }
}
.header-3 .header-right {
  display: flex;
  align-items: center;
  gap: 35px;
}
@media (max-width: 1199px) {
  .header-3 .header-right {
    gap: 20px;
  }
}
@media (max-width: 1199px) {
  .header-3 .header-right .theme-btn-main {
    display: none;
  }
}

.header-4 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 99999;
  padding: 18px 60px;
}
.header-4 .navbar-nav {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.1);
  padding: 10px 15px;
}
.header-4 .navbar-nav .nav-item {
  margin-inline-end: 0 !important;
}
.header-4 .navbar-nav .nav-item .nav-link {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  line-height: 1;
  text-transform: uppercase;
  padding: 9px 8px;
  color: rgba(255, 255, 255, 0.5) !important;
}
.header-4 .navbar-nav .nav-item .nav-link:hover {
  color: var(--white) !important;
}
.header-4 .header-right {
  display: flex;
  align-items: center;
  gap: 35px;
}
@media (max-width: 1199px) {
  .header-4 .header-right {
    gap: 20px;
  }
}
@media (max-width: 1199px) {
  .header-4 .header-right .theme-btn-main {
    display: none;
  }
}
.header-4 .header-call-info {
  display: flex;
  align-items: center;
  gap: 50px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  border-radius: 100px;
  padding: 11px 15px;
}
.header-4 .header-call-info .call-number {
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-block;
  padding: 5px 10px;
  border-radius: 20px;
}

.breadcrumb-wrapper {
  position: relative;
  overflow: hidden;
  z-index: 9;
}
.breadcrumb-wrapper .light-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.breadcrumb-wrapper .page-heading {
  position: relative;
  padding: 180px 0 0;
  z-index: 9;
  margin-bottom: 50px;
}
@media (max-width: 1199px) {
  .breadcrumb-wrapper .page-heading {
    padding: 150px 0 0;
    text-align: center;
  }
}
@media (max-width: 767px) {
  .breadcrumb-wrapper .page-heading {
    text-align: center;
    padding-top: 150px;
  }
}
.breadcrumb-wrapper .page-heading h1 {
  color: var(--white);
  font-size: 110px;
  position: relative;
  z-index: 9;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 116%;
  font-weight: 600;
}
.breadcrumb-wrapper .page-heading h1 span {
  font-weight: 400;
  font-family: "Instrument Serif", serif;
  font-style: italic;
}
@media (max-width: 1399px) {
  .breadcrumb-wrapper .page-heading h1 {
    font-size: 80px;
  }
}
@media (max-width: 991px) {
  .breadcrumb-wrapper .page-heading h1 {
    font-size: 70px;
  }
  .breadcrumb-wrapper .page-heading h1 br {
    display: none;
  }
}
@media (max-width: 767px) {
  .breadcrumb-wrapper .page-heading h1 {
    font-size: 55px;
  }
}
@media (max-width: 575px) {
  .breadcrumb-wrapper .page-heading h1 {
    font-size: 50px;
  }
}
@media (max-width: 470px) {
  .breadcrumb-wrapper .page-heading h1 {
    font-size: 40px;
  }
}
.breadcrumb-wrapper .page-heading .breadcrumb-items {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-top: 20px;
}
@media (max-width: 1199px) {
  .breadcrumb-wrapper .page-heading .breadcrumb-items {
    display: grid;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
  }
}
.breadcrumb-wrapper .page-heading .breadcrumb-items ul {
  display: flex;
  align-items: center;
  gap: 60px;
  margin-bottom: 30px;
}
@media (max-width: 1199px) {
  .breadcrumb-wrapper .page-heading .breadcrumb-items ul {
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
  }
}
.breadcrumb-wrapper .page-heading .breadcrumb-items ul li {
  font-size: 24px;
  font-weight: 600;
  color: var(--white);
}
@media (max-width: 1199px) {
  .breadcrumb-wrapper .page-heading .breadcrumb-items ul li {
    font-size: 16px;
  }
}
.breadcrumb-wrapper .page-heading .breadcrumb-items .title {
  font-size: 160px;
  font-weight: 400;
  font-family: "Instrument Serif", serif;
  font-style: italic;
  line-height: 1.1;
  margin-bottom: 0;
  letter-spacing: -0.01em;
}
@media (max-width: 1399px) {
  .breadcrumb-wrapper .page-heading .breadcrumb-items .title {
    font-size: 150px;
  }
}
@media (max-width: 767px) {
  .breadcrumb-wrapper .page-heading .breadcrumb-items .title {
    font-size: 100px;
  }
}
@media (max-width: 575px) {
  .breadcrumb-wrapper .page-heading .breadcrumb-items .title {
    font-size: 70px;
  }
}
@media (max-width: 470px) {
  .breadcrumb-wrapper .page-heading .breadcrumb-items .title {
    font-size: 60px;
  }
}

.error-items {
  text-align: center;
  position: relative;
}
.error-items .error-image {
  margin: 0 auto 40px;
}
.error-items .error-image img {
  width: 100%;
  height: 100%;
}
.error-items h2 {
  font-size: 72px;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 25px;
}
@media (max-width: 1399px) {
  .error-items h2 {
    font-size: 53px;
  }
}
@media (max-width: 991px) {
  .error-items h2 {
    font-size: 50px;
  }
}
@media (max-width: 767px) {
  .error-items h2 {
    font-size: 40px;
  }
}
@media (max-width: 575px) {
  .error-items h2 {
    font-size: 30px;
  }
}
.error-items p {
  margin: 0 auto 30px;
  font-size: 18px;
  font-weight: 400;
  max-width: 390px;
}

.footer-widget-wrapper {
  padding: 90px 0 120px;
}
@media (max-width: 1199px) {
  .footer-widget-wrapper {
    padding: 70px 0 100px;
  }
}
@media (max-width: 991px) {
  .footer-widget-wrapper {
    padding: 50px 0 80px;
  }
}
.footer-widget-wrapper .footer-widget-items {
  margin-top: 30px;
}
.footer-widget-wrapper .footer-widget-items .widget-head {
  margin-bottom: 30px;
}
.footer-widget-wrapper .footer-widget-items .widget-head span {
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  display: inline-block;
  font-family: "Urbanist", sans-serif;
  text-transform: capitalize;
}
.footer-widget-wrapper .footer-widget-items .footer-content {
  max-width: 310px;
}
.footer-widget-wrapper .footer-widget-items .footer-content p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  line-height: 162%;
  font-weight: 600;
}
.footer-widget-wrapper .footer-widget-items .footer-content .social-icon {
  gap: 8px;
  margin-top: 30px;
}
.footer-widget-wrapper .footer-widget-items .footer-content .social-icon a {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 50%;
  background-color: rgba(75, 67, 67, 0.4);
  color: var(--white);
  font-size: 14px;
  text-align: center;
}
.footer-widget-wrapper .footer-widget-items .footer-content .social-icon a:hover {
  background-color: var(--theme);
}
.footer-widget-wrapper .footer-widget-items .gt-list-area li {
  transition: all 0.4s ease-in-out;
  font-size: 16px;
  font-weight: 600;
}
.footer-widget-wrapper .footer-widget-items .gt-list-area li:not(:last-child) {
  margin-bottom: 15px;
}
.footer-widget-wrapper .footer-widget-items .gt-list-area li a {
  color: rgba(255, 255, 255, 0.7);
}
.footer-widget-wrapper .footer-widget-items .gt-list-area li:hover {
  margin-left: 5px;
}
.footer-widget-wrapper .footer-widget-items .gt-list-area li:hover a {
  color: var(--theme);
}
.footer-widget-wrapper .footer-widget-items .footer-contact .talk-title {
  font-size: 55px;
  font-weight: 500;
  color: var(--white);
  text-transform: capitalize;
}
@media (max-width: 575px) {
  .footer-widget-wrapper .footer-widget-items .footer-contact .talk-title {
    font-size: 42px;
  }
}
.footer-widget-wrapper .footer-widget-items .footer-contact p {
  font-size: 18px;
  color: var(--white);
}
.footer-widget-wrapper .footer-widget-items .footer-contact .mail-text {
  color: var(--white);
  font-size: 18px;
  display: block;
  margin-bottom: 10px;
  margin-top: 15px;
}
.footer-widget-wrapper .footer-widget-items .footer-contact .number-text {
  color: var(--white);
  font-size: 24px;
  font-weight: 600;
}
.footer-widget-wrapper .footer-widget-items .footer-contact .social-icon {
  gap: 8px;
  margin-top: 30px;
}
.footer-widget-wrapper .footer-widget-items .footer-contact .social-icon a {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 50%;
  background-color: rgba(75, 67, 67, 0.4);
  color: var(--white);
  font-size: 14px;
  text-align: center;
}
.footer-widget-wrapper .footer-widget-items .footer-contact .social-icon a:hover {
  background-color: var(--theme);
}
.footer-widget-wrapper .footer-form-3 .subscribe-text {
  color: var(--white);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -1px;
  text-transform: capitalize;
}
@media (max-width: 575px) {
  .footer-widget-wrapper .footer-form-3 .subscribe-text {
    font-size: 26px;
  }
}
.footer-widget-wrapper .footer-form-3 .subscribe-text span {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-weight: 400;
}
.footer-widget-wrapper .footer-form-3 form {
  position: relative;
  margin-top: 25px;
}
.footer-widget-wrapper .footer-form-3 form input {
  width: 100%;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  padding: 22px 20px;
  border-radius: 0;
  line-height: 1;
  border-radius: 50px;
  color: rgba(255, 255, 255, 0.7);
  padding-right: 44px;
  font-size: 16px;
  font-weight: 500;
}
.footer-widget-wrapper .footer-form-3 form input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}
.footer-widget-wrapper .footer-form-3 form .email-btn {
  color: var(--theme);
  transition: all 0.4s ease-in-out;
  position: absolute;
  top: 6px;
  right: 18px;
  bottom: 6px;
}
.footer-widget-wrapper .footer-form-3 .sq-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 20px;
}
.footer-widget-wrapper .footer-form-3 .sq-checkbox input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
}
.footer-widget-wrapper .footer-form-3 .sq-checkbox .box {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border-radius: 4px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  display: inline-grid;
  place-items: center;
  transition: background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, transform 0.12s ease;
  background: rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
  flex-shrink: 0;
}
.footer-widget-wrapper .footer-form-3 .sq-checkbox .check {
  width: 14px;
  height: 14px;
  transform: scale(0);
  transition: transform 0.14s cubic-bezier(0.2, 0.9, 0.2, 1);
  color: var(--white);
}
.footer-widget-wrapper .footer-form-3 .sq-checkbox input:checked + .box {
  background: var(--theme);
  border-color: var(--theme);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}
.footer-widget-wrapper .footer-form-3 .sq-checkbox input:checked + .box .check {
  transform: scale(1);
}
.footer-widget-wrapper .footer-form-3 .sq-checkbox input:focus + .box {
  box-shadow: 0 0 0 4px rgba(14, 165, 164, 0.12);
  border-color: var(--theme);
}
.footer-widget-wrapper .footer-form-3 .sq-checkbox:active .box {
  transform: scale(0.98);
}
.footer-widget-wrapper .footer-form-3 .sq-checkbox .label-text {
  line-height: 1;
}
.footer-widget-wrapper .footer-form-3.style-3 form input {
  border-radius: 0;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 25px 0;
}
.footer-bottom .footer-bottom-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 991px) {
  .footer-bottom .footer-bottom-wrapper {
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
  }
}
.footer-bottom .footer-bottom-wrapper p {
  color: rgba(255, 255, 255, 0.87);
  font-family: "Urbanist", sans-serif;
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
}
.footer-bottom .footer-bottom-wrapper p b {
  color: var(--theme);
}
.footer-bottom .footer-bottom-wrapper .footer-list {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-bottom .footer-bottom-wrapper .footer-list li {
  font-size: 16px;
  font-weight: 500;
  font-family: "Urbanist", sans-serif;
  color: rgb(223, 220, 210);
}
.footer-bottom .footer-bottom-wrapper .footer-list li a {
  color: rgba(255, 255, 255, 0.87);
}
.footer-bottom .footer-bottom-wrapper .footer-list li a:hover {
  color: var(--theme);
}

.footer-section .container {
  max-width: 1675px;
}

.footer-widget-wrapper-2 {
  padding: 70px 0 100px;
}
@media (max-width: 991px) {
  .footer-widget-wrapper-2 {
    padding: 50px 0 80px;
  }
}
.footer-widget-wrapper-2 .footer-widget-items {
  margin-top: 30px;
}
.footer-widget-wrapper-2 .footer-widget-items .widget-head {
  margin-bottom: 30px;
}
.footer-widget-wrapper-2 .footer-widget-items .widget-head h3 {
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
  text-transform: capitalize;
}
.footer-widget-wrapper-2 .footer-widget-items .footer-content {
  max-width: 310px;
}
.footer-widget-wrapper-2 .footer-widget-items .footer-content p {
  color: #F2F5F7;
  font-size: 16px;
  line-height: 162.5%;
}
.footer-widget-wrapper-2 .footer-widget-items .footer-content .footer-btn {
  display: inline-block;
  height: 50px;
  line-height: 50px;
  border-radius: 70px;
  border: 1px solid #3D4857;
  background: transparent;
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  font-family: "Urbanist", sans-serif;
  padding: 0 30px;
  padding-left: 7px;
  margin-top: 30px;
}
.footer-widget-wrapper-2 .footer-widget-items .footer-content .footer-btn .icon {
  width: 36px;
  height: 36px;
  line-height: 36px;
  background-color: var(--theme);
  color: var(--white);
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  margin-right: 15px;
  transition: all 0.4s ease-in-out;
}
.footer-widget-wrapper-2 .footer-widget-items .footer-content .footer-btn:hover {
  background-color: var(--theme);
  border: 1px solid var(--theme);
}
.footer-widget-wrapper-2 .footer-widget-items .footer-content .footer-btn:hover .icon {
  background-color: var(--header);
}
.footer-widget-wrapper-2 .footer-widget-items .gt-list-area li {
  transition: all 0.4s ease-in-out;
  font-size: 16px;
}
.footer-widget-wrapper-2 .footer-widget-items .gt-list-area li:not(:last-child) {
  margin-bottom: 15px;
}
.footer-widget-wrapper-2 .footer-widget-items .gt-list-area li a {
  color: rgba(255, 255, 255, 0.75);
}
.footer-widget-wrapper-2 .footer-widget-items .gt-list-area li:hover {
  margin-left: 5px;
}
.footer-widget-wrapper-2 .footer-widget-items .gt-list-area li:hover a {
  color: var(--theme);
}
.footer-widget-wrapper-2 .footer-widget-items .contact-list li {
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  font-weight: 500;
  line-height: 162.5%;
  font-family: "Urbanist", sans-serif;
  transition: all 0.4s ease-in-out;
}
.footer-widget-wrapper-2 .footer-widget-items .contact-list li:not(:last-child) {
  margin-bottom: 20px;
}
.footer-widget-wrapper-2 .footer-widget-items .contact-list li:hover {
  color: var(--theme);
}
.footer-widget-wrapper-2 .footer-widget-items .contact-list li a {
  color: rgba(255, 255, 255, 0.75);
}
.footer-widget-wrapper-2 .footer-widget-items .contact-list li a:hover {
  color: var(--theme);
}
.footer-widget-wrapper-2 .footer-widget-items .footer-form-3 h3 {
  color: var(--white);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -1px;
  text-transform: capitalize;
}
@media (max-width: 575px) {
  .footer-widget-wrapper-2 .footer-widget-items .footer-form-3 h3 {
    font-size: 26px;
  }
}
.footer-widget-wrapper-2 .footer-widget-items .footer-form-3 form {
  position: relative;
  margin-top: 25px;
}
.footer-widget-wrapper-2 .footer-widget-items .footer-form-3 form input {
  width: 100%;
  border: none;
  background-color: var(--white);
  padding: 18px 20px;
  border-radius: 8px;
  line-height: 1;
  color: #272727;
  font-size: 16px;
  font-weight: 400;
  padding-right: 50px;
}
.footer-widget-wrapper-2 .footer-widget-items .footer-form-3 form input::placeholder {
  color: #272727;
}
.footer-widget-wrapper-2 .footer-widget-items .footer-form-3 form .email-btn {
  color: var(--theme);
  transition: all 0.4s ease-in-out;
  position: absolute;
  top: 6px;
  right: 18px;
  bottom: 6px;
}
.footer-widget-wrapper-2 .footer-widget-items .footer-form-3 .sq-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-size: 16px;
  color: var(--white);
  margin-top: 20px;
}
.footer-widget-wrapper-2 .footer-widget-items .footer-form-3 .sq-checkbox input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
}
.footer-widget-wrapper-2 .footer-widget-items .footer-form-3 .sq-checkbox .box {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border-radius: 4px;
  border: 2px solid #cbd5e1;
  display: inline-grid;
  place-items: center;
  transition: background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, transform 0.12s ease;
  background: var(--white);
  box-sizing: border-box;
  flex-shrink: 0;
}
.footer-widget-wrapper-2 .footer-widget-items .footer-form-3 .sq-checkbox .check {
  width: 14px;
  height: 14px;
  transform: scale(0);
  transition: transform 0.14s cubic-bezier(0.2, 0.9, 0.2, 1);
  color: var(--white);
}
.footer-widget-wrapper-2 .footer-widget-items .footer-form-3 .sq-checkbox input:checked + .box {
  background: var(--theme);
  border-color: var(--theme);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}
.footer-widget-wrapper-2 .footer-widget-items .footer-form-3 .sq-checkbox input:checked + .box .check {
  transform: scale(1);
}
.footer-widget-wrapper-2 .footer-widget-items .footer-form-3 .sq-checkbox input:focus + .box {
  box-shadow: 0 0 0 4px rgba(14, 165, 164, 0.12);
  border-color: var(--theme);
}
.footer-widget-wrapper-2 .footer-widget-items .footer-form-3 .sq-checkbox:active .box {
  transform: scale(0.98);
}
.footer-widget-wrapper-2 .footer-widget-items .footer-form-3 .sq-checkbox .label-text {
  line-height: 1;
}
.footer-widget-wrapper-2.style-2 .footer-widget-items .widget-head h3 {
  color: var(--header);
}
.footer-widget-wrapper-2.style-2 .footer-widget-items .footer-content p {
  color: var(--header);
}
.footer-widget-wrapper-2.style-2 .footer-widget-items .footer-content .social-icon {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 30px;
}
.footer-widget-wrapper-2.style-2 .footer-widget-items .footer-content .social-icon a {
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 50%;
  background: rgba(41, 15, 28, 0.35);
  color: var(--white);
  font-size: 14px;
}
.footer-widget-wrapper-2.style-2 .footer-widget-items .footer-content .social-icon a:hover {
  background-color: var(--theme);
}
.footer-widget-wrapper-2.style-2 .footer-widget-items .gt-list-area li {
  transition: all 0.4s ease-in-out;
  font-family: "Urbanist", sans-serif;
  font-weight: 500;
}
.footer-widget-wrapper-2.style-2 .footer-widget-items .gt-list-area li:not(:last-child) {
  margin-bottom: 15px;
}
.footer-widget-wrapper-2.style-2 .footer-widget-items .gt-list-area li a {
  color: rgba(41, 15, 28, 0.7);
}
.footer-widget-wrapper-2.style-2 .footer-widget-items .gt-list-area li:hover {
  margin-left: 5px;
}
.footer-widget-wrapper-2.style-2 .footer-widget-items .gt-list-area li:hover a {
  color: var(--theme);
}
.footer-widget-wrapper-2.style-2 .footer-widget-items .contact-list li {
  color: rgba(41, 15, 28, 0.7);
  font-size: 16px;
  font-weight: 500;
  line-height: 162.5%;
  font-family: "Urbanist", sans-serif;
}
.footer-widget-wrapper-2.style-2 .footer-widget-items .contact-list li:not(:last-child) {
  margin-bottom: 15px;
}
.footer-widget-wrapper-2.style-2 .footer-widget-items .contact-list li a {
  color: rgba(41, 15, 28, 0.7);
}

.footer-section-2 {
  padding-bottom: 30px;
}
.footer-section-2 .footer-lets-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 100px;
}
@media (max-width: 1199px) {
  .footer-section-2 .footer-lets-text {
    flex-wrap: wrap;
    gap: 30px;
  }
}
@media (max-width: 991px) {
  .footer-section-2 .footer-lets-text {
    padding-bottom: 80px;
  }
}
.footer-section-2 .footer-lets-text .lets-title {
  position: relative;
  max-width: 650px;
}
.footer-section-2 .footer-lets-text .lets-title .theme-btn-main {
  position: absolute;
  bottom: 13px;
  right: -50px;
  background: rgba(255, 255, 255, 0.1);
}
.footer-section-2 .footer-lets-text .lets-title .theme-btn-main .theme-btn {
  color: var(--white);
}
@media (max-width: 1199px) {
  .footer-section-2 .footer-lets-text .lets-title .theme-btn-main {
    position: static;
    margin-top: 30px;
  }
}
.footer-section-2 .footer-lets-text h2 {
  color: var(--white);
  font-size: 100px;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -3.079px;
}
@media (max-width: 1199px) {
  .footer-section-2 .footer-lets-text h2 {
    font-size: 80px;
  }
}
@media (max-width: 767px) {
  .footer-section-2 .footer-lets-text h2 {
    font-size: 75px;
  }
  .footer-section-2 .footer-lets-text h2 br {
    display: none;
  }
}
@media (max-width: 575px) {
  .footer-section-2 .footer-lets-text h2 {
    font-size: 55px;
  }
}
.footer-section-2 .footer-lets-text .text {
  padding-right: 130px;
}
@media (max-width: 1399px) {
  .footer-section-2 .footer-lets-text .text {
    padding-right: 0;
  }
}
.footer-section-2 .footer-lets-text .text .social-icon {
  gap: 8px;
  margin-top: 30px;
}
.footer-section-2 .footer-lets-text .text .social-icon a {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 50%;
  background-color: rgba(75, 67, 67, 0.4);
  color: var(--white);
  font-size: 14px;
  text-align: center;
}
.footer-section-2 .footer-lets-text .text .social-icon a:hover {
  background-color: var(--theme);
}
.footer-section-2 .footer-lets-text p {
  color: #B1B1B1;
  font-family: "Urbanist", sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 155.556%;
  letter-spacing: -1px;
  max-width: 270px;
}
.footer-section-2 .footer-area {
  margin: 0 30px;
  border-radius: 16px;
  position: relative;
}
@media (max-width: 1399px) {
  .footer-section-2 .footer-area {
    margin: 0 25px;
  }
}
@media (max-width: 1199px) {
  .footer-section-2 .footer-area {
    margin: 0 20px;
  }
}
.footer-section-2 .footer-area .footer-right-image {
  position: absolute;
  right: 0;
  top: 0;
}
@media (max-width: 1899px) {
  .footer-section-2 .footer-area .footer-right-image {
    display: none;
  }
}

.footer-section-3 {
  padding-bottom: 60px;
}
@media (max-width: 1600px) {
  .footer-section-3 {
    padding-bottom: 35px;
  }
}
@media (max-width: 1399px) {
  .footer-section-3 {
    padding-bottom: 25px;
  }
}
@media (max-width: 1199px) {
  .footer-section-3 {
    padding-bottom: 20px;
  }
}

.footer-area-3 {
  background-color: #FBF9EF;
  border-radius: 20px;
  margin: 60px;
  margin-bottom: 0;
  position: relative;
}
@media (max-width: 1600px) {
  .footer-area-3 {
    margin: 35px;
    margin-top: 60px;
  }
}
@media (max-width: 1399px) {
  .footer-area-3 {
    margin: 25px;
    margin-top: 60px;
  }
}
@media (max-width: 1199px) {
  .footer-area-3 {
    margin: 0 20px;
    margin-top: 60px;
  }
}
.footer-area-3::before {
  /* Vertical rule down the middle of the footer, removed on request. Was only
     hidden below 1200px; now off at every width. Kept (neutralised) rather than
     deleted, matching how the two horizontal dividers were handled. */
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50.7%;
  height: 100%;
  width: 1px;
  background: rgba(16, 16, 16, 0.2);
  content: "";
}

.footer-widget-wrapper-5 {
  position: relative;
  z-index: 9;
  padding: 120px 0 0;
}
@media (max-width: 991px) {
  .footer-widget-wrapper-5 {
    padding: 80px 0 0;
  }
}
.footer-widget-wrapper-5 .footer-left-item {
  overflow: hidden;
  position: relative;
  z-index: 99;
}
@media (max-width: 991px) {
  .footer-widget-wrapper-5 .footer-left-item {
    margin-bottom: 40px;
  }
}
.footer-widget-wrapper-5 .footer-left-item h2 {
  color: #272727;
  font-size: 48px;
  font-weight: 600;
  line-height: 120.833%;
  letter-spacing: -2px;
  max-width: 590px;
}
.footer-widget-wrapper-5 .footer-left-item h2 span {
  font-family: "Instrument Serif", serif;
  font-weight: 400;
}
@media (max-width: 1199px) {
  .footer-widget-wrapper-5 .footer-left-item h2 {
    font-size: 40px;
  }
}
@media (max-width: 767px) {
  .footer-widget-wrapper-5 .footer-left-item h2 {
    font-size: 38px;
  }
}
@media (max-width: 575px) {
  .footer-widget-wrapper-5 .footer-left-item h2 {
    font-size: 34px;
  }
}
@media (max-width: 470px) {
  .footer-widget-wrapper-5 .footer-left-item h2 {
    font-size: 28px;
  }
}
.footer-widget-wrapper-5 .footer-left-item form {
  position: relative;
  margin-top: 25px;
  max-width: 580px;
  width: 100%;
}
.footer-widget-wrapper-5 .footer-left-item form input {
  width: 100%;
  border: none;
  background-color: #110000;
  padding: 22px 30px;
  border-radius: 100px;
  line-height: 1;
  font-size: 16px;
  text-transform: capitalize;
  color: var(--text);
  padding-right: 70px;
}
.footer-widget-wrapper-5 .footer-left-item form input::placeholder {
  color: var(--text);
}
.footer-widget-wrapper-5 .footer-left-item form .email-btn {
  background: var(--theme);
  width: 52px;
  height: 52px;
  line-height: 52px;
  text-align: center;
  border-radius: 50%;
  color: var(--header);
  transition: all 0.4s ease-in-out;
  position: absolute;
  top: 6px;
  right: 6px;
  bottom: 6px;
}
.footer-widget-wrapper-5 .footer-left-item form .email-btn:hover {
  background-color: var(--theme);
}
.footer-widget-wrapper-5 .footer-left-item ul {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 135px;
}
@media (max-width: 1199px) {
  .footer-widget-wrapper-5 .footer-left-item ul {
    margin-top: 30px;
    flex-wrap: wrap;
  }
}
.footer-widget-wrapper-5 .footer-left-item ul li {
  font-size: 18px;
  font-weight: 600;
  color: #101010;
  font-family: "Urbanist", sans-serif;
}
.footer-widget-wrapper-5 .footer-left-item ul li a {
  color: #101010;
}
.footer-widget-wrapper-5 .footer-right-item {
  position: relative;
  padding-bottom: 24px;   /* was 80px — lifts the widget row ~3 lines up */
  padding-left: 100px;
}
.footer-widget-wrapper-5 .footer-right-item::before {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
  width: 1000%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1);
}
@media (max-width: 1199px) {
  .footer-widget-wrapper-5 .footer-right-item {
    padding-left: 0;
  }
}
.footer-widget-wrapper-5 .footer-right-item .footer-header-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  /* Was 60px + 59px. The divider that this space framed is gone, so it was ~120px
     of pure void under the social icons — the brand column measured 410px against
     the contact column's 195px. Trimmed to a normal block gap. */
  padding-bottom: 0;
  margin-bottom: 36px;
}
@media (max-width: 1199px) {
  .footer-widget-wrapper-5 .footer-right-item .footer-header-item {
    flex-wrap: wrap;
    gap: 30px;
  }
}
.footer-widget-wrapper-5 .footer-right-item .footer-header-item::before {
  position: absolute;
  bottom: 0;
  left: -100px;
  right: 0;
  content: "";
  width: 1000%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1);
}
.footer-widget-wrapper-5 .footer-right-item .footer-header-item p {
  color: #101010;
  max-width: 270px;
  font-size: 16px;
}
.footer-widget-wrapper-5 .footer-right-item .footer-widget-items .widget-head {
  margin-bottom: 30px;
}
.footer-widget-wrapper-5 .footer-right-item .footer-widget-items .widget-head h3 {
  color: #101010;
  font-size: 20px;
  font-weight: 700;
}
.footer-widget-wrapper-5 .footer-right-item .footer-widget-items .gt-list-area li {
  transition: all 0.4s ease-in-out;
  font-size: 16px;
  font-weight: 500;
  font-family: "Urbanist", sans-serif;
}
.footer-widget-wrapper-5 .footer-right-item .footer-widget-items .gt-list-area li:not(:last-child) {
  margin-bottom: 10px;
}
.footer-widget-wrapper-5 .footer-right-item .footer-widget-items .gt-list-area li a {
  color: #101010;
}
.footer-widget-wrapper-5 .footer-right-item .footer-widget-items .gt-list-area li:hover {
  margin-left: 5px;
}
.footer-widget-wrapper-5 .footer-right-item .footer-widget-items .gt-list-area li:hover a {
  color: var(--theme);
}
.footer-widget-wrapper-5 .footer-right-item .social-icon {
  gap: 6px;
}
@media (max-width: 1199px) {
  .footer-widget-wrapper-5 .footer-right-item .social-icon {
    display: flex !important;
  }
}
.footer-widget-wrapper-5 .footer-right-item .social-icon a {
  display: inline-block;
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 16px;
  border-radius: 50%;
  background-color: transparent;
  color: #101010;
  border: 1px solid rgba(16, 16, 16, 0.1);
}
.footer-widget-wrapper-5 .footer-right-item .social-icon a:hover {
  background-color: var(--theme);
  color: var(--header);
}

.footer-bottom-5 .footer-bottom-wrapper-5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 0;
}
@media (max-width: 767px) {
  .footer-bottom-5 .footer-bottom-wrapper-5 {
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
  }
}
.footer-bottom-5 .footer-bottom-wrapper-5 p {
  font-family: "Urbanist", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #101010;
}
.footer-bottom-5 .footer-bottom-wrapper-5 p b {
  color: #101010;
  font-weight: 500;
}
.footer-bottom-5 .footer-bottom-wrapper-5 .footer-list {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-bottom-5 .footer-bottom-wrapper-5 .footer-list li {
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
}
.footer-bottom-5 .footer-bottom-wrapper-5 .footer-list li .dots {
  width: 5px;
  height: 5px;
  border-radius: 5px;
  background-color: #101010;
  display: inline-block;
}
.footer-bottom-5 .footer-bottom-wrapper-5 .footer-list li a {
  color: #101010;
}
.footer-bottom-5 .footer-bottom-wrapper-5 .footer-list li a:hover {
  color: var(--theme);
}

.footer-section-4 {
  position: relative;
}
.footer-section-4 .gt-line-shape-animation {
  height: 280px;
  position: absolute;
  bottom: -130px;
  left: 0;
  right: 0;
  z-index: -1;
}
.footer-section-4 .container {
  max-width: 1631px;
}
.footer-section-4 .footer-top-wrapper-4 {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 1199px) {
  .footer-section-4 .footer-top-wrapper-4 {
    flex-wrap: wrap;
    gap: 30px;
  }
}
.footer-section-4 .footer-top-wrapper-4 .footer-left p {
  font-size: 16px;
  margin-top: 27px;
}
.footer-section-4 .footer-top-wrapper-4 .footer-left p b {
  color: var(--theme);
  font-weight: 400;
}
.footer-section-4 .footer-top-wrapper-4 .content {
  display: flex;
  align-items: end;
  gap: 100px;
}
@media (max-width: 991px) {
  .footer-section-4 .footer-top-wrapper-4 .content {
    flex-wrap: wrap;
    gap: 30px;
  }
}
.footer-section-4 .footer-top-wrapper-4 .content .title {
  font-size: 48px;
  font-weight: 400;
}
@media (max-width: 991px) {
  .footer-section-4 .footer-top-wrapper-4 .content .title {
    font-size: 42px;
  }
}
@media (max-width: 470px) {
  .footer-section-4 .footer-top-wrapper-4 .content .title {
    font-size: 38px;
  }
}
.footer-section-4 .footer-top-wrapper-4 .content .title span {
  font-family: "Instrument Serif", serif;
  font-style: italic;
}
.footer-section-4 .footer-top-wrapper-4 .content .theme-btn-main {
  background-color: var(--white);
}
.footer-section-4 .footer-top-wrapper-4 .content .theme-btn-main .theme-btn {
  color: #101010;
}
.footer-section-4 .footer-top-wrapper-4 .content .theme-btn-main .theme-btn-arrow-left, .footer-section-4 .footer-top-wrapper-4 .content .theme-btn-main .theme-btn-arrow-right {
  background-color: var(--theme);
  color: var(--white);
}

.footer-widget-wrapper-4 {
  padding: 60px 0 150px;
}
@media (max-width: 575px) {
  .footer-widget-wrapper-4 {
    padding-bottom: 50px;
  }
}
.footer-widget-wrapper-4 .footer-content {
  max-width: 535px;
}
.footer-widget-wrapper-4 .footer-content .contact-details-items {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 575px) {
  .footer-widget-wrapper-4 .footer-content .contact-details-items {
    flex-wrap: wrap;
    gap: 20px;
    justify-content: start;
  }
}
.footer-widget-wrapper-4 .footer-content .contact-details-items .content span {
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  display: inline-block;
  margin-bottom: 10px;
}
.footer-widget-wrapper-4 .footer-content .contact-details-items .content p {
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
}
.footer-widget-wrapper-4 .footer-content form {
  position: relative;
  margin-top: 38px;
}
.footer-widget-wrapper-4 .footer-content form input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: transparent;
  padding: 22px 30px;
  border-radius: 100px;
  line-height: 1;
  font-size: 16px;
  text-transform: capitalize;
  color: var(--text);
  padding-right: 70px;
}
.footer-widget-wrapper-4 .footer-content form input::placeholder {
  color: var(--text);
}
.footer-widget-wrapper-4 .footer-content form .email-btn {
  background: var(--theme);
  width: 52px;
  height: 52px;
  line-height: 52px;
  text-align: center;
  border-radius: 50%;
  color: var(--header);
  transition: all 0.4s ease-in-out;
  position: absolute;
  top: 6px;
  right: 6px;
  bottom: 6px;
}
.footer-widget-wrapper-4 .footer-content form .email-btn:hover {
  background-color: var(--theme);
}
.footer-widget-wrapper-4 .footer-widget-items .widget-head {
  margin-bottom: 18px;
}
.footer-widget-wrapper-4 .footer-widget-items .widget-head h3 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}
.footer-widget-wrapper-4 .footer-widget-items .gt-list-area li {
  transition: all 0.4s ease-in-out;
  font-size: 16px;
  font-weight: 500;
  font-family: "Urbanist", sans-serif;
}
.footer-widget-wrapper-4 .footer-widget-items .gt-list-area li:not(:last-child) {
  margin-bottom: 10px;
}
.footer-widget-wrapper-4 .footer-widget-items .gt-list-area li a {
  color: #fff;
}
.footer-widget-wrapper-4 .footer-widget-items .gt-list-area li:hover {
  margin-left: 5px;
}
.footer-widget-wrapper-4 .footer-widget-items .gt-list-area li:hover a {
  color: var(--theme);
}
.footer-widget-wrapper-4 .social-icon {
  gap: 6px;
  margin-top: 20px;
}
@media (max-width: 1199px) {
  .footer-widget-wrapper-4 .social-icon {
    display: flex !important;
  }
}
.footer-widget-wrapper-4 .social-icon a {
  display: inline-block;
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 14px;
  border-radius: 50%;
  background-color: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-widget-wrapper-4 .social-icon a:hover {
  background-color: var(--theme);
  color: var(--header);
}
.footer-widget-wrapper-4 .gt-list-wrap {
  display: flex;
  align-items: center;
  gap: 130px;
}
@media (max-width: 1399px) {
  .footer-widget-wrapper-4 .gt-list-wrap {
    gap: 80px;
  }
}
.footer-widget-wrapper-4 .footer-contact ul li:not(:last-child) {
  margin-bottom: 20px;
}
.footer-widget-wrapper-4 .footer-contact ul li a {
  display: flex;
  align-items: center;
  gap: 16px;
  font-style: italic;
}

.section-title {
  position: relative;
  z-index: 99;
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  .section-title {
    margin-bottom: 0;
  }
  .section-title br {
    display: none;
  }
}
.section-title .sub-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 20px;
  font-weight: 400;
  font-family: "Instrument Serif", serif;
  color: var(--white);
  font-style: italic;
}
.section-title h2 {
  color: var(--header);
}
.section-title h2 .style-font {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-weight: 400;
}
.section-title h2 .style-color {
  color: #797979;
}

.section-title-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 9;
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  .section-title-area {
    margin-bottom: 0;
  }
  .section-title-area br {
    display: none;
  }
}
.section-title-area .section-title {
  margin-bottom: 0;
}
@media (max-width: 991px) {
  .section-title-area {
    flex-wrap: wrap;
    gap: 30px;
  }
}

.section-title-2 {
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  .section-title-2 {
    margin-bottom: 0;
  }
  .section-title-2 br {
    display: none;
  }
}
.section-title-2 .sub-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.section-title-2 .title {
  font-size: 100px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 100%;
}
@media (max-width: 1399px) {
  .section-title-2 .title {
    font-size: 80px;
  }
}
@media (max-width: 1199px) {
  .section-title-2 .title {
    font-size: 65px;
  }
}
@media (max-width: 991px) {
  .section-title-2 .title {
    font-size: 50px;
  }
}
@media (max-width: 575px) {
  .section-title-2 .title {
    font-size: 42px;
  }
}
@media (max-width: 470px) {
  .section-title-2 .title {
    font-size: 38px;
  }
}
@media (max-width: 500px) {
  .section-title-2 .title {
    font-size: 32px;
  }
}

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

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

.section-bg-2 {
  background-color: #FBF3E6 !important;
}

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

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

.section-padding-2 {
  padding: 60px 0;
}

/*---------------------------------------
05. Sections
---------------------------------------*/
.hero-1 {
  /* Symmetric horizontal padding so the centred .container tracks the viewport
     centre. It used to be 150 left / 65 right, which pushed the container 42px
     right of centre and shifted the hero copy every time a breakpoint changed
     the asymmetry - the "content moves as the screen resizes" bug. */
  padding: 250px 65px 30px;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.hero-1 .hero-line {
  position: absolute;
  top: 10.2%;
  bottom: 0;
  right: 30%;
}
@media (max-width: 1899px) {
  .hero-1 .hero-line {
    display: none;
  }
}
.hero-1 .hero-line img {
  height: 100%;
}
/* Every tier keeps left == right so the container stays viewport-centred. */
@media (max-width: 1399px) {
  .hero-1 {
    padding: 180px 50px 30px;
  }
}
@media (max-width: 1199px) {
  .hero-1 {
    padding: 200px 50px 30px;
  }
}
@media (max-width: 991px) {
  .hero-1 {
    padding: 190px 30px 30px;
  }
}
@media (max-width: 767px) {
  .hero-1 {
    padding: 170px 20px 30px;
  }
}
@media (max-width: 575px) {
  .hero-1 {
    padding: 150px 15px 30px;
  }
}
.hero-1 .hero-circle {
  position: absolute;
  top: 20%;
  left: 35%;
  z-index: -1;
}
@media (max-width: 1199px) {
  .hero-1 .hero-circle {
    left: 20%;
  }
}
@media (max-width: 767px) {
  .hero-1 .hero-circle {
    display: none;
  }
}
.hero-1 .hero-circle::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  background: linear-gradient(180deg, rgba(16, 16, 16, 0.4) 0%, #101010 66.01%);
  width: 611px;
  height: 609px;
  z-index: 1;
}
.hero-1 .hero-circle img {
  animation: cir36 10s linear infinite;
}
.hero-1 .hero-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 145px;
  margin-top: 170px;
}
@media (max-width: 1399px) {
  .hero-1 .hero-list {
    padding-right: 50px;
  }
}
@media (max-width: 1199px) {
  .hero-1 .hero-list {
    padding-right: 30px;
    margin-top: 100px;
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media (max-width: 767px) {
  .hero-1 .hero-list {
    margin-top: 50px;
  }
}
.hero-1 .hero-list ul {
  display: flex;
  align-items: center;
  gap: 30px;
}
@media (max-width: 767px) {
  .hero-1 .hero-list ul {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
}
.hero-1 .hero-list ul li {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #797979;
  transition: all 0.4s ease-in-out;
}
.hero-1 .hero-list ul li:hover {
  color: var(--white);
}
.hero-1 .hero-list ul li a {
  color: #797979;
}
.hero-1 .hero-list ul li a:hover {
  color: var(--white);
}
@media (max-width: 1199px) {
  .hero-1 .hero-content {
    text-align: center;
  }
}
.hero-1 .hero-content p {
  font-size: 18px;
  font-weight: 500;
  color: #797979;
  text-transform: uppercase;
  margin-bottom: 15px;
}
.hero-1 .hero-content h1 {
  letter-spacing: -0.02em;
}
@media (max-width: 1199px) {
  .hero-1 .hero-content h1 {
    line-height: 100%;
  }
}
.hero-1 .hero-content h1 span {
  color: var(--theme);
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 56px;
  letter-spacing: -0.02em;
  margin-bottom: -30px;
  display: inline-block;
  font-weight: 400;
}
@media (max-width: 1899px) {
  .hero-1 .hero-content h1 span {
    font-size: 45px;
  }
}
@media (max-width: 1399px) {
  .hero-1 .hero-content h1 span {
    font-size: 35px;
  }
}
@media (max-width: 1199px) {
  .hero-1 .hero-content h1 span {
    margin-bottom: 0;
  }
}
@media (max-width: 575px) {
  .hero-1 .hero-content h1 span {
    font-size: 30px;
  }
}
.hero-1 .hero-content .hero-button {
  display: flex;
  align-items: center;
  margin-top: 50px;
  gap: 20px;
}
@media (max-width: 1199px) {
  .hero-1 .hero-content .hero-button {
    justify-content: center;
    margin-top: 40px;
  }
}
@media (max-width: 767px) {
  .hero-1 .hero-content .hero-button {
    text-align: center;
    flex-wrap: wrap;
  }
}
.hero-1 .hero-right-items {
  max-width: 471px;
  margin-left: auto;
}
@media (max-width: 1199px) {
  .hero-1 .hero-right-items {
    margin: 0 auto;
    text-align: center;
  }
}
@media (max-width: 767px) {
  .hero-1 .hero-right-items {
    margin-top: 30px;
  }
}
@media (max-width: 575px) {
  .hero-1 .hero-right-items {
    margin-top: 20px;
  }
}
.hero-1 .hero-right-items .hero-small-slider {
  display: flex;
  align-items: center;
  gap: 20px;
}
.hero-1 .hero-right-items .small-thumb {
  max-width: 106px;
  height: 200px;
  border-radius: 20px;
  transition: all 0.4s ease-in-out;
}
.hero-1 .hero-right-items .small-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}
.hero-1 .hero-right-items .small-thumb.active {
  max-width: 219px;
}
.hero-1 .hero-right-items .text {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
  max-width: 385px;
  margin-top: 130px;
  line-height: 150%;
}
@media (max-width: 1199px) {
  .hero-1 .hero-right-items .text {
    margin-top: 70px;
  }
}
@media (max-width: 767px) {
  .hero-1 .hero-right-items .text {
    margin-top: 40px;
  }
}
.hero-1 .hero-right-items .text b {
  font-weight: 500;
  color: var(--white);
}
.hero-1 .hero-right-items .sign {
  margin-top: 30px;
}

.hero-section-2 .brand-section {
  padding: 30px 17px;
}
.hero-section-2 .brand-section .brand-box-1 {
  background: rgba(255, 255, 255, 0.1);
}

.hero-2 {
  padding: 200px 50px 115px;
  padding-right: 120px;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
@media (max-width: 1600px) {
  .hero-2 {
    padding: 180px 50px 115px;
  }
}
@media (max-width: 1399px) {
  .hero-2 {
    padding: 150px 40px 115px;
  }
}
.hero-2 .hero-line {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 33%;
}
@media (max-width: 1899px) {
  .hero-2 .hero-line {
    right: 37%;
  }
}
@media (max-width: 1600px) {
  .hero-2 .hero-line {
    right: 40%;
  }
}
@media (max-width: 1399px) {
  .hero-2 .hero-line {
    display: none;
  }
}
.hero-2 .hero-line img {
  height: 100%;
}
.hero-2 .hero-content h1 {
  font-size: 200px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.04em;
}
@media (max-width: 1899px) {
  .hero-2 .hero-content h1 {
    font-size: 160px;
  }
}
@media (max-width: 1600px) {
  .hero-2 .hero-content h1 {
    font-size: 120px;
  }
}
@media (max-width: 1399px) {
  .hero-2 .hero-content h1 {
    font-size: 130px;
  }
}
@media screen and (max-width: 1300px) {
  .hero-2 .hero-content h1 {
    font-size: 110px;
  }
}
@media (max-width: 1199px) {
  .hero-2 .hero-content h1 {
    font-size: 100px;
  }
}
@media (max-width: 991px) {
  .hero-2 .hero-content h1 {
    font-size: 80px;
    text-align: center;
  }
}
@media (max-width: 767px) {
  .hero-2 .hero-content h1 {
    font-size: 60px;
  }
}
@media (max-width: 575px) {
  .hero-2 .hero-content h1 {
    font-size: 45px;
  }
}
@media (max-width: 470px) {
  .hero-2 .hero-content h1 {
    font-size: 38px;
  }
}
.hero-2 .hero-content h1 .text-1 {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 1199px) {
  .hero-2 .hero-content h1 .text-1 {
    display: initial;
  }
}
@media (max-width: 1199px) {
  .hero-2 .hero-content h1 .text-1 img {
    display: none;
  }
}
.hero-2 .hero-content h1 .text-2 {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 1199px) {
  .hero-2 .hero-content h1 .text-2 {
    display: initial;
  }
}
.hero-2 .hero-content h1 .text-2 img {
  border-radius: 100px;
}
@media (max-width: 1600px) {
  .hero-2 .hero-content h1 .text-2 img {
    width: 250px;
  }
}
@media screen and (max-width: 1300px) {
  .hero-2 .hero-content h1 .text-2 img {
    width: 220px;
  }
}
@media (max-width: 1199px) {
  .hero-2 .hero-content h1 .text-2 img {
    display: none;
  }
}
.hero-2 .hero-content h1 .text-3 {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 1199px) {
  .hero-2 .hero-content h1 .text-3 {
    display: initial;
  }
}
.hero-2 .hero-content h1 .text-3 img {
  border-radius: 100px;
}
@media (max-width: 1199px) {
  .hero-2 .hero-content h1 .text-3 img {
    display: none;
  }
}
.hero-2 .hero-right-items {
  max-width: 425px;
  margin-left: auto;
}
@media (max-width: 1199px) {
  .hero-2 .hero-right-items {
    margin-left: initial;
  }
}
@media (max-width: 991px) {
  .hero-2 .hero-right-items {
    margin: 40px auto 0;
    text-align: center;
  }
}
.hero-2 .hero-right-items .text {
  color: var(--white);
  margin-bottom: 30px;
}
.hero-2 .hero-right-items .sign {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 50px;
}
.hero-2 .hero-right-items .hero-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 42px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 48px;
}
@media (max-width: 767px) {
  .hero-2 .hero-right-items .hero-counter {
    flex-wrap: wrap;
    justify-content: center;
    gap: 22px;
  }
}
.hero-2 .hero-right-items .hero-counter .counter-text p {
  color: var(--white);
  margin-top: 5px;
}
.hero-2 .hero-right-items .hero-counter .counter-text p br {
  display: block;
}
.hero-2 .hero-right-items .hero-list {
  display: flex;
  align-items: center;
  gap: 60px;
  margin-top: 47px;
}
@media (max-width: 991px) {
  .hero-2 .hero-right-items .hero-list {
    margin-top: 30px;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
  }
}
.hero-2 .hero-right-items .hero-list ul li {
  text-transform: uppercase;
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
}
.hero-2 .hero-right-items .hero-list ul li:not(:last-child) {
  margin-bottom: 15px;
}

.hero-3 {
  padding: 60px 40px 60px;
  margin: 0 30px;
  border-radius: 20px;
  position: relative;
  z-index: 9;
  margin-top: 120px;
}
@media (max-width: 1600px) {
  .hero-3 {
    margin: 0 28px;
    padding-left: 28px;
    padding-right: 28px;
    margin-top: 120px;
  }
}
@media (max-width: 1399px) {
  .hero-3 {
    margin: 0 25px;
    padding-left: 25px;
    padding-right: 25px;
    margin-top: 110px;
  }
}
@media (max-width: 1199px) {
  .hero-3 {
    margin: 0 18px;
    padding-left: 18px;
    padding-right: 18px;
    margin-top: 82px;
  }
}
.hero-3::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: linear-gradient(90deg, #101010 0%, rgba(16, 16, 16, 0) 55%);
  border-radius: 20px;
  z-index: -1;
}
.hero-3 .hero-list li {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 767px) {
  .hero-3 .hero-list li {
    flex-wrap: wrap;
  }
}
.hero-3 .hero-list li:not(:last-child) {
  margin-bottom: 10px;
}
.hero-3 .hero-list li a {
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  color: var(--white);
  text-transform: uppercase;
  border-radius: 20px;
  padding: 9px 14px;
  line-height: 1;
  transition: all 0.4s ease-in-out;
}
.hero-3 .hero-list li a:hover {
  background-color: var(--theme);
  border-color: var(--theme);
}
.hero-3 .hero-list li:nth-of-type(2) {
  margin-left: 20px;
}
@media (max-width: 575px) {
  .hero-3 .hero-list li:nth-of-type(2) {
    margin-left: 0;
  }
}
.hero-3 .hero-title {
  font-size: 120px;
  letter-spacing: -0.01em;
  font-size: 120px;
  font-weight: 600;
  margin-top: 320px;
}
@media (max-width: 1399px) {
  .hero-3 .hero-title {
    font-size: 90px;
    margin-top: 280px;
  }
}
@media (max-width: 1199px) {
  .hero-3 .hero-title {
    font-size: 75px;
    margin-top: 250px;
  }
}
@media (max-width: 991px) {
  .hero-3 .hero-title {
    font-size: 65px;
    margin-top: 230px;
  }
}
@media (max-width: 767px) {
  .hero-3 .hero-title {
    font-size: 52px;
    margin-top: 190px;
  }
}
@media (max-width: 575px) {
  .hero-3 .hero-title {
    font-size: 40px;
    margin-top: 150px;
  }
}
.hero-3 .hero-title span {
  font-weight: 400;
  font-family: "Instrument Serif", serif;
  font-style: italic;
  line-height: 110%;
}
.hero-3 .hero-info-items {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 60px;
}
@media (max-width: 767px) {
  .hero-3 .hero-info-items {
    flex-wrap: wrap;
    gap: 30px;
  }
}

.animation-infinite {
  animation: ShapeAnim 50s linear infinite;
  height: 280px;
  width: 100%;
  background-repeat: repeat;
  overflow: hidden;
}

@keyframes ShapeAnim {
  0% {
    background-position: top left;
  }
  100% {
    background-position: top left 3000px;
  }
}
.animation-infinite-rtl {
  animation: ShapeAnimRTL 50s linear infinite;
  height: 635px;
  width: 100%;
  background-repeat: repeat;
  overflow: hidden;
  background-size: cover;
}

@keyframes ShapeAnimRTL {
  0% {
    background-position: top right;
  }
  100% {
    background-position: top right 3000px;
  }
}
.hero-4 {
  padding: 150px 0 200px;
  position: relative;
}
@media (max-width: 1399px) {
  .hero-4 {
    padding-top: 180px;
  }
}
.hero-4 .rain {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.hero-4 .rain.back-row {
  display: none;
  z-index: 1;
  bottom: 60px;
  opacity: 0.5;
}
.hero-4 .back-row-toggle .rain.back-row {
  display: block;
}
.hero-4 .drop {
  position: absolute;
  bottom: 100%;
  width: 15px;
  height: 120px;
  pointer-events: none;
  animation: drop 0.5s linear infinite;
}
@keyframes drop {
  0% {
    transform: translateY(0vh);
  }
  75% {
    transform: translateY(90vh);
  }
  100% {
    transform: translateY(90vh);
  }
}
.hero-4 .stem {
  width: 1px;
  height: 60%;
  margin-left: 7px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
  animation: stem 0.5s linear infinite;
}
@keyframes stem {
  0% {
    opacity: 1;
  }
  65% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.hero-4 .splat-toggle .splat {
  display: block;
}
@keyframes splat {
  0% {
    opacity: 1;
    transform: scale(0);
  }
  80% {
    opacity: 1;
    transform: scale(0);
  }
  90% {
    opacity: 0.5;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}
.hero-4 .toggles {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}
.hero-4 .toggle {
  position: absolute;
  left: 20px;
  width: 50px;
  height: 50px;
  line-height: 51px;
  box-sizing: border-box;
  text-align: center;
  font-family: sans-serif;
  font-size: 10px;
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.2);
  color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}
.hero-4 .toggle:hover {
  background-color: rgba(255, 255, 255, 0.25);
}
.hero-4 .toggle:active {
  background-color: rgba(255, 255, 255, 0.3);
}
.hero-4 .toggle.active {
  background-color: rgba(255, 255, 255, 0.4);
}
.hero-4 .splat-toggle {
  top: 20px;
}
.hero-4 .back-row-toggle {
  top: 90px;
  line-height: 12px;
  padding-top: 14px;
}
.hero-4 .single-toggle {
  top: 160px;
}
.hero-4 .single-toggle .drop {
  display: none;
}
.hero-4 .single-toggle .drop:nth-child(10) {
  display: block;
}
.hero-4 .line-2 {
  height: 635px;
  position: absolute;
  top: -70px;
  left: 0;
  right: 0;
  z-index: -1;
}
.hero-4 .gt-line-shape-animation {
  height: 280px;
  position: absolute;
  bottom: 80px;
  left: 0;
  right: 0;
  z-index: -1;
}
.hero-4 .container {
  max-width: 1650px;
}
.hero-4 .hero-content {
  position: relative;
  z-index: 99;
}
@media (max-width: 991px) {
  .hero-4 .hero-content {
    text-align: center;
  }
}
.hero-4 .hero-content .hero-sub {
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
  text-transform: capitalize;
  color: #797979;
  letter-spacing: 10px;
  margin-bottom: 15px;
}
@media (max-width: 470px) {
  .hero-4 .hero-content .hero-sub {
    font-size: 14px;
  }
}
.hero-4 .hero-content .title {
  letter-spacing: -0.01em;
  font-size: 110px;
  line-height: 100%;
}
@media (max-width: 1600px) {
  .hero-4 .hero-content .title {
    font-size: 88px;
  }
}
@media (max-width: 1399px) {
  .hero-4 .hero-content .title {
    font-size: 78px;
  }
}
@media (max-width: 1199px) {
  .hero-4 .hero-content .title {
    font-size: 65px;
  }
}
@media (max-width: 991px) {
  .hero-4 .hero-content .title {
    font-size: 78px;
    text-align: center;
  }
}
@media (max-width: 767px) {
  .hero-4 .hero-content .title {
    font-size: 62px;
  }
}
@media (max-width: 575px) {
  .hero-4 .hero-content .title {
    font-size: 52px;
  }
}
@media (max-width: 470px) {
  .hero-4 .hero-content .title {
    font-size: 40px;
  }
}
.hero-4 .hero-content .title b {
  font-style: italic;
  font-weight: 400;
}
.hero-4 .hero-content p {
  font-size: 20px;
  font-weight: 600;
  max-width: 595px;
  margin-top: 40px;
}
@media (max-width: 1199px) {
  .hero-4 .hero-content p {
    font-size: 17px;
    margin-top: 32px;
  }
}
@media (max-width: 991px) {
  .hero-4 .hero-content p {
    margin: 30px auto 0;
  }
}
@media (max-width: 470px) {
  .hero-4 .hero-content p {
    font-size: 15px;
    margin-top: 25px;
  }
}
.hero-4 .hero-content p b {
  font-weight: 400;
  color: var(--white);
}
.hero-4 .hero-content .hero-button {
  display: flex;
  align-items: center;
  margin-top: 50px;
  gap: 20px;
}
@media (max-width: 991px) {
  .hero-4 .hero-content .hero-button {
    margin-top: 40px;
    justify-content: center;
  }
}
@media (max-width: 767px) {
  .hero-4 .hero-content .hero-button {
    flex-wrap: wrap;
  }
}
.hero-4 .hero-image {
  margin-left: -270px;
  position: relative;
  z-index: 99;
}
@media (max-width: 1399px) {
  .hero-4 .hero-image {
    margin-left: -100px;
  }
  .hero-4 .hero-image img {
    width: 100%;
    height: 100%;
  }
}
@media (max-width: 991px) {
  .hero-4 .hero-image {
    margin-left: 0;
    max-width: 500px;
    margin-top: 80px;
    margin: 0 auto;
  }
}
.hero-4 .hero-image .bg-circle {
  position: absolute;
  top: -40px;
  right: 0;
  z-index: -1;
}
@media (max-width: 991px) {
  .hero-4 .hero-image .bg-circle {
    top: 0;
  }
}

.deal-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
}
.deal-banner img {
  width: 100%;
}

.about-wrapper .about-image {
  max-width: 660px;
  position: relative;
}
.about-wrapper .about-image .about-circle {
  position: absolute;
  bottom: -40px;
  left: -20%;
  z-index: -1;
  animation: cir36 10s linear infinite;
}
@media (max-width: 1199px) {
  .about-wrapper .about-image .about-circle {
    display: none;
  }
}
.about-wrapper .about-image img {
  width: 100%;
  height: 100%;
}
.about-wrapper .about-content .text {
  margin-top: 25px;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 49px;
}
@media (max-width: 1399px) {
  .about-wrapper .about-content .text {
    font-size: 18px;
  }
}
@media (max-width: 1199px) {
  .about-wrapper .about-content .text {
    font-size: 16px;
    margin-bottom: 30px;
  }
}
@media (max-width: 575px) {
  .about-wrapper .about-content .text {
    font-size: 16px;
  }
}
.about-wrapper .about-content .about-counter-items {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: end;
}
@media (max-width: 1199px) {
  .about-wrapper .about-content .about-counter-items {
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
  }
}
.about-wrapper .about-content .about-counter-items .content h2 {
  font-size: 120px;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}
.about-wrapper .about-content .about-counter-items .content h2 .plus {
  font-weight: 300;
  font-size: 40px;
}
.about-wrapper .about-content .about-counter-items .about-small {
  border-radius: 20px;
}
.about-wrapper .about-content .about-counter-items .about-small img {
  border-radius: 20px;
}

.about-wrapper-2 .section-title-area {
  gap: 70px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 60px;
  margin-bottom: 60px;
}
.about-wrapper-2 .section-title-area .about-info p {
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
  margin-top: 20px;
}
.about-wrapper-2 .section-title-area .about-info p b {
  font-weight: 700;
  color: var(--white);
}
.about-wrapper-2 .section-title-area h2 {
  letter-spacing: -0.02em;
}
.about-wrapper-2 .about-top-items {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 991px) {
  .about-wrapper-2 .about-top-items {
    flex-wrap: wrap;
    gap: 30px;
  }
}
.about-wrapper-2 .about-top-items .about-counter h2 {
  font-size: 120px;
  font-weight: 900;
  display: flex;
  align-items: center;
  gap: 10px;
}
.about-wrapper-2 .about-top-items .about-counter h2 .plus {
  font-size: 40px;
  font-weight: 300;
}
.about-wrapper-2 .about-top-items .content-box {
  max-width: 690px;
}
.about-wrapper-2 .about-top-items .content-box h2 {
  font-family: "Instrument Serif", serif;
  font-size: 36px;
  font-weight: 400;
  font-style: italic;
  margin-bottom: 14px;
}
.about-wrapper-2 .about-top-items .content-box .theme-btn-main {
  margin-top: 50px;
}
@media (max-width: 1399px) {
  .about-wrapper-2 .about-top-items .about-vec {
    display: none;
  }
}
.about-wrapper-2 .about-video-banner {
  border-radius: 20px;
  margin-top: 60px;
  position: relative;
}
@media (max-width: 1199px) {
  .about-wrapper-2 .about-video-banner {
    height: 550px;
  }
}
.about-wrapper-2 .about-video-banner img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
}
.about-wrapper-2 .about-video-banner .video-circle {
  width: 130px;
  height: 130px;
  line-height: 130px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  text-align: center;
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(20px);
}
@media (max-width: 1199px) {
  .about-wrapper-2 .about-video-banner .video-circle {
    display: none;
  }
}
.about-wrapper-2 .about-video-banner .video-circle .text-circle {
  animation: cir36 10s linear infinite;
}
.about-wrapper-2 .about-video-banner .video-circle .text-circle img {
  width: initial;
  height: initial;
}
.about-wrapper-2 .about-video-banner .video-circle .video-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--white);
  color: var(--theme);
  text-align: center;
  width: 58.5px;
  height: 58.5px;
  line-height: 58.5px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  z-index: 9;
  font-size: 16px;
}
.about-wrapper-2 .about-video-banner .video-circle .video-btn:hover {
  background-color: var(--theme);
  color: var(--white);
}
.about-wrapper-2 .about-video-banner .video-circle img {
  margin-left: 0;
}
.about-wrapper-2 .about-video-banner .incrase-box {
  background-color: var(--theme);
  padding: 30px;
  position: absolute;
  bottom: 40px;
  left: 40px;
  border-radius: 8px;
  padding-top: 22px;
  max-width: 336px;
  width: 100%;
}
@media (max-width: 575px) {
  .about-wrapper-2 .about-video-banner .incrase-box {
    display: none;
  }
}
.about-wrapper-2 .about-video-banner .incrase-box span {
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
  display: inline-block;
}
.about-wrapper-2 .about-video-banner .incrase-box p {
  color: var(--white);
  font-size: 100px;
  font-weight: 600;
  letter-spacing: -3px;
  line-height: 1;
  margin-bottom: -8px;
  margin-top: 40px;
}

.about-wrapper-3 {
  margin-bottom: 60px;
}
.about-wrapper-3 .about-image {
  border-radius: 20px;
  max-width: 658px;
  position: relative;
}
.about-wrapper-3 .about-image .video-circle {
  width: 124px;
  height: 124px;
  line-height: 124px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  text-align: center;
  z-index: 2;
  position: absolute;
  left: 35px;
  bottom: 35px;
  backdrop-filter: blur(20px);
}
@media (max-width: 1199px) {
  .about-wrapper-3 .about-image .video-circle {
    right: initial;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.about-wrapper-3 .about-image .video-circle .text-circle {
  animation: cir36 10s linear infinite;
}
.about-wrapper-3 .about-image .video-circle .text-circle img {
  width: initial;
  height: initial;
}
.about-wrapper-3 .about-image .video-circle .video-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--theme);
  color: var(--white);
  text-align: center;
  width: 55px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  z-index: 9;
  font-size: 16px;
}
.about-wrapper-3 .about-image .video-circle .video-btn:hover {
  background-color: var(--white);
  color: var(--body);
}
.about-wrapper-3 .about-image .video-circle img {
  margin-left: 0;
}
.about-wrapper-3 .about-image img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
.about-wrapper-3 .about-content {
  margin-left: 30px;
}
@media (max-width: 1199px) {
  .about-wrapper-3 .about-content {
    margin-left: 0;
  }
}
.about-wrapper-3 .about-content .section-title h2 {
  font-size: 42px;
}
@media (max-width: 575px) {
  .about-wrapper-3 .about-content .section-title h2 {
    font-size: 36px;
  }
}
@media (max-width: 470px) {
  .about-wrapper-3 .about-content .section-title h2 {
    font-size: 28px;
  }
}
.about-wrapper-3 .about-content .text {
  font-size: 16px;
  margin-top: 20px;
}
.about-wrapper-3 .about-content .about-list-items {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 1199px) {
  .about-wrapper-3 .about-content .about-list-items {
    flex-wrap: wrap;
    justify-content: start;
    gap: 30px;
  }
}
.about-wrapper-3 .about-content .about-list-items .list-items ul {
  margin-bottom: 50px;
}
.about-wrapper-3 .about-content .about-list-items .list-items ul li {
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 12px;
}
.about-wrapper-3 .about-content .about-list-items .list-items ul li:not(:last-child) {
  margin-bottom: 10px;
}
.about-wrapper-3 .about-content .about-list-items .about-counter-items {
  background-color: #FBF9EF;
  padding: 35px 20px;
  border-radius: 8px;
  max-width: 220px;
  width: 100%;
}
.about-wrapper-3 .about-content .about-list-items .about-counter-items p {
  font-size: 14px;
  font-weight: 600;
  color: #000;
  text-transform: uppercase;
  margin-bottom: 15px;
}
.about-wrapper-3 .about-content .about-list-items .about-counter-items h2 {
  color: var(--theme);
  font-size: 90px;
  font-weight: 700;
  line-height: 1;
}
.about-wrapper-3 .about-content .about-list-items .about-counter-items .plus {
  font-weight: 400;
  font-size: 44px;
  position: relative;
  top: -30px;
}

.about-video-banner-about-page {
  position: relative;
}
@media (max-width: 1199px) {
  .about-video-banner-about-page {
    height: 550px;
  }
}
.about-video-banner-about-page img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
}
.about-video-banner-about-page .video-circle {
  width: 130px;
  height: 130px;
  line-height: 130px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  text-align: center;
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(20px);
}
@media (max-width: 1199px) {
  .about-video-banner-about-page .video-circle {
    display: none;
  }
}
.about-video-banner-about-page .video-circle .text-circle {
  animation: cir36 10s linear infinite;
}
.about-video-banner-about-page .video-circle .text-circle img {
  width: initial;
  height: initial;
}
.about-video-banner-about-page .video-circle .video-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--white);
  color: var(--theme);
  text-align: center;
  width: 58.5px;
  height: 58.5px;
  line-height: 58.5px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  z-index: 9;
  font-size: 16px;
}
.about-video-banner-about-page .video-circle .video-btn:hover {
  background-color: var(--theme);
  color: var(--white);
}
.about-video-banner-about-page .video-circle img {
  margin-left: 0;
}
.about-video-banner-about-page .incrase-box {
  background-color: var(--theme);
  padding: 30px;
  position: absolute;
  bottom: 40px;
  left: 240px;
  border-radius: 8px;
  padding-top: 22px;
  max-width: 336px;
  width: 100%;
}
@media (max-width: 1399px) {
  .about-video-banner-about-page .incrase-box {
    left: 50px;
  }
}
@media (max-width: 575px) {
  .about-video-banner-about-page .incrase-box {
    display: none;
  }
}
.about-video-banner-about-page .incrase-box span {
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
  display: inline-block;
}
.about-video-banner-about-page .incrase-box p {
  color: var(--white);
  font-size: 100px;
  font-weight: 600;
  letter-spacing: -3px;
  line-height: 1;
  margin-bottom: -8px;
  margin-top: 40px;
}

.about-page-style-3 .section-title-area {
  border-bottom: none;
  padding-bottom: 40px;
  align-items: start;
}
.about-page-style-3 .section-title-area .section-title h2 {
  font-size: 45px;
}
@media (max-width: 1199px) {
  .about-page-style-3 .section-title-area .section-title h2 {
    font-size: 41px;
  }
}
@media (max-width: 767px) {
  .about-page-style-3 .section-title-area .section-title h2 {
    font-size: 39px;
  }
}
@media (max-width: 575px) {
  .about-page-style-3 .section-title-area .section-title h2 {
    font-size: 36px;
  }
}
.about-page-style-3 .section-title-area .section-title .sec-content {
  display: flex;
  align-items: end;
  justify-content: space-between;
  margin-top: 50px;
}
@media (max-width: 1199px) {
  .about-page-style-3 .section-title-area .section-title .sec-content {
    flex-wrap: wrap;
    gap: 30px;
  }
}
.about-page-style-3 .section-title-area .section-title .sec-content p {
  max-width: 810px;
}
@media (max-width: 1399px) {
  .about-page-style-3 .section-title-area .section-title .sec-content p {
    max-width: 600px;
  }
}

.ff-bottom-style {
  padding-bottom: 170px;
}
@media (max-width: 1899px) {
  .ff-bottom-style {
    padding-bottom: 150px;
  }
}
@media (max-width: 1600px) {
  .ff-bottom-style {
    padding-bottom: 130px;
  }
}
@media (max-width: 991px) {
  .ff-bottom-style {
    padding-bottom: 100px;
  }
}

.choose-us-section {
  background-color: #272727;
  border-radius: 16px;
  margin: 0 30px;
}
@media (max-width: 1399px) {
  .choose-us-section {
    margin: 0 25px;
  }
}
@media (max-width: 1199px) {
  .choose-us-section {
    margin: 0 20px;
  }
}
.choose-us-section .about-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  margin-top: 60px;
}
@media (max-width: 767px) {
  .choose-us-section .about-text {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
  }
}
.choose-us-section .about-text a {
  text-decoration: underline;
  text-transform: capitalize;
}
.choose-us-section .about-text a:hover {
  color: var(--theme);
}
.choose-us-section .section-title {
  margin-bottom: 60px;
}
@media (max-width: 767px) {
  .choose-us-section .section-title {
    margin-bottom: 30px;
  }
}

.counter-wrapper {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1199px) {
  .counter-wrapper {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 991px) {
  .counter-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .counter-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}
.counter-wrapper .counter-box {
  border-radius: 10px;
  padding: 30px;
  transition: all 0.4s ease-in-out;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
@media (max-width: 1399px) {
  .counter-wrapper .counter-box {
    padding: 25px;
  }
}
@media (max-width: 575px) {
  .counter-wrapper .counter-box {
    max-width: initial;
  }
}
.counter-wrapper .counter-box .text {
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
  display: inline-block;
}
.counter-wrapper .counter-box h2 {
  font-size: 72px;
  font-weight: 600;
  color: var(--theme);
  line-height: 1;
  margin-top: 50px;
}
@media (max-width: 1399px) {
  .counter-wrapper .counter-box h2 {
    font-size: 60px;
    margin-top: 25px;
  }
}
.counter-wrapper .counter-box p {
  font-size: 18px;
  margin-top: 15px;
}

.video-banner {
  border-radius: 20px;
  margin-top: 60px;
  position: relative;
}
@media (max-width: 1199px) {
  .video-banner {
    height: 500px;
  }
}
.video-banner img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
}
.video-banner .video-circle {
  width: 208px;
  height: 208px;
  line-height: 208px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  text-align: center;
  z-index: 2;
  position: absolute;
  right: 180px;
  top: 50%;
  transform: translateY(-50%);
  backdrop-filter: blur(20px);
}
@media (max-width: 991px) {
  .video-banner .video-circle {
    right: initial;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.video-banner .video-circle .text-circle {
  animation: cir36 10s linear infinite;
}
.video-banner .video-circle .text-circle img {
  width: initial;
  height: initial;
}
.video-banner .video-circle .video-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--theme);
  color: var(--white);
  text-align: center;
  width: 94px;
  height: 94px;
  line-height: 94px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  z-index: 9;
}
.video-banner .video-circle .video-btn:hover {
  background-color: var(--white);
  color: var(--body);
}
.video-banner .video-circle img {
  margin-left: 0;
}

.choose-us-section-2 {
  background: linear-gradient(91.27deg, #FAFBFB 31.78%, rgba(250, 251, 251, 0.7) 99.22%);
  border-radius: 20px;
  margin: 0 30px;
  padding: 35px;
}
@media (max-width: 1399px) {
  .choose-us-section-2 {
    margin: 0 25px;
  }
}
@media (max-width: 1199px) {
  .choose-us-section-2 {
    margin: 0 20px;
    padding: 28px;
  }
}

.choose-us-wrapper-2 {
  position: relative;
  z-index: 9;
}
.choose-us-wrapper-2 .choose-line {
  position: absolute;
  top: 0;
  bottom: -10%;
  right: -10%;
  opacity: 0.1;
  z-index: -1;
}
.choose-us-wrapper-2 .choose-line img {
  width: 100%;
  height: 100%;
}
.choose-us-wrapper-2 .choose-us-image {
  border-radius: 16px;
  border: 1px solid rgba(16, 16, 16, 0.2);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 90px 30px;
  max-width: 634px;
}
@media (max-width: 1199px) {
  .choose-us-wrapper-2 .choose-us-image {
    max-width: initial;
  }
  .choose-us-wrapper-2 .choose-us-image img {
    max-width: 500px;
  }
}
.choose-us-wrapper-2 .choose-us-image img {
  animation: cir36 10s linear infinite;
  width: 100%;
  height: 100%;
}
.choose-us-wrapper-2 .choose-us-content .section-title .sub-title {
  color: var(--theme);
}
.choose-us-wrapper-2 .choose-us-content .section-title h2 {
  color: #101010;
  font-size: 48px;
  letter-spacing: -2px;
  font-weight: 500;
}
@media (max-width: 1600px) {
  .choose-us-wrapper-2 .choose-us-content .section-title h2 {
    font-size: 40px;
  }
}
@media (max-width: 991px) {
  .choose-us-wrapper-2 .choose-us-content .section-title h2 {
    font-size: 36px;
  }
}
@media (max-width: 575px) {
  .choose-us-wrapper-2 .choose-us-content .section-title h2 {
    font-size: 30px;
  }
}
.choose-us-wrapper-2 .choose-us-content .theme-btn-main {
  margin-top: 30px;
}
.choose-us-wrapper-2 .choose-us-content .about-conter-items {
  margin-top: 50px;
  display: flex;
  align-items: center;
  gap: 30px;
}
@media (max-width: 1399px) {
  .choose-us-wrapper-2 .choose-us-content .about-conter-items {
    margin-top: 30px;
  }
}
@media (max-width: 1199px) {
  .choose-us-wrapper-2 .choose-us-content .about-conter-items {
    flex-wrap: wrap;
    gap: 20px;
  }
}
@media (max-width: 575px) {
  .choose-us-wrapper-2 .choose-us-content .about-conter-items {
    display: block;
  }
}
.choose-us-wrapper-2 .choose-us-content .about-conter-items .counter-box {
  max-width: 300px;
  background-color: var(--white);
  border-radius: 8px;
  padding: 30px;
  transition: all 0.4s ease-in-out;
}
@media (max-width: 1399px) {
  .choose-us-wrapper-2 .choose-us-content .about-conter-items .counter-box {
    padding: 25px;
  }
}
@media (max-width: 575px) {
  .choose-us-wrapper-2 .choose-us-content .about-conter-items .counter-box {
    margin-bottom: 25px;
    max-width: initial;
  }
}
.choose-us-wrapper-2 .choose-us-content .about-conter-items .counter-box .sub-text {
  font-size: 16px;
  font-weight: 600;
  display: inline-block;
  color: #101010;
}
.choose-us-wrapper-2 .choose-us-content .about-conter-items .counter-box h2 {
  font-weight: 600;
  color: var(--theme);
  margin-top: 50px;
  line-height: 1;
}
@media (max-width: 1399px) {
  .choose-us-wrapper-2 .choose-us-content .about-conter-items .counter-box h2 {
    font-size: 60px;
    margin-top: 25px;
  }
}
.choose-us-wrapper-2 .choose-us-content .about-conter-items .counter-box p {
  font-size: 18px;
  color: #101010;
  margin-top: 15px;
}
.choose-us-wrapper-2 .choose-us-content .about-conter-items .about-vide-bg {
  position: relative;
  height: 270px;
  overflow: hidden;
  border-radius: 8px;
}
@media (max-width: 767px) {
  .choose-us-wrapper-2 .choose-us-content .about-conter-items .about-vide-bg {
    flex-basis: 100%;
    width: 100%;
    height: 450px;
  }
}
@media (max-width: 575px) {
  .choose-us-wrapper-2 .choose-us-content .about-conter-items .about-vide-bg {
    height: 400px;
  }
}
.choose-us-wrapper-2 .choose-us-content .about-conter-items .about-vide-bg img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
  transition-delay: 0.1s;
  transition-timing-function: ease-in-out;
  transition-duration: 0.7s;
  transition-property: all;
}
.choose-us-wrapper-2 .choose-us-content .about-conter-items .about-vide-bg:hover img {
  transform: scale(1.1) rotate(2deg);
}

.choose-us-wrapper-3 .about-left-items {
  max-width: 651px;
}
.choose-us-wrapper-3 .about-left-items .about-thumb {
  height: 488px;
  border-radius: 20px;
}
.choose-us-wrapper-3 .about-left-items .about-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}
.choose-us-wrapper-3 .about-left-items .about-bottom-content {
  background: #FFFDF5;
  display: flex;
  align-items: center;
  gap: 30px;
  padding: 0 30px;
  margin-top: 30px;
  border-radius: 20px;
}
@media (max-width: 575px) {
  .choose-us-wrapper-3 .about-left-items .about-bottom-content {
    flex-wrap: wrap;
    padding: 30px;
  }
}
.choose-us-wrapper-3 .about-left-items .about-bottom-content .about-counter {
  padding-top: 5px;
  padding-bottom: 10px;
}
.choose-us-wrapper-3 .about-left-items .about-bottom-content .about-counter .sub-text {
  background-color: var(--theme);
  display: inline-block;
  font-size: 14px;
  font-weight: 500;
  color: var(--header);
  padding: 5px 8px;
  line-height: 1;
  border-radius: 17px;
  margin-bottom: 45px;
}
.choose-us-wrapper-3 .about-left-items .about-bottom-content .about-counter h2 {
  color: #000000;
  font-size: 48px;
  font-weight: 600;
}
.choose-us-wrapper-3 .about-left-items .about-bottom-content .about-counter p {
  font-weight: 500;
  color: #000000;
  font-family: "Urbanist", sans-serif;
  font-size: 15px;
}
.choose-us-wrapper-3 .about-left-items .about-bottom-content .about-line {
  width: 1px;
  height: 245px;
  background: #F0ECDF;
  display: inline-block;
}
@media (max-width: 575px) {
  .choose-us-wrapper-3 .about-left-items .about-bottom-content .about-line {
    display: none;
  }
}
.choose-us-wrapper-3 .about-left-items .about-bottom-content .content {
  max-width: 375px;
  padding-top: 5px;
  padding-bottom: 10px;
}
@media (max-width: 1399px) {
  .choose-us-wrapper-3 .about-left-items .about-bottom-content .content {
    max-width: 300px;
  }
}
.choose-us-wrapper-3 .about-left-items .about-bottom-content .content p {
  color: #000000;
  line-height: 162.5%;
  margin-bottom: 10px;
  font-size: 16px;
}
@media (max-width: 1399px) {
  .choose-us-wrapper-3 .about-left-items .about-bottom-content .content p {
    margin-bottom: 15px;
  }
}
.choose-us-wrapper-3 .choose-us-content .section-title h2 {
  letter-spacing: -1px;
}
.choose-us-wrapper-3 .choose-us-content .choose-icon-items {
  display: flex;
  align-items: center;
  gap: 60px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 30px 0;
  margin-top: 25px;
  margin-bottom: 30px;
}
@media (max-width: 1399px) {
  .choose-us-wrapper-3 .choose-us-content .choose-icon-items {
    gap: 30px;
  }
}
@media (max-width: 1199px) {
  .choose-us-wrapper-3 .choose-us-content .choose-icon-items {
    flex-wrap: wrap;
  }
}
.choose-us-wrapper-3 .choose-us-content .choose-icon-items .icon-items {
  max-width: 210px;
}
.choose-us-wrapper-3 .choose-us-content .choose-icon-items .icon-items .content {
  margin-top: 15px;
}
.choose-us-wrapper-3 .choose-us-content .choose-icon-items .icon-items .content .title {
  font-size: 24px;
  font-weight: 700;
}
.choose-us-wrapper-3 .choose-us-content .choose-icon-items .icon-items .content p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 16px;
  margin-top: 4px;
}
.choose-us-wrapper-3 .choose-us-content .award-items-box p {
  font-size: 16px;
  font-weight: 600;
  color: var(--header);
  font-family: "Urbanist", sans-serif;
  margin-top: 18px;
}
@media (max-width: 1399px) {
  .choose-us-wrapper-3 .choose-us-content .award-items-box p {
    font-size: 14px;
  }
}
.choose-us-wrapper-3 .choose-us-content .award-items-box:hover img {
  -webkit-animation: gelatine 0.6s;
  animation: gelatine 0.6s;
}
.choose-us-wrapper-3 .choose-us-content .about-small-image {
  max-width: 470px;
  width: 100%;
  height: 206px;
  border-radius: 20px;
  position: relative;
}
.choose-us-wrapper-3 .choose-us-content .about-small-image .video-circle {
  width: 124px;
  height: 124px;
  line-height: 124px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  text-align: center;
  z-index: 2;
  position: absolute;
  right: 180px;
  top: 50%;
  transform: translateY(-50%);
  backdrop-filter: blur(20px);
}
@media (max-width: 1199px) {
  .choose-us-wrapper-3 .choose-us-content .about-small-image .video-circle {
    right: initial;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.choose-us-wrapper-3 .choose-us-content .about-small-image .video-circle .text-circle {
  animation: cir36 10s linear infinite;
}
.choose-us-wrapper-3 .choose-us-content .about-small-image .video-circle .text-circle img {
  width: initial;
  height: initial;
}
.choose-us-wrapper-3 .choose-us-content .about-small-image .video-circle .video-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--theme);
  color: var(--white);
  text-align: center;
  width: 55px;
  height: 55px;
  line-height: 55px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  z-index: 9;
  font-size: 16px;
}
.choose-us-wrapper-3 .choose-us-content .about-small-image .video-circle .video-btn:hover {
  background-color: var(--white);
  color: var(--body);
}
.choose-us-wrapper-3 .choose-us-content .about-small-image .video-circle img {
  margin-left: 0;
}
.choose-us-wrapper-3 .choose-us-content .about-small-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

.work-process-wrapper-3 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
  position: relative;
}
@media (max-width: 1399px) {
  .work-process-wrapper-3 {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media (max-width: 991px) {
  .work-process-wrapper-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767px) {
  .work-process-wrapper-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 470px) {
  .work-process-wrapper-3 {
    grid-template-columns: repeat(1, 1fr);
  }
}
.work-process-wrapper-3 .line-1 {
  position: absolute;
  left: 200px;
  right: 0;
  text-align: center;
  top: 33%;
  transform: translateY(-50%);
  z-index: -1;
  max-width: 1000px;
}
@media (max-width: 1399px) {
  .work-process-wrapper-3 .line-1 {
    display: none;
  }
}
.work-process-wrapper-3 .line-1 img {
  width: 100%;
}
.work-process-wrapper-3 .work-process-items-3 {
  margin-top: 30px;
}
.work-process-wrapper-3 .work-process-items-3 .icon {
  width: 104px;
  height: 104px;
  line-height: 104px;
  text-align: center;
  border-radius: 50%;
  background-color: rgb(39, 39, 39);
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.work-process-wrapper-3 .work-process-items-3 .icon::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--theme);
  top: 100%;
  left: 0;
  border-radius: 50%;
  transition: all 0.4s ease;
  z-index: -1;
}
.work-process-wrapper-3 .work-process-items-3 .content {
  text-align: center;
  margin-top: 18px;
}
.work-process-wrapper-3 .work-process-items-3 .content .title {
  font-size: 24px;
}
@media (max-width: 1199px) {
  .work-process-wrapper-3 .work-process-items-3 .content .title {
    font-size: 20px;
  }
}
.work-process-wrapper-3 .work-process-items-3 .content p {
  font-size: 16px;
  font-weight: 500;
  color: rgb(121, 121, 121);
  margin-top: 10px;
}
@media (max-width: 1199px) {
  .work-process-wrapper-3 .work-process-items-3 .content p br {
    display: none;
  }
}
.work-process-wrapper-3 .work-process-items-3:hover .icon img {
  animation: wobble 1.5s ease-in-out;
}
.work-process-wrapper-3 .work-process-items-3.active .icon::before {
  top: 0;
}

.choose-us-wrapper-33 .choose-us-image {
  position: relative;
  border-radius: 12px;
  height: 810px;
}
@media (max-width: 991px) {
  .choose-us-wrapper-33 .choose-us-image {
    height: 580px;
  }
}
@media (max-width: 575px) {
  .choose-us-wrapper-33 .choose-us-image {
    height: 480px;
  }
}
.choose-us-wrapper-33 .choose-us-image img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}
.choose-us-wrapper-33 .choose-us-image .grap-shape {
  position: absolute;
  bottom: 30px;
  right: 30px;
}
@media (max-width: 767px) {
  .choose-us-wrapper-33 .choose-us-image .grap-shape {
    max-width: 200px;
    right: 15px;
    bottom: 15px;
  }
}
@media (max-width: 1199px) {
  .choose-us-wrapper-33 .choose-us-content {
    margin-left: 0;
  }
}
.choose-us-wrapper-33 .choose-us-content .section-title h2 {
  letter-spacing: -2px;
}
.choose-us-wrapper-33 .choose-us-content .choose-list {
  margin-top: 30px;
  max-width: 570px;
}
.choose-us-wrapper-33 .choose-us-content .choose-list li {
  display: flex;
  gap: 20px;
  padding: 26px 30px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.4s ease-in-out;
}
@media (max-width: 575px) {
  .choose-us-wrapper-33 .choose-us-content .choose-list li {
    flex-wrap: wrap;
  }
}
.choose-us-wrapper-33 .choose-us-content .choose-list li .icon {
  max-width: 80px;
  width: 100%;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border-radius: 50%;
  background-color: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  transition: all 0.4s ease-in-out;
}
@media (max-width: 575px) {
  .choose-us-wrapper-33 .choose-us-content .choose-list li .icon {
    height: 70px;
    max-width: 70px;
    line-height: 70px;
  }
  .choose-us-wrapper-33 .choose-us-content .choose-list li .icon img {
    width: 30px;
  }
}
.choose-us-wrapper-33 .choose-us-content .choose-list li .content h3 {
  color: var(--header);
  text-transform: capitalize;
  font-weight: 700;
}
.choose-us-wrapper-33 .choose-us-content .choose-list li .content p {
  color: var(--header);
  margin-top: 10px;
  max-width: 415px;
  font-size: 16px;
  font-weight: 400;
}
.choose-us-wrapper-33 .choose-us-content .choose-list li.active {
  background-color: var(--white);
  box-shadow: 0 4px 30px 0 rgba(41, 15, 28, 0.1);
  border-radius: 8px;
}
.choose-us-wrapper-33 .choose-us-content .choose-list li.active h3 {
  color: #101010;
}
.choose-us-wrapper-33 .choose-us-content .choose-list li.active p {
  color: #101010;
}
.choose-us-wrapper-33 .choose-us-content .choose-list li.active .icon {
  background-color: var(--theme);
}
.choose-us-wrapper-33 .choose-us-content .choose-list li.active .icon img {
  -webkit-animation: gelatine 0.6s;
  animation: gelatine 0.6s;
}

.choose-us-section-4 {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  margin: 0 60px;
}
@media (max-width: 1899px) {
  .choose-us-section-4 {
    margin: 0 40px;
  }
}
@media (max-width: 1600px) {
  .choose-us-section-4 {
    margin: 0 30px;
  }
}
@media (max-width: 1399px) {
  .choose-us-section-4 {
    margin: 0 25px;
  }
}
@media (max-width: 1199px) {
  .choose-us-section-4 {
    margin: 0 20px;
  }
}

.award-section-4 {
  border-radius: 20px;
  margin: 0 60px;
  padding-bottom: 0 !important;
}
@media (max-width: 1899px) {
  .award-section-4 {
    margin: 0 35px;
  }
}
@media (max-width: 1600px) {
  .award-section-4 {
    margin: 0 30px;
  }
}
@media (max-width: 1399px) {
  .award-section-4 {
    margin: 0 25px;
  }
}
@media (max-width: 1199px) {
  .award-section-4 {
    margin: 0 20px;
  }
}
@media (max-width: 991px) {
  .award-section-4 {
    padding-bottom: 80px !important;
  }
}

.award-wrapper-4 {
  position: relative;
}
.award-wrapper-4 .award-content ul {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 30px;
}
.award-wrapper-4 .award-content ul li {
  display: flex;
  align-items: center;
  gap: 80px;
}
.award-wrapper-4 .award-content .award-list-items {
  display: flex;
  align-items: center;
  gap: 85px;
}
@media (max-width: 1199px) {
  .award-wrapper-4 .award-content .award-list-items {
    gap: 40px;
  }
}
.award-wrapper-4 .award-content .award-list-items.bb-bottom span {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.award-wrapper-4 .award-content .award-list-items span {
  width: 100%;
  display: inline-block;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 30px 0;
}
.award-wrapper-4 .award-image {
  margin-top: 50px;
}
@media (max-width: 991px) {
  .award-wrapper-4 .award-image {
    display: none;
  }
}

.why-choose-us-wrapper-5 .section-title h2 {
  font-size: 48px;
}
@media (max-width: 991px) {
  .why-choose-us-wrapper-5 .section-title h2 {
    font-size: 44px;
  }
}
@media (max-width: 767px) {
  .why-choose-us-wrapper-5 .section-title h2 {
    font-size: 40px;
  }
}
@media (max-width: 575px) {
  .why-choose-us-wrapper-5 .section-title h2 {
    font-size: 36px;
  }
}
.why-choose-us-wrapper-5 .thumb {
  margin-top: 30px;
  border-radius: 10px;
}
.why-choose-us-wrapper-5 .thumb img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.why-choose-us-wrapper-5 .choose-us-content {
  margin-top: 30px;
  margin-left: 40px;
}
@media (max-width: 1199px) {
  .why-choose-us-wrapper-5 .choose-us-content {
    margin-left: 0;
  }
}
.why-choose-us-wrapper-5 .choose-us-content .theme-btn-main {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 40px;
}
.why-choose-us-wrapper-5 .choose-us-content .theme-btn-main .theme-btn-arrow-left, .why-choose-us-wrapper-5 .choose-us-content .theme-btn-main .theme-btn-arrow-right {
  background-color: var(--theme);
  color: var(--white);
}
.why-choose-us-wrapper-5 .choose-us-content .about-conter-items {
  margin-top: 50px;
  display: flex;
  align-items: center;
  gap: 30px;
}
@media (max-width: 1399px) {
  .why-choose-us-wrapper-5 .choose-us-content .about-conter-items {
    margin-top: 30px;
  }
}
@media (max-width: 1199px) {
  .why-choose-us-wrapper-5 .choose-us-content .about-conter-items {
    flex-wrap: wrap;
    gap: 20px;
  }
}
@media (max-width: 575px) {
  .why-choose-us-wrapper-5 .choose-us-content .about-conter-items {
    display: block;
  }
}
.why-choose-us-wrapper-5 .choose-us-content .about-conter-items .counter-box {
  max-width: 300px;
  background-color: #FBF9EF;
  border-radius: 8px;
  padding: 30px;
  transition: all 0.4s ease-in-out;
}
@media (max-width: 1399px) {
  .why-choose-us-wrapper-5 .choose-us-content .about-conter-items .counter-box {
    padding: 25px;
  }
}
@media (max-width: 575px) {
  .why-choose-us-wrapper-5 .choose-us-content .about-conter-items .counter-box {
    margin-bottom: 25px;
    max-width: initial;
  }
}
.why-choose-us-wrapper-5 .choose-us-content .about-conter-items .counter-box .sub-text {
  font-size: 16px;
  font-weight: 600;
  display: inline-block;
  color: #101010;
}
.why-choose-us-wrapper-5 .choose-us-content .about-conter-items .counter-box h2 {
  font-weight: 600;
  color: var(--theme);
  margin-top: 50px;
  line-height: 1;
}
@media (max-width: 1399px) {
  .why-choose-us-wrapper-5 .choose-us-content .about-conter-items .counter-box h2 {
    font-size: 60px;
    margin-top: 25px;
  }
}
.why-choose-us-wrapper-5 .choose-us-content .about-conter-items .counter-box p {
  font-size: 18px;
  color: #101010;
  margin-top: 15px;
}
.why-choose-us-wrapper-5 .choose-us-content .about-conter-items .about-vide-bg {
  position: relative;
  height: 270px;
  overflow: hidden;
  border-radius: 8px;
}
@media (max-width: 767px) {
  .why-choose-us-wrapper-5 .choose-us-content .about-conter-items .about-vide-bg {
    flex-basis: 100%;
    width: 100%;
    height: 450px;
  }
}
@media (max-width: 575px) {
  .why-choose-us-wrapper-5 .choose-us-content .about-conter-items .about-vide-bg {
    height: 400px;
  }
}
.why-choose-us-wrapper-5 .choose-us-content .about-conter-items .about-vide-bg img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
  transition-delay: 0.1s;
  transition-timing-function: ease-in-out;
  transition-duration: 0.7s;
  transition-property: all;
}
.why-choose-us-wrapper-5 .choose-us-content .about-conter-items .about-vide-bg:hover img {
  transform: scale(1.1) rotate(2deg);
}

.service-section .section-title-area .client-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.service-section .section-title-area .client-info .content h2 {
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
}
.service-section .section-title-area .client-info .content p {
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
}
.service-section .service-box-style .block .service-acc-content.current {
  display: block;
}
.service-section .service-box-style .block .service-acc-content.current h4 {
  color: #101010;
}
.service-section .service-box-style .block .service-acc-btn.active .icon:before {
  content: "\f00d";
}
.service-section .service-box-style .block .service-acc-btn.active .icon {
  background-color: var(--theme);
  color: var(--white);
  border: 1px solid var(--theme);
}
.service-section .service-box-style .block .service-acc-btn.active h3 {
  color: #101010;
}
.service-section .service-box-style .block .service-acc-btn.active {
  color: var(--theme);
}
.service-section .service-box-style .block .service-acc-btn.active .number {
  color: var(--theme);
}
.service-section .service-box-style .block:last-child {
  margin-bottom: 0;
}

.service-box-style {
  margin-top: 30px;
}
.service-box-style .service-list-wrap {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 50px 75px;
  position: relative;
}
.service-box-style .service-list-wrap .service-box {
  position: absolute;
  bottom: 0;
  left: 0;
}
@media (max-width: 1199px) {
  .service-box-style .service-list-wrap .service-box {
    display: none;
  }
}
@media (max-width: 575px) {
  .service-box-style .service-list-wrap {
    padding: 40px 10px;
  }
}
.service-box-style .service-list-wrap.active-block {
  background-color: #FBF9EF;
  border-bottom: 1px solid #FBF9EF;
  border-radius: 20px;
}
.service-box-style .service-list-wrap .service-acc-btn {
  position: relative;
  padding-left: 275px;
  cursor: pointer;
}
@media (max-width: 1399px) {
  .service-box-style .service-list-wrap .service-acc-btn {
    padding-left: 200px;
  }
}
@media (max-width: 1199px) {
  .service-box-style .service-list-wrap .service-acc-btn {
    padding-left: 90px;
  }
}
@media (max-width: 575px) {
  .service-box-style .service-list-wrap .service-acc-btn {
    padding-left: 20px;
  }
}
.service-box-style .service-list-wrap .service-acc-btn .number {
  display: inline-block;
  font-size: 18px;
  font-weight: 800;
  font-family: "Urbanist", sans-serif;
  color: #797979;
  position: absolute;
  top: 0;
  left: 0;
}
@media (max-width: 575px) {
  .service-box-style .service-list-wrap .service-acc-btn .number {
    top: -30px;
    left: 20px;
  }
}
.service-box-style .service-list-wrap .service-acc-btn .icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  line-height: 40px;
  color: var(--header);
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-align: center;
}
.service-box-style .service-list-wrap .service-acc-btn h3 {
  font-size: 30px;
  font-weight: 600;
  text-transform: capitalize;
}
@media (max-width: 575px) {
  .service-box-style .service-list-wrap .service-acc-btn h3 {
    font-size: 25px;
  }
}
.service-box-style .service-list-wrap .service-acc-btn h3 a {
  color: var(--header);
}
.service-box-style .service-list-wrap .service-acc-btn h3 a:hover {
  color: var(--theme);
}
.service-box-style .service-list-wrap .service-acc-content {
  margin-top: 35px;
  display: none;
  position: relative;
}
@media (max-width: 575px) {
  .service-box-style .service-list-wrap .service-acc-content {
    margin-top: 25px;
  }
}
.service-box-style .service-list-wrap .service-wrap {
  display: flex;
  gap: 100px;
  width: 100%;
  padding-left: 275px;
}
@media (max-width: 1399px) {
  .service-box-style .service-list-wrap .service-wrap {
    padding-left: 200px;
  }
}
@media (max-width: 1199px) {
  .service-box-style .service-list-wrap .service-wrap {
    padding-left: 90px;
  }
}
@media (max-width: 991px) {
  .service-box-style .service-list-wrap .service-wrap {
    flex-wrap: wrap;
    gap: 30px;
  }
}
@media (max-width: 575px) {
  .service-box-style .service-list-wrap .service-wrap {
    padding-left: 20px;
  }
}
.service-box-style .service-list-wrap .service-wrap .item-text h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #101010;
}
.service-box-style .service-list-wrap .service-wrap .item-text .text {
  max-width: 465px;
}
.service-box-style .service-list-wrap .service-wrap .item-text .text p {
  font-size: 20px;
  line-height: 155.556%;
  font-weight: 500;
  color: #101010;
}
@media (max-width: 575px) {
  .service-box-style .service-list-wrap .service-wrap .item-text .text p {
    font-size: 16px;
  }
}
.service-box-style .service-list-wrap .service-wrap .item-text ul li {
  color: #101010;
  font-family: "Urbanist", sans-serif;
}
.service-box-style .service-list-wrap .service-wrap .item-text ul li:not(:last-child) {
  margin-bottom: 10px;
}
.service-box-style .service-list-wrap .service-wrap .item-text ul li i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--theme);
}
.service-box-style .service-list-wrap.style-two .service-acc-btn {
  padding-left: 70px;
}
.service-box-style .service-list-wrap.style-two .number {
  top: 6px;
}
.service-box-style .service-list-wrap.style-two .service-wrap {
  padding-left: 70px;
}
@media (max-width: 575px) {
  .service-box-style .service-list-wrap.style-two .service-wrap {
    padding-left: 20px;
  }
}
.service-box-style .service-list-wrap.style-two .service-thumb {
  border-radius: 10px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 170px;
}
@media (max-width: 1399px) {
  .service-box-style .service-list-wrap.style-two .service-thumb {
    display: none;
  }
}
.service-box-style .service-list-wrap.style-two .service-thumb img {
  border-radius: 10px;
}
.service-box-style .service-list-wrap.accordion.block .service-thumb {
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}
.service-box-style .service-list-wrap.active-block .service-thumb {
  opacity: 1 !important;
  visibility: visible !important;
}

.service-section-2 .section-title {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 60px;
}

.service-box-items-2 {
  margin-top: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 60px;
  background-color: #101010;
}
.service-box-items-2 .service-content {
  margin-right: 10px;
}
@media (max-width: 1199px) {
  .service-box-items-2 .service-content {
    margin-right: 0;
  }
}
.service-box-items-2 .service-content p {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  color: #797979;
}
@media (max-width: 1600px) {
  .service-box-items-2 .service-content p {
    font-size: 18px;
  }
}
@media (max-width: 767px) {
  .service-box-items-2 .service-content p {
    font-size: 16px;
  }
}
.service-box-items-2 .service-content .title {
  font-size: 65px;
  font-weight: 700;
  text-transform: uppercase;
  margin-top: 40px;
  line-height: 115%;
}
@media (max-width: 1600px) {
  .service-box-items-2 .service-content .title {
    font-size: 48px;
  }
}
@media (max-width: 991px) {
  .service-box-items-2 .service-content .title {
    font-size: 36px;
  }
}
@media (max-width: 575px) {
  .service-box-items-2 .service-content .title {
    font-size: 32px;
  }
}
.service-box-items-2 .service-content .title:hover a {
  color: var(--theme);
}
.service-box-items-2 .service-content .service-list {
  display: flex;
  align-items: center;
  gap: 50px;
  margin-top: 64px;
}
@media (max-width: 991px) {
  .service-box-items-2 .service-content .service-list {
    margin-top: 25px;
  }
}
.service-box-items-2 .service-content .service-list ul li {
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 600;
  color: #797979;
}
.service-box-items-2 .service-content .service-list ul li:not(:last-child) {
  margin-bottom: 15px;
}
.service-box-items-2 .service-content .title-2 {
  font-size: 24px;
  font-weight: 500;
  color: #797979;
  max-width: 481px;
  margin-top: 90px;
}
@media (max-width: 1600px) {
  .service-box-items-2 .service-content .title-2 {
    font-size: 18px;
    line-height: 130%;
  }
}
@media (max-width: 991px) {
  .service-box-items-2 .service-content .title-2 {
    margin-top: 40px;
  }
}
@media (max-width: 767px) {
  .service-box-items-2 .service-content .title-2 {
    font-size: 16px;
  }
}
.service-box-items-2 .service-content .list-items {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
}
@media (max-width: 991px) {
  .service-box-items-2 .service-content .list-items {
    margin-top: 25px;
  }
}
@media (max-width: 767px) {
  .service-box-items-2 .service-content .list-items {
    flex-wrap: wrap;
  }
}
.service-box-items-2 .service-content .list-items li a {
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 13px;
  border-radius: 35px;
  display: inline-block;
  line-height: 1;
  transition: all 0.4s ease-in-out;
}
.service-box-items-2 .service-content .list-items li a:hover {
  background-color: var(--theme);
  border-color: var(--theme);
}
.service-box-items-2 .service-thumb {
  height: 626px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 991px) {
  .service-box-items-2 .service-thumb {
    height: 500px;
  }
}
.service-box-items-2 .service-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  border-radius: 20px;
}
.service-box-items-2 .service-thumb img:first-child {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  -webkit-transform: translateX(50%) scaleX(2);
  transform: translate(50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
.service-box-items-2:hover .service-thumb img:first-child {
  -webkit-transform: translateX(0) scaleX(1);
  transform: translate(0) scaleX(1);
  opacity: 1;
  -webkit-filter: blur(0);
  filter: blur(0);
}
.service-box-items-2:hover .service-thumb img:nth-child(2) {
  -webkit-transform: translateX(-50%) scaleX(2);
  transform: translateX(-50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

.service-section-3 {
  position: relative;
}
.service-section-3::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  left: 30px;
  background-color: var(--bg);
  border-radius: 16px;
  width: calc(100% - 60px);
}
@media (max-width: 1600px) {
  .service-section-3::before {
    width: 100%;
    left: 0;
  }
}
.service-section-3 .array-button {
  display: flex;
  align-items: center;
  gap: 15px;
  z-index: 999;
}
.service-section-3 .array-button .array-prev, .service-section-3 .array-button .array-next {
  border-radius: 100px;
  background-color: var(--white);
  width: 54px;
  height: 54px;
  line-height: 54px;
  text-align: center;
  border-radius: 50%;
  color: #101010;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}
.service-section-3 .array-button .array-prev:hover, .service-section-3 .array-button .array-next:hover {
  background-color: var(--theme);
  color: var(--white);
}
.service-section-3 .array-button .swiper-dot .swiper-pagination-bullet {
  background-color: #797979;
}
.service-section-3 .array-button .swiper-dot .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--theme);
}

.service-box-items-3 {
  margin-top: 30px;
  background-color: #FBF9EF;
  border-radius: 10px;
  padding: 30px;
  position: relative;
  z-index: 9;
}
.service-box-items-3 .shape-1 {
  position: absolute;
  top: 0;
  right: 0;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
}
.service-box-items-3::before {
  position: absolute;
  content: "";
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  opacity: 0;
  -webkit-transform: scale(1, 0.3);
  transform: scale(1, 0.3);
  background-color: var(--theme);
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  z-index: -1;
  border-radius: 10px;
}
.service-box-items-3 span {
  color: #797979;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -1px;
  margin-bottom: 25px;
  display: inline-block;
}
.service-box-items-3 h3 {
  margin-bottom: 20px;
  font-weight: 700;
  font-size: 24px;
  text-transform: capitalize;
}
.service-box-items-3 h3 a {
  color: #101010;
}
/* Whole-card click: the title link's overlay covers the card so a click anywhere
   opens the service. The card is inside a Swiper slide; the overlay is a click
   target only, so drag still works (Swiper suppresses the click after a drag).
   The arrow link lives in .feature-info-box, raised below so it stays usable. */
.service-box-items-3 h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.service-box-items-3 .feature-info-box { position: relative; z-index: 2; }
.service-box-items-3 p {
  color: #101010;
}
.service-box-items-3 .feature-info-box {
  background-color: var(--white);
  margin-top: 55px;
  border-radius: 7px;
  padding: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 1399px) {
  .service-box-items-3 .feature-info-box {
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
  }
}
.service-box-items-3 .feature-info-box ul {
  display: flex;
  align-items: center;
}
@media (max-width: 1199px) {
  .service-box-items-3 .feature-info-box ul {
    flex-wrap: wrap;
    gap: 10px;
  }
}
.service-box-items-3 .feature-info-box ul li {
  border-radius: 50px;
  border: 1px solid #E6E8EB;
  font-size: 16px;
  font-weight: 500;
  color: #101010;
  font-family: "Urbanist", sans-serif;
  padding: 0 12px;
  height: 30px;
  line-height: 28px;
  transition: all 0.4s ease-in-out;
}
.service-box-items-3 .feature-info-box ul li:hover {
  background-color: var(--theme);
  color: var(--white);
  border: 1px solid var(--theme);
}
.service-box-items-3 .feature-info-box .icon {
  display: inline-block;
  width: 43px;
  height: 43px;
  line-height: 43px;
  border-radius: 50%;
  background-color: #101010;
  text-align: center;
  color: var(--white);
}
.service-box-items-3.active .shape-1 {
  opacity: 1;
  visibility: visible;
}
.service-box-items-3.active h6, .service-box-items-3.active h3, .service-box-items-3.active p, .service-box-items-3.active span {
  color: var(--white);
}
.service-box-items-3.active h3 a {
  color: var(--white);
}
.service-box-items-3.active::before {
  opacity: 1;
  transform: scale(1, 1);
}
.service-box-items-3.active .icon {
  background-color: var(--theme) !important;
}
.service-box-items-3:hover .shape-1 {
  opacity: 1;
  visibility: visible;
}
.service-box-items-3:hover h6, .service-box-items-3:hover h3, .service-box-items-3:hover p, .service-box-items-3:hover span {
  color: var(--white);
}
.service-box-items-3:hover h3 a {
  color: var(--white);
}
.service-box-items-3:hover::before {
  opacity: 1;
  transform: scale(1, 1);
}
.service-box-items-3:hover .icon {
  background-color: var(--theme) !important;
}

.service-wrapper-3 {
  margin-right: -40%;
}
@media (max-width: 1600px) {
  .service-wrapper-3 {
    margin-right: -35%;
  }
}
@media (max-width: 1399px) {
  .service-wrapper-3 {
    margin-right: -55%;
  }
}
@media (max-width: 575px) {
  .service-wrapper-3 {
    margin-right: 0;
  }
}

.service-section-4 .section-title-area {
  align-items: end;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 50px;
  margin-bottom: 0;
}
@media (max-width: 1199px) {
  .service-section-4 .section-title-area {
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    text-align: center;
  }
}
.service-section-4 .section-title .title {
  font-size: 200px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 95%;
}
@media (max-width: 1899px) {
  .service-section-4 .section-title .title {
    font-size: 160px;
  }
}
@media (max-width: 1600px) {
  .service-section-4 .section-title .title {
    font-size: 120px;
  }
}
@media (max-width: 1399px) {
  .service-section-4 .section-title .title {
    font-size: 130px;
  }
}
@media screen and (max-width: 1300px) {
  .service-section-4 .section-title .title {
    font-size: 110px;
  }
}
@media (max-width: 1199px) {
  .service-section-4 .section-title .title {
    font-size: 100px;
  }
}
@media (max-width: 991px) {
  .service-section-4 .section-title .title {
    font-size: 80px;
    text-align: center;
  }
}
@media (max-width: 767px) {
  .service-section-4 .section-title .title {
    font-size: 60px;
  }
}
@media (max-width: 575px) {
  .service-section-4 .section-title .title {
    font-size: 45px;
  }
}
@media (max-width: 470px) {
  .service-section-4 .section-title .title {
    font-size: 38px;
  }
}
.service-section-4 .section-title .title .text-1 {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 1199px) {
  .service-section-4 .section-title .title .text-1 {
    display: initial;
  }
}
@media (max-width: 1199px) {
  .service-section-4 .section-title .title .text-1 img {
    display: none;
  }
}
.service-section-4 .section-title .title .text-2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;
  font-family: "Instrument Serif", serif;
  letter-spacing: 0.15em;
  font-style: italic;
}
@media (max-width: 1199px) {
  .service-section-4 .section-title .title .text-2 {
    display: initial;
  }
}
.service-section-4 .section-title .title .text-2 img {
  border-radius: 100px;
}
@media (max-width: 1600px) {
  .service-section-4 .section-title .title .text-2 img {
    width: 250px;
  }
}
@media screen and (max-width: 1300px) {
  .service-section-4 .section-title .title .text-2 img {
    width: 220px;
  }
}
@media (max-width: 1199px) {
  .service-section-4 .section-title .title .text-2 img {
    display: none;
  }
}
.service-section-4 .section-title .title .text-3 {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 1199px) {
  .service-section-4 .section-title .title .text-3 {
    display: initial;
  }
}
.service-section-4 .section-title .title .text-3 img {
  border-radius: 100px;
}
@media (max-width: 1199px) {
  .service-section-4 .section-title .title .text-3 img {
    display: none;
  }
}
.service-section-4 .top-content {
  max-width: 275px;
  margin-left: auto;
}
@media (max-width: 1199px) {
  .service-section-4 .top-content {
    margin-left: initial;
    margin: 0 auto;
  }
}
@media (max-width: 1600px) {
  .service-section-4 .top-content .arrow-icon {
    max-width: 200px;
  }
  .service-section-4 .top-content .arrow-icon img {
    width: 100%;
    height: 100%;
  }
}
.service-section-4 .top-content .content {
  margin-top: 45px;
}
.service-section-4 .top-content .content h3 {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 6px;
}
.service-section-4 .top-content .content h3 span {
  font-weight: 400;
  font-family: "Instrument Serif", serif;
  font-style: italic;
}
.service-section-4 .service-box-style .block .service-acc-content.current {
  display: block;
}
.service-section-4 .service-box-style .block .service-acc-content.current h4 {
  color: #101010;
}
.service-section-4 .service-box-style .block .service-acc-btn.active .icon:before {
  content: "\f00d";
}
.service-section-4 .service-box-style .block .service-acc-btn.active .icon {
  background-color: var(--theme);
  color: var(--white);
  border: 1px solid var(--theme);
}
.service-section-4 .service-box-style .block .service-acc-btn.active h3 {
  color: #101010;
}
.service-section-4 .service-box-style .block .service-acc-btn.active {
  color: var(--theme);
}
.service-section-4 .service-box-style .block .service-acc-btn.active .number {
  color: var(--theme);
}
.service-section-4 .service-box-style .block:last-child {
  margin-bottom: 0;
}

.services-details-section {
  position: relative;
  padding-top: 180px !important;
}
@media (max-width: 1199px) {
  .services-details-section {
    padding-bottom: 0px !important;
  }
}
.services-details-section .title-area {
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 120px;
  margin-bottom: 120px;
}
@media (max-width: 1199px) {
  .services-details-section .title-area {
    padding-bottom: 100px;
    margin-bottom: 100px;
  }
}
@media (max-width: 991px) {
  .services-details-section .title-area {
    padding-bottom: 80px;
    margin-bottom: 80px;
  }
}
.services-details-section h1 {
  color: var(--white);
  font-size: 110px;
  position: relative;
  z-index: 9;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 116%;
  font-weight: 600;
}
.services-details-section h1 span {
  font-weight: 400;
  font-family: "Instrument Serif", serif;
  font-style: italic;
}
@media (max-width: 1399px) {
  .services-details-section h1 {
    font-size: 80px;
  }
}
@media (max-width: 991px) {
  .services-details-section h1 {
    font-size: 70px;
  }
}
@media (max-width: 767px) {
  .services-details-section h1 {
    font-size: 55px;
  }
}
@media (max-width: 575px) {
  .services-details-section h1 {
    font-size: 50px;
  }
}
@media (max-width: 470px) {
  .services-details-section h1 {
    font-size: 40px;
  }
}
.services-details-section .light-bg {
  position: absolute;
  left: 17%;
  top: -6%;
  z-index: -1;
}
.services-details-section .bg-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
}
.services-details-section .bg-line img {
  width: 100%;
}
@media (max-width: 1199px) {
  .services-details-section {
    padding-top: 100px;
  }
}
@media (max-width: 991px) {
  .services-details-section {
    padding-top: 80px;
  }
}

.service-details-wrapper .service-details-image-top {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 50px;
}
.service-details-wrapper .service-details-image-top img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.service-details-wrapper .details-top-item {
  display: flex;
  align-items: center;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 100px;
}
@media (max-width: 1399px) {
  .service-details-wrapper .details-top-item {
    margin-bottom: 30px;
  }
}
@media (max-width: 991px) {
  .service-details-wrapper .details-top-item {
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 30px;
  }
}
.service-details-wrapper .details-top-item .left-content h2 {
  font-weight: 600;
  font-size: 65px;
  margin-bottom: 30px;
}
@media (max-width: 1399px) {
  .service-details-wrapper .details-top-item .left-content h2 {
    font-size: 40px;
  }
}
@media (max-width: 991px) {
  .service-details-wrapper .details-top-item .left-content h2 {
    font-size: 30px;
  }
}
@media (max-width: 767px) {
  .service-details-wrapper .details-top-item .left-content h2 {
    font-size: 30px;
  }
}
@media (max-width: 575px) {
  .service-details-wrapper .details-top-item .left-content h2 {
    font-size: 25px;
  }
}
.service-details-wrapper .details-top-item .left-content p {
  max-width: 788px;
  font-size: 18px;
  font-weight: 400;
  margin-top: 10px;
}
@media (max-width: 1399px) {
  .service-details-wrapper .details-top-item .left-content p {
    font-size: 16px;
    max-width: 565px;
  }
}
.service-details-wrapper .details-top-item .details-list li {
  font-size: 18px;
  font-weight: 500;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.service-details-wrapper .details-top-item .details-list li:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 1399px) {
  .service-details-wrapper .details-top-item .details-list li {
    font-size: 16px;
  }
}
.service-details-wrapper .details-top-item .details-list li i {
  margin-right: 5px;
}
.service-details-wrapper .service-details-image {
  overflow: hidden;
  border-radius: 10px;
}
.service-details-wrapper .service-details-image img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.service-details-wrapper .service-concept-item {
  position: relative;
  margin-top: 80px;
}
@media (max-width: 1399px) {
  .service-details-wrapper .service-concept-item {
    margin-top: 30px;
  }
}
.service-details-wrapper .service-concept-item .service-count-left h2 {
  font-size: 280px;
  font-weight: 600;
  line-height: 1;
  margin-bottom: 0;
}
@media (max-width: 1399px) {
  .service-details-wrapper .service-concept-item .service-count-left h2 {
    font-size: 100px;
  }
}
.service-details-wrapper .service-concept-item .service-count-left p {
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.03em;
  max-width: 238px;
}
@media (max-width: 1399px) {
  .service-details-wrapper .service-concept-item .service-count-left p {
    font-size: 16px;
  }
}
.service-details-wrapper .service-concept-item .service-count-left .details-thumb {
  margin-top: 50px;
  max-width: 600px;
  border-radius: 10px;
}
@media (max-width: 1399px) {
  .service-details-wrapper .service-concept-item .service-count-left .details-thumb {
    margin-top: 30px;
  }
}
.service-details-wrapper .service-concept-item .service-count-left .details-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  border-radius: 10px;
}
.service-details-wrapper .service-concept-item h2 {
  font-size: 72px;
  font-weight: 600;
  margin-bottom: 50px;
}
@media (max-width: 1399px) {
  .service-details-wrapper .service-concept-item h2 {
    font-size: 45px;
    margin-bottom: 30px;
  }
}
@media (max-width: 991px) {
  .service-details-wrapper .service-concept-item h2 {
    font-size: 40px;
  }
}
@media (max-width: 767px) {
  .service-details-wrapper .service-concept-item h2 {
    font-size: 30px;
  }
}
@media (max-width: 575px) {
  .service-details-wrapper .service-concept-item h2 {
    font-size: 25px;
  }
}
.service-details-wrapper .service-concept-item .service-concept-box {
  background-color: var(--white);
  padding: 38px 30px;
  margin-bottom: 30px;
  margin-left: 80px;
  border-radius: 8px;
  padding-top: 33px;
  transition: all 0.4s ease-in-out;
}
@media (max-width: 1600px) {
  .service-details-wrapper .service-concept-item .service-concept-box {
    padding: 35px 30px;
  }
}
@media (max-width: 1399px) {
  .service-details-wrapper .service-concept-item .service-concept-box {
    margin-left: 0;
    padding: 30px;
    margin-bottom: 30px;
  }
}
.service-details-wrapper .service-concept-item .service-concept-box h3 {
  font-size: 32px;
  font-weight: 600;
  color: #101010;
  text-transform: capitalize;
}
@media (max-width: 1600px) {
  .service-details-wrapper .service-concept-item .service-concept-box h3 {
    font-size: 28px;
  }
}
@media (max-width: 1399px) {
  .service-details-wrapper .service-concept-item .service-concept-box h3 {
    font-size: 20px;
  }
}
.service-details-wrapper .service-concept-item .service-concept-box p {
  max-width: 680px;
  font-size: 18px;
  font-weight: 400;
  color: rgb(3, 7, 13);
  margin-top: 15px;
}
@media (max-width: 1600px) {
  .service-details-wrapper .service-concept-item .service-concept-box p {
    font-size: 16px;
  }
}
.service-details-wrapper .service-concept-item .service-concept-box.active {
  background-color: var(--theme);
}
.service-details-wrapper .service-concept-item .service-concept-box.active h3 {
  color: var(--white);
}
.service-details-wrapper .service-concept-item .service-concept-box.active p {
  color: var(--white);
}
.service-details-wrapper .service-concept-item .number-list {
  position: absolute;
  left: 46%;
  transform: translateX(-50%);
  display: grid;
  gap: 180px;
  top: 310px;
}
@media (max-width: 1600px) {
  .service-details-wrapper .service-concept-item .number-list {
    left: 52%;
  }
}
@media (max-width: 1399px) {
  .service-details-wrapper .service-concept-item .number-list {
    display: none;
  }
}
.service-details-wrapper .service-concept-item .number-list::before {
  position: absolute;
  content: "";
  background-color: rgba(255, 255, 255, 0.2);
  width: 1px;
  height: 100%;
  left: 25px;
  top: 0;
}
.service-details-wrapper .service-concept-item .number-list .number {
  width: 48px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  border-radius: 100px;
  background-color: var(--theme);
  font-size: 20px;
  font-weight: 600;
  position: relative;
  z-index: 9;
  color: var(--white);
}

.service-visual-item p {
  margin-bottom: 40px;
  font-size: 18px;
  font-weight: 400;
}
@media (max-width: 1399px) {
  .service-visual-item p {
    margin-top: 30px;
    font-size: 16px;
  }
}
@media (max-width: 991px) {
  .service-visual-item p {
    font-size: 16px;
    margin-bottom: 30px;
  }
}
.service-visual-item .service-visual-image {
  overflow: hidden;
  border-radius: 10px;
}
.service-visual-item .service-visual-image img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.service-visual-section {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
@media (max-width: 991px) {
  .service-visual-section {
    padding-top: 80px;
    margin-top: 80px;
  }
}

.details-icon-box-item {
  border-radius: 16px;
  padding: 64px 40px;
  background-color: #FBF9EF;
  transition: all 0.4s ease-in-out;
}
@media (max-width: 1199px) {
  .details-icon-box-item {
    padding: 30px;
  }
}
.details-icon-box-item .content {
  margin-top: 30px;
}
.details-icon-box-item .content .title {
  color: #101010;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 15px;
}
@media (max-width: 1199px) {
  .details-icon-box-item .content .title {
    font-size: 22px;
  }
}
.details-icon-box-item .content p {
  color: #4B4B4B;
  font-size: 18px;
}
.details-icon-box-item:hover {
  background-color: #272727;
}
.details-icon-box-item:hover .content .title {
  color: #fff;
}
.details-icon-box-item:hover .content p {
  color: #fff;
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% - var(--gap)));
  }
}
.marque-section {
  background-color: var(--theme);
  padding: 14px 0;
}
.marque-section .text {
  color: var(--white);
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  display: flex;
  align-items: center;
  gap: 60px;
}
.marque-section .text-3 {
  text-transform: uppercase;
  font-size: 80px;
  font-weight: 600;
  line-height: 1;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 50px;
}
.marque-section .text-4 {
  font-size: 96px;
  font-weight: 600;
  color: transparent;
  font-size: 96.552px;
  font-weight: 600;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: var(--header);
  transition: all 0.4s ease-in-out;
  line-height: 1;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 50px;
}
@media (max-width: 767px) {
  .marque-section .text-4 {
    font-size: 60px;
  }
}
.marque-section .text-4:hover {
  color: var(--header);
}
.marque-section .marquee {
  gap: 60px;
  --duration: 20s !important;
}
.marque-section .marquee-group {
  gap: 60px;
}

.marquee {
  position: relative;
  --duration: 100s;
  --gap: 0px;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: 0;
}
.marquee .marquee-group {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 30px;
  min-width: 100%;
  animation: scroll var(--duration) linear infinite;
}
.marquee .marquee-group .icon-box {
  background: rgba(255, 255, 255, 0.1);
  border: 1.13258px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(18.1212px);
  border-radius: 9.78671px;
  width: 123px;
  height: 123px;
  line-height: 123px;
  text-align: center;
  border-radius: 10px;
}

.marque-section-2 .marquee {
  gap: 60px;
  --duration: 30s !important;
}
.marque-section-2 .marquee-group {
  gap: 70px;
}
@media (max-width: 767px) {
  .marque-section-2 .marquee-group {
    gap: 40px;
  }
}
.marque-section-2 .marquee-group .text-2 {
  text-transform: uppercase;
  font-weight: 600;
  font-size: 125px;
  letter-spacing: -7.20707px;
  line-height: 1;
  color: var(--theme);
  display: flex;
  align-items: center;
  gap: 70px;
}
@media (max-width: 767px) {
  .marque-section-2 .marquee-group .text-2 {
    font-size: 80px;
    letter-spacing: -4.5px;
    gap: 40px;
  }
}

.powerful-feature-section .section-title {
  margin-bottom: 60px;
}

.powerful-feature-section .marquee {
  --duration: 30s;
}
@media (max-width: 1899px) {
  .powerful-feature-section .marquee {
    gap: 30px !important;
  }
}
.powerful-feature-section .marquee-group {
  gap: 0 !important;
}
@media (max-width: 1899px) {
  .powerful-feature-section .marquee-group {
    gap: 30px !important;
  }
}
.powerful-feature-section .marquee-2 {
  margin-top: 35px;
}
.powerful-feature-section .marquee-2 .marquee-group {
  animation: scrollLTR var(--duration) linear infinite;
}

@keyframes scrollLTR {
  0% {
    transform: translateX(calc(-100% - var(--gap)));
  }
  100% {
    transform: translateX(0);
  }
}
.testimonial-box-style-1 {
  margin-top: 30px;
  padding: 30px;
  background-color: #FBF9EF;
  border-radius: 10px;
}
.testimonial-box-style-1 .quote-icon {
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--theme);
  margin-bottom: 40px;
}
/* Quote body copy. Was italic 600 at 125% with -1px tracking and 0.8 opacity -
   four things fighting legibility at once on what is a full paragraph of text.
   Set as regular upright body copy with open leading. */
.testimonial-box-style-1 h3 {
  font-size: 20px;
  font-weight: 400;
  color: #101010;
  opacity: 0.92;
  line-height: 1.65;
  letter-spacing: normal;
  font-style: normal;
}
@media (max-width: 1600px) {
  .testimonial-box-style-1 h3 {
    font-size: 19px;
    line-height: 1.65;
  }
}
@media (max-width: 575px) {
  .testimonial-box-style-1 h3 {
    font-size: 17px;
    line-height: 1.7;
  }
}
.testimonial-box-style-1 .client-info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: end;
  border-top: 1px solid #DFDCD2;
  margin-top: 30px;
  padding-top: 30px;
}
@media (max-width: 767px) {
  .testimonial-box-style-1 .client-info-item {
    flex-wrap: wrap;
    gap: 20px;
  }
}
.testimonial-box-style-1 .client-info-item .client-info h4 {
  font-size: 20px;
  font-weight: 600;
  color: #101010;
}
@media (max-width: 1600px) {
  .testimonial-box-style-1 .client-info-item .client-info h4 {
    font-size: 18px;
  }
}
.testimonial-box-style-1 .client-info-item .client-info span {
  font-weight: 400;
  color: #101010;
  font-size: 16px;
}
.testimonial-box-style-1 .client-info-item .star {
  color: var(--theme);
  font-size: 16px;
}
.testimonial-box-style-1.style-2 {
  background-color: #101010;
}
.testimonial-box-style-1.style-2 h3 {
  color: var(--white);
  opacity: 0.8;
}
.testimonial-box-style-1.style-2 .client-info-item {
  border-top: 1px solid rgba(223, 220, 210, 0.12);
}
.testimonial-box-style-1.style-2 .client-info-item .client-info h4 {
  color: var(--white);
}
.testimonial-box-style-1.style-2 .client-info-item .client-info span {
  color: var(--white);
}
.testimonial-box-style-1.style-2 .client-info-item .star {
  color: var(--theme);
}

.testimonial-section {
  position: relative;
  margin: 0 30px;
}
.testimonial-section .light-bg {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 1199px) {
  .testimonial-section .light-bg {
    display: none;
  }
}

.testimonial-box-area-2 {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.testimonial-box-area-2 ul li .testi-box-one {
  background: #FBF9EF;
  box-shadow: 8px 8px 32px rgba(36, 12, 135, 0.07);
  border-radius: 16px;
  padding: 32px 40px;
  max-width: 415px;
}
.testimonial-box-area-2 ul li .testi-box-one .client-info {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}
.testimonial-box-area-2 ul li .testi-box-one .client-info .info-content .name {
  font-size: 16px;
  font-weight: 600;
  color: #101010;
  line-height: 1;
}
.testimonial-box-area-2 ul li .testi-box-one .client-info .info-content p {
  font-size: 14px;
  font-weight: 400;
  color: #4B4B4B;
}
.testimonial-box-area-2 ul li .testi-box-one .star {
  color: var(--theme);
  font-size: 16px;
  margin-bottom: 10px;
}
.testimonial-box-area-2 ul li .testi-box-one .text {
  font-size: 18px;
  font-weight: 500;
  color: #101010;
  font-style: italic;
}
.testimonial-box-area-2 ul li:not(:last-child) {
  margin-bottom: 24px;
}
.testimonial-box-area-2 .testi-box-two {
  max-width: 393px;
  background: #FBF9EF;
  border-radius: 16px;
}
.testimonial-box-area-2 .testi-box-two .thumb img {
  width: 100%;
  height: 100%;
  border-radius: 16px 16px 0px 0px;
}
.testimonial-box-area-2 .testi-box-two .content {
  padding: 32px 32px;
  padding-top: 28px;
}
.testimonial-box-area-2 .testi-box-two .content .text {
  font-size: 18px;
  font-weight: 500;
  color: #101010;
  font-style: italic;
}
.testimonial-box-area-2 .testi-box-two .content .info-content {
  margin-top: 10px;
}
.testimonial-box-area-2 .testi-box-two .content .info-content .name {
  font-size: 16px;
  font-weight: 600;
  color: #101010;
  line-height: 1;
  margin-bottom: 5px;
  display: inline-block;
}
.testimonial-box-area-2 .testi-box-two .content .info-content p {
  font-size: 14px;
  font-weight: 400;
  color: #4B4B4B;
  line-height: 1;
}
.testimonial-box-area-2 .testi-box-two .content .info-content .star {
  color: var(--theme);
  font-size: 16px;
  margin-top: 10px;
}

.testi-card-two {
  margin-top: 30px;
  background: #FBF9EF;
  border-radius: 16px;
  max-width: 757px;
  display: flex;
  align-items: center;
  gap: 34px;
}
.testi-card-two .thumb {
  border-radius: 16px;
  max-width: 361px;
}
.testi-card-two .thumb img {
  border-radius: 16px;
  width: 100%;
  height: 100%;
}
.testi-card-two .content {
  max-width: 330px;
}
.testi-card-two .content .quote-icon {
  margin-bottom: 27px;
}
.testi-card-two .content .text {
  font-style: italic;
  font-weight: 400;
  font-size: 22px;
  color: #101010;
  line-height: 160%;
}
.testi-card-two .content .info-content {
  margin-top: 70px;
}
.testi-card-two .content .info-content .name {
  font-size: 16px;
  font-weight: 600;
  color: #101010;
  line-height: 1;
  margin-bottom: 5px;
  display: inline-block;
}
.testi-card-two .content .info-content p {
  font-size: 14px;
  font-weight: 400;
  color: #4B4B4B;
  line-height: 1;
  margin-top: 5px;
}
.testi-card-two .content .info-content .star {
  color: var(--theme);
  font-size: 16px;
  margin-top: 10px;
}

.testimonial-section-2 .marquee {
  --duration: 30s;
  gap: 40px;
}

.testimonial-section-3 {
  position: relative;
}
.testimonial-section-3 .array-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1290px;
  position: absolute;
  top: 60%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  z-index: 9;
}
@media (max-width: 1399px) {
  .testimonial-section-3 .array-button {
    left: 25px;
    right: 25px;
  }
}
@media (max-width: 767px) {
  .testimonial-section-3 .array-button {
    display: none;
  }
}
.testimonial-section-3 .array-button .array-prev, .testimonial-section-3 .array-button .array-next {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--white);
  color: #101010;
  transition: all 0.4s ease-in-out;
}
.testimonial-section-3 .array-button .array-prev:hover, .testimonial-section-3 .array-button .array-next:hover {
  background-color: var(--theme);
  color: var(--white);
}

.tetsimonial-box-items-3 {
  margin-top: 30px;
  background-color: transparent;
  padding: 50px 50px;
  text-align: center;
  opacity: 0.2;
  position: relative;
  z-index: 999;
  border-radius: 20px;
  transition: all 0.5s ease;
  transform: scale(0.95);
}
@media (max-width: 1600px) {
  .tetsimonial-box-items-3 {
    padding: 40px 50px;
  }
}
@media (max-width: 1199px) {
  .tetsimonial-box-items-3 {
    padding: 40px 40px;
  }
}
@media (max-width: 575px) {
  .tetsimonial-box-items-3 {
    padding: 28px;
  }
}
.tetsimonial-box-items-3 .quote-icon {
  margin-bottom: 35px;
}
.tetsimonial-box-items-3 .text {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 154%;
  color: #fff;
}
@media (max-width: 1600px) {
  .tetsimonial-box-items-3 .text {
    font-size: 22px;
  }
}
@media (max-width: 1399px) {
  .tetsimonial-box-items-3 .text {
    font-size: 20px;
  }
}
@media (max-width: 575px) {
  .tetsimonial-box-items-3 .text {
    font-size: 18px;
  }
}
.tetsimonial-box-items-3 .client-info {
  margin-top: 30px;
}
.tetsimonial-box-items-3 .client-info .thumb {
  margin-bottom: 15px;
}
.tetsimonial-box-items-3 .client-info span {
  color: #fff;
  font-size: 16px;
}
.tetsimonial-box-items-3 .client-info p {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
}

.testimonial-slider-3 {
  margin-left: -15%;
  margin-right: -15%;
}
@media (max-width: 767px) {
  .testimonial-slider-3 {
    margin-left: 30px;
    margin-right: 30px;
  }
}

.swiper-slide.swiper-slide-active .tetsimonial-box-items-3 {
  opacity: 1;
  background-color: #FBF9EF;
  transform: scale(1);
}
.swiper-slide.swiper-slide-active .tetsimonial-box-items-3 .text {
  color: #101010;
}
.swiper-slide.swiper-slide-active .tetsimonial-box-items-3 span {
  color: #101010;
}
.swiper-slide.swiper-slide-active .tetsimonial-box-items-3 p {
  color: #101010;
}

.testimonial-section-3 .section-title-area {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 60px;
}
.testimonial-section-3 .section-title-area .client-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.testimonial-section-3 .section-title-area .client-info .content h2 {
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
}
.testimonial-section-3 .section-title-area .client-info .content p {
  font-size: 16px;
  font-weight: 500;
  text-transform: capitalize;
}

.testimonial-section-4 .marquee {
  --duration: 40s;
}
.testimonial-section-4 .marquee .testi-text {
  font-size: 170px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 40px;
}
@media (max-width: 1199px) {
  .testimonial-section-4 .marquee .testi-text {
    font-size: 100px;
  }
}
.testimonial-section-4 .marquee .testi-text.style-2 {
  font-weight: 400;
  font-family: "Instrument Serif", serif;
  font-style: italic;
}

.testimonial-wrapper-4 {
  margin-top: 100px;
}
.testimonial-wrapper-4 .testimonial-items-2 .testi-box-2 .quote-icon {
  margin-bottom: 80px;
}
.testimonial-wrapper-4 .testimonial-items-2 .testi-box-2 p {
  font-size: 29px;
  text-transform: capitalize;
  font-weight: 700;
  font-family: "Urbanist", sans-serif;
  color: #fff;
  font-style: italic;
  line-height: 150%;
}
@media (max-width: 575px) {
  .testimonial-wrapper-4 .testimonial-items-2 .testi-box-2 p {
    font-size: 22px;
  }
}
.testimonial-wrapper-4 .testimonial-items-2 .array-button {
  gap: 15px;
  margin-top: 48px;
  display: flex;
  align-items: center;
}
.testimonial-wrapper-4 .testimonial-items-2 .array-button .array-prev, .testimonial-wrapper-4 .testimonial-items-2 .array-button .array-next {
  width: 44px;
  height: 44px;
  line-height: 44px;
  border: none;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: var(--white);
  font-size: 14px;
  transition: all 0.4s ease-in-out;
}
.testimonial-wrapper-4 .testimonial-items-2 .array-button .array-prev:hover, .testimonial-wrapper-4 .testimonial-items-2 .array-button .array-next:hover {
  background-color: var(--theme);
  color: var(--white);
}
.testimonial-wrapper-4 .testimonial-right-items {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  margin-left: 60px;
  position: relative;
  padding-left: 75px;
}
@media (max-width: 1399px) {
  .testimonial-wrapper-4 .testimonial-right-items {
    padding-left: 40px;
    margin-left: 30px;
  }
}
@media (max-width: 1199px) {
  .testimonial-wrapper-4 .testimonial-right-items {
    border-left: none;
    margin-left: 0;
    padding-left: 0;
  }
}
.testimonial-wrapper-4 .testimonial-right-items .testimonial-client-slider {
  margin-right: -45%;
}
@media (max-width: 1199px) {
  .testimonial-wrapper-4 .testimonial-right-items .testimonial-client-slider {
    margin-right: 0;
  }
}
@media (max-width: 470px) {
  .testimonial-wrapper-4 .testimonial-right-items .testimonial-client-slider {
    text-align: center;
  }
}
.testimonial-wrapper-4 .testimonial-right-items .testi-slider-box {
  opacity: 0.1;
}
.testimonial-wrapper-4 .testimonial-right-items::before {
  position: absolute;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  background-color: var(--white);
  width: 1000%;
  z-index: -1;
}
.testimonial-wrapper-4 .testimonial-right-items .client-image {
  margin-top: 85px;
}
.testimonial-wrapper-4 .testimonial-right-items .info-content {
  margin-top: 30px;
}
.testimonial-wrapper-4 .testimonial-right-items .info-content .name {
  font-size: 24px;
  font-weight: 500;
  color: #fff;
}
.testimonial-wrapper-4 .testimonial-right-items .info-content p {
  text-transform: capitalize;
  font-size: 14px;
  color: #fff;
}
.testimonial-wrapper-4 .testimonial-right-items .number-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 105px;
}
@media (max-width: 470px) {
  .testimonial-wrapper-4 .testimonial-right-items .number-item {
    justify-content: center;
  }
}
.testimonial-wrapper-4 .testimonial-right-items .number-item p {
  font-size: 14px;
  color: #fff;
}
.testimonial-wrapper-4 .testimonial-right-items .number-item span {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
}
.testimonial-wrapper-4 .testimonial-right-items .number-item .line {
  height: 1px;
  width: 96px;
  background-color: #fff;
  margin-left: 15px;
}
.testimonial-wrapper-4 .testimonial-right-items .swiper-slide.swiper-slide-active .testi-slider-box {
  opacity: 1;
}

.client-testimonial__main {
  position: relative;
}
.client-testimonial__warpper {
  gap: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: flex-start;
  margin-right: 60px;
}
@media (max-width: 1399px) {
  .client-testimonial__warpper {
    grid-template-columns: repeat(3, 1fr);
    gap: 0 30px;
    margin-right: 0;
  }
}
@media (max-width: 991px) {
  .client-testimonial__warpper {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 767px) {
  .client-testimonial__warpper {
    grid-template-columns: repeat(1, 1fr);
  }
}

.testimonial-section-about {
  margin: 0 60px;
  border-radius: 20px;
  background-position: top center !important;
}
@media (max-width: 1899px) {
  .testimonial-section-about {
    margin: 0 35px;
  }
}
@media (max-width: 1600px) {
  .testimonial-section-about {
    margin: 0 30px;
  }
}
@media (max-width: 1399px) {
  .testimonial-section-about {
    margin: 0 25px;
  }
}
@media (max-width: 1199px) {
  .testimonial-section-about {
    margin: 0 20px;
  }
}
.testimonial-section-about .section-title {
  margin-bottom: 90px;
}
.testimonial-section-about .section-title h2 {
  font-size: 48px;
}
@media (max-width: 991px) {
  .testimonial-section-about .section-title h2 {
    font-size: 44px;
  }
}
@media (max-width: 767px) {
  .testimonial-section-about .section-title h2 {
    font-size: 40px;
  }
}
@media (max-width: 575px) {
  .testimonial-section-about .section-title h2 {
    font-size: 36px;
  }
}

.testimonial-box-style-5 {
  margin-top: 30px;
  padding: 30px;
  background-color: #FBF9EF;
  border-radius: 10px;
  position: relative;
  z-index: 99;
}
.testimonial-box-style-5 .quote-icon {
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--theme);
  margin-bottom: 40px;
}
.testimonial-box-style-5 h3 {
  font-size: 22px;
  font-weight: 600;
  color: #101010;
  opacity: 0.8;
  line-height: 125%;
  letter-spacing: -1px;
  font-style: italic;
}
@media (max-width: 1600px) {
  .testimonial-box-style-5 h3 {
    font-size: 20px;
    line-height: 135%;
  }
}
@media (max-width: 575px) {
  .testimonial-box-style-5 h3 {
    font-size: 18px;
  }
}
.testimonial-box-style-5 .client-info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: end;
  border-top: 1px solid #DFDCD2;
  margin-top: 30px;
  padding-top: 30px;
}
@media (max-width: 767px) {
  .testimonial-box-style-5 .client-info-item {
    flex-wrap: wrap;
    gap: 20px;
  }
}
.testimonial-box-style-5 .client-info-item .client-info h4 {
  font-size: 20px;
  font-weight: 600;
  color: #101010;
}
@media (max-width: 1600px) {
  .testimonial-box-style-5 .client-info-item .client-info h4 {
    font-size: 18px;
  }
}
.testimonial-box-style-5 .client-info-item .client-info span {
  font-weight: 400;
  color: #101010;
  font-size: 16px;
}
.testimonial-box-style-5 .client-info-item .star {
  color: var(--theme);
  font-size: 16px;
}
.testimonial-box-style-5.style-2 {
  background-color: #101010;
  margin-top: 400px;
}
@media (max-width: 1199px) {
  .testimonial-box-style-5.style-2 {
    margin-top: 30px;
  }
}
.testimonial-box-style-5.style-2 h3 {
  color: var(--white);
  opacity: 0.8;
}
.testimonial-box-style-5.style-2 .client-info-item {
  border-top: 1px solid rgba(223, 220, 210, 0.12);
}
.testimonial-box-style-5.style-2 .client-info-item .client-info h4 {
  color: var(--white);
}
.testimonial-box-style-5.style-2 .client-info-item .client-info span {
  color: var(--white);
}
.testimonial-box-style-5.style-2 .client-info-item .star {
  color: var(--theme);
}
.testimonial-box-style-5.style-3 {
  margin-top: 400px;
}
@media (max-width: 1199px) {
  .testimonial-box-style-5.style-3 {
    margin-top: 30px;
  }
}

.pricing-box-items {
  background-color: #FBF9EF;
  border-radius: 8px;
  padding: 40px 30px;
  transition: all 0.4s ease-in-out;
}
.pricing-box-items .pricing-header {
  margin-bottom: 30px;
}
.pricing-box-items .pricing-header span {
  font-size: 24px;
  font-weight: 700;
  text-transform: capitalize;
  display: inline-block;
  margin-bottom: 20px;
  color: #101010;
}
.pricing-box-items .pricing-header h3 {
  font-size: 72px;
  font-weight: 700;
  letter-spacing: -3px;
  line-height: 1;
  margin-bottom: 25px;
  color: #101010;
}
@media (max-width: 1399px) {
  .pricing-box-items .pricing-header h3 {
    font-size: 55px;
  }
}
.pricing-box-items .pricing-header h3 sub {
  font-size: 16px;
  font-weight: 500;
  color: #3D4857;
  letter-spacing: initial;
  margin-left: 0;
}
.pricing-box-items .pricing-header p {
  color: #3D4857;
  font-size: 16px;
}
.pricing-box-items .pricing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 60px;
  padding: 0 30px;
  border-radius: 48px;
  background: #101010;
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  font-family: "Urbanist", sans-serif;
  overflow: hidden;
  position: relative;
  transition: all 0.4s ease-in-out;
}
.pricing-box-items .pricing-btn .content-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: relative;
}
.pricing-box-items .pricing-btn .default-content,
.pricing-box-items .pricing-btn .hover-content {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateY(0);
  white-space: nowrap;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.pricing-box-items .pricing-btn .default-content {
  transform: translate(-50%, -50%) translateY(0);
  opacity: 1;
}
.pricing-box-items .pricing-btn .hover-content {
  transform: translate(-50%, -50%) translateY(30px);
  opacity: 0;
}
.pricing-box-items .pricing-btn:hover {
  background: var(--theme);
}
.pricing-box-items .pricing-btn:hover .default-content {
  transform: translate(-50%, -50%) translateY(-30px);
  opacity: 0;
}
.pricing-box-items .pricing-btn:hover .hover-content {
  transform: translate(-50%, -50%) translateY(0);
  opacity: 1;
}
.pricing-box-items .pricing-list {
  margin-top: 30px;
  padding: 30px;
  background-color: var(--white);
  border-radius: 8px;
}
.pricing-box-items .pricing-list h4 {
  font-size: 18px;
  font-weight: 600;
  color: #101010;
}
@media (max-width: 1199px) {
  .pricing-box-items .pricing-list h4 {
    letter-spacing: inherit;
  }
}
.pricing-box-items .pricing-list ul {
  margin-top: 20px;
}
.pricing-box-items .pricing-list ul li {
  color: #797979;
  font-size: 16px;
  font-weight: 500;
  line-height: 162.5%;
  letter-spacing: -1px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pricing-box-items .pricing-list ul li i {
  font-size: 18px;
  color: #797979;
}
.pricing-box-items .pricing-list ul li:not(:last-child) {
  margin-bottom: 15px;
}
.pricing-box-items.active {
  background-color: var(--theme);
}
.pricing-box-items.active .pricing-header {
  margin-bottom: 30px;
}
.pricing-box-items.active .pricing-header span, .pricing-box-items.active .pricing-header h3, .pricing-box-items.active .pricing-header p, .pricing-box-items.active .pricing-header sub {
  color: var(--white) !important;
}
.pricing-box-items.active .pricing-btn {
  background-color: var(--white);
  color: #101010;
}
.pricing-box-items.active .pricing-btn:hover {
  background-color: #101010;
  color: var(--header);
}
.pricing-box-items.active .pricing-list {
  background: rgb(255, 255, 255);
  backdrop-filter: blur(20px);
}
.pricing-box-items.active .pricing-list ul {
  margin-top: 20px;
}
.pricing-box-items.active .pricing-list ul li i {
  color: var(--theme);
}
.pricing-box-items:hover {
  transform: translateY(-10px);
}

.pricing-wrap {
  margin-left: -45px;
}
@media (max-width: 1199px) {
  .pricing-wrap {
    margin-left: 0;
  }
}

@media (max-width: 1199px) {
  .pricing-content-one {
    text-align: center;
    margin-bottom: 30px;
  }
}
.pricing-content-one .pricing-toggle-wrapper {
  display: inline-flex;
  align-items: center;
  height: 60px;
  line-height: 60px;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 70px;
  padding: 7px;
  border-radius: 70px;
  margin-top: 50px;
}
@media (max-width: 1199px) {
  .pricing-content-one .pricing-toggle-wrapper {
    margin-top: 20px;
  }
}
.pricing-content-one .pricing-toggle-wrapper .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ddd;
  transition: 0.4s;
  border-radius: 34px;
}
.pricing-content-one .pricing-toggle-wrapper .slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}
.pricing-content-one .pricing-toggle-wrapper input:checked + .slider {
  background-color: var(--theme);
}
.pricing-content-one .pricing-toggle-wrapper input:checked + .slider:before {
  transform: translateX(26px);
}
.pricing-content-one .pricing-toggle-wrapper .toggle-label {
  padding: 0;
  height: 47px;
  line-height: 47px;
  padding: 0 32px;
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  border-radius: 66.667px;
  cursor: pointer;
  transition: 0.3s;
}
.pricing-content-one .pricing-toggle-wrapper .toggle-label.active {
  background: var(--theme);
}
.pricing-content-one .price {
  transition: opacity 0.3s ease;
}
.pricing-content-one .price.fade-out {
  opacity: 0;
}
.pricing-content-one .price.fade-in {
  opacity: 1;
}
.pricing-content-one .pricing-shape {
  margin-top: 40px;
  animation: rounded 5s linear infinite;
}
@media (max-width: 1199px) {
  .pricing-content-one .pricing-shape {
    display: none;
  }
}

.sec-line-shape img {
  width: 100%;
}

.project-section .section-title {
  margin-left: 180px;
  margin-bottom: 70px;
}
@media (max-width: 1199px) {
  .project-section .section-title {
    margin-left: 0;
    text-align: center;
  }
}
@media (max-width: 767px) {
  .project-section .section-title {
    margin-bottom: 30px;
  }
}
.project-section .section-title h2 {
  text-transform: uppercase;
  font-size: 200px;
  line-height: 0.9;
}
@media (max-width: 1600px) {
  .project-section .section-title h2 {
    font-size: 170px;
  }
}
@media (max-width: 1399px) {
  .project-section .section-title h2 {
    font-size: 140px;
  }
}
@media (max-width: 1199px) {
  .project-section .section-title h2 {
    line-height: 110%;
    font-size: 125px;
  }
}
@media (max-width: 991px) {
  .project-section .section-title h2 {
    font-size: 111px;
  }
}
@media (max-width: 767px) {
  .project-section .section-title h2 {
    font-size: 90px;
  }
}
@media (max-width: 575px) {
  .project-section .section-title h2 {
    font-size: 80px;
  }
}
@media (max-width: 470px) {
  .project-section .section-title h2 {
    font-size: 60px;
  }
}
.project-section .work-title .last {
  display: inline-block;
  transition: all 0.3s ease;
  margin-left: 290px;
}
@media (max-width: 991px) {
  .project-section .work-title .last {
    margin-left: 150px;
  }
}
@media (max-width: 767px) {
  .project-section .work-title .last {
    margin-left: 0;
  }
}
.project-section .work-title .last .work-title .first,
.project-section .work-title .last .work-title .last {
  display: inline-block;
  will-change: transform;
}
.project-section .container-fluid {
  max-width: 1680px;
}

.project-wrapper {
  margin: 0 30px;
}
@media (max-width: 1399px) {
  .project-wrapper {
    margin: 0 25px;
  }
}
@media (max-width: 1199px) {
  .project-wrapper {
    margin: 0 20px;
  }
}
.project-wrapper .text-items {
  margin-left: 255px;
  margin-bottom: 100px;
  margin-top: 30px;
}
@media (max-width: 1600px) {
  .project-wrapper .text-items {
    margin-left: 150px;
  }
}
@media (max-width: 1199px) {
  .project-wrapper .text-items {
    max-width: 400px;
    margin-bottom: 40px;
    margin-left: 0;
  }
}
@media (max-width: 767px) {
  .project-wrapper .text-items {
    text-align: center;
    margin: 30px auto 0;
  }
}
.project-wrapper .text-items p {
  color: #B1B1B1;
}
.project-wrapper .text-items .news-btn {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  font-family: "Urbanist", sans-serif;
  color: var(--white);
  overflow: hidden;
  text-transform: capitalize;
  margin-top: 18px;
}
.project-wrapper .text-items .news-btn i {
  margin-left: 7px;
}
.project-wrapper .text-items .news-btn .text {
  position: relative;
  display: inline-block;
  height: 22px;
  overflow: hidden;
}
.project-wrapper .text-items .news-btn .text-default,
.project-wrapper .text-items .news-btn .text-hover {
  display: block;
  transition: transform 0.4s ease;
}
.project-wrapper .text-items .news-btn .text-hover {
  position: absolute;
  left: 0;
  top: 100%;
  color: var(--theme);
}
.project-wrapper .text-items .news-btn:hover .text-default {
  transform: translateY(-100%);
}
.project-wrapper .text-items .news-btn:hover .text-hover {
  transform: translateY(-100%);
}
.project-wrapper .text-items .news-btn i {
  transition: transform 0.4s ease;
}

.project-box-items {
  margin-top: 30px;
}
.project-box-items.style-max-width {
  max-width: 578px;
}
@media (max-width: 767px) {
  .project-box-items.style-max-width {
    max-width: initial;
  }
}
.project-box-items.style-left-auto {
  margin-left: auto;
}
@media (max-width: 767px) {
  .project-box-items.style-left-auto {
    margin-left: initial;
  }
}
.project-box-items.style-height-one {
  margin-top: 170px;
}
@media (max-width: 1199px) {
  .project-box-items.style-height-one {
    margin-top: 70px;
  }
}
.project-box-items.style-height-two {
  margin-top: 80px;
}
@media (max-width: 1199px) {
  .project-box-items.style-height-two {
    margin-top: 40px;
  }
}
.project-box-items .thumb {
  overflow: hidden;
  position: relative;
  border-radius: 10px;
}
@media (max-width: 767px) {
  .project-box-items .thumb {
    height: 500px;
  }
}
.project-box-items .thumb img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.project-box-items .content {
  margin-top: 27px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 1199px) {
  .project-box-items .content {
    flex-wrap: wrap;
    gap: 20px;
  }
}
.project-box-items .content .title {
  font-size: 30px;
  font-weight: 600;
  text-transform: capitalize;
}
.project-box-items .content .title a:hover {
  color: var(--theme);
}
.project-box-items .content ul {
  display: flex;
  align-items: center;
  gap: 8px;
}
.project-box-items .content ul li a {
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 13px;
  border-radius: 35px;
  display: inline-block;
  line-height: 1;
  transition: all 0.4s ease-in-out;
}
.project-box-items .content ul li a:hover {
  background-color: var(--theme);
  border-color: var(--theme);
}

.project-box-items-2 {
  max-width: 795px;
  margin-top: 80px;
}
@media (max-width: 1199px) {
  .project-box-items-2 {
    margin-top: 30px;
  }
}
@media (min-width: 1200px) {
  .project-box-items-2.style-auto {
    margin-left: auto;
  }
}
.project-box-items-2 .thumb {
  overflow: hidden;
  position: relative;
  border-radius: 20px;
}
@media (max-width: 1199px) {
  .project-box-items-2 .thumb {
    height: 500px;
  }
}
.project-box-items-2 .thumb .arrow-icon {
  display: inline-block;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  background-color: var(--theme);
  color: var(--white);
  border-radius: 20px;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  visibility: hidden;
  z-index: 99;
  transition: all 0.4s ease-in-out;
}
.project-box-items-2 .thumb .arrow-icon:hover {
  background-color: var(--white);
  color: #000;
}
.project-box-items-2 .thumb::before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: linear-gradient(181.38deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.8) 98.83%);
  z-index: 9;
  border-radius: 20px;
}
.project-box-items-2 .thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  border-radius: 20px;
}
.project-box-items-2 .thumb img:first-child {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  -webkit-transform: translateX(50%) scaleX(2);
  transform: translate(50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
.project-box-items-2 .thumb .content-items {
  position: absolute;
  bottom: 30px;
  left: 30px;
  right: 30px;
  z-index: 99;
  background: rgba(255, 255, 255, 0.1);
  padding: 30px;
  display: flex;
  border-radius: 10px;
  justify-content: space-between;
}
@media (max-width: 1199px) {
  .project-box-items-2 .thumb .content-items {
    left: 20px;
    right: 20px;
    bottom: 20px;
    padding: 25px;
  }
}
@media (max-width: 991px) {
  .project-box-items-2 .thumb .content-items {
    flex-wrap: wrap;
    gap: 30px;
  }
}
.project-box-items-2 .thumb .content-items .content .title {
  font-size: 32px;
  font-weight: 600;
}
@media (max-width: 1199px) {
  .project-box-items-2 .thumb .content-items .content .title {
    font-size: 23px;
  }
}
.project-box-items-2 .thumb .content-items .content .title a {
  color: var(--white);
}
.project-box-items-2 .thumb .content-items .content .title a:hover {
  color: var(--theme);
}
.project-box-items-2 .thumb .content-items .content .tag-items {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.project-box-items-2 .thumb .content-items .content .tag-items a {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  color: var(--white);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 48px;
  padding: 3px 14px;
}
.project-box-items-2 .thumb .content-items .content .tag-items a:hover {
  background-color: var(--theme);
}
.project-box-items-2 .thumb .content-items .year-text {
  display: inline-block;
  line-height: 1;
  font-size: 24px;
  font-weight: 600;
  color: var(--white);
}
@media (max-width: 1199px) {
  .project-box-items-2 .thumb .content-items .year-text {
    font-size: 20px;
  }
}
.project-box-items-2:hover .thumb img:first-child {
  -webkit-transform: translateX(0) scaleX(1);
  transform: translate(0) scaleX(1);
  opacity: 1;
  -webkit-filter: blur(0);
  filter: blur(0);
}
.project-box-items-2:hover .thumb img:nth-child(2) {
  -webkit-transform: translateX(-50%) scaleX(2);
  transform: translateX(-50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
.project-box-items-2:hover .thumb .arrow-icon {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.project-wrapper-3 .section-title {
  margin-left: 70px;
}
@media (max-width: 1199px) {
  .project-wrapper-3 .section-title {
    margin-left: 0;
  }
}
.project-wrapper-3 .section-title p {
  color: #B1B1B1;
  font-size: 18px;
  font-weight: 500;
  max-width: 270px;
  margin-top: 20px;
  margin-bottom: 30px;
}
.project-wrapper-3 .project-box-items-3 li {
  border-radius: 12px;
  background-color: var(--white);
  box-shadow: 0 4px 30px 0 rgba(41, 15, 28, 0.1);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 35px;
}
@media (max-width: 767px) {
  .project-wrapper-3 .project-box-items-3 li {
    display: block;
  }
}
.project-wrapper-3 .project-box-items-3 li:not(:last-child) {
  margin-bottom: 30px;
}
.project-wrapper-3 .project-box-items-3 li .thumb {
  max-width: 330px;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
@media (max-width: 767px) {
  .project-wrapper-3 .project-box-items-3 li .thumb {
    max-width: initial;
    margin-bottom: 15px;
  }
}
.project-wrapper-3 .project-box-items-3 li .thumb img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  display: block;
  object-fit: cover;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}
.project-wrapper-3 .project-box-items-3 li .thumb img:first-child {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  -webkit-transform: translateX(50%) scaleX(2);
  transform: translate(50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
.project-wrapper-3 .project-box-items-3 li .content {
  position: relative;
}
.project-wrapper-3 .project-box-items-3 li .content span {
  color: var(--theme);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -1px;
  margin-bottom: 10px;
  display: inline-block;
}
.project-wrapper-3 .project-box-items-3 li .content h3 {
  color: #101010;
  font-size: 32px;
  font-weight: 600;
  text-transform: capitalize;
}
@media (max-width: 1399px) {
  .project-wrapper-3 .project-box-items-3 li .content h3 {
    font-size: 26px;
  }
}
@media (max-width: 1199px) {
  .project-wrapper-3 .project-box-items-3 li .content h3 {
    font-size: 24px;
  }
}
.project-wrapper-3 .project-box-items-3 li .content h3 a {
  color: #101010;
  background-position: 0 95%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  display: inline;
}
.project-wrapper-3 .project-box-items-3 li .content h3 a:hover {
  color: var(--theme);
  background-size: 100% 2px;
  background-image: linear-gradient(180deg, var(--theme) 0%, var(--theme) 100%);
}
.project-wrapper-3 .project-box-items-3 li .content .icon {
  display: inline-block;
  width: 64px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  border-radius: 50%;
  background-color: #101010;
  color: var(--white);
  font-size: 18px;
  margin-top: 20px;
}
@media (max-width: 767px) {
  .project-wrapper-3 .project-box-items-3 li .content .icon {
    width: 48px;
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    margin-top: 12px;
  }
}
.project-wrapper-3 .project-box-items-3 li .content .icon:hover {
  background-color: var(--theme);
  color: var(--white);
}
.project-wrapper-3 .project-box-items-3 li:hover .thumb img:first-child {
  -webkit-transform: translateX(0) scaleX(1);
  transform: translate(0) scaleX(1);
  opacity: 1;
  -webkit-filter: blur(0);
  filter: blur(0);
}
.project-wrapper-3 .project-box-items-3 li:hover .thumb img:nth-child(2) {
  -webkit-transform: translateX(-50%) scaleX(2);
  transform: translateX(-50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

.project-thumb-style-4 {
  margin-top: 60px;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}
@media (max-width: 1199px) {
  .project-thumb-style-4 {
    margin-top: 30px;
    height: 500px;
  }
}
.project-thumb-style-4 img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  border-radius: 10px;
}
.project-thumb-style-4 img:first-child {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  -webkit-transform: translateX(50%) scaleX(2);
  transform: translate(50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
.project-thumb-style-4 .content {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 18px 50px;
  position: absolute;
  bottom: -70px;
  left: 30px;
  right: 30px;
  z-index: 8;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
}
@media (max-width: 1199px) {
  .project-thumb-style-4 .content {
    left: 20px;
    right: 20px;
    padding: 18px 20px;
  }
}
.project-thumb-style-4 .content span {
  font-size: 16px;
  color: #fff;
  display: inline-block;
  margin-bottom: 12px;
}
.project-thumb-style-4 .content .title {
  text-transform: capitalize;
  max-width: 350px;
  line-height: 125%;
}
.project-thumb-style-4 .content .title a {
  background-position: 0 95%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  display: inline;
}
.project-thumb-style-4 .content .title a:hover {
  background-size: 100% 2px;
  background-image: linear-gradient(180deg, var(--white) 0%, var(--white) 100%);
}
.project-thumb-style-4 .content .arrow-icon {
  display: inline-block;
  width: 64px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--theme);
  margin-top: 25px;
}
.project-thumb-style-4 .content .arrow-icon:hover {
  background-color: var(--white);
  color: #000;
}
.project-thumb-style-4:hover img:first-child {
  -webkit-transform: translateX(0) scaleX(1);
  transform: translate(0) scaleX(1);
  opacity: 1;
  -webkit-filter: blur(0);
  filter: blur(0);
}
.project-thumb-style-4:hover img:nth-child(2) {
  -webkit-transform: translateX(-50%) scaleX(2);
  transform: translateX(-50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
.project-thumb-style-4:hover .content {
  opacity: 1;
  visibility: visible;
  bottom: 30px;
}
@media (max-width: 1199px) {
  .project-thumb-style-4:hover .content {
    bottom: 20px;
  }
}

.project-section-4 .theme-btn-main {
  background-color: var(--white);
}
.project-section-4 .theme-btn-main .theme-btn {
  color: #000;
}
.project-section-4 .theme-btn-main .theme-btn-arrow-left, .project-section-4 .theme-btn-main .theme-btn-arrow-right {
  background-color: var(--theme);
  color: #fff;
}
.project-section-4 .project-text {
  color: #797979;
  text-transform: capitalize;
  text-align: center;
  margin-top: 90px;
}
.project-section-4 .project-text a {
  color: var(--white);
  text-decoration: underline;
}

.award-winning-section .section-title {
  margin-bottom: 40px;
}

.award-winning-area .award-winning-box-items {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 15px;
}
@media (max-width: 991px) {
  .award-winning-area .award-winning-box-items {
    display: block;
  }
}
.award-winning-area .award-winning-box-items .text-items {
  color: var(--theme);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 70px;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  max-width: 476px;
  border-radius: 100px;
  padding: 30px 26px;
}
@media (max-width: 991px) {
  .award-winning-area .award-winning-box-items .text-items {
    max-width: initial;
    margin-bottom: 30px;
    font-size: 50px;
  }
}
.award-winning-area .award-winning-box-items .text-items.style-2 .marquee {
  gap: 30px;
}
.award-winning-area .award-winning-box-items .text-items.style-2 .marquee-group {
  animation: scrollLTR var(--duration) linear infinite;
}
.award-winning-area .award-winning-box-items .thumb {
  max-width: 919px;
  height: 120px;
}
@media (max-width: 991px) {
  .award-winning-area .award-winning-box-items .thumb {
    margin-bottom: 20px;
  }
}
.award-winning-area .award-winning-box-items .thumb img {
  border-radius: 100px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-box-items-5 {
  max-width: 750px;
  margin-top: 80px;
}
@media (max-width: 1199px) {
  .project-box-items-5 {
    margin-top: 30px;
  }
}
@media (min-width: 1200px) {
  .project-box-items-5.style-auto {
    margin-left: auto;
  }
}
.project-box-items-5 .thumb {
  overflow: hidden;
  position: relative;
  border-radius: 10px;
}
@media (max-width: 1199px) {
  .project-box-items-5 .thumb {
    height: 500px;
  }
}
.project-box-items-5 .thumb .arrow-icon {
  display: inline-block;
  width: 90px;
  height: 90px;
  line-height: 90px;
  text-align: center;
  background-color: var(--theme);
  color: var(--white);
  border-radius: 50%;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  visibility: hidden;
  z-index: 99;
  transition: all 0.4s ease-in-out;
}
.project-box-items-5 .thumb .arrow-icon:hover {
  background-color: var(--white);
  color: #101010;
}
.project-box-items-5 .thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  border-radius: 10px;
}
.project-box-items-5 .thumb img:first-child {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  -webkit-transform: translateX(50%) scaleX(2);
  transform: translate(50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
.project-box-items-5 .content-items {
  z-index: 99;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}
@media (max-width: 991px) {
  .project-box-items-5 .content-items {
    flex-wrap: wrap;
    gap: 30px;
  }
}
.project-box-items-5 .content-items .content .title {
  font-size: 32px;
  font-weight: 600;
  line-height: 1;
}
@media (max-width: 1199px) {
  .project-box-items-5 .content-items .content .title {
    font-size: 23px;
  }
}
.project-box-items-5 .content-items .content .title a:hover {
  color: var(--theme);
}
.project-box-items-5 .content-items .content .tag-items {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.project-box-items-5 .content-items .content .tag-items a {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  color: var(--header);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 48px;
  padding: 3px 14px;
}
.project-box-items-5 .content-items .content .tag-items a:hover {
  background-color: var(--theme);
  color: var(--white);
  border-color: var(--theme);
}
.project-box-items-5 .content-items .year-text {
  display: inline-block;
  line-height: 1;
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
}
@media (max-width: 1199px) {
  .project-box-items-5 .content-items .year-text {
    font-size: 20px;
  }
}
.project-box-items-5:hover .thumb img:first-child {
  -webkit-transform: translateX(0) scaleX(1);
  transform: translate(0) scaleX(1);
  opacity: 1;
  -webkit-filter: blur(0);
  filter: blur(0);
}
.project-box-items-5:hover .thumb img:nth-child(2) {
  -webkit-transform: translateX(-50%) scaleX(2);
  transform: translateX(-50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
.project-box-items-5:hover .thumb .arrow-icon {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1);
}

.project-details-wrapper .project-details-top-item .top-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 1399px) {
  .project-details-wrapper .project-details-top-item .top-content {
    flex-wrap: wrap;
    gap: 20px;
  }
}
.project-details-wrapper .project-details-top-item .top-content h2 {
  font-size: 120px;
  font-weight: 600;
}
@media (max-width: 1399px) {
  .project-details-wrapper .project-details-top-item .top-content h2 {
    font-size: 60px;
  }
}
@media (max-width: 991px) {
  .project-details-wrapper .project-details-top-item .top-content h2 {
    font-size: 50px;
  }
}
@media (max-width: 767px) {
  .project-details-wrapper .project-details-top-item .top-content h2 {
    font-size: 40px;
  }
}
@media (max-width: 575px) {
  .project-details-wrapper .project-details-top-item .top-content h2 {
    font-size: 30px;
  }
}
.project-details-wrapper .project-details-top-item .top-content p {
  font-size: 18px;
  font-weight: 500;
  max-width: 397px;
}
@media (max-width: 1399px) {
  .project-details-wrapper .project-details-top-item .top-content p {
    font-size: 16px;
  }
}
.project-details-wrapper .project-details-top-item .project-details-info-item {
  display: flex;
  align-items: center;
  gap: 90px;
  margin-top: 50px;
}
@media (max-width: 1399px) {
  .project-details-wrapper .project-details-top-item .project-details-info-item {
    margin-top: 30px;
    flex-wrap: wrap;
    gap: 60px;
  }
}
@media (max-width: 991px) {
  .project-details-wrapper .project-details-top-item .project-details-info-item {
    gap: 30px;
  }
}
.project-details-wrapper .project-details-top-item .project-details-info-item .content {
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  padding-right: 180px;
}
@media (max-width: 1399px) {
  .project-details-wrapper .project-details-top-item .project-details-info-item .content {
    padding-right: 0;
    border-right: none;
  }
}
.project-details-wrapper .project-details-top-item .project-details-info-item .content.style-2 {
  border-right: none;
  padding-right: 0;
}
.project-details-wrapper .project-details-top-item .project-details-info-item .content span {
  font-weight: 500;
  font-size: 16px;
  display: inline-block;
  margin-bottom: 15px;
}
.project-details-wrapper .project-details-top-item .project-details-info-item .content p {
  font-size: 18px;
  font-weight: 600;
}
.project-details-wrapper .project-details-top-item .project-details-image {
  overflow: hidden;
  margin-top: 50px;
  margin-bottom: 100px;
  border-radius: 12px;
}
@media (max-width: 1399px) {
  .project-details-wrapper .project-details-top-item .project-details-image {
    margin-bottom: 30px;
    margin-top: 30px;
  }
}
.project-details-wrapper .project-details-top-item .project-details-image img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}
.project-details-wrapper .project-details-top-item .left-text h2 {
  font-size: 72px;
  font-weight: 600;
}
@media (max-width: 1600px) {
  .project-details-wrapper .project-details-top-item .left-text h2 {
    font-size: 60px;
  }
}
@media (max-width: 1399px) {
  .project-details-wrapper .project-details-top-item .left-text h2 {
    font-size: 40px;
  }
}
@media (max-width: 991px) {
  .project-details-wrapper .project-details-top-item .left-text h2 {
    font-size: 30px;
  }
}
@media (max-width: 767px) {
  .project-details-wrapper .project-details-top-item .left-text h2 {
    font-size: 30px;
  }
}
@media (max-width: 575px) {
  .project-details-wrapper .project-details-top-item .left-text h2 {
    font-size: 25px;
  }
}
.project-details-wrapper .project-details-top-item .details-content p {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 30px;
}
@media (max-width: 1399px) {
  .project-details-wrapper .project-details-top-item .details-content p {
    font-size: 16px;
    margin-bottom: 20px;
  }
}
.project-details-wrapper .project-details-top-item .details-content .details-list {
  max-width: 320px;
  width: 100%;
}
.project-details-wrapper .project-details-top-item .details-content .details-list li {
  font-size: 18px;
  font-weight: 500;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 15px;
  margin-bottom: 15px;
  padding-bottom: 15px;
}
@media (max-width: 1399px) {
  .project-details-wrapper .project-details-top-item .details-content .details-list li {
    font-size: 16px;
  }
}
.project-details-wrapper .project-details-top-item .details-content .details-list li i {
  margin-right: 5px;
}
.project-details-wrapper .project-details-top-item .details-image-item {
  margin-top: 100px;
  margin-bottom: 100px;
}
@media (max-width: 1399px) {
  .project-details-wrapper .project-details-top-item .details-image-item {
    margin-top: 30px;
    margin-bottom: 30px;
  }
}
.project-details-wrapper .project-details-top-item .details-image-item .thumb {
  overflow: hidden;
  border-radius: 12px;
}
.project-details-wrapper .project-details-top-item .details-image-item .thumb img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}
.project-details-wrapper .project-details-top-item .details-box {
  margin-top: 30px;
  background-color: var(--bg);
  padding: 40px 30px;
  border-radius: 12px;
}
.project-details-wrapper .project-details-top-item .details-box .number {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  border-radius: 100px;
  color: var(--white);
  font-size: 18px;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 120px;
  background-color: var(--theme);
}
@media (max-width: 1399px) {
  .project-details-wrapper .project-details-top-item .details-box .number {
    margin-bottom: 90px;
  }
}
.project-details-wrapper .project-details-top-item .details-box h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 10px;
}
.project-details-wrapper .project-details-top-item .details-box p {
  font-size: 18px;
  font-weight: 500;
}
@media (max-width: 1600px) {
  .project-details-wrapper .project-details-top-item .details-box p {
    font-size: 15px;
  }
}
@media (max-width: 1399px) {
  .project-details-wrapper .project-details-top-item .details-box p {
    font-size: 16px;
  }
}
.project-details-wrapper .project-details-top-item .details-bottom-content {
  display: flex;
  align-items: start;
  justify-content: space-between;
  margin-top: 100px;
}
@media (max-width: 1399px) {
  .project-details-wrapper .project-details-top-item .details-bottom-content {
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 30px;
  }
}
.project-details-wrapper .project-details-top-item .details-bottom-content .right-content p {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 30px;
  max-width: 682px;
}
@media (max-width: 1399px) {
  .project-details-wrapper .project-details-top-item .details-bottom-content .right-content p {
    font-size: 16px;
  }
}
.project-details-wrapper .project-details-top-item .slider-button {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 50px;
  padding: 15px 0;
}
.project-details-wrapper .project-details-top-item .slider-button span {
  font-weight: 500;
}
.project-details-wrapper .project-details-top-item .slider-button img {
  filter: brightness(0) invert(1);
}
.project-details-wrapper .project-details-top-item .slider-button .cmn-next,
.project-details-wrapper .project-details-top-item .slider-button .cmn-prev {
  width: 56px;
  height: 56px;
  line-height: 56px;
  text-align: center;
  transition: all 0.4s;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--white);
  border-radius: 8px;
}
.project-details-wrapper .project-details-top-item .slider-button .cmn-next i,
.project-details-wrapper .project-details-top-item .slider-button .cmn-prev i {
  transition: all 0.4s;
}
.project-details-wrapper .project-details-top-item .slider-button .cmn-next:hover,
.project-details-wrapper .project-details-top-item .slider-button .cmn-prev:hover {
  background: var(--theme);
  border-color: var(--theme);
}
.project-details-wrapper .project-details-top-item .slider-button .cmn-next:hover i,
.project-details-wrapper .project-details-top-item .slider-button .cmn-prev:hover i {
  color: var(--white);
}
.project-details-wrapper .project-details-top-item .slider-button .previus-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--header);
}

.project-section-6 .project-nav .project-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
@media (max-width: 1399px) {
  .project-section-6 .project-nav .project-top {
    flex-wrap: wrap;
    gap: 25px;
  }
}
.project-section-6 .project-nav .project-top h2 {
  font-size: 170px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.04em;
}
@media (max-width: 1399px) {
  .project-section-6 .project-nav .project-top h2 {
    font-size: 90px;
  }
}
@media (max-width: 991px) {
  .project-section-6 .project-nav .project-top h2 {
    font-size: 80px;
  }
}
@media (max-width: 767px) {
  .project-section-6 .project-nav .project-top h2 {
    font-size: 65px;
  }
}
@media (max-width: 575px) {
  .project-section-6 .project-nav .project-top h2 {
    font-size: 55px;
  }
}
.project-section-6 .project-nav .nav {
  display: flex;
  margin-bottom: -30px;
  gap: 8px;
}
@media (max-width: 1199px) {
  .project-section-6 .project-nav .nav {
    flex-wrap: wrap;
    margin-bottom: 15px;
  }
}
.project-section-6 .project-nav .nav li .nav-link {
  transition: all 0.4s ease-in-out;
  padding: 9px 15px;
  border-radius: 100px;
  border: 1px solid rgb(3, 7, 13);
  line-height: 1;
  color: var(--header);
  font-weight: 600;
  font-size: 16px;
  text-transform: capitalize;
  position: relative;
  letter-spacing: -0.03em;
}
.project-section-6 .project-nav .nav li .nav-link.active {
  position: relative;
  border-radius: 100px;
  background: var(--header);
  color: var(--white);
  border: 1px solid var(--header);
}

.project-details-section .details-thumbs {
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 40px;
}
.project-details-section .details-thumbs img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

.team-list-items {
  margin-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
}
.team-list-items .team-title {
  padding: 40px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.4s ease-in-out;
  position: relative;
  z-index: 9;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
@media (max-width: 470px) {
  .team-list-items .team-title {
    display: grid;
    justify-content: center;
    gap: 20px;
    text-align: center;
  }
}
.team-list-items .team-title .title {
  font-size: 40px;
  font-weight: 400;
  text-transform: capitalize;
  line-height: 1;
  opacity: 0.25;
}
@media (max-width: 1399px) {
  .team-list-items .team-title .title {
    font-size: 25px;
  }
}
@media (max-width: 1199px) {
  .team-list-items .team-title .title {
    font-size: 22px;
  }
}
.team-list-items .team-title .text {
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  height: 51px;
  line-height: 51px;
  border-radius: 100px;
  padding: 0 17px;
  transform: rotate(12deg);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.05), 0 8px 30px rgba(0, 0, 0, 0.6);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}
@media (max-width: 1199px) {
  .team-list-items .team-title .text {
    font-size: 14px;
    height: 48px;
    line-height: 48px;
    padding: 0 14px;
  }
}
.team-list-items .team-title .social-icon {
  gap: 5px;
}
.team-list-items .team-title .social-icon a {
  display: inline-block;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  text-align: center;
}
.team-list-items .team-title .social-icon a:hover {
  background-color: var(--theme);
  color: var(--white);
  border-color: var(--theme);
}
.team-list-items .team-title.active::after {
  left: 0;
  width: 100%;
}
.team-list-items .team-title.active .title {
  opacity: 1;
}
.team-list-items .team-title.active .title a {
  color: var(--white);
}
.team-list-items .team-title.active .text {
  opacity: 1;
  visibility: visible;
}
.team-list-items .team-title.active .icon {
  background-color: var(--white);
  color: var(--theme);
}

.gt-team-one-image-outer {
  position: relative;
  height: 100%;
  margin-top: 30px;
}
.gt-team-one-image-outer::before {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
  background: linear-gradient(180deg, rgba(16, 16, 16, 0) 0%, #101010 64.42%);
  width: 100%;
  height: 210px;
  z-index: 9;
}
.gt-team-one-image-outer::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  content: "";
  background: rgba(255, 71, 28, 0.5);
  filter: blur(117px);
  width: 446px;
  height: 400px;
  z-index: -1;
}

.gt-team-one_images-outer {
  position: relative;
  height: 100%;
}

.gt-team-one-image {
  position: absolute;
  left: 110px;
  top: 0px;
  opacity: 0;
  display: block;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -webkit-transform: rotate(-5deg) translateX(0px);
  transform: rotate(-5deg) translateX(0px);
}
@media (max-width: 991px) {
  .gt-team-one-image {
    display: none;
    position: static;
    max-width: 445px;
  }
}
.gt-team-one-image.active {
  opacity: 1;
  -webkit-transform: rotate(0deg) translateX(0px);
  transform: rotate(0deg) translateX(0px);
}
@media (max-width: 991px) {
  .gt-team-one-image.active {
    display: block;
  }
}
.gt-team-one-image img {
  width: 100%;
  height: 100%;
}

.team-section-3 {
  position: relative;
}
.team-section-3 .circle-line {
  position: absolute;
  bottom: 120px;
  left: 0;
}

@media (max-width: 991px) {
  .team-section-4 .content {
    order: 2;
  }
}
.team-section-4 .content p {
  color: #B1B1B1;
}
.team-section-4 .content .news-btn {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  font-family: "Urbanist", sans-serif;
  color: var(--white);
  overflow: hidden;
  text-transform: capitalize;
  margin-top: 18px;
}
.team-section-4 .content .news-btn i {
  margin-left: 7px;
}
.team-section-4 .content .news-btn .text {
  position: relative;
  display: inline-block;
  height: 22px;
  overflow: hidden;
}
.team-section-4 .content .news-btn .text-default,
.team-section-4 .content .news-btn .text-hover {
  display: block;
  transition: transform 0.4s ease;
}
.team-section-4 .content .news-btn .text-hover {
  position: absolute;
  left: 0;
  top: 100%;
  color: var(--theme);
}
.team-section-4 .content .news-btn:hover .text-default {
  transform: translateY(-100%);
}
.team-section-4 .content .news-btn:hover .text-hover {
  transform: translateY(-100%);
}
.team-section-4 .content .news-btn i {
  transition: transform 0.4s ease;
}

.team-thumb-4 {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin-top: 10px;
}
@media (max-width: 1199px) {
  .team-thumb-4 {
    margin-top: 30px;
  }
}
.team-thumb-4 img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  display: block;
  object-fit: cover;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}
.team-thumb-4 img:first-child {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  -webkit-transform: translateX(50%) scaleX(2);
  transform: translate(50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
.team-thumb-4 .team-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px 30px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0px 0px 10px 10px;
  z-index: 88;
  padding-top: 25px;
  transition: all 0.4s ease-in-out;
  opacity: 0;
  visibility: hidden;
}
.team-thumb-4 .team-content .title {
  font-size: 24px;
  text-transform: capitalize;
}
.team-thumb-4 .team-content .title a {
  background-position: 0 95%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  display: inline;
}
.team-thumb-4 .team-content .title a:hover {
  background-size: 100% 2px;
  background-image: linear-gradient(180deg, var(--white) 0%, var(--white) 100%);
}
.team-thumb-4 .team-content p {
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
}
.team-thumb-4:hover img:first-child {
  -webkit-transform: translateX(0) scaleX(1);
  transform: translate(0) scaleX(1);
  opacity: 1;
  -webkit-filter: blur(0);
  filter: blur(0);
}
.team-thumb-4:hover img:nth-child(2) {
  -webkit-transform: translateX(-50%) scaleX(2);
  transform: translateX(-50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
.team-thumb-4:hover .team-content {
  opacity: 1;
  visibility: visible;
}

.team-section-4 {
  position: relative;
}
.team-section-4 .team-left {
  position: absolute;
  top: -100px;
  left: 0;
}
.team-section-4 .team-right {
  position: absolute;
  bottom: -100px;
  right: 0;
}

@media (max-width: 991px) {
  .team-section-5 .section-title-area {
    justify-content: center;
    text-align: center;
  }
}
.team-section-5 .section-title-area .content p {
  max-width: 471px;
}
@media (max-width: 991px) {
  .team-section-5 .section-title-area .content p {
    margin: 0 auto;
  }
}
.team-section-5 .section-title-area .content .news-btn {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  font-family: "Urbanist", sans-serif;
  color: var(--white);
  overflow: hidden;
  text-transform: capitalize;
  margin-top: 20px;
}
.team-section-5 .section-title-area .content .news-btn i {
  margin-left: 7px;
}
.team-section-5 .section-title-area .content .news-btn .text {
  position: relative;
  display: inline-block;
  height: 22px;
  overflow: hidden;
}
.team-section-5 .section-title-area .content .news-btn .text-default,
.team-section-5 .section-title-area .content .news-btn .text-hover {
  display: block;
  transition: transform 0.4s ease;
}
.team-section-5 .section-title-area .content .news-btn .text-hover {
  position: absolute;
  left: 0;
  top: 100%;
  color: var(--theme);
}
.team-section-5 .section-title-area .content .news-btn:hover .text-default {
  transform: translateY(-100%);
}
.team-section-5 .section-title-area .content .news-btn:hover .text-hover {
  transform: translateY(-100%);
}
.team-section-5 .section-title-area .content .news-btn i {
  transition: transform 0.4s ease;
}

.team-image-items-5 {
  margin-top: 30px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 1199px) {
  .team-image-items-5 {
    height: 500px;
  }
}
.team-image-items-5 img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  display: block;
  object-fit: cover;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}
.team-image-items-5 img:first-child {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  -webkit-transform: translateX(50%) scaleX(2);
  transform: translate(50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
.team-image-items-5 .team-content {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 30px 20px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  z-index: 9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease-in-out;
}
@media (max-width: 1199px) {
  .team-image-items-5 .team-content {
    flex-wrap: wrap;
    gap: 20px;
  }
}
.team-image-items-5 .team-content .content p {
  font-weight: 600;
  margin-bottom: 4px;
  color: rgb(255, 255, 255);
}
.team-image-items-5 .team-content .content .title {
  font-size: 24px;
}
.team-image-items-5 .team-content .content .title a {
  color: var(--white);
}
.team-image-items-5 .team-content .left-items {
  display: flex;
  align-items: center;
  gap: 60px;
}
@media (max-width: 1399px) {
  .team-image-items-5 .team-content .left-items {
    gap: 20px;
  }
}
.team-image-items-5 .team-content .left-items .social-icon {
  gap: 10px;
}
.team-image-items-5 .team-content .left-items .social-icon a {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--white);
  font-size: 14px;
}
.team-image-items-5 .team-content .left-items .social-icon a:hover {
  background-color: var(--theme);
  color: #fff;
}
.team-image-items-5 .team-content .left-items .icon {
  display: inline-block;
  width: 64px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--theme);
  color: var(--white);
  transition: all 0.4s ease-in-out;
}
.team-image-items-5 .team-content .left-items .icon:hover {
  background-color: var(--white);
  color: #101010;
}
.team-image-items-5:hover img:first-child {
  -webkit-transform: translateX(0) scaleX(1);
  transform: translate(0) scaleX(1);
  opacity: 1;
  -webkit-filter: blur(0);
  filter: blur(0);
}
.team-image-items-5:hover img:nth-child(2) {
  -webkit-transform: translateX(-50%) scaleX(2);
  transform: translateX(-50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
.team-image-items-5:hover .team-content {
  opacity: 1;
  visibility: visible;
}

.team-details-wrapper .team-details-thumb {
  border-radius: 12px;
}
@media (max-width: 1600px) {
  .team-details-wrapper .team-details-thumb {
    height: 860px;
  }
  .team-details-wrapper .team-details-thumb img {
    object-fit: cover;
  }
}
@media (max-width: 991px) {
  .team-details-wrapper .team-details-thumb {
    height: 500px;
  }
  .team-details-wrapper .team-details-thumb img {
    object-fit: initial;
  }
}
.team-details-wrapper .team-details-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
}
.team-details-wrapper .team-details-content {
  margin-left: 50px;
}
@media (max-width: 1399px) {
  .team-details-wrapper .team-details-content {
    margin-left: 0;
  }
}
.team-details-wrapper .team-details-content h2 {
  font-size: 48px;
  font-weight: 600;
  margin-bottom: 13px;
}
@media (max-width: 1399px) {
  .team-details-wrapper .team-details-content h2 {
    font-size: 35px;
  }
}
.team-details-wrapper .team-details-content span {
  border: 1px solid rgba(255, 255, 25, 0.12);
  border-radius: 100px;
  font-size: 16px;
  font-weight: 500;
  color: var(--header);
  padding: 2px 10px;
  display: inline-block;
  margin-bottom: 25px;
}
@media (max-width: 1399px) {
  .team-details-wrapper .team-details-content span {
    font-size: 16px;
    margin-bottom: 20px;
  }
}
.team-details-wrapper .team-details-content p {
  font-size: 18px;
  font-weight: 400;
  margin-top: 15px;
}
@media (max-width: 1399px) {
  .team-details-wrapper .team-details-content p {
    font-size: 16px;
  }
}
.team-details-wrapper .team-details-content .team-info-content {
  border-top: 1px solid rgba(255, 255, 25, 0.12);
  padding-top: 25px;
  margin-top: 25px;
}
.team-details-wrapper .team-details-content .team-info-content h3 {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 10px;
}
.team-details-wrapper .team-details-content .team-info-content a {
  font-size: 18px;
  font-weight: 400;
  color: #fff;
}
@media (max-width: 1399px) {
  .team-details-wrapper .team-details-content .team-info-content a {
    font-size: 16px;
  }
}
.team-details-wrapper .team-details-content .team-info-content .text {
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 0;
  border: none;
  padding: 0;
}
@media (max-width: 1399px) {
  .team-details-wrapper .team-details-content .team-info-content .text {
    font-size: 16px;
  }
}
.team-details-wrapper .team-details-content .team-info-content .social-icon {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
.team-details-wrapper .team-details-content .team-info-content .social-icon a {
  color: var(--header);
  width: 37px;
  height: 37px;
  line-height: 37px;
  text-align: center;
  border-radius: 100px;
  border: 1px solid var(--header);
  font-size: 20px;
  font-weight: 500;
  text-transform: uppercase;
}
.team-details-wrapper .team-details-content .team-info-content .social-icon a:hover {
  background-color: var(--theme);
  color: var(--white);
  border: 1px solid var(--theme);
}

.team-contact-items {
  background: var(--bg);
  padding: 120px 60px;
  border-radius: 16px;
}
@media (max-width: 1199px) {
  .team-contact-items {
    padding: 50px;
  }
}
@media (max-width: 767px) {
  .team-contact-items {
    padding: 40px 30px;
  }
}
@media (max-width: 575px) {
  .team-contact-items {
    padding: 30px;
  }
}
.team-contact-items .team-left-items h2 {
  font-size: 72px;
  font-weight: 600;
  margin-bottom: 25px;
}
@media (max-width: 1399px) {
  .team-contact-items .team-left-items h2 {
    font-size: 40px;
  }
}
@media (max-width: 991px) {
  .team-contact-items .team-left-items h2 {
    font-size: 30px;
  }
}
@media (max-width: 767px) {
  .team-contact-items .team-left-items h2 {
    font-size: 30px;
  }
}
@media (max-width: 575px) {
  .team-contact-items .team-left-items h2 {
    font-size: 25px;
  }
}
.team-contact-items .team-left-items p {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 40px;
  max-width: 460px;
}
@media (max-width: 1399px) {
  .team-contact-items .team-left-items p {
    font-size: 16px;
  }
}
.team-contact-items .team-right-items {
  margin-left: 80px;
}
@media (max-width: 1199px) {
  .team-contact-items .team-right-items {
    margin-left: 0;
  }
}
.team-contact-items .team-right-items .contact-form-box {
  margin-top: 30px;
}
.team-contact-items .team-right-items .contact-form-box .form-clt input, .team-contact-items .team-right-items .contact-form-box .form-clt textarea {
  outline: none;
  width: 100%;
  color: var(--header);
  padding: 16px 25px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-transform: capitalize;
  color: var(--header);
  font-size: 16px;
  border-radius: 12px;
}
.team-contact-items .team-right-items .contact-form-box .form-clt input::placeholder, .team-contact-items .team-right-items .contact-form-box .form-clt textarea::placeholder {
  color: var(--header);
}
.team-contact-items .team-right-items .contact-form-box .form-clt textarea {
  padding-bottom: 120px;
}
.team-contact-items .team-right-items .contact-form-box .form-clt .form .single-select {
  padding: 19px 25px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  width: 100%;
  height: initial;
  line-height: initial;
  text-transform: capitalize;
  color: var(--header);
  border-radius: 12px;
  font-size: 16px;
}
.team-contact-items .team-right-items .contact-form-box .form-clt .form .single-select .current {
  color: var(--header);
}
.team-contact-items .team-right-items .contact-form-box .form-clt .form .single-select::after {
  border-bottom: 2px solid var(--header);
  border-right: 2px solid var(--header);
  width: 8px;
  height: 8px;
  right: 12px;
}
.team-contact-items .team-right-items .contact-form-box .form-clt .form .single-select .list {
  width: 100%;
  color: #101010;
}
.team-contact-items .team-right-items .contact-form-box .thems-btn2 {
  display: inline-block;
  background-color: var(--theme);
  color: var(--white);
  border-radius: 12px;
  padding: 18px 30px;
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
  transition: all 0.4s ease-in-out;
}
.team-contact-items .team-right-items .contact-form-box .thems-btn2 i {
  margin-left: 5px;
}
.team-contact-items .team-right-items .contact-form-box .thems-btn2:hover {
  background-color: #101010;
}

.team-contact-section .slider-button {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 30px;
  padding: 15px 0;
}
.team-contact-section .slider-button span {
  font-weight: 500;
}
.team-contact-section .slider-button .icon-gird {
  filter: brightness(0) invert(1);
}
.team-contact-section .slider-button .cmn-next,
.team-contact-section .slider-button .cmn-prev {
  width: 56px;
  height: 56px;
  line-height: 56px;
  text-align: center;
  transition: all 0.4s;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}
.team-contact-section .slider-button .cmn-next i,
.team-contact-section .slider-button .cmn-prev i {
  color: var(--white);
  transition: all 0.4s;
}
.team-contact-section .slider-button .cmn-next:hover,
.team-contact-section .slider-button .cmn-prev:hover {
  background: var(--theme);
  border-color: var(--theme);
}
.team-contact-section .slider-button .cmn-next:hover i,
.team-contact-section .slider-button .cmn-prev:hover i {
  color: var(--white);
}
.team-contact-section .slider-button .previus-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--header);
}

.news-section {
  margin: 0 60px;
  border-radius: 16px;
  margin-bottom: 120px;
}
@media (max-width: 1899px) {
  .news-section {
    margin: 0 35px;
    margin-bottom: 120px;
  }
}
@media (max-width: 1600px) {
  .news-section {
    margin: 0 30px;
    margin-bottom: 120px;
  }
}
@media (max-width: 1399px) {
  .news-section {
    margin: 0 25px;
    margin-bottom: 120px;
  }
}
@media (max-width: 1199px) {
  .news-section {
    margin: 0 20px;
    margin-bottom: 100px;
  }
}
@media (max-width: 991px) {
  .news-section {
    margin-bottom: 80px;
  }
}
@media (max-width: 991px) {
  .news-section .text-items {
    order: 2;
  }
}
.news-section .text-items p {
  color: #B1B1B1;
}
.news-section .text-items .news-btn {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  font-family: "Urbanist", sans-serif;
  color: var(--white);
  overflow: hidden;
  text-transform: capitalize;
  margin-top: 18px;
}
.news-section .text-items .news-btn i {
  margin-left: 7px;
}
.news-section .text-items .news-btn .text {
  position: relative;
  display: inline-block;
  height: 22px;
  overflow: hidden;
}
.news-section .text-items .news-btn .text-default,
.news-section .text-items .news-btn .text-hover {
  display: block;
  transition: transform 0.4s ease;
}
.news-section .text-items .news-btn .text-hover {
  position: absolute;
  left: 0;
  top: 100%;
  color: var(--theme);
}
.news-section .text-items .news-btn:hover .text-default {
  transform: translateY(-100%);
}
.news-section .text-items .news-btn:hover .text-hover {
  transform: translateY(-100%);
}
.news-section .text-items .news-btn i {
  transition: transform 0.4s ease;
}
@media (max-width: 991px) {
  .news-section .section-title {
    order: 1;
  }
}
.news-section .section-title-area {
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 60px;
}
.news-section.news-section-4 .section-title-area {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 30px;
}

.news-box-items {
  margin-top: 60px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 60px;
  background-color: #272727;
}
.news-box-items .thumb {
  overflow: hidden;
  position: relative;
  border-radius: 6px;
  height: 170px;
}
.news-box-items .thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  border-radius: 6px;
}
.news-box-items .thumb img:first-child {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  -webkit-transform: translateX(50%) scaleX(2);
  transform: translate(50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
.news-box-items .content {
  margin-left: 30px;
}
@media (max-width: 1199px) {
  .news-box-items .content {
    margin-left: 0;
  }
}
@media (max-width: 991px) {
  .news-box-items .content {
    margin-top: 30px;
  }
}
.news-box-items .content .title {
  font-size: 30px;
  font-weight: 500;
  text-transform: capitalize;
}
@media (max-width: 1399px) {
  .news-box-items .content .title {
    font-size: 24px;
  }
}
@media (max-width: 575px) {
  .news-box-items .content .title {
    font-size: 21px;
  }
}
.news-box-items .content .title a:hover {
  color: var(--theme);
}
.news-box-items .content ul {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 40px;
}
@media (max-width: 1199px) {
  .news-box-items .content ul {
    flex-wrap: wrap;
    gap: 30px;
  }
}
.news-box-items .content ul li .client-info {
  display: flex;
  align-items: center;
  gap: 20px;
}
.news-box-items .content ul li .client-info .client-content .name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.news-box-items .content ul li .client-info .client-content p {
  font-size: 14px;
  font-weight: 500;
}
.news-box-items .content ul li .news-line {
  height: 60px;
  width: 1px;
  background-color: rgba(136, 136, 136, 0.2);
}
@media (max-width: 1199px) {
  .news-box-items .content ul li .news-line {
    display: none;
  }
}
.news-box-items .content ul li span {
  border-radius: 4px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 5px 10px;
  line-height: 1;
  color: var(--white);
  margin-right: 10px;
  line-height: 1;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
}
.news-box-items .content ul li span.color-2 {
  border-radius: 4px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--white);
}
@media (max-width: 1199px) {
  .news-box-items .content ul li:nth-child(2) {
    display: none;
  }
}
.news-box-items:hover .thumb img:first-child {
  -webkit-transform: translateX(0) scaleX(1);
  transform: translate(0) scaleX(1);
  opacity: 1;
  -webkit-filter: blur(0);
  filter: blur(0);
}
.news-box-items:hover .thumb img:nth-child(2) {
  -webkit-transform: translateX(-50%) scaleX(2);
  transform: translateX(-50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

@media (max-width: 991px) {
  .news-section-2 .section-title-area {
    justify-content: center;
    text-align: center;
  }
}
.news-section-2 .section-title-area .content p {
  max-width: 471px;
}
@media (max-width: 991px) {
  .news-section-2 .section-title-area .content p {
    margin: 0 auto;
  }
}
.news-section-2 .section-title-area .content .news-btn {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  font-family: "Urbanist", sans-serif;
  color: var(--white);
  overflow: hidden;
  text-transform: capitalize;
  margin-top: 20px;
}
.news-section-2 .section-title-area .content .news-btn i {
  margin-left: 7px;
}
.news-section-2 .section-title-area .content .news-btn .text {
  position: relative;
  display: inline-block;
  height: 22px;
  overflow: hidden;
}
.news-section-2 .section-title-area .content .news-btn .text-default,
.news-section-2 .section-title-area .content .news-btn .text-hover {
  display: block;
  transition: transform 0.4s ease;
}
.news-section-2 .section-title-area .content .news-btn .text-hover {
  position: absolute;
  left: 0;
  top: 100%;
  color: var(--theme);
}
.news-section-2 .section-title-area .content .news-btn:hover .text-default {
  transform: translateY(-100%);
}
.news-section-2 .section-title-area .content .news-btn:hover .text-hover {
  transform: translateY(-100%);
}
.news-section-2 .section-title-area .content .news-btn i {
  transition: transform 0.4s ease;
}

.news-wrapper-2 {
  margin-left: -10%;
  margin-right: -10%;
}
@media (max-width: 1199px) {
  .news-wrapper-2 {
    margin-left: 20px;
    margin-right: 20px;
  }
}

.news-box-items-2 {
  margin-top: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 20px;
}
.news-box-items-2 .thumb {
  overflow: hidden;
  position: relative;
}
.news-box-items-2 .thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  border-radius: 10px;
}
.news-box-items-2 .thumb img:first-child {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  -webkit-transform: translateX(50%) scaleX(2);
  transform: translate(50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
.news-box-items-2 .content {
  margin-top: 25px;
  padding-bottom: 10px;
}
/* Whole-card click: the title link's overlay covers the entire card so a click
   anywhere (thumbnail, excerpt, empty space) opens the article. The category
   pill (a different destination) and the Read More button are raised above the
   overlay so they keep working. Same absolute-overlay precedent the site already
   used for .wt-thumb-link. */
.news-box-items-2 { position: relative; }
.news-box-items-2 .title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.news-box-items-2 .content ul,
.news-box-items-2 .news-btn { position: relative; z-index: 2; }
/* News grid — uniform card + thumbnail height regardless of the source image's
   own dimensions. The thumb had no height, so each card grew to its image's
   intrinsic ratio and the borders ended at different heights across a row. A
   fixed thumb ratio (object-fit:cover, already set, crops to it) plus full-height
   cards stretched to the row makes every card identical; margin-top:auto pins the
   "Read More" button to a common baseline. Scoped to the grid view so the mobile
   list view (fixed 96px thumbs) is untouched. */
#wtNewsGrid[data-view="grid"] > [class*="col-"] { display: flex; }
#wtNewsGrid[data-view="grid"] .news-box-items-2 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#wtNewsGrid[data-view="grid"] .news-box-items-2 .thumb { aspect-ratio: 16 / 10; }
#wtNewsGrid[data-view="grid"] .news-box-items-2 .content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
#wtNewsGrid[data-view="grid"] .news-box-items-2 .news-btn { margin-top: auto; }
.news-box-items-2 .content ul {
  display: flex;
  align-items: center;
  gap: 20px;
}
.news-box-items-2 .content ul li a {
  font-size: 16px;
  font-weight: 500;
  background-color: var(--theme);
  color: var(--white);
  padding: 8px 13px;
  border-radius: 35px;
  display: inline-block;
  line-height: 1;
  transition: all 0.4s ease-in-out;
}
.news-box-items-2 .content ul li p {
  color: rgb(121, 121, 121);
  font-size: 16px;
}
.news-box-items-2 .content ul li p span {
  color: rgba(121, 121, 121, 0.7);
}
.news-box-items-2 .content .title {
  font-size: 24px;
  font-weight: 600;
  margin-top: 15px;
  transition: all 0.4s ease-in-out;
}
@media (max-width: 1199px) {
  .news-box-items-2 .content .title {
    font-size: 21px;
  }
}
@media (max-width: 575px) {
  .news-box-items-2 .content .title {
    font-size: 18px;
  }
}
.news-box-items-2 .content .title a {
  background-position: 0 95%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  display: inline;
  transition: all 0.4s ease-in-out;
}
.news-box-items-2 .content .title a:hover {
  color: var(--theme);
  background-size: 100% 2px;
  background-image: linear-gradient(180deg, var(--theme) 0%, var(--theme) 100%);
}
.news-box-items-2 .content .news-btn {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 600;
  font-family: "Urbanist", sans-serif;
  color: var(--white);
  overflow: hidden;
  text-transform: capitalize;
  margin-top: 20px;
}
.news-box-items-2 .content .news-btn i {
  margin-left: 7px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  background-color: var(--theme);
  text-align: center;
}
.news-box-items-2 .content .news-btn .text {
  position: relative;
  display: inline-block;
  height: 30px;
  overflow: hidden;
}
.news-box-items-2 .content .news-btn .text-default,
.news-box-items-2 .content .news-btn .text-hover {
  display: block;
  transition: transform 0.4s ease;
}
.news-box-items-2 .content .news-btn .text-hover {
  position: absolute;
  left: 0;
  top: 100%;
  color: var(--white);
}
.news-box-items-2 .content .news-btn:hover .text-default {
  transform: translateY(-100%);
}
.news-box-items-2 .content .news-btn:hover .text-hover {
  transform: translateY(-100%);
}
.news-box-items-2 .content .news-btn i {
  transition: transform 0.4s ease;
}
.news-box-items-2:hover .thumb img:first-child {
  -webkit-transform: translateX(0) scaleX(1);
  transform: translate(0) scaleX(1);
  opacity: 1;
  -webkit-filter: blur(0);
  filter: blur(0);
}
.news-box-items-2:hover .thumb img:nth-child(2) {
  -webkit-transform: translateX(-50%) scaleX(2);
  transform: translateX(-50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

.news-section-3 .section-title-area .text-items p {
  color: #B1B1B1;
}
.news-section-3 .section-title-area .text-items .news-btn {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 500;
  font-family: "Urbanist", sans-serif;
  color: var(--white);
  overflow: hidden;
  text-transform: capitalize;
  margin-top: 18px;
}
.news-section-3 .section-title-area .text-items .news-btn i {
  margin-left: 7px;
}
.news-section-3 .section-title-area .text-items .news-btn .text {
  position: relative;
  display: inline-block;
  height: 22px;
  overflow: hidden;
}
.news-section-3 .section-title-area .text-items .news-btn .text-default,
.news-section-3 .section-title-area .text-items .news-btn .text-hover {
  display: block;
  transition: transform 0.4s ease;
}
.news-section-3 .section-title-area .text-items .news-btn .text-hover {
  position: absolute;
  left: 0;
  top: 100%;
  color: var(--theme);
}
.news-section-3 .section-title-area .text-items .news-btn:hover .text-default {
  transform: translateY(-100%);
}
.news-section-3 .section-title-area .text-items .news-btn:hover .text-hover {
  transform: translateY(-100%);
}
.news-section-3 .section-title-area .text-items .news-btn i {
  transition: transform 0.4s ease;
}

.news-left-items {
  margin-top: 30px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 15px;
  border-radius: 20px;
}
.news-left-items .thumb {
  overflow: hidden;
  position: relative;
  z-index: 9;
  border-radius: 10px;
}
.news-left-items .thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  border-radius: 10px;
}
.news-left-items .thumb img:first-child {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  -webkit-transform: translateX(50%) scaleX(2);
  transform: translate(50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
.news-left-items .content {
  padding: 23px 15px 15px;
}
.news-left-items .content ul {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}
.news-left-items .content ul li {
  color: #B1B1B1;
  font-size: 14px;
}
.news-left-items .content ul li a {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
  background-color: var(--theme);
  padding: 0 10px;
  height: 26px;
  line-height: 26px;
  border-radius: 18px;
}
.news-left-items .content ul li a:hover {
  background-color: var(--theme);
}
.news-left-items .content h3 {
  font-size: 32px;
  font-weight: 600;
  text-transform: capitalize;
}
@media (max-width: 575px) {
  .news-left-items .content h3 {
    font-size: 24px;
  }
}
.news-left-items .content h3 a {
  background-position: 0 95%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  display: inline;
  color: var(--header);
}
.news-left-items .content h3 a:hover {
  background-size: 100% 2px;
  background-image: linear-gradient(180deg, var(--theme) 0%, var(--theme) 100%);
  color: var(--theme);
}
.news-left-items .content .link-btn {
  color: var(--header);
  margin-top: 20px;
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
}
.news-left-items .content .link-btn i {
  margin-right: 0;
  margin-left: 5px;
}
.news-left-items .content .link-btn:hover {
  color: var(--theme);
}
.news-left-items:hover .thumb img:first-child {
  -webkit-transform: translateX(0) scaleX(1);
  transform: translate(0) scaleX(1);
  opacity: 1;
  -webkit-filter: blur(0);
  filter: blur(0);
}
.news-left-items:hover .thumb img:nth-child(2) {
  -webkit-transform: translateX(-50%) scaleX(2);
  transform: translateX(-50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

.news-right-list {
  margin-top: 30px;
}
.news-right-list li:not(:last-child) {
  margin-bottom: 30px;
}
.news-right-list li .news-box-style-4 {
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 30px;
  border-radius: 20px;
}
@media (max-width: 575px) {
  .news-right-list li .news-box-style-4 {
    gap: 18px;
  }
}
.news-right-list li .news-box-style-4 .thumb {
  max-width: 293px;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 9;
  height: 245px;
  border-radius: 10px;
}
@media (max-width: 1399px) {
  .news-right-list li .news-box-style-4 .thumb {
    height: 227px;
  }
}
@media (max-width: 1199px) {
  .news-right-list li .news-box-style-4 .thumb {
    height: 222px;
  }
}
@media (max-width: 575px) {
  .news-right-list li .news-box-style-4 .thumb {
    height: 200px;
  }
}
.news-right-list li .news-box-style-4 .thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  object-fit: cover;
  border-radius: 10px;
}
.news-right-list li .news-box-style-4 .thumb img:first-child {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  -webkit-transform: translateX(50%) scaleX(2);
  transform: translate(50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}
.news-right-list li .news-box-style-4 .content ul {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}
.news-right-list li .news-box-style-4 .content ul li {
  color: #B1B1B1;
  font-size: 14px;
}
.news-right-list li .news-box-style-4 .content ul li:not(:last-child) {
  margin-bottom: 0;
}
.news-right-list li .news-box-style-4 .content ul li a {
  display: inline-block;
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
  background-color: var(--theme);
  padding: 0 10px;
  height: 26px;
  line-height: 26px;
  border-radius: 18px;
}
.news-right-list li .news-box-style-4 .content ul li a:hover {
  background-color: var(--theme);
}
.news-right-list li .news-box-style-4 .content h3 {
  font-size: 24px;
  font-weight: 600;
  text-transform: capitalize;
}
@media (max-width: 575px) {
  .news-right-list li .news-box-style-4 .content h3 {
    font-size: 20px;
  }
}
@media (max-width: 470px) {
  .news-right-list li .news-box-style-4 .content h3 {
    font-size: 18px;
  }
}
.news-right-list li .news-box-style-4 .content h3 a {
  background-position: 0 95%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  display: inline;
  color: var(--header);
}
.news-right-list li .news-box-style-4 .content h3 a:hover {
  background-size: 100% 2px;
  background-image: linear-gradient(180deg, var(--theme) 0%, var(--theme) 100%);
  color: var(--theme);
}
.news-right-list li .news-box-style-4 .content .link-btn {
  color: var(--header);
  margin-top: 20px;
  font-size: 16px;
  font-weight: 600;
  text-transform: capitalize;
}
.news-right-list li .news-box-style-4 .content .link-btn i {
  margin-right: 0;
  margin-left: 5px;
}
.news-right-list li .news-box-style-4 .content .link-btn:hover {
  color: var(--theme);
}
.news-right-list li .news-box-style-4:hover .thumb img:first-child {
  -webkit-transform: translateX(0) scaleX(1);
  transform: translate(0) scaleX(1);
  opacity: 1;
  -webkit-filter: blur(0);
  filter: blur(0);
}
.news-right-list li .news-box-style-4:hover .thumb img:nth-child(2) {
  -webkit-transform: translateX(-50%) scaleX(2);
  transform: translateX(-50%) scaleX(2);
  opacity: 0;
  -webkit-filter: blur(10px);
  filter: blur(10px);
}

/* ==============================
   Border Line Wrapper
================================= */
.new-border-line {
  width: 100%;
}

/* ==============================
   Common Border Style
================================= */
.new-border-line span {
  display: block;
  width: 100%;
  height: 1px;
}

/* ==============================
   Spacing Between Borders
================================= */
.new-border-line span:not(:last-child) {
  margin-bottom: 5px; /* gap between lines */
}

/* ==============================
   Optional: Different Colors
================================= */
.border-style-1 {
  background-color: rgba(255, 255, 255, 0.15);
}

.border-style-2 {
  background-color: rgba(255, 255, 255, 0.1);
}

.border-style-3 {
  background-color: rgba(255, 255, 255, 0.15);
}

.news-box-image-3 {
  margin-top: 30px;
}
.news-box-image-3 .thumb-1 {
  border-radius: 20px;
}
@media (max-width: 1399px) {
  .news-box-image-3 .thumb-1 {
    height: 100%;
  }
}
@media (max-width: 1199px) {
  .news-box-image-3 .thumb-1 {
    height: initial;
    height: 500px;
  }
}
.news-box-image-3 .thumb-1 img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
}

.news-content-3 {
  margin-left: 30px;
  margin-top: 30px;
}
@media (max-width: 1199px) {
  .news-content-3 {
    margin-left: 0;
  }
}
.news-content-3 .content {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 60px 0;
}
.news-content-3 .content .title {
  font-size: 30px;
  font-weight: 500;
  text-transform: capitalize;
}
@media (max-width: 1399px) {
  .news-content-3 .content .title {
    font-size: 24px;
  }
}
@media (max-width: 575px) {
  .news-content-3 .content .title {
    font-size: 21px;
  }
}
.news-content-3 .content .title a:hover {
  color: var(--theme);
}
.news-content-3 .content ul {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 40px;
}
@media (max-width: 1199px) {
  .news-content-3 .content ul {
    flex-wrap: wrap;
    gap: 30px;
  }
}
.news-content-3 .content ul li .client-info {
  display: flex;
  align-items: center;
  gap: 20px;
}
.news-content-3 .content ul li .client-info .client-content .name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.news-content-3 .content ul li .client-info .client-content p {
  font-size: 14px;
  font-weight: 500;
}
.news-content-3 .content ul li .news-line {
  height: 60px;
  width: 1px;
  background-color: rgba(136, 136, 136, 0.2);
}
@media (max-width: 1199px) {
  .news-content-3 .content ul li .news-line {
    display: none;
  }
}
.news-content-3 .content ul li span {
  border-radius: 4px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 5px 10px;
  line-height: 1;
  color: var(--white);
  margin-right: 10px;
  line-height: 1;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
}
.news-content-3 .content ul li span.color-2 {
  border-radius: 4px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--white);
}
@media (max-width: 1199px) {
  .news-content-3 .content ul li:nth-child(2) {
    display: none;
  }
}

.gt-news-standard-wrapper .gt-news-standard-items .gt-news-card-items-4 {
  margin-bottom: 30px;
}
.gt-news-standard-wrapper .gt-news-standard-items .gt-news-card-items-4 .gt-news-image {
  overflow: hidden;
  border-radius: 12px;
  position: relative;
}
.gt-news-standard-wrapper .gt-news-standard-items .gt-news-card-items-4 .gt-news-image::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 1;
  pointer-events: none;
  border-radius: 12px;
}
.gt-news-standard-wrapper .gt-news-standard-items .gt-news-card-items-4 .gt-news-image img {
  width: 100%;
  height: 100%;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  object-fit: cover;
  transition: all 1s;
  border-radius: 12px;
}
.gt-news-standard-wrapper .gt-news-standard-items .gt-news-card-items-4 .gt-news-content .gt-date-list {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 24px;
  margin-bottom: 15px;
}
@media (max-width: 1199px) {
  .gt-news-standard-wrapper .gt-news-standard-items .gt-news-card-items-4 .gt-news-content .gt-date-list {
    flex-wrap: wrap;
    gap: 10px;
  }
}
.gt-news-standard-wrapper .gt-news-standard-items .gt-news-card-items-4 .gt-news-content .gt-date-list li i {
  margin-right: 10px;
}
.gt-news-standard-wrapper .gt-news-standard-items .gt-news-card-items-4 .gt-news-content .news-title {
  margin-bottom: 10px;
  font-size: 32px;
  line-height: 138%;
}
@media (max-width: 1199px) {
  .gt-news-standard-wrapper .gt-news-standard-items .gt-news-card-items-4 .gt-news-content .news-title {
    font-size: 30px;
  }
}
@media (max-width: 575px) {
  .gt-news-standard-wrapper .gt-news-standard-items .gt-news-card-items-4 .gt-news-content .news-title {
    font-size: 25px;
  }
}
.gt-news-standard-wrapper .gt-news-standard-items .gt-news-card-items-4 .gt-news-content .news-title a {
  background-position: 0 95%;
  background-repeat: no-repeat;
  background-size: 0% 2px;
  display: inline;
}
.gt-news-standard-wrapper .gt-news-standard-items .gt-news-card-items-4 .gt-news-content .news-title a:hover {
  color: var(--theme);
  background-size: 100% 2px;
  background-image: linear-gradient(180deg, var(--theme) 0%, var(--theme) 100%);
}
.gt-news-standard-wrapper .gt-news-standard-items .gt-news-card-items-4 .gt-news-content .theme-btn-main {
  margin-top: 24px;
}
.gt-news-standard-wrapper .gt-news-standard-items .gt-news-card-items-4:hover .gt-news-image:after {
  height: 250%;
  transition: all 600ms linear;
  background-color: transparent;
}
.gt-news-standard-wrapper .gt-news-standard-items .gt-news-card-items-4:hover .gt-news-image img {
  transform: scale(1.2);
}

.news-details-area .blog-post-details .single-blog-post .post-featured-thumb img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.news-details-area .blog-post-details .single-blog-post .post-content {
  margin-top: 30px;
}
.news-details-area .blog-post-details .single-blog-post .post-content .post-list {
  gap: 30px;
  margin-bottom: 10px;
}
.news-details-area .blog-post-details .single-blog-post .post-content .post-list li {
  font-size: 14px;
  font-weight: 500;
}
.news-details-area .blog-post-details .single-blog-post .post-content .post-list li i {
  color: var(--theme);
  margin-right: 5px;
}
@media (max-width: 767px) {
  .news-details-area .blog-post-details .single-blog-post .post-content p {
    font-size: 14px;
  }
}
.news-details-area .blog-post-details .single-blog-post .post-content h2 {
  margin-bottom: 20px;
  font-size: 42px;
}
@media (max-width: 575px) {
  .news-details-area .blog-post-details .single-blog-post .post-content h2 {
    font-size: 25px;
  }
}
.news-details-area .blog-post-details .single-blog-post .post-content h2 a:hover {
  color: var(--theme);
}
.news-details-area .blog-post-details .single-blog-post .post-content .hilight-text {
  border-left: 4px solid var(--theme);
  padding: 40px;
  background-color: var(--theme);
  border-radius: 8px;
}
.news-details-area .blog-post-details .single-blog-post .post-content .hilight-text p {
  max-width: 650px;
  font-weight: 500;
  text-transform: capitalize;
  font-style: italic;
  line-height: 26px;
  color: #fff;
}
.news-details-area .blog-post-details .single-blog-post .post-content .hilight-text svg {
  float: right;
  margin-top: -30px;
}
.news-details-area .blog-post-details .single-blog-post .post-content .details-image img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.news-details-area .blog-post-details .tag-share-wrap {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 30px 0;
}
.news-details-area .blog-post-details .tag-share-wrap .tagcloud a {
  display: inline-block;
  padding: 12px 26px;
  line-height: 1;
  background: var(--bg);
  margin-right: 8px;
  text-transform: capitalize;
  font-weight: 500;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  border-radius: 4px;
  font-size: 16px;
}
@media (max-width: 575px) {
  .news-details-area .blog-post-details .tag-share-wrap .tagcloud a {
    margin-bottom: 5px;
  }
}
.news-details-area .blog-post-details .tag-share-wrap .tagcloud a:hover {
  background-color: var(--theme);
  color: var(--header);
}
.news-details-area .blog-post-details .tag-share-wrap .social-share span {
  font-size: 18px;
  color: var(--header);
  font-weight: 600;
}
.news-details-area .blog-post-details .tag-share-wrap .social-share a {
  font-size: 18px;
  color: var(--header);
}
.news-details-area .blog-post-details .tag-share-wrap .social-share a:not(:last-child) {
  margin-right: 10px;
}
.news-details-area .blog-post-details .tag-share-wrap .social-share a:hover {
  color: var(--theme);
}
.news-details-area .blog-post-details .comments-area {
  margin-top: 40px;
  padding: 50px 40px;
  background: var(--bg);
  border-radius: 8px;
}
@media (min-width: 1200px) {
  .news-details-area .blog-post-details .comments-area {
    padding: 35px;
  }
}
@media (max-width: 767px) {
  .news-details-area .blog-post-details .comments-area {
    padding: 32px;
  }
}
@media (max-width: 575px) {
  .news-details-area .blog-post-details .comments-area {
    padding: 28px;
  }
}
.news-details-area .blog-post-details .comments-area .comments-heading {
  margin-bottom: 30px;
}
@media (max-width: 575px) {
  .news-details-area .blog-post-details .comments-area .comments-heading {
    margin-bottom: 20px;
  }
}
.news-details-area .blog-post-details .comments-area .comments-heading h3 {
  font-size: 32px;
  font-weight: 700;
}
@media (max-width: 575px) {
  .news-details-area .blog-post-details .comments-area .comments-heading h3 {
    font-size: 28px;
  }
}
.news-details-area .blog-post-details .comments-area .blog-single-comment {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.news-details-area .blog-post-details .comments-area .blog-single-comment.bb-none {
  border: none;
}
@media (max-width: 575px) {
  .news-details-area .blog-post-details .comments-area .blog-single-comment {
    flex-wrap: wrap;
    gap: 20px;
  }
}
.news-details-area .blog-post-details .comments-area .blog-single-comment .content .head .con h4 {
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 20px;
}
.news-details-area .blog-post-details .comments-area .blog-single-comment .content .head .star i {
  color: var(--theme);
  font-size: 14px;
}
.news-details-area .blog-post-details .comments-area .blog-single-comment .content .reply {
  border-radius: 30px;
  padding: 5px 15px;
  font-weight: 400;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--header);
  font-size: 16px;
}
.news-details-area .blog-post-details .comment-form-wrap {
  background-color: var(--bg);
  border-radius: 8px;
  padding: 50px 40px;
  margin-top: 40px;
}
@media (min-width: 1200px) {
  .news-details-area .blog-post-details .comment-form-wrap {
    padding: 35px;
  }
}
@media (max-width: 767px) {
  .news-details-area .blog-post-details .comment-form-wrap {
    padding: 32px;
  }
}
@media (max-width: 575px) {
  .news-details-area .blog-post-details .comment-form-wrap {
    padding: 28px;
  }
}
.news-details-area .blog-post-details .comment-form-wrap h3 {
  font-size: 32px;
  margin-bottom: 30px;
  font-weight: 700;
}
@media (max-width: 575px) {
  .news-details-area .blog-post-details .comment-form-wrap h3 {
    font-size: 28px;
    margin-bottom: 20px;
  }
}
.news-details-area .blog-post-details .comment-form-wrap .form-clt input, .news-details-area .blog-post-details .comment-form-wrap .form-clt textarea {
  width: 100%;
  outline: none;
  border: none;
  background-color: transparent;
  border: none;
  padding: 16px 20px;
  font-weight: 400;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 16px;
}
.news-details-area .blog-post-details .comment-form-wrap .form-clt input::placeholder, .news-details-area .blog-post-details .comment-form-wrap .form-clt textarea::placeholder {
  color: var(--text);
}
.news-details-area .blog-post-details .comment-form-wrap .form-clt textarea {
  padding-bottom: 100px;
}

.gt-main-sideber .gt-single-sideber-widget {
  margin-bottom: 30px;
  background-color: var(--bg);
  padding: 30px;
  border-radius: 14px;
}
.gt-main-sideber .gt-single-sideber-widget .gt-search-widget form {
  width: 100%;
  position: relative;
}
.gt-main-sideber .gt-single-sideber-widget .gt-search-widget form input {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 16px;
  font-weight: 400;
  padding: 16px 20px;
  width: 100%;
  color: var(--text);
  border-radius: 6px;
}
.gt-main-sideber .gt-single-sideber-widget .gt-search-widget form button {
  position: absolute;
  right: -2px;
  top: 0;
  width: 58px;
  border-radius: 6px;
  font-size: 18px;
  height: 100%;
  background-color: var(--theme);
  color: var(--header);
  text-align: center;
  transition: all 0.3s ease-in-out;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.gt-main-sideber .gt-single-sideber-widget .gt-search-widget form button:hover {
  background-color: var(--header);
  color: var(--white);
}
.gt-main-sideber .gt-single-sideber-widget .gt-widget-title {
  margin-bottom: 20px;
}
.gt-main-sideber .gt-single-sideber-widget .gt-widget-title h3 {
  font-weight: 600;
  font-size: 22px;
}
.gt-main-sideber .gt-single-sideber-widget .gt-widget-title span {
  font-weight: 600;
  font-size: 22px;
  font-family: "Urbanist", sans-serif;
}
.gt-main-sideber .gt-single-sideber-widget .amenities-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
}
.gt-main-sideber .gt-single-sideber-widget .amenities-list li:not(:last-child) {
  margin-bottom: 20px;
}
.gt-main-sideber .gt-single-sideber-widget .gt-category-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 600;
  color: var(--header);
  transition: all 0.4s ease-in-out;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 22px 25px;
  font-family: "Urbanist", sans-serif;
  line-height: 1;
  text-transform: capitalize;
  border-radius: 8px;
}
.gt-main-sideber .gt-single-sideber-widget .gt-category-list li a {
  color: var(--header);
}
.gt-main-sideber .gt-single-sideber-widget .gt-category-list li i {
  transition: all 0.4s ease-in-out;
  color: var(--header);
}
.gt-main-sideber .gt-single-sideber-widget .gt-category-list li:not(:last-child) {
  margin-bottom: 20px;
}
.gt-main-sideber .gt-single-sideber-widget .gt-category-list li span b {
  font-weight: 400;
  color: var(--theme);
}
.gt-main-sideber .gt-single-sideber-widget .gt-category-list li:hover {
  background-color: var(--theme);
}
.gt-main-sideber .gt-single-sideber-widget .gt-category-list li:hover a {
  color: var(--header);
}
.gt-main-sideber .gt-single-sideber-widget .gt-category-list li:hover i, .gt-main-sideber .gt-single-sideber-widget .gt-category-list li:hover span {
  color: var(--header);
}
.gt-main-sideber .gt-single-sideber-widget .gt-recent-post-area .gt-recent-items {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
}
/* Whole-card click: the title link's overlay covers the recent-post row (thumb
   included) so a click anywhere opens the article. Single destination, so no
   nested link to raise above it. */
.gt-main-sideber .gt-single-sideber-widget .gt-recent-post-area .gt-recent-items .gt-recent-content .title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.gt-main-sideber .gt-single-sideber-widget .gt-recent-post-area .gt-recent-items .gt-recent-thumb {
  position: relative;
  overflow: hidden;
  max-width: 110px;
  width: 100%;
  border-radius: 8px;
}
.gt-main-sideber .gt-single-sideber-widget .gt-recent-post-area .gt-recent-items .gt-recent-thumb::after {
  content: "";
  position: absolute;
  width: 200%;
  height: 0%;
  left: 50%;
  top: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%) rotate(-45deg);
  z-index: 1;
  pointer-events: none;
  border-radius: 8px;
}
.gt-main-sideber .gt-single-sideber-widget .gt-recent-post-area .gt-recent-items .gt-recent-thumb img {
  border-radius: 8px;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  object-fit: cover;
  transition: all 1s;
  width: 100%;
  height: 100%;
}
.gt-main-sideber .gt-single-sideber-widget .gt-recent-post-area .gt-recent-items:not(:last-child) {
  margin-bottom: 20px;
}
.gt-main-sideber .gt-single-sideber-widget .gt-recent-post-area .gt-recent-items .gt-recent-content .title {
  margin-bottom: 5px;
  font-weight: 600;
  font-size: 18px;
  line-height: 150%;
  font-family: "Urbanist", sans-serif;
  display: inline-block;
}
.gt-main-sideber .gt-single-sideber-widget .gt-recent-post-area .gt-recent-items .gt-recent-content .title a:hover {
  color: var(--theme);
}
.gt-main-sideber .gt-single-sideber-widget .gt-recent-post-area .gt-recent-items .gt-recent-content ul li {
  color: var(--text);
  font-size: 14px;
}
.gt-main-sideber .gt-single-sideber-widget .gt-recent-post-area .gt-recent-items:hover .gt-recent-thumb:after {
  height: 250%;
  transition: all 600ms linear;
  background-color: transparent;
}
.gt-main-sideber .gt-single-sideber-widget .gt-recent-post-area .gt-recent-items:hover .gt-recent-thumb img {
  transform: scale(1.2);
}
.gt-main-sideber .gt-single-sideber-widget .tagcloud a {
  display: inline-block;
  padding: 12px 18px;
  line-height: 1;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: "Urbanist", sans-serif;
  margin-right: 10px;
  margin-bottom: 10px;
  text-transform: capitalize;
  border-radius: 4px;
  font-size: 16px;
}
.gt-main-sideber .gt-single-sideber-widget .tagcloud a:last-child {
  margin-right: 0;
}
.gt-main-sideber .gt-single-sideber-widget .tagcloud a:hover {
  background-color: var(--theme);
  color: var(--header);
}

.brand-section {
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 120px;
  padding-bottom: 120px;
}
@media (max-width: 1199px) {
  .brand-section {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 100px;
    padding-bottom: 100px;
  }
}
@media (max-width: 991px) {
  .brand-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
.brand-section .title {
  color: var(--white);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: center;
  line-height: 157%;
  margin-bottom: 55px;
}
@media (max-width: 1199px) {
  .brand-section .title {
    font-size: 35px;
    line-height: 142%;
  }
}
@media (max-width: 991px) {
  .brand-section .title {
    font-size: 33px;
  }
}
@media (max-width: 767px) {
  .brand-section .title {
    font-size: 29px;
  }
}
@media (max-width: 575px) {
  .brand-section .title {
    font-size: 26px;
  }
}
.brand-section .title span {
  display: inline-block;
  height: 45px;
  line-height: 44px;
  border-radius: 10px;
  background-color: var(--theme);
  padding: 0 12px;
}
@media (max-width: 1199px) {
  .brand-section .title span {
    height: initial;
    line-height: initial;
    padding: 0;
    border-radius: 0px;
    background-color: transparent;
  }
}
.brand-section .title span .font-style {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.brand-box-1 {
  height: 100px;
  line-height: 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  z-index: 9;
}
.brand-box-1::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 1px solid var(--theme);
  border-left: 1px solid var(--theme);
  transition: 0.5s;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
  border-radius: 10px;
}
.brand-box-1::after {
  position: absolute;
  content: "";
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-bottom: 1px solid var(--theme);
  border-right: 1px solid var(--theme);
  transition: 0.5s;
  opacity: 0;
  visibility: hidden;
  z-index: -1;
  border-radius: 10px;
}
.brand-box-1 .brand-img-1 {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand-box-1 .brand-img-1 img {
  transition: all 0.6s ease;
  transform: translateY(0);
}
.brand-box-1 .brand-img-1:last-child img {
  transform: translateY(-350%);
  opacity: 0;
}
.brand-box-1:hover .brand-img-1:first-child img {
  transform: translateY(100%);
  opacity: 0;
}
.brand-box-1:hover .brand-img-1:last-child img {
  transform: translateY(0);
  opacity: 1;
}
.brand-box-1:hover::before {
  width: 100%;
  height: 100%;
  visibility: visible;
  opacity: 1;
}
.brand-box-1:hover::after {
  width: 100%;
  height: 100%;
  visibility: visible;
  opacity: 1;
}

.faq-image-1 {
  border-radius: 16px;
  position: relative;
  height: 100%;
}
@media (max-width: 991px) {
  .faq-image-1 {
    height: initial;
  }
}
.faq-image-1 .incrase-box {
  background-color: var(--theme);
  padding: 30px;
  position: absolute;
  bottom: 35px;
  right: 35px;
  border-radius: 8px;
  padding-top: 22px;
  max-width: 336px;
  width: 100%;
}
@media (max-width: 575px) {
  .faq-image-1 .incrase-box {
    display: none;
  }
}
.faq-image-1 .incrase-box span {
  font-size: 20px;
  font-weight: 600;
  color: var(--white);
  display: inline-block;
}
.faq-image-1 .incrase-box p {
  color: var(--white);
  font-size: 100px;
  font-weight: 600;
  letter-spacing: -3px;
  line-height: 1;
  margin-bottom: -8px;
  margin-top: 40px;
}
.faq-image-1 img {
  width: 100%;
  height: 100%;
  border-radius: 16px;
}

.faq-content-1 {
  background-color: #FBF9EF;
  border-radius: 16px;
  padding: 120px 48px;
  padding-right: 90px;
}
@media (max-width: 1199px) {
  .faq-content-1 {
    padding: 100px 40px;
  }
}
@media (max-width: 991px) {
  .faq-content-1 {
    padding: 80px 30px;
  }
}
.faq-content-1 .section-title .sub-title {
  color: #101010;
}
.faq-content-1 .section-title h2 {
  color: #101010;
}
.faq-content-1 .accordion-box {
  position: relative;
  margin-top: 30px;
  border-top: 1px solid rgba(15, 23, 42, 0.1);
  padding-top: 30px;
}
@media (max-width: 767px) {
  .faq-content-1 .accordion-box {
    margin-top: 30px;
  }
}
.faq-content-1 .accordion-box .block {
  position: relative;
  background-color: transparent;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(16, 16, 16, 0.1);
  margin-bottom: 30px;
  line-height: 1;
  padding-bottom: 32px;
  padding-left: 66px;
}
@media (max-width: 767px) {
  .faq-content-1 .accordion-box .block {
    padding-left: 40px;
  }
}
.faq-content-1 .accordion-box .block .acc-btn {
  position: relative;
  font-size: 24px;
  color: #101010;
  font-weight: 600;
  font-family: "Urbanist", sans-serif;
  cursor: pointer;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  text-transform: capitalize;
}
@media (max-width: 470px) {
  .faq-content-1 .accordion-box .block .acc-btn {
    font-size: 20px;
  }
}
.faq-content-1 .accordion-box .block .acc-btn .number {
  color: var(--text);
  font-family: "Urbanist", sans-serif;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -3px;
  margin-left: -50px;
  margin-right: 15px;
}
.faq-content-1 .accordion-box .block .acc-btn .icon {
  position: absolute;
  right: 0;
  top: 0;
  height: 35px;
  font-size: 18px;
  line-height: 18px;
  color: #101010;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}
.faq-content-1 .accordion-box .block .acc-content {
  position: relative;
  display: none;
  margin-top: 22px;
}
@media (max-width: 470px) {
  .faq-content-1 .accordion-box .block .acc-content {
    margin-top: 10px;
  }
}
.faq-content-1 .accordion-box .block .acc-content .content {
  position: relative;
}
.faq-content-1 .accordion-box .block .acc-content .content .text {
  line-height: 175%;
  font-size: 16px;
  font-weight: 500;
  color: #101010;
  max-width: 455px;
}
@media (max-width: 1199px) {
  .faq-content-1 .accordion-box .block .acc-content .content .text {
    font-size: 14px;
  }
}
@media (max-width: 470px) {
  .faq-content-1 .accordion-box .block .acc-content .content .text {
    font-size: 13px;
  }
}
.faq-content-1 .accordion-box .block .acc-content.current {
  display: block;
}
.faq-content-1 .accordion-box .block .acc-btn.active .icon:before {
  content: "\f062";
  color: var(--theme);
}
.faq-content-1 .accordion-box .block .acc-btn.active {
  color: var(--theme);
}
.faq-content-1 .accordion-box .block .acc-btn.active .number {
  color: var(--theme);
}
.faq-content-1 .accordion-box .block:last-child {
  margin-bottom: 0;
}

.faq-wrapper-2 .faq-content .text {
  max-width: 420px;
  margin-top: 20px;
}
.faq-wrapper-2 .faq-content .news-btn {
  display: inline-flex;
  align-items: center;
  font-size: 20px;
  font-weight: 500;
  font-family: "Urbanist", sans-serif;
  color: var(--white);
  overflow: hidden;
  text-transform: capitalize;
  margin-top: 15px;
}
.faq-wrapper-2 .faq-content .news-btn i {
  margin-left: 7px;
}
.faq-wrapper-2 .faq-content .news-btn .text {
  position: relative;
  display: inline-block;
  height: 22px;
  overflow: hidden;
}
.faq-wrapper-2 .faq-content .news-btn .text-default,
.faq-wrapper-2 .faq-content .news-btn .text-hover {
  display: block;
  transition: transform 0.4s ease;
}
.faq-wrapper-2 .faq-content .news-btn .text-hover {
  position: absolute;
  left: 0;
  top: 100%;
  color: var(--theme);
}
.faq-wrapper-2 .faq-content .news-btn:hover .text-default {
  transform: translateY(-100%);
}
.faq-wrapper-2 .faq-content .news-btn:hover .text-hover {
  transform: translateY(-100%);
}
.faq-wrapper-2 .faq-content .news-btn i {
  transition: transform 0.4s ease;
}
.faq-wrapper-2 .accordion-box {
  position: relative;
  max-width: 870px;
  margin-left: auto;
}
@media (max-width: 1199px) {
  .faq-wrapper-2 .accordion-box {
    margin-left: initial;
    max-width: initial;
  }
}
.faq-wrapper-2 .accordion-box .block {
  position: relative;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  margin-bottom: 17px;
  line-height: 1;
  border-radius: 8px;
}
.faq-wrapper-2 .accordion-box .block .acc-btn {
  position: relative;
  font-size: 24px;
  color: #797979;
  font-weight: 600;
  font-family: "Urbanist", sans-serif;
  cursor: pointer;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  padding: 28.5px 25px;
  /* The icon is absolutely positioned at right:30px and is 35px wide, so it
     occupies 30-65px in from the right edge. A 25px right padding let any
     long-enough question run underneath it. Clear the icon zone. The smaller
     breakpoints below already do this (60px / 80px); the desktop base did not. */
  padding-right: 82px;
}
@media (max-width: 1399px) {
  .faq-wrapper-2 .accordion-box .block .acc-btn {
    padding-right: 60px;
    line-height: 1.4;
    font-size: 20px;
  }
}
@media (max-width: 991px) {
  .faq-wrapper-2 .accordion-box .block .acc-btn {
    padding: 25px 20px;
    padding-right: 80px;
  }
}
@media (max-width: 470px) {
  .faq-wrapper-2 .accordion-box .block .acc-btn {
    font-size: 18px;
  }
}
.faq-wrapper-2 .accordion-box .block .acc-btn .icon {
  position: absolute;
  right: 30px;
  top: 22px;
  width: 35px;
  height: 35px;
  font-size: 16px;
  line-height: 35px;
  background-color: rgba(255, 71, 28, 0.1);
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  border-radius: 50%;
  color: var(--theme);
  text-align: center;
}
@media (max-width: 1399px) {
  .faq-wrapper-2 .accordion-box .block .acc-btn .icon {
    right: 18px;
  }
}
.faq-wrapper-2 .accordion-box .block .acc-btn .icon::before {
  color: var(--theme);
}
.faq-wrapper-2 .accordion-box .block .acc-content {
  position: relative;
  display: none;
  padding: 30px 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
@media (max-width: 470px) {
  .faq-wrapper-2 .accordion-box .block .acc-content {
    margin-top: 10px;
  }
}
.faq-wrapper-2 .accordion-box .block .acc-content .content {
  position: relative;
}
.faq-wrapper-2 .accordion-box .block .acc-content .content .text {
  line-height: 175%;
  font-size: 17px;
  font-weight: 400;
  color: var(--white);
  max-width: 810px;
  letter-spacing: -0.02em;
  opacity: 0.8;
}
@media (max-width: 1199px) {
  .faq-wrapper-2 .accordion-box .block .acc-content .content .text {
    font-size: 14px;
  }
}
@media (max-width: 470px) {
  .faq-wrapper-2 .accordion-box .block .acc-content .content .text {
    font-size: 13px;
  }
}
.faq-wrapper-2 .accordion-box .block .acc-content.current {
  display: block;
}
.faq-wrapper-2 .accordion-box .block .acc-btn.active .icon:before {
  content: "\f00d";
}
.faq-wrapper-2 .accordion-box .block:last-child {
  margin-bottom: 0;
}
.faq-wrapper-2 .active-block .acc-btn {
  color: var(--white) !important;
}
.faq-wrapper-2 .active-block .icon {
  background-color: var(--theme) !important;
  color: var(--white) !important;
}
.faq-wrapper-2 .active-block .icon::before {
  color: var(--white) !important;
}

.faq-wrapper-5 .section-title-area {
  justify-content: start;
  gap: 420px;
  margin-bottom: 45px;
}
@media (max-width: 1399px) {
  .faq-wrapper-5 .section-title-area {
    gap: 30px;
  }
}
.faq-wrapper-5 .faq-image {
  margin-top: 30px;
  height: 750px;
}
@media (max-width: 1600px) {
  .faq-wrapper-5 .faq-image {
    height: 741px;
  }
}
@media (max-width: 991px) {
  .faq-wrapper-5 .faq-image {
    height: 560px;
  }
}
@media (max-width: 767px) {
  .faq-wrapper-5 .faq-image {
    height: 530px;
  }
}
@media (max-width: 575px) {
  .faq-wrapper-5 .faq-image {
    height: 480px;
  }
}
.faq-wrapper-5 .faq-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.faq-wrapper-5 .grt-faq-content-1 .accordion-box {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 1199px) {
  .faq-wrapper-5 .grt-faq-content-1 .accordion-box {
    margin-left: 0;
  }
}
.faq-wrapper-5 .grt-faq-content-1 .accordion-box .block {
  position: relative;
  background-color: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  line-height: 1;
  border-radius: 0;
  padding: 29px 0;
}
@media (max-width: 991px) {
  .faq-wrapper-5 .grt-faq-content-1 .accordion-box .block {
    padding: 25px 0;
  }
}
.faq-wrapper-5 .grt-faq-content-1 .accordion-box .block .acc-btn {
  position: relative;
  font-size: 24px;
  color: var(--header);
  font-weight: 600;
  font-family: "Urbanist", sans-serif;
  cursor: pointer;
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
}
@media (max-width: 1399px) {
  .faq-wrapper-5 .grt-faq-content-1 .accordion-box .block .acc-btn {
    padding-right: 40px;
    line-height: 1.4;
    font-size: 20px;
  }
}
@media (max-width: 470px) {
  .faq-wrapper-5 .grt-faq-content-1 .accordion-box .block .acc-btn {
    font-size: 18px;
  }
}
.faq-wrapper-5 .grt-faq-content-1 .accordion-box .block .acc-btn .icon {
  position: absolute;
  right: 0;
  top: -7px;
  width: 35px;
  height: 35px;
  font-size: 16px;
  line-height: 35px;
  background-color: var(--theme);
  -webkit-transition: all 500ms ease;
  transition: all 500ms ease;
  border-radius: 50%;
  color: var(--white);
  text-align: center;
}
.faq-wrapper-5 .grt-faq-content-1 .accordion-box .block .acc-content {
  position: relative;
  display: none;
  margin-top: 30px;
}
@media (max-width: 470px) {
  .faq-wrapper-5 .grt-faq-content-1 .accordion-box .block .acc-content {
    margin-top: 10px;
  }
}
.faq-wrapper-5 .grt-faq-content-1 .accordion-box .block .acc-content .content {
  position: relative;
}
.faq-wrapper-5 .grt-faq-content-1 .accordion-box .block .acc-content .content .text {
  line-height: 175%;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  opacity: 0.8;
  max-width: 877px;
}
@media (max-width: 1600px) {
  .faq-wrapper-5 .grt-faq-content-1 .accordion-box .block .acc-content .content .text {
    font-size: 16px;
  }
}
@media (max-width: 1199px) {
  .faq-wrapper-5 .grt-faq-content-1 .accordion-box .block .acc-content .content .text {
    font-size: 14px;
  }
}
@media (max-width: 470px) {
  .faq-wrapper-5 .grt-faq-content-1 .accordion-box .block .acc-content .content .text {
    font-size: 13px;
  }
}
.faq-wrapper-5 .grt-faq-content-1 .accordion-box .block .acc-content.current {
  display: block;
}
.faq-wrapper-5 .grt-faq-content-1 .accordion-box .block .acc-btn.active .icon:before {
  content: "\f00d";
  color: var(--white);
}
.faq-wrapper-5 .grt-faq-content-1 .accordion-box .block .acc-btn.active {
  color: var(--header);
}
.faq-wrapper-5 .grt-faq-content-1 .accordion-box .block:last-child {
  margin-bottom: 0;
}
.lets-talk-section {
  padding-bottom: 80px;
  padding-top: 50px;
}
@media (max-width: 1199px) {
  .lets-talk-section {
    padding-top: 80px;
  }
}
.lets-talk-section .title {
  text-align: center;
  text-transform: uppercase;
  color: var(--white);
  font-weight: 600;
  font-size: 200px;
  letter-spacing: -6.1112px;
  line-height: 1;
}
.lets-talk-section .title span {
  font-weight: 400;
  font-style: italic;
  font-family: "Instrument Serif", serif;
}
@media (max-width: 1899px) {
  .lets-talk-section .title {
    font-size: 170px;
  }
}
@media (max-width: 1399px) {
  .lets-talk-section .title {
    font-size: 130px;
  }
}
@media (max-width: 1199px) {
  .lets-talk-section .title {
    letter-spacing: initial;
  }
}
@media (max-width: 991px) {
  .lets-talk-section .title {
    font-size: 100px;
  }
}
@media (max-width: 767px) {
  .lets-talk-section .title {
    font-size: 80px;
  }
}
@media (max-width: 575px) {
  .lets-talk-section .title {
    font-size: 60px;
  }
}
.lets-talk-section .lets-talk-content .theme-btn-main {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  margin-top: 30px;
}
.lets-talk-section .lets-talk-content .theme-btn-main .theme-btn-arrow-left, .lets-talk-section .lets-talk-content .theme-btn-main .theme-btn-arrow-right {
  background: var(--theme);
  color: var(--white);
}
.lets-talk-section .lets-talk-content .theme-btn-main .btn-title {
  color: var(--white);
}

.image-distortion {
  overflow: hidden;
  height: 100%;
  position: relative;
}
.image-distortion canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.cta-wrapper-3 {
  text-align: center;
}
.cta-wrapper-3 h2 {
  font-size: 150px;
  font-weight: 700;
  letter-spacing: -3.41px;
  text-transform: uppercase;
}
@media (max-width: 1399px) {
  .cta-wrapper-3 h2 {
    font-size: 115px;
  }
}
@media (max-width: 991px) {
  .cta-wrapper-3 h2 {
    letter-spacing: initial;
    font-size: 100px;
  }
}
@media (max-width: 767px) {
  .cta-wrapper-3 h2 {
    font-size: 77px;
  }
}
@media (max-width: 575px) {
  .cta-wrapper-3 h2 {
    font-size: 60px;
  }
}
.cta-wrapper-3 h2 .img-1 {
  position: relative;
  top: -15px;
  left: 15px;
}
@media (max-width: 991px) {
  .cta-wrapper-3 h2 .img-1 {
    display: none;
  }
}
.cta-wrapper-3 h2 .img-1 img {
  border-radius: 10px;
}
.cta-wrapper-3 .theme-btn-main {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  margin-top: 30px;
}
.cta-wrapper-3 .theme-btn-main .theme-btn-arrow-left, .cta-wrapper-3 .theme-btn-main .theme-btn-arrow-right {
  background: var(--theme);
  color: var(--white);
}
.cta-wrapper-3 .theme-btn-main .btn-title {
  color: var(--white);
}

.lets-talk-section-2 {
  margin: 0 60px;
  border-radius: 20px;
  padding: 100px 0;
}
@media (max-width: 1899px) {
  .lets-talk-section-2 {
    margin: 0 35px;
  }
}
@media (max-width: 1600px) {
  .lets-talk-section-2 {
    margin: 0 30px;
  }
}
@media (max-width: 1399px) {
  .lets-talk-section-2 {
    margin: 0 25px;
  }
}
@media (max-width: 1199px) {
  .lets-talk-section-2 {
    margin: 0 20px;
  }
}
@media (max-width: 991px) {
  .lets-talk-section-2 .lets-talk-content-2 {
    text-align: center;
  }
}
.lets-talk-section-2 .lets-talk-content-2 .theme-btn-main {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
  margin-top: 50px;
}
.lets-talk-section-2 .lets-talk-content-2 .theme-btn-main .theme-btn-arrow-left, .lets-talk-section-2 .lets-talk-content-2 .theme-btn-main .theme-btn-arrow-right {
  background: var(--theme);
  color: var(--white);
}
.lets-talk-section-2 .lets-talk-content-2 .theme-btn-main .btn-title {
  color: var(--white);
}

.lets-talk-section-2 {
  position: relative;
  margin-bottom: 120px;
}
.lets-talk-section-2 .like-image {
  position: absolute;
  bottom: 0;
  right: 160px;
}
@media (max-width: 1399px) {
  .lets-talk-section-2 .like-image {
    right: 30px;
  }
}
@media (max-width: 991px) {
  .lets-talk-section-2 .like-image {
    display: none;
  }
}

.lets-deal-wrapper {
  text-align: center;
}
/* The CTA lives in .lets-deal-section on /faq and /about — both body.wt-light.
   The old rule painted a white label on a 10%-white pill, i.e. invisible on a
   white page. Use the site-standard style-2 treatment: navy pill, white label,
   orange arrow circle. */
.lets-deal-wrapper .theme-btn-main {
  background-color: #183057;
  color: #ffffff;
  margin-top: 30px;
}
.lets-deal-wrapper .theme-btn-main .theme-btn,
.lets-deal-wrapper .theme-btn-main .btn-title {
  color: #ffffff;
}
.lets-deal-wrapper .theme-btn-main .theme-btn-arrow-left,
.lets-deal-wrapper .theme-btn-main .theme-btn-arrow-right {
  background: var(--theme);
  color: #ffffff;
}

.contact-wrapper .contact-image {
  border-radius: 20px;
  margin-right: 20px;
  position: relative;
}
@media (max-width: 1199px) {
  .contact-wrapper .contact-image {
    margin-right: 0;
  }
}
@media (max-width: 991px) {
  .contact-wrapper .contact-image {
    height: 500px;
  }
}
.contact-wrapper .contact-image .contact-us {
  background-color: var(--white);
  border-radius: 10px;
  position: absolute;
  bottom: 40px;
  left: 40px;
  max-width: 336px;
  padding: 30px;
}
@media (max-width: 1199px) {
  .contact-wrapper .contact-image .contact-us {
    left: 25px;
    bottom: 25px;
    right: 25px;
  }
}
.contact-wrapper .contact-image .contact-us h2 {
  font-size: 48px;
  font-weight: 600;
  color: #0F172A;
}
@media (max-width: 1199px) {
  .contact-wrapper .contact-image .contact-us h2 {
    font-size: 38px;
  }
}
@media (max-width: 767px) {
  .contact-wrapper .contact-image .contact-us h2 {
    font-size: 28px;
  }
}
.contact-wrapper .contact-image .contact-us p {
  font-size: 16px;
  color: #797979;
  margin-top: 15px;
}
.contact-wrapper .contact-image .contact-us .number-center {
  font-size: 16px;
  font-weight: 600;
  color: var(--theme);
  display: inline-block;
  height: 54px;
  line-height: 54px;
  border: 1px solid var(--theme);
  border-radius: 70px;
  padding: 0 25px;
  margin-top: 28px;
}
.contact-wrapper .contact-image .contact-us .number-center i {
  margin-right: 4px;
}
.contact-wrapper .contact-image .contact-us .number-center:hover {
  background-color: var(--theme);
  color: var(--white);
}
.contact-wrapper .contact-image img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
}
.contact-wrapper .contact-box-items {
  margin-left: 20px;
}
@media (max-width: 1199px) {
  .contact-wrapper .contact-box-items {
    margin-left: 0;
  }
}
.contact-wrapper .contact-box-items .text {
  margin-top: 25px;
  max-width: 420px;
}
.contact-wrapper .contact-form-box {
  margin-top: 35px;
}
.contact-wrapper .contact-form-box .form-clt input, .contact-wrapper .contact-form-box .form-clt textarea {
  outline: none;
  width: 100%;
  color: #797979;
  padding-bottom: 20px;
  border: none;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  text-transform: capitalize;
  font-size: 16px;
  font-weight: 400;
  position: relative;
}
.contact-wrapper .contact-form-box .form-clt input::placeholder, .contact-wrapper .contact-form-box .form-clt textarea::placeholder {
  color: #797979;
}
.contact-wrapper .contact-form-box .form-clt textarea {
  padding-bottom: 120px;
}
.contact-wrapper .contact-form-box .form-clt .form .single-select {
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background-color: transparent;
  width: 100%;
  height: initial;
  line-height: initial;
  text-transform: capitalize;
  color: #797979;
  padding-bottom: 20px;
  border-radius: 0;
}
.contact-wrapper .contact-form-box .form-clt .form .single-select .current {
  color: #797979;
}
.contact-wrapper .contact-form-box .form-clt .form .single-select::after {
  border-bottom: 2px solid var(--header);
  border-right: 2px solid var(--header);
  width: 8px;
  height: 8px;
  right: 12px;
}
.contact-wrapper .contact-form-box .form-clt .form .single-select .list {
  width: 100%;
}
.contact-wrapper .contact-form-box .theme-btn-main {
  margin-top: 20px;
}

.contact-us-card-item {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 30px;
}
.contact-us-card-item .contact-image {
  border-radius: 12px;
}
.contact-us-card-item .contact-image img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}
.contact-us-card-item .contact-content {
  margin-top: 30px;
}
.contact-us-card-item .contact-content h2 {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 10px;
}
@media (max-width: 1399px) {
  .contact-us-card-item .contact-content h2 {
    font-size: 28px;
  }
}
.contact-us-card-item .contact-content span {
  font-size: 16px;
  font-weight: 400;
  display: inline-block;
  margin-bottom: 10px;
}
.contact-us-card-item .contact-content h3 {
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 10px;
}
@media (max-width: 1399px) {
  .contact-us-card-item .contact-content h3 {
    font-size: 22px;
  }
}
.contact-us-card-item .contact-content h3 a {
  color: var(--header);
}
.contact-us-card-item .contact-content .thems-btn {
  margin-top: 15px;
  background-color: var(--theme);
  width: 100%;
  text-align: center;
  padding: 18px 30px;
  border-radius: 8px;
  font-weight: 600;
  color: var(--white);
  display: inline-block;
  width: 100%;
  transition: all 0.4s ease-in-out;
  text-transform: capitalize;
}
.contact-us-card-item .contact-content .thems-btn:hover {
  background-color: #fff;
  color: #0F172A;
}

.contact-map-wrapper .contact-map iframe {
  width: 100%;
  height: 686px;
  border-radius: 12px;
}
@media (max-width: 1399px) {
  .contact-map-wrapper .contact-map iframe {
    height: 580px;
  }
}
@media (max-width: 991px) {
  .contact-map-wrapper .contact-map iframe {
    height: 550px;
  }
}
@media (max-width: 767px) {
  .contact-map-wrapper .contact-map iframe {
    height: 450px;
  }
}
@media (max-width: 575px) {
  .contact-map-wrapper .contact-map iframe {
    height: 350px;
  }
}
.contact-map-wrapper .contact-from-box {
  background-color: var(--bg);
  padding: 70px 60px;
  margin-left: 30px;
  border-radius: 12px;
}
@media (max-width: 1399px) {
  .contact-map-wrapper .contact-from-box {
    margin-left: 0;
    padding: 30px;
  }
}
.contact-map-wrapper .contact-from-box h2 {
  font-size: 48px;
  margin-bottom: 32px;
}
@media (max-width: 1399px) {
  .contact-map-wrapper .contact-from-box h2 {
    font-size: 30px;
    margin-bottom: 25px;
  }
}
.contact-map-wrapper .contact-from-box .form-clt input, .contact-map-wrapper .contact-from-box .form-clt textarea {
  outline: none;
  width: 100%;
  padding: 16px 25px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-transform: capitalize;
  color: var(--header);
  font-size: 16px;
  border-radius: 8px;
}
.contact-map-wrapper .contact-from-box .form-clt input::placeholder, .contact-map-wrapper .contact-from-box .form-clt textarea::placeholder {
  color: var(--header);
}
.contact-map-wrapper .contact-from-box .form-clt textarea {
  padding-bottom: 120px;
}
.contact-map-wrapper .contact-from-box .form-clt .form .single-select {
  padding: 19px 25px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  width: 100%;
  height: initial;
  line-height: initial;
  text-transform: capitalize;
  color: var(--header);
  font-size: 16px;
  border-radius: 8px;
}
.contact-map-wrapper .contact-from-box .form-clt .form .single-select .current {
  color: var(--header);
}
.contact-map-wrapper .contact-from-box .form-clt .form .single-select::after {
  border-bottom: 2px solid var(--header);
  border-right: 2px solid var(--header);
  width: 8px;
  height: 8px;
  right: 12px;
}
.contact-map-wrapper .contact-from-box .form-clt .form .single-select .list {
  width: 100%;
  color: #0F172A;
}
.contact-map-wrapper .contact-from-box .thems-btn {
  background-color: var(--theme);
  width: 100%;
  text-align: center;
  padding: 18px 30px;
  border-radius: 8px;
  font-weight: 600;
  color: var(--white);
  display: inline-block;
  width: 100%;
  transition: all 0.4s ease-in-out;
  text-transform: capitalize;
}
.contact-map-wrapper .contact-from-box .thems-btn:hover {
  background-color: #fff;
  color: #0F172A;
}

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

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px #FBF3E6;
  border-radius: 5px;
}

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

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

.fix {
  overflow: hidden;
}

.ralt {
  position: relative;
}

.sticky-style {
  position: sticky !important;
  top: 100px;
}

.gt-slide-transtion {
  -webkit-transition-timing-function: linear;
  transition-timing-function: linear;
}

.gt-brand-slide-element {
  width: auto;
  display: inline-block;
}

.p-relative {
  position: relative;
}

/* ================================
   Split Text Styles
================================ */
.split-title .word {
  display: inline-block;
  white-space: nowrap;
}

/* char animation */
.split-title .char {
  display: inline-block;
  transform-origin: left center;
  clip-path: inset(0 100% 0 0);
  opacity: 0;
}

.body-bg-2 {
  background-color: #FFFCF8;
}

.array-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}
.array-buttons .array-prev, .array-buttons .array-next {
  transition: all 0.4s ease-in-out;
}
.array-buttons .array-prev:hover, .array-buttons .array-next:hover {
  color: var(--theme);
}

.page-nav-wrap {
  margin-top: 50px;
}
.page-nav-wrap ul li {
  display: inline-block;
}
.page-nav-wrap ul li.active .page-numbers {
  background-color: var(--theme);
  color: var(--header);
}
.page-nav-wrap ul li .page-numbers.current {
  background-color: var(--theme);
  color: var(--white);
}
.page-nav-wrap ul li .page-numbers {
  display: inline-block;
  width: 48px;
  height: 48px;
  text-align: center;
  line-height: 48px;
  border-radius: 0;
  background: var(--bg);
  color: var(--white);
  font-weight: 500;
  transition: all 0.3s ease-in-out;
  margin: 0 2px;
  border-radius: 50%;
  font-family: "Urbanist", sans-serif;
}
@media (max-width: 767px) {
  .page-nav-wrap ul li .page-numbers {
    margin-top: 10px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
  }
}
.page-nav-wrap ul li .page-numbers i {
  margin-top: 2px;
  color: var(--white);
  transition: all 0.4s ease-in-out;
}
.page-nav-wrap ul li .page-numbers:hover {
  background-color: var(--theme);
  color: var(--header);
}
.page-nav-wrap ul li .page-numbers:hover i {
  color: var(--header);
}

.z-index-1 {
  position: relative;
  z-index: 1;
}

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

.swiper-dot {
  position: relative;
}
.swiper-dot .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  transition: 0.6s;
  background-color: #03070D;
  opacity: 1;
  border-radius: 8px;
}
.swiper-dot .swiper-pagination-bullet:not(:last-child) {
  margin-right: 5px;
}
.swiper-dot .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: var(--theme);
  transition: 0.6s;
  position: relative;
}

.jump-anim,
.studio-text {
  display: inline-block;
}

.p-relative {
  position: relative;
}

.tp-clip-anim {
  position: relative;
  overflow: hidden;
}
.tp-clip-anim .mask {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.1);
  opacity: 0;
  animation: reveal 1s forwards;
}
.tp-clip-anim .mask-1 {
  clip-path: inset(0 88.8% 0 0%);
  animation-delay: 0.1s;
}
.tp-clip-anim .mask-2 {
  clip-path: inset(0 77.7% 0 11.1%);
  animation-delay: 0.2s;
}
.tp-clip-anim .mask-3 {
  clip-path: inset(0 66.6% 0 22.2%);
  animation-delay: 0.3s;
}
.tp-clip-anim .mask-4 {
  clip-path: inset(0 55.5% 0 33.3%);
  animation-delay: 0.4s;
}
.tp-clip-anim .mask-5 {
  clip-path: inset(0 44.4% 0 44.4%);
  animation-delay: 0.5s;
}
.tp-clip-anim .mask-6 {
  clip-path: inset(0 33.3% 0 55.5%);
  animation-delay: 0.6s;
}
.tp-clip-anim .mask-7 {
  clip-path: inset(0 22.2% 0 66.6%);
  animation-delay: 0.7s;
}
.tp-clip-anim .mask-8 {
  clip-path: inset(0 11.1% 0 77.7%);
  animation-delay: 0.8s;
}
.tp-clip-anim .mask-9 {
  clip-path: inset(0 0% 0 88.8%);
  animation-delay: 0.9s;
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: scale(1.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.tp-clip-anim {
  width: 100%;
  display: grid;
  align-items: center;
  justify-items: center;
  overflow: hidden;
  position: relative;
}
.tp-clip-anim .tp-anim-img {
  opacity: 0;
  width: 100%;
  height: 100%;
}
.tp-clip-anim .mask {
  background-size: cover;
  background-position: center;
  transform: scale(1.005);
}
.tp-clip-anim > * {
  grid-area: 1/1/2/2;
  width: 100%;
  height: 100%;
  max-height: 100%;
}

.container-1680 {
  max-width: 1680px;
}

.mt-30 {
  margin-top: 30px;
}/*# sourceMappingURL=main.css.map */
/* ============================================================
   Walkthru rebrand — light, minimalistic typography (no bold)
   Urbanist is loaded 100..900, so 300 (Light) is available.
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.split-title, .hometitle,
[class*="-title"], [class*="title-"], [class*="Title"],
.navbar-nav .nav-link {
  font-weight: 300 !important;
}
b, strong,
.theme-btn, .theme-btn-main, .btn, .button, button {
  font-weight: 400 !important;
}

/* ============================================================
   Walkthru UI refinements
   (impeccable design laws · emil-kowalski motion · thin-stroke taste)
   ============================================================ */

/* 1 — Header logo, +20% */
.navbar-brand img { width: 151px; height: auto; }

/* 2 — Minimalistic primary navigation */
.navbar-nav .nav-link {
  font-weight: 300 !important;
  font-size: 15px;
  letter-spacing: 0.04em;
  transition: color 200ms cubic-bezier(0.23, 1, 0.32, 1);
}

/* 3 — Remove the spinning geodesic sphere behind the hero */
.hero-1 img[src*="hero-circle"] { display: none !important; }

/* 4 — Thin-stroke icons site-wide (Font Awesome Pro Light) — brands untouched */
.fa-solid, .fas,
.fa-regular, .far,
.fa-light, .fal { font-weight: 300 !important; }
/* hairline hamburger / toggle bars */
.sidebar__toggle span, .bars span { height: 1px !important; }

/* 5 — Glassmorphism sticky header (purposeful, requested) */
.sticky-menu {
  background-color: rgba(247, 248, 250, 0.72) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 6px 28px rgba(24, 48, 87, 0.08) !important;
  border-bottom: 1px solid rgba(24, 48, 87, 0.10);
}
.sticky-menu .mobile-menu-area { background-color: transparent !important; }
/* keep header content legible on the light glass, any page theme */
.sticky-menu .nav-link,
.sticky-menu .menu-right-info i,
.sticky-menu .main-header__search i { color: #183057 !important; }
.sticky-menu .sidebar__toggle span,
.sticky-menu .bars span { background-color: #183057 !important; }

/* ============================================================
   Walkthru UI refinements — round 2
   ============================================================ */

/* Task 1 — Pill-shaped search popup */
.search-popup__content { border-radius: 999px !important; overflow: hidden; }
.search-popup__content .search-popup__form { border-radius: 999px; overflow: hidden; }
.search-popup__content input { border-radius: 999px 0 0 999px; }

/* Task 4 — Navy (#183057) footer, elements recolored for contrast */
.footer-area-3 {
  background-image: none !important;
  background-color: #183057 !important;
}
.footer-widget-wrapper-5 .footer-left-item .split-title,
.footer-widget-wrapper-5 .footer-left-item .split-title span,
.footer-widget-wrapper-5 .footer-header-item p,
.footer-widget-wrapper-5 .widget-head h3,
.footer-bottom-5 p,
.footer-bottom-5 .footer-list a { color: #eef1f6 !important; }
.footer-widget-wrapper-5 .footer-left-item ul li,
.footer-widget-wrapper-5 .footer-left-item ul li a,
.footer-widget-wrapper-5 .gt-list-area a,
.footer-bottom-5 p b { color: rgba(238, 241, 246, 0.72) !important; }
.footer-widget-wrapper-5 .gt-list-area a,
.footer-widget-wrapper-5 .footer-left-item ul li a {
  transition: color 200ms cubic-bezier(0.23, 1, 0.32, 1);
}
.footer-widget-wrapper-5 .gt-list-area a:hover,
.footer-widget-wrapper-5 .footer-left-item ul li a:hover { color: #ffffff !important; }
/* navy logo would vanish on navy → render it white */
.footer-widget-wrapper-5 .footer-logo img { filter: brightness(0) invert(1); }
/* newsletter input tuned for navy */
.footer-widget-wrapper-5 .footer-left-item form input {
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  color: #ffffff !important;
}
.footer-widget-wrapper-5 .footer-left-item form input::placeholder { color: rgba(255, 255, 255, 0.5) !important; }
/* social icons legible on navy */
.footer-widget-wrapper-5 .social-icon a { color: rgba(238, 241, 246, 0.8); }

/* Task 3 — Light theme for inner pages (match homepage white background) */
body.wt-light { background-color: #ffffff !important; }
body.wt-light #smooth-content {
  --header: #101010;   /* headings + links (var(--header)) */
  --text: #555555;     /* body copy */
  color: #555555;      /* base inherited text */
}

/* Task 3 (cont.) — recolor text that was white, for the now-light inner pages */
/* header nav + toggles dark on light inner pages */
body.wt-light .navbar-nav .nav-link,
body.wt-light .menu-right-info i,
body.wt-light .main-header__search i { color: #101010 !important; }
body.wt-light .sidebar__toggle span,
body.wt-light .bars span { background-color: #101010 !important; }
/* content body text -> dark; links -> near-black; buttons keep white text */
body.wt-light #smooth-content :is(p, span, li, .text, .sub-title, blockquote, label, td, th) { color: #3a3f4a; }
body.wt-light #smooth-content a:not(.theme-btn-main):not(.email-btn) { color: #101010; }
/* only the filled (orange) buttons keep white text */
body.wt-light #smooth-content :is(.theme-btn-main, .email-btn),
body.wt-light #smooth-content :is(.theme-btn-main, .email-btn) :is(span, .text, i) { color: #ffffff; }
/* breadcrumb / hero title, bold text */
body.wt-light #smooth-content .split-title,
body.wt-light #smooth-content .split-title *,
body.wt-light #smooth-content .breadcrumb-sub-title,
body.wt-light #smooth-content .breadcrumb-sub-title *,
body.wt-light #smooth-content .page-heading .text-white,
body.wt-light #smooth-content :is(b, strong) { color: #101010; }
body.wt-light #smooth-content .bg-white-style,
body.wt-light #smooth-content .bg-white-style :is(span, .text, i) { color: #101010 !important; }
/* text-style theme buttons (no fill) read dark on the light page */
body.wt-light #smooth-content .theme-btn,
body.wt-light #smooth-content .theme-btn :is(span, .text, i) { color: #101010 !important; }

/* ============================================================
   Walkthru homepage tweaks (scoped to light home via body.bg-white)
   ============================================================ */

/* 1 — Marquee text in brand blue */
body.bg-white .marque-section .marquee,
body.bg-white .marque-section .marquee * {
  color: #183057 !important;
  -webkit-text-fill-color: #183057 !important;
  -webkit-text-stroke-color: #183057 !important;
}

/* 2 — Left-align the "Visionaries" brand title */
body.bg-white .brand-section .title,
body.bg-white .brand-section h2.title { text-align: left !important; }

/* 4 — FAQ section on a light #EAECF0 band (text recolored for contrast) */
body.bg-white .faq-section { background-color: #EAECF0 !important; }
body.bg-white .faq-section .acc-content,
body.bg-white .faq-section .acc-content p,
body.bg-white .faq-section .acc-content * { color: #3a3f4a !important; }
body.bg-white .faq-section .acc-btn { color: #101010 !important; }

/* service-section-2 horizontal panels — frosted glass cards on the white inner
   pages. The des-portfolio scroll animation stacks these on top of each other,
   so the tint is kept high (0.82) and paired with a strong blur: enough glass
   for the card beneath to read as depth, still opaque enough that body copy
   never competes with it. Cards without backdrop-filter support fall back to a
   near-solid white via the @supports block below. */
body.wt-light .service-box-items-2 {
  background-color: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  border-radius: 18px;
  padding: 34px 38px !important;
  box-shadow: 0 22px 55px rgba(24, 48, 87, 0.10),
              inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.wt-light .service-box-items-2 {
    background-color: rgba(255, 255, 255, 0.82) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
  }
}
/* Plan / Execute / Succeed pills: white borders were invisible on white */
body.wt-light .service-box-items-2 .list-items a {
  border-color: rgba(16, 24, 40, 0.16) !important;
  transition: color 200ms cubic-bezier(0.23,1,0.32,1), border-color 200ms cubic-bezier(0.23,1,0.32,1);
}
body.wt-light .service-box-items-2 .list-items a:hover {
  color: #183057 !important;
  border-color: rgba(24, 48, 87, 0.5) !important;
}

/* ============================================================
   Restore hairline strokes lost in the dark -> light conversion.
   The theme drew borders in white (rgba(255,255,255,x)) for the
   dark background; recolor existing borders to a subtle dark on
   the converted (wt-light) pages. Only recolors borders that
   already exist - it does not add any new borders.
   ============================================================ */
body.wt-light .header-section,
body.wt-light .header-section *,
body.wt-light #smooth-content,
body.wt-light #smooth-content * {
  border-color: rgba(16, 24, 40, 0.12);
}
/* keep light strokes on the genuinely dark surfaces */
body.wt-light #smooth-content .footer-area-3,
body.wt-light #smooth-content .footer-area-3 *,
body.wt-light #smooth-content .powerful-feature-section,
body.wt-light #smooth-content .powerful-feature-section * {
  border-color: rgba(255, 255, 255, 0.15);
}

/* contact form box — light version to match the white contact page */
body.wt-light .contact-from-box {
  background-color: #f6f7f9 !important;
  border: 1px solid rgba(16, 24, 40, 0.08);
}
body.wt-light .contact-from-box input,
body.wt-light .contact-from-box textarea,
body.wt-light .contact-from-box .nice-select {
  background-color: #ffffff !important;
  border-color: rgba(16, 24, 40, 0.14) !important;
  color: #101010 !important;
}
body.wt-light .contact-from-box input::placeholder,
body.wt-light .contact-from-box textarea::placeholder { color: rgba(16, 24, 40, 0.45) !important; }
body.wt-light .contact-from-box .nice-select .list {
  background-color: #ffffff !important;
  box-shadow: 0 8px 28px rgba(16, 24, 40, 0.12);
}
body.wt-light .contact-from-box .nice-select .option { color: #101010 !important; }
body.wt-light .contact-from-box .nice-select .option:hover,
body.wt-light .contact-from-box .nice-select .option.selected,
body.wt-light .contact-from-box .nice-select .option.focus { background-color: #eef1f6 !important; }

/* Nudge the homepage hero content down ~2 lines (was margin-top:-24px) */
body.bg-white .hero-section-1.hero-1 > .row.g-4 { margin-top: 32px !important; }

/* Preloader: Walkthru logo instead of wordmark text, same fill-up clip animation */
.pre-logo {
  width: clamp(154px, 28vw, 322px);
  height: auto;
  -webkit-text-stroke: 0;   /* was for the old text */
}
.pre-logo .pre-logo-img {
  display: block;
  width: 100%;
  height: auto;
  filter: brightness(0) invert(1);   /* render the navy logo white on the #0c0c0c preloader */
}
.pre-logo > .pre-logo-img { opacity: 0.14; }   /* faint base layer (like the old outline) */
.pre-logo-fill { width: 100%; height: auto; }
.pre-logo-fill .pre-logo-img { opacity: 1; }   /* bright layer revealed by the clip-path */

/* ============================================================
   Convert black-filled buttons to brand blue (#183057)
   (leaves orange and outline buttons as they are)
   ============================================================ */
.theme-btn-main.bg-white-style,
.theme-btn-main.bg-black-style,
.project-section-4 .theme-btn-main,
.footer-section-4 .footer-top-wrapper-4 .content .theme-btn-main,
.pricing-box-items .pricing-btn,
.pricing-box-items.active .pricing-btn:hover {
  background-color: #183057 !important;
}
/* keep the label white on the blue fill (all pages, incl. wt-light inner pages) */
.theme-btn-main.bg-white-style .theme-btn,
.theme-btn-main.bg-black-style .theme-btn,
.project-section-4 .theme-btn-main .theme-btn,
.pricing-box-items .pricing-btn,
body.wt-light #smooth-content .theme-btn-main.bg-white-style .theme-btn,
body.wt-light #smooth-content .theme-btn-main.bg-white-style span,
body.wt-light #smooth-content .theme-btn-main.bg-white-style i {
  color: #ffffff !important;
}
/* Same treatment for plain .style-2, whose pill is now the same navy. Without
   this the generic wt-light rule (~13946) paints the label #101010 — dark text
   on a dark pill. Scoped with :not() so the outlined variant, which sits on a
   transparent pill and needs dark text, is left alone. */
.theme-btn-main.style-2:not(.border-style):not(.bg-white-style):not(.bg-black-style) .theme-btn,
body.wt-light #smooth-content .theme-btn-main.style-2:not(.border-style):not(.bg-white-style):not(.bg-black-style) .theme-btn {
  color: #ffffff !important;
}

/* NOTE: the site-wide 85% "zoom out" has been REMOVED. Every zoom-based
   approach (zoom on <html>, or zoom + width-trick on an inner wrapper) breaks
   ScrollSmoother's height/scroll measurement inconsistently across browsers,
   which is what caused the footer + lower content to be unreachable/clipped in
   Safari/Firefox and some Chrome setups. The site now renders at native 100%,
   which is exactly what the scroll library was built for, so the footer works
   reliably everywhere. The .wt-scale wrapper is left in place but is a no-op. */
/* Compact "85% zoom" look for the header + body (NOT the footer, which stays at
   native 100% outside .wt-scale so ScrollSmoother's height math stays clean and
   the footer is always reachable). `zoom` is used (not transform:scale) because
   zoom also reduces the element's layout height, so the smoother measures the
   correct content height. Plain `zoom:0.85` on a full-width block fills the
   viewport and scales its content — do NOT add width:117.647% (that overflows to
   the right under browsers' newer spec-compliant zoom). */
.wt-scale { zoom: 0.85; }
.header-section > .header-main { zoom: 0.85; }
/* Overlays scale in place. */
.offcanvas-menu, .offcanvas-overlay, .search-wrap, .mobile-menu, .mean-bar { zoom: 0.85; }

/* Size tweaks: nav +20%, header logo +20%, preloader logo -20% */
.navbar-nav .nav-link { font-size: 19.2px !important; }
.navbar-brand img { width: 181px !important; }
.pre-logo { width: clamp(106px, 19.2vw, 221px) !important; }

/* ============================================================
   Auto-hiding dark scrollbar — visible (dark grey) only while
   scrolling, fades out when scrolling stops. Gutter is reserved
   so there is no layout shift.
   ============================================================ */
html { scrollbar-width: thin; scrollbar-color: transparent transparent; }
html.wt-scrolling { scrollbar-color: #3a3a3a transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: transparent;
  border: 2px solid transparent;
  border-radius: 10px;
  background-clip: content-box;
  transition: background-color 0.35s ease;
}
html.wt-scrolling ::-webkit-scrollbar-thumb { background-color: #3a3a3a; }
html.wt-scrolling ::-webkit-scrollbar-thumb:hover { background-color: #555555; }

/* Brand carousel visible only from the middle of the screen to the left;
   the marquee keeps running underneath, clipped at the viewport centre. */
.brand-section .brand-slider {
  -webkit-clip-path: inset(0 50% 0 0);
  clip-path: inset(0 50% 0 0);
}

/* Marquee strip: blue background with white content (overrides earlier blue-text rule) */
body.bg-white .marque-section { background-color: #183057 !important; }
body.bg-white .marque-section .marquee,
body.bg-white .marque-section .marquee * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  -webkit-text-stroke-color: #ffffff !important;
}

/* Service-section-3 band: match the default white home background (no coloured band) */
body.bg-white .service-section-3::before { background-color: transparent !important; }
/* text that sat on the dark band -> dark for the light grey band */
body.bg-white .service-section-3 .section-title h2,
body.bg-white .service-section-3 .section-title h2 *,
body.bg-white .service-section-3 .section-title .sub-title,
body.bg-white .service-section-3 .section-title .sub-title * { color: #101010 !important; }

/* service-details page fixes on the light theme */
/* hero title (text-white) -> dark on the now-light page */
body.wt-light #smooth-content .services-details-section .text-white,
body.wt-light #smooth-content .services-details-section .text-white * { color: #101010 !important; }
/* keep the dark FAQ band (faq-section-5) readable: light content + light strokes on its dark bg */
body.wt-light #smooth-content .faq-section-5 :is(h1,h2,h3,h4,h5,h6,p,span,li,a,.text,.sub-title) { color: #eef1f6 !important; }
body.wt-light #smooth-content .faq-section-5 :is(b,strong) { color: #ffffff !important; }
body.wt-light #smooth-content .faq-section-5,
body.wt-light #smooth-content .faq-section-5 * { border-color: rgba(255, 255, 255, 0.15); }

/* faq-section-5 accordion questions/answers -> light on the dark band */
body.wt-light #smooth-content .faq-section-5 .acc-btn,
body.wt-light #smooth-content .faq-section-5 .acc-content,
body.wt-light #smooth-content .faq-section-5 .acc-content * { color: #eef1f6 !important; }

/* Project showcase: align the full-bleed card row to the site container margins
   (mirror Bootstrap .container: centered, 12px padding, same responsive caps) */
body.bg-white .project-section .project-wrapper {
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 12px;
  padding-right: 12px;
}
@media (min-width: 576px) { body.bg-white .project-section .project-wrapper { max-width: 540px; } }
@media (min-width: 768px) { body.bg-white .project-section .project-wrapper { max-width: 720px; } }
@media (min-width: 992px) { body.bg-white .project-section .project-wrapper { max-width: 960px; } }
@media (min-width: 1200px) { body.bg-white .project-section .project-wrapper { max-width: 1140px; } }
@media (min-width: 1400px) { body.bg-white .project-section .project-wrapper { max-width: 1410px; } }

/* ============================================================
   News / Insights section -> match the default white home bg
   (remove dark band; flip light-on-dark text; light post cards)
   ============================================================ */
body.bg-white .news-section { background-color: transparent !important; }

/* dark post cards -> clean light cards (solid bg needed: cards stack while pinned) */
body.bg-white .news-section .news-box-items {
  background-color: #ffffff !important;
  border: 1px solid rgba(16, 24, 40, 0.10);
}

/* section header: white -> dark on the light background */
body.bg-white .news-section :is(.sub-title, .sub-title *, .section-title h2, .section-title h2 *, .split-line) { color: #101010 !important; }
body.bg-white .news-section .section-title p,
body.bg-white .news-section .text-items p { color: #555555 !important; }

/* "Explore More" button */
body.bg-white .news-section .news-btn,
body.bg-white .news-section .news-btn * { color: #101010 !important; }

/* post card text */
body.bg-white .news-section .news-box-items .title a { color: #101010 !important; }
body.bg-white .news-section .news-box-items .client-content .name { color: #101010 !important; }
body.bg-white .news-section .news-box-items .client-content p { color: #555555 !important; }

/* news card meta (category tag + date) -> readable on the light card */
body.bg-white .news-section .news-box-items li,
body.bg-white .news-section .news-box-items li span,
body.bg-white .news-section .news-box-items .color-2 { color: #555555 !important; }

/* ============================================================
   Blog details (news-details) light theme: sidebar widgets,
   tag chips and highlight callout -> light / brand navy
   ============================================================ */
body.wt-light .gt-single-sideber-widget {
  background-color: #f6f7f9 !important;
  border: 1px solid rgba(16, 24, 40, 0.08);
}
/* widget inner text stays readable on the light card */
body.wt-light .gt-single-sideber-widget :is(h3, h4, a, li, span, p) { color: #2a2f3a !important; }
body.wt-light .gt-single-sideber-widget .gt-widget-title h3 { color: #101010 !important; }

/* post + popular tag chips: dark -> light, navy on hover */
body.wt-light .tagcloud a {
  background-color: #eef0f3 !important;
  color: #101010 !important;
}
body.wt-light .tagcloud a:hover {
  background-color: #183057 !important;
  color: #ffffff !important;
}

/* highlight / quote callout: orange -> subtle brand-navy tint */
body.wt-light .hilight-text {
  background-color: rgba(24, 48, 87, 0.06) !important;
  border-left: 3px solid #183057;
  color: #101010 !important;
}

/* ============================================================
   "Powerful feature" strip on light inner pages: a soft light-grey
   band (close to white, not pure white) with dark text + dark icons.
   ============================================================ */
body.wt-light .powerful-feature-section.section-bg,
body.wt-light .powerful-feature-section { background-color: #F1F2F4 !important; }
body.wt-light .powerful-feature-section :is(h1,h2,h3,h4,h5,h6,p,span,li,a,.sub-title,.title) { color: #101010 !important; }
body.wt-light .powerful-feature-section .style-color { color: #555555 !important; }
body.wt-light .powerful-feature-section,
body.wt-light .powerful-feature-section * { border-color: rgba(16, 24, 40, 0.10) !important; }
/* white feature-icon PNGs -> dark so they read on the light band */
body.wt-light .powerful-feature-section .icon-box img { filter: brightness(0); opacity: 0.7; }

/* project-details process cards: light on the light page (were dark, wt-light
   turned their text dark -> dark-on-dark). Give them a light card surface. */
body.wt-light .details-box {
  background-color: #f6f7f9 !important;
  border: 1px solid rgba(16, 24, 40, 0.08);
}

/* Portfolio page: match the homepage container margins.
   The project grid used .container-1680 (flat 1680px = ~289px margins);
   mirror the standard .container breakpoints (1410px max = homepage margins). */
.project-section-5 .container-1680 { max-width: 100%; }
@media (min-width: 576px)  { .project-section-5 .container-1680 { max-width: 540px; } }
@media (min-width: 768px)  { .project-section-5 .container-1680 { max-width: 720px; } }
@media (min-width: 992px)  { .project-section-5 .container-1680 { max-width: 960px; } }
@media (min-width: 1200px) { .project-section-5 .container-1680 { max-width: 1140px; } }
@media (min-width: 1400px) { .project-section-5 .container-1680 { max-width: 1410px; } }

/* Category (hub) card */
.wt-cat-card {
  background: #ffffff;
  border: 1px solid rgba(16, 24, 40, 0.10);
  border-radius: 16px;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.wt-cat-card:hover {
  box-shadow: 0 20px 44px rgba(24, 48, 87, 0.10);
  border-color: rgba(24, 48, 87, 0.20);
  transform: translateY(-4px);
}
.wt-cat-card .wt-cat-count {
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #183057;
  margin: 0 0 14px;
}
.wt-cat-card h3 { font-size: 24px; line-height: 1.25; color: #101010; margin: 0 0 12px; }
.wt-cat-card h3 a { color: inherit; }
.wt-cat-card p { color: #555; font-size: 15px; line-height: 1.7; margin: 0 0 22px; }
.wt-cat-card .wt-cat-link {
  margin-top: auto;
  font-size: 15px;
  color: #183057;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wt-cat-card .wt-cat-link i { transition: transform .3s ease; }
.wt-cat-card:hover .wt-cat-link i { transform: translate(3px, -3px); }

/* The 760px readable measure belongs on the inner body, not on the <section>.
   It was clamping the full-bleed section itself, which collapsed the .container
   inside it to 646px at left:0 - so the body copy ran flush to the viewport
   edge while every other section on the page stayed centred. */
.wt-svc-intro { margin: 0 0 46px; }
.wt-svc-intro-body { max-width: 760px; }
.wt-svc-intro p { color: #555; font-size: 17px; line-height: 1.7; }
.wt-svc-intro h2, .wt-svc-intro h3 { margin-top: 34px; margin-bottom: 14px; }
.wt-svc-intro h2 { font-size: 30px; }
.wt-svc-intro h3 { font-size: 23px; }
.wt-svc-intro ul { margin: 0 0 18px; padding-left: 20px; }
.wt-svc-intro li { color: #555; font-size: 17px; line-height: 1.7; margin-bottom: 6px; }

/* Breadcrumb hero title: make the page title readable on the light inner-page
   background (template default is text-white, which is invisible on white). */
body.wt-light .breadcrumb-wrapper .breadcrumb-sub-title h1,
body.wt-light .breadcrumb-wrapper .breadcrumb-sub-title h1 * { color: #101010 !important; }
body.wt-light .breadcrumb-wrapper .breadcrumb-items ul li,
body.wt-light .breadcrumb-wrapper .breadcrumb-items ul li a { color: #555 !important; }

/* ============================================================
   Floating action buttons (all pages, fixed at native scale):
   WhatsApp bottom-left, scroll-to-top bottom-right (brand navy)
   ============================================================ */
.wt-float {
  position: fixed;
  bottom: 24px;
  z-index: 1200;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #ffffff;
  border: 0;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(16, 24, 40, 0.22);
  transition: transform .25s ease, box-shadow .25s ease, opacity .3s ease, visibility .3s ease;
}
.wt-float:hover { transform: translateY(-3px); color: #ffffff; }
.wt-whatsapp { left: 24px; background: #25D366; }
.wt-whatsapp i { font-size: 24px; }
.wt-scrolltop {
  right: 24px;
  background: #183057;
  opacity: 0;
  visibility: hidden;
}
.wt-scrolltop.is-visible { opacity: 1; visibility: visible; }

/* Client logos in the brand carousel: render solid black by default AND on hover
   (the hover-roll swaps two identical logos, both forced black). */
.brand-slider .brand-box-1 .brand-img-1 img {
  filter: brightness(0) !important;
}

/* Homepage service cards: make the service NAME stand out from the copy below
   (site defaults headings to weight 300; give these a medium weight, size bump,
   brand-navy colour, tighter tracking for a clean, deliberate label). */
.service-box-items-3 h3 {
  font-weight: 600 !important;
  font-size: 27px;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
}
.service-box-items-3 h3 a { color: #183057; }
.service-box-items-3 h3 a:hover { color: #12294a; }

/* Footer columns swapped (brand/links now LEFT, newsletter RIGHT): rebalance
   the horizontal indent so the left block hugs the left margin and the right
   block sits inset for a clean, professional split. */
.footer-widget-wrapper-5 .footer-right-item { padding-left: 0 !important; padding-right: 70px; }
.footer-widget-wrapper-5 .footer-left-item { padding-left: 70px; }
@media (max-width: 1199px) {
  .footer-widget-wrapper-5 .footer-right-item { padding-right: 0; }
  .footer-widget-wrapper-5 .footer-left-item { padding-left: 0; }
}

/* lets-talk (distortion) band: title to hero size (~100px) + ~50% shorter band */
.lets-talk-section { padding-top: 24px !important; padding-bottom: 36px !important; }
.lets-talk-section .title { font-size: 100px !important; letter-spacing: -2px !important; }
.lets-talk-section .as-partner-3-big-title { margin-bottom: 8px; }
@media (max-width: 1399px) { .lets-talk-section .title { font-size: 84px !important; } }
@media (max-width: 991px)  { .lets-talk-section .title { font-size: 60px !important; } }
@media (max-width: 575px)  { .lets-talk-section .title { font-size: 46px !important; } }

/* Footer brand column (now on the left): stack logo -> blurb -> social,
   social laid out horizontally, divider lines aligned to the content margin. */
.footer-widget-wrapper-5 .footer-right-item .footer-header-item {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 22px;
}
.footer-widget-wrapper-5 .footer-right-item .footer-header-item p {
  max-width: 460px;
  margin: 0;
}
.footer-widget-wrapper-5 .footer-right-item .footer-header-item .social-icon {
  display: flex !important;
  gap: 10px;
  margin-top: 4px;
}
/* keep the horizontal divider lines flush to the left margin (were offset -100px) */
.footer-widget-wrapper-5 .footer-right-item .footer-header-item::before { left: 0; }

/* hero-small-slider relocated into pricing section: replicate the hero styling
   exactly (CSS was scoped to .hero-1 .hero-right-items). */
.pricing-wrap .hero-small-slider {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
}
.pricing-wrap .hero-small-slider .small-thumb {
  max-width: 148px;
  height: 280px;
  border-radius: 20px;
  transition: all 0.4s ease-in-out;
}
.pricing-wrap .hero-small-slider .small-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}
.pricing-wrap .hero-small-slider .small-thumb.active {
  max-width: 307px;
}

/* Brand carousel: align its left edge with the header logo's left margin. */
.brand-section .brand-slider { margin-left: 40px; }

/* Hero heading: thin/light strokes, keep the italic serif span at normal weight */
.hero-1 .hero-content h1,
.hero-1 .hero-content h1 .char,
.hero-1 .hero-content h1 .word { font-weight: 200 !important; }
.hero-1 .hero-content h1 span,
.hero-1 .hero-content h1 span .char { font-weight: 400 !important; }

/* Footer: give the content breathing room from the card's left/right edges */
.footer-widget-wrapper-5 { padding-left: 48px; padding-right: 48px; }
.footer-area-3 .footer-bottom-5 { padding-left: 48px; padding-right: 48px; }
@media (max-width: 991px) {
  .footer-widget-wrapper-5 { padding-left: 22px; padding-right: 22px; }
  .footer-area-3 .footer-bottom-5 { padding-left: 22px; padding-right: 22px; }
}

/* Restore two CTA buttons that WOW.js left visibility:hidden */
.pricing-content-one .theme-btn-main,
.lets-talk-content .theme-btn-main { visibility: visible !important; }

/* Hero: ~20% taller, content pushed down with it.
   Bounded to true desktop. Unscoped it also hit phones and every foldable
   state - a 330px dead zone above a 370px-tall Flip cover - and its
   !important beat the theme's own responsive ladder. Below this the ladder
   and the FOLDABLE DEVICES tiers govern. */
@media (min-width: 1200px) and (min-height: 700px) {
  .hero-1 { padding-top: 330px !important; padding-bottom: 100px !important; }
}

/* lets-talk band: decent height above the text and below the button */
.lets-talk-section { padding-top: 70px !important; padding-bottom: 70px !important; }

/* Footer contact list: phone / email / address / map — clean, icon-aligned */
/* margin-top was 8px because the newsletter form used to sit between this list
   and the heading and supplied the gap. The form is gone (no newsletter is
   sent), so the list now follows the heading directly and needs its own space. */
.footer-contact-list { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.footer-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #101010;
  font-size: 15px;
  line-height: 1.55;
}
.footer-contact-list li i {
  color: var(--theme);
  font-size: 14px;
  width: 18px;
  margin-top: 4px;
  flex-shrink: 0;
  text-align: center;
}
.footer-contact-list li a { color: #101010; transition: color .2s ease; }
.footer-contact-list li a:hover { color: var(--theme); }

/* Legal pages (privacy / terms): clean readable long-form content */
.legal-content { max-width: 900px; margin: 0 auto; }
.legal-content > p:first-child { font-size: 17px; color: #3a3f4a; }
.legal-content h2 { font-size: 26px; color: #101010; margin: 40px 0 14px; font-weight: 500 !important; }
.legal-content h3 { font-size: 19px; color: #183057; margin: 26px 0 10px; font-weight: 500 !important; }
.legal-content p { color: #555; font-size: 16px; line-height: 1.75; margin: 0 0 14px; }
.legal-content ul { margin: 0 0 18px; padding-left: 22px; list-style: disc; }
.legal-content li { color: #555; font-size: 16px; line-height: 1.7; margin-bottom: 8px; }
.legal-content a { color: #183057; text-decoration: underline; }
.legal-content strong { color: #101010; font-weight: 500; }

/* Footer contact list: force left alignment */
.footer-widget-wrapper-5 .footer-left-item .footer-contact-list { text-align: left !important; align-items: flex-start !important; }
.footer-left-item .footer-contact-list li { justify-content: flex-start; text-align: left; }

/* Footer social icons: orange by default, white on hover */
.footer-widget-wrapper-5 .footer-right-item .social-icon a {
  color: var(--theme) !important;
  border-color: rgba(255, 71, 28, 0.35) !important;
  background-color: transparent !important;
  transition: color .25s ease, background-color .25s ease, border-color .25s ease;
}
.footer-widget-wrapper-5 .footer-right-item .social-icon a:hover {
  color: #ffffff !important;
  background-color: var(--theme) !important;
  border-color: var(--theme) !important;
}

/* ============================================================
   Homepage hero 3D camera (three.js iframe, cam3d/)
   ============================================================ */
.hero-1 { position: relative; overflow: visible; }
/* PINNED mode (>=780px: desktop and both unfolded-foldable orientations).
   The wrap lives outside #smooth-content, so position:fixed pins it to the
   viewport while the hero scrolls past underneath. */
.wt-cam-wrap {
  position: fixed;
  top: 0;
  right: 0;
  width: 52%;
  height: 100vh;
  height: 100dvh;          /* re-resolves on fold and on URL-bar collapse */
  /* One BELOW the sticky header (z 99999) so the model passes behind the nav
     bar as it travels up and off the page, rather than sliding over the top of
     it. This was 100000 (above the header) to stop the model "vanishing
     mid-animation" back when it froze at the dock line and stayed on screen —
     now that it deliberately scrolls away with the band, disappearing behind
     the header is the intended exit. Still far above page content, and still
     below the search overlay and preloader (both 999999). The wrap is
     pointer-events:none either way, so the nav stays fully clickable. */
  z-index: 99998;
  pointer-events: none;    /* page scroll/clicks pass through */
  will-change: transform, opacity;
}
.wt-cam-wrap #wt-cam {
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  display: block;
}

/* FLOW mode (<780px: cover screens and clamshells). The bridge moves the
   wrap into .hero-right-items, which sits directly below the hero copy once
   the columns collapse. Offset right and pulled up slightly so the model runs
   alongside the headline rather than reading as a separate stacked block. */
.wt-cam-wrap.wt-cam-flow {
  position: static;
  width: 78%;
  max-width: 420px;
  height: 46dvh;
  min-height: 240px;
  margin: -28px 0 0 auto;   /* margin-left:auto = hangs to the right */
  transform: translateX(6%);
  z-index: 1;
}
/* On the shortest screens (Flip cover square, Flip opened sideways) there is
   no room to overlap, and a tall model would push the page out on its own. */
@media (max-height: 520px) {
  .wt-cam-wrap.wt-cam-flow {
    height: 200px;
    min-height: 0;
    margin-top: 0;
    width: 52%;
  }
}

/* Intro reveal: once the preloader marks #page.visible, slide the header down,
   the hero copy in from the left, and the camera in from the right. `backwards`
   fill applies the start frame during the delay and leaves NO lingering transform
   afterwards (so the sticky header and the JS-driven camera wrap stay unaffected). */
@keyframes wtIntroDown  { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } }
@keyframes wtIntroLeft  { from { opacity: 0; transform: translateX(-60px); }  to { opacity: 1; transform: translateX(0); } }
@keyframes wtIntroRight { from { opacity: 0; transform: translateX(90px); }   to { opacity: 1; transform: translateX(0); } }
#page.visible .header-section        { animation: wtIntroDown  0.9s cubic-bezier(0.22,1,0.36,1) 0.10s backwards; }
#page.visible .hero-1 .hero-content  { animation: wtIntroLeft  1.1s cubic-bezier(0.22,1,0.36,1) 0.35s backwards; }
.wt-cam-wrap #wt-cam.wt-cam-enter    { animation: wtIntroRight 1.2s cubic-bezier(0.22,1,0.36,1) 0.55s backwards; }

/* ============================================================
   Walkthru UI refinements — round 3 (contact page + homepage)
   ============================================================ */

/* --- Contact cards: equal heights + pill buttons, white text --- */
.contac-us-wrapper .row.g-4 > [class*="col-"] { display: flex; }
.contact-us-card-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.contact-us-card-item .contact-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.contact-us-card-item .contact-content .thems-btn {
  margin-top: auto;              /* button bottoms align across cards */
  border-radius: 999px;
  color: #fff !important;
}
.contact-us-card-item .contact-content .thems-btn:hover {
  background-color: #183057;     /* stay legible, text stays white */
  color: #fff !important;
}
/* spacing so content above the pinned button breathes */
.contact-us-card-item .contact-content h3:last-of-type { margin-bottom: 20px; }

/* --- Contact form + map: map grows to the exact height of the form box --- */
@media (min-width: 992px) {
  .contact-map-wrapper .row.g-4 > [class*="col-"] { display: flex; }
  .contact-map-wrapper .contact-map,
  .contact-map-wrapper .contact-from-box { width: 100%; }
  .contact-map-wrapper .contact-from-box { margin-left: 0; }
  /* The map column stretches to the row's height (the taller form box), then an
     absolutely-positioned iframe fills it exactly. A plain `height:100%` on the
     flex-child iframe resolved to 0 here and fell back to its 600px floor, so the
     map sat ~220px shorter than the form. Absolute fill against a stretched,
     positioned parent is the same reliable pattern the tour frame uses.
     Below 992px the columns stack and the explicit heights above (550/450/350px)
     drive the map instead. */
  .contact-map-wrapper .contact-map { position: relative; align-self: stretch; }
  .contact-map-wrapper .contact-map iframe {
    position: absolute;
    inset: 0;
    height: 100%;
    min-height: 0;
  }
}

/* pill inputs, dropdown and button in the form */
.contact-map-wrapper .contact-from-box .form-clt input { border-radius: 999px; }
.contact-map-wrapper .contact-from-box .form-clt textarea { border-radius: 24px; }
.contact-map-wrapper .contact-from-box .form-clt .form .single-select { border-radius: 999px; }
.contact-map-wrapper .contact-from-box .form-clt .form .single-select .list { border-radius: 20px; overflow: hidden; }
.contact-map-wrapper .contact-from-box .thems-btn {
  border-radius: 999px;
  color: #fff !important;
}
.contact-map-wrapper .contact-from-box .thems-btn:hover {
  background-color: #183057;
  color: #fff !important;
}

/* --- Testimonials: equal card heights + navy/grey scheme --- */
.client-testimonial__warpper { align-items: stretch; }
.client-testimonial__item { height: 100%; }
.testimonial-box-style-1 {
  background-color: #EAECF0;     /* was cream #FBF9EF */
  border-color: #D7DBE2;
}
.testimonial-box-style-1.style-2 {
  background-color: #183057;     /* was black #101010 */
}

/* --- Left-aligned section titles (Project Showcase / From our news) --- */
.project-section .section-title.work-title {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
  justify-content: flex-start;
}
.project-section .section-title.work-title .sub-title { justify-content: flex-start; }
.news-section .section-title-area .section-title {
  text-align: left;
  margin-left: 0;
  margin-right: auto;
}

/* --- Footer newsletter heading: pure white --- */
.footer-widget-wrapper-5 .footer-left-item .split-title,
.footer-widget-wrapper-5 .footer-left-item .split-title span,
.footer-widget-wrapper-5 .footer-left-item .split-title .word,
.footer-widget-wrapper-5 .footer-left-item .split-title .char {
  color: #ffffff !important;
}

/* News section: put the "Insights / From our news" title on the LEFT,
   text+button block on the right (markup order is reversed) */
.news-section .section-title-area { flex-direction: row-reverse; }
.news-section .section-title-area .text-items { text-align: right; }

/* Service slider (service-section-3): every card matches the tallest one */
.service-slider-3 .swiper-wrapper { align-items: stretch; }
.service-slider-3 .swiper-slide { height: auto; }
.service-slider-3 .swiper-slide .service-box-items-3 { height: 100%; }

/* About section image: rounded corners */
.about-wrapper .about-image > img { border-radius: 20px; }

/* News grid: push the "Read More" button to the right of each card */
.news-section-5 .news-box-items-2 .content .news-btn { display: flex; justify-content: flex-end; }

/* News grid: keep chips/icons white on their coloured (orange / dark) backgrounds
   even under the light theme (which otherwise darkens links) */
.news-box-items-2 .content ul li a,               /* category pill (orange) */
.news-box-items-2 .content .news-btn i,           /* read-more arrow (orange circle) */
.page-nav-wrap ul li .page-numbers,               /* pagination number (dark/orange circle) */
.page-nav-wrap ul li .page-numbers i { color: #ffffff !important; }

/* Off-canvas menu: white background, elements recoloured for a light surface */
.offcanvas-menu { background-color: #ffffff !important; }
.offcanvas-menu .logo img { filter: brightness(0); }   /* white logo -> black on white */
.offcanvas-menu :is(.action-title, .info-title) { color: #101010 !important; }
.offcanvas-menu :is(.sub-info, .follow-title) { color: #797979 !important; }
.offcanvas-menu :is(.news-btn, .contact-details p, .contact-details a, .social-icon a) { color: #101010 !important; }
.offcanvas-menu .news-btn .text-hover { color: var(--theme) !important; }
.offcanvas-menu .social-icon a:hover { color: var(--theme) !important; }

/* Client logos: constrain to fit neatly inside the 100px brand box */
.brand-box-1 .brand-img-1 img {
  max-height: 74px;
  max-width: 216px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* "Project Showcase" heading: match the service "Visual solutions…" heading font
   (same family/weight/italic-serif already — only the size differs: 170px -> 65px).
   Animations (jump-anim / style-font reveal) are untouched. */
.project-section .section-title.work-title h2.work-title { font-size: 65px; line-height: 1.17; }
.project-section .work-title .last { margin-left: 14px; }
@media (max-width: 991px) {
  .project-section .section-title.work-title h2.work-title { font-size: 48px; }
  .project-section .work-title .last { margin-left: 10px; }
}

/* Restore the vertical gap the smaller breadcrumb heading gave back, so the first
   content section on inner pages sits where it did before. */
.breadcrumb-wrapper .page-heading { padding-bottom: 80px; }

/* Consistent inner-page breadcrumb heading: same section-title structure on every
   page, dropped ~3 lines so it sits comfortably below the sticky header. */
.breadcrumb-wrapper .page-heading .section-title { margin-top: 72px; }
@media (max-width: 991px) { .breadcrumb-wrapper .page-heading .section-title { margin-top: 40px; } }

/* ------------------------------------------------------------
   Inner-page client-logo marquee (project / service / about).
   Pure CSS loop — immune to the Swiper mis-measure inside the
   smooth-scrolled content. Homepage keeps its own Swiper band.
   Track holds the logo list twice; -50% translate = seamless loop. */
.wt-brand-marquee { overflow: hidden; }
.wt-brand-track {
  display: flex;
  gap: 24px;
  width: max-content;
  padding-right: 24px;            /* even spacing across the wrap point */
  animation: wt-brand-scroll 35s linear infinite;
  will-change: transform;
}
@keyframes wt-brand-scroll { to { transform: translateX(-50%); } }
.wt-brand-marquee:hover .wt-brand-track { animation-play-state: paused; }
.wt-brand-marquee .brand-box-1 { flex: 0 0 auto; width: 196px; }
.wt-brand-marquee .brand-img-1 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
/* the box has a single logo span here — neutralise the homepage hover-flip rule
   (.brand-img-1:last-child img { opacity:0; translateY }) that would hide it */
.wt-brand-marquee .brand-box-1 .brand-img-1:last-child img {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------
   Portfolio hub — category cover tiles (project.php)
   ------------------------------------------------------------ */
.wt-ph-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1199px) { .wt-ph-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .wt-ph-grid { grid-template-columns: 1fr; gap: 14px; } }

.wt-ph-tile {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  isolation: isolate;
}
.wt-ph-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.wt-ph-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 18, 32, 0) 42%, rgba(12, 18, 32, 0.72) 100%);
  transition: background 0.4s ease;
  pointer-events: none;
}
.wt-ph-info {
  position: absolute;
  left: 22px;
  right: 70px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #fff;
}
.wt-ph-name {
  font-family: "Urbanist", sans-serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.wt-ph-meta {
  font-size: 13.5px;
  font-weight: 500;
  opacity: 0.82;
}
.wt-ph-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: rgba(24, 48, 87, 0.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.wt-ph-arrow {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--theme);
  color: #fff;
  font-size: 15px;
  opacity: 0;
  transform: translateY(8px) scale(0.9);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.wt-ph-tile:hover img { transform: scale(1.05); }
.wt-ph-tile:hover .wt-ph-shade { background: linear-gradient(180deg, rgba(12, 18, 32, 0.05) 30%, rgba(12, 18, 32, 0.82) 100%); }
.wt-ph-tile:hover .wt-ph-arrow { opacity: 1; transform: translateY(0) scale(1); }
.wt-ph-tile:focus-visible { outline: 2px solid #183057; outline-offset: 3px; }
/* the light theme darkens spans inside #smooth-content — keep tile text/badge
   white so it reads on the dark cover gradient */
body.wt-light #smooth-content .wt-ph-name,
body.wt-light #smooth-content .wt-ph-badge { color: #ffffff !important; }
body.wt-light #smooth-content .wt-ph-meta { color: rgba(255, 255, 255, 0.85) !important; }
.wt-ph-name { text-shadow: 0 1px 12px rgba(12, 18, 32, 0.45); }

/* category page: back pill + blurb + explore footer */
.wt-cat-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  margin-bottom: 18px;
  border: 1px solid rgba(16, 16, 16, 0.14);
  border-radius: 999px;
  font-family: "Urbanist", sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: #101010;
  transition: border-color 0.25s ease, color 0.25s ease, gap 0.25s ease;
}
.wt-cat-back:hover { border-color: #183057; color: #183057; }
.wt-cat-blurb {
  margin-top: 14px;
  max-width: 560px;
  font-size: 16.5px;
  color: #555;
}
.wt-cat-count {
  display: inline-block;
  margin-left: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: #EAECF0;
  color: #183057;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.wt-cat-nav-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 767px) { .wt-cat-nav-grid { grid-template-columns: 1fr; gap: 14px; } }
.wt-ph-tile-sm { aspect-ratio: 21 / 8; }
.wt-ph-tile-sm .wt-ph-name { font-size: 19px; }

/* ------------------------------------------------------------
   Interactive tour cards + fullscreen viewer overlay
   ------------------------------------------------------------ */
.wt-tv-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 1199px) { .wt-tv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px)  { .wt-tv-grid { grid-template-columns: 1fr; gap: 14px; } }

.wt-tv-card {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(16, 16, 16, 0.08);
  background: #fff;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.wt-tv-card:hover { box-shadow: 0 18px 44px rgba(12, 18, 32, 0.12); transform: translateY(-3px); }
.wt-tv-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.wt-tv-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.wt-tv-card:hover .wt-tv-media img { transform: scale(1.05); }
.wt-tv-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.92);
  color: #183057;
  font-size: 17px;
  box-shadow: 0 8px 26px rgba(12, 18, 32, 0.35);
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.wt-tv-card:hover .wt-tv-play { background: var(--theme); color: #fff; transform: scale(1.07); }
.wt-tv-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px 20px;
}
.wt-tv-name {
  font-family: "Urbanist", sans-serif;
  font-size: 17.5px;
  font-weight: 600;
  color: #101010;
  line-height: 1.3;
}
.wt-tv-note {
  font-size: 13.5px;
  font-weight: 600;
  color: #183057;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wt-tv-note i { font-size: 11px; }

/* Portfolio tour category pages: mobile Grid/List toggle, mirroring the Services
   page. Base .wt-tv-grid collapses to one full-width column at <=767px, which
   stacked huge cards; the toggle gives a compact 2-up grid and a thumbnail list. */
.wt-tv-toolbar { display: none; }
@media (max-width: 767px) {
    .wt-tv-toolbar { display: flex; justify-content: flex-end; margin-bottom: 16px; }
    .wt-tv-viewtoggle { display: inline-flex; border: 1px solid rgba(16, 24, 40, .12); border-radius: 999px; padding: 3px; background: #fff; gap: 2px; }
    .wt-tv-vbtn { -webkit-appearance: none; appearance: none; border: 0; background: transparent; border-radius: 999px; padding: 8px 16px; font-family: "Urbanist", sans-serif; font-size: 13.5px; font-weight: 600; color: #565656; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; transition: background .25s ease, color .25s ease; }
    .wt-tv-vbtn.is-active { background: #183057; color: #fff; }
    .wt-tv-vbtn:focus-visible { outline: 2px solid #183057; outline-offset: 2px; }

    /* Grid view: 2-up, tighter type so a phone shows two per row cleanly. */
    .wt-tv-grid[data-view="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .wt-tv-grid[data-view="grid"] .wt-tv-body { padding: 12px 12px 14px; gap: 4px; }
    .wt-tv-grid[data-view="grid"] .wt-tv-name { font-size: 15px; }
    .wt-tv-grid[data-view="grid"] .wt-tv-note { font-size: 12px; }
    .wt-tv-grid[data-view="grid"] .wt-tv-play { width: 44px; height: 44px; font-size: 14px; }

    /* List view: 96px thumbnail + text row, 2-line clamped name (like Services). */
    .wt-tv-grid[data-view="list"] { grid-template-columns: 1fr; gap: 12px; }
    .wt-tv-grid[data-view="list"] .wt-tv-card {
        display: grid;
        grid-template-columns: 96px 1fr;
        align-items: center;
        gap: 14px;
        padding: 9px;
    }
    .wt-tv-grid[data-view="list"] .wt-tv-media { aspect-ratio: 1 / 1; width: 96px; border-radius: 10px; }
    .wt-tv-grid[data-view="list"] .wt-tv-play { width: 34px; height: 34px; font-size: 12px; }
    .wt-tv-grid[data-view="list"] .wt-tv-body { padding: 0; gap: 3px; }
    .wt-tv-grid[data-view="list"] .wt-tv-name {
        font-size: 16px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .wt-tv-grid[data-view="list"] .wt-tv-note { font-size: 12.5px; }
    .wt-tv-grid[data-view="list"] .wt-tv-card:hover .wt-tv-media img { transform: none; }
}

/* fullscreen viewer */
.wt-tv-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #0c1220;
  display: none;
}
.wt-tv-overlay.is-open { display: block; }
.wt-tv-overlay iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* The chrome was a single flex row pinned to the top, which put our controls
   straight on top of the tour provider's own UI: tourmkr opens its menu panel
   and its close button in that same strip. It is now a full-bleed positioning
   layer, with the two controls placed independently and clear of it. */
.wt-tv-chrome {
  position: absolute;
  inset: 14px;
  z-index: 3;
  pointer-events: none;
}
/* Lower-left corner. env() keeps it above the iPhone home indicator, and the
   max-width stops a long tour name running across the middle of the frame. */
.wt-tv-title {
  position: absolute;
  left: 0;
  bottom: calc(0px + env(safe-area-inset-bottom, 0px));
  pointer-events: auto;
  max-width: min(70%, 460px);
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(12, 18, 32, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-family: "Urbanist", sans-serif;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Lower-right corner, on the same baseline as the title pill so the two
   controls read as one balanced row across the bottom of the frame. This also
   keeps the whole top strip free for the tour provider's own UI, which is what
   the old top:14px position collided with. Same safe-area inset as the title. */
.wt-tv-actions {
  position: absolute;
  right: 0;
  bottom: calc(0px + env(safe-area-inset-bottom, 0px));
  pointer-events: auto;
  display: flex;
  gap: 8px;
}
.wt-tv-actions a,
.wt-tv-actions button {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(12, 18, 32, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.25s ease;
}
.wt-tv-actions a:hover,
.wt-tv-actions button:hover { background: var(--theme); }
.wt-tv-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.wt-tv-loading i {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--theme);
  border-radius: 50%;
  animation: wt-tv-spin 0.9s linear infinite;
}
@keyframes wt-tv-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------
   Custom gallery lightbox (Swiper): main stage + thumbnail filmstrip
   ------------------------------------------------------------ */
.wt-lb {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #0c1220;
  display: none;
  flex-direction: column;
}
.wt-lb.is-open { display: flex; }
.wt-lb-bar {
  flex: 0 0 auto;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.wt-lb-count {
  font-family: "Urbanist", sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
  font-variant-numeric: tabular-nums;
}
.wt-lb-close {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  transition: background 0.25s ease;
}
.wt-lb-close:hover { background: var(--theme); }
.wt-lb-main {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}
.wt-lb-main .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.wt-lb-main .swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wt-lb-main img {
  max-width: 90%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.wt-lb-prev,
.wt-lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.25s ease, opacity 0.25s ease;
}
.wt-lb-prev { left: 18px; }
.wt-lb-next { right: 18px; }
.wt-lb-prev:hover,
.wt-lb-next:hover { background: var(--theme); }
.wt-lb-prev.swiper-button-disabled,
.wt-lb-next.swiper-button-disabled { opacity: 0.3; pointer-events: none; }
.wt-lb-thumbs {
  flex: 0 0 auto;
  height: 86px;
  padding: 13px 16px;
  box-sizing: border-box;
  width: 100%;
}
.wt-lb-thumbs .swiper-slide {
  width: 96px;
  height: 60px;
  opacity: 0.42;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: opacity 0.25s ease, border-color 0.25s ease;
}
.wt-lb-thumbs .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wt-lb-thumbs .swiper-slide-thumb-active { opacity: 1; border-color: var(--theme); }
@media (max-width: 767px) {
  .wt-lb-prev, .wt-lb-next { width: 40px; height: 40px; font-size: 15px; }
  .wt-lb-prev { left: 8px; } .wt-lb-next { right: 8px; }
  .wt-lb-thumbs { height: 74px; padding: 10px 12px; }
  .wt-lb-thumbs .swiper-slide { width: 76px; height: 50px; }
  .wt-lb-main img { max-width: 96%; }
}

/* masonry via CSS grid + JS row-spans: items are placed once and never
   re-balance (unlike CSS `columns`), so no jumping as lazy images stream in.
   grid-auto-rows is a small unit; each item spans N rows for its height. */
/* JS absolute-positioned masonry: each item placed into the shortest column at
   an exact px position — guarantees equal gaps and never overlaps, any ratio. */
/* Portfolio photo gallery: a uniform captioned grid with a Grid/List toggle,
   matching the tour category pages. Replaces the old absolute JS masonry, whose
   mobile column gap was literally 0 (images looked attached) and which had no
   room for a caption. */
.wt-pf-toolbar { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.wt-pf-viewtoggle { display: inline-flex; border: 1px solid rgba(16, 24, 40, .12); border-radius: 999px; padding: 3px; background: #fff; gap: 2px; }
.wt-pf-vbtn { -webkit-appearance: none; appearance: none; border: 0; background: transparent; border-radius: 999px; padding: 8px 16px; font-family: "Urbanist", sans-serif; font-size: 13.5px; font-weight: 600; color: #565656; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; transition: background .25s ease, color .25s ease; }
.wt-pf-vbtn.is-active { background: #183057; color: #fff; }
.wt-pf-vbtn:focus-visible { outline: 2px solid #183057; outline-offset: 2px; }

.wt-pf-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 991px) { .wt-pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 575px) { .wt-pf-grid { gap: 14px; } }

.wt-pf-item { margin: 0; display: flex; flex-direction: column; }
.wt-pf-item.is-hidden { display: none; }

.wt-pf-link {
  display: block; position: relative; overflow: hidden; border-radius: 14px;
  aspect-ratio: 4 / 3; cursor: pointer; background: #f2f3f5;   /* quiet placeholder */
}
.wt-pf-link img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.wt-pf-link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 21, 36, 0) 52%, rgba(13, 21, 36, 0.52) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.wt-pf-zoom {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.wt-pf-link:hover img { transform: scale(1.04); }
.wt-pf-link:hover::after,
.wt-pf-link:hover .wt-pf-zoom { opacity: 1; transform: none; }

/* Caption below the image; single line + ellipsis so ragged alt text can't break
   the grid rhythm. */
.wt-pf-cap {
  margin-top: 10px;
  font-family: "Urbanist", sans-serif;
  font-size: 14px; font-weight: 500; color: #4a5160; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* List view: thumbnail + caption rows, like the tour list. */
.wt-pf-grid[data-view="list"] { grid-template-columns: 1fr; gap: 12px; }
.wt-pf-grid[data-view="list"] .wt-pf-item {
  flex-direction: row; align-items: center; gap: 16px;
  border: 1px solid rgba(16, 24, 40, .10); border-radius: 14px; padding: 10px; background: #fff;
}
.wt-pf-grid[data-view="list"] .wt-pf-link { flex: 0 0 120px; width: 120px; aspect-ratio: 1 / 1; border-radius: 10px; }
.wt-pf-grid[data-view="list"] .wt-pf-cap {
  margin-top: 0; white-space: normal; font-size: 15.5px; color: #101010;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 575px) {
  .wt-pf-grid[data-view="list"] .wt-pf-link { flex-basis: 92px; width: 92px; }
}

@media (hover: none) {
  /* touch: keep tiles clean; the lightbox is the interaction */
  .wt-pf-link::after, .wt-pf-zoom { display: none; }
}

/* GLightbox: quiet, minimal chrome tuned to the site */
.glightbox-clean .gslide-media { box-shadow: none; border-radius: 6px; }
.glightbox-clean .gslide-image img { border-radius: 6px; }
.glightbox-clean .gprev,
.glightbox-clean .gnext {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.glightbox-clean .gprev { left: 24px; }
.glightbox-clean .gnext { right: 24px; }
.glightbox-clean .gprev:hover,
.glightbox-clean .gnext:hover { background: var(--theme); border-color: var(--theme); }
.glightbox-clean .gprev svg, .glightbox-clean .gnext svg { width: 18px; }
.glightbox-clean .gprev path, .glightbox-clean .gnext path { fill: #fff; }
.glightbox-clean .gclose {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  top: 20px;
  right: 20px;
  opacity: 1;
}
.glightbox-clean .gclose:hover { background: var(--theme); border-color: var(--theme); }
.glightbox-clean .gclose svg { width: 16px; }
.glightbox-clean .gclose path { fill: #fff; }
.glightbox-clean .gslide-title {
  font-family: "Urbanist", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 6px;
}
.glightbox-clean .gslide-description { background: transparent; }
.glightbox-clean .gdesc-inner { padding: 14px 0 0; text-align: center; }

/* Contact cards: minimal icon header instead of stock photos */
.contact-us-card-item .contact-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #EAECF0;
  margin-bottom: 22px;
}
.contact-us-card-item .contact-icon i { font-size: 24px; color: #183057; }

/* Service cards: drop the decorative corner shape (renders as an odd artifact) */
.service-box-items-3 .shape-1 { display: none !important; }

/* Tour cards: the circle is white at rest and orange on hover, so the glyph has
   to invert with it. This rule used to force white in BOTH states, which made a
   white arrow on a white circle, i.e. an apparently empty button until hover. */
.wt-tv-play i,
body.wt-light #smooth-content .wt-tv-play i { color: var(--theme) !important; }
.wt-tv-card:hover .wt-tv-play i,
body.wt-light #smooth-content .wt-tv-card:hover .wt-tv-play i { color: #ffffff !important; }

/* Contact page: CRM form embed fills the form box cleanly */
.contact-from-box iframe {
  display: block;
  width: 100%;
  height: 700px;               /* matches the map column height */
  border: 0;
  border-radius: 12px;
  background: #ffffff;
}
@media (max-width: 767px) { .contact-from-box iframe { height: 680px; } }

/* ============================================================
   Services — category / subcategory tiles + content pages
   (own design language, does not touch existing service styles)
   ============================================================ */
.wt-sc-section .section-title.mb-40 { margin-bottom: 40px; }
.wt-sc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
@media (max-width: 1199px) { .wt-sc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 575px)  { .wt-sc-grid { grid-template-columns: 1fr; } }

.wt-sc-tile {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #eef0f3;
  isolation: isolate;
}
.wt-sc-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.wt-sc-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 18, 32, 0) 42%, rgba(12, 18, 32, 0.78) 100%);
  transition: background 0.4s ease;
}
.wt-sc-info {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.wt-sc-name {
  font-family: "Urbanist", sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 1px 12px rgba(12, 18, 32, 0.45);
}
.wt-sc-meta { font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, 0.82); }
.wt-sc-arrow {
  position: absolute;
  right: 18px;
  top: 18px;
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--theme);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  opacity: 0;
  transform: translateY(-6px) scale(0.85);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.wt-sc-tile:hover img { transform: scale(1.06); }
.wt-sc-tile:hover .wt-sc-shade { background: linear-gradient(180deg, rgba(12, 18, 32, 0.05) 28%, rgba(12, 18, 32, 0.85) 100%); }
.wt-sc-tile:hover .wt-sc-arrow { opacity: 1; transform: translateY(0) scale(1); }
.wt-sc-tile:focus-visible { outline: 2px solid #183057; outline-offset: 3px; }
body.wt-light #smooth-content .wt-sc-name { color: #fff !important; }
body.wt-light #smooth-content .wt-sc-meta { color: rgba(255, 255, 255, 0.82) !important; }

/* subcategory content page */
.wt-scp-lead { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; margin-bottom: 46px; }
@media (max-width: 991px) { .wt-scp-lead { grid-template-columns: 1fr; gap: 26px; } }
.wt-scp-lead .wt-scp-photo { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 3; background: #eef0f3; }
.wt-scp-lead .wt-scp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wt-scp-copy h2 { font-size: 40px; font-weight: 300; line-height: 1.12; margin-bottom: 18px; }
.wt-scp-copy h2 .style-font { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; }
.wt-scp-copy p { color: #555; margin-bottom: 16px; }
.wt-scp-copy .wt-scp-list { list-style: none; padding: 0; margin: 20px 0 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.wt-scp-copy .wt-scp-list li { position: relative; padding-left: 24px; color: #333; font-weight: 500; }
.wt-scp-copy .wt-scp-list li::before { content: "\2192"; position: absolute; left: 0; color: var(--theme); font-weight: 700; }
@media (max-width: 575px) { .wt-scp-copy .wt-scp-list { grid-template-columns: 1fr; } .wt-scp-copy h2 { font-size: 30px; } }
.wt-scp-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 575px) { .wt-scp-gallery { grid-template-columns: 1fr; } }
.wt-scp-gallery figure { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 3 / 2; background: #eef0f3; }
.wt-scp-gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.wt-scp-gallery figure:hover img { transform: scale(1.05); }
.wt-scp-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 50px; flex-wrap: wrap; }
.wt-scp-nav a { font-family: "Urbanist", sans-serif; font-weight: 600; color: #101010; display: inline-flex; align-items: center; gap: 8px; }
.wt-scp-nav a:hover { color: var(--theme); }
.wt-scp-back { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font-weight: 600; color: #667; }
.wt-scp-back:hover { color: var(--theme); }

/* Homepage project-showcase: make the whole thumb image link to the portfolio */
.project-box-items .thumb { position: relative; }
.project-box-items .thumb .wt-thumb-link { position: absolute; inset: 0; z-index: 6; }

/* Testimonial inline chip image — 80% smaller than its natural inline size */
.section-title .testi-iimg img.img-custom-anim-left { height: 1em; width: auto; max-width: none; vertical-align: -0.08em; }

/* Footer — thin, minimalist type */
.footer-widget-wrapper-5 .footer-left-item h2.split-title,
.footer-widget-wrapper-5 .footer-left-item h2.split-title span { font-weight: 300 !important; letter-spacing: -1px; }
.footer-contact-list li,
.footer-contact-list li a,
.footer-contact-list li p { font-weight: 300 !important; }

/* Category / breadcrumb description — readable, thin, clearly visible */
.wt-cat-blurb {
  font-size: 20px;
  line-height: 1.5;
  font-weight: 300;
  color: #2b2b2b;
  max-width: 640px;
}
@media (max-width: 767px) { .wt-cat-blurb { font-size: 17px; } }

/* About hero: a full intro paragraph, not a one-line blurb. The 640px cap left
   ~415px of dead space on the right against a 10px gap on the left, which read
   as badly unbalanced. Dropping the cap lets it wrap to the same right edge as
   the h1 above it, so both margins match the container. Left-aligned as before. */
/* Drop the intro paragraph one line below the heading on the About page only
   (base margin-top is 14px; +30px ≈ one 20px/1.5 line). Scoped to wt-about so the
   shared breadcrumb blurb elsewhere keeps its tight spacing. */
body.wt-about .breadcrumb-wrapper .wt-cat-blurb { max-width: none; margin-top: 44px; }

/* Footer left column: compact heading + signup so the contact list sits in the
   upper half, with the client-portal login occupying the lower half. */
.footer-widget-wrapper-5 .footer-left-item h2.split-title {
  font-size: 30px !important;
  letter-spacing: -0.6px;
  max-width: 460px;
  line-height: 1.25;
}
@media (max-width: 767px) { .footer-widget-wrapper-5 .footer-left-item h2.split-title { font-size: 26px !important; } }
.footer-widget-wrapper-5 .footer-left-item form { margin-top: 16px; max-width: 430px; }
.footer-widget-wrapper-5 .footer-left-item form input { padding: 15px 24px; padding-right: 60px; font-size: 15px; }
.footer-widget-wrapper-5 .footer-left-item form .email-btn {
  width: 40px; height: 40px; line-height: 40px; top: 5px; right: 5px; bottom: 5px; font-size: 14px;
}
.footer-widget-wrapper-5 .footer-left-item .footer-contact-list { margin-top: 18px; gap: 9px; }

/* client portal block */
.wt-client-login {
  margin-top: 30px;
  max-width: 430px;
}
/* desktop: line the block's top up with the "Company / Services" link columns
   in the opposite footer column */
@media (min-width: 992px) {
  .wt-client-login { margin-top: 142px; }
}
.wt-cl-label,
body.wt-light #smooth-content .wt-cl-label {
  display: block;
  font-family: "Urbanist", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #ffffff !important;
  opacity: 0.85;
  margin-bottom: 6px;
}
.wt-client-login p,
body.wt-light #smooth-content .wt-client-login p {
  font-size: 14px;
  font-weight: 300;
  color: #ffffff !important;
  opacity: 0.8;
  margin: 0 0 14px;
}
.wt-cl-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 22px;
  border-radius: 999px;
  border: 1px solid rgba(238, 241, 246, 0.3);
  background: transparent;
  color: #eef1f6 !important;
  font-family: "Urbanist", sans-serif;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.wt-cl-btn i { font-size: 13px; }
.wt-cl-btn:hover { background: var(--theme); border-color: var(--theme); color: #fff !important; }

/* Brand/clients band (inner pages): the base rule paints the title white, which is
   invisible on the light theme — restore a readable heading, keep the orange pill's
   text white, and add breathing room for the eyebrow + supporting line. */
body.wt-light #smooth-content .brand-section .title { color: #101010; }
.brand-section .title { margin-bottom: 16px; }
@media (min-width: 1200px) {
  /* only where the pill background actually renders */
  body.wt-light #smooth-content .brand-section .title span,
  body.wt-light #smooth-content .brand-section .title span .font-style,
  .brand-section .title span { color: #ffffff !important; }
}
.wt-brand-eyebrow {
  display: block;
  text-align: center;
  font-family: "Urbanist", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--theme);
  margin-bottom: 14px;
}
.wt-brand-sub {
  text-align: center;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.55;
  color: #555;
  max-width: 620px;
  margin: 0 auto 46px;
}
@media (max-width: 767px) {
  .wt-brand-sub { font-size: 15px; margin-bottom: 34px; }
  .wt-brand-eyebrow { margin-bottom: 10px; }
}

/* Clients band: trim the dead space above the footer (was 120px + footer's 60px
   margin). Keep top padding generous, tighten the bottom on every breakpoint. */
.brand-section { padding-bottom: 48px; }
@media (max-width: 1199px) { .brand-section { padding-bottom: 40px; } }
@media (max-width: 991px)  { .brand-section { padding-bottom: 34px; } }

/* ============================================================
   Animation trim: entrance reveals + camera kept, decorative /
   scroll-scrubbed / continuous motion removed.
   ============================================================ */

/* The clip-reveal JS is disabled, and it was the thing that faded the real
   image in (.tp-anim-img starts at opacity:0). Show the image directly and
   drop the now-empty mask shards, or every project thumb would render blank. */
.tp-clip-anim .tp-anim-img { opacity: 1 !important; }
.tp-clip-anim .mask { display: none !important; }

/* Continuous decorative loops (floating boxes, pulsing rings, slow spins).
   Functional spinners are untouched: #preloader, .wt-tv-loading, ring-spin. */
.float-bob-y,
.float-bob-x { animation: none !important; }
.video-btn.ripple::before,
.video-btn.ripple::after { animation: none !important; }
.rotated2 { animation: none !important; }

/* "Ready to showcase your property?" - minimalist lettering.
   Was 200px / uppercase / weight 600 / -6px tracking (shouty display type). */
.lets-talk-section .title {
  font-size: clamp(34px, 5.2vw, 72px) !important;
  font-weight: 300 !important;
  text-transform: none !important;
  letter-spacing: -1.2px !important;
  line-height: 1.14 !important;
  max-width: 16ch;
  margin-inline: auto;
}
.lets-talk-section .title span { font-weight: 400 !important; }

/* Clients band: left-aligned to the container margin (was centred) */
.brand-section .container { text-align: left; }
.brand-section .wt-brand-eyebrow { text-align: left; }
.brand-section .title { text-align: left; }
.brand-section .wt-brand-sub { text-align: left; margin-left: 0; margin-right: 0; }

/* ============================================================
   Areas We Serve (locations hub + detail) — W6
   ============================================================ */
.wt-area-card { display:block; height:100%; padding:28px 26px; border-radius:16px;
    background:#fff; border:1px solid rgba(16,16,16,.08); text-decoration:none;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.wt-area-card:hover { transform:translateY(-4px); box-shadow:0 18px 40px rgba(16,16,16,.10); border-color:rgba(255,71,28,.35); }
.wt-area-card h3 { font-size:20px; font-weight:600; color:#101010; margin:0 0 10px; }
.wt-area-card h3 i { color:#FF471C; margin-right:6px; }
.wt-area-card p { color:#5a5a5a; font-size:14px; line-height:1.6; margin:0 0 14px; }
.wt-area-link { color:#FF471C; font-weight:600; font-size:14px; }
.wt-area-link i { margin-left:4px; }
.wt-area-svc { display:block; padding:12px 16px; border-radius:10px; background:#f6f6f6;
    color:#101010; text-decoration:none; font-weight:500; font-size:14px; transition:background .2s ease, color .2s ease; }
.wt-area-svc:hover { background:#FF471C; color:#fff; }
.wt-area-svc i { color:#FF471C; margin-right:8px; }
.wt-area-svc:hover i { color:#fff; }
.service-sidebar-cta { background:#16233f; color:#fff; border-radius:16px; padding:30px 26px; }
.service-sidebar-cta h3 { color:#fff; font-size:20px; margin:0 0 10px; }
.service-sidebar-cta p { color:rgba(255,255,255,.75); font-size:14px; margin:0 0 18px; }
.service-sidebar-cta .theme-btn-2 { display:inline-flex; align-items:center; gap:8px; background:transparent; border:1px solid rgba(255,255,255,.3); }

/* --------------------------------------------------------------------------
   /locations hub - areas grouped by emirate, as a card grid.

   Was 46 identical pills in one flat list: a wall of repeated text, worst on a
   phone. Two-up on mobile, scaling to four-up on desktop. There is no per-area
   imagery in the project, so the treatment leans on type, a tinted surface and
   the brand arrow rather than inventing stock photography.
   -------------------------------------------------------------------------- */
.wt-loc-group + .wt-loc-group { margin-top: 46px; }
.wt-loc-region {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 26px;
    margin: 0 0 18px;
}
.wt-loc-count {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #7b8598;
}
.wt-loc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (min-width: 576px) { .wt-loc-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (min-width: 992px) { .wt-loc-grid { grid-template-columns: repeat(4, 1fr); } }

.wt-loc-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 62px;                 /* ~53px on screen under the sitewide zoom:.85 */
    padding: 12px 14px;
    border-radius: 12px;
    background: #f4f5f7;
    border: 1px solid transparent;
    transition: background .25s ease, border-color .25s ease, transform .25s cubic-bezier(.22, 1, .36, 1);
}
.wt-loc-card:hover {
    background: #fff;
    border-color: rgba(24, 48, 87, .16);
    transform: translateY(-2px);
}
body.wt-light #smooth-content .wt-loc-card .wt-loc-name,
.wt-loc-card .wt-loc-name {
    font-weight: 600;
    font-size: 15px;
    line-height: 1.3;
    color: #183057;
}
.wt-loc-go {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(24, 48, 87, .08);
    font-size: 11px;
    color: var(--theme, #FF471C);
    transition: background .25s ease, color .25s ease;
}
.wt-loc-card:hover .wt-loc-go { background: var(--theme, #FF471C); color: #fff; }

/* --------------------------------------------------------------------------
   "What we shoot in <area>" - service links as an image grid.

   Replaces 14 identical grey pills stacked vertically, which read as a wall of
   text and was worst on a phone. Two-up on mobile so it is scannable at a
   glance, three-up from tablet. Same tile idiom as the portfolio grid: image,
   shade, label - so it belongs to the site rather than introducing a component.
   -------------------------------------------------------------------------- */
.wt-area-svc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 768px) {
    .wt-area-svc-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
.wt-area-svc-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: #16233f;
    isolation: isolate;
}
.wt-area-svc-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.wt-area-svc-card:hover img { transform: scale(1.06); }
.wt-area-svc-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(12, 18, 32, .88) 0%, rgba(12, 18, 32, .35) 45%, rgba(12, 18, 32, .05) 100%);
}
body.wt-light #smooth-content .wt-area-svc-card .wt-area-svc-name,
.wt-area-svc-card .wt-area-svc-name {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 11px;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.25;
    z-index: 1;
}
@media (min-width: 768px) {
    .wt-area-svc-card .wt-area-svc-name { font-size: 16px; left: 16px; right: 16px; bottom: 14px; }
}

/* --------------------------------------------------------------------------
   Sidebar CTA: legibility on the navy card.

   This card is a dark island inside a light page, and the light theme's global
   rules out-specified its own styles:
     body.wt-light #smooth-content :is(p, span, li, ...)  -> #3a3f4a
     body.wt-light #smooth-content .theme-btn ...         -> #101010
   Measured against the #16233f card that gave 1.48:1 for the paragraph and
   1.22:1 for both buttons - effectively invisible (WCAG AA wants 4.5:1).

   Matched specificity here rather than reaching for !important, so the card
   stays overridable. Primary button takes brand orange so the main action reads
   first; secondary stays outlined.
   -------------------------------------------------------------------------- */
body.wt-light #smooth-content .service-sidebar-cta :is(p, span, li) {
    color: rgba(255, 255, 255, .82);
}
body.wt-light #smooth-content .service-sidebar-cta h3 { color: #fff; }

/* The global light-theme rule is `color: #101010 !important` (main.css:13993),
   so specificity alone cannot win here; !important is matched deliberately and
   scoped to this one card rather than loosened globally.

   Primary is a white fill with navy text, not brand orange: white on #FF471C
   measures 3.76:1, under the 4.5 AA threshold for text this size. White fill
   gives ~13:1 and still reads as the primary action against the navy card. */
.service-sidebar-cta .theme-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;            /* ~44px on screen under the sitewide zoom:.85 */
    padding: 0 20px;
    border-radius: 10px;
    background: #ffffff;
    font-weight: 600;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
body.wt-light #smooth-content .service-sidebar-cta .theme-btn,
body.wt-light #smooth-content .service-sidebar-cta .theme-btn :is(span, .text, i) {
    color: #16233f !important;
}
.service-sidebar-cta .theme-btn:hover { background: #f1f3f7; }

.service-sidebar-cta .theme-btn-2 {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .45);
    margin-top: 10px;
}
body.wt-light #smooth-content .service-sidebar-cta .theme-btn-2,
body.wt-light #smooth-content .service-sidebar-cta .theme-btn-2 :is(span, .text, i) {
    color: #ffffff !important;
}
.service-sidebar-cta .theme-btn-2:hover {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .75);
}

/* ============================================================
   Homepage About: extra top space so the docked 3D camera has
   room to rest above the copy (desktop only — camera is hidden
   on tablet/mobile). Layers on top of the camera scroll shift. — W10
   ============================================================ */


/* ============================================================
   Homepage hero sub-headline (sits under the H1, above the CTAs)
   ============================================================ */
.hero-1 .hero-content .wt-hero-sub {
    font-size: clamp(16px, 1.25vw, 19px);
    line-height: 1.6;
    font-weight: 400;
    color: #4a4f57;
    text-transform: none;
    max-width: 46ch;
    margin: 18px 0 30px;
}
@media (max-width: 767px) {
    .hero-1 .hero-content .wt-hero-sub { font-size: 15.5px; margin: 14px 0 24px; max-width: none; }
}

/* ============================================================
   Services card stack (desktop): the first card parks in the MIDDLE
   of the screen and each following card slides over it, so the cards
   pile up with every earlier card still visible underneath.

   NOTE: position:sticky cannot be used here - the page runs inside
   ScrollSmoother, whose #smooth-wrapper is position:fixed/overflow:hidden
   and moves content by transform, so sticky never triggers. The parking
   is therefore done with GSAP pinning (pinType:"transform") in main.js;
   this block only supplies the stacking context. — W-stack
   ============================================================ */
@media (min-width: 1199px) {
    /* `overflow: hidden` from the theme's `.fix` class would clip the pinned
       cards, so it is opened up for this section only. */
    .service-section-2.fix,
    .service-section-2 > .container { overflow: visible !important; }
    .wt-svc-stack { position: relative; overflow: visible; }
}

/* ============================================================
   WOW.js visibility rescue + footer client-login contrast
   ============================================================ */
/* The accordion <li>s carry `wow fadeInUp`, which sets visibility:hidden until
   WOW reveals them. Inside ScrollSmoother that reveal never fires this far down
   the page, so the whole "How it works" / FAQ accordion stayed invisible.
   Same class of bug as the brand slider fix above. */
.faq-section .accordion.block,
.faq-section .accordion-box > li,
.faq-section-2 .accordion.block,
.faq-section-2 .accordion-box > li,
.faq-content-1 .accordion-box > li {
  visibility: visible !important;
}

/* Footer "Client login": on wt-light pages a theme rule paints inner spans
   dark slate (rgb(58,63,74)), which is unreadable on the navy footer. The
   button itself was already white; the children were not. */
body.wt-light .wt-client-login .wt-cl-btn,
body.wt-light .wt-client-login .wt-cl-btn span,
body.wt-light .wt-client-login .wt-cl-btn i {
  color: #eef1f6 !important;
}
body.wt-light .wt-client-login .wt-cl-btn:hover,
body.wt-light .wt-client-login .wt-cl-btn:hover span,
body.wt-light .wt-client-login .wt-cl-btn:hover i {
  color: #ffffff !important;
}
body.wt-light .wt-client-login .wt-cl-label { color: #ffffff !important; }
body.wt-light .wt-client-login p { color: rgba(238, 241, 246, 0.72) !important; }

/* ============================================================
   Homepage trust band (Google rating + key stats)
   Sits directly under the hero, in the slot the client-logo
   carousel used to occupy, and doubles as the 3D camera's dock
   anchor (.wt-dock-anchor). Deliberately compact.
   ============================================================ */
.wt-trust-band { padding: 6px 0 2px; }
.wt-trust-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 30px; flex-wrap: wrap;
  border-top: 1px solid rgba(16, 24, 40, 0.10);
  border-bottom: 1px solid rgba(16, 24, 40, 0.10);
  padding: 22px 0;
}
.wt-trust-rating {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; text-decoration: none;
}
.wt-g-logo { display: inline-flex; line-height: 0; }
.wt-trust-stars { color: #FBBC05; font-size: 20px; letter-spacing: 1.8px; line-height: 1; }
.wt-trust-score {
  font-family: "Urbanist", sans-serif; font-size: 24px; font-weight: 700;
  color: #101010; line-height: 1;
}
.wt-trust-meta {
  font-family: "Urbanist", sans-serif; font-size: 17px; color: #6b7280;
  border-left: 1px solid rgba(16, 24, 40, 0.12); padding-left: 14px; margin-left: 3px;
}
.wt-trust-rating:hover .wt-trust-meta { color: #FF471C; }
.wt-trust-divider { width: 1px; height: 40px; background: rgba(16, 24, 40, 0.10); }
.wt-trust-stats { display: flex; align-items: center; gap: 54px; flex-wrap: wrap; }
.wt-trust-stat { display: flex; flex-direction: column; gap: 3px; }
.wt-trust-value {
  font-family: "Urbanist", sans-serif; font-size: 19px; font-weight: 700; color: #101010; line-height: 1.1;
}
.wt-trust-label { font-family: "Urbanist", sans-serif; font-size: 13.5px; color: #6b7280; }

@media (max-width: 850px) {
  .wt-trust-inner { flex-direction: column; justify-content: center; text-align: center; gap: 18px; }
  .wt-trust-rating { justify-content: center; }
  .wt-trust-divider { width: 100%; height: 1px; }
  .wt-trust-stats { width: 100%; justify-content: center; gap: 34px; }
}
@media (max-width: 480px) {
  .wt-trust-stats { gap: 22px; }
  .wt-trust-value { font-size: 17px; }
  .wt-trust-label { font-size: 12.5px; }
  .wt-trust-meta { border-left: 0; padding-left: 0; margin-left: 0; width: 100%; }
}

/* ============================================================
   Client logos under the About image (moved from the old
   full-width band). Pure-CSS marquee, sized for a half column.
   ============================================================ */
.wt-about-clients { margin-top: 34px; }
.wt-about-clients__eyebrow {
  display: block; font-family: "Urbanist", sans-serif; font-size: 13.5px;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: #8a8f98; margin-bottom: 16px;
}
.wt-about-marquee {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.wt-about-track {
  display: flex; align-items: center; gap: 58px; width: max-content;
  /* motion is driven by the stepper in index.php, not CSS */
}
.wt-about-marquee:hover .wt-about-track { animation-play-state: paused; }
.wt-about-logo { flex: 0 0 auto; display: inline-flex; align-items: center; }
.wt-about-logo img {
  height: 39px; width: auto; object-fit: contain;
  filter: grayscale(1); opacity: .55;
  transition: filter .3s ease, opacity .3s ease;
}
.wt-about-logo:hover img { filter: grayscale(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .wt-about-track { animation: none; } }


/* ============================================================
   Key figures above the About image.
   Brief: regular weight (no bold), hairline strokes between the
   items, generous air. Because weight is deliberately flat, the
   hierarchy is carried by SCALE and colour instead: a large
   near-black figure over a small, tracked, muted label. Neutrals
   are tinted toward the brand navy rather than pure grey.
   ============================================================ */
.wt-about-stats {
  display: flex;
  align-items: stretch;
  margin: 0 0 34px;
}
.wt-about-stats .wt-trust-stat {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 2px 26px;
  text-align: left;
}
.wt-about-stats .wt-trust-stat:first-child { padding-left: 0; }
.wt-about-stats .wt-trust-stat:last-child  { padding-right: 0; }
/* hairline only BETWEEN items, never on the outer edges */
.wt-about-stats .wt-trust-stat + .wt-trust-stat {
  border-left: 1px solid rgba(24, 48, 87, 0.13);
}
.wt-about-stats .wt-trust-value {
  font-family: "Urbanist", sans-serif;
  font-size: clamp(22px, 2.1vw, 27px);
  font-weight: 400;              /* regular, per brief */
  letter-spacing: -0.015em;
  color: #16233f;
  line-height: 1.15;
  white-space: nowrap;
}
.wt-about-stats .wt-trust-label {
  font-family: "Urbanist", sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: #8790a0;
  line-height: 1.3;
}
@media (max-width: 575px) {
  .wt-about-stats .wt-trust-stat { padding: 2px 14px; }
  .wt-about-stats .wt-trust-value { font-size: 19px; }
  .wt-about-stats .wt-trust-label { font-size: 11px; letter-spacing: .07em; }
}

/* ============================================================
   FAQ accordions: borderless list + readable open question
   ============================================================
   Two problems on the converted light pages:

   1. Each item was drawn as a full 1px box (a leftover from the
      dark theme). Replaced with a single hairline BETWEEN items,
      so the list reads as a list, not a stack of cards.

   2. `.faq-wrapper-2 .active-block .acc-btn` forced the open
      question to var(--white). Correct on the original dark
      theme; on a white page it painted the question white on
      white, so clicking a question made it vanish. The answer
      stayed visible, which is exactly how it was reported.
   ============================================================ */
.faq-wrapper-2 .accordion-box .block {
  border: 0 !important;
  border-radius: 0;
  margin-bottom: 0;
  border-bottom: 1px solid rgba(16, 24, 40, 0.10) !important;
}
.faq-wrapper-2 .accordion-box .block:last-child { border-bottom: 0 !important; }
.faq-wrapper-2 .accordion-box .block .acc-content { border-top: 0 !important; }

/* Open question stays legible (was pure white on white). */
.faq-wrapper-2 .active-block .acc-btn,
.faq-wrapper-2 .accordion-box .block .acc-btn.active { color: #101010 !important; }
body.wt-light .faq-wrapper-2 .active-block .acc-btn,
body.wt-light .faq-wrapper-2 .accordion-box .block .acc-btn.active { color: #101010 !important; }

/* Answer copy: the base rule paints it white too. */
.faq-wrapper-2 .accordion-box .block .acc-content .content .text {
  color: #3a3f4a !important;
  opacity: 1;
}

/* The FAQ-page / "how it works" variant only ever drew a bottom rule,
   so it just needs the outline removed for consistency. */
.faq-content-1 .accordion-box .block {
  border: 0 !important;
  border-bottom: 1px solid rgba(16, 24, 40, 0.10) !important;
}
.faq-content-1 .accordion-box .block:last-child { border-bottom: 0 !important; }

/* Two lines of air above the Google rating cluster and above the About
   image, so each clears what sits over it. ~2 line-heights. */
.wt-trust-band .wt-trust-rating { margin-top: 3.4rem; }
.about-image > img { margin-top: 3.4rem; }

/* ============================================================
   Testimonials: respect the page gutters.
   The card grid used to sit outside .container (a direct child
   of the section) with a 60px right overhang, so it ran past
   the page margin. It now lives inside the container; this
   drops the overhang and keeps the row tidy at every width.
   ============================================================ */
.client-testimonial .client-testimonial__warpper {
  margin-right: 0;
  margin-left: 0;
  max-width: 100%;
}
@media (min-width: 1400px) {
  /* four cards is tight inside the gutters, so let them breathe */
  .client-testimonial .client-testimonial__warpper { gap: 24px; }
}

/* ============================================================
   Client logos under the camera: 4x larger marquee.
   Row height, gap and fade mask are scaled with the logo so the
   strip stays balanced rather than just taller.
   ============================================================ */
/* Pushed a further 8 text lines down (7rem + 13.6rem) so the strip clears the
   camera by a wide margin, then 3 more lines (+5.1rem). ~1.7rem per line at the
   body line-height. */
.about-wrapper .col-lg-6 .wt-about-clients { margin-top: 30.8rem; }
.wt-about-clients__eyebrow { font-size: 15px; margin-bottom: 22px; }
.wt-about-track { gap: 96px; }
.wt-about-logo img {
  height: 156px;              /* 4x the previous 39px */
  max-width: 260px;
}
@media (max-width: 1399px) {
  .wt-about-logo img { height: 120px; max-width: 210px; }
  .wt-about-track { gap: 72px; }
}
@media (max-width: 991px) {
  .about-wrapper .col-lg-6 .wt-about-clients { margin-top: 3.4rem; }
  .wt-about-logo img { height: 88px; max-width: 170px; }
  .wt-about-track { gap: 56px; }
}

/* ============================================================
   Section headings: one size across the site.
   The About breadcrumb heading is the reference (65px / 300 /
   Urbanist). Two homepage sections carry their own scoped rules
   with their own breakpoint ladders - the portfolio heading was
   a 170px display size, and "why choose us" only 48px - so both
   are pinned to the reference here.
   ============================================================ */
.project-section .section-title h2.split-title,
.why-choose-us-wrapper-5 .section-title h2.split-title {
  font-size: 65px;
  font-weight: 300;
  line-height: 1.17;
}
/* Mirror the theme's own h2 ladder exactly, so these two track the
   other section headings at every breakpoint instead of drifting. */
@media (max-width: 1399px) {
  .project-section .section-title h2.split-title,
  .why-choose-us-wrapper-5 .section-title h2.split-title { font-size: 50px; }
}
@media (max-width: 1199px) {
  .project-section .section-title h2.split-title,
  .why-choose-us-wrapper-5 .section-title h2.split-title { font-size: 40px; }
}
@media (max-width: 991px) {
  .project-section .section-title h2.split-title,
  .why-choose-us-wrapper-5 .section-title h2.split-title { font-size: 36px; }
}
@media (max-width: 767px) {
  .project-section .section-title h2.split-title,
  .why-choose-us-wrapper-5 .section-title h2.split-title { font-size: 34px; }
}
@media (max-width: 575px) {
  .project-section .section-title h2.split-title,
  .why-choose-us-wrapper-5 .section-title h2.split-title { font-size: 30px; }
}
@media (max-width: 470px) {
  .project-section .section-title h2.split-title,
  .why-choose-us-wrapper-5 .section-title h2.split-title { font-size: 26px; }
}

/* ============================================================
   About page: choose-us band on light
   The section is lifted from the dark home-3 theme, where its text,
   borders and video circle are all white-on-dark. On the light About
   page those rules render white-on-white, so they are re-grounded
   here. Scoped to body.wt-light so the dark original is untouched.
   ============================================================ */
body.wt-light .choose-us-section-4 {
  border-color: rgba(16, 16, 16, 0.10);
}
body.wt-light .choose-us-wrapper-3 .choose-us-content .section-title h2 {
  color: #101010;
}
body.wt-light .choose-us-wrapper-3 .choose-us-content .choose-icon-items {
  border-top-color: rgba(16, 16, 16, 0.10);
  border-bottom-color: rgba(16, 16, 16, 0.10);
}
body.wt-light .choose-us-wrapper-3 .choose-us-content .choose-icon-items .icon-items .content p {
  color: #5b6070;
}
body.wt-light .choose-us-wrapper-3 .choose-us-content .about-small-image .video-circle {
  background: rgba(16, 16, 16, 0.06);
}

/* Font Awesome glyphs stand in for the theme's missing icon SVGs, sized to
   match the 44px artwork they replace. */
.choose-us-wrapper-3 .choose-us-content .choose-icon-items .icon-items .icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 71, 28, 0.10);
}
.choose-us-wrapper-3 .choose-us-content .choose-icon-items .icon-items .icon i {
  font-size: 18px;
  color: var(--theme);
}

/* WOW.js sets visibility:hidden up front and only clears it when the reveal
   fires. Inside ScrollSmoother that never happens for elements this far down,
   so the counter block and the rating row stayed invisible. Same fix already
   applied to the lets-talk CTAs. */
.choose-us-section-4 .wow,
.choose-us-section-4 .award-items-box,
.choose-us-section-4 .about-small-image { visibility: visible !important; }

/* Rating proof replaces the theme's award badge image. */
.wt-rating-proof { display: flex; align-items: baseline; gap: 10px; }
.wt-rating-score {
  font-family: "Urbanist", sans-serif;
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  color: #101010;
}
.wt-rating-stars { color: #ff471c; font-size: 14px; letter-spacing: 1px; white-space: nowrap; }

/* ============================================================
   FOLDABLE DEVICES
   Tuned against the devices in devices.md. Two form factors, and
   each one presents three very different viewports:

     Book cover (folded)     344-412 x 882-940   very narrow, tall
     Book inner portrait     ~820-900 x 860-1120 near-square, large
     Book inner landscape    ~1100-1150 x 830-900 wide, short
     Flip cover              ~370 x 370          square, tiny
     Flip inner portrait     ~412 x 1006         ordinary phone
     Flip inner landscape    ~1006 x 412         very wide, very short

   The theme's own ladder stops at 470px and keys only on width, so
   the cover screens and every landscape state fall through it. These
   tiers are additive - they never rewrite the theme's rules.
   ============================================================ */

/* --- Cover screens: narrower than anything the theme handles --- */
@media (max-width: 420px) {
  .hero-1 {
    padding: 118px 0 24px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .container, .container-fluid { padding-left: 16px; padding-right: 16px; }
  .section-padding { padding: 56px 0; }
  h1 { font-size: 30px; line-height: 1.16; }
  .wt-hero-sub { font-size: 15px; }
  /* the hero copy carries an inline margin-top:90px, which on a 344px cover
     screen leaves a dead zone above the fold */
  .hero-content { margin-top: 34px !important; }
  /* Stack the CTAs but keep each one content-sized - a full-width tap target
     changed the button's proportions against the rest of the page. */
  .hero-button { flex-wrap: wrap; gap: 12px; }
  /* the trust band's stat row would otherwise squeeze to 3 columns */
  .wt-trust-inner { gap: 14px; }   /* alignment is handled in the <=991 block */
  .navbar-brand img { width: 132px !important; }
}

/* --- Book inner, PORTRAIT: near-square and physically large.
       Width alone puts it in the theme's tablet tier, which collapses
       the type to 36-40px. The aspect guard keeps phones out. --- */
@media (min-width: 780px) and (max-width: 1199px) and (max-aspect-ratio: 1/1) {
  h1 { font-size: 62px; line-height: 1.1; }
  h2 { font-size: 50px; }
  .section-padding { padding: 96px 0; }
  .hero-1 { padding: 168px 0 30px; padding-left: 56px; padding-right: 48px; }
  .container { max-width: 100%; padding-left: 40px; padding-right: 40px; }
}

/* --- Any SHORT viewport: Flip opened sideways (412px tall) and the Flip
       cover (a 370px square). Keyed on height alone, deliberately: CSS
       counts a square viewport as PORTRAIT (portrait matches when height
       is >= width), so an `orientation: landscape` guard here would skip
       the Flip cover entirely. No tall phone is ever <=520px high, so
       height alone is a safe test. --- */
@media (max-height: 520px) {
  .hero-1 {
    padding: 80px 0 20px;
    padding-left: 24px;
    padding-right: 20px;
  }
  h1 { font-size: 28px; line-height: 1.12; }
  .wt-hero-sub { font-size: 14px; margin-top: 8px; }
  .hero-content { margin-top: 0 !important; }
  .hero-button { margin-top: 14px; gap: 10px; }
  .section-padding { padding: 44px 0; }
  .hero-1 .hero-circle { display: none; }
  /* the sticky header was eating 12% of the screen */
  .header-section > .header-main { zoom: 0.7; }
}

/* --- Book inner, LANDSCAPE: wide but short. The aspect ceiling keeps
       ordinary 16:9 / 16:10 laptops (1.6-1.78) out of this tier; every
       book foldable lands at 1.05-1.33. --- */
@media (orientation: landscape) and (min-width: 1000px) and (max-height: 920px) and (max-aspect-ratio: 1.4/1) {
  .hero-1 { padding: 150px 0 28px; }
  h1 { font-size: 58px; line-height: 1.1; }
  .section-padding { padding: 88px 0; }
}

/* --- Hinge awareness. Progressive enhancement: browsers without
       viewport-segment support ignore the whole block, so there is no
       fallback to maintain. Keeps the hero copy and CTAs out of the
       gutter when the page spans both halves of a book foldable. --- */
@media (horizontal-viewport-segments: 2) {
  .hero-1 .container,
  .wt-trust-band .container {
    padding-right: calc(100vw - env(viewport-segment-right 0 0));
  }
  /* never let a CTA straddle the hinge */
  .hero-button { flex-wrap: wrap; }
}
@media (vertical-viewport-segments: 2) {
  .hero-1 { padding-bottom: calc(100vh - env(viewport-segment-bottom 0 0) + 20px); }
}

/* ============================================================
   Mobile bottom navigation (<=767px)
   Five slots - Home / Portfolio / [Call] / Services / News - with
   the call raised out of the pill. Lives outside #smooth-wrapper
   (see footer.php) so position:fixed pins it to the viewport.
   ============================================================ */
.wt-bottomnav { display: none; }

@media (max-width: 767px) {
  .wt-bottomnav {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    /* viewport-fit=cover (head.php) is what makes this inset resolve, so the
       pill clears the iPhone home indicator instead of sitting under it. */
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 24px);
    max-width: 420px;
    /* Was 62px with 17px icons and 10px labels, which read as tiny next to a
       native tab bar (~49px+ with ~25px icons). This block is NOT inside
       .wt-scale, so these are true pixels, not 85% of them. */
    height: 72px;
    padding: 0 6px;
    border-radius: 999px;
    z-index: 1190;                 /* under .wt-float (1200) and the menu overlay */

    /* White glass. The page behind is mostly white, so the hairline border and
       the lifted shadow - not the blur - are what separate it from the page. */
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 8px 30px rgba(16, 24, 40, 0.16), 0 2px 8px rgba(16, 24, 40, 0.08);
  }

  /* Without backdrop-filter the bar would be a washed-out transparent strip. */
  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .wt-bottomnav {
      background: rgba(255, 255, 255, 0.97);
      border-color: rgba(16, 24, 40, 0.10);
    }
  }

  .wt-bn-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 52px;              /* tap target */
    text-decoration: none;
    color: rgba(24, 48, 87, 0.62);
    font-family: "Urbanist", sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    transition: color 200ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .wt-bn-item i { font-size: 21px; line-height: 1; }
  .wt-bn-item.is-active { color: var(--theme); }
  .wt-bn-item:active { color: var(--theme); }

  /* Raised call button. The white ring reads as the pill being punched
     through, rather than a circle floating loose above it. */
  .wt-bn-call {
    flex: 0 0 auto;
    margin-top: -30px;
    color: #ffffff;
  }
  .wt-bn-call-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #183057;
    border: 4px solid rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 20px rgba(24, 48, 87, 0.34);
    transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  .wt-bn-call-circle i { font-size: 23px; color: #ffffff; }
  .wt-bn-call:active .wt-bn-call-circle { transform: scale(0.94); }

  /* The floats sit at bottom:24px, directly under the pill - lift them clear. */
  .wt-float { bottom: calc(102px + env(safe-area-inset-bottom, 0px)); }

  /* Keep the last footer row from hiding behind the bar. */
  .footer-area-3 { padding-bottom: calc(106px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .wt-bn-item, .wt-bn-call-circle { transition: none; }
}

/* ==========================================================================
   Tour viewer page (tour.php)  /tour/<category>/<id>
   Tours open on-site, wrapped in the site header + footer, instead of
   navigating the visitor away to the provider.
   ========================================================================== */
/* The site header is position:absolute and overlays the page, so the first
   element needs the same top clearance .breadcrumb-wrapper .page-heading uses. */
.wt-tour-page { padding-top: 180px; }
@media (max-width: 1199px) { .wt-tour-page { padding-top: 150px; } }
@media (max-width: 767px)  { .wt-tour-page { padding-top: 130px; } }

.wt-tour-crumbs {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    font-size: 14px; color: #6b7280; margin-bottom: 14px;
}
.wt-tour-crumbs a { color: #6b7280; text-decoration: none; }
.wt-tour-crumbs a:hover { color: var(--theme); }
.wt-tour-crumbs [aria-current="page"] { color: #101010; font-weight: 600; }

.wt-tour-title {
    font-size: clamp(26px, 4vw, 42px); line-height: 1.15;
    color: #101010; margin: 0 0 20px;
}

/* 16:9 frame that becomes taller on small screens, where a wide letterbox
   leaves the tour unusably small. */
.wt-tour-frame {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    min-height: 380px; border-radius: 18px; overflow: hidden;
    background: #0d1220; box-shadow: 0 18px 50px rgba(16, 16, 16, .18);
}
.wt-tour-frame iframe {
    position: absolute; top: 0; left: 0;
    border: 0; display: block; z-index: 1;
    /* The sitewide .wt-scale zoom:0.85 makes the cross-origin tour viewer paint
       its canvas at ~85% of the iframe box (anchored top-left), leaving a white/
       navy gap on the right and bottom. Oversize the iframe to 1/0.85 so that
       85% of it equals 100% of the frame; the frame's overflow:hidden clips the
       surplus. Net: the canvas fills the frame edge to edge. */
    width: calc(100% / 0.85);
    height: calc(100% / 0.85);
}
/* Spinner sits behind the iframe, so it is covered the moment the tour paints. */
.wt-tour-loading {
    position: absolute; inset: 0; display: grid; place-items: center; z-index: 0;
}
.wt-tour-loading span {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--theme);
    animation: wt-tour-spin .9s linear infinite;
}
@keyframes wt-tour-spin { to { transform: rotate(360deg); } }

/* Right-aligned under the tour frame. The buttons themselves are now the
   site's standard .theme-btn-main pair (see index.php), so the old
   .wt-tour-btn sizing below applies only to the tour.php page. */
.wt-tour-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; margin-top: 22px; }

.wt-tour-btn {
    display: inline-flex; align-items: center; gap: 8px;
    /* ~33px tall, matching the Grid/List toggle pills - was 12px/15px (~46px),
       which stood taller than every other pill on the site. The border on the
       ghost variant is accounted for below so both read the same height. */
    padding: 8px 18px; border-radius: 70px;
    background: var(--theme); color: #fff; font-weight: 600; font-size: 13.5px;
    line-height: 1.25;
    border: 1px solid transparent;      /* matches --ghost's border box */
    text-decoration: none; transition: transform .18s ease, filter .18s ease;
}
.wt-tour-btn i { font-size: 12.5px; }
.wt-tour-btn:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.06); }
.wt-tour-btn--ghost { background: transparent; color: #101010; border-color: rgba(16,16,16,.16); }
.wt-tour-btn--ghost:hover { color: #101010; border-color: var(--theme); }

.wt-tour-external {
    text-align: center; padding: 40px 20px; border-radius: 18px;
    background: #f6f7f9; display: grid; gap: 16px; justify-items: center;
}
.wt-tour-external img { max-width: min(560px, 100%); border-radius: 14px; }
.wt-tour-external p { margin: 0; color: #555; }

.wt-tour-more { margin-top: 54px; }
.wt-tour-more h2 { font-size: clamp(20px, 2.4vw, 28px); color: #101010; margin: 0 0 18px; }

@media (max-width: 767px) {
    .wt-tour-frame { aspect-ratio: 3 / 4; min-height: 460px; }
    /* Side by side, each taking half the row, rather than one per line. */
    .wt-tour-actions .wt-tour-btn { flex: 1 1 0; min-width: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .wt-tour-loading span { animation: none; }
    .wt-tour-btn { transition: none; }
}

/* ==========================================================================
   Tour card thumbnails: dark overlay
   Lifts the white play circle and the card label off bright thumbnails.
   Named --scrim rather than .wt-tv-overlay because that class already exists
   further up (an orphaned fullscreen viewer) and would read as the same thing.
   ========================================================================== */
.wt-tv-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(10, 16, 28, .34) 0%, rgba(10, 16, 28, .18) 45%, rgba(10, 16, 28, .46) 100%);
    transition: opacity .35s ease;
}
/* .wt-tv-play has no stacking context of its own, so without this the overlay
   above would paint straight over the play circle. */
.wt-tv-play { z-index: 2; }

/* Ease the scrim back on hover so the image reads more clearly once engaged. */
.wt-tv-card:hover .wt-tv-media::after { opacity: .55; }

/* ==========================================================================
   Header horizontal balance
   The logo's left inset comes only from the header's own padding; the CTA's
   right inset comes from the same padding. Previously .header-1 (home) had a
   six-step responsive ladder, .header-3 (inner pages) had a flat 18px 30px,
   and .sticky-menu had a third ladder — so inner pages sat at 30px until you
   scrolled, then jumped to 150px when the sticky header engaged.
   All three now share one ladder, so left and right insets match on every page
   and nothing shifts on scroll.
   NOTE: .header-main carries zoom:0.85, so these render at ~85% of the value.
   ========================================================================== */
.header-3 { padding-left: 150px; padding-right: 150px; }
@media (max-width: 1899px) { .header-3 { padding-left: 60px; padding-right: 60px; } }
@media (max-width: 1399px) { .header-3 { padding-left: 60px; padding-right: 60px; } }
@media (max-width: 1199px) { .header-3 { padding-left: 90px; padding-right: 90px; } }
@media (max-width:  991px) { .header-3 { padding-left: 50px; padding-right: 50px; } }
@media (max-width:  767px) { .header-3 { padding-left: 30px; padding-right: 30px; } }
@media (max-width:  575px) { .header-3 { padding-left: 15px; padding-right: 15px; } }

/* The two header variants use different right-hand containers (.menu-right-info
   on the homepage, .header-right elsewhere). Give them the same gap so the CTA
   sits identically on both. */
.header-1 .menu-right-info,
.header-3 .header-right { gap: 35px; }
@media (max-width: 1199px) {
    .header-1 .menu-right-info,
    .header-3 .header-right { gap: 20px; }
}

/* The homepage CTA was added to .menu-right-info; hide it below xl exactly as
   the inner-page one already is, so it never collides with the mobile bar. */
@media (max-width: 1199px) {
    .header-1 .menu-right-info .theme-btn-main { display: none; }
}

/* Bootstrap puts margin-right:1rem on .navbar-brand. With the offcanvas toggle
   gone, that 16px was the only thing making the left inset wider than the
   right. Zero it so both sides are purely the header padding. */
.header-section .navbar-brand { margin-right: 0; }

/* ==========================================================================
   Client logo carousel: discrete stepping
   Was a 26s continuous glide with 156px-tall logos in a 579px window, so only
   ~1.8 fitted and the motion never resolved on a logo.

   Two structural changes make the stepping exact:
   1. The gap moves from `gap` on the track to `margin-right` on each item, so
      every slot is exactly (width + gap). With `gap`, the track is
      32s + 31g wide and -50% lands mid-gap, which drifts a little each loop.
   2. `steps(16)` over 16 unique logos advances precisely one slot per step and
      holds between them — the pause is the step function, not a delay.
   ========================================================================== */
.wt-about-track {
    gap: 0;                       /* replaced by per-item margin (see above) */
    width: max-content;
    /* Continuous glide, never resting on a logo - replaces the JS stepper that
       slid one slot then held. Reuses the wt-brand-scroll keyframes already
       defined for the inner-page band. The list is rendered twice and the gap
       lives on each item's margin-right (not the track's `gap`), so both halves
       are exactly equal width and -50% lands on a logo boundary every loop. */
    animation: wt-brand-scroll 40s linear infinite;
    will-change: transform;
}
/* #smooth-content > .wt-scale carries zoom:0.85 sitewide, so authored px render
   at 85%. Sizes here are ~3x the previous pass, which capped logos at 60px tall
   (~51px on screen) and read far too small. The source logos are ~650x380, so
   HEIGHT is the binding dimension - hence a fixed height rather than max-height,
   which also keeps every logo optically the same size regardless of its file.
   380 is the widest a 180px-tall logo gets (698x357 -> 352px), so nothing clips. */
.wt-about-logo {
    flex: 0 0 380px;
    width: 380px;
    margin-right: 35px;           /* halved: the gap between logos read too wide */
    justify-content: center;
}
.wt-about-logo img {
    height: 180px;                /* was max-height: 60px */
    max-width: 380px;
    width: auto;
    object-fit: contain;
}
/* Narrower windows: shrink the slot proportionally rather than clipping. The
   ladder is monotonic - the 991px tier used to be LARGER than the 1399px one. */
@media (max-width: 1399px) {
    .wt-about-logo { flex-basis: 290px; width: 290px; margin-right: 35px; }
    .wt-about-logo img { max-width: 290px; height: 138px; }
}
@media (max-width: 991px) {
    .wt-about-logo { flex-basis: 250px; width: 250px; margin-right: 30px; }
    .wt-about-logo img { max-width: 250px; height: 120px; }
}
@media (max-width: 575px) {
    .wt-about-logo { flex-basis: 230px; width: 230px; margin-right: 25px; }
    .wt-about-logo img { max-width: 230px; height: 110px; }
}

/* Hover pause and the reduced-motion opt-out are handled by the stepper. */

/* ==========================================================================
   Featured tour on the homepage
   Reuses .wt-tour-frame / .wt-tour-btn from the tour viewer; only the heading
   is new, sized to sit below the big "Portfolio Showcase" title rather than
   compete with it.
   ========================================================================== */
.wt-home-tour .section-title { margin-bottom: 26px; }
.wt-home-tour .wt-tour-frame { min-height: 320px; }
/* The 16/10 mobile override that used to sit here was dead code: a later
   @media (max-width: 767px) block set 3/4 and won. One rule governs the mobile
   ratio now, further down. */

/* ==========================================================================
   Service cards (/services)  .wt-scard
   Replaces the nine full-width stacked panels. Design: a 4:3 image whose
   bottom-right corner is CUT AWAY in a concave curve, with a circular arrow
   button sitting in the cut-out, then title / description / tag pills below.

   How the notch works (the fragile part):
     .wt-scard-notch is a square pinned to the bottom-right of the media box,
     filled with the PAGE background and given border-top-left-radius:50% so it
     eats a quarter-circle out of the image. Its ::before and ::after then paint
     the two small "inverse" fillets either side using a spread box-shadow, also
     in the page background colour.
   Everything therefore depends on --wt-scard-bg matching whatever is behind the
   card. /services is body.wt-light on white, so it is #fff; it is a custom
   property so a dark section only has to override one value.

   NB: .wt-scale applies zoom:.85 sitewide, so these px render at ~85%.
   ========================================================================== */
.wt-scard-grid {
    --wt-scard-bg: #fff;              /* MUST equal the section background */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));   /* two columns on desktop */
    gap: 40px 34px;
}
@media (max-width: 1199px) { .wt-scard-grid { gap: 32px 24px; } }
@media (max-width: 991px)  { .wt-scard-grid { grid-template-columns: 1fr; gap: 30px; } }

/* ---------------------------------- card --------------------------------- */
.wt-scard {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 16px;
}
.wt-scard:focus-visible { outline: 2px solid #183057; outline-offset: 4px; }

.wt-scard-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    border-bottom-right-radius: 0;    /* the notch owns this corner */
    overflow: hidden;
    background: #eef0f3;
    isolation: isolate;
}
.wt-scard-media img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .7s cubic-bezier(.22, 1, .36, 1);
}
.wt-scard:hover .wt-scard-media img { transform: scale(1.06); }

/* ---------------------------------- notch -------------------------------- */
.wt-scard-notch {
    position: absolute;
    right: -6px;
    bottom: -6px;
    width: 96px;
    height: 96px;
    background: var(--wt-scard-bg);
    border-top-left-radius: 50%;
    z-index: 2;
}
/* Left fillet: curves the cut back into the image. */
.wt-scard-notch::before {
    content: "";
    position: absolute;
    bottom: 6px;
    left: -20px;
    width: 20px; height: 20px;
    background: transparent;
    border-bottom-right-radius: 20px;
    box-shadow: 5px 5px 0 5px var(--wt-scard-bg);
}
/* Top fillet. */
.wt-scard-notch::after {
    content: "";
    position: absolute;
    top: -20px;
    right: 6px;
    width: 20px; height: 20px;
    background: transparent;
    border-bottom-right-radius: 20px;
    box-shadow: 5px 5px 0 5px var(--wt-scard-bg);
}

.wt-scard-go {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: var(--theme);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    transition: transform .3s ease, background .3s ease;
}
.wt-scard:hover .wt-scard-go { transform: scale(1.09); }

/* ---------------------------------- body --------------------------------- */
.wt-scard-body { display: block; padding: 20px 4px 0; }

.wt-scard-num {
    display: block;
    font-family: "Urbanist", sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #8a8f98;
    margin-bottom: 8px;
}
.wt-scard-title {
    font-family: "Urbanist", sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: #101010;
    margin: 0 0 8px;
    transition: color .3s ease;
}
.wt-scard:hover .wt-scard-title { color: var(--theme); }

.wt-scard-desc {
    font-size: 15.5px;
    line-height: 1.6;
    color: #565656;
    margin: 0 0 14px;
}

.wt-scard-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.wt-scard-tags li {
    font-family: "Urbanist", sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: 6px 11px;
    border-radius: 6px;
    background: rgba(24, 48, 87, .07);
    color: #183057;
    white-space: nowrap;
}

/* body.wt-light forces p/span/li to #3a3f4a and links to #101010 (main.css
   :13925-13926), which would flatten the title, the eyebrow and the pills.
   Same escape hatch the other tile components use. */
body.wt-light #smooth-content .wt-scard-title { color: #101010 !important; }
body.wt-light #smooth-content .wt-scard:hover .wt-scard-title { color: var(--theme) !important; }
body.wt-light #smooth-content .wt-scard-desc  { color: #565656 !important; }
body.wt-light #smooth-content .wt-scard-num   { color: #8a8f98 !important; }
body.wt-light #smooth-content .wt-scard-tags li { color: #183057 !important; }
body.wt-light #smooth-content .wt-scard-go    { color: #fff !important; }

/* -------------------------------- toolbar -------------------------------- */
/* Phones only; desktop is always the two-column grid. */
.wt-scard-toolbar { display: none; }

@media (max-width: 767px) {
    .wt-scard-toolbar {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 18px;
    }
    .wt-scard-viewtoggle {
        display: inline-flex;
        border: 1px solid rgba(16, 24, 40, .12);
        border-radius: 999px;
        padding: 3px;
        background: #fff;
        gap: 2px;
    }
    .wt-scard-vbtn {
        appearance: none;
        border: 0;
        background: transparent;
        border-radius: 999px;
        padding: 8px 16px;
        font-family: "Urbanist", sans-serif;
        font-size: 13.5px;
        font-weight: 600;
        color: #565656;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        cursor: pointer;
        transition: background .25s ease, color .25s ease;
    }
    .wt-scard-vbtn.is-active { background: #183057; color: #fff; }
    .wt-scard-vbtn:focus-visible { outline: 2px solid #183057; outline-offset: 2px; }

    /* ------------------------------ list view ----------------------------- */
    /* Compact rows: small square thumbnail left, title + blurb right. The notch
       and arrow are hidden - they only read correctly at full card size. */
    .wt-scard-grid[data-view="list"] { gap: 14px; }
    .wt-scard-grid[data-view="list"] .wt-scard {
        display: grid;
        grid-template-columns: 96px 1fr;
        align-items: center;
        gap: 14px;
        padding: 10px;
        border: 1px solid rgba(16, 24, 40, .10);
        border-radius: 14px;
        background: #fff;
    }
    .wt-scard-grid[data-view="list"] .wt-scard-media {
        aspect-ratio: 1 / 1;
        border-radius: 10px;         /* no cut-out corner in list mode */
        width: 96px;
    }
    .wt-scard-grid[data-view="list"] .wt-scard-notch { display: none; }
    .wt-scard-grid[data-view="list"] .wt-scard-body  { padding: 0; }
    .wt-scard-grid[data-view="list"] .wt-scard-num,
    .wt-scard-grid[data-view="list"] .wt-scard-tags  { display: none; }
    .wt-scard-grid[data-view="list"] .wt-scard-title { font-size: 17px; margin-bottom: 4px; }
    .wt-scard-grid[data-view="list"] .wt-scard-desc  {
        font-size: 13.5px;
        line-height: 1.45;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;        /* keep every row the same height */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wt-scard-media img,
    .wt-scard-go,
    .wt-scard-title { transition: none; }
    .wt-scard:hover .wt-scard-media img,
    .wt-scard:hover .wt-scard-go { transform: none; }
}

/* Testimonial avatar — testimonials.image was saved by the admin and never rendered. */
.wt-testi-avatar { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; margin-right: 14px; background: #eef0f3; }
.wt-testi-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   Shared page hero (includes/page-hero.php)
   Detail pages previously rendered a `.breadcrumb-items` list that on three
   pages held vendor filler ("30+ years of experience") instead of navigation.
   The trail below replaces it: real links, brand type, and it sits under the
   title so the H1 stays the first thing read.
   ========================================================================== */
.wt-hero-crumbs { margin-top: 18px; }
.wt-hero-crumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 10px;
    font-family: "Urbanist", sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .01em;
}
.wt-hero-crumbs li { display: inline-flex; align-items: center; color: #6b7280; }
/* Separator is generated, so the markup carries no presentational characters. */
.wt-hero-crumbs li + li::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: .45;
    margin-right: 10px;
}
.wt-hero-crumbs a { color: #6b7280; text-decoration: none; transition: color .25s ease; }
.wt-hero-crumbs a:hover { color: var(--theme, #FF471C); }
.wt-hero-crumbs li[aria-current="page"] { color: #183057; font-weight: 500; }
/* body.wt-light forces p/span/li to #3a3f4a sitewide; the trail sets its own
   hierarchy, so opt these back out. */
body.wt-light #smooth-content .wt-hero-crumbs li { color: #6b7280; }
body.wt-light #smooth-content .wt-hero-crumbs li[aria-current="page"] { color: #183057; }
body.wt-light #smooth-content .wt-hero-crumbs a { color: #6b7280; }
body.wt-light #smooth-content .wt-hero-crumbs a:hover { color: var(--theme, #FF471C); }
@media (max-width: 767px) { .wt-hero-crumbs ol { font-size: 13.5px; } }

/* ==========================================================================
   News article body (news-details.php .post-content)
   Only `p` and `h2` were ever styled here, so an article written in the admin
   with subheadings, lists, quotes or links rendered at raw browser defaults -
   the reason article pages read as off-brand. These rules cover everything the
   editor can emit, so every future article inherits the brand automatically.

   Two things force !important here, both pre-existing sitewide rules that are
   more specific than anything scoped to .post-content:
     - a heading rule that pins every h1-h6 to font-weight 300
     - body.wt-light #smooth-content a:not(...)  which repaints every link
   `ul.post-list` is the author/date meta row, which lives inside .post-content
   and must NOT pick up the article list styling.
   ========================================================================== */
.post-content { font-family: "Urbanist", sans-serif; }
.post-content > :first-child { margin-top: 0; }

.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5 {
    font-family: "Urbanist", sans-serif;
    color: #183057 !important;      /* brand navy */
    font-weight: 600 !important;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 44px 0 16px;
}
.post-content h2 { font-size: 34px; }
.post-content h3 { font-size: 26px; }
.post-content h4 { font-size: 21px; }
.post-content h5 { font-size: 18px; }

.post-content p {
    font-size: 17px;
    line-height: 1.75;
    font-weight: 300;
    margin-bottom: 20px;
}

/* Article lists. :not(.post-list) keeps the meta row (author / date) out. */
.post-content ul:not(.post-list),
.post-content ol { margin: 0 0 22px; }
.post-content ul:not(.post-list) { list-style: none; padding-left: 4px; }
.post-content ol { list-style: decimal; padding-left: 22px; }
.post-content ul:not(.post-list) > li,
.post-content ol > li {
    font-size: 17px;
    line-height: 1.7;
    font-weight: 300;
    margin-bottom: 10px;
    position: relative;
}
/* Unordered markers use the brand orange rather than a browser bullet. */
.post-content ul:not(.post-list) > li { padding-left: 24px; }
.post-content ul:not(.post-list) > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--theme, #FF471C);
}
.post-content ol > li { padding-left: 6px; }
.post-content li > ul:not(.post-list),
.post-content li > ol { margin-top: 10px; margin-bottom: 0; }

.post-content blockquote {
    margin: 32px 0;
    padding: 26px 30px;
    border-left: 3px solid var(--theme, #FF471C) !important;
    background: #f6f7f9;
    border-radius: 0 10px 10px 0;
    font-size: 19px;
    line-height: 1.6;
    font-weight: 400;
    color: #183057;
}
.post-content blockquote p:last-child { margin-bottom: 0; }
.post-content blockquote p { font-size: 19px; }

.post-content a {
    color: var(--theme, #FF471C) !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: opacity .25s ease;
}
.post-content a:hover { opacity: .72; }
/* The meta row's links are chrome, not body copy - leave them alone. */
.post-content .post-list a { color: inherit !important; text-decoration: none; }

.post-content strong,
.post-content b { font-weight: 600 !important; color: #183057; }
.post-content img { max-width: 100%; height: auto; border-radius: 12px; margin: 26px 0; }
.post-content hr { border: 0; border-top: 1px solid #e6e8ec; margin: 38px 0; }
.post-content figure { margin: 26px 0; }
.post-content figcaption { font-size: 14px; color: #6b7280; margin-top: 10px; }

/* Wide tables scroll rather than push the layout. */
.post-content .wt-table-scroll { overflow-x: auto; margin: 26px 0; }
.post-content table { width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 16px; }
.post-content th, .post-content td { border: 1px solid #e6e8ec; padding: 12px 14px; text-align: left; }
.post-content th { background: #f6f7f9; font-weight: 600; color: #183057; }

/* body.wt-light forces p/span/li to #3a3f4a sitewide; body copy is happy with
   that, but these set their own colour and must win. */
body.wt-light #smooth-content .post-content :is(h2, h3, h4, h5),
body.wt-light #smooth-content .post-content :is(strong, b),
body.wt-light #smooth-content .post-content blockquote,
body.wt-light #smooth-content .post-content th { color: #183057; }

@media (max-width: 767px) {
    .post-content h2 { font-size: 26px; }
    .post-content h3 { font-size: 21px; }
    .post-content h4 { font-size: 18px; }
    .post-content p,
    .post-content ul:not(.post-list) > li,
    .post-content ol > li { font-size: 16px; }
    .post-content blockquote,
    .post-content blockquote p { padding: 20px 22px; font-size: 17px; }
}

/* ==========================================================================
   MOBILE PASS
   The vendor theme centres the hero, the trust band and every inner-page
   heading from 1199px down, which reads as centred on tablets and phones
   alike. These rules unwind that from 991px down (all phones and portrait
   tablets), leaving desktop untouched. Everything here is deliberately last
   in the file so it wins on order without needing !important.
   ========================================================================== */
@media (max-width: 991px) {
    /* --- hero: left-aligned copy and CTAs --- */
    .hero-1 .hero-content,
    .hero-1 .hero-content h1,
    .hero-1 .hero-content .wt-hero-sub { text-align: left; }
    .hero-1 .hero-content .hero-button {
        justify-content: flex-start;
        text-align: left;
    }

    /* --- trust band: was centred by the 850px block --- */
    .wt-trust-inner {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
    }
    .wt-trust-rating { justify-content: flex-start; }
    .wt-trust-stats  { justify-content: flex-start; width: 100%; }
    /* Scoped: .wt-trust-stat is shared with the About-section stat row, which
       is centred, so this must not leak out of the band. */
    .wt-trust-inner .wt-trust-stat { align-items: flex-start; text-align: left; }

    /* --- inner-page and article headings --- */
    .breadcrumb-wrapper .page-heading { text-align: left; }
    .breadcrumb-wrapper .page-heading .section-title { text-align: left; }
}

/* The hero CTA label had a mobile padding rule that never applied: the 575px
   `.theme-btn-main .theme-btn` (0,2,0) loses to `.theme-btn-main.style-2
   .theme-btn` (0,3,0), so only its font-size landed. Matching the specificity
   so the button actually tightens up on small screens. */
@media (max-width: 575px) {
    .theme-btn-main.style-2 .theme-btn {
        font-size: 14px;
        margin-right: 18px;
    }
    .theme-btn-main.style-2 { padding: 6px 18px; padding-right: 6px; }
    .theme-btn-main.style-2 .theme-btn-arrow-left,
    .theme-btn-main.style-2 .theme-btn-arrow-right { width: 36px; height: 36px; }
}

/* --------------------------------------------------------------------------
   Hero 3D camera, in-flow mode (<780px). It now mounts inside .hero-content
   between the copy and the CTAs, so the reading order is heading -> text ->
   model -> buttons. The mount is inert above the flow threshold.
   -------------------------------------------------------------------------- */
.wt-hero-cam-mount { display: none; }
@media (max-width: 779.98px) {
    /* The camera is pinned on phones now, so this in-flow mount would only
       reserve empty space. Kept in the markup as the fallback target for the
       case where the dock element is missing. */
    .wt-hero-cam-mount { display: none; }
    .wt-hero-cam-mount.wt-cam-has-flow { display: block; margin: 8px 0 4px; }
    /* Box and offset dialled in with the ?tune=1 panel. `margin: 0` cancels the
       desktop `margin-left:auto` that hangs the pinned camera off the right
       edge; the translate then places it. */
    .wt-hero-cam-mount .wt-cam-wrap.wt-cam-flow {
        margin: 0;
        width: 297px;
        max-width: 100%;
        height: 246px;
        min-height: 0;
        transform: translate(99px, 12px);
    }
    /* Pinned on phones: the wrap is fixed to the viewport and its transform is
       written every frame by the bridge, so only the BOX is set here. */
    .wt-cam-wrap:not(.wt-cam-flow) {
        width: 297px;
        height: 246px;
        left: auto;
        right: 6px;
    }

    /* Hero block as a whole, from the same tuning pass. */
    .hero-1 .hero-content {
        /* Three line units higher than the 80px this was tuned to.
           --wt-hero-line (25px) is the same unit the heading and CTA spacing
           below use, so all three stay in proportion. */
        transform: translate(0px, 5px);
    }

    /* Three lines of breathing room, using the hero paragraph's own line box
       (15.5px x 1.6 = ~25px) so "3 lines" means the same here as on screen.
       --wt-hero-line keeps the two offsets below in step. */
    .hero-1 .hero-content { --wt-hero-line: 25px; }

    /* NB: this margin does not move the heading. The h1 is the first child of
       .hero-content with no padding or border between them, so it collapses
       into the parent's margin - measured identical at 0px and 75px. The
       hero's own padding-top is the real lever. Left as authored. */
    .hero-1 .hero-content h1.split-title {
        margin-top: calc(var(--wt-hero-line) * 3);
    }
    /* The CTAs drop a further three lines, opening a gap under the model. */
    .hero-1 .hero-content .hero-button {
        margin-top: calc(var(--wt-hero-line) * 3);
    }
}

/* --------------------------------------------------------------------------
   Homepage tour embed: portrait on phones.
   This was pinned to 16/10 on the grounds that the tour page's 3/4 ratio
   "would push the next section far down the page". A portrait phone wastes
   most of a landscape letterbox, so it now matches the tour page - with a
   max-height to keep the original concern in check.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* 3/4 portrait squeezed a panoramic tour into a tall, narrow box and left
       the tour's own controls cramped against the edges. 4/5 gives back
       horizontal room while staying tall enough to feel immersive on a phone;
       max-height keeps the next section within reach. */
    /* 4/3 (landscape) rather than 4/5 (portrait): a 360 panorama shows more of
       the room horizontally in a wider box, so the scene reads less cropped and
       zoomed-in on a phone, and the tour's own controls get breathing room. */
    /* 4/3 rendered only ~261px tall on a 375px phone - a strip, with the tour
       barely half visible. A square is the middle ground: taller than 4/3 so the
       scene actually reads, without going back to the cropped-feeling portrait.
       max-height still keeps the next section within reach. */
    .wt-home-tour .wt-tour-frame {
        aspect-ratio: 4 / 5;
        min-height: 320px;
        max-height: 74vh;
    }
    /* Both CTAs share one row, same treatment as the tour page's own pair.
       .wt-scale applies zoom:0.85 sitewide, so authored px render at 85%:
       52px authored = ~44px on screen, the touch-target minimum. */
    .wt-home-tour .wt-tour-actions { justify-content: stretch; gap: 10px; flex-wrap: nowrap; }
    .wt-home-tour .wt-tour-actions > a {
        flex: 1 1 0;
        min-width: 0;
        min-height: 52px;
        justify-content: center;
        text-align: center;
    }
    /* Half a 348px row is tight for "All 360° Virtual Tours" - let the label size
       down rather than overflow its button. */
    .wt-home-tour .wt-tour-actions > a .theme-btn { font-size: 13px; }
}

/* ==========================================================================
   Mobile carousel (.wt-mcarousel)
   Native scroll-snap rather than Swiper: main.css records that Swiper
   mis-measures inside the GSAP ScrollSmoother wrapper, which is why the client
   logo marquee was rebuilt in CSS. This needs no library and keeps real touch
   swiping. Auto-advance lives in index.php and only runs under this query.
   ========================================================================== */
@media (max-width: 767px) {
    .wt-mcarousel {
        display: flex !important;          /* beats `display:block` at 575px */
        grid-template-columns: none !important;  /* beats the testimonial grid */
        flex-wrap: nowrap !important;      /* beats `flex-wrap:wrap` at 1199px */
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        gap: 14px;
        margin-left: 0;
        margin-right: 0;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .wt-mcarousel::-webkit-scrollbar { display: none; }
    .wt-mcarousel > * {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        scroll-snap-align: start;
        margin-bottom: 0;
    }
    /* The counter boxes cap at 300px on desktop and stack with a margin. */
    .why-choose-us-wrapper-5 .choose-us-content .about-conter-items.wt-mcarousel > .counter-box {
        max-width: 100%;
        margin-bottom: 0;
    }
    /* The image is the third child. It rides along as a slide rather than
       being hidden - dropping it would lose content on mobile only - but its
       450px mobile height would tower over the counter cards, so it is capped
       to roughly card height. */
    .why-choose-us-wrapper-5 .choose-us-content .about-conter-items.wt-mcarousel > .about-vide-bg {
        height: 240px;
    }

    .wt-mcarousel-dots {
        display: flex;
        justify-content: flex-start;
        gap: 7px;
        margin-top: 14px;
    }
    .wt-mcarousel-dots button {
        width: 7px;
        height: 7px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: rgba(16, 24, 40, .22);
        transition: background .25s ease, width .25s ease;
    }
    .wt-mcarousel-dots button.is-active {
        width: 20px;
        border-radius: 4px;
        background: var(--theme, #FF471C);
    }
}
/* Above the carousel breakpoint the dots are meaningless. Guarded by min-width:
   unguarded, this rule out-ordered the display:flex above and hid them always. */
@media (min-width: 768px) {
    .wt-mcarousel-dots { display: none; }
}

/* ==========================================================================
   Detail-page H1 scale
   page-hero.php emits <h1> in detail mode and <h2> in marketing mode. The <h1>
   picked up the vendor breadcrumb ladder (110/80/70/55/50/40) while every other
   page fell through to the global h2 ladder, so an article headline rendered far
   larger than any other page heading. Pinned to the h2 ladder at every width.
   Scoped to .split-title so any vendor page still using the old markup is
   untouched.
   ========================================================================== */
.breadcrumb-wrapper .page-heading h1.split-title { font-size: 65px; }
@media (max-width: 1399px) { .breadcrumb-wrapper .page-heading h1.split-title { font-size: 50px; } }
@media (max-width: 1199px) { .breadcrumb-wrapper .page-heading h1.split-title { font-size: 40px; } }
@media (max-width: 991px)  { .breadcrumb-wrapper .page-heading h1.split-title { font-size: 36px; } }
@media (max-width: 767px)  { .breadcrumb-wrapper .page-heading h1.split-title { font-size: 34px; } }
@media (max-width: 575px)  { .breadcrumb-wrapper .page-heading h1.split-title { font-size: 30px; } }
@media (max-width: 470px)  { .breadcrumb-wrapper .page-heading h1.split-title { font-size: 26px; } }

/* ==========================================================================
   Homepage service slider cards on phones
   These carried desktop metrics all the way down - there were no mobile rules
   at all. Worse, every card is stretched to the tallest in the slider, and at
   slidesPerView 1.2 the longest paragraph runs 8-10 lines, so every card
   inherited that height.
   ========================================================================== */
@media (max-width: 767px) {
    /* Let each card size to its own content. The stretch is desirable on
       desktop, where cards sit side by side; in a one-at-a-time swipe it only
       adds dead space. */
    .service-slider-3 .swiper-wrapper { align-items: flex-start; }
    .service-slider-3 .swiper-slide .service-box-items-3 { height: auto; }

    .service-box-items-3 { padding: 22px 20px; margin-top: 18px; }
    .service-box-items-3 h3 { font-size: 21px; margin-bottom: 12px; }
    .service-box-items-3 span { margin-bottom: 14px; }

    /* Keep the copy to a readable few lines; the full text is on the service
       page the card links to. */
    .service-box-items-3 p {
        font-size: 15px;
        line-height: 1.55;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* The info box inherits flex-wrap:wrap from the 1399px tier, which pushed
       the arrow onto its own row under the pills. One row, no wrapping. */
    .service-box-items-3 .feature-info-box {
        margin-top: 18px;
        padding: 14px 16px;
        flex-wrap: nowrap;
        gap: 10px;
    }
    .service-box-items-3 .feature-info-box ul { flex-wrap: nowrap; gap: 6px; min-width: 0; }
    .service-box-items-3 .feature-info-box ul li {
        font-size: 13px;
        padding: 0 10px;
        height: 27px;
        line-height: 25px;
        white-space: nowrap;
    }
    .service-box-items-3 .feature-info-box .icon {
        flex: 0 0 auto;
        width: 36px; height: 36px; line-height: 36px;
    }
}

/* ==========================================================================
   Portfolio hub: list view on phones (project.php)
   The tile is an overlay - text is absolutely positioned on the photo - so the
   services list rules cannot be reused directly. In list mode the tile becomes
   a normal two-column row and the overlay furniture is dropped.
   ========================================================================== */
.wt-ph-toolbar { display: none; }

@media (max-width: 767px) {
    .wt-ph-toolbar {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 16px;
    }
    .wt-ph-viewtoggle {
        display: inline-flex;
        border: 1px solid rgba(16, 24, 40, .12);
        border-radius: 999px;
        padding: 3px;
        background: #fff;
        gap: 2px;
    }
    .wt-ph-vbtn {
        appearance: none;
        border: 0;
        background: transparent;
        border-radius: 999px;
        padding: 8px 16px;
        font-family: "Urbanist", sans-serif;
        font-size: 13.5px;
        font-weight: 600;
        color: #565656;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        cursor: pointer;
        transition: background .25s ease, color .25s ease;
    }
    .wt-ph-vbtn.is-active { background: #183057; color: #fff; }
    .wt-ph-vbtn:focus-visible { outline: 2px solid #183057; outline-offset: 2px; }

    .wt-ph-grid[data-view="list"] { gap: 12px; }
    .wt-ph-grid[data-view="list"] .wt-ph-tile {
        display: grid;
        grid-template-columns: 92px 1fr;
        align-items: center;
        gap: 14px;
        aspect-ratio: auto;          /* the 4/3 photo shape is grid-view only */
        padding: 9px;
        border: 1px solid rgba(16, 24, 40, .10);
        border-radius: 14px;
        background: #fff;
        overflow: hidden;
    }
    .wt-ph-grid[data-view="list"] .wt-ph-tile img {
        width: 92px;
        height: 92px;
        border-radius: 10px;
    }
    /* Overlay furniture has no meaning once the text sits beside the photo. */
    .wt-ph-grid[data-view="list"] .wt-ph-shade,
    .wt-ph-grid[data-view="list"] .wt-ph-arrow,
    .wt-ph-grid[data-view="list"] .wt-ph-badge { display: none; }

    .wt-ph-grid[data-view="list"] .wt-ph-info {
        position: static;            /* was absolute over the photo */
        inset: auto;
        gap: 2px;
        padding-right: 6px;
    }
    /* Text was white for the photo gradient; on a white row it must go dark.
       These beat the body.wt-light overrides at the top of this file. */
    .wt-ph-grid[data-view="list"] .wt-ph-name,
    body.wt-light #smooth-content .wt-ph-grid[data-view="list"] .wt-ph-name {
        color: #183057 !important;
        font-size: 17px;
        text-shadow: none;
    }
    .wt-ph-grid[data-view="list"] .wt-ph-meta,
    body.wt-light #smooth-content .wt-ph-grid[data-view="list"] .wt-ph-meta {
        color: #6b7280 !important;
        font-size: 13px;
    }
    .wt-ph-grid[data-view="list"] .wt-ph-tile:hover img { transform: none; }
}

/* The client-portal block is relocated under the brand blurb on <=991px
   (includes/footer.php). The min-width:992 margin-top:142px above is a desktop
   alignment hack keyed to the opposite column's link list; in its new parent it
   just needs ordinary spacing. */
.wt-client-login.wt-cl-moved {
    margin-top: 4px;
    margin-bottom: 30px;
    max-width: 100%;
}

/* ==========================================================================
   Mobile round 3 — hero heading, CTAs, stats, arrows, marquee spacing
   Appended last so these win on order without !important.
   ========================================================================== */

/* --- 1. Hero heading: three lines, short first line -----------------------
   The breaks are in the markup (mobile-only) because GSAP SplitText makes every
   word an inline-block nowrap box, so a max-width alone gives no control over
   WHERE it wraps. SplitText preserves <br> nodes, so they survive the split. */
.wt-hero-br { display: none; }

@media (max-width: 767px) {
    .wt-hero-br { display: inline; }

    /* Sized so line three ("360 Virtual Tours in Dubai.") fits without
       wrapping to a fourth line. */
    .hero-1 .hero-content h1 { font-size: 27px; line-height: 1.18; }
    .hero-1 .hero-content h1 span { font-size: 27px; }

    /* --- 2. CTAs stacked, each at its natural width ---------------------
       An earlier round rejected full-width CTAs, so no stretching here. */
    .hero-1 .hero-content .hero-button {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .hero-1 .hero-content .hero-button .theme-btn-main { width: auto; }
}
@media (max-width: 575px) {
    .hero-1 .hero-content h1 { font-size: 25px; }
    .hero-1 .hero-content h1 span { font-size: 25px; }
}
@media (max-width: 420px) {
    /* Beats the ≤420 `h1 { font-size: 30px }` tier further up the file. */
    .hero-1 .hero-content h1 { font-size: 23px; }
    .hero-1 .hero-content h1 span { font-size: 23px; }
}

/* --- 4. About-section stats: centred trio, no rule above -----------------
   The row stretched edge to edge with each cell's text left-aligned, which read
   as ragged. Cells now shrink to content and the group centres. */
@media (max-width: 991px) {
    .wt-about-stats {
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }
    .wt-about-stats .wt-trust-stat {
        flex: 0 0 auto;          /* was flex: 1 1 0, which stretched them apart */
        align-items: center;
        text-align: center;
        padding: 2px 16px;
    }
    /* The hairline closing the Google-rating strip sits directly above the
       stats and reads as a rule over them. */
    .wt-trust-inner { border-bottom: 0; }
}

/* --- 6. Slider arrows: right-aligned once they wrap ----------------------
   .section-title-area is `justify-content: space-between`; at ≤991 it wraps and
   the arrows land alone on the second line, where space-between puts a single
   item at the START. margin-left:auto pushes them back to the right. */
@media (max-width: 991px) {
    .service-section-3 .section-title-area .array-button { margin-left: auto; }
}

/* --- 5. Marquee slot on phones -----------------------------------------
   Used to consume a --wt-slot measured by the JS stepper, so each phone width
   showed exactly two logos. The marquee glides continuously now, so nothing has
   to line up on a slot boundary and a fixed width is enough. Every item keeps
   the same total width, which is what makes the -50% loop seamless. */
@media (max-width: 767px) {
    .wt-about-logo {
        flex: 0 0 204px;
        width: 204px;
        margin-right: 28px;
    }
    .wt-about-logo img {
        max-width: 72%;      /* even breathing room inside the narrower slot */
        height: auto;
        max-height: 86px;
    }
}

/* ==========================================================================
   Mobile round 4
   ========================================================================== */

/* --- 1. Sticky header height ---------------------------------------------
   `.mobile-menu-area` is position:absolute, so it contributes nothing to the
   header's height. The header's only in-flow child (.header-main) is hidden
   below xl, so the header collapsed to 36px of bare padding while the 80px bar
   overflowed below it - the glass background and bottom border stopped
   half-way down the bar. Putting the bar back in flow lets the header size to
   it; the header's own vertical padding goes, since the bar already has 18px. */
@media (max-width: 1199px) {
    .header-section .mobile-menu-area { position: static; }
    .header-section,
    .header-section.sticky-menu { padding-top: 0; padding-bottom: 0; }
}

/* --- 2. Two-column card grids on mobile ----------------------------------
   Scoped to [data-view="grid"]. Unscoped, these also applied to LIST view, so
   the list rendered as two columns of rows and read as a second grid - the
   list stopped being a list. */
@media (max-width: 991px) {
    .wt-scard-grid[data-view="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
    .wt-scard-grid[data-view="list"] { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
    .wt-ph-grid[data-view="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .wt-ph-grid[data-view="list"] { grid-template-columns: 1fr; }

    /* Two-up cards are half as wide, so the grid-view type has to come down
       with them or it wraps awkwardly. List view is unaffected. */
    .wt-scard-grid[data-view="grid"] .wt-scard-title { font-size: 16px; }
    .wt-scard-grid[data-view="grid"] .wt-scard-desc  { font-size: 13px; line-height: 1.45; }
    .wt-scard-grid[data-view="grid"] .wt-scard-num   { font-size: 11px; }
    .wt-scard-grid[data-view="grid"] .wt-scard-tags  { display: none; }
    .wt-scard-grid[data-view="grid"] .wt-scard-notch { width: 60px; height: 60px; }

    .wt-ph-grid[data-view="grid"] .wt-ph-name {
        font-size: 15px;
        /* Clamp to 2 lines (like Services/News). The name sits in a fixed 4:3
           box; an unclamped long label wrapped 2-3 lines and pushed the meta out
           of the readable gradient. */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .wt-ph-grid[data-view="grid"] .wt-ph-meta { font-size: 11.5px; }
    /* Keep clearance for the arrow: it is opacity:0 until hover, but a tap leaves
       the hover state stuck on touch devices, so without clearance it paints over
       the name. */
    .wt-ph-grid[data-view="grid"] .wt-ph-info { left: 12px; right: 44px; bottom: 12px; }
    .wt-ph-grid[data-view="grid"] .wt-ph-badge { font-size: 10.5px; padding: 5px 9px; top: 10px; left: 10px; }
}

/* --- 3. Services counters: one 2x2 block ---------------------------------
   Four full-width rows ran to ~800px on a phone. As a 2x2 they read as a
   single block of figures. */
@media (max-width: 991px) {
    .about-section-2 .counter-wrapper {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
    .about-section-2 .counter-wrapper .counter-box {
        margin-top: 0;
        padding: 18px 16px;
    }
    .about-section-2 .counter-wrapper .counter-box h2 { font-size: 30px; margin-top: 10px; }
    .about-section-2 .counter-wrapper .counter-box .text { font-size: 13px; }
    .about-section-2 .counter-wrapper .counter-box p { font-size: 12.5px; line-height: 1.45; margin-top: 8px; }
}

/* --- 4. Hero CTAs three lines further down ------------------------------- */
@media (max-width: 767px) {
    .hero-1 .hero-content .hero-button {
        margin-top: calc(var(--wt-hero-line) * 6);   /* was *3 */
    }
}

/* --- 6. Trust rating on the page's content margin ------------------------
   The band's container pads to 14px while the hero above it pads twice (its
   own 16px on top of the container's), landing at 27px. The rating sat 13px
   left of everything it follows; matching the hero keeps the mobile page a
   single left-hand column. */
@media (max-width: 767px) {
    .wt-trust-band .container { padding-left: 32px; padding-right: 32px; }
}

/* ==========================================================================
   Mobile round 5
   ========================================================================== */

/* --- 1. Desktop camera respects the content margin -----------------------
   The wrap is `right: 0`, so the model could run to the very edge of the
   window while every other element stops at the container. It is rendered
   OUTSIDE #smooth-content, so the sitewide `zoom: 0.85` does not apply to it -
   hence the container widths below are pre-multiplied by 0.85 to match what the
   zoomed container actually measures on screen.
   Bootstrap container max-widths: 1410 / 1140 / 960 / 720 -> x0.85. */
.wt-cam-wrap { --wt-cam-container: 969px; }
/* Bootstrap widens the container to 1410px at 1400px up, but this variable had
   no matching tier, so every viewport >=1400px positioned the model against a
   container ~115px narrower than the real one - which is why the camera drifted
   left and sat on top of the hero copy on wide monitors. 1410 x 0.85 = 1198.5. */
@media (min-width: 1400px) { .wt-cam-wrap { --wt-cam-container: 1198.5px; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .wt-cam-wrap { --wt-cam-container: 816px; } }
@media (min-width: 768px) and (max-width: 991.98px)  { .wt-cam-wrap { --wt-cam-container: 612px; } }

@media (min-width: 768px) {
    /* LOCKED. The desktop model sits against the right content margin and is
       not to be retuned without an explicit instruction. */
    .wt-cam-wrap:not(.wt-cam-flow) {
        right: max(0px, calc((100vw - var(--wt-cam-container)) / 2));
    }
}

/* The wrap is a percentage of the viewport (width: 52%), so on a wide monitor the
   model kept growing - ~998px at 1920px - and ate into the headline. Cap it so it
   stays the size it already is at ~1440px instead of scaling with the display. */
@media (min-width: 1500px) {
    .wt-cam-wrap:not(.wt-cam-flow) { width: 780px; }
}

/* --- 2. Hero CTAs another three lines down ------------------------------- */
@media (max-width: 767px) {
    .hero-1 .hero-content .hero-button {
        margin-top: calc(var(--wt-hero-line) * 9);   /* was *6 */
    }
}

/* ==========================================================================
   News page: grid / list toggle (phones only)
   The cards are Bootstrap columns, so list mode collapses them to full-width
   rows and re-lays the card inside as thumbnail + text.
   ========================================================================== */
.wt-news-toolbar { display: none; }

@media (max-width: 767px) {
    .wt-news-toolbar {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 16px;
    }
    .wt-news-viewtoggle {
        display: inline-flex;
        border: 1px solid rgba(16, 24, 40, .12);
        border-radius: 999px;
        padding: 3px;
        background: #fff;
        gap: 2px;
    }
    .wt-news-vbtn {
        appearance: none;
        border: 0;
        background: transparent;
        border-radius: 999px;
        padding: 8px 16px;
        font-family: "Urbanist", sans-serif;
        font-size: 13.5px;
        font-weight: 600;
        color: #565656;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        cursor: pointer;
        transition: background .25s ease, color .25s ease;
    }
    .wt-news-vbtn.is-active { background: #183057; color: #fff; }
    .wt-news-vbtn:focus-visible { outline: 2px solid #183057; outline-offset: 2px; }

    /* ---- list view: compact rows ---- */
    #wtNewsGrid[data-view="list"] { --bs-gutter-y: 12px; }
    #wtNewsGrid[data-view="list"] > [class*="col-"] { width: 100%; flex: 0 0 100%; max-width: 100%; }

    #wtNewsGrid[data-view="list"] .news-box-items-2 {
        display: grid;
        grid-template-columns: 96px 1fr;
        align-items: center;
        gap: 14px;
        padding: 9px;
        border: 1px solid rgba(16, 24, 40, .10);
        border-radius: 14px;
        background: #fff;
    }
    #wtNewsGrid[data-view="list"] .news-box-items-2 .thumb {
        width: 96px;
        height: 96px;
        border-radius: 10px;
        overflow: hidden;
    }
    /* The card ships two stacked images for its hover swap; only one is needed
       at thumbnail size. */
    #wtNewsGrid[data-view="list"] .news-box-items-2 .thumb img { width: 100%; height: 100%; object-fit: cover; }
    #wtNewsGrid[data-view="list"] .news-box-items-2 .thumb img + img { display: none; }

    #wtNewsGrid[data-view="list"] .news-box-items-2 .content { padding: 0; }
    #wtNewsGrid[data-view="list"] .news-box-items-2 .content ul { margin-bottom: 4px; }
    #wtNewsGrid[data-view="list"] .news-box-items-2 .content .title {
        font-size: 15.5px;
        line-height: 1.35;
        margin: 0 0 4px;
        display: -webkit-box;
        -webkit-line-clamp: 2;      /* keep every row the same height */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* The "Read more" pill is redundant when the whole row links through. */
    #wtNewsGrid[data-view="list"] .news-box-items-2 .news-btn { display: none; }
}

/* ============================================================
   Footer: three link columns + Client login on the right margin
   The Services column is DB-driven now and a third column ("Areas
   we serve") fills the space that opened up, so the three read as
   one even row. Client login moves to the right edge of its column.
   ============================================================ */
@media (min-width: 992px) {
  .footer-left-item .wt-client-login {
    margin-left: auto;          /* push to the right margin */
    text-align: right;
  }
  .footer-left-item .wt-client-login .wt-cl-btn {
    margin-left: auto;          /* the button is inline-flex; carry it across too */
  }
}
/* Widget headings: one size and weight across all three columns. */
.footer-widget-wrapper-5 .footer-widget-items .widget-head h3 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: 18px;
}
/* Three columns need a tighter row than two did. */
@media (min-width: 1200px) {
  .footer-widget-wrapper-5 .gt-list-area li a { font-size: 15px; }
}

/* Breadcrumb heading is now an <h1> on marketing-mode pages too
   (page-hero.php) - they previously rendered no h1 at all. No sizing rule is
   needed here: `.breadcrumb-wrapper .page-heading h1.split-title` above already
   pins the full ladder (65/50/40/36/34/30/26) for the detail pages that always
   used an h1, and the marketing heading sits in the same .page-heading wrapper.
   That ladder is also monotonic, unlike the theme's h2 ladder, which steps back
   up to 42px at 767px. */

/* ============================================================
   Site-wide search: live results panel + /search page
   The panel drops inside the search overlay, directly under the
   input. .search-popup__content is fixed and centred, so the panel
   is capped and scrolls internally rather than growing off-screen.
   ============================================================ */
.wt-live-results {
  margin-top: 10px;
  background: #ffffff;
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.18);
  overflow-y: auto;
  overscroll-behavior: contain;
  max-height: min(52vh, 430px);
  text-align: left;
}
.wt-live-results[hidden] { display: none; }

.wt-live-loading,
.wt-live-none {
  padding: 22px 20px;
  font-family: "Urbanist", sans-serif;
  font-size: 15px;
  color: #5b6070;
}
.wt-live-none b { color: #101010; }
.wt-live-none span { display: block; margin-top: 6px; font-size: 14px; }
.wt-live-none a { color: var(--theme); }

.wt-live-group + .wt-live-group { border-top: 1px solid rgba(16, 24, 40, 0.07); }
.wt-live-group__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px 8px;
  font-family: "Urbanist", sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: #8a90a0;
}
.wt-live-group__head span {
  background: rgba(16, 24, 40, 0.06);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px; letter-spacing: 0;
  color: #5b6070;
}

.wt-live-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "title type" "excerpt type";
  gap: 2px 12px;
  padding: 10px 20px;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background 140ms ease, border-color 140ms ease;
}
.wt-live-item__title {
  grid-area: title;
  font-family: "Urbanist", sans-serif;
  font-size: 15.5px; font-weight: 500; line-height: 1.35;
  color: #101010;
}
.wt-live-item__excerpt {
  grid-area: excerpt;
  font-size: 13px; line-height: 1.5; color: #6b7183;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
  overflow: hidden;
}
.wt-live-item__type {
  grid-area: type; align-self: center;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: #8a90a0;
  border: 1px solid rgba(16, 24, 40, 0.12);
  border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
.wt-live-item:hover,
.wt-live-item.is-active {
  background: rgba(255, 71, 28, 0.06);
  border-left-color: var(--theme);
}
.wt-live-item:hover .wt-live-item__title,
.wt-live-item.is-active .wt-live-item__title { color: var(--theme); }
.wt-live-results mark {
  background: rgba(255, 71, 28, 0.18);
  color: inherit; padding: 0 1px; border-radius: 2px;
}

.wt-live-all {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px;
  border-top: 1px solid rgba(16, 24, 40, 0.07);
  background: #fbfbfc;
  font-family: "Urbanist", sans-serif;
  font-size: 13.5px; font-weight: 600;
  color: #183057; text-decoration: none;
  position: sticky; bottom: 0;
}
.wt-live-all:hover, .wt-live-all.is-active { color: var(--theme); background: rgba(255, 71, 28, 0.06); }
.wt-live-all i { font-size: 11px; }

/* Short viewports: the overlay is vertically centred, so cap harder. */
@media (max-height: 620px) { .wt-live-results { max-height: 40vh; } }
@media (max-width: 575px)  { .wt-live-item__type { display: none; } }

/* --- /search results page ------------------------------------ */
.wt-search-pageform {
  display: flex; align-items: center; gap: 10px;
  max-width: 680px; margin: 0 0 42px;
  border: 1px solid rgba(16, 24, 40, 0.14);
  border-radius: 999px; padding: 6px 6px 6px 20px;
}
.wt-search-pageform i { color: #8a90a0; font-size: 15px; }
.wt-search-pageform input {
  flex: 1 1 auto; border: 0; outline: 0; background: transparent;
  height: 46px; font-family: "Urbanist", sans-serif; font-size: 16px; color: #101010;
}
.wt-search-empty { color: #6b7183; }

.wt-search-none h2 { font-size: 28px; font-weight: 300; margin-bottom: 8px; }
.wt-search-none a { color: var(--theme); }

.wt-search-group { margin-bottom: 40px; }
.wt-search-group__head {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: #8a90a0;
  padding-bottom: 10px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(16, 24, 40, 0.09);
}
.wt-search-group__head span {
  background: rgba(16, 24, 40, 0.06); border-radius: 999px;
  padding: 2px 9px; font-size: 12px; letter-spacing: 0; color: #5b6070;
}
.wt-search-list { list-style: none; margin: 0; padding: 0; }
.wt-search-list li { border-bottom: 1px solid rgba(16, 24, 40, 0.06); }
.wt-search-list a {
  display: grid; grid-template-columns: 1fr auto;
  grid-template-areas: "title type" "excerpt type";
  gap: 3px 16px; padding: 16px 8px; text-decoration: none;
  transition: background 140ms ease;
}
.wt-search-list a:hover { background: rgba(255, 71, 28, 0.05); }
.wt-search-list__title   { grid-area: title; font-size: 19px; font-weight: 400; color: #101010; }
.wt-search-list a:hover .wt-search-list__title { color: var(--theme); }
.wt-search-list__excerpt { grid-area: excerpt; font-size: 14.5px; line-height: 1.6; color: #6b7183; }
.wt-search-list__type {
  grid-area: type; align-self: center;
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: #8a90a0; border: 1px solid rgba(16, 24, 40, 0.12);
  border-radius: 999px; padding: 4px 10px; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .wt-live-item, .wt-search-list a { transition: none; }
}

/* ============================================================
   Outline button label on light sections
   white.css declares `.theme-btn-main.style-2 .theme-btn {color:#fff}`
   AFTER its `.border-style .theme-btn {color:#000}` rule. Both are
   (0,2,1), so the later one won and every style-2 outline button
   outside the hero rendered white-on-white - invisible. The hero
   only escaped it via a more specific `.hero-1 ...` rule.
   This is (0,3,1), so it beats the style-2 rule everywhere without
   touching the solid (filled) variant.
   ============================================================ */
.theme-btn-main.style-2.border-style .theme-btn { color: #101010; }
.theme-btn-main.style-2.border-style:hover .theme-btn { color: var(--theme); }

/* ============================================================
   "Built to sell faster" section: show immediately
   WOW.js sets visibility:hidden up front and only clears it when its
   reveal fires. Inside ScrollSmoother that reveal often never runs for
   this section, so the image sat invisible long after the user had
   scrolled to it. Same fix already applied to the About band and the
   lets-talk CTAs. The image is also no longer lazy (see index.php).
   ============================================================ */
.why-choose-us-wrapper-5 .wow,
.why-choose-us-wrapper-5 .thumb,
.why-choose-us-wrapper-5 .thumb img,
.why-choose-us-wrapper-5 .choose-us-content .text,
.why-choose-us-wrapper-5 .about-conter-items { visibility: visible !important; }

/* ============================================================
   Mobile side menu (modal): brand navy
   The panel shipped as near-black (#0c0c0c) with a few leftover
   greenish accents from the vendor theme. Re-grounded on the brand
   navy so it matches the footer and the bottom-nav call button.
   ============================================================ */
.mobile-menu-area .mobile-menu-main {
  background-color: #183057;
}
/* Backdrop: a navy wash rather than the theme's cream tint. */
.mobile-menu-area .mobile-menu-overlay {
  background-color: rgba(9, 20, 38, 0.55);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

/* Despite the filename, white-logo.svg is not white - its wordmark is filled
   #183057, i.e. the exact navy this panel now uses, so it rendered invisible
   (only the grey "EXPLORE VIRTUALLY" tagline showed). Whiten it the same way
   the footer does with the identical file. */
.mobile-menu-area .mobile-menu-main .logo img {
  filter: brightness(0) invert(1);
}

/* Navigation */
.mobile-menu-area .mobile-menu-main .menu-list ul li a,
.mobile-menu-area .mobile-menu-main .menu-list ul li {
  color: #ffffff;
}
.mobile-menu-area .mobile-menu-main .menu-list ul li a:hover,
.mobile-menu-area .mobile-menu-main .menu-list ul li a.active {
  color: var(--theme);
}
/* Row separators: hairline white instead of the near-black default,
   which was invisible on navy. */
.mobile-menu-area .mobile-menu-main .menu-list ul li {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* Close button */
.mobile-menu-area .mobile-menu-main .close-mobile-menu i {
  color: #ffffff;
  transition: color 180ms ease;
}
.mobile-menu-area .mobile-menu-main .close-mobile-menu i:hover {
  color: var(--theme);
}

/* Contact block */
.mobile-menu-area .mobile-menu-main .info-title,
.mobile-menu-area .mobile-menu-main .follow-title {
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
}
.mobile-menu-area .mobile-menu-main .contact-details p,
.mobile-menu-area .mobile-menu-main .contact-details a,
.mobile-menu-area .mobile-menu-main p {
  color: #ffffff;
}
.mobile-menu-area .mobile-menu-main .contact-details a:hover { color: var(--theme); }
/* Was a stray mint (#c1d2ce) carried over from the vendor theme. The original
   rule carries the full .off-contact-info .contact-details chain, so match it
   rather than reaching for !important. */
.mobile-menu-area .mobile-menu-main .off-contact-info .contact-details .sub-info,
.mobile-menu-area .mobile-menu-main .sub-info {
  color: rgba(255, 255, 255, 0.72);
}

/* Social icons: outlined chips that fill with brand orange on hover. */
.mobile-menu-area .mobile-menu-main .social-icon a {
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.mobile-menu-area .mobile-menu-main .social-icon a:hover {
  background: var(--theme);
  border-color: var(--theme);
  color: #ffffff;
}
@media (prefers-reduced-motion: reduce) {
  .mobile-menu-area .mobile-menu-main .close-mobile-menu i,
  .mobile-menu-area .mobile-menu-main .social-icon a { transition: none; }
}

/* The camera sits above the sticky header (z 100000). The menus are BELOW the
   header in this theme (mobile 999, offcanvas 9999), so without this it would
   also cover them. main.js puts .no-scroll on <body> whenever either menu
   opens - drop the camera behind them for exactly that time. */
body.no-scroll .wt-cam-wrap { z-index: 1; }

/* ============================================================
   Footer: the client-portal block.

   "Areas we serve" used to share this row, sitting to the left of the client
   portal in the opposite half of the footer. That is why its heading floated
   139px above Company and Services and could never line up with them: it was a
   block styled to look like a column rather than an actual one. It is now a
   real third col-xl-4 in the widget row, so the grid aligns it and all the
   bespoke rules that used to prop it up here are gone.
   ============================================================ */
.wt-foot-lower {
  margin-top: 34px;
}
.wt-foot-lower .wt-client-login {
  max-width: 260px;
  margin-top: 0;
}
@media (min-width: 992px) {
  /* Push the whole portal block to the right edge of its column so the label,
     line and button read as one right-aligned group. margin-left:0 left the box
     on the left while its text-align:right/button still hugged right, which
     looked misaligned. */
  .footer-left-item .wt-foot-lower .wt-client-login { margin-left: auto; text-align: right; }
  .footer-left-item .wt-foot-lower .wt-client-login .wt-cl-btn { margin-left: auto; }
}
@media (max-width: 767px) {
  .wt-foot-lower .wt-client-login { max-width: none; text-align: left; }
  .wt-foot-lower .wt-client-login .wt-cl-btn { margin-left: 0; }
}

/* Client portal is the fourth column of the widget row, styled to match the other
   three: heading in the shared .widget-head size, body copy and button left
   aligned. Below 992px the matchMedia script moves it under the brand blurb and
   the .wt-cl-moved rule governs it, so this is scoped to >=992px only. */
@media (min-width: 992px) {
  .footer-widget-items .wt-foot-portal.wt-client-login {
    margin-top: 0;
    max-width: 100%;
    text-align: left;
  }
  .footer-widget-items .wt-foot-portal.wt-client-login .wt-cl-btn { margin-left: 0; }
  /* Columns line up at the top so all four end level (equal bottom gap) rather
     than stretching to the tallest. */
  .footer-widget-wrapper-5 .row.g-4 { align-items: flex-start; }
}
/* The portal paragraph is a column body, not a right-rail caption. */
.wt-foot-portal.wt-client-login p { max-width: 100%; }

/* The two faint 1px rules that split the top brand/contact band from the columns
   read as a black line quartering the footer. Removed for a cleaner finish. */
.footer-widget-wrapper-5 .footer-right-item::before,
.footer-widget-wrapper-5 .footer-right-item .footer-header-item::before { display: none; }

/* Decent, controlled space between the footer content and the copyright bar
   (was flush at 0). */
.footer-widget-wrapper-5 { padding-bottom: 54px; }
@media (max-width: 991px) { .footer-widget-wrapper-5 { padding-bottom: 40px; } }

/* "View all services" was a <b>, which inherited a near-black colour from the
   global bold rule and rendered 1.45:1 on the navy footer. Plain link colour,
   just weighted. */
.footer-widget-wrapper-5 .gt-list-area li a.wt-foot-more {
  font-weight: 600;
  color: inherit;
}

/* ==========================================================================
   Scoped FAQ block (includes/faq-block.php) — per-area and per-service FAQs.

   Reuses .faq-content-1 (the cream panel) and .accordion-box wholesale, so the
   surface, the numbered rows and the open/close JS all come from the component
   already shipping on /faq. These rules only adapt it from the half-width
   column it was drawn for to a full-width section.
   ========================================================================== */
.wt-faq-panel {
  /* The original leaves 90px on the right to clear the two-column layout.
     Full width wants symmetry. */
  padding: clamp(48px, 6vw, 88px) clamp(24px, 4vw, 64px);
}
/* Eyebrow is white on the dark hero of /faq; this panel is cream. */
.wt-faq-panel .section-title .sub-title { color: #101010; }
.wt-faq-panel .section-title h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.18;
  color: #101010;
  max-width: 20ch;
}
/* The base component capitalises every word, which is fine for the short
   labels on /faq but Title-Cases a full question here: "How Much Does A 360
   Virtual Tour Cost In Dubai Marina?". These are written as sentences, so let
   them read as sentences. */
.wt-faq-panel .accordion-box .block .acc-btn { text-transform: none; }
/* Answers were capped at 455px for the narrow column. Across the full width
   that reads as a stray sliver, so open it up to a proper reading measure. */
.wt-faq-panel .accordion-box .block .acc-content .content .text { max-width: 68ch; }
/* The open/close chevron is absolutely positioned at right:0, so a long
   question runs underneath it ("…virtual tour cost↑"). Reserve its column. */
.wt-faq-panel .accordion-box .block .acc-btn { padding-right: 44px; }
/* Single column on purpose. CSS multi-column was tried here and is wrong for an
   accordion: the browser re-balances on every open/close, so answering one
   question makes the others jump between columns. A single stack with a capped
   measure keeps positions stable and matches /faq. */
.wt-faq-panel .accordion-box { max-width: 76ch; }
@media (max-width: 767px) {
  .wt-faq-panel .accordion-box .block { padding-bottom: 24px; margin-bottom: 24px; }
}

/* ==========================================================================
   Services banner: make the video playable on mobile
   The theme hides .video-circle outright below 1199px, which left the popup
   trigger at 0x0 - there was literally nothing to tap, so the video could not
   be opened on a phone or tablet at all. Bring the button back at a size that
   suits a small screen. Scoped to the services banner (.about-wrapper-2); the
   other .video-circle variants keep the theme's behaviour.
   ========================================================================== */
@media (max-width: 1199px) {
    .about-wrapper-2 .about-video-banner .video-circle {
        display: flex;
        align-items: center;
        justify-content: center;
        /* Centred on the banner rather than the theme's desktop offset. */
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 84px;
        height: 84px;
        z-index: 5;
    }
    /* The rotating word ring is drawn for the desktop composition; at this size
       it only crowds the button. */
    .about-wrapper-2 .about-video-banner .video-circle .text-circle { display: none; }

    .about-wrapper-2 .about-video-banner .video-circle .video-btn {
        position: static;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        margin: 0;
        /* The theme translates the button by half its size to centre it against
           its own absolute positioning. It is a flex child here, so that offset
           would push it off the circle. */
        transform: none;
        border-radius: 50%;
        font-size: 17px;
    }
}