@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

/* Define variables*/

:root {
    --primary-color: #65b741; /*Green*/
    --primary-dark-color: #509234;
    --primary-light-color: #83C566;
    --white: #FFFFFF;
    --off-white: #FAF9F6;
    --black: #000000;
    --jet-black: #343434;
    --matte-black: #28282B;

    --font-color:#fff;

    color-scheme:light dark;
}

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

::-webkit-scrollbar {
    width: 0;
    display: none; /* Optional, to ensure scrollbar is completely hidden */
}


body {
    margin: 0;
    min-height: 100vh;
    height: 100%;
    font-family: "Poppins", sans-serif;
    font-size: 16px;
    background-image: linear-gradient(#010101,#020d19);
    color: var(--font-color);
}
/*
    ===================================================================
                            NAVBAR
    ===================================================================
*/
.navbar {
    background-color: #010101;
}

    .navbar .logo img {
        width: 9rem;
    }

.navbar-nav > li > .dropdown-menu a.active,
.navbar-nav > li > .dropdown-menu a:hover {
    background-color: #83C566;
    color: var(--white);
}

.dropdown-item::after{
    margin-left:0.5rem !important;
    transform:rotate(90deg);
}


/*
    ===================================================================
                           CERTIFICATE CSS
    ===================================================================
*/

.card-text,
.card-title{
    color: black !important;
}

span.focus {
    color: var(--primary-color);
    font-size: 2.5rem;
}


@media screen and (max-width: 768px) {
    span.focus {
        font-size: 2rem;
    }
}

/*
    ===================================================================
                           PROCESS CERTIFICATE CSS
    ===================================================================
*/
.billing-note {
    color: blue;
}

.price-detail {
    padding-top: 1rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 15px;
}

@media screen and (max-width: 768px) {
    .price-detail {
        padding-top: 1rem;
        display: grid;
        place-content: center;
        grid-template-columns: auto 1fr;
        gap: 15px;
    }
}

/*
    ===================================================================
                           Document Signer CSS
    ===================================================================
*/

.radio-label {
    display: flex;
    align-items: center;
    gap: 5px;
}

input[type="radio"] {
    width: 20px;
    height: 20px;
}

.rd-year {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-right: 1rem;
}


@media screen and (max-width: 768px) {
    .rd-year {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }
}