/* Perfect Rubber - mobile & UI improvements
   Added on 28-05-2026
   Purpose: fix stuck loader on mobile, improve responsiveness, polish UI without changing backend/PHP flow. */

:root {
  --pri-blue: #083180;
  --pri-sky: #0cb1f6;
  --pri-dark: #061a3d;
  --pri-text: #1f2937;
  --pri-muted: #6b7280;
  --pri-soft: #f5f8ff;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  color: var(--pri-text);
  overflow-x: hidden;
  background: #fff;
}

img,
iframe,
video {
  max-width: 100%;
}

img {
  height: auto;
}

a,
button,
input,
textarea,
select {
  -webkit-tap-highlight-color: rgba(12, 177, 246, 0.18);
}

#preloader {
  transition: opacity .25s ease, visibility .25s ease;
}

#preloader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#preloader-status {
  background-size: contain;
}

.header-top {
  background: linear-gradient(90deg, var(--pri-dark), var(--pri-blue));
}

.header-left a,
.footer-sec a,
.footer-social a {
  word-break: break-word;
}

.header-left li a,
.header-left li {
  line-height: 1.6;
}

.hd-sec {
  box-shadow: 0 8px 24px rgba(8, 49, 128, .08);
  background: #fff;
}

.logo img {
  max-height: 82px;
  width: auto;
}

.main-menu ul li a {
  transition: all .25s ease;
}

.main-menu ul li.active > a,
.main-menu ul li:hover > a {
  color: var(--pri-sky);
}

.single-slide {
  background-size: cover !important;
  background-position: center center !important;
}

.slider-overlay {
  background: rgba(0, 0, 0, .16);
}

.call-to-action-sec {
  background-attachment: scroll;
}

.call-to-action-text {
  border-radius: 18px;
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(2px);
}

.call-to-action-text i {
  font-size: 18px;
  line-height: 1.9;
}

.sec-title h1,
.about-desc h1,
.company-desc h1,
.page-heading h1 {
  letter-spacing: -.4px;
}

.about-desc,
.faq-sec,
.service-details,
.contact-field,
.project-details,
.footer-wedget-one,
.footer-widget-menu,
.latest-news,
.footer-social {
  overflow-wrap: anywhere;
}

.about-desc p,
.faq-sec p,
.service-details p,
.service-details li,
.contact-field li,
.footer-sec p,
.footer-sec li {
  line-height: 1.8;
}

.about-desc a,
a.service-button,
.gallery-button h2 a,
.submit-button input,
.contact-field .btn,
button,
input[type="submit"] {
  border-radius: 999px !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.about-desc a:hover,
a.service-button:hover,
.gallery-button h2 a:hover,
.submit-button input:hover,
input[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(8, 49, 128, .16);
}

.all-gallery img,
.gallery-photo img,
.service-details-img img,
.why-choose-thumb img,
.company-ceo-thumb img,
.modal img {
  border-radius: 14px;
}

.all-gallery img {
  object-fit: cover;
}

.service-content,
.inner,
.panel,
.contact-field,
.footer-sec {
  border-radius: 14px;
}

iframe[src*="youtube.com"],
iframe[src*="google.com/maps"] {
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .10);
}

.footer-sec {
  background: linear-gradient(135deg, #061a3d, #083180) !important;
}

.footer-bottom-sec {
  background: #04122b !important;
}

.mean-container .mean-bar {
  background: var(--pri-blue);
  border-radius: 10px;
  min-height: 45px;
}

.mean-container a.meanmenu-reveal {
  color: #fff;
}

.mean-container a.meanmenu-reveal span {
  background: #fff;
}

.mean-container .mean-nav ul li a {
  font-size: 14px;
  line-height: 1.4;
}

@media only screen and (max-width: 991px) {
  .hd-sec {
    padding: 14px 0 12px;
  }

  .logo {
    text-align: left;
  }

  .logo img {
    max-height: 70px;
  }

  .main-menu {
    display: none;
  }

  .mobile-nav-menu {
    position: relative;
    z-index: 1000;
    margin-top: 8px;
  }

  .all-slide .owl-item,
  .single-slide,
  .slider-wrapper {
    height: 430px !important;
  }

  .call-to-action-text i {
    float: none !important;
    display: block;
    text-align: left;
    font-size: 16px;
  }

  .pt-100 { padding-top: 65px; }
  .pb-100 { padding-bottom: 65px; }
}

@media only screen and (max-width: 767px) {
  body {
    font-size: 15px;
    line-height: 1.7;
  }

  .container {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .header-top {
    padding: 8px 0;
  }

  .header-left,
  .header-right-div,
  .soical-profile,
  .social-appoitment-button {
    text-align: center !important;
  }

  .header-left ul,
  .soical-profile ul {
    margin: 0;
    padding: 0;
  }

  .header-left li {
    display: block;
    padding-right: 0 !important;
    margin: 3px 0 !important;
    font-size: 13px;
  }

  .soical-profile li {
    margin: 4px 2px;
  }

  .logo img {
    max-height: 64px;
  }

  .mobile-nav-menu .mean-container .mean-bar {
    margin-top: 8px;
  }

  .all-slide .owl-item,
  .single-slide,
  .slider-wrapper {
    height: 300px !important;
  }

  .all-slide .owl-controls .owl-prev,
  .all-slide .owl-controls .owl-next {
    display: none !important;
  }

  .pagehding-sec {
    padding: 55px 0 !important;
  }

  .page-heading h1 {
    font-size: 26px !important;
  }

  .breadcrumb-list ul {
    padding-left: 0;
  }

  .sec-title h1,
  .about-desc h1,
  .company-desc h1 {
    font-size: 25px !important;
    line-height: 1.3;
  }

  .about-desc h2,
  .faq-page h2 {
    font-size: 18px !important;
    line-height: 1.45;
  }

  .about-desc,
  .company-desc,
  .faq-sec,
  .service-details,
  .contact-field {
    margin-bottom: 24px;
  }

  .about-desc p,
  .faq-sec p,
  .service-details p,
  .footer-sec p {
    text-align: left !important;
  }

  .call-to-action-sec,
  .about-us-sec,
  .service-sec,
  .gallery-v1-sec,
  .faq-page {
    padding-left: 0;
    padding-right: 0;
  }

  .call-to-action-text {
    padding: 22px 18px;
  }

  .call-to-action-text i {
    font-size: 15px;
    line-height: 1.75;
  }

  .all-gallery .owl-item,
  .all-gallery img {
    text-align: center;
  }

  .all-gallery img {
    width: 100%;
    min-height: 210px;
  }

  iframe[src*="youtube.com"] {
    min-height: 220px;
  }

  iframe[src*="google.com/maps"] {
    height: 300px !important;
  }

  .modal {
    margin-top: 0 !important;
    padding: 12px !important;
  }

  .modal-dialog {
    width: auto;
    margin: 16px auto;
  }

  .footer-sec {
    padding-top: 42px !important;
  }

  .footer-sec h2 {
    margin-top: 18px;
  }

  .footer-widget-menu,
  .footer-social,
  .footer-wedget-one {
    text-align: center;
  }

  .copy-right,
  .copy-right .col-md-8,
  .copy-right .col-sm-8 {
    text-align: center;
  }
}

@media only screen and (max-width: 480px) {
  .logo img {
    max-height: 56px;
  }

  .all-slide .owl-item,
  .single-slide,
  .slider-wrapper {
    height: 250px !important;
  }

  .pt-100 { padding-top: 46px !important; }
  .pb-100 { padding-bottom: 46px !important; }
  .pb-70 { padding-bottom: 34px !important; }

  .header-left li,
  .header-left li a {
    font-size: 12.5px;
  }

  .mean-container .mean-nav ul li a {
    padding: 11px 5%;
  }

  .sec-title h1,
  .about-desc h1,
  .company-desc h1 {
    font-size: 23px !important;
  }
}


/* Homepage mobile overlay/scroll fix - 28-05-2026 */
.home-page .slider-overlay {
  pointer-events: none;
}

.home-page .modal-backdrop {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.home-page.modal-open,
body.home-page.modal-open {
  overflow: auto !important;
  padding-right: 0 !important;
}

@media only screen and (max-width: 767px) {
  .home-page,
  .home-page body {
    overflow-y: auto !important;
    position: static !important;
    touch-action: pan-y;
  }

  .home-page .slider,
  .home-page .all-slide,
  .home-page .all-slide .owl-stage-outer,
  .home-page .all-slide .owl-stage,
  .home-page .all-slide .owl-item,
  .home-page .single-slide {
    touch-action: pan-y;
  }

  .home-page .slider-overlay {
    background: rgba(0, 0, 0, .08) !important;
  }
}

/* Homepage mobile black-layer final fix - 28-05-2026
   This removes the remaining translucent layer visible on mobile homepage only. */
body.home-page #overlay,
body.home-page .modal-backdrop,
body.home-page .modal.fade,
body.home-page .modal.in {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

body.home-page,
body.home-page.modal-open {
  overflow-y: auto !important;
  position: static !important;
  padding-right: 0 !important;
}

body.home-page .slider-overlay,
body.home-page .single-slide::before,
body.home-page .single-slide::after,
body.home-page .slider::before,
body.home-page .slider::after,
body.home-page .all-slide::before,
body.home-page .all-slide::after {
  background: transparent !important;
  background-color: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media only screen and (max-width: 767px) {
  body.home-page .slider-overlay {
    display: none !important;
  }
}