/* ========================================= HERO PROJECT PAGE ========================================= */ 
.hero-section{
    display:grid; 
    grid-template-columns:1fr 1fr; 
    align-items:center;
    gap:60px; 
    padding:80px 6%;
    background:linear-gradient( 135deg, #f8fafc, #eef5f1 );
    } 
    .hero-image img{
        width:100%;
        border-radius:28px;
        box-shadow:0 18px 45px rgba(0,0,0,.12);
        }
        .hero-content h1{
            font-size:46px;
            line-height:1.2; 
            color:#0b3d26;
            margin-bottom:24px; 
            font-weight:800;
            }
            .hero-content p{ 
                font-size:18px;
                line-height:1.8;
                color:#475569; 
                margin-bottom:24px;
                }
                .intro-list{
                    display:flex;
                    flex-direction:column;
                    gap:12px; 
                    margin-bottom:30px;
                    }
                    .intro-list span{
                        color:#0b3d26;
                        font-weight:600;
                        font-size:16px;
                        } 
                        /* ========================================= PROJECT INTRO ========================================= */ 
                        .project-intro{ 
                            padding:80px 0;
                            background:#fff;
                            
                        } 
                        .project-intro .container{ 
                            max-width:1000px; 
                            margin:auto;
                            padding:0 20px; 
                            
                        }
                        .project-intro h2{ 
                            font-size:38px;
                            color:#0b3d26;
                            margin-bottom:25px;
                            font-weight:800; 
                            
                        } 
                        .project-intro h3{
                            font-size:28px;
                            color:#0b3d26;
                            margin:40px 0 20px;
                            font-weight:700; 
                            position:relative;
                            padding-left:18px;
                            } 
                            .project-intro h3::before{
                                content:'';
                                position:absolute; 
                                left:0; top:4px; 
                                width:5px; 
                                height:30px; 
                                border-radius:10px;
                                background:#16a34a; 
                                
                            } 
                            .project-intro p{
                                font-size:17px; 
                                line-height:1.9;
                                color:#475569;
                                margin-bottom:20px; 
                                text-align:justify; 
                                
                            } 
                            .project-intro ul,
                            .project-intro ol{
                                margin:20px 0 30px 25px;
                                }
                                .project-intro li{
                                    margin-bottom:12px;
                                    line-height:1.8;
                                    color:#475569;
                                    }
                                    /* ========================================= PROJECT CATEGORY ========================================= */
                                    .project-categories{
                                        padding:90px 0;
                                        background:#f8fafc;
                                        } 
                                        .project-categories .container{
                                            max-width:1200px;
                                            margin:auto;
                                            padding:0 20px;
                                            } 
                                            .project-categories h2{
                                                text-align:center;
                                                font-size:38px; 
                                                font-weight:800;
                                                color:#0b3d26;
                                                margin-bottom:15px;
                                                }
                                                .section-desc{
                                                    max-width:850px;
                                                    margin:0 auto 50px;
                                                    text-align:center;
                                                    line-height:1.8;
                                                    color:#64748b;
                                                    }
                                                    .category-grid{
                                                        display:grid;
                                                        grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
                                                        gap:30px; margin-top:40px;
                                                        }
                                                        .category-card{ 
                                                            display:block; 
                                                            background:#fff;
                                                            border-radius:20px;
                                                            overflow:hidden; 
                                                            text-decoration:none; 
                                                            box-shadow:0 10px 30px rgba(0,0,0,.08); 
                                                            transition:all .35s ease;
                                                            } 
                                                            .category-card:hover{ 
                                                                transform:translateY(-8px);
                                                                box-shadow:0 20px 40px rgba(0,0,0,.12);
                                                                }
                                                                .category-card img{
                                                                    width:100%; 
                                                                    height:220px; 
                                                                    object-fit:cover;
                                                                    transition:.4s ease;
                                                                    } 
                                                                    .category-card:hover img{
                                                                        transform:scale(1.05);
                                                                        }
                                                                        .category-card h3{
                                                                            padding:25px 25px 12px;
                                                                            color:#0b3d26; font-size:24px;
                                                                            font-weight:700;
                                                                            } 
                                                                            .category-card p{
                                                                                padding:0 25px 25px;
                                                                                color:#64748b;
                                                                                line-height:1.8;
                                                                                font-size:16px;
                                                                                }
                                                                                /* ========================================= MOBILE ========================================= */
                                                                                @media(max-width:768px){
                                                                                    .hero-section{ grid-template-columns:1fr;
                                                                                    gap:35px;
                                                                                    padding:45px 20px; 
                                                                                    text-align:center; 
                                                                                        
                                                                                    }
                                                                                    .hero-content h1{
                                                                                        font-size:30px;
                                                                                        line-height:1.35;
                                                                                        }
                                                                                        .hero-content p{ 
                                                                                            font-size:16px;
                                                                                            line-height:1.7;
                                                                                            }
                                                                                            .intro-list{ 
                                                                                                align-items:flex-start; 
                                                                                                display:inline-flex;
                                                                                                text-align:left; 
                                                                                                
                                                                                            } 
                                                                                            .project-intro{ 
                                                                                                padding:50px 0;
                                                                                                } 
                                                                                                .project-intro h2{ 
                                                                                                    font-size:30px;
                                                                                                    }
                                                                                                    .project-intro h3{
                                                                                                        font-size:24px;
                                                                                                        } 
                                                                                                        .project-intro p{
                                                                                                            font-size:16px;
                                                                                                            text-align:left;
                                                                                                            }
                                                                                                            .project-categories{
                                                                                                                padding:50px 0;
                                                                                                                } 
                                                                                                                .project-categories h2{
                                                                                                                    font-size:30px; 
                                                                                                                    
                                                                                                                } 
                                                                                                                .section-desc{
                                                                                                                    font-size:16px;
                                                                                                                    } 
                                                                                                                    .category-card h3{
                                                                                                                        font-size:22px;
                                                                                                                        }
                                                                                                                        }