/* 
  1. RESETS & GLOBAL STYLES
     -------------------------------------------------- */

     *,
     *::before,
     *::after {
       box-sizing: border-box;
       margin: 0;
       padding: 0;
     }
     
     html {
       scroll-behavior: smooth; /* for smooth anchor link scrolling */
     }
     
     body {
       /* Changed from #fafafa to #F5F5F5 (Light Background) */
       background-color: #CDCFC1;
       
       /* Changed font color from #333 to #2C2C2C (Deep Charcoal) */
       color: #2C2C2C;
       
       font-family: 'Roboto', Arial, sans-serif; 
       line-height: 1.6;
     }
     
     a {
       text-decoration: none;
       color: inherit;
       transition: color 0.2s ease;
     }
     
     img {
       max-width: 100%;
       display: block;
     }
     
     /* Utility class for screen-reader-only text */
     .sr-only {
       position: absolute;
       width: 1px;
       height: 1px;
       clip-path: inset(50%);
       overflow: hidden;
       border: 0;
     }
     
     /* 
       2. HEADER & NAV 
          -------------------------------------------------- */
     
     .site-header {
       background-color: #d9dad3; /* You can keep white here or switch to #F5F5F5 if you prefer */
       box-shadow: 0 1px 4px rgba(0,0,0,0.1);
       position: sticky;  /* stays on top */
       top: 0;
       z-index: 999;
       padding: 0.5rem 1rem;
     }
     
     .navbar {
       display: flex;
       align-items: center;
       justify-content: space-between;
       max-width: 1200px;
       margin: 0 auto;
     }
     
     /* 
        Brand / Logo previously used #2c3e50,
        now using Primary Red (#EC142B) 
     */
     .nav-brand .logo {
       font-family: 'Stardos Stencil', sans-serif; /* HEADINGS/LOGO */
       font-size: 1.4rem;
       font-weight: 700;
       color: #EC142B; 
     }

     .nav-brand .logo img {
      max-height: 50px; 
      /* or any height/width you want */
      display: block;  /* ensures any extra whitespace is removed if needed */
    }
     
     .menu-toggle {
       padding: 0.5rem 1rem;  /* Add more padding around the icon */
       line-height: 1;        /* Ensures there's no extra vertical spacing */
       background: none;
       border: none;
       font-size: 2.5rem;
       cursor: pointer;
       background: none;
       border: none;
     }
     
     /* Primary Menu */
     .menu {
       list-style: none;
       display: none; /* hidden by default on mobile */
       margin: 0;
       padding: 0;
     }
     
     /*
        Replacing #2980b9 (blue) with #EC142B (Primary Red)
        Hover color replaced #1f6390 with a slightly darker red (#B01124 as an example).
     */
     .menu li a {
       font-family: 'Stardos Stencil', sans-serif; /* BOLD CTA feel for nav */
       font-weight: 700; /* Using bold to keep that strong 'construction' vibe */
       display: inline-block;
       background-color: #EC142B; /* brand color (Primary Red) */
       color: #d9dad3;
       padding: 0.5rem 1rem;
       border-radius: 4px;
       transition: all 0.2s ease;
       font-weight: 600;
       margin: 0 1rem;
       text-align: center;
     
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     }
     
     .menu li a:hover {
       /* Darken the red for hover, e.g., #B01124 */
       background-color: #B01124; 
       color: #d9dad3;
     
       transform: scale(1.05);
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
     }
     
     .menu.show-menu {
      display: flex;              /* Use flexbox for easy vertical stacking. */
      flex-direction: column;     /* Stack items vertically. */
      align-items: stretch;       /* Each item will span the full menu width. */
      position: absolute;
      top: 3.4rem; 
      right: 1rem;
      background-color: #d9dad3;
      box-shadow: 0 2px 8px rgba(0,0,0,0.5);
      border-radius: 4px;
      padding: 0.5rem;
      width: 200px;               /* Adjust as desired for your design. */
     }

     .menu.show-menu li {
      margin: 0;
      padding: 0;                 /* Remove any extra spacing if needed. */
    }

    /* 
   Make each link a full-width block, 
   center its text, and optionally unify padding.
  */
    .menu.show-menu li a {
      display: block;
      text-align: center;
      margin: 0.25rem 0;          /* a little vertical spacing between links */
      padding: 0.5rem 0;          /* consistent vertical padding */
    }
     
     /* 
       3. HERO SECTION (PARALLAX) 
          -------------------------------------------------- */
     
     .hero {
       position: relative;
       min-height: 70vh;
     
       background:
         url("../img/randyMeyerLogoMasked.png") center / contain no-repeat,
         linear-gradient(to bottom, #7c7a6a, #CDCFC1);
     
       display: flex;
       align-items: center;
       justify-content: center;
       text-align: center;
       color: #d9dad3;
     
       clip-path: polygon(
         0% 25%,
         15% 30%,
         35% 0%,
         65% 0%,
         85% 30%,
         100% 25%,
         100% 100%,
         0% 100%
       );
     }

     .hero h1 {
      font-family: 'Stardos Stencil', sans-serif;
      font-weight: 700;
    }
     
     .hero-content {
       background-color: rgba(0, 0, 0, 0.4); /* optional overlay for readability */
       padding: 2rem;
       border-radius: 4px;
     }
     
     .cta-button {
       font-family: 'Stardos Stencil', sans-serif; /* BOLD CTA text */
       font-weight: 700;
       display: inline-block;
       background-color: #EC142B; /* primary red for calls-to-action */
       color: #d9dad3;
       padding: 0.75rem 1.5rem;
       border-radius: 4px;
       margin-top: 1rem;
       transition: background-color 0.2s ease;
     }
     
     .cta-button:hover {
       background-color: #B01124; /* darker red */
     }
     
     /* 
       4. SERVICES SECTION 
          -------------------------------------------------- */
     .services {
       padding: 2rem 1rem;
       max-width: 1200px;
       margin: 0 auto;
       text-align: center;
       background-color: #CDCFC1;
     }
     
     .services h2 {
      font-family: 'Stardos Stencil', sans-serif; /* HEADINGS */
      font-weight: 700;
      
       /* replaced #2c3e50 with #2C2C2C (Deep Charcoal) */
       font-size: 1.8rem;
       color: #2C2C2C;
       margin-bottom: 1.5rem;
     }
     
     .service-list {
       display: grid;
       grid-template-columns: 1fr; /* single column on mobile */
       gap: 1rem;
     }
     
     .service-item {
       background-color: #fffefe;
       padding: 1.5rem;
       border-radius: 4px;
       /* Light box shadow is fine. Could add a border in #CDCFC1 or #707070 if you like. */
       box-shadow: 0 2px 4px rgba(0,0,0,0.5);
     }
     
     .service-item h3 {
       font-size: 1.2rem;
       margin-bottom: 0.5rem;
       /* replaced #333 with #2C2C2C for strong headings */
       color: #2C2C2C;
     }
     
     .service-item p {
       font-family: 'Roboto', sans-serif; /* BODY TEXT */
       color: #707070;
     }
     
     /* 
       5. ABOUT SECTION 
          -------------------------------------------------- */
     .about {
       padding: 2rem 1rem;
       max-width: 1200px;
       margin: 0 auto;
       text-align: center;
     }
     
     .about h2 {
       font-family: 'Stardos Stencil', sans-serif;
       font-weight: 700;
       font-size: 1.8rem;
       /* replaced #2c3e50 with #2C2C2C */
       color: #2C2C2C;
       margin-bottom: 1.5rem;
     }
     
     /* replaced #555 with #707070 for the paragraph text */
     .about p {
       font-family: 'Roboto', sans-serif;
       max-width: 700px;
       margin: 0 auto;
       line-height: 1.6;
       color: #707070;
     }
     
     /* The Gallery */
     .gallery {
       display: grid;
       grid-template-columns: 1fr; /* single column on mobile */
       gap: 1rem;                 /* space between images */
     }
     
     .gallery img {
       width: 100%;
       height: auto;
       border-radius: 4px; /* optional styling */
     }

     /* ============================
   5. FEATURES SECTION
============================ */

.features {
  padding: 2rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
 
}

.features h2 {
  margin-bottom: 2rem;
  color: #111;
}

.feature-item h3 {
  text-align: center;
  margin: 0 auto; /* Optional, often helps if you have specific widths/flex settings */
}


/* Feature items typically stacked on mobile */
.feature-item {
  background-color: #d9dad3 ;
  padding: 1.5rem;
  margin-bottom: 1rem;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .50);
}
.feature-item h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: #333;
}
.feature-item p {
  color: #555;
}
/*  #CDCFC1   #707070  */
.features {
  background-color: #d9dad3;
  padding: 2rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}

/* Headline spacing on mobile */
.features h2 {
  margin-bottom: 1.5rem;
}

/* Feature items stack by default on mobile */
.feature-item {
  background-color: #cfcfcb;
  padding: 1.5rem;
  margin-bottom: 1rem;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* === FEATURE IMAGES === */
.feature-item .feature-img {
  width: 100%;
  height: auto;        /* Maintains the aspect ratio */
  display: block;      /* Removes extra spacing under images in some browsers */
  margin: 1rem auto;   /* Adds vertical spacing above/below the image */
  object-fit: cover;   /* If you use "height" constraints, ensures the image is cropped nicely */

  /* ELEGANT STYLING */
  border-radius: 4px;  /* Slightly rounded corners */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); /* Subtle shadow */
  transition: transform 0.2s ease;          /* Animates on hover if desired */
}

.feature-item .feature-img:hover {
  transform: scale(1.02); /* Slight zoom on hover for a modern feel */
}



/*=======================================
          IMAGE ROLL OVER EFFECT
======================================*/
/*  Rollover image styles  */
.figure {
  display: flex;
  position: relative;
  width: auto; /* can be omitted for a regular non-lazy image */
  max-width: 100%;
}
.figure img.Sirv.image-hover {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  object-fit: contain;
  opacity: 0;
  transition: opacity .2s;
}
.figure:hover img.Sirv.image-hover {
  opacity: 1;
}


      
     
     /*
       6. CONTACT SECTION
          -------------------------------------------------- */
     .contact {
       padding: 2rem 1rem;
       max-width: 1200px;
       margin: 0 auto;
       text-align: center;
     }
     
     .contact h2 {
       font-family: 'Stardos Stencil', sans-serif;
       font-weight: 700;
       font-size: 1.8rem;
       color: #2C2C2C;
       margin-bottom: 1rem;
     }
     
     .contact p {
      font-family: 'Roboto', sans-serif; /* BODY TEXT */
       margin-bottom: 2rem;
       color: #707070; /* secondary text color */
     }
     .social-icon{
      text-align: center;
     }

     .social-icon-fb{
      display: inline;
     }
     
     
     /*
       7. FOOTER
          -------------------------------------------------- */
     .site-footer {
       background-color: #d9dad3; /* or #F5F5F5 if you prefer a less stark contrast */
       text-align: center;
       color: #2C2C2C;
       padding: 1rem;
       box-shadow: 0 -1px 4px rgba(0,0,0,0.5);
     }
     
     .site-footer p {
       font-family: 'Roboto', sans-serif;
       font-size: 0.9rem;
     }
     
     /* 
       8. MEDIA QUERIES (TABLET & DESKTOP)
          -------------------------------------------------- */
     
     /* Tablet Screens (≥ 768px) */
     @media (min-width: 768px) {
       .navbar {
         padding: 0.75rem 1rem;
       }
     
       .menu {
         display: flex; /* horizontal menu on tablet+ */
         position: static;
         box-shadow: none;
         background: none;
       }
     
       .menu.show-menu {
         display: flex; /* override .show-menu block from mobile */
       }
     
       .menu li a {
         padding: 0.75rem 1rem;
       }
     
       .service-list {
         grid-template-columns: repeat(3, 1fr);
       }
     
       .menu {
         display: flex; 
       }
     
       .menu-toggle {
         display: none; 
       }
     
       .gallery {
         grid-template-columns: repeat(3, 1fr);
       }

       
      

      /*==============================================
        RollOver image effect
===========================================*/
  .figure {
    display: flex;
    position: relative;
    width: auto; /* can be omitted for a regular non-lazy image */
    max-width: 100%;
  }
  .figure img.Sirv.image-hover {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    object-fit: contain;
    opacity: 0;
    transition: opacity .2s;
  }
  .figure:hover img.Sirv.image-hover {
    opacity: 1;
  }
     }
     
     /* Desktop Screens (≥ 1024px) */
     @media (min-width: 1024px) {
       .hero h1 {
         font-size: 2.4rem;
       }
     
       .service-item h3 {
         font-size: 1.4rem;
       }
     
       .menu {
         display: flex;
       }
     
       .menu-toggle {
         display: none;
       }

   


  /*==============================================
        RollOver image effect
===========================================*/
.figure {
  display: flex;
  position: relative;
  width: auto; /* can be omitted for a regular non-lazy image */
  max-width: 100%;
}
.figure img.Sirv.image-hover {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  object-fit: contain;
  opacity: 0;
  transition: opacity .2s;
}
.figure:hover img.Sirv.image-hover {
  opacity: 1;
}
     }