/*----------------------------------------------------------------------
    Template Name: Indochine - Architecture and Interiors HTML Template
    Template URI: https://indochinehtml.lohatheme.com
    Author: Lohatheme
    Author URI:  https://lohatheme.com
    Version: 1.0

    Note: This is Main Style CSS File. */
/*----------------------------------------------------------------------
  CSS INDEX
  ----------------------

    ## Default Style
    ## Common Classes
    ## Repeat Style
    ## Padding Margin
    ## Custom Animation
    ## Header style
    ## Hero Area
    ## Page Banner
    ## About Area
    ## Services Area
    ## Projects Area
    ## Timeline Area
    ## Testimonials Area
    ## CTA Area
    ## Blog Area
    ## About Style 2
    ## Counter Area
    ## Team Area
    ## Contact Area
    ## 404 Area
    ## Main Footer
    ## Intro*/
/* -------------------------------------------------------------- */
/*******************************************************/
/******************* ## Default Style ******************/
/*******************************************************/
* {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--black-30);
  background: #141414;
  font-weight: 400;
  line-height: 28px;
  font-size: 16px;
  /* Two families site-wide: a display serif for headings, a sans for
     everything else. Change them here and the whole site follows. */
  --heading-font: "Playfair Display", Georgia, serif;
  --body-font: "Montserrat", sans-serif;
  font-family: var(--body-font);
  --primary-color: #124185;
  --heading-color: #FFFFFF;
  --secondary-color: #141414;
  --black-120: #101010;
  --black-110: #121212;
  --black-100: #141414;
  --black-90: #2C2C2C;
  --black-80: #434343;
  --black-70: #5B5B5B;
  --black-60: #727272;
  --black-50: #8A8A8A;
  --black-40: #a1a1a1;
  --black-30: #B9B9B9;
  --black-20: #d0d0d0;
  --black-10: #E8E8E8;
  --border-color: #D9DFE7;
}

body:has(.light-mode) {
  color: var(--black-90);
}

a {
  color: var(--black-30);
  cursor: pointer;
  outline: none;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  text-decoration: none;
}

a:hover,
a:focus,
a:visited {
  text-decoration: none;
  outline: none;
}

a:hover {
  color: var(--primary-color);
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: var(--heading-color);
}

.text-white h1,
.text-white h1 a,
.text-white h2,
.text-white h2 a,
.text-white h3,
.text-white h3 a,
.text-white h4,
.text-white h4 a,
.text-white h5,
.text-white h5 a,
.text-white h6,
.text-white h6 a,
.text-white .h1,
.text-white .h1 a,
.text-white .h2,
.text-white .h2 a,
.text-white .h3,
.text-white .h3 a,
.text-white .h4,
.text-white .h4 a,
.text-white .h5,
.text-white .h5 a,
.text-white .h6,
.text-white .h6 a {
  color: var(--heading-color);
}

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

img {
  max-width: 100%;
  display: inline-block;
}

mark {
  color: var(--secondary-color);
  background: transparent;
  text-decoration: underline;
}

/*======= Input Styles =======*/
input,
select,
textarea,
.nice-select,
.form-control {
  width: 100%;
  height: auto;
  padding: 16px 32px;
  background-color: var(--black-100);
  border: 1px solid var(--black-90);
}

.nice-select {
  font-size: 18px;
  line-height: 1.3;
}

.nice-select:after {
  height: 8px;
  width: 8px;
  right: 25px;
  border-color: var(--heading-color);
}

.nice-select .current {
  font-weight: 500;
  color: var(--heading-color);
}

.nice-select .list {
  width: 100%;
  border-radius: 0;
}

textarea {
  display: inherit;
  padding-top: 20px;
}

label {
  cursor: pointer;
  font-weight: 500;
  margin-bottom: 5px;
  color: var(--black-30);
}

.form-group {
  position: relative;
  margin-bottom: 20px;
}

input:focus,
button:focus,
.form-control:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: var(--black-90);
}

input[type=search]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

input[type=search]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {
  display: none;
}

input[type=checkbox],
input[type=radio] {
  height: auto;
  width: auto;
}

.fa,
.fas {
  font-weight: lighter;
}

.fa-long-arrow-right:before,
.fa-long-arrow-left:before {
  font-weight: lighter;
}

.fa-star {
  color: var(--primary-color);
}

.fa-star:before {
  font-size: 12px;
  font-weight: bolder;
}

button.load-more {
  padding: 16px 32px;
  background: var(--primary-color);
  color: #ffffff;
}

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

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

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

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

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

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

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

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

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

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

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

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

.theme-btn {
  padding: 16px 32px;
  background: var(--black-100);
  color: #ffffff;
}

/*******************************************************/
/******************  ## Common Classes *****************/
/*******************************************************/
.page-wrapper {
  position: relative;
  z-index: 9;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  min-width: 300px;
}

@media only screen and (min-width: 1400px) {
  .container {
    max-width: 1410px;
  }
}

.container-fluid {
  padding-left: 0;
  padding-right: 0;
}

@media only screen and (max-width: 375px) {
  .col-small {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.row {
  --bs-gutter-x: 0;
}

.no-gap {
  --bs-gutter-x: 0;
}

/* Gallery & card grids (services, curtains, sofa, wallpaper, mattress, etc.)
   relied on an inline `padding-left/right:15px` for their column gutter. Those
   columns are also `.wow`, and WOW.js rewrites the inline style attribute when
   it animates, wiping that padding out-so the cards/images butted together
   with no horizontal gap. Define the gutter here in CSS (which WOW can't wipe)
   so the spacing holds on both tablet and desktop. */
.col-md-6.mb-30.wow {
  padding-left: 15px;
  padding-right: 15px;
}

@media only screen and (min-width: 1400px) {
  .gap-10 {
    --bs-gutter-x: 10px;
  }
}

@media only screen and (min-width: 1400px) {
  .gap-20 {
    --bs-gutter-x: 20px;
  }
}

@media only screen and (min-width: 1400px) {
  .gap-30 {
    --bs-gutter-x: 30px;
  }
}

@media only screen and (min-width: 1400px) {
  .gap-40 {
    --bs-gutter-x: 40px;
  }
}

@media only screen and (min-width: 1400px) {
  .gap-50 {
    --bs-gutter-x: 50px;
  }
}

@media only screen and (min-width: 1400px) {
  .gap-60 {
    --bs-gutter-x: 60px;
  }
}

@media only screen and (min-width: 1400px) {
  .gap-70 {
    --bs-gutter-x: 70px;
  }
}

@media only screen and (min-width: 1400px) {
  .gap-80 {
    --bs-gutter-x: 80px;
  }
}

@media only screen and (min-width: 1400px) {
  .gap-90 {
    --bs-gutter-x: 90px;
  }
}

@media only screen and (min-width: 1400px) {
  .gap-100 {
    --bs-gutter-x: 100px;
  }

  .gap-128 {
    --bs-gutter-x: 128px;
  }
}

@media only screen and (min-width: 1200px) {
  .row-cols-xl-7>* {
    width: 14.2857%;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
}

/** Section Title style **/
.section-title {
  position: relative;
}

.section-title .sub-title {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  color: var(--primary-color);
  text-transform: uppercase;
  text-align: center;
}

.sub-title {
  color: var(--primary-color);
}

@media only screen and (max-width: 575px) {
  .section-title .sub-title {
    font-size: 16px;
  }
}

.section-title h2 span {
  color: var(--primary-color);
}

.section-title.text-center .bg-text {
  color: var(--heading-color);
}

/** Button style **/
.theme-btn,
a.theme-btn {
  z-index: 1;
  cursor: pointer;
  overflow: hidden;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  text-align: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  color: #ffffff;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.theme-btn i,
a.theme-btn i {
  margin-right: 10px;
}

@media only screen and (max-width: 479px) {

  .theme-btn,
  a.theme-btn {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* Read More */
.read-more {
  font-weight: 500;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  text-decoration: underline;
  text-transform: capitalize;
}

.read-more i {
  float: right;
  font-weight: 400;
  margin-left: 7px;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.read-more:hover {
  color: var(--secondary-color);
  text-decoration: underline;
}

.read-more:hover i {
  margin-left: 10px;
}

/* List style One */
.list-style-one li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.list-style-one li:not(:last-child) {
  margin-bottom: 18px;
}

.list-style-one li:before {
  width: 7px;
  height: 7px;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  content: '';
  margin-top: 8px;
  border-radius: 50%;
  margin-right: 10px;
  background: var(--primary-color);
}

/** Social Link One **/
.social-style-one {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-left: -10px;
  margin-right: -10px;
}

.social-style-one a {
  width: 36px;
  height: 36px;
  line-height: 35px;
  text-align: center;
  border-radius: 50%;
  margin-left: 10px;
  margin-right: 10px;
  color: var(--heading-color);
  border: 1px solid var(--heading-color);
}

.social-style-one a:hover {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

/** Tab Style One **/
ul.nav-pills.tab-style-one {
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
  max-width: 100%;
}

ul.nav-pills.tab-style-one li {
  flex: unset;
}

/* Entrance for the cards a filter brings in. Deliberately opacity + a
   small lift only: isotope positions each .item with its own transform,
   so the animation runs on the card INSIDE the item and never fights it.
   The per-card stagger comes in through --filter-delay, set in script.js. */
@keyframes rhdFilterIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.projects-01 .item .apartment-image.filter-in {
  /* !important because the reveal in script.js pins animation-name inline
     to stop WOW replaying its slide-in over the top of this. */
  animation: rhdFilterIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1)
    var(--filter-delay, 0ms) both !important;
}

@media (prefers-reduced-motion: reduce) {
  .projects-01 .item .apartment-image.filter-in {
    animation: none !important;
  }
}

/* Projects filter: let tabs wrap onto ~2 lines on desktop, centered, no big gaps */
.projects-01 .project-filter {
  flex-wrap: wrap;
  max-width: 100%;
  justify-content: center;
}

/* Kill Bootstrap's nav-fill so tabs are only as wide as their text (removes the big gaps) */
.projects-01 .project-filter.nav-fill .nav-item,
.projects-01 .project-filter li {
  flex: 0 0 auto !important;
  width: auto !important;
}

.projects-01 .project-filter .nav-link {
  white-space: nowrap;
  padding: 10px 12px !important;
  font-size: 12px !important;
}

@media only screen and (max-width: 767px) {
  .projects-01 .project-filter .nav-link {
    padding: 8px 9px !important;
    font-size: 11px !important;
  }
}

ul.nav-pills.tab-style-one {
    display: flex;
    
    gap: 15px; /* Adjust the gap as needed */
    flex-wrap: wrap;
}

ul.nav-pills.tab-style-one .nav-link {
    padding: 10px 32px;
    border-radius: 30px;
    background-color: #124185;
    color: #fff;
    border: 2px solid;
}

.tab-style-one .nav-link {
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid var(--border-color);
}

.light-mode .tab-style-one .nav-link {
  border-bottom: 1px solid var(--black-30);
}

@media only screen and (max-width: 575px) {
  .tab-style-one .nav-link {
    font-size: 20px !important;
  }
}

.tab-style-one .nav-item.current .nav-link {
  color: var(--primary-color);
  background: transparent;
  border-bottom-color: var(--primary-color);
}

.light-mode .tab-style-one .nav-item.current .nav-link {
  color: var(--primary-color);
}

.tab-style-one .nav-link.active {
  color: var(--primary-color);
  background: transparent;
  border-bottom-color: var(--primary-color);
}

.light-mode .tab-style-one .nav-link.active {
  color: var(--primary-color);
}


/*** Preloader style ** */
.preloader {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999999;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background-color: #FFFFFF;
  background-repeat: no-repeat;
  background-position: center center;
}

.preloader .custom-loader {
  width: 55px;
  aspect-ratio: 1;
  --c: conic-gradient(from -90deg, #124185 90deg, #0000 0);
  background: var(--c), var(--c);
  background-size: 40% 40%;
  -webkit-animation: preloader 1s infinite alternate;
  animation: preloader 1s infinite alternate;
}

@-webkit-keyframes preloader {

  0%,
  10% {
    background-position: 0 0, 0 calc(100%/3);
  }

  50% {
    background-position: 0 0, calc(100%/3) calc(100%/3);
  }

  90%,
  100% {
    background-position: 0 0, calc(100%/3) 0;
  }
}

@keyframes preloader {

  0%,
  10% {
    background-position: 0 0, 0 calc(100%/3);
  }

  50% {
    background-position: 0 0, calc(100%/3) calc(100%/3);
  }

  90%,
  100% {
    background-position: 0 0, calc(100%/3) 0;
  }
}

/* Pagination */
.pagination {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-left: 0;
  margin-right: 0;
}

.pagination li:not(:last-child) {
  margin-right: 8px;
}

.pagination li a,
.pagination li .page-link {
  padding: 0;
  border: 1px solid var(--heading-color);
  font-size: 20px;
  width: 56px;
  line-height: 56px;
  -webkit-box-shadow: none;
  box-shadow: none;
  text-align: center;
  color: var(--heading-color);
  background: unset;
}

.page-item:last-child .page-link,
.page-item:first-child .page-link {
  border-radius: unset;
  width: fit-content;
  padding: 0 20px;
}

.pagination li.active .page-link,
.pagination li:hover:not(.disabled) .page-link:hover {
  color: #ffffff;
  background: var(--primary-color);
  border-radius: unset;
  border: 1px solid var(--heading-color);
}


.light-mode .pagination li a,
.light-mode .pagination li .page-link {
  color: var(--black-100);
  border: 1px solid var(--black-100);
}

.light-mode .pagination li.active .page-link,
.light-mode .pagination li:hover:not(.disabled) .page-link:hover {
  border: 1px solid var(--primary-color);
}

/*** Scroll Top style ***/
.scroll-top {
  position: fixed;
  bottom: 25px;
  right: 0;
  width: 40px;
  height: 40px;
  z-index: 99;
  color: #ffffff;
  display: none;
  font-size: 14px;
  cursor: pointer;
  line-height: 40px;
  background: var(--primary-color);
  -webkit-animation: pulse 2s infinite;
  animation: pulse 2s infinite;
}

/* Textvar(--heading-color) */
.text-white *,
.text-white a,
.text-white .read-more,
.text-white .list-style-one li,
.text-white .list-style-one li:before,
.text-white .counter-text-wrap .count-text,
.text-white .hotline .content a:not(:hover) {
  color: var(--heading-color);
}

/*Project Filter*/
.filter-btns-one {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}

.filter-btns-one li {
  cursor: pointer;
  font-size: 16px;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  font-weight: 700;
  padding: 8px 15px;
  margin: 0 10px 20px;
  color: var(--primary-color);
  text-transform: uppercase;
  border: 1px solid var(--border-color);
}

.filter-btns-one li.current {
  color: var(--heading-color);
  background: var(--primary-color);
  border-color: var(--primary-color);
}

/* Position */
.rel {
  position: relative;
}

.z-0 {
  z-index: 0;
}

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

.z-2 {
  z-index: 2;
}

.z-3 {
  z-index: 3;
}

.z-4 {
  z-index: 4;
}

.z-5 {
  z-index: 5;
}

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

.overlay::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  z-index: -1;
  top: 0;
  left: 0;
  opacity: 0.3;
  background-color: var(--heading-color);
}

/* Backgruond Size */
.bgs-cover {
  background-size: cover;
  background-position: center;
}

/* Border Radius */
.br-5 {
  border-radius: 5px;
}

.br-10 {
  border-radius: 10px;
}

.br-15 {
  border-radius: 15px;
}

.br-20 {
  border-radius: 20px;
}

.br-25 {
  border-radius: 25px;
}

.br-30 {
  border-radius: 30px;
}

/*******************************************************/
/******************* ## Repeat Style ******************/
/*******************************************************/
.heading,
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
.tab-style-one .nav-link,
h6,
.h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

.light-mode .heading,
.light-mode h1,
.light-mode .h1,
.light-mode h2,
.light-mode .h2,
.light-mode h3,
.light-mode .h3,
.light-mode h4,
.light-mode .h4,
.light-mode h5,
.light-mode .h5,
.light-mode .tab-style-one .nav-link,
.light-mode h6,
.light-mode .h6 {
  color: #124185;
}

.heading,
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4 {
  font-weight: 900;
}

h1,
.h1 {
  text-shadow: 2px 0 var(--heading-color);
}

h2,
.h2 {
  text-shadow: 2px 0 var(--heading-color);
}

.light-mode h1,
.light-mode .h1,
.light-mode h2,
.light-mode .h2 {
  text-shadow: 2px 0 var(--black-100);
}

@media only screen and (min-width: 1600px) {
  .big-text {
    font-size: 120px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -10px;
  }
}

@media (min-width: 1400px) and (max-width: 1599px) {
  .big-text {
    font-size: 100px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -10px;
  }
}

@media only screen and (min-width: 1400px) {

  h1,
  .h1 {
    line-height: 1.2;
    font-size: 90px;
    letter-spacing: -3px;
  }

  h2,
  .h2 {
    line-height: 1.2;
    font-size: 67px;
    letter-spacing: -3px;
  }

  h3,
  .h3 {
    line-height: 1.2;
    font-size: 51px;
    letter-spacing: -2px;
  }

  h4,
  .h4 {
    line-height: 1.2;
    font-size: 38px;
    letter-spacing: -2px;
  }

  h5,
  .h5 {
    line-height: 1.32;
    font-size: 28px;
  }

  h6,
  .h6 {
    line-height: 1.5;
    font-size: 20px;
  }

}

@media only screen and (max-width: 1399px) {
  .big-text {
    font-size: 90px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -5px;
  }

  h1,
  .h1 {
    line-height: 1.2;
    font-size: 67px;
    letter-spacing: -3px;
  }

  h2,
  .h2 {
    line-height: 1.2;
    font-size: 51px;
    letter-spacing: -2px;
  }

  h3,
  .h3 {
    line-height: 1.2;
    font-size: 38px;
    letter-spacing: -2px;
  }

  h4,
  .h4 {
    line-height: 1.32;
    font-size: 34px;
  }

  h5,
  .h5 {
    line-height: 1.32;
    font-size: 24px;
  }

  h6,
  .h6 {
    line-height: 1.5;
    font-size: 20px;
  }
}

@media only screen and (max-width: 1199px) {
  .big-text {
    font-size: 67px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -3px;
  }

  h1,
  .h1 {
    line-height: 1.2;
    font-size: 51px;
    letter-spacing: -3px;
  }

  h2,
  .h2 {
    line-height: 1.2;
    font-size: 46px;
    letter-spacing: -2px;
  }

}

@media only screen and (max-width: 991px) {
  .big-text {
    font-size: 51px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -3px;
  }

  h1,
  .h1 {
    line-height: 1.2;
    font-size: 46px;
    letter-spacing: -2px;
    text-shadow: unset;
  }

  h2,
  .h2 {
    line-height: 1.2;
    font-size: 38px;
    letter-spacing: -2px;
    text-shadow: unset;
  }

  .light-mode h1,
  .light-mode .h1,
  .light-mode h2,
  .light-mode .h2 {
    text-shadow: unset;
  }

}


@media only screen and (max-width: 767px) {

  h1,
  .h1 {
    line-height: 1.2;
    font-size: 42px;
    letter-spacing: -2px;
  }

  h2,
  .h2 {
    line-height: 1.2;
    font-size: 32px;
    letter-spacing: -2px;
  }

  h3,
  .h3 {
    line-height: 1.32;
    font-size: 30px;
  }

  h4,
  .h4 {
    line-height: 1.5;
    font-size: 26px;
  }

  h5,
  .h5 {
    line-height: 1.5;
    font-size: 22px;
  }
}

/*******************************************************/
/************** ## Padding Margin Spacing *************/
/*******************************************************/
/* Padding Around */
.p-5 {
  padding: 5px !important;
}

.p-10 {
  padding: 10px;
}

.p-15 {
  padding: 15px;
}

.p-20 {
  padding: 20px;
}

.p-25 {
  padding: 25px;
}

.p-30 {
  padding: 30px;
}

.p-35 {
  padding: 35px;
}

.p-40 {
  padding: 40px;
}

.p-45 {
  padding: 45px;
}

.p-50 {
  padding: 50px;
}

.p-55 {
  padding: 55px;
}

.p-60 {
  padding: 60px;
}

.p-65 {
  padding: 65px;
}

.p-70 {
  padding: 70px;
}

.p-75 {
  padding: 75px;
}

.p-80 {
  padding: 80px;
}

.p-85 {
  padding: 85px;
}

.p-90 {
  padding: 90px;
}

.p-95 {
  padding: 95px;
}

.p-100 {
  padding: 100px;
}

.p-105 {
  padding: 105px;
}

.p-110 {
  padding: 110px;
}

.p-115 {
  padding: 115px;
}

.p-120 {
  padding: 120px;
}

.p-125 {
  padding: 125px;
}

.p-130 {
  padding: 130px;
}

.p-135 {
  padding: 135px;
}

.p-140 {
  padding: 140px;
}

.p-145 {
  padding: 145px;
}

.p-150 {
  padding: 150px;
}

.p-155 {
  padding: 155px;
}

.p-160 {
  padding: 160px;
}

.p-165 {
  padding: 165px;
}

.p-170 {
  padding: 170px;
}

.p-175 {
  padding: 175px;
}

.p-180 {
  padding: 180px;
}

.p-185 {
  padding: 185px;
}

.p-190 {
  padding: 190px;
}

.p-195 {
  padding: 195px;
}

.p-200 {
  padding: 200px;
}

.p-205 {
  padding: 205px;
}

.p-210 {
  padding: 210px;
}

.p-215 {
  padding: 215px;
}

.p-220 {
  padding: 220px;
}

.p-225 {
  padding: 225px;
}

.p-230 {
  padding: 230px;
}

.p-235 {
  padding: 235px;
}

.p-240 {
  padding: 240px;
}

.p-245 {
  padding: 245px;
}

.p-250 {
  padding: 250px;
}

/* Padding Top */
.pt-5,
.py-5 {
  padding-top: 5px !important;
}

.pt-10,
.py-10 {
  padding-top: 10px;
}

.pt-15,
.py-15 {
  padding-top: 15px;
}

.pt-20,
.py-20 {
  padding-top: 20px;
}

.pt-25,
.py-25 {
  padding-top: 25px;
}

.pt-30,
.py-30 {
  padding-top: 30px;
}

.pt-35,
.py-35 {
  padding-top: 35px;
}

.pt-40,
.py-40 {
  padding-top: 40px;
}

.pt-45,
.py-45 {
  padding-top: 45px;
}

.pt-50,
.py-50 {
  padding-top: 50px;
}

.pt-55,
.py-55 {
  padding-top: 55px;
}

.pt-60,
.py-60 {
  padding-top: 60px;
}

.pt-65,
.py-65 {
  padding-top: 65px;
}

.pt-70,
.py-70 {
  padding-top: 70px;
}

.pt-75,
.py-75 {
  padding-top: 75px;
}

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

.pt-85,
.py-85 {
  padding-top: 85px;
}

.pt-90,
.py-90 {
  padding-top: 90px;
}

.pt-95,
.py-95 {
  padding-top: 95px;
}

.pt-100,
.py-100 {
  padding-top: 100px;
}

.pt-105,
.py-105 {
  padding-top: 105px;
}

.pt-110,
.py-110 {
  padding-top: 110px;
}

.pt-115,
.py-115 {
  padding-top: 115px;
}

.pt-120,
.py-120 {
  padding-top: 120px;
}

.pt-125,
.py-125 {
  padding-top: 125px;
}

.py-128 {
  padding: 60px 0;
}

/* Section spacing was too heavy site-wide-scale it down on smaller screens. */
@media (max-width: 991px) {
  .py-128 {
    padding: 46px 0;
  }
}

@media (max-width: 767px) {
  .py-128 {
    padding: 34px 0;
  }
}

.pt-130,
.py-130 {
  padding-top: 130px;
}

.pt-135,
.py-135 {
  padding-top: 135px;
}

.pt-140,
.py-140 {
  padding-top: 140px;
}

.pt-145,
.py-145 {
  padding-top: 145px;
}

.pt-150,
.py-150 {
  padding-top: 150px;
}

.pt-155,
.py-155 {
  padding-top: 155px;
}

.pt-160,
.py-160 {
  padding-top: 160px;
}

.pt-165,
.py-165 {
  padding-top: 165px;
}

.pt-170,
.py-170 {
  padding-top: 170px;
}

.pt-175,
.py-175 {
  padding-top: 175px;
}

.pt-180,
.py-180 {
  padding-top: 180px;
}

.pt-185,
.py-185 {
  padding-top: 185px;
}

.pt-190,
.py-190 {
  padding-top: 190px;
}

.pt-195,
.py-195 {
  padding-top: 195px;
}

.pt-200,
.py-200 {
  padding-top: 200px;
}

.pt-205,
.py-205 {
  padding-top: 205px;
}

.pt-210,
.py-210 {
  padding-top: 210px;
}

.pt-215,
.py-215 {
  padding-top: 215px;
}

.pt-220,
.py-220 {
  padding-top: 220px;
}

.pt-225,
.py-225 {
  padding-top: 225px;
}

.pt-230,
.py-230 {
  padding-top: 230px;
}

.pt-235,
.py-235 {
  padding-top: 235px;
}

.pt-240,
.py-240 {
  padding-top: 240px;
}

.pt-245,
.py-245 {
  padding-top: 245px;
}

.pt-250,
.py-250 {
  padding-top: 250px;
}

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

/* Padding Bottom */
.pb-5,
.py-5 {
  padding-bottom: 5px !important;
}

.pb-10,
.py-10 {
  padding-bottom: 10px;
}

.pb-15,
.py-15 {
  padding-bottom: 15px;
}

.pb-20,
.py-20 {
  padding-bottom: 20px;
}

.pb-25,
.py-25 {
  padding-bottom: 25px;
}

.pb-30,
.py-30 {
  padding-bottom: 30px;
}

.pb-35,
.py-35 {
  padding-bottom: 35px;
}

.pb-40,
.py-40 {
  padding-bottom: 40px;
}

.pb-45,
.py-45 {
  padding-bottom: 45px;
}

.pb-50,
.py-50 {
  padding-bottom: 50px;
}

.pb-55,
.py-55 {
  padding-bottom: 55px;
}

.pb-60,
.py-60 {
  padding-bottom: 60px;
}

.pb-64,
.py-64 {
  padding-bottom: 64px;
}

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

.pb-65,
.py-65 {
  padding-bottom: 65px;
}

.pb-70,
.py-70 {
  padding-bottom: 70px;
}

.pb-75,
.py-75 {
  padding-bottom: 75px;
}

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

.pb-85,
.py-85 {
  padding-bottom: 85px;
}

.pb-90,
.py-90 {
  padding-bottom: 90px;
}

.pb-95,
.py-95 {
  padding-bottom: 95px;
}

.pb-100,
.py-100 {
  padding-bottom: 100px;
}

.pb-105,
.py-105 {
  padding-bottom: 105px;
}

.pb-110,
.py-110 {
  padding-bottom: 110px;
}

.pb-115,
.py-115 {
  padding-bottom: 115px;
}

.pb-120,
.py-120 {
  padding-bottom: 120px;
}

.pb-125,
.py-125 {
  padding-bottom: 125px;
}

.pb-130,
.py-130 {
  padding-bottom: 130px;
}

.pb-135,
.py-135 {
  padding-bottom: 135px;
}

.pb-140,
.py-140 {
  padding-bottom: 140px;
}

.pb-145,
.py-145 {
  padding-bottom: 145px;
}

.pb-150,
.py-150 {
  padding-bottom: 150px;
}

.pb-155,
.py-155 {
  padding-bottom: 155px;
}

.pb-160,
.py-160 {
  padding-bottom: 160px;
}

.pb-165,
.py-165 {
  padding-bottom: 165px;
}

.pb-170,
.py-170 {
  padding-bottom: 170px;
}

.pb-175,
.py-175 {
  padding-bottom: 175px;
}

.pb-180,
.py-180 {
  padding-bottom: 180px;
}

.pb-185,
.py-185 {
  padding-bottom: 185px;
}

.pb-190,
.py-190 {
  padding-bottom: 190px;
}

.pb-195,
.py-195 {
  padding-bottom: 195px;
}

.pb-200,
.py-200 {
  padding-bottom: 200px;
}

.pb-205,
.py-205 {
  padding-bottom: 205px;
}

.pb-210,
.py-210 {
  padding-bottom: 210px;
}

.pb-215,
.py-215 {
  padding-bottom: 215px;
}

.pb-220,
.py-220 {
  padding-bottom: 220px;
}

.pb-225,
.py-225 {
  padding-bottom: 225px;
}

.pb-230,
.py-230 {
  padding-bottom: 230px;
}

.pb-235,
.py-235 {
  padding-bottom: 235px;
}

.pb-240,
.py-240 {
  padding-bottom: 240px;
}

.pb-245,
.py-245 {
  padding-bottom: 245px;
}

.pb-150,
.py-150 {
  padding-top: 150px;
  padding-bottom: 150px;
}

.pr-64 {
  padding-right: 64px;
}

.pr-128 {
  padding-right: 128px;
}

.pl-64 {
  padding-left: 64px;
}

.pl-128 {
  padding-right: 128px;
}

/* Margin Top */
.mt-5,
.my-5 {
  margin-top: 5px !important;
}

.mt-10,
.my-10 {
  margin-top: 10px;
}

.mt-15,
.my-15 {
  margin-top: 15px;
}

.mt-20,
.my-20 {
  margin-top: 20px;
}

.mt-25,
.my-25 {
  margin-top: 25px;
}

.mt-30,
.my-30 {
  margin-top: 30px;
}

.mt-35,
.my-35 {
  margin-top: 35px;
}

.mt-40,
.my-40 {
  margin-top: 40px;
}

.mt-45,
.my-45 {
  margin-top: 45px;
}

.mt-50,
.my-50 {
  margin-top: 50px;
}

.mt-55,
.my-55 {
  margin-top: 55px;
}

.mt-60,
.my-60 {
  margin-top: 60px;
}

.mt-64 .my-64 {
  margin-top: 64px;
}

.mt-65,
.my-65 {
  margin-top: 65px;
}

.mt-70,
.my-70 {
  margin-top: 70px;
}

.mt-75,
.my-75 {
  margin-top: 75px;
}

.mt-80,
.my-80 {
  margin-top: 80px;
}

.mt-85,
.my-85 {
  margin-top: 85px;
}

.mt-90,
.my-90 {
  margin-top: 90px;
}

.mt-92 {
  margin-top: 92px;
}

.mt-95,
.my-95 {
  margin-top: 95px;
}

.mt-96,
.my-96 {
  margin-top: 96px;
}


.mt-100,
.my-100 {
  margin-top: 100px;
}

.mt-105,
.my-105 {
  margin-top: 105px;
}

.mt-110,
.my-110 {
  margin-top: 110px;
}

.mt-115,
.my-115 {
  margin-top: 115px;
}

.mt-120,
.my-120 {
  margin-top: 120px;
}

.mt-125,
.my-125 {
  margin-top: 125px;
}

.mt-130,
.my-130 {
  margin-top: 130px;
}

.mt-135,
.my-135 {
  margin-top: 135px;
}

.mt-140,
.my-140 {
  margin-top: 140px;
}

.mt-145,
.my-145 {
  margin-top: 145px;
}

.mt-150,
.my-150 {
  margin-top: 150px;
}

.mt-155,
.my-155 {
  margin-top: 155px;
}

.mt-160,
.my-160 {
  margin-top: 160px;
}

.mt-165,
.my-165 {
  margin-top: 165px;
}

.mt-170,
.my-170 {
  margin-top: 170px;
}

.mt-175,
.my-175 {
  margin-top: 175px;
}

.mt-180,
.my-180 {
  margin-top: 180px;
}

.mt-185,
.my-185 {
  margin-top: 185px;
}

.mt-190,
.my-190 {
  margin-top: 190px;
}

.mt-195,
.my-195 {
  margin-top: 195px;
}

.mt-200,
.my-200 {
  margin-top: 200px;
}

.mt-205,
.my-205 {
  margin-top: 205px;
}

.mt-210,
.my-210 {
  margin-top: 210px;
}

.mt-215,
.my-215 {
  margin-top: 215px;
}

.mt-220,
.my-220 {
  margin-top: 220px;
}

.mt-225,
.my-225 {
  margin-top: 225px;
}

.mt-230,
.my-230 {
  margin-top: 230px;
}

.mt-235,
.my-235 {
  margin-top: 235px;
}

.mt-240,
.my-240 {
  margin-top: 240px;
}

.mt-245,
.my-245 {
  margin-top: 245px;
}

.mt-250,
.my-250 {
  margin-top: 250px;
}

/* Margin Bottom */
.mb-0 {
  margin-bottom: 0;
}

.mb-5,
.my-5 {
  margin-bottom: 5px !important;
}

.mb-10,
.my-10 {
  margin-bottom: 10px;
}

.mb-15,
.my-15 {
  margin-bottom: 15px;
}

.mb-16 {
  margin-bottom: 16px;
}

.mb-20,
.my-20 {
  margin-bottom: 20px;
}

.mb-25,
.my-25 {
  margin-bottom: 25px;
}

.mb-30,
.my-30 {
  margin-bottom: 30px;
}

.mb-32 {
  margin-bottom: 10px;
}

.mb-35,
.my-35 {
  margin-bottom: 35px;
}

.mb-40,
.my-40 {
  margin-bottom: 40px;
}

.mb-45,
.my-45 {
  margin-bottom: 45px;
}

.mb-48,
.my-48 {
  margin-bottom: 48px;
}

.mb-50,
.my-50 {
  margin-bottom: 50px;
}

.mb-55,
.my-55 {
  margin-bottom: 55px;
}

.mb-60,
.my-60 {
  margin-bottom: 60px;
}

.mb-64,
.my-64 {
  margin-bottom: 64px;
}

.mb-65,
.my-65 {
  margin-bottom: 65px;
}

.mb-70,
.my-70 {
  margin-bottom: 70px;
}

.mb-75,
.my-75 {
  margin-bottom: 75px;
}

.mb-80,
.my-80 {
  margin-bottom: 80px;
}

.mb-85,
.my-85 {
  margin-bottom: 85px;
}

.mb-90,
.my-90 {
  margin-bottom: 90px;
}

.mb-95,
.my-95 {
  margin-bottom: 95px;
}

.mb-96 {
  margin-bottom: 96px;
}

.mb-100,
.my-100 {
  margin-bottom: 100px;
}

.mb-105,
.my-105 {
  margin-bottom: 105px;
}

.mb-110,
.my-110 {
  margin-bottom: 110px;
}

.mb-115,
.my-115 {
  margin-bottom: 115px;
}

.mb-120,
.my-120 {
  margin-bottom: 120px;
}

.mb-125,
.my-125 {
  margin-bottom: 125px;
}

.mb-128 {
  margin-bottom: 128px;
}

.mb-130,
.my-130 {
  margin-bottom: 130px;
}

.mb-135,
.my-135 {
  margin-bottom: 135px;
}

.mb-140,
.my-140 {
  margin-bottom: 140px;
}

.mb-145,
.my-145 {
  margin-bottom: 145px;
}

.mb-150,
.my-150 {
  margin-bottom: 150px;
}

.mb-155,
.my-155 {
  margin-bottom: 155px;
}

.mb-160,
.my-160 {
  margin-bottom: 160px;
}

.mb-165,
.my-165 {
  margin-bottom: 165px;
}

.mb-170,
.my-170 {
  margin-bottom: 170px;
}

.mb-175,
.my-175 {
  margin-bottom: 175px;
}

.mb-180,
.my-180 {
  margin-bottom: 180px;
}

.mb-185,
.my-185 {
  margin-bottom: 185px;
}

.mb-190,
.my-190 {
  margin-bottom: 190px;
}

.mb-195,
.my-195 {
  margin-bottom: 195px;
}

.mb-200,
.my-200 {
  margin-bottom: 200px;
}

.mb-205,
.my-205 {
  margin-bottom: 205px;
}

.mb-210,
.my-210 {
  margin-bottom: 210px;
}

.mb-215,
.my-215 {
  margin-bottom: 215px;
}

.mb-220,
.my-220 {
  margin-bottom: 220px;
}

.mb-225,
.my-225 {
  margin-bottom: 225px;
}

.mb-230,
.my-230 {
  margin-bottom: 230px;
}

.mb-235,
.my-235 {
  margin-bottom: 235px;
}

.mb-240,
.my-240 {
  margin-bottom: 240px;
}

.mb-245,
.my-245 {
  margin-bottom: 245px;
}

.mb-250,
.my-250 {
  margin-bottom: 250px;
}

/* Margin Top */
.mt-16 {
  margin-top: 16px !important;
}

.mt-32 {
  margin-top: 32px;
}

/* Margin Right */
.mr-64 {
  margin-right: 64px;
}

.mr-128 {
  margin-right: 128px;
}

/* Margin Left */
.ml-64 {
  margin-left: 64px;
}

/*******************************************************/
/***************** ## Custom Animation ****************/
/*******************************************************/
/* Animation Delay */
.delay-1-0s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.delay-2-0s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.delay-0-1s {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.delay-0-2s {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.delay-0-3s {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.delay-0-4s {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.delay-0-5s {
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.delay-0-6s {
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.delay-0-7s {
  -webkit-animation-delay: 0.7s;
  animation-delay: 0.7s;
}

.delay-0-8s {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.delay-0-9s {
  -webkit-animation-delay: 0.9s;
  animation-delay: 0.9s;
}

.delay-1-1s {
  -webkit-animation-delay: 1.1s;
  animation-delay: 1.1s;
}

.delay-1-2s {
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

.delay-1-3s {
  -webkit-animation-delay: 1.3s;
  animation-delay: 1.3s;
}

.delay-1-4s {
  -webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
}

.delay-1-5s {
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

.delay-1-6s {
  -webkit-animation-delay: 1.6s;
  animation-delay: 1.6s;
}

.delay-1-7s {
  -webkit-animation-delay: 1.7s;
  animation-delay: 1.7s;
}

.delay-1-8s {
  -webkit-animation-delay: 1.8s;
  animation-delay: 1.8s;
}

.delay-1-9s {
  -webkit-animation-delay: 1.9s;
  animation-delay: 1.9s;
}

/* Menu Sticky */
@-webkit-keyframes sticky {
  0% {
    top: -100px;
  }

  100% {
    top: 0;
  }
}

@keyframes sticky {
  0% {
    top: -100px;
  }

  100% {
    top: 0;
  }
}

/* Hero Circle */
@-webkit-keyframes upDownLeft {

  0%,
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }

  25%,
  75% {
    -webkit-transform: translate(0px, 50px);
    transform: translate(0px, 50px);
  }

  50% {
    -webkit-transform: translate(-50px, 50px);
    transform: translate(-50px, 50px);
  }
}

@keyframes upDownLeft {

  0%,
  100% {
    -webkit-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
  }

  25%,
  75% {
    -webkit-transform: translate(0px, 50px);
    transform: translate(0px, 50px);
  }

  50% {
    -webkit-transform: translate(-50px, 50px);
    transform: translate(-50px, 50px);
  }
}

@-webkit-keyframes shapeAnimationOne {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }

  25% {
    -webkit-transform: translate(0px, 150px) rotate(90deg);
    transform: translate(0px, 150px) rotate(90deg);
  }

  50% {
    -webkit-transform: translate(150px, 150px) rotate(180deg);
    transform: translate(150px, 150px) rotate(180deg);
  }

  75% {
    -webkit-transform: translate(150px, 0px) rotate(270deg);
    transform: translate(150px, 0px) rotate(270deg);
  }

  100% {
    -webkit-transform: translate(0px, 0px) rotate(360deg);
    transform: translate(0px, 0px) rotate(360deg);
  }
}

@keyframes shapeAnimationOne {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }

  25% {
    -webkit-transform: translate(0px, 150px) rotate(90deg);
    transform: translate(0px, 150px) rotate(90deg);
  }

  50% {
    -webkit-transform: translate(150px, 150px) rotate(180deg);
    transform: translate(150px, 150px) rotate(180deg);
  }

  75% {
    -webkit-transform: translate(150px, 0px) rotate(270deg);
    transform: translate(150px, 0px) rotate(270deg);
  }

  100% {
    -webkit-transform: translate(0px, 0px) rotate(360deg);
    transform: translate(0px, 0px) rotate(360deg);
  }
}

@-webkit-keyframes shapeAnimationTwo {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }

  25% {
    -webkit-transform: translate(-150px, 0px) rotate(270deg);
    transform: translate(-150px, 0px) rotate(270deg);
  }

  50% {
    -webkit-transform: translate(-150px, 150px) rotate(180deg);
    transform: translate(-150px, 150px) rotate(180deg);
  }

  75% {
    -webkit-transform: translate(0px, 150px) rotate(90deg);
    transform: translate(0px, 150px) rotate(90deg);
  }

  100% {
    -webkit-transform: translate(0px, 0px) rotate(360deg);
    transform: translate(0px, 0px) rotate(360deg);
  }
}

@keyframes shapeAnimationTwo {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }

  25% {
    -webkit-transform: translate(-150px, 0px) rotate(270deg);
    transform: translate(-150px, 0px) rotate(270deg);
  }

  50% {
    -webkit-transform: translate(-150px, 150px) rotate(180deg);
    transform: translate(-150px, 150px) rotate(180deg);
  }

  75% {
    -webkit-transform: translate(0px, 150px) rotate(90deg);
    transform: translate(0px, 150px) rotate(90deg);
  }

  100% {
    -webkit-transform: translate(0px, 0px) rotate(360deg);
    transform: translate(0px, 0px) rotate(360deg);
  }
}

@-webkit-keyframes shapeAnimationThree {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }

  25% {
    -webkit-transform: translate(50px, 150px) rotate(90deg);
    transform: translate(50px, 150px) rotate(90deg);
  }

  50% {
    -webkit-transform: translate(150px, 150px) rotate(180deg);
    transform: translate(150px, 150px) rotate(180deg);
  }

  75% {
    -webkit-transform: translate(150px, 50px) rotate(270deg);
    transform: translate(150px, 50px) rotate(270deg);
  }

  100% {
    -webkit-transform: translate(0px, 0px) rotate(360deg);
    transform: translate(0px, 0px) rotate(360deg);
  }
}

@keyframes shapeAnimationThree {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }

  25% {
    -webkit-transform: translate(50px, 150px) rotate(90deg);
    transform: translate(50px, 150px) rotate(90deg);
  }

  50% {
    -webkit-transform: translate(150px, 150px) rotate(180deg);
    transform: translate(150px, 150px) rotate(180deg);
  }

  75% {
    -webkit-transform: translate(150px, 50px) rotate(270deg);
    transform: translate(150px, 50px) rotate(270deg);
  }

  100% {
    -webkit-transform: translate(0px, 0px) rotate(360deg);
    transform: translate(0px, 0px) rotate(360deg);
  }
}

@-webkit-keyframes shapeAnimationFour {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }

  25% {
    -webkit-transform: translate(-150px -50px) rotate(90deg);
    transform: translate(-150px -50px) rotate(90deg);
  }

  50% {
    -webkit-transform: translate(-150px, -150px) rotate(180deg);
    transform: translate(-150px, -150px) rotate(180deg);
  }

  75% {
    -webkit-transform: translate(-50px, -150px) rotate(270deg);
    transform: translate(-50px, -150px) rotate(270deg);
  }

  100% {
    -webkit-transform: translate(0px, 0px) rotate(360deg);
    transform: translate(0px, 0px) rotate(360deg);
  }
}

@keyframes shapeAnimationFour {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }

  25% {
    -webkit-transform: translate(-150px -50px) rotate(90deg);
    transform: translate(-150px -50px) rotate(90deg);
  }

  50% {
    -webkit-transform: translate(-150px, -150px) rotate(180deg);
    transform: translate(-150px, -150px) rotate(180deg);
  }

  75% {
    -webkit-transform: translate(-50px, -150px) rotate(270deg);
    transform: translate(-50px, -150px) rotate(270deg);
  }

  100% {
    -webkit-transform: translate(0px, 0px) rotate(360deg);
    transform: translate(0px, 0px) rotate(360deg);
  }
}

@-webkit-keyframes shapeAnimationFive {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }

  25% {
    -webkit-transform: translate(-100px -100px) rotate(90deg);
    transform: translate(-100px -100px) rotate(90deg);
  }

  50% {
    -webkit-transform: translate(100px, 50px) rotate(180deg);
    transform: translate(100px, 50px) rotate(180deg);
  }

  75% {
    -webkit-transform: translate(-100px, 150px) rotate(270deg);
    transform: translate(-100px, 150px) rotate(270deg);
  }

  100% {
    -webkit-transform: translate(0px, 0px) rotate(360deg);
    transform: translate(0px, 0px) rotate(360deg);
  }
}

@keyframes shapeAnimationFive {
  0% {
    -webkit-transform: translate(0px, 0px) rotate(0deg);
    transform: translate(0px, 0px) rotate(0deg);
  }

  25% {
    -webkit-transform: translate(-100px -100px) rotate(90deg);
    transform: translate(-100px -100px) rotate(90deg);
  }

  50% {
    -webkit-transform: translate(100px, 50px) rotate(180deg);
    transform: translate(100px, 50px) rotate(180deg);
  }

  75% {
    -webkit-transform: translate(-100px, 150px) rotate(270deg);
    transform: translate(-100px, 150px) rotate(270deg);
  }

  100% {
    -webkit-transform: translate(0px, 0px) rotate(360deg);
    transform: translate(0px, 0px) rotate(360deg);
  }
}

@-webkit-keyframes down-up-one {
  0% {
    -webkit-transform: rotateX(0deg) translateY(0px);
    transform: rotateX(0deg) translateY(0px);
  }

  50% {
    -webkit-transform: rotateX(0deg) translateY(25px);
    transform: rotateX(0deg) translateY(25px);
  }

  100% {
    -webkit-transform: rotateX(0deg) translateY(0px);
    transform: rotateX(0deg) translateY(0px);
  }
}

@keyframes down-up-one {
  0% {
    -webkit-transform: rotateX(0deg) translateY(0px);
    transform: rotateX(0deg) translateY(0px);
  }

  50% {
    -webkit-transform: rotateX(0deg) translateY(25px);
    transform: rotateX(0deg) translateY(25px);
  }

  100% {
    -webkit-transform: rotateX(0deg) translateY(0px);
    transform: rotateX(0deg) translateY(0px);
  }
}

@-webkit-keyframes down-up-two {
  0% {
    -webkit-transform: rotateX(0deg) translate(0px);
    transform: rotateX(0deg) translate(0px);
  }

  50% {
    -webkit-transform: rotateX(0deg) translate(0, -25px);
    transform: rotateX(0deg) translate(0, -25px);
  }

  100% {
    -webkit-transform: rotateX(0deg) translate(0px);
    transform: rotateX(0deg) translate(0px);
  }
}

@keyframes down-up-two {
  0% {
    -webkit-transform: rotateX(0deg) translate(0px);
    transform: rotateX(0deg) translate(0px);
  }

  50% {
    -webkit-transform: rotateX(0deg) translate(0, -25px);
    transform: rotateX(0deg) translate(0, -25px);
  }

  100% {
    -webkit-transform: rotateX(0deg) translate(0px);
    transform: rotateX(0deg) translate(0px);
  }
}

@-webkit-keyframes leftRightOne {

  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  50% {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
  }
}

@keyframes leftRightOne {

  0%,
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  50% {
    -webkit-transform: translateX(50px);
    transform: translateX(50px);
  }
}

@-webkit-keyframes zoomInOut {

  0%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}

@keyframes zoomInOut {

  0%,
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }
}

@-webkit-keyframes pulse {
  to {
    -webkit-box-shadow: 0 0 0 35px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 35px rgba(255, 255, 255, 0);
  }
}

@keyframes pulse {
  to {
    -webkit-box-shadow: 0 0 0 35px rgba(255, 255, 255, 0);
    box-shadow: 0 0 0 35px rgba(255, 255, 255, 0);
  }
}

/*******************************************************/
/******************* ## Header style ******************/
/*******************************************************/
.main-header {
  position: relative;
  left: 0px;
  top: 0px;
  z-index: 999;
  width: 100%;
  -webkit-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.main-header .header-upper {
  z-index: 5;
  width: 100%;
  position: absolute;
  -webkit-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.main-header.fixed-header .header-upper {
  background: var(--black-120);
}

.main-header .logo-outer {
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
}

@media only screen and (max-width: 991px) {
  .main-header .logo-outer {
    display: none;
  }
}

.main-header .logo {
  z-index: 9;
  padding: 2px 0;
  position: relative;
  width: auto;
}

.main-header .logo img {
  width: auto;
  max-height: 62px;
}

.main-menu .mobile-logo img {
  width: auto;
  max-height: 46px;
}

.main-header.menu-absolute .header-upper {
  position: absolute;
}

.main-header.fixed-header .header-upper {
  top: 0;
  left: 0;
  position: fixed;
  -webkit-animation: sticky 1s;
  animation: sticky 1s;
  -webkit-box-shadow: 0px 0px 30px 0px rgba(87, 95, 245, 0.1);
  box-shadow: 0px 0px 30px 0px rgba(87, 95, 245, 0.1);
}

/* Auto-hide: the sticky header slides out of the way while scrolling down and
   comes back the moment the user scrolls up. The class is toggled in script.js. */
.main-header.fixed-header .header-upper {
  will-change: transform;
  -webkit-transition: -webkit-transform 400ms ease, background 500ms ease;
  -o-transition: transform 400ms ease, background 500ms ease;
  transition: transform 400ms ease, background 500ms ease;
}

.main-header.fixed-header.header-hidden .header-upper {
  -webkit-animation: none;
  animation: none;
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

.light-mode .header-upper .search-icon .fa-search:before {
  color: var(--black-30);
}

@media only screen and (min-width: 1200px) {
  .nav-outer+.search-btns {
    margin-left: 64px;
  }

  .search-btns .search-icon {
    margin-left: 64px;
  }
}

@media only screen and (max-width: 1199px) {
  .nav-outer+.search-btns {
    margin-left: 16px;
  }

  .search-btns .search-icon {
    margin-left: 16px;
  }
}

@media only screen and (min-width: 992px) {
  .main-header.fixed-header .main-menu .navbar-collapse>ul>li {
    padding-top: 25px;
    padding-bottom: 25px;
  }

  .main-menu .navbar-collapse li:last-child {
    padding-right: 0;
  }
}

@media only screen and (max-width: 991px) {
  .nav-outer {
    width: 100%;
  }

}

.header-top {
  padding: 16px 0;
}

.header-top .header-info {
  text-align: right;
}

.light-mode .header-top {
  color: var(--black-30);
}

.header-top .header-info i {
  color: var(--primary-color);
  margin-right: 8px;
}

.header-top .header-info .email {
  margin-left: 64px;
}

header form.search-form {
  display: none;
  position: relative;
  margin: 64px 0;
}

header form.search-form.current {
  display: inherit;
}

header form.search-form input {
  color: var(--heading-color);
}

header form.search-form button {
  color: var(--heading-color);
  background: transparent;
  padding: 16px 32px;
  position: absolute;
  right: 0;
}

/** Header Main Menu **/
@media only screen and (max-width: 991px) {
  .main-menu {
    width: 100%;
  }
}

.main-menu .mobile-logo {
  margin-right: auto;
}

@media only screen and (max-width: 575px) {
  .main-menu .mobile-logo {
    max-width: 150px;
  }
}

@media only screen and (max-width: 991px) {
  .main-menu .collapse {
    overflow: auto;
  }
}

.main-menu .navbar-collapse {
  padding: 0px;
}

.main-menu .navbar-collapse>ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media only screen and (max-width: 991px) {
  .main-menu .navbar-collapse>ul {
    display: block;
    padding: 25px 0;
    background: var(--black-100);
  }

  .main-menu .navbar-collapse>ul>li:last-child {
    border-bottom: 1px solid var(--black-90);
  }
}

@media only screen and (min-width: 992px) {
  .main-menu .navbar-collapse>ul>li {
    position: relative;
  }

}

.main-menu .navbar-collapse>ul>li>a {
  text-transform: uppercase;
}

@media only screen and (min-width: 992px) {
  .main-menu .navbar-collapse>ul>li>a {
    color: var(--black-30);
  }

  .header-upper.style-2 .main-menu .navbar-collapse>ul>li>a {
    color: var(--heading-color);
  }
}

@media only screen and (max-width: 991px) {
  .main-menu .navbar-collapse {
    left: 0;
    width: 100%;
    position: absolute;
    max-height: calc(100vh - 80px);
  }
}

.main-menu .navbar-collapse li {
  padding: 32px 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

@media only screen and (max-width: 1399px) {
  .main-menu .navbar-collapse li {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media only screen and (max-width: 991px) {
  .main-menu .navbar-collapse li {
    display: block;
    padding: 0 15px;
    border-top: 1px solid var(--black-90);
  }
}

.main-menu .navbar-collapse li.dropdown .dropdown-btn {
  cursor: pointer;
  font-size: 12px;
  margin-left: 5px;
}

@media only screen and (min-width: 992px) {
  .main-menu .navbar-collapse li.dropdown .dropdown-btn {
    color: var(--black-30);
  }

  .main-menu .navbar-collapse li li:first-child {
    border-top: none;
  }
}

@media only screen and (max-width: 991px) {
  .main-menu .navbar-collapse li.dropdown .dropdown-btn {
    position: absolute;
    right: 10px;
    top: 0;
    width: 50px;
    height: 43px;
    border-left: 1px solid var(--black-90);
    text-align: center;
    line-height: 43px;
  }
}

.main-menu .navbar-collapse li a {
  display: block;
  opacity: 1;
  font-family: var(--heading-font);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.5px;
  position: relative;
  text-transform: capitalize;
  -webkit-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

@media only screen and (max-width: 991px) {
  .main-menu .navbar-collapse li a {
    padding: 10px 10px;
    line-height: 22px;
  }
}

.main-menu .navbar-collapse li.current>a,
.main-menu .navbar-collapse li.current-menu-item>a {
  font-weight: 600;
}

.main-menu .navbar-collapse li li {
  border-top: 1px solid var(--black-90);
  background: var(--black-100);
}

.main-menu .navbar-collapse li li a {
  text-transform: capitalize;
  color: var(--black-30);
}

.main-menu .navbar-collapse li li a:before {
  display: none;
}

.main-menu .navbar-collapse li .megamenu {
  position: absolute;
  left: 0px;
  top: 100%;
  width: 100%;
  z-index: 100;
  display: none;
  padding: 20px 0;
  background: #ffffff;
  -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
}

.main-menu .navbar-collapse li .megamenu:after {
  display: block;
  clear: both;
  content: "";
}

@media only screen and (max-width: 991px) {
  .main-menu .navbar-collapse li .megamenu {
    position: relative;
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 100%;
  }

  .main-menu .navbar-collapse li .megamenu .container {
    max-width: 100%;
  }

  .main-menu .navbar-collapse li .megamenu .row {
    margin: 0px;
  }
}

.main-menu .navbar-collapse li .megamenu ul {
  display: block;
  position: relative;
  top: 0;
  width: 100%;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.main-menu .navbar-collapse li ul {
  position: absolute;
  left: inherit;
  top: 100%;
  min-width: 250px;
  z-index: 100;
  display: none;
  background: #ffffff;
  -webkit-box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
  box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.05), -2px 0px 5px 1px rgba(0, 0, 0, 0.05);
}

@media only screen and (max-width: 991px) {
  .main-menu .navbar-collapse li ul {
    position: relative;
    display: none;
    width: 100%;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  .main-menu .navbar-collapse li ul:after {
    display: block;
    clear: both;
    content: "";
  }
}

@media only screen and (max-width: 991px) and (max-width: 375px) {
  .main-menu .navbar-collapse li ul {
    min-width: auto;
  }
}

.main-menu .navbar-collapse li ul li {
  width: 100%;
  padding: 10px 20px;
}

@media only screen and (max-width: 991px) {
  .main-menu .navbar-collapse li ul li {
    padding: 0 15px;
  }
}

.main-menu .navbar-collapse li ul li ul {
  left: 100%;
  top: 0%;
}

@media only screen and (max-width: 991px) {
  .main-menu .navbar-collapse li ul li ul {
    left: auto;
  }
}

.main-menu .navbar-header {
  display: none;
}

@media only screen and (max-width: 991px) {
  .main-menu .navbar-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: start;
  }
}

.main-menu .navbar-header .navbar-toggle {
  width: 46px;
  height: 46px;
  float: right;
  cursor: pointer;
  padding: 5px 14px;
  background: #ffffff;
}

/* Bars are brand blue: the button sits on a white header, so white bars
   would be invisible. */
.main-menu .navbar-header .navbar-toggle .icon-bar {
  background: var(--primary-color);
  height: 2px;
  display: block;
  margin: 4px 0;
}

.main-menu .navbar-header .navbar-toggle .icon-bar:nth-child(2) {
  margin-right: 30%;
}

.main-menu .navbar-header .navbar-toggle .icon-bar:nth-child(3) {
  margin-right: 60%;
}

/* Search Btns */
.search-btns {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-left: 1px solid var(--black-30);
}

/* Menuvar(--heading-color) */
.main-header.menu-white .nav-search>button {
  color: var(--heading-color);
}

@media only screen and (min-width: 992px) {

  .main-header.menu-white .main-menu .navigation>li>a,
  .main-header.menu-white .main-menu .navigation>.dropdown>.dropdown-btn {
    color: var(--heading-color);
  }
}

.main-header.menu-white .main-menu .navigation li li a:hover {
  color: var(--primary-color);
}

.main-header.menu-white .menu-sidebar button .icon-bar,
.main-header.menu-white .main-menu .navbar-toggle .icon-bar {
  background: var(--heading-color);
}

.main-header.menu-white .toggle-btn {
  --c: conic-gradient(from -90deg, var(--heading-color) 90deg, #0000 0);
}

/* The chevron glyph is drawn by this :before, so it needs its own colour-the
   .dropdown-btn around it is already dark. --black-30 left it pale grey next to
   the black "SERVICES" label. */
.light-mode .fa-chevron-down:before {
  color: var(--secondary-color);
}

/*******************************************************/
/******************** ## Hero Area ********************/
/*******************************************************/
.hero-area {
  position: relative;
}

.light-mode .hero-area {
  background: var(--heading-color);
  padding-top: 33px;
  padding-bottom:33px
}

.rotate-hero {
  width: 725px;
  color: var(--black-30);
  font-size: 140px;
  text-transform: uppercase;
  transform: rotate(-90deg);
  letter-spacing: -12px;
  position: absolute;
  left: -300px;
  line-height: 190px;
  bottom: 255px;
  text-shadow: 2px 0 var(--black-30);
  white-space: nowrap;
}

.light-mode .rotate-hero {
  color: #124185;
}

.hero-area .bg-img {
  margin-left: 240px;
}

.hero-img {
  height: 725px;
  object-fit: cover;
}

.hero-content {
  position: absolute;
  bottom: 72px;
  background-color: var(--black-100);
  max-width: 310px;
  padding: 32px;
  z-index: 9;
}

.carousel-indicators {
  margin-bottom: -64px;
}

.carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  margin-right: 8px;
  margin-left: 8px;
  border: 1px solid var(--heading-color);
  background-color: transparent;
}

.light-mode .carousel-indicators [data-bs-target]:not(.active) {
  border: 1px solid var(--black-100);
}

.light-mode .carousel-indicators:has(.carousel-list-images) [data-bs-target]:not(.active) {
  border: none;
}

.carousel-indicators button.active {
  border: 1px solid var(--primary-color);
  background-color: var(--primary-color);
}

.carousel-item {
  transition: transform 1s ease-in-out;
}

.hero-content .hero-btn {
  margin-top: 96px;
}

.hero-btn {
  height: 100%;
  display: flex;
  vertical-align: middle;
}

.hero-btn .btn-icon {
  margin-left: 16px;
  display: flex;
}

.btn-icon .circle {
  border: 1px solid var(--black-30);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-block;
  margin: auto 0;
}

.btn-icon .dot {
  background: var(--black-30);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  display: inline-block;
  margin: auto 0 auto -18px;
}

.btn-icon .line {
  background: var(--black-30);
  width: 40px;
  height: 1px;
  display: inline-block;
  margin: auto 0;
}

.btn-icon .fa {
  margin: auto 0 auto -12px;
  line-height: inherit;
}

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

  to {
    transform: rotate(360deg);
  }
}

.hero-btn:hover .circle {
  border-style: dashed;
  border-color: var(--primary-color);
  webkit-animation: rotate 4s infinite linear 0.3s;
  -khtml-animation: rotate 4s infinite linear 0.3s;
  -moz-animation: rotate 4s infinite linear 0.3s;
  -ms-animation: rotate 4s infinite linear 0.3s;
  -o-animation: rotate 4s infinite linear 0.3s;
  animation: rotate 4s infinite linear 0.3s;
  */ animation: rotate 4s infinite linear 0.3s;
}

.hero-btn:hover .line,
.hero-btn:hover .dot {
  background: var(--primary-color);
  border-color: var(--primary-color);
}

.hero-content .hero-btn {
  margin-right: 40px;
}

@media only screen and (max-width: 1400px) {
  .hero-area .bg-img {
    margin-left: 100px;
  }
}

@media only screen and (max-width: 1199px) {

  .rotate-hero {
    font-size: 135px;
    letter-spacing: -12px;
    left: -300px;
  }

  .hero-img {
    height: 556px;
    object-fit: cover;
  }

}

@media only screen and (max-width: 991px) {
  .hero-area .bg-img {
    margin-left: 200px;
  }

  .hero-content {
    left: 128px;
  }

  .rotate-hero {
    font-size: 120px;
    letter-spacing: -14px;
    left: -318px;
  }

  .hero-img {
    height: 400px;
    object-fit: cover;
  }

  .hero-area {
    margin-top: 64px;
  }

  .hero-content .hero-btn {
    margin-top: 64px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-area .carousel-item .d-flex {
    display: block !important;
  }

  .hero-area .col-lg-2:has(.rotate-hero) {
    display: none;
  }

  /* Image first, text card second. The DOM order is card-then-image (needed for
     the desktop overlay), so reverse it here rather than moving the markup. */
  .hero-area .carousel-item .col-lg-10.d-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }

  .hero-area .hero-content {
    padding: 64px;
    width: 100%;
    position: unset;
    max-width: 100%;
  }

  .hero-area .bg-img {
    margin-left: 0;
  }

  .hero-area .hero-img {
    width: 100%;
  }

}

@media only screen and (max-width: 576px) {
  .hero-area .hero-content {
    padding: 32px;
  }
}

.light-mode .hero-area h6 {
  color: var(--black-30);
}

/*hero-area-2  ---- index-2*/
.hero-area-2 {
  margin-top: -104px;
}

.light-mode .hero-area-2 h1 {
  color: white;
}

@media(min-width: 992px) {
  .light-mode .hero-area-2 h1 {
    text-shadow: 2px 0 white;
  }
}

.hero-area-2 .slider-content {
  background-size: cover;
  padding: 372px 0 268px 0;
}

.hero-area-2 .search-form {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-area-2 form {
  position: relative;
}

.hero-area-2 form input {
  border: 1px solid var(--heading-color);
  color: var(--heading-color);
}

.hero-area-2 form button {
  color: var(--heading-color);
  background: transparent;
  padding: 16px 32px;
  position: absolute;
  right: 0;
}

@media only screen and (max-width: 991px) {
  .header-top .mobile-none {
    display: none;
  }

  .hero-area-2 .search-form {
    width: 85%;
  }
}

@media only screen and (max-width: 576px) {
  .header-top .header-info {
    display: grid;
  }
}

/*******************************************************/
/******************* ## Page Banner *******************/
/*******************************************************/
.banner-area {
  margin-top: 90px;
  background-size: cover;
  background-color: var(--black-80);
  background-position: bottom;
}

.banner-content h1 {
  color: var(--heading-color);
  margin-bottom: 25px;
}


.banner-content p {
  color: var(--heading-color);
}

.banner-content .error-text {
  color: var(--heading-color);
  display: block;
  line-height: 1;
  font-size: 170px;
  font-weight: 700;
}

@media only screen and (max-width: 767px) {
  .banner-content .error-text {
    font-size: 120px;
  }
}

@media only screen and (max-width: 479px) {
  .banner-content .error-text {
    font-size: 80px;
  }
}

@media only screen and (min-width: 992px) {
  .banner-content .theme-btn.style-three {
    padding: 16px 30px;
  }
}

.banner-content .blog-meta {
  font-size: 16px;
}

.breadcrumb {
  padding: 0;
  margin: 0 auto;
  font-size: 16px;
  background: transparent;
  text-transform: capitalize;
  display: inline-block;
}

.breadcrumb .breadcrumb-item {
  padding: 0;
  display: inline-block;
}

.breadcrumb .breadcrumb-item a:not(:hover) {
  color: var(--heading-color);
}

.breadcrumb .breadcrumb-item {
  color: var(--heading-color);
}

.breadcrumb .breadcrumb-item:not(:first-child)::before {
  margin-left: 16px;
  margin-right: 16px;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  color: var(--heading-color);
  padding-right: 0;
  content: "/";
}

/*******************************************************/
/******************** ## About Area ********************/
/*******************************************************/
.light-mode .about-area {
  background: var(--black-10);
}

.about-area .nav-tabs {
  border-bottom: none;
  width: 100%;
}

.about-area .nav-tabs .nav-link {
  padding: 0 15px;
}

.about-area .nav-tabs li:first-child .nav-link {
  padding-left: 0 !important;
}

.about-area .nav-tabs li:last-child .nav-link {
  padding-right: 0 !important;
}

/* The whole who-we-are / mission / vision block is sized to stay inside one
   screen: the panel images cap at 620px but shrink with the viewport so the
   section (padding + image) never runs past the fold on shorter laptops. */
.about-area.py-128 {
  padding-top: 60px;
  padding-bottom: 60px;
}

.about-area .nav-tabs .nav-item:has(.nav-link.active) {
  height: 100%;
  max-height: 700px;
}

.about-area .nav-tabs .nav-item .text {
  width: 37%;
  max-width: 330px;
  height: 100%;
  max-height: 700px;
  padding-right: 30px;
  text-align: left;
}

.about-area .nav-tabs .nav-item .big-image {
  width: 100%;
  max-width: 570px;
  height: 620px;
  height: min(620px, calc(100vh - 250px));
  object-fit: cover;
  position: relative;
}

.about-area .nav-tabs .nav-item .small-image {
  width: 100%;
  max-width: 210px;
  height: 620px;
  height: min(620px, calc(100vh - 250px));
  object-fit: cover;
}

.about-area .nav-tabs .nav-item:has(.nav-link) .text,
.about-area .nav-tabs .nav-item:has(.nav-link) .big-image {
  display: none;
}

.about-area .nav-tabs .nav-item:has(.nav-link.active) .small-image {
  display: none;
}

.about-area .nav-tabs .nav-item:has(.nav-link.active) .text,
.about-area .nav-tabs .nav-item:has(.nav-link.active) .big-image {
  display: block;
}

.about-area .nav-tabs .nav-item.show .nav-link,
.about-area .nav-tabs .nav-link.active {
  background-color: unset;
  border-color: unset;
  color: var(--black-30);
}

.about-area .nav-tabs .nav-link {
  border: unset;
  color: var(--black-30);
}

.light-mode .about-area .nav-tabs .nav-item.show .nav-link,
.light-mode .about-area .nav-tabs .nav-link.active,
.light-mode .about-area .nav-tabs .nav-link {
  color: var(--black-90);
}

.about-area .h4-rotate {
  transform: rotate(-90deg);
  width: 350px;
  position: absolute;
  height: 45.6px;
  left: -159px;
  top: 151px;
  text-align: end;
}

.light-mode .about-area .h4-rotate {
  color: #124185;
}

.about-area .text {
  align-self: flex-end;
}

/* The panel title is rotated into a vertical strip about 40px wide at the left
   edge of the panel. The paragraphs are bottom-aligned, so on the shorter panel
   they now reach up into that strip-indent them clear of it. Only needed
   above 1199px; below that the title un-rotates and sits in normal flow. */
@media only screen and (min-width: 1200px) {
  .about-area .nav-tabs .nav-item .text {
    padding-left: 48px;
    padding-right: 20px;
    width: 400px;
  }
}

.about-area .small-image {
  cursor: pointer;
}

.about-area .about-content {
  position: relative;
  display: flex;
}

.p-rotate {
  transform: rotate(-90deg);
  background-color: #124185;
  color: var(--heading-color);
  padding: 8px 16px;
  width: fit-content;
  position: absolute;
  top: 66px;
  right: -36px;
}

.about-content .number {
  position: absolute;
  bottom: -12px;
  right: 14px;
}

/* The panel number and vertical label hang off the bottom/right of the big
   image, but they resolve against .about-content-whose height is the TALLER
   of the text column and the image. On the "Who We Are" panel the text runs
   longer than the image, which dropped the number below it. Anchoring them to
   the image wrapper instead keeps the number on the image on every panel.
   Scoped to the open panel: on the closed ones the wrapper's big image is
   hidden and .about-content (sized by the small image) is the right anchor. */
.about-area .nav-tabs .nav-item:has(.nav-link.active) .about-content>div:not(.text) {
  position: relative;
  align-self: flex-start;
}

.light-mode .about-content .number {
  color: white;
}

@media(min-width: 992px) {
  .light-mode .about-content .number {
    text-shadow: 2px 0 white;
  }
}

.about-area .big-image {
  transition: transform 1.5s ease;
}

.about-area .nav-tabs .nav-item:has(.nav-link.active) .big-image {
  transform: transform 1.5s ease;
}

@media only screen and (max-width: 1420px) {
  .about-area .nav-tabs .nav-item .text {
    max-width: 310px;
  }

  .about-area .nav-tabs .nav-item .big-image {
    max-width: 525px;
    height: min(620px, calc(100vh - 250px));
    object-fit: cover;
  }

  .about-area .nav-tabs .nav-item .small-image {
    max-width: 110px;
    height: min(620px, calc(100vh - 250px));
    object-fit: cover;
  }

}

@media only screen and (max-width: 1199px) {
  .about-area .h4-rotate {
    transform: unset;
    position: unset;
    text-align: left;
    height: auto;
    width: auto;
  }

  .about-area .nav-tabs .nav-item .text {
    width: 48%;
  }

  .about-area .nav-tabs .nav-item .big-image {
    max-width: 340px;
    height: min(521px, calc(100vh - 220px));
    object-fit: cover;
  }

  .about-area .nav-tabs .nav-item .small-image {
    height: min(521px, calc(100vh - 220px));
    object-fit: cover;
  }
}

@media only screen and (max-width: 991px) {

  .about-area .nav-tabs .nav-item .text {
    width: 52%;
  }

  .about-area .nav-tabs .nav-item .big-image {
    max-width: 286px;
    height: min(521px, calc(100vh - 220px));
    object-fit: cover;
  }

  .about-area .nav-tabs .nav-item .small-image {
    width: 40px;
    height: min(521px, calc(100vh - 220px));
    object-fit: cover;
  }

  .about-style-2 .left {
    margin-bottom: 64px;
  }

  .about-area .nav-tabs .nav-link {
    padding: 0 5px;
  }

  .about-content .number {
    right: 32px;
  }

  .about-area .p-rotate {
    right: -18px;
  }

  .about-area .nav-link:not(.active) .p-rotate,
  .about-area .nav-link:not(.active) .number {
    display: none;
  }

}

@media only screen and (max-width: 767px) {

  .about-area .nav-tabs .nav-item:has(.nav-link) .text,
  .about-area .nav-tabs .nav-item:has(.nav-link) .big-image {
    display: block;
  }

  .about-area .nav-tabs .nav-item:has(.nav-link) .small-image {
    display: none;
  }

  /* Every panel shows its big image from here down, so every panel-not just
     the open one-needs the number anchored to the image. */
  .about-area .about-content>div:not(.text) {
    position: relative;
    align-self: flex-start;
  }

  .about-area .nav-link:not(.active) .p-rotate,
  .about-area .nav-link:not(.active) .number {
    display: inherit;
  }

  .about-area button:not(:disabled) {
    cursor: unset;
  }

  /* Stacked from here down, so the one-screen height cap must come off or the
     text and image would run past the bottom of their own panel. */
  .about-area .nav-tabs .nav-item:has(.nav-link.active) {
    height: auto;
    max-height: none;
  }

  .about-area .nav-tabs .nav-item .text {
    max-height: none;
  }

  .about-area .nav-tabs .nav-item:not(:last-child) {
    margin-bottom: 64px;
  }

  .about-content .number {
    bottom: 0;
  }

  .about-area .h4-rotate {
    margin-bottom: 16px;
  }

}

@media only screen and (max-width: 576px) {
  .about-area .nav-tabs .nav-item .text {
    width: 100%;
    max-width: 100%;
    padding-right: 0;
    margin-bottom: 25px;
  }

  .about-area .nav-tabs .nav-item:has(.nav-link) .big-image {
    max-width: 100%;
  }

  .about-area .nav-tabs .nav-item:has(.nav-link.active) {
    max-height: unset;
  }

  .about-area .about-content {
    display: block;
  }

  .about-area .nav-link:not(.active) .p-rotate,
  .about-area .nav-link:not(.active) .number,
  .about-area .nav-link .p-rotate,
  .about-area .nav-link .number {
    display: none;
  }
}

/*******************************************************/
/****************** ## Services Area *******************/
/*******************************************************/
.service-area .section-title {
  float: left;
}

/* Services slider heading: the shared .mb-96 (96px) leaves too big a gap above
   the slider-tighten it just for this section. */
.service-area .section-heading.mb-96 {
  margin-bottom: 40px;
}

@media (max-width: 767px) {
  .service-area .section-heading.mb-96 {
    margin-bottom: 28px;
  }
}

.light-mode .service-area {
  background: var(--black-100);
}

.section-title h2 {
  margin-bottom: 0;
}

.light-mode .service-area h2 {
  color: white;
}

.service-area .carousel-buttons button i,
.team-area .carousel-buttons button i,
.interior-area .carousel-buttons button i,
.project-details-02 .carousel-buttons button i,
.blog-content .blog-thumb .carousel-buttons button i {
  color: var(--black-100);
}

.light-mode .team-area .carousel-buttons button i,
.light-mode .interior-area .carousel-buttons button i {
  color: white;
}

@media(min-width: 992px) {
  .light-mode .service-area h2 {
    text-shadow: 2px 0 white;
  }
}

.carousel-buttons {
  float: right;
  margin: auto 0 auto auto;
}

.carousel-buttons button {
  background: var(--heading-color);
  width: 40px;
  height: 40px;
}

.service-area .right-arrow {
  margin-top: 32px;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
  display: contents;
}

.service-area .carousel-item {
  height: auto;
  transition: transform 0.5s ease-in-out;
}

.service-area .carousel-item img {
  width: 1015px;
  max-width: 100%;
  height: 464px;
  object-fit: cover;
  aspect-ratio: 1/1;
}

@media only screen and (max-width: 991px) {
  .service-area .carousel-item img {
    width: 100%;
    height: 340px;
  }

  .service-area .carousel-caption {
    width: 100%;
    padding: 0 24px;
  }

  .service-area .carousel-caption p {
    max-width: 100%;
  }
}

@media (min-width: 992px) {
  .service-area .carousel-inner {
    height: auto;
  }
}

/* One centered image per slide (the 3-up peek rules were vestigial and
   misfired because each slide has a single .service-act). */
.service-area .carousel-item .service-act {
  position: relative;
  width: 100%;
  max-width: 1015px;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  text-align: center;
}

/* CURTAINS slide: several curtain photos arranged in one collage that occupies
   exactly the same box as the single image on every other slide, so the
   carousel does not change height as it advances. */
.service-area .carousel-item .svc-collage {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  width: 1015px;
  max-width: 100%;
  height: 464px;
  margin-left: auto;
  margin-right: auto;
}

/* Override the single-image sizing above: inside the collage each photo fills
   its own grid cell instead of the fixed 1015x464 / 1:1 box. */
.service-area .carousel-item .svc-collage img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  display: block;
}

@media only screen and (max-width: 991px) {
  .service-area .carousel-item .svc-collage {
    width: 100%;
    height: 340px;
  }
}
.service-area .carousel-caption {
  position: unset;
  padding: 0 16px;
  margin-top: -64px;
}

/* Show the full description balanced across two lines (no truncation/ellipsis) */
.service-area .carousel-caption p {
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

/* Blinds & Sofa: wider text block, still balanced across two lines */
.service-area .carousel-caption p.svc-wide {
  max-width: 460px;
}

/* Shrink the big service title on small phones so long words
   (HEADBOARDS / WALLPAPER) fit without overflowing at 320px */
@media only screen and (max-width: 479px) {
  .service-area .big-text {
    font-size: 40px;
    letter-spacing: -2px;
  }
}

@media only screen and (max-width: 1199px) {
  .service-area .carousel-caption {
    margin-top: -40px;
  }
}

@media only screen and (max-width: 576px) {

  .service-area .carousel-caption {
    margin-top: -30px;
  }
}

@media only screen and (max-width: 991px) {
  /* Pull the title up by half its line-height (51px title) so half sits on the image */
  .service-area .carousel-caption {
    margin-top: -30px;
  }
}

/* On the smallest phones the title is 40px, so half its line-height is ~24px */
@media only screen and (max-width: 479px) {
  .service-area .carousel-caption {
    margin-top: -24px;
  }
}

/*service-area-2*/
.service-area-2 .icon .fa:before {
  font-size: 48px;
  color: var(--primary-color);
  display: inline-block;
  margin-bottom: 32px;
}

.light-mode .service-area-2 {
  background: var(--black-10);
  color: var(--black-90);
}

.light-mode .service-area-2 .icon .fa:before {
  color: var(--black-90);
}

.service-area-2 h5 {
  text-transform: uppercase;
}

/* ===== Service icons: idle sway =====
   Opt-in per section by adding .icons-float alongside .service-area-2 (about
   page "Our Services", curtains page "Curtain & blind services"). Each icon
   glides left and right and back again-horizontal only, no lift or tilt.
   Scoped to .icon so the "read more" arrow further down the card is left
   alone. The 8px each way stays well inside the card's 36px padding. */
@-webkit-keyframes rhd-icon-sway {
  0% {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px);
  }

  50% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }

  100% {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px);
  }
}

@keyframes rhd-icon-sway {
  0% {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px);
  }

  50% {
    -webkit-transform: translateX(8px);
    transform: translateX(8px);
  }

  100% {
    -webkit-transform: translateX(-8px);
    transform: translateX(-8px);
  }
}

.icons-float .service-item .icon .fa {
  display: inline-block;
  -webkit-animation: rhd-icon-sway 4s ease-in-out infinite;
  animation: rhd-icon-sway 4s ease-in-out infinite;
  will-change: transform;
}

/* Staggered timings-six icons on the same clock would look mechanical. */
.icons-float .row .service-item:nth-child(2) .icon .fa {
  -webkit-animation-duration: 4.6s;
  animation-duration: 4.6s;
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.icons-float .row .service-item:nth-child(3) .icon .fa {
  -webkit-animation-duration: 4.2s;
  animation-duration: 4.2s;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.icons-float .row:last-of-type .service-item:nth-child(1) .icon .fa {
  -webkit-animation-duration: 4.4s;
  animation-duration: 4.4s;
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}

.icons-float .row:last-of-type .service-item:nth-child(2) .icon .fa {
  -webkit-animation-duration: 3.8s;
  animation-duration: 3.8s;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.icons-float .row:last-of-type .service-item:nth-child(3) .icon .fa {
  -webkit-animation-duration: 4.8s;
  animation-duration: 4.8s;
  -webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
}

/* Hover settles the swing and lifts the icon instead. The scale goes on the
   wrapper because the running animation owns the transform of the glyph. */
.icons-float .service-item .icon {
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transition: -webkit-transform 0.4s ease;
  -o-transition: transform 0.4s ease;
  transition: transform 0.4s ease;
}

.icons-float .service-item:hover .icon {
  -webkit-transform: scale(1.12);
  -ms-transform: scale(1.12);
  transform: scale(1.12);
}

.icons-float .service-item:hover .icon .fa {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

.icons-float .service-item .icon .fa:before {
  -webkit-transition: color 0.4s ease;
  -o-transition: color 0.4s ease;
  transition: color 0.4s ease;
}

.icons-float .service-item:hover .icon .fa:before {
  color: var(--primary-color);
}

/* Anyone who has asked their OS to cut motion gets the static icons. */
@media (prefers-reduced-motion: reduce) {

  .icons-float .service-item .icon .fa,
  .icons-float .service-item .icon {
    -webkit-animation: none;
    animation: none;
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
}

/* Keep every service-card description the same height (3 lines) so cards align */
.service-area-2 .service-item p {
  min-height: 84px;
}

@media only screen and (max-width: 991px) {
  .service-area-2 .service-item p {
    min-height: 0;
  }
}

.service-area-2 .row .service-item {
  padding-left: 48px;
  padding-right: 48px;
  position: relative; /* anchor for the whole-card stretched link */
}

@media only screen and (max-width: 991px) {
  .service-area-2 .row .service-item {
    padding-left: 0;
    padding-right: 0;
  }
  .service-area-2 .row .service-item:not(:last-child) {
    margin-bottom: 96px;
  }
}

/* "What we do / What we offer" grids (about page + single-service pages): keep
   the desktop 3-across layout on tablet too-the cards carry col-md-4. Drop the
   stacking gap so the rows align instead of showing uneven vertical space. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .service-area-2 .row .service-item.col-md-4:not(:last-child) {
    margin-bottom: 0;
  }
}

.light-mode .service-area-2 .service-item a {
  color: var(--black-90);
}

.light-mode .service-area-2 .service-item a:hover {
  color: var(--primary-color);
}

/* Intro section (right column) on single-service pages: give the CTA button a
   little breathing room above it on every screen size (tablet, mobile, desktop). */
.media-row .theme-btn {
  margin-top: 16px;
}

/* End Services Area */


/*******************************************************/
/****************** ## Projects Area *******************/
/*******************************************************/
.light-mode .architecture-area {
  background: white;
}

.architecture-area .project-active {
  height: auto !important;
}

.architecture-area .item {
  position: unset !important;
}

.architecture-area .project-active>.col-lg-6:nth-child(odd) {
  padding-right: 64px;
  float: left;
  padding-left: 0;
}

.architecture-area .project-active>.col-lg-6:nth-child(even) {
  padding-left: 64px;
  float: right;
  padding-right: 0;
}

@media only screen and (max-width: 991px) {
  .architecture-area .project-active>.col-lg-6:nth-child(odd) {
    padding-right: 0;
    float: unset;
  }

  .architecture-area .project-active>.col-lg-6:nth-child(even) {
    padding-left: 0;
    float: unset;
  }
}

.architecture-area .project-active>div:not(:last-child) {
  margin-bottom: 128px;
}

.architecture-area .project-active>.col-lg-12 {
  clear: both;
}

.apartment-image img {
  width: 100%;
  height: 100%;
  max-height: 800px;
  object-fit: cover;
}

.pro-title {
  background: var(--black-120);
  padding: 64px;
  text-align: right;
}

.light-mode .architecture-area h3 {
  color: white;
}

.light-mode .architecture-area .category {
  color: var(--black-30);
}

.pro-desc {
  background: var(--black-30);
  padding: 64px;
  text-align: left;
  color: var(--black-90);
}

.pro-desc p:last-child {
  margin-bottom: 0;
}

.pro-title-haft {
  background: var(--black-120);
  padding: 64px;
  text-align: center;
}

.pro-desc-haft {
  background: var(--black-30);
  padding: 64px;
  color: var(--black-90);
  text-align: center;
}

.apartment-content {
  margin-right: 120px;
  margin-left: 120px;
  margin-top: -128px;
}


@media only screen and (max-width: 1199px) {

  .pro-title,
  .pro-desc {
    padding: 64px 32px;
  }

  .pro-title-haft,
  .pro-desc-haft {
    padding: 32px;
  }

  .apartment-content {
    margin-right: 96px;
    margin-left: 96px;
  }
}

@media only screen and (max-width: 991px) {

  .pro-title,
  .pro-desc,
  .pro-title-haft,
  .pro-desc-haft {
    text-align: left;
    padding: 64px;
  }

  .architecture-area .tab-content .pr-64 {
    padding-right: 0;
    margin-bottom: 128px;
  }

  .architecture-area .tab-content .pl-64 {
    padding-left: 0;
  }
}

@media only screen and (max-width: 767px) {

  .pro-title,
  .pro-desc,
  .pro-title-haft,
  .pro-desc-haft {
    padding: 64px 32px;
  }

  .apartment-content {
    margin-right: 64px;
    margin-left: 64px;
  }
}

@media only screen and (max-width: 500px) {

  .pro-title,
  .pro-desc,
  .pro-title-haft,
  .pro-desc-haft {
    padding: 32px;
  }

  .pro-desc {
    height: auto;
    max-height: 200px;
    overflow: scroll;
  }

  .apartment-content {
    margin-right: 32px;
    margin-left: 32px;
  }
}

/*Interior Projects*/
.light-mode .interior-area {
  background: var(--black-10);
}

.light-mode .interior-area .carousel-buttons button {
  background: #124185;
  color: white;
}

.light-mode .interior-area h5 {
  color: white;
}

.interior-area .section-heading {
  position: relative;
}

.interior-area .nav-pills .nav-link.active,
.light-mode .interior-area .nav-pills .nav-link.active,
.light-mode .interior-area .nav-pills .show>.nav-link,
.interior-area .nav-pills .show>.nav-link {
  background: unset;
  color: var(--primary-color);
}

.interior-area .tab-style-one .nav-link.active,
.light-mode .interior-area .tab-style-one .nav-link.active {
  border-color: var(--primary-color);
}

/* Gallery sits closer to the section above it (the shared .py-128 utility is
   actually 96px top and bottom). */
.interior-area.py-128 {
  padding-top: 20px;
  padding-bottom: 64px;
}

/* Tabs (ALL / SOFA / CURTAIN) sat 96px clear of the gallery below them, which
   pushed the whole section past one screen. */
.interior-area ul.nav-pills.tab-style-one.mb-96 {
  margin-bottom: 32px;
}


.interior-area .carousel-buttons {
  display: none;
  position: absolute;
  right: 0;
  top: 20px;
}

.interior-area ul.nav-pills.tab-style-one {
  margin-left: 0;
  margin-right: 0;
  width: auto;
}

.interior-area .nav-item:has(.nav-link.active) .carousel-buttons {
  display: inline;
}

.interior-area .tab-content .tab-pane.fade.show.active .nav-fill-left ul li a[href=""] {
  visibility: visible;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {
  display: contents;
}

/* Square by aspect-ratio, but capped so the gallery keeps to one screen: on a
   wide monitor the middle slide is half the viewport wide, which used to make
   it 808px tall on its own. */
.interior-area .carousel-item img {
  width: 100%;
  height: 100%;
  max-height: 600px;
  max-height: min(600px, calc(100vh - 220px));
  object-fit: cover;
  aspect-ratio: 1/1;
}

.interior-area .carousel-item .interior-act {
  position: relative;
}

.interior-area .carousel-caption {
  position: absolute;
  right: 0;
  bottom: 25%;
  left: unset;
  width: fit-content;
  max-width: 350px;
  background: var(--black-100);
  padding: 32px;
  text-align: left;
}

.interior-area .carousel-item .interior-act:first-child .carousel-caption,
.interior-area .carousel-item .interior-act:last-child .carousel-caption {
  -webkit-transform: perspective(250px) rotateY(-90deg);
  -khtml-transform: perspective(250px) rotateY(-90deg);
  -moz-transform: perspective(250px) rotateY(-90deg);
  -ms-transform: perspective(250px) rotateY(-90deg);
  -o-transform: perspective(250px) rotateY(-90deg);
  transform: perspective(250px) rotateY(-90deg);
  -webkit-transition: all 400ms ease-in-out;
  -khtml-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}

.interior-area .carousel-item .interior-act:first-child:hover .carousel-caption,
.interior-area .carousel-item .interior-act:last-child:hover .carousel-caption {
  -webkit-transform: perspective(250px) rotateY(0deg);
  -khtml-transform: perspective(250px) rotateY(0deg);
  -moz-transform: perspective(250px) rotateY(0deg);
  -ms-transform: perspective(250px) rotateY(0deg);
  -o-transform: perspective(250px) rotateY(0deg);
  transform: perspective(250px) rotateY(0deg);
}

.interior-area .carousel-item .interior-act:nth-child(2) .carousel-caption {
  display: visible;
}

.interior-area .carousel-item .interior-act:first-child {
  padding-right: 64px;
  width: 25%;
}

.interior-area .carousel-item .interior-act:first-child .carousel-caption {
  right: 63px;
}

.interior-area .carousel-item .interior-act:last-child {
  padding-left: 64px;
  width: 25%;
}

.interior-area .carousel-caption .sub-title {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  color: var(--primary-color);
  text-transform: uppercase;
  text-align: center;
}

.interior-area .carousel-caption .sub-title:before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--primary-color);
  margin-right: 16px;
}

button.read-more {
  background: unset;
  color: var(--black-30);
  text-decoration: none;
}

.interior-area .carousel-item .interior-act:last-child .carousel-caption {
  margin-left: 64px;
}

@media only screen and (max-width: 1199px) {

  .interior-area .carousel-item .interior-act:first-child .carousel-caption p,
  .interior-area .carousel-item .interior-act:last-child .carousel-caption p {
    display: none;
  }

  .interior-area .carousel-item .interior-act:first-child .carousel-caption,
  .interior-area .carousel-item .interior-act:last-child .carousel-caption {
    bottom: 30%;
  }
}

@media only screen and (max-width: 991px) {

  .interior-area .carousel-item .interior-act:first-child .carousel-caption,
  .interior-area .carousel-item .interior-act:last-child .carousel-caption {
    display: none;
    -webkit-transform: unset;
    -khtml-transform: unset;
    -moz-transform: unset;
    -ms-transform: unset;
    -o-transform: unset;
    transform: unset;
    -webkit-transition: unset;
    -khtml-transition: unset;
    -moz-transition: unset;
    -ms-transition: unset;
    -o-transition: unset;
    transition: unset;
  }

  .interior-area .nav-pills {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }

  .interior-area .nav-item:has(.nav-link.active) .carousel-buttons {
    display: none;
  }
}

@media only screen and (max-width: 767px) {
  .interior-area .carousel-item .interior-act .carousel-caption {
    width: 70%;
  }

  .interior-area .carousel-item .interior-act .carousel-caption .sub-title,
  .interior-area .carousel-item .interior-act .carousel-caption p {
    display: none;
  }
}

@media only screen and (max-width: 576px) {

  .interior-area .carousel-item .interior-act:first-child,
  .interior-area .carousel-item .interior-act:last-child {
    display: none;
  }
}

/*projects-01*/
.light-mode .projects-01 {
  background: white;
}

/* 3-up responsive gallery grid. Flex-wrap + Bootstrap column widths drive the
   count: col-lg-4 = 3 per row on desktop, col-md-6 = 2 on tablet, full width on
   phones. Flex (not float) avoids the "staircase" gaps when card heights differ.
   Isotope (on filter click) re-lays out the same .item widths as a masonry
   grid, so filtering stays consistent. */
.projects-01 .project-active {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

.projects-01 .project-active>.item {
  padding-left: 12px;
  padding-right: 12px;
  margin-bottom: 30px;
  float: none;
}

/* Contain the floated cards so the footer sits below instead of overlapping them */
.projects-01 .project-active::after {
  content: "";
  display: block;
  clear: both;
}

/* Product images are only 450x450-keep them near native size so they stay crisp */
.projects-01 .project-active>.product-item .apartment-image img {
  max-height: 420px;
}

/* Left-floated product cards: mirror the caption to the left edge (reverse of Scallops) */
.projects-01 .project-active>.product-item:nth-child(odd) .carousel-caption {
  right: unset;
  left: -1px;
  transform-origin: left;
  -webkit-transform: perspective(250px) rotateY(90deg);
  -khtml-transform: perspective(250px) rotateY(90deg);
  -moz-transform: perspective(250px) rotateY(90deg);
  -ms-transform: perspective(250px) rotateY(90deg);
  -o-transform: perspective(250px) rotateY(90deg);
  transform: perspective(250px) rotateY(90deg);
}

.projects-01 .project-active>.product-item:nth-child(odd) .apartment-image:hover .carousel-caption {
  -webkit-transform: perspective(250px) rotateY(0deg);
  -khtml-transform: perspective(250px) rotateY(0deg);
  -moz-transform: perspective(250px) rotateY(0deg);
  -ms-transform: perspective(250px) rotateY(0deg);
  -o-transform: perspective(250px) rotateY(0deg);
  transform: perspective(250px) rotateY(0deg);
}

.projects-01 .apartment-image img {
  width: 100%;
  /* Minimized cards: landscape 4:3 instead of full square so the gallery
     tiles are more compact and uniform. */
  aspect-ratio: 4 / 3;
  height: auto;
  max-height: 460px;
  object-fit: cover;
}

.projects-01 .carousel-caption {
  right: -1px;
  bottom: 27%;
  left: unset;
  width: fit-content;
  background: var(--black-100);
  padding: 18px 20px;
  text-align: left;
  transform-origin: right;
  -webkit-transform: perspective(250px) rotateY(-90deg);
  -khtml-transform: perspective(250px) rotateY(-90deg);
  -moz-transform: perspective(250px) rotateY(-90deg);
  -ms-transform: perspective(250px) rotateY(-90deg);
  -o-transform: perspective(250px) rotateY(-90deg);
  transform: perspective(250px) rotateY(-90deg);
  -webkit-transition: all 400ms ease-in-out;
  -khtml-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}

@media(min-width: 577px) {
  .projects-01 .carousel-caption {
    max-width: 260px;
  }
}

/* Compact hover caption: the gallery cards were minimized to a 3-up grid, so
   the overlay panel and its type are scaled down to match. */
.projects-01 .carousel-caption .sub-title {
  font-size: 12px;
  margin-bottom: 8px;
}

.projects-01 .carousel-caption h5 {
  font-size: 18px;
  line-height: 1.35;
  margin-bottom: 8px;
}

/* Cards show only sub-title, heading and the Read More button-the
   description paragraph is hidden at every width. */
.projects-01 .carousel-caption p {
  display: none;
}

.light-mode .projects-01 .carousel-caption {
  background: white;
  color: var(--black-90);
}

.light-mode .projects-01 .carousel-caption h5 {
  color: var(--black-100);
}

.light-mode .projects-01 .carousel-caption .hero-btn,
.light-mode .projects-01 .carousel-caption .btn-icon .fa {
  color: var(--black-90);
}

.light-mode .projects-01 .carousel-caption .btn-icon .circle {
  border-color: var(--black-90);
}

.light-mode .projects-01 .carousel-caption .btn-icon .dot,
.light-mode .projects-01 .carousel-caption .btn-icon .line {
  background: var(--black-90);
}

.light-mode .projects-01 .carousel-caption .hero-btn:hover,
.light-mode .projects-01 .carousel-caption a.hero-btn:hover .btn-icon .fa {
  color: var(--primary-color);
}

.light-mode .projects-01 .carousel-caption a.hero-btn:hover .btn-icon .circle {
  border-color: var(--primary-color);
}


.light-mode .projects-01 .carousel-caption a.hero-btn:hover .btn-icon .dot,
.light-mode .projects-01 .carousel-caption a.hero-btn:hover .btn-icon .line {
  background: var(--primary-color);
}

.projects-01 .carousel-caption .sub-title {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  color: var(--primary-color);
  text-transform: uppercase;
  text-align: center;
}

.projects-01 .carousel-caption .sub-title:before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--primary-color);
  margin-right: 16px;
}

.projects-01 .apartment-image:hover .carousel-caption {
  -webkit-transform: perspective(250px) rotateY(0deg);
  -khtml-transform: perspective(250px) rotateY(0deg);
  -moz-transform: perspective(250px) rotateY(0deg);
  -ms-transform: perspective(250px) rotateY(0deg);
  -o-transform: perspective(250px) rotateY(0deg);
  transform: perspective(250px) rotateY(0deg);
}

@media only screen and (max-width: 1600px) {
  .projects-01 .tab-content .mb-128 {
    margin-bottom: 96px;
  }

  .projects-01 .project-active>.col-lg-6:nth-child(odd) {
    padding-right: 48px;
  }

  .projects-01 .project-active>.col-lg-6:nth-child(even) {
    padding-left: 48px;
  }
}

@media only screen and (max-width: 1199px) {
  .projects-01 .carousel-caption p {
    display: none;
  }
}

@media only screen and (max-width: 991px) {
  .projects-01 .tab-content .mb-128 {
    margin-bottom: 64px;
  }

  /* Tablet: the floated 2-up grid drops unevenly because the cards vary in
     height, leaving empty space to one side of each image. Stack the cards
     full width instead so the images align flush, like the phone layout. */
  .projects-01 .project-active>.col-lg-6:nth-child(odd),
  .projects-01 .project-active>.col-lg-6:nth-child(even) {
    width: 100%;
    max-width: 100%;
    float: none;
    padding-left: 0;
    padding-right: 0;
  }
}

@media (min-width: 577px)and (max-width: 767px) {
  .projects-01 .tab-content .mb-128 {
    margin-bottom: 32px;
  }
}

@media only screen and (max-width: 576px) {
  .projects-01 .project-active>.col-lg-6:nth-child(odd) {
    padding-right: 0;
    float: unset;
  }

  .projects-01 .project-active>.col-lg-6:nth-child(even) {
    padding-left: 0;
    float: unset;
  }
}

/* Tablet & mobile: no hover. The caption leaves overlay mode and sits in normal
   flow under the image, spanning the full image width. .light-mode is listed
   explicitly because @media adds no specificity and would otherwise lose to
   `.light-mode .projects-01 .carousel-caption`. */
@media only screen and (max-width: 991px) {
  /* .apartment-image is a bootstrap .row, so its children carry a 12px gutter
     and it carries -12px side margins. Zero both, otherwise the caption panel
     hangs 12px wider than the photo on each side once it goes full width. */
  .projects-01 .apartment-image {
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
  }

  /* Both the photo link and the caption take the whole row, so the caption
     lines up edge-to-edge with the image above it instead of being sized to
     its own text. */
  .projects-01 .apartment-image > a {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  .projects-01 .carousel-caption,
  .light-mode .projects-01 .carousel-caption,
  .projects-01 .project-active>.product-item:nth-child(odd) .carousel-caption {
    display: block;
    position: relative;
    right: auto;
    left: auto;
    bottom: auto;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    /* Left/right breathing room inside the panel-the copy used to sit flush
       against its own edge. */
    padding: 22px 20px 24px;
    background: transparent;
    text-align: left;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
  }
}

/*projects-02*/
.light-mode .projects-02 {
  background: white;
}

.projects-02 .img-container img {
  display: block;
}

.pro-02-item {
  display: grid;
  place-items: center;
}

.pro-02-item+.pro-02-item:has(+ .pro-02-item) {
  padding: 0 10px;
}

.pro-02-item:has(+ .pro-02-item):first-child {
  padding-left: 0;
  padding-right: 20px;
}

.pro-02-item+.pro-02-item:last-child {
  padding-right: 0;
  padding-left: 20px;
}

.pro-02-images {
  place-content: center;
  position: relative;
  overflow: hidden;
  --position: 50%;
}

.pro-02-images .slider-image {
  width: 100%;
  height: 100%;
  max-width: 1410px;
  max-height: 656px;
  object-fit: cover;
  object-position: left;
}

.pro-02-images .image-before {
  position: absolute;
  inset: 0;
  width: var(--position);
}

.pro-02-images .buttonslider {
  position: absolute;
  inset: 0;
  cursor: pointer;
  opacity: 0;
  width: 100%;
  height: 100%;
}

.pro-02-images .buttonslider:focus-visible~.slider-button {
  outline: 5px solid black;
  outline-offset: 3px;
}

.pro-02-images .slider-line {
  position: absolute;
  inset: 0;
  width: 4px;
  height: 100%;
  background-color: var(--heading-color);
  z-index: 10;
  left: var(--position);
  transform: translateX(-50%);
  pointer-events: none;
}

.pro-02-images .slider-button {
  position: absolute;
  background-color: var(--heading-color);
  padding: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  top: 50%;
  left: var(--position);
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
}

.project-02-caption {
  padding: 64px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid var(--black-90);
  border-top: none;
  width: 100%;
  text-align: center;
}

.project-02-caption h5 {
  margin-bottom: 0;
}

@media only screen and (max-width: 991px) {
  .project-02-caption {
    padding: 32px;
  }
}

@media only screen and (max-width: 767px) {

  .pro-02-item,
  .pro-02-item:first-child,
  .pro-02-item:last-child {
    padding: 0 !important;
  }

  .pro-02-item:not(:last-child) {
    margin-bottom: 128px;
  }

  .pro-02-item {
    width: auto;
  }

}

/*projects-04*/
.light-mode .projects-04 {
  background: white;
  z-index: -2;
  position: relative;
}

.project-active {
  height: auto !important;
}

.project-active .item {
  position: unset !important;
}

.stroke-btn {
  padding: 16px 32px;
  color: var(--heading-color);
  border: 1px solid var(--heading-color);
}

.light-mode .projects-04 .stroke-btn {
  color: var(--black-100);
  border: 1px solid var(--black-100);
}

.light-mode a.stroke-btn:hover {
  color: var(--primary-color);
}

@media only screen and (min-width: 992px) {

  .projects-04 .tab-content .odd-pro,
  .projects-04 .tab-content .even-pro {
    height: 896px;
  }
}

.projects-04 .tab-content img {
  width: 92%;
  height: 100%;
  max-height: 896px;
  max-width: 1080px;
  object-fit: cover;
  position: relative;
  z-index: -1;
}

.pro-content {
  margin: auto 0;
  height: auto;
}

.pro-04-text {
  padding: 128px 128px 136px 128px;
  width: 128%;
  height: auto;
}

.light-mode .pro-04-text {
  background: var(--black-10);
  color: var(--black-90);
}

.odd-pro .pro-04-text {
  margin-left: -28%;
}

.even-pro .pro-04-text {
  margin-right: -28%;
  left: 0;
}

.even-pro .pro-img {
  text-align: right;
  z-index: -1;
}

.pro-desc-04 {
  margin-top: 56px;
}

.pro-04-text h3 {
  margin-top: 16px;
}

.pro-04-text .sub-title:before {
  content: '';
  background: var(--primary-color);
  width: 64px;
  height: 1px;
  display: inline-block;
  margin-right: 32px;
  margin-bottom: 5px;
}

.pro-img {
  position: relative;
}

@media only screen and (max-width: 991px) {
  .projects-04 .tab-content img {
    width: 100%;
  }

  .pro-04-text {
    width: 100%;
  }

  .odd-pro .pro-04-text,
  .even-pro .pro-04-text {
    margin: 0;
  }
}


@media only screen and (max-width: 767px) {
  .pro-04-text {
    padding: 64px 64px 72px 64px;
  }
}


@media only screen and (max-width: 576px) {
  .pro-04-text {
    padding: 32px 32px 44px 32px;
  }
}

/*projects-05*/
.light-mode .projects-05 {
  background: white;
}

.projects-05 {
  padding: 128px;
}

.pro-05-item img {
  width: 100%;
  height: auto;
  max-width: 824px;
  max-height: 800px;
  object-fit: cover;
}

.pro-05-item {
  position: relative;
}

.pro-05-title-left {
  position: absolute;
  top: 64px;
  left: 64px;
}

.pro-05-title-right {
  position: absolute;
  top: 64px;
  right: 64px;
}

.projects-05 .category {
  color: var(--primary-color);
}

.projects-05 h3 {
  margin-top: 16px;
}

.light-mode .projects-05 h3 {
  color: white;
}

@media (min-width: 992px) {
  .light-mode .projects-05 h3 {
    text-shadow: 2px 0 white;
  }
}

.projects-05 .category:before {
  content: '';
  width: 64px;
  margin-right: 32px;
  height: 1px;
  background-color: var(--primary-color);
  display: inline-block;
  margin-bottom: 4px;
}

@media (min-width: 1400px) and (max-width: 1600px) {
  .projects-05 .tab-content h3 {
    font-size: 38px;
  }
}

@media only screen and (max-width: 1199px) {
  .projects-05 {
    padding: 64px;
  }

  .projects-05 .pl-64 {
    padding-left: 32px;
  }

  .projects-05 .pr-64 {
    padding-right: 32px;
  }

  .projects-05 .pro-05-items {
    margin-bottom: 64px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .projects-05 .tab-content h3 {
    font-size: 22px;
  }
}

@media only screen and (max-width: 767px) {
  .projects-05 .pr-64 {
    padding-right: 0;
    margin-bottom: 64px;
  }

  .projects-05 .pl-64 {
    padding-left: 0;
  }
}

@media only screen and (max-width: 500px) {
  .projects-05 {
    padding: 16px;
  }
}

/*project details*/
.light-mode .project-details {
  background: white;
}

.project-details .info {
  text-align: right;
}

.project-details .detail-info .text-left {
  padding-right: 15px;
}

.project-details .text-right {
  padding-left: 15px;
}

.project-details .text-left p:last-child,
.project-details .text-right p:last-child {
  margin-bottom: 0;
}

.project-details .galley img {
  max-width: 100%;
  height: 100%;
  max-height: 606px;
  object-fit: cover;
  padding-left: 15px;
  padding-right: 15px;
}

.project-details .galley .row .img:first-child img {
  padding-left: 0;
}

.project-details .galley .row .img:last-child img {
  padding-right: 0;
}

.pro-tags {
  margin-left: auto;
  margin-right: auto;
  width: auto;
}

.pro-tags span {
  margin-right: 16px;
}

.pro-tags .tag-list {
  display: inline;
}

.pro-tags .tag-list li {
  display: inline-block;
}

.pro-tags .tag-list li a {
  padding: 16px 32px;
  background: var(--heading-color);
  color: var(--black-100);
}

.light-mode .pro-tags .tag-list li a {
  color: white;
  background: var(--black-100);
}

.white-bg {
  background: var(--heading-color);
  color: var(--black-90);
}

.white-bg h5 {
  color: var(--black-100);
}

.related-projects a:not(.prev-pro, .next-pro) {
  width: auto;
  margin: auto;
  font-weight: 900;
  color: var(--black-90);
}

.related-projects a.prev-pro,
.related-projects a.next-pro {
  color: var(--black-90);
  font-weight: 900;
  font-size: 16px;
  width: auto;
}

.related-projects a.prev-pro:after,
.related-projects a.next-pro:after {
  content: '';
  width: 100%;
  height: 1px;
  background: var(--primary-color);
  display: block;
}

.related-projects .row {
  justify-content: center;
  align-items: center;
}

.related-projects img {
  width: 100%;
  max-width: 345px;
  height: 384px !important;
  object-fit: cover;
}

.related-projects .blog-meta li {
  font-size: 15px;
}

@media (min-width: 992px) and (max-width: 1399px) {
  .related-projects .blog-meta li:not(:first-child) {
    margin-left: 0;
  }
}

@media(max-width: 767px) {
  .related-projects .blog-meta li:not(:first-child) {
    margin-left: 0;
  }
}

.related-text {
  padding: 32px;
}

.related-projects .blog-meta {
  justify-content: left;
}

.related-left {
  padding-right: 15px;
  color: var(--black-30);
}

.related-left h5 {
  color: white;
}

.related-right {
  padding-left: 15px;
}

@media only screen and (max-width: 991px) {
  .project-details .info {
    text-align: left;
    margin-bottom: 32px;
    padding-right: 0;
  }

  .project-details .text-right {
    padding-left: 0;
  }
}

@media only screen and (max-width: 576px) {
  .project-details .galley img {
    padding-left: 0;
    padding-right: 0;
  }

  .project-details .galley .img:not(:last-child) {
    margin-bottom: 30px;
  }

  .project-details .pro-tags li {
    margin-bottom: 28px;
  }
}

/*project-details-02*/
.light-mode .project-details-02 {
  background: white;
}

.project-details-02 .carousel-indicators {
  margin: 30px auto 0 auto;
}

.project-details-02 .carousel-item img {
  position: relative;
  max-height: 792px;
  object-fit: cover;
  width: 100%;
}

.project-details-02 .carousel-buttons {
  position: absolute;
  top: 33%;
  z-index: 2;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
}

.project-details-02 .carousel-indicators button,
.project-details-02 .carousel-indicators [data-bs-target],
.project-details-02 .carousel-indicators button img {
  width: 100%;
  height: 320px;
  padding: 0;
  margin: 0;
}

.project-details-02 .carousel-indicators button {
  border: unset;
  border-radius: unset;
}

.project-details-02 .carousel-indicators,
.project-details-02 .carousel-indicators button {
  position: relative;
}

.project-details-02 .carousel-indicators button img {
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
}

.project-details-02 .carousel-list-images {
  width: 100%;
  justify-content: center;
}

.project-details-02 .carousel-list-images .button-img {
  display: none;
}

.project-details-02 .carousel-list-images .button-img:has(button.active),
.project-details-02 .carousel-list-images .button-img:has(button.active)+.button-img,
.project-details-02 .carousel-list-images .button-img:has(button.active)+.button-img+.button-img,
.project-details-02 .carousel-list-images .button-img:has(button.active)+.button-img+.button-img+.button-img,
.project-details-02 .carousel-list-images .button-img:has(+ .button-img:nth-last-child(3) button.active),
.project-details-02 .carousel-list-images .button-img:has(+ .button-img:nth-last-child(2) button.active),
.project-details-02 .carousel-list-images .button-img:has(+ .button-img + .button-img:nth-last-child(2) button.active),
.project-details-02 .carousel-list-images .button-img:has(+ .button-img:last-child button.active),
.project-details-02 .carousel-list-images .button-img:has(+ .button-img + .button-img:last-child button.active),
.project-details-02 .carousel-list-images:has(.button-img:last-child button.active) .button-img:nth-last-child(4) {
  display: inherit;
}

.project-details-02 .carousel-list-images .button-img:first-child {
  padding-left: 0;
  padding-right: 22.5px;
}

.project-details-02 .carousel-list-images .button-img:nth-child(2) {
  padding-left: 7.5px;
  padding-right: 15px;
}

.project-details-02 .carousel-list-images .button-img:nth-child(3) {
  padding-left: 15px;
  padding-right: 7.5px;
}

.project-details-02 .carousel-list-images .button-img:last-child {
  padding-left: 22.5px;
  padding-right: 0;
}

.project-details-02 .detail-list-text li {
  margin-bottom: 16px;
}

.block-left {
  display: block;
}

.project-details-02 .left {
  padding-right: 15px;
  margin-top: 8px;
}

.project-details-02 .right {
  padding-left: 15px;
}

.project-details-02 .left .block-left:not(:last-child) {
  margin-bottom: 32px;
}

.project-details-02 .left .pro-tags .tag-list li:not(:last-child) {
  display: inline-block;
  margin-bottom: 26px;
}

.project-details-02 .pro-tags h5 {
  margin-bottom: 32px;
}

@media only screen and (max-width: 991px) {
  .project-details-02 .right {
    padding-left: 0;
  }

  .project-details-02 .left {
    padding-right: 0;
  }

  .project-details-02 .carousel-buttons {
    top: 26%;
  }

  .project-details-02 .left {
    margin-bottom: 48px;
  }

  .related-left {
    padding-right: 0;
    margin-bottom: 64px;
  }

  .related-right {
    padding-left: 0;
  }

}

@media only screen and (max-width: 767px) {
  .project-details-02 .carousel-indicators {
    display: none;
  }

  .project-details-02 .carousel-buttons {
    top: 43%;
  }
}

@media only screen and (max-width: 576px) {
  .related-projects img {
    max-width: 576px;
  }

  .blog-meta {
    display: block;
  }
}

@media only screen and (max-width: 400px) {
  .project-details-02 .left {
    margin-bottom: 80px;
  }
}

.light-mode .project-details-02 .left .footer-social a {
  color: var(--black-90);
}

/*******************************************************/
/******************* ## Timeline Area ******************/
/*******************************************************/
.light-mode .timeline-area {
  background: white;
}


.section-heading .button {
  text-align: right;
  margin: auto 0 auto auto;
}

.section-heading .button a {
  font-size: 16px;
  line-height: 24px;
  padding: 16px 32px;
  color: var(--black-100);
  background-color: var(--heading-color);
}

.timeline-area .slick-list {
  max-height: 576px;
  height: 100%;
}

.timeline-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-left: 0;
}

.timeline-item .icon {
  -webkit-box-flex: wrap;
  -ms-flex: wrap;
  flex: wrap;
  cursor: pointer;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  position: relative;
  margin-right: 50px;
}

.timeline-item.slick-current .icon:after {
  content: '';
  position: absolute;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
  width: 64px;
  height: 1px;
  background: var(--primary-color);
  line-height: 1px;
  top: 43px;
  left: 120px;
}

.timeline-item .h2 {
  display: block;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.timeline-item img {
  height: 100%;
  object-fit: cover;
  max-height: 144px;
}

.timeline-item img.ishow,
.timeline-item.slick-current img.ifade {
  display: none;
}

.timeline-item img.ifade,
.timeline-item.slick-current img.ishow {
  display: block;
}

.timeline-item.slick-current .icon:before {
  color: var(--heading-color);
}

.timeline-item .icon.h2 {
  color: var(--black-30);
  margin-left: 32px;
}

@media(min-width: 992px) {
  .timeline-item .icon.h2 {
    text-shadow: 2px 0 var(--black-30);
  }

  .timeline-item.slick-current .icon.h2 {
    text-shadow: 2px 0 var(--heading-color);
  }
}

.timeline-item.slick-current .icon.h2 {
  color: var(--heading-color);
}

.light-mode .section-heading .button a {
  background-color: #124185;
  color: white;
}

.light-mode .timeline-item .icon.h2 {
  text-shadow: 2px 0 var(--black-30);
}

.light-mode .timeline-item.slick-current .icon.h2 {
  color: var(--black-100);
  text-shadow: 2px 0 var(--black-100);
}

@media(max-width: 991px) {
  .light-mode .timeline-item.slick-current .icon.h2 {
    text-shadow: unset;
  }
}

.timeline-item.slick-current:before {
  left: 0;
  opacity: 1;
}

.timeline-content .slick-slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.timeline-area .timeline-images .content {
  background: var(--black-100);
  padding: 64px;
  height: fit-content;
  width: 39%;
  position: absolute;
  z-index: 1;
  top: 32px;
}

.timeline-area .timeline-images img {
  position: relative;
  float: right;
  margin-left: auto;
  width: 100%;
  max-width: 930px;
  height: 576px;
  object-fit: cover;
}

.timeline-images .description {
  margin-top: 16px;
  margin-bottom: 0;
  color: var(--black-30);
}

.timeline-images .slick-current .content .h5 {
  color: var(--heading-color);
  font-weight: 900;
}

@media only screen and (max-width: 1399px) {
  .timeline-area .timeline-item.slick-current .icon:after {
    top: 30px;
    left: 74px;
  }

  .timeline-area .timeline-images img {
    width: 90%;
  }
}

/* Tablet (768-991px) keeps the desktop vertical layout, but at this narrower
   width the fixed 39% white box wraps its text into a much taller card. Widen it
   and trim the padding so its height stays close to the desktop look. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .timeline-area .timeline-images .content {
    width: 52%;
    padding: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .timeline-area .timeline-images .content {
    padding: 32px;
  }
}

/* ===== Mobile only: lay the step numbers out in a row with a HORIZONTAL
   ruler, instead of a vertical strip down the side. Slick is switched to
   vertical:false below 768px (see script.js), this styles the result.
   Tablet keeps the desktop vertical strip.
   Applies to the home page Work Process and the about page FAQ. ===== */
@media only screen and (max-width: 767px) {

  /* Number on top, ruler beneath it. */
  .timeline-area .timeline-item,
  .faq-area .timeline-item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  /* The ruler art is a tall 16x144 strip, so rotate it a quarter turn. The
     negative vertical / positive horizontal margins swap the layout box to
     match the rotated visual (a 16x88 box occupies 88x16 on screen). */
  .timeline-area .timeline-item img,
  .faq-area .timeline-item img {
    width: 16px;
    height: 88px;
    max-height: none;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    margin: -36px 36px;
  }

  .timeline-area .timeline-item .icon.h2,
  .faq-area .timeline-item .icon.h2 {
    margin-left: 0;
  }

  /* The blue marker line is positioned for the vertical layout; it points into
     empty space once the ruler turns. */
  .timeline-area .timeline-item.slick-current .icon:after,
  .faq-area .timeline-item.slick-current .icon:after {
    display: none;
  }

  /* Let the row size to its content rather than the tall vertical strip. */
  .timeline-area .slick-list,
  .faq-area .slick-list {
    max-height: none;
  }

  /* The FAQ's number column is indented 96px to clear the rotated heading. That
     was fine for a narrow vertical strip, but a full-width horizontal row then
     runs off the right edge. Pull the indent in and cap the width to match. */
  .faq-area .mobile-ml-96 {
    margin-left: 48px;
    width: calc(100% - 48px);
    max-width: calc(100% - 48px);
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
  }
}

@media only screen and (max-width: 767px) {
  /* Shorter ruler on phones. The margins must stay in step with the height:
     they are -(h-16)/2 vertical and +(h-16)/2 horizontal, so the rotated strip
     still occupies the right footprint. */
  .timeline-area .timeline-item img,
  .faq-area .timeline-item img {
    height: 64px;
    margin: -24px 24px;
  }

  .timeline-area .slick-list {
    margin-bottom: 64px;
  }

  .timeline-area .slick-slide .description {
    max-height: 400px;
  }

  .timeline-area .timeline-images img {
    width: 75%;
  }

  .timeline-area .timeline-images .content {
    width: 50%;
  }

  .timeline-area .timeline-images .content {
    top: 64px;
  }

}

@media only screen and (max-width: 576px) {
  .timeline-area .section-title {
    text-align: center;
    margin-bottom: 32px;
  }

  .timeline-area .button {
    text-align: center;
  }

  .timeline-area .timeline-images .content {
    position: relative;
    width: 100%;
  }

  .timeline-area .timeline-images img {
    width: 100%;
    height: 320px;
    object-fit: cover;
  }

  .timeline-area .slick-list {
    margin-bottom: 0;
  }
}


/*******************************************************/
/**************** ## Testimonials Area *****************/
/*******************************************************/
.light-mode .reviews-area {
  background: var(--black-10);
}

/* ===== Floating WhatsApp & Call CTAs ===== */
.floating-cta {
  position: fixed;
  left: 22px;
  bottom: 26px;
  z-index: 998;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.floating-cta .fcta-btn {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 32px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.floating-cta .fcta-btn:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.floating-cta .wa-btn {
  background-color: #25D366;
  animation: fctaPulse 2.2s infinite;
}

.floating-cta .call-btn {
  background-color: var(--primary-color);
}

@keyframes fctaPulse {
  0% {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(37, 211, 102, 0.55);
  }

  70% {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28), 0 0 0 16px rgba(37, 211, 102, 0);
  }

  100% {
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28), 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

@media (max-width: 767px) {
  .floating-cta {
    left: 16px;
    bottom: 18px;
    gap: 12px;
  }

  .floating-cta .fcta-btn {
    width: 58px;
    height: 58px;
    font-size: 27px;
  }
}

.curtain-card {
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--black-120);
  border: 1px solid var(--black-90);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.curtain-card:hover {
  transform: translateY(-8px);
  border-color: var(--primary-color);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.curtain-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.curtain-card .curtain-card-body {
  padding: 24px 22px 26px;
}

.curtain-card .curtain-card-body h5 {
  margin-bottom: 10px;
  /* The card keeps its dark background (--black-120) in light mode, so the
     brand blue sat too close to it. White reads cleanly against the card. */
  color: #ffffff;
}

.curtain-card .curtain-card-body p {
  margin-bottom: 0;
  font-size: 15px;
  line-height: 26px;
  color: var(--black-30);
}

/* ---- Fabric guide (curtains page) --------------------------------------
   A distinct, image-led layout for the "Types of Curtain Fabrics" section so
   it doesn't repeat the plain .curtain-card grid used by "Types of Curtains"
   directly below. Full-bleed photo tiles with a numbered index; the name sits
   over the image and the description slides up on hover / focus. */
.fabric-guide-intro {
  max-width: 620px;
  margin: 18px auto 0;
  color: var(--black-30);
  font-size: 16px;
  line-height: 28px;
}

.fabric-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.fabric-tile {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  min-height: 360px;
  border: 1px solid var(--black-90);
  isolation: isolate;
}

.fabric-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.6s ease;
}

/* Readability scrim-darker at the base where the text sits. */
.fabric-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.55) 35%,
      rgba(0, 0, 0, 0.05) 70%);
  transition: background 0.4s ease;
}

.fabric-tile:hover img,
.fabric-tile:focus-within img {
  transform: scale(1.06);
}

/* Service page galleries ("Recent ... work") get the same slow zoom as the
   fabric tiles above, so every service page animates its photos the same way.
   The wrapper clips, so the image grows inside its rounded frame rather than
   spilling over its neighbours. */
.svc-shot {
  display: block;
  overflow: hidden;
  border-radius: 8px;
}

.svc-shot img {
  display: block;
  transition: transform 0.6s ease;
}

.svc-shot:hover img,
.svc-shot:focus-within img {
  transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {

  .svc-shot img,
  .svc-shot:hover img,
  .svc-shot:focus-within img {
    transition: none;
    transform: none;
  }
}

.fabric-num {
  position: absolute;
  top: 16px;
  right: 20px;
  /* Large display numeral — reads as a heading */
  font-family: var(--heading-font);
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.4s ease;
}

.fabric-tile:hover .fabric-num,
.fabric-tile:focus-within .fabric-num {
  color: var(--primary-color);
}

.fabric-tile-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 22px 26px;
}

.fabric-tile-body h5 {
  margin: 0;
  color: #ffffff;
  position: relative;
  padding-bottom: 12px;
}

/* Gold underline accent under the fabric name. */
.fabric-tile-body h5::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  background: var(--primary-color);
  transition: width 0.4s ease;
}

.fabric-tile:hover .fabric-tile-body h5::after,
.fabric-tile:focus-within .fabric-tile-body h5::after {
  width: 56px;
}

.fabric-tile-body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 25px;
  color: var(--black-30);
  /* Collapsed by default; revealed on hover / keyboard focus. */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: max-height 0.45s ease, opacity 0.4s ease, transform 0.45s ease,
    margin-top 0.45s ease;
}

.fabric-tile:hover .fabric-tile-body p,
.fabric-tile:focus-within .fabric-tile-body p {
  max-height: 160px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 12px;
}

@media (max-width: 991px) {
  .fabric-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .fabric-grid {
    grid-template-columns: 1fr;
  }

  .fabric-tile {
    min-height: 320px;
  }

  /* Touch devices can't hover-keep each description visible. */
  .fabric-tile-body p {
    max-height: 160px;
    opacity: 1;
    transform: none;
    margin-top: 12px;
  }
}

/* Any device without hover (touch tablets included, regardless of width) gets
   the descriptions shown by default-otherwise they'd never be reachable. */
@media (hover: none) {
  .fabric-tile-body p {
    max-height: 160px;
    opacity: 1;
    transform: none;
    margin-top: 12px;
  }
}

/* ---- Curtain types (curtains.html) -------------------------------------
   Expanding image accordion on the dark "Styles & Hardware" band. Panels sit
   side by side showing photo + name; hover / keyboard-focus grows a panel and
   reveals its description. A deliberately different interaction from the
   fabric overlay tiles above and the card grids elsewhere. */
.ctype-accordion {
  display: flex;
  gap: 14px;
  height: 460px;
}

.ctype-panel {
  position: relative;
  /* The photo and the scrim below sit at z-index -2 / -1. Without a stacking
     context of its own here they paint behind the SECTION's background rather
     than behind the panel's own, so the photos vanish and the white type is
     left on the bare section colour. isolate keeps them inside the panel. */
  isolation: isolate;
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--black-90);
  cursor: pointer;
  outline: none;
  /* flex-grow is animatable-this is what drives the expand/collapse. */
  transition: flex-grow 0.55s cubic-bezier(0.25, 0.8, 0.25, 1),
    border-color 0.4s ease;
}

.ctype-panel img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.6s ease;
}

.ctype-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top,
      rgba(0, 0, 0, 0.88) 0%,
      rgba(0, 0, 0, 0.5) 45%,
      rgba(0, 0, 0, 0.08) 100%);
  transition: background 0.4s ease;
}

/* A hovered / focused panel expands; when one is active the accordion dims the
   others slightly so the open panel reads as the focus. */
.ctype-panel:hover,
.ctype-panel:focus-visible,
.ctype-accordion:not(:hover) .ctype-panel.is-open {
  flex-grow: 3.4;
  border-color: var(--primary-color);
}

.ctype-panel:hover img,
.ctype-panel:focus-visible img,
.ctype-accordion:not(:hover) .ctype-panel.is-open img {
  transform: scale(1.05);
}

/* Content pinned to the base; fixed width so the text doesn't reflow while the
   panel animates its width. */
.ctype-panel-inner {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 360px;
  max-width: 88vw;
  padding: 28px 26px;
}

.ctype-num {
  display: block;
  /* Small letter-spaced label, not a heading — stays on the sans */
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--primary-color);
  margin-bottom: 12px;
}

.ctype-panel-inner h5 {
  margin: 0;
  color: #ffffff;
  white-space: nowrap;
}

.ctype-panel-inner p {
  margin: 0;
  font-size: 15px;
  line-height: 26px;
  color: var(--black-30);
  /* Hidden until the panel is open. */
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(8px);
  transition: max-height 0.5s ease, opacity 0.4s ease, transform 0.5s ease,
    margin-top 0.5s ease;
}

.ctype-panel:hover .ctype-panel-inner p,
.ctype-panel:focus-visible .ctype-panel-inner p,
.ctype-accordion:not(:hover) .ctype-panel.is-open .ctype-panel-inner p {
  max-height: 160px;
  opacity: 1;
  transform: translateY(0);
  margin-top: 12px;
}

@media (max-width: 767px) {
  /* No hover on touch-stack the panels open so every description is visible. */
  .ctype-accordion {
    flex-direction: column;
    height: auto;
    gap: 16px;
  }

  .ctype-panel {
    flex: none;
    min-height: 300px;
  }

  .ctype-panel-inner,
  .ctype-panel-inner p {
    width: 100%;
    max-width: 100%;
  }

  .ctype-panel-inner p {
    max-height: 200px;
    opacity: 1;
    transform: none;
    margin-top: 12px;
  }

  .ctype-panel-inner h5 {
    white-space: normal;
  }
}

/* Touch tablets (768–991px) can't hover and the width rule above doesn't catch
   them, so the accordion would be stuck collapsed. Stack + open it on any
   no-hover device. */
@media (hover: none) {
  .ctype-accordion {
    flex-direction: column;
    height: auto;
    gap: 16px;
  }

  .ctype-panel {
    flex: none;
    min-height: 300px;
  }

  .ctype-panel-inner,
  .ctype-panel-inner p {
    width: 100%;
    max-width: 100%;
  }

  .ctype-panel-inner p {
    max-height: 200px;
    opacity: 1;
    transform: none;
    margin-top: 12px;
  }

  .ctype-panel-inner h5 {
    white-space: normal;
  }
}

.testimonial-item {
  text-align: center;
}

/* Tighten the gap between the star rating and the quote. The stars carry the
   shared .mb-96 utility, which is a lot of air for a single row of icons. */
.testimonial-item .section-title.mb-96 {
  margin-bottom: 40px;
}

/* Quotes are long-form reading, not a headline: sans face, normal weight and a
   capped measure. The old 35px serif ran the full container width and carried a
   2px text-shadow that doubled every glyph. */
.testimonial-item .author-text {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.75;
  /* The element carries .h2 for legacy sizing, which brings display tracking and
     a 2px text-shadow. Both wreck a paragraph at reading size — reset them. */
  letter-spacing: normal;
  text-shadow: none;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 35px;
  color: var(--black-10);
}

@media(max-width: 767px) {
  .testimonial-item .author-text {
    font-size: 18px;
    line-height: 1.7;
  }
}

.light-mode .testimonial-item .author-text {
  color: var(--black-100);
}

.testimonial-item h5 {
  margin-bottom: 8px;
}

.testi-img {
  width: 256px;
  height: 256px;
  border-radius: 50%;
  object-fit: cover;
  margin: 32px auto 32px;
}

.testimonial-item .designations {
  font-size: 16px;
}

.testimonials-slider .slick-dots {
  margin-top: 3px;
  text-align: center;
}


.testimonials-slider .slick-dots li {
  border: 1px solid var(--black-30);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  overflow: hidden;
  margin-right: 8px;
}

.light-mode .testimonials-slider .slick-dots li {
  border: 1px solid var(--black-90);
}

.testimonials-slider .slick-dots li:last-child {
  margin-right: 0;
}

.testimonials-slider .slick-dots li button {
  background: transparent;
  content: none;
}

.testimonials-slider .slick-dots li.slick-active {
  background-color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.light-mode .designations {
  color: var(--black-90);
}

/*******************************************************/
/****************** ## CTA Area ********************/
/*******************************************************/
/* Tighter band than the pt-140/pb-110 utilities on the markup give it-the
   section was taller than it needed to be for one line of copy and a field.
   Higher specificity than the bare utility classes, so no !important needed. */
.cta-area.pt-140 {
  padding-top: 80px;
}

.cta-area.pb-110 {
  padding-bottom: 70px;
}

.cta-area .cta-form.mt-96 {
  margin-top: 40px;
}

@media (max-width: 767px) {
  .cta-area.pt-140 {
    padding-top: 56px;
  }

  .cta-area.pb-110 {
    padding-bottom: 48px;
  }

  .cta-area .cta-form.mt-96 {
    margin-top: 28px;
  }
}

/* This CTA sits on a dark photo overlay, where the brand-blue sub-title barely
   reads. Scoped to .cta-area (home page only)-the FREE CONSULTATION labels on
   the service pages sit on light sections and stay blue. */
.cta-area .sub-title,
.light-mode .cta-area .sub-title {
  color: #ffffff;
}

/* Whole CTA block sits on a dark photo overlay, so all of its copy is white-
   the headings previously dropped to grey (--black-30) and read as muted. */
.cta-area h2,
.light-mode .cta-area h2 {
  color: #ffffff;
}

.cta-area .cta-content,
.cta-area .cta-content p,
.light-mode .cta-area .cta-content,
.light-mode .cta-area .cta-content p {
  color: #ffffff;
}

.white {
  color: var(--heading-color);
}

@media(min-width: 992px) {
  .cta-area h2 {
    text-shadow: 2px 0 #ffffff;
  }

  h2 .white {
    text-shadow: 2px 0 white;
  }
}

.cta-content {
  margin-top: 16px;
}

.btn-white-bg {
  background: var(--heading-color);
  color: var(--black-100);
  padding: 16px 32px;
  border: 2px solid var(--black-100);
}

.cta-area form {
  border: 1px solid var(--heading-color);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* Black email field with white type, so it reads as a solid block against the
   photo instead of a bright white panel. */
.cta-area input {
  color: #ffffff;
  background-color: #000000;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 16px 24px;
  text-overflow: ellipsis;
  border-radius: 0;
}

.cta-area input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.7); }
.cta-area input::-moz-placeholder { color: rgba(255, 255, 255, 0.7); }
.cta-area input:-ms-input-placeholder { color: rgba(255, 255, 255, 0.7); }
.cta-area input::placeholder { color: rgba(255, 255, 255, 0.7); }

/* Square edges on the CTA button, matching the rest of the section. */
.cta-area .btn-white-bg,
.cta-area button {
  border-radius: 0;
}

/*******************************************************/
/******************** ## Blog Area ********************/
/*******************************************************/
/*blog home page*/
.light-mode .blog-home {
  background: white;
}

.blog-home h6 a {
  text-transform: uppercase;
  color: #124185;
}

.blog-home .blog-item.black-120-bg h6 a {
  color: var(--heading-color);
}

/* The middle card is the only .black-120-bg one, so it took a white heading for
   the old dark theme. Light-mode paints that card white, leaving the heading
   white-on-white-pull it back to readable grey (#434343). */
.light-mode .blog-home .blog-item.black-120-bg h6 a {
  color: #124185;
}

/* Same story for the card's inherited text (Admin / 1 Comment / the date): it
   was --black-30, a pale grey meant for the old dark card, which barely read on
   white. Match the dark text of the other two cards. */
.light-mode .blog-home .blog-item.black-120-bg {
  color: var(--black-90);
}

.blog-home .blog-item {
  padding: 32px;
  margin-bottom: 40px;
  color: var(--black-90);
}

/* Equal-height cards. Headings wrap to one or two lines depending on the title,
   which left the cards different heights. Stretch each card to fill its column
   and pin "Read more" to the bottom so the three line up. */
.blog-home .col-lg-4.item {
  display: flex;
}

.blog-home .col-lg-4.item .blog-item {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.blog-home .col-lg-4.item .blog-item .content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.blog-home .col-lg-4.item .blog-item .content .theme-btn {
  margin-top: auto;    /* push to the bottom of the card */
  align-self: center;  /* stay centred rather than stretching full width */
}

.blog-home .blog-item.black-120-bg {
  color: var(--black-30);
}

.blog-home .blog-meta li i {
  color: var(--black-90)
}

.blog-home .blog-item.black-120-bg .content span i,
.blog-home .blog-item.black-120-bg .blog-meta li i {
  color: var(--primary-color)
}

.blog-home .blog-item .image img {
  width: 100%;
  height: auto;
  height: 392px;
  margin: 32px 0;
  object-fit: cover;
  aspect-ratio: 1/1;
}

@media(min-width: 992px) {
  .blog-home .blog-item .image img {
    max-width: 386px;
  }
}

.blog-home .theme-btn {
  color: var(--heading-color);
  background: #124185;
}

.blog-home .blog-item hr {
  width: 30%;
  color: var(--black-100);
  margin: 16px auto;
}

.blog-home .blog-item.black-120-bg hr {
  color: var(--primary-color);
}

.blog-home .blog-meta li a {
  color: var(--black-90);
}

.blog-home .blog-item.black-120-bg .blog-meta li a {
  color: var(--black-30);
}

@media only screen and (min-width: 1200px) {
  .blog-home .item:first-child {
    padding-right: 20px;
  }

  .blog-home .item:nth-child(2) {
    padding: 0 10px;
  }

  .blog-home .item:last-child {
    padding-left: 20px;
  }
}

@media only screen and (max-width: 1200px) {
  .blog-home .blog-item {
    padding: 32px 16px;
  }
}

@media only screen and (max-width: 767px) {
  .blog-home .col-xl-4:not(:last-child) {
    margin-bottom: 64px;
  }
}

@media only screen and (max-width: 576px) {
  .blog-home .section-title {
    text-align: center;
    margin-bottom: 32px;
  }

  .blog-home .button {
    text-align: center;
  }
}

/*blog page*/

.blog-banner {
  height: 100vh;
  padding-top: 450px;
}

.blog-thumb .carousel-buttons {
  position: absolute;
  top: 48%;
  z-index: 2;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between;
}

.blog-thumb img {
  position: relative;
  height: 456px;
  width: 100%;
  max-width: 930px;
  object-fit: cover;
}

.blog-content .blog-meta {
  justify-content: left;
}

.blog-content .blog-desc {
  padding: 40px;
}

.blog-content .blog-desc:has(.primary-readmore) {
  padding-bottom: 56px;
}

.primary-readmore {
  background: var(--black-100);
  color: #ffffff;
  padding: 16px 32px;
  margin-top: 32px;
}

.primary-readmore:hover {
  background: var(--black-100);
  color: var(--primary-color);
}

.blog-content .left {
  padding-right: 15px;
}

.blog-content .sidebar {
  padding-left: 15px;
}

.blog-item {
  margin-bottom: 30px;
}

.blog-item:last-child {
  margin-bottom: 0;
}

.blog-item .blog-thumb.video {
  -webkit-clip-path: none;
  clip-path: none;
  z-index: 1;
  position: relative;
}

.blog-item .blog-thumb.video .video-play {
  color: var(--heading-color);
  z-index: 2;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 50px;
}

.blog-content .sidebar .widget-wrapper:not(.search-wg) {
  margin-top: 30px;
  padding: 40px;
  background-color: var(--black-120);
}

.blog-content .widget-wrapper h5 {
  margin-bottom: 25px;
}

.blog-content .sidebar .search-form input {
  background-color: var(--heading-color);
  border-radius: unset;
  border: unset;
  height: 60px;
}

.blog-content .sidebar .search-form button {
  position: absolute;
  right: 0;
  background: var(--primary-color);
  padding: 16px 32px;
}

.blog-content .sidebar .recent-posts li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 32px;
}

.blog-content .sidebar .recent-posts li:last-child {
  margin-bottom: 0;
}

.blog-content .sidebar .recent-posts a.recent-thumb {
  width: 96px;
  height: 96px;
  display: contents;
}

@media(min-width: 375px) {
  .blog-content .sidebar .recent-posts li .content {
    margin-left: 16px;
  }
}

.blog-content .sidebar .recent-posts img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  aspect-ratio: 1/1;
}

.blog-content .sidebar .recent-posts li i {
  color: var(--primary-color);
}

.blog-content .sidebar .recent-posts li h6 {
  margin-bottom: 0;
}

.blog-content .sidebar .widget-categories li {
  margin-bottom: 16px;
  text-align: right;
}

.blog-content .sidebar .widget-categories li a {
  float: left;
}

.blog-content .sidebar .widget-categories li:last-child {
  margin-bottom: 0;
}

.blog-content .sidebar .widget-tags a {
  padding: 16px 32px;
  background: var(--heading-color);
  color: var(--black-100);
}

.blog-content .sidebar .widget-tags li {
  margin-bottom: 30px;
  margin-right: 4px;
  display: inline-block;
}

.blog-content .sidebar .widget-tags li:last-child {
  margin-right: 0;
  margin-bottom: 20px;
}

.blog-content .sidebar .tags {
  margin-top: 40px;
}

.sidebar .widget-categories {
  margin-top: -5px;
}

/*blog details*/
.detail-title {
  margin-top: 30px;
}

/* blockquote section */
blockquote {
  z-index: 1;
  padding: 32px;
  position: relative;
  background: var(--heading-color);
  overflow: hidden;
  margin: 30px 0;
  border-left: 5px solid var(--primary-color);
}

@media only screen and (max-width: 375px) {
  blockquote {
    padding-left: 25px;
    padding-right: 25px;
  }
}

blockquote h5 {
  color: var(--black-90);
}

blockquote cite.name {
  float: right;
  color: var(--black-90);
  clear: both;
}

.blog-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: center;
}

.blog-meta li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  line-height: 1;
  margin-top: 10px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.blog-meta li i {
  font-size: 16px;
  margin: -1px 8px 0 0;
  color: var(--primary-color);
}

.blog-meta li:not(:first-child) {
  margin-left: 16px;
}

.blog-tags {
  margin-top: 30px;
}

.blog-tags span {
  margin-right: 16px;
}

.blog-tags .tag-list {
  display: inline;
}

.blog-tags .tag-list li {
  display: inline-block;
}

.blog-tags .tag-list li a {
  padding: 16px 32px;
  background: var(--heading-color);
  color: var(--black-100);
}

@media only screen and (max-width: 991px) {
  .sidebar {
    margin-top: 96px;
  }

  .blog-content .left {
    padding-right: 0;
  }

  .blog-content .sidebar {
    padding-left: 0;
  }
}

/* Comments */
.comments-area {
  margin-top: 96px;
}

.comments-area h2 {
  margin-bottom: 32px;
}

.comment-body {
  padding: 40px 0;
  border-bottom: 1px solid var(--black-90);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.light-mode .comment-body {
  border-bottom: 1px solid var(--black-30);
}

.comments>.comment-body:first-child {
  padding-top: 0;
}

.comments>.comment-body:last-child,
.comments>.comment-body:last-child .child-comment:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.comment-body .author-img {
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  margin-right: 20px;
  width: 128px;
  height: 128px;
}

.comment-body .author-img img {
  object-fit: cover;
  border-radius: 50%;
  aspect-ratio: 1/1;
  width: 100%;
  height: auto;
}

.comment-reply-link {
  padding: 8px 16px;
  color: #ffffff;
  background: var(--primary-color);
}

.comment-reply-link:hover {
  color: var(--primary-color);
  background: var(--black-100);
}

.comment-body .right h6 {
  margin-bottom: 5px;
  text-transform: uppercase;
}

.comment-body .right .date {
  font-size: 16px;
}

.comment-body .content {
  margin-top: 16px;
}

.comment-body .content p:last-child {
  margin-bottom: 0;
}

.comment-body.child-comment {
  margin-left: 120px;
  position: relative;
  background: var(--secondary-color);
}

.light-mode .comment-body.child-comment {
  background: white;
}


/* Comment Form */
.comment-form {
  background: var(--black-120);
  padding: 64px;
}

.comment-form .form-control {
  color: white;
}

.comment-form .form-control:focus {
  background: var(--black-100);
}

.light-mode .comment-form {
  background: var(--black-10);
}

.light-mode .comment-form label {
  color: var(--black-90);
}

.comment-form .form-group {
  margin-bottom: 40px;
}

.comment-form input,
.comment-form textarea {
  border: none;
}

.comment-form .form-checkbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 14px;
}

.comment-form .form-checkbox input {
  margin: -3px 10px 0 0;
}

.comment-form button {
  color: #ffffff;
  background: var(--primary-color);
}

@media only screen and (min-width: 992px) {
  .comment-form .theme-btn {
    padding-top: 17px;
    padding-bottom: 17px;
  }
}

@media only screen and (max-width: 767px) {
  .comment-body.child-comment {
    margin-left: 50px;
  }
}

@media only screen and (max-width: 576px) {
  .blog-banner {
    padding-top: 356px;
  }

  .blog-tags .tag-list li {
    margin-bottom: 28px;
  }

  .blog-meta {
    display: block;
  }

  .blog-home .blog-meta li {
    display: block;
  }

  .blog-meta li:not(:first-child) {
    margin-left: 0;
  }

  /* Keep Admin & comment count (with their icons) on one line on small screens */
  .blog-home .blog-meta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .blog-home .blog-meta li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .blog-home .blog-meta li:not(:first-child) {
    margin-left: 16px;
  }

  .comment-body {
    display: block;
  }

  .comment-body .author-img {
    margin-bottom: 16px;
  }

  .comment-body:has(.comment-reply-link) .content {
    margin-bottom: 26px;
  }

  .comment-form {
    padding: 40px 16px;
  }

  .pagination li {
    margin-bottom: 6px;
  }

}

@media only screen and (max-width: 375px) {
  .comment-body.child-comment {
    margin-left: 30px;
  }

  .comment-body .content {
    font-size: 16px;
  }

  .blog-content .sidebar .recent-posts li {
    display: block;
  }

  .sidebar .recent-posts li img {
    margin-bottom: 16px;
  }

  .blog-content .sidebar .search-form button {
    right: 12px;
  }
}

.light-mode .blog-content {
  background: white;
}

.light-mode .blog-desc {
  background-color: var(--black-10);
  color: var(--black-90);
}

.light-mode .blog-content .sidebar .widget-wrapper:not(.search-wg) {
  background-color: var(--black-10);
}

.light-mode .blog-content .sidebar a {
  color: var(--black-90);
}

.light-mode .blog-content .sidebar .search-form input {
  border: 1px solid var(--black-10);
}

.light-mode blockquote {
  background: var(--black-30);
}

.light-mode .blog-tags .tag-list li a {
  background: var(--black-100);
  color: white;
}



/*******************************************************/
/******************** ## About Style 2 ********************/
/*******************************************************/
.about-style-2 .section-title h2 {
  margin-bottom: 16px;
}

.about-style-2 ul.nav-pills.tab-style-one {
  margin-left: 0;
  margin-right: 0;
}

/* About page "Contact Us": match the home page Work Process button-dark
   block, white text. Scoped to .about-style-2 because .btn-white-bg is also
   the home page "Get a Quote", which sits on a dark photo and must stay white. */
.about-style-2 .btn-white-bg,
.light-mode .about-style-2 .btn-white-bg {
  background: var(--black-100);
  color: #ffffff;
  border-color: var(--black-100);
}

.about-style-2 .left {
  padding-right: 32px;
}

.about-style-2 .imgs {
  position: relative;
}

.about-style-2 .imgs img {
  width: 100%;
  max-width: 690px;
  height: 100%;
  max-height: 856px;
  object-fit: cover;
  -webkit-transition: all linear 0.7s;
  -khtml-transition: all linear 0.7s;
  -moz-transition: all linear 0.7s;
  -ms-transition: all linear 0.7s;
  -o-transition: all linear 0.7s;
  transition: all linear 0.7s;
}

.about-style-2 .imgs .hovershow {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
}

.about-style-2 .imgs:hover img {
  opacity: 0;
}

.about-style-2 .imgs:hover img.hovershow {
  opacity: 1;
}

.light-mode .text-black h1,
.light-mode .text-black .breadcrumb .breadcrumb-item a,
.light-mode .text-black .breadcrumb .breadcrumb-item,
.light-mode .text-black .breadcrumb-item:not(:first-child)::before {
  color: var(--black-100);
}

.light-mode .about-style-2 {
  background: white;
}


/*******************************************************/
/******************* ## Counter Area *******************/
/*******************************************************/
.counter-title {
  font-weight: 700;
  color: var(--heading-color);
  text-transform: capitalize;
}

.text-white .h2,
.text-white h5 {
  color: white;
}

.achievement-area {
  padding: 180px 0;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
}

.achievement-area .counter-text-wrap>div {
  justify-content: center;
}

@media only screen and (max-width: 991px) {

  .achievement-area {
    padding: 80px 0;
  }

  /* Two columns on tablet and mobile. The markup carries col-xs-3, which is
     Bootstrap 3 syntax and does nothing in Bootstrap 5, so the stats had no
     width below 992px and stacked full-width into a very tall band. */
  .achievement-area .mobile-mb {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 50%;
  }

  /* Only the top row needs a gap beneath it. */
  .achievement-area .mobile-mb:not(:last-child) {
    margin-bottom: 0;
  }

  .achievement-area .mobile-mb:nth-child(-n+2) {
    margin-bottom: 56px;
  }
}

/*******************************************************/
/******************** ## Team Area *********************/
/*******************************************************/
.carousel-item-next,
.carousel-item-prev,
.carousel-item.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.light-mode .team-area {
  background: white;
}

.team-area .carousel-inner {
  height: 643px;
}

/* Faster slide transition for the team carousel */
.team-area .carousel-item {
  transition: transform 0.4s ease-in-out;
}

.team-area .carousel-item .team-item-wrap {
  position: relative;
}

.team-area .carousel-item .team-item-wrap:nth-child(2) {
  padding: 0 10px;
}

.team-area .carousel-item .team-item-wrap:first-child {
  padding-right: 20px;
}

.team-area .carousel-item .team-item-wrap:last-child {
  padding-left: 20px;
}

.team-item .text {
  background: var(--heading-color);
  color: var(--black-100);
  padding: 32px;
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: -96px;
  -webkit-transform: perspective(250px) rotateY(-90deg);
  -khtml-transform: perspective(250px) rotateY(-90deg);
  -moz-transform: perspective(250px) rotateY(-90deg);
  -ms-transform: perspective(250px) rotateY(-90deg);
  -o-transform: perspective(250px) rotateY(-90deg);
  transform: perspective(250px) rotateY(-90deg);
  -webkit-transition: all 400ms ease-in-out;
  -khtml-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  -ms-transition: all 400ms ease-in-out;
  -o-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out;
}

.team-area .carousel-item .team-item-wrap:first-child {
  padding-left: 0;
}

.team-area .carousel-item .team-item-wrap:last-child {
  padding-right: 0;
}

.team-item img {
  width: 100%;
  height: 560px;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}

.team-area .carousel-item .team-item-wrap:nth-child(2) .text,
.team-area .carousel-item .team-item-wrap:first-child:hover .text,
.team-area .carousel-item .team-item-wrap:last-child:hover .text,
.team-item:hover .text {
  -webkit-transform: perspective(250px) rotateY(0deg);
  -khtml-transform: perspective(250px) rotateY(0deg);
  -moz-transform: perspective(250px) rotateY(0deg);
  -ms-transform: perspective(250px) rotateY(0deg);
  -o-transform: perspective(250px) rotateY(0deg);
  transform: perspective(250px) rotateY(0deg);
}

.team-item .text h5 {
  color: var(--black-100);
  margin: 16px 0;
}

@media (min-width: 768px) and (max-width: 991px) {
  .team-item .text {
    padding: 16px;
    left: 15%;
    right: 15%;
  }
}

@media only screen and (max-width: 767px) {

  .team-area .carousel-item .team-item-wrap {
    display: none;
  }

  .team-area .carousel-item.active .team-item-wrap:nth-child(2) {
    display: inherit;
  }

  .team-area .carousel-item .team-item-wrap:first-child {
    padding-right: 0;
  }

  .team-area .carousel-item .team-item-wrap:last-child {
    padding-left: 0;
  }

  .team-area .carousel-item .team-item-wrap:nth-child(2) {
    padding: 0;
  }
}

.light-mode .team-area .carousel-buttons button {
  background: var(--black-100);
  color: white;
}

.light-mode .team-item .text {
  background: var(--black-10);
}

/*******************************************************/
/****************** ## FAQ Area ******************/
/*******************************************************/
/* The FAQ used to borrow the home page Work Process markup wholesale-the same
   ruler strip, the same 01..05 numbers, the same synced slider-so the two
   sections read as one repeated block. It is a card grid of its own now: two
   per row, every answer on screen at once, no slider and no accordion. Nothing
   here depends on slick or the .timeline-* rules any more. */
/* A tint behind the cards, so white cards read as cards. !important because the
   light-mode block near the end of this file paints every .black-110-bg section
   "#ffffff !important"-matching that weight is the only way to opt out. */
.light-mode .faq-area,
.light-mode .faq-area.black-110-bg {
  background-color: white;
}

/* Section head follows the site pattern: title left, supporting line pulled to
   the right and sitting on the same baseline as the heading. */
.faq-area .faq-head {
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  margin-bottom: 56px;
}

.faq-area .faq-head-text {
  padding-left: 40px;
}

.faq-area .faq-head-text p {
  max-width: 460px;
  margin-left: auto;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.8;
}

.faq-grid {
  display: -ms-grid;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.faq-card {
  position: relative;
  padding: 36px 36px 40px;
  border: none;
  background: rgba(255, 255, 255, 0.04);
  -webkit-transition: box-shadow 0.35s ease, -webkit-transform 0.35s ease;
  -o-transition: box-shadow 0.35s ease, transform 0.35s ease;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.faq-card:hover {
  -webkit-transform: translateY(-6px);
  -ms-transform: translateY(-6px);
  transform: translateY(-6px);
}

/* Number and question sit on one line, divided from the answer below-the
   card reads as a question with an answer, not three stacked text blocks. */
.faq-card-head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

/* Numbered badge rather than a loose caption, so each card has an anchor the
   eye lands on before the question. */
.faq-num {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
  width: 46px;
  height: 46px;
  margin-right: 18px;
  border-radius: 50%;
  background: var(--primary-color);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #ffffff;
}

.faq-question {
  margin-bottom: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.35;
  /* h3 ships -2px tracking for its 38-51px display size; at 20px that closes
     the word gaps, so reset it. */
  letter-spacing: normal;
  color: var(--heading-color);
}

.faq-lead {
  margin-bottom: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--heading-color);
}

.faq-card p {
  font-size: 15px;
  line-height: 1.75;
}

.faq-card p:last-child {
  margin-bottom: 0;
}

/* ---- Light theme ---- */
.light-mode .faq-card {
  background: #ffffff;
  -webkit-box-shadow: 0 2px 16px rgba(20, 20, 20, 0.05);
  box-shadow: 0 2px 16px rgba(20, 20, 20, 0.05);
}

.light-mode .faq-card-head {
  border-bottom-color: var(--black-20);
}

.light-mode .faq-card:hover {
  -webkit-box-shadow: 0 18px 40px rgba(18, 65, 133, 0.13);
  box-shadow: 0 18px 40px rgba(18, 65, 133, 0.13);
}

.light-mode .faq-question,
.light-mode .faq-lead {
  color: var(--black-100);
}

.light-mode .faq-card p {
  color: var(--black-80);
}

/* ---- Ask-us card ----
   Six cells for five questions, so this closes the grid instead of leaving a
   hole in the last row. It comes after the .light-mode .faq-card rules on
   purpose: same specificity, so the later one has to be this one or the card
   goes white and its white text disappears. */
.faq-card-cta,
.light-mode .faq-card-cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  background: var(--primary-color);
  border-color: var(--primary-color);
  border-top-color: var(--primary-color);
}

/* .faq-area is in the selector to outrank the blanket
   ".light-mode .black-110-bg p" rule further down the file. */
.faq-card-cta .faq-question,
.faq-card-cta p,
.light-mode .faq-area .faq-card-cta .faq-question,
.light-mode .faq-area .faq-card-cta p {
  color: #ffffff;
}

/* No .faq-card-head on this one, so the heading carries its own gap. */
.faq-card-cta .faq-question {
  margin-bottom: 14px;
}

.faq-card-cta p {
  margin-bottom: 28px;
  opacity: 0.9;
}

/* Stacked by the column flex, so both keep to the left edge of the card. */
.faq-card-cta .btn-white-bg,
.faq-card-cta .faq-call {
  -ms-flex-item-align: start;
  align-self: flex-start;
}

.faq-card-cta .btn-white-bg {
  border-color: #ffffff;
}

.faq-card-cta .faq-call,
.light-mode .faq-card-cta .faq-call {
  margin-left: 0;
  margin-top: 20px;
}

.faq-call,
.light-mode .faq-call {
  display: inline-block;
  margin-left: 24px;
  font-weight: 600;
  white-space: nowrap;
  color: #ffffff;
}

.faq-call:hover,
.light-mode .faq-call:hover {
  color: var(--black-100);
}

/* ---- Responsive ---- */
@media only screen and (max-width: 991px) {
  /* Head stacks: the supporting line drops under the heading, full width. */
  .faq-area .faq-head-text {
    padding-left: 0;
    margin-top: 20px;
  }

  .faq-area .faq-head-text p {
    max-width: none;
    margin-left: 0;
  }

  .faq-card {
    padding: 32px 28px;
  }

  .faq-question {
    font-size: 20px;
  }

  .faq-num {
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
  }
}

@media only screen and (max-width: 767px) {
  /* One card per row from tablet down. */
  .faq-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .faq-area .faq-head {
    margin-bottom: 36px;
  }
}

@media only screen and (max-width: 575px) {
  .faq-card {
    padding: 24px;
  }

  .faq-call {
    display: block;
    margin-left: 0;
    margin-top: 16px;
  }
}

/*******************************************************/
/****************** ## Contact Area ******************/
/*******************************************************/
.contact-banner {
  margin-top: 90px;
  background: var(--black-100);
  z-index: 0;
  position: relative;
}

.contact-title h1 {
  color: transparent;
  text-shadow: 2px 0 transparent;
  background: linear-gradient(to right, #ffffff 0%, #ffffff 50%, var(--black-100) 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  z-index: 2;
}

.contact-title:after {
  content: '';
  background: var(--black-30);
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: -1;
}

.contact-area {
  padding-bottom: 128px;
}

.contact-content {
  position: relative;
}

.ct-form {
  padding: 128px 64px;
  background: var(--heading-color);
}


@media only screen and (min-width: 992px) {
  .contact-form {
    margin-right: 35%;
  }

}

.contact-info {
  position: absolute;
  background: black;
  padding: 64px;
  width: 43%;
  right: 0;
  top: 23%;
}

@media only screen and (max-width: 1399px) {
  .contact-info {
    top: 20%;
  }
}

@media only screen and (max-width: 991px) {
  .contact-info {
    position: unset;
    width: 100%;
    margin-top: 64px;
  }
}

@media only screen and (max-width: 575px) {
  .contact-info {
    padding: 40px 28px;
  }

  .ct-form {
    padding: 80px 28px;
  }
}

.contact-area:before {
  content: '';
  width: 50%;
  height: 100%;
  background: var(--black-100);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.contact-area:after {
  content: '';
  width: 50%;
  height: 100%;
  top: 0;
  right: 0;
  background: var(--black-30);
  display: block;
  position: absolute;
  z-index: -1;
}

.contact-form input,
.contact-form select,
.contact-form textarea,
.contact-form .nice-select,
.contact-form .form-control {
  background: transparent;
  border: unset;
  border-bottom: 1px solid var(--black-50);
}

.contact-btn {
  border: 1px solid var(--black-100);
  background: var(--black-100);
  color: #ffffff;
  padding: 16px 32px;
}

.contact-info-item {
  display: flex;
  align-items: flex-start;
}

/* The row's icon + text are wrapped in a link (so the icon is clickable too).
   Make that link a flex container as well, otherwise its contents go inline and
   a wrapping address runs back underneath the icon instead of staying aligned. */
.contact-info-item > a {
  display: flex;
  align-items: flex-start;
}

.contact-info-item i {
  margin-right: 32px;
  flex-shrink: 0;
  line-height: inherit;
}

.map-area iframe {
  height: 800px;
  filter: grayscale(100%);
  margin-bottom: -9px;
}


/* Contact Form Validation */
.has-error .with-errors {
  color: red;
  margin-top: 5px;
  margin-bottom: -15px;
}

#msgSubmit {
  margin-bottom: 0;
  margin-top: 10px;
}

/*******************************************************/
/****************** ## 404 Area ********************/
/*******************************************************/
.error-area {
  height: 100vh;
}

.error-area:before {
  content: '';
  width: 50%;
  height: 100vh;
  background: var(--black-100);
  display: block;
  position: absolute;
  left: 0;
  z-index: -1;
}

.error-area:after {
  content: '';
  width: 50%;
  height: 100%;
  background: var(--black-30);
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  z-index: -1;
}

.error-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: 416px;
}

.error-content {
  padding-top: 276px;
}

@media only screen and (max-width: 576px) {
  .error-content {
    padding: 128px 0;
  }
}

.error-desc p {
  color: transparent;
  background: linear-gradient(to right, var(--black-30) 0%, var(--black-30) 50%, var(--black-100) 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/*******************************************************/
/******************** ## Main Footer *******************/
/*******************************************************/
.footer-top h2 {
  color: var(--black-30);
  margin-bottom: 0;
}

.footer-bottom {
  margin-top: auto;
  margin-bottom: 0;
}

.footer-bottom-text {
  position: relative;
  width: fit-content;
  height: 100%;
  margin: auto 0 0 auto;
}

.footer-bottom-text .content {
  float: right;
  height: 100%;
  width: fit-content;
}

.light-mode .footer-bottom {
  color: var(--black-30);
}

@media(min-width: 992px) {
  .footer-top h2 {
    text-shadow: 2px 0 var(--black-30);
  }

  .footer-top .white {
    text-shadow: 2px 0 white;
  }
}

.footer-bottom-text .content .info,
.footer-bottom-text .content .links {
  width: auto;
  margin-left: auto;
  margin-top: auto;
}

/* Make the CONTACT block fill the same height as KEY LINKS so the two
   footer columns line up top-to-bottom on tablet and desktop */
@media only screen and (min-width: 768px) {
  .footer-bottom-text .content .info {
    margin-top: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.footer-bottom-text a:hover {
  color: var(--primary-color);
}

.copyright-area {
  margin-bottom: 0;
  margin-top: auto;
  text-align: center;
  padding-right: 16px;
}

.copyright-area a {
  color: var(--primary-color);
}

.footer-bottom .h4-rotate {
  font-size: 38px;
  color: var(--heading-color);
  transform: rotate(-90deg);
  position: absolute;
  left: -132px;
  bottom: 76px;
  width: 210px;
  height: 46px;
  letter-spacing: -2px;
  font-weight: 900;
}

.footer-bottom .content .links li {
  margin-bottom: 16px;
}

.footer-bottom .content .links li:last-child {
  margin-bottom: 0;
}

.footer-social i {
  margin-left: 16px;
}

.footer-bottom-text:has(.to-top) {
  border-right: 1px solid var(--black-30);
}

.to-top {
  background: none;
}

.to-top p {
  transform: rotate(-90deg);
  position: absolute;
  bottom: 6px;
  padding: 0 6px;
  width: max-content;
  right: -32px;
  background: var(--black-120);
}

@media only screen and (max-width: 1200px) {
  .copyright-area {
    padding-right: 50px;
  }
}


@media only screen and (max-width: 991px) {
  .copyright-area {
    text-align: left;
  }
}


@media only screen and (max-width: 767px) {

  /* leave a clear strip at the bottom so the floating WhatsApp/Call
     buttons (which stack ~126px up from the bottom) don't cover
     the footer links or copyright text */
  .main-footer.py-128 {
    padding-bottom: 150px;
  }

  .copyright-area {
    margin-left: 0;
    margin-bottom: 24px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    padding-left: 78px;
    padding-right: 50px;
  }

  .sm-none {
    display: none;
  }

  .footer-bottom-text .content .info,
  .footer-bottom-text .content .links {
    margin-left: 48px;
  }

  .footer-bottom .h4-rotate {
    left: -87px;
  }

  .footer-bottom-text {
    margin: 0;
  }
}

@media only screen and (max-width: 576px) {

  .footer-top,
  .col-xs-12:has(.info) {
    margin-bottom: 64px;
  }

  .error-desc.py-128 {
    padding: 64px 0;
  }
}

@media only screen and (max-width: 400px) {
  .footer-bottom {
    margin-bottom: 16px;
  }
}


/*******************************************************/
/******************** ## Intro *******************/
/*******************************************************/
@media(min-width: 767px) {
  .intro-area .col-md-6.left {
    padding-right: 15px;
  }

  .intro-area .col-md-6.right {
    padding-left: 15px;
  }
}

.intro-area .content {
  margin-left: auto;
  margin-right: auto;
  margin-top: 64px;
  text-align: center;
}

.screen {
  display: block;
  width: 100%;
  height: 600px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.screen img {
  width: 100%;
  height: auto;
  position: absolute;
  z-index: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: top 11s;
  -moz-transition: top 11s;
  -ms-transition: top 11s;
  -o-transition: top 11s;
  transition: bottom 11s;
}

@media(min-width:1400px) {
  .screen img {
    bottom: -4256px;
  }
}

@media (min-width:1200px) and (max-width:1399px) {
  .screen img {
    bottom: -2300px;
  }
}

@media (max-width:1199px) {
  .screen img {
    bottom: -1500px;
  }
}

@media (max-width:767px) {
  .screen img {
    bottom: -1000px;
  }

  .intro-area .left {
    margin-bottom: 128px;
  }
}

.screen:hover img {
  bottom: 0;
  -webkit-transition: all 11s;
  -moz-transition: all 11s;
  -ms-transition: all 11s;
  -o-transition: all 11s;
  transition: all 11s;
}




@media (max-width:767px) {
  .screen img {
    bottom: -1000px;
  }

  .intro-area .left {
    margin-bottom: 128px;
  }
}

.screen:hover img {
  bottom: 0;
  -webkit-transition: all 11s;
  -moz-transition: all 11s;
  -ms-transition: all 11s;
  -o-transition: all 11s;
  transition: all 11s;
}
/* ============================================================
   FULL LIGHT / WHITE THEME OVERRIDES
   Activated by .light-mode on .page-wrapper. Whitens sections
   that use hard-coded dark background helper classes and fixes
   text / logo contrast so the whole site reads on white.
   ============================================================ */
.light-mode.page-wrapper { background: #ffffff; }

/* Solid dark section backgrounds -> white / very light */
.light-mode .black-120-bg,
.light-mode .black-110-bg,
.light-mode .black-100-bg { background-color: #ffffff !important; }
.light-mode .black-90-bg,
.light-mode .black-80-bg { background-color: var(--black-10) !important; }

/* Services page "Free consultation" CTA: light grey panel so it reads as a
   distinct band instead of blending into the white section above it.
   Keeps .black-120-bg so the paragraph keeps its readable dark text. */
.light-mode .black-120-bg.consult-cta { background-color: var(--black-10) !important; }

/* Services page "What we do" cards: same construction as the curtains page
   "Fabric guide" (.curtain-card)-photo flush on top, body beneath, rounded and
   clipped-but on a light #E8E8E8 panel instead of the dark one. */
.svc-card {
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--black-10);
  border: 1px solid var(--black-20);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  -o-transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.svc-card:hover {
  -webkit-transform: translateY(-8px);
  -ms-transform: translateY(-8px);
  transform: translateY(-8px);
  border-color: var(--primary-color);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.svc-card img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

.svc-card-body {
  padding: 24px 22px 26px;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* Same type treatment as .curtain-card-body, but dark text for the light panel. */
.svc-card-body h5,
.light-mode .svc-card-body h5 {
  margin-bottom: 10px;
  color: var(--black-100);
}

.svc-card-body p {
  margin-bottom: 24px;
  font-size: 15px;
  line-height: 26px;
  color: var(--black-80);
}

/* Pin the button to the bottom so it lines up across cards whose copy differs
   in length; align-self stops it stretching to the card's full width. */
.svc-card-body .theme-btn {
  margin-top: auto;
  -ms-flex-item-align: start;
  align-self: flex-start;
}

/* Loading screen */
.light-mode .preloader { background: #ffffff; }

/* Header */
.light-mode .main-header .header-upper { border-bottom: 1px solid var(--black-10); }
.light-mode .main-menu .navbar-collapse > .navigation > li > a { color: var(--secondary-color); }
.light-mode .main-menu .navbar-collapse > .navigation > li > a:hover { color: var(--primary-color); }
.light-mode .main-menu .navbar-collapse li.dropdown .dropdown-btn { color: var(--secondary-color); }
.light-mode .main-menu .navbar-collapse li li { background: #ffffff; border-top-color: var(--black-10); }
.light-mode .main-menu .navbar-collapse li li a { color: var(--secondary-color); }
.light-mode .main-menu .navbar-collapse li li a:hover { color: var(--primary-color); }

/* Mobile/tablet drop-down panel behind the hamburger.
   The theme ships this panel dark (--black-100) while light-mode paints the
   links dark too, which left black text on a black panel-an invisible menu.
   White panel + the theme's light hairlines fixes it. */
@media only screen and (max-width: 991px) {
  .light-mode .main-menu .navbar-collapse > ul { background: #ffffff; }
  .light-mode .main-menu .navbar-collapse li { border-top-color: var(--black-10); }
  .light-mode .main-menu .navbar-collapse > ul > li:last-child { border-bottom-color: var(--black-10); }
  .light-mode .main-menu .navbar-collapse li.dropdown .dropdown-btn { border-left-color: var(--black-10); }
}

/* Hero overlay box -> white card (matches the gallery hover box) */
.light-mode .hero-content {
  background: #ffffff;
  border: 1px solid var(--black-10);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.10);
}
.light-mode .hero-content h6,
.light-mode .hero-area h6 { color: var(--black-90); }
.light-mode .hero-content .hero-btn,
.light-mode .hero-content .btn-icon .fa { color: #124185; }
.light-mode .hero-content .btn-icon .circle { border-color: var(--black-90); }
.light-mode .hero-content .btn-icon .dot,
.light-mode .hero-content .btn-icon .line { background: var(--black-90); }
.light-mode .hero-content .hero-btn:hover,
.light-mode .hero-content a.hero-btn:hover .btn-icon .fa { color: var(--primary-color); }
.light-mode .hero-content a.hero-btn:hover .btn-icon .circle { border-color: var(--primary-color); }
.light-mode .hero-content a.hero-btn:hover .btn-icon .dot,
.light-mode .hero-content a.hero-btn:hover .btn-icon .line { background: var(--primary-color); }

/* Sections sitting on photos keep light text */
.light-mode .banner-content h1,
.light-mode .banner-content p,
.light-mode .banner-content .breadcrumb li,
.light-mode .banner-content .breadcrumb a,
.light-mode .achievement-area .count-text,
.light-mode .achievement-area .counter-title { color: #ffffff; }

/* Former-dark solid sections (CTA etc.): readable body text */
.light-mode .black-120-bg p,
.light-mode .black-110-bg p { color: var(--black-80); }

/* Footer */
.light-mode .main-footer { border-top: 1px solid var(--black-10); }
.light-mode .footer-top h2 { color: var(--secondary-color); text-shadow: none; }
.light-mode .footer-top .white,
.light-mode .footer-top h2 .white { color: var(--primary-color); text-shadow: none; }
.light-mode .footer-bottom,
.light-mode .footer-bottom .info p,
.light-mode .copyright-area { color: var(--black-80); }
.light-mode .footer-bottom a { color: var(--secondary-color); }
.light-mode .footer-bottom a:hover { color: var(--primary-color); }
/* Developer credit stays brand blue at rest, with no hover colour shift. */
.light-mode .copyright-area a,
.light-mode .copyright-area a:hover { color: var(--primary-color); }
.light-mode .footer-bottom .h4-rotate { color: var(--secondary-color); }
.light-mode .footer-bottom-text:has(.to-top) { border-right-color: var(--black-10); }
.light-mode .to-top p { background: #ffffff; color: var(--secondary-color); }

/* Sub-titles stay gold */
.light-mode .sub-title { color: var(--primary-color); }

/* Services carousel description -> readable on the white theme
   (Bootstrap's .carousel-caption defaults to white text) */
.light-mode .service-area .carousel-caption p { color: var(--black-80); }

/* Service carousel title -> fully black on the white theme */
.light-mode .service-area .big-text {
  color: #124185;
}

/* Bottom arrow as a solid gold square button (was a white icon on white). */
.light-mode .service-area .right-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--primary-color);
  color: #ffffff;
  font-size: 18px;
  transition: 0.3s ease;
}
.light-mode .service-area .carousel-caption a:hover .right-arrow {
  background: var(--secondary-color);
  color: #ffffff;
}

/* Match the CURTAINS & UPHOLSTERY (interior) hover box to the Products page:
   a white card with dark text on the white theme (was a dark box) */
.light-mode .interior-area .carousel-caption {
  background: #ffffff;
  color: var(--black-90);
}
.light-mode .interior-area .carousel-caption h5 {
  color: var(--black-100);
}
.light-mode .interior-area .carousel-caption .hero-btn,
.light-mode .interior-area .carousel-caption .btn-icon .fa {
  color: var(--black-90);
}
.light-mode .interior-area .carousel-caption .btn-icon .circle {
  border-color: var(--black-90);
}
.light-mode .interior-area .carousel-caption .btn-icon .dot,
.light-mode .interior-area .carousel-caption .btn-icon .line {
  background: var(--black-90);
}
.light-mode .interior-area .carousel-caption .hero-btn:hover,
.light-mode .interior-area .carousel-caption a.hero-btn:hover .btn-icon .fa {
  color: var(--primary-color);
}
.light-mode .interior-area .carousel-caption a.hero-btn:hover .btn-icon .circle {
  border-color: var(--primary-color);
}
.light-mode .interior-area .carousel-caption a.hero-btn:hover .btn-icon .dot,
.light-mode .interior-area .carousel-caption a.hero-btn:hover .btn-icon .line {
  background: var(--primary-color);
}

/* SERVICES carousel nav buttons -> match the gallery's: dark square, white arrow
   (they were white-on-white and near-invisible in the light theme) */
.light-mode .service-area .carousel-buttons button {
  background:#124185;
  color: #ffffff;
}
.light-mode .service-area .carousel-buttons button i {
  color: #ffffff;
}

/* Work Process (timeline) box -> white card with dark text, matching the
   gallery / hero boxes on the white theme (was a dark black box) */
.light-mode .timeline-area .timeline-images .content {
  background: #ffffff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}
.light-mode .timeline-images .content .title,
.light-mode .timeline-images .slick-current .content .h5 {
  color:#124185;
}
.light-mode .timeline-images .description {
  color: var(--black-80);
}

/* Service-page video section (Instagram highlight clips, self-hosted) */
.video-area .video-wrap {
  max-width: 420px;
  margin: 0 auto;
}
.video-area .video-wrap video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  background: #000;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
}

/* Contact page: right column holds the map on top + Get in touch directly
   below it, aligned with the top of the form */
.contact-content .contact-info {
  top: 0;
  height: 100%;               /* match the form's height */
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.contact-map {
  flex: 1 1 auto;            /* map fills the space above Get in touch */
  min-height: 200px;
  line-height: 0;
}
.contact-map iframe {
  border: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.contact-gt {
  flex: 0 0 auto;
  padding: 48px 64px;
}
.contact-gt a { color: var(--black-30); }
.contact-gt a:hover { color: var(--primary-color); }
.contact-gt .contact-info-item i { margin-right: 32px; flex-shrink: 0; }
@media only screen and (max-width: 991px) {
  .contact-content .contact-info { height: auto; display: block; }
  .contact-map iframe { height: 300px; }
}
@media only screen and (max-width: 575px) {
  .contact-gt { padding: 40px 28px; }
}

/* Products page: single category video in a horizontal (16:9) frame */
.product-video {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.product-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}
.product-video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Mobile: the 96px gap under the "See it in action" heading is far too big
   above the video-tighten it. */
@media (max-width: 767px) {
  .video-area .section-title.mb-96 {
    margin-bottom: 24px;
  }
}

/* ---- Service-page "Watch in action" video (curtains, sofa, blinds, etc.) ---
   Two-column layout: copy on one side, a framed 16:9 player on the other.
   Replaces the old centred single-column video block. */

/* Bottom spacing only-the section above already provides the top gap, so
   drop the py-128 top padding here (overrides py-128 at every breakpoint). */
.svc-video-area {
  padding-top: 0;
}

/* Opt back in to the standard py-128 top gap where the section above doesn't
   already provide one (blinds page). Values mirror .py-128 per breakpoint. */
.svc-video-area.svc-video-top-space {
  padding-top: 60px;
}

@media (max-width: 991px) {
  .svc-video-area.svc-video-top-space {
    padding-top: 46px;
  }
}

@media (max-width: 767px) {
  .svc-video-area.svc-video-top-space {
    padding-top: 34px;
  }
}

.svc-video-area .svc-video-text h2 {
  margin: 0 0 18px;
}

.svc-video-area .svc-video-text p {
  margin: 0;
  font-size: 16px;
  line-height: 28px;
  color: var(--black-80);
  max-width: 460px;
}

.svc-video-player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--black-90);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
}

.svc-video-player video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@media (max-width: 991px) {
  /* Stack: copy centred above the player. */
  .svc-video-area .svc-video-text {
    text-align: center;
    margin-bottom: 32px;
  }

  .svc-video-area .svc-video-text p {
    margin-left: auto;
    margin-right: auto;
  }
}

/*******************************************************/
/*********** ## Service Video Section - Two Up *********/
/*******************************************************/
/* Pages that show two clips use .svc-video-duo on the row. The text column
   narrows to a third and the two players take the remaining thirds.

   The players also switch to a 9:16 box here. All of this footage is portrait
   (720x1280), and the default .svc-video-player is 16:9 with object-fit:
   contain -- fine for one wide player, but at a third of the width two of them
   would be mostly black bars. A portrait box lets the video fill it exactly. */
.svc-video-duo .svc-video-player {
  aspect-ratio: 9 / 16;
}

/* Cap the height so a tall portrait pair doesn't dominate the section on wide
   screens, and keep the pair centred in its column. */
.svc-video-duo .svc-video-player {
  max-height: 620px;
  margin-left: auto;
  margin-right: auto;
  max-width: 350px;
}

@media (max-width: 991px) {
  /* Text is already centred above by the base rule; the two players sit side
     by side from 768px up and stack below that (col-md-6 in the markup). */
  .svc-video-duo .svc-video-player {
    max-width: 300px;
  }
}

@media (max-width: 767px) {
  .svc-video-duo .svc-video-player {
    max-width: 340px;
  }

  /* Stacked: the second player needs its own gap. */
  .svc-video-duo > [class*="col-"] + [class*="col-"] .svc-video-player {
    margin-top: 24px;
  }
}

/*******************************************************/
/************** ## Hero Banner Video *******************/
/*******************************************************/
/* Some hero slides play a clip instead of a still. A <video> has no intrinsic
   aspect ratio to size a flex item from the way an <img> does, so sizing the
   video itself and letting the wrapper shrink to fit it collapses the slide to
   a sliver -- worst on the slides that carry preload="none", where no metadata
   has arrived at layout time.

   So the box is owned by .bg-img and the clip fills it absolutely: the wrapper
   carries the per-breakpoint height (mirroring .hero-img below) and grows into
   the row, and the video covers it whatever its own dimensions are. The
   sources are portrait and the banner is a wide, short box, so object-fit:
   cover crops to a centre band; the footage is full-height curtain and room
   shots, which read correctly cropped that way. */
.hero-area .carousel-item .hero-text-img:has(.hero-video),
.hero-area .bg-img:has(.hero-video) {
  flex: 1 1 auto;
  min-width: 0;
}

.hero-area .bg-img:has(.hero-video) {
  position: relative;
  height: 725px;
  overflow: hidden;
  background: var(--black-100);
}

/* The clip is wrapped in the slide's link. Left inline it would collapse to
   nothing once the video goes absolute, taking the click target with it, so
   the anchor is the thing that fills the wrapper and the video fills it. */
.hero-area .bg-img:has(.hero-video) > a {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* !important, and matched through .bg-img rather than on its own, because
   .hero-img -- which the clips also carry, for the stills' sake -- is given an
   !important height, width and object-fit per breakpoint by the <style> block
   in index.html, which loads after this file. Bare .hero-video would tie on
   specificity and lose on order. */
.hero-area .bg-img .hero-video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  object-fit: cover !important;
  object-position: center;
  background: var(--black-100);
}

/* Split banner: portrait clip down the middle, stills either side.

   Cropping a 9:16 clip to a banner this wide only ever shows a thin slice of
   it. This lays the slide out as three columns instead -- the clip keeps its
   own shape and runs the full height of the banner in the centre, and two
   curtain stills take the space left over. Nothing is cropped vertically and
   the clip stays centred at every width.

   Showing the frame whole also means showing the titling burnt into the
   footage; only re-encoding the clip removes that. */
.hero-area .bg-img.hero-media-split {
  display: flex;
  align-items: stretch;
}

/* The centre column. :has() in the selector to outrank the rule above that
   absolutely fills .bg-img with the link -- here the link is a flex item
   sized to the clip's own ratio instead. */
.hero-area .bg-img.hero-media-split:has(.hero-video) > a {
  position: relative;
  top: auto;
  left: auto;
  z-index: 1;
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 9 / 16;
}

/* The stills split whatever width the clip leaves. min-width:0 so they give
   the centre column its full height-derived width before shrinking. */
.hero-area .bg-img.hero-media-split .hero-side {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Heights mirror .hero-img at each breakpoint so a clip slide and a still
   slide are the same size. The 992px rule matches the shorter desktop banner
   set in index.html and comes last so it wins inside 992-1199px. */
@media only screen and (max-width: 1199px) {
  .hero-area .bg-img:has(.hero-video) {
    height: 556px;
  }
}

@media only screen and (max-width: 991px) {
  .hero-area .bg-img:has(.hero-video) {
    height: 400px;
  }
}

@media only screen and (min-width: 992px) {
  .hero-area .bg-img:has(.hero-video) {
    height: 420px;
  }
}

/* The blinds slide shows stills instead of a clip: several blinds photos
   cross-fading with a slow zoom, so it reads as footage without a video file.
   It shares .hero-img (and so that class's per-breakpoint height) with the
   videos, and like a <video> a <div> has no intrinsic ratio to derive its
   width from, so the width is set explicitly here too. */
.hero-slideshow {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  background: var(--black-100);
}

.hero-slideshow img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: heroSlideshow 9s linear infinite;
}

.hero-slideshow img:nth-child(1) { animation-delay: 0s; }
.hero-slideshow img:nth-child(2) { animation-delay: 3s; }
.hero-slideshow img:nth-child(3) { animation-delay: 6s; }

/* 9s cycle over 3 photos: each holds for its 3s third with a ~0.6s cross-fade
   at either end, and drifts from 1 to 1.06 while it is up so the banner keeps
   moving the way the clips on the other slides do. */
@keyframes heroSlideshow {
  0% { opacity: 0; transform: scale(1); }
  6.7% { opacity: 1; }
  33.3% { opacity: 1; }
  40% { opacity: 0; transform: scale(1.06); }
  100% { opacity: 0; transform: scale(1.06); }
}

/* Same reasoning as the clips below: motion nobody asked for. Hold the first
   photo still instead. */
@media (prefers-reduced-motion: reduce) {
  .hero-slideshow img {
    animation: none;
    opacity: 0;
    transform: none;
  }

  .hero-slideshow img:first-child {
    opacity: 1;
  }
}
/* An autoplaying loop is motion the user didn't ask for. CSS can't pause a
   video, so script pauses it (see index.html); this just removes the entrance
   animation for the same users. */
@media (prefers-reduced-motion: reduce) {
  .hero-video.wow {
    animation: none !important;
    visibility: visible !important;
  }
}

/* Tablet band fix for the slideshow slide. A <div> has no intrinsic ratio, so
   .bg-img -- a shrink-to-fit flex item here -- collapses around it and the
   slide comes out far narrower than the landscape stills next to it. Above
   992px an inline rule in index.html already gives .bg-img `flex: 1 1 auto;
   min-width: 0`, and below 768px the row has stopped being a shrink-to-fit
   flex context, so this band is the only one that needs it.

   The clip slides had the same problem and are handled above instead, where
   they claim the row at every width. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
  /* Both levels need it. The whole chain -- .hero-text-img then .bg-img -- is
     shrink-to-fit here (col-lg-* stops applying below 992px, and .hero-content
     is absolutely positioned so it contributes no width). Growing only .bg-img
     just fills a parent that had already collapsed, so .hero-text-img has to
     claim the row first. */
  .hero-area .carousel-item .hero-text-img:has(.hero-slideshow),
  .hero-area .bg-img:has(.hero-slideshow) {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* The mattress page's third clip is landscape while the other two are portrait,
   so it gets a full-width row of its own below them. .svc-video-player already
   supplies the 16:9 box; this just caps the width so it doesn't outgrow the
   pair above it, and adds the gap between the two rows. */
.svc-video-feature {
  max-width: 860px;
  margin: 56px auto 0;
}

@media (max-width: 991px) {
  .svc-video-feature {
    margin-top: 32px;
  }
}

/*******************************************************/
/********* ## Interior Gallery - layout fixes **********/
/*******************************************************/
/* The three tiles per slide are sized 25% / 50% / 25%. The side widths are set
   on :first-child/:last-child above, but the middle one was relying on the
   .col-lg-6 in the markup -- and Bootstrap only defines .col-lg-6 from 992px up.
   Below that the middle tile had no width at all, and because the slide is a
   flex row and the image inside is width:100%, it shrank to zero. Setting the
   width here makes all three explicit at every breakpoint. */
.interior-area .carousel-item .interior-act:nth-child(2) {
  width: 50%;
}

/* Also stop the three from being squeezed: flex items shrink by default, and
   the images are width:100% of whatever they are given. */
.interior-area .carousel-item .interior-act {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  min-width: 0;
}

@media only screen and (max-width: 576px) {
  /* The side tiles are hidden at this width (rule above), so the middle one is
     the whole row rather than half of it. */
  .interior-area .carousel-item .interior-act:nth-child(2) {
    width: 100%;
  }
}

/* IMPORTANT: the rules above this point describe a slide of THREE tiles at
   25% / 50% / 25%. The markup no longer looks like that -- each .carousel-item
   holds a SINGLE .interior-act. So:

     :nth-child(2)  never matches, which is why the middle-tile width and the
                    caption's `display: block` never take effect;
     :first-child   and :last-child BOTH match the one tile, so every rule
                    written for the decorative side tiles lands on the only
                    tile there is.

   That is what emptied this gallery on small screens: the `display: none`
   written for the side tiles hid the whole slide, and the rotateY(-90deg)
   that was meant to fold those tiles away until hover was folding away the
   only caption on the page.

   This block puts it right below 992px. Do not reinstate a :first-child or
   :last-child `display: none` here unless the three-tile markup comes back. */
@media only screen and (max-width: 991px) {

  /* Undo the side-tile hiding -- with one tile per slide it hides everything. */
  .interior-area .carousel-item .interior-act,
  .interior-area .carousel-item .interior-act:first-child,
  .interior-area .carousel-item .interior-act:last-child {
    display: block;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }

  /* Bootstrap hides .carousel-caption outright below 768px, and the theme's
     override is written for :nth-child(2), which no longer matches -- so the
     caption has to be turned back on explicitly here. */
  .interior-area .carousel-caption,
  .interior-area .carousel-item .interior-act:first-child .carousel-caption,
  .interior-area .carousel-item .interior-act:last-child .carousel-caption {
    display: block;
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 24px 22px 28px;
    text-align: left;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }

  /* Three more rules further up strip the caption down for the side tiles --
     the paragraph at 1200px, the whole panel at 992px, the label and the
     paragraph again at 768px. All of them land on the only tile there is, so
     each one is put back here. Same specificity, later in the file, so these
     win without !important. */
  .interior-area .carousel-item .interior-act .carousel-caption p,
  .interior-area .carousel-item .interior-act:first-child .carousel-caption p,
  .interior-area .carousel-item .interior-act:last-child .carousel-caption p {
    display: block;
  }

  .interior-area .carousel-item .interior-act .carousel-caption .sub-title {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }

  /* The caption now sits under the picture rather than over it, so the image
     no longer has to leave room beneath itself for an overlay. */
  .interior-area .carousel-item img {
    aspect-ratio: 4 / 3;
    max-height: 300px;
  }
}

/* Snappier slide transition for this gallery. Bootstrap's default is .6s. */
.interior-area .carousel-item {
  -webkit-transition: -webkit-transform 0.35s ease-in-out;
  transition: transform 0.35s ease-in-out;
}

/*******************************************************/
/************ ## Button Hover — global ***************/
/*******************************************************/
/* Every filled button inverts on hover: white panel, brand-blue label.
   Base for pages that load no *-premium.css (404); the premium themes
   repeat this at the end of their own files, since they load later and
   their button rules carry !important. */
.theme-btn:hover,
a.theme-btn:hover,
.btn-white-bg:hover,
button.btn-white-bg:hover,
.primary-readmore:hover,
.section-heading .button a:hover {
  background: #ffffff;
  border-color: var(--primary-color);
  color: var(--primary-color);
}