/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra

:root {
  --primary: #2f5d50;
  --dark: #1e1e1e;
  --text: #555;
}
*/

/* =========================================================
   SPACE STORY BD — GLOBAL UI SYSTEM
   Professional Refactor Structure
   ========================================================= */


/* =========================================================
   1. GOOGLE FONTS
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');


/* =========================================================
   2. ROOT VARIABLES
   ========================================================= */

:root {

  --ss-primary: #2f5d50;
  --ss-primary-dark: #264f44;

  --ss-heading: #1f2d2b;
  --ss-text: #6b6b6b;

  --ss-border: #e6e6e6;
  --ss-soft-border: #ececec;

  --ss-white: #ffffff;
  --ss-black: #111111;

  --ss-bg: #f8f7f4;
  --ss-bg-soft: #f5f3ef;

  --ss-radius-sm: 10px;
  --ss-radius-md: 16px;
  --ss-radius-lg: 24px;

  --ss-shadow-sm: 0 8px 18px rgba(0,0,0,0.08);
  --ss-shadow-md: 0 12px 30px rgba(0,0,0,0.08);
  --ss-shadow-lg: 0 20px 45px rgba(0,0,0,0.12);

  --ss-container: 1200px;
}


/* =========================================================
   3. RESET
   ========================================================= */

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;

  font-family: 'Inter', sans-serif;
  color: var(--ss-text);

  background: var(--ss-white);
  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/* =========================================================
   4. TYPOGRAPHY
   ========================================================= */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;

  font-family: 'Cormorant Garamond', serif;
  color: var(--ss-heading);

  letter-spacing: -0.02em;
  font-weight: 600;
}

p,
span,
li,
a,
strong,
small,
label {
  font-family: 'Inter', sans-serif;
}


/* =========================================================
   5. ASTRA FIXES
   ========================================================= */

.ast-page-builder-template .entry-header.ast-header-without-markup {
  display: none;
}

.main-header-menu > .menu-item > .menu-link,
#astra-footer-menu > .menu-item > .menu-link {
  color: var(--ss-black);
}


/* =========================================================
   6. GLOBAL BUTTON SYSTEM
   ========================================================= */

.ss-btnPrimary,
.ss-btnSecondary,
.btn,
.project-cta-btn,
.ss-why-btn {
  transition: all 0.3s ease;
}

.ss-btnPrimary {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 14px 22px;

  background: var(--ss-primary);
  color: var(--ss-white);

  border-radius: var(--ss-radius-sm);

  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}

.ss-btnPrimary:hover {
  background: var(--ss-primary-dark);

  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(47,93,80,0.35);
}

.ss-btnSecondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 14px 22px;

  background: var(--ss-white);

  border: 1px solid #cfd8d3;
  border-radius: var(--ss-radius-sm);

  color: var(--ss-primary);

  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}

.ss-btnSecondary:hover {
  transform: translateY(-2px);
  border-color: var(--ss-primary);
  box-shadow: var(--ss-shadow-sm);
}


/* =========================================================
   7. GLOBAL CARD SYSTEM
   ========================================================= */

.project-card,
.ss-team-card,
.ss-testimonial-card,
.related-project-card {
  background: var(--ss-white);

  border-radius: var(--ss-radius-md);

  overflow: hidden;

  border: 1px solid #efefef;

  transition: all 0.35s ease;
}

.project-card:hover,
.ss-team-card:hover,
.related-project-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--ss-shadow-lg);
}


/* =========================================================
   8. SECTION SPACING
   ========================================================= */

section {
  position: relative;
}

.ss-section {
  padding: 100px 20px;
}

.ss-container {
  width: min(var(--ss-container), 100% - 40px);
  margin-inline: auto;
}


/* =========================================================
   9. RESPONSIVE SYSTEM
   ========================================================= */

@media (max-width: 1024px) {

  .ss-section {
    padding: 80px 20px;
  }

}


@media (max-width: 767px) {

  .ss-section {
    padding: 60px 16px;
  }

  .ss-btnPrimary,
  .ss-btnSecondary {
    width: 100%;
    justify-content: center;
  }

}

/*Header*/
header .custom-logo-link img {margin-top:-10px;}

.ast-primary-header-bar {
	background: #fff;
}
.main-header-menu > .menu-item > .menu-link, #astra-footer-menu > .menu-item > .menu-link {
	color: #111;
}
/* --- ASTRA CUSTOM MENU STYLING --- */

/* 1. Style the Active Menu Item */
.main-header-menu .current-menu-item > a,
.main-header-menu .current_page_item > a {
    color: #2F5D50 !important;
    border-radius: 4px; /* Optional: adds slightly rounded corners */
}

/* 2. Style the Hover State for other items */
.main-header-menu .menu-item > a:hover {
    background-color: #2F5D50 !important;
    color: #ffffff !important;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* 3. Clean up: Remove default underlines or lines if they exist */
.main-header-menu .menu-item > a::after,
.main-header-menu .menu-item > a::before {
    display: none !important;
    content: none !important;
}

/* 4. Ensure menu items have enough spacing for the background box */
.main-header-menu .menu-item > a {
    padding: 10px 15px !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
}
/*End of Header*/

.ast-page-builder-template .entry-header.ast-header-without-markup {
	display: none; /*Pange Title none*/
}

/*Hero Banner*/
.ss-heroNarrative {
  max-width: 620px;
  padding: 60px 20px;
  font-family: "Georgia", serif;
}

.ss-heroBadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid #e6e6e6;
  border-radius: 20px;
  font-size: 13px;
  color: #444;
  margin-bottom: 22px;
  background: #fff;
}

.ss-heroBadge i {
  font-size: 12px;
  color: #9c6b2f;
}

.ss-heroHeadline {
  font-size: 44px;
  line-height: 1.15;
  font-weight: 600;
  color: #1f2d2b;
  margin: 0 0 18px;
}

.ss-heroHeadline span {
  color: #2f5d50;
}

.ss-heroSubtext {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #6b6b6b;
  max-width: 520px;
  line-height: 1.6;
  margin-bottom: 32px;
}

.ss-heroActions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.ss-btnPrimary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: #2f5d50;
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
}

.ss-btnPrimary i {
  font-size: 14px;
}

.ss-btnSecondary {
  padding: 14px 22px;
  border: 1px solid #cfd8d3;
  border-radius: 10px;
  text-decoration: none;
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #2f5d50;
  background: #fff;
}
/* =========================
   BUTTON HOVER ANIMATIONS
   ========================= */

/* PRIMARY BUTTON */
.ss-btnPrimary {
  position: relative;
  transition: 
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease;
}

.ss-btnPrimary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(47, 93, 80, 0.35);
  background-color: #264f44; /* slightly darker */
}

.ss-btnPrimary i {
  transition: transform 0.25s ease;
}

.ss-btnPrimary:hover i {
  transform: translateX(4px);
}

/* SECONDARY BUTTON */
.ss-btnSecondary {
  position: relative;
  transition: 
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    color 0.25s ease;
}

.ss-btnSecondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  border-color: #2f5d50;
  color: #2f5d50;
}

/* ===============================
   TABLET VERSION
   =============================== */
@media (max-width: 1024px) {
  .ss-heroNarrative {
    max-width: 100%;
    padding: 50px 20px;
  }

  .ss-heroHeadline {
    font-size: 36px;
  }

  .ss-heroSubtext {
    font-size: 15px;
  }
}

/* ===============================
   MOBILE VERSION
   =============================== */
@media (max-width: 767px) {
  .ss-heroNarrative {
    padding: 40px 16px;
    text-align: center;
  }

  .ss-heroBadge {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
  }

  .ss-heroHeadline {
    font-size: 30px;
    line-height: 1.2;
  }

  .ss-heroSubtext {
    font-size: 15px;
    margin-left: auto;
    margin-right: auto;
  }

  .ss-heroActions {
    justify-content: center;
    gap: 12px;
  }

  .ss-btnPrimary,
  .ss-btnSecondary {
    width: 100%;
    justify-content: center;
  }
}
/* Container for the avatar under see our projects button */
/* Container for the whole section */
.home-hero-proof-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 0;
  margin-top: 10px;
}

/* Container for the overlapping images */
.home-hero-left-stack {
  display: flex;
  align-items: center;
}

/* Individual Avatar Styles */
.home-hero-left-avatar {
  width: 45px !important;
  height: 45px !important;
  border-radius: 50% !important; /* Forces the circle shape */
  border: 2px solid #ffffff !important; /* White ring separation */
  margin-left: -15px !important; /* Creates the overlap */
  object-fit: cover !important;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  background-color: #eee;
  display: block;
}

/* Remove overlap from the first image */
.home-hero-left-avatar:first-child {
  margin-left: 0 !important;
}

/* Text Content Styling */
.home-hero-right-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.home-hero-title-text {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1a1a1a;
  line-height: 1.2 !important;
}

.home-hero-desc-text {
  margin: 0 !important;
  font-size: 12px !important;
  color: #666;
  line-height: 2 !important;
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
  .home-hero-left-avatar {
    width: 35px !important;
    height: 35px !important;
    margin-left: -12px !important;
  }
  .home-hero-title-text { font-size: 15px !important; }
  .home-hero-desc-text { font-size: 12px !important; }
}


/*Below Hero Trust building 4 Icon*/
/* Target HTML widget inside scoped flex container */

/* =========================================
   METRIC RIBBON — TRUST SECTION
   ========================================= */

/* Ensure HTML widget takes full width inside Elementor */
.ss-metric-scope .elementor-widget-html,
.ss-metric-scope .elementor-widget.elementor-widget-html {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* =========================
   BASE (DESKTOP + TABLET)
   ========================= */
.ss-metricRibbon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  padding: 22px 28px;

  background: #ffffff;
  border: 1px solid #ececec;
  border-radius: 14px;

  font-family: Arial, sans-serif;
}

.ss-metricItem {
  display: flex;
  align-items: center;
  gap: 12px;

  flex: 1;
  min-width: 0;
}

.ss-metricItem i {
  font-size: 20px;
  color: #2f5d50;
  flex-shrink: 0;
}

.ss-metricText {
  min-width: 0;
}

.ss-metricText strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #1f2d2b;
  white-space: nowrap;
}

.ss-metricText span {
  display: block;
  font-size: 13px;
  color: #6b6b6b;
  white-space: nowrap;
}

.ss-metricDivider {
  width: 1px;
  height: 32px;
  background: #e6e6e6;
  flex-shrink: 0;
}

/* =========================
   MOBILE — 2 ROW × 2 COLUMN
   ========================= */
@media (max-width: 767px) {
  .ss-metricRibbon {
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px;
  }

  .ss-metricItem {
    width: calc(50% - 8px);
    flex: none;
  }

  .ss-metricDivider {
    display: none;
  }

  .ss-metricText strong {
    font-size: 14px;
  }

  .ss-metricText span {
    font-size: 12px;
  }
}


/*End of below Hero Trust building 4 Icon*/




.process-section {
  padding: 80px 20px;
}

.process-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  gap: 40px;
}

.process-item {
  text-align: center;
  position: relative;
  flex: 1;
}

/* Circle Card */
.circle {
  width: 140px;
  height: 140px;
  background: #fff;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

/* Step Number */
.step {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 34px;
  height: 34px;
  background: #1f3d2b;
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon */
.circle img {
  width: 46px;
}

/* Title */
.process-item h4 {
  font-size: 18px;
  margin-bottom: 6px;
  color: #222;
}

/* Text */
.process-item p {
  font-size: 14px;
  color: #666;
  max-width: 220px;
  margin: auto;
  line-height: 1.5;
}

/* Dotted Line */
.process-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 70px;
  right: -50%;
  width: 100%;
  border-top: 2px dotted #ccc;
  z-index: -1;
}

/* Responsive */
@media (max-width: 900px) {
  .process-container {
    flex-wrap: wrap;
    justify-content: center;
  }

  .process-item {
    flex: 0 0 50%;
    margin-bottom: 40px;
  }

  .process-item::after {
    display: none;
  }
}

@media (max-width: 500px) {
  .process-item {
    flex: 0 0 100%;
  }
}
/* End of Below Heor Section*/

/* Why choose us Section*/
.ss-trustmatrix {
  
}

.ss-trustcell {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.ss-trustcell:last-child {
  margin-bottom: 0;
}

.ss-iconwrap {
  width: 44px;
  height: 44px;
  border: 1px solid #e5e5e5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ss-iconwrap i {
  font-size: 18px;
  color: #111;
}

.ss-textblock h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 6px;
  color: #111;
}

.ss-textblock p {
  font-size: 13px;
  margin: 0;
  color: #666;
  line-height: 1.5;
}

/* End of Why choose us Section*/

/*our Design Process*/
/* LEFT SIDE */
.ss-process-left {
  max-width: 420px;
}

.ss-process-label {
  font-size: 12px;
  letter-spacing: 1px;
  color: #7a7a7a;
  text-transform: uppercase;
}

.ss-process-title {
  font-size: 36px;
  line-height: 1.25;
  margin-top: 12px;
  color: #1f2d2b;
}

/* RIGHT SIDE */
.ss-process-right {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.ss-step {
  position: relative;
  text-align: center;
  flex: 1;
}

.ss-step-icon {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  background: #fff;
  margin: 0 auto 14px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.ss-step-icon i {
  font-size: 22px;
  color: #2f5d50;
}

.ss-step-icon span {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 26px;
  height: 26px;
  background: #2f5d50;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;
}

.ss-step h4 {
  font-size: 15px;
  margin-bottom: 6px;
}

.ss-step p {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

/* DOTTED LINE (DESKTOP ONLY) */
.ss-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 36px;
  right: -50%;
  width: 100%;
  border-top: 1px dashed #d6d6d6;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .ss-process-right {
    flex-wrap: wrap;
  }

  .ss-step {
    flex: 0 0 50%;
  }

  .ss-step::after {
    display: none;
  }
}

@media (max-width: 767px) {
  .ss-step {
    flex: 0 0 100%;
  }
}


/* =========================
   RESPONSIVE FIX — DESIGN PROCESS
   ========================= */

/* TABLET */
@media (max-width: 1024px) {

  /* Left / Right width control */
  .ss-process-left {
    max-width: 100%;
    flex: 0 0 30%;
  }

  .ss-process-right {
    max-width: 100%;
    flex: 0 0 100%;
    flex-wrap: wrap;
    gap: 24px;
  }

  /* 2 × 2 grid */
  .ss-step {
    flex: 0 0 calc(50% - 12px);
    text-align: center;
  }

  /* Remove dotted connector */
  .ss-step::after {
    display: none;
  }
}

/* MOBILE */
@media (max-width: 767px) {

  /* Full width stack */
  .ss-process-left,
  .ss-process-right {
    max-width: 100%;
    flex: 0 0 100%;
  }

  .ss-process-right {
    gap: 20px;
  }

  /* Single column steps */
  .ss-step {
    flex: 0 0 100%;
  }
}


/*End of our Design Process*/
/* ===== TEAM SECTION ===== */
.ss-team-wrap {
  width: 100%;
  text-align: center;
}

.ss-team-header {
  max-width: 720px;
  margin: 0 auto 50px;
}

.ss-team-eyebrow {
  font-size: 13px;
  letter-spacing: 2px;
  color: #2f5d50;
  font-weight: 600;
}

.ss-team-header h2 {
  font-size: 42px;
  line-height: 1.2;
  margin: 15px 0;
}

.ss-team-header h2 span {
  color: #2f5d50;
}

.ss-team-header p {
  font-size: 16px;
  color: #666;
}

/* ===== GRID ===== */
.ss-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

/* ===== CARD ===== */
.ss-team-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}

.ss-team-card:hover {
  transform: translateY(-6px);
}

/* Force 4:5 image ratio */
.ss-team-card img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}


.ss-team-card h4 {
  margin: 18px 0 5px;
  font-size: 18px;
}

.ss-team-card span {
  font-size: 14px;
  color: #2f5d50;
  padding-bottom: 18px;
  display: block;
}

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

@media (max-width: 600px) {
  .ss-team-header h2 {
    font-size: 30px;
  }

  .ss-team-card img {
    height: 220px;
  }
}
/* WHY CHOOSE US SECTION */
.ss-why-wrap {
  max-width: 520px;
  text-align: left;
}

.ss-why-label {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 600;
  color: #6b6b6b;
  margin-bottom: 12px;
}

.ss-why-title {
  font-size: 38px;
  line-height: 1.2;
  margin-bottom: 28px;
  color: #1f2d2b;
}

.ss-why-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 500;
  color: #1f2d2b;
  border: 1px solid #cfd6d3;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.ss-why-btn:hover {
  background: #1f2d2b;
  color: #fff;
  border-color: #1f2d2b;
}

/* RESPONSIVE */
@media (max-width: 767px) {
  .ss-why-title {
    font-size: 28px;
  }
}

/* TESTIMONIAL SECTION */
.ss-testimonial-left {
  max-width: 320px;
}

.ss-testimonial-label {
  font-size: 12px;
  letter-spacing: 2px;
  color: #6b6b6b;
  font-weight: 600;
}

.ss-testimonial-left h2 {
  font-size: 36px;
  line-height: 1.25;
  margin-top: 12px;
  color: #1f2d2b;
}

/* GRID */
.ss-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* CARD */
.ss-testimonial-card {
  background: #ffffff;
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  position: relative;
}

.ss-testimonial-card::before {
  content: "“";
  font-size: 56px;
  color: #2f5d50;
  position: absolute;
  top: 10px;
  left: 20px;
  opacity: 0.2;
}

.ss-testimonial-card p {
  font-size: 15px;
  line-height: 1.6;
  color: #444;
  margin-bottom: 24px;
}

/* CLIENT */
.ss-client {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ss-client img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.ss-client strong {
  font-size: 14px;
  display: block;
}

.ss-client span {
  font-size: 12px;
  color: #777;
}

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

@media (max-width: 767px) {
  .ss-testimonial-scope {
    flex-direction: column;
  }

  .ss-testimonial-grid {
    grid-template-columns: 1fr;
  }

  .ss-testimonial-left h2 {
    font-size: 28px;
  }
}

/* =========================================
   CTA SECTION STYLES (Elementor HTML Widget)
   -----------------------------------------
   - Layout handled via Flexbox container
   - Background handled in Elementor (NOT here)
   - This CSS controls text, buttons, spacing
   ========================================= */

.cta-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.cta-text h2 {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 10px;
  color: #fff; /* keep white since bg is dark */
}

.cta-text p {
  font-size: 16px;
  opacity: 0.85;
  margin: 0;
  color: #fff;
}

.cta-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.btn {
  text-decoration: none;
  padding: 14px 26px;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.btn.primary {
  background: #ffffff;
  color: #0f3d2e;
  font-weight: 500;
}

.btn.primary:hover {
  background: #f1f1f1;
}

.btn.outline {
  border: 1px solid rgba(255,255,255,0.6);
  color: #fff;
}

.btn.outline:hover {
  background: rgba(255,255,255,0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .cta-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }

  .cta-buttons {
    width: 100%;
    flex-direction: column;
  }

  .btn {
    width: 100%;
    text-align: center;
  }
}

/* =========================================
   FOOTER SECTION (GLOBAL STYLE.CSS)
   Used inside Elementor HTML widget
   ========================================= */

.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  color: #fff;
	margin-left: 0;
}.footer-col h4

/* Column */
.footer-col {
  flex: 1;
  min-width: 220px;
}
.footer-col h4 {color: #fff;}
/* Logo */
.footer-logo {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
}

.footer-logo span {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
}

/* Description */
.footer-desc {
  font-size: 14px;
  line-height: 1.6;
  opacity: 0.8;
  margin-bottom: 20px;
}

/* Headings */
.footer-col h4 {
  font-size: 16px;
  margin-bottom: 15px;
}

/* Links */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 8px;
  font-size: 12px !important;

}

.footer-links a {
  color: #f1f1f1;
  text-decoration: none;
  transition: 0.3s;
}

.footer-links a:hover {
  color: #fff;
  padding-left: 5px;
}

/* Contact */
.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0 0 15px;
}

.footer-contact li {
  margin-bottom: 10px;
  line-height: 1.5;
  color: #f1f1f1;
  font-size: 12px;
}

/* Social */
.footer-social {
  display: flex;
  gap: 10px;
}

.footer-social a {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  transition: 0.3s;
}

.footer-social a:hover {
  background: #fff;
  color: #0f3d2e;
}

/* WhatsApp Button */
.whatsapp-btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 6px;
  background: #25D366;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s;
}

.whatsapp-btn:hover {
  background: #1ebe5d;
}

/* Tablet */
@media (max-width: 1024px) {
  .footer-container {
    gap: 30px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
  }
}




/* ==================================== */
/* =====     Services Page      ===== */
/* ==================================== */
.ss-services-heading {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 48px;
  padding: 0 16px;
}

/* Small top label */
.ss-services-eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #6f8f7f;
  margin-bottom: 14px;
  font-family: Arial, sans-serif;
}

/* Main heading */
.ss-services-title {
  font-family: "Georgia", serif;
  font-size: 46px;
  font-weight: 600;
  color: #1f2d2b;
  margin: 0 0 18px;
  line-height: 1.2;
}

/* Subtitle */
.ss-services-subtitle {
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #6b6b6b;
  line-height: 1.6;
  margin: 0;
}

/* ===== Tablet ===== */
@media (max-width: 1024px) {
  .ss-services-title {
    font-size: 38px;
  }
}

/* ===== Mobile ===== */
@media (max-width: 767px) {
  .ss-services-title {
    font-size: 30px;
  }

  .ss-services-subtitle {
    font-size: 15px;
  }
}
/* ===== Services Cards Grid ===== */
.ss-services-grid {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

/* Card */
.ss-service-card {
  position: relative;
  background: #ffffff;
  border-radius: 18px;
  padding: 26px 22px 22px;
  flex: 1 1 calc(20% - 24px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
}

/* Number badge */
.ss-service-no {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 32px;
  height: 32px;
  background: #2f5d50;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Icon */
.ss-service-icon {
  width: 64px;
  height: 64px;
  background: #eef3ee;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px auto 18px;
}

.ss-service-icon i {
  font-size: 26px;
  color: #2f5d50;
}

/* Title */
.ss-service-card h3 {
  font-size: 18px;
  text-align: center;
  margin-bottom: 14px;
  color: #1f2d2b;
}

/* List */
.ss-service-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}

.ss-service-card ul li {
  font-size: 14px;
  color: #555;
  margin-bottom: 8px;
  padding-left: 18px;
  position: relative;
}

.ss-service-card ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #2f5d50;
  font-weight: 600;
}

/* Image */
.ss-service-image {
  margin-top: auto;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

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

/* ===== Tablet ===== */
@media (max-width: 1024px) {
  .ss-service-card {
    flex: 1 1 calc(33.333% - 24px);
  }
}

/* ===== Mobile ===== */
@media (max-width: 767px) {
  .ss-service-card {
    flex: 1 1 calc(50% - 24px);
  }
}



/* =========================================
   About us Page
   -----------------------------------------
   - Layout handled via Flexbox container
   - Background handled in Elementor (NOT here)
   - This CSS controls text, buttons, spacing
   ========================================= */

/* =========================
   ABOUT US – HERO SECTION
   ========================= */

.ss-aboutHero {
  width: 100%;
}

.ss-aboutGrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}

/* LEFT CONTENT */
.ss-aboutBadge {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #2f5d50;
  margin-bottom: 16px;
  font-family: Arial, sans-serif;
}

.ss-aboutTitle {
  font-family: "Georgia", serif;
  font-size: 44px;
  line-height: 1.15;
  color: #1f2d2b;
  margin: 0 0 20px;
}

.ss-aboutTitle span {
  color: #2f5d50;
}

.ss-aboutText {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: #6b6b6b;
  margin-bottom: 14px;
  max-width: 520px;
}

/* RIGHT IMAGE */
.ss-aboutMedia img {
  width: 100%;
  height: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  border-radius: 18px;
}

/* =========================
   TABLET
   ========================= */
@media (max-width: 1024px) {
  .ss-aboutGrid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .ss-aboutTitle {
    font-size: 38px;
  }
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 767px) {
  .ss-aboutGrid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ss-aboutTitle {
    font-size: 32px;
  }

  .ss-aboutText {
    font-size: 15px;
  }

  .ss-aboutMedia img {
    aspect-ratio: 5 / 3;
  }
}

/* ===== About Us Hero Section ===== */
.about-hero {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
  align-items: center;
  padding: 60px 20px;
}

.about-hero-image {
  flex: 1;
  max-height: 480px;
  overflow: hidden;
  border-radius: 16px;
}

.about-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* auto adjust width & height */
  transition: transform 0.6s ease;
  display: block;
}

/* Hover effect */
.about-hero-image:hover img {
  transform: scale(1.05);
}

.about-hero-content {
  flex: 1;
}

.about-hero-content h1 {
  font-size: 40px;
  margin-bottom: 16px;
}

.about-hero-content p {
  font-size: 18px;
  line-height: 1.7;
  color: #555;
}

/* ===== Mobile Version ===== */
@media (max-width: 768px) {
  .about-hero {
    flex-direction: column;
    padding: 40px 16px;
  }

  .about-hero-image {
    max-height: 260px;
  }

  .about-hero-content h1 {
    font-size: 28px;
  }

  .about-hero-content p {
    font-size: 16px;
  }
}

/* ===== WHO WE ARE SECTION START ===== */
.who-we-are {
  width: 100%;
  padding: 60px 20px;
}

.who-we-are__container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 40px;
}

/* ===== IMAGE ===== */
.who-we-are__media {
  flex: 1;
  max-width: 50%;
}

.who-we-are__image {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}

/* ===== CONTENT ===== */
.who-we-are__content {
  flex: 1;
  max-width: 50%;
}

.who-we-are__label {
  font-size: 12px;
  letter-spacing: 2px;
  color: #6b7c6f;
  margin-bottom: 10px;
}

.who-we-are__title {
  font-size: 32px;
  line-height: 1.4;
  font-weight: 600;
  color: #222;
  margin-bottom: 15px;
}

.who-we-are__highlight {
  color: #2f5d50;
}

.who-we-are__description {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 30px;
}

/* ===== FEATURES ===== */
.who-we-are__features {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.who-we-are__feature {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(50% - 10px);
}

.who-we-are__icon {
  font-size: 20px;
}

.who-we-are__feature strong {
  display: block;
  font-size: 14px;
  color: #222;
}

.who-we-are__feature span {
  font-size: 12px;
  color: #666;
}

/* ===== TABLET ===== */
@media (max-width: 1024px) {
  .who-we-are__title {
    font-size: 26px;
  }

  .who-we-are__image {
    height: 360px;
  }
}

/* ===== MOBILE ===== */
@media (max-width: 767px) {
  .who-we-are__container {
    flex-direction: column;
  }

  .who-we-are__media,
  .who-we-are__content {
    max-width: 100%;
  }

  .who-we-are__image {
    height: 260px;
  }

  .who-we-are__title {
    font-size: 22px;
  }

  .who-we-are__features {
    flex-direction: column;
  }

  .who-we-are__feature {
    width: 100%;
  }
}
/* ===== WHO WE ARE SECTION END ===== */

/* ===== OUR VALUES SECTION START ===== */
.our-values {
  width: 100%;
  padding: 70px 20px;
  background: #f7f7f5;
}

.our-values__container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== HEADER ===== */
.our-values__header {
  text-align: center;
  margin-bottom: 50px;
}

.our-values__label {
  font-size: 12px;
  letter-spacing: 2px;
  color: #6b7c6f;
  margin-bottom: 10px;
}

.our-values__title {
  font-size: 32px;
  font-weight: 600;
  color: #222;
}

/* ===== GRID ===== */
.our-values__grid {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

/* ===== ITEM ===== */
.our-values__item {
  flex: 1;
  min-width: 220px;
  text-align: center;
  padding: 20px;
  position: relative;
}

/* vertical divider (desktop only) */
.our-values__item:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 20%;
  width: 1px;
  height: 60%;
  background: #ddd;
}

/* ===== ICON ===== */
.our-values__icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  border-radius: 50%;
  background: #e9ece6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

/* ===== TEXT ===== */
.our-values__heading {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #222;
}

.our-values__text {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* ===== TABLET ===== */
@media (max-width: 1024px) {
  .our-values__grid {
    justify-content: center;
  }

  .our-values__item {
    flex: 0 0 45%;
  }

  .our-values__item::after {
    display: none;
  }
}

/* ===== MOBILE ===== */
@media (max-width: 767px) {
  .our-values__title {
    font-size: 24px;
  }

  .our-values__grid {
    flex-direction: column;
  }

  .our-values__item {
    flex: 100%;
  }
}
/* ===== OUR VALUES SECTION END ===== */

/* ===== OUR PROCESS SECTION START ===== */
.our-process {
  width: 100%;
  padding: 0 20px;
}

.our-process__container {
  max-width: 1200px;
  margin: 0 auto;
}

/* ===== HEADER ===== */
.our-process__header {
  text-align: center;
  margin-bottom: 60px;
}

.our-process__label {
  font-size: 12px;
  letter-spacing: 2px;
  color: #6b7c6f;
  margin-bottom: 10px;
}

.our-process__title {
  font-size: 32px;
  font-weight: 600;
  color: #222;
}

/* ===== STEPS WRAPPER ===== */
.our-process__steps {
  display: flex;
  justify-content: space-between;
  position: relative;
}

/* connecting line */
.our-process__steps::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 5%;
  right: 5%;
  height: 1px;
  background: #ccc;
  z-index: 0;
}

/* ===== STEP ===== */
.our-process__step {
  width: 23%;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* ===== NUMBER (circle) ===== */
.our-process__number {
  width: 36px;
  height: 36px;
  margin: 0 auto 20px;
  background: #2f5d50;
  color: #fff;
  font-size: 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== ICON ===== */
.our-process__icon {
  font-size: 26px;
  margin-bottom: 10px;
}

/* ===== TEXT ===== */
.our-process__step h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #222;
}

.our-process__step p {
  font-size: 13px;
  color: #666;
  line-height: 1.6;
}

/* ===== TABLET ===== */
@media (max-width: 1024px) {
  .our-process__steps {
    flex-wrap: wrap;
    gap: 30px;
  }

  .our-process__steps::before {
    display: none;
  }

  .our-process__step {
    width: 45%;
  }
}

/* ===== MOBILE ===== */
@media (max-width: 767px) {
  .our-process__title {
    font-size: 24px;
  }

  .our-process__steps {
    flex-direction: column;
  }

  .our-process__step {
    width: 100%;
  }
}
/* ===== OUR PROCESS SECTION END ===== */

/* =====================================
   PROJECTS PAGE – FINAL CSS
===================================== */

/* ===== HERO ===== */

.projects-hero {
    height: 420px;
    background:
        linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
        url('/wp-content/uploads/projects-hero.jpg') center / cover no-repeat;
    display: flex;
    align-items: center;
}

.projects-hero-inner {
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
    color: #fff;
}

.projects-hero h1 {
    font-size: 48px;
    font-weight: 600;
    margin-bottom: 12px;
}

.projects-hero p {
    font-size: 16px;
    max-width: 520px;
    opacity: .9;
}

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

.projects-section {
    max-width: 1200px;
    margin: 90px auto;
    padding: 0 20px;
}

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.section-head h2 {
    font-size: 28px;
    font-weight: 600;
}

.section-link {
    font-size: 14px;
    color: #b08d57;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease;
}

.section-link:hover {
    border-color: #b08d57;
}

/* ===== GRID ===== */

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

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

.project-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #eee;
    box-shadow: 0 8px 28px rgba(0,0,0,0.06);
    transition: transform .35s ease, box-shadow .35s ease;
}

.project-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}

/* ===== IMAGE ===== */

.project-thumb {
    height: 260px;
    overflow: hidden;
}

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

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

/* ===== CONTENT ===== */

.project-content {
    padding: 22px 24px 26px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.project-title {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 14px;
}

/* ===== META (ACF DATA) ===== */

.project-meta {
    list-style: none;
    margin: 0 0 22px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 18px;
}

.project-meta li {
    display: flex;
    flex-direction: column;
}

.project-meta span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: #888;
}

.project-meta strong {
    font-size: 13px;
    font-weight: 500;
    color: #222;
    margin-top: 4px;
}

/* ===== CTA ===== */

.project-cta {
    margin-top: auto;
}

.project-cta a {
    font-size: 14px;
    text-decoration: none;
    color: #000;
    display: inline-block;
    border-bottom: 1px solid #000;
    padding-bottom: 2px;
    transition: opacity .3s ease;
}

.project-cta a:hover {
    opacity: .7;
}

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

@media (max-width: 1024px) {
    .projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {

    .projects-hero {
        height: 340px;
    }

    .projects-hero h1 {
        font-size: 36px;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .project-thumb {
        height: 220px;
    }

    .section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}


/**************************************/
/****** 	#Single Project #	*******/
/**************************************/

/* ========================================
   SINGLE PROJECT PAGE
======================================== */

/* =========================================
   SINGLE PROJECT PAGE
========================================= */

.single-project-page {
    background: #f5f3ef;
    overflow: hidden;
}


/* =========================================
   CONTAINER
========================================= */

.project-container {
    width: min(1320px, 92%);
    margin-inline: auto;
}


/* =========================================
   HERO
========================================= */

.project-hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: flex-end;
}

.project-hero-media {
    position: absolute;
    inset: 0;
}

.project-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.15)
    );
}

.project-hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding-bottom: 80px;
}

.project-breadcrumb {
    margin-bottom: 40px;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}

.project-breadcrumb a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
}

.project-breadcrumb span {
    margin: 0 10px;
}

.project-hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 420px;
    gap: 60px;
    align-items: end;
}

.project-label {
    display: inline-block;
    margin-bottom: 20px;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
}

.project-title {
    font-size: clamp(52px, 6vw, 100px);
    line-height: 0.95;
    color: #fff;
    margin: 0;
    font-weight: 500;
    max-width: 900px;
}

.project-summary {
    color: rgba(255,255,255,0.9);
    font-size: 18px;
    line-height: 1.9;
    margin: 0;
}


/* =========================================
   INFO STRIP
========================================= */

.project-info-strip {
    background: #fff;
    border-bottom: 1px solid #ece8e1;
}

.project-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.project-info-item {
    padding: 38px 30px;
    border-right: 1px solid #ece8e1;
}

.project-info-item:last-child {
    border-right: none;
}

.project-info-item span {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #9a8f80;
}

.project-info-item strong {
    font-size: 18px;
    color: #111;
    font-weight: 500;
}


/* =========================================
   ABOUT SECTION
========================================= */

.project-about-section {
    padding: 140px 0;
}

.project-about-grid {
    display: grid;
    grid-template-columns: 1.2fr 460px;
    gap: 100px;
}

.section-subtitle {
    display: inline-block;
    margin-bottom: 18px;
    color: #b18b5e;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
}

.section-title {
    font-size: clamp(42px, 5vw, 72px);
    line-height: 1;
    color: #111;
    margin-bottom: 40px;
    font-weight: 500;
    max-width: 700px;
}

.project-content {
    max-width: 760px;
    color: #444;
    font-size: 18px;
    line-height: 2;
}

.project-content p {
    margin-bottom: 30px;
}


/* =========================================
   DETAIL CARD
========================================= */

.project-detail-card {
    background: #f0ebe4;
    padding: 50px;
}

.project-detail-card h3 {
    margin-bottom: 40px;
    font-size: 34px;
    font-weight: 500;
    color: #111;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 24px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

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

.detail-item span {
    color: #666;
    font-size: 14px;
}

.detail-item strong {
    color: #111;
    font-weight: 500;
}


/* =========================================
   GALLERY
========================================= */
/* =========================================
   GALLERY
========================================= */

.project-gallery-section {
    padding-bottom: 140px;
}

.project-gallery-grid {
    display: grid;
    grid-template-columns: 1.35fr 0.85fr;
    gap: 24px;
}


/* =========================================
   COMMON
========================================= */

.gallery-item {
    position: relative;
    overflow: hidden;
    background: #ddd;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s ease;
}

.gallery-item:hover img {
    transform: scale(1.04);
}


/* =========================================
   LARGE LEFT IMAGE
========================================= */

.gallery-large {
    height: 760px;
}


/* =========================================
   RIGHT COLUMN
========================================= */

.gallery-right-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.gallery-right-column .gallery-item {
    flex: 1;
    min-height: 0;
}


/* =========================================
   FULL WIDTH
========================================= */

.gallery-wide {
    grid-column: 1 / -1;
    height: 420px;
}



/* =========================================
   TABLET
========================================= */

@media (max-width: 1024px) {

    .project-gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-large {
        height: 520px;
    }

    .gallery-right-column {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .gallery-right-column .gallery-item {
        height: 260px;
    }

    .gallery-wide {
        height: 320px;
    }
}



/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .project-gallery-section {
        padding-bottom: 80px;
    }

    .project-gallery-grid {
        gap: 18px;
    }

    .gallery-large {
        height: 320px;
    }

    .gallery-right-column {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .gallery-right-column .gallery-item {
        height: 220px;
    }

    .gallery-wide {
        height: 220px;
    }
}


/* =========================================
   CTA
========================================= */

.project-cta-section {
    padding-bottom: 140px;
}

.project-cta-box {
    background: #111;
    padding: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.project-cta-content span {
    display: inline-block;
    margin-bottom: 16px;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
}

.project-cta-content h2 {
    color: #fff;
    font-size: clamp(38px, 5vw, 72px);
    line-height: 1;
    margin: 0;
    font-weight: 500;
}

.project-cta-btn {
    min-width: 190px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    transition: 0.35s ease;
}

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


/* =========================================
   RELATED PROJECTS
========================================= */

.related-projects-section {
    padding-bottom: 140px;
}

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

.related-project-card {
    background: #fff;
}

.related-project-image {
    display: block;
    overflow: hidden;
}

.related-project-image img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.related-project-content {
    padding: 30px;
}

.related-project-content h3 {
    margin: 0;
    font-size: 28px;
    line-height: 1.2;
}

.related-project-content a {
    color: #111;
    text-decoration: none;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 1024px) {

    .project-hero-grid {
        grid-template-columns: 1fr;
    }

    .project-about-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .project-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .project-info-item:nth-child(2) {
        border-right: none;
    }

    .gallery-large,
    .gallery-item:nth-child(2),
    .gallery-item:nth-child(3),
    .gallery-wide {
        grid-column: span 12;
        height: 420px;
    }

    .project-cta-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .related-projects-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .project-hero {
        min-height: 78vh;
    }

    .project-hero-content {
        padding-bottom: 50px;
    }

    .project-breadcrumb {
        margin-bottom: 24px;
    }

    .project-title {
        font-size: 42px;
    }

    .project-summary {
        font-size: 16px;
        line-height: 1.8;
    }

    .project-info-grid {
        grid-template-columns: 1fr;
    }

    .project-info-item {
        border-right: none;
        border-bottom: 1px solid #ece8e1;
    }

    .project-about-section {
        padding: 80px 0;
    }

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

    .project-content {
        font-size: 16px;
    }

    .project-detail-card {
        padding: 35px;
    }

    .project-gallery-section {
        padding-bottom: 80px;
    }

    .gallery-large,
    .gallery-item:nth-child(2),
    .gallery-item:nth-child(3),
    .gallery-wide {
        height: 280px;
    }

    .project-cta-section {
        padding-bottom: 80px;
    }

    .project-cta-box {
        padding: 40px 30px;
    }

    .project-cta-content h2 {
        font-size: 38px;
    }

    .project-cta-btn {
        width: 100%;
    }

    .related-projects-section {
        padding-bottom: 80px;
    }

    .related-projects-grid {
        grid-template-columns: 1fr;
    }
}