/* ============================================
   Sichern Engineering - Custom Style Overrides
   ============================================ */

/* Phone link in header */
.header-action-layout1 .item-btn i.fa-phone-alt {
    font-size: 14px;
}

/* Contact links in footer & contact section */
.contact-box-layout1 a,
.footer-form-box a {
    text-decoration: none;
}
.contact-box-layout1 a:hover,
.footer-form-box a:hover {
    opacity: 0.9;
}

/* Service box enhancements for 6-column layout */
.service-wrap-layout1 .service-box-layout1 {
    margin-bottom: 30px;
}

.service-wrap-layout1 .service-box-layout1 .item-content {
    text-align: center;
}

/* Client logo section */
.team-wrap-layout1 .heading-layout1 h2 {
    font-size: 28px;
}

/* Footer head office styling */
.footer-form-box .media {
    display: flex;
    align-items: flex-start;
}

/* Stats counter + suffix */
.progress-box-layout1 .count-number::after {
    content: "+";
    font-size: 0.7em;
}
.progress-box-layout1:first-child .count-number::after {
    content: "";
}

/* Smooth scroll for back-to-top in footer */
.footer-bottom-wrap-layout1 a {
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color 0.3s;
}
.footer-bottom-wrap-layout1 a:hover {
    color: #fff;
}

/* Logo sizing for Sichern */
.logo-area .temp-logo img {
    max-height: 55px;
    width: auto;
}

/* Footer logo invert for dark background */
.footer-logo img {
    filter: brightness(0) invert(1);
    max-height: 50px;
}

/* Heading paragraph in services */
.heading-layout1 p {
    font-size: 16px;
    line-height: 1.7;
}

/* CTA button in hero area */
.about-box-layout2 .btn-fill-xl {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 14px 30px;
    border-radius: 4px;
}

/* Service card Start Now button */
.service-box-layout1 .ghost-btn-xl {
    display: inline-block;
}

/* Blog Area Styles */
.blog-box-layout1:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.blog-box-layout1 .item-img a {
    display: block;
    height: 100%;
}

.blog-box-layout1 .item-img img {
    transition: transform 0.5s ease;
}

.blog-box-layout1:hover .item-img img {
    transform: scale(1.1);
}

.single-blog-box-layout1 .blog-details-content p {
    margin-bottom: 20px;
}

.widget-latest-post .media:hover .post-title a {
    color: var(--accent) !important;
}

.badge-light {
    background-color: #f5f5f5;
    color: #666;
    border: 1px solid #eee;
}

/* ==============================================
   RESPONSIVE STYLES - All Breakpoints
   ============================================== */

/* ---------- Tablet Landscape (max-width: 991px) ---------- */
@media only screen and (max-width: 991px) {

    /* Header topbar - hide on tablet/mobile */
    #header-topbar {
        display: none !important;
    }

    /* Reduce section padding globally */
    .founder-section,
    .team-wrap-layout1,
    .testimonial-wrap-layout1 {
        padding: 60px 0 !important;
    }

    /* Clients section container */
    .team-wrap-layout1 .container {
        padding-top: 60px !important;
    }

    /* Founder section adjustments */
    .founder-bio {
        padding-left: 0 !important;
        margin-top: 20px;
    }

    /* Testimonial quote text */
    .testimonial-box p {
        font-size: 18px !important;
        line-height: 1.5 !important;
    }

    /* Contact map height */
    .google-map,
    #googleMap {
        height: 350px !important;
    }

    /* Blog details title */
    .single-blog-box-layout1 .item-title {
        font-size: 26px !important;
    }

    /* Footer columns spacing */
    .footer-box-layout1 {
        margin-bottom: 30px;
    }

    /* Header phone button */
    .header-action-layout1 {
        display: none !important;
    }

    /* CTA section text */
    .action-box-layout1 .item-title {
        font-size: 22px !important;
        text-align: center;
    }
    .action-box-layout1 {
        text-align: center;
        margin-bottom: 15px;
    }

    /* Progress / stats area */
    .progress-box-layout1 {
        margin-bottom: 20px;
    }
}

/* ---------- Tablet Portrait (max-width: 767px) ---------- */
@media only screen and (max-width: 767px) {

    /* Further reduce section padding */
    .founder-section,
    .team-wrap-layout1,
    .testimonial-wrap-layout1,
    .service-wrap-layout1,
    .about-wrap-layout3,
    .about-wrap-layout6,
    .about-wrap-layout7,
    .why-choose-wrap-layout1,
    .faq-page-wrap-layout1,
    .blog-wrap-layout1,
    .single-blog-wrap-layout1,
    .contact-wrap-layout2 {
        padding: 50px 0 !important;
    }

    /* Clients section container */
    .team-wrap-layout1 .container {
        padding-top: 40px !important;
    }

    /* Founder section */
    .founder-section .heading-layout1 {
        margin-bottom: 30px !important;
    }
    .founder-section .heading-layout1 h2 {
        font-size: 24px !important;
    }
    .founder-section h3 {
        font-size: 24px !important;
    }
    .founder-img-wrap {
        margin-bottom: 30px;
    }

    /* Experience badge on founder image - reposition */
    .founder-img-wrap > div:last-child {
        right: 10px !important;
        top: 15px !important;
        padding: 14px 18px !important;
    }
    .founder-img-wrap > div:last-child > div:first-child {
        font-size: 24px !important;
    }

    /* Heading sizes */
    .heading-layout1 h2 {
        font-size: 24px !important;
    }

    /* Hero content */
    .about-box-layout2 .item-title {
        font-size: 24px !important;
    }
    .about-box-layout2 p {
        font-size: 14px !important;
    }
    .about-box-layout2 .btn-fill-xl {
        font-size: 13px !important;
        padding: 12px 24px !important;
    }

    /* Quote form */
    .about-box-layout3 {
        margin-top: 30px;
    }

    /* About section content */
    .about-box-layout4 .item-title,
    .about-box-layout5 .item-title {
        font-size: 22px !important;
    }

    /* Service cards */
    .service-box-layout1 {
        margin-bottom: 20px !important;
    }

    /* Testimonial text */
    .testimonial-box p {
        font-size: 16px !important;
        padding: 0 10px !important;
        margin-bottom: 25px !important;
    }
    .testimonial-box .fa-quote-left {
        font-size: 35px !important;
    }

    /* Contact map */
    .google-map,
    #googleMap {
        height: 280px !important;
    }

    /* Contact box overlay */
    .contact-box-layout1 {
        position: relative !important;
        width: 100% !important;
        margin-top: 20px;
    }

    /* Blog card layout */
    .blog-box-layout1 {
        margin-bottom: 25px;
    }

    /* Blog details */
    .single-blog-box-layout1 .item-title {
        font-size: 22px !important;
    }
    .blog-details-content {
        font-size: 15px !important;
    }
    .blog-share-area {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    /* Products page */
    .premium-product-img-wrap {
        height: 200px !important;
    }

    /* Footer */
    .footer-top-wrap-layout1 {
        padding: 40px 0 !important;
    }
    .footer-bottom-wrap-layout1 .copyright {
        font-size: 12px;
        text-align: center;
        line-height: 1.8;
    }

    /* WhatsApp float button */
    .whatsapp-float {
        width: 50px !important;
        height: 50px !important;
        bottom: 20px !important;
        right: 20px !important;
        font-size: 24px !important;
    }

    /* Inner page banner */
    .inner-page-banner .breadcrumbs-area h1 {
        font-size: 28px !important;
    }

    /* CTA section */
    .action-wrap-layout1 {
        padding: 40px 0 !important;
    }

    /* FAQ accordion */
    .faq-page-accordion .panel-title a {
        font-size: 15px !important;
        padding: 12px 15px !important;
    }
}

/* ---------- Mobile (max-width: 575px) ---------- */
@media only screen and (max-width: 575px) {

    /* Section padding tighten */
    .founder-section,
    .team-wrap-layout1,
    .testimonial-wrap-layout1,
    .service-wrap-layout1,
    .about-wrap-layout3,
    .faq-page-wrap-layout1,
    .blog-wrap-layout1,
    .single-blog-wrap-layout1,
    .contact-wrap-layout2 {
        padding: 40px 0 !important;
    }

    /* Clients section container */
    .team-wrap-layout1 .container {
        padding-top: 30px !important;
    }

    /* Founder section mobile */
    .founder-section .heading-layout1 h2 {
        font-size: 20px !important;
    }
    .founder-section h3 {
        font-size: 22px !important;
    }
    .founder-section p {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    /* Founder highlights stack vertically */
    .founder-bio > div:nth-child(4) {
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* Signature & CTA area */
    .founder-bio > div:last-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }
    .founder-bio > div:last-child .btn-fill-xl {
        width: 100%;
        text-align: center;
    }

    /* Headings */
    .heading-layout1 h2 {
        font-size: 20px !important;
    }
    .heading-layout1 .item-subtitle {
        font-size: 12px !important;
    }

    /* Hero section */
    .about-box-layout2 .item-title {
        font-size: 20px !important;
        line-height: 1.3 !important;
    }
    .about-box-layout2 .big-text {
        font-size: 28px !important;
    }
    .slick-slider-layout1 .item-content .big-text {
        font-size: 24px !important;
    }

    /* About boxes */
    .about-box-layout4 .item-title,
    .about-box-layout5 .item-title {
        font-size: 20px !important;
    }

    /* Stats counter */
    .progress-box-layout1 .count-number {
        font-size: 32px !important;
    }
    .progress-box-layout1 .count-title {
        font-size: 13px !important;
    }

    /* Testimonials */
    .testimonial-box p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }
    .testimonial-box .item-author h4 {
        font-size: 16px !important;
    }

    /* Contact map */
    .google-map,
    #googleMap {
        height: 220px !important;
    }

    /* Project cards */
    .team-box-layout1 .item-img {
        height: 200px !important;
    }

    /* Blog details */
    .single-blog-box-layout1 .item-title {
        font-size: 20px !important;
    }
    .single-blog-box-layout1 .item-img {
        max-height: 280px !important;
    }
    .entry-meta {
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Products sidebar */
    .premium-sidebar-widget {
        padding: 18px !important;
    }
    .premium-product-img-wrap {
        height: 180px !important;
        padding: 16px !important;
    }
    .premium-product-content {
        padding: 16px !important;
    }
    .premium-product-title {
        font-size: 15px !important;
    }

    /* Inner page banner */
    .inner-page-banner .breadcrumbs-area h1 {
        font-size: 22px !important;
    }
    .inner-page-banner .breadcrumbs-area ul {
        font-size: 13px !important;
    }

    /* CTA section */
    .action-box-layout1 .item-title {
        font-size: 18px !important;
    }

    /* Footer */
    .footer-menu-box {
        flex-direction: column !important;
    }
    .footer-menu-list {
        margin-bottom: 0 !important;
    }

    /* Breadcrumb */
    .breadcrumbs-area ul li {
        font-size: 13px;
    }

    /* Contact form */
    .contact-form-box .btn-fill-xl,
    .contact-form-box .fw-btn-fill {
        width: 100%;
        text-align: center;
    }

    /* Why choose cards */
    .why-choose-box-layout1 {
        margin-bottom: 25px;
    }

    /* FAQ sidebar */
    .sidebar-widget-area .widget {
        margin-top: 30px;
    }

    /* Portfolio page */
    .portfolio-box .item-img {
        height: 200px !important;
    }
}

/* ---------- Small Mobile (max-width: 479px) ---------- */
@media only screen and (max-width: 479px) {

    /* Container padding */
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Founder name */
    .founder-section h3 {
        font-size: 20px !important;
    }

    /* Experience badge smaller */
    .founder-img-wrap > div:last-child {
        padding: 10px 14px !important;
    }
    .founder-img-wrap > div:last-child > div:first-child {
        font-size: 20px !important;
    }

    /* Accent bar */
    .founder-img-wrap > div:nth-child(2) {
        display: none !important;
    }

    /* Hero text */
    .about-box-layout2 .item-title {
        font-size: 18px !important;
    }

    /* Slider text */
    .slick-slider-layout1 .item-content .big-text {
        font-size: 18px !important;
    }

    /* Progress counters */
    .progress-box-layout1 .count-number {
        font-size: 28px !important;
    }

    /* Testimonials */
    .testimonial-box .item-author img {
        width: 60px !important;
        height: 60px !important;
    }

    /* Blog card image */
    .blog-box-layout1 .item-img {
        height: 180px !important;
    }

    /* Products card footer */
    .premium-product-footer {
        flex-direction: column !important;
        gap: 10px !important;
        align-items: flex-start !important;
    }

    /* Contact info widget */
    .widget-contact-info .media {
        flex-direction: column;
        text-align: center;
    }
    .widget-contact-info .item-icon {
        margin-bottom: 10px;
    }

    /* Footer copyright text */
    .footer-bottom-wrap-layout1 .copyright {
        font-size: 11px;
        line-height: 2;
    }

    /* Slider nav tabs hide on small screens */
    .slick-nav-wrap {
        display: none !important;
    }
}

/* ---------- Global overflow fix ---------- */
html, body {
    overflow-x: hidden;
}
img {
    max-width: 100%;
    height: auto;
}

/* ---------- MeanMenu mobile logo fix ---------- */
/* When MeanMenu is active, hide the original desktop header menu */
.mean-container .mean-bar ~ #header-menu .logo-area,
.mean-container .mean-bar ~ #header-menu .header-action-layout1 {
    display: none !important;
}

/* Hide the desktop nav row entirely on mobile - MeanMenu replaces it */
@media only screen and (max-width: 991px) {
    #header-menu .logo-area {
        display: none !important;
    }
    #header-menu .col-xl-2,
    #header-menu .col-lg-2 {
        display: none !important;
    }
}