/* css/style.css */

/* === CSS Variables === */
:root {
   --color-primary: #f39c12; /* Main orange */
   --color-primary-darker: #e08e0b; /* Slightly darker orange for hover */
   --color-secondary: #2c3e50;
   --color-text: #333740;
   --color-text-light: #555e6d;
   --color-background-light: #f8f9fa;
   --color-background-white: #ffffff;
   --color-border: #dee2e6;
   --color-white: #ffffff;
   --color-black: #000000;
   --color-black-rgb: 0, 0, 0; /* For use with rgba */
   --color-primary-rgb: 243, 156, 18; /* For use with rgba */
   --color-overlay-bg: rgba(59, 97, 146, 0.98); /* MODIFIED: Was a different color in one version */
   --font-primary: "Poppins", sans-serif;

   /* MODIFIED: Using rem values for consistency and accessibility */
   --header-height-mobile: 3.75rem; /* 60px */
   --header-height-desktop: 4.375rem; /* 70px */
   --section-padding-mobile: 2.5rem; /* 40px */
   --section-padding-desktop: 5rem; /* 80px */
   
   --container-max-width: 1140px; /* 71.25rem */
   --border-radius: 5px; /* 0.3125rem */
   --transition-speed: 0.3s;
   --color-white-rgb: 255,255,255;
}

/* === Global Reset & Base Styles === */
*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}
html {
   scroll-behavior: smooth;
   font-size: 100%; /* Base font size, 1rem = 16px by default */
}
body {
   font-family: var(--font-primary);
   color: var(--color-text);
   line-height: 1.7;
   background-color: var(--color-background-white);
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
body.no-scroll {
   overflow: hidden;
}

/* === Typography === */
h1,
h2,
h3,
h4 {
   color: var(--color-secondary);
   font-weight: 600;
   line-height: 1.3;
   margin-bottom: 1rem;
}
h1 { font-size: 2.2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.4rem; }
h4 { font-size: 1.1rem; }

.sub-heading {
   color: var(--color-primary);
   font-weight: 600;
   text-transform: uppercase;
   display: block;
   margin-bottom: 0.5rem;
   font-size: 0.875rem;
}
.section-title {
   margin-bottom: 2rem;
}
.link-styled {
   font-weight: 600;
   text-transform: uppercase;
   font-size: 0.9rem;
}

/* === Links & Buttons === */
a {
   color: var(--color-primary);
   text-decoration: none;
   transition: color var(--transition-speed) ease;
}
a:hover,
a:focus {
   color: var(--color-primary-darker);
   text-decoration: none;
}
.btn {
   display: inline-block;
   padding: 0.75em 1.75em;
   font-family: var(--font-primary);
   font-size: 1rem;
   font-weight: 600;
   text-align: center;
   border-radius: var(--border-radius);
   cursor: pointer;
   transition: background-color var(--transition-speed) ease,
      color var(--transition-speed) ease,
      border-color var(--transition-speed) ease, transform 0.2s ease;
   border: 2px solid transparent;
   line-height: 1.5;
}
.btn--primary {
   background-color: var(--color-primary);
   color: var(--color-white);
   border-color: var(--color-primary);
}
.btn--primary:hover,
.btn--primary:focus {
   background-color: var(--color-primary-darker);
   border-color: var(--color-primary-darker);
   color: var(--color-white);
   transform: translateY(-2px);
}
.btn--secondary {
   background-color: var(--color-secondary);
   color: var(--color-white);
   border-color: var(--color-secondary);
}
.btn--secondary:hover,
.btn--secondary:focus {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
   color: var(--color-white);
   transform: translateY(-2px);
}

/* === Utility Classes === */
.container {
   width: 90%;
   max-width: var(--container-max-width);
   margin-left: auto;
   margin-right: auto;
}
.section-padding {
   padding-top: var(--section-padding-mobile);
   padding-bottom: var(--section-padding-mobile);
}
.section-padding--sm {
   padding-top: calc(var(--section-padding-mobile) / 1.5);
   padding-bottom: calc(var(--section-padding-mobile) / 1.5);
}
.section-padding--alt-bg {
   background-color: var(--color-background-light);
}
.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   margin: -1px;
   padding: 0;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   border: 0;
}
img {
   max-width: 100%;
   height: auto;
   display: block;
}

/* === Header & Navigation === */
.header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1000;
   height: var(--header-height-mobile);
   background-color: transparent;
   transition: background-color var(--transition-speed) ease-in-out,
      box-shadow var(--transition-speed) ease-in-out;
   display: flex;
   align-items: center;
}
.header.scrolled {
   background-color: var(--color-background-white);
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.header__container {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.header__logo {
   font-size: 1.4rem;
   font-weight: 700;
   color: var(--color-white);
   z-index: 1001;
   text-decoration: none;
}
.header.scrolled .header__logo {
   color: var(--color-secondary);
}
.header__nav-desktop {
   display: none;
}
.header__nav-desktop ul {
   list-style: none;
   display: flex;
}
.header__nav-desktop li:not(:last-child) {
   margin-right: 1.5rem;
}
.header__nav-desktop a {
   font-weight: 500;
   color: var(--color-white);
   padding: 0.4rem 0;
   text-decoration: none;
}
.header.scrolled .header__nav-desktop a {
   color: var(--color-secondary);
}
.header__nav-desktop a:hover,
.header__nav-desktop a.active {
   color: var(--color-primary);
}
.header__hamburger {
   background: none;
   border: none;
   font-size: 1.5rem;
   color: var(--color-white);
   cursor: pointer;
   z-index: 1005;
   padding: 0.5rem;
   line-height: 0;
}
.header__hamburger svg {
   vertical-align: middle;
}
.header.scrolled .header__hamburger {
   color: var(--color-secondary);
}

/* Mobile Navigation Overlay */
.mobile-nav-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   background-color: var(--color-overlay-bg);
   z-index: 1002;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   padding-top: 5rem; /* 80px */
   opacity: 0;
   visibility: hidden;
   transform: translateY(-100%);
   transition: opacity var(--transition-speed) ease,
      visibility 0s linear var(--transition-speed),
      transform var(--transition-speed) ease;
   overflow-y: auto;
}
.mobile-nav-overlay.active {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
   transition-delay: 0s, 0s, 0s;
}
.mobile-nav-overlay__top-bar {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   padding: 1rem;
   display: flex;
   justify-content: flex-end;
}
.mobile-nav-overlay__close {
   background: none;
   border: none;
   font-size: 1.8rem;
   color: var(--color-white);
   cursor: pointer;
   line-height: 0;
}
.mobile-nav-overlay__nav ul {
   list-style: none;
   text-align: center;
}
.mobile-nav-overlay__nav li {
   margin-bottom: 2.8rem;
}
.mobile-nav-overlay__nav a {
   font-size: 1.5rem;
   font-weight: 500;
   color: var(--color-white);
   padding: 0.5rem;
   text-decoration: none;
   transition: all .5s ease-in-out;
}
.mobile-nav-overlay__nav a:hover {
   color: var(--color-primary);
   transform: scale(1.1);
}
.mobile-nav-overlay__contact-info {
   margin-top: 2.5rem;
   text-align: center;
}
.mobile-nav-overlay__contact-link {
   display: block;
   color: var(--color-white);
   font-size: 1.1rem;
   margin-bottom: 0.8rem;
   text-decoration: none;
   transition: all .5s ease-in-out;
}
.mobile-nav-overlay__contact-link i {
   margin-right: 0.5rem;
   color: var(--color-primary);
}
.mobile-nav-overlay__contact-link:hover {
   color: var(--color-primary);
   transform: scale(1.1);
}

/* === Hero Section === */
.hero-section {
   height: 100vh; /* Consider 100dvh for better mobile handling */
   min-height: 550px; 
   display: flex;
   align-items: center;
   justify-content: flex-end;
   color: var(--color-white);
   position: relative;
   overflow: hidden;
   padding-left: 5%;
   padding-right: 5%;
}
.hero-slideshow-container {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}
.hero-slide {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   transition: opacity 1s ease-in-out;
   z-index: 1;
   overflow: hidden;
}
.hero-slide.active {
   opacity: 1;
   z-index: 2;
}
.hero-img-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 1;
}
.hero-section::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(
      rgba(var(--color-black-rgb), 0.2),
      rgba(var(--color-black-rgb), 0.3)
   );
   z-index: 2;
}
.hero-section__overlay-content {
   position: relative;
   z-index: 3;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   text-align: right;
   max-width: 50%;
}
.hero-section__title {
   font-weight: 700;
   color: var(--color-white);
   margin-bottom: 1rem;
   font-size: clamp(2rem, 4vw + 1rem, 3.8rem);
   white-space: nowrap;
}
.hero-section__subtitle {
   margin-bottom: 2rem;
   color: var(--color-white);
   opacity: 0.9;
   font-size: clamp(0.9rem, 2vw + 0.5rem, 1.6rem);
   white-space: nowrap;
}
.hero-section__cta {
   font-size: 0.75rem;
   background-color: transparent;
   color: var(--color-white);
   border: 2px solid var(--color-white);
   transition: background-color var(--transition-speed) ease,
      color var(--transition-speed) ease,
      border-color var(--transition-speed) ease, transform 0.2s ease;
   padding: 0.5em 1.5em;
}
.hero-section__cta:hover,
.hero-section__cta:focus {
   background-color: var(--color-primary);
   border-color: var(--color-primary);
   color: var(--color-white);
   transform: translateY(-2px);
}

/* === About Section === */
.about-section__container {
   display: flex;
   flex-direction: column;
   gap: 2rem;
}
.about-section__image-wrapper img {
   border-radius: var(--border-radius);
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.about-section__content p {
   margin-bottom: 1.5rem;
   color: var(--color-text-light);
}

/* === Services & Testimonials Cards (Common Base) === */
.service-card,
.testimonial-card {
   background-color: var(--color-background-white);
   border-radius: var(--border-radius);
   box-shadow: 0 5px 20px rgba(44, 62, 80, .15);
   padding: 1.5rem;
   text-align: center;
   display: flex;
   flex-direction: column;
   height: 100%;
}
.service-card img {
   width: 100%;
   aspect-ratio: 4 / 3;
   object-fit: cover;
   border-radius: var(--border-radius);
   margin-bottom: 1rem;
}
.service-card__title {
   margin-bottom: 0.75rem;
   font-size: 1.25rem;
   color: var(--color-secondary);
}
.service-card p {
   color: var(--color-text-light);
   font-size: 0.9rem;
   flex-grow: 1;
   margin-bottom: 1rem;
}
.service-card__button {
   margin-top: auto;
   font-size: 0.9rem;
}

.testimonial-card__image {
   width: 80px;
   height: 80px;
   border-radius: 50%;
   object-fit: cover;
   margin-bottom: 1rem;
   border: 3px solid var(--color-primary);
}
.testimonial-card__quote {
   font-style: italic;
   color: var(--color-text-light);
   margin-bottom: 1rem;
   flex-grow: 1;
   font-size: 0.95rem;
}
.testimonial-card__name {
   font-weight: 700;
   color: var(--color-secondary);
   margin-bottom: 0.25rem;
   font-size: 1rem;
}
.testimonial-card__location {
   font-size: 0.8rem;
   color: var(--color-primary);
   text-transform: uppercase;
}

/* === Swiper Base Styles (for services, testimonials etc.) === */
.swiper {
   width: 100%;
   padding-top: 1rem; 
   padding-bottom: 3.5rem;
}
.swiper-slide {
   display: flex;
   justify-content: center;
   align-items: stretch;
   background-color: transparent;
}
.swiper-pagination {
   bottom: 0px !important;
}
.swiper-pagination-bullet {
   background-color: var(--color-secondary);
   opacity: 0.4;
}
.swiper-pagination-bullet-active {
   background-color: var(--color-primary);
   opacity: 1;
}
.swiper-button-next,
.swiper-button-prev {
   color: var(--color-primary);
   width: 30px;
   height: 30px;
   background-color: rgba(var(--color-white-rgb), 0.9);
   border-radius: 50%;
   box-shadow: 0 5px 20px rgba(var(--color-black-rgb), 0.1);
   top: 50%;
   transform: translateY(-50%);
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
   background-color: var(--color-white);
}
.swiper-button-next::after,
.swiper-button-prev::after {
   font-size: 0.8rem !important;
   font-weight: 900;
}

/* === Contact Section === */
.contact-section__container {
   display: flex;
   flex-direction: column;
   gap: 2.5rem;
}
.contact-form .form-group {
   margin-bottom: 1.5rem;
}
.contact-form .form-label {
   display: block;
   margin-bottom: 0.5rem;
   font-weight: 500;
   color: var(--color-secondary);
}
.contact-form .required {
   color: var(--color-primary);
   margin-left: 0.25rem;
}
.contact-form .form-input,
.contact-form .form-textarea {
   width: 100%;
   padding: 0.85rem 1rem;
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
   font-family: var(--font-primary);
   font-size: 1rem;
   transition: border-color var(--transition-speed) ease;
}
.contact-form .form-input:focus,
.contact-form .form-textarea:focus {
   outline: none;
   border-color: var(--color-primary);
   box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
}
.contact-form .form-textarea {
   resize: vertical;
   min-height: 120px;
}
.contact-form .form-group--checkbox {
   display: flex;
   align-items: flex-start;
   gap: 0.5rem;
}
.contact-form .form-group--checkbox input[type="checkbox"] {
   margin-top: 0.25em;
   width: 18px;
   height: 18px;
   accent-color: var(--color-primary);
   flex-shrink: 0;
}
.contact-form .form-group--checkbox label {
   margin-bottom: 0;
   font-weight: 400;
   font-size: 0.9rem;
   color: var(--color-text-light);
}
.contact-form__submit {
   width: 100%;
   font-size: 1.1rem;
}

.contact-section__details-wrapper {
   text-align: left;
}
.contact-section__details-title {
   font-size: 1.25rem;
   margin-bottom: 1rem;
   padding-bottom: 0.5rem;
   border-bottom: 1px solid var(--color-border);
}
.contact-section__details-title--social {
   margin-top: 1.5rem;
}
.contact-section__detail-item {
   margin-bottom: 0.8rem;
   font-size: 1rem;
   display: flex;
   align-items: center;
}
.contact-section__detail-item i {
   margin-right: 0.75rem;
   color: var(--color-primary);
   width: 20px;
   text-align: center;
}
.contact-section__detail-item a {
   color: var(--color-text);
   text-decoration: none;
}
.contact-section__address p {
   margin-bottom: 0;
}
.contact-section__social-icons a {
   color: var(--color-secondary);
   font-size: 1.5rem;
   margin-right: 1rem;
   text-decoration: none;
}
.contact-section__social-icons a:last-child {
   margin-right: 0;
}
.contact-section__social-icons a:hover {
   color: var(--color-primary);
}

/* === Footer === */
.footer {
   background-color: var(--color-secondary);
   color: var(--color-white);
   text-align: center;
}
.footer__container {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
}
.footer__heading {
   color: var(--color-white);
   font-size: 1.2rem;
   margin-bottom: 0.5rem;
   font-weight: 500;
}
.footer__contact-details,
.footer__address {
   font-size: 0.9rem;
   line-height: 1.6;
   opacity: 0.85;
   margin-bottom: 0.3rem;
}
.footer__contact-details a,
.footer__address a {
   color: var(--color-white);
   text-decoration: none;
}
.footer__contact-details a:hover,
.footer__address a:hover {
   color: var(--color-primary);
   opacity: 1;
}
.footer__social-icons {
   margin-top: 0.5rem;
}
.footer__social-icons a {
   color: var(--color-white);
   opacity: 0.8;
   font-size: 1.3rem;
   margin: 0 0.6rem;
   text-decoration: none;
}
.footer__social-icons a:hover {
   opacity: 1;
   color: var(--color-primary);
}
.footer__copyright {
   font-size: 0.85rem;
   opacity: 0.7;
   margin-top: 1rem;
}

/* === AOS Animation Base === */
[data-aos="fade-up"] {
   opacity: 0;
   transform: translateY(30px);
}


/* === Media Queries === */
@media (max-width: 480px) {
   .swiper-button-next,
   .swiper-button-prev {
      /* display: none; */ /* MODIFIED: User may want these, let's review if they are problematic */
   }
}

@media (max-width: 767px) {
    .hero-section__title,
    .hero-section__subtitle {
        white-space: normal;
    }
    .hero-section__overlay-content {
        max-width: 90%;
    }
}

@media (min-width: 768px) {
   h1 { font-size: 2.8rem; }
   h2 { font-size: 2.1rem; }
   h3 { font-size: 1.6rem; }
   .section-padding {
      /* MODIFIED: Using 0.8 of desktop padding, which is 4rem */
      padding-top: calc(var(--section-padding-desktop) * 0.8); 
      padding-bottom: calc(var(--section-padding-desktop) * 0.8);
   }
   .header { height: var(--header-height-desktop); }
   .header__logo { font-size: 1.6rem; }
   .header__hamburger { display: none; }
   .header__nav-desktop { display: flex; }

   .about-section__container {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 3rem;
   }
   .about-section__image-wrapper,
   .about-section__content {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 0;
      width: 50%;
      box-sizing: border-box;
   }

   .contact-section__container {
      flex-direction: row;
      gap: 3rem;
   }
   .contact-section__form-wrapper { flex: 1.5; }
   .contact-section__details-wrapper { flex: 1; }
   .contact-form__submit {
      width: auto;
      padding: 0.75em 2.5em;
   }

   .footer__container {
      flex-direction: row;
      justify-content: space-between;
      text-align: left;
   }
   .footer__content,
   .footer__social-icons,
   .footer__copyright {
      text-align: left;
      margin-top: 0;
   }
   .footer__copyright { text-align: right; }
   .footer__social-icons {
      margin-left: auto;
      margin-right: 1rem;
   }
}

/* === Service Gallery Page Specific Styles === */
body#page-service-gallery-projects {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Consider 100dvh */
    margin: 0;
    /* ADDED: Potential iOS touch fix for smoother scrolling on the body if needed */
    /* -webkit-overflow-scrolling: touch; */
}
body#page-service-gallery-projects .header {
    background-color: var(--color-background-white);
    box-shadow: 0 2px 10px rgba(var(--color-black-rgb), 0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
body#page-service-gallery-projects .header .header__logo,
body#page-service-gallery-projects .header .header__nav-desktop a,
body#page-service-gallery-projects .header .header__hamburger {
    color: var(--color-secondary);
}
body#page-service-gallery-projects .header .header__logo:focus {
    color: var(--color-secondary) !important;
}
body#page-service-gallery-projects .header .header__nav-desktop a.active,
body#page-service-gallery-projects .header .header__nav-desktop a:hover {
   color: var(--color-primary);
}

.service-gallery-main-content {
    flex-grow: 1;
    padding-top: var(--header-height-mobile); /* Space for fixed header */
    display: flex; /* ADDED: To make swiper take full height */
    flex-direction: column; /* ADDED */
    overflow: hidden; /* Prevent unexpected overflows */
}

.main-project-swiper {
    width: 100%;
    /* MODIFIED: Use 100% to fill parent, which has padding-top for header */
    height: 100%; 
    overflow: hidden;
}

.project-case-study-slide {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-color: var(--color-background-white);
    overflow-y: auto; /* Allows scrolling within the slide if content overflows on mobile */
    height: auto; 
    /* ADDED: Potential iOS touch fix */
    -webkit-overflow-scrolling: touch;
}

.project-case-study__content-area {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: var(--container-max-width); 
    margin: 0 auto;
    /* MODIFIED: Simplified padding, using rem. Reduced excessive top padding. */
    padding: 3rem 0.9375rem; /* 48px top/bottom, 15px sides */
    flex-grow: 1;
}

/* MODIFIED: Removed problematic padding override that was here for (max-width: 991px) */
/* This was: padding-top: calc(var(--section-padding-mobile) + 100px); */
/* Now general .project-case-study__content-area padding above should apply. */


.project-case-study__image-column {
    width: 100%;
    margin-bottom: 1.5rem;
}

.project-main-image-container {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--border-radius);
    margin-bottom: 1.5rem;
    background-color: var(--color-background-light);
}

.project-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-thumbnail-gallery-container {
    margin-top: 1rem;
    width: 100%;
}
.thumbnail-gallery-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: 0.75rem;
    text-align: left;
    /* MODIFIED: Hide thumbnail gallery title as requested */
    display: none;
}
.thumbnail-swiper {
    width: 100%;
    padding-bottom: 1.875rem; /* 30px, space for potential nav if re-enabled */
    position: relative;
}
.thumbnail-swiper .swiper-slide {
    aspect-ratio: 1 / 1;
    border-radius: calc(var(--border-radius) / 2);
    overflow: hidden;
    cursor: pointer;
    border: 3px solid transparent;
    transition: border-color var(--transition-speed) ease;
    background-color: var(--color-background-light);
}
.thumbnail-swiper .swiper-slide:hover,
.thumbnail-swiper .swiper-slide.swiper-slide-thumb-active {
    border-color: var(--color-primary);
}
.thumbnail-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.thumbnail-swiper .tn-button {
    /* MODIFIED: Hide thumbnail swiper buttons as requested */
    display: none;
    /* Original styles below if needed to re-enable */
    /* color: var(--color-primary);
    background-color: rgba(var(--color-white-rgb, 255,255,255), 0.8);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color var(--transition-speed) ease;
    z-index: 10;
    align-items: center;
    justify-content: center; */
}
/* .thumbnail-swiper .tn-button::after {
    font-size: 0.7rem;
    font-weight: 900;
}
.thumbnail-swiper .tn-button:hover {
    background-color: var(--color-white);
}
.thumbnail-swiper .tn-prev { left: -5px; }
.thumbnail-swiper .tn-next { right: -5px; } */


.project-text-content-column {
    width: 100%;
    padding: 0;
}
.project-case-study__title {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--color-secondary);
}
.project-case-study__description {
    font-size: 0.95rem;
    color: var(--color-text-light);
    line-height: 1.8;
    margin-bottom: 1.5rem;
}
.project-case-study__description p,
.project-case-study__description ul {
    margin-bottom: 1em;
}
.project-case-study__description ul {
    list-style-position: outside;
    padding-left: 1.25rem; /* 20px */
}
.project-case-study__cta {
    display: inline-block;
    margin-top: 1rem;
}

/* Styles for main project swiper navigation/pagination */
.main-project-swiper .swiper-button-prev,
.main-project-swiper .swiper-button-next {
    color: var(--color-white);
    background-color: rgba(var(--color-black-rgb), 0.3);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    transition: background-color var(--transition-speed) ease;
    box-shadow: 0 2px 8px rgba(var(--color-black-rgb), 0.15);
    /* MODIFIED: Adjusted top position slightly as requested */
    top: 45%; 
    transform: translateY(-50%);
}
.main-project-swiper .swiper-button-prev:hover,
.main-project-swiper .swiper-button-next:hover {
    background-color: rgba(var(--color-black-rgb), 0.5);
}
.main-project-swiper .swiper-button-prev { left: 20px; } /* 1.25rem */
.main-project-swiper .swiper-button-next { right: 20px; } /* 1.25rem */

.main-project-swiper .swiper-pagination {
    bottom: 1.25rem !important; /* 20px */
}
.main-project-swiper .swiper-pagination-bullet {
    /* MODIFIED: Use CSS variable for color */
    background-color: var(--color-border); 
    opacity: 0.6;
    width: 10px; /* 0.625rem */
    height: 10px; /* 0.625rem */
}
.main-project-swiper .swiper-pagination-bullet-active {
    background-color: var(--color-primary);
    opacity: 1;
}
.initial-loading-slide {
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: var(--color-text-light);
    height: 100%;
    width: 100%;
}
.no-gallery-message {
    font-style: italic;
    color: var(--color-text-light);
    margin-top: 1rem;
}

/* === CONSOLIDATED DESKTOP STYLES === */
@media (min-width: 992px) {
    h1 { font-size: 3.2rem; }
    h2 { font-size: 2.4rem; }
    .section-padding {
        /* MODIFIED: Removed excessive +100px, now uses standard desktop padding */
        padding-top: var(--section-padding-desktop); 
        padding-bottom: var(--section-padding-desktop);
    }
    .about-section__container {
        flex: 1;
    }

    body#page-service-gallery-projects .footer {
        /* No specific overrides needed, inherits general footer styles */
    }

    .service-gallery-main-content {
        padding-top: var(--header-height-desktop); /* Space for fixed header */
        height: calc(100% - var(--header-height-desktop)); /* Adjust to fill remaining space correctly */
    }
    .main-project-swiper {
        height: 100%; /* Swiper takes full height of its flex parent */
    }

    .project-case-study-slide {
        flex-direction: row; /* Image and text side-by-side */
        align-items: stretch;
        padding: 0; 
        overflow: hidden; /* Prevent internal scrollbars from affecting slide layout */
        height: 100%; /* Slide takes full height of swiper */
    }

    .project-case-study__content-area {
        flex-direction: row;
        max-width: none;
        padding: 0; /* Reset mobile padding */
        height: 100%;
    }

    .project-case-study__image-column {
        flex: 0 0 55%;
        max-width: 55%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* MODIFIED: Converted padding to rem, standardized. Example: 3rem for sides, 2rem top/bottom */
        padding: 2rem 3rem; 
        overflow-y: auto;
        margin-bottom: 0;
        /* ADDED: Potential iOS touch fix */
        -webkit-overflow-scrolling: touch;
    }

    .project-main-image-container {
        width: 100%;
        flex-grow: 1; 
        display: flex;
        align-items: center;
        justify-content: center;
        max-height: 60%; /* Constraint for image height within its column */
        margin-bottom: 1.5rem;
    }

    .project-main-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .project-thumbnail-gallery-container {
        flex-shrink: 0;
        margin-top: auto;
        max-height: 35%;
        overflow: hidden; /* If content overflows this max-height */
    }

    .project-text-content-column {
        flex: 0 0 45%;
        max-width: 45%;
        height: 100%;
        /* MODIFIED: Simplified padding to rem, e.g., 3rem all around */
        padding: 3rem; 
        overflow-y: auto;
        text-align: left;
        display: flex;
        flex-direction: column;
        /* MODIFIED: Changed to flex-start as requested */
        justify-content: flex-start; 
        /* ADDED: Potential iOS touch fix */
        -webkit-overflow-scrolling: touch;
    }

    .project-case-study__title {
        font-size: 2.5rem;
    }

    .project-case-study__description {
        font-size: 1rem;
    }
}