/*
 * Skylite overrides
 * -----------------
 * Loaded last, after the template's stylesheets. Everything the rebrand needs
 * that the template did not already provide lives here, so theme files stay
 * untouched and remain upgradable.
 */

/* Screen-reader-only. Defined locally rather than relying on the bundled
   Bootstrap, whose major version differs on the class name (sr-only vs
   visually-hidden). */
.visually-hidden:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---------- Mobile header logo ---------- */

/* Below the point where the desktop nav collapses into the hamburger menu
   (Bootstrap's lg breakpoint, matching d-lg-none on .mobile-menu-area), the
   logo should always be the .main_sticky slot's image regardless of scroll
   position — there is no separate mobile logo markup, so this reuses that
   slot rather than duplicating the <img>. */
@media (max-width: 991.98px) {
    .logo_img {
        display: none !important;
    }

    .main_sticky {
        display: inline-block !important;
    }
}

/* ---------- Form feedback ---------- */

.contact-area .alert {
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 24px;
    font-size: 15px;
    line-height: 1.6;
    border: 1px solid transparent;
}

.contact-area .alert ul {
    margin: 8px 0 0;
    padding-left: 18px;
}

.contact-area .alert-success {
    background: #e8f5ee;
    border-color: #b7ddc8;
    color: #1c6942;
}

.contact-area .alert-danger {
    background: #fdecec;
    border-color: #f2c2c2;
    color: #8f2f2f;
}

.contact-area .alert a {
    color: inherit;
    text-decoration: underline;
}

/* ---------- Contact details panel ---------- */

.contact-details-box {
    background: #f6f8fa;
    border-radius: 8px;
    padding: 36px 32px;
}

.contact-details-box h3 {
    font-size: 22px;
    margin-bottom: 24px;
}

.contact-details-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.contact-details-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #e3e8ed;
    line-height: 1.6;
}

.contact-details-list li:last-child {
    border-bottom: 0;
}

.contact-details-list i {
    font-size: 18px;
    line-height: 1.6;
    flex: none;
}

.contact-details-list small {
    display: block;
    opacity: 0.75;
    font-size: 13px;
}

/* ---------- Footer contact list ---------- */

.footer-contact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-contact-list li {
    padding: 6px 0;
    line-height: 1.6;
}

/* ---------- Service detail ---------- */

.service-detail-list {
    list-style: none;
    margin: 24px 0;
    padding: 0;
}

.service-detail-list li {
    position: relative;
    padding: 10px 0 10px 30px;
    line-height: 1.6;
    border-bottom: 1px solid #eceff2;
}

.service-detail-list li:last-child {
    border-bottom: 0;
}

.service-detail-list li::before {
    content: "\f26e";
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: 10px;
    font-size: 15px;
}

/* ---------- Team ---------- */

/* Bios are not yet supplied, so the detail page leads with the role instead
   of an empty paragraph. */
.team-role-lead {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* ---------- Utilities ---------- */

.section-cta {
    margin-top: 40px;
}

.post-meta-line {
    font-size: 14px;
    opacity: 0.8;
    margin-bottom: 8px;
}

/* ---------- Hero overlay ---------- */

/* The template gives the hero no scrim at all, so the white heading and
   paragraph sit directly on a busy reception-desk photo and are hard to
   read. Darkest over the text on the left, fading out before it reaches the
   photo card on the right, which already has its own contrast. */
.hero-area.style-two {
    position: relative;
}

.hero-area.style-two::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(4, 7, 23, 0.92) 0%, rgba(4, 7, 23, 0.75) 50%, rgba(4, 7, 23, 0.15) 78%, rgba(4, 7, 23, 0) 92%);
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
}

.hero-area.style-two > .container {
    position: relative;
    z-index: 2;
}

/* Belt and suspenders: the gradient alone still competes with the busiest
   part of the photo (the lit wood panelling), so the paragraph — set in a
   lighter weight than the heading and so the harder of the two to read —
   gets its own shadow independent of how dark the overlay ends up. */
.hero-contant p {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

/* ---------- Breadcrumb overlay ---------- */

/* Same idea as the hero: a flat dark tint so the circuit-line pattern and
   the gold border stay a background detail rather than competing with the
   white page title sitting on top of them. */
.breadcumb-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(4, 7, 23, 0.45);
    z-index: 1;
    pointer-events: none;
}

.breadcumb-area > .container {
    position: relative;
    z-index: 2;
}

/* ---------- Rounded photography ---------- */

/* The `>` keeps this to each section's real photo, not the small decorative
   accent shapes (bouncing badges, icon PNGs) nested a level deeper inside
   the same containers — those are already irregular shapes of their own. */
.hero-thumb > img,
.about-thumb img,
.single-team-thumb img,
.single-blog-thumb img {
    border-radius: 16px;
}

/* ---------- Values cards ---------- */

/* Four per row here (vs. three on the homepage's services grid, which shares
   the same .service-title rule), so the same font size wraps titles like
   "Diversity and empowerment" onto a second line — unevenly, since shorter
   titles stay on one. Sized down just for this section so every title fits
   on one line and the divider beneath it lines up across all four cards. */
.service-area.style-two.values-area .service-title {
    font-size: 16px;
}

/* ---------- Mission & vision ---------- */

.mission-vision-split {
    display: flex;
    align-items: stretch;
    margin-top: 40px;
    border-radius: 24px;
    overflow: hidden;
    min-height: 320px;
}

.mv-panel {
    flex: 1 1 50%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 48px;
}

/* The diagonal seam: the accent panel is clipped to a slanted right edge and
   pulled over the light panel with a negative margin, so the cut edge lands
   exactly on the boundary between them instead of leaving a gap. */
.mv-panel--accent {
    background: linear-gradient(135deg, #12283a 0%, #f5b319 130%);
    color: #fff;
    clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%);
    padding-right: 130px;
    margin-right: -90px;
    z-index: 1;
}

.mv-panel--light {
    background: #f6f8fa;
    color: #12283a;
    padding-left: 130px;
}

.mv-panel-icon {
    font-size: 40px;
    margin-bottom: 20px;
}

.mv-panel--accent .mv-panel-icon {
    color: #fff;
}

.mv-panel--light .mv-panel-icon {
    color: #f5b319;
}

.mv-panel-title {
    margin-bottom: 14px;
}

.mv-panel--accent .mv-panel-title {
    color: #fff;
}

.mv-panel--accent p {
    color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 767px) {
    .mission-vision-split {
        flex-direction: column;
        border-radius: 16px;
    }

    .mv-panel--accent {
        clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
        padding: 40px 32px 70px;
        margin-right: 0;
        margin-bottom: -50px;
    }

    .mv-panel--light {
        padding: 90px 32px 40px;
    }
}

/* ---------- Newsletter ---------- */

/* The pill shape lives on the container, with the input and button flush and
   borderless inside it — one continuous control, not two shapes with a gap. */
.form-field2 {
    display: flex;
    align-items: center;
    height: 54px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.form-field2 input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 20px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 14px;
}

.form-field2 input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.subscribe-button {
    flex: none;
    width: 54px;
    height: 100%;
    border: none;
    background: #f5b319;
    color: #fff;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
}

.subscribe-button:hover {
    background: #bf8c14;
}

.newsletter-intro {
    font-size: 14px;
    margin: 18px 0 10px;
    opacity: 0.85;
}

.newsletter-done {
    font-size: 14px;
    margin: 18px 0 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.newsletter-error {
    font-size: 13px;
    margin: 8px 0 0;
    color: #e08587;
}

/* ---------- Unsubscribe page ---------- */

.unsubscribe-panel {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    padding: 60px 20px;
}

.unsubscribe-panel .bi {
    font-size: 48px;
    display: block;
    margin-bottom: 20px;
}

/* Match the template's text inputs, which never styled a select. */
.contact_from_box select {
    width: 100%;
    height: 60px;
    padding: 0 20px;
    border: 1px solid #e3e8ed;
    border-radius: 5px;
    background: #fff;
    color: #6b7d8e;
    font-size: 15px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7d8e' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 14px;
}

/* ---------- Logo / wordmark ---------- */

/* Shown until a real logo file is supplied — see components/logo.blade.php.
   The template's own logo images read "Solutek" and are deliberately unused. */
.skylite-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: inherit;
    line-height: 1;
    white-space: nowrap;
    color: #12283a;
}

.skylite-wordmark.is-light {
    color: #ffffff;
}

.skylite-wordmark-name {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.skylite-wordmark-rest {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    opacity: 0.75;
}

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

@media (max-width: 480px) {
    .skylite-wordmark-name { font-size: 21px; }
    .skylite-wordmark-rest { font-size: 11px; }
}

/* The template hardcodes its own brand into the mobile bar:
     meanmenu.min.css -> .mean-bar::before { content: "solutek"; }
   It is CSS content rather than markup, which is why it survived the rebrand
   of every Blade template. Overridden here rather than edited in place, so the
   vendor stylesheet stays untouched and upgradable. */
.mean-container .mean-bar::before {
    content: "Skylite";
    text-transform: none;
    letter-spacing: -0.01em;
}