*{
            margin:0  ;
            padding:0  ;
            box-sizing:border-box  ;
        }

        .pc {

            font-family:'Montserrat',sans-serif  ;

            background:
            linear-gradient(
                rgba(0,0,0,.65),
                rgba(0,0,0,.65)
            ),
            url('../../assets/images/SJCJ.png')  !important ;

            background-size:cover !important ;
            background-position:center !important ;
            background-attachment:  ;

            min-height:100vh !important ;

            color:white !important ;

            overflow-x:hidden !important ;
        }

        /* =========================
        HERO
        ========================= */

        .hero{

            min-height:100vh !important ;

            display:flex !important ;

            align-items:center !important ;

            justify-content:center !important ;

            padding:120px 20px !important ;
        }

        .hero-box{

            width:100% !important ;
            max-width:1200px !important ;

            background:rgba(255,255,255,.08) !important ;

            backdrop-filter:blur(12px) !important ;

            border:1px solid rgba(255,255,255,.15) !important ;

            border-radius:30px !important ;

            overflow:hidden !important ;

            box-shadow:
            0 15px 40px rgba(0,0,0,.35) !important ;
        }

        /* =========================
        LEFT
        ========================= */

        .left-side{

            padding:60px !important ;
        }

        .badge-ltp{

            display:inline-flex !important ;

            align-items:center !important ;

            gap:10px !important ;

            background:rgba(255,255,255,.12) !important ;

            padding:10px 18px !important ;

            border-radius:50px !important ;

            font-size:14px !important ;

            margin-bottom:25px !important ;
        }

        .left-side h1{

            font-size:60px !important ;

            font-weight:800 !important ;

            line-height:1.1 !important ;

            margin-bottom:25px !important ;
        }

        .left-side p{

            color:#f1f1f1 !important ;

            line-height:1.9 !important ;

            font-size:17px !important ;

            margin-bottom:35px !important ;
        }

        /* =========================
        STATUS
        ========================= */

        .status-box{

            display:flex !important ;

            align-items:center !important ;

            gap:15px !important ;

            background:rgba(255,255,255,.08) !important ;

            padding:18px 22px !important ;

            border-radius:18px !important ;

            margin-bottom:25px !important ;
        }

        .status-circle{

            width:18px !important ;
            height:18px !important ;

            border-radius:50% !important ;

             background: #003cff !important ;

            animation:pulse 1.5s infinite !important ;
        }

        @keyframes pulse{

            0%{
                transform:scale(1) !important ;
                opacity:1 !important ;
            }

            50%{
                transform:scale(1.4) !important ;
                opacity:.5 !important ;
            }

            100%{
                transform:scale(1) !important ;
                opacity:1 !important ;
            }

        }

        /* =========================
        BUTTONS
        ========================= */

        .hero-buttons{

            display:flex !important ;

            gap:15px !important ;

            flex-wrap:wrap !important ;
        }

        .btn-hero{

            padding:14px 28px !important ;

            border-radius:50px !important ;

            text-decoration:none !important ;

            font-weight:600 !important ;

            transition:.3s !important ;
        }

        .btn-primary-hero{

            background:#0a497c !important ;

            color:white !important ;
        }

        .btn-primary-hero:hover{

           background: #092b5e !important ;
        }

        .btn-secondary-hero{

            background: white !important;

            color: #092b5e !important;
        }

        .btn-secondary-hero:hover{

            background: #092b5e;
            color: white;
        }

        /* =========================
        RIGHT
        ========================= */

        .right-side{

            background:
                linear-gradient(rgba(10, 21, 124, 0.92),
                    #09125e);

            padding:60px !important ;

            display:flex !important ;

            flex-direction:column !important ;

            justify-content:center !important ;
        }

        .card-info{

            background:rgba(255,255,255,.08) !important ;

            border-radius:20px !important ;

            padding:25px !important ;

            margin-bottom:20px !important ;

            transition:.3s !important ;
        }

        .card-info:hover{

            transform:translateY(-5px) !important ;

            background:rgba(255,255,255,.12) !important ;
        }

        .card-info i{

            font-size:35px !important ;

            margin-bottom:18px !important ;
        }

        .card-info h3{

            font-size:20px !important ;

            font-weight:700 !important ;

            margin-bottom:10px !important ;
        }

        .card-info p{

            color:#e9f5ef !important ;

            line-height:1.8 !important ;

            margin:0 !important ;
        }

        .gr{
           display: flex !important;
           flex-direction: row !important;
           
        }

       .link-card{
         margin: 1rem;
       }
       

}

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

        @media(max-width:992px){

            .left-side{

                padding:40px !important ;
            }

            .right-side{

                padding:40px !important ;
            }

            .left-side h1{

                font-size:45px !important ;
            }

        }

        @media(max-width:768px){

            .hero{

                padding:100px 15px !important ;
            }

            .left-side,
            .right-side{

                padding:30px !important ;
            }

            .left-side h1{

                font-size:34px !important ;
            }

            .left-side p{

                font-size:15px !important ;
            }

            .hero-buttons{

                flex-direction:column !important ;
            }

            .btn-hero{

                width:100% !important ;

                text-align:center !important ;
            }

            .gr{
                flex-direction: column !important;
            }

        }