/* ==========================================================================
   Services Page Specific Styles
   ========================================================================== */

   body.services { /* Optional: for body-specific styles */ }

   /* Top Section */
   .top-section.services { /* Select the services variation */
     position: relative;
     display: flex;
     min-height: 90vh; /* Adjust as needed */
     padding-top: 184px;
     padding-bottom: 120px;
     justify-content: center;
     align-items: center;
     background-image: linear-gradient(180deg, var(--color-overlay-dark), var(--color-overlay-dark)), url("../assets/our-service-page.jpeg");
     background-position: 0px 0px, 50% 50%;
     background-size: auto, cover;
     background-repeat: repeat, no-repeat;
   }
   .top-section.services .title { color: var(--color-white); } /* Ensure title is white */
   .top-section.services .paragraph-white { color: var(--color-white); } /* Ensure paragraph is white */
   .top-section.services .button.v2 { /* Style button specifically if needed */
       margin-top: 20px;
       background-color: var(--color-white);
       color: var(--color-text-dark);
   }
   .top-section.services .button.v2:hover {
       padding-right: 32px;
       padding-left: 32px;
   }
   
   
   /* Services Section uses common styles from common.css */
   /* No additional page-specific styles needed for the .services component itself unless overriding */
   
   
   /* Media Queries for Services Specifics */
   @media screen and (max-width: 991px) {
       .top-section.services { height: auto; padding: 120px 0 100px 0; }
   }
   
   @media screen and (max-width: 767px) {
       .top-section.services { padding: 100px 0 80px 0; }
   }
   
   @media screen and (max-width: 479px) {
       .top-section.services { padding: 80px 0 60px 0; }
   }