/* The Planet Shop GH: additions made during the September 2026 recovery.
   Loaded after style.css and responsive.css on every page. */

/* Logo sizing (the logo file is a 200 x 200 square) */
.main-header .logo img { max-height: 72px; width: auto; border-radius: 8px; }
.sticky-header .logo img { max-height: 44px; border-radius: 6px; }
.mobile-menu .nav-logo img { max-height: 48px; border-radius: 6px; }
.main-footer .about-widget .logo img { max-height: 90px; width: auto; border-radius: 8px; }

/* Header layout: keep the logo, menu, phone number and button on one line at common desktop widths */
.header-style-one .container-fluid { padding: 0 40px; }
.main-header .outer-box .theme-btn { margin-left: 30px; }
@media (max-width: 1699px) {
  .main-menu .navigation > li { margin-right: 34px; }
}
@media (max-width: 1499px) {
  .main-header .outer-box .theme-btn { display: none; }
  .main-menu .navigation > li { margin-right: 28px; }
}
@media (max-width: 1199px) {
  .main-menu .navigation > li { margin-right: 22px; }
  .main-header .info-btn { margin-left: 15px; }
}
@media (max-width: 991px) {
  .main-header .main-menu { display: none; }
  .mobile-nav-toggler { display: block; color: #ffffff; }
  .main-header .outer-box .info-btn { display: none; }
}

/* Footer social icons (rebuilt footer) */
.main-footer .ps-social { display: flex; flex-wrap: wrap; margin-top: 20px; }
.main-footer .ps-social li:first-child { margin-left: 0; }
.main-footer .ps-social li a { background-color: #262626; }
.main-footer .ps-social li a:hover { background-color: var(--bg-theme-color2); color: #ffffff; }
.main-footer .hours-widget .user-links li { color: #b5b5b5; }

/* Gallery page grid */
.ps-gallery { padding: 110px 0 90px; }
.ps-gallery .project-block { margin-bottom: 30px; }
.ps-gallery .project-block .inner-box { border-radius: 12px; overflow: hidden; background: #ffffff; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06); }
.ps-gallery .project-block .image-box .image { margin: 0; }
.ps-gallery .project-block .image-box .image img { width: 100%; height: 300px; object-fit: cover; display: block; transition: transform 0.6s ease; }
.ps-gallery .project-block .inner-box:hover .image img { transform: scale(1.05); }
.ps-gallery .project-block .info-box { position: relative !important; left: auto; bottom: auto !important; padding: 22px 26px 26px; opacity: 1 !important; visibility: visible !important; min-width: 0; border-radius: 0; }
.ps-gallery .project-block .inner-box:hover .image-box .image img { opacity: 1; transform: scale(1.05); }
.ps-gallery .project-block .image-box .image { border-radius: 0; }
.ps-gallery .project-block .info-box .cat { display: block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--theme-color2); font-weight: 700; margin-bottom: 6px; }
.ps-gallery .project-block .info-box .title { font-size: 18px; line-height: 1.4; margin: 0; }
.ps-gallery .project-block .info-box .title a { color: var(--theme-color1); }
.ps-gallery .project-block .info-box .title a:hover { color: var(--theme-color2); }
.ps-gallery .project-block .info-box .read-more { position: absolute; right: 22px; top: -24px; width: 48px; height: 48px; line-height: 48px; text-align: center; border-radius: 50%; background: var(--bg-theme-color2); color: #ffffff; }
.ps-gallery .bottom-box .text { font-size: 18px; color: #555555; }

/* Simple lightbox used when the fancybox plugin is not present */
.ps-lightbox { position: fixed; inset: 0; z-index: 999999; background: rgba(0, 0, 0, 0.9); display: flex; align-items: center; justify-content: center; padding: 30px; cursor: zoom-out; }
.ps-lightbox img { max-width: 100%; max-height: 90vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); }
.ps-lightbox .ps-caption { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: #ffffff; font-size: 16px; }
.ps-lightbox .ps-close { position: absolute; top: 18px; right: 24px; color: #ffffff; font-size: 34px; line-height: 1; cursor: pointer; }

/* Hero fallback: shown only when the Slider Revolution plugin files are not present.
   The first slide is displayed as a static banner instead of four raw slides stacked on top of each other.
   The plugin stylesheet hides slides and captions until the plugin runs, so these rules make them visible again. */
.main-slider.rev-fallback .rev_slider_wrapper { position: relative; min-height: 680px; overflow: hidden; background: var(--bg-theme-color1); }
.main-slider.rev-fallback .rev_slider { display: block; position: relative; overflow: hidden; min-height: 680px; }
.main-slider.rev-fallback .rev_slider > ul { list-style: none; margin: 0; padding: 0; position: relative !important; }
.main-slider.rev-fallback .rev_slider > ul > li { display: none; }
.main-slider.rev-fallback .rev_slider > ul > li:first-child { display: block; position: relative !important; visibility: visible !important; min-height: 680px; width: 100%; }
.main-slider.rev-fallback .rev_slider > ul > li:first-child .rev-slidebg { position: absolute; left: 0; top: 0; width: 100% !important; height: 100% !important; object-fit: cover; opacity: 0.6; visibility: visible !important; }
.main-slider.rev-fallback .rev_slider > ul > li:first-child:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(0, 0, 0, 0.15) 100%); z-index: 1; visibility: visible !important; }
.main-slider.rev-fallback .ps-fallback-inner { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 200px 15px 110px; }
.main-slider.rev-fallback .tp-caption { position: relative !important; visibility: visible !important; white-space: normal !important; display: block; margin: 0; padding: 0; z-index: 2; }
.main-slider.rev-fallback .tp-caption + .tp-caption { margin-top: 30px; }
.main-slider.rev-fallback h1 { color: #ffffff; font-size: 64px; line-height: 1.1; margin: 0; max-width: 760px; }
.main-slider.rev-fallback .theme-btn { visibility: visible !important; }
@media (max-width: 767px) {
  .main-slider.rev-fallback h1 { font-size: 40px; }
  .main-slider.rev-fallback .ps-fallback-inner { padding: 150px 15px 80px; }
  .main-slider.rev-fallback .rev_slider_wrapper, .main-slider.rev-fallback .rev_slider, .main-slider.rev-fallback .rev_slider > ul > li:first-child { min-height: 560px; }
}

/* Preloader: the loading animation image was not archived, so keep the overlay plain */
.preloader:after { background-image: none; }

/* Form handoff notice */
.ps-form-note { font-size: 14px; color: #777777; margin-top: 12px; }

/* Homepage gallery: plain grid until the Owl Carousel plugin is present */
.projects-carousel.ps-owl-fallback { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.projects-carousel.ps-owl-fallback .project-block { width: 25%; padding: 0 15px; margin-bottom: 30px; }
@media (max-width: 991px) { .projects-carousel.ps-owl-fallback .project-block { width: 50%; } }
@media (max-width: 575px) { .projects-carousel.ps-owl-fallback .project-block { width: 100%; } }
.projects-carousel.ps-owl-fallback .project-block .image img { width: 100%; height: 260px; object-fit: cover; }

/* 404 page (404.html is served by Cloudflare Pages for any address that does not exist) */
.ps-error-page { padding: 100px 0 110px; }
.ps-error-page .error-page__title { font-size: 180px; line-height: 180px; }
.ps-error-page .error-page__sub-title { font-size: 26px; line-height: 36px; margin-top: 0; }
.ps-error-page .error-page__text { max-width: 640px; margin: 25px auto 0; }
.ps-error-buttons { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }
@media (max-width: 767px) {
  .ps-error-page { padding: 70px 0 80px; }
  .ps-error-page .error-page__title { font-size: 120px; line-height: 120px; }
  .ps-error-page .error-page__sub-title { font-size: 20px; line-height: 30px; }
}