/* ============================================================
   site.css — small fixes layered on top of the theme.
   Loaded last in Layouts/main.blade.php.
   ============================================================ */

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

/* Screen-reader-only (crawlable) text */
.visually-hidden {
   position: absolute !important;
   width: 1px; height: 1px;
   padding: 0; margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

/* --- Page-title band: clear the fixed header on small screens --- */
@media (max-width: 991px) {
   .bread-section,
   .bread-section-about,
   .bread-section-service,
   .bread-section-contact {
      padding-top: 120px !important;
   }
}
@media (max-width: 575px) {
   .bread-section,
   .bread-section-about,
   .bread-section-service,
   .bread-section-contact {
      padding-top: 105px !important;
   }
}

/* --- Page-title band heading: keep it readable on the dark image --- */
.bread-content h1,
.bread-content h3,
.bread-content .title {
   color: #ffffff;
   opacity: 1;
   -webkit-text-fill-color: #ffffff;
}
.bread-content span,
.bread-content span a {
   color: rgba(255, 255, 255, 0.85);
}

/* --- Footer: address text was dark-on-dark --- */
.footer-section .contact-widget li,
.footer-section .contact-widget li span,
.footer-section .widget-content p,
.footer-section .footer-widget .text p {
   color: #b9c7cf;
}
.footer-section .contact-widget li a {
   color: #dfe7ec;
}
.footer-section .contact-widget li a:hover {
   color: #ffffff;
}

/* --- Header offcanvas menu: never let it sit on the page if JS is slow --- */
.sc-product-offcanvas-area { will-change: transform; }

/* --- Products listing: show the logo contained, not a stretched banner --- */
.products-list .product-logo {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 96px;
   margin-bottom: 18px;
}
.products-list .product-logo img {
   max-height: 72px;
   max-width: 200px;
   width: auto;
   object-fit: contain;
}

/* ============================================================
   Homepage — Products section
   ============================================================ */
.home-products {
   position: relative;
   overflow: hidden;
   background: #f1f7fb;
   padding: 90px 0 96px;
}
.home-products .hp-dots {
   position: absolute;
   top: -30px;
   right: -30px;
   width: 320px;
   height: 260px;
   background-image: radial-gradient(rgba(21, 150, 212, 0.22) 1.6px, transparent 1.7px);
   background-size: 20px 20px;
   -webkit-mask-image: linear-gradient(225deg, #000, transparent 72%);
   mask-image: linear-gradient(225deg, #000, transparent 72%);
   pointer-events: none;
}
.home-products .container { position: relative; }

.home-products .hp-head { max-width: 640px; margin-bottom: 40px; }
.home-products .hp-eyebrow {
   display: inline-block;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: #74b93e;
   margin-bottom: 12px;
}
.home-products .hp-title {
   font-size: 38px;
   line-height: 1.15;
   font-weight: 800;
   color: #10222d;
   margin: 0 0 12px;
}
.home-products .hp-lead {
   font-size: 16px;
   line-height: 1.6;
   color: #566873;
   margin: 0;
}

.home-products .hp-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 22px;
}
.home-products .hp-card {
   display: flex;
   flex-direction: column;
   background: #ffffff;
   border: 1px solid #e3edf3;
   border-radius: 18px;
   padding: 26px;
   color: inherit;
   transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.home-products .hp-card:hover {
   transform: translateY(-4px);
   border-color: #1596d4;
   box-shadow: 0 24px 44px -22px rgba(12, 108, 166, 0.4);
   color: inherit;
}
.home-products .hp-card__top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 18px;
}
.home-products .hp-logo {
   width: 54px;
   height: 54px;
   border-radius: 14px;
   background: #f1f7fb;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}
.home-products .hp-logo img { max-width: 34px; max-height: 34px; object-fit: contain; }
.home-products .hp-logo[data-mono]::before {
   content: attr(data-mono);
   font-family: 'Manrope', 'Inter', sans-serif;
   font-weight: 800;
   font-size: 22px;
   color: #0c6ca6;
   background: linear-gradient(135deg, #1596d4, #74b93e);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}
.home-products .hp-status {
   font-size: 10.5px;
   font-weight: 700;
   letter-spacing: 0.06em;
   text-transform: uppercase;
   color: #5b9a2e;
   background: #e7f3dc;
   padding: 5px 10px;
   border-radius: 999px;
}
.home-products .hp-name {
   font-size: 19px;
   font-weight: 800;
   color: #10222d;
   margin: 0 0 6px;
}
.home-products .hp-tagline {
   font-size: 13.5px;
   font-weight: 600;
   color: #0c6ca6;
   margin: 0 0 10px;
}
.home-products .hp-desc {
   font-size: 14px;
   line-height: 1.6;
   color: #566873;
   margin: 0 0 16px;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
}
.home-products .hp-chips {
   list-style: none;
   padding: 0;
   margin: 0 0 20px;
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}
.home-products .hp-chips li {
   font-size: 11.5px;
   font-weight: 600;
   color: #33454e;
   background: #f1f7fb;
   border: 1px solid #e3edf3;
   padding: 5px 10px;
   border-radius: 999px;
}
.home-products .hp-more {
   margin-top: auto;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 13.5px;
   font-weight: 700;
   color: #0c6ca6;
}
.home-products .hp-card:hover .hp-more { color: #f39c12; }

.home-products .hp-cta { text-align: center; margin-top: 42px; }

@media (max-width: 991px) {
   .home-products { padding: 64px 0 68px; }
   .home-products .hp-grid { grid-template-columns: 1fr 1fr; }
   .home-products .hp-title { font-size: 30px; }
}
@media (max-width: 600px) {
   .home-products .hp-grid { grid-template-columns: 1fr; }
   .home-products .hp-title { font-size: 25px; }
}