/*
  Theme Name: SteelCity - Construction Building Template
  Support: themedox@gmail.com
  Description: SteelCity - Construction Building Template
  Version: 1.0
*/

/* CSS Index
============================
01. Variable CSS
02. Common CSS
03. Button
04. Header
05. Search
06. OffCanvas
07. Mobile Menu
08. Banner
09. About
10. Services
11. Work
12. Counter
13. Employee
14. Get Updates
15. Working Process
16. Faq
17. Testimonial
18. Messages
19. News
20. Footer
21. Breadcrumb
22. Contact Form
23. Contact Map
24. Call to Action
============================
*/

/*=============================
	1. Google Fonts
===============================*/
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Rubik:wght@300;400;500;600;700;800&display=swap');

/*=============================
	01. Variable CSS start
===============================*/
:root {
	--body-font-family: 'Rubik', sans-serif;
	--heading-font-family: 'Rajdhani', sans-serif;
	--link-font-family: 'Rajdhani', sans-serif;
	--primary: #908c8a;
	--black: #171717;
	--white: #ffffff;
	--heading-font-color: #171717;
	--heading-font-weight: 700;
	--body-font-color: #797f8b;
	--paragraph-color: #767980;
	--section-background: #F3F3F3;
	--body-font-size: 16px;
	--body-font-weight: 400;
	--body-line-height: 1.875em;
	--section-title-line-height: 1.25em;
	--footer-font-colour: rgba(255, 255, 255, 0.8);
	--transision: all 0.3s ease-out 0s;
	--border-colour: #E3E3E3;
}


/*=============================
	02. Common CSS start
===============================*/
* {
	margin: 0;
	padding: 0;
	outline: none;
	box-sizing: border-box;
}

body {
	font-family: var(--body-font-family);
	font-weight: var(--body-font-weight);
	font-size: var(--body-font-size);
	line-height: var(--body-line-height);
	color: var(--black);
	overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--heading-font-family);
	color: var(--heading-font-color);
	font-weight: var(--heading-font-weight);
	margin: 0;
	padding: 0;
}


h2 {
	font-size: 48px;
}

h3 {
	font-size: 32px;
}

h4 {
	font-size: 24px;
}

h6 {
	font-size: 18px;
	line-height: 1.5em;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
	color: inherit;
}

a,
span,
small {
	display: inline-block;
}

a,
button {
	-webkit-transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-ms-transition: all 0.3s ease-out 0s;
	-o-transition: all 0.3s ease-out 0s;
	transition: all 0.3s ease-out 0s;
	text-decoration: none;
}

a:focus,
.btn:focus,
button:focus {
	text-decoration: none;
	outline: none;
	box-shadow: none;
}


ul,
ol {
	margin: 0;
	padding: 0;
}

p {
	font-size: var(--body-font-size);
	font-weight: var(--body-font-weight);
	line-height: var(--body-line-height);
	color: var(--paragraph-color);
	margin: 0;
	padding: 0;
}

.uppercase {
	text-transform: uppercase;
}

.capitalize {
	text-transform: capitalize;
}

*::-moz-selection {
	background: var(--primary);
	color: var(--white);
	text-shadow: none;
}

::-moz-selection {
	background: var(--primary);
	color: var(--white);
	text-shadow: none;
}

::selection {
	background: var(--primary);
	color: var(--white);
	text-shadow: none;
}

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

.section-title-one .sub-title {
	font-size: 18px;
	color:#dee2e6;
	font-family: var(--heading-font-family);
	font-weight: 700;
	margin-bottom: 10px;
	position: relative;
	margin-left: 30px;
	letter-spacing: 4px;
}

.section-title-one .sub-title.dark {
	color: var(--black);
}

.section-title-one .sub-title.white {
	color: var(--white);
}

.section-title-one .sub-title::before {
	position: absolute;
	top: 50%;
	right: -30px;
	transform: translateY(-50%);
	width: 20px;
	height: 1px;
	background-color: var(--primary);
	content: "";
}

.section-title-one .sub-title::after {
	position: absolute;
	top: 50%;
	left: -30px;
	transform: translateY(-50%);
	width: 20px;
	height: 1px;
	background-color: var(--primary);
	content: "";
}
.section-title-one .about-section-title ::before {
	position: absolute;
	top: 50%;
	right: -30px;
	transform: translateY(-50%);
	width: 20px;
	height: 1px;
	background-color: var(--primary);
	content: "";
}

.sub-title::after {
	position: absolute;
	top: 50%;
	left: -30px;
	transform: translateY(-50%);
	width: 20px;
	height: 1px;
	background-color: var(--primary);
	content: "";
}
.section-title-one .no-after {
	margin-left: 0;
}

.section-title-one .no-after::after {
	display: none;
}

.section-title-one .title {
	font-size: 48px;
	line-height: var(--section-title-line-height);
	text-transform: capitalize;
}

.section-title-one .title.white {
	color: var(--white);
}

.container {
	padding-left: 15px;
	padding-right: 15px;
}

.row {
	--bs-gutter-x: 30px;
}

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

.gutter-y-30 {
	--bs-gutter-y: 30px;
}
.about-section-title .uppercase{
	color:grey;
} 
/* Centered title with horizontal lines */
.centered-title {
    text-align: left; /* keep left for About section */
    margin-bottom: 22px;
}

.lined-title {
    position: relative;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 4px;
    color: var(--black);
    text-transform: uppercase;
    padding: 0 12px;
}

/* left line */
.lined-title::before,
.lined-title::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40px;
    height: 1px;
    background-color: #9aa0a6; /* subtle grey like image */
}

.lined-title::before {
    left: -50px;
}

.lined-title::after {
    right: -50px;
}
.about-us-area-one {
    padding: 120px 0;
    overflow: hidden;
}

.read-more-lined {
    margin-top: 22px;
}

.read-more-lined a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--black);
    transition: color 0.3s ease;
}

/* REMOVE lines completely */
.read-more-lined a::before,
.read-more-lined a::after {
    display: none !important;
}

/* hover */
.read-more-lined a:hover {
    color: var(--primary);
}

.read-more-lined a i {
    font-size: 11px;
}
.about-us-area-one .row {
    display: flex;
    align-items: center;
}

.about-us-area-one .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
}
.about-image .active-customer {
    position: absolute;
    bottom: 24px;
    right: 24px;
}

.read-more-lined a {
    background: #ffffff;
    padding: 14px 26px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--black);
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.read-more-lined a:hover {
    background: var(--primary);
    color: #fff;
}
.lined-title {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    color: var(--black);
    margin-bottom: 14px;
    position: relative;
}

.lined-title::after {
    content: "";
    width: 40px;
    height: 1px;
    background: #9aa0a6;
    margin-left: 14px;
}
@media (max-width: 991px) {
    .about-us-area-one .row {
        flex-direction: column;
    }

    .about-us-area-one .col-lg-6 {
        max-width: 100%;
        flex: 0 0 100%;
    }

    .about-image .image {
        height: 300px;
    }

    .about-info {
        padding-left: 0;
        margin-top: 40px;
    }
}
.about-image .image {
    height: 420px;
    overflow: hidden;
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.active-customer {
    position: absolute;
    bottom: 24px;
    right: 24px;
}

@media (max-width: 991px) {
    .about-image .image {
        height: 300px;
    }

    .about-info {
        padding: 40px 20px;
    }
}

/*=============================
	03. Button style start
===============================*/
.common-btn {
	color: var(--white);
	font-weight: 700;
	padding: 14px 30px;
	background-color: var(--primary);
	border-radius: 5px;
	margin-top: 40px;
	font-family: var(--link-font-family);
}

.common-btn:hover {
	background-color: var(--black);
}

.common-btn i {
	margin-left: 10px;
	font-size: 14px;
}

.border-btn {
	background-color: transparent;
	border: 1px solid var(--primary);
	color: var(--black);
}

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

.dark-btn {
	background-color: transparent;
	border: 1px solid var(--border-colour);
	color: var(--black);
}

.dark-btn:hover {
	background-color: var(--primary);
	color: var(--white);
	border-color: var(--primary);
}

/* =============================
  HEADER
============================= */

.header-area-one {
  background: var(--section-background);
  width: 100%;
  position: relative;
  z-index: 999;
}

/* HEADER HEIGHT CONTROL */
.header-area-one .navbar {
  min-height: 90px;
  padding: 0;
}

/* CONTAINER */
.header-area-one .container-fluid {
  padding: 0 40px;
  display: flex;
  align-items: center;
}

/* LOGO */
.header-area-one .navbar-brand {
  display: flex;
  align-items: center;
  padding: 0;
  margin-right: 28px;
  flex-shrink: 0;
}

.header-area-one .navbar-brand img {
  height: 60px;
  width: auto;
  object-fit: contain;
}

/* COLLAPSE */
.header-area-one .navbar-collapse {
  display: flex !important;
  align-items: center;
  flex: 1;
}

/* NAV MENU */
.header-area-one .navbar-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
}

/* NAV ITEMS */
.header-area-one .nav-item {
  position: relative;
  display: flex;
  align-items: center;
}

/* NAV LINKS */
.header-area-one .nav-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--black);
  padding: 0;
  display: flex;
  align-items: center;
  height: 90px; /* perfect vertical alignment */
  white-space: nowrap;
}

.header-area-one .nav-link i {
  font-size: 10px;
  margin-left: 6px;
}

.header-area-one .nav-link.active,
.header-area-one .nav-item:hover > .nav-link {
  color: var(--gold);
}
/* NAV MENU */

.header-area-one .navbar-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 0;
}


/* NAV ITEMS */

.header-area-one .nav-item {
  position: relative;
  display: flex;
  align-items: center;
}


/* NAV LINKS */

.header-area-one .nav-link {

  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.4px;

  color: var(--black);

  padding: 0 4px;

  display: flex;
  align-items: center;

  height: 90px;
  white-space: nowrap;

  position: relative;

  transition: all 0.3s ease;
}


/* DROPDOWN ICON */

.header-area-one .nav-link i {
  font-size: 10px;
  margin-left: 6px;
  transition: transform 0.3s ease;
}


/* HOVER EFFECT */

.header-area-one .nav-item:hover > .nav-link {
  color: var(--gold);
  transform: translateY(-2px);
}


/* ICON ROTATE */

.header-area-one .nav-item:hover .nav-link i {
  transform: rotate(180deg);
}


/* UNDERLINE ANIMATION */

.header-area-one .nav-link::after {

  content: "";
  position: absolute;

  bottom: 28px;
  left: 0;

  width: 0;
  height: 2px;

  background: linear-gradient(90deg, var(--gold), #ffcc55);

  transition: width 0.35s ease;

}


/* UNDERLINE ON HOVER */

.header-area-one .nav-item:hover .nav-link::after {
  width: 100%;
}


/* ACTIVE MENU */

.header-area-one .nav-link.active {

  color: var(--gold);
  font-weight: 700;

}

.header-area-one .nav-link.active::after {
  width: 100%;
}

/* DROPDOWN */
.header-area-one .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 220px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  padding: 12px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
  z-index: 999;
}

.header-area-one .sub-menu li a {
  display: block;
  padding: 8px 22px;
  font-size: 14px;
  color: var(--black);
}

.header-area-one .sub-menu li a:hover {
  color: var(--primary);
}

.header-area-one .nav-item:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* RIGHT SECTION */
.header-area-one .header-right-info {
  margin-left: auto;
  display: flex;
  align-items: center;
}

/* HELP / CALL */
.header-area-one .help-number {
  display: flex;
  align-items: center;
  gap: 14px;
}

.header-area-one .help-number .icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,102,0,0.12);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.3s ease;
}

.header-area-one .help-number:hover .icon {
  background: var(--primary);
  color: #fff;
}

.header-area-one .help-number .info p {
  margin: 0;
  font-size: 13px;
  line-height: 1.2;
}

.header-area-one .help-number .info h6 {
  margin: 0;
  font-weight: 700;
}

/* STICKY */
.sticky-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
  animation: fadeInDown 0.5s ease;
}

#header-fixed-height.active-height {
  height: 90px;
}

/* =============================
   MOBILE FIXES
============================= */
@media (max-width: 991px) {

  .header-area-one .container-fluid {
    padding: 0 20px;
  }

  .header-area-one .navbar {
    min-height: auto;
  }

  .header-area-one .navbar-brand img {
    height: 44px;
  }

}
/* =========================
   LOGO SIZE FIX (DESKTOP)
   ========================= */
.header-area-one .navbar .navbar-brand {
  padding: 0;
  margin-right: 20px;
  display: flex;
  align-items: center;
  max-width: 320px; /* adjust if needed */
}

.header-area-one .navbar .navbar-brand img {
  height: 70px;          /* ✅ change this to 60px / 65px if you want smaller */
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Reduce navbar height if it's too tall */
.header-area-one .navbar {
  padding-top: 12px;
  padding-bottom: 12px;
}


/* =========================
   LOGO SIZE FIX (MOBILE)
   ========================= */
.header-area-one .mobile-menu-area .mobile-topbar .logo img,
.header-area-one .mobile-menu-area .mobile-menu-main .logo img {
  height: 44px;          /* ✅ mobile logo size */
  width: auto;
  object-fit: contain;
  display: block;
}

/* optional: keep mobile topbar compact */
.header-area-one .mobile-menu-area .mobile-topbar {
  padding: 12px 0;
}

/* Large screens */
@media (min-width: 1200px){
  .header-area-one .navbar-brand{ max-width: 260px; }
}

/* Laptops */
@media (max-width: 1199px){
  .header-area-one .container-fluid{ padding: 0 24px; }
  .header-area-one .navbar-brand{ max-width: 220px; }
  .header-area-one .navbar-nav{ gap: 12px; }
}

/* Tablets */
@media (max-width: 991px){
  .header-area-one .navbar-brand{ max-width: 180px; }
  .header-area-one .navbar-nav .nav-link{ line-height: 60px; }
}
.header-area-one .navbar-brand img{
  width: 100% !important;
  height: auto !important;
  max-width: 200px !important;
}

/* Mobile submenu hidden by default */
.mobile-submenu {
  display: none;
  padding-left: 0;
}

.has-submenu > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* When active */
.has-submenu.active .mobile-submenu {
  display: block;
}

.has-submenu.active i {
  transform: rotate(180deg);
}

.has-submenu i {
  transition: 0.25s ease;
}
.header-area-one .container-fluid {
  padding: 0 40px;
  display: flex;
  align-items: center;
}
.header-area-one .navbar-brand {
  flex: 0 0 auto;
  margin-right: 0;
}
.header-area-one .navbar-collapse {
  display: flex !important;
  justify-content: center;   /* CENTER MENU */
  flex: 1;                   /* TAKE AVAILABLE SPACE */
}
.header-area-one .navbar-nav {
  margin: 0 auto;            /* TRUE CENTER */
}
.header-area-one .header-right-info {
  flex: 0 0 auto;
  margin-left: auto;         /* PUSH TO RIGHT */
}
.header-area-one .nav-link {
  height: 90px;
  display: flex;
  align-items: center;
}
.header-area-one .navbar {
  position: relative;
}

.header-area-one .navbar-collapse {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/*=============================
	06. offcanvas menu info start
===============================*/

.offcanvas-menu-info {
	width: 340px;
	padding: 30px;
	background-color: var(--white);
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	z-index: 99;
	overflow-y: auto;
	transform: translateX(100%);
	transition: var(--transision);
}

.offcanvas-menu-info .menu-close {
	font-size: 16px;
	width: 30px;
	height: 30px;
	border: 2px solid var(--primary);
	text-align: center;
	line-height: 27px;
	color: var(--primary);
	cursor: pointer;
	position: absolute;
	top: 20px;
	left: 20px;
	transition: var(--transision);
}

.offcanvas-menu-info .menu-close:hover {
	background-color: var(--primary);
	color: var(--white);
}

.offcanvas-menu-info .logo {
	margin-top: 40px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--primary);
	margin-bottom: 20px;
}

.offcanvas-menu-info .side-info .contact-list {
	margin-bottom: 24px;
}

.offcanvas-menu-info .side-info .contact-list h4 {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 5px;
}

.offcanvas-menu-info .side-info .contact-list a {
	color: var(--body-font-color);
}

.offcanvas-menu-info .side-info .contact-list a:hover {
	color: var(--primary);
}

.offcanvas-menu-info .social {
	margin-top: 10px;
}

.offcanvas-menu-info .social li {
	display: inline-block;
	margin-right: 10px;
}

.offcanvas-menu-info .social a {
	width: 30px;
	height: 30px;
	color: var(--white);
	text-align: center;
	line-height: 30px;
	border-radius: 5px;
	background-color: var(--primary);
}

.offcanvas-menu-info .social a:hover {
	background-color: var(--black);
	color: var(--white);
}

.offcanvas-menu-overlay {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: rgba(23, 23, 23, 0.7);
	z-index: 99;
	opacity: 0;
	visibility: hidden;
	transition: var(--transision);
}

.offcanvas-menu-info.active {
	transform: translateX(0);
}

.offcanvas-menu-overlay.active {
	opacity: 1;
	visibility: visible;
}

/*=============================
	07. Mobile Menu start
===============================*/

.mobile-menu-area {
	z-index: 99;
	background-color: var(--white);
	width: 100%;
	transition: all linear 0.2s;
}

.mobile-menu-area .mobile-topbar {
	width: 100%;
	background-color: var(--white);
	box-shadow: 0px 2px 50px rgba(0, 0, 0, 0.1);
	padding: 10px 0;
}

.mobile-menu-area .mobile-topbar .bars i {
	width: 40px;
	height: 40px;
	background-color: transparent;
	border: 2px solid var(--primary);
	color: var(--primary);
	font-size: 20px;
	text-align: center;
	line-height: 35px;
	border-radius: 3px;
	cursor: pointer;
	transition: var(--transision);
}

.mobile-menu-area .mobile-topbar .bars i:hover {
	background-color: var(--black);
	border-color: var(--black);
	color: var(--white);
}

.mobile-menu-area .mobile-topbar .icon i {
	width: 45px;
	height: 45px;
	background-color: var(--white);
	border-radius: 50%;
	text-align: center;
	line-height: 45px;
	font-size: 16px;
	cursor: pointer;
	transition: all linear 0.2s;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.mobile-menu-area .mobile-topbar .icon i:hover {
	background-color: var(--primary);
	color: var(--white);
	border-color: var(--primary);
}

.mobile-menu-area .mobile-menu-overlay {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
}

.mobile-menu-area .mobile-menu-main {
	width: 320px;
	height: 100%;
	background-color: var(--white);
	position: fixed;
	top: 0;
	right: -320px;
	z-index: 99;
	overflow-y: scroll;
	transition-duration: 0.3s;
}

.mobile-menu-area .mobile-menu-main .logo {
	padding: 20px;
}

.mobile-menu-area .mobile-menu-main .close-mobile-menu {
	position: absolute;
	top: 30px;
	right: 10px;
}

.mobile-menu-area .mobile-menu-main .close-mobile-menu i {
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	color: var(--black);
	font-size: 17px;
	cursor: pointer;
	transition: all linear 0.2s;
	transition: var(--transision);
}

.mobile-menu-area .mobile-menu-main .close-mobile-menu i:hover {
	color: var(--primary);
}

.mobile-menu-area .mobile-menu-main .menu-body .menu-list {
	padding-top: 10px;
}

.mobile-menu-area .mobile-menu-main .menu-body .menu-list ul li a {
	font-weight: 500;
	color: var(--black);
	border-top: 1px solid var(--border-colour);
	width: 100%;
	padding: 0px 20px;
	line-height: 40px;
	padding-right: 10px;
	transition: all linear 0.2s;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.mobile-menu-area .mobile-menu-main .menu-body .menu-list ul li:last-child a {
	border-bottom: 1px solid var(--border-colour);
}

.mobile-menu-area .mobile-menu-main .menu-body .menu-list ul li a:hover {
	color: var(--primary);
}

.mobile-menu-area .mobile-menu-main .menu-body .menu-list ul li a i {
	width: 32px;
	height: 32px;
	background-color: var(--white);
	text-align: center;
	line-height: 32px;
	font-size: 12px;
	border-radius: 3px;
	background-color: var(--section-background);
	transition: all linear 0.2s;
}

.mobile-menu-area .mobile-menu-main .menu-body .menu-list ul li a:hover i {
	background-color: var(--primary);
	color: var(--white);
}

.mobile-menu-area .mobile-menu-main .menu-body .menu-list ul li ul {
	padding-left: 0;
	display: none;
}

.mobile-menu-area .mobile-menu-main .menu-body .menu-list ul li ul a {
	padding: 0px 20px;
	padding-left: 40px;
}

.mobile-menu-area .mobile-menu-main .menu-body .menu-list ul li ul li:last-child a {
	border-bottom: 0;
}

.mobile-menu-area .mobile-menu-main .menu-body .social-icon ul li {
	display: inline-block;
}

.mobile-menu-area .mobile-menu-main .social-icon {
	padding: 20px;
	text-align: center;
}

.mobile-menu-area .mobile-menu-main .social-icon ul li {
	display: inline-block;
	margin: 0 4px;
}

.mobile-menu-area .mobile-menu-main .social-icon ul li a {
	width: 36px;
	height: 36px;
	color: var(--black);
	text-align: center;
	line-height: 36px;
	border-radius: 3px;
	border: 1px solid var(--border-colour);
}

.mobile-menu-area .mobile-menu-main .social-icon ul li a:hover {
	background-color: var(--primary);
	color: var(--white);
	border-color: var(--primary);
}

.mobile-menu-overlay {
	transition-duration: 0.3s;
	visibility: hidden;
	opacity: 0;
}

.mobile-menu-overlay.active {
	visibility: visible;
	opacity: 1;
}

.mobile-menu-main.active {
	right: 0 !important;
}

.mobile-menu-area .mobile-menu-search {
	padding: 0 20px 16px;
}

.mobile-menu-area .mobile-menu-search input {
	width: 100%;
	height: 45px;
	border: 1px solid var(--border-colour);
	border-radius: 5px;
	padding: 0 20px;
	transition: var(--transision);
	background-color: var(--section-background);
}

.mobile-menu-area .mobile-menu-search input:focus {
	border-color: var(--black);
}

.mobile-menu-area .mobile-menu-search .input-groups button {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	background-color: transparent;
	border: 0;
}

.mobile-menu-area .menu-action-btn {
	padding: 20px;
}

.mobile-menu-area .menu-action-btn a {
	font-weight: 700;
	font-family: var(--link-font-family);
	color: var(--white);
	background-color: var(--primary);
	padding: 12px 30px;
	border-radius: 5px;
	width: 100%;
	text-align: center;
}

.mobile-menu-area .menu-action-btn a:hover {
	background-color: var(--black);
}

.mobile-menu-area .menu-action-btn a i {
	font-size: 14px;
	margin-left: 8px;
}

/*=============================
	08. Banner part
===============================*/

/* banner part one */
.banner-area-one {
	min-height: calc(100vh - 100px);
	background-repeat: no-repeat;
	background-position: top left;
	background-size: contain;
	background-color: var(--white);
	position: relative;
}

.banner-area-one .banner-shape {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	object-fit: cover;
	width: 54%;
}

.banner-area-one .banner-shape .primary-colour {
	fill: #676777;
}

.banner-area-one .banner-shape .black-colour {
	fill: var(--black);
}

.banner-area-one .banner-title {
	font-size: 68px;
	font-weight: 700;
	margin-bottom: 10px;
	line-height: 115%;
}

.banner-area-one .sub-title {
	font-size: 18px;
	color: var(--primary);
	font-family: var(--heading-font-family);
	font-weight: 700;
	margin-bottom: 10px;
	position: relative;
	letter-spacing: 4px;
}

.banner-area-one .banner-info {
	max-width: 550px;
	padding-top: 100px;
	padding-bottom: 100px;
}

.banner-area-one .banner-info p {
	margin-top: 20px;
	margin-right: 30px;
}

.banner-area-one .common-btn {
	margin-top: 34px;
}

.banner-area-one .banner-image {
	position: relative;
	width: 800px;
	height: calc(100vh - 100px);
}

.banner-area-one .banner-image img {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 40px;
}

/* banner part two */
.banner-area-two {
	min-height: 100vh;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.banner-area-two .overlay {
	width: 100%;
	background-color: rgba(23, 23, 23, 0.7);
	padding-top: 318px;
	padding-bottom: 155px;
	min-height: 100vh;
	position: relative;
}

.banner-area-two .overlay::after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 60%;
	background: linear-gradient(180deg, rgba(255, 102, 0, 0) 0%, #FF6600 248.68%);
	content: "";
}

.banner-area-two .banner-info {
	position: relative;
	z-index: 9;
}

.banner-area-two .banner-title {
	font-size: 90px;
	font-weight: 700;
	line-height: 115%;
	color: var(--white);
}

.banner-area-two .sub-title {
	font-size: 18px;
	color: var(--primary);
	font-family: var(--heading-font-family);
	font-weight: 700;
	margin-bottom: 10px;
	position: relative;
	letter-spacing: 4px;
}

.banner-area-two .banner-info p {
	color: var(--white);
	font-size: 18px;
}

.banner-area-two .banner-info .common-btn {
	margin-top: 59px;
}


/*=============================
	09. About us part
===============================*/

/* about area one */
.about-us-area-one {
	padding-top: 120px;
	background-color: var(--section-background);
	padding-bottom: 100px;
}

.about-us-area-one.without-bg {
	background-color: transparent;
}

.about-us-area-one .section-title-one {
	max-width: 598px;
	margin-bottom: 20px;
}

.about-us-area-one .image {
	position: relative;
}

.about-us-area-one .image img {
	clip-path: polygon(0 0, calc(100% - 120px) 0, 100% 100%, 120px 100%);
	margin-left: -150px;
}

.about-us-area-one .active-customer .title{
	
	background-color: var(--white);
	box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05);
	border-radius: 5px;
	padding: 13px 22px;
	position: absolute;
	right: -35px;
	bottom: 32px;
	color:#1a1a1a;
}

.about-us-area-one.without-bg .active-customer {
	border: 1px solid var(--border-colour);
	width: 305px;
}

.about-us-area-one .active-customer .icon {
	margin-right: 14px;
}

.about-us-area-one .active-customer .number {
	font-size: 48px;
}

.about-us-area-one .about-info {
	max-width: 648px;
	margin-top: 27px;
}

.about-us-area-one .about-list {
	margin-top: 60px;
}

.about-us-area-one .about-list-items {
	margin-bottom: 30px;
}

.about-us-area-one .about-list-items:last-child {
	margin-bottom: 0px;
	margin-left: 45px;
}

.about-us-area-one .about-list .about-list-items .icon {
	flex-basis: 30px;
}

.about-us-area-one .about-list .about-list-items .icon i {
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	border-radius: 50%;
	color: var(--white);
	background-color: var(--primary);
	margin-right: 18px;
}

.about-us-area-one .about-list .about-list-items .text .title {
	font-size: 24px;
}

.about-us-area-one .about-list .about-list-items .text p {
	margin-top: 10px;
}

/* about area two */
.about-area-two {
	padding-top: 60px;
}

.about-area-two .section-title-one {
	margin-bottom: 20px;
}

.about-area-two .about-image-one {
	position: relative;
	width: 862px;
	margin-left: -307px;
}

.about-area-two .about-image-two {
	max-width: 428px;
	margin-right: 30px;
	margin-left: auto;
	margin-top: -290px;
	position: relative;
}

.about-area-two .about-image-two .experiance-outside {
	width: 170px;
	height: 170px;
	background-color: var(--white);
	border-radius: 50%;
	position: absolute;
	top: -82px;
	left: -60px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.about-area-two .about-image-two .experiance-box {
	width: 162px;
	height: 162px;
	background-color: var(--primary);
	border-radius: 50%;
	padding: 30px;
	text-align: center;
	position: relative;
}

.about-area-two .about-image-two .experiance-box::after {
	width: 140px;
	height: 140px;
	content: "";
	border-radius: 50%;
	border: 2px dashed var(--white);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


.about-area-two .about-image-two .experiance-box .year {
	font-size: 48px;
	color: var(--white);
}

.about-area-two .about-image-two .experiance-box .experiance {
	font-size: 18px;
	color: var(--white);
	margin-top: -8px;
	line-height: 25px;
}

.about-area-two .about-text {
	margin-top: 100px;
}

.about-area-two .about-details .list-info {
	margin-top: 30px;
}

.about-area-two .about-details .list-info ul li {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.about-area-two .about-details .list-info ul li:last-child {
	margin-bottom: 0;
}

.about-area-two .about-text .list-info ul li i {
	margin-right: 10px;
	color: var(--primary);
	font-size: 24px;
}

.about-area-two .about-text .list-info ul li h6 {
	font-size: 18px;
}
.common-btn uppercase wow fadeInLeft{
	margin-left: 10px;
}

/* ===============================
   STEP-BY-STEP FLOW ANIMATION
================================ */

.flow-item {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.flow-item.active {
  opacity: 1;
  transform: translateY(0);
}

/* Optional spacing refinement */
.service-item-one {
  padding: 30px 0;
  border-bottom: 1px solid #eee;
}

.service-item-one:last-child {
  border-bottom: none;
}

/* Responsive text alignment */
@media (max-width: 991px) {
  .service-item-one .text-lg-end {
    text-align: left !important;
    margin-top: 15px;
  }
}


/* servcies list part*/
.all-services-area {
	padding: 120px 0 60px 0;
}

.all-services-item {
	border-radius: 5px;
	margin-bottom: 60px;
}

.all-services-item .image {
	border-radius: 5px;
	width: 88%;
	margin: 0 auto;
	margin-bottom: -100px;
	position: relative;
	z-index: 9;
}

.all-services-item .image img {
	border-radius: 5px;
}

.all-services-item .text {
	padding: 30px;
	background-color: var(--white);
	box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.07);
	padding-top: 130px;
	border: 1px solid transparent;
	border-radius: 5px;
	transition: var(--transision);
}

.all-services-item .image .icon {
	background-color: var(--black);
	width: 60px;
	height: 60px;
	border-radius: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: -20px;
	right: 30px;
	transition: var(--transision);
}

.all-services-item .text .title {
	font-size: 24px;
	margin-bottom: 20px;
}

.all-services-item .text .title:hover {
	color: var(--primary);
}

.all-services-item .text .read-more {
	font-weight: 700;
	font-family: var(--link-font-family);
	color: var(--black);
	margin-top: 40px;
}

.all-services-item .text .read-more i {
	margin-left: 10px;
}

.all-services-item .text .read-more:hover {
	color: var(--primary);
}

.all-services-item:hover .text {
	border-color: var(--primary);
	box-shadow: none;
}

.all-services-item:hover .image .icon {
	background-color: var(--primary);
}


/* service details part */

/*Services*/
/* ===== SERVICES STRIP (Black & White) ===== */
.services-page {
        background: #ffffff;
        font-family: 'Arial', sans-serif;
    }

    /* Service Section Base */
    .service-section {
        position: relative;
        min-height: 600px;
        display: flex;
        align-items: center;
        overflow: hidden;
        margin-bottom: -1px;
    }

    /* Alternating Backgrounds */
    .service-section:nth-child(odd) {
        background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    }

    .service-section:nth-child(even) {
        background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    }

    .service-container {
        max-width: 1400px;
        margin: 0 auto;
        padding: 80px 40px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
        position: relative;
        z-index: 2;
    }

    /* Image Side with Diagonal Cut and Golden Border */
    .service-image-wrapper {
        position: relative;
        opacity: 0;
        transform: translateX(-50px);
        transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .service-section.visible .service-image-wrapper {
        opacity: 1;
        transform: translateX(0);
    }

    .diagonal-image-container {
        position: relative;
        width: 100%;
        height: 500px;
        clip-path: polygon(0 0, 85% 0, 100% 100%, 0 100%);
        overflow: hidden;
    }

    .service-section:nth-child(even) .diagonal-image-container {
        clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
    }

    /* Golden Border Effect */
    .diagonal-image-container::before {
        content: '';
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        background: linear-gradient(135deg, #d4af37, #f4e5b8, #d4af37, #c9a961);
        background-size: 200% 200%;
        clip-path: inherit;
        z-index: -1;
        animation: borderGlow 4s ease infinite;
    }

    @keyframes borderGlow {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
    }

    .service-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .service-image-wrapper:hover .service-image {
        transform: scale(1.05);
    }

    /* Content Side */
    .service-content {
        padding: 40px;
        opacity: 0;
        transform: translateX(50px);
        transition: all 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.2s;
    }

    .service-section.visible .service-content {
        opacity: 1;
        transform: translateX(0);
    }

    .service-label {
        font-size: 11px;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: #d4af37;
        font-weight: 600;
        margin-bottom: 15px;
        display: inline-block;
    }

    .service-title {
        font-size: clamp(1.5rem, 3vw, 2.2rem);
        font-weight: 700;
        margin-bottom: 20px;
        line-height: 1.3;
    }

    .service-section:nth-child(odd) .service-title {
        color: #ffffff;
    }

    .service-section:nth-child(even) .service-title {
        color: #1a1a1a;
    }

    .service-divider {
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, #d4af37, #f4e5b8);
        margin-bottom: 25px;
    }

    .service-description {
        font-size: clamp(0.9rem, 1.1vw, 1rem);
        line-height: 1.8;
        margin-bottom: 18px;
        text-align: justify;
    }

    .service-section:nth-child(odd) .service-description {
        color: #b8b8b8;
    }

    .service-section:nth-child(even) .service-description {
        color: #555;
    }

    /* Reverse Layout for Even Sections */
    .service-section:nth-child(even) .service-container {
        direction: rtl;
    }

    .service-section:nth-child(even) .service-content {
        direction: ltr;
    }

    /* Decorative Elements */
    .diagonal-accent {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        pointer-events: none;
        z-index: 1;
    }

    .diagonal-accent::before {
        content: '';
        position: absolute;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        opacity: 0.03;
    }

    .service-section:nth-child(odd) .diagonal-accent::before {
        background: #d4af37;
        top: -200px;
        right: -200px;
    }

    .service-section:nth-child(even) .diagonal-accent::before {
        background: #1a1a1a;
        bottom: -200px;
        left: -200px;
    }

    /* Responsive Design */
    @media (max-width: 1024px) {
        .service-container {
            grid-template-columns: 1fr;
            gap: 40px;
        }

        .service-section:nth-child(even) .service-container {
            direction: ltr;
        }

        .diagonal-image-container {
            height: 400px;
            clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
        }

        .service-section:nth-child(even) .diagonal-image-container {
            clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
        }
    }

    @media (max-width: 768px) {
        .service-container {
            padding: 60px 30px;
            gap: 30px;
        }

        .service-content {
            padding: 20px;
        }

        .diagonal-image-container {
            height: 350px;
        }

        .service-description {
            text-align: left;
        }
    }

    @media (max-width: 480px) {
        .service-container {
            padding: 40px 20px;
        }

        .diagonal-image-container {
            height: 300px;
        }
    }

/*=============================
	11. Recent work part
===============================*/
/* work area one */
.recent-work-area-one .recent-work-one-bg {
	position: relative;
	padding-top: 120px;
}

.recent-work-area-one .recent-work-one-bg::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 60%;
	background-color: var(--black);
	content: "";
	z-index: -1;
}

.recent-work-area-one .container-fluid {
	padding: 0 40px;
  margin-bottom: 20px;
}

.recent-work-area-one .project-item-one .image {
	overflow: hidden;
	border-radius: 5px;
}

.recent-work-area-one .project-item-one .info {
	background-color: rgba(23, 23, 23, 0.9);
	padding: 30px;
	transition: var(--transision);
	transform: translateY(100%);
}

.recent-work-area-one .project-item-one .info .text .title {
	color: var(--white);
	font-size: 28px;
}

.recent-work-area-one .project-item-one .info .text .title:hover a {
	color: var(--primary);
}

.recent-work-area-one .project-item-one .info .text p {
	margin-top: 5px;
	color: var(--white);
}

.recent-work-area-one .project-item-one .info .plus a {
	width: 50px;
	height: 50px;
	color: var(--white);
	font-size: 20px;
	text-align: center;
	line-height: 50px;
	border-radius: 5px;
	background-color: var(--primary);
	transition: var(--transision);
}

.recent-work-area-one .project-item-one .info .plus a i {
	font-size: 18px;
}

.recent-work-area-one .project-item-one .info .plus a:hover {
	background-color: var(--white);
	color: var(--black);
}

.recent-work-area-one .project-item-one:hover .info {
	transform: translateY(0);
}

.recent-work-slider-one .project-item-one {
	margin: 0 15px;
}

.recent-work-slider-one .icon {
	width: 60px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	border-radius: 50%;
	color: var(--white);
	background-color: #adb5bd;
	cursor: pointer;
	transition: var(--transision);
	position: absolute;
	top: -120px;
	z-index: 9;
}

.recent-work-slider-one .icon.right {
	right: 284px;
}

.recent-work-slider-one .icon.left {
	left: calc(100% - 428px);
}

.recent-work-slider-one .icon:hover {
	background-color: var(--primary);
	color: var(--white);
}

/* work area two */
.recent-work-area-two {
	padding-top: 120px;
}

/* ===============================
   PROJECT PAGE BACKGROUND
================================ */
.projects-page-bg {
  position: relative;
  background-image: url("/assets/img/services/bg1-process\ -\ Copy\ -\ Copy.png"); /* change image */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 120px 0;
}

/* Dark overlay for readability */
.projects-page-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  
  z-index: 1;
}

/* Keep content above overlay */
.projects-page-bg .project-area {
  position: relative;
  z-index: 2;
}

.project-tabs {
  gap: 14px;
  margin-bottom: 50px;
  margin-top: 50px;
}

.project-tabs .nav-link {
  padding: 12px 26px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  color: #171717;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: all 0.3s ease;
}

.project-tabs .nav-link:hover {
  transform: translateY(-2px);
}

.project-tabs .nav-link.active {
  background: linear-gradient(135deg, #000000, #d0c1b4);
  color: #ffffff;
  border: none;
  box-shadow: 0 12px 30px rgba(255,102,0,0.35);
}

/* ===============================
   PROJECT GRID (Sophisticated)
================================ */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin-bottom: 50px;
}

/* Card */
.projects-grid .project-image {
  position: relative;
  height: 380px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
  background: #000;
  transition: all 0.35s ease;
}

/* Image */
.projects-grid .project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* Hover zoom */
.projects-grid .project-image:hover img {
  transform: scale(1.08);
}

/* Overlay gradient */
.projects-grid .project-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.75) 10%,
    rgba(0,0,0,0.15) 55%,
    rgba(0,0,0,0.05) 100%
  );
  z-index: 1;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.projects-grid .project-image:hover::before {
  opacity: 1;
}

/* Project Info */
.projects-grid .project-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 28px 26px;
  z-index: 2;
  transform: translateY(40%);
  transition: all 0.4s ease;
  text-decoration: none;
}

.projects-grid .project-image:hover .project-info {
  transform: translateY(0);
}

/* Title */
.projects-grid .project-info .title {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

/* Subtitle */
.projects-grid .project-info p {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  margin: 0;
}

/* Lift on hover */
.projects-grid .project-image:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 60px rgba(0,0,0,0.22);
}

/* ===============================
   RESPONSIVE
================================ */
@media (max-width: 1199px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
  .projects-grid .project-image {
    height: 300px;
  }
}
/* ===========================
   PROJECT HUB SECTION
=========================== */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* SECTION */
.proj-hub {
  background: url("/assets/img/services/proj-bg.png") center/cover no-repeat;
  padding: 80px 5%;
  color: #fff;
}

/* TABS */
.proj-tabs,
.proj-subtabs {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
  justify-content: center;
}

.proj-tab,
.proj-subtab {
  background: transparent;
  border: 1px solid #c9a14a;
  color: #c9a14a;
  padding: 10px 22px;
  cursor: pointer;
  transition: 0.3s;
}

.proj-tab.active,
.proj-subtab.active,
.proj-tab:hover,
.proj-subtab:hover {
  background: #c9a14a;
  color: #000;
}

/* PANELS */
.proj-panel,
.proj-subpanel {
  display: none;
}

.proj-panel.active,
.proj-subpanel.active {
  display: block;
}

/* GRID */
.proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  padding-bottom: 30px;
}

/* CARD */
.proj-card {
  position: relative;
  height: 420px;
  overflow: hidden;
  border-radius: 12px;
  display: block;
}

.proj-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* OVERLAY */
.proj-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.75),
    rgba(0,0,0,0.25),
    transparent
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
}

.proj-overlay h3 {
  color: #fff;
  font-size: 18px;
  margin-bottom: 5px;
}

.proj-overlay p {
  color: #c9a14a;
  font-size: 14px;
}

/* NAME LIST */
.name-list {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.name-list li {
  position: relative;
  padding: 20px;
  background: rgba(0, 0, 0, 0.822);
  border-radius: 8px;
  font-weight: 600;
}

.name-list li p {
  font-size: 13px;
  color: #ccc;
  margin-top: 6px;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .name-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .name-list {
    grid-template-columns: 1fr;
  }

  .proj-card {
    height: 360px;
  }
}
/* ============================
   PROJECT NAME POP EFFECT
   ============================ */

.name-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.name-list li {
  position: relative;
  background: #111;
  color: #fff;
  padding: 14px 18px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
  overflow: hidden;
}

/* Hover / Active enlarge */
.name-list li:hover,
.name-list li.name-active {
  transform: scale(1.06);
  background: #000;
  box-shadow: 0 20px 40px rgba(197,160,89,.35);
  z-index: 2;
}

/* Gold accent glow */
.name-list li::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 10px;
  border: 1px solid rgba(197,160,89,.6);
  opacity: 0;
  transition: opacity .25s ease;
}

.name-list li:hover::after,
.name-list li.name-active::after {
  opacity: 1;
}

/* Mobile – single column */
@media (max-width: 768px) {
  .name-list {
    grid-template-columns: 1fr;
  }
}
/* ===== POP EFFECT FOR GROUP + TURNKEY LISTS ===== */
.proj-popwrap{
  background:#0b0b0b;                 /* black base */
  border:1px solid rgba(197,160,89,.35); /* gold border */
  border-radius:18px;
  padding:22px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  transform-origin: top center;
}

/* desktop hover pop */
@media (hover:hover) and (pointer:fine){
  .proj-popwrap:hover{
    transform:scale(1.03);
    border-color: rgba(197,160,89,.75);
    box-shadow:0 26px 70px rgba(0,0,0,.45);
  }
}

/* click/tap pop (mobile + desktop) */
.proj-popwrap.is-popped{
  transform:scale(1.03);
  border-color: rgba(197,160,89,.85);
  box-shadow:0 26px 70px rgba(0,0,0,.5);
}

/* ===== NAME LIST UPGRADE (GRID + CLEAN) ===== */
.name-list.proj-poplist{
  list-style:none;
  margin:0;
  padding:0;

  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px 16px;
}

.name-list.proj-poplist li{
  cursor:pointer;
  padding:12px 14px;
  border-radius:12px;

  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);

  color:#fff;
  font-weight:600;
  letter-spacing:.2px;

  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}

.name-list.proj-poplist li:hover{
  transform:translateY(-2px);
  border-color: rgba(197,160,89,.65);
  background:rgba(197,160,89,.08);
}

/* responsive */
@media(max-width: 992px){
  .name-list.proj-poplist{
    grid-template-columns: 1fr;
  }
  .proj-popwrap{
    padding:16px;
  }
}

/* ===============================
   PROJECT DETAILS – SAFE MODE
   =============================== */

.pp-project-details {
  padding: 80px 6%;
  /* IMPORTANT: no background color */
}
.back-to-projects2 a{
  padding: 80px 6%;
  padding-top: 60px;
  padding-bottom:0px;
  /* IMPORTANT: no background color */
   display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 20px;
  font-weight: 500;
  color: #b38b2d; /* adjust to your brand color */
  text-decoration: none;
  transition: all 0.3s ease;

}
/* Layout */
.pp-project-header {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px;
  align-items: start;
}

/* Image */
.pp-project-image img {
  width: 100%;
  height: auto;
  border: 6px solid #111; /* only image border */
  object-fit: cover;
}

/* Title */
.pp-project-title {
  font-size: 34px;
  font-weight: 800;
  margin-bottom: 25px;
}

.pp-project-title span {
  font-size: 18px;
  font-weight: 500;
  opacity: 0.7;
}

/* Info Card */
.pp-info-card {
  padding: 28px;
  border-left: 4px solid #b08d57; /* gold accent only */
}

.pp-info-card h3 {
  font-size: 18px;
  margin-bottom: 18px;
}

.pp-info-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pp-info-card li {
  font-size: 15px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0,0,0,0.15);
}

/* Tabs */
.pp-project-tabs {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin: 60px 0 30px;
  border-bottom: 1px solid rgba(0,0,0,0.15);
}

.pp-tab {
  background: none;
  border: none;
  padding: 16px 0;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  opacity: 0.7;
  position: relative;
}

.pp-tab.active {
  opacity: 1;
}

.pp-tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #b08d57; /* gold underline */
}

/* Content */
.pp-tab-content {
  max-width: 900px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.8;
  opacity: 0.85;
}
.proj-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 PER ROW */
  gap: 30px;
}

/* ===============================
   RESPONSIVE
================================ */

@media (max-width: 992px) {
  .pp-project-header {
    grid-template-columns: 1fr;
  }

  .pp-project-tabs {
    gap: 30px;
    flex-wrap: wrap;
  }

  .pp-project-title {
    font-size: 28px;
  }
}

@media (max-width: 576px) {
  .pp-project-details {
    padding: 60px 20px;
  }

  .pp-project-tabs {
    gap: 20px;
  }

  .pp-tab {
    font-size: 15px;
  }
}
@media (max-width: 992px) {
  .proj-grid {
    grid-template-columns: repeat(2, 1fr); /* Tablet */
  }
}

@media (max-width: 576px) {
  .proj-grid {
    grid-template-columns: 1fr; /* Mobile */
  }
}
.back-to-projects {
  margin: 20px 0;
}

.back-to-projects a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 20px;
  font-weight: 500;
  color: #b38b2d; /* adjust to your brand color */
  text-decoration: none;
  transition: all 0.3s ease;
}

.back-to-projects a:hover {
  color: #000;
  transform: translateX(-4px);
}

/*=============================
	12. counter part start
===============================*/

/* counter area one */
.counter-area-one {
	padding-top: 120px;
}

.counter-one-item {
	background-color: var(--white);
	box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05);
	padding: 22px 44px;
	border-radius: 5px;
	border-left: 2px solid var(--primary);
}

.without-shadow-counter {
	box-shadow: none;
	border-left: 1px solid rgba(23, 23, 23, 0.4);
	border-radius: 0;
}

.counter-coloumn:first-child .without-shadow-counter {
	border-left: 0;
}

.counter-one-item .icon {
	margin-right: 20px;
}

.counter-one-item .info .counter-number {
	font-size: 48px;
	line-height: 1;
}

.counter-one-item .info p {
	margin: 0 0;
}

/* counter area two */
.counter-area-two {
	margin-top: -78px;
}

.counter-two-item {
	background-color: var(--primary);
	padding: 33px 20px 33px 35px;
	border-radius: 5px;
	border-left: 2px solid var(--primary);
}

.counter-two-item .info {
	margin-right: 50px;
}

.counter-two-item .icon {
	width: 80px;
	height: 80px;
	background-color: var(--white);
	display: flex;
	margin-left: auto;
	justify-content: center;
	align-items: center;
	border-radius: 5px;
	padding: 10px;
	position: relative;
	z-index: 9;
}

.counter-two-item .icon::before {
	width: 90px;
	height: 90px;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 5px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	content: "";
	z-index: -1;
}

.counter-two-item .info .counter-number {
	font-size: 48px;
	color: var(--white);
}

.counter-two-item .info p {
	color: var(--white);
}

/* =========================
   PROJECTS SECTION
========================= */

.projects-section {
  padding: 120px 0;
  background: #fafafa;
}

.section-subtitle {
  display: inline-block;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 10px;
}

.section-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.3;
  color: #111;
}

/* =========================
   PROJECT CARD
========================= */

.project-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.4s ease;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 60px rgba(0,0,0,0.12);
}

/* Image */
.project-img {
  position: relative;
  height: 260px;
  overflow: hidden;
}

.project-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.project-card:hover img {
  transform: scale(1.08);
}

/* Overlay */
.project-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.65),
    rgba(0,0,0,0.15)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.4s ease;
}

.project-card:hover .project-overlay {
  opacity: 1;
}

/* Button */
.project-btn {
  padding: 12px 26px;
  background: var(--primary);
  color: #fff;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
}

.project-btn:hover {
  background: #000;
  color: #fff;
}

/* Content */
.project-content {
  padding: 24px;
  text-align: center;
}

.project-content h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
}

.project-content p {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .section-title {
    font-size: 32px;
  }
  .project-img {
    height: 220px;
  }
}
/* Slider spacing */
.projects-slider .project-card {
  margin: 0 15px;
}

.projects-slider .slick-list {
  margin: 0 -15px;
}

/* Slick arrows */
.projects-slider .slick-prev,
.projects-slider .slick-next {
  width: 45px;
  height: 45px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  z-index: 9;
}

.projects-slider .slick-prev:before,
.projects-slider .slick-next:before {
  color: #000;
  font-size: 18px;
}

/* Dots */
.projects-slider .slick-dots {
  margin-top: 40px;
}

.projects-slider .slick-dots li button:before {
  font-size: 10px;
  color: var(--primary);
}

.projects-slider .slick-dots li.slick-active button:before {
  color: var(--primary);
}

/* all team part */
.all-team-area-part {
	padding: 120px 0;
}

.all-team-area-part .active-employes-item-one .text {
	box-shadow: none;
	border: 1px solid var(--border-colour);
}

.all-team-area-slider .slick-dots {
	list-style: none;
	margin-top: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.all-team-area-slider .slick-dots li {
	display: inline-block;
	margin: 0 8px;
}

.all-team-area-slider .slick-dots li button {
	font-size: 0;
	list-style: none;
	width: 10px;
	height: 10px;
	border: 0;
	border-radius: 50%;
	background-color: var(--primary);
	position: relative;
}

.all-team-area-slider .slick-dots li button::before {
	width: 24px;
	height: 24px;
	border: 2px solid var(--primary);
	border-radius: 50%;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: var(--transision);
}

.all-team-area-slider .slick-dots .slick-active button::before {
	opacity: 1;
}

/* employee details part*/

.team-details-area {
	padding: 120px 0;
}

.team-details-area .team-image {
	border-radius: 5px;
	overflow: hidden;
}

.team-details-area .team-details {
	border-radius: 5px;
	overflow: hidden;
}

.team-details-area .team-details .title {
	font-size: 48px;
	margin-bottom: 5px;
}

.team-details-area .team-details .description {
	margin-top: 20px;
}

.team-details-area .team-details .team-info-block {
	margin-top: 33px;
}

.team-details-area .team-details .info-item {
	margin-bottom: 20px;
}

.team-details-area .team-details .info-item .info-title {
	font-size: 18px;
}

.team-details-area .team-details .social-icon {
	margin-top: 10px;
}

.team-details-area .team-details .social-icon a {
	width: 39px;
	height: 39px;
	border-radius: 50%;
	text-align: center;
	line-height: 39px;
	font-size: 24px;
	color: var(--white);
	margin-right: 15px;
}

.team-details-area .team-details .social-icon a:first-child {
	background-color: #4676ED;
}

.team-details-area .team-details .social-icon a:nth-child(2) {
	background-color: #C40027;
}

.team-details-area .team-details .social-icon a:nth-child(3) {
	background-color: #4467AD;
}

.team-details-area .team-details .social-icon a:nth-child(4) {
	background-color: #5A99EC;
}

.team-details-area .technical-information {
	margin-top: 60px;
}

.team-details-area .technical-information .details .title {
	font-size: 24px;
	margin-bottom: 20px;
}

.team-details-area .technical-information .skills .title {
	font-size: 24px;
	margin-bottom: 20px;
}

.team-details-area .technical-information .skills .progress-title {
	font-size: 18px;
	margin-bottom: 10px;
}

.team-details-area .technical-information .skills .progress-item+.progress-item {
	margin-top: 30px;
}

.progress-wrap {
	overflow: hidden;
}

.progress-item .progress {
	height: 6px;
	background-color: var(--section-background);
	border-radius: 8px;
	position: relative;
	overflow: inherit;
}

.progress-item .progress-bar {
	background-color: var(--primary);
	overflow: inherit;
	border-radius: 8px;
}

.progress-item .progress span {
	display: block;
	position: absolute;
	right: 0px;
	bottom: 10px;
	color: var(--body-font-color);
	font-size: var(--body-font-size);
}

/*=============================
	14. Get updates part
===============================*/

/* get updates area one */
.get-updates-area-one {
	padding-top: 120px;
}

.get-updates-area-one .update-area-bg-one {
	background-color: var(--black);
	padding: 40px 0;
	position: relative;
}

.get-updates-area-one .update-area-bg-one::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background-color:  #7e7e8c;;
	content: "";
	clip-path: polygon(0 0, calc(100% - 90px) 0, 100% 100%, 0% 100%);
}

.get-updates-area-one .update-area-bg-one .get-updates-info {
	position: relative;
	z-index: 9;
}

.get-updates-area-one .update-area-bg-one .get-updates-info .title {
	font-size: 48px;
}

.get-updates-area-one .update-area-bg-one .get-updates-info p {
	margin-top: 10px;
}

.get-updates-area-one .update-area-bg-one .contact-info .icon i {
	width: 88px;
	height: 88px;
	text-align: center;
	line-height: 88px;
	border-radius: 50%;
	font-size: 40px;
	color: var(--white);
	background-color: var(--primary);
	margin-right: 30px;
	transition: var(--transision);
}

.get-updates-area-one .update-area-bg-one .contact-info .text .title {
	color: var(--white);
	font-size: 24px;
}

.get-updates-area-one .update-area-bg-one .contact-info .text .number {
	color: var(--white);
	font-size: 32px;
	margin-top: 10px;
}

.get-updates-area-one .update-area-bg-one .contact-info .text h3:hover {
	color: var(--primary);
}

.get-updates-area-one .update-area-bg-one .contact-info:hover .icon i {
	background-color: var(--white);
	color: var(--primary);
}

/* get updates area two */
.get-updates-area-two {
	padding-top: 120px;
}

.get-updates-area-two .get-updates-area-bg {
	background-color: var(--black);
	padding: 95px 0 180px 0;
}

.get-updates-area-two .get-updates-area-bg .section-title-one {
	padding-left: 70px;
	margin-bottom: 0;
}

.get-updates-area-two .sent-email-box {
	padding-left: 60px;
}

.get-updates-area-two .sent-email-box .input-group {
	width: 413px;
}

.get-updates-area-two .sent-email-box input {
	height: 60px;
	width: 100%;
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--white);
	color: var(--white);
}

.get-updates-area-two .sent-email-box input::placeholder {
	opacity: 1;
}

.get-updates-area-two .sent-email-box .input-group i {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	color: var(--white);
}

.get-updates-area-two .sent-email-box .submit-btn {
	margin-left: 40px;
	color: var(--white);
	font-weight: 700;
	padding: 14px 38px;
	background-color: transparent;
	border: 1px solid var(--white);
	border-radius: 5px;
	margin-top: 40px;
	font-family: var(--link-font-family);
}

.get-updates-area-two .sent-email-box .submit-btn:hover {
	background-color: var(--primary);
	border-color: var(--primary);
}

.get-updates-area-two .sent-email-box .submit-btn i {
	margin-left: 10px;
	font-size: 14px;
}


/*=============================
	15. working process part start
===============================*/

/* working process one */
.working-process-area-one {
	padding-top: 120px;
}

.working-process-area-one .section-title-one {
	margin-bottom: 20px;
	max-width: 550px;
}

.working-process-area-one .working-process-info {
	max-width: 550px;
}

.working-process-item {
	box-shadow: 0px 0px 60px 0px rgba(0, 0, 0, 0.05);
	background-color: var(--white);
	padding: 40px;
	margin-bottom: 68px;
	position: relative;
}

.working-process-item:last-child {
	margin-bottom: 0;
}

.working-process-item .title {
	margin-left: 20px;
	width: 160px;
}

.working-process-item .title h4 {
	font-size: 24px;
}

.working-process-item .number h3 {
	color: rgba(23, 23, 23, 0.2);
}

.working-process-item:nth-child(odd)::before {
	position: absolute;
	top: 100%;
	right: 94px;
	width: 315px;
	height: 64px;
	background-image: url(../img/working-process/shape-for-odd.png);
	content: "";
}

.working-process-item:nth-child(even) {
	flex-direction: row-reverse;
}

.working-process-item:nth-child(even)::before {
	position: absolute;
	top: 100%;
	right: 94px;
	width: 315px;
	height: 64px;
	background-image: url(../img/working-process/shape-for-even.png);
	content: "";
}

.working-process-item:nth-child(odd):last-child:before {
	display: none;
}

.working-process-item:nth-child(even):last-child:before {
	display: none;
}

/* working process item two */

.working-process-item-two {
	padding: 0px 40px;
	margin-bottom: 53px;
	position: relative;
}

.working-process-item-two:last-child {
	margin-bottom: 0;
}

.working-process-item-two .title {
	margin-left: 20px;
	width: 160px;
}

.working-process-item-two .number {
	width: 88px;
	height: 155px;
	background: var(--section-background);
	display: flex;
	justify-content: center;
	align-items: center;
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	position: relative;
}

.working-process-item-two .number::before {
	width: 104px;
	height: 15px;
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	background-color: var(--section-background);
	border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	content: "";
}


.working-process-item-two:nth-child(odd)::before {
	position: absolute;
	top: 100%;
	right: 94px;
	width: 315px;
	height: 64px;
	background-image: url(../img/working-process/shape-for-odd.png);
	content: "";
}

.working-process-item-two:nth-child(even) {
	flex-direction: row-reverse;
}

.working-process-item-two:nth-child(even)::before {
	position: absolute;
	top: 100%;
	right: 94px;
	width: 315px;
	height: 64px;
	background-image: url(../img/working-process/shape-for-even.png);
	content: "";
}

.working-process-item-two:nth-child(odd):last-child:before {
	display: none;
}

.working-process-item-two:nth-child(even):last-child:before {
	display: none;
}


/*=============================
	16. faq part start
===============================*/


.faq-area-one .section-title-one {
	margin-bottom: 30px;
}


.faq-area-one .faq-body .accordion-button:focus {
	box-shadow: none;
}

.faq-area-one .faq-body .accordion-item {
	border-radius: 5px;
	margin-bottom: 30px;
	border: 1px solid var(--border-colour);
}

.faq-area-one .faq-body .accordion-button:not(.collapsed) {
	background-color: transparent;
	box-shadow: none;
}

.faq-area-one .faq-body .accordion-button {
	border-radius: 5px;
	border-bottom: 1px solid transparent;
	padding: 26px 24px;
	position: relative;
	font-size: 18px;
	font-weight: var(--heading-font-weight);
    color: var(--heading-font-color);
}

.faq-area-one .faq-body .accordion-body {
	padding: 11px 24px !important;
}

.faq-area-one .faq-body .accordion-button:not(.collapsed) {
	border-color: var(--border-colour);
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}

.faq-area-one .faq-body .accordion-button:focus {
	border-color: var(--border-colour) !important;
	box-shadow: none !important;
}

.faq-area-one .faq-body .accordion-button::after {
	background-image: url(../img/icons/plus-icon.svg);
	background-repeat: no-repeat;
	background-position: center;
	width: 40px;
	height: 40px;
	background-color: var(--primary);
	border-radius: 5px;
	transform: unset;
	position: absolute;
	right: -20px;
}

.faq-area-one .faq-body .accordion-button:not(.collapsed)::after {
	background-image: url(../img/icons/minus-icon.svg);
}

.faq-area-one .faq-image .image-one {
	border-radius: 5px;
	position: relative;
	max-width: 401px;
}

.faq-area-one .faq-image .image-one img {
	border-radius: 5px;
}

.faq-area-one .faq-image .image-one::after {
	width: 22px;
	height: 278px;
	position: absolute;
	right: -34px;
	top: 48px;
	background-color: var(--primary);
	content: "";
	border-radius: 5px;
}

.faq-area-one .faq-image .image-two {
	width: 432px;
	height: 284px;
	-webkit-mask-image: url("../img/faqs/image-two-shape.svg");
	mask-image: url("../img/faqs/image-two-shape.svg");
	-webkit-mask-position: top left;
	mask-position: top left;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	margin-left: 80px;
	margin-top: -160px;
}

.faq-area-one .faq-image .image-two img {
	border: 6px solid var(--white);
	height: 100%;
	object-fit: cover;
}

/*=============================
	17. Testimonial part start
===============================*/

/* testimonial area one */
.testimonial-area-one {
	padding-top: 120px;
}

.testimonial-area-slider-one .testimonial-item-one {
	margin: 0 15px;
}

.testimonial-item-one {
	padding: 40px;
	border-radius: 5px;
	background-color: var(--white);
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.07);
	position: relative;
}

.testimonial-item-one .quote-icon {
	position: absolute;
	right: 40px;
	top: 40px;
}

.testimonial-item-one .testimonial-avatar .image {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	overflow: hidden;
}

.testimonial-item-one .testimonial-avatar .image img {
	border-radius: 50%;
}

.testimonial-item-one .testimonial-avatar .text {
	margin-left: 20px;
}

.testimonial-item-one .testimonial-avatar .text h4 {
	font-size: 24px;
}

.testimonial-item-one .testimonial-avatar .text p {
	margin-top: 5px;
}

.testimonial-item-one .testimonial-info {
	margin-top: 40px;
}

.testimonial-item-one .testimonial-info .rating {
	margin-bottom: 20px;
}

.testimonial-item-one .testimonial-info .rating i {
	color: var(--primary);
	font-size: 14px;
}

.testimonial-area-slider-one .slick-dots {
	list-style: none;
	margin-top: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.testimonial-area-slider-one .slick-dots li {
	display: inline-block;
	margin: 0 8px;
}

.testimonial-area-slider-one .slick-dots li button {
	font-size: 0;
	list-style: none;
	width: 10px;
	height: 10px;
	border: 0;
	border-radius: 50%;
	background-color: var(--primary);
	position: relative;
}

.testimonial-area-slider-one .slick-dots li button::before {
	width: 24px;
	height: 24px;
	border: 2px solid var(--primary);
	border-radius: 50%;
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: var(--transision);
}

.testimonial-area-slider-one .slick-dots .slick-active button::before {
	opacity: 1;
}

.testimonial-area-slider-one .slick-list {
	padding: 20px 0;
	margin: -20px 0;
}

/* testimonial area two */

.testimonial-area-two {
	padding-top: 120px;
}

.testimonial-slider-two {
	margin-top: 80px;
}

.testimonial-slider-two .slick-list {
	padding: 80px 0 20px 0;
	margin: -80px 0 -20px 0;
}

.testimonial-slider-item-two {
	background-color: var(--white);
	padding: 40px;
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.07);
	transition: var(--transision);
	margin: 0 15px;
}

.testimonial-slider-item-two:hover {
	background-color: var(--section-background);
	box-shadow: none;
}

.testimonial-slider-item-two .img {
	width: 150px;
	margin: 0 auto;
	margin-top: -120px;
	position: relative;
	z-index: 9;
}

.testimonial-slider-item-two .img::before {
	position: absolute;
	bottom: -8px;
	right: -8px;
	width: 150px;
	height: 150px;
	border: 1px solid var(--border-colour);
	content: "";
	z-index: -1;
	background-color: var(--white);
}

.testimonial-slider-item-two img {
	width: 100%;
	margin: 0 auto;
}

.testimonial-slider-item-two .text {
	padding-top: 30px;
}

.testimonial-slider-item-two .rating {
	margin-bottom: 20px;
}

.testimonial-slider-item-two .rating i {
	font-size: 14px;
	color: var(--primary);
}

.testimonial-slider-item-two .title {
	font-size: 24px;
}

.testimonial-slider-item-two .testimonial-info {
	margin-top: 40px;
}

.testimonial-slider-item-two .title {
	font-size: 24px;
}

.testimonial-slider-item-two .testimonial-info p {
	margin-top: 10px;
}

.testimonial-slider-two .icon {
	width: 60px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	border-radius: 50%;
	color: var(--primary);
	background-color: rgba(255, 102, 0, 0.1);
	cursor: pointer;
	transition: var(--transision);
	position: absolute;
	top: -120px;
	z-index: 9;
}

.testimonial-slider-two .icon.right {
	right: 17px;
}

.testimonial-slider-two .icon.left {
	left: calc(100% - 157px);
}

.testimonial-slider-two .icon:hover {
	background-color: var(--primary);
	color: var(--white);
}
/* ===================
 About-us Page  
 =====================*/
/* vision mission   */
.our-philosophy {
    padding: 100px 0;
    background: #ffffff;
    color: #111111;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-title {
    font-size: 40px;
    font-weight: 600;
    line-height: 1.2;
    color: #111111;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.strategy-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    min-height: 560px;
    display: flex;
    align-items: stretch;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
}

.card-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    z-index: 1;
    transition: transform 0.7s ease;
}

.strategy-card:hover .card-bg {
    transform: scale(1.05);
}

.card-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    transition: background 0.4s ease;
}

.strategy-card:hover .card-bg::after {
    background: rgba(0, 0, 0, 0.72);
}

.card-content {
    position: relative;
    z-index: 2;
    padding: 40px 30px 30px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 18px;
    color: #ffffff;
}

.card-title-section {
    margin-bottom: 0;
    flex-shrink: 0;
}

.card-title {
    font-size: 22px;
    letter-spacing: 2px;
    color: #ffffff;
    margin: 0;
}

.card-divider {
    width: 42px;
    height: 2px;
    background: #ffffff;
    margin: 12px 0 8px;
}

.card-subtitle {
    font-size: 12px;
    opacity: 0.78;
    margin: 0;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card-scroll-content {
    flex: 1;
    overflow-y: auto;
    padding-right: 10px;

    display: flex;
    flex-direction: column;
    gap: 14px;

    opacity: 0;
    transform: translateY(24px);
    pointer-events: none;
    transition: opacity 0.45s ease, transform 0.45s ease;

    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.4) transparent;
}

.strategy-card:hover .card-scroll-content {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.card-scroll-content::-webkit-scrollbar {
    width: 5px;
}

.card-scroll-content::-webkit-scrollbar-track {
    background: transparent;
}

.card-scroll-content::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.35);
    border-radius: 10px;
}

.card-scroll-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.55);
}

.card-description {
    font-size: 15px;
    line-height: 1.8;
    text-align: justify;
    color: rgba(255,255,255,0.95);
    margin: 0;
}

.card-values-list {
    margin: 0;
    padding-left: 18px;
}

.card-values-list li {
    font-size: 15px;
    line-height: 1.8;
    text-align: justify;
    color: rgba(255,255,255,0.95);
    margin-bottom: 14px;
}

.card-values-list li:last-child {
    margin-bottom: 0;
}

.corner-bracket {
    position: absolute;
    width: 30px;
    height: 30px;
    border: 2px solid #ffffff;
    z-index: 3;
    opacity: 0.9;
    transition: transform 0.4s ease;
}

.strategy-card:hover .corner-bracket {
    transform: scale(1.08);
}

.top-left {
    top: 15px;
    left: 15px;
    border-right: none;
    border-bottom: none;
}

.bottom-right {
    bottom: 15px;
    right: 15px;
    border-left: none;
    border-top: none;
}

/* Mobile: keep content visible because hover is unreliable */
@media (max-width: 991px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }

    .strategy-card {
        min-height: 500px;
    }

    .card-scroll-content {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

@media (max-width: 640px) {
    .our-philosophy {
        padding: 60px 15px;
    }

    .section-header {
        margin-bottom: 40px;
    }

    .section-title {
        font-size: 28px;
    }

    .card-content {
        padding: 30px 24px 24px;
    }

    .card-title {
        font-size: 20px;
    }

    .card-description,
    .card-values-list li {
        font-size: 14px;
    }
}
/* ===================
 About-us Page fixed bg 
 =====================*/
 /* Section Wrapper */
.pentagon-profile {
    position: relative;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    overflow: hidden;
    background: #000;
    min-height: 100vh; /* section height */

}

/* Fixed Background */
.pentagon-profile .pp-fixed-bg {
    position: absolute;
    inset: 0;
    background-image: url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    z-index: 0;
}

/* Overlay */
.pentagon-profile .pp-fixed-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.6),
        rgba(0,0,0,0.7),
        rgba(0,0,0,0.6)
    );
    z-index: 1;
}
.pentagon-profile .pp-content-wrapper {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    padding: 120px 0;
    display: flex;
    align-items: center;
}

/* Container */
.pentagon-profile .pp-container {
    max-width: 1200px;
    margin: auto;
    padding: 0 60px;
}

/* Label */
.pentagon-profile .pp-section-label {
    font-size: 13px;
    letter-spacing: 4px;
    color: rgb(255, 255, 255);
    text-transform: uppercase;
    margin-bottom: 25px;
    opacity: 0;
    animation: ppFadeUp 1s forwards 0.2s;
}

/* Title */
.pentagon-profile .pp-section-title {
    font-size: 4rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 30px;
    line-height: 1.3;
    opacity: 0;
    animation: ppFadeUp 1s forwards 0.4s;
}

/* Underline */
.pentagon-profile .pp-title-underline {
    width: 100px;
    height: 4px;
    background: #ff6b35;
    margin-bottom: 60px;
    opacity: 0;
    animation: ppFadeUp 1s forwards 0.6s;
}

/* Text */
.pentagon-profile .pp-content-text p {
    font-size: 1.15rem;
    line-height: 2;
    color: rgba(255,255,255,0.95);
    margin-bottom: 35px;
    text-align: justify;
    opacity: 0;
    animation: ppFadeUp 1s forwards;
}

.pentagon-profile .pp-content-text p:nth-child(1) { animation-delay: 0.8s; }
.pentagon-profile .pp-content-text p:nth-child(2) { animation-delay: 1s; }
.pentagon-profile .pp-content-text p:nth-child(3) { animation-delay: 1.2s; }

/* Animation */
@keyframes ppFadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Tablet */
@media (max-width: 1024px) {
    .pentagon-profile .pp-section-title {
        font-size: 3.2rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .pentagon-profile .pp-container {
        padding: 0 30px;
    }

    .pentagon-profile .pp-section-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .pentagon-profile .pp-section-title {
        font-size: 2rem;
    }
}
/*=============================
	18. Messages part start
===============================*/

.messages-area-one {
	padding-top: 120px;
	margin-bottom: 50px;
}

.messages-area-one .section-title-one {
	margin-bottom: 40px;
}

.messages-area-one .messages-area-one-main {
	background-color: var(--black);
}

.messages-area-one .messages-area-one-bg .section-title-one {
	max-width: 600px;
}

.messages-area-one .messages-area-one-bg .text {
	padding: 40px 40px 40px 0;
}

.messages-area-one .messages-area-one-bg .input-group {
	margin-bottom: 20px;
}

.messages-area-one .messages-area-one-bg .input-group input {
	width: 100%;
	height: 60px;
	background-color: transparent;
	border: 1px solid #333F4D;
	border-radius: 5px;
	color: var(--white);
	padding: 0 20px;
	transition: var(--transision);
}

.messages-area-one .messages-area-one-bg .input-group input:focus {
	border-color: #FF6600;
}

.messages-area-one .messages-area-one-bg .input-group input::placeholder {
	opacity: 1;
}

.messages-area-one .messages-area-one-bg .input-group input::-webkit-input-placeholder {
	opacity: 1;
	color: var(--white);
}

.messages-area-one .messages-area-one-bg .input-group select {
	width: 100%;
	height: 60px;
	background-color: transparent;
	border: 1px solid #333F4D;
	border-radius: 5px;
	color: var(--white);
	padding: 0 20px;
	padding-right: 40px;
	appearance: none;
	position: relative;
	background: url("../img/icons/down-arrow.png") 94% / 4% no-repeat;
	transition: var(--transision);
}

.messages-area-one .messages-area-one-bg .input-group select:focus {
	border-color: var(--primary);
}

.messages-area-one .messages-area-one-bg .input-group select option {
	color: var(--black);
}

.messages-area-one .messages-area-one-bg .input-group textarea {
	width: 100%;
	background-color: transparent;
	border: 1px solid #333F4D;
	border-radius: 5px;
	color: var(--white);
	padding: 15px 20px;
	resize: none;
	transition: var(--transision);
}

.messages-area-one .messages-area-one-bg .input-group textarea:focus {
	border-color: var(--primary);
}

.messages-area-one .messages-area-one-bg .input-group textarea::placeholder {
	opacity: 1;
}

.messages-area-one .messages-area-one-bg .input-group textarea::-webkit-input-placeholder {
	opacity: 1;
	color: var(--white);
}

.messages-area-one .messages-area-one-bg .submit-btn {
	width: 100%;
	background-color: #6c757d;
	height: 52px;
	border: 0;
	border-radius: 5px;
	color: var(--white);
	font-family: var(--link-font-family);
	font-weight: 700;
  align-items: center;
}

.messages-area-one .messages-area-one-bg .submit-btn:hover {
	background-color: var(--white);
	color: var(--black);
}

/*=============================
	19. News part start
===============================*/

/* news area one */
.news-area-one {
	padding-top: 120px;
}

.news-area-one .news-area-bg-one {
	padding: 120px 0;
	background-color: var(--section-background);
}

.news-area-one .news-area-bg-one .container {
	position: relative;
}

.news-area-one-slider .news-item-one {
	margin: 0 15px;
}

.news-item-one {
	border-radius: 5px;
	overflow: hidden;
	background-color: var(--white);
	box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.05);
}

.news-item-one .text {
	padding: 20px 40px 37px;
}

.news-item-one .text .news-meta {
	border-bottom: 1px solid var(--border-colour);
	padding-bottom: 10px;
}

.news-item-one .text .news-meta ul li {
	display: inline-block;
}

.news-item-one .text .news-meta ul li:first-child {
	margin-right: 30px;
}

.news-item-one .text .news-meta ul li i {
	color: var(--primary);
	margin-right: 10px;
}

.news-item-one .text .news-meta ul li a {
	color: var(--paragraph-color);
}

.news-item-one .text .news-meta ul li a:hover {
	color: var(--primary);
}

.news-item-one .text .news-title {
	margin-bottom: 30px;
	font-size: 24px;
	margin-top: 10px;
	transition: all 0.3s ease-out 0s;
}

.news-item-one .text .news-title:hover a {
	color: var(--primary);
}

.news-item-one .text .read-more {
	font-weight: 700;
	font-size: 18px;
	font-family: var(--link-font-family);
	color: var(--black);
}

.news-item-one .text .read-more:hover {
	color: var(--primary);
}

.news-item-one .text .read-more i {
	margin-left: 10px;
	font-size: 14px;
}

.news-area-one-slider .icon {
	width: 60px;
	height: 60px;
	text-align: center;
	line-height: 60px;
	border-radius: 50%;
	color: var(--primary);
	background-color: rgba(255, 102, 0, 0.1);
	cursor: pointer;
	transition: var(--transision);
	position: absolute;
	top: -120px;
	z-index: 9;
}

.news-area-one-slider .icon.right {
	right: 17px;
}

.news-area-one-slider .icon.left {
	left: calc(100% - 157px);
}

.news-area-one-slider .icon:hover {
	background-color: var(--primary);
	color: var(--white);
}

/* news area two */

.news-area-two {
	padding-top: 120px;
	padding-bottom: 120px;
}

.news-area-two .section-title-one .sub-title {
	margin-left: 0;
}

.news-area-two-slider .news-item-two {
	margin: 0 15px;
}

.news-area-two-slider .slick-list {
	padding: 20px 0;
	margin: -20px 0;
}

.news-item-two {
	border-radius: 5px;
	overflow: hidden;
	background-color: var(--white);
	box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.05);
}

.news-item-two .image img {
	border-bottom-right-radius: 5px;
}

.news-item-two .image .date {
	position: absolute;
	bottom: 0;
	left: 0;
	background-color: var(--primary);
	padding: 15px 20px;
}

.news-item-two .image .date p {
	color: var(--white);
}

.news-item-two .image .date p i {
	margin-right: 10px;
}

.news-item-two .text {
	padding: 20px 40px 37px;
}

.news-item-two .text .news-meta {
	padding-bottom: 20px;
}

.news-item-two .text .news-meta ul li {
	display: inline-block;
	color: var(--paragraph-color);
}

.news-item-two .text .news-meta ul li:first-child {
	margin-right: 30px;
}

.news-item-two .text .news-meta ul li i {
	margin-right: 10px;
}

.news-item-two .text .news-meta ul li a {
	color: var(--paragraph-color);
}

.news-item-two .text .news-meta ul li a:hover {
	color: var(--primary);
}

.news-item-two .text .news-title {
	margin-bottom: 20px;
	font-size: 24px;
	transition: all 0.3s ease-out 0s;
}

.news-item-two .text .news-title:hover a {
	color: var(--primary);
}

.news-item-two .text .read-more {
	font-weight: 700;
	font-size: 18px;
	font-family: var(--link-font-family);
	color: var(--black);
}

.news-item-two .text .read-more:hover {
	color: var(--primary);
}

.news-item-two .text .read-more i {
	color: var(--primary);
	margin-left: 10px;
}

.news-area-two-slider .slick-dots {
	list-style: none;
	margin-top: 80px;
	display: flex;
	justify-content: center;
}

.news-area-two-slider .slick-dots li {
	display: inline-block;
}

.news-area-two-slider .slick-dots li:first-child button {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.news-area-two-slider .slick-dots li:last-child button {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.news-area-two-slider .slick-dots li button {
	width: 100px;
	height: 10px;
	background-color: var(--section-background);
	border: 0;
	font-size: 0;
}

.news-area-two-slider .slick-dots .slick-active button {
	background-color: var(--primary);
	border-radius: 10px;
}

/* blog classic part */
.blog-classic-area {
	padding: 120px 0;
}

.blog-classic-item .blog-image {
	border-radius: 5px;
	overflow: hidden;
}

.blog-classic-item+.blog-classic-item {
	margin-top: 60px;
}

.blog-classic-item .blog-info {
	width: 90%;
	margin: 0 auto;
	padding: 40px;
	background-color: var(--section-background);
	border-radius: 5px;
}

.blog-classic-item .blog-info .title {
	font-size: 32px;
}

.blog-classic-item .blog-info .title:hover {
	color: var(--primary);
}

.blog-meta {
	margin: 10px 0 18px 0;
}

.blog-meta ul li {
	display: inline-block;
	margin-right: 25px;
	padding-right: 25px;
	position: relative;
}

.blog-meta ul li::before {
	position: absolute;
	top: 50%;
	left: -30px;
	transform: translateY(-50%);
	width: 10px;
	height: 10px;
	background-color: var(--primary);
	border-radius: 50%;
	content: "";
}

.blog-meta ul li:first-child:before {
	display: none;
}

.blog-meta ul li a {
	color: var(--body-font-color);
}

.blog-meta ul li a:hover {
	color: var(--primary);
}

.blog-classic-item .blog-info .common-btn {
	margin-top: 22px;
}

.blog-classic-item .blog-info .share-icon {
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	border-radius: 50%;
	color: var(--primary);
	background-color: var(--white);
	margin-top: 22px;
}

.blog-classic-item .blog-info .share-icon:hover {
	background-color: var(--primary);
	color: var(--white);
}

.blog-right-sidebar .sidebar-search .input-group input {
	width: 100%;
	height: 70px;
	border: 1px solid var(--border-colour);
	padding: 0 20px;
	padding-right: 85px;
	border-radius: 5px !important;
	transition: var(--transision);
}

.blog-right-sidebar .sidebar-search .input-group input:focus {
	border-color: var(--primary);
}

.blog-right-sidebar .sidebar-search .input-group button {
	width: 50px;
	height: 50px;
	background-color: var(--primary);
	border-radius: 5px;
	text-align: center;
	line-height: 50px;
	border-radius: 5px !important;
	color: var(--white);
	font-size: 20px;
	border: 0;
	top: 50%;
	transform: translateY(-50%);
	right: 20px;
}

.blog-right-sidebar .sidebar-search {
	margin-bottom: 50px;
}

.blog-right-sidebar .sidebar-search .input-group button:hover {
	background-color: var(--black);
}

.blog-right-sidebar .blog-widget {
	border: 1px solid var(--border-colour);
	border-radius: 5px;
	margin-bottom: 50px;
}

.blog-right-sidebar .blog-widget:last-child {
	margin-bottom: 0;
}

.blog-right-sidebar .blog-widget .title-block {
	font-size: 24px;
	padding: 30px;
	border-bottom: 1px solid var(--border-colour);
}

.blog-right-sidebar .blog-widget .title {
	font-size: 24px;
	position: relative;
	display: inline-block;
}

.blog-right-sidebar .blog-widget .title::before {
	position: absolute;
	top: 50%;
	right: -60px;
	transform: translateY(-50%);
	width: 40px;
	height: 3px;
	background-color: var(--primary);
	content: "";
}

.blog-right-sidebar .blog-widget .list-body {
	padding: 0 30px;
	margin-top: 20px;
	margin-bottom: 30px;
}

.blog-right-sidebar .blog-widget .list-body li {
	border-bottom: 1px solid var(--border-colour);
	margin-bottom: 10px;
	padding-bottom: 10px;
}

.blog-right-sidebar .blog-widget .list-body li:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.blog-right-sidebar .blog-widget .list-body a {
	display: flex;
	justify-content: space-between;
	color: var(--body-font-color);
}

.blog-right-sidebar .blog-widget .list-body a:hover {
	color: var(--primary);
}

.blog-right-sidebar .blog-widget .popular-post-main {
	padding: 22px 30px 30px 30px;
}

.blog-right-sidebar .blog-widget .popular-post-item {
	border-bottom: 1px solid var(--border-colour);
	margin-bottom: 20px;
	padding-bottom: 20px;
}

.blog-right-sidebar .blog-widget .popular-post-item:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.blog-right-sidebar .blog-widget .popular-post-item .image {
	width: 80px;
	margin-right: 15px;
	flex: 0 0 auto;
}

.blog-right-sidebar .blog-widget .popular-post-item .text p i {
	color: var(--primary);
	font-size: 14px;
	margin-right: 9px;
}

.blog-right-sidebar .blog-widget .popular-post-item .text .blog-title:hover {
	color: var(--primary);
}

.blog-right-sidebar .blog-widget .project-main {
	padding: 22px 30px 30px 30px;
}

.blog-right-sidebar .blog-widget .tags {
	padding: 22px 30px 30px 30px;
}

.blog-right-sidebar .blog-widget .tags ul {
	display: flex;
	flex-wrap: wrap;
	gap: 19px;
}

.blog-right-sidebar .blog-widget .tags ul li a {
	border-radius: 5px;
	padding: 5px 10px;
	color: var(--body-font-color);
	background-color: var(--section-background);
}

.blog-right-sidebar .blog-widget .tags ul li a:hover {
	background-color: var(--black);
	color: var(--white);
}

/* blog details part */

.blog-details-area {
	padding: 120px 0;
}

.blog-details-area .blog-details-information .blog-details-image {
	border-radius: 5px;
	overflow: hidden;
}

.blog-details-area .blog-details-information .blog-meta {
	margin-top: 20px;
}

.blog-details-area .blog-details-information .blog-details-title {
	font-size: 32px;
	margin-bottom: 20px;
}

.blog-details-area .blog-details-information blockquote {
	padding: 60px;
	background-color: var(--section-background);
	margin: 30px 0 60px 0;
	border-radius: 5px;
	text-align: center;
	position: relative;
}

.blog-details-area .blog-details-information blockquote .short-description {
	color: var(--body-font-color);
	margin-bottom: 36px;
}

.blog-details-area .blog-details-information blockquote .title {
	font-size: 24px;
	margin-bottom: 5px;
}

.blog-details-area .blog-details-information blockquote .sub-title {
	color: var(--black);
}

.blog-details-area .blog-details-information blockquote .quote-icon {
	position: absolute;
	bottom: 60px;
	right: 60px;
}

.blog-details-area .blog-details-information blockquote .quote-icon i {
	color: rgba(246, 139, 33, 0.2);
	font-size: 64px;
}

.blog-details-area .blog-details-inner-content {
	margin-top: 60px;
}

.blog-details-area .blog-details-inner-content .title {
	font-size: 32px;
	margin-bottom: 20px;
}

.blog-details-area .blog-details-information .inner-content-image {
	margin: 30px 0;
}

.blog-details-area .blog-details-information .inner-content-image .image {
	border-radius: 5px;
	overflow: hidden;
}

.blog-details-area .blog-details-inner-content .list-info li {
	margin-bottom: 12px;
	color: var(--body-font-color);
	display: flex;
}

.blog-details-area .blog-details-inner-content .list-info li i {
	position: relative;
	top: 6px;
}

.blog-details-area .blog-details-inner-content .list-info li i {
	margin-right: 10px;
	color: var(--primary);
}

.blog-details-area .blog-details-inner-content .post-tags {
	margin-top: 60px;
}

.blog-details-area .blog-details-inner-content .post-tags .tags-title {
	font-size: 24px;
	margin-right: 10px;
}

.blog-details-area .blog-details-inner-content .post-tags li {
	display: inline-block;
	margin-right: 10px;
}

.blog-details-area .blog-details-inner-content .post-tags li a {
	background-color: var(--section-background);
	padding: 5px 10px;
	border-radius: 5px;
	color: var(--body-font-color);
}

.blog-details-area .blog-details-inner-content .post-tags li a:hover {
	background-color: var(--primary);
	color: var(--white);
}

.blog-details-area .blog-details-messages {
	margin-top: 120px;
}

.blog-details-area .blog-details-messages .title {
	font-size: 48px;
	margin-bottom: 20px;
}

.blog-details-area .blog-details-messages .messages-box {
	margin-top: 40px;
}

.blog-details-area .blog-details-messages .input-group {
	margin-bottom: 20px;
}

.blog-details-area .blog-details-messages .input-group input {
	width: 100%;
	height: 60px;
	background-color: transparent;
	border: 1px solid var(--border-colour);
	border-radius: 5px;
	color: var(--body-font-color);
	padding: 0 20px;
	transition: var(--transision);
}

.blog-details-area .blog-details-messages .input-group input:focus {
	border-color: #FF6600;
}

.blog-details-area .blog-details-messages .input-group input::placeholder {
	opacity: 1;
}

.blog-details-area .blog-details-messages .input-group input::-webkit-input-placeholder {
	opacity: 1;
	color: var(--body-font-color);
}

.blog-details-area .blog-details-messages .input-group select {
	width: 100%;
	height: 60px;
	background-color: transparent;
	border: 1px solid var(--border-colour);
	border-radius: 5px;
	color: var(--body-font-color);
	padding: 0 20px;
	padding-right: 60px;
	appearance: none;
	position: relative;
	background: url("../img/icons/down-arrow-black.png") 94% / 3% no-repeat;
	transition: var(--transision);
}

.blog-details-area .blog-details-messages .input-group select:focus {
	border-color: var(--primary);
}


.blog-details-area .blog-details-messages .input-group textarea {
	width: 100%;
	background-color: transparent;
	border: 1px solid var(--border-colour);
	border-radius: 5px;
	color: var(--body-font-color);
	padding: 15px 20px;
	resize: none;
	transition: var(--transision);
}

.blog-details-area .blog-details-messages .input-group textarea:focus {
	border-color: var(--primary);
}

.blog-details-area .blog-details-messages .input-group textarea::placeholder {
	opacity: 1;
}

.blog-details-area .blog-details-messages .input-group textarea::-webkit-input-placeholder {
	opacity: 1;
	color: var(--body-font-color);
}

.blog-details-area .blog-details-messages .submit-btn {
	width: 100%;
	background-color: var(--primary);
	height: 60px;
	line-height: 60px;
	border: 0;
	border-radius: 5px;
	color: var(--white);
	font-family: var(--link-font-family);
	font-weight: 700;
}

.blog-details-area .blog-details-messages .submit-btn:hover {
	background-color: var(--black);
	color: var(--white);
}


/*=============================
	20. Footer part
===============================*/

/* footer area one */
.footer-area-one .footer-area-one-bg {
	padding: 80px 0 0px 0;
	background-color: var(--black);
}

.footer-area-one .footer-widget .footer-content {
	margin-top: 30px;
}

.footer-area-one .footer-widget .footer-content p {
	color: var(--footer-font-colour);
}

.footer-area-one .footer-widget .footer-content .social {
	margin-top: 40px;
}

.footer-area-one .footer-widget .footer-content .social li {
	display: inline-block;
	margin-right: 10px;
}

.footer-area-one .footer-widget .footer-content .social a {
	width: 30px;
	height: 30px;
	color: lightgrey;
	text-align: center;
	line-height: 30px;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.1);
}

.footer-area-one .footer-widget .footer-content .social a:hover {
	background-color: var(--primary);
	color: var(--white);
}

.footer-area-one .footer-widget .footer-title {
	margin-bottom: 40px;
	font-size: 24px;
	color: var(--footer-font-colour);
	margin-top: 20px;
}

.footer-area-one .footer-widget p {
	color: var(--footer-font-colour);
}

.footer-area-one .footer-widget .footer-link ul li {
	margin-bottom: 10px;
}

.footer-area-one .footer-widget .footer-link a {
	color: var(--footer-font-colour);
}

.footer-area-one .footer-widget .footer-link a i {
	font-size: 14px;
	margin-right: 10px;
}

.footer-area-one .footer-widget .footer-link a:hover {
	color: var(--primary)
}

.footer-area-one .footer-widget .footer-address ul li {
	margin-bottom: 20px;
}

.footer-area-one .footer-widget .footer-address ul li .icon {
	margin-right: 20px;
}

.footer-area-one .footer-widget .footer-address ul li .icon i {
	width: 40px;
	height: 40px;
	color: #fff;;
	font-size: 20px;
	text-align: center;
	line-height: 40px;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.1);
}

.footer-area-one .footer-widget .footer-address ul li .content a {
	color: var(--footer-font-colour);
	display: block;
}

.footer-area-one .footer-widget .footer-address ul li .content a:hover {
	color: var(--primary);
}

.footer-area-one .footer-widget .footer-newsletter {
	margin-top: 30px;
}

.footer-area-one .footer-widget .footer-newsletter input {
	width: 100%;
	height: 57px;
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: 5px;
	padding: 0 110px 0 15px;
	border: 0;
	color: rgba(255, 255, 255, 0.6);
	border: 1px solid transparent;
	transition: var(--transision);
}

.footer-area-one .footer-widget .footer-newsletter input:focus {
	border-color: rgba(255, 102, 0, 0.5);
}

.footer-area-one .footer-widget .footer-newsletter button {
	width: 75px;
	height: 47px;
	border-radius: 5px;
	background-color: var(--primary);
	color: var(--white);
	border: 0;
	font-size: 20px;
	right: 5px;
	transform: translateY(-50%);
	transition: var(--transision);
  margin-top: 30px
}

.footer-area-one .footer-widget .footer-newsletter button:hover {
	background-color: var(--white);
	color: var(--primary);
}

.footer-bottom {
	border-top: 1px solid #333F4D;
	margin-top: 60px;
	padding: 30px 0;
}

.footer-bottom p {
	color: var(--footer-font-colour);
}

.footer-bottom .links ul li {
	display: inline-block;
}

.footer-bottom .links ul li {
	margin-left: 30px;
}

.footer-bottom .links ul li:first-child {
	margin-left: 0px;
}

.footer-bottom .links ul li a {
	color: var(--footer-font-colour);
}

.footer-bottom .links ul li a:hover {
	color: var(--primary);
}

/* footer area two */

.footer-area-two .footer-area-two-bg {
	padding: 80px 0 0px 0;
	background-color: var(--black);
}

.footer-area-two .footer-widget .footer-content {
	margin-top: 20px;
}

.footer-area-two .footer-widget .footer-content p {
	color: var(--white);
}

.footer-area-two .footer-widget .footer-content .social {
	margin-top: 30px;
}

.footer-area-two .footer-widget .footer-content .social li {
	display: inline-block;
	margin-right: 15px;
}

.footer-area-two .footer-widget .footer-content .social a {
	color: rgba(255, 255, 255, 0.8);
}

.footer-area-two .footer-widget .footer-content .social a:hover {
	color: var(--primary);
}

.footer-area-two .footer-widget .footer-title {
	margin-bottom: 30px;
	font-size: 24px;
	color: var(--white);
	margin-top: 20px;
}

.footer-area-two .footer-widget p {
	color: var(--white);
}

.footer-area-two .footer-widget .footer-link ul li {
	margin-bottom: 10px;
}

.footer-area-two .footer-widget .footer-link a {
	color: var(--white);
}

.footer-area-two .footer-widget .footer-link a i {
	font-size: 14px;
	margin-right: 10px;
}

.footer-area-two .footer-widget .footer-link a:hover {
	color: var(--primary)
}

.footer-area-two .footer-widget .footer-newsletter {
	margin-top: 30px;
}

.footer-area-two .footer-widget .footer-gallery ul {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.footer-area-two .footer-widget .footer-gallery ul li {
	width: 30%;
}

.footer-area-two .footer-widget .footer-gallery ul li img {
	width: 100%;
}

.footer-area-two .footer-bottom p {
	color: var(--white);
}

.footer-area-two .footer-bottom .links ul li a {
	color: var(--white);
}

.footer-area-two .footer-bottom .links ul li a:hover {
	color: var(--primary);
}
/* Footer logo fix */
.footer-area-one .footer-logo img {
    max-width: 180px;      /* professional size */
    width: 100%;
    height: auto;
    display: block;
}

/* scroll top part start */

.scroll-to-top {
	display: inline-block;
	background-color: var(--primary);
	width: 40px;
	height: 40px;
	line-height: 40px;
	color: var(--white);
	text-align: center;
	border-radius: 5px;
	border: 0;
	position: fixed;
	bottom: -60px;
	right: 30px;
	transition: background-color 0.3s, opacity 0.5s, visibility 0.5s;
	opacity: 0;
	visibility: hidden;
	font-size: 18px;
	z-index: 99;
	cursor: pointer;
	transition: var(--transision);
}

.scroll-to-top::after {
	position: absolute;
	z-index: -1;
	content: '';
	top: 100%;
	left: 5%;
	height: 10px;
	width: 90%;
	opacity: 1;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0) 80%);
}

.scroll-to-top.show {
	opacity: 1;
	visibility: visible;
	bottom: 30px;
}
/* =========================================================
   Breadcrumb + Contact Form (Enhanced Aesthetic)
   Keeps your layout, upgrades look & feel (modern + clean)
   ========================================================= */

/* Optional: if not already defined in your theme */
:root{
  --card-bg: #ffffff;
  --soft-bg: #f6f8ff;
  --shadow-sm: 0 10px 25px rgba(14, 30, 80, 0.08);
  --shadow-md: 0 18px 45px rgba(14, 30, 80, 0.12);
  --radius-lg: 18px;
  --radius-md: 12px;
}

/* =============================
   21. Breadcrumb area start
=============================== */

.breadcrumb-area {
  position: relative;
  padding: 180px 0 150px;
  background-color: var(--black);
  background-repeat: no-repeat;
  background-position: center 70px;
  overflow: hidden;
  isolation: isolate;
}

/* Dark overlay (richer depth) */
.breadcrumb-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(6, 12, 28, 0.92),
    rgba(6, 12, 28, 0.78)
  );
  z-index: 0;
}

/* Decorative glow blobs */
.breadcrumb-area::after {
  content: "";
  position: absolute;
  width: 700px;
  height: 700px;
  top: -240px;
  right: -260px;
  background: radial-gradient(circle, rgba(0,123,255,0.35), transparent 60%);
  filter: blur(10px);
  z-index: 0;
  pointer-events: none;
}

.breadcrumb-area .breadcrumb-content {
  position: relative;
  z-index: 1;
}

/* Title */
.breadcrumb-area .breadcrumb-content .title {
  font-size: clamp(2rem, 3.2vw, 3.1rem);
  line-height: 1.1;
  letter-spacing: 0.2px;
  margin-bottom: 10px;
  text-shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
}

/* Breadcrumb list */
.breadcrumb-area .breadcrumb-content .bread-crumb {
  margin: 0;
  padding: 0;
}

.breadcrumb-area .breadcrumb-content .bread-crumb li {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  font-family: var(--link-font-family);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  position: relative;
  margin-left: 0;
  padding-left: 0;
}

/* Separator icon (clean & aligned) */
.breadcrumb-area .breadcrumb-content .bread-crumb li::before {
  content: "\f054";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  margin: 0 12px;
  position: static;
}

.breadcrumb-area .breadcrumb-content .bread-crumb li:first-child::before {
  display: none;
}

.breadcrumb-area .breadcrumb-content .bread-crumb li a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  transition: color 0.25s ease, transform 0.25s ease;
}

.breadcrumb-area .breadcrumb-content .bread-crumb li a:hover {
  color: var(--primary);
  transform: translateY(-1px);
}
/* =================================================
   BREADCRUMB – FULL CENTER ALIGNMENT
================================================= */

.breadcrumb-area .breadcrumb-content .row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Kill Bootstrap column behavior */
.breadcrumb-area .breadcrumb-content [class*="col-"] {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}

/* Title spacing */
.breadcrumb-area .title {
  margin-bottom: 16px;
}

/* Breadcrumb list center */
.breadcrumb-area .bread-crumb {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Remove right-align from Bootstrap */
.breadcrumb-area .text-md-end {
  text-align: center !important;
}

/* Mobile spacing tweak */
@media (max-width: 768px) {
  .breadcrumb-area {
    padding: 140px 0 110px;
  }

  .breadcrumb-area .title {
    font-size: 2.2rem;
  }
}

/* =================================================
   BREADCRUMB – ONLY ABOUT / SERVICES / CONTACT
================================================= */

/* Shared breadcrumb behavior */
.page-about .breadcrumb-area,
.page-services .breadcrumb-area,
.page-contact .breadcrumb-area {
  position: relative;
  padding: 180px 0 150px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
  isolation: isolate;
}

/* Softer overlay so images remain visible */
.page-about .breadcrumb-area::before,
.page-services .breadcrumb-area::before,
.page-contact .breadcrumb-area::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.65),
    rgba(0, 0, 0, 0.40)
  );
  z-index: 0;
}

/* Light decorative glow */
.page-about .breadcrumb-area::after,
.page-services .breadcrumb-area::after,
.page-contact .breadcrumb-area::after {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  top: -220px;
  right: -240px;
  background: radial-gradient(circle, rgba(0,123,255,0.25), transparent 60%);
  filter: blur(14px);
  z-index: 0;
  pointer-events: none;
}

/* Ensure content stays above overlay */
.page-about .breadcrumb-content,
.page-services .breadcrumb-content,
.page-contact .breadcrumb-content {
  position: relative;
  z-index: 1;
}

/* =================================================
   FULL CENTER ALIGNMENT (ONLY THESE PAGES)
================================================= */

.page-about .breadcrumb-content .row,
.page-services .breadcrumb-content .row,
.page-contact .breadcrumb-content .row {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Kill Bootstrap column split */
.page-about .breadcrumb-content [class*="col-"],
.page-services .breadcrumb-content [class*="col-"],
.page-contact .breadcrumb-content [class*="col-"] {
  width: 100%;
  max-width: 100%;
  flex: 0 0 100%;
}

/* Breadcrumb list center */
.page-about .bread-crumb,
.page-services .bread-crumb,
.page-contact .bread-crumb {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* Remove Bootstrap right alignment */
.page-about .text-md-end,
.page-services .text-md-end,
.page-contact .text-md-end {
  text-align: center !important;
}

/* =================================================
   MOBILE RESPONSIVENESS (IMAGE SAFE)
================================================= */

@media (max-width: 768px) {
  .page-about .breadcrumb-area,
  .page-services .breadcrumb-area,
  .page-contact .breadcrumb-area {
    padding: 120px 0 100px;
    background-position: center top; /* prevents head-crop */
  }

  .page-about .breadcrumb-area .title,
  .page-services .breadcrumb-area .title,
  .page-contact .breadcrumb-area .title {
    font-size: 2.1rem;
    line-height: 1.2;
  }

  .page-about .bread-crumb li,
  .page-services .bread-crumb li,
  .page-contact .bread-crumb li {
    font-size: 16px;
  }
}

/* =============================
   22. contact form area start
=============================== */

.contact-form-area {
  padding: 110px 0 0;
  background: linear-gradient(180deg, var(--soft-bg), #ffffff 55%);
}

/* Title & description spacing */
.contact-form-area .section-title-one {
  margin-bottom: 18px;
}

.contact-form-area .short-description {
  margin-bottom: 34px;
  color: rgba(0, 0, 0, 0.68);
}

/* Make the form feel like a card */
.contact-form-area .contact-form {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 34px 28px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Inputs */
.contact-form-area .contact-form .input-group {
  margin-bottom: 18px;
}

.contact-form-area .contact-form .input-group input,
.contact-form-area .contact-form .input-group textarea {
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(245, 247, 255, 0.7);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, transform 0.2s ease;
  font-size: 15px;
  outline: none;
}

/* Height adjustments */
.contact-form-area .contact-form .input-group input {
  height: 58px;
  padding: 0 18px;
}

.contact-form-area .contact-form .input-group textarea {
  height: 170px;
  padding: 18px;
  resize: none;
}

/* Focus style */
.contact-form-area .contact-form .input-group input:focus,
.contact-form-area .contact-form .input-group textarea:focus {
  border-color: rgba(0, 123, 255, 0.6);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.12);
}

/* Placeholder */
.contact-form-area .contact-form .input-group input::placeholder,
.contact-form-area .contact-form .input-group textarea::placeholder {
  color: rgba(0, 0, 0, 0.45);
}

/* Submit button (modern pill) */
.contact-form-area .contact-form .submit-btn {
  margin-top: 12px;
  background: linear-gradient(135deg, var(--primary), #2f8dff);
  color: var(--white);
  font-family: var(--link-font-family);
  font-weight: 800;
  letter-spacing: 0.6px;
  border: 0;
  padding: 14px 44px;
  border-radius: 999px;
  box-shadow: 0 12px 28px rgba(0, 123, 255, 0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.contact-form-area .contact-form .submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px rgba(0, 123, 255, 0.32);
  filter: brightness(1.02);
}

.contact-form-area .contact-form .submit-btn:active {
  transform: translateY(0);
}

/* Right info panel like a soft card */
.contact-form-area .contact-information {
  padding-left: 60px;
}

.contact-form-area .contact-information .contact-info-item {
  background: #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 22px 22px;
}

.contact-form-area .contact-information .contact-info-item + .contact-info-item {
  margin-top: 22px;
}

.contact-form-area .contact-information .contact-info-item ul {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 0;
  padding: 0;
}

/* Icon badge */
.contact-form-area .contact-information .contact-info-item ul .icon {
  margin-right: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(0, 123, 255, 0.10);
  border: 1px solid rgba(0, 123, 255, 0.18);
  flex: 0 0 48px;
}

.contact-form-area .contact-information .contact-info-item ul .icon i {
  font-size: 20px;
  color: var(--primary);
  margin-top: 0;
}

.contact-form-area .contact-information .contact-info-item ul .title {
  font-size: 18px;
  margin-bottom: 6px;
}

.contact-form-area .contact-information .contact-info-item p {
  margin-top: 0;
  color: rgba(0, 0, 0, 0.62);
}
/* =========================================
   CONTACT FORM – LEFT ACCENT BORDER
========================================= */

.contact-form-area .contact-form {
  position: relative;
  border-left: 5px solid transparent; /* fallback */
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(
      180deg,
      var(--primary),
      rgba(47, 141, 255, 0.55)
    ) border-box;
  border-left-width: 6px;
  margin-bottom: 20px;
}

/* Subtle vertical glow line */
.contact-form-area .contact-form::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 18px;
  bottom: 18px;
  width: 6px;
  background: linear-gradient(
    180deg,
    var(--primary),
    rgba(47, 141, 255, 0.25)
  );
  border-radius: 6px;
}

/* Soft depth lift */
.contact-form-area .contact-form {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.contact-form-area .contact-form:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.12);
}
@media (max-width: 768px) {
  .contact-form-area .contact-form {
    border-left-width: 4px;
  }

  .contact-form-area .contact-form::before {
    top: 12px;
    bottom: 12px;
  }
}
.contact-form-area .section-title-one::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: var(--primary);
  margin-top: 12px;
  border-radius: 2px;
}
.contact-form-area .contact-form {
  backdrop-filter: blur(6px);
}

/* =============================
   23. Contact map area start
=============================== */

.contact-map-area {
  padding-top: 90px;
  background: #ffffff;
}

.contact-map-area .contact-map {
  height: 640px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.contact-map-area .contact-map iframe {
  height: 100%;
  width: 100%;
  border: 0;
  filter: grayscale(100%) contrast(1.05) brightness(0.98);
}

/* =============================
   Responsive tweaks
=============================== */
@media (max-width: 992px) {
  .breadcrumb-area { padding: 160px 0 120px; }
  .contact-form-area { padding: 90px 0 0; }
  .contact-form-area .contact-information { padding-left: 0; margin-top: 30px; }
}

@media (max-width: 768px) {
  .breadcrumb-area { padding: 140px 0 110px; }
  .breadcrumb-area .breadcrumb-content .title { text-align: center; }
  .breadcrumb-area .breadcrumb-content .bread-crumb { text-align: center; }
  .contact-form-area .contact-form { padding: 26px 18px; }
  .contact-map-area .contact-map { height: 460px; }
}

/* FAQ image wrapper */
.faq-image {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin-left: auto;
}

/* Image one (background image) */
.faq-image .image-one {
    position: relative;
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
}

.faq-image .image-one img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 14px;
	margin-top: 50px;
}

/* Image two (overlapping image) */
.faq-image .image-two {
    position: absolute;
    bottom: -40px;
    left: -40px;
    width: 65%;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    background: #fff;
}

.faq-image .image-two img {
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: 14px;
}

/* =====================
   RESPONSIVE FIX
===================== */
@media (max-width: 991px) {
    .faq-image {
        max-width: 100%;
        margin: 40px auto 0;
    }

    .faq-image .image-two {
        position: relative;
        bottom: 0;
        left: 0;
        width: 100%;
        margin-top: 20px;
    }

    .faq-image .image-one img,
    .faq-image .image-two img {
        height: auto;
    }
}
.faq-image .image-two {
    border: 6px solid #ff6a00; /* your orange */
	margin-top: 200px;
}
/* =========================
   Footer Disclaimer Strip
========================= */
.footer-disclaimer {
    background-color: #f5f1e6; /* light cream */
    padding: 18px 30px;
    font-size: 14px;
    line-height: 1.8;
    color: #000;
    border-top: 1px solid #e0dccc;
}

.footer-disclaimer p {
    margin: 0;
    max-width: 1600px;
}
/* ========================
WhatsApp Icon 
==========================*/
#whatsapp-icon {
  position: fixed;
  bottom: 100px;   /* 👈 move above Tawk.to */
  right: 20px;
  z-index: 1000;
}

#whatsapp-icon img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25D366;
  padding: 10px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* ===================================
   MESSAGE SECTION IMAGE – LEFT CROP
=================================== */

.messages-area-one .image {
  position: relative;
  overflow: hidden;
  height: 100%;
  min-height: 520px; /* keeps visual balance */
}

.messages-area-one .image img {
  width: 200%;              /* 👈 makes image wider */
  height: 100%;
  object-fit: cover;
  object-position: left center; /* 👈 keeps LEFT half visible */
}

.pp-project-description {
  margin-top: 25px;
}

.pp-project-description p {
  font-size: 15px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 15px;
}
/*mantri OH*/
.pp-project-highlights {
  padding: 80px 0;
  background: #0e0e0e;
}

.pp-highlight-card {
  background: #e9e9e9;
  border-radius: 18px;
  padding: 35px 30px;
  height: 100%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.pp-highlight-card h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 25px;
  color: #000;
}

.pp-highlight-card ul {
  padding-left: 18px;
  margin: 0;
}

.pp-highlight-card ul li {
  font-size: 16px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 14px;
}

/* Coming Soon Section */
.pld-coming-soon {
    padding: 100px 40px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;     /* horizontal center */
    justify-content: center; /* vertical center */

    text-align: center;
}

.pld-coming-soon::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 165, 116, 0.1), transparent);
    animation: pldSlideShine 3s infinite;
}

.pld-coming-soon-frame {
    display: inline-block;
    border: 3px solid #d4a574;
    padding: 30px 0px;
    background: rgba(0, 0, 0, 0.5);
    position: relative;
    transition: all 0.4s ease;
}

.pld-coming-soon:hover .pld-coming-soon-frame {
    border-color: #f7a222;
    box-shadow: 0 0 30px rgba(212, 165, 116, 0.5);
    transform: scale(1.05);
}

.pld-coming-soon-text {
    font-size: 2.5rem;
    font-weight: 700;
    letter-spacing: 10px;
    background: linear-gradient(135deg, #d4a574, #f7a222, #d4a574);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-transform: uppercase;
    animation: pldGradientShift 3s ease infinite;
}
/* ========================================
   3D PROJECT SHOWCASE SECTION - CSS
   ======================================== */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Poppins:wght@200;300;400;500;600&family=Bodoni+Moda:wght@400;600&display=swap');

/* CSS Variables */
:root {
    --pentagon-deep-black: #0d0d0d;
    --pentagon-charcoal: #1a1a1a;
    --pentagon-gold: #d4af37;
    --pentagon-light-gold: #f4e5c2;
    --pentagon-cream: #faf8f3;
    --pentagon-silver: #b8b8b8;
}

/* Main Section Container */
.pentagon-3d-project-showcase {
    font-family: 'Poppins', sans-serif;
    background: linear-gradient(135deg, var(--pentagon-deep-black) 0%, var(--pentagon-charcoal) 50%, var(--pentagon-deep-black) 100%);
    color: var(--pentagon-cream);
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

/* Animated Background */
.pentagon-bg-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 15% 25%, rgba(212,175,55,0.05) 0%, transparent 40%),
        radial-gradient(circle at 85% 75%, rgba(212,175,55,0.05) 0%, transparent 40%);
    z-index: 0;
    pointer-events: none;
    animation: pentagonBgShift 20s ease-in-out infinite;
}

@keyframes pentagonBgShift {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.1); }
}

/* Container */
.pentagon-showcase-wrapper {
    position: relative;
    z-index: 1;
    max-width: 1600px;
    margin: 0 auto;
    padding: 80px 40px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header */
.pentagon-section-header {
    text-align: center;
    margin-bottom: 80px;
    animation: pentagonFadeInDown 1s ease-out;
}

@keyframes pentagonFadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pentagon-header-accent {
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--pentagon-gold), transparent);
    margin: 0 auto 25px;
}

.pentagon-section-title {
    font-family: 'Bodoni Moda', serif;
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--pentagon-light-gold);
    margin-bottom: 15px;
}

.pentagon-section-subtitle {
    font-size: clamp(14px, 1.5vw, 18px);
    color: var(--pentagon-silver);
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 300;
}

/* Project Slider */
.pentagon-project-slider {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pentagon-project-slide {
    display: none;
    width: 100%;
    animation: pentagonSlideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.pentagon-project-slide.pentagon-active {
    display: block;
}

@keyframes pentagonSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Project Content */
.pentagon-project-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.pentagon-project-slide.pentagon-reverse .pentagon-project-content {
    direction: rtl;
}

.pentagon-project-slide.pentagon-reverse .pentagon-project-info {
    direction: ltr;
}

/* TRUE 3D Container */
.pentagon-3d-stage {
    perspective: 2000px;
    perspective-origin: 50% 50%;
    height: 650px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.pentagon-building-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: pentagonAutoRotate 25s linear infinite;
}

.pentagon-project-slide.pentagon-active .pentagon-building-wrapper {
    animation: pentagonBuildingEntrance 1.5s ease-out forwards, pentagonAutoRotate 25s 1.5s linear infinite;
}

@keyframes pentagonBuildingEntrance {
    0% {
        transform: translateZ(-400px) rotateY(-90deg);
        opacity: 0;
    }
    100% {
        transform: translateZ(0) rotateY(0deg);
        opacity: 1;
    }
}

@keyframes pentagonAutoRotate {
    0% { transform: rotateY(0deg) rotateX(5deg); }
    25% { transform: rotateY(15deg) rotateX(3deg); }
    50% { transform: rotateY(0deg) rotateX(5deg); }
    75% { transform: rotateY(-15deg) rotateX(3deg); }
    100% { transform: rotateY(0deg) rotateX(5deg); }
}

.pentagon-building-cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s ease-out;
}

/* Cube Faces */
.pentagon-cube-face {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border: 2px solid rgba(212,175,55,0.3);
    box-shadow: 
        inset 0 0 60px rgba(0,0,0,0.3),
        0 0 40px rgba(0,0,0,0.5);
    overflow: hidden;
}

.pentagon-cube-face::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(212,175,55,0.1) 0%,
        transparent 30%,
        transparent 70%,
        rgba(212,175,55,0.05) 100%
    );
}

.pentagon-cube-face::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(255,255,255,0.1) 50%,
        transparent 60%
    );
    animation: pentagonShimmer 4s ease-in-out infinite;
}

@keyframes pentagonShimmer {
    0%, 100% { transform: translateX(-100%) translateY(-100%); }
    50% { transform: translateX(100%) translateY(100%); }
}

/* Front Face */
.pentagon-face-front {
    transform: translateZ(150px);
}

/* Back Face */
.pentagon-face-back {
    transform: translateZ(-150px) rotateY(180deg);
    opacity: 0.7;
}

/* Left Face */
.pentagon-face-left {
    width: 300px;
    transform: rotateY(-90deg) translateZ(calc(50% - 150px));
    background: linear-gradient(to right, rgba(26,26,26,0.9), rgba(26,26,26,0.6));
}

/* Right Face */
.pentagon-face-right {
    width: 300px;
    transform: rotateY(90deg) translateZ(calc(50% - 150px));
    background: linear-gradient(to left, rgba(26,26,26,0.9), rgba(26,26,26,0.6));
}

/* Top Face */
.pentagon-face-top {
    height: 300px;
    transform: rotateX(90deg) translateZ(calc(50% - 150px));
    background: linear-gradient(to bottom, rgba(13,13,13,0.95), rgba(26,26,26,0.7));
}

/* Bottom Face - Ground/Shadow */
.pentagon-face-bottom {
    height: 300px;
    transform: rotateX(-90deg) translateZ(calc(50% - 150px));
    background: radial-gradient(circle, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 70%, transparent 100%);
    box-shadow: none;
    border: none;
}

/* 3D Shadow/Ground Plane */
.pentagon-ground-plane {
    position: absolute;
    width: 150%;
    height: 150%;
    background: radial-gradient(
        ellipse at center,
        rgba(0,0,0,0.6) 0%,
        rgba(0,0,0,0.3) 40%,
        transparent 70%
    );
    transform: rotateX(90deg) translateZ(-400px);
    pointer-events: none;
}

/* Interactive rotation controls */
.pentagon-rotation-hint {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(13,13,13,0.8);
    border: 1px solid rgba(212,175,55,0.3);
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 12px;
    color: var(--pentagon-gold);
    letter-spacing: 1px;
    backdrop-filter: blur(10px);
    pointer-events: none;
    opacity: 0.7;
}

/* Project Info */
.pentagon-project-info {
    padding: 40px;
    position: relative;
}

.pentagon-project-number {
    font-family: 'Bodoni Moda', serif;
    font-size: 120px;
    font-weight: 600;
    color: rgba(212,175,55,0.1);
    position: absolute;
    top: -40px;
    left: 0;
    line-height: 1;
    z-index: -1;
}

.pentagon-project-label {
    display: inline-block;
    background: linear-gradient(135deg, rgba(212,175,55,0.2) 0%, rgba(212,175,55,0.1) 100%);
    border: 1px solid rgba(212,175,55,0.3);
    color: var(--pentagon-gold);
    padding: 8px 20px;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 25px;
    border-radius: 4px;
    font-weight: 500;
}

.pentagon-project-name {
    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 600;
    color: var(--pentagon-light-gold);
    margin-bottom: 20px;
    line-height: 1.2;
}

.pentagon-project-location {
    font-size: 16px;
    color: var(--pentagon-silver);
    margin-bottom: 30px;
    letter-spacing: 1px;
}

.pentagon-project-location::before {
    content: '📍 ';
    margin-right: 8px;
}

.pentagon-project-description {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(250,248,243,0.8);
    margin-bottom: 30px;
    font-weight: 300;
}

.pentagon-project-features {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 35px;
}

.pentagon-feature-tag {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(212,175,55,0.2);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--pentagon-cream);
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.pentagon-feature-tag:hover {
    background: rgba(212,175,55,0.1);
    border-color: var(--pentagon-gold);
    transform: translateY(-2px);
}

.pentagon-project-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: 2px solid var(--pentagon-gold);
    color: var(--pentagon-gold);
    padding: 14px 35px;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    font-weight: 500;
}

.pentagon-project-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--pentagon-gold);
    transition: left 0.4s ease;
    z-index: -1;
}

.pentagon-project-cta:hover {
    color: var(--pentagon-deep-black);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(212,175,55,0.3);
}

.pentagon-project-cta:hover::before {
    left: 0;
}

/* Navigation Arrows */
.pentagon-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(212,175,55,0.1) 0%, rgba(212,175,55,0.05) 100%);
    border: 2px solid var(--pentagon-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 100;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.pentagon-nav-arrow:hover {
    background: var(--pentagon-gold);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 10px 40px rgba(212,175,55,0.4);
}

.pentagon-nav-arrow svg {
    width: 24px;
    height: 24px;
    stroke: var(--pentagon-gold);
    transition: stroke 0.3s ease;
}

.pentagon-nav-arrow:hover svg {
    stroke: var(--pentagon-deep-black);
}

.pentagon-nav-prev {
    left: -30px;
}

.pentagon-nav-next {
    right: -30px;
}

/* Progress Indicator */
.pentagon-progress-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 100;
}

.pentagon-progress-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(212,175,55,0.2);
    border: 1px solid rgba(212,175,55,0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

.pentagon-progress-dot.pentagon-active {
    background: var(--pentagon-gold);
    width: 30px;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(212,175,55,0.6);
}

.pentagon-progress-dot:hover {
    background: rgba(212,175,55,0.5);
    transform: scale(1.2);
}

/* Loading Animation */
.pentagon-loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--pentagon-deep-black);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.pentagon-loading-screen.pentagon-hidden {
    opacity: 0;
    visibility: hidden;
}

.pentagon-loading-spinner {
    width: 60px;
    height: 60px;
    border: 3px solid rgba(212,175,55,0.2);
    border-top-color: var(--pentagon-gold);
    border-radius: 50%;
    animation: pentagonSpin 1s linear infinite;
}

@keyframes pentagonSpin {
    to { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .pentagon-project-content {
        gap: 60px;
    }

    .pentagon-3d-stage {
        height: 550px;
    }

    .pentagon-nav-prev {
        left: 10px;
    }

    .pentagon-nav-next {
        right: 10px;
    }
}

@media (max-width: 968px) {
    .pentagon-showcase-wrapper {
        padding: 60px 30px;
    }

    .pentagon-project-content {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .pentagon-project-slide.pentagon-reverse .pentagon-project-content {
        direction: ltr;
    }

    .pentagon-3d-stage {
        height: 450px;
    }

    .pentagon-project-info {
        padding: 20px;
    }

    .pentagon-project-number {
        font-size: 80px;
    }

    .pentagon-nav-arrow {
        width: 50px;
        height: 50px;
    }

    .pentagon-nav-arrow svg {
        width: 20px;
        height: 20px;
    }

    .pentagon-face-front {
        transform: translateZ(100px);
    }

    .pentagon-face-back {
        transform: translateZ(-100px) rotateY(180deg);
    }

    .pentagon-face-left {
        width: 200px;
        transform: rotateY(-90deg) translateZ(calc(50% - 100px));
    }

    .pentagon-face-right {
        width: 200px;
        transform: rotateY(90deg) translateZ(calc(50% - 100px));
    }
}

@media (max-width: 640px) {
    .pentagon-showcase-wrapper {
        padding: 40px 20px;
    }

    .pentagon-section-header {
        margin-bottom: 50px;
    }

    .pentagon-3d-stage {
        height: 350px;
    }

    .pentagon-nav-prev {
        left: 5px;
    }

    .pentagon-nav-next {
        right: 5px;
    }

    .pentagon-progress-indicator {
        bottom: 20px;
    }

    .pentagon-rotation-hint {
        font-size: 10px;
        padding: 8px 15px;
    }
}
/* ===============================
   PENTAGON PREMISES – SERVICES
================================ */

.pp-services-workflow {
  padding: 120px 20px;
  background: linear-gradient(to bottom, #e8e8e8, #d5d5d5, #e8e8e8);
  font-family: 'Poppins', sans-serif;
}

/* Header */
.pp-services-header {
  text-align: center;
  margin-bottom: 80px;
}

.pp-services-title {
  font-size: clamp(42px, 6vw, 68px);
  font-family: 'Kaushan Script', cursive;
  color: #3a3a3a;
}

/* Flow container */
.pp-services-flow {
  position: relative;
}

/* Connecting line */
.pp-services-line {

  position: absolute;
  top: 120px; /* NOT 50% */
  left: 8%;
  right: 8%;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    #8bc34a 0%,
    #9c27b0 25%,
    #ff9800 50%,
    #f44336 75%,
    #ff5722 100%
  );
  border-radius: 4px;
  transform: translateY(-50%);
}

/* Grid */
.pp-services-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: auto;
}

/* Card */
.pp-service-card {
  text-align: center;
  animation: ppFadeUp 0.8s ease forwards;
}

@keyframes ppFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Circle */
.pp-service-circle-wrap {
  position: relative;
  margin-bottom: 25px;
}

.pp-service-circle {
  width: 160px;
  height: 160px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
  transition: transform 0.4s ease;
  position: relative;
  z-index: 2;
}

.pp-service-circle:hover {
  transform: translateY(-10px) scale(1.05);
}

.pp-service-name {
  font-weight: 600;
  font-size: 15px;
  color: #333;
}

/* Rings */
.pp-service-ring {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: conic-gradient(
    var(--ring-color) 0deg 260deg,
    transparent 260deg 360deg
  );
  z-index: 1;
}
.ring-green { --ring-color: #8bc34a; }
.ring-purple { --ring-color: #9c27b0; }
.ring-orange { --ring-color: #ff9800; }
.ring-red { --ring-color: #f44336; }
.ring-darkorange { --ring-color: #ff5722; }


/* Info */
.pp-service-info {
  margin-top: 20px;
}

.pp-service-index {
  display: block;
  font-size: 13px;
  color: #777;
  margin-bottom: 6px;
}

.pp-service-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

/* Responsive */
@media (max-width: 992px) {
  .pp-services-line {
    display: none;
  }

  .pp-services-grid {
    flex-direction: column;
    gap: 60px;
  }
}
:root {
    --navy: #1a2a44;
    --gold: #c5a059;
    --cream: #f4f1ea;
    --transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

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

body { font-family: 'Playfair Display', serif; overflow-x: hidden; }

.sensory-section {
    display: flex;
    width: 100%;
    height: 100vh;
    position: relative;
    background: var(--cream);
}

/* --- Panels --- */
.panel { flex: 1; display: flex; align-items: center; padding: 5%; transition: var(--transition); }
.left-panel { background: var(--cream); }
.right-panel { background: var(--navy); justify-content: center; z-index: 1; }

/* --- Info Text Styling --- */
.info-box { max-width: 420px; color: var(--navy); }
.sense-logo-box { width: 80px; height: auto; margin-bottom: 15px; }
.sense-logo-box img { width: 100%; height: auto; filter: sepia(1) saturate(5) hue-rotate(10deg); }

.info-box h1 { font-size: 4.5rem; color: var(--gold); text-transform: capitalize; margin-bottom: 5px; }
.info-box p { font-size: 1.3rem; font-weight: 700; margin-bottom: 1.5rem; }
.info-box ul { list-style: none; line-height: 1.8; opacity: 0.9; font-family: sans-serif; }

/* --- The Wheel (Reduced Size & Clean) --- */
.wheel-outer-wrap {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 380px; /* Reduced Size */
    height: 380px;
    z-index: 10;
}

.wheel-background-image {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    opacity: 0.2;
    z-index: -1;
    transition: background-image 0.6s ease;
}

.wheel-rotation-layer {
    width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    position: relative;
    transition: var(--transition);
    overflow: hidden; /* Clips the slices */
}

.sense-slice {
    position: absolute;
    width: 50%; height: 50%;
    transform-origin: 0% 100%;
    top: 0; right: 0;
    border: none; /* REMOVED LINES */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.sense-slice:hover { background: rgba(197, 160, 89, 0.1); }

.sense-slice span {
    transform: rotate(-45deg) translate(15px, -50px);
    font-weight: 700;
    color: var(--navy);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: sans-serif;
}

.wheel-hub {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 110px; height: 110px;
    background: var(--navy);
    border: 3px solid var(--gold);
    border-radius: 50%;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.wheel-hub img { width: 100%; filter: brightness(0) invert(1); }

/* --- Right Image Frame (Image 2 Style) --- */
.image-container { position: relative; width: 85%; height: 70%; }
.image-showcase { 
    width: 100%; height: 100%; 
    border: 8px solid white; 
    box-shadow: 15px 15px 0 var(--gold); 
    overflow: hidden; 
}
.image-showcase img { width: 100%; height: 100%; object-fit: cover; }

.case-study-box {
    position: absolute; bottom: -20px; right: -20px;
    width: 85%; background: rgba(26, 42, 68, 0.9);
    backdrop-filter: blur(10px);
    border-left: 4px solid var(--gold);
    padding: 20px; color: white;
}
.case-study-box h4 { color: var(--gold); font-size: 0.7rem; letter-spacing: 2px; margin-bottom: 8px; }
.case-study-box p { font-size: 0.85rem; font-family: sans-serif; line-height: 1.4; }

/* --- RESPONSIVE --- */
@media (max-width: 1024px) {
    .sensory-section { flex-direction: column; height: auto; }
    .wheel-outer-wrap { position: relative; transform: none; left: 0; top: 0; margin: 40px auto; width: 320px; height: 320px; }
    .panel { width: 100%; padding: 60px 5%; height: auto; }
    .info-box h1 { font-size: 3rem; }
}
/* Add this to your CSS to spread the slices around the wheel */
.sense-slice {
    position: absolute;
    width: 50%;
    height: 50%;
    transform-origin: 0% 100%;
    top: 0;
    right: 0;
    /* This line below is the magic fix */
    transform: rotate(calc(60deg * var(--i))); 
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}
/* AWARDS SECTION */
.cp-awards-section {
    padding: 30px 0;
    background-color: #fff;
}

.cp-awards-header {
    text-align: center;
    margin-bottom: 50px;
}

.cp-awards-subtitle {
    font-size: 16px;
    color: #888;
    margin-top: 10px;
}

/* Slider Card Design */
.awardsSwiper {
    padding: 20px 50px 60px 50px !important;
}

.award-card {
    background: #fff;
    padding: 15px;
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease;
    text-align: center;
}

.award-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(197, 160, 89, 0.15); /* Soft gold shadow */
}

.award-card img {
    width: 100%;
    height: 400px;
    object-fit: contain;
    background: #f9f9f9;
    margin-bottom: 20px;
}

.award-info h4 {
    color: #444;
    font-size: 18px;
    margin-bottom: 5px;
}

.award-info p {
    color: #C5A059; /* Gold Theme Color */
    font-weight: 600;
    font-size: 14px;
}

/* Customizing Swiper Navigation */
.swiper-button-next, .swiper-button-prev {
    color: #C5A059 !important;
}

.swiper-pagination-bullet-active {
    background: #C5A059 !important;
}

/* Keep the movement smooth and constant */
.awardsSwiper .swiper-wrapper {
    transition-timing-function: linear !important;
}

/* Customizing the Navigation Buttons to match your theme */
.swiper-button-next, .swiper-button-prev {
    color: #C5A059 !important; /* Your Gold Theme Color */
    background: rgba(255, 255, 255, 0.8);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 18px !important;
    font-weight: bold;
}

.award-img-container {
    width: 100%;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 10px;
}

.award-img-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Container Fix */
.awardsSwiper {
    width: 100%;
    margin: 0 auto;
    overflow: hidden; /* Ensures only 2 slides show */
    padding: 20px 60px 60px 60px !important; /* Extra side padding for buttons */
}

/* The Marquee Effect - Keep this for smooth scrolling */
.awardsSwiper .swiper-wrapper {
    transition-timing-function: linear !important;
}

/* Button Positioning Fix */
.swiper-button-next, .swiper-button-prev {
    color: #C5A059 !important;
    background: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 10;
}

/* Ensure images don't overflow the 2-column view */
.award-img-container {
    width: 100%;
    height: 300px; /* Reduced height for better 2-column fit */
    display: flex;
    align-items: center;
    justify-content: center;
}

.award-img-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.awardsSwiper {
  position: relative;
  overflow: visible; /* IMPORTANT */
}
.swiper-button-prev,
.swiper-button-next {
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.swiper-button-prev {
  left: -25px;
}

.swiper-button-next {
  right: -25px;
}
/* Customizing Swiper Navigation */
.swiper-button-next, .swiper-button-prev {
    color: #C5A059 !important;
    background: rgba(255, 255, 255, 0.8);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Fix for button direction */
.swiper-button-prev {
    left: -25px;
}

.swiper-button-next {
    right: -25px;
}
/* Customizing Swiper Navigation with Arrows */
.swiper-button-next, .swiper-button-prev {
    color: #C5A059 !important; /* Arrow color */
    background: transparent;   /* Make background transparent */
    width: 40px;
    height: 40px;
    font-size: 20px;            /* Set font size for arrows */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional shadow */
}

/* Left Arrow (Previous) */
.swiper-button-prev::after {
    content: '\2190'; /* Left Arrow Unicode */
    font-size: 24px;  /* Adjust arrow size */
}

/* Right Arrow (Next) */
.swiper-button-next::after {
    content: '\2192'; /* Right Arrow Unicode */
    font-size: 24px;  /* Adjust arrow size */
}

/* Fix for button direction */
.swiper-button-prev {
    left: -25px;      /* Position left arrow on the left */
}

.swiper-button-next {
    right: -25px;     /* Position right arrow on the right */
}

/* ===============================
   AURUM METRICS SECTION
================================ */
.aurum-stats-zone {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 100px 8%;
  background: #ffffff;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  text-align: center;
}

/* Vertical Dividers */
.aurum-stat-card {
  position: relative;
  padding: 0 30px;
}

.aurum-stat-card:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  width: 1px;
  background: #e5e5e5;
}

/* Number */
.aurum-stat-number {
  font-size: 56px;
  font-weight: 700;
  font-family: "Playfair Display", serif;
  color: #d4bc58;
  margin-bottom: 12px;
}
/* LIGHTBOX */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  z-index: 9999;
}

.gallery-lightbox.active {
  opacity: 1;
  visibility: visible;
}

/* CONTENT */
.gallery-lightbox-content {
  max-width: min(1100px, 95vw);
  max-height: 85vh;
  position: relative;
}

.gallery-lightbox-content img {
  width: 100%;
  height: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  background: #111;
}

/* CLOSE BUTTON (TOP RIGHT) */
.gallery-lightbox-close {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-size: 30px;
  line-height: 44px;
  text-align: center;
  background: rgba(255,255,255,0.9);
  color: #111;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  transition: transform 0.2s ease, background 0.2s ease;
  z-index: 10000;
}

.gallery-lightbox-close:hover {
  transform: scale(1.06);
  background: #fff;
}

/* MAKE GALLERY IMAGES LOOK CLICKABLE */
.gallery-image-card img {
  cursor: zoom-in;
}

/* Label */
.aurum-stat-card p {
  font-size: 18px;
  color: #666;
  letter-spacing: 0.5px;
}

/* Responsive */
@media (max-width: 992px) {
  .aurum-stats-zone {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 50px;
  }

  .aurum-stat-card::after {
    display: none;
  }
}

@media (max-width: 600px) {
  .aurum-stats-zone {
    grid-template-columns: 1fr;
  }
}
.gallery-lightbox-close {
  position: fixed;
  top: 25px;
  right: 25px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: rgba(255,255,255,0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
  box-shadow: 0 15px 35px rgba(0,0,0,0.25);
  transition: all 0.3s ease;
}

.gallery-lightbox-close:hover {
  transform: scale(1.1);
  background: #fff;
}


        /* Contact Section */
        .contact-section {
            width: 100%;
        }

        /* Smooth Appearance Classes */
        .fade-in-element {
            opacity: 0;
            transform: translateY(40px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        .fade-in-element.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .slide-in-left {
            opacity: 0;
            transform: translateX(-60px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        .slide-in-left.visible {
            opacity: 1;
            transform: translateX(0);
        }

        .slide-in-right {
            opacity: 0;
            transform: translateX(60px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        .slide-in-right.visible {
            opacity: 1;
            transform: translateX(0);
        }

        .scale-in {
            opacity: 0;
            transform: scale(0.9);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        .scale-in.visible {
            opacity: 1;
            transform: scale(1);
        }

        /* Header */
        .contact-header {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 60px 40px 60px;
        }

        .contact-pre-title {
            font-size: 16px;
            font-weight: 400;
            color: #666666;
            margin-bottom: 10px;
            letter-spacing: 0.5px;
        }

        .contact-title {
            font-family: 'Lora', serif;
            font-size: clamp(42px, 5vw, 58px);
            font-weight: 400;
            color: #2a2a2a;
            letter-spacing: 1px;
        }

        /* Main Contact Box */
        .contact-box {
            background: #f5f5f5;
            padding: 60px;
            max-width: 1400px;
            margin: 0 auto;
        }

        .contact-content {
            display: grid;
            grid-template-columns: auto 1fr auto;
            gap: 80px;
            align-items: center;
        }

        /* Logo */
        .company-logo {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .logo-icon {
            width: 80px;
            height: 80px;
            transition: transform 0.3s ease;
        }

        .company-logo:hover .logo-icon {
            transform: rotate(5deg) scale(1.05);
        }

        .logo-text {
            font-family: 'Lora', serif;
            font-size: 38px;
            font-weight: 600;
            color: #2a2a2a;
            line-height: 1.2;
            letter-spacing: 2px;
        }

        .logo-subtext {
            font-size: 14px;
            font-weight: 400;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: #666666;
        }

        /* Address Section */
        .contact-info-group {
            display: flex;
            gap: 60px;
        }

        .info-block {
            flex: 1;
        }

        .info-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 12px;
        }

        .info-icon {
            width: 24px;
            height: 24px;
            color: #4a4a4a;
            transition: transform 0.3s ease;
        }

        .info-block:hover .info-icon {
            transform: scale(1.1);
        }

        .info-label {
            font-size: 16px;
            font-weight: 600;
            color: #2a2a2a;
        }

        .info-content {
            font-size: 15px;
            line-height: 1.7;
            color: #4a4a4a;
            padding-left: 36px;
        }

        .info-link {
            color: #4a4a4a;
            text-decoration: none;
            transition: color 0.3s ease;
            display: block;
            margin-top: 4px;
        }

        .info-link:hover {
            color: #2a2a2a;
            text-decoration: underline;
        }

        /* Bottom Bar */
        .contact-bottom {
            background: #ffffff;
            padding: 40px 60px;
            max-width: 1400px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #e0e0e0;
        }

        /* Social Section */
        .social-section {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .social-label {
            font-size: 15px;
            font-weight: 500;
            color: #2a2a2a;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .social-icons {
            display: flex;
            gap: 15px;
        }

    /* Social Icons – STATIC (NO HOVER, NO ANIMATION) */
.social-link {
  width: 44px;
  height: 44px;
  border: 2px solid #2a2a2a;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2a2a2a;
  text-decoration: none;

  /* force visibility */
  opacity: 1;
  transform: none;

  /* remove animations */
  transition: none;
}

/* Icon size */
.social-link svg {
  width: 20px;
  height: 20px;
}

/* REMOVE hover effects completely */
.social-link:hover {
  background: none;
  color: #2a2a2a;
  transform: none;
}
/* Contact details: icon + text in same line */
.contact-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

/* Icons */
.contact-line i {
  font-size: 16px;
  color: #2a2a2a;
  min-width: 18px; /* keeps vertical alignment clean */
}

/* Links */
.contact-line .info-link {
  margin: 0;
  padding: 0;
  display: inline-block;
}

        .newsletter-section {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .newsletter-label {
            font-size: 15px;
            font-weight: 400;
            color: #4a4a4a;
            white-space: nowrap;
        }

        .newsletter-form {
            display: flex;
            align-items: center;
            gap: 0;
        }

        .newsletter-input {
            padding: 14px 24px;
            font-size: 15px;
            border: 2px solid #2a2a2a;
            border-right: none;
            border-radius: 30px 0 0 30px;
            outline: none;
            font-family: 'Poppins', sans-serif;
            width: 280px;
            color: #2a2a2a;
            background: #ffffff;
            transition: all 0.3s ease;
        }

        .newsletter-input::placeholder {
            color: #999999;
        }

        .newsletter-input:focus {
            border-color: #4a4a4a;
        }

        .newsletter-submit {
            width: 52px;
            height: 52px;
            background: #4a4a4a;
            border: 2px solid #4a4a4a;
            border-radius: 0 30px 30px 0;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s ease;
            color: #ffffff;
        }

        .newsletter-submit:hover {
            background: #2a2a2a;
            border-color: #2a2a2a;
            transform: translateX(3px);
        }

        .newsletter-submit svg {
            width: 22px;
            height: 22px;
        }

        /* Responsive Design */
        @media (max-width: 1200px) {
            .contact-content {
                gap: 50px;
            }

            .contact-info-group {
                gap: 40px;
            }
        }

        @media (max-width: 968px) {
            .contact-header,
            .contact-box,
            .contact-bottom {
                padding-left: 40px;
                padding-right: 40px;
            }

            .contact-content {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .company-logo {
                justify-content: center;
            }

            .contact-info-group {
                flex-direction: column;
                gap: 30px;
            }

            .contact-bottom {
                flex-direction: column;
                gap: 30px;
                text-align: center;
            }

            .social-section {
                flex-direction: column;
                gap: 15px;
            }

            .newsletter-section {
                flex-direction: column;
                gap: 15px;
                width: 100%;
            }

            .newsletter-form {
                width: 100%;
            }

            .newsletter-input {
                flex: 1;
                width: 100%;
            }
        }

        @media (max-width: 640px) {
            .contact-header,
            .contact-box,
            .contact-bottom {
                padding-left: 20px;
                padding-right: 20px;
            }

            .contact-box {
                padding-top: 40px;
                padding-bottom: 40px;
            }

            .logo-icon {
                width: 60px;
                height: 60px;
            }

            .logo-text {
                font-size: 28px;
            }

            .social-icons {
                flex-wrap: wrap;
                justify-content: center;
            }
        }
		/* Main Forms Section */
        .inquiry-forms-section {
            max-width: 100%;
            margin: 0 auto;
            background: white;
            box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
            display: flex;
            min-height: 100vh;
        }

        /* Sidebar Navigation Panel */
        .forms-sidebar-navigation {
            width: 300px;
            background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
            padding: 60px 0 40px;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        .forms-sidebar-navigation::after {
            content: '';
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 1px;
            background: linear-gradient(180deg, transparent, #d4af37, transparent);
        }

        .sidebar-header-block {
            padding: 0 35px 40px;
            border-bottom: 1px solid rgba(212, 175, 55, 0.2);
            margin-bottom: 30px;
        }

        .sidebar-main-title {
            color: #d4af37;
            font-size: 26px;
            font-weight: 300;
            letter-spacing: 1px;
            margin-bottom: 8px;
        }

        .sidebar-subtitle-text {
            color: #888;
            font-size: 13px;
            font-weight: 300;
            letter-spacing: 0.5px;
        }

        .form-navigation-list {
            display: flex;
            flex-direction: column;
        }

        .form-tab-switcher {
            background: transparent;
            border: none;
            color: #999;
            padding: 20px 35px;
            text-align: left;
            cursor: pointer;
            font-size: 15px;
            font-weight: 300;
            letter-spacing: 0.5px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            border-left: 2px solid transparent;
        }

        .form-tab-switcher::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 2px;
            height: 0;
            background: #d4af37;
            transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .form-tab-switcher:hover {
            color: #d4af37;
            padding-left: 45px;
        }

        .form-tab-switcher.is-active-tab {
            color: white;
            border-left-color: #d4af37;
            padding-left: 45px;
            background: rgba(212, 175, 55, 0.05);
        }

        .form-tab-switcher.is-active-tab::before {
            height: 100%;
        }

        /* Main Content Area */
        .forms-display-wrapper {
            flex: 1;
            padding: 60px 80px;
            overflow-y: auto;
            background: #fafbfc;
        }

        .individual-form-container {
            display: none;
            animation: formFadeInSlide 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .individual-form-container.is-visible-form {
            display: block;
        }

        @keyframes formFadeInSlide {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .form-heading-primary {
            color: #1a1a1a;
            font-size: 36px;
            margin-bottom: 12px;
            font-weight: 300;
            letter-spacing: -0.5px;
            position: relative;
            padding-bottom: 20px;
        }

        .form-heading-primary::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60px;
            height: 2px;
            background: linear-gradient(90deg, #d4af37, transparent);
        }

        .form-description-text {
            color: #666;
            font-size: 15px;
            margin-bottom: 50px;
            font-weight: 300;
            line-height: 1.6;
        }

        .inquiry-form-element {
            width: 100%;
        }

        .form-input-wrapper {
            margin-bottom: 28px;
        }

        .dual-column-input-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 25px;
            margin-bottom: 28px;
        }

        .input-field-label {
            display: block;
            color: #2a2a2a;
            font-weight: 400;
            margin-bottom: 10px;
            font-size: 13px;
            letter-spacing: 0.3px;
            text-transform: uppercase;
        }

        .required-field-indicator {
            color: #d4af37;
            margin-left: 3px;
        }

        .text-input-field,
        .email-input-field,
        .phone-input-field,
        .number-input-field,
        .url-input-field,
        .file-input-field,
        .dropdown-select-field,
        .textarea-input-field {
            width: 100%;
            padding: 15px 18px;
            border: 1px solid #e0e0e0;
            border-radius: 2px;
            font-size: 15px;
            transition: all 0.3s ease;
            background: white;
            font-family: inherit;
            color: #2a2a2a;
            font-weight: 300;
        }

        .text-input-field:focus,
        .email-input-field:focus,
        .phone-input-field:focus,
        .number-input-field:focus,
        .url-input-field:focus,
        .dropdown-select-field:focus,
        .textarea-input-field:focus,
        .file-input-field:focus {
            outline: none;
            border-color: #d4af37;
            box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.08);
        }

        .text-input-field::placeholder,
        .email-input-field::placeholder,
        .phone-input-field::placeholder,
        .number-input-field::placeholder,
        .url-input-field::placeholder,
        .textarea-input-field::placeholder {
            color: #aaa;
            font-weight: 300;
        }

        .textarea-input-field {
            resize: vertical;
            min-height: 140px;
            line-height: 1.6;
        }

        .dropdown-select-field {
            cursor: pointer;
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23666' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 18px center;
            padding-right: 45px;
        }

        .primary-submit-button {
            background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
            color: #d4af37;
            border: 1px solid rgba(212, 175, 55, 0.3);
            padding: 16px 50px;
            border-radius: 2px;
            font-size: 13px;
            font-weight: 400;
            letter-spacing: 2px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            margin-top: 20px;
        }

        .primary-submit-button:hover {
            background: linear-gradient(135deg, #d4af37 0%, #b8941f 100%);
            color: #1a1a1a;
            border-color: #d4af37;
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(212, 175, 55, 0.25);
        }

        .primary-submit-button:active {
            transform: translateY(0);
        }

        .file-upload-container {
            position: relative;
            overflow: hidden;
        }

        .file-size-format-info {
            font-size: 12px;
            color: #999;
            margin-top: 8px;
            font-weight: 300;
        }

        /* Responsive Design */
        @media (max-width: 968px) {
            .inquiry-forms-section {
                flex-direction: column;
            }

            .forms-sidebar-navigation {
                width: 100%;
                padding: 30px 0 20px;
            }

            .forms-sidebar-navigation::after {
                display: none;
            }

            .sidebar-header-block {
                padding: 0 20px 20px;
            }

            .form-tab-switcher {
                padding: 15px 20px;
            }

            .form-tab-switcher.is-active-tab,
            .form-tab-switcher:hover {
                padding-left: 30px;
            }

            .forms-display-wrapper {
                padding: 40px 20px;
            }

            .dual-column-input-row {
                grid-template-columns: 1fr;
            }

            .form-heading-primary {
                font-size: 28px;
            }
        }

        .informational-note-box {
            background: #fafafa;
            border-left: 2px solid #d4af37;
            padding: 15px 20px;
            margin-bottom: 30px;
            font-size: 13px;
            color: #666;
            font-weight: 300;
            line-height: 1.6;
        }

        /* Custom scrollbar */
        .forms-display-wrapper::-webkit-scrollbar {
            width: 8px;
        }

        .forms-display-wrapper::-webkit-scrollbar-track {
            background: #f0f0f0;
        }

        .forms-display-wrapper::-webkit-scrollbar-thumb {
            background: #d4af37;
            border-radius: 4px;
        }

        .forms-display-wrapper::-webkit-scrollbar-thumb:hover {
            background: #b8941f;
        }
/*=========Services section=========*/
/* =========================================
   PENTAGON LINE OF WORK SECTION - CSS
   ========================================= */

/* Font Import */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

/* Section Container */
.pentagon-workflow-section {
    font-family: 'Poppins', sans-serif;
    background: #f8f8f8;
    padding: 80px 20px;
    overflow: hidden;
}

.pentagon-workflow-container {
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
}

/* Header */
.pentagon-workflow-header {
    text-align: center;
    margin-bottom: 80px;
}

.pentagon-workflow-title {
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 600;
    color: #2a2a2a;
    margin-bottom: 15px;
}

.pentagon-workflow-subtitle {
    font-size: 18px;
    color: #666;
    font-weight: 300;
}

/* Main Workflow Area */
.pentagon-workflow-diagram {
    position: relative;
    width: 100%;
    padding: 40px 0 60px 0;
}

/* Connecting Line */
.pentagon-connection-line {
    position: absolute;
    top: 100px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(to right, 
        #111111 0%, 
        #111111 20%,
        #2b2b2b 20%,
        #2b2b2b 40%,
        #4a4a4a 40%,
        #4a4a4a 60%,
        #6b6b6b 60%,
        #6b6b6b 80%,
        #8c8c8c 80%,
        #8c8c8c 100%
    );
    z-index: 1;
}

/* Connection dots */
.pentagon-connection-dots {
    position: absolute;
    top: 100px;
    left: 10%;
    right: 10%;
    height: 3px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
}

.pentagon-connection-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Grey-scale borders */
.pentagon-connection-dot:nth-child(1) { border-color: #111111; }
.pentagon-connection-dot:nth-child(2) { border-color: #2b2b2b; }
.pentagon-connection-dot:nth-child(3) { border-color: #4a4a4a; }
.pentagon-connection-dot:nth-child(4) { border-color: #6b6b6b; }
.pentagon-connection-dot:nth-child(5) { border-color: #8c8c8c; }

/* Service Stages Container */
.pentagon-stages-container {
    position: relative;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 0 60px;
}

/* Individual Stage */
.pentagon-service-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    opacity: 0;
    transform: translateY(30px);
    animation: pentagonFadeInStage 0.8s ease-out forwards;
}

.pentagon-service-stage:nth-child(1) { animation-delay: 0.3s; }
.pentagon-service-stage:nth-child(2) { animation-delay: 0.5s; }
.pentagon-service-stage:nth-child(3) { animation-delay: 0.7s; }
.pentagon-service-stage:nth-child(4) { animation-delay: 0.9s; }
.pentagon-service-stage:nth-child(5) { animation-delay: 1.1s; }

@keyframes pentagonFadeInStage {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Circular Node */
.pentagon-stage-node {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 700;
    color: #1f1f1f;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    margin-bottom: 20px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    z-index: 10;
}

.pentagon-service-stage:hover .pentagon-stage-node {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 22px 45px rgba(0, 0, 0, 0.18);
}

/* Premium Grey + Gold Color Coding */
.pentagon-service-stage:nth-child(1) .pentagon-stage-node {
    border-color: #111111; /* Deep Black */
}

.pentagon-service-stage:nth-child(2) .pentagon-stage-node {
    border-color: #3a3a3a; /* Dark Grey */
}

.pentagon-service-stage:nth-child(3) .pentagon-stage-node {
    border-color: #7a7a7a; /* Medium Grey */
}

.pentagon-service-stage:nth-child(4) .pentagon-stage-node {
    border-color:  #3a3a3a; /* Soft Gold */
}

.pentagon-service-stage:nth-child(5) .pentagon-stage-node {
    border-color:  #111111; /* Premium Light Gold */
}


/* Stage Details */
.pentagon-stage-details {
    text-align: center;
    max-width: 220px;
}

.pentagon-stage-number {
    font-size: 13px;
    font-weight: 600;
    color: #999;
    margin-bottom: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.pentagon-stage-title {
    font-size: 17px;
    font-weight: 600;
    color: #2a2a2a;
    line-height: 1.4;
    margin-bottom: 12px;
}

.pentagon-stage-description {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
    font-weight: 300;
}

/* Info boxes below each stage */
.pentagon-stage-info-box {
    background: #ffffff;
    border-radius: 12px;
    padding: 25px;
    margin-top: 40px;
    border-left: 4px solid;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
    height: 220px; /* same height for all */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.pentagon-service-stage:nth-child(1) .pentagon-stage-info-box { border-color: #4d4f4f; }
.pentagon-service-stage:nth-child(2) .pentagon-stage-info-box { border-color: #b58d35; }
.pentagon-service-stage:nth-child(3) .pentagon-stage-info-box { border-color: #4d4f4f; }
.pentagon-service-stage:nth-child(4) .pentagon-stage-info-box { border-color: #b58d35; }
.pentagon-service-stage:nth-child(5) .pentagon-stage-info-box { border-color: #4d4f4f; }

.pentagon-service-stage.pentagon-active .pentagon-stage-info-box {
    opacity: 1;
    transform: translateY(0);
}

.pentagon-info-box-title {
    font-size: 15px;
    font-weight: 600;
    color: #2a2a2a;
    margin-bottom: 12px;
}

.pentagon-info-box-content {
    font-size: 11px;
    color: #666;
    line-height: 1.7;
}
.pentagon-service-stage {
    min-height: 520px; /* keeps columns equal */
}

/* ==============================
   INFO BOX INTERACTION EFFECTS
   ============================== */

.pentagon-stage-info-box {
  position: relative;
  cursor: pointer;
  transition: 
    transform 0.35s ease,
    box-shadow 0.35s ease,
    z-index 0.35s ease;
  will-change: transform;
}

/* Hover enlarge (desktop) */
.pentagon-stage-info-box:hover {
  transform: scale(1.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
  z-index: 5;
}

/* Click active (mobile & desktop) */
.pentagon-stage-info-box.pentagon-info-active {
  transform: scale(1.12);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
  z-index: 10;
}

/* Optional smooth inner emphasis */
.pentagon-stage-info-box::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.12),
    rgba(255, 255, 255, 0)
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.pentagon-stage-info-box:hover::after,
.pentagon-stage-info-box.pentagon-info-active::after {
  opacity: 1;
}
.pentagon-stage-info-box {
    background: #ffffff;
    border-radius: 14px;
    padding: 30px;
    margin-top: 50px;
    border-left: 4px solid;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);

    height: 280px; /* Increased height */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    transition: 
        transform 0.35s ease,
        box-shadow 0.35s ease,
        z-index 0.35s ease;
}
.pentagon-service-stage {
    flex: 1;
    min-height: 600px; /* Increased overall column height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: relative;

    opacity: 0;
    transform: translateY(30px);
    animation: pentagonFadeInStage 0.8s ease-out forwards;
}
.pentagon-stages-container {
    display: flex;
    justify-content: space-between;
    align-items: stretch; /* IMPORTANT */
    gap: 20px;
    padding: 0 60px;
}
.pentagon-stage-info-box {
    min-height: 320px;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .pentagon-stages-container {
        padding: 0 30px;
        gap: 15px;
    }

    .pentagon-stage-node {
        width: 85px;
        height: 85px;
        font-size: 28px;
    }

    .pentagon-stage-title {
        font-size: 15px;
    }

    .pentagon-stage-details {
        max-width: 180px;
    }
}

@media (max-width: 968px) {
    .pentagon-workflow-section {
        padding: 60px 20px;
    }

    .pentagon-workflow-diagram {
        padding-bottom: 40px;
    }

    .pentagon-connection-line,
    .pentagon-connection-dots {
        display: none;
    }

    .pentagon-stages-container {
        flex-direction: column;
        align-items: center;
        gap: 60px;
        padding: 0 20px;
    }

    .pentagon-service-stage {
        max-width: 500px;
        width: 100%;
    }

    .pentagon-stage-details {
        max-width: 100%;
    }

    .pentagon-stage-info-box {
        margin-top: 20px;
        min-height: auto;
    }
}

@media (max-width: 640px) {
    .pentagon-workflow-header {
        margin-bottom: 50px;
    }

    .pentagon-stage-node {
        width: 75px;
        height: 75px;
        font-size: 26px;
    }

    .pentagon-stages-container {
        gap: 50px;
    }

    .pentagon-stage-info-box {
        padding: 20px;
    }
}

/* SECTION */
.gallery-tabs-section{
  max-width:1400px;
  margin:0 auto;
  padding:80px 40px;
  background:#fff;
}

/* NAV */
.gallery-navigation-bar{
  display:flex;
  justify-content:center;
  gap:60px;
  border-bottom:1px solid #e5e5e5;
  margin-bottom:50px;
}

.gallery-nav-button{
  background:none;
  border:none;
  padding:14px 0;
  font-size:18px;
  font-weight:500;
  color:#777;
  cursor:pointer;
  position:relative;
}

.gallery-nav-button.active{
  color:#111;
}

.gallery-nav-button.active::after{
  content:'';
  position:absolute;
  bottom:-1px;
  left:0;
  width:100%;
  height:2px;
  background:#b08d57; /* brand gold */
}

/* PANELS */
.gallery-tab-panel{
  display:none;
}
.gallery-tab-panel.active{
  display:block;
}

/* GRID (AUTO ADJUSTS BASED ON IMAGE COUNT) */
.gallery-images-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:24px;
}

/* IMAGE CARD */
.gallery-image-card{
  width:100%;
  overflow:hidden;
  border-radius:4px;
}

.gallery-image-card img{
  width:100%;
  height:100%;
  max-height:520px;
  object-fit:cover;
  display:block;
}

/* SINGLE IMAGE = HERO */
.gallery-images-grid:has(.gallery-image-card:nth-child(1):last-child){
  grid-template-columns:1fr;
}

.gallery-images-grid:has(.gallery-image-card:nth-child(1):last-child) img{
  max-height:300px;
  max-width: 400px;
}

/* RESPONSIVE */
@media(max-width:768px){
  .gallery-navigation-bar{
    gap:30px;
    font-size:16px;
  }

  .gallery-images-grid{
    grid-template-columns:1fr;
  }
}/* Layout Wrapper */
/* Container & Global Labels */
/* Container Spacing */
.cp-branding-wrapper { margin-bottom: 120px; }

/* Section Heading */
.cp-section-main-label {
    font-size: 24px;
    font-weight: 600;
    color: #444;
    border-bottom: 3px solid #C5A059;
    display: inline-block;
    margin-bottom: 40px;
    text-transform: uppercase;
}

/* Grid Logic for the Overlap */
.cp-overlap-layout {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: auto 120px; /* Space for the bottom overhang */
}

/* The Beige Card */
.cp-text-card {
    grid-column: 1 / span 10;
    grid-row: 1;
    background-color: #F4EFE6; /* Matching beige from images */
    padding: 60px 320px 80px 60px; /* Right padding clears image overlap */
    z-index: 1;
}

/* The Overlapping Image */
.cp-visual-box {
    grid-column: 7 / span 6; /* Starts halfway and hangs off the side */
    grid-row: 1 / span 2; /* Hangs off the bottom */
    z-index: 2;
    margin-top: 150px; /* Aligns with reference image placement */
}

.cp-overlap-photo {
    width: 100%;
    border: 10px solid #fff; /* Thick white frame */
    box-shadow: 20px 20px 50px rgba(0,0,0,0.1);
}

/* Section 2: Why Partner Grid */
.cp-why-partner-section { padding-bottom: 80px; }
.cp-why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.cp-icon-list { list-style: none; padding: 0; margin-top: 30px; }
.cp-icon-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}
.cp-icon-circle {
    width: 45px;
    height: 45px;
    background: #F4EFE6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #C5A059;
    font-weight: bold;
    flex-shrink: 0;
}

/* Responsive Handling */
@media (max-width: 991px) {
    .cp-overlap-layout, .cp-why-grid { display: block; }
    .cp-text-card { padding: 40px 20px; }
    .cp-visual-box { margin-top: -50px; padding: 0 20px; }
}
.cp-visual-box {
    grid-column: 7 / span 6;
    max-width: 420px;   /* ⬅️ reduce image size */
    margin-left: auto;
    margin-top: 150px;
    z-index: 2;
}

.cp-overlap-photo {
    width: 100%;
    height: auto;
}

/* ===============================
   CLIENTS SECTION – PREMIUM STYLE
   =============================== */

.clients-section {
    background: #ffffff;
    padding: 90px 0;
}

.clients-title {
    font-size: 46px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 60px;
    color: #c9a24d; /* muted gold */
    letter-spacing: 1px;
}

.clients-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 35px;
}

/* Logo Card */
.client-logo {
    background: #ffffff;
    border-radius: 14px;
    padding: 35px 20px;
    text-align: center;
    border: 1px solid #eaeaea;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    transition: all 0.35s ease;
}

.client-logo img {
    max-width: 140px;
    max-height: 70px;
    object-fit: contain;
    transition: transform 0.35s ease;
}

/* Hover Effect */
.client-logo:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.08);
}

.client-logo:hover img {
    transform: scale(1.06);
}

/* View More Button */
.view-more-wrapper {
    text-align: center;
    margin-top: 60px;
}

.view-more-btn {
    padding: 14px 46px;
    font-size: 14px;
    letter-spacing: 2px;
    border-radius: 40px;
    border: 2px solid #c9a24d;
    color: #c9a24d;
    background: transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.view-more-btn:hover {
    background: #c9a24d;
    color: #ffffff;
}

/* Hide extra clients initially */
.client-logo.extra-client {
    display: none;
}

/* Show on View More */
.clients-section.show-all .client-logo.extra-client {
    display: block;
}

/* Responsive */
@media (max-width: 992px) {
    .clients-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .clients-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media (max-width: 480px) {
    .clients-grid {
        grid-template-columns: 1fr;
    }
}

/*Project Enquiry Form*/
/* ===============================
   Project Enquiry Section
================================= */

.luxury-enquiry-section {
    background: #ffffff;
    padding: 120px 20px 80px 20px;
    display: flex;
    justify-content: center;
}

/* Main Box */
.luxury-enquiry-box {
    position: relative;
    background: #f4f4f4;
    max-width: 700px;
    width: 100%;
    padding: 60px 70px;
    margin: 40px 0;
    box-shadow: 0 30px 60px rgba(0,0,0,0.35);
    text-align: center;
}

/* Thick Black Frame Around Form */
.luxury-enquiry-box::before {
    content: "";
    position: absolute;
    top: -25px;
    bottom: -25px;
    left: -25px;
    right: -25px;
    border: 8px solid #000000;
    pointer-events: none;
}

/* Heading */
.luxury-enquiry-box h2 {
    font-size: 32px;
    letter-spacing: 6px;
    color: #c9a24d;
    margin-bottom: 10px;
    font-weight: 500;
}

/* Subtitle */
.luxury-enquiry-box p {
    font-size: 13px;
    letter-spacing: 2px;
    color: #6b6b6b;
    margin-bottom: 40px;
    text-transform: uppercase;
}

/* Form */
.luxury-enquiry-form {
    text-align: left;
}

/* Form Row */
.form-row {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
}

/* Inputs & Textarea */
.form-row input,
.form-row textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #9e9e9e;
    padding: 10px 5px;
    font-size: 14px;
    color: #2a2a2a;
    outline: none;
}

/* Textarea */
.form-row textarea {
    resize: none;
    height: 80px;
}

/* Placeholder */
.form-row input::placeholder,
.form-row textarea::placeholder {
    color: #7a7a7a;
}

/* Button */
.luxury-enquiry-form button {
    margin-top: 30px;
    background: #c9a24d;
    border: 2px solid #c9a24d;
    color: #ffffff;
    padding: 14px 0;
    letter-spacing: 3px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
}

.luxury-enquiry-form button:hover {
    background: transparent;
    color: #c9a24d;
}

/* Responsive */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 20px;
    }

    .luxury-enquiry-box {
        padding: 40px 30px;
    }

    .luxury-enquiry-box::before {
        top: -15px;
        bottom: -15px;
        left: -15px;
        right: -15px;
        border: 6px solid #000000;
    }
}

/* ===============================
   MOBILE HEADER FIX
   =============================== */

@media (max-width: 991px) {

  /* Disable desktop navbar spacing */
  .header-area-one .navbar-collapse {
    position: static !important;
    transform: none !important;
    display: none !important;
  }

  .header-area-one .navbar {
    min-height: auto;
    padding: 0;
  }

  /* Prevent ghost spacing */
  #header-fixed-height {
    display: none !important;
  }
}
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
.cp-visual-side {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-puzzle-img {
    width: 100%;
    max-width: 480px;     /* controls image size */
    height: auto;
    border-radius: 16px;
    object-fit: cover;
}
@media (max-width: 768px) {
    .cp-why-grid {
        grid-template-columns: 1fr;
    }

    .cp-puzzle-img {
        max-width: 100%;
        margin-bottom: 30px;
    }
}
.brochure-section {
  text-align: center;
  padding: 50px 0;
}

.brochure-title {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #333;
}

.brochure-button {
  display: inline-block;
  padding: 15px 30px;
  background-color: #424443;  /* Dark green button */
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.brochure-button:hover {
  background-color: #978154;  /* Golden color on hover */
}
/* ===============================
   PENTAGON FAQ SECTION STYLES
=============================== */

.pp-faq-section {
  background: linear-gradient(180deg, #fafafa, #ffffff);
  padding: 60px 0; /* reduced height */
}

/* Heading */
.pp-faq-heading {
  text-align: center;
  margin-bottom: 40px;
}

.pp-faq-subtitle {
  font-size: 14px;
  letter-spacing: 1px;
  color: #666;
  display: block;
  margin-bottom: 6px;
}

.pp-faq-title {
  font-size: 38px;
  font-weight: 500;
  color: #2b1e1e;
}

/* Layout */
.pp-faq-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 50px;
  align-items: center;
}

/* Image */
.pp-faq-image img {
  width: 100%;
  max-width: 420px;
  border-radius: 12px;
  object-fit: cover;
}

/* Accordion */
.pp-faq-accordion {
  max-width: 100%;
}

/* FAQ item */
.pp-faq-item {
  border-bottom: 1px solid rgba(43, 30, 30, 0.25);
  padding: 18px 0;
}

/* Question button (FONT SIZE UNCHANGED) */
.pp-faq-button {
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font-size: 20px;
  font-weight: 500;
  text-align: left;
  color: #2b1e1e;
  line-height: 1.4;
  position: relative;
  cursor: pointer;
}

/* Plus / minus */
.pp-faq-button::after {
  content: "+";
  font-size: 26px;
  font-weight: 300;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.pp-faq-button:not(.collapsed)::after {
  content: "−";
  color: #b38b2d;
}

/* Answer content (FONT SIZE UNCHANGED) */
.pp-faq-content {
  padding-top: 14px;
  max-width: 92%;
}

.pp-faq-content p {
  font-size: 15.5px;
  line-height: 1.8;
  color: #555;
}

/* Hover */
.pp-faq-item:hover .pp-faq-button {
  color: #b38b2d;
}

/* ===============================
   RESPONSIVE
=============================== */
@media (max-width: 991px) {
  .pp-faq-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .pp-faq-image {
    text-align: center;
  }

  .pp-faq-image img {
    max-width: 320px;
    margin: auto;
  }
}

@media (max-width: 576px) {
  .pp-faq-title {
    font-size: 30px;
  }

  .pp-faq-section {
    padding: 45px 0;
  }
}

/*upcomming section in project*/
/* GRID LAYOUT */
.upcoming-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  margin-top: 40px;
}

/* CARD */
.upcoming-card {
  display: block;
  text-decoration: none;
  color: #000;
  transition: 0.4s ease;
}

/* IMAGE */
.upcoming-card img {
  width: 100%;
  height: 270px;
  object-fit: cover;
  border-radius: 20px;
  display: block;
  transition: 0.4s ease;
}

/* TITLE */
.upcoming-card h3 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 14px;
}

/* LOCATION */
.upcoming-card p {
  font-size: 14px;
  color: #c9a14a;   /* your gold theme */
  margin-top: 5px;
}

/* HOVER EFFECT */
.upcoming-card:hover img {
  transform: scale(1.05);
}

.upcoming-card:hover h3 {
  color: #c9a14a;
}

/* TABLET VIEW */
@media (max-width: 992px) {
  .upcoming-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* MOBILE VIEW */
@media (max-width: 600px) {
  .upcoming-grid {
    grid-template-columns: 1fr;
  }

  .upcoming-card img {
    height: 230px;
  }
}
/*marque line*/
.services-marquee{
  background:#000;
  color:#fff;
  text-align:center;
  padding:18px 0 12px;
  overflow:hidden;
}

/* BIG TITLE */
.services-title{
  font-size:32px;
  font-weight:700;
  letter-spacing:2px;
  margin-bottom:10px;
}

/* SCROLL AREA */
.services-scroll{
  overflow:hidden;
  width:100%;
}

.services-track{
  display:inline-flex;
  gap:60px;
  white-space:nowrap;
  animation:scrollServices 35s linear infinite; /* slower */
  font-size:18px;
  font-weight:500;
}

/* GOLD DOT SEPARATOR */
.services-track span::after{
  content:"•";
  margin-left:60px;
  color:#caa45f;
}

/* REMOVE DOT FROM LAST ITEM */
.services-track span:last-child::after{
  content:"";
}

@keyframes scrollServices{
  from{ transform:translateX(100%); }
  to{ transform:translateX(-100%); }
}
@media(max-width:768px){

  .services-title{
    font-size:22px;
  }

  .services-track{
    font-size:13px;
    gap:35px;
    animation-duration:25s; /* slower on mobile */
  }

  .services-track span::after{
    margin-left:35px;
  }
  @media(max-width:768px){

  .services-track span::after{
    margin-left:35px;
  }

  .services-track span:last-child::after{
    content:"";
  }

}
}

/**/
/* GRID */
.upcoming-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 30px;
}

/* CARD */
.upcoming-card {
  background: #fff;
  border-radius: 22px;
  padding: 40px 20px;
  text-align: center;
  position: relative;
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
  transition: 0.35s;
}

/* GOLD SIDE BORDER */
.upcoming-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 25px;
  bottom: 25px;
  width: 4px;
  background: #c59d5f;
  border-radius: 10px;
}

/* BIG COMING SOON TEXT */
.coming-soon-big {
  font-size: 42px;
  font-weight: 700;
  line-height: 1.1;
  color: #c59d5f;
  letter-spacing: 2px;
  margin-bottom: 25px;
}

/* LOCATION */
.upcoming-card h3 {
  font-size: 18px;
  margin-bottom: 8px;
}

/* SMALL TEXT */
.coming-soon-small {
  font-size: 13px;
  color: #777;
  letter-spacing: 1px;
}

/* HOVER */
.upcoming-card:hover {
  transform: translateY(-10px);
}

/* STAGGER EFFECT */
.upcoming-card:nth-child(2),
.upcoming-card:nth-child(4) {
  margin-top: 40px;
}

.upcoming-card:nth-child(3) {
  margin-top: -20px;
}
/* TABLET */
@media (max-width: 1024px) {

  .upcoming-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .upcoming-card {
    margin-top: 0 !important;
  }
}

/* MOBILE */
@media (max-width: 600px) {

  .upcoming-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .coming-soon-big {
    font-size: 32px;
  }

  .upcoming-card {
    padding: 30px 20px;
  }
}


/* ===============================
   LARGE DESKTOP (1400px+)
================================= */
@media (min-width: 1400px) {

    .project-card {
        height: 480px;
    }

    .pld-coming-soon-frame {
        width: 55%;
    }
}


/* ===============================
   LAPTOP
================================= */
@media (max-width: 1200px) {

    .project-card {
        height: 400px;
    }

    .pld-coming-soon-frame {
        width: 65%;
        padding: 35px;
    }
}


/* CARD */
.project-card{
    height: 420px;
    border-radius: 18px;
    background: linear-gradient(145deg,#2b2b2b,#1f1f1f);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
}


/* FRAME — NOW FLUID */
.pld-coming-soon-frame{

    width: clamp(140px, 45%, 260px);
    aspect-ratio: 1/1;

    border: 2px solid #d4a574;
    /*background: rgba(0,0,0,0.55);*/
    background: #000;

    display:flex;
    align-items:center;
    justify-content:center;

    padding: clamp(12px, 2vw, 24px);
}


/* TEXT — AUTO FIT */
.pld-coming-soon-text{

    width:100%;

    font-weight:600;
    text-align:center;
    text-transform:uppercase;
    line-height:1.2;

    font-size: clamp(14px, 3.5vw, 28px);
    letter-spacing: clamp(1.5px, 0.6vw, 6px);

    word-break: keep-all;

    background: linear-gradient(135deg,#d4a574,#f7a222,#d4a574);
    background-size:200% auto;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

    animation: pldGradientShift 3s linear infinite;
}


/* MOBILE CARD HEIGHT */
@media(max-width:480px){
    .project-card{
        height:280px;
    }
}


/* ANIMATION */
@keyframes pldGradientShift{
    0%{background-position:0%}
    100%{background-position:200%}
}