/*------------------------------------------------------------------
* Project:        Intereal - Architecture & Interior Design HTML Templates
* Author:         HtmlDesign Templates
* URL:            https://themeforest.net/user/htmldesigntemplates/portfolio
* Created:        11/14/2025
-------------------------------------------------------------------*/
/*

1.Default CSS
2.Header CSS
3.Banner CSS
4.About Us CSS
5.Service CSS
6.Why Us CSS
7.Project CSS
8.Review CSS
9.Teams CSS
10.Stats CSS
11.Project CTA CSS
12.FAQ CSS
13.Blog CSS
14.Footer CSS
15.Homepage 2 CSS
16.About Us Page CSS
17.Teams Page CSS
18.Career Page CSS
19.Faq Page CSS
20.Testimonial Page CSS
21.Coming Soon Page CSS
22.Error Page CSS
23.Blog Page CSS
24.Contact Us Page CSS
25.Homepage 3 Page CSS

*/
/*1. Tools & helpers*/
/*2. Base styles*/
/* Remove default margins and paddings */
/* Fonts (Poppins + Teko) are loaded asynchronously via <link> in head.php — see /includes/head.php
   for the preconnect + preload pattern that keeps Google Fonts from blocking first paint. */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Remove list styles */
ul,
ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Remove text decoration for links */
a {
  text-decoration: none;
  color: inherit;
}

/* Set default font for body */
/* Reset images and media */
img,
picture,
video,
canvas,
svg {
  display: inline-block;
  width: 100%;
}

/* Reset form elements */
button,
input,
select,
textarea {
  font: inherit;
  background: none;
  border: none;
  outline: none;
}

.slick-track {
  display: flex;
  align-items: center;
}

@media (min-width: 576px) {
  .modal-sm {
    --bs-modal-width: 350px;
  }
}

body {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: #3d3d3d;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-weight: 600;
  line-height: 1.15;
  color: #1a1a1a;
  letter-spacing: -0.01em;
  text-transform: none;
  margin: 0 0 0.6em;
}

/* --- H1 --- */
h1,
.h1 {
  font-size: 52px;
  font-weight: 700;
  line-height: 1.1;
}

@media (max-width: 1200px) {

  h1,
  .h1 {
    font-size: 46px;
  }
}

@media (max-width: 992px) {

  h1,
  .h1 {
    font-size: 40px;
  }
}

@media (max-width: 768px) {

  h1,
  .h1 {
    font-size: 34px;
  }
}

@media (max-width: 576px) {

  h1,
  .h1 {
    font-size: 28px;
    line-height: 1.15;
  }
}

/* --- H2 --- */
h2,
.h2 {
  font-size: 38px;
  font-weight: 600;
}

@media (max-width: 1200px) {

  h2,
  .h2 {
    font-size: 34px;
  }
}

@media (max-width: 992px) {

  h2,
  .h2 {
    font-size: 30px;
  }
}

@media (max-width: 768px) {

  h2,
  .h2 {
    font-size: 26px;
  }
}

@media (max-width: 576px) {

  h2,
  .h2 {
    font-size: 22px;
  }
}

/* --- H3 --- */
h3,
.h3 {
  font-size: 26px;
  font-weight: 600;
}

@media (max-width: 992px) {

  h3,
  .h3 {
    font-size: 24px;
  }
}

@media (max-width: 768px) {

  h3,
  .h3 {
    font-size: 22px;
  }
}

@media (max-width: 576px) {

  h3,
  .h3 {
    font-size: 20px;
  }
}

/* --- H4 --- */
h4,
.h4 {
  font-size: 20px;
  font-weight: 600;
}

@media (max-width: 768px) {

  h4,
  .h4 {
    font-size: 18px;
  }
}

/* --- H5 --- */
h5,
.h5 {
  font-size: 18px;
  font-weight: 600;
}

@media (max-width: 768px) {

  h5,
  .h5 {
    font-size: 16px;
  }
}

/* --- H6 — eyebrow / label style --- */
h6,
.h6 {
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #906E49;
}

@media (max-width: 768px) {

  h6,
  .h6 {
    font-size: 13px;
  }
}

p {
  margin-bottom: 1rem;
  line-height: 1.65;
  color: #3d3d3d;
}

a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #906E49;
}

small {
  font-size: 0.875rem;
}

.teko {
  font-family: "Teko", "Poppins", sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.popins {
  font-family: "Poppins", Arial, sans-serif;
}

.primary {
  color: #252525;
}

.secondary {
  color: #906E49;
}

.text {
  color: #777777;
}

.white {
  color: #ffffff;
}

.grey {
  color: #F1F1F1;
}

.secondarylight {
  color: #F6F2EB;
}

.bg-primary {
  background-color: #252525 !important;
}

.bg-secondary {
  background-color: #906E49 !important;
}

.bg-dark {
  background-color: #000000 !important;
}

.bg-secondarylight {
  background-color: #F6F2EB;
}

.bg-grey {
  background-color: #F1F1F1 !important;
}

.border-lightgrey {
  border-color: rgba(253, 253, 253, 0.4) !important;
}

.border-light {
  border-color: rgba(241, 241, 241, 0.2784313725) !important;
}

.border-secondary {
  border-color: #906E49 !important;
}

.border-dashed {
  border-bottom: 2px dashed #F1F1F1 !important;
}

.border-dash {
  border-style: dashed !important;
}

.border-dashed-end {
  border-right: 2px dashed #F1F1F1 !important;
}

.border-grey {
  border-color: #F1F1F1 !important;
}

.border-secondarylight {
  border-color: #F6F2EB !important;
}

/* ---------------- PADDING ---------------- */
.p-6 {
  padding: 4rem !important;
}

.p-7 {
  padding: 5rem !important;
}

.p-8 {
  padding: 6rem !important;
}

.p-9 {
  padding: 7rem !important;
}

.p-10 {
  padding: 8rem !important;
}

/* Padding Top */
.pt-6,
.py-6 {
  padding-top: 4rem !important;
}

.pt-7,
.py-7 {
  padding-top: 5rem !important;
}

.pt-8,
.py-8 {
  padding-top: 6rem !important;
}

.pt-9,
.py-9 {
  padding-top: 7rem !important;
}

.pt-10,
.py-10 {
  padding-top: 8rem !important;
}

/* Padding Bottom */
.pb-6,
.py-6 {
  padding-bottom: 4rem !important;
}

.pb-7,
.py-7 {
  padding-bottom: 5rem !important;
}

.pb-8,
.py-8 {
  padding-bottom: 6rem !important;
}

.pb-9,
.py-9 {
  padding-bottom: 7rem !important;
}

.pb-10,
.py-10 {
  padding-bottom: 8rem !important;
}

/* Padding Start */
.ps-6,
.px-6 {
  padding-left: 4rem !important;
}

.ps-7,
.px-7 {
  padding-left: 5rem !important;
}

.ps-8,
.px-8 {
  padding-left: 6rem !important;
}

.ps-9,
.px-9 {
  padding-left: 7rem !important;
}

.ps-10,
.px-10 {
  padding-left: 8rem !important;
}

/* Padding End */
.pe-6,
.px-6 {
  padding-right: 4rem !important;
}

.pe-7,
.px-7 {
  padding-right: 5rem !important;
}

.pe-8,
.px-8 {
  padding-right: 6rem !important;
}

.pe-9,
.px-9 {
  padding-right: 7rem !important;
}

.pe-10,
.px-10 {
  padding-right: 8rem !important;
}

/* ---------------- MARGIN ---------------- */
.m-6 {
  margin: 4rem !important;
}

.m-7 {
  margin: 5rem !important;
}

.m-8 {
  margin: 6rem !important;
}

.m-9 {
  margin: 7rem !important;
}

.m-10 {
  margin: 8rem !important;
}

/* Margin Top */
.mt-6,
.my-6 {
  margin-top: 4rem !important;
}

.mt-7,
.my-7 {
  margin-top: 5rem !important;
}

.mt-8,
.my-8 {
  margin-top: 6rem !important;
}

.mt-9,
.my-9 {
  margin-top: 7rem !important;
}

.mt-10,
.my-10 {
  margin-top: 8rem !important;
}

/* Margin Bottom */
.mb-6,
.my-6 {
  margin-bottom: 4rem !important;
}

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

.mb-8,
.my-8 {
  margin-bottom: 6rem !important;
}

.mb-9,
.my-9 {
  margin-bottom: 7rem !important;
}

.mb-10,
.my-10 {
  margin-bottom: 8rem !important;
}

/* Margin Start */
.ms-6,
.mx-6 {
  margin-left: 4rem !important;
}

.ms-7,
.mx-7 {
  margin-left: 5rem !important;
}

.ms-8,
.mx-8 {
  margin-left: 6rem !important;
}

.ms-9,
.mx-9 {
  margin-left: 7rem !important;
}

.ms-10,
.mx-10 {
  margin-left: 8rem !important;
}

/* Margin Start */
.me-6,
.mx-6 {
  margin-right: 4rem !important;
}

.me-7,
.mx-7 {
  margin-right: 5rem !important;
}

.me-8,
.mx-8 {
  margin-right: 6rem !important;
}

.me-9,
.mx-9 {
  margin-right: 7rem !important;
}

.me-10,
.mx-10 {
  margin-right: 8rem !important;
}

/* Uniform section rhythm for every page, desktop and mobile alike.
   Component-level rules (e.g. .banner, .article-section) intentionally
   keep their own geometry via higher specificity. */
section,
.section-padding {
  padding: 20px 0;
}

/* Site-wide radius scheme: every section gets the same 0.5rem
   (Bootstrap rounded-4) radius — applied uniformly across desktop,
   tablet and mobile so the layout reads identically at every
   breakpoint. The radius is set on the section itself plus its
   inner Bootstrap .container so the rounded-card silhouette is
   visible regardless of whether the section has its own background.
   Per-section selectors below can still override if their layout
   needs a different geometry (e.g. full-bleed banners). */
section {
  border-radius: 0.5rem;
}

/* The container that holds a section's content also gets the
   uniform radius so sections whose background is on a child
   (rather than the section itself) still show rounded corners. */
section > .container,
section > .container-fluid {
  border-radius: 0.5rem;
}

.overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.631372549);
}

.heading-clip {
  font-family: "Teko", "Poppins", sans-serif;
  font-size: 98px;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.02em;
  -webkit-text-stroke-width: 1px;
  stroke-width: 1px;
  -webkit-text-stroke-color: #000000;
  stroke: #F1F1F1;
  color: #ffffff;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: -1;
}

@media (max-width: 1200px) {
  .heading-clip {
    font-size: 70px;
  }
}

@media (max-width: 996px) {
  .heading-clip {
    font-size: 50px;
  }
}

@media (max-width: 768px) {
  .heading-clip {
    font-size: 35px;
  }
}

/* Width */
@media (min-width: 768px) {
  .w-md-auto {
    width: auto !important;
  }

  .w-md-25 {
    width: 25% !important;
  }

  .w-md-50 {
    width: 50% !important;
  }

  .w-md-75 {
    width: 75% !important;
  }
}

@media (min-width: 996px) {
  .w-lg-50 {
    width: 50% !important;
  }

  .w-lg-75 {
    width: 75% !important;
  }
}

@media (min-width: 1200px) {
  .w-xl-50 {
    width: 50% !important;
  }

  .w-xl-75 {
    width: 75% !important;
  }
}

@media (min-width: 1400px) {
  .w-xxl-50 {
    width: 50% !important;
  }
}

@keyframes bannerfadein {
  0% {
    opacity: 0;
    top: 122%;
  }

  100% {
    opacity: 1;
    top: 50%;
  }
}

@keyframes zoomIn {
  from {
    background-size: 100%;
  }

  to {
    background-size: 110%;
  }
}

@media (max-width: 1200px) {
  @keyframes zoomIn {
    from {
      background-size: 150%;
    }

    to {
      background-size: 170%;
    }
  }
}

@media (max-width: 996px) {
  .sperator {
    margin: auto;
  }
}

/* Sticky Header */
.navbar-sticky-in {
  position: fixed !important;
  /* Fixes navbar at the top */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99999 !important;
  /* Keeps it above other elements */
  background: #252525;
  box-shadow: 0px 1px 5px rgba(225, 225, 225, 0.1);
  /* Only the bottom corners are rounded once the header is sticky —
     the top stays flush against the viewport so it doesn't look
     detached from the page. */
  border-radius: 0 0 16px 16px;
}

/* Desktop-only: nav width matches the hero video's exact margin
   (30px). Mobile keeps full-width edge-to-edge (matches the
   original sticky-nav behaviour). */
@media (min-width: 1200px) {
  .navbar-sticky-in .header-nav-inner {
    width: calc(100% - 60px);
    margin-left: 30px !important;
    margin-right: 30px !important;
    max-width: none;
    border: none !important;
    border-radius: 0 0 16px 16px !important;
  }
}

.navbar-sticky-in .header-nav-inner {
  border: none !important;
  border-radius: 0 0 16px 16px !important;
}

/*Back-to-top button  */
#back-to-top {
  position: fixed;
  z-index: 1000;
  bottom: 20px;
  right: 20px;
}

@media (max-width: 768px) {
  #back-to-top {
    bottom: 80px;
  }
}

#back-to-top a {
  width: 50px;
  height: 50px;
  transition: all ease-in-out 0.5s;
}

#back-to-top a:hover {
  background-color: #252525 !important;
}

#back-to-top a:after {
  position: absolute;
  content: "\f077";
  font-family: "FontAwesome";
  font-size: 16px;
  color: #fff;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}

input,
textarea,
select {
  background-color: #fff;
  border-width: 0px 0px 0px 0px;
  padding: 12px 20px;
  outline: none;
  color: #777777;
  width: 100%;
}

input:focus,
textarea:focus,
select:focus {
  box-shadow: rgba(0, 0, 0, 0.098) 0px 0px 0px 0.9694px inset;
}

input::placeholder,
textarea::placeholder,
select::placeholder {
  color: rgba(119, 119, 119, 0.5647058824);
}

.btn-primary,
.btn-secondary,
.btn1 {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  line-height: 1.4;
  border-radius: 0;
  /* Slimmer button: vertical padding reduced from 14px to 8px so it
     reads thinner. Font-size + line-height nudged down a touch to
     keep proportions balanced. */
  padding: 8px 22px;
  font-size: 14px;
  color: #ffffff;
  background-color: #906E49;
  transition: all 0.3s ease-in-out;
  display: inline-block;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn1:hover {
  color: #ffffff !important;
  background-color: #000000;
  box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.1019607843);
}

.btn-secondary {
  color: #906E49;
  background-color: #F6F2EB;
}

.btn-secondary:hover {
  color: #ffffff !important;
  background-color: #906E49 !important;
}

.btn1 {
  border-radius: 1rem;
  padding: 10px 20px;
  text-transform: uppercase;
}

.btn1 i {
  margin-left: 10px;
  margin-right: -10px;
  height: 32px;
  width: 32px;
  line-height: 32px;
  font-size: 15px !important;
  rotate: -45deg;
  text-align: center;
  background-color: #ffffff;
  color: #906E49;
  border-radius: 50%;
}

.btn1:hover i {
  color: #252525;
}

.banner-sperator {
  height: 4px;
  width: 100px;
  background: #fff;
  border-radius: 2px;
  position: relative;
  margin-left: 27px;
}

.banner-sperator::after {
  content: "";
  position: absolute;
  color: #fff;
  left: -27px;
  top: 0;
  display: inline-block;
  height: 4px;
  width: 4px;
  border-radius: 50%;
  background-color: #fff;
  -webkit-box-shadow: 9px 0 0 0 currentColor, 18px 0 0 0 currentColor;
  box-shadow: 9px 0 0 0 currentColor, 18px 0 0 0 currentColor;
}

.divider-pattern {
  background: repeating-linear-gradient(-60deg, #D5D4D4, #D5D4D4 1px, transparent 1px, transparent 7px);
}

.glass {
  background: rgba(255, 255, 255, 0.2);
  /* Transparent White */
  backdrop-filter: blur(10px);
  /* Frosted blur effect */
  -webkit-backdrop-filter: blur(10px);
  /* Safari support */
  border-radius: 12px;
  padding: 20px;
}

/* ========================================= */
/*            Homepage Page CSS          */
/* ======================================== */
/* Header Section */
header .header-top .social-links i {
  height: 34px;
  width: 34px;
  line-height: 34px;
  text-align: center;
  transition: all 0.3s ease-in-out;
}

header .header-top .social-links i:hover {
  background-color: #906E49;
  color: #ffffff;
  transition: all 0.3s ease-in-out;
}

header .header-nav .navbar-nav .nav-link {
  color: #ffffff;
  /* Slimmed nav links: vertical padding reduced from 20px to 12px
     so the navbar reads thinner without losing tap-target size on
     mobile (touch min is ~24px; horizontal 15px stays unchanged). */
  padding: 12px 15px;
}

header .header-nav .navbar-nav .nav-link:hover {
  color: #906E49;
}

header .header-nav .navbar-nav .nav-link.show,
header .header-nav .navbar-nav .nav-link.active {
  color: #906E49;
}

header .header-nav .navbar-nav .nav-item.no-after::after {
  display: none;
}

header .header-nav .navbar-nav .nav-item .dropdown-menu>li>a {
  font-size: 16px;
  padding: 13px 30px;
  background-color: #FBFBFB;
  color: #777777;
  border-color: #F1F1F1 !important;
}

header .header-nav .navbar-nav .nav-item .dropdown-menu>li>a:hover,
header .header-nav .navbar-nav .nav-item .dropdown-menu>li>a.active {
  background-color: #252525;
  color: #ffffff;
}

header .header-icons ul li i {
  font-size: 20px;
}

@media (min-width: 1180px) {
  .navbar-nav .dropdown-menu {
    position: absolute;
    top: auto;
  }

  .dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
  }

  .dropdown:hover>.dropdown-menu {
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease-in-out;
  }

  .dropdown>.dropdown-toggle:active {
    /*Without this, clicking will make it sticky*/
    pointer-events: none;
  }

  ul.dropdown-menu {
    max-height: 630px !important;
    overflow-y: auto !important;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  .dropdown-item.active {
    background-color: #906E49;
  }
}

@media (max-width: 1180px) {

  div#slicknav-mobile,
  .dropdown-toggle::after {
    display: block;
  }

  .header-top,
.mt_search,
.slicknav_nav .slicknav_arrow,
.navbar-button,
#responsive-menu {
  display: none;
}

  .slicknav_menu {
    display: block;
  }

  .nav-link {
    padding: 12px 36px !important;
    margin: 0 !important;
  }

  .slicknav_btn {
    position: absolute;
    right: 70px;
  }

  .slicknav_btn.slicknav_open:before,
  .slicknav_btn.slicknav_collapsed:before {
    left: 0;
    top: 20px;
    padding: 8px;
    position: absolute;
    color: #ffffff;
  }

  .dropdown-menu {
    border-radius: 0 !important;
  }

  .slicknav_btn.slicknav_open:before {
    color: #906E49;
  }

  .slicknav_nav {
    top: 80px;
    left: 0;
    background-color: #F5F5F5;
    position: absolute;
    height: 280px;
    overflow: auto;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.12);
  }

  .slicknav_nav a:hover,
  li.nav-item.dropdown.slicknav_parent.slicknav_open>a>a {
    background-color: #906E49 !important;
    color: #fff;
  }

  .slicknav_nav a,
  .dropdown-menu>li>a {
    font-size: 16px;
    background-color: #F5F5F5;
    color: #33373d;
    text-transform: capitalize !important;
    border: none !important;
    font-weight: 400 !important;
  }

  .dropdown-menu>li>a {
    padding-left: 50px !important;
    border-top: 1px solid #FBFBFB !important;
  }

  .dropdown-toggle::after {
    display: none;
  }

  .slicknav_nav .active,
  .fa-angle-up:before {
    background-color: #906E49;
    color: #fff;
  }

  .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
  }

  .header-nav-inner {
    border: none !important;
  }
}

@media (max-width: 1100px) {
  .slicknav_nav .slicknav_item a {
    pointer-events: none;
  }
}

@media (max-width: 768px) {
  header .header-nav .header-logo img {
    width: 160px;
  }

  .slicknav_btn.slicknav_open:before,
  .slicknav_btn.slicknav_collapsed:before {
    top: 22px;
  }

  .banner .slide-inner {
    width: 100% !important;
  }
}

/* Banner CSS */
.banner {
  /* Header is now thinner (~90px on desktop) — push banner down by
     that amount so the video doesn't slide under the fixed nav.
     .banner-video's own 30px margin sits cleanly BELOW the header
     as the breathing room. */
  padding-top: 90px;
}
@media (max-width: 991px) {
  .banner {
    padding-top: 70px;
  }
}
@media (max-width: 575px) {
  .banner {
    padding-top: 60px;
  }
}

/* Inner-page banner shapes (breadcrumb / service-detail-hero /
   article-hero) — same geometric treatment as the home video
   banner: top padding pushes the section below the fixed nav
   (~90/70/60 across breakpoints), and 20px margin on all sides
   gives the floating card its visible inset from the viewport
   edge. 0.5rem radius (Bootstrap rounded-4) — uniform across
   mobile and desktop. */
.breadcrumb,
.service-detail-hero,
.article-hero {
  padding-top: 90px;
  margin: 20px !important;
  border-radius: 0.5rem;
}
@media (max-width: 991px) {
  .breadcrumb,
  .service-detail-hero,
  .article-hero {
    padding-top: 70px;
  }
}
@media (max-width: 575px) {
  .breadcrumb,
  .service-detail-hero,
  .article-hero {
    padding-top: 60px;
  }
}

.banner .slide {
  height: 880px;
  background-position: center;
  background-repeat: no-repeat;
  cursor: grab;
}

.banner .slide .container {
  opacity: 0;
  top: 122%;
}

.banner .slide .container a:hover {
  border-color: #906E49 !important;
}

.banner .slide.slick-slide.slick-current.slick-active .container {
  animation: bannerfadein 1.2s ease-out forwards;
}

.banner .slide.slick-slide.slick-current.slick-active {
  animation: zoomIn 8s ease-in-out infinite alternate;
}

@media (max-width: 993px) {
  .banner .slide {
    background-size: cover !important;
  }
}

@media (max-width: 768px) {
  .banner .since-section {
    bottom: -30% !important;
  }
}

/* About Us CSS */
.about .about-left .about-btns i {
  height: 64px;
  width: 64px;
  line-height: 64px;
  font-size: 28px;
  transition: all 0.3s ease-in-out;
}

.about .about-left .about-btns .about-tel:hover i {
  background-color: #252525 !important;
  transition: all 0.3s ease-in-out;
}

@media (min-width: 993px) {
  .about .about-left .about-info {
    margin-right: -40px;
  }
}

.about .about-right {
  background-color: transparent;
}

@media (max-width: 768px) {
  .about {
    padding-top: 350px;
  }
}
@media (max-width: 768px) {
  body.about-page .about-info h2 {
    text-align: center !important;
  }
}

/* Service CSS */
.service .service-title {
  background-image: url(../image/office-building-2022-12-15-19-37-04-utc1.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.service .service-title .overlay {
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(37, 37, 37, 0.7803921569) 70%, #ffffff 0%);
}

@media (max-width: 993px) {
  .service .service-title .overlay {
    background-image: none;
    background-color: rgba(0, 0, 0, 0.631372549);
  }
}

.service .service-body .service-box {
  padding: 40px 30px;
  transition: all 0.3s ease-in-out;
}

.service .service-body .service-box .service-icon i {
  height: 80px;
  width: 80px;
  line-height: 80px;
  font-size: 35px;
}

.service .service-body .service-box a.btn-primary {
  background-color: transparent;
  color: #252525;
  border: 1px solid #F1F1F1;
}

.service .service-body .service-box:hover {
  border-color: #ffffff !important;
  box-shadow: 0px 0px 15px 0px rgba(204, 204, 204, 0.4);
  transition: all 0.3s ease-in-out;
}

.service .service-body .service-box:hover a.btn-primary {
  background-color: #252525;
  color: #ffffff;
  border-color: #252525;
}

/* Why Us Css */
.percentage-wrapper {
  height: 38px;
  width: 38px;
  top: -47px;
  right: -17px;
  font-size: 13px;
}

.percentage-wrapper::after {
  content: " ";
  position: absolute;
  width: 2px;
  height: 10px;
  background-color: #906E49;
  bottom: -10px;
  left: 50%;
  z-index: 1;
}

.progress-bar {
  animation: progressBar 3s ease-in-out;
  animation-fill-mode: both;
  -moz-animation: progressBar 3s ease-in-out;
  -moz-animation-fill-mode: both;
}

@keyframes progressBar {
  0% {
    width: 0;
  }

  100% {
    width: width;
  }
}

.process span {
  -webkit-text-stroke-color: rgba(255, 255, 255, 0.0901960784);
  stroke: rgba(255, 255, 255, 0.0901960784);
  color: #252525;
}

.process .process-box span.h1 {
  -webkit-text-stroke-width: 1px;
  stroke-width: 1px;
  -webkit-text-stroke-color: #906E49;
  stroke: #906E49;
  color: #252525;
}
.process .process-box p {
  text-align: justify;
  hyphens: auto;
}

.blog .blog-title-sub {
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
  hyphens: auto;
}

/* Porject CSS */
.project .project-box {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  min-height: 460px;
  overflow: hidden;
  cursor: pointer;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 400px;
  border-radius: 1rem;
}

.project .project-box .overlay {
  background: linear-gradient(0deg, #000 0, rgba(255, 255, 255, 0) 60%);
  opacity: 0;
  top: 100%;
  transition: all 0.5s ease;
}

.project .project-box .project-info {
  bottom: -100%;
  transition: all 0.6s ease;
}

.project .project-box:hover {
  -webkit-box-flex: 3;
  -ms-flex: 3;
  flex: 3;
}

.project .project-box:hover .overlay {
  opacity: 1;
  top: 0;
  transition: all 0.5s ease;
}

.project .project-box:hover .project-info {
  bottom: 0;
  transition: all 0.6s ease;
}

.project .project-box a:hover {
  border-color: #906E49 !important;
}

/* --- Mobile horizontal carousel (≤767px) --- */
.project-carousel {
  position: relative;
  margin: 0 -12px;
  /* Tiny padding so slides don't touch the screen edge and the next slide
     peeks in to signal "swipe me". */
}

.project-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* Firefox */
  padding: 0 12px;
  gap: 12px;
}

.project-carousel-track::-webkit-scrollbar {
  display: none;                  /* Chrome / Safari */
}

.project-slide {
  /* Each slide takes the full viewport width minus a small peeking offset
     so users can see the next slide's edge and know there's more to swipe. */
  flex: 0 0 calc(100% - 32px);
  scroll-snap-align: start;
  height: 380px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 1rem;
  -webkit-box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.35);
          box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.35);
}

@media (max-width: 576px) {
  .project-slide {
    height: 320px;
  }
}

.project-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  padding: 0 12px;
}

.project-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(144, 110, 73, 0.3);  /* secondary at 30% */
  transition: background 0.25s ease, transform 0.25s ease;
  display: inline-block;
}

.project-dot.active {
  background: #906E49;
  transform: scale(1.25);
}

/* --- Mobile blog carousel (≤767px) --- */
.blog-carousel {
  position: relative;
  margin: 0 -12px;
}

.blog-carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 12px;
  gap: 12px;
}

.blog-carousel-track::-webkit-scrollbar {
  display: none;
}

.blog-slide {
  /* Full-width card minus a small peek so the next card's edge hints "swipe me". */
  flex: 0 0 calc(100% - 32px);
  scroll-snap-align: start;
  background: #ffffff;
  border-radius: 1rem;
  overflow: hidden;
  -webkit-box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.15);
          box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  transition: -webkit-box-shadow 0.25s ease;
  transition: box-shadow 0.25s ease;
  transition: box-shadow 0.25s ease, -webkit-box-shadow 0.25s ease;
}

.blog-slide:active {
  -webkit-box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.25);
          box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.25);
}

.blog-slide-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #1a1a1a;
  text-decoration: none;
}

.blog-slide-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f0eee9; /* subtle warm placeholder while image loads */
}

.blog-slide-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-slide-body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-slide-title {
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  color: #1a1a1a;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}

.blog-slide-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  color: #777;
  font-size: 13px;
}

.blog-slide-meta li {
  display: inline-block;
}

.blog-slide-excerpt {
  font-size: 14px;
  line-height: 1.55;
  color: #4a4a4a;
  margin: 0 0 16px;
  /* Clamp to 3 lines so all cards are visually similar height even if
     excerpts vary in length. */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-slide-cta {
  margin-top: auto; /* pushes CTA to the bottom so cards align visually */
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #906E49;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-top: 4px;
}

.blog-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  padding: 0 12px;
}

.blog-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(144, 110, 73, 0.3);
  transition: background 0.25s ease, transform 0.25s ease;
  display: inline-block;
}

.blog-dot.active {
  background: #906E49;
  transform: scale(1.25);
}

.project-title-sub,
.process-title-sub,
.testimonial-title-sub {
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
  hyphens: auto;
}

/* Review */
.review {
  background-color: transparent;
  background-image: linear-gradient(90deg, rgba(119, 119, 119, 0) 50%, #252525 0%);
}

@media (max-width: 992px) {
  .review {
    background-image: linear-gradient(180deg, rgba(119, 119, 119, 0) 50%, #252525 0%);
  }
}

/* Teams CSS */
.teams .teams-box .overlay {
  bottom: -100%;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.teams .teams-box .teams-info {
  bottom: -100%;
  transition: all 0.3s ease-in-out;
}

.teams .teams-box .teams-info .social-link li a {
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
  background-color: #a1a1a1;
  transition: all 0.3s ease-in-out;
}

@keyframes iconTranslateY {
  48% {
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
  }

  49% {
    opacity: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
  }

  50% {
    opacity: 1;
  }
}

.teams .teams-box .teams-info .social-link>li>a:hover>i {
  -webkit-animation: iconTranslateY 0.4s forwards;
  animation: iconTranslateY 0.4s forwards;
}

.teams .teams-box .teams-info .social-link li a:hover {
  background: #1DA1F2;
  color: #fff;
}

.teams .teams-box .teams-info .social-link li:last-child a:hover {
  background: #E60023;
}

.teams .teams-box .teams-info .social-link li:first-child a:hover {
  background: #1877F2;
}

.teams .teams-box:hover .overlay,
.teams .teams-box:hover .teams-info {
  bottom: 0;
  opacity: 1;
  transition: all 0.3s ease;
}

/* Stat CSS */
.stat {
  background-image: url(../image/apartment-with-pop-of-yellow-2021-08-26-15-43-11-utc.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

/* Project CTA CSS */
.project-cta .video-inline {
  cursor: pointer;
  border: 8px solid rgba(241, 241, 241, 0.2509803922);
}

.project-cta .video-inline .play-icon i {
  height: 90px;
  width: 90px;
  line-height: 90px;
  font-size: 35px;
}

/* FAQ CSS */
.faq {
  background-image: url(../image/bedroom-interior-design-3d-rendering-2021-08-26-18-15-32-utc1.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.faq .faq-accordion .accordion-button:not(.collapsed) {
  background-color: #fff;
  color: #252525;
}

.faq .faq-accordion .accordion-item {
  background: transparent;
}

.faq .faq-accordion .accordion-button:not(.collapsed)::after,
.faq .faq-accordion .accordion-button::after {
  background-image: none;
  font-family: "FontAwesome";
  content: "\f067";
  font-size: 15px;
}

.faq .faq-accordion .accordion-button:not(.collapsed)::after {
  content: "\f068";
}

.faq .faq-accordion .accordion-button:focus {
  z-index: 1;
}

/* Blog CSS */
.blog .blog-box .overlay {
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.35), transparent 75%);
  background-color: transparent;
  opacity: 1;
}

.blog .blog-box:hover .overlay {
  opacity: 0;
  transition: all 0.3s ease;
}

/* ---------- No-text-on-images policy ----------
   Featured-blog cards and inner-page banners keep photos clean;
   titles/meta/excerpts render in normal flow BELOW the image. */

/* Uniform card geometry so the grid stays aligned once the absolute
   overlay is gone — every card image shares one aspect ratio. */
.blog-box .blog-image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Text block under a featured-blog card image (dark on page background). */
.blog-info-below h4 {
  font-size: 1.15rem;
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.blog-info-below h4 a {
  color: #1b1b1b;
  text-decoration: none;
  transition: color 0.2s ease;
}

.blog-info-below h4 a:hover {
  color: #c9a24b;
}

.blog-meta-list {
  color: #6b6459;
  letter-spacing: 0.02em;
}

.blog-info-below p {
  color: #55504a;
  font-size: 0.95rem;
  line-height: 1.65;
  margin-bottom: 0.75rem;
}

.blog-read-more {
  display: inline-flex;
  align-items: center;
  color: #a8862f;
  font-weight: 500;
  font-size: 0.9rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-read-more i {
  transition: transform 0.25s ease;
}

.blog-read-more:hover {
  color: #97713d;
}

.blog-read-more:hover i {
  transform: translateX(4px);
}

/* Title strip under an image-only banner (blog detail / consultation /
   not-found pages) — mirrors the service-page pattern. */
.article-title-strip {
  padding: 2.25rem 0 0.5rem;
  background: transparent;
}

.article-title-strip .article-strip-title {
  font-family: "Teko", "Poppins", sans-serif;
  font-size: clamp(1.9rem, 3.5vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  text-transform: uppercase;
  color: #1b1b1b;
  margin-bottom: 0.6rem;
  text-wrap: balance;
}

.article-title-strip h6.secondary {
  color: #906E49;
  letter-spacing: 4px;
}

.article-title-strip .breadcrumb-sub {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  color: #6b6459;
  line-height: 1.7;
}

/* Footer */
footer {
  background-image: url(../image/office-building-2022-12-15-19-37-04-utc1.jpg);
  background-size: cover;
  background-attachment: fixed;
  color: #ffffff;
}

footer .overlay {
  background-color: #252525;
  opacity: 0.9;
}

footer p,
footer li,
footer a,
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
  color: #ffffff;
}

footer a:hover {
  color: #ffffff;
}
footer .footer-info-logo .footer-logo-img {
  width: 240px;
  max-width: 60%;
  height: auto;
}
footer .footer-middle .footer-socials li a i {
  height: 40px;
  width: 40px;
  font-size: 15px;
  line-height: 40px;
  transition: all 0.3s ease;
}

footer .footer-middle .footer-socials li a i:hover {
  background-color: #906E49 !important;
  color: #ffffff;
  transition: all 0.3s ease;
}

/* ========================================= */
/*             Homepage 2 Page CSS          */
/* ======================================== */
.index-2 {
  /* Banner */
}

.index-2 .banner {
  height: 800px;
  background-image: url(../image/2151199323.jpg);
  background-size: cover;
}

@media (max-width: 992px) {
  .index-2 .banner .banner-inner {
    margin-top: 0 !important;
  }
}

.index-2 .banner .banner-inner .banner-info {
  width: 65%;
}

@media (max-width: 992px) {
  .index-2 .banner .banner-inner .banner-info {
    width: 100%;
  }
}

.index-2 .banner .banner-inner .banner-info h1 span {
  font-size: 92px;
}

@media (max-width: 992px) {
  .index-2 .banner .banner-inner .banner-info h1 span {
    font-size: 60px;
  }
}

.index-2 .banner .banner-image {
  bottom: -230px;
}

@media (max-width: 992px) {
  .index-2 .banner .banner-image {
    right: 27% !important;
    bottom: -300px;
  }
}

@media (max-width: 768px) {
  .index-2 .banner .banner-image {
    right: 0% !important;
    bottom: -300px;
  }
}

.index-2 {
  /* Stats */
}

@media (max-width: 992px) {
  .index-2 .stats .stat-box {
    border: none !important;
  }
}

.index-2 {
  /* Since Section CSS */
}

.index-2 .since-section {
  padding-left: 500px;
}

@media (max-width: 1200px) {
  .index-2 .since-section {
    padding-left: 100px;
  }
}

@media (max-width: 992px) {
  .index-2 .since-section {
    padding-left: 50px;
  }
}

@media (max-width: 768px) {
  .index-2 .since-section {
    padding-left: 0px;
  }
}

.index-2 {
  /* Why Us */
}

.index-2 .why-us .feature-box:hover .feature-info a {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.index-2 {
  /* Service */
}

.index-2 .service .overlay {
  background-image: none;
  background-color: rgba(0, 0, 0, 0.631372549);
}

.index-2 {
  /* Faq */
}

.index-2 .faq .faq-body-left {
  margin-bottom: -60px;
  margin-right: -100px;
}

@media (max-width: 992px) {
  .index-2 .faq .faq-body-left {
    margin: 0 !important;
  }
}

/* ========================================= */
/*             About Us Page CSS            */
/* ======================================== */
.breadcrumb {
  height: 650px;
  min-height: 650px;
  background-color: #252525;
  background-image: url(../image/archiiron-architecture-exterior-design-rendering.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  /* Match the home video banner's floating-card shape: uniform 1rem
     radius on all four corners, 20px margin all sides, 650px tall.
     Padding-top pushes the section below the fixed nav so the
     floating card stays visible. */
  overflow: hidden;
}


.breadcrumb .overlay {
  background-color: #252525 !important;
  opacity: 0.8;
}

/* Banner background swap for service-list only — all inner pages now
   share the same 650px / 20px-margin floating-card silhouette. */
body.service-list-page .breadcrumb {
  /* Override the default .breadcrumb background image for the service
     archive page only — other inner pages (blog, about, contact, etc.)
     keep the default rendering. */
  background-image: url(../image/archiiron-architect-construction-site-supervision-nagpur.webp);
  background-position: center;
}

/* blog-list / about / contact keep the shared default — no per-page
   overrides needed. */

/* Service-detail hero — image only, matches the home video banner's
   floating-card shape (uniform 1rem radius, 20px margin, 650px tall).
   Top spacing is owned by the unified .breadcrumb/.service-detail-hero/
   .article-hero ruleset near .banner. */
.service-detail-hero {
  position: relative;
  min-height: 650px;
  height: 650px;
  background-color: #252525;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Service-detail hero slider — crossfade + slow Ken Burns zoom (video feel) */
.service-detail-hero.has-slider { background-image: none !important; }
.sd-hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: 0; transform: scale(1);
  transition: opacity 1.4s ease-in-out;
}
.sd-hero-slide.is-active {
  opacity: 1; z-index: 1;
  animation: sdHeroZoom 5s ease-out forwards;
}
@keyframes sdHeroZoom { from { transform: scale(1); } to { transform: scale(1.12); } }
.sd-hero-dots {
  position: absolute; left: 0; right: 0; bottom: 22px; z-index: 2;
  display: flex; justify-content: center; gap: 10px;
}
.sd-hero-dots button {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.5); cursor: pointer; transition: all .3s ease;
}
.sd-hero-dots button.is-active { background: #fff; width: 28px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .sd-hero-slide.is-active { animation: none; } }

/* Mobile scaling — mirrors .article-hero / .breadcrumb:not(ol).
   Must sit AFTER the .service-detail-hero ruleset above (source order
   wins when specificity is equal) so the 650px desktop height is
   actually overridden on small screens. */
@media (max-width: 768px) {
  .service-detail-hero {
    height: 60vh;
    min-height: 420px;
  }
}

@media (max-width: 576px) {
  .service-detail-hero {
    height: 50vh;
    min-height: 340px;
  }
}

/* ========================================= */
/*        Service-Detail Content + Gallery   */
/* ======================================== */

/* Eyebrow label above the page heading */
.service-detail-eyebrow {
  display: inline-block;
  font-family: "Teko", "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #c9a24b;
  padding: 0.4rem 0.9rem;
  background: rgba(201, 162, 75, 0.12);
  border: 1px solid rgba(201, 162, 75, 0.3);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}

/* Main H1 title */
.service-detail-h1 {
  font-family: "Teko", "Poppins", sans-serif;
  font-size: 3.25rem;
  font-weight: 600;
  line-height: 1.05;
  text-transform: uppercase;
  color: #1b1b1b;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

@media (max-width: 768px) {
  .service-detail-h1 {
    font-size: 2.4rem;
  }
}

/* Lead excerpt paragraph (sits under the H1, above the prose) */
.service-detail-excerpt {
  font-size: 1.08rem;
  line-height: 1.65;
  color: #4a4a4a;
  margin-bottom: 1.75rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  font-weight: 400;
}

/* Long-form prose body (the rendered CMS HTML) */
.service-detail-prose {
  color: #2d2d2d;
  font-size: 1rem;
  line-height: 1.75;
}

.service-detail-prose p {
  margin-bottom: 1.1rem;
}

.service-detail-prose p:last-child {
  margin-bottom: 0;
}

.service-detail-prose strong {
  color: #1b1b1b;
  font-weight: 600;
}

.service-detail-prose h2,
.service-detail-prose h3,
.service-detail-prose h4 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: #1b1b1b;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.service-detail-prose h2 {
  font-size: 1.6rem;
}

.service-detail-prose h3 {
  font-size: 1.3rem;
}

.service-detail-prose h4 {
  font-size: 1.1rem;
}

.service-detail-prose ul,
.service-detail-prose ol {
  padding-left: 1.4rem;
  margin-bottom: 1.1rem;
}

.service-detail-prose li {
  margin-bottom: 0.4rem;
}

.service-detail-prose a {
  color: #c9a24b;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease;
}

.service-detail-prose a:hover {
  color: #a8862f;
}

.service-detail-prose blockquote {
  border-left: 3px solid #c9a24b;
  padding: 0.4rem 0 0.4rem 1.1rem;
  margin: 1.4rem 0;
  color: #555;
  font-style: italic;
}

/* ---------- Gallery block ---------- */

.service-detail-gallery {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.service-detail-gallery-title {
  font-family: "Poppins", sans-serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: #1b1b1b;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.service-detail-gallery-title i {
  color: #c9a24b;
}

/* CSS column-based masonry — handles mixed portrait/landscape
   orientations gracefully and adapts fluidly at every breakpoint.
   break-inside:avoid on each item keeps cards whole across columns. */
.service-gallery-grid {
  column-count: 3;
  column-gap: 1rem;
}

@media (max-width: 991px) {
  .service-gallery-grid {
    column-count: 2;
  }
}

@media (max-width: 575px) {
  .service-gallery-grid {
    column-count: 1;
  }
}

.service-gallery-item {
  position: relative;
  display: block;
  margin-bottom: 1rem;
  overflow: hidden;
  border-radius: 0.5rem;
  background: #252525;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.18);
  break-inside: avoid;
  cursor: zoom-in;
  /* block-context inside a column so the rounded corners clip the img */
  transform: translateZ(0);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.service-gallery-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px -10px rgba(0, 0, 0, 0.28);
}

.service-gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s ease, filter 0.35s ease;
}

.service-gallery-item:hover img {
  transform: scale(1.06);
  filter: brightness(0.78);
}

/* Hover overlay with zoom icon + "View" label */
.service-gallery-item::after {
  content: "\f00e";
  font-family: "FontAwesome";
  font-weight: normal;
  font-style: normal;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.2rem;
  background: rgba(201, 162, 75, 0.18);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.service-gallery-item:hover::after {
  opacity: 1;
}

/* ---------- Sidebar (Other Services) ---------- */

.service-detail-aside {
  position: sticky;
  top: 110px;
}

.service-detail-sidecard {
  background: #252525;
  color: #fff;
  border-radius: 0.5rem;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.25);
}

.service-detail-sidecard-title {
  font-family: "Poppins", sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.service-detail-sidecard-title i {
  color: #c9a24b;
}

.service-detail-sidecard-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-detail-sidecard-list li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.service-detail-sidecard-list li:last-child {
  border-bottom: 0;
}

.service-detail-sidecard-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0;
  color: #e6e6e6;
  text-decoration: none;
  font-size: 0.95rem;
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.service-detail-sidecard-list a::after {
  content: "\f105";
  font-family: "FontAwesome";
  color: #c9a24b;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.service-detail-sidecard-list a:hover {
  color: #c9a24b;
  padding-left: 4px;
}

.service-detail-sidecard-list a:hover::after {
  opacity: 1;
  transform: translateX(2px);
}

/* ---------- Lightbox modal ---------- */

.service-lightbox .modal-content {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.service-lightbox .modal-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
}

.service-lightbox-img {
  max-width: 100%;
  max-height: 85vh;
  width: auto;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
  display: block;
}

.service-lightbox-counter {
  position: absolute;
  bottom: -2rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
}

.service-lightbox-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(6px);
}

.service-lightbox-btn:hover {
  background: rgba(201, 162, 75, 0.85);
  border-color: rgba(201, 162, 75, 1);
}

.service-lightbox-btn-prev {
  left: 1rem;
}

.service-lightbox-btn-next {
  right: 1rem;
}

.service-lightbox-close {
  position: absolute;
  top: -3rem;
  right: 0;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 1.6rem;
  opacity: 0.85;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: opacity 0.2s ease;
}

.service-lightbox-close:hover {
  opacity: 1;
}

@media (max-width: 575px) {
  .service-lightbox-btn {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  .service-lightbox-btn-prev {
    left: 0.4rem;
  }
  .service-lightbox-btn-next {
    right: 0.4rem;
  }
}

/* ========================================= */
/*               Teams Page CSS             */
/* ======================================== */
.teams .teams-top .teams-top-left {
  position: relative;
}

.teams .teams-top .teams-top-left::after {
  content: "";
  position: absolute;
  z-index: -1;
  height: 100%;
  width: 50%;
  top: -30px;
  left: -30px;
  background-color: #252525;
}

.team-detail .team-detail-top .socials li a i {
  height: 40px;
  width: 40px;
  line-height: 40px;
  font-size: 20px;
  text-align: center;
  transition: all 0.3s ease-in-out;
}

.team-detail .team-detail-top .socials li a i:hover {
  background-color: #906E49 !important;
  color: #ffffff;
  transition: all 0.3s ease-in-out;
}

/* ========================================= */
/*               Career Page CSS            */
/* ======================================== */
.hire-us {
  background-image: url(../image/apartment-with-pop-of-yellow-2021-08-26-15-43-11-utc.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.cv-box {
  background-image: linear-gradient(180deg, #906E49 0%, #252525 100%);
}

.cv-box .cv-icon i {
  height: 90px;
  width: 90px;
  line-height: 90px;
  font-size: 40px;
}

.cv-box .divider::after,
.cv-box .divider::before {
  border-block-end: 0;
  border-block-start: 1px solid #ffffff;
  content: "";
  display: block;
  flex-grow: 1;
}

/* ========================================= */
/*               Faq Page CSS               */
/* ======================================== */
.faq-top {
  background-image: linear-gradient(90deg, rgba(119, 119, 119, 0) 70%, #FFFFFF 0%);
}

.faq-top .accordion-button:not(.collapsed) {
  background-color: #fff;
  color: #906E49 !important;
}

/* ========================================= */
/*            Testimonial Page CSS          */
/* ======================================== */
.testimonial {
  background-image: url(../image/law-tes.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.testimonial .testimonial-box p {
  font-size: 18px;
}

/* ========================================= */
/*      Google Reviews Themed Card UI        */
/* ======================================== */
.google-review-header {
  padding: 0 0.5rem;
}
.google-g {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}
.google-review-title {
  font-family: "Teko", sans-serif;
  font-size: 1.45rem;
  letter-spacing: 0.5px;
  color: #202124;
  text-transform: uppercase;
  line-height: 1;
}
.google-review-stars i,
.g-review-stars i {
  color: #fbbc05;
  font-size: 0.95rem;
}
.google-review-rating {
  font-weight: 600;
  color: #202124;
  font-size: 0.95rem;
}
.google-review-count {
  font-size: 0.85rem;
  color: #5f6368;
}

.g-review-card {
  background-color: #ffffff;
  border: 1px solid #e8eaed;
  border-radius: 1rem;
  padding: 1.5rem 1.5rem 1.25rem;
  height: 100%;
  box-shadow: 0 2px 6px rgba(32, 33, 36, 0.06);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.g-review-card:hover {
  box-shadow: 0 6px 18px rgba(32, 33, 36, 0.1);
  transform: translateY(-2px);
}
.g-review-text {
  color: #3c4043;
  font-size: 0.95rem;
  line-height: 1.55;
  text-align: justify;
  hyphens: auto;
  margin: 0;
}
.g-review-author {
  padding-top: 0.5rem;
  border-top: 1px solid #f1f3f4;
}
.g-review-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  color: #ffffff;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.g-avatar-rs { background-color: #906E49; }
.g-avatar-kg { background-color: #252525; }
.g-avatar-aj { background-color: #c19a6b; color: #252525; }
.g-avatar-md { background-color: #5f6368; }
.g-review-name {
  color: #202124;
  font-weight: 600;
  font-size: 0.95rem;
}
.g-review-meta {
  color: #5f6368;
  font-size: 0.8rem;
}
.testimonial .testimonial-body .g-review-card .g-review-text {
  font-size: 0.95rem;
}
.testimonial .testimonial-body .slick-dots {
  bottom: -40px;
}
.testimonial .testimonial-body .slick-dots li.slick-active button:before {
  background: #906E49;
  border: 1px solid #906E49;
}

/* ========================================= */
/*            Coming Soon Page CSS          */
/* ======================================== */
.coming-soon {
  background-image: url(../image/office-building-2022-12-15-19-37-04-utc1.jpg);
  background-size: cover;
}

.coming-soon .overlay {
  background-image: linear-gradient(180deg, #906E49 0%, #000000 100%);
  opacity: 0.8;
}

.coming-soon .social-links li a i {
  height: 40px;
  width: 40px;
  line-height: 40px;
  font-size: 20px;
  text-align: center;
  transition: all 0.3s ease-in-out;
}

.coming-soon .social-links li a i:hover {
  background-color: #906E49 !important;
  color: #ffffff;
  transition: all 0.3s ease-in-out;
}

@media (max-width: 995px) and (orientation: landscape) {
  .coming-soon {
    height: 200vh !important;
  }
}

@media (max-width: 995px) {
  .coming-soon .coming-soon-inner {
    width: 100% !important;
  }
}

/* ========================================= */
/*             Error Page Page CSS          */
/* ======================================== */
.error {
  background-image: url(../image/side-bg-1.webp);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* ========================================= */
/*         Blog List Page (Journal) CSS     */
/* ======================================== */
/* Make themed pill button available globally (it was previously .home-3-scoped) */
.btn-view-more {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 11px 14px 11px 22px;
  font-family: "Teko", sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-decoration: none;
  color: #252525;
  background-color: #F6F2EB;
  border: 1px solid rgba(144, 110, 73, 0.25);
  border-radius: 1rem;
  transition: all 0.35s ease;
  line-height: 1;
}
.btn-view-more .btn-view-more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  width: 34px;
  border-radius: 50%;
  background-color: #906E49;
  color: #ffffff;
  transition: transform 0.4s ease, background-color 0.35s ease;
  overflow: hidden;
}
.btn-view-more .btn-view-more-icon i {
  font-size: 14px;
  transition: transform 0.4s ease;
}
.btn-view-more:hover {
  color: #ffffff;
  background-color: #906E49;
  border-color: #906E49;
  box-shadow: 0 10px 22px -12px rgba(144, 110, 73, 0.6);
}
.btn-view-more:hover .btn-view-more-icon {
  background-color: #252525;
  transform: rotate(-45deg);
}
.btn-view-more:hover .btn-view-more-icon i {
  transform: scale(1.05);
}

/* Page header (breadcrumb) for inner pages — banners restored, breadcrumb <ol> removed */
.blog-breadcrumb .breadcrumb-inner h6 {
  letter-spacing: 4px;
}
.blog-breadcrumb .breadcrumb-inner .breadcrumb-sub {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.white-50 { color: rgba(255, 255, 255, 0.6); }

/* ========================================= */
/*     Breadcrumb NAV strip (under banner)   */
/* ============================================
   Sits between the .breadcrumb banner and the page content. Light pill
   style so it reads as navigation, not a banner. The prefix `ar-` avoids
   collision with the heavily-styled `.breadcrumb` class which is a
   650px-tall image banner — using it on the <ol> would inherit that. */
.ar-breadcrumb-nav {
  background: #ffffff;
  border-bottom: 1px solid #eee;
  padding: 14px 0;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

.ar-breadcrumb-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: #6c6c6c;
}

.ar-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ar-breadcrumb-item a {
  color: #6c6c6c;
  text-decoration: none;
  transition: color 0.2s ease;
}

.ar-breadcrumb-item a:hover {
  color: #906E49;
}

/* Chevron separator between items (purely visual — sits outside the
   schema.org items, so it doesn't break structured data). */
.ar-breadcrumb-item + .ar-breadcrumb-item::before {
  content: "›";
  color: #b5b5b5;
  font-size: 16px;
  line-height: 1;
  margin-right: 8px;
  user-select: none;
}

/* Current page — not a link, just text */
.ar-breadcrumb-item.active span {
  color: #1a1a1a;
  font-weight: 500;
}

/* On dark-themed pages (blog-detail, etc.) the white strip clashes.
   Section-level opt-out by adding `.ar-breadcrumb-nav-dark` to the nav. */
.ar-breadcrumb-nav-dark {
  background: rgba(255, 255, 255, 0.06);
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.ar-breadcrumb-nav-dark .ar-breadcrumb-list,
.ar-breadcrumb-nav-dark .ar-breadcrumb-item a {
  color: rgba(255, 255, 255, 0.7);
}

.ar-breadcrumb-nav-dark .ar-breadcrumb-item a:hover {
  color: #ffffff;
}

.ar-breadcrumb-nav-dark .ar-breadcrumb-item.active span {
  color: #ffffff;
}

.ar-breadcrumb-nav-dark .ar-breadcrumb-item + .ar-breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.35);
}

/* Filter pills */
.blog-filter-pills {
  list-style: none;
  padding: 0;
}
.blog-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 8px 18px;
  font-family: "Teko", sans-serif;
  font-size: 1rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #252525;
  background-color: transparent;
  border: 1px solid #e5e1d8;
  border-radius: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
}
.blog-filter-pill:hover {
  color: #ffffff;
  background-color: #906E49;
  border-color: #906E49;
}
.blog-filter-pill.active {
  color: #ffffff;
  background-color: #252525;
  border-color: #252525;
}
.blog-filter-count {
  font-family: "Poppins", sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  background-color: rgba(0, 0, 0, 0.08);
  padding: 1px 7px;
  border-radius: 1rem;
  line-height: 1.4;
}
.blog-filter-pill.active .blog-filter-count,
.blog-filter-pill:hover .blog-filter-count {
  background-color: rgba(255, 255, 255, 0.18);
}

/* Blog card */
.blog-card {
  background-color: #ffffff;
  border: 1px solid #ececec;
  border-radius: 1rem;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -22px rgba(37, 37, 37, 0.35);
  border-color: rgba(144, 110, 73, 0.35);
}
.blog-card .blog-card-image {
  overflow: hidden;
  border-radius: 1rem 1rem 0 0;
}
.blog-card .blog-card-image img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  transition: transform 0.55s ease;
}
.blog-card:hover .blog-card-image img {
  transform: scale(1.05);
}
.blog-card-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  background-color: #906E49;
  color: #ffffff;
  font-size: 0.9rem;
  letter-spacing: 1.5px;
  padding: 4px 14px;
  border-radius: 1rem;
  line-height: 1.4;
}
.blog-card-body {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.blog-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8rem;
  color: #777;
  margin-bottom: 0.85rem;
}
.blog-card-meta i {
  font-size: 0.85rem;
}
.blog-card-body h4 {
  font-size: 1.4rem;
  line-height: 1.25;
  margin-bottom: 0.5rem;
}
.blog-card-body h4 a {
  text-decoration: none;
  transition: color 0.3s ease;
}
.blog-card-body h4 a:hover {
  color: #906E49;
}
.blog-card-body p {
  color: #555;
  font-size: 0.92rem;
  line-height: 1.55;
  text-align: justify;
  hyphens: auto;
  margin-bottom: 1.25rem;
  flex-grow: 1;
}
.blog-card-body .btn-view-more {
  align-self: flex-start;
  padding: 9px 12px 9px 18px;
  font-size: 15px;
}

/* Pagination */
.blog-pagination {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}
.blog-page-item a,
.blog-page-item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  font-family: "Teko", sans-serif;
  font-size: 1.1rem;
  letter-spacing: 1px;
  text-decoration: none;
  color: #252525;
  background-color: #ffffff;
  border: 1px solid #ececec;
  border-radius: 1rem;
  transition: all 0.3s ease;
}
.blog-page-item a:hover {
  background-color: #906E49;
  border-color: #906E49;
  color: #ffffff;
}
.blog-page-item.active a {
  background-color: #252525;
  border-color: #252525;
  color: #ffffff;
}
.blog-page-item.disabled a,
.blog-page-item.disabled span {
  opacity: 0.4;
  pointer-events: none;
}
.blog-page-dots span {
  border-color: transparent;
  background-color: transparent;
}

/* Sidebar */
.blog-sidebar .blog-sidebar-widget {
  background-color: #ffffff;
  border: 1px solid #ececec;
  border-radius: 1rem;
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.blog-sidebar-widget-inner {
  padding: 1.5rem 1.5rem 1.75rem;
}
.blog-sidebar-title {
  font-family: "Teko", sans-serif;
  font-size: 1.45rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #252525;
  margin-bottom: 1.25rem;
  position: relative;
  padding-bottom: 0.75rem;
}
.blog-sidebar-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 36px;
  height: 2px;
  background-color: #906E49;
}

/* Search widget */
.blog-search-box {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}
.blog-search-input {
  flex: 1;
  height: 48px;
  padding: 0 1rem;
  background-color: #F6F2EB;
  border: 1px solid transparent;
  border-radius: 1rem;
  color: #252525;
  font-size: 0.9rem;
  transition: border-color 0.3s ease;
}
.blog-search-input:focus {
  border-color: #906E49;
  outline: none;
}
.blog-search-btn {
  height: 48px;
  width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background-color: #906E49;
  color: #ffffff;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.35s ease;
}
.blog-search-btn:hover {
  background-color: #252525;
  transform: rotate(-12deg);
}

/* Categories list */
.blog-categories-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.blog-categories-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  color: #252525;
  text-decoration: none;
  border-bottom: 1px dashed rgba(37, 37, 37, 0.12);
  transition: color 0.3s ease, padding-left 0.3s ease;
}
.blog-categories-list li:last-child a {
  border-bottom: none;
}
.blog-categories-list li a:hover {
  color: #906E49;
  padding-left: 6px;
}
.blog-cat-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: #906E49;
  background-color: rgba(144, 110, 73, 0.12);
  border-radius: 1rem;
  padding: 2px 10px;
}

/* Recent posts */
.blog-recent-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.blog-recent-item {
  display: flex;
  gap: 0.85rem;
  padding: 12px 0;
  border-bottom: 1px dashed rgba(37, 37, 37, 0.12);
  text-decoration: none;
  color: inherit;
  transition: padding-left 0.3s ease;
}
.blog-recent-list li:last-child .blog-recent-item {
  border-bottom: none;
}
.blog-recent-item:hover {
  padding-left: 4px;
}
.blog-recent-thumb {
  flex-shrink: 0;
  width: 78px;
  height: 64px;
  border-radius: 0.6rem;
  overflow: hidden;
}
.blog-recent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-recent-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.35rem;
}
.blog-recent-title {
  font-weight: 600;
  color: #252525;
  line-height: 1.3;
  font-size: 0.95rem;
}
.blog-recent-item:hover .blog-recent-title {
  color: #906E49;
}
.blog-recent-date {
  font-size: 0.78rem;
  color: #777;
}

/* Tag cloud */
.blog-tags-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.blog-tags-list li a {
  display: inline-block;
  padding: 6px 14px;
  font-size: 0.8rem;
  color: #252525;
  background-color: #F6F2EB;
  border-radius: 1rem;
  text-decoration: none;
  transition: all 0.3s ease;
}
.blog-tags-list li a:hover {
  background-color: #906E49;
  color: #ffffff;
}

/* Sidebar CTA */
.blog-sidebar-cta {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  padding: 2rem 1.75rem;
  background-image: linear-gradient(135deg, rgba(37, 37, 37, 0.92), rgba(37, 37, 37, 0.7)), url(../image/office-building-2022-12-15-19-40-07-utc.jpg);
  background-size: cover;
  background-position: center;
  color: #ffffff;
}
.blog-sidebar-cta-title {
  font-size: 1.6rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 0.6rem;
}
.blog-sidebar-cta-text {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
  margin-bottom: 1.25rem;
  line-height: 1.55;
}
.blog-sidebar-cta .btn-view-more {
  background-color: #ffffff;
  color: #252525;
  border-color: transparent;
}
.blog-sidebar-cta .btn-view-more .btn-view-more-icon {
  background-color: #906E49;
}
.blog-sidebar-cta .btn-view-more:hover {
  background-color: #906E49;
  color: #ffffff;
}

/* ========================================= */
/*            Blog Page CSS          */
/* ======================================== */
.author .social-links li a i {
  height: 40px;
  width: 40px;
  line-height: 40px;
  font-size: 20px;
  text-align: center;
  transition: all 0.3s ease-in-out;
}

.author .social-links li a i:hover {
  background-color: #906E49 !important;
  color: #ffffff;
  transition: all 0.3s ease-in-out;
}

/* ========================================= */
/*             Contact Us Page CSS          */
/* ======================================== */
.contact .contact-info .contact-info-box i {
  height: 74px;
  width: 74px;
  line-height: 74px;
  font-size: 34px;
}

/* INtereal Info Modal */
.intereal-info-modal .modal-header button {
  background-image: none;
  opacity: 100%;
}

.intereal-info-modal .modal-header button i {
  height: 40px;
  width: 40px;
  line-height: 40px;
  font-size: 20px;
}

.intereal-info-modal .modal-header button:hover {
  opacity: 0.9;
}

.intereal-info-modal .modal-socials ul li a i {
  height: 40px;
  width: 40px;
  line-height: 40px;
  font-size: 20px;
  text-align: center;
  transition: all 0.3s ease-in-out;
}

.intereal-info-modal .modal-socials ul li a i:hover {
  background-color: #906E49 !important;
  color: #ffffff;
  transition: all 0.3s ease-in-out;
}

@media (max-width: 996px) and (orientation: landscape) {
  .intereal-info-modal .modal-content {
    height: 200vh !important;
  }
}

@media (max-width: 768px) {
  .intereal-info-modal .modal-dialog {
    margin: 0 !important;
  }
}

/* ========================================= */
/*            Homepage 3 Page CSS          */
/* ======================================== */
.home-3 {
  /* Navbar CSS */
}

@media (max-width: 1200px) {
  .home-3 .header-nav {
    background-color: #252525;
    border-radius: 0 0 16px 16px;
  }

  .home-3 .header-nav .slicknav_nav {
    top: 72px;
  }
}

@media (max-width: 996px) {

  .home-3 .header-nav .slicknav_btn.slicknav_open:before,
  .home-3 .header-nav .slicknav_btn.slicknav_collapsed:before {
    top: 12px;
  }

  .home-3 .header-nav .slicknav_nav {
    top: 55px;
  }
}

.home-3 .navbar-sticky-in {
  border-radius: 0 0 16px 16px;
}

.home-3 .navbar-sticky-in .header-nav-inner {
  margin: 0 !important;
}

.home-3 {
  /* Banner CSS */
}

.home-3 .banner {
  /* Spacing on the banner is owned entirely by .banner-video's margin
     (30px all sides on desktop, scaled on mobile). Adding margin-top
     here would double-stack with the inner margin and create an
     over-spaced hero. */
  cursor: default;
}

.home-3 .banner .banner-slide {
  height: 850px;
  background-size: cover;
  background-position: center;
  margin: 0 50px;
  border-radius: 0.5rem;
}

.home-3 .banner .banner-slide .overlay {
  background-color: transparent;
  background-image: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%);
  border-radius: 0.5rem;
}

@media (max-width: 1400px) {
  .home-3 .banner .banner-slide {
    height: 650px;
  }
}

@media (max-width: 1200px) {
  .home-3 .banner .banner-slide {
    margin: 0;
  }

  .home-3 .banner .banner-slide h2 {
    font-size: 70px !important;
  }

  .home-3 .banner .banner-slide {
    border-radius: 0 0 0.5rem 0.5rem;
  }
}

@media (max-width: 976px) {
  .home-3 .banner .banner-slide {
    height: 600px;
  }

  .home-3 .banner .banner-slide h2 {
    font-size: 60px !important;
  }

  .home-3 .banner .banner-slide .overlay {
    background-image: linear-gradient(0deg, rgb(0, 0, 0) 30%, rgba(0, 0, 0, 0.2) 100%);
  }
}

.home-3 .banner .slick-dots {
  bottom: 20px;
  text-align: end;
  right: 150px;
}

@media (max-width: 976px) {
  .home-3 .banner .slick-dots {
    display: none !important;
  }
}

.home-3 .banner .slick-dots li.slick-active button:before {
  background: #906E49;
  border: 1px solid #906E49;
}

.home-3 {
  /* Services CSS */
}

.home-3 .services .services-body .service-box .overlay {
  background-color: transparent;
  background-image: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 50%);
}

.home-3 .services .services-body .service-box a {
  transition: all 0.3s ease-in-out;
}

.home-3 .services .services-body .service-box a i {
  height: 35px;
  width: 35px;
  font-size: 17px;
  line-height: 35px;
  rotate: -45deg;
  color: #ffffff;
}

.home-3 .services .services-body .service-box:hover a.arrow {
  background-color: #252525 !important;
  transition: all 0.3s ease-in-out;
}

.home-3 .accordion-button:not(.collapsed) {
  color: #906E49;
}

.home-3 {
  /* Ad Banner CSS */
}

.home-3 .ad-banner .ad-banner-inner {
  background-image: url(../image/side-bg-1.webp);
  background-position: left;
}

.home-3 .ad-banner .ad-banner-right {
  position: relative;
}

.home-3 .ad-banner .ad-banner-right::after {
  height: 100%;
  width: 100%;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: #906E49;
  opacity: 0.5;
  rotate: 8deg;
  border-radius: 1rem;
}

.home-3 {
  /* Why us CSS */
}

.home-3 .why-us .why-us-box {
  transition: all 0.3s ease-in-out;
}

.home-3 .why-us .why-us-box:hover {
  background-color: #ffffff;
  transition: all 0.3s ease-in-out;
}

.home-3 {
  /* Testimonial CSS */
}

.home-3 .testimonial .testimonial-body .testimonial-box p {
  font-size: 16px;
}

@media (max-width: 768px) {
  .home-3 .testimonial .testimonial-body .testimonial-box .testimonial-box-left img {
    border-radius: 1rem 1rem 0 0 !important;
  }

  .home-3 .testimonial .testimonial-body .testimonial-box .testimonial-box-right {
    padding: 24px !important;
  }
}

.home-3 .testimonial .testimonial-body .slick-dots {
  bottom: -40px;
}

.home-3 .testimonial .testimonial-body .slick-dots li.slick-active button:before {
  background: #906E49;
  border: 1px solid #906E49;
}

.home-3 {
  /* Blog CSS */
}

.home-3 .blog .blog-body .blog-box .overlay {
  background-color: transparent;
  background-image: linear-gradient(0deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0) 75%);
  opacity: 1;
}

/* ========================================= */
/*     Architects Section — Redesign CSS    */
/* ======================================== */
/* Quote boxes removed; image column stands alone next to the
   widened, vertically-centered content column.
   NOTE: grid split in about.php changed from col-lg-4/col-lg-8
   to col-lg-5/col-lg-7. The row now uses align-items-stretch
   (instead of align-items-center) so the image column's height
   always matches the content column's height exactly, whatever
   the text length; the text itself is centered inside its own
   column via d-flex align-items-center on the content wrapper.
   Below the 992px breakpoint columns stack, so a fixed min-height
   fallback keeps the image from collapsing. */
.founder-row {
  padding: 2.5rem 0;
}

.founder-row-divider {
  border-bottom: 1px solid rgba(144, 110, 73, 0.25);
}

/* Standalone founder photo, framed with a slim architectural border */
.portfolio-left {
  position: relative;
  height: 100%;
}

.founder-frame {
  position: absolute;
  inset: 0;
  padding: 10px;
  border: 1px solid rgba(144, 110, 73, 0.35);
}

.portfolio-image-single {
  height: 100%;
}

.portfolio-image-single img {
  height: 100%;
  object-fit: cover;
}

@media (max-width: 992px) {
  .portfolio-left {
    height: auto;
  }

  .founder-frame {
    position: static;
    inset: auto;
  }

  .portfolio-image-single,
  .portfolio-image-single img {
    height: auto;
    min-height: 300px;
  }
}

@media (max-width: 768px) {

  .portfolio-image-single,
  .portfolio-image-single img {
    min-height: 260px;
  }
}

@media (max-width: 992px) {

  .portfolio-image-single,
  .portfolio-image-single img {
    height: auto;
    min-height: 300px;
  }
}

@media (max-width: 768px) {

  .portfolio-image-single,
  .portfolio-image-single img {
    min-height: 260px;
  }
}

/* Typography hierarchy: Founder label -> Name -> Qualification -> Description */
.founder-content {
  max-width: 100%;
  width: 100%;
}

/* Content column now fills the widened col-lg-7 grid column
   (Bootstrap's gx-lg-5 gutter still provides the side padding
   between the two columns and the container edges), so both
   Yogesh's and Kanchan's rows sit flush against their images
   with no leftover empty space. */

.founder-label {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.founder-name {
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: 0.3px;
}

@media (max-width: 992px) {
  .founder-name {
    font-size: 36px;
  }
}

@media (max-width: 576px) {
  .founder-name {
    font-size: 30px;
  }
}

.founder-qualification {
  font-family: "Poppins", sans-serif;
  font-size: 14.5px;
  letter-spacing: 0.3px;
  color: #906E49;
  margin-bottom: 18px !important;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(144, 110, 73, 0.2);
  display: inline-block;
}

.founder-desc p {
  line-height: 1.85;
  margin-bottom: 14px;
}

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

/* Founders subtitle: one line on desktop, wraps normally on mobile
   so it never forces horizontal overflow on small screens. */
/* The founders/process title wrappers were narrowed to 50%/75% width
   for the old wrapped-text design. Now that the subtitles are forced
   onto one line, that narrow box is what breaks centering — the line
   is wider than the box, so "margin: auto" collapses to 0 and the
   text snaps to the left edge instead of centering. Restore full
   container width so there's room for the line to center properly. */
div.process-title,
div.portfolio-title {
  width: 100% !important;
  max-width: 100% !important;
}

.portfolio-subtitle {
  white-space: nowrap !important;
  display: block !important;
  width: max-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

@media (min-width: 992px) {
  .portfolio-subtitle {
    font-size: clamp(13px, 1.3vw, 15px) !important;
  }
}

@media (max-width: 991px) {
  .portfolio-subtitle {
    white-space: normal !important;
    width: 100% !important;
  }
}

/* Process section subtitle: same one-line-on-desktop, centered
   treatment as the founders subtitle above. */
.process-subtitle {
  white-space: nowrap !important;
  display: block !important;
  width: max-content !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

@media (min-width: 992px) {
  .process-subtitle {
    font-size: clamp(13px, 1.3vw, 15px) !important;
  }
}

@media (max-width: 991px) {
  .process-subtitle {
    white-space: normal !important;
    width: 100% !important;
  }
}

/* ========================================= */
/*   About Us Page — Mobile Responsive Fixes */
/* ========================================= */
/* This section patches the specific rules above that were stopping the
   About Us page from adapting to small screens (fixed offsets, a
   nowrap label, and a padding rule shared with the homepage layout).
   Nothing here overrides desktop styles — every rule is wrapped in a
   max-width media query, so the desktop design is untouched. */

/* Global overflow safety net: stops any stray fixed-width element from
   forcing the whole page to be scaled/shrunk down by the mobile browser. */
html {
  overflow-x: clip;
  width: 100%;
}

body {
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}

@media (max-width: 991px) {

  /* Keep the founder photo/quote from being pinned to a fixed height
     while columns are still stacking. */
  body.about-page .about-right {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 768px) {

  /* Containers and rows: never let them exceed the viewport width,
     regardless of what fixed widths a component further down sets. */
  .container,
  .container-fluid,
  .row {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
  }

  .row {
    padding-left: 0;
    padding-right: 0;
  }

  [class^="col-"],
  [class*=" col-"] {
    width: 100%;
    max-width: 100%;
  }

  /* Images/media stay fluid and never overflow their container. */
  img,
  svg,
  video,
  iframe {
    max-width: 100%;
    height: auto;
  }

  /* About section: the 350px top padding is meant for the homepage
     variant, where the image sits absolutely positioned behind the
     text. On the About Us page (about.php) the image is a normal,
     in-flow column, so that padding just creates a huge empty gap.
     Scoped to body.about-page so the homepage is unaffected. */
  body.about-page .about {
    padding-top: 0;
  }

  body.about-page .about-inner {
    padding-bottom: 2.5rem !important;
    margin-bottom: 2.5rem !important;
  }

  body.about-page .about-left,
  body.about-page .about-right {
    padding: 0 !important;
    text-align: left !important;
  }

  /* Quote box: was pulled up with a fixed -100px negative margin and
     locked to 75% width, both of which broke on narrow screens.
     Make it full-width and let it sit naturally below the image. */
  .about-qoute {
    width: 100% !important;
  }

  .about-qoute-offset {
    margin-top: 1.5rem !important;
  }

  /* Partner logo strip: keep it from pushing the page wider than the
     viewport if the slider script hasn't initialized yet. */
  .partner-slider {
    overflow-x: hidden;
    flex-wrap: wrap;
  }

  .partner-right {
    width: 100%;
  }

  /* Founders section: stack fully and drop the fixed image height
     used at the 992px breakpoint down further so photos don't eat
     the whole screen. */
  .founder-row {
    padding: 1.75rem 0;
  }

  .portfolio-image-single,
  .portfolio-image-single img {
    min-height: 220px;
  }

  .founder-content {
    text-align: left;
  }

  /* Process/values cards: full-width single column, image between. */
  .process-box {
    padding: 1.5rem !important;
  }

  .pt-lg-5 {
    padding-top: 1.5rem !important;
  }

  .pb-6,
  .py-6 {
    padding-bottom: 2.5rem !important;
  }

  .mb-6 {
    margin-bottom: 2.5rem !important;
  }
}

@media (max-width: 576px) {
  .container,
  .container-fluid {
    padding-left: 12px;
    padding-right: 12px;
  }

  .about-qoute {
    padding: 1.25rem !important;
  }

  .founder-name {
    word-break: break-word;
  }

  .founder-qualification {
    font-size: 13px;
  }
}

/*# sourceMappingURL=style.css.map */
/* =========================================================
   Home 3 - Video Banner Background (Vimeo)
   ========================================================= */
.home-3 .banner {
  cursor: default;
}
.home-3 .banner .banner-video {
  position: relative;
  height: 650px;
  margin: 20px;
  border-radius: 0.5rem;
  overflow: hidden;
}
.home-3 .banner .banner-video .banner-video-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
}
.home-3 .banner .banner-video .banner-video-bg iframe {
  /* Cover the container edge-to-edge. Video's natural 16:9 aspect is
     forced to fill any container shape (including the 4:5 phone frame)
     by using scaleX that grows with the container's width-vs-height
     ratio. Calculated below per breakpoint so black bars never appear. */
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border: 0;
  /* Default desktop/tablet (wide containers): video is wider than container
     is tall, so grow width until height matches. 1.6 = 16/10 baseline. */
  transform: translate(-50%, -50%) scale(var(--vimeo-scale, 1.6));
  transform-origin: center center;
}
@media (max-width: 1400px) {
  .home-3 .banner .banner-video {
    height: 580px;
  }
  .home-3 .banner .banner-video-bg iframe {
    --vimeo-scale: 1.45;
  }
}
@media (max-width: 1200px) {
  .home-3 .banner .banner-video {
    /* Tablet (1200px and below): intermediate margin between desktop
       30px and phone 16px. Keeps rounded corners visible on all
       sides. */
    margin: 24px;
    border-radius: 0.5rem;
  }
  .home-3 .banner .banner-video-bg iframe {
    --vimeo-scale: 2;
  }
}
@media (max-width: 575px) {
  .home-3 .banner .banner-video {
    margin: 16px;
  }
}
@media (max-width: 976px) {
  .home-3 .banner .banner-video {
    height: 520px;
  }
  .home-3 .banner .banner-video-bg iframe {
    --vimeo-scale: 1.8;
  }
}
/* Phone-only: let the video container hug its actual rendered
   height instead of a fixed px value that leaves empty space
   below the video. Scoped to <=576px so tablet/desktop (the
   1400/1200/976 rules above) are completely unaffected. */
@media (max-width: 576px) {
  .home-3 .banner .banner-video {
    height: auto;
    aspect-ratio: 4 / 5;
  }
  .home-3 .banner .banner-video-bg iframe {
    /* 4:5 container is TALLER than 16:9, so we need to grow height
       (shrink visually-relative-width) until width fills the frame.
       Scale = (container W/H) / (video W/H) = 0.8 / 1.778 = ~2.22 */
    --vimeo-scale: 2.25;
  }
}
@media (max-width: 768px) {
  /* Breadcrumb hero (About/Teams/Career/Faq/Testimonial/Contact) —
     100vh + 700px min-height from desktop is way too tall on phones,
     causing heavy cropping of the background image / dead space
     around the heading. Scale it down to something proportional
     to a phone viewport instead. Guarded with :not(ol) so this
     never touches Bootstrap's <ol class="breadcrumb"> nav trail. */
  .breadcrumb:not(ol) {
    height: 60vh;
    min-height: 420px;
  }
}

@media (max-width: 576px) {
  .breadcrumb:not(ol) {
    height: 50vh;
    min-height: 340px;
  }
}

/* =========================================================
   Home 3 - Inline Stats (Years / Projects / Clients)
   ========================================================= */
.home-3 .portfolio-stats {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
}
.home-3 .portfolio-stats .stats-item {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
  padding-right: 1rem;
  text-align: center;
}
.home-3 .portfolio-stats .stats-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 0;
  bottom: 8px;
  width: 1px;
  background-color: rgba(37, 37, 37, 0.12);
}
.home-3 .portfolio-stats .stats-item h1 {
  font-size: 34px;
  line-height: 1;
}
.home-3 .portfolio-stats .stats-item h6 {
  font-size: 12px;
  letter-spacing: 1.2px;
  white-space: nowrap;
  margin-top: 4px;
}
@media (max-width: 575px) {
  .home-3 .portfolio-stats {
    gap: 0.5rem;
  }
  .home-3 .portfolio-stats .stats-item h1 {
    font-size: 30px;
  }
  .home-3 .portfolio-stats .stats-item h6 {
    font-size: 11px;
    letter-spacing: 0.6px;
  }
}

/* Our Services - title & service card formatting */
.home-3 .portfolio-title-sub {
  max-width: 1080px;
  margin-left: auto !important;
  margin-right: auto !important;
}
.home-3 .service-card p {
  text-align: justify;
  hyphens: auto;
}
.home-3 .service-card h3 {
  font-weight: 600;
}
.home-3 .service-card .portfolio-stat {
  margin-top: 1.25rem;
}
.home-3 .service-card .portfolio-stat h5 {
  font-size: 1rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #252525;
  border-bottom: 1px solid rgba(37, 37, 37, 0.12);
  padding-bottom: 0.5rem;
}
.home-3 .service-card .portfolio-stat ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem 1.25rem;
}
.home-3 .service-card .portfolio-stat ul li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.8px;
  color: #252525;
  line-height: 1.3;
}
.home-3 .service-card .portfolio-stat ul li i {
  flex: 0 0 auto;
  width: 22px;
  text-align: center;
  font-size: 16px;
}
@media (max-width: 575px) {
  .home-3 .service-card .portfolio-stat ul {
    grid-template-columns: 1fr;
  }
}

/* Themed View More button for Our Services cards */
.home-3 .btn-view-more {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 11px 14px 11px 22px;
  font-family: "Teko", sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-decoration: none;
  color: #252525;
  background-color: #F6F2EB;
  border: 1px solid rgba(144, 110, 73, 0.25);
  border-radius: 1rem;
  transition: all 0.35s ease;
  line-height: 1;
}
.home-3 .btn-view-more .btn-view-more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  width: 34px;
  border-radius: 50%;
  background-color: #906E49;
  color: #ffffff;
  transition: transform 0.4s ease, background-color 0.35s ease;
  overflow: hidden;
}
.home-3 .btn-view-more .btn-view-more-icon i {
  font-size: 14px;
  transition: transform 0.4s ease;
}
.home-3 .btn-view-more:hover {
  color: #ffffff;
  background-color: #906E49;
  border-color: #906E49;
  box-shadow: 0 10px 22px -12px rgba(144, 110, 73, 0.6);
}
.home-3 .btn-view-more:hover .btn-view-more-icon {
  background-color: #252525;
  transform: rotate(-45deg);
}
.home-3 .btn-view-more:hover .btn-view-more-icon i {
  transform: scale(1.05);
}
.home-3 .btn-view-more:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(144, 110, 73, 0.35);
}

/* Reduce vertical padding for Our Services (portfilio) section.
   The FIRST .portfilio (right after the video banner) is treated as a
   continuation of the hero — its top padding is removed so the video
   and the intro section read as one combined banner with no visible
   gap. Subsequent .portfilio sections (e.g. the "Our Services" block)
   keep the standard breathing room. */
.home-3 section.portfilio {
  padding: 56px 0;
}
/* First .portfilio directly after the banner — flatten its top so it
   visually attaches to the video hero. Selector matches .portfilio
   when it's an immediate sibling of .banner. */
.home-3 section.banner + section.portfilio {
  padding-top: 0;
  margin-top: -1px; /* prevent any 1px gap from background-color edges */
}
@media (max-width: 991px) {
  .home-3 section.portfilio {
    padding: 48px 0;
  }
}
@media (max-width: 575px) {
  .home-3 section.portfilio {
    padding: 40px 0;
  }
}

/* Modern minimal service cards — "studio archive" look.
   Image takes the full card top with a subtle dark gradient that
   strengthens on hover. Content sits below on a clean white body,
   with a numbered badge in the top-right of the image area and
   an underline that draws on hover. Built to read as a portfolio
   item, not a generic link box. */
.svc-card {
  position: relative;
  /* warm off-white card surface so it reads against the section's
     pure white bg-secondarylight without competing with the image.
     Pairs with the brand's secondary light (#F6F2EB) used on the body. */
  background-color: #FBF8F3;
  border: 1px solid rgba(144, 110, 73, 0.08);
  border-radius: 1rem;
  overflow: hidden;
  height: 100%;
  box-shadow: 0 1px 3px rgba(37, 37, 37, 0.05);
  transition: transform 0.4s ease, box-shadow 0.4s ease, background-color 0.4s ease, border-color 0.4s ease;
}
.svc-card:hover {
  background-color: #ffffff;
  border-color: rgba(144, 110, 73, 0.18);
}
.svc-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(37, 37, 37, 0.14);
}
.svc-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.svc-card-link:hover,
.svc-card-link:focus-visible {
  color: inherit;
  text-decoration: none;
}
.svc-card-media {
  position: relative;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background-color: #252525;
}
.svc-card-media::after {
  /* base dark gradient — always visible, stronger on hover via the
     .svc-card:hover .svc-card-media::after override below */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(37, 37, 37, 0) 55%, rgba(37, 37, 37, 0.55) 100%);
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.svc-card:hover .svc-card-media::after {
  background: linear-gradient(180deg, rgba(37, 37, 37, 0.15) 0%, rgba(37, 37, 37, 0.7) 100%);
}
.svc-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease, filter 0.4s ease;
}
.svc-card:hover .svc-card-img {
  transform: scale(1.07);
  filter: saturate(1.05);
}
.svc-card-img--empty {
  background: linear-gradient(135deg, #F1F1F1 0%, #d9d4cc 100%);
}
.svc-card-number {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-family: "Teko", system-ui, sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  color: #ffffff;
  letter-spacing: 0.05em;
  padding: 0.4rem 0.7rem;
  background-color: rgba(37, 37, 37, 0.6);
  border-radius: 1rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1;
}
.svc-card-body {
  padding: 1.5rem 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.svc-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #252525;
  margin: 0 0 0.65rem;
  letter-spacing: -0.01em;
  position: relative;
  padding-bottom: 0.75rem;
}
.svc-card-title::after {
  /* short underline that animates wider on hover */
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 28px;
  height: 2px;
  background-color: #906E49;
  transition: width 0.35s ease;
}
.svc-card:hover .svc-card-title::after {
  width: 64px;
}
.svc-card-desc {
  color: #777777;
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0 0 1.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.svc-card-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #252525;
}
.svc-card-cta-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #252525;
  color: #ffffff;
  font-size: 12px;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.svc-card:hover .svc-card-cta-arrow {
  background-color: #906E49;
  transform: translateX(4px);
}

/* Get A Quote popup — bottom-right corner modal */
.quote-modal .modal-dialog {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  left: auto;
  top: auto;
  margin: 0;
  max-width: 380px;
  width: calc(100vw - 2rem);
}
.quote-modal.fade .modal-dialog {
  transform: translateY(40px);
  opacity: 0;
  transition: transform 0.35s ease, opacity 0.35s ease;
}
.quote-modal.show .modal-dialog {
  transform: translateY(0);
  opacity: 1;
}
.quote-modal .modal-content {
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.4);
}
.quote-modal .form-control,
.quote-modal .form-select {
  border-radius: 0.5rem;
  border-color: rgba(37, 37, 37, 0.15);
  padding: 0.6rem 0.9rem;
  font-size: 14px;
}
.quote-modal .form-control:focus,
.quote-modal .form-select:focus {
  border-color: #906E49;
  box-shadow: 0 0 0 0.2rem rgba(144, 110, 73, 0.15);
}
@media (max-width: 480px) {
  .quote-modal .modal-dialog {
    right: 0.5rem;
    bottom: 0.5rem;
    width: calc(100vw - 1rem);
  }
}

/* ─────────────────────────────────────────────────────────────────────────── */
/* Blog detail — magazine spread                                               */
/* ─────────────────────────────────────────────────────────────────────────── */

/* Detail-page hero — mirrors the home video banner's floating-card
   shape (uniform 1rem radius, 20px margin, 650px tall). The featured
   image is applied inline via `style="background-image: url(...)"` on
   the section. Height matches the other banner sections (blog-list,
   service-list, service-detail) so all four pages share an identical
   silhouette. Top spacing is owned by the unified .breadcrumb /
   .service-detail-hero / .article-hero ruleset near .banner. */
.article-hero {
  position: relative;
  min-height: 650px;
  height: 650px;
  background-color: #252525;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

/* Blog detail hero — same mobile scaling as the .breadcrumb banners.
   Must sit AFTER the .article-hero ruleset above (source order wins
   when specificity is equal) so the 650px desktop height is actually
   overridden on small screens. */
@media (max-width: 768px) {
  .article-hero {
    height: 60vh;
    min-height: 420px;
  }
}

@media (max-width: 576px) {
  .article-hero {
    height: 50vh;
    min-height: 340px;
  }
}

/* overlay removed — banner image must be clearly visible */

/* Inner content sits above the overlay. */
.article-hero-inner {
  position: relative;
  z-index: 2;
  color: #fff;
}
.article-hero-inner h6.secondary {
  color: #906E49;
  letter-spacing: 4px;
}
.article-hero-inner .breadcrumb-sub {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.article-hero-inner ol.breadcrumb {
  background: transparent;
  padding: 0;
}
.article-hero-inner ol.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.4);
}
.article-hero-inner .breadcrumb-item,
.article-hero-inner .breadcrumb-item a {
  font-size: 0.9rem;
}

/* Body section */
.article-section {
  padding: 0 0 5rem;
  background: #fafaf7;
}
.article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 3.5rem;
  align-items: start;
}
@media (max-width: 991.98px) {
  .article-grid { grid-template-columns: 1fr; gap: 2rem; }
}

.article-body {
  background: #fff;
  padding: 1.5rem 1.75rem 2rem;
  border-radius: 4px;
  box-shadow: 0 8px 30px rgba(0,0,0,.05);
  border-top: 4px solid #906E49;
}
.article-body .article-eyebrow {
  font-family: "Teko", sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: #906E49;
  margin-bottom: .75rem;
}
.article-body .article-h1 {
  font-family: "Teko", sans-serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
  line-height: 1.15;
  color: #1c1c1c;
  margin: 0 0 1.25rem;
}
.article-body .article-meta-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  font-size: .9rem;
  color: #6c6c6c;
  border-bottom: 1px dashed #ddd;
  padding-bottom: 1.25rem;
  margin-bottom: 1.75rem;
}
.article-body .article-meta-inline i {
  color: #906E49;
  margin-right: .4rem;
}

/* Quick answer callout */
.article-callout {
  background: #f5f0e8;
  border-left: 4px solid #906E49;
  padding: 1.25rem 1.5rem;
  margin: 0 0 2rem;
  border-radius: 0 4px 4px 0;
}
.article-callout .article-callout-label {
  font-family: "Teko", sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: #906E49;
  margin-bottom: .35rem;
  display: block;
}
.article-callout p {
  margin: 0;
  color: #3a3a3a;
  font-size: 1rem;
  line-height: 1.65;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* Article prose — typeset for readability */
.article-prose {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: #2c2c2c;
}
.article-prose > * + * { margin-top: 1.25rem; }
.article-prose h2,
.article-prose h3,
.article-prose h4 {
  font-family: "Teko", sans-serif;
  font-weight: 600;
  color: #1c1c1c;
  line-height: 1.25;
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
}
.article-prose h2 { font-size: 1.85rem; padding-bottom: .5rem; border-bottom: 2px solid #906E49; display: inline-block; }
.article-prose h3 { font-size: 1.5rem; }
.article-prose h4 { font-size: 1.2rem; }
.article-prose p { margin: 0 0 1.1rem; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.article-prose a { color: #906E49; text-decoration: underline; text-underline-offset: 3px; }
.article-prose a:hover { color: #5b4530; }
.article-prose strong { color: #1c1c1c; }
.article-prose ul, .article-prose ol { padding-left: 1.4rem; }
.article-prose li { margin-bottom: .35rem; }
.article-prose blockquote {
  border-left: 3px solid #906E49;
  background: #faf6f0;
  margin: 1.75rem 0;
  padding: 1.25rem 1.5rem;
  font-style: italic;
  color: #4a4a4a;
  font-size: 1.1rem;
}
.article-prose blockquote p:last-child { margin-bottom: 0; }
.article-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  margin: 1.5rem 0;
}
.article-prose figure { margin: 1.75rem 0; }
.article-prose figcaption {
  font-size: .85rem;
  color: #888;
  text-align: center;
  margin-top: .5rem;
  font-style: italic;
}
.article-prose code {
  background: #f3f0ea;
  color: #5b4530;
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-size: .9em;
  font-family: "SFMono-Regular", Consolas, monospace;
}
.article-prose pre {
  background: #1c1c1c;
  color: #f3f0ea;
  padding: 1.25rem;
  border-radius: 4px;
  overflow-x: auto;
  font-size: .9rem;
  line-height: 1.5;
}
.article-prose pre code { background: transparent; color: inherit; padding: 0; }
.article-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: .95rem;
}
.article-prose th, .article-prose td {
  border: 1px solid #ddd;
  padding: .65rem .9rem;
  text-align: left;
}
.article-prose th {
  background: #f5f0e8;
  font-weight: 600;
}

/* Drop cap on first paragraph */
.article-prose > p:first-of-type::first-letter {
  font-family: "Teko", sans-serif;
  font-size: 4rem;
  font-weight: 600;
  line-height: 0.85;
  float: left;
  padding: 0.35rem 0.75rem 0 0;
  color: #906E49;
}

/* Tag chips after body */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px dashed #ddd;
}
.article-tags .article-tags-label {
  font-family: "Teko", sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.85rem;
  color: #6c6c6c;
  margin-right: .5rem;
}
.article-chip {
  display: inline-block;
  background: #f5f0e8;
  color: #5b4530;
  padding: 5px 14px;
  border-radius: 1rem;
  font-size: .85rem;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.article-chip:hover { background: #906E49; color: #fff; }
.article-chip i { margin-right: 4px; opacity: .7; }

/* Author footer card */
.article-author {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 1.5rem 1.75rem;
  margin-top: 2rem;
}
.article-author-head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.article-author-col-avatar {
  flex: 0 0 auto;
}
.article-author-col-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.article-author-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #906E49;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Teko", sans-serif;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.article-author-avatar-img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 50%;
}
.article-author-role {
  font-size: .8rem;
  color: #906E49;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.article-author-name {
  font-family: "Teko", sans-serif;
  font-size: 1.35rem;
  line-height: 1.1;
  color: #1c1c1c;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.article-author-credentials {
  font-family: "Poppins", sans-serif;
  font-size: .78rem;
  font-weight: 400;
  color: #6c6c6c;
  background: #f5f0e8;
  padding: .15rem .55rem;
  border-radius: 1rem;
  text-transform: none;
  letter-spacing: .5px;
}
.article-author-bio {
  font-size: .9rem;
  color: #6c6c6c;
  margin: 1.25rem 0 0;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.article-author-bio p { margin: 0 0 .65rem; }
.article-author-bio p:last-child { margin-bottom: 0; }

/* Prev/Next navigation */
.article-prevnext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 2rem;
}
.article-prevnext a {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 1.25rem;
  text-decoration: none;
  color: #1c1c1c;
  transition: border-color .2s ease, transform .2s ease;
}
.article-prevnext a:hover { border-color: #906E49; transform: translateY(-2px); }
.article-prevnext .article-prevnext-label {
  font-family: "Teko", sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 0.8rem;
  color: #906E49;
  display: block;
  margin-bottom: .25rem;
}
.article-prevnext .article-prevnext-title {
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.3;
  display: block;
}
.article-prevnext .article-prevnext-icon {
  font-size: 1.5rem;
  color: #906E49;
}
.article-prevnext-next { text-align: right; flex-direction: row-reverse; }
@media (max-width: 575.98px) {
  .article-prevnext { grid-template-columns: 1fr; }
}

/* Sticky sidebar */
.article-sidebar { position: sticky; top: 1rem; }
.article-sidebar-card {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,.05);
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.article-sidebar-card-head {
  font-family: "Teko", sans-serif;
  font-size: 1.1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #1c1c1c;
  padding: 1rem 1.25rem;
  border-bottom: 2px solid #906E49;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}
.article-sidebar-card-body { padding: 1.25rem; }

/* Share buttons */
.article-share { display: flex; gap: .5rem; flex-wrap: wrap; }
.article-share a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f5f0e8;
  color: #906E49;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.article-share a:hover { background: #906E49; color: #fff; }

/* Related posts list */
.article-related-item {
  display: flex;
  gap: .85rem;
  padding: .85rem 0;
  border-bottom: 1px dashed #eee;
  text-decoration: none;
  color: inherit;
}
.article-related-item:last-child { border-bottom: 0; }
.article-related-thumb {
  width: 70px;
  height: 70px;
  flex-shrink: 0;
  border-radius: 4px;
  background: #f5f0e8 center/cover no-repeat;
}
.article-related-title {
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.35;
  color: #1c1c1c;
  display: block;
  margin-bottom: .25rem;
}
.article-related-item:hover .article-related-title { color: #906E49; }
.article-related-date {
  font-size: .75rem;
  color: #888;
}

/* Sidebar CTA */
.article-sidebar-cta {
  background: linear-gradient(135deg, #906E49 0%, #5b4530 100%);
  color: #fff;
  border-radius: 4px;
  padding: 1.75rem 1.5rem;
  text-align: center;
}
.article-sidebar-cta h5 {
  font-family: "Teko", sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: .75rem;
}
.article-sidebar-cta p { font-size: .9rem; opacity: .9; margin-bottom: 1rem; }
.article-sidebar-cta .btn-view-more {
  background: #fff;
  color: #1c1c1c;
  border-color: #fff;
}
.article-sidebar-cta .btn-view-more:hover { background: #1c1c1c; color: #fff; border-color: #1c1c1c; }

/* ---------- FAQ accordion — cream theme redesign ---------- */
.contact-faq {
  background: var(--ar-cream) !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 50px -28px rgba(30, 27, 23, 0.15);
}

.contact-faq .ar-eyebrow {
  color: var(--ar-gold-deep) !important;
  position: relative;
  z-index: 1;
}

.contact-faq .ar-eyebrow::before {
  background: var(--ar-gold);
}

.contact-faq .contact-title {
  position: relative;
  z-index: 1;
}

.contact-faq .contact-title h3 {
  color: var(--ar-ink) !important;
  font-weight: 600;
}

.contact-faq .contact-title h3 .secondary,
.contact-faq .contact-title h3 span.secondary {
  color: var(--ar-gold) !important;
}

.contact-faq .contact-title p {
  color: var(--ar-muted);
}

.contact-faq .accordion {
  position: relative;
  z-index: 1;
}

.ar-faq-row {
  position: relative;
  z-index: 1;
}

.ar-faq-accordion-col {
  padding: 4px 28px 4px 4px;
}

.ar-faq-visual {
  height: 100%;
  min-height: 340px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 1px var(--ar-line);
}

.ar-faq-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 991px) {
  .ar-faq-accordion-col {
    padding: 4px;
  }
}

.contact-faq .accordion-item {
  border: none;
  border-bottom: 1px solid var(--ar-line);
  background: transparent;
}

.contact-faq .accordion-item:last-child {
  border-bottom: none;
}

/* ---- FAQ text: simple font family, question bigger than answer, question in brown ---- */
.contact-faq .accordion-button {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
  color: var(--ar-gold-deep) !important;
  padding: 24px 56px 24px 4px;
  background: transparent;
  box-shadow: none;
  position: relative;
}

.contact-faq .accordion-button:not(.collapsed) {
  color: var(--ar-gold) !important;
  background: transparent;
}

.contact-faq .accordion-button:focus {
  box-shadow: none;
}

/* Custom toggle icon */
.contact-faq .accordion-button::after {
  display: none !important;
  content: none !important;
  background-image: none !important;
}

.contact-faq .accordion-button::before {
  font-family: "FontAwesome";
  content: "\f067";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--ar-gold-deep);
  background: #fff;
  border: 1px solid var(--ar-line);
  transition: all 0.25s ease;
}

.contact-faq .accordion-button:not(.collapsed)::before {
  content: "\f068";
  background: var(--ar-gold);
  border-color: var(--ar-gold);
  color: #fff;
  transform: translateY(-50%) rotate(180deg);
}

.contact-faq .accordion-button:hover::before {
  border-color: var(--ar-gold);
}

.contact-faq .accordion-body,
.contact-faq .accordion-body.grey {
  padding: 0 56px 24px 4px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--ar-muted) !important;
}


/*# sourceMappingURL=style.css.map */
 /* ---------- FAQ accordion — dark panel redesign ---------- */
 :root {
    --ar-gold: var(--bs-secondary, #b4884f);
    --ar-gold-deep: #97713d;
    --ar-ink: #1e1b17;
    --ar-muted: #6b6459;
    --ar-cream: #f7f3ec;
    --ar-line: rgba(30, 27, 23, 0.08);
  }

  .ar-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ar-gold-deep);
    margin-bottom: 12px;
  }

  .ar-eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--ar-gold);
    display: inline-block;
    border-radius: 2px;
  }

  .home-faq {
    background: var(--ar-cream) !important;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 50px -28px rgba(30, 27, 23, 0.15);
    border-radius: 0.5rem;
    padding: 80px 24px;
  }

  .home-faq .contact-title h3 {
    color: var(--ar-ink) !important;
    font-weight: 600;
  }

  .home-faq .contact-title h3 .secondary {
    color: var(--ar-gold) !important;
  }

  .home-faq .contact-title p {
    color: var(--ar-muted);
  }

  .ar-faq-accordion-col {
    padding: 4px 28px 4px 4px;
  }

  .ar-faq-visual {
    height: 100%;
    min-height: 340px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 0 1px var(--ar-line);
  }

  .ar-faq-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  @media (max-width: 991px) {
    .ar-faq-accordion-col {
      padding: 4px;
    }
  }

  .home-faq .accordion-item {
    border: none;
    border-bottom: 1px solid var(--ar-line);
    background: transparent;
  }

  .home-faq .accordion-item:last-child {
    border-bottom: none;
  }

  .home-faq .accordion-button {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.4;
    color: var(--ar-gold-deep) !important;
    padding: 24px 56px 24px 4px;
    background: transparent;
    box-shadow: none;
    position: relative;
  }

  .home-faq .accordion-button:not(.collapsed) {
    color: var(--ar-gold) !important;
    background: transparent;
  }

  .home-faq .accordion-button:focus {
    box-shadow: none;
  }

  .home-faq .accordion-button::after {
    display: none !important;
    content: none !important;
    background-image: none !important;
  }

  .home-faq .accordion-button::before {
    font-family: "FontAwesome";
    content: "\f067";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--ar-gold-deep);
    background: #fff;
    border: 1px solid var(--ar-line);
    transition: all 0.25s ease;
  }

  .home-faq .accordion-button:not(.collapsed)::before {
    content: "\f068";
    background: var(--ar-gold);
    border-color: var(--ar-gold);
    color: #fff;
    transform: translateY(-50%) rotate(180deg);
  }

  .home-faq .accordion-button:hover::before {
    border-color: var(--ar-gold);
  }

  .home-faq .accordion-body,
  .home-faq .accordion-body.grey {
    padding: 0 56px 24px 4px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--ar-muted) !important;
  }

  @media (max-width: 768px) {
    .home-faq {
      padding: 40px 18px;
      border-radius: 1rem;
    }
  }
  .faq-footer-spacer {
  background-color: #ffffff;
  height: 50px;
}

@media (max-width: 768px) {
  .faq-footer-spacer {
    height: 40px;
  }
}
  
   /* ---------- FAQ accordion — dark panel redesign ---------- */

/* ---------- Service list page — restyled cards + hero + SEO block ---------- */
.service-list-hero {
  text-align: center;
}
.service-list-hero h1 {
  font-weight: 700;
  line-height: 1.2;
}
.service-list-hero p {
  font-size: 1.05rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.service-seo-block h2 {
  font-weight: 700;
  line-height: 1.25;
}
.service-seo-block p {
  line-height: 1.7;
  color: #333;
}
.service-seo-faq {
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}
.service-seo-faq ul li strong {
  color: #1b1b1b;
}

/* ---------- Blog list page — restyled cards + hero + SEO block ---------- */
.blog-list-hero {
  text-align: center;
}
.blog-list-hero h1 {
  font-weight: 700;
  line-height: 1.2;
}
.blog-list-hero p {
  font-size: 1.05rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.blog-card-restyled {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-radius: 1rem;
  overflow: hidden;
}
.blog-card-restyled:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08);
}
.blog-card-restyled .blog-card-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.blog-card-restyled .blog-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.blog-card-restyled:hover .blog-card-image img {
  transform: scale(1.05);
}
.blog-card-restyled .blog-card-body {
  padding: 1.5rem 1.5rem 1.75rem;
}

.blog-seo-block h2 {
  font-weight: 700;
  line-height: 1.25;
}
.blog-seo-block p {
  line-height: 1.7;
  color: #333;
}

/* Widen the Bootstrap .container on desktop so the main content
   spans almost the full viewport — matches the wider nav/video
   aesthetic. 98% leaves a 1% gap on each side instead of the
   default 1140px hard cap that would otherwise tighten everything
   while nav/video stretch wider. Tablet/phone keep Bootstrap's
   responsive defaults since 98% would feel too tight on small
   screens. */
@media (min-width: 1200px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 98%;
  }
}
/* ===== Eyebrow labels: medium font + dash on BOTH sides (global) ===== */
.ar-eyebrow.ar-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 14px;          /* pehle 12px, ab 14px */
  font-weight: 700;
  letter-spacing: .16em;
}

/* Teko font condensed hota hai, isliye thoda bada */
.ar-eyebrow.ar-eyebrow.teko {
  font-size: 18px;
}

.ar-eyebrow.ar-eyebrow::before,
.ar-eyebrow.ar-eyebrow::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--ar-gold);
  border-radius: 2px;
  flex-shrink: 0;
}

/* "Our Story" / "Meet The Team" type labels */
.about-info > span.teko.h5.secondary,
.portfolio-title > span.teko.h5.secondary {
  display: flex !important;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  letter-spacing: .1em;
}
.portfolio-title > span.teko.h5.secondary {
  justify-content: center;
}
.about-info > span.teko.h5.secondary::before,
.about-info > span.teko.h5.secondary::after,
.portfolio-title > span.teko.h5.secondary::before,
.portfolio-title > span.teko.h5.secondary::after {
  content: "";
  width: 26px;
  height: 2px;
  background: #906E49;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .ar-eyebrow.ar-eyebrow { font-size: 13px; gap: 8px; }
  .ar-eyebrow.ar-eyebrow.teko { font-size: 16px; }
  .ar-eyebrow.ar-eyebrow::before,
  .ar-eyebrow.ar-eyebrow::after { width: 20px; }
  .about-info > span.teko.h5.secondary,
  .portfolio-title > span.teko.h5.secondary { font-size: 18px; }
}


/* Photo banner camera motion: only the image moves inside the rounded frame. */
.ar-photo-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.ar-banner-motion {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
  transform-origin: center;
  animation: ar-banner-camera 10s ease-in-out infinite alternate;
  animation-play-state: paused;
}
.ar-banner-in-view > .ar-banner-motion {
  animation-play-state: running;
}
@keyframes ar-banner-camera {
  from { transform: scale(1.04) translate(-0.7%, 0.3%); }
  to { transform: scale(1.16) translate(1.2%, -0.6%); }
}
@media (max-width: 767px) {
  .ar-banner-motion { animation-duration: 12s; }
}
@media (prefers-reduced-motion: reduce) {
  .ar-banner-motion { animation: none; transform: none; }
}


/* Upright handwriting for ALL sub-headings / eyebrow labels (Our Services, Our Story, FAQs, Meet The Team …).
   Patrick Hand, gold, no slant. !important beats the older .ar-eyebrow / .teko rules. */
.ar-eyebrow.ar-eyebrow,
.ar-eyebrow.ar-eyebrow.teko,
.contact-faq .ar-eyebrow,
.lux-eyebrow,
.teko.h5.secondary,
.founder-label.teko {
  font-family: "Patrick Hand", "Segoe Print", cursive !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(1.5rem, 2.4vw, 2rem) !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  line-height: 1.15 !important;
  color: #906E49;
}


/* ---------- Blog cards (home) — real cards: white surface, soft shadow, lift on hover ---------- */
.blog .blog-box {
  background: #fff;
  border-radius: 20px;
  padding: 12px 12px 22px;
  box-shadow: 0 8px 26px rgba(37, 37, 37, 0.07);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  height: 100%;
}
.blog .blog-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(37, 37, 37, 0.14);
}
.blog .blog-box .blog-image { overflow: hidden; border-radius: 14px; }
.blog .blog-box .blog-image img { border-radius: 14px !important; transition: transform 0.7s cubic-bezier(.2,.7,.2,1); }
.blog .blog-box:hover .blog-image img { transform: scale(1.05); }
.blog .blog-info-below { padding: 18px 10px 0 !important; }
.blog .blog-info-below h4 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
}
.blog .blog-info-below .blog-meta-list { font-size: 0.85rem; }
.blog .blog-read-more {
  align-self: flex-start;
  margin-top: auto;
  padding: 9px 18px;
  border-radius: 999px;
  background: #f7f3ec;
  color: #906E49;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.25s ease, color 0.25s ease;
}
.blog .blog-read-more:hover { background: #906E49; color: #fff; }


/* ---------- Banner zoom (all inner-page banners) ----------
   Slow-but-lively "video" feel: the banner image gently zooms in and out.
   The photo is copied onto a ::before layer (background: inherit) so only the
   image scales — the rounded card and anything inside the banner stay put. */
section.breadcrumb,
section.article-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
section.breadcrumb::before,
section.article-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: bannerZoom 6s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes bannerZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
  section.breadcrumb::before,
  section.article-hero::before { animation: none; }
}


/* Keep the article's next-step links legible on the light callout. */
.article-next-steps a,
.article-next-steps a:visited {
  color: #765532;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.article-next-steps a:hover,
.article-next-steps a:focus-visible {
  color: #49331d;
  text-decoration-thickness: 2px;
}
.article-next-steps a:focus-visible {
  outline: 2px solid #765532;
  outline-offset: 3px;
  border-radius: 2px;
}