/* ============================================
   COMPREHENSIVE RESPONSIVE STYLES
   For Header, Footer, Index, Contact, and All Pages
   ============================================ */


/* ============================================
   TABLET DEVICES (max-width: 991px)
   ============================================ */
@media (max-width: 991px) {

    /* ============================================
       TOP BAR RESPONSIVE
       ============================================ */
    .top-bar {
        display: none !important;
        /* Hide on tablets and below */
    }

    /* Start collapsed on mobile/tablet */
    .tf-collapse-content {
        display: none;
    }

    /* ============================================
       TAB RESPONSIVE STYLES
       ============================================ */
    .wg-tab.style-2 {
        margin-bottom: 30px !important;
    }

    .wg-tab.style-2 .tab-product {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: flex-start !important;
    }

    .wg-tab.style-2 .nav-tab-item {
        margin-right: 0 !important;
        margin-bottom: 10px !important;
    }

    .wg-tab.style-2 .nav-tab-item a {
        padding: 12px 16px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    /* ============================================
       HEADER RESPONSIVE
       ============================================ */
    /* ============================================
   HEADER RESPONSIVE
   ============================================ */
    /* Global Overflow Fix */
    body,
    html {
        overflow-x: hidden;
    }

    /* Make SVGs responsive */
    svg {
        max-width: 100%;
        height: auto;
    }
}

/* ============================================
   LAPTOP DEVICES (max-width: 1366px)
   ============================================ */
@media (max-width: 1366px) {
    .page-title-home .title {
        font-size: 24px !important;
        /* Scale down from typically larger desktop size */
        line-height: 1.1 !important;
    }


    /* .page-title-home {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    } */

    .page-title-home .mask {
        display: none;
        /* Hide masks on smaller laptops if they cause overflow */
    }

    .page-title-home .wg-counter {
        margin-bottom: 30px;
    }

    .page-title-home .split-text span {
        white-space: normal !important;
    }

    .page-title-home h6.title {
        font-size: 20px !important;
        /* Scale down from typically larger desktop size */
        line-height: 1.1 !important;
    }


}

@media (max-width: 991px) {


    /* FIX FOR TABLET (768px - 991px) */
    .page-title-home .title,
    .page-title-home h1.title,
    .page-title-home h4.title {
        font-size: 24px !important;
        line-height: 1.2 !important;
    }

    .page-title-home h6.title {
        font-size: 22px !important;
        /* Scale down from typically larger desktop size */
        line-height: 1.1 !important;
    }


    /* Fix page title home on mobile */
    @media (max-width: 767px) {

        .page-title-home .title,
        .page-title-home h1.title,
        .page-title-home h4.title {
            font-size: 24px !important;
            line-height: 1.2 !important;
        }

        .page-title-home h6.title {
            font-size: 18px !important;
            line-height: 1.1 !important;
        }


        .fw-65 {
            font-size: 32px !important;
        }
    }

    .header {
        padding: 12px 0 !important;
    }

    .header-content {
        padding: 0 20px !important;
    }

    /* Logo responsive */
    .logo-header-custom {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .logo-header-custom img {
        max-height: 45px !important;
        width: auto !important;
        height: auto !important;
    }

    .logo-text-wrapper {
        flex-direction: row;
        gap: 6px;
    }

    .logo-text-line {
        font-size: 26px !important;
        font-weight: 700 !important;
    }

    .logo-text-line.highlightedText {
        font-size: 26px !important;
    }

    /* Hide desktop navigation */
    .main-menu {
        display: none !important;
    }

    /* Show mobile menu button */
    .mobile-button {
        display: block !important;
    }

    /* Header button */
    .header-right .nav-btn {
        display: none !important;
        /* Hide Get A Quote on tablet */
    }

    /* ============================================
       FOOTER RESPONSIVE
       ============================================ */
    .footer {
        padding: 50px 0 0 !important;
    }

    .footer .footer-top {
        padding-bottom: 30px !important;
    }

    .footer .footer-middle {
        padding: 40px 0 !important;
        gap: 30px 0 !important;
    }

    .footer .footer-bottom {
        padding: 25px 0 !important;
        flex-direction: column !important;
        gap: 15px !important;
        text-align: center !important;
    }

    .footer .widget-title {
        font-size: 18px !important;
        margin-bottom: 18px !important;
    }

    .footer .footer-content,
    .footer .locations-contact {
        max-width: 100% !important;
        margin-bottom: 25px !important;
    }

    .footer .footer-logo img {
        max-height: 45px !important;
    }

    .footer .social-links {
        justify-content: center !important;
    }

    .footer .social-links a {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
    }

    /* Footer columns stack */
    .footer .row>div {
        margin-bottom: 25px;
    }

    /* Header adjustments */
    .header .logo img {
        max-height: 50px !important;
    }

    .header .nav-menu {
        font-size: 14px;
    }

    /* Hero section */
    .hero-section h1,
    .section-banner h1 {
        font-size: 40px !important;
        line-height: 1.2 !important;
    }

    .hero-section p,
    .section-banner p {
        font-size: 16px !important;
    }

    /* Section headings */
    .heading-section h2,
    .tf-title h2 {
        font-size: 36px !important;
        line-height: 1.3 !important;
    }

    /* Section spacing */
    .tf-spacing-1 {
        padding-top: 70px !important;
        padding-bottom: 70px !important;
    }



    .tf-spacing-3,
    .tf-spacing-4,
    .tf-spacing-5 {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    /* Footer */
    .footer .footer-middle {
        padding: 50px 0 !important;
    }

    .footer .widget-title {
        font-size: 18px !important;
        margin-bottom: 20px !important;
    }

    .footer .footer-content {
        margin-bottom: 30px;
    }

    /* Contact form */
    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        font-size: 14px !important;
        padding: 12px 15px !important;
    }

    /* Cards and boxes */
    .service-box,
    .project-item,
    .blog-item {
        margin-bottom: 30px;
    }

    /* Container padding */
    .tf-container {
        padding-left: 25px !important;
        padding-right: 25px !important;
    }
}


/* ============================================
   MOBILE DEVICES (max-width: 767px)
   ============================================ */
@media (max-width: 767px) {

    /* Header */
    .header {
        padding: 10px 0 !important;
    }

    .header-content {
        padding: 0 15px !important;
    }

    /* Logo responsive for mobile */
    .logo-header-custom {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
    }

    .logo-header-custom img {
        max-height: 35px !important;
        width: auto !important;
        height: auto !important;
    }

    /* Stack logo text vertically on mobile */
    .logo-text-wrapper {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 2px !important;
    }

    .logo-text-line {
        font-size: 22px !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }

    .logo-text-line.highlightedText {
        font-size: 16px !important;
    }

    .header .logo img {
        max-height: 35px !important;
    }

    .header .nav-menu {
        font-size: 13px;
    }

    .header .tf-btn {
        padding: 8px 20px !important;
        font-size: 13px !important;
    }

    /* Footer Mobile Layout from Reference (Teckko) */
    .footer {
        padding-top: 40px !important;
        background-color: #142125 !important;
        /* Specific dark bg from reference */
    }

    .footer .footer-middle {
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        /* Ensure full width for children */
    }

    .footer .footer-logo {
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    .footer .footer-logo img {
        max-height: 45px !important;
        margin: 0 auto !important;
    }

    /* Social icons centered below logo */
    .footer .social-links {
        justify-content: center !important;
        margin-bottom: 30px !important;
    }

    /* Unified alignment for all footer columns (Services, Locations, Contact) */
    .footer .footer-content.footer-col-block {
        width: 100% !important;
        margin-bottom: 30px !important;
        text-align: left !important;
        padding: 0 20px !important;
        /* Consistent padding */
    }

    .footer .footer-content.footer-col-block .title-mobile {
        text-align: left !important;
        display: block !important;
        width: 100% !important;
    }

    .footer .footer-content.footer-col-block .tf-collapse-content {
        text-align: left !important;
        align-items: flex-start !important;
    }

    .footer .footer-content.footer-col-block .tf-collapse-content ul {
        align-items: flex-start !important;
        display: flex !important;
        flex-direction: column !important;
        padding-left: 0 !important;
    }

    /* Specific alignment for Address/Contact items */
    .footer .footer-content.footer-col-block .address,
    .footer .footer-content.footer-col-block .tf-collapse-content>div {
        text-align: left !important;
    }

    /* Override for Newsletter to look good */
    .footer .left {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 40px !important;
    }

    .footer .form-newsletter {
        align-items: center !important;
    }

    .footer .form-newsletter .title {
        text-align: center !important;
    }

    .footer .widget-title,
    .title-mobile {
        font-size: 18px !important;
        font-weight: 700 !important;
        margin-bottom: 15px !important;
        color: #fff !important;
    }

    .footer-bottom {
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding-top: 20px !important;
        margin-top: 20px !important;
        padding-bottom: 60px !important;
    }

    /* ============================================
       TAB RESPONSIVE STYLES FOR MOBILE
       ============================================ */
    .wg-tab.style-2 {
        margin-bottom: 25px !important;
    }

    .wg-tab.style-2 .tab-product {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: flex-start !important;
    }

    .wg-tab.style-2 .nav-tab-item {
        margin-right: 0 !important;
        margin-bottom: 8px !important;
        flex: 0 0 auto !important;
    }

    .wg-tab.style-2 .nav-tab-item a {
        padding: 10px 12px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        border-radius: 5px !important;
    }

    /* Gallery container spacing on mobile */
    .gallery-container {
        row-gap: 20px !important;
    }

    .gallery-item-col {
        margin-bottom: 0 !important;
    }

    /* ============================================
       HERO SECTION
       ============================================ */
    .hero-section h1,
    .section-banner h1 {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 15px !important;
    }

    .hero-section p,
    .section-banner p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .hero-section .tf-btn,
    .section-banner .tf-btn {
        padding: 12px 25px !important;
        font-size: 14px !important;
    }

    /* Section headings */
    .heading-section h2,
    .tf-title h2 {
        font-size: 26px !important;
        line-height: 1.2 !important;
    }

    .heading-section h3,
    .tf-title h3 {
        font-size: 22px !important;
    }

    .heading-section h4,
    .tf-title h4 {
        font-size: 18px !important;
    }

    /* Body text */
    .body-1,
    p {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .body-2 {
        font-size: 13px !important;
    }

    /* Section spacing */
    .tf-spacing-1 {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }



    .tf-spacing-3,
    .tf-spacing-4,
    .tf-spacing-5 {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    /* Margins */
    .mb-60 {
        margin-bottom: 35px !important;
    }

    .mb-50 {
        margin-bottom: 30px !important;
    }

    .mb-40 {
        margin-bottom: 25px !important;
    }

    .mb-30 {
        margin-bottom: 20px !important;
    }

    .mt-60 {
        margin-top: 35px !important;
    }

    .mt-50 {
        margin-top: 30px !important;
    }

    /* Footer */
    .footer {
        padding-top: 35px !important;
    }

    .footer .footer-middle {
        padding: 35px 0 !important;
    }

    .footer .footer-top {
        padding-bottom: 25px !important;
    }

    .footer .footer-bottom {
        padding: 18px 0 !important;
        text-align: center !important;
        flex-direction: column !important;
        gap: 12px !important;
    }

    .footer .footer-bottom p {
        font-size: 12px !important;
        margin: 0 !important;
    }

    .footer .widget-title {
        font-size: 15px !important;
        margin-bottom: 12px !important;
    }

    .footer .footer-content {
        margin-bottom: 20px !important;
    }

    .footer .footer-content p,
    .footer .footer-content a,
    .footer .footer-content li {
        font-size: 12px !important;
        line-height: 1.6 !important;
    }

    .footer .footer-logo img {
        max-height: 35px !important;
    }

    .footer .social-links {
        justify-content: center !important;
        gap: 8px !important;
    }

    .footer .social-links a {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }

    /* Footer newsletter */
    .footer .newsletter-form input {
        font-size: 13px !important;
        padding: 10px 12px !important;
    }

    .footer .newsletter-form button {
        font-size: 13px !important;
        padding: 10px 15px !important;
    }

    /* Footer menu links */
    .footer .footer-menu li {
        margin-bottom: 8px !important;
    }

    .footer .footer-menu a {
        font-size: 12px !important;
    }

    /* Contact page */
    .contact-info-box {
        padding: 25px 20px !important;
        margin-bottom: 20px;
    }

    .contact-info-box h4 {
        font-size: 18px !important;
    }

    .contact-info-box p,
    .contact-info-box a {
        font-size: 13px !important;
    }

    .contact-info-box .icon {
        font-size: 32px !important;
        margin-bottom: 15px !important;
    }

    /* Contact form */
    .contact-form {
        padding: 30px 20px !important;
    }

    .contact-form h3 {
        font-size: 22px !important;
        margin-bottom: 20px !important;
    }

    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        font-size: 13px !important;
        padding: 10px 12px !important;
        margin-bottom: 15px !important;
    }

    .contact-form .tf-btn {
        width: 100%;
        padding: 12px 20px !important;
        font-size: 14px !important;
    }

    /* Service boxes */
    .service-box,
    .service-item {
        padding: 25px 20px !important;
        margin-bottom: 20px;
    }

    .service-box h4,
    .service-item h4 {
        font-size: 18px !important;
    }

    .service-box .icon,
    .service-item .icon {
        font-size: 36px !important;
        margin-bottom: 15px !important;
    }

    /* Project/Portfolio items */
    .project-item,
    .portfolio-item {
        margin-bottom: 20px;
    }

    .project-item h4,
    .portfolio-item h4 {
        font-size: 18px !important;
    }

    /* Blog items */
    .blog-item {
        margin-bottom: 25px;
    }

    .blog-item h4 {
        font-size: 18px !important;
    }

    .blog-item .meta {
        font-size: 12px !important;
    }

    /* Testimonials */
    .testimonial-item {
        padding: 25px 20px !important;
    }

    .testimonial-item p {
        font-size: 14px !important;
    }

    .testimonial-item .author {
        font-size: 15px !important;
    }

    /* Stats/Counter section */
    .counter-item h3,
    .stat-number {
        font-size: 36px !important;
    }

    .counter-item p,
    .stat-label {
        font-size: 13px !important;
    }

    /* Buttons */
    .tf-btn,
    .tf-button {
        padding: 12px 25px !important;
        font-size: 14px !important;
    }

    /* Container */
    .tf-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Grid adjustments */
    .row {
        margin-left: -10px !important;
        margin-right: -10px !important;
    }

    .row>* {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

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



    .page-title h1 {
        font-size: 28px !important;
    }

    /* Breadcrumb */
    .breadcrumb {
        font-size: 13px !important;
    }
}

/* ============================================
   SMALL MOBILE DEVICES (max-width: 575px)
   ============================================ */
@media (max-width: 575px) {

    /* Header */
    .header .logo img {
        max-height: 75px !important;
    }

    /* Hero/Banner */
    .hero-section h1,
    .section-banner h1 {
        font-size: 24px !important;
    }

    /* Page Title Home - Small Mobile */
    .page-title-home .title,
    .page-title-home h1.title,
    .page-title-home h4.title {
        font-size: 18px !important;
    }

    /* ============================================
       SMALL MOBILE TAB STYLES (max-width: 575px)
       ============================================ */
    .wg-tab.style-2 .nav-tab-item a {
        padding: 9px 10px !important;
        font-size: 10px !important;
    }

    .wg-tab.style-2 .tab-product {
        gap: 6px !important;
    }

    .wg-tab.style-2 .nav-tab-item {
        margin-bottom: 6px !important;
    }

    .hero-section p,
    .section-banner p {
        font-size: 13px !important;
    }

    /* Section headings */
    .heading-section h2,
    .tf-title h2 {
        font-size: 22px !important;
    }

    .heading-section h3,
    .tf-title h3 {
        font-size: 18px !important;
    }

    .heading-section h4,
    .tf-title h4 {
        font-size: 16px !important;
    }

    /* Section spacing */
    .tf-spacing-1,

    .tf-spacing-3,
    .tf-spacing-4,
    .tf-spacing-5 {
        padding-top: 35px !important;
        padding-bottom: 35px !important;
    }

    /* Footer */
    .footer .footer-middle {
        padding: 35px 0 !important;
    }

    .footer .widget-title {
        font-size: 15px !important;
    }

    /* Contact */
    .contact-form {
        padding: 25px 15px !important;
    }

    .contact-info-box {
        padding: 20px 15px !important;
    }

    /* Service boxes */
    .service-box,
    .service-item {
        padding: 20px 15px !important;
    }

    /* Stats */
    .counter-item h3,
    .stat-number {
        font-size: 32px !important;
    }

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

    /* Buttons */
    .tf-btn,
    .tf-button {
        padding: 10px 20px !important;
        font-size: 13px !important;
    }

    .page-title-home .wg-counter {
        margin-bottom: 5px;

    }

    .section-about .about-top {
        margin: 20px;
    }

    .section-services .tf-marquee {
        padding-bottom: 20px;
    }
}

/* ============================================
   EXTRA SMALL DEVICES (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {

    /* Hero */
    .hero-section h1,
    .section-banner h1 {
        font-size: 20px !important;
    }

    /* Page Title Home - Tiny Mobile */
    .page-title-home .title,
    .page-title-home h1.title,
    .page-title-home h4.title {
        font-size: 18px !important;
    }

    .page-title-home .desc p {
        font-size: 14px !important;
    }

    .page-title-home .top-page-title {
        margin-bottom: 15px !important;
    }

    /* Headings */
    .heading-section h2,
    .tf-title h2 {
        font-size: 20px !important;
    }

    /* Spacing */
    .tf-spacing-1,

    .tf-spacing-3,
    .tf-spacing-4,
    .tf-spacing-5 {
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }

    /* Stats */
    .counter-item h3,
    .stat-number {
        font-size: 28px !important;
    }

    .page-title-home .top-page-title {
        margin-bottom: 20px !important;
    }

}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */

/* Fixes for Mobile Responsiveness (Added) */
@media (max-width: 767px) {

    /* Hide decorative masks causing overflow */
    .page-title-home .mask {
        display: none !important;
    }

    /* Scale down rotating text/logo */
    .wg-curve-text {
        transform: scale(0.7) !important;
        transform-origin: left center;
        margin-bottom: -40px;
    }

    .wg-curve-text .text-rotate svg {
        width: 200px !important;
        height: 200px !important;
    }

    /* Allow split text to wrap */
    .split-text span {
        white-space: normal !important;
    }

    /* Fix Marquee Font Size */
    .big-text {
        font-size: 40px !important;
        line-height: 1.2 !important;
    }

    /* Ensure specific spans in title don't force nowrap */
    .page-title-home h1 span[style*="nowrap"] {
        white-space: normal !important;
    }

    /* Adjust page title spacing */
    /* .page-title-home {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    } */

    .page-title-home .top-page-title {
        margin-bottom: 30px !important;
    }

    /* Stats Section Fixes */
    .wg-counter {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 16px !important;
    }

    .wg-counter .counter-item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        padding: 16px !important;
    }

    /* Optional: scale text a bit so it fits clean */
    .wg-counter .number-counter {
        font-size: clamp(2.2rem, 4vw, 3rem) !important;
    }

    .wg-counter h6 {
        font-size: 13px !important;
        text-align: center;
    }

    /* Image responsiveness */
    .image img {
        width: 100% !important;
        height: auto !important;
    }

    /* Mission/Vision Accordion Images */
    .according-content {
        flex-direction: column;
    }

    .according-content .image {
        width: 100% !important;
        margin-bottom: 20px;
    }

    .according-content .right {
        padding-left: 0 !important;
    }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */
@media (hover: none) {

    /* Disable hover effects on touch devices */
    .service-box:hover,
    .project-item:hover,
    .blog-item:hover,
    .testimonial-item:hover,
    .tf-btn:hover,
    a:hover img {
        transform: none !important;
    }


    /* Make touch targets larger */
    .tf-btn,
    .tf-button,
    a {
        min-height: 20px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ============================================
   LANDSCAPE MOBILE ORIENTATION
   ============================================ */
@media (max-width: 767px) and (orientation: landscape) {

    .hero-section,
    .section-banner {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .tf-spacing-1,

    .tf-spacing-3,
    .tf-spacing-4,
    .tf-spacing-5 {
        padding-top: 35px !important;
        padding-bottom: 35px !important;
    }
}

/* ============================================
   UTILITY CLASSES FOR RESPONSIVE
   ============================================ */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }

    .text-center-mobile {
        text-align: center !important;
    }

    .full-width-mobile {
        width: 100% !important;
    }
}

@media (min-width: 768px) {
    .hide-desktop {
        display: none !important;
    }
}

/* ============================================
   ADDITIONAL COMPREHENSIVE FIXES
   ============================================ */

@media (max-width: 991px) {

    /* Form Section Stacking */
    .section-form .tf-container .row {
        flex-direction: column;
    }

    .section-form .left,
    .section-form .right {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .section-form .section-form-content {
        position: relative !important;
        max-width: 100% !important;
        bottom: auto !important;
        right: auto !important;
        padding: 30px 20px !important;
    }

    /* Testimonials Fix */
    .section-testimonial.p-services .section-testimonials-inner {
        padding: 40px 20px !important;
        flex-direction: column;
    }

    .section-testimonial.p-services .left {
        max-width: 100% !important;
        margin-bottom: 30px;
    }

    .section-testimonial.p-services .sw-testimonials {
        max-width: 100% !important;
    }
}

@media (max-width: 767px) {

    /* ============================================
       MOBILE NAV CONTACT FIX 
       ============================================ */
    .mobile-nav-wrap .contact-mobile {
        padding-bottom: 50px;
    }

    .mobile-nav-wrap .contact-mobile .content-contact-moblile {
        display: flex;
        align-items: flex-start;
        margin-bottom: 15px;
        flex-wrap: wrap;
        /* Ensure text wraps */
    }

    .mobile-nav-wrap .contact-mobile .content-contact-moblile i {
        margin-top: 5px;
        margin-right: 10px;
        flex-shrink: 0;
    }

    .mobile-nav-wrap .contact-mobile .content-contact-moblile a,
    .mobile-nav-wrap .contact-mobile .content-contact-moblile .desc {
        white-space: normal !important;
        /* Force wrapping */
        word-break: break-word;
        /* Break long words/emails if needed */
        flex: 1;
        /* Take remaining space */
        line-height: 1.5 !important;
        font-size: 14px !important;
        z-index: 999;
        padding-top: 20px;

    }

    /* ============================================
       PAGE TITLE & SPLIT TEXT FIX
       ============================================ */
    .page-title-home h1.title,
    .page-title h1.title,
    .page-title .breadkcum .link-breadkcum,
    .page-title .breadkcum .page-breadkcum {
        word-wrap: break-word;
        white-space: normal !important;
    }

    .split-text span,
    .split-text div {
        display: inline-block !important;
        /* Keep animation structure but allow flow */
    }

    /* Force specific wrapping for deep nested divs in animation */
    .split-text>div {
        display: inline !important;
    }

    .page-title-home h1.title {
        font-size: 32px !important;
        line-height: 1.3 !important;
    }

    .page-title-home .sub-title {
        font-size: 20px !important;
        white-space: normal !important;
        line-height: 1.5 !important;
    }

    /* About Services Images */
    .section-about.p-services .image,
    .section-about.p-services .img-secion-item {
        max-width: 100% !important;
        position: relative !important;
        bottom: auto !important;
        right: auto !important;
        margin-bottom: 20px;
    }

    .section-about .img-item {
        position: relative !important;
        bottom: auto !important;
        margin-top: 20px;
    }

    /* Counter max-width removal */
    .page-title-home .wg-counter {
        max-width: 100% !important;
    }

    /* General Image Fixes */
    .section-company .image-section,
    .section-counting .image {
        height: auto !important;
        min-height: 200px;
    }

    /* Footer Marquee Text Scaling */
    .tf-marquee .big-text {
        font-size: 32px !important;
        /* Even smaller for mobile if needed */
    }

    /* Ensure swiper slides don't overflow */
    .swiper-slide {
        width: 100% !important;
        /* Swiper JS might override this, but good as fallback */
        box-sizing: border-box !important;
    }

    /* Footer Columns Stacking Logic Check */
    .footer .footer-middle {
        flex-direction: column;
    }

    .footer .footer-middle .left,
    .footer .footer-middle .footer-col-block {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 30px;
    }
}

/* ============================================
   LARGE DESKTOPS / HIGH-RES LAPTOPS (min-width: 1367px)
   ============================================ */
@media (min-width: 1367px) {
    /* .page-title-home {
        padding: 80px 0 !important;
    } */

    .page-title-home .mask.mask-home-1 {
        right: -10% !important;
        top: 10% !important;
    }

    .page-title-home .mask.mask-home-2 {
        left: -10% !important;
        bottom: -10% !important;
    }

    .page-title-home .title {
        font-size: 24px !important;
        line-height: 1.1 !important;
    }

    .page-title-home h6.title {
        font-size: 23px !important;
        line-height: 1.1 !important;
    }

    .tf-container {
        max-width: 1400px;
        margin: 0 auto;
    }
}


/* about page */

/* Responsive text utilities */
.text-responsive {
    font-size: clamp(1rem, 2vw, 1.25rem);
}

.heading-responsive {
    font-size: clamp(1.5rem, 4vw, 2.5rem);
}

/* Card responsive padding */
.card-responsive {
    padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem);
}

/* Image responsive container */
.responsive-img-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 aspect ratio */
    overflow: hidden;
}

.responsive-img-container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Grid gap utilities */
.gap-responsive {
    gap: clamp(1rem, 3vw, 2rem);
}

/* Button responsive */
.btn-responsive {
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2rem);
    font-size: clamp(0.875rem, 2vw, 1rem);
}

/* ============================================ */
/* ABOUT PAGE SPECIFIC RESPONSIVE STYLES */
/* ============================================ */

@media (max-width: 991px) {

    /* About Introduction Section */
    .section-about-intro {
        background-attachment: scroll !important;
        /* Remove fixed bg on mobile */
        padding: 60px 0 !important;
    }

    .who-card {
        padding: 25px 20px !important;
        margin: 0 !important;
    }

    /* Vision & Mission Section */
    .section-vision-mission .row {
        flex-direction: column;
    }

    .section-vision-mission .image {
        margin-bottom: 40px !important;
    }

    .vision-mission-content h3 {
        font-size: 24px !important;
    }

    /* What We Do Section */
    .service-card {
        margin-bottom: 25px !important;
        padding: 25px 20px !important;
    }

    .service-card h4 {
        font-size: 20px !important;
    }

    /* Why Choose Us */
    .why-card {
        padding: 25px 15px !important;
        margin-bottom: 25px !important;
    }

    .why-card .icon {
        font-size: 40px !important;
    }



    .step-number {
        width: 45px !important;
        height: 45px !important;
        font-size: 20px !important;
    }

    /* Impact Stats */
    .stat-card h3 {
        font-size: 42px !important;
    }

    /* CTA Section */
    .cta-box {
        padding: 40px 25px !important;
    }

    .cta-box h2 {
        font-size: 28px !important;
    }
}

@media (max-width: 767px) {

    /* Page Title */
    .page-title h1.title {
        font-size: 32px !important;
    }

    /* Section Headings */
    .section-about-intro h2.title,
    .section-what-we-do h2.title,
    .section-why-choose h2.title,
    .section-approach h2.title,
    .section-stats h2.title {
        font-size: 28px !important;
    }

    /* Who We Are Cards */
    .who-card {
        padding: 20px 15px !important;
    }

    .who-text {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    /* Service Cards - 2 columns on tablet, 1 column on mobile */
    .section-what-we-do .row {
        flex-direction: column;
    }

    .section-what-we-do .col-lg-6 {
        width: 100% !important;
        margin-bottom: 20px;
    }

    /* Why Choose Us - 2 columns on tablet, 1 column on mobile */
    .section-why-choose .col-lg-3 {
        width: 50% !important;
    }

    @media (max-width: 575px) {
        .section-why-choose .col-lg-3 {
            width: 100% !important;
        }
    }

    /* Approach Steps Stack */
    .section-approach .col-lg-4 {
        width: 100% !important;
        margin-bottom: 20px;
    }

    /* Impact Stats */
    .stat-card h3 {
        font-size: 36px !important;
    }

    .stat-card p {
        font-size: 16px !important;
    }

    /* CTA */
    .cta-box {
        padding: 30px 20px !important;
    }

    .cta-box h2 {
        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    .cta-box p {
        font-size: 15px !important;
    }
}

@media (max-width: 480px) {

    /* Further mobile optimizations */
    .section-about-intro h2.title {
        font-size: 24px !important;
    }

    .who-card {
        padding: 18px 15px !important;
    }

    .who-text i {
        font-size: 18px !important;
        margin-right: 8px !important;
    }

    .vision-mission-content h3 {
        font-size: 22px !important;
    }

    .service-card h4 {
        font-size: 18px !important;
    }

    .why-card h4 {
        font-size: 18px !important;
    }

    .why-card .icon {
        font-size: 36px !important;
        margin-bottom: 15px !important;
    }



    .approach-step h4 {
        font-size: 20px !important;
    }

    .cta-box .tf-btn {
        width: 100% !important;
        padding: 15px 20px !important;
        text-align: center;
    }
}

/* ============================================ */
/* PROFESSIONAL ENHANCEMENTS */
/* ============================================ */

/* Add subtle animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply animations to cards */
.service-card,
.why-card,
.approach-step,
.stat-card,
.cta-box {
    animation: fadeInUp 0.6s ease-out;
}

/* Hover effects for cards */
@media (min-width: 992px) {
    .service-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(67, 186, 255, 0.25) !important;
    }

    .why-card:hover {
        transform: translateY(-5px);
        background: rgba(255, 255, 255, 0.15) !important;
        backdrop-filter: blur(15px) !important;
    }

    .approach-step:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(67, 186, 255, 0.2) !important;
    }
}

.section-what-we-do {
    position: relative;
    background-image: url('../images/expertise_banner.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 80px 0;
}

.section-what-we-do .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.section-what-we-do .container {
    position: relative;
    z-index: 2;
}

.section-what-we-do .body-1 {
    line-height: 1.8;
}

.section-why-choose {
    background: linear-gradient(135deg, var(--primary) 0%, var(--main-blue-1) 100%);
    color: var(--white);
    padding: 80px 0;
}

.section-why-choose .sub-title {
    color: rgba(255, 255, 255, 0.9);
}

.why-card {
    background: rgba(255, 255, 255, 0.1);
    padding: 30px 20px;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.why-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
}

.why-card .icon {
    font-size: 48px;
    color: var(--white);
}

.why-card h4 {
    color: var(--white);
    font-size: 20px;
}

.why-card p {
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
}

.service-card-about {
    background: rgba(67, 186, 255, 0.05);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(67, 186, 255, 0.15);
    height: 100%;
    border-left: 4px solid var(--dark-cadet);
    transition: all 0.3s ease;
}

.service-card-about:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(67, 186, 255, 0.2);
}

.service-card-about h4 {
    color: var(--white);
    font-size: 22px;
}

.service-card-about h4 i {
    margin-right: 10px;
    color: var(--primary);
}

.service-card-about p {
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
}

.section-vision-mission {
    background-color: rgba(67, 186, 255, 0.05);
    padding: 80px 0;
}

.section-vision-mission .image img {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(67, 186, 255, 0.2);
}

.section-vision-mission .vision-mission-content h3 {
    color: var(--white);
    font-size: 28px;
}

.section-approach {
    padding: 80px 0;
}

.section-cta {
    padding: 80px 0;
}

.section-why-choose {
    padding: 80px 0;
}

.section-about-intro {
    padding: 80px 0;
}

.section-vision-mission .vision-mission-content h3 i {
    color: var(--primary);
    margin-right: 10px;
}

.section-vision-mission .vision-mission-content p {
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.8);
}

/* ============================================ */
/* 'WHO WE ARE' SECTION ENHANCEMENTS */
/* ============================================ */
.section-about-intro .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;

}

.section-about-intro .container {
    position: relative;
    z-index: 2;
}

.who-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 30px;
    transition: all 0.3s ease-in-out;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    height: 100%;
}

@media (min-width: 992px) {
    .who-card:hover {
        transform: translateY(-10px);
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }
}

.who-card .who-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    line-height: 1.7;
}

.who-card .who-text i {
    color: var(--white);
    margin-right: 15px;
    font-size: 24px;
    vertical-align: middle;
}

/* Responsive adjustments for 'Who We Are' cards */
@media (max-width: 991px) {
    .who-card {
        padding: 25px;
        margin-bottom: 20px;
    }

    .about-intro-content .row>div:last-child .who-card {
        margin-bottom: 0;
    }
}

@media (max-width: 767px) {
    .who-card .who-text {
        font-size: 15px;
    }

    .who-card .who-text i {
        font-size: 22px;
    }
}

@media (max-width: 991px) {
    .sub-title {
        font-size: 22px !important;
    }

    .team-item .item-content .sub-title {
        font-size: 16px !important;
    }
}

@media (max-width: 767px) {
    .sub-title {
        font-size: 20px !important;
    }

    .team-item .item-content .sub-title {
        font-size: 14px !important;
    }
}

/* Additional responsive media query for team section sub-title */
@media (max-width: 991px) {
    .section-team .sub-title {
        font-size: 15px !important;
    }
}