/*-------------------
 Universal Tag Style 
--------------------*/

*{
    margin: 0;
}

/*---------------------------------
            Nav Section Styles 
 ----------------------------------*/
.nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px 120px 16px 120px ;
}

.nav-option ul{
    display: flex;
}

.nav-option li{
    list-style: none;
    margin-left: 32px;
}
.nav-option a{
    text-decoration: none;
    color: black
}

.btn{
    background-color:rgb(57, 126, 57);
    padding: 12px 16px;
    color: white;
    font-weight: 700;
    border-radius: 5px;
    border: 0px;
}

/*--------------------------------------------
            Banner Section Styles 
 ----------------------------------------------*/
.banner{
    text-align: center;
    background-image: url(./images/hero-bg.png);
    padding-top: 154px;
    padding-bottom: 170px;
}

.banner h1{
    font-size: 75px;
    color: white;
    margin-bottom: 16px;
}
.banner span {
    color: rgb(57, 126, 57);
}

.banner-btn{
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    text-align: center;
    margin-left: 450px;
    background-color:rgb(57, 126, 57);
    padding: 12px 16px;
    color: white;
    font-weight: 700;
    border-radius: 5px;
    border: 0px;
}
.button{
    display: flex;
    gap: 16px;
}

.banner-btn-2{
    background-color: unset;
    border: 1px solid white;
    border-radius: 5px;
    padding: 12px 16px;
    color: white;
    font-weight: 700;
}

.banner-btn-1{
    border-radius: 20px;
    padding: 10px 16px;
    color: rgb(57, 126, 57);
    font-weight: 700;
    font-size: 16px;
    border: unset;
    margin-bottom: 16px;
}
.fa-solid{
    margin-right: 5px;
}
.banner p{
  color: white;
  font-weight: 300;
  margin-bottom: 32px;
}

/*-----------------------------
 Card Section Styles 
 ------------------------------*/
.card img{
    background-color: brown;
    border-radius: 50px;
    padding: 20px;
    margin-top: 70px;
    margin-bottom: 16px;
}
.card h2{
    margin-bottom: 16px;
    font-size: 24px;
    font-weight: 600;
}

/*-----------------------------
    Don't Fall Section Styles 
 -------------------------------*/
.dont-fail{
    text-align: center;
    margin: 50px 120px 120px;
}
.dont-fail h1{
    margin-bottom: 16px;
}

.card-container{
    display: flex;
    gap: 24px;

}
.card{
    background-color: rgba(255, 255, 255, 1);
    box-shadow: 0 0 8px 0;
    width: 322px;
    height: 300px;
    padding: 24px;
    border-radius: 5px;
    margin-top: 44px;

}

/*----------------------------------
 Brain Section Styles 
 -----------------------------------*/

.brain-section h3{
    color: rgb(57, 126, 57);
}

.brain-section{
    display: flex;
    gap: 86px;
    margin: 120px;
}
.brain-img .brain-info{
    width: 50%;
}
.brain-info{
    margin-top: 120px;
    margin-bottom: 120px;
}
.brain-info h1{
    font-size: 40px;
    margin-top: 16px;
    margin-bottom: 16px;
}

.brain-info div li{
    display: flex;
    align-items: center;
    gap: 7px;  
}

.brain-info div{
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 44px;
}


/*----------------------------------------
            Bonus Section Styles 
 -----------------------------------------*/
.bonus-section{
    text-align: center;
    background-color:rgb(212, 206, 206) ;
    padding-top: 80px;
    padding-bottom: 80px;
    margin-left: 120px;
    margin-right: 120px;
    border-radius: 10px;
}

.bonus-section h1{
    margin-bottom: 16px;
}

.bonus-btn{
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    text-align: center;
    margin-left: 475px;
    margin-top: 24px;
    margin-bottom: 16px;
    background-color:rgb(57, 126, 57);
    padding: 12px 16px;
    color: white;
    font-weight: 700;
    border-radius: 5px;
    border: 0px;
}

/*-------------------------------------
          Footer All Styles 
 --------------------------------------*/
footer{
    background-color: rgb(41, 38, 38);
    margin: 120px 0 30px 0;
    
}
.footer-container{
    padding: 120px;
    display: flex;
    justify-content: space-between;
    align-items:flex-start;
}

footer p{
    text-align: center;
    color: white;
    padding-bottom: 30px;

}

.footer-info h3{
    color: white;
    padding-left: 41px;
    margin-bottom: 26px;
    font-size: 20px;
}
.links{
    display: flex;
    justify-content:space-between;
    gap: 16px;
    margin-right: 50px;
}
.links li{
    list-style: none;
    background-color: aliceblue;
    border-radius: 50px;
    padding: 5px;
}

hr{
    margin:0 140px 10px;
}

/*----------- CSS End --------------*/