/* button for web app  */
.btn-webcolor-bg{
    background-color: var(--webcolor);
    border-color: var(--webcolor);
    color: var(--white);
}
.btn-webcolor-bg:hover{
    background-color: var(--shaunBlue) !important;
    border-color: var(--shaunBlue) !important;
}
.btn-outline-webcolor{
    border-color: var(--webcolor) !important;
    color: var(--webcolor);
}
.btn-outline-webcolor:hover{
    background-color: var(--webcolor);
    color: var(--white);
}
/* button for web app ends */

/* mobile_navbar  */
.mobile_navbar_holder{
    width: 400px;
    top: 20px;
    animation: fadeIn 0.3s ease-out;
}
.mobile_navbar_holder ul a li:hover{
    background-color: rgba(0, 0, 0, 0.182);
}
@keyframes fadeIn {
    from{
        top: -20px;
    } to{
        top: 20px;
    }
}
@media screen and (max-width: 450px) {
    .mobile_navbar_holder{
        width: 95% !important;
    }
}


/* nav section */
nav{
    height: 70px;
}
.logo{
    width: 160px;
}
.hamburger{
    display: none;
}

/* featured section */
.featured #featured::before,
.featured #featured::after{
    content: '';
    height: 2px;
    width: calc(50% - 50px);
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}
.featured #featured::before{
    left: 0;
    background-image: linear-gradient(to right, white, var(--webcolor));
}
.featured #featured::after{
    right: 0;
    background-image: linear-gradient(to left, white, var(--webcolor));
}


/* expert */
.expert{
    background-image: url(../images/bitmaps/red_bg_design.jpg);
    background-repeat: repeat;
}


/* footer */
footer a,
footer p,
footer li{
    color: rgb(118, 118, 118);
    font-size: 14px;
}
footer a:hover{
    text-decoration: underline;
}
footer h3{
    font-size: 17px;
}



/* media query */
@media screen and (max-width: 1150px){
    .chart video{
        width: 450px !important;
    }
}
@media screen and (max-width: 1024px){
    .expert > div{
        width: 95%;
    }
}
@media screen and (max-width: 850px){
    .hero{
        flex-wrap: wrap;
        justify-content: center;
    }
    .hero > div:first-child{
        text-align: center;
        width: 700px !important;
    }
    .hero .btn-group{
        justify-content: center !important;
    }
    .chart video{
        width: 100% !important;
    }
    .chart > div:nth-child(2){
        flex-direction: column-reverse !important;
    }
}

@media screen and (max-width: 767px){
    .web-container{
        padding-inline: 12px !important;
    }
    header nav ul,
    header nav .account{
        display: none !important;
    }
    .hamburger{
        display: inline;
    }
    .hero > div:first-child{
        width: 100% !important;
    }
    .expert .content{
        flex-direction: column;
    }
    .expert .content > div{
        width: 100% !important;
    }
    .expert .content > div:first-child img{
        width: 100% !important;
        height: 400px !important;
        object-fit: cover;
        object-position: top center;
    }
}
@media screen and (max-width: 650px){
    .membership .items{
        flex-direction: column;
        align-items: center;
    }
    .membership .items > .item{
        width: 400px !important;
    }
}
@media screen and (max-width: 480px){
    .expert > div,
    .chart > div:nth-child(2){
        padding-inline: 20px !important;
    }
    .join .highlight{
        flex-direction: column !important;
        gap: 25px;
    }
}
@media screen and (max-width: 440px){
    .membership .items > .item{
        width: 95% !important;
    }
}