@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

.work-sans {
     font-family: "Work Sans", sans-serif;
     font-optical-sizing: auto;
     font-weight: 400;  
     font-style: normal;
}
/* shared styles */
.display-flex{
     display: flex;
}
/* dark 02 */
.text-gray{
     color:  rgba(66, 66, 66, 1);
}
/* dark 03 */
.text-light-gray{
     color:  rgba(114, 114, 114, 1);
}
/* dark 01 */
.text-dark-gray{
     color:  rgba(19, 19, 19, 1);
}
.bg-light{
     background: rgba(255, 144, 14, 0.1);
}
.bg-two{
     background-color: rgba(255, 255, 255, 1);
}
.btn-primary{
     background-color: rgba(255, 144, 14, 1);
     color: rgba(255, 255, 255, 1);
     border-radius: .5rem;
     width: 11.25rem;
     height: 4rem;
     border: none;
     padding: 20px 25px;
     font-size: 1.25rem;
     font-weight: 600;
}
/* header styles */
header{
     max-width: 120rem;
}

/* nav bar styles */
.brand{
     font-size: 2.9rem;
     font-weight: 700;
}
.nav-bar{
     justify-content: space-between;
     align-items: center;
     max-width: 1440px;
     margin: 0 auto;
}
.nav-item{
     list-style: none;
     margin-right: 60px;
     
}
.nav-link{
     text-decoration: none;
}
/* banner related styles */
.banner{
     max-width: 1440px;
     margin: 0 auto;
}
.banner-content{
     max-width: 53.75rem;
     margin: 0 auto;
     text-align: center;
     margin-bottom: 3.125rem;
}
.banner-title{
     font-weight: 700;
     font-size: 4rem;
}
.img{
     width: 100%;
     margin-bottom: 45px;
}
/* main  section */

main{
     max-width: 1440px;
     margin: 0 auto;
}
.team{
     align-items: center;
     gap: 74px;
     margin: 5.3125rem  3.8125rem  0 3.8125rem;
}
.team-img-section{
     display: grid;
     grid-template-columns: repeat(2,1fr);
     gap:24px;
}
.feature{
     max-width: 530px;
}
.feature-title{
     font-size: 2.8rem;
     font-weight: 700;
     margin-bottom: 25px;
}
.three{
     color: rgba(255, 144, 14, 1);
}
.one{
     font-weight: 500;
}
.feature-description{
     color: rgba(114, 114, 114, 1);
     font-size: 1rem;
     font-weight: 350;
}
.feature-love{
     /* max-width: 90rem; */
     margin-top: 8.125rem;
     display: flex;
     gap: 146px;

}
.feature-box{
     width: .3125rem;
     height: 6.625rem;
     background-color: rgba(255, 144, 14, 1);
}
.feature2-title-part{
     display: flex;
     align-items: center;
     gap: 24px;
}
.feature2-title{
     width: 29.25rem;
     text-align: left;
}
.feature2-description{
     width: 36.625rem;
     height: 4.875rem;
     text-align: left;
}
.description-heading{
     font-size: 1.25rem;
     font-weight: 600;
}
.reward{
     display: flex;
     justify-content: space-between;

}
.reward-box{
     width: 240px;
     height: 240px;
     /* padding: 60x 35px; */
     display: flex;;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     border: 1px solid rgba(255, 144, 14, 1);
     border-radius: 8px;
}
.sponsor{
     flex-direction: column;
     align-items: center;
}
.part1{
     text-align: center;
     margin-top: 180px;
}
.sponsor-img{
     margin-top: 50px;
     display: flex;
     justify-content: center;
     gap: 157px;

}
.footer{
     width: 1440px;
     height: 70px;
     border-radius: 8px;
     background: rgba(255, 244, 231, 1);
     text-align: center;
     margin-top: 50px;
     padding-top: 20px;
}
/* responsive media */
@media screen and (max-width:576px){
     .nav-bar,.nav-right{
          flex-direction: column;
     }
     .team{
          flex-direction: column;
     }
     .team-img-section{
          grid-template-columns: 1fr;
     }
}
/* medium device */
@media screen and (min-width:577px) and (max-width:715px){
     .nav-bar,.nav-right{
          flex-direction: column;
     }
     .team{
          flex-direction: column;
     }
     .team-img-section{
          grid-template-columns: 1fr;
     }

}
.description-box{
     margin-top: 20px;
     max-width: 586px;
     height: 140px;
     padding: 0px 20px 20px 20px;
     border-radius: 8px;
     box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.06);
     background: rgba(255, 255, 255, 1);
}
@media screen and (min-width:716px) and (max-width:993px){
     .nav-bar,.nav-right{
          flex-direction: column;
     }
     .team{
          flex-direction: column;
     }
}