@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');

/* color pallete and styles */
:root{

    /* colors */
    --primary-100: #003134;
    --primary-hover-100: #012425;
    --primary-5: #f2f3eb;
    --secondary-100: #c7ee4e;
    --secondary-20: #C7EE4E33;
    --secondary-hover-100: #b4df36;
    --secondary-50: #14285088;
    --tertiary-100: #259e59;
    --dark-grey: #2c3a37;
    --black-75: #272727;
    --black-50: #4c4c4c;
    --black-25: #bfd4d2;
    --black-5: #f7f7f7;
    --medium-gray: #58746e;
    --contrast-color: #74950e;
    --selected-baige: #f2f3eb;
    --bg-color: #f3fbda;
    --new-primary: #d4b06b;
    --new-white: #f5f5f5;
    --new-p: #eaeeef;

    /* font family */
    --font-family : "Manrope";

    /* font weights */
    --light-font : 300;
    --regular-font : 400;
    --medium-font : 500;
    --semibold-font : 600;
    --bold-font : 700;

    /* shadow styles */
    --hover-shadow : 2px 2px 10px var(--black-25);
    --hover-shadow-2 : 2px 2px 20px rgba(0, 0, 0, 0.1);
    --hover-shadow-4 : 0px 0px 30px rgba(0, 0, 0, 0.1);
    --diffused-shadow : 0px 0px 20px rgba(0, 0, 0, 0.15);
    --diffused-shadow-light : 0px 5px 5px rgba(0, 0, 0, 0.1);

    /* stroke */
    --primary-stroke : 1.5px solid var(--primary-100);

    

}

body{
    font-family: var(--font-family);
}

/**/

.number-red{
    color: #D94E4E!important;
}
.number-green{
    color: var(--contrast-color)!important;
}

/**/

.pdg100{
    padding-top: 100px;
}
.pdgb100{
    padding-bottom: 100px;
}
.pdg75{
    padding-top: 75px;
}
.pdgb75{
    padding-bottom: 75px;
}
.pdg35{
    padding-top: 35px;
}
.pdgb35{
    padding-bottom: 35px;
}

.pdg50{
    padding-top: 50px;
}

.pdgb50{
    padding-bottom: 50px;
}

.mrg100{
    margin-top: 100px
}

.mrg50{
    margin-top: 50px
}

.mrgb50{
    margin-bottom: 50px
}

.mrg35{
    margin-top: 35px
}

.mrgb35{
    margin-bottom: 35px
}

.mrg25{
    margin-top: 25px
}

.mrgb25{
    margin-bottom: 25px
}

.mrg15{
    margin-top: 15px
}
.mrgb15{
    margin-bottom: 15px
}

.mrg5{
    margin-top: 5px
}
.mrgb5{
    margin-bottom: 5px
}

.mrgb{
    margin-bottom: 0px;
}

/* navbar */

.navbar{
    background: white;
    box-shadow: 0 3px 3px rgb(0 0 0 / 5%), 0 3px 6px rgb(0 0 0 / 5%);
}

.navbar-brand img{
    height: 35px;
}

.navbar .nav-item:hover .nav-link{ 
    color: var(--contrast-color);
}

.nav-link{
    color: var(--black-75);
    font-weight: 500;
}

.nav-item{
    font-family: var(--font-family);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 5px 24px 0px 0px;
    transition: all 0.2s ease-in-out;
}

nav .dropdown-item{
    font-family: var(--font-family);
    font-size: 0.9rem;
}

nav .dropdown-toggle::after{
    color: var(--bs-body-color)!important;
}

/* .nav-item:hover{
    text-shadow: var(--hover-shadow)
} */
.nav-btn-link{
    text-decoration: none;
}
.nav-button{
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-100);
    border-color: var(--primary-100);
    border: solid 1px;
    padding: 0.6rem 1rem;
    margin-right: 10px;
}

.nav-button:hover{
    color: white;
    background: var(--primary-100);
}

.button-outside{
    display: none;
}

.navbar-toggler{
    border:none!important
}

.navbar .dropdown-menu{
    min-width: 220px;
    padding-top: 0;
    box-shadow: 0px 8px 20px 0px rgba(0, 67, 54, 0.2);

}

.navbar .dropdown-menu .dropdown-item:hover{
    background: var(--contrast-color);
    color: white;
}

.navbar .dropdown-menu p{
    margin: 0;
    padding-bottom: 5px;
    color: var(--primary-100);
    font-weight: 400;
}

.navbar .active{
    color: var(--contrast-color)!important;
}

.navbar .dropdown-menu .active{
    color: white!important;
    background: var(--secondary-100);
}

.modal-header{
    border: none;
}

.modal-start-investing h1{
    font-weight: 700;
    font-size: 1.8rem;
    color: var(--primary-100);
}

.modal-start-investing .card{
    padding: 20px;
}

.modal-start-investing h5{
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-100);
}

.modal-start-investing p{
    font-size: 0.9rem;
    color: var(--dark-grey);
}

.modal-start-investing .card .btn{
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--primary-100);
    background: var(--secondary-100);
    padding: 0.75rem 2rem;
    border: solid 1px var(--secondary-100);
}


.modal-start-investing .card .btn:hover{
    color: var(--secondary-100);
    background: var(--primary-100);
}



/*footer*/

footer{
    background: #2C3A37;
}

footer p{
    color: var(--black-5);
    font-weight: 300;
    font-size: 0.8rem;
    opacity: 60%;
}

footer .contact-img{
    margin-right: 15px;
}

footer h6{
    color: white;
    font-weight: 500;
    font-size: 0.9rem;
}

footer a{
    text-decoration: none;
    color: var(--black-5);
    font-weight: 300;
    font-size: 0.8rem;
    opacity: 60%;
}

footer a:hover{
    color: var(--secondary-100);
}

footer hr{
    width: 100%;
    height: 5px;
    color: var(--black-5);
    opacity: 10%;
}

/**/

/* acordion arrow */

.accordion-button:not(.collapsed)::after{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2374950Eff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.showp{
    display: none;
}


@media only screen and (max-width: 350px) {
    .navbar-brand img{
        height: 29px;
    }
    
}
@media only screen and (max-width: 600px) {
    .mrgp25{
        margin-top: 25px;
    }
    .mrg50{
        margin-top: 35px;
    }
    .mrgb50{
        margin-bottom: 35px;
    }
    .pdg100{
        padding-top: 50px;
    }
    .pdgb100{
        padding-bottom: 50px;
    }
    
}

@media only screen and (max-width: 992px) {

    .button-outside{
        display: block;
    }

    .button-inside{
        display: none;
    }
    .showp{
        display: block;
        }
     .hidep{
        display: none;
       }
}