/*
Theme Name: Raven Construction Group
Theme URI: https://www.solaritsolutions.ca/
Author: Solar IT Solutions
Author URI: https://www.solaritsolutions.ca/
Description: This is a custom built WordPress template for Raven Construction Group. Using this template or any other related codes for another website is prohibited. DO NOT UPDATE OR REINSTALL THIS THEME WITHOUT SUPPORT FROM ORIGINAL DEVELOPER.
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 5.4
Version: 1.0
*/

/* --- FONTS & COLORS --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');



:root {
  --bronze: #C4A263;
  --dark: #0a1119;
  --dark-grey: #1e2023;
  --light-grey: #666666;
  --peach: #FCF9F5;
  --white: #ffffff;
  --border: #f0f0f0;
}


.ff-message-success {
background-color: white;
}



html,
body {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  /* Clips any content that accidentally pokes out the side */
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  color: var(--dark-grey);
  overflow-x: hidden;
}

a {
  text-decoration: none;
  transition: 0.3s;
}

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

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

.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- TOP BAR --- */

.raven-utility-bar {
  background: #111;
  padding: 12px 0;
  font-size: 13px;
  color: #bbb;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  /* Applying Rubik to the entire bar */
  font-family: 'Rubik', sans-serif;
}

.raven-utility-flex {
  display: flex;
  /* Pushes all items to the right side */
  justify-content: flex-end;
  align-items: center;
}

.raven-info-item {
  margin-left: 30px;
  /* Space between the items */
  display: inline-flex;
  align-items: center;
  color: inherit;
  text-decoration: none;
  transition: 0.3s;
}

.raven-info-item i {
  /* Using your specific bronze color */
  color: #C4A263;
  margin-right: 10px;
  font-size: 14px;
}

.raven-info-item:hover {
  color: #ffffff;
}

/* Mobile Adjustment: Stack them or center them on small screens */
@media (max-width: 768px) {
  .raven-utility-flex {
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
  }

  .raven-info-item {
    margin-left: 0;
  }
}

/* --- MAIN HEADER --- */
.main-header {
  position: absolute;
  top: 45px;
  left: 0;
  width: 100%;
  z-index: 999;
  padding: 25px 0;
  transition: 0.3s;
}

.main-header.sticky {
  position: fixed;
  top: 0;
  background: rgba(10, 17, 25, 0.98);
  padding: 15px 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo img {
  height: 55px;
}

.nav-menu ul {
  display: flex;
  gap: 35px;
}

.nav-menu a {
  color: var(--white);
  font-weight: 700;
  font-size: 15px;
  position: relative;
  font-family: 'Rubik', sans-serif;
}

.nav-menu a:hover,
.nav-menu a.active {
  color: var(--bronze);
}

.header-right {
  display: flex;
  align-items: center;
  color: var(--white);
}

.search-icon {
  margin-right: 25px;
  cursor: pointer;
}

.header-call {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: 25px;
  padding-right: 25px;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.call-icon-bronze {
  width: 45px;
  height: 45px;
  background: var(--bronze);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 18px;
}

.call-details span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  color: #ccc;
}

.call-details strong {
  font-size: 17px;
  font-weight: 800;
}

.social-icons a {
  color: #ccc;
  margin-left: 15px;
  font-size: 14px;
}

.social-icons a:hover {
  color: var(--bronze);
}

.hamburger {
  display: none;
  color: var(--white);
  font-size: 24px;
  cursor: pointer;
}

/* --- MOBILE NAVIGATION RESPONSIVENESS --- */
@media (max-width: 992px) {
  .hamburger {
    display: block;
    /* Show hamburger on mobile */
    z-index: 1001;
  }

  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    /* Initially hidden off-screen to the right */
    width: 250px;
    height: 100vh;
    background: #0a1119;
    padding: 80px 30px;
    transition: 0.4s;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
  }

  /* When the 'active' class is added via JS, the menu slides in */
  .nav-menu.active {
    right: 0;
  }

  .nav-menu ul {
    flex-direction: column;
    /* Stack links vertically */
    gap: 25px;
  }

  /* Hide the desktop call info/socials if they don't fit, 
     or you can keep them by adjusting .header-right */
  .header-right {
    display: none;
  }
}

/* --- HERO SECTION  */
.hero-section {
  height: 70vh;
  min-height: 800px;
  background-image: url('/wp-content/uploads/2026/02/hero.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding-bottom: 100px;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7) !important;

  z-index: 1;
  /* Layer 1 */
}

.hero-content-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  justify-content: space-between;
  /* Pushes left-col to left and right-col to right */
  align-items: flex-end;
  /* Keeps both columns sitting on the same baseline */
}

.hero-left-col {
  flex: 1;
}

.hero-title {
  font-size: 85px;
  font-weight: 800;
  line-height: 1.05;
  margin: 0;
  color: var(--white);
}

.hero-right-col {
  display: flex;
  flex-direction: column;
  /* Stacks button on top of clients */
  align-items: flex-start;
  /* Align elements to the start of the right column */
  gap: 25px;
  /* Space between button and client section */
}

/* Bronze Button */
.btn-bronze-custom {
  background: var(--bronze);
  color: var(--white);
  padding: 8px 8px 8px 30px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-size: 16px;
  text-transform: none;
}

.btn-icon-box {
  width: 40px;
  height: 40px;
  background: var(--white);
  color: var(--bronze);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Client Proofing Section */
.hero-clients {
  display: flex;
  align-items: center;
  gap: 15px;
}

.client-imgs {
  display: flex;
}

.client-imgs img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  margin-left: -12px;
  object-fit: cover;
}

.client-imgs img:first-child {
  margin-left: 0;
}

.client-text strong {
  display: block;
  font-size: 15px;
  color: var(--white);
  font-weight: 700;
}

.client-text span {
  display: block;
  font-size: 14px;
  color: var(--white);
  font-weight: 500;
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
  .hero-content-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
  }

  .hero-title {
    font-size: 50px;
  }


}

/* --- FEATURES BAR  */
.features-bar {
  background: #111111;
  padding: 80px 0;
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid var(--bronze);
}

.features-bg-left,
.features-bg-right {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  opacity: 0.5;
  pointer-events: none;
}

.features-bg-left {
  left: -30px;
}

.features-bg-right {
  right: -30px;
}

.features-flex {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.f-item {
  text-align: center;
  color: var(--white);
  flex: 1;
}

.f-icon {
  margin-bottom: 25px;
  display: flex;
  justify-content: center;
}

.f-icon img {
  height: 60px;
  width: auto;
  filter: none;
}

.f-item h3 {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  text-transform: capitalize;
  margin: 0;
}

/* --- MOBILE SLIDER LOGIC --- */
@media (max-width: 768px) {
  .features-flex {
    gap: 10px;
    overflow-x: auto;
    /* Enables horizontal scroll */
    scroll-snap-type: x mandatory;
    /* Enables snapping effect */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Smooth momentum scrolling for iOS */
    padding-bottom: 20px;
    justify-content: flex-start;
    /* Items start from left */
  }

  /* Hide Scrollbar for cleaner look */
  .features-flex::-webkit-scrollbar {
    display: none;
  }

  .features-flex {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .features-bar {
    padding: 40px 0;
    /* Reduced height from 80px */
  }

  .f-item {
    flex: 0 0 50%;
    scroll-snap-align: center;
    padding: 0 4px;
  }

  .f-icon img {
    height: 45px;
    /* Smaller icons on mobile to save space */
  }

  .features-bg-left,
  .features-bg-right {
    display: none;
  }
}

/* --- WHO WE ARE SECTION  */
.who-we-are {
  padding: 40px 0;
  background-color: #ffffff;
  position: relative;
  overflow: hidden;
  text-align: center;
}


.who-blueprint-overlay {
  position: absolute;
  bottom: -20px;
  right: -70px;
  opacity: 0.3;
  z-index: 1;
  pointer-events: none;
}

.who-container-relative {
  position: relative;
  z-index: 2;
}

.who-we-are .who-subtitle {
  font-family: 'Rubik', sans-serif;
  color: var(--bronze);
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}

.who-we-are .who-subtitle::before {
  content: "";
  width: 35px;
  height: 2px;
  background-color: var(--bronze);
}

.who-we-are .who-main-title {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 48px;
  font-weight: 800;
  line-height: 1.1;
  color: #1a1a1a;
  max-width: 800px;
  margin: 0 auto 40px;
}

/* Layout */
.who-flex-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.who-center-box {
  flex: 1;
  max-width: 700px;
}

.who-description {
  font-family: 'Rubik', sans-serif;
  color: #666;
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 40px;
}

/* Tilted Images */
.who-side-img {
  flex: 0 0 22%;
}

.who-side-img img {
  width: 100%;
  border: none;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.who-img-left {
  transform: rotate(5deg);
}

/* Tilts top toward center */
.who-img-right {
  transform: rotate(-5deg);
}

/* Tilts top toward center */

/* Features List */
.who-features-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 30px;
  list-style: none;
  padding: 0;
  margin: 0 auto 50px;
  text-align: left;
}

.who-features-list li {
  font-weight: 700;
  font-size: 14px;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 10px;
}

.who-features-list i {
  color: var(--bronze);
  font-size: 18px;
}

/* CTA Group (Centered Row) */
.who-cta-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

/* Black Button READ MORE */
.who-btn-black {
  background: #000;
  color: #fff;
  padding: 8px 8px 8px 30px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  font-size: 14px;
  text-decoration: none;
  transition: 0.3s;
}

.who-btn-icon {
  width: 40px;
  height: 40px;
  background: #fff;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Call Link */
.who-call-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.who-call-icon {
  width: 50px;
  height: 50px;
  background: var(--bronze);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.who-call-text small {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  color: #666;
}

.who-call-text strong {
  font-size: 18px;
  color: #1a1a1a;
}


@media (max-width: 992px) {
  .who-flex-layout {
    flex-direction: column;
  }

  .who-img-right {
    display: none;
  }

  .who-side-img {
    flex: 0 0 100%;
    max-width: 400px;
    transform: rotate(0);
  }

  .who-features-list {
    grid-template-columns: 1fr;
    max-width: 300px;
  }

  .who-cta-group {
    flex-direction: column;
    gap: 30px;
  }

  .who-we-are .who-main-title {
    font-size: 30px;
  }

  .who-we-are .who-subtitle {
    font-size: 12px;
  }
}



/* --- OUR SERVICES SECTION  --- */
.services-scoped {
  background-color: #FAF7F0;
  padding: 40px 0;
  padding-bottom: 80px;
  position: relative;
  overflow: hidden;
}

.services-blueprint-bg {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.8;
  pointer-events: none;
  z-index: 1;
}

.services-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}


.services-header {
  margin-bottom: 50px;
}

.services-scoped .services-subtitle {
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  color: #C4A263;
  font-size: 14px;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 10px;
}

.services-scoped .services-subtitle::before {
  content: "— ";
}

.services-scoped .services-main-title {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 600;
  font-size: 48px;
  color: #000000;
  margin: 0;
  max-width: 600px;
  line-height: 1.2;
}

/* Grid & Cards */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.service-card {
  background: #ffffff;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Ensures all cards match height */
}

.service-card-content {
  padding: 40px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.service-card-content h3 {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 20px;
  color: #1a1a1a;
  min-height: 54px;
  /* Keeps titles aligned across cards */
}

/* Internal Scroll Area */
.service-text-scroll {
  max-height: 100px;
  /* Limits the height to keep design clean */
  overflow-y: auto;
  padding-right: 10px;
}

/* Custom Scrollbar Styling (Bronze) */
.service-text-scroll::-webkit-scrollbar {
  width: 4px;
}

.service-text-scroll::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.service-text-scroll::-webkit-scrollbar-thumb {
  background: #C4A263;
  border-radius: 10px;
}

.service-card-content p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.service-card-footer {
  position: relative;
  height: 250px;
}

.service-card-footer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-card-icon {
  position: absolute;
  top: -25px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #C4A263;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  z-index: 3;
}



/* Container for all points */
.services-wrapper {
    display: flex;
    flex-wrap: wrap;
    /* Horizontal gap: 40px, Vertical gap: 20px */
    gap: 20px 40px; 
    max-width: 1200px;
    margin: 0 auto;
    margin-bottom: 50px;
    margin-left: 20px;
}

/* Individual point styling - 3 PER ROW ON DESKTOP */
.services-item {
    display: flex;
    align-items: center;
    font-weight: 700;
    color: black;
    font-size: 16px;
    letter-spacing: -0.02em;
    /* (100% / 3) minus the shared gap space to fit 3 in a row */
    flex: 0 0 calc(33.33% - 27px); 
    box-sizing: border-box;
}

.services-item:hover{
  color: #C4A263;
}

/* The circular checkmark icon */
.services-icon {
    background-color: #C4A263;
    color: white;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 13px;
    flex-shrink: 0;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

/* Responsive Mobile: 2 PER ROW */
@media (max-width: 768px) {
    .services-wrapper {
        gap: 15px 10px; /* Tighter gap for smaller screens */
    }
    
    .services-item {
        /* (100% / 2) minus the shared gap space to fit 2 in a row */
        flex: 0 0 calc(50% - 5px); 
        font-size: 14px;
        align-items: flex-start; 
    }

    .services-icon {
        margin-top: 2px;
    }
}




.service-card-icon img {
  width: 25px;
  /* Adjust this to make the icon smaller/larger */
  height: auto;
  object-fit: contain;
  /* Keeps the icon from stretching */
}

/* Responsive */
@media (max-width: 992px) {
  .services-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 600px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .services-scoped .services-subtitle {
    font-size: 12px;
  }

  .services-scoped .services-main-title {
    font-size: 30px;
  }
}

/* --- CTA BOXED SECTION --- */
.cta-boxed-section {
  position: relative;
  z-index: 100;
  padding-top: 50px;
  margin-top: -80px;
  margin-bottom: 40px;
  background: transparent;
}

.cta-boxed-section .cta-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 40px;
  /* Creates the 'boxed' look from side edges */
}

.cta-black-box {
  position: relative;
  background-image: url('construction-bg.jpg');
  background-size: cover;
  background-position: center;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.cta-box-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(18, 18, 18, 0.94);
  /* Deep black */
  z-index: 1;
}

.cta-box-inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 50px 60px;
}

.cta-stat-num {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 800;
  /* Extra Bold */
  font-size: 100px;
  color: #C4A263;
  line-height: 1;
  /* Ensures height is exactly the font size */
  display: inline-block;
  /* Allows the box to fit the content width */
  white-space: nowrap;
  /* STOPS the plus sign from dropping to line 2 */
  min-width: 1.2ch;
}

.cta-left-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Keeps everything left-aligned */
  min-width: fit-content;
  /* Grows to fit the number animation */
}

.cta-stat-text {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  color: #ffffff;
}

.cta-v-line {
  width: 1px;
  height: 110px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 0 30px;
}

.cta-mid-content h3 {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 600;
  font-size: 32px;
  color: #ffffff;
  line-height: 1.2;
}

@media (max-width: 1100px) {
  .cta-box-inner {
    flex-direction: column;
    text-align: center;
    gap: 30px;
  }

  .cta-v-line {
    display: none;
  }

  .cta-stat-num {
    font-size: 80px;
  }

  .cta-mid-content h3 {
    font-size: 26px;
  }
}

/* FIXED CTA BUTTON */
.cta-custom-btn {
  background-color: #C4A263 !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
  padding: 8px 8px 8px 25px !important;
  transition: 0.3s ease;
  flex-shrink: 0;
}

.cta-btn-label {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #ffffff !important;
  line-height: 1.2;
  margin-right: 20px;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  /* Prevents text from squashing */
}

.cta-btn-square {
  width: 45px;
  height: 45px;
  background-color: #ffffff !important;
  color: #C4A263 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* --- VISION & VALUES SECTION  --- */
#raven-ethos-section {
  --ethos-bronze: #C4A263;
  --ethos-dark: #1a1a1a;
  --ethos-text: #666666;
  --ethos-border: #f0f0f0;
  padding: 40px 0;
  background: #fff;
  overflow: hidden;
}

#raven-ethos-section .ethos-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header Typography */
#raven-ethos-section .ethos-header {
  text-align: center;
  margin-bottom: 60px;
}

#raven-ethos-section .ethos-subtitle {
  font-family: 'Rubik', sans-serif;
  color: var(--bronze);
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}

#raven-ethos-section .ethos-subtitle::before {
  content: "";
  width: 35px;
  height: 2px;
  background-color: var(--bronze);
}

#raven-ethos-section .ethos-title {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 48px;
  font-weight: 800;
  color: var(--ethos-dark);
  margin-top: 20px;
}

/* Layout Logic */
#raven-ethos-section .ethos-main-layout {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

#raven-ethos-section .ethos-cards-column {
  flex: 1.2;
  z-index: 10;
}

#raven-ethos-section .ethos-grid {
  display: flex;
  gap: 20px;
}

#raven-ethos-section .ethos-col {
  flex: 1;
}

#raven-ethos-section .ethos-card {
  background: #fff;
  border: 1px solid var(--ethos-border);
  padding: 30px;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  transition: 0.3s;
}

#raven-ethos-section .ethos-stagger-down {
  margin-top: 40px;
}

#raven-ethos-section .ethos-stagger-up {
  margin-top: 0;
}

/* Card Content */
#raven-ethos-section .ethos-icon img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-bottom: 20px;
}

#raven-ethos-section .ethos-card h3 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--ethos-dark);
  margin-bottom: 10px;
}

#raven-ethos-section .ethos-card p {
  font-family: 'Rubik', sans-serif;
  font-size: 14px;
  color: var(--ethos-text);
  line-height: 1.6;
}

/* Right Content Column */
#raven-ethos-section .ethos-features-column {
  flex: 1;
}

#raven-ethos-section .ethos-text-content p {
  font-family: 'Rubik', sans-serif;
  color: var(#666);
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 40px;
}

/* Imagery */
#raven-ethos-section .ethos-image-overlap {
  margin-left: -60px;
  z-index: 1;
  position: relative;
}

#raven-ethos-section .ethos-image-overlap img {
  width: 115%;
  height: 380px;
  object-fit: cover;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Responsive */
@media (max-width: 991px) {
  #raven-ethos-section .ethos-main-layout {
    flex-direction: column;
  }

  #raven-ethos-section .ethos-image-overlap {
    margin-left: 0;
  }

  #raven-ethos-section .ethos-image-overlap img {
    width: 100%;
    height: auto;
  }

  #raven-ethos-section .ethos-stagger-down {
    margin-top: 0;
  }

  #raven-ethos-section .ethos-grid {
    flex-direction: column;
  }

  #raven-ethos-section .ethos-subtitle {
    font-size: 12px;
  }

  #raven-ethos-section .ethos-title {
    font-size: 30px;
  }
}

#rav-updates {
  --rav-bronze: #C4A263;
  --rav-dark: #1e2023;
  padding: 40px 0;
  background-color: #ffffff;
  overflow: hidden;
  margin-top: 0 !important;
}

/* Centered container for the header text only */
.rav-container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 20px;

}

.rav-updates-header {
  text-align: center;
  margin-bottom: 60px;
  margin-top: 0 !important;
}

.rav-updates-subtitle {
  font-family: 'Rubik', sans-serif;
  color: var(--bronze);
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 10px;
}

/* The Bronze Lines */
.rav-updates-subtitle::before {
  content: "";
  width: 35px;
  height: 2px;
  background-color: var(--rav-bronze);
}

.rav-updates-heading {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 48px;
  font-weight: 800;
  color: var(--rav-dark);
}

/* --- FULL WIDTH GALLERY --- */
.rav-updates-gallery-wrapper {
  width: 100%;
  padding: 0 20px;

}

.rav-updates-gallery {
  display: flex;
  gap: 20px;
  width: 100%;
  /* If you want manual scroll, keep this. For auto-slider, JS handles it. */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.rav-updates-gallery::-webkit-scrollbar {
  display: none;
  /* Keeps it clean */
}

.rav-gallery-item {
  /* This ensures 5 images fit exactly across the screen with gaps */
  flex: 0 0 calc(20% - 16px);
  height: 450px;
  /* Adjusted height for vertical look */
  border-radius: 12px;
  overflow: hidden;
  scroll-snap-align: start;
}

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

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

/* Responsive: 3 images on tablet, 1.5 on mobile */
@media (max-width: 1024px) {
  .rav-gallery-item {
    flex: 0 0 calc(33.33% - 14px);
  }
}

@media (max-width: 600px) {
  .rav-gallery-item {
    flex: 0 0 80%;
  }

  /* Shows 80% of an image to hint at scrolling */
  .rav-updates-heading {
    font-size: 30px;
  }

  .rav-updates-subtitle {
    font-size: 12px;
  }
}

/*project slider section css start   css class start with pr */
.prheader-left {
  flex: 1;
  min-width: 300px;
}

.prsubtitle {
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  color: #C4A263;
  font-size: 14px;
  letter-spacing: 1px;
  display: block;
  margin-bottom: 10px;
}


.prsubtitle .prline {
  width: 40px;
  height: 2px;
  background-color: var(--accent-gold);
}

.prheader-left h2 {
  font-size: 48px;
  line-height: 1.12;
  color: var(--primary-black);
  padding-left: 250px;
  font-family: 'Roboto Condensed', sans-serif;
}

.prheader-right {
  flex: 1;
  min-width: 300px;
  max-width: 500px;
  font-family: 'Rubik';
}

.prheader-right p {
  font-family: 'Rubik', sans-serif;
  font-weight: 300;
  color: var(--primary-gray);
  line-height: 1.6;
  margin-bottom: 30px;
  font-size: 16px;
}


.prportfolio-section {
  padding: 40px 0;
  /* Standardized padding */
  margin-top: 0;
  /* Removed the 50px margin */
}

.prbtn-contact {
  display: inline-flex;
  align-items: center;
  background-color: var(--primary-black);
  color: white;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  transition: transform 0.2s ease;
}

.prbtn-contact span {
  padding: 15px 30px;
}

.prbtn-contact .pricon-box {
  background-color: white;
  color: var(--primary-black);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px;
}

/* --- Slider Grid --- */
.prprojects-grid {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  padding-bottom: 40px;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

.prprojects-grid::-webkit-scrollbar {
  display: none;
}

.prprojects-grid.active {
  cursor: grabbing;
}

.prproject-card {
  flex: 0 0 auto;
  width: 500px;
  position: relative;
  text-decoration: none;
  transition: transform 0.3s ease;
}

.prproject-card:hover {
  transform: translateY(-10px);
}

.primage-wrapper {
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.primage-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}

.prcard-details {
  background: white;
  width: 85%;
  margin: -170px auto 0;
  position: relative;
  z-index: 2;
  padding: 25px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.prtag {
  font-size: 14px;
  color: #C4A263;
  border: 1px solid #C4A263;
  padding: 4px 10px;
  margin-right: 5px;
  text-transform: uppercase;
  font-weight: 600;
  font-family: 'Rubik', sans-serif;
}

.prcard-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
}

.prcard-footer h3 {
  font-size: 24px;
  color: #1E2023;
  font-family: 'Roboto Condensed', sans-serif;
}

.prslider-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
}

.prpagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

.prdot {
  width: 10px;
  height: 10px;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: all 0.3s ease;
}

.prdot.active {
  background-color: #C4A263;
  border: 1px solid #C4A263;
  border-spacing: 2px;

}


.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1200px;
  margin: 0px auto;
}


@media (max-width: 768px) {
  .prheader-left h2 {
    font-size: 30px;
  }

  .prsubtitle {
    font-size: 12px;
  }

  .prproject-card {
    width: 280px;
  }

  .prheader-left h2 {
    padding-left: 0px;
  }

  .header {
    justify-content: center;
    align-items: center;
    margin: 0px 30px 50px;
  }

  .prheader-right p {
    margin-top: -50px;
  }
}

.prdots-container>.prdot {
  color: white;

}

/*project slider section css end    */






/*testiomonial section css start     css start with TT*/
.TTtestimonial-section {
  width: 100%;
  padding: 40px 20px;
  margin: 0 auto;
  margin-top: 0 !important;
}

.TTheader {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
  margin-top: 0 !important;
}

.TTheader-content .TTsub-title {
  font-family: 'Rubik', sans-serif;
  color: #C4A263;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  margin-bottom: -20px;
}

.TTheader-content .TTsub-title::before {
  content: '';
  display: inline-block;
  width: 30px;
  height: 2px;
  background-color: #C4A263;
  margin-right: 10px;
}

.TTsub-title {
  position: relative;
  padding-left: 50px;
  /* space for the line */
  color: #C4A263;
  font-size: 14px;
  font-family: 'Rubik', sans-serif;
}

.TTsub-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 40px;
  height: 2px;
  background-color: var(--bronze);
  /* change color if needed */
  transform: translateY(-50%);
}


.TTheader-content h2 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 48px;
  font-weight: 800;
  color: #1E2023;
}

.TTnav-buttons {
  display: flex;
  gap: 10px;
}

.TTnav-arrow {
  background: white;
  border: 1px solid #eee;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #C4A263;
}

.TTnav-arrow:hover {
  background: #C4A263;
  color: white;
  border-color: var(--primary-black);
}

.TTnav-btn {
  width: 50px;
  height: 50px;
  border: 1px solid #eee;
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c5a47e;
  transition: all 0.3s ease;
}

.TTnav-btn:hover {
  background-color: #c5a47e;
  color: white;
  border-color: #c5a47e;
}

.TTslider-container {
  overflow: hidden;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 10px;
}

.TTslider-track {
  display: flex;
  gap: 30px;
  transition: transform 0.5s ease-in-out;
}

.TTcard {
  background: white;
  padding: 40px 30px;
  flex: 0 0 calc(80% - 20px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width: 992px) {
  .TTcard {
    flex: 0 0 calc(80% - 15px);
  }

  .TTheader-content h2 {
    font-size: 30px;

  }

  .TTsub-title {
    font-size: 12px;
  }
      .TTnav-buttons {
        margin: 0px 160px 0px 0px;
    }

}

.TTquote-box {
  position: absolute;
  top: 0;
  right: 30px;
  width: 60px;
  height: 60px;
  background-color: #C4A263;
  color: white;
  font-size: 24px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-50%);
}

.TTquote-box span {
  font-family: sans-serif;
  letter-spacing: -2px;
}

.TTstars {
  color: #C4A263;
  margin-bottom: 20px;
  font-size: 14px;
}

.TTtestimonial-text {
  font-family: 'Roboto', sans-serif;
  color: #1E2023;
  font-size: 18px;
  line-height: 1.12;
  margin-bottom: 30px;
  font-weight: 550;
}

.TTprofile {
  display: flex;
  align-items: center;
  gap: 15px;
}

.TTprofile-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
  background-color: #eee;
}

.TTprofile-info h4 {
  font-family: 'Rubik', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #1E2023;
  margin-bottom: 2px;
}

.TTprofile-info p {
  font-size: 14px;
  color: #555555;
  font-family: 'Rubik', sans-serif;
}

@media (max-width: 1024px) {
  .TThide-mobile-tab {
    display: none;
  }

  .TTtestimonial-text {
    font-size: 14px;
  }
}

/*testiomonial section css start */


/*CTA section css start        css class are start with CTA*/
.CTA-section {
  position: relative;
  width: 100%;
  background-image: url('https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?q=80&w=2070&auto=format&fit=crop');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 60px 20px 0px 20px;
  color: white;
  min-height: 400px;
  display: flex;
  align-items: center;
}

.CTAbg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.9) 0%, #000 100%);
  z-index: 1;
}

.CTAcontainer2 {
  position: relative;
  z-index: 2;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.CTAstats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 80px;
  margin-top: -250px;
}

.CTAstat-card {
  background: white;
  padding: 30px 15px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.CTAstat-number {
  font-size: 55px;
  font-weight: 700;
  color: #C4A263;
  margin-bottom: 10px;
}

.CTAstat-label {
  color: #333;
  font-weight: 700;
  font-size: 18px;
  text-transform: capitalize;
  font-family: 'Roboto Condensed', sans-serif;
}

.CTAcontent-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: center;
}

.CTAimage-wrapper2 {
  flex-shrink: 0;
}

.CTAimage-wrapper2 img {
  width: 250px;
  height: 180px;
  object-fit: cover;
  border: 5px solid white;
  display: block;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

.CTAtext-content {
  max-width: 600px;
}

.CTAtext-content h2 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.12;
  margin-bottom: 15px;
  font-family: 'Roboto Condensed', sans-serif;

}

.CTAtext-content p {
  font-size: 20px;
  color: #ccc;
  line-height: 1.12;
  font-weight: 400;
}

.CTActa-wrapper {
  display: flex;
  justify-content: flex-end;
}

.CTAbtn-gold {
  display: inline-flex;
  align-items: center;
  background-color: var(--bronze);
  text-decoration: none;
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  height: 55px;
  padding-left: 20px;
  transition: background-color 0.3s ease;
}

.CTAbtn-gold:hover {
  background-color: #b08d65;
}

.CTAbtn-gold span {
  margin-right: 15px;
}

.CTAicon-box {
  background-color: white;
  color: #c5a47e;
  height: 100%;
  width: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

  .CTAcontent-row {
    grid-template-columns: 1fr;
    text-align: center;
    justify-items: center;
    margin-bottom: 50px;
  }

  .CTActa-wrapper {
    justify-content: center;
    width: 100%;
  }

  .CTAbtn-gold {
    width: 100%;
    justify-content: space-between;
  }

  .CTA-section{
    width: 90%;
  }

}

@media (max-width: 600px) {
  .CTAstats-grid {
    grid-template-columns: 1fr;
    margin-top: 0px;
  }

  .CTAstat-number {
    font-size: 2rem;
  }

  .CTAtext-content h2 {
    font-size: 1.25rem;
  }
}


/*CTA section css END*/





/*contact section css start    css class are start with con */






.con-contact-section {
  background-image: url(/wp-content/uploads/2026/02/background-contact.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding: 100px 20px;
  display: flex;
  justify-content: center;
  font-family: 'Arial', sans-serif;
  margin-top: 70px;
  max-height: 590px;
}

.con-contact-container {
  display: flex;
  max-width: 1400px;
  width: 100%;
  align-items: center;
}

/* Image Side */
.con-contact-visual {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.con-worker-img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: -50px;
}

/* Gold Box Side */
.con-form-wrapper {
  flex: 1;
}

.con-gold-card {
  background-color: var(--bronze);
  padding: 30px;
  max-height: 550px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
}

.con-header-area {
  color: #ffffff;
  margin-bottom: 30px;
}



.con-shortcode-area {
  background-color: transparent;
  flex-grow: 1;
  width: 100%;
  min-height: 450px;
}

/* Tablet & Mobile Layout */
@media (max-width: 991px) {
  .con-contact-container {
    flex-direction: column;
  }

  .con-gold-card {
    margin-top: 20px;
    padding: 40px 20px;
    max-height: 350px;
  }

  .con-contact-section {
    background-image: none;
    background-color: white;
  }

  .con-worker-img {
    margin-top: -20px;
    max-width: 100%;
  }

  .con-contact-section {
    padding-top: 0px;
  }
}

/* Background wrapper */
.con-form-wrapper {
    background: #c5a25a; /* gold background */
    padding: 60px;
}

/* Make form full width */
.con-form-wrapper .fluentform {
    width: 100%;
}

/* Two column layout */
.con-form-wrapper .ff-el-group {
    width: 100%;
    display: inline-block;
    vertical-align: top;
    margin-bottom: 20px;
}

/* Make message full width */
.con-form-wrapper .ff-el-group.full-width,
.con-form-wrapper .ff-el-group textarea {
    width: 100% !important;
}

/* Input & textarea styling */
.con-form-wrapper input,
.con-form-wrapper textarea,
.con-form-wrapper select {
    width: 100%;
    padding: 18px;
    background: #e9e9e9;   /* light gray */
    border: none;
    border-radius: 0;
    font-size: 15px;
}

/* Remove focus outline */
.con-form-wrapper input:focus,
.con-form-wrapper textarea:focus {
    outline: none;
    box-shadow: none;
}

/* Textarea height */
.con-form-wrapper textarea {
    min-height: 180px;
    resize: none;
}

/* Submit button wrapper */
.con-form-wrapper .ff-btn-submit {
    background: #1e1e1e;   /* dark button */
    color: #fff;
    padding: 18px 40px;
    border: none;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    position: relative;
}

/* Gold arrow box */
.con-form-wrapper .ff-btn-submit::after {
    content: "↗";
    background: #c5a25a;
  color: #fff;
  padding: 8px 8px 8px 10px;
	margin-left:20px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  text-decoration: none;
  transition: 0.3s;
}













/*logo section css start    css class are start with lo*/


.lo-wrapper {
  padding: 50px 0;
  background: #fff;
  overflow: hidden;
  width: 100%;
}

.lo-slider {
  position: relative;
  width: 100%;
}

.lo-track {
  display: flex;
  width: calc(200px * 12);
  /* logo width × total items */
  animation: scroll 25s linear infinite;
}

.lo-item {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lo-item img {
  max-height: 80px;
  width: auto;
  transition: opacity 0.3s ease;
}

.lo-item img:hover {
  opacity: 0.7;
}

/* Animation */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* Pause on hover */
.lo-slider:hover .lo-track {
  animation-play-state: paused;
}

/* Mobile tweaks */
@media (max-width: 700px) {
  .lo-item {
    width: 150px;
  }

  .lo-wrapper {
    padding: 120px 0px 50px;
  }
}


/*logo section css start*/







:root {

  --fo-dark-bg: #1e2023;
  --fo-black: #111111;
  --fo-border: #2a2a2a;
  --fo-gray-text: #a0a0a0;
}

.fo-footer {
  background-color: var(--fo-dark-bg);
  color: #ffffff;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* CTA Styles */
.fo-cta-wrap {
  text-align: center;
  padding: 45px 20px;
  background-image: url(images/footer-bg.png);
  background-position: center;
  background-repeat: none;
  background-size: cover;

}

.fo-cta-sub {
  font-weight: 200;
  display: inline-flex;
  /* align text and line horizontally */
  align-items: center;
  /* vertically center the line with text */
  gap: 10px;
  /* space between line and text */
  position: relative;
  color: #C4A263;
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
}

.fo-cta-sub::before {
  content: "";
  display: inline-block;
  width: 40px;
  /* length of the line */
  height: 2px;
  /* thickness of the line */
  background-color: #c2a169;
  /* line color */
}



.fo-cta-main {
  font-size: 64px;
  margin: 20px 0 40px;
  line-height: 1.2;
  font-weight: 600;
  font-family: 'Roboto Condensed', sans-serif;
}

.fo-btn-group {
  display: inline-flex;
  align-items: stretch;
}

.fo-btn-main {
  background-color: var(--fo-gold);
  color: white;
  text-decoration: none;
  padding: 15px 30px;
  font-weight: bold;
  font-size: 14px;
}

.fo-btn-arrow {
  background-color: #ffffff;
  color: var(--fo-black);
  padding: 15px 18px;
  display: flex;
  align-items: center;
}

/* Grid Layout */
.fo-content-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 60px;
  padding: 80px 20px;
}

.fo-logo-img {
  width: 140px;
  margin-bottom: 0px;
  margin: 0px auto;
}

.fo-brand-desc {
  color: #FFFFFF;
  line-height: 1.7;
  font-size: 16px;
  max-width: 250px;
  font-family: 'Rubik', sans-serif;
  font-weight: 200;
}

.fo-list-title {
  font-size: 20px;
  margin-bottom: 25px;
  font-weight: 600;
  font-family: 'Roboto Condensed', sans-serif;
}

.fo-ul {
  list-style: none;
  padding: 0;
}

.fo-li {
  margin-bottom: 12px;
}

.fo-a {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 16px;
  transition: 0.3s;
  font-weight: 100;
  font-family: 'Rubik', sans-serif;
}

.fo-a:hover {
  color: var(--fo-gold);
}

/* Info Bar */
.fo-info-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--fo-border);
  border-bottom: 1px solid var(--fo-border);
}

.fo-info-item {
  padding: 30px;
  display: flex;
  align-items: center;
  border-right: 1px solid var(--fo-border);
}

.fo-icon-box {
  background: #c4a263;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  border-radius: 4px;
}

.fo-label {
  display: block;
  font-weight: 700;
  font-size: 18px;
  font-family: 'Roboto Condensed', sans-serif;
}

.fo-value {
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 200;
  font-family: 'Rubik', sans-serif;
}

/* Copyright Bar */
.fo-bottom-footer {
  padding: 25px;
  text-align: center;
  background-color: var(--fo-black);
  font-size: 15px;
  color: #FFFFFF;
  font-family: 'Rubik', sans-serif;
  font-weight: 200;
}

/* Container to space them out */
.fo-social-icons {
  display: flex;
  gap: 12px;
  margin-top: 25px;
}

/* Individual Icon Style */
.fo-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  /* Makes them circular */
  border: 1px solid #444;
  /* Subtle border seen in the image */
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  transition: all 0.3s ease-in-out;
  background-color: transparent;
}

/* Hover State */
.fo-social-icon:hover {
  background-color: var(--fo-gold);
  /* Fills with gold on hover */
  border-color: var(--fo-gold);
  color: #000000;
  /* Darkens the icon itself for contrast */
  transform: translateY(-3px);
  /* Optional: slight lift effect */
}

.fo-dev-highlight {
  color: var(--fo-gold);
}


.fo-col-brand {
  margin: -50px auto 0px auto;
}

/* Mobile responsiveness */
@media (max-width: 768px) {

  .fo-content-grid,
  .fo-info-bar {
    grid-template-columns: 1fr;
  }

  .fo-info-item {
    border-right: none;
    border-bottom: 1px solid var(--fo-border);
  }

  .fo-cta-main {
    font-size: 32px;
  }

  .fo-content-grid {
    margin: 0px auto;
    display: flex;
    /* Switch to flex for easier centering on mobile */
    flex-direction: column;
    /* Stack columns vertically */
    align-items: center;
    /* Centers the items horizontally */
    text-align: center;
    /* Centers the text inside the columns */
    gap: 40px;
    /* Adds spacing between stacked sections */
  }


  .fo-cta-wrap {
    margin-bottom: 0px;
    padding-bottom: 0px;
  }

  /* Centers the social icons container on mobile */
  .fo-social-icons {
    justify-content: center;
  }

  /* Centers the bullet point lists on mobile */
  .fo-ul {
    padding: 0;
    display: inline-block;
    /* Keeps the list width constrained */
    text-align: left;
    /* Keeps text left-aligned inside a centered container */
  }

  .fo-li {
    text-align: center;
    /* Or keep center if you prefer the look */
  }

  .fo-info-bar>*:first-child {
    display: none;
  }

  .fo-info-bar>*:last-child {
    display: none;
  }


  .fo-info-bar {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Creates the 2x2 grid */
    border-bottom: none;
    /* Prevents double borders at the very bottom */
  }

  .fo-info-item {
    flex-direction: column;
    /* Stacks icon above text for a better fit */
    text-align: center;
    padding: 20px 10px;
    border-bottom: 1px solid var(--fo-border);
    border-right: 1px solid var(--fo-border);
  }

  /* Removes the right border for the 2nd and 4th items to maintain the 2x2 look */
  .fo-info-item:nth-child(2n) {
    border-right: none;
  }

  .fo-icon-box {
    margin-right: 0;
    margin-bottom: 10px;
    /* Space between icon and text */
  }
}


/*project page css start        css class are start with pp*/


   .pphero-container {
            position: relative; /* This acts as the anchor for the absolute items inside */
            height: 80vh; /* Full screen height */
            width: 100%;
            overflow: hidden; /* Ensures nothing spills out */
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            margin-bottom: 50px;
        }

        /* 1. The Image Layer */
        .pphero-bg-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; /* Crucial: Makes the <img> act like background-size: cover */
            z-index: 1; /* Sits at the bottom */
        }

        /* 2. The Dark Overlay Layer */
        .pphero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.65); /* Black with 65% opacity */
            z-index: 2; /* Sits on top of the image */
        }

        /* 3. The Text Layer */
        .pphero-text {
            position: relative; /* Relative creates a new stacking context */
            z-index: 3; /* Sits on top of the overlay */
            font-family: 'Roboto Condensed', sans-serif;
            color: #ffffff;
            font-size: 5rem;
            font-weight: 700;
            margin: 0;
            letter-spacing: -1px;
        }

        /* Mobile Responsiveness */
        @media (max-width: 768px) {
            .pphero-text {
                font-size: 3rem;
                padding: 0 20px;
            }
        }





.ppgallery-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 30px;
    padding: 20px;
    max-width: 1200px;
    margin: auto;
}

.ppgallery-item {
    position: relative;
    display: flex;
    flex-direction: column; 
    background: white; 
}

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

.ppspan-full {
    grid-column: span 6; 
    max-width: 100%;
    max-height: 100%;
}

.ppspan-third {
    grid-column: span 2;
}


.ppspan-vertical {
    grid-row: span 2; 
}


@media (max-width: 768px) {
    /* 1. Switch to a single column grid */
    .ppgallery-container {
        grid-template-columns: 1fr;
        gap: 20px;       /* Slightly smaller gap for mobile */
        padding: 15px;   /* Slightly smaller padding */
    }

    /* 2. Reset ALL span classes to fit the single column */
    /* IMPORTANT: Added .ppspan-full here */
    .ppspan-full,
    .ppspan-half,
    .ppspan-third,
    .ppspan-vertical {
        grid-column: span 1 !important; /* Force items to be 1 column wide */
        grid-row: auto !important;      /* Remove vertical spanning so items stack normally */
    }

    /* 3. Adjust image behavior for mobile */
    .ppgallery-item {
        height: auto; /* Let the container adjust to the image height */
    }

    .ppgallery-item img {
        height: auto;        /* maintain aspect ratio */
        max-height: 60vh;    /* Prevent vertical images from taking up the whole phone screen */
        object-fit: cover;
    }
}
/*project page css end*/








.contact-title {
  font-family: 'Rubik', sans-serif;
    color: #C4A263;
    font-size: 14px;
    font-weight: 500;
  position: relative;
}

.contact-title::before {
  content: "";
  width: 40px;
  height: 2px;
  background-color: #d4af37;
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}

.contact-heading {
  font-family: 'Roboto Condensed', sans-serif;
    font-size: 48px;
    font-weight: 800;
    color: #1E2023;
}

.contact-title::before {
  background-color: #ffffff;
}


@media (max-width: 992px) {
	.contact-title {
    font-size: 12px;
}
	.contact-heading {
		font-size: 30px;
	}
	
	.con-gold-card {
        margin-top: 0px;
        padding: 0px 20px 20px 0px;
        max-height: 550px;
    }
	.con-contact-section {
        margin-bottom: 180px;
    }
}






/* --- Parent Menu Item Positioning --- */
.menu-item-has-children {
    position: relative;
}

/* --- Base Submenu Styling --- */
.menu-item-has-children .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    background: #C4A263;
    padding: 10px;
    margin: 0;
    list-style: none;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
    z-index: 999;
}

/* --- Submenu Items & Links --- */
.menu-item-has-children .sub-menu li {
    border-bottom: 1px solid rgba(255,255,255,0.3);
}

.menu-item-has-children .sub-menu li:last-child {
    border-bottom: none;
}

.menu-item-has-children .sub-menu li a {
    display: block;
    padding: 12px 18px;
    color: #fff;
    text-decoration: none;
    transition: all 0.3s ease;
}

.menu-item-has-children .sub-menu li a:hover {
    background: #b8934f;
    padding-left: 24px;
}

/* --- Dropdown Arrows (CSS Triangle) --- */
.menu-item-has-children > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px; /* Space between text and arrow */
}

.menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid currentColor; /* Matches the link color automatically */
    transition: transform 0.3s ease; /* Smooth rotation */
    margin-top: 2px; /* Slight visual adjustment to align with text */
}

/* --- Desktop Specific Styles (992px and up) --- */
@media (min-width: 992px) {
    /* Show submenu on hover */
    .menu-item-has-children:hover > .sub-menu {
        display: block;
    }
    
    /* Rotate arrow up on hover */
    .menu-item-has-children:hover > a::after {
        transform: rotate(180deg);
    }
}

/* --- Mobile Specific Styles (991px and below) --- */
@media (max-width: 991px) {
    .menu-item-has-children .sub-menu {
        position: relative;
        box-shadow: none;
        border-radius: 0;
        display: none; /* Stays hidden by default on mobile */
    }

    /* Show submenu when clicked (toggled via JavaScript) */
    .menu-item-has-children.submenu-open > .sub-menu {
        display: block;
    }

    /* Rotate arrow up when clicked */
    .menu-item-has-children.submenu-open > a::after {
        transform: rotate(180deg);
    }
}