/* TCCI Theme Colors */
        :root {
            --pak-green: #0a6b33;
            --gold: #c29d5b;
            --light-bg: #f4f7f6;
            --dark-text: #333333;
            --white: #ffffff;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        body { background-color: var(--light-bg); color: var(--dark-text); line-height: 1.6; }

        /* Top Bar & Header */
        .top-bar { background-color: var(--pak-green); color: var(--white); padding: 8px 5%; display: flex; justify-content: space-between; font-size: 14px; }
        .top-bar i { color: var(--gold); margin-right: 5px; }
        .header { display: flex; align-items: center; justify-content: space-between; padding: 15px 5%; background-color: var(--white); border-bottom: 3px solid var(--gold); }
        .logo-container { display: flex; align-items: center; gap: 15px; }
        .logo-container img { width: 100px; height: auto; }
        .logo-text h1 { color: var(--pak-green); font-size: 24px; text-transform: uppercase; }
        .logo-text h2 { color: var(--gold); font-size: 16px; font-weight: normal; }

        /* Navbar */
        .navbar { background-color: var(--pak-green); padding: 0 5%; position: relative; z-index: 100; display: flex; }
        .navbar ul { list-style: none; display: flex; margin: 0; padding: 0; flex-wrap: wrap; }
        .navbar ul li { position: relative; }
        .navbar ul li a { display: block; padding: 15px 20px; color: var(--white); text-decoration: none; font-weight: bold; transition: 0.3s; cursor: pointer; text-transform: uppercase; font-size: 14px; }
        .navbar ul li a:hover { background-color: var(--gold); color: var(--dark-text); }
        
        .dropdown-content { display: none; position: absolute; background-color: var(--white); min-width: 280px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); top: 100%; left: 0; border-top: 3px solid var(--gold); }
        .dropdown-content a { color: var(--pak-green) !important; padding: 12px 20px !important; text-decoration: none; display: block !important; border-bottom: 1px solid #eee; text-transform: none !important; }
        .dropdown-content a span.main { display: block; font-weight: bold; font-size: 15px; margin-bottom: 3px; }
        .dropdown-content a span.sub { display: block; font-size: 12px; color: #666; font-weight: normal; }
        .dropdown-content a:hover { background-color: var(--light-bg) !important; padding-left: 25px !important; }
        .dropdown-content a:hover span.main { color: var(--gold); }
        .navbar ul li:hover .dropdown-content { display: block; }

        .btn-member { display: inline-block; background-color: var(--gold); color: white; padding: 10px 20px; text-decoration: none; font-weight: bold; border-radius: 4px; border: none; cursor: pointer; transition: 0.3s; }
        .btn-member:hover { background-color: var(--pak-green); }

        /* Sections */
        .page-section { display: block; animation: fadeIn 0.5s; }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

        /* Hero */
        .hero { background: linear-gradient(rgba(10, 107, 51, 0.8), rgba(194, 157, 91, 0.7)), url('../img/hero-business-meeting.jpg') center/cover; color: var(--white); text-align: center; padding: 100px 20px; }
        .hero h2 { font-size: 45px; margin-bottom: 15px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
        .page-header { background-color: var(--pak-green); color: var(--white); text-align: center; padding: 50px 20px; border-bottom: 5px solid var(--gold); }
        .page-header h1 { font-size: 36px; }
        
        .container { padding: 50px 5%; max-width: 1200px; margin: auto; }
        .content-box { background: var(--white); padding: 30px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); border-top: 4px solid var(--pak-green); margin-bottom: 30px; }
        .content-box h2 { color: var(--pak-green); margin-bottom: 15px; border-bottom: 2px solid var(--gold); padding-bottom: 10px; font-size: 28px; }
        .content-box p, .content-box ul { margin-bottom: 15px; font-size: 16px; color: #444; }
        .content-box ul { margin-left: 20px; }
        .content-box li { margin-bottom: 10px; }
        
        /* Grids & Cards */
        .grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 20px; }
        .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 20px; }
        .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 40px; align-items: center; }
        
        .service-card { background: var(--white); padding: 30px 20px; border-top: 5px solid var(--pak-green); box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: 0.3s; text-align: center; }
        .service-card:hover { transform: translateY(-5px); border-top-color: var(--gold); }
        .service-card i { font-size: 40px; color: var(--gold); margin-bottom: 15px; }
        .service-card h3 { color: var(--pak-green); margin-bottom: 10px; }

        /* Tables */
        .custom-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        .custom-table th, .custom-table td { border: 1px solid #ddd; padding: 12px; text-align: left; }
        .custom-table th { background-color: var(--pak-green); color: white; }
        .custom-table tr:nth-child(even){background-color: #f9f9f9;}
        .custom-table tr:hover {background-color: #f1f8f4;}

        /* Team Section */
        .team-card { background: var(--white); border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.05); text-align: center; padding: 30px 20px; border: 1px solid #eaeaea; }
        .team-img-wrap { width: 150px; height: 150px; margin: 0 auto 20px; border-radius: 20px; border: 4px solid var(--pak-green); overflow: hidden; }
        .team-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
        .team-card h3 { color: var(--dark-text); font-size: 20px; margin-bottom: 5px; }
        .team-card p { color: var(--pak-green); font-weight: bold; font-size: 14px; }

        /* Departments */
        .dept-card { background: var(--white); padding: 40px 20px; text-align: center; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: 0.3s; }
        .dept-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
        .dept-card i { font-size: 45px; color: var(--pak-green); margin-bottom: 20px; }
        .dept-card h3 { color: var(--dark-text); margin-bottom: 15px; font-size: 18px; }
        .dept-card p { font-size: 14px; color: #666; }

        /* Support List */
        .support-list { list-style: none; margin-top: 20px; }
        .support-list li { display: flex; align-items: flex-start; margin-bottom: 20px; }
        .support-list i { color: var(--pak-green); font-size: 24px; margin-right: 15px; margin-top: 3px; }
        .support-list p { font-size: 16px; color: #444; margin: 0; }

        /* FAQs */
        .faq-section { background-color: var(--pak-green); color: white; padding: 60px 5%; margin-top: 40px; }
        .faq-container { max-width: 1000px; margin: auto; }
        .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
        details { background: rgba(255,255,255,0.1); border-radius: 5px; margin-bottom: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,0.2); }
        summary { padding: 15px 20px; font-weight: bold; cursor: pointer; display: flex; justify-content: space-between; align-items: center; list-style: none; color: var(--white); }
        summary::-webkit-details-marker { display: none; }
        summary:after { content: '\002B'; font-size: 20px; color: var(--gold); }
        details[open] summary:after { content: '\2212'; }
        details[open] summary { background: var(--white); color: var(--pak-green); }
        .faq-content { padding: 15px 20px; background: var(--white); color: var(--dark-text); font-size: 14px; border-top: 1px solid #eee; }

        /* Forms & Search */
        .search-bar { display: flex; margin-bottom: 30px; }
        .search-bar input { flex: 1; padding: 15px; border: 1px solid #ccc; border-radius: 4px 0 0 4px; font-size: 16px; }
        .search-bar button { padding: 15px 30px; background: var(--pak-green); color: white; border: none; border-radius: 0 4px 4px 0; cursor: pointer; font-weight: bold; }
        .search-bar button:hover { background: var(--gold); }

        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; font-weight: bold; color: var(--pak-green); }
        .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 4px; }
        .btn { background: var(--pak-green); color: white; padding: 12px 25px; border: none; cursor: pointer; font-size: 16px; font-weight: bold; width: 100%; }
        .btn:hover { background: var(--gold); color: var(--dark-text); }
        .btn-download { background: var(--gold); color: white; padding: 10px 15px; text-decoration: none; border-radius: 4px; display: inline-block; font-size: 14px; }
        .btn-download:hover { background: var(--pak-green); }

        /* Footer */
        .footer { background-color: #222; color: var(--white); padding: 50px 5% 20px; }
        .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
        .footer-col h3 { color: var(--gold); margin-bottom: 20px; border-bottom: 2px solid var(--pak-green); display: inline-block; padding-bottom: 5px; font-size: 18px; text-transform: uppercase; }
        .footer-col p { font-size: 14px; margin-bottom: 15px; color: #ccc; }
        .footer-col ul { list-style: none; margin: 0; padding: 0; }
        .footer-col ul li { margin-bottom: 10px; }
        .footer-col ul li a { color: #ccc; text-decoration: none; cursor: pointer; transition: 0.3s; font-size: 14px; }
        .footer-col ul li a:hover { color: var(--gold); padding-left: 5px; }
        .footer-bottom { text-align: center; padding-top: 20px; border-top: 1px solid #444; width: 100%; margin-top: 40px; font-size: 13px; color: #aaa; display: flex; justify-content: space-between; flex-wrap: wrap; }
    
        .navbar ul li a.active { background-color: var(--gold); color: var(--dark-text); }

/* ============================================================
   RESPONSIVE
   Everything above is untouched. Colours, fonts, spacing and the
   desktop layout stay exactly as they were - these rules only take
   effect on narrower screens.
   ============================================================ */

        img { max-width: 100%; }
        /* stops iOS inflating text when a phone is turned sideways */
        body { -webkit-text-size-adjust: 100%; }

        /* headings shrink on small screens, identical at desktop width */
        .hero h2 { font-size: clamp(28px, 5.5vw, 45px); }
        .page-header h1 { font-size: clamp(24px, 4.5vw, 36px); }

        /* a grid track must never be wider than the screen itself */
        .grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
        .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
        .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); }

/* ============================================================
   BOOTSTRAP COMPATIBILITY
   Bootstrap 5 supplies the responsive behaviour (navbar collapse,
   dropdowns, grid, table scrolling). These rules undo the parts of
   Bootstrap's Reboot that would otherwise alter this design, so the
   site looks exactly as it did before Bootstrap was added.
   ============================================================ */

        /* Reboot adds margins/padding/weight/line-height to text elements - the original design has none */
        h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, table { margin: 0; padding: 0; }
        h1, h2, h3, h4, h5, h6 { font-weight: bold; line-height: inherit; }
        /* browser-default heading sizes, for headings the design never sized itself */
        h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.17em; }
        h4 { font-size: 1em; } h5 { font-size: 0.83em; } h6 { font-size: 0.67em; }
        /* Reboot makes form controls inherit body font metrics - the design used the browser default */
        button, input, select, textarea { font-size: 13.3333px; line-height: normal; }
        /* Reboot sets img{vertical-align:middle}, which shortens every line box holding an image */
        img, svg { vertical-align: baseline; }
        /* Bootstrap's own .btn class would round the corners and change the height */
        .btn { line-height: normal; border-radius: 0; }
        .content-box ul { margin-bottom: 15px; margin-left: 20px; }
        .content-box p { margin-bottom: 15px; }
        .support-list p, .footer-col ul, .navbar ul { margin: 0; }
        .content-box h2 { margin-bottom: 15px; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; }
        label { display: block; margin-bottom: 5px; }

        /* Bootstrap's navbar/nav-link defaults must not touch the original bar */
        .navbar { padding: 0 5%; }
        .navbar-nav { flex-direction: row; flex-wrap: wrap; }
        .navbar .navbar-nav .nav-link { color: var(--white); font-weight: bold; text-transform: uppercase; font-size: 14px; padding: 15px 20px; transition: 0.3s; }
        .navbar .navbar-nav .nav-link:hover { background-color: var(--gold); color: var(--dark-text); }
        .navbar .navbar-nav .nav-link.active, .navbar .navbar-nav .nav-link.show { background-color: var(--gold); color: var(--dark-text); }
        .navbar .dropdown-toggle::after { display: none; }   /* keep the Font Awesome caret, not Bootstrap's */

        /* dropdown panel keeps its original square, borderless, gold-topped look */
        .dropdown-menu.dropdown-content { padding: 0; margin: 0; border: none; border-top: 3px solid var(--gold); border-radius: 0; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); background-color: var(--white); min-width: 280px; }
        .navbar ul li:hover > .dropdown-content { display: block; }   /* open on hover, as before */

        /* the collapsed "Menu" button, styled like the rest of the bar */
        .navbar-toggler { display: none; align-items: center; gap: 10px; padding: 14px 5%; color: var(--white); font-weight: bold; text-transform: uppercase; font-size: 14px; line-height: 1.6; text-align: start; border: none; border-radius: 0; background: none; box-shadow: none; }
        .navbar-toggler:focus { box-shadow: none; }
        .navbar-toggler i { color: var(--gold); font-size: 18px; }

        /* ---------- collapsed navbar (Bootstrap's lg breakpoint) ---------- */
        @media (max-width: 991.98px) {
            .navbar { flex-direction: column; padding: 0; align-items: stretch; }
            .navbar-toggler { display: flex; }
            .navbar-collapse { width: 100%; }
            /* NOTE: must out-rank ".navbar ul { flex-wrap: wrap }" above, or the menu
               wraps into extra columns off the side of the screen and the links vanish. */
            .navbar ul.navbar-nav { flex-direction: column; flex-wrap: nowrap; width: 100%; border-top: 1px solid rgba(255,255,255,0.15); }
            .navbar ul li { width: 100%; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
            .navbar .navbar-nav .nav-link { padding: 15px 5%; }
            /* Touch screens fire :hover on tap, so the desktop hover rule must be switched
               off here - but never for a menu Bootstrap has actually opened (.show). */
            .navbar ul li:hover > .dropdown-content:not(.show) { display: none; }
            .dropdown-menu.dropdown-content { position: static; width: 100%; min-width: 0; box-shadow: none; border-top: none; }
            .dropdown-content a { padding: 12px 8% !important; }
            .navbar .nav-link i.fa-caret-down { transition: transform 0.3s; }
            .navbar .nav-link.show i.fa-caret-down { transform: rotate(180deg); }
        }

        /* ---------- tablet ---------- */
        @media (max-width: 992px) {
            .faq-grid { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr 1fr; }
            .logo-text h1 { font-size: 20px; }
            .logo-text h2 { font-size: 14px; }
            .logo-container img { width: 80px; }
        }

        /* ---------- mobile ---------- */
        @media (max-width: 768px) {
            .top-bar { flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 12px; padding: 10px 4%; }
            .header { flex-direction: column; text-align: center; gap: 18px; padding: 18px 4%; }
            .logo-container { flex-direction: column; gap: 10px; }
            .logo-container img { width: 75px; }
            .logo-text h1 { font-size: 17px; line-height: 1.3; }
            .logo-text h2 { font-size: 13px; }
            .btn-member { display: block; width: 100%; max-width: 320px; margin: 0 auto; }

            /* content breathing room */
            .container { padding: 35px 5%; }
            .content-box { padding: 22px 18px; }
            .content-box h2 { font-size: 22px; }
            .content-box p, .content-box ul { font-size: 15px; }
            .grid-2 { gap: 25px; }
            .faq-section { padding: 45px 5%; }

            /* tables wrap to fit the screen, and still scroll inside their own box if a row is too wide */
            .custom-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
            .custom-table th, .custom-table td { padding: 10px 8px; font-size: 13px; }
            .btn-download { padding: 8px 10px; font-size: 12px; white-space: nowrap; }

            /* 16px stops iOS Safari zooming the page in when a field is tapped */
            .form-group input, .form-group textarea, .form-group select { font-size: 16px; }

            .search-bar { flex-direction: column; gap: 10px; }
            .search-bar input { border-radius: 4px; }
            .search-bar button { border-radius: 4px; }

            .footer { padding: 40px 5% 20px; }
            .footer-grid { grid-template-columns: 1fr; gap: 28px; }
            .footer-bottom { flex-direction: column; gap: 10px; text-align: center; margin-top: 30px; }
        }

        /* ---------- tables become stacked cards once columns can no longer fit ----------
           Each cell prints its column heading (from data-label) beside the value,
           so nothing is cut off and there is no sideways scrolling. */
        @media (max-width: 600px) {
            .custom-table, .custom-table tbody, .custom-table tr, .custom-table td { display: block; width: 100%; }
            .custom-table { overflow: visible; border-collapse: separate; }
            .custom-table tr:first-child { display: none; }                       /* heading row - repeated per cell instead */
            .custom-table tr { margin-bottom: 15px; background: var(--white); border: 1px solid #ddd; border-top: 3px solid var(--pak-green); }
            .custom-table tr:nth-child(even) { background-color: var(--white); }
            .custom-table tr:hover { background-color: var(--white); }
            .custom-table td { display: flex; justify-content: space-between; align-items: center; gap: 15px; text-align: right; border: none; border-bottom: 1px solid #eee; padding: 11px 14px; font-size: 14px; }
            .custom-table td:last-child { border-bottom: none; }
            .custom-table td:before { content: attr(data-label); flex: 0 0 38%; text-align: left; font-weight: bold; color: var(--pak-green); }
        }

        /* ---------- small phones ---------- */
        @media (max-width: 480px) {
            .hero { padding: 60px 15px; }
            .page-header { padding: 35px 15px; }
            .container { padding: 30px 4%; }
            .team-img-wrap { width: 120px; height: 120px; }
            .service-card, .dept-card { padding: 25px 15px; }
            .support-list i { font-size: 20px; margin-right: 12px; }
            .form-group input, .form-group textarea, .form-group select { padding: 11px; }
        }

/* ============================================================
   MEMBERSHIP FEE DETAILS (home page)
   New classes only - nothing above is touched. Uses the existing
   TCCI green/gold palette and the same card language as the site.
   ============================================================ */

        .fee-section { background-color: var(--pak-green); color: var(--white); padding: 60px 5%; border-top: 10px solid var(--gold); }
        .fee-container { max-width: 1000px; margin: auto; }
        .fee-head { text-align: center; margin-bottom: 40px; }
        .fee-head h2 { font-size: clamp(23px, 4.2vw, 32px); margin-bottom: 10px; }
        .fee-head p { font-size: 15px; color: #dbe9e1; max-width: 680px; margin: 0 auto; }

        .fee-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: 25px; }
        .fee-card { background: var(--white); border-radius: 8px; padding: 28px 24px; border-top: 4px solid var(--gold); box-shadow: 0 6px 18px rgba(0,0,0,0.15); }
        .fee-card > i { display: block; font-size: 28px; color: var(--gold); margin-bottom: 14px; }
        .fee-card h3 { color: var(--pak-green); font-size: 21px; margin-bottom: 4px; }
        .fee-card .fee-sub { font-size: 13px; color: #777; margin-bottom: 18px; }

        .fee-list { list-style: none; margin: 0; padding: 0; }
        .fee-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; padding: 11px 0; border-bottom: 1px dashed #e5e5e5; font-size: 15px; color: #444; }
        .fee-list li span { text-align: left; }
        .fee-list li b { color: var(--pak-green); white-space: nowrap; font-size: 16px; }

        .fee-total { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 18px; padding: 12px 15px; background: var(--light-bg); border-left: 4px solid var(--pak-green); font-weight: bold; color: var(--dark-text); }
        .fee-total b { color: var(--pak-green); font-size: 19px; white-space: nowrap; }
        .fee-urgent { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-top: 10px; padding: 12px 15px; background: #fcf9f2; border-left: 4px solid var(--gold); font-weight: bold; color: var(--dark-text); }
        .fee-urgent b { color: var(--gold); font-size: 19px; white-space: nowrap; }

        .fee-card .btn-download { margin-top: 20px; }
        .fee-note { margin-top: 30px; text-align: center; font-size: 14px; color: #dbe9e1; }
        .fee-note i { color: var(--gold); margin-right: 6px; }

        @media (max-width: 480px) {
            .fee-section { padding: 45px 5%; }
            .fee-card { padding: 22px 18px; }
            .fee-list li { font-size: 14px; }
        }

/* ============================================================
   APPLICATION PROCESS timeline (home page)
   New classes only - nothing above is touched.
   ============================================================ */

        .process-section { background-color: var(--light-bg); padding: 70px 5%; }
        .process-container { max-width: 1000px; margin: auto; }
        .process-head { text-align: center; margin-bottom: 45px; }
        .process-head h2 { font-size: clamp(26px, 4.5vw, 38px); color: var(--dark-text); margin-bottom: 12px; }
        .process-head p { font-size: 15px; color: #555; max-width: 730px; margin: 0 auto; }

        .timeline { position: relative; }
        .timeline:before { content: ''; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 4px; margin-left: -2px;
            background: linear-gradient(to bottom, var(--pak-green) 0%, var(--pak-green) 42%, #cfd6d2 42%, #cfd6d2 100%); border-radius: 2px; }

        .tl-item { position: relative; width: 50%; padding: 0 45px 45px; }
        .tl-item.tl-right { margin-left: 50%; text-align: left; }
        .tl-item.tl-left { margin-left: 0; text-align: right; }
        .tl-item:last-child { padding-bottom: 0; }

        .tl-dot { position: absolute; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--white); border: 4px solid #cfd6d2; }
        .tl-item.tl-left .tl-dot { right: -8px; }
        .tl-item.tl-right .tl-dot { left: -8px; }
        .tl-item.is-done .tl-dot { border-color: var(--pak-green); }

        .tl-content h3 { color: var(--pak-green); font-size: 19px; margin-bottom: 6px; }
        .tl-content p { font-size: 14px; color: #555; }

        .process-cta { text-align: center; margin-top: 45px; }
        .btn-process { display: inline-block; background-color: var(--pak-green); color: var(--white); padding: 12px 30px; border-radius: 4px;
            text-decoration: none; font-weight: bold; transition: 0.3s; }
        .btn-process:hover { background-color: var(--gold); color: var(--dark-text); }

        /* single column on phones - line moves to the left edge */
        @media (max-width: 768px) {
            .process-section { padding: 50px 5%; }
            .timeline:before { left: 8px; margin-left: 0; }
            .tl-item, .tl-item.tl-right, .tl-item.tl-left { width: 100%; margin-left: 0; text-align: left; padding: 0 0 35px 40px; }
            .tl-item.tl-left .tl-dot, .tl-item.tl-right .tl-dot { left: 2px; right: auto; }
            .process-head { margin-bottom: 35px; }
        }

/* ============================================================
   OFFICE BEARERS (home page)
   New classes only - nothing above is touched.
   ============================================================ */

        .bearer-section { background-color: var(--pak-green); color: var(--white); padding: 60px 5%; border-top: 10px solid var(--gold); }
        .bearer-container { max-width: 1150px; margin: auto; }
        .bearer-head { text-align: center; margin-bottom: 45px; }
        .bearer-head h2 { font-size: clamp(26px, 4.5vw, 38px); margin-bottom: 12px; }
        .bearer-head p { font-size: 15px; color: #dbe9e1; max-width: 760px; margin: 0 auto; }

        .bearer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 28px; }
        .bearer-card { background: var(--white); border-radius: 10px; padding: 32px 22px; text-align: center; box-shadow: 0 6px 18px rgba(0,0,0,0.15); }
        .bearer-photo { width: 150px; height: 185px; margin: 0 auto 20px; border-radius: 6px; overflow: hidden; background: var(--light-bg); }
        .bearer-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .bearer-card h3 { color: var(--pak-green); font-size: 21px; margin-bottom: 6px; }
        .bearer-role { font-size: 15px; color: #555; margin-bottom: 10px; }
        .bearer-org { font-size: 15px; font-weight: bold; color: var(--dark-text); }

        @media (max-width: 480px) {
            .bearer-section { padding: 45px 5%; }
            .bearer-card { padding: 26px 18px; }
        }

/* ============================================================
   GET IN TOUCH (home page, last section)
   New classes only - nothing above is touched.
   ============================================================ */

        .contact-section { background-color: var(--light-bg); padding: 70px 5%; }
        .contact-container { max-width: 1150px; margin: auto; }
        .contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 40px; align-items: start; }

        .contact-head h2 { font-size: clamp(26px, 4.5vw, 38px); color: var(--dark-text); margin-bottom: 8px; }
        .contact-head p { font-size: 15px; color: #555; margin-bottom: 28px; }

        .ct-tile { display: flex; align-items: center; gap: 18px; background: #ececec; border-radius: 10px; padding: 18px 20px; margin-bottom: 16px; }
        .ct-icon { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 10px; background: var(--pak-green); color: var(--white);
            display: flex; align-items: center; justify-content: center; font-size: 18px; }
        .ct-label { display: block; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #777; margin-bottom: 3px; }
        .ct-value { font-size: 17px; font-weight: bold; color: var(--dark-text); line-height: 1.45; }
        .ct-value a { color: var(--dark-text); text-decoration: none; }
        .ct-value a:hover { color: var(--pak-green); }

        .contact-photo { border-radius: 10px; overflow: hidden; margin-bottom: 22px; }
        .contact-photo img { width: 100%; height: 230px; object-fit: cover; display: block; }

        .map-card { background: #ececec; border-radius: 10px; padding: 30px 25px; text-align: center; }
        .map-card .ct-icon { margin: 0 auto 18px; }
        .map-card h3 { font-size: 21px; color: var(--dark-text); margin-bottom: 6px; }
        .map-card p { font-size: 14px; color: #777; margin-bottom: 20px; }
        .btn-map { display: inline-block; background-color: var(--gold); color: var(--white); padding: 12px 26px; border-radius: 6px;
            text-decoration: none; font-weight: bold; transition: 0.3s; }
        .btn-map:hover { background-color: var(--pak-green); }

        @media (max-width: 480px) {
            .contact-section { padding: 50px 5%; }
            .ct-tile { padding: 15px 16px; gap: 14px; }
            .ct-value { font-size: 15px; }
        }