body {
    background-color: #0b0b0b; /* Ensures your site's default background is dark */
    color: #ffffff;
}

/* Make sure text elements don't accidentally inherit white backgrounds */
.section-heading, 
.services-content, 
.quote-wrapper, 
.services-glass-card {
    background-color: transparent; /* Or use your dark glass color like rgb(255 255 255 / .05) */
}

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

.services-hero {

    position: relative;
    min-height: 100vh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
    url("../images/services-hero.jpg")
    center center/cover no-repeat;
}

/* Overlay */

.services-overlay {

    position: absolute;
    inset: 0;

    background:
    linear-gradient(
        rgb(8 8 8 /.72),
        rgb(8 8 8 /.82)
    );
}

/* Gold Gradient */

.services-gradient {

    position: absolute;
    inset: 0;

    background:
    radial-gradient(
        circle at right,

        rgb(194 155 56 /.10),

        transparent 55%
    );
}

/* Container */

.services-hero .container {

    position: relative;
    z-index: 2;
}

/* Layout */

.services-hero-grid {

    display: grid;

    grid-template-columns:
    1.1fr .9fr;

    gap: 5rem;

    align-items: center;
}

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

.services-content h1 {

    margin: 1.5rem 0;

    font-family: var(--heading);

    font-size: clamp(3.8rem, 7vw, 5.8rem);

    color: var(--white);

    line-height: 1.05;
}

.services-content h1 span {

    display: block;

    color: var(--gold);
}

.services-content p {

    max-width: 700px;

    margin-bottom: 2.8rem;

    color: var(--muted);

    font-size: 1.05rem;

    line-height: 1.9;
}

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

.services-glass-card {

    padding: 3rem;

    border-radius: 30px;

    background:
    rgb(255 255 255 /.05);

    border:
    1px solid rgb(255 255 255 /.08);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    box-shadow: var(--shadow);
}

.services-glass-title {

    display: block;

    margin-bottom: 2rem;

    color: var(--gold);

    letter-spacing: 4px;

    font-size: .85rem;

    text-transform: uppercase;
}

.services-glass-item {

    padding: 1.8rem 0;

    border-bottom:
    1px solid rgb(255 255 255 /.08);
}

.services-glass-item:last-child {

    border: none;
}

.services-glass-item h3 {

    margin-bottom: .8rem;

    font-family: var(--heading);

    color: var(--white);

    font-size: 1.7rem;
}

.services-glass-item p {

    color: var(--muted);

    line-height: 1.8;
}

/* ==========================================================
            SECTION LABEL (WITH ::BEFORE & ::AFTER)
========================================================== */

.section-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  margin-bottom: 1.4rem;

  background: transparent; /* Forces the background to be completely clear */
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;

  color: var(--gold);
}

/* Decorative Gold Lines */

.section-label::before,
.section-label::after {
  content: "";
  width: 55px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold),
    transparent
  );
}

/* ==========================================================
                SERVICES INTRODUCTION
========================================================== */

.services-intro {
  position: relative;
  padding: clamp(6rem, 8vw, 8rem) 0;

  background: linear-gradient(
    180deg,
    #101010,
    #151515,
    #101010
  );

  overflow: hidden;
}

.services-intro::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at bottom left,
      rgb(194 155 56 / 8%),
      transparent 45%
    );

  pointer-events: none;
}

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

.intro-grid {
  display: grid;
  grid-template-columns: 1.3fr .8fr;
  gap: 5rem;
  align-items: center;
}

.intro-content h2 {
  margin: 1rem 0 2rem;

  font-family: var(--heading);
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  line-height: 1.15;

  color: var(--white);
}

.intro-content p {
  margin-bottom: 1.8rem;

  color: var(--muted);

  font-size: 1rem;
  line-height: 1.9;
}

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

.highlight-card {
  position: relative;
  overflow: hidden;

  padding: 3rem;

  border-radius: 28px;

  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 6%),
    rgb(255 255 255 / 3%)
  );

  border: 1px solid rgb(255 255 255 / 8%);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    var(--shadow),
    inset 0 1px rgb(255 255 255 / 4%);

  transition: var(--transition);
}

.highlight-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 4px;
  height: 100%;

  background: var(--gold);

  transform: scaleY(0);
  transform-origin: top;

  transition: var(--transition);
}

.highlight-card::after {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      135deg,
      rgb(194 155 56 / 8%),
      transparent 60%
    );

  opacity: 0;

  transition: var(--transition);

  pointer-events: none;
}

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

  border-color: rgb(194 155 56 / 35%);

  box-shadow:
    0 30px 70px rgb(0 0 0 / 35%),
    0 0 40px rgb(194 155 56 / 10%);
}

.highlight-card:hover::before {
  transform: scaleY(1);
}

.highlight-card:hover::after {
  opacity: 1;
}

.highlight-card h3 {
  margin-bottom: 2rem;

  font-family: var(--heading);
  font-size: 2rem;

  color: var(--white);
}

.highlight-card ul {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.highlight-card li {
  display: flex;
  align-items: center;
  gap: 1rem;

  color: var(--muted);

  line-height: 1.7;
}

.highlight-card li i {
  color: var(--gold);
  font-size: .95rem;
}

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

.service-section {
  position: relative;
  padding: clamp(6rem, 8vw, 8rem) 0;
  background: linear-gradient(
    180deg,
    #101010 0%,
    #151515 50%,
    #101010 100%
  );
  overflow: hidden;
}

.service-section::before {
  content: "";
  position: absolute;
  inset: 0;

  background: radial-gradient(
    circle at top right,
    rgb(194 155 56 / 8%),
    transparent 45%
  );

  pointer-events: none;
}

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

/* ==========================================================
                    LAYOUT
========================================================== */

.service-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.service-layout.reverse {
  direction: rtl;
}

.service-layout.reverse > * {
  direction: ltr;
}

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

.service-image {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
}

.service-image img {
  width: 100%;
  height: 620px;
  object-fit: cover;
  display: block;

  transition: transform .8s ease;
}

.service-image::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    rgb(0 0 0 / 10%),
    rgb(0 0 0 / 35%)
  );

  transition: var(--transition);
}

.service-image:hover img {
  transform: scale(1.08);
}

.service-image:hover::after {
  background: linear-gradient(
    rgb(0 0 0 / 5%),
    rgb(0 0 0 / 20%)
  );
}

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

.service-content {
  position: relative;

  padding: 3rem;

  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 6%),
    rgb(255 255 255 / 3%)
  );

  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 28px;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    var(--shadow),
    inset 0 1px rgb(255 255 255 / 4%);

  overflow: hidden;
}

/* Gold Accent */

.service-content::before {
  content: "";

  position: absolute;

  left: 0;
  top: 0;

  width: 4px;
  height: 100%;

  background: var(--gold);
}

/* Large Number */

.service-number {
  position: absolute;

  top: 25px;
  right: 30px;

  font-family: var(--heading);
  font-size: 6rem;
  font-weight: 700;

  color: rgb(255 255 255 / 3%);

  pointer-events: none;
}

/* ==========================================================
                    TYPOGRAPHY
========================================================== */

.service-content .section-label {
  margin-bottom: 1rem;
}

.service-content h2 {
  margin-bottom: 1.5rem;

  font-family: var(--heading);
  font-size: clamp(2.2rem, 4vw, 3.5rem);

  color: var(--white);

  line-height: 1.15;
}

.service-intro {
  margin-bottom: 1.5rem;

  color: var(--white);

  font-size: 1.05rem;
  line-height: 1.9;
}

.service-content p {
  color: var(--muted);
  line-height: 1.9;
}

/* ==========================================================
                    FEATURES
========================================================== */

.service-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;

  margin: 2.5rem 0;
}

.feature {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--gold);
}

.feature i {
  color: var(--gold);
}

/* ==========================================================
                HIGHLIGHT BOXES
========================================================== */

.service-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;

  margin-bottom: 2.5rem;
}

.highlight-box {
  padding: 1.5rem;

  text-align: center;

  background: rgb(255 255 255 / 4%);

  border: 1px solid rgb(255 255 255 / 6%);

  border-radius: 18px;

  transition: var(--transition);
}

.highlight-box:hover {
  border-color: var(--gold);

  transform: translateY(-6px);
}

.highlight-box i {
  color: goldenrod ;
}

.highlight-box h3 {
  margin-bottom: .6rem;

  font-family: var(--heading);

  color: var(--gold);

  font-size: 1.6rem;
}

.highlight-box p {
  font-size: .9rem;
  color: var(--muted);
}

/* ==========================================================
                    WHY SKYEAGLE
========================================================== */

.why-skyeagle {
  position: relative;
  padding: clamp(7rem, 9vw, 9rem) 0;
  background: var(--black);
  overflow: hidden;
}

.why-skyeagle::before {
  content: "";
  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle at top left,
      rgb(194 155 56 / 8%),
      transparent 45%);

  pointer-events: none;
}

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

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 5rem;
}

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

.section-heading h2{
  color: var(--white);
  display: flex;
  justify-content: center;
}

.section-heading p {
  color: var(--stone);
  display:flex;
}

.why-card {
  position: relative;
  padding: 2.8rem;

  background: linear-gradient(
    180deg,
    rgb(255 255 255 / 5%),
    rgb(255 255 255 / 2%)
  );

  border: 1px solid rgb(255 255 255 / 8%);
  border-radius: 24px;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  transition: var(--transition);
  overflow: hidden;
}

.why-card::before {
  content: "";

  position: absolute;
  left: 0;
  top: 0;

  width: 4px;
  height: 100%;

  background: var(--gold);

  transform: scaleY(0);
  transform-origin: top;
  transition: var(--transition);
}

.why-card:hover {
  transform: translateY(-12px);

  border-color: rgb(194 155 56 / 30%);

  box-shadow:
    0 25px 60px rgb(0 0 0 / 35%),
    0 0 30px rgb(194 155 56 / 10%);
}

.why-card:hover::before {
  transform: scaleY(1);
}


.why-icon {
  width: 75px;
  height: 75px;

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

  margin-bottom: 2rem;

  border-radius: 50%;

  background: rgb(194 155 56 / 10%);
  border: 1px solid rgb(194 155 56 / 20%);
}

.why-icon i {
  font-size: 1.8rem;
  color: var(--gold);
}

.why-card h3 {
  margin-bottom: 1rem;

  font-family: var(--heading);
  font-size: 1.8rem;

  color: var(--white);
}

.why-card p {
  color: var(--muted);
  line-height: 1.8;
}

/* ==========================================================
        SERVICES METRICS STRIP STYLING (OPTION 4)
========================================================== */

.services-metrics-strip {
    position: relative;
    padding: 4rem 0;
    background: var(--glass);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    z-index: 5;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    align-items: center;
    text-align: center;
}

.metric-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: 2.2rem 1.5rem;
    transition: all 0.3s ease;
}

.metric-item:hover {
    border-color: rgba(194, 155, 56, 0.3);
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.04);
}

.metric-item h3 {
    font-family: var(--heading, 'Cormorant Garamond', serif);
    font-size: 2.6rem;
    color: var(--gold, #c29b38);
    margin-bottom: 0.5rem;
    line-height: 1;
}

.metric-item p {
    color: var(--muted, #aaa);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}


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

.services-cta {
  position: relative;
  padding: 8rem 0;

  background:
    linear-gradient(
      rgb(10 10 10 / 82%),
      rgb(10 10 10 / 90%)
    ),
    url("../images/projects/contact-cta.jpg") center/cover no-repeat;

  text-align: center;
  overflow: hidden;
}

.services-cta::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    radial-gradient(circle,
      rgb(194 155 56 / 12%),
      transparent 60%);

  pointer-events: none;
}

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

.cta-content {
  max-width: 850px;
  margin: auto;
}

.cta-content h2 {
  margin: 1.5rem 0 2rem;

  font-family: var(--heading);
  font-size: clamp(3rem, 5vw, 4.8rem);

  color: var(--white);

  line-height: 1.15;
}

.cta-content p {
  max-width: 700px;
  margin: auto auto 3rem;

  color: var(--muted);

  font-size: 1.05rem;
  line-height: 1.9;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* ==========================================================
                    BUTTON IMPROVEMENTS
========================================================== */

.btn-primary,
.btn-secondary {
  transition: var(--transition);
}

.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-5px);
}

.btn-primary:hover {
  box-shadow: 0 20px 40px rgb(194 155 56 / 25%);
}

.btn-secondary:hover {
  box-shadow: 0 20px 40px rgb(255 255 255 / 10%);
}

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

@media (max-width: 992px) {

  .services-hero {
    min-height: 90vh;
    padding: 9rem 0 5rem;
  }

  .services-hero-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }

  .services-content {
    max-width: 100%;
    margin: auto;
  }

  .services-content p {
    margin-inline: auto;
  }

  .services-glass-card {
    max-width: 700px;
    margin: auto;
  }

  /* Introduction */

  .intro-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .intro-content {
    text-align: center;
  }

  .highlight-card {
    max-width: 700px;
    margin: auto;
  }

  /* Service Sections */

  .service-layout,
  .service-layout.reverse {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    direction: ltr;
  }

  .service-image img {
    height: 500px;
  }

  .service-content {
    padding: 2.5rem;
  }

  .service-highlights {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Why Section */

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

  .metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }

}

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

@media (max-width:768px){

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

.hero-buttons,
.cta-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* Every button on the page */

.hero-buttons .btn-primary,
.hero-buttons .btn-secondary,
.service-content .btn-primary,
.cta-buttons .btn-primary,
.cta-buttons .btn-secondary {

    width: 100%;
    max-width: 320px;
    min-height: 56px;

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

    margin: 1rem auto 0;

    padding: 0 2rem;

    border-radius: 999px;

    font-size: .9rem;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;

    transition: var(--transition);
}

.hero-buttons .btn-primary,
.hero-buttons .btn-secondary,
.cta-buttons .btn-primary,
.cta-buttons .btn-secondary{

    margin-top:0;
}

.service-content .btn-primary{

    margin-top:2rem;
}

.btn-primary:hover,
.btn-secondary:hover{

    transform:translateY(-2px);
}

.btn-primary:active,
.btn-secondary:active{

    transform:scale(.98);
}

  section{
    padding:5rem 0;
  }

  /* Hero */
  .services-hero {
    min-height: 100vh;
    padding: 8rem 0 4rem;
    text-align: center;
  }

  .services-content h1 {
    font-size: 2.6rem;
    line-height: 1.15;
  }

  .services-content p {
    font-size: .95rem;
    line-height: 1.8;
  }

  .services-glass-card {
    padding: 2rem;
  }

  .services-glass-item h3 {
    font-size: 1.4rem;
  }

  .section-label {
    font-size: .72rem;
    letter-spacing: 2px;
    gap: 8px;
  }

  .section-label::before,
  .section-label::after {
    width: 28px;
  }

  /* Introduction */

  .services-intro{
    padding:5rem 0;
  }

  .intro-content{
    text-align:center;
  }

  .intro-content h2{
    font-size:2.2rem;
  }

  .highlight-card{
    padding:2rem;
  }

  .highlight-card h3{
    font-size:1.8rem;
  }

  .highlight-card li{
    font-size:.95rem;
  }

  /* Service Section */

  .service-section{
    padding:5rem 0;
  }

  .service-layout{
    grid-template-columns:1fr;
    gap:2rem;
  }

  .service-image{
    border-radius:22px;
  }

  .service-image img{
    height:320px;
  }

  .service-content{
    padding:2rem;
    border-radius:22px;
  }

  .service-number{
    font-size:4rem;
    top:15px;
    right:20px;
  }

  .service-content h2{
    font-size:2rem;
    margin-bottom:1rem;
  }

  .service-intro{
    font-size:1rem;
  }

  .service-content p{
    font-size:.95rem;
  }

  /* Features */

  .service-features{
    grid-template-columns:1fr;
    gap:1rem;
    margin:2rem 0;
  }

  .feature{
    align-items:flex-start;
  }

  .feature span{
    line-height:1.6;
  }

  /* Highlight Boxes */

  .service-highlights{
    grid-template-columns:1fr;
    gap:1rem;
  }

  .highlight-box{
    padding:1.5rem;
  }

  /* Why Skyeagle */

  .why-skyeagle{
    padding:5rem 0;
  }

  .why-grid{
    grid-template-columns:1fr;
    gap:1.5rem;
    margin-top:3rem;
  }

  .why-card{
    padding:2rem;
  }

  .why-icon{
    width:65px;
    height:65px;
    margin-bottom:1.5rem;
  }

  .why-icon i{
    font-size:1.5rem;
  }

  .why-card h3{
    font-size:1.6rem;
  }

  /* CTA */

  .services-cta{
    padding:5rem 0;
  }

  .cta-content h2{
    font-size:2.4rem;
  }

  .cta-content p{
    font-size:.95rem;
  }

  .cta-buttons{
    flex-direction:column;
    align-items:center;
    gap:1rem;
  }

  .cta-buttons a{
    width:100%;
    max-width:320px;
    justify-content:center;
  }

}

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

@media (max-width:480px){

  .services-hero{
    padding:7rem 0 3rem;
  }

  .services-hero h1{
    font-size:2.2rem;
  }

  .services-hero p{
    font-size:.9rem;
  }

  .intro-content h2{
    font-size:1.9rem;
  }

  .service-content{
    padding:1.6rem;
  }

  .service-content h2{
    font-size:1.7rem;
  }

  .service-number{
    font-size:3.2rem;
  }

  .highlight-card{
    padding:1.6rem;
  }

  .highlight-card h3{
    font-size:1.5rem;
  }

  .why-card{
    padding:1.8rem;
  }
  .metrics-grid {
        grid-template-columns: 1fr !important;
    }

  .cta-content h2{
    font-size:2rem;
  }

}