/* Service Insight Card (unused after simplification) */
/* Service Insight Card (fills leftover column space) */
/* Spotlight Card (unused after simplification) */
/* Spotlight Card */
/* Spotlight Card (unused after simplification) */
/* Mini Cards (simple textual blocks) */
@media (max-width: 900px) { .service-spotlight-card { display:none; } }
/* Mini Cards (simple textual blocks) */
/* Mini Cards (sidebar simple blocks) */
.mini-card { background:#ffffff; border:1px solid #ececec; padding:18px 20px 22px; border-radius:14px; box-shadow:0 6px 18px rgba(0,0,0,0.06); font-size:1.rem; line-height:1.55; margin-top:18px; min-height:210px; display:flex; flex-direction:column; justify-content:flex-start; gap:8px; }
.mini-card h4 { margin:0 0 10px; font-size:1.05rem; color:#ff6600; letter-spacing:.4px; font-weight:700; }
.mini-card ul, .mini-card ol { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; }
.mini-card li { margin:0; line-height:1.5; }
.mini-card p { margin:0 0 10px; }
.mini-card a { color:#ff6600; text-decoration:none; font-weight:600; }
.mini-card a:hover { text-decoration:underline; }
.mini-card .small-note { font-size:0.72rem; color:#555; margin:2px 0 0; line-height:1.4; }
@media (max-width:900px) { .mini-card { display:none; } }
/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Smooth scrolling for the whole page */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

/* Body Styling */
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #ffffff;
}

        /* Top Bar Styling */
        .top-bar {
            background: #ff6600;
            color: #ffffff;
            padding: 2px 20px;
            position: relative;
            overflow: hidden;
            border-bottom: 2px solid #f3f4f6;
            z-index: 1000;
            max-height: 8rem;
        }

        
        .social-links {
            display: flex; 
            align-items: center; 
            justify-content: space-between;
            gap: 25px;
            padding: 0 15px;
        }
        
        .left-links {
            margin-left: 15px;
            display: flex;
            align-items: left;
            gap: 25px;
            flex-wrap: wrap;
            justify-content: left;
        }
        
        .right-links {
            margin-right: 15px;
            display: flex;
            align-items: right;
            gap: 25px;
            flex-wrap: wrap;
            justify-content: right;
        }

        .right-links a {
            font-size: 13px;
            font-weight: 500;
        }
        
        .left-links h6 {
            margin-top: 7px;
            font-size: 15px;
            font-weight: 500;
            text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
        }

        .contact-link span{
            margin-left: 4px;
            margin-bottom: 1px;
        }

        .social-icon-link,
        .contact-link {
            display: flex;
            align-items: center;
            color: white;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.3s ease;
            padding: 0 10px;
            border-radius: 20px;
            background: rgba(255, 255, 255, 0.15);
        }
        
        .social-icon-link:hover,
        .contact-link:hover {
            background: rgba(255, 255, 255, 0.25);
            transform: translateY(-2px);
            text-decoration: none;
        }
        
        .social-icon-link img,
        .contact-link img {
            width: 18px;
            height: 18px;
            margin-right: 0;
            filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.2));
        }

        /* Separator Lines */
        .top-bar::after {
            content: "";
            position: absolute;
            bottom: -0.8px;
            left: 0;
            width: 100%;
            height:5px;
            background: linear-gradient(to bottom, #ff802c, #ffc6a0);
            z-index: 1;
        }
        
        /* Header Styling */
        header {
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            border-radius: 0 0 12px 12px;
            overflow: hidden;
            width: 100%;
        }
        
        .head-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            background-color: #ffffff;
            padding: 7px 20px;
            position: relative;
            z-index: 999;
        }
        
        .logo-img {
            width: 160px;
            height: auto;
            transition: transform 0.3s ease;
            margin-left: 0.1rem;
        }
        
        .company-name {
            margin-left: 12rem;
            flex: 1;
            text-align: center;
            padding: 0 15px;
        }
        
        .company-name h1 {
            font-size: 2.2rem;
            margin: 0;
            color: #333;
            letter-spacing: 0.8px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
        
        .tagline {
            font-size: 0.9rem;
            color: #ff6600;
            margin-top: 6px;
            font-style: italic;
            letter-spacing: 1px;
        }
        
        /* Navigation Styling */
        nav {
            margin-top: 15px;
            position: relative;
        }
        
        .nav-links {
            display: flex;
            justify-content: right;
            gap: 20px;
            flex-wrap: wrap;
            padding: 0;
            list-style: none;
            margin-right: 15px;
        }
        
        .nav-links li a {
            text-decoration: none;
            color: #333;
            text-transform: uppercase;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s;
            position: relative;
            padding: 8px 5px;
        }
        
        .nav-links li a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 3px;
            background: #ff6600;
            transition: width 0.3s ease;
        }
        
        .nav-links li a:hover {
            color: #ff6600;
        }
        
        .nav-links li a:hover::after {
            width: 100%;
        }
        .head-container::after{
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height:5px;
            background: linear-gradient(to bottom, #ff802c, #ffc6a0);
            z-index: 1;
        }
        /* Hamburger Menu */
        .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
            padding: 10px;
            background: #ff6600;
            border-radius: 8px;
            z-index: 100;
        }
        
        .hamburger span {
            height: 3px;
            width: 25px;
            background-color: white;
            margin: 3px 0;
            transition: all 0.3s;
            border-radius: 3px;
        }
        
        .hamburger.active span:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
        }
        
        .hamburger.active span:nth-child(2) {
            opacity: 0;
        }
        
        .hamburger.active span:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
        }
        
        /* Mobile Navigation Sidebar */
        .mobile-nav {
            position: fixed;
            top: 0;
            right: -300px;
            width: 280px;
            height: 100%;
            background: white;
            box-shadow: -5px 0 20px rgba(0,0,0,0.15);
            z-index: 99;
            transition: right 0.4s ease;
            padding-top: 80px;
            overflow-y: auto;
        }
        
        .mobile-nav.active {
            right: 0;
        }
        
        .mobile-nav-links {
            list-style: none;
            padding: 0;
        }
        
        .mobile-nav-links li {
            border-bottom: 1px solid #f0f0f0;
        }
        
        .mobile-nav-links li a {
            display: block;
            padding: 15px 25px;
            text-decoration: none;
            color: #333;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 16px;
            transition: all 0.3s;
        }
        


        /* Active tab styling */
.nav-links li a.active,
.mobile-nav-links li a.active {
    color: #ff6600 !important;
    position: relative;
}


/* For mobile navigation */
.mobile-nav-links li a.active {
    background-color: rgba(255, 102, 0, 0.1);
    font-weight: bold;
}
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            /* Place overlay above general content but below the mobile nav */
            z-index: 98;
            display: none;
        }
        
        .overlay.active {
            display: block;
        }
        
        /* Responsive Adjustments */
        @media (max-width: 900px) {
            .social-links {
                gap: 15px;
            }
            
            .left-links, .right-links {
                gap: 15px;
            white-space: nowrap;
            flex-wrap: nowrap;
            }
            
            .company-name h1 {
                font-size: 1.6rem;
            }

            .nav-links {
                display: none;
            }
        }


        /* Responsive Adjustments for devices between 769px and 899px */
        @media (min-width: 769px) and (max-width: 899px) {
            .social-links {
                gap: 18px;
            }

            .left-links, .right-links {
                gap: 18px;
                white-space: nowrap;
                flex-wrap: nowrap;
            }

            .company-name h1 {
                font-size: 1.8rem;
            }

            .nav-links {
                font-size: 1rem;
                display: flex !important;
            }

            .hamburger {
                display: none !important;
            }

            .logo-img {
                width: 140px;
            }
            .social-icon-link img {
                margin-right: 0;
            }
        }
                
        
        @media (max-width: 768px) {
            .head-container {
                padding: 15px;
                z-index: 1;
            }
            
            .nav-links {
                display: none;
            }
            
            .top-bar {
                z-index: 1;
            }

            .hamburger {
                display: flex;
            }
            
            .left-links h6 {
                display: none;
            }
            
            .company-name {
                flex: 0 0 auto;
                margin: 0 10px;
                text-align: left;
                padding: 0;
            }
            
            .company-name h1 {
                font-size: 1.4rem;
            }
            
            .tagline {
                font-size: 0.8rem;
            }
            
            .logo-img {
                width: 120px;
            }
        }
        @media (min-width: 481px) and (max-width: 768px) {
            .top-bar {
                padding: 4px 10px;
                max-height: 5rem;
            }
            .social-links {
                gap: 15px;
                padding: 0 5px;
            }
            .left-links, .right-links {
                gap: 15px;
            }
            .left-links h6 {
                font-size: 13px;
                margin-top: 4px;
            }
            .right-links a {
                font-size: 12px;
            }
            .social-icon-link, 
            .contact-link {
                padding: 4px 6px;
            }
            .social-icon {
                width: 22px;
                height: 22px;
            }
            .contact-link span {
                display: none;
            }

            .social-icon-link img {
                margin-right: 0;
                margin-left: 0;
            }

            .contact-link img {
                margin-right: 0;
                margin-left: 0;
            }
        }
        @media (max-width: 480px) {
            .social-links {
                gap: 10px;
            }
            
            .left-links, .right-links {
                gap: 10px;
            }
            
            .contact-link span {
                display: none;
            }
            
            .social-icon-link, 
            .contact-link {
                padding: 6px 8px;
                font-size: 0;
            }

            .head-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
            }
            .social-icon-link img {
                margin-right: 0;
            }

            .contact-link img {
                margin-right: 0;
            }
            
            .company-name h1 {
                font-size: 1.2rem;
            }
            
            .tagline {
                font-size: 0.75rem;
            }
        }
        

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

        /* Services Overview (single vertical card) */
        .services-overview { padding: 30px 20px 0; background: #ffffff; }
        .services-overview .container { max-width: 1400px; margin: 0 auto; }
        .services-overview .section-title { margin-bottom: 22px; text-align: center; }
        .services-card {
            --pad-y: clamp(18px, 2vw, 34px);
            --pad-x: clamp(20px, 3vw, 42px);
            background: #ffffff;
            border-radius: 18px;
            box-shadow: 0 8px 30px rgba(0,0,0,0.08);
            padding: var(--pad-y) var(--pad-x);
            position: relative;
            max-width: 1280px;
            margin: 0 auto 12px;
        }
        .services-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: var(--pad-x);
            right: var(--pad-x);
            height: 6px;
            background: linear-gradient(90deg,#ff6a00 0%,#ff6a00 15%,#ffc6a0 50%,#ff6a00 85%,#ff6a00 100%);
            border-radius: 999px;
        }
        .services-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
    /* Reset legacy grid list style inside this overview context */
    .services-overview .services-list li { display: block; grid-template-columns: unset; column-gap: 0; }
    /* Services overview items: make heading + description one justified flow */
    .service-item { display: block; padding: 22px 26px 24px; background: #f9fafb6f; border-radius: 18px; position: relative; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.06); text-align: justify; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
    /* Removed top accent line as requested */
    /* .service-item::before { } */
    /* Removed hover visual effects */
    .service-item::after { content: none; }
    .service-heading { display: block; font-weight: 600; color: #222; font-size: clamp(0.9rem,1.05rem + 0.55vw,1.45rem); letter-spacing: .3px; margin: 0 0 .5em 0; text-align: left; }
    .service-text { display: block; color: #333; line-height: 1.7; font-size: clamp(1rem,0.95rem + 0.35vw,1.15rem); text-align: justify; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; overflow-wrap: break-word; word-wrap: break-word; }
    /* Optional: if you want the paragraph alignment to visually pull toward the right edge without justification add class .service-item.align-right */
    .service-item.align-right .service-text { text-align: right; }
    /* Remove hover color change */
    .service-item:hover .service-heading { color: inherit; }
    @media (max-width: 680px) { .service-item { padding: 18px 18px 20px; gap:8px; } }
        @media (max-width: 520px) { .services-overview { padding-top: 18px; } .services-card { --pad-x: 18px; } .services-list { gap: 14px; } }

        /* Main Layout */
        .main-layout {
            display: grid;
            grid-template-columns: 250px 1fr 250px;
            gap: 20px;
            padding: 20px;
            align-items: start;
            background-color: #ffffff;
        }

        .vertical-rectangle {
            background:
                radial-gradient(180% 90% at 50% -20%, rgba(255,132,0,0.55), rgba(255,132,0,0) 60%), /* top glow */
                radial-gradient(180% 90% at 50% 120%, rgba(255,132,0,0.55), rgba(255,132,0,0) 60%), /* bottom glow */
                linear-gradient(to bottom,
                    #ff8400 0%,      /* strong top */
                    #ffe5cc 12%,     /* fade */
                    #fafafa 18%,     /* light neutral */
                    #f5f5f5 50%,     /* calm center */
                    #fafafa 82%,     /* light neutral */
                    #ffe5cc 88%,     /* fade into bottom */
                    #ff8400 100%     /* strong bottom */
                );
            background-blend-mode: screen, screen, normal;
            background-color: #f5f5f5; /* fallback */
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 800px;
            width: 100%;
        }

        .left-rectangle, .right-rectangle {
            text-align: center;
        }

        /* About Us Section */
        .about-us {
            background-color: #ffffff;
            position: relative;
            color: #333;
            text-align: center;
        }

        .section-subtitle {
            font-size: 18px;
            color: #ff6600;
            font-weight: 600;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .section-title {
            font-size: 36px;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
            line-height: 1.3;
        }

        .section-title::after {
            content: "";
            display: block;
            width: 90px;
            height: 4px;
            background: linear-gradient(to bottom, #ff802c, #ffc6a0);
            margin: 20px auto;
            border-radius: 2px;
        }

        .about-text .learn-more-btn {
            display: inline-block;
            padding: 10px 20px;
            color: #fff;
            background-color: #ff6600;
            border: none;
            border-radius: 25px;
            text-transform: uppercase;
            font-size: 14px;
            font-weight: bold;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .about-text .learn-more-btn:hover {
            background-color: #f16812;
            transform: scale(1.05);
        }

        /* About intro: show full text */
        .section-description {
            line-height: 1.5;
            display: block;
            overflow: visible;
            text-align: justify;
            text-align-last: left; /* Ensure the last line is left-aligned */
                    -ms-hyphens: auto; /* Hyphenation for older Microsoft browsers */
                    -webkit-hyphens: auto; /* Hyphenation for WebKit browsers */
                    hyphens: auto; /* Enable hyphenation */
            word-break: break-word; /* Break long words if necessary */
            overflow-wrap: break-word; /* Ensure proper word wrapping */
        }

        /* Read more link (no layout shift) */
        .read-more-link {
            display: inline-block;
            margin-top: 6px;
            color: #ff6600;
            font-weight: 700;
            text-decoration: none;
            font-size: 0.95rem;
        }
        .read-more-link:hover,
        .read-more-link:focus,
        .read-more-link:active,
        .read-more-link:visited {
            color: #ff6600; /* keep orange on all states */
            text-decoration: none;
        }
        .read-more-link:focus-visible {
            outline: 3px solid rgba(255, 102, 0, 0.35);
            outline-offset: 2px;
            border-radius: 4px;
        }

        /* Keep About text compact on small screens */
        @media (max-width: 576px) {
            #about-desc { font-size: 0.95rem; }
        }

        /* Services List */
        .services-heading {
            color: #ff6600;
        }

        .services-list {
            list-style: none;
            padding: 0;
            margin: 10px 0 0; /* less top spacing */
            text-align: left; /* ensure text is left-aligned, not inherited center */
        }

        .services-list li {
            display: grid;
            grid-template-columns: 18px 1fr; /* fixed icon column + text */
            column-gap: 9px; /* minimal space between icon and text */
            align-items: start; /* align multi-line text to top */
            font-size: 16px;
            line-height: 1.2; /* tighter */
            color: #333;
            margin-bottom: 6px; /* less space between items */
            transition: color 0.3s ease;
        }

        .services-list li i {
            font-size: 18px; /* compact icon size */
            color: #ff6600;
            margin: 0; /* no extra horizontal gap */
            width: 18px;
            text-align: center;
        }

        /* Small phones: add a little extra space between icon and text */
        @media (max-width: 576px) {
            /* Increase the gap to prevent icon and label from appearing cramped */
            .services-list li { font-size: 1rem; margin-bottom: 6px; grid-template-columns: 18px 1fr; column-gap: 10px; }
            .services-list li i { font-size: 18px; width: 18px; }
        }

        /* Company News Section */
        .company-news {
            padding: 10px 0;
            background-color: #ffffff;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            height: 100%;
            margin: 0 auto;
        }

        #news-section-title {
            font-size: 2rem;
            color: #333;
            font-weight: 700;
            text-align: center;
            margin-bottom: 60px;
        }

        #news-section-title::after {
            content: "";
            display: block;
            width: 50px;
            height: 4px;
            background: linear-gradient(to bottom, #ff802c, #ffc6a0);
            margin: 10px auto 0;
            border-radius: 2px;
        }

        .news-items {
            display: flex;
            gap: 40px;
            justify-content: center;
            align-items: flex-start;
            margin-bottom: 0;
            flex-wrap: wrap;
        }

        /* ≥1400px: stabilize 3-column news grid without horizontal overflow issues */
        @media (min-width: 1400px) {
            .news-items {
                display: grid;
                        grid-template-columns: repeat(3, minmax(0, 1fr));
                        gap: 40px; /* keep existing spacing */
                        justify-content: center; /* center grid within container width */
                        align-items: stretch; /* allow tracks to stretch */
            }
            .news-item {
                        width: 100%;
                        max-width: 100%;
                        flex: initial; /* neutralize flex rules when grid applies */
                        display: flex;          /* make the card a flex column */
                        flex-direction: column;
                    }
                    .news-img { flex: 0 0 auto; }
                    .news-content {
                        flex: 1 1 auto;         /* take remaining space */
                        display: flex;
                        flex-direction: column;
                    }
                    .news-description { flex: 1 1 auto; }
                    .news-content > *:last-child { margin-top: auto; } /* ensure bottom spacing consistent if you add a CTA later */
                    .news-title { min-height: 0; }
                    .news-date { min-height: 0; }
            /* Let side rectangles grow naturally; remove forced tall gap */
            .vertical-rectangle,
            .left-rectangle,
            .right-rectangle {
                height: auto;
                min-height: 100%;
            }
            /* Optional: constrain super wide center if overall layout stretches oddly */
            .main-layout {
                align-items: start;
            }
        }

        .news-item {
            background-color: #ffffff;
            border-radius: 20px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
            width: 270px;
            margin-bottom: 0;
            height: auto;
            display: flex;
            flex-direction: column;
        }

        .news-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
        }

        .news-img {
            width: 100%;
            height: 300px;
            overflow: hidden;
            position: relative;
        }

        .news-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .news-content {
            padding: 20px;
            text-align: center;
            background-color: #ffffff;
            border-top: 3px solid #f0f0f0;
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .news-title {
            font-size: 1.6rem;
            color: #333;
            font-weight: 600;
            margin-bottom: 15px;
            line-height: 1.3;
        }

        .news-date {
            font-size: 1rem;
            color: #888;
            margin-bottom: 15px;
        }

        .news-description {
            font-size: 1.1rem;
            color: #666;
            line-height: 1.4;
            margin-bottom: 20px;
            text-align: justify;               /* justify text */
            text-align-last: left;             /* last line not stretched */
            -webkit-hyphens: auto;             /* allow hyphenation */
            -ms-hyphens: auto;
            hyphens: auto;
            overflow-wrap: break-word;
            word-break: break-word;
        }


        /* Stats Section */
        .stats-title {
            font-size: 1.8rem;
            margin-bottom: 26px;
            color: #333;
            position: relative;
        }

        .stats-title::after {
            content: "";
            display: block;
            width: 50px;
            height: 4px;
            background: linear-gradient(to bottom, #ff802c, #ffc6a0);
            margin: 8px auto 0;
            border-radius: 2px;
        }

        .stats-container {
            display: flex;
            flex-direction: column;
            gap: 12px;
            align-items: center;
            justify-content: center;
        }

        .stat-item {
            position: relative;
            background: #f5f5f5;
            width: 150px;
            height: 150px;
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
            z-index: 1;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .stat-item:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
            background: linear-gradient(145deg, #ffffff, #ffedc0);
        }

        .icon img {
            width: 40px;
            height: 40px;
            filter: grayscale(100%);
            transition: filter 0.3s ease, transform 0.4s ease;
            padding-top: 10px;
        }

        .stat-number {
            font-size: 1.8rem;
            color: #ff6600;
            font-weight: bold;
            margin: 10px 0;
        }

        .stat-text {
            font-size: 1rem;
            color: #666666;
            font-weight: 500;
            letter-spacing: 0.5px;
        }

        /* Responsive Design */
        @media (max-width: 1200px) {
            .main-layout {
                grid-template-columns: 220px 1fr 220px;
            }
            
            .vertical-rectangle {
                height: 750px;
            }
            
            .news-item {
                width: 250px;
            }
        }

        /* Specific styles for 993px to 1200px devices */
@media (min-width: 993px) and (max-width: 1200px) {
    .main-layout {
        grid-template-columns: 300px 1fr 300px;
        gap: 30px;
        padding: 30px 20px 30px 20px;
        align-items: flex-start;
    }

    .vertical-rectangle {
        min-height: 900px;
        width: 100%;
        max-width: 300px;
        padding: 35px 25px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        box-sizing: border-box;
    }

    .left-rectangle,
    .right-rectangle {
        min-height: 900px;
        width: 100%;
        max-width: 300px;
        padding: 35px 25px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        box-sizing: border-box;
    }

    .rectangle-content {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .section-title {
        font-size: 32px;
    }

    .section-subtitle {
        font-size: 16px;
    }

    .services-list li {
        font-size: 15px;
        justify-content: flex-start;
    }

    #news-section-title {
        font-size: 1.8rem;
        margin-bottom: 50px;
    }

    .news-items {
        gap: 30px;
    }

    .news-item {
        width: 260px;
    }

    .news-title {
        font-size: 1.4rem;
    }

    .news-description {
        font-size: 1.05rem;
    }

    .stats-container {
        gap: 20px;
    }

    .stat-item {
        width: 160px;
        height: 170px;
        padding: 22px;
    }

    .stat-number {
        font-size: 1.7rem;
    }

    .stat-text {
        font-size: 0.95rem;
    }
}

        @media (max-width: 992px) {
            .main-layout {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "center"
                    "left"
                    "right";
                gap: 30px;
            }
            
            .company-news {
                grid-area: center;
            }
            
            .left-rectangle {
                grid-area: left;
                height: auto;
                padding: 30px;
            }
            
            .right-rectangle {
                grid-area: right;
                height: auto;
                padding: 30px;
            }
            
            .news-items {
                justify-content: center;
            }
            
            .stats-container {
                flex-direction: row;
                flex-wrap: wrap;
                gap: 15px;
            }
            
            .stat-item {
                width: calc(50% - 15px);
                height: 160px;
            }
            
            .section-title {
                font-size: 32px;
            }
            
            #news-section-title {
                font-size: 1.8rem;
            }
        }

        @media (max-width: 768px) {
            .news-items {
                flex-direction: column;
                align-items: center;
                gap: 30px;
            }
            
            .news-item {
                width: 100%;
                max-width: 400px;
            }
            
            .stat-item {
                width: calc(50% - 10px);
                height: 150px;
            }
            
            .section-title {
                font-size: 28px;
            }
            
            #news-section-title {
                font-size: 1.6rem;
                margin-bottom: 40px;
            }
            
            .news-title {
                font-size: 1.4rem;
            }
        }

        @media (max-width: 576px) {
            .main-layout {
                padding: 15px;
                gap: 20px;
            }
            
            .vertical-rectangle {
                padding: 20px 15px;
            }
            
            .section-title {
                font-size: 24px;
            }
            
            .section-subtitle {
                font-size: 16px;
            }
            
            .services-list li {
                font-size: 14px;
                justify-content: flex-start;
            }
            
            .stats-container {
                gap: 10px;
            }
            
            .stat-item {
                width: 100%;
                height: 140px;
            }
            
            #news-section-title {
                font-size: 1.4rem;
            }
            
            .news-title {
                font-size: 1.3rem;
            }
            
            .news-description {
                font-size: 1rem;
            }
        }

        @media (max-width: 480px) {
            .section-title {
                font-size: 22px;
            }
            
            .section-title::after {
                width: 70px;
            }
            
            .services-list li i {
                font-size: 18px;
            }
            
            .news-img {
                height: 250px;
            }
            
            .stat-item {
                height: 130px;
                padding: 15px;
            }
            
            .stat-number {
                font-size: 1.5rem;
            }
            
            .stat-text {
                font-size: 0.9rem;
            }
        }

        @media (max-width: 360px) {
            .section-title {
                font-size: 20px;
            }
            
            .services-list li {
                font-size: 13px;
            }
            
            .news-title {
                font-size: 1.2rem;
            }
            
            .news-date {
                font-size: 0.9rem;
            }
            
            .news-description {
                font-size: 0.95rem;
            }
        }

        /* Animation enhancements */
        .animate__animated {
            --animate-duration: 0.8s;
        }




/* Sponsors Section Styling */
.sponsors-section {
    background-color: #ffffff;
    padding: 40px 0; /* Reduce padding for a smaller section */
    position: relative;
    text-align: center;
}

/* Full-section creative frame */
/* Removed previous full-section frame; now framing only the carousel container */

/* Carousel container framed wrapper */
.sponsors-section .sponsors-carousel {
    position: relative;
    padding: 34px 26px 38px; /* internal spacing */
    margin-top: 14px;
    /* Unified solid frame color (no gradient) */
    --frame-color: #ff7a1f;
    --frame-segment-length: 16deg; /* angular size of moving segment */
    --frame-radius: 18px;
    --frame-line: 2px; /* thickness of ring path */
    border-radius: var(--frame-radius);
    background: transparent; /* ensure original page background shows */
    overflow: hidden;
    --marquee-duration: 30s;
    --marquee-gap: 32px;
}

.sponsors-track {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--marquee-gap);
    align-items: center;
    min-width: max-content;
    animation: sponsorsMarquee var(--marquee-duration) linear infinite;
    will-change: transform;
}

.sponsors-carousel[data-marquee="true"]:hover .sponsors-track {
    animation-play-state: paused;
}



/* Additional pseudo elements using layered backgrounds for diagonals */
/* Removed background overlay to preserve original section background */

/* Two shiny vertical side lines */
.sponsors-section .sponsors-carousel {
    --side-line-color: #ff7a1f;
    --side-line-width: 4px;
    --side-glow: rgba(255,122,31,0.55);
    position: relative;
}
.sponsors-section .sponsors-carousel::before,
.sponsors-section .sponsors-carousel::after {
    content: "";
    position: absolute;
    top: 6px;
    bottom: 6px;
    width: var(--side-line-width);
    background: linear-gradient(180deg,
        transparent 0%,
        var(--side-line-color) 18%,
        var(--side-line-color) 50%,
        var(--side-line-color) 82%,
        transparent 100%);
    box-shadow: 0 0 10px var(--side-glow), 0 0 18px rgba(255,122,31,0.35);
    border-radius: 2px;
    pointer-events: none;
    opacity: 0.85;
    animation: sidePulse 3.2s ease-in-out infinite;
}
.sponsors-section .sponsors-carousel::before { left: 0; }
.sponsors-section .sponsors-carousel::after { right: 0; animation-delay: 1.6s; }

@keyframes sidePulse {
  0%,100% { filter: brightness(1) contrast(1); opacity:0.85; }
  50% { filter: brightness(1.25) contrast(1.15); opacity:1; }
}

.sponsors-section .sponsors-carousel:hover::before,
.sponsors-section .sponsors-carousel:hover::after { filter: brightness(1.35); }

/* Optional subtle inset accent lines (top and right) */
.sponsors-section .sponsors-carousel > *:first-child { position: relative; }

/* Hover intensifies only container accents */
/* Hover: pulse nodes & glow frame */
/* Removed old pseudo-element hover */

@media (max-width: 768px) {
                .sponsors-section .sponsors-carousel { padding: 26px 18px 30px; --frame-node: 10px; }
}

/* Section Title */
.sponsors-section .section-title {
    font-size: 2rem; /* Slightly smaller title */
    color: #333; /* Matching orange color */
    margin-bottom: 30px; /* Less spacing below title */
    font-weight: bold;
}

.sponsors-section .section-title::after {
    content: "";
    display: block;
    width: 50px; /* Adjust the width of the line */
    height: 4px; /* Adjust the height of the line */
    background: linear-gradient(to bottom, #ff802c, #ffc6a0);
    margin: 10px auto 0; /* Center the line and add spacing */
    border-radius: 2px; /* Optional: Rounded edges for the line */
}

/* Sponsor Carousel Styling */
.sponsors-carousel .sponsor-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px 28px; /* space for decorative accents */
    transition: transform 0.35s ease;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex: 0 0 auto;
}

/* Decorative asymmetrical gradient corner accents */

.sponsors-track picture {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo base */
.sponsors-carousel .sponsor-item img {
    max-width: 100%;
    max-height: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    filter: grayscale(18%) contrast(105%);
    transition: filter 0.45s ease, transform 0.5s ease;
    image-rendering: -webkit-optimize-contrast;
}

/* Hover / focus states */
.sponsors-carousel .sponsor-item:hover img,
.sponsors-carousel .sponsor-item:focus-within img {
    filter: grayscale(0) contrast(112%);
    transform: translateY(-4px) scale(1.035);
}

@media (prefers-reduced-motion: reduce) {
    .sponsors-carousel .sponsor-item img { transition: none !important; }
    .sponsors-section .sponsors-carousel::before,
    .sponsors-section .sponsors-carousel::after { animation: none !important; }
    .sponsors-track { animation: none !important; transform: none !important; }
}

@keyframes sponsorsMarquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Tablets */
@media (max-width: 992px) {
    .sponsors-carousel .sponsor-item img {
    max-height: 92px;
    }
}

/* Phones */
@media (max-width: 576px) {
    .sponsors-carousel .sponsor-item img {
    max-height: 80px;
    }
}

/* Footer Styles */
.footer {
    background-color: #ff6600; /* Dark background color */
    color: white; /* White text */
    padding: 30px 0;
    text-align: center; /* Center align all text */
    position: relative; /* Ensure the footer is positioned correctly */
    margin-top: auto; /* Push the footer to the bottom of the page */
}

.footer::before {
    content: "";
    position: absolute;
    top: -5.75px; /* Adjust the position to be at the top of the footer */
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(to bottom, #ff802c, #ffc6a0);
    z-index: 1;
}

.footer h4 {
    color: white; /* Orange color for titles */
    font-size: 1.5rem;
    margin-bottom: 20px;
    text-align: center; /* Ensure header titles are centered */
}

.footer p {
    font-size: 1rem;
    line-height: 1.5;
    text-align: center; /* Center paragraph text */
}

.footer .social-links {
    display: inline-flex;
    justify-content: center;
    padding: 0;
    margin: 0;
    gap: 20px; /* Equal spacing between icons */
}

.footer .social-links .social-icon {
    font-size: 1.5rem;
    margin: 0 10px; /* Equal spacing on both sides */
    color: white;
    transition: color 0.3s ease;
}

.footer .social-links .social-icon:hover {
    color: #333; /* Change color on hover */
}

/* ===============================
   About page: compact tabbed card
   =============================== */
/* Container for tab buttons */
.about-tabs {
    --tab-gap: 10px;
    --tab-pad-y: 8px;
    --tab-pad-x: 16px;
    display: inline-flex;
    gap: var(--tab-gap);
    background: #fff;
    padding: 6px;
    border-radius: 999px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    margin: 12px auto 20px;
    justify-content: center; /* center tabs as a group when space allows */
    width: fit-content;      /* shrink to content width on larger screens */
    max-width: 100%;
}

/* Individual tab buttons */
.about-tab {
    border: none;
    background: transparent;
    color: #555;
    font-weight: 700;
    padding: var(--tab-pad-y) var(--tab-pad-x);
    border-radius: 999px;
    cursor: pointer;
    font-size: clamp(0.85rem, 0.9rem + 0.3vw, 1rem);
    transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.about-tab:hover:not(.active) {
    background: #fff4ea;
}

/* Remove the default black border highlight when clicking */
.about-tab:focus {
    outline: none; /* kill default outline */
    box-shadow: none; /* in case browser applies a glow instead */
}

.about-tab:focus-visible {
    outline: 3px solid rgba(255,102,0,0.35);
    outline-offset: 2px;
}

.about-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #ff8400 0%, #ff6600 100%);
    box-shadow: 0 6px 16px rgba(255,102,0,0.35);
}

/* Content card */
.about-card {
    --card-pad-y: clamp(14px, 2vw, 28px);
    --card-pad-x: clamp(16px, 3vw, 34px);
    max-width: min(100%, 1280px);
    margin: 0 auto;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    padding: var(--card-pad-y) var(--card-pad-x);
    position: relative;
}

/* Decorative accent bar on top */
.about-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: var(--card-pad-x);
    right: var(--card-pad-x);
    height: 6px;
    /* Darker at both ends, lighter in the middle */
    background: linear-gradient(90deg,
        #ff6a00 0%,
        #ff6a00 15%,
        #ffc6a0 50%,
        #ff6a00 85%,
        #ff6a00 100%
    );
    border-radius: 999px; /* pill-shaped rounded ends */
}

/* Panels */
.about-panel {
    display: none;
    animation: aboutFadeUp 320ms ease both;
}

.about-panel.active {
    display: block;
}

@keyframes aboutFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Panel typography */
.about-panel p {
    color: #444;
    line-height: 1.7;
    font-size: clamp(0.98rem, 0.95rem + 0.25vw, 1.075rem);
    margin: 0 0 14px 0;
    text-align: justify;
}

/* Motion reduction */
@media (prefers-reduced-motion: reduce) {
    .about-panel { animation: none; }
    .about-tab { transition: none; }
}

/* Tabs responsiveness */
@media (max-width: 768px) {
    .about-tabs {
        display: flex;
        overflow-x: auto;
        padding: 6px;
        gap: 8px;
        width: 100%;              /* take full width on small screens */
        justify-content: center;   /* visually center the group */
    }
    /* symmetric gutters at both ends when scrollable */
    .about-tabs::before,
    .about-tabs::after {
        content: "";
        flex: 0 0 10px;            /* equal left/right inset */
    }
    .about-tab { white-space: nowrap; }
}

/* iPad / tablets portrait tweaks */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .about-card { max-width: 90%; }
}

/* iPad Pro 11" (834px) and 12.9" (1024/1366) fine-tuning */
@media (min-width: 820px) and (max-width: 900px) {
    .about-card { max-width: 92%; }
}
@media (min-width: 901px) and (max-width: 1100px) {
    .about-card { max-width: 940px; }
}

/* Very small phones */
@media (max-width: 360px) {
    .about-tabs { padding: 4px; gap: 6px; }
    .about-tab { padding: 6px 10px; }
}


.footer .about-section p{
    max-width: 600px;
    margin: 0 auto 20px; /* Center the about section and add spacing below */
    text-align: justify; /* Justify the text */
}
.footer .list-unstyled {
    padding-left: 0;
    list-style: none; /* Remove bullet points */
    margin: 0 auto; /* Center the list */
    text-align: justify; /* Justify the text */
    display: inline-block; /* Center the list as a block */
}

.footer .social-links {
    display: flex;
    justify-content: center; /* Center the social links */
    margin-top: 15px; /* Add some spacing above the social links */
}

.footer .list-unstyled li {
    margin-bottom: 10px;
}

.footer .list-unstyled i {
    margin-right: 10px;
}

.footer a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer a:hover {
    color: #333; /* Change color on hover */
    text-decoration: none; /* Remove underline on hover */
}

.footer .row {
    margin-bottom: -10px;
    justify-content: center; /* Ensure content in rows is centered */
}

.footer .text-center p {
    margin-top: 20px;
    font-size: 0.875rem;
    text-align: center; /* Center align copyright text */
}

.footer .container {
    max-width: 1200px;
    margin: 0 auto; /* Center container */
}

.services-header {
    background: linear-gradient(135deg, #ff8400 0%, #ff6600 100%);
    color: white;
    text-align: center;
    padding: 80px 20px;
    margin-bottom: 40px;
}

/* Footer smaller on mobile */
@media (max-width: 576px) {
    .footer {
        padding: 18px 0 16px; /* Reduce vertical padding to shrink height */
    }
    .footer h4 {
        margin-bottom: 12px;
        font-size: 1.25rem; /* Slightly smaller heading */
    }
    .footer p {
        font-size: 0.9rem; /* Slightly smaller text */
        margin-bottom: 10px;
    }
    .footer .social-links { gap: 14px; }
    .footer .text-center p { margin-top: 12px; }
}

.services-header h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

.services-header p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto;
}

/* Services Page Layout */
.services-page-layout {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 20px;
    background-color: #ffffff;
    max-width: 1360px;
    margin: 0 auto;
}

/* Left Side: Service Options */
.service-options {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-bottom: 30px;
}

.service-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-radius: 10px;
    text-decoration: none;
    color: #333;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
    max-width: 300px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.service-option.active {
    background-color: #ff6600;
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(255,102,0,0.3);
}

.service-option:hover:not(.active) {
    background-color: #ffd8be;
}

.service-option i {
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.service-option.active i {
    transform: scale(1.2);
}

.service-option span {
    font-weight: 600;
    font-size: 0.95rem;
}

/* Middle Section: Service Details */
.service-details {
    padding: 20px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    max-height: fit-content;
}

.service-detail {
    display: none;
    animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.service-detail.active {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.service-content {
    flex: 1;
}

.service-content h2 {
    font-size: 2rem;
    color: #ff6600;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.service-content h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, #ff802c, #ffc6a0);
    border-radius: 2px;
}

.service-content p {
    font-size: 1.1rem;
    color: #444;
    line-height: 1.7;
    margin-bottom: 20px;
    text-align: justify;
    -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
    overflow-wrap: break-word; word-wrap: break-word;
}

.service-content ul {
    list-style-type: none;
    padding: 0;
    margin: 25px 0;
}

.service-content ul li {
    font-size: 1.05rem;
    color: #555;
    padding: 10px 0 10px 30px;
    position: relative;
    margin-bottom: 0;
    text-align: justify;
    -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;
    overflow-wrap: break-word; word-wrap: break-word;
}

.service-content ul li::before {
    content: "•";
    color: #ff6600;
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    top: 5px;
}

.service-content ul li h6 {
    display: inline;
    font-size: 1.07rem;
    color: #333;
    margin: 0 .35em 0 0;
    background-color: #fff8f0;
    padding: 2px 8px;
    border-radius: 4px;
}

.service-image {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin-top: 20px;
}

.service-image img {
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 0.5s ease;
}

        /* Responsive Design for all devices */
        /* Small phones (320px-480px) */
        @media (max-width: 480px) {
            .services-header {
                padding: 60px 15px;
            }
            
            .services-header h1 {
                font-size: 1.8rem;
            }
            
            .services-header p {
                font-size: 1rem;
            }
            
            .service-option {
                padding: 12px 15px;
            }
            
            .service-option i {
                font-size: 1.3rem;
            }
            
            .service-option span {
                font-size: 0.85rem;
            }
            
            .service-content h2 {
                font-size: 1.6rem;
            }
            
            .service-content p, .service-content ul li {
                font-size: 0.95rem;
            }
            
            .service-content ul li h6 {
                font-size: 1rem;
            }
        }
        
        /* Larger phones (481px-600px) */
        @media (min-width: 481px) and (max-width: 600px) {
            .service-option {
                max-width: 100%;
            }
            
            .service-content h2 {
                font-size: 1.7rem;
            }
        }
        
        /* Small tablets (601px-768px) */
        @media (min-width: 601px) and (max-width: 768px) {
            .service-options {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .service-option {
                max-width: 100%;
            }
        }
        
        /* Large tablets (769px-1024px) */
        @media (min-width: 769px) and (max-width: 1024px) {
            .services-page-layout {
                flex-direction: row;
                padding: 30px;
            }
            
            .service-options {
                flex-direction: column;
                width: 250px;
                flex-shrink: 0;
                justify-content: flex-start;
            }
            
            .service-detail.active {
                flex-direction: column;
            }
            
            .service-image {
                width: 100%;
            }
        }
        
        /* Desktop (1025px+) */
        @media (min-width: 1025px) {
            .services-page-layout {
                flex-direction: row;
                padding: 40px;
            }
            
            .service-options {
                flex-direction: column;
                width: 300px;
                flex-shrink: 0;
                justify-content: flex-start;
            }
            
            .service-detail.active {
                flex-direction: row;
                gap: 40px;
            }
            
            .service-image {
                width: 450px;
                flex-shrink: 0;
                margin-top: 0;
            }
        }
        @media (min-width: 1025px) and (max-width: 1380px) {
            .service-detail.active {
                flex-direction: column;
                gap: 30px;
            }
            .service-image {
                width: 100%;
                max-width: 700px;
                margin-top: 0;
                align-self: center;
            }
        }

        /* Adjustments for landscape phones */
        @media (max-height: 480px) and (orientation: landscape) {
            .services-header {
                padding: 30px 15px;
            }
            
            .service-options {
                flex-direction: row;
                flex-wrap: nowrap;
                overflow-x: auto;
                padding-bottom: 10px;
            }
            
            .service-option {
                min-width: 200px;
            }
        }
        
        /* Adjustments for iPad Pro */
        @media (min-width: 1024px) and (max-height: 1366px) and (orientation: portrait) {
            .services-page-layout {
                flex-direction: column;
            }
            
            .service-options {
                width: 100%;
                flex-direction: row;
                flex-wrap: wrap;
            }
            
            .service-option {
                width: calc(50% - 10px);
            }
            
            .service-detail.active {
                flex-direction: column;
            }
        }
        
        /* Adjustments for very large screens */
        @media (min-width: 1600px) {
            .services-page-layout {
                max-width: 1600px;
            }
            
            .service-detail.active {
                gap: 60px;
            }
            
            .service-image {
                width: 500px;
            }
        }





/* About Page Layout */
.about-page-layout {
    display: flex;
    padding: 40px 20px;
    gap: 20px;
    background-color: #ffffff;
    min-height: calc(100vh - 200px); /* Ensure the layout takes up at least the full viewport height minus the footer height */
}


/* ==========================
     Custom override: image above
     ========================== */
/* Force column layout for service detail regardless of desktop breakpoint */
.service-detail.active { flex-direction: column !important; }

/* Put image first visually */
.service-detail.active .service-image { order: -1; width: 100%; max-width: 100%; margin: 0 0 12px 0; }

/* Maintain a consistent horizontal (landscape) aspect ratio */
.service-detail.active .service-image img { aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; }

/* Let content span full width beneath image */
.service-detail.active .service-content { width: 100%; }

/* Tighter gap now that it's vertical */
.service-detail.active { gap: 20px !important; }

@media (min-width: 1025px) {
    /* Reduce card internal max-width look by constraining inner content if desired */
    .service-detail.active .service-content { padding-right: 4px; }
}

/* Widen the about page container specifically */
.about-page-layout > .container {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* Left Side: About Options */
.about-options {
    width: 250px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.about-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 10px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.about-option.active {
    background-color: #ff6600;
    color: white;
}

.about-option:hover {
    background-color: #ff6600;
    color: white;
    transform: translateX(10px);
}

.about-option i {
    font-size: 1.5rem;
}

/* Middle Section: About Details */
.about-details {
    flex: 1;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.about-detail {
    display: none; /* Hide all about details by default */
}

.about-detail.active {
    display: flex; /* Show the active about detail */
    gap: 20px;
    align-items: flex-start; /* Align content to the top */
}

.about-content {
    flex: 1;
}

.about-content h2 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 20px;
}

.about-content p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

.about-content strong {
    color: #ff6600; /* Orange color for emphasized text */
}

.about-image {
    width: 300px; /* Fixed width for all images */
    height: 200px; /* Fixed height for all images */
    overflow: hidden;
    border-radius: 10px;
    flex-shrink: 0; /* Prevent the image from shrinking */
}

.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure the image covers the area */
}





/* About Us Page Styling */
.about-us {
    padding: 40px 20px;
    background-color: #ffffff;
}

/* Company Description */
.company-description {
    text-align: center;
    margin-bottom: 40px;
}

#about-section-title,
#why-choose-us-title,
#team-section-title {
    /* Inherit base .section-title, allow responsive adjustments if needed */
    font-size: 2.25rem; /* Align with other major section headings */
    margin-bottom: 28px;
}

.about-description {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* Why Choose Us Section */
.why-choose-us {
    text-align: center;
    margin-bottom: 40px;
}

#why-choose-us-title {
    font-size: 2rem;
    color: #333;
    margin-bottom: 20px;
}

.why-choose-us-cards {
    /* Flex layout to control per-row distribution and centering */
    --gap: 70px;
    --card-min: 260px;
    --card-max: 380px;
    --card-w: clamp(var(--card-min), 28vw, var(--card-max));
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    justify-content: center; /* center each row contents */
    align-items: stretch;
    width: 100%;
    /* Let the row use full width; remove hard cap */
    margin: 0 auto;
}

.why-choose-us-card {
    background-color: #f8f9fa;
    padding: 24px 18px;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Fixed card width within clamp to maintain visual rhythm */
    flex: 0 1 var(--card-w);
    width: min(100%, var(--card-w));
    max-width: var(--card-max);
}

.why-choose-us-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.why-choose-us-card i {
    font-size: 2rem;
    color: #ff6600;
    margin-bottom: 10px;
}

.why-choose-us-card .card-title {
    font-size: clamp(1.1rem, 1rem + 0.6vw, 1.5rem);
    color: #333;
    margin-bottom: 10px;
}

.why-choose-us-card .card-description {
    font-size: clamp(0.95rem, 0.92rem + 0.2vw, 1rem);
    color: #666;
    line-height: 1.6;
    text-align: justify;
}

/* Why Choose Us: auto-fit handles columns responsively; no extra media queries needed */

/* Team Members Section */
.team {
    text-align: center;
    margin-bottom: 40px;
}

#team-section-title {
    font-size: 2rem;
    color: #333;
    margin-bottom: 20px;
}

.team-cards {
        display: flex;
        justify-content: center;
        gap: 70px; /* Increased horizontal/vertical gap between cards */
        flex-wrap: wrap;
        margin-bottom: 40px; /* Positive spacing to align with sections below */
}

/* Ensure even spacing on narrower viewports */
@media (max-width: 768px) {
    .team-cards {
        gap: 40px; /* Slightly reduce on tablets/phones */
        margin-bottom: 30px;
    }
}

/* Team Card Styling */
.team-card {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 200px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push content to top and bottom */
    height: 300px; /* Fixed height for all cards */
}

/* Align team card width with why-choose-us card width on small devices */
@media (max-width: 600px) {
    .why-choose-us-cards { --card-min: 100%; --card-max: 100%; --card-w: 100%; }
    .why-choose-us-card { flex: 1 1 100%; max-width: 100%; }
    .team-cards { gap: 28px; }
    .team-card { width: 100%; max-width: 100%; height: auto; padding: 26px 22px; }
    .team-card .team-img { width: 120px; height: 110px; }
}

.team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.team-img {
    width: 110px;
    height: 100px;
    border-radius: 49%;
    margin-bottom: 15px;
    margin-left: auto; /* Center the image horizontally */
    margin-right: auto; /* Center the image horizontally */
}

.team-name {
    font-size: 1.25rem;
    color: #333;
    margin-bottom: 5px;
}

.team-role {
    font-size: 1rem;
    color: #666;
    margin-bottom: 15px;
}

/* Social Icons Styling */
.team-social {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: auto; /* Push social icons to the bottom of the card */
}

.team-social .social-icon {
    font-size: 1.2rem;
    color: #ff6600;
    transition: color 0.3s ease;
}

.team-social .social-icon:hover {
    color: #333;
}

/* Minor adjustment for second team card to align baseline nicely */
.team-card .team-social.adjust-bottom { margin-bottom: -10.8px; }


/* Add or enhance @media queries for 1200px, 992px, 768px, 600px, 480px, 375px for all major components: header, nav, main-layout, rectangles, cards, news, stats, sponsors, footer, etc. Ensure all elements are mobile/tablet/desktop friendly. */


/* Large desktops (1200px and up) */
@media (max-width: 1200px) {
  .main-layout {
    grid-template-columns: 200px 1fr 200px;
    gap: 12px;
    padding: 10px;
  }
  .vertical-rectangle {
    width: 200px;
    height: 600px;
    padding: 12px;
  }
  .company-name {
    margin-left: 100px;
  }
}

/* Tablets and small desktops (992px and up) */
@media (max-width: 992px) {
  .main-layout {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 8px;
  }
  .vertical-rectangle {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
  }
  .company-name {
    margin-left: 0;
    text-align: center;
  }
  .navbar {
    flex-direction: column;
    align-items: stretch;
  }
  .navbar ul {
    flex-direction: column;
    align-items: center;
  }
}

/* Tablets (768px and up) */
@media (max-width: 768px) {
  .main-layout {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 6px;
  }
  .vertical-rectangle {
    width: 100%;
    height: auto;
    margin-bottom: 16px;
  }
  .navbar {
    flex-direction: column;
    align-items: stretch;
    padding: 0 10px;
  }
  .navbar ul {
    flex-direction: column;
    align-items: center;
    padding: 0;
  }
  .navbar li {
    margin: 8px 0;
  }
  .header-contact {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .company-logo {
    width: 120px;
    margin: 0 auto 10px auto;
  }
}

/* Large phones and small tablets (600px and up) */
@media (max-width: 600px) {
  .main-layout {
    padding: 4px;
    gap: 6px;
  }
  .vertical-rectangle {
    margin-bottom: 12px;
  }
  .navbar {
    padding: 0 5px;
  }
  .navbar ul {
    padding: 0;
  }
  .company-logo {
    width: 100px;
  }
  .footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* Phones (480px and up) */
@media (max-width: 480px) {
  .main-layout {
    padding: 2px;
    gap: 4px;
  }
  .vertical-rectangle {
    margin-bottom: 8px;
  }
  .navbar {
    padding: 0 2px;
  }
  .navbar ul {
    padding: 0;
  }
  .company-logo {
    width: 80px;
  }
  .footer {
    font-size: 0.9rem;
  }
  .header-contact {
    font-size: 0.95rem;
  }
}

/* Smallest phones (375px and up) */
@media (max-width: 375px) {
  .main-layout {
    padding: 0;
    gap: 2px;
  }
  .company-logo {
    width: 60px;
  }
  .footer {
    font-size: 0.8rem;
  }
  .header-contact {
    font-size: 0.85rem;
  }
}

/* --- Responsive Utilities --- */
img,
iframe,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

.responsive-text {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
}

.hide-on-mobile {
  display: none !important;
}

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

/* ===============================
     Find Us / Location section
     =============================== */
.find-us {
    padding: clamp(30px, 6vw, 70px) 20px;
    background: #ffffff;
}

.find-us .container { max-width: 1310px; margin: 0 auto; }

.find-us-grid {
    display: grid;
    grid-template-columns: 1.1fr 1.4fr;
    gap: clamp(18px, 3.5vw, 34px);
    align-items: stretch;
}

@media (max-width: 992px) {
    .find-us-grid {
        grid-template-columns: 1fr;
    }
}

.find-us-heading {
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem);
    color: #333;
    margin-bottom: 10px;
}

.find-us-subtext {
    color: #555;
    line-height: 1.6;
    margin-bottom: 16px;
    text-align: justify;
}

.find-us-list {
    list-style: none;
    padding: 0;
    margin: 0 0 18px 0;
}

.find-us-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px dashed #eee;
    color: #444;
}

.find-us-list i { color: #ff6600; width: 20px; text-align: center; }
.find-us-list a { color: #ff6600; text-decoration: none; }
.find-us-list a:hover { text-decoration: underline; }

.find-us-cta { margin-top: 8px; }
.btn-map {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #ff8400 0%, #ff6600 100%);
    color: #fff;
    padding: 10px 16px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(255, 102, 0, 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-map:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(255,102,0,0.35); color: #fff; text-decoration: none; }

.find-us-info {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
    padding: clamp(16px, 3vw, 26px);
    position: relative;
}
.find-us-info::before {
    content: "";
    position: absolute;
    top: 0;
    left: clamp(16px, 3vw, 26px);
    right: clamp(16px, 3vw, 26px);
    height: 6px;
    background: linear-gradient(90deg, #ff6a00 0%, #ffc6a0 50%, #ff6a00 100%);
    border-radius: 999px;
}

.map-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.map-frame {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 34px rgba(0,0,0,0.12);
    height: clamp(260px, 34vw, 420px);
    background: #f3f4f6;
    transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
    transition: transform 300ms ease, box-shadow 300ms ease;
}
.map-card:hover .map-frame {
    transform: perspective(1000px) rotateX(1deg) rotateY(-1deg) translateY(-2px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.14);
}

.map-embed {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    filter: saturate(1.05) contrast(1.02);
}

.map-overlay {
    pointer-events: none; /* ensure the link remains clickable */
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-rows: 1fr auto;
}

.overlay-gradient {
    align-self: end;
    height: 38%;
    background: linear-gradient(to top, rgba(0,0,0,0.35), rgba(0,0,0,0));
}

.overlay-badge {
    position: absolute;
    right: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 0.9rem;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.overlay-badge i { color: #fff; }

.pin {
    position: absolute;
    left: 22px;
    top: 22px;
    transform-origin: bottom center;
    animation: pinBounce 2.8s ease-in-out infinite;
}
.pin-head {
    width: 16px;
    height: 16px;
    background: #ff6600;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 0 0 4px rgba(255,102,0,0.25);
}
.pin-shadow {
    width: 22px;
    height: 6px;
    background: rgba(0,0,0,0.2);
    border-radius: 50%;
    transform: translate(0, 12px);
    filter: blur(1px);
}

@keyframes pinBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.02); }
}