/* =========================================================
           PAGE HEADER
        ========================================================== */

        .page-header-section{
            position:relative;
            overflow:hidden;

            padding:80px 0 50px;
        }

        .page-header-card{
            position:relative;
            overflow:hidden;

            padding:75px 55px;

            border-radius:34px;

            background:
            linear-gradient(
                135deg,
                rgba(30,41,59,0.98) 0%,
                rgba(49,46,129,0.96) 25%,
                rgba(79,70,229,0.94) 65%,
                rgba(6,182,212,0.88) 100%
            );

            box-shadow:
            0 30px 70px rgba(79,70,229,0.25);

            animation:
            floatHeader 6s ease-in-out infinite;

            isolation:isolate;
        }

        .page-header-card::before{
            content:"";

            position:absolute;

            width:460px;
            height:460px;

            top:-180px;
            right:-150px;

            border-radius:50%;

            background:
            rgba(255,255,255,0.07);

            z-index:0;
        }

        .page-header-card::after{
            content:"";

            position:absolute;

            width:300px;
            height:300px;

            bottom:-120px;
            left:-100px;

            border-radius:50%;

            background:
            rgba(255,255,255,0.05);

            z-index:0;
        }

        .page-header-content{
            position:relative;
            z-index:2;

            text-align:center;

            color:#ffffff;

            animation:
            fadeSlideUp 0.8s ease both;
        }

        /* =========================================================
           SMALL HEADER LOGO
        ========================================================== */

        .tgmf-logo{
            width:38px;
            height:38px;

            object-fit:cover;

            border-radius:50%;

            background:#ffffff;

            padding:2px;

            border:
            2px solid rgba(255,255,255,0.55);

            box-shadow:
            0 5px 15px rgba(0,0,0,0.18);

            transition:
            transform 0.35s ease;
        }

        .page-badge:hover .tgmf-logo{
            transform:scale(1.08);
        }


        /* =========================================================
           HEADER TITLE
        ========================================================== */

        .page-header-content h1{
            font-size:60px;
            font-weight:900;

            line-height:1.1;

            letter-spacing:-1px;

            margin-bottom:20px;
        }

        .page-header-content p{
            max-width:760px;

            margin:0 auto 40px;

            font-size:17px;
            line-height:1.9;

            color:rgba(255,255,255,0.92);
        }

        /* =========================================================
           HEADER LOGO SHOWCASE
        ========================================================== */
        
        .header-logos-wrapper{
            display:grid;
        
            grid-template-columns:
            repeat(2, minmax(0, 1fr));
        
            gap:28px;
        
            margin-top:25px;
        }
        
        
        /* =========================================================
           LOGO CARD
        ========================================================== */
        
        .header-logo-card{
            position:relative;
        
            display:flex;
            flex-direction:column;
        
            align-items:center;
            justify-content:center;
        
            text-align:center;
        
            padding:32px 28px;
        
            width:100%;
        
            border-radius:28px;
        
            background:
            rgba(255,255,255,0.12);
        
            backdrop-filter:blur(14px);
        
            border:
            1px solid rgba(255,255,255,0.18);
        
            box-shadow:
            0 14px 35px rgba(0,0,0,0.14);
        
            transition:
            transform 0.35s ease,
            background 0.35s ease,
            box-shadow 0.35s ease;
        }
        
        .header-logo-card:hover{
            transform:
            translateY(-5px)
            scale(1.02);
        
            background:
            rgba(255,255,255,0.16);
        
            box-shadow:
            0 22px 55px rgba(0,0,0,0.18);
        }

        /* =========================================================
           LOGO IMAGE
        ========================================================== */
        
        .header-logo-image{
            width:95px;
            height:95px;
        
            object-fit:cover;
        
            border-radius:24px;
        
            background:#ffffff;
        
            padding:8px;
        
            margin-bottom:22px;
        
            border:
            1px solid rgba(255,255,255,0.55);
        
            box-shadow:
            0 10px 25px rgba(0,0,0,0.18);
        }
        
        
        /* =========================================================
           LOGO CONTENT
        ========================================================== */
        
        .header-logo-content{
            text-align:center;
        }
        
        .header-logo-badge{
            display:inline-flex;
        
            padding:6px 14px;
        
            margin-bottom:14px;
        
            border-radius:50px;
        
            background:
            rgba(255,255,255,0.18);
        
            color:#ffffff;
        
            font-size:11px;
            font-weight:700;
        
            letter-spacing:0.5px;
        
            text-transform:uppercase;
        }
        
        .header-logo-content h5{
            font-size:20px;
            font-weight:800;
        
            line-height:1.5;
        
            margin-bottom:12px;
        
            color:#ffffff;
        }
        
        .header-logo-content p{
            margin:0;
        
            font-size:14px;
            line-height:1.8;
        
            color:rgba(255,255,255,0.88);
        }


        /* =========================================================
           ABOUT SECTION
        ========================================================== */

        .about-tgmf-section{
            position:relative;
            overflow:hidden;

            padding-bottom:80px;
        }

        .about-main-card,
        .content-card{
            background:#ffffff;

            border-radius:28px;

            padding:40px;

            border:
            1px solid rgba(226,232,240,0.7);

            box-shadow:
            0 15px 40px rgba(15,23,42,0.08);

            transition:
            transform 0.35s ease,
            box-shadow 0.35s ease;
        }

        .about-main-card:hover,
        .content-card:hover{
            transform:translateY(-6px);

            box-shadow:
            0 25px 60px rgba(79,70,229,0.14);
        }
        
        /* =========================================================
           INTRO LOGO WRAPPER
        ========================================================== */
        
        .intro-logo-wrapper{
            display:inline-flex;
        
            align-items:center;
            justify-content:center;
        
            padding:10px;
        
            border-radius:20px;
        
            background:
            rgba(79,70,229,0.08);
        
            border:
            1px solid rgba(99,102,241,0.12);
        
            box-shadow:
            0 8px 22px rgba(79,70,229,0.10);
        
            line-height:0;
        }
        
        
        /* =========================================================
           INTRO LOGO
        ========================================================== */
        
        .intro-logo{
            width:72px;
            height:72px;
        
            object-fit:contain;
        
            display:block;
        
            border-radius:16px;
        
            background:#ffffff;
        
            padding:6px;
        
            box-shadow:
            0 6px 16px rgba(0,0,0,0.08);
        }
        
        .section-badge{
            display:inline-flex;
            align-items:center;
            gap:8px;

            padding:10px 18px;

            margin-bottom:20px;

            border-radius:50px;

            background:
            rgba(79,70,229,0.10);

            color:#4338ca;

            font-size:14px;
            font-weight:700;
        }

        .about-main-card h2{
            font-size:38px;
            font-weight:900;

            color:#0f172a;

            margin-bottom:20px;
        }

        .content-card h3{
            display:flex;
            align-items:center;
            gap:12px;

            font-size:28px;
            font-weight:800;

            color:#0f172a;

            margin-bottom:24px;
        }

        .content-card p,
        .about-main-card p{
            color:#475569;

            line-height:1.9;

            margin-bottom:18px;
        }

        .custom-list{
            padding-left:20px;
        }

        .custom-list li{
            color:#475569;
            margin-bottom:12px;
        }

        .highlight-box{
            padding:18px 22px;

            margin:20px 0;

            border-radius:18px;

            background:
            rgba(99,102,241,0.08);

            color:#312e81;

            font-weight:700;
        }

        .highlight-box.gradient{
            background:
            linear-gradient(
                135deg,
                #4338ca,
                #06b6d4
            );

            color:#ffffff;
        }

        .feature-grid,
        .objectives-grid{
            display:grid;

            grid-template-columns:
            repeat(auto-fit,minmax(220px,1fr));

            gap:18px;

            margin-top:25px;
        }

        .feature-item,
        .objective-box{
            padding:22px;

            border-radius:20px;

            background:#f8fafc;

            border:
            1px solid rgba(226,232,240,0.9);

            transition:
            all 0.3s ease;
        }

        .feature-item:hover,
        .objective-box:hover{
            transform:translateY(-4px);

            background:
            linear-gradient(
                135deg,
                rgba(79,70,229,0.08),
                rgba(6,182,212,0.08)
            );
        }

        .feature-item{
            display:flex;
            align-items:center;
            gap:14px;

            font-weight:600;
        }

        .feature-item i{
            font-size:24px;
            color:#4338ca;
        }
        

        /* =========================================================
           IMAGE PLACEHOLDERS
        ========================================================== */

        .image-placeholder{
            position:relative;
            overflow:hidden;

            width:100%;
            height:320px;

            border-radius:24px;

            margin-top:25px;

            background:
            linear-gradient(
                135deg,
                #312e81,
                #4f46e5,
                #06b6d4
            );

            display:flex;
            align-items:center;
            justify-content:center;
            flex-direction:column;

            text-align:center;

            color:#ffffff;

            box-shadow:
            0 20px 45px rgba(79,70,229,0.22);
        }

        .image-placeholder::before{
            content:"";

            position:absolute;

            inset:0;

            background:
            radial-gradient(
                rgba(255,255,255,0.16),
                transparent 70%
            );
        }

        .image-placeholder i{
            position:relative;
            z-index:2;

            font-size:60px;

            margin-bottom:16px;
        }

        .image-placeholder h5{
            position:relative;
            z-index:2;

            font-size:24px;
            font-weight:700;

            margin-bottom:10px;
        }

        .image-placeholder p{
            position:relative;
            z-index:2;

            max-width:280px;

            margin:0;

            color:rgba(255,255,255,0.92);
        }


        /* =========================================================
           RESPONSIVE
        ========================================================== */

        @media(max-width:768px){

            .page-header-content h1{
                font-size:40px;
            }
            
            .header-logos-wrapper{
                grid-template-columns:1fr;
            }
        
            .header-logo-card{
                flex-direction:column;
                text-align:center;
            }
        
            .header-logo-content{
                text-align:center;
            }

            .about-main-card,
            .content-card{
                padding:28px;
            }

            .about-main-card h2{
                font-size:30px;
            }

            .content-card h3{
                font-size:24px;
            }

            .image-placeholder{
                height:240px;
            }

        }