/* ==========================================================================
   PANALO Pipes & Structurals Pty Ltd - Mobile Responsive Stylesheet
   ========================================================================== */

/* 1. Universal Box-Sizing & Horizontal Overflow Prevention */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

*, *::before, *::after {
  box-sizing: border-box !important;
}

img {
  max-width: 100%;
  height: auto;
}

/* 2. Overwrite Hardcoded Desktop Widths Across All Viewports */
#ilft, #ibfo4, #i2x6h, #inyky, #ix4uk, #i0jzpj, #irt3rg, #ir7zxw, 
#ismpwl, #ie8tgs, #imi72q, #project-description, #project-gallery, 
#project-images, #ipidl, #iedswl, #iwdi, #izvk, #contact-body,
#iwulbo, #isinjc, #testimonial-carousel, .carousel-item,
.bs-stepper, #map, #footer-boxes {
  max-width: 100% !important;
}

/* Universal Link Normalization & Underline Removal */
a, 
a:hover, 
a:focus, 
a:active,
.footer-links a,
.footer-links a:hover,
.footer-links a:focus,
.iq2h3p,
.view-project {
  text-decoration: none !important;
}

/* Navigation Link Colors & Active States */
#imbpa a,
#incysp,
#isrqyx,
#iazkeo,
#i3onuu,
#iamfku {
  color: #ffffff !important;
  text-decoration: none !important;
}

#imbpa a:hover,
#incysp:hover,
#isrqyx:hover,
#iazkeo:hover,
#i3onuu:hover,
#iamfku:hover {
  color: #f1a81e !important;
  text-decoration: none !important;
}

/* Footer Social Links Alignment (Global) */
#i01aq4 {
  width: auto !important;
  max-width: 160px !important;
  margin: 20px auto !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
  padding: 0 !important;
}

#i01aq4 a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#i01aq4 a:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

#i01aq4 img,
#iocv9v,
#i1ca17,
#iyjvuk {
  display: block !important;
  height: 22px !important;
  width: auto !important;
  max-width: 26px !important;
  margin: 0 !important;
  object-fit: contain !important;
}

/* 3. Desktop Viewports (>= 992px) */
@media (min-width: 992px) {
  .panalo-nav-toggle {
    display: none !important;
  }
  #ilft {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 15px !important;
  }
  #il7d {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
  #i81vv {
    margin: 0 !important;
    flex-shrink: 0 !important;
  }
  #ivg28 {
    display: flex !important;
    justify-content: flex-end !important;
    float: none !important;
  }
  #imbpa {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    float: none !important;
    flex-wrap: nowrap !important;
  }
  #imbpa > div {
    width: auto !important;
    padding: 8px 14px !important;
    float: none !important;
  }
  #ia1bvo {
    display: none !important;
  }
  #inyky {
    max-width: 1200px !important;
    margin: 56px auto auto auto !important;
  }
  #isch9 {
    width: 594px !important;
    max-width: 100% !important;
    height: 505px !important;
    box-sizing: border-box !important;
  }
  #ip4dg {
    margin: 376px 0 0 42px !important;
  }
  #testimonial-carousel .carousel-item,
  #testimonial-carousel .testimonial-carousel-item {
    display: flex !important;
    justify-content: center !important;
  }
}

/* 4. Mobile & Tablet Viewports (<= 991px) */
@media (max-width: 991px) {
  #ilft {
    width: 100% !important;
  }

  /* --- Top Bar & Social Links --- */
  #iedswl {
    padding: 8px 15px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #141414 !important;
  }

  #iopzjr {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    float: none !important;
  }

  #i2pipg {
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 16px !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
  }

  #i3jhuk, #i9urtp, #ijevy4 {
    min-height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-basis: auto !important;
    flex-grow: 0 !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #i3jhuk a, #i9urtp a, #ijevy4 a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #i7lrk4, #iufbp2, #izmfd8 {
    padding: 0 !important;
    height: 18px !important;
    width: auto !important;
    max-width: 22px !important;
    display: block !important;
    object-fit: contain !important;
    margin: 0 !important;
  }

  #idmz2s {
    padding: 7px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    float: none !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    background-image: linear-gradient(#f1a81e 0%, #f1a81e 100%) !important;
    color: #ffffff !important;
    white-space: nowrap !important;
  }

  /* --- Header Navigation Bar & Hamburger Menu --- */
  #ipidl {
    padding: 12px 16px !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
    background: #1c1c1c !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  #i81vv {
    flex: 0 0 auto !important;
    max-width: 150px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #ijlzp {
    max-height: 42px !important;
    width: auto !important;
    max-width: 100% !important;
    display: block !important;
  }

  /* Hamburger Toggle Button */
  .panalo-nav-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 42px !important;
    height: 38px !important;
    background: rgba(241, 168, 30, 0.1) !important;
    border: 1px solid #f1a81e !important;
    border-radius: 6px !important;
    padding: 9px 8px !important;
    cursor: pointer !important;
    z-index: 10005 !important;
    outline: none !important;
  }

  .panalo-nav-toggle span {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background-color: #f1a81e !important;
    border-radius: 2px !important;
    transition: all 0.25s ease-in-out !important;
  }

  body.nav-open .panalo-nav-toggle span:nth-child(1) {
    transform: translateY(8px) rotate(45deg) !important;
  }

  body.nav-open .panalo-nav-toggle span:nth-child(2) {
    opacity: 0 !important;
  }

  body.nav-open .panalo-nav-toggle span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg) !important;
  }

  /* Mobile Dropdown Menu Container */
  #ivg28 {
    display: none !important;
  }

  body.nav-open #ivg28 {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: #181818 !important;
    border-bottom: 3px solid #f1a81e !important;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.85) !important;
    padding: 8px 0 14px 0 !important;
    z-index: 10000 !important;
  }

  #imbpa {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Order links cleanly on mobile: HOME, ABOUT US, SERVICES, PROJECTS, CONTACT/INQUIRY */
  #i6uwn { order: 1 !important; }
  #i94qc { order: 2 !important; }
  #ia0ei { order: 3 !important; }
  #i5y13 { order: 4 !important; }
  #iy6j4 { order: 5 !important; }
  #ia1bvo { display: none !important; }

  #i6uwn, #i94qc, #ia0ei, #i5y13, #iy6j4 {
    float: none !important;
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  #i6uwn a, #i94qc a, #ia0ei a, #i5y13 a, #iy6j4 a {
    display: block !important;
    padding: 13px 24px !important;
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    transition: all 0.2s ease !important;
  }

  #i6uwn a:hover, #i94qc a:hover, #ia0ei a:hover, #i5y13 a:hover, #iy6j4 a:hover {
    background: rgba(241, 168, 30, 0.12) !important;
    color: #f1a81e !important;
    padding-left: 28px !important;
  }

  /* --- Hero Banner Section --- */
  #ijk1 {
    height: auto !important;
    min-height: auto !important;
    padding: 0 0 50px 0 !important;
    background-position: center top !important;
  }

  #inyky {
    margin: 25px auto 0 auto !important;
    padding: 0 15px !important;
    display: block !important;
  }

  #ircjh {
    height: auto !important;
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    border: 3px solid #f1a81e !important;
    background: rgba(15, 15, 15, 0.75) !important;
    backdrop-filter: blur(5px) !important;
    -webkit-backdrop-filter: blur(5px) !important;
    border-radius: 8px !important;
    padding: 26px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  #isch9 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 10px 0 0 0 !important;
    padding: 0 !important;
    border: none !important;
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    background: transparent !important;
    backdrop-filter: none !important;
  }

  #i9ml9 {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    font-size: 28px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    text-align: center !important;
    color: #ffffff !important;
  }

  #iehgc {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    text-align: center !important;
    color: #eaeaea !important;
  }

  #ikv5d {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  #id4g7 {
    min-height: auto !important;
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  #ip4dg {
    position: static !important;
    margin: 0 auto !important;
    width: auto !important;
    min-width: 210px !important;
    padding: 12px 26px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* Subpage Hero Titles (e.g. Services, About Us, Projects) */
  #i48k0j {
    font-size: 32px !important;
    line-height: 1.25 !important;
    padding: 15px 10px !important;
    text-align: center !important;
  }

  #ivq3nq {
    margin: 25px auto 0 auto !important;
    width: 100% !important;
  }

  /* --- Highlighted Services Section (Home) --- */
  #i4iky {
    height: auto !important;
    margin: 0 0 40px 0 !important;
    padding: 40px 15px 40px 15px !important;
  }

  #ibfo4 {
    width: 100% !important;
    margin: 0 auto 25px auto !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
  }

  #iuzpn {
    font-size: 26px !important;
    line-height: 1.3 !important;
    padding: 5px 0 !important;
  }

  #iwm3h {
    margin: 12px auto 0 auto !important;
    width: 100% !important;
    padding: 0 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  #ix4uk {
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin: 0 auto !important;
  }

  .ir4nm {
    width: 100% !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 400px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  #imeqxj {
    margin: 25px auto 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    position: static !important;
  }

  .iq2h3p {
    width: auto !important;
    min-width: 220px !important;
    font-size: 15px !important;
    padding: 12px 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* --- "Who We Are" Section (Home) --- */
  #i0jzpj {
    margin: 0 auto 40px auto !important;
    padding: 0 15px !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }

  #i0jzpj > .gjs-cell,
  #ivzsdj {
    flex: 0 0 auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #ivzsdj > div {
    height: auto !important;
  }

  #ignxjp, #ignxjp2 {
    font-size: 26px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
  }

  #ijnat6 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 20px auto 0 auto !important;
    float: none !important;
  }

  #learn-more-about-us {
    position: static !important;
    display: block !important;
    margin: 20px auto 10px auto !important;
    max-width: 140px !important;
    height: auto !important;
  }

  /* --- Projects Showcase Section --- */
  #iwiif3 {
    padding: 40px 15px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #iwiif3 .gjs-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #iuureb {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #irt3rg {
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
    margin-left: 0 !important;
  }

  #irt3rg .gjs-cell {
    margin-left: 0 !important;
  }

  #ihylgi {
    font-size: 26px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #i6uswj {
    margin: 12px 0 20px 0 !important;
    text-align: center !important;
    display: block !important;
    padding: 0 !important;
  }

  #ir7zxw {
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important;
    margin: 0 auto !important;
  }

  #ir7zxw .gjs-cell {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .our-projects-imgs {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 6px !important;
  }

  #i3jwqh, #i5idpw, #iybtzh {
    width: 100% !important;
    text-align: center !important;
    font-size: 16px !important;
    padding: 10px 0 !important;
  }

  /* --- Testimonials Section --- */
  #iwulbo {
    height: auto !important;
    padding: 40px 15px !important;
    overflow: hidden !important;
  }

  #isinjc {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  #ismpwl {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #i2ymxj {
    font-size: 26px !important;
    line-height: 1.3 !important;
    margin: 0 0 15px 0 !important;
  }

  #testimonial-carousel {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin: 0 auto !important;
  }

  #testimonial-carousel .carousel-item,
  #testimonial-carousel .testimonial-carousel-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* On mobile, display only the middle active card for clean single-card carousel */
  #testimonial-carousel .carousel-item > div:nth-child(1),
  #testimonial-carousel .testimonial-carousel-item > div:nth-child(1),
  #testimonial-carousel .carousel-item > div:nth-child(3),
  #testimonial-carousel .testimonial-carousel-item > div:nth-child(3) {
    display: none !important;
  }

  #testimonial-carousel .carousel-item > div:nth-child(2),
  #testimonial-carousel .testimonial-carousel-item > div:nth-child(2) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 260px !important;
    padding: 24px 18px !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
    margin: 10px auto !important;
  }

  #testimonial-carousel .carousel-item > div:nth-child(2) .card-template,
  #testimonial-carousel .testimonial-carousel-item > div:nth-child(2) .card-template {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* --- Projects Page Bootstrap Carousel (#carouselExample) Responsive --- */
  #carouselExample {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
  }

  #carouselExample .carousel-item.active {
    display: block !important;
  }

  #carouselExample .gjs-row {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 15px 10px !important;
  }

  #carouselExample .gjs-cell {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  #carouselExample .project-img {
    width: 100% !important;
    max-width: 400px !important;
    margin: 10px auto !important;
  }

  #carouselExample .project-img img {
    width: 100% !important;
    height: auto !important;
    max-height: 280px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    display: block !important;
    margin: 0 auto !important;
  }

  #carouselExample #isuivg,
  #carouselExample #i6gqhr,
  #carouselExample #izt1tb {
    margin: 15px auto !important;
    display: inline-flex !important;
    justify-content: center !important;
  }

  /* --- Recognition Carousel (#recognition-carousel) Responsive --- */
  #recognition-carousel {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    margin: 0 auto !important;
  }

  #recognition-carousel .carousel-inner,
  #recognition-carousel .carousel-item {
    max-width: 100% !important;
    overflow: hidden !important;
  }

  #recognition-and-media {
    max-width: 100% !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  #recognition-and-media #card-1,
  #recognition-and-media #card-2,
  #recognition-and-media #card-3 {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .carousel-arrows {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 15px !important;
    margin-top: 20px !important;
    position: static !important;
    width: 100% !important;
  }

  .carousel-control-prev, .carousel-control-next {
    position: static !important;
    width: auto !important;
    opacity: 1 !important;
  }

  /* --- Workshop Images & Footer --- */
  #it9ao7 {
    height: auto !important;
    margin: 0 auto !important;
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    padding: 0 15px !important;
  }

  #izqm6c {
    height: auto !important;
    width: 100% !important;
  }

  #ifmmcz, #ilmo1l {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    float: none !important;
    border-radius: 6px !important;
    margin: 0 auto !important;
  }

  #iypxe3 {
    height: auto !important;
    min-height: auto !important;
    padding: 35px 15px 25px 15px !important;
    display: block !important;
  }

  #iyfglk {
    padding: 0 !important;
  }

  #ie8tgs {
    margin: 0 auto !important;
    width: 100% !important;
  }

  .footer-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px 16px !important;
    margin: 15px 0 !important;
  }

  .footer-links a {
    font-size: 13px !important;
    text-align: center !important;
    line-height: 1.4 !important;
  }

  #i01aq4.footer-links {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    margin: 20px auto 10px auto !important;
    width: auto !important;
    max-width: 160px !important;
  }

  #ifvc3g {
    width: 150px !important;
    max-width: 60% !important;
    margin: 0 auto !important;
    display: block !important;
  }

  #footer-boxes {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 15px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 30px auto !important;
  }

  #footer-boxes img {
    width: 100% !important;
    max-width: 280px !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* --- Contact Page Form & Stepper --- */
  #contact-body {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 25px !important;
    padding: 0 10px !important;
  }

  .bs-stepper {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .bs-stepper-header {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 20px auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 5px !important;
  }

  .bs-stepper .line {
    flex: 1 1 20px !important;
    min-width: 15px !important;
    max-width: 40px !important;
    margin: 0 4px !important;
  }

  .bs-stepper .step {
    flex: 0 0 auto !important;
  }

  .bs-stepper .step-trigger {
    padding: 4px !important;
    width: 36px !important;
    height: 36px !important;
  }

  .bs-stepper-circle {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
    line-height: 32px !important;
  }

  #map {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  #gmaps {
    width: 100% !important;
    max-width: 100% !important;
    height: 320px !important;
    border-radius: 6px !important;
  }

  #contact-body input, #contact-body select, #contact-body textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }

  /* --- Request a Quote Form --- */
  #iq5tr5.booking-form-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px 14px !important;
    box-shadow: none !important;
  }

  .input-field, .form-control {
    font-size: 16px !important; /* Prevents auto-zoom on iOS Safari */
    width: 100% !important;
    max-width: 100% !important;
  }

  #ife957.gjs-row {
    flex-direction: column !important;
    gap: 15px !important;
    padding: 0 !important;
  }

  /* --- Project & Service Content Detail Pages --- */
  #project-title {
    font-size: 26px !important;
    line-height: 1.3 !important;
    padding: 0 15px !important;
    text-align: center !important;
  }

  #project-description {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 15px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    text-align: center !important;
  }

  #project-gallery {
    margin-top: 25px !important;
  }

  #project-images {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    margin-top: 20px !important;
  }

  #project-images div {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
  }

  #project-images img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    border-radius: 6px !important;
  }
}