/* Harga Section Styling */
.harga {
    background-color: white; /* Set background color */
    padding: 50px; /* Section padding */
    box-sizing: border-box; /* Include padding in width */
    display: flex;
    justify-content: center;
    align-items: center;
}

.harga-container {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    gap: 20px; /* Spacing between elements */
    text-align: center; /* Center-align all text */
    width: 100%; /* Full-width container */
}

/* Header Text Styling */
.harga-header {
    font-family: 'Spartan', sans-serif;
    font-size: 18px; /* Font size */
    font-weight: bold; /* Bold weight */
    margin-bottom: 10px; /* Space below the header */
    color: #4F7DDF;
}

/* Main Text Styling */
.harga-main {
    font-family: 'Spartan', sans-serif;
    font-size: 36px; /* Font size for main text */
    font-weight: bold; /* Bold weight */
    color: black; /* Black color for the text */
    margin-bottom: 10px; /* Space below the text */
}

/* Button Styling */
.harga-button {
    font-family: 'Spartan', sans-serif;
    font-size: 24px; /* Font size */
    font-weight: 600; /* Semi-bold weight */
    color: white; /* Text color */
    background: linear-gradient(45deg, #0368FF, #C27FCF); /* Button background */
    border: none;
    border-radius: 5px; /* Rounded corners */
    padding: 10px 30px; /* Button padding */
    cursor: pointer;
    text-transform: capitalize;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Shadow effect */
    transition: all 0.3s ease; /* Smooth transitions */
    margin: 0 auto; /* Center button horizontally */
}

/.harga-button:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Shadow effect on hover */
}

/* Grouped Text Styling */
.text-group {
    margin-top: 20px; /* Space between button and text */
}

.text-group p {
    font-family: 'Spartan', sans-serif;
    font-weight: bold; /* Bold weight */
    color: black; /* Text color */
    margin: 5px 0; /* Reduce margin to keep texts close together */
}

/* Price Gradient Styling */
.harga-price {
    font-family: 'Spartan', sans-serif;
    font-size: 32px; /* Font size for price */
    font-weight: bold; /* Bold weight */
    background: linear-gradient(90deg, #1B18F9, #E146AD); /* Gradient background */
    -webkit-background-clip: text; /* Clip background to text */
    -webkit-text-fill-color: transparent; /* Transparent text to show gradient */
    margin-bottom: 10px; /* Space below the price */
}

/* Responsive Design */

/* Devices 768px or smaller */
@media (max-width: 768px) {
    .harga {
        padding: 30px; /* Reduce padding for smaller screens */
    }

    .harga-main {
        font-size: 28px; /* Adjust font size for smaller screens */
    }

    .harga-price {
        font-size: 36px; /* Adjust font size for price */
    }

    .text-group p {
        font-size: 18px; /* Adjust font size for grouped text */
    }
}

/* Devices 480px or smaller */
@media (max-width: 480px) {
    .harga {
        padding: 20px; /* Further reduce padding for smaller screens */
    }

    .harga-main {
        font-size: 24px; /* Further reduce font size for main text */
    }

    .harga-price {
        font-size: 32px; /* Further reduce font size for price */
    }

    .text-group p {
        font-size: 16px; /* Adjust font size for grouped text */
    }
}