body {
            box-sizing: border-box;
        }
       
        .carousel-item {
            height: 600px;
            top: 64;
        }
        
        .carousel-item img {
            height: 100%;
            object-fit: cover;
        }
        
        .carousel-caption {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            padding: 20px;
        }
        
        .navbar-brand {
            font-weight: bold;
            font-size: 1.5rem;
        }

        .dropdown-menu {
            background-color: #2E8B57;
        }
        .dropdown-item {
            font-weight: bold;
            font-size: 1rem;
            background-color: #2E8B57;
            color: white;
            padding: 10px;
        }
        
        .nav-link:hover {
            color: yellow !important;
            transform: translateY(-2px);
            transition: all 0.3s ease;
        }

        .dropdown-item:hover {
            background-color: #2E8B57;
            color: yellow !important;
            transform: translateY(-2px);
            transition: all 0.3s ease;

        }
        
        .carousel-control-prev-icon,
        .carousel-control-next-icon {
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            padding: 10px;
        }
        
        .carousel-indicators button {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }
        .hero-section {
            background-color: rgba(33, 175, 4, 0.7);
            color: greenyellow;
            padding: 100px 0;
        }
        
        .card-hover {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .text-hover {
            cursor: pointer;
        }

        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        }
        
        .navbar-brand {
            font-weight: bold;
            font-size: 1.5rem;
        }
        
        .section-title {
            color: #2E8B57;
            font-weight: bold;
            margin-bottom: 2rem;
        }
        
        .stats-card {
            background: linear-gradient(135deg, #4CAF50, #044908ff);
            color: white;
            border-radius: 15px;
            margin-top: 5px;
        }

        .kop-header {
            background: linear-gradient(135deg, #02431eff, #51f498ff);
            color: white;
            /* border-radius: 15px;
            margin-top: 5px; */
        }
        
        .page-content {
            display: none;
        }
        
        .page-content.active {
            display: block;
        }
        
        .footer {
            background-color: #2E8B57;
            color: white;
            padding: 40px 0;
        }
        
        .btn-primary {
            background-color: #2E8B57;
            border-color: #2E8B57;
        }
        
        .btn-primary:hover {
            background-color: #228B22;
            border-color: #228B22;
        }
        
        .nav-link {
            color: white !important;
            font-weight: bold;
        }

        .nav-link.active {
            color:yellow !important;
            font-weight: bold;
        }

        .lebar-gambar {
            width: 50%;
            margin-right: 15px;
        }
        
        .gambar-berita {
            width:50% ;
            margin-right: 15px;
        }

        .peta {
            width: 400px;
            height: 300px;
            }

        .table {
            font-size: 16px;
        }
        @media only screen and (max-width: 600px) {
           
            .carousel-item {
                height: 300px;
            }

            .gambar-berita {
            width:20% ;
            }

            .lebar-gambar {
            width: 100%;
            }

            .carousel-item img {
            height: 100%;
            object-fit: cover;
            margin-bottom: 0px;
            }

            .carousel-control-prev-icon,
            .carousel-control-next-icon {
             background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            padding: 10px;
            }

            .carousel-caption {
            background: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            padding: 20px;
            height: 100px;
            font-size: small;
            }

            .peta {
            width: 300px;
            height: 200px;
            }

            .table {
            font-size: 12px;
            }
        }