/* generic styles  */
body {
    font-family: 'Space Grotesk', sans-serif;
    color: #40454f;   
    margin: 0;
    padding: 0;
    background-color: #f4f5f7;
}

:root {
    --white: #fff;
    --black: #000;
    --text: #2b2b2b;
    --green: #12A633;
}

li {
    list-style-type: none;
}

.btn {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    color: inherit;
    text-decoration: none;
}


/* nav bar styling  */
.more {
    margin-right: 30%;
}

.auth {
    margin-right: 5px;
    display: flex;
    flex-direction: row;    
}

.auth li {
    padding: 10px;
}

.navbar-nav .nav-item a{
    font-family: Roobert, sans-serif;
    color: var(--black);
    font-size: 20px;
    font-weight: 500;
}

.navbar-nav .nav-item a:hover{
    color: var(--text);
}

.signup{
    margin-top: 0px;
    margin-left: 15px;
    padding: 15px 25px;
    font-weight: 600;
    color: var(--white);
    background-color: var(--black);
}

.signup:hover {
    background-color: var(--green);
    transition: color 200ms ease;
}

 /* important makes the text white instead of black  */
.signup a {
    color: var(--white) !important;
}

.dropdown-menu {
    background-color: var(--white);
    border: none;
    padding: 20px 25px;
}

/* section one */
.section_one{
    margin-top: 8%;
    margin-bottom: 6%;
}

.section_one .header {
    font-weight: 700;
    font-size: 4em;
    color: var(--black);
    max-width: 600px;
    font-weight: bold;
}

.section_one .text {
    max-width: 600px;
    margin-bottom: 32px;
    color: var(--text);
    font-size: 20px;
    line-height: 1.5;
}

.section_one .info {
    margin-top: 20px;
}

.section_one .info i {
    font-size: 1.5em;
    margin-bottom: 20px;
    font-weight: bold;
}

.section_one .info .fa-comments {
   color: #87a0cf;
}

.section_one .info .fa-exchange {
   color: #FF9900;
}

.btn_one {
    background-color: #000;
    margin-right: 15px;
    border-radius: 20px;
    padding: 10px 10px 0px 10px;
}

.btn_one:hover {
    color: var(--white);
}

.btn_one i {
    color: var(--green);
    font-size: 2.5em;
    margin-top: 10px;
    padding-right: 5px;
}

.btn_one {
    color: var(--white);
    font-size: 0.8em;
    text-align: left;
}

.btn_one span {
    color: var(--white);
    font-size: 1.5em;
    font-weight: 600;
    display: block;
    padding-bottom: 0;
}

.section_one .img-group {
    position: relative;
}

.section_one .coins_img {
    position: absolute;
    bottom: 25px;
    left: -60px;
    width: 50%;
}

/* section two */
.section_two {
    margin-bottom: 3%;
}

.section_two .info {
    text-align: center;
    width: 65%;
    margin: auto;    
}


/* I grouped these classes because they have the same styling with litlle or no change.  */

.section_two .header,
.section_three .header,
.section_five .header,
.section_seven .header,
.section_eight .header  {
    font-weight: bold;
    margin-bottom: 16px;
    font-family: Roobert, sans-serif;
    font-size: 2.5em;
    color: var(--black);
}

.section_two .text {
    margin-bottom: 32px;
    color: var(--text);
    font-size: 22px;
    line-height: 1.5;
}

.section_two .stats {
    border-top: 1px solid rgb(218, 211, 211);
    margin-top: 10px;
    overflow: auto;
}

.section_two .stats .stat {
    border-right: 1px solid rgb(218, 211, 211);
    padding: 30px 40px;
}

.section_two .stats .stat:nth-child(3) {
    border-right: none
}

.section_two .stats .stat h3 {
    font-size: 3.5em;
    color: var(--black);
    font-weight: bold;
}

.section_two .num_text {
    max-width: 600px;
    color: var(--text);
    font-size: 20px;
    text-transform: capitalize;
}

/* section three */
.section_three .text, .section_five .text {
    margin-bottom: 32px;
    color: var(--text);
    font-size: 18px;
    line-height: 1.5;
}

.section_three ul li, .section_five ul li{
    margin-left: -20px;
    font-size: 1.1em;
    line-height: 1.5;
    margin-top: 15px;
    width: 90%;
}

.section_three ul li i, .section_five ul li i {
    color: var(--green);
    margin-right: 10px;
}

.section_three ul li span {
    font-weight: bold;
    text-transform: capitalize;
}

.section_three .btn {
    background-color: var(--white);
    color: var(--green);
    margin-top: 15px;
    padding: 10px 15px;
    font-size: 1em;
    font-weight: bold;
    margin: 0 auto;
    transform: rotate(360deg);
}

.section_three .btn i{
    color: var(--text);
    font-weight: 100;
    margin-left: 10px;
}

.section_three img {
    border-radius: 20px;
}

/* section four */
.section_four {
    background: var(--black);
    color: var(--white);
    margin: 70px 0;
    padding-top: 100px;
}

.section_four .yield {
    color: var(--green);
    text-transform: uppercase;
    font-weight: 700;
}

.section_four_info {
    text-align: center;
    width: 70%;
    margin: auto;
    margin-bottom: 20px;
}

.section_four .section_four_info .header {    
    font-weight: 700;
    margin-bottom: 16px;
    font-family: Roobert, sans-serif;
    font-size: 2.5em;
}

.section_four .card {
    border-radius: 10px;
    padding: 10px;
}

.section_four img {
    margin-top: 10%;
}

.section_four .btn{
    color: var(--white);
    margin-bottom: 80px;
    border-bottom: 1px solid var(--white);
    margin-top: 100px;
}

.section_four .btn i{
    margin-left: 10px;
}

/* section five  */
.section_five {
    margin-bottom: 10%;
    margin-top: 7%;
}

.section_five .btn {
    background-color: rgb(252, 251, 251);
    color: var(--text);
    margin-top: 15px;
    padding: 10px 15px;
    font-size: 1em;
    font-weight: bold;
}

.section_five img {
    border-radius: 10px;
    margin-top: 30px;
}

/* section six  */

.section_six {
    display: block;
    padding-top: 100px;
    padding-bottom: 100px;
    background-image: url("https://uploads-ssl.webflow.com/61802c0e0fc3d12b496441b6/6185304194dfbed1e1847c02_image%2019.png");
    background-position: 50% 50%;
    background-size: cover;
    color: var(--white);
    margin-bottom: 7%;
}

.section_six .header {
    font-size: 3em;
    font-weight: 700;
    max-width: 700px;
}

.section_six .pay {
    text-transform: uppercase;
}

.section_six .text, .section_seven .text {
    margin-top: 16px;
    margin-bottom: 24px;
    font-size: 18px;
    line-height: 1.5;
}

.section_six .sub_col i {
    font-size: 1.5em;
    margin-bottom: 15px;
}

.section_six .btn {
    color: var(--white);
    border-bottom: 1px solid var(--white);
}

.section_six .btn i {
    margin-left: 10px;
}

/* section seven  */
.section_seven {
    margin-bottom: 5%;
}

.section_seven .testimonials .testimonial{
    background-color: #FDFDFD;
    margin-bottom: 20px;
    padding: 20px 30px;
    max-width: 500px;
}

.section_seven .testimonials .col-12 {
    background-color: var(--white);
    margin-left: 50px;
    width: 45%;
    padding: 30px;
    border-radius: 10px;
}

.section_seven .sub_header {
    margin-bottom: 20px;
    color: #000;
    font-size: 18px;
    font-weight: 700;
    line-height: 2;
}

.section_seven .sub_header span {
    background-color: rgb(209, 204, 198);
    padding: 15px;
    border-radius: 50%;
    margin-right: 20px;
    font-size: 1.2em;
}

.section_seven .sub_header .o {
    color: rgb(85, 30, 30);
}

.section_seven .sub_header .j{
    color: rgb(166, 83, 166);
}

.section_seven .sub_header .k{
    color: rgb(115, 147, 67);
}

.section_eight {
    margin-bottom: 20%;    
}

.section_eight .blog {    
    color: var(--green);
    text-transform: uppercase;
    font-weight: bold;
}

.section_eight .header {
    font-size: 3em;
    width: 68%;
}

.section_eight .btn {
    background-color: var(--green);
    padding: 10px;
    color: var(--white);
    font-weight: bold;
}

.section_eight img {
    border-radius: 15px;
    opacity: 0.4;
}

.img_overlay {
    position: relative;
    background: var(--black);
    background-size: cover;
    border-radius: 15px;
}

/* to zoom the images in on mouse hover */

.zoom {
    transition: transform .2s; /* Animation */
    margin: 0 auto;
  }
  
  .zoom:hover {
    transform: scale(1.02); 
  }

.img-text {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50px;
    left: 10px;
    color: var(--white);
    font-weight: bold;
}

.img-text-one{
    top: 280px;
}

.img-text .general {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.img-text .img_header {
    font-size: 19px;
    font-weight: 700;
}

.img-text .date_and_time {
    margin-top: 10px;
    font-size: 1.2em;
}

.section_nine {
    position: relative;

}

.section_nine .join_busha {
    text-align: center;
    display: block;
    padding-top: 100px;
    padding-bottom: 100px;
    background-image: url("https://uploads-ssl.webflow.com/61802c0e0fc3d12b496441b6/6185304194dfbed1e1847c02_image%2019.png");
    background-position: 50% 50%;
    background-size: cover;
    color: var(--white);
    margin-bottom: 7%;
    width: 70%;
    position:absolute;
    left: 15%;
    top: -15%;
    border-radius: 10px;
}

.section_nine .header {
    font-size: 2.5em;
    font-weight: bold;
}

.section_nine .text {
    font-size: 1.2em;
}

.section_nine .socials i {
    font-size: 1.5em;
    border-radius: 50%;
    background-color: var(--white);
    color: var(--black);
    padding: 20px;
    margin-left: 10px;
    font-weight: bold;
}

.section_nine .footer {
    background-color: var(--black);
    padding-top: 18%;
    color: var(--white);
}

.footer ul li {
    font-size: 16px;
    line-height: 3;    
    transition: color 200ms ease;
}

.section_nine .footer ul li:hover {
    color: #b5b9c0;
}

.footer input {
    border-radius: 10px;
    background-color: var(--text);
    color: var(--white);
    outline: none;
    border: none;
    height: 60px;
    width: 70%;
    padding-left: 20px;
}

.section_eight .btn, .footer .btn {
    background-color: var(--green);
    padding: 15px 20px;
    color: var(--white);
    font-size: 1.2em;
    margin-left: 20px;
}

/* to make the placeholder text white ad to increase the font weight*/

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--white);
    opacity: 1; /* Firefox */
    font-weight: 600;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
    font-weight: 600;
    color: var(--white);
}

::-ms-input-placeholder { /* Microsoft Edge */
    font-weight: 600;
    color: var(--white);
  }

.copyright {
    background: var(--black);
    font-size: 1em;
    padding-top: 50px;
}

.copyright p {
    border-top: 1px solid gray;
    padding: 30px 0;
}


/* media query for different screen sizes for responsive website  */

@media (max-width: 1024px ) {
    .section_eight {
        margin-bottom: 30%;
    }

    .section_nine .join_busha {
        margin-bottom: 7%;
        width: 70%;
        left: 15%;
        top: -25%;
        border-radius: 10px;
    }

    .img-text {
        top: 5px;
    }

    .img-text .general {
        letter-spacing: 1px;
    }

    .img-text-one {
        top: 250px;
    } 
    .coins_img {
        top: 320px;
    }
}



@media (max-width:770px) {
    .section_one .header {
        font-size: 3.5em;
    }

    .btn_one i {
        padding-right: 3px;
        font-size: 1.5em;
    }
    
    .btn_one {
        font-size: 0.8em;
    }
    
    .btn_one span {
        font-size: 1.3em;
    }

    .section_two .info {   
        width: 100%;
    }

    .section_two .stats {
        border-top: none;
        margin-top: 10px;
        text-align: center;
    }
    
    .section_two .stats .stat {
        border-right: none;
        padding: 30px 40px;
    }
    
    .section_two .stats .stat h3 {
        font-size: 3.5em;
    }

    .section_four .btn {
        margin-left: 35%;
    }

    .section_nine .join_busha {
        width: 100%;
        position:relative;
        border-radius: 0px;
        left: 0;
        margin-bottom: 0;
    }
    
    .section_eight .section_eight_info .header {
        width: 100%;
    }

    .coins_img {
        top: 230px;
        left: 0px !important;
    }
}




@media (max-width:600px) {
    /* nav bar  */
    .more {
        margin-right: 0;
    }
    .auth .login {
        display: none;
    }

    /* section one  */
    .section_one {
        margin-top: 20%;
    }

    .section_one img {
        margin-top: -30% !important;
    }

    .section_one .header {
        font-size: 3em;
        width: 100%;
    }

    .section_one .text {
        width: 100%;
    }

    .section_one .info {
        margin-top: 70px;
        margin-bottom: 150px;
    }
    
    .section_one .explore {
        margin-top: 10px;
    }

/* I grouped these classes because they have the same styling with litlle or no change.  */
    .section_two .header,
    .section_three .header,
    .section_four .section_four_info .header,
    .section_five .header, .section_eight .header {
        font-size: 2.2em;
        width: 100%;
    }

    .section_two {
        margin-top: 70%;
    }

    .section_two .info {
        width: 100%;
        margin-top: 50%;
    }
    
    .section_four img {
        margin-top: 0;
    }

    .img-text {
        top: 30px;
        font-size: small;
        min-width: fit-content;
    }

    .img-text .general {
        font-size: 12px;
        letter-spacing: 1px;
    }
    
    .img-text .img_header {
        font-size: 20px;
    }

    .section_eight {
        margin: 10% 0;
    }

    .section_seven .testimonials{
        animation: none;
    }

    .section_nine input, .section_nine .btn {
        width: 100%;
        margin-left: 0;
        margin-top: 10px;
    }
}


@media (max-width:450px) {

    .btn_one i {
        padding-right: 3px;
        font-size: 1.5em;
    }
    
    .btn_one {
        font-size: 0.7em;
    }
    
    .btn_one span {
        font-size: 1.3em;
    }

    .section_one .info {
        width: 100%;
    }

    .signup a{
        padding: 10px;
        font-size: 1.2em;
    }
    
    .section_two {
        margin-top: -30%;
    }

    .section_two .info {
        width: 100%;
        margin-top: 50%;
    }
    
    .section_four_info {
        width: 100%;
    }

    .img_space {
        margin-bottom: 40%;
    }

    .section_nine .socials i {
        font-size: 1.2em;
        padding: 10px;
        margin-left: 8px;
    }

    .copyright p{
        margin-left: 40px;
        width: 80%;    
    }

    .coins_img {
        left: 10px !important;
        top: 250px;
    }

}