/*fon-awesome*/
.fa {
    padding: 10px;
    font-size: 20px;
    width: 40px;
    height: 40px;
    text-align: center;
    text-decoration: none;
    margin: 5px 5px;
    background: white;
    border-radius: 50%;
    opacity: 50%;
}
.fa-facebook {
    color: #3B5998;
}
.fa-twitter {
    color: #55ACEE;
}
.fa-instagram {
    color: #125688;
}
.fa-linkedin {
    color: #007bb5;
}
/*navbar classes*/
nav ul a,
nav .brand-logo {
    color: #388492;
}
.primary-text{
    color: #388492;
}
.sidenav-trigger {
    color: #26a69a;
}
/*general classes*/
img {
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
main {
    flex: 1 0 auto;
}
#toast-container {
    top: auto !important;
    right: auto !important;
    bottom: 10%;
    left:7%;
}
/*general classes*/
.text-size1{
    font-size: 0.96rem;
    line-height: 1rem;
    color: var(--text-color);
}
.text-size2{
    font-size: 1rem;
    line-height: 1.2rem
}
.text-size3{
    font-size: 1.37rem;
    line-height: normal;
}
.text-size4{
    font-size: 1.5rem;
}
.text-btn5{
    color: white;
    font-size: 0.9rem;
    line-height: 1rem;
}
.text-gray{
    color: #A8A197;
}
.text-primary{
    color: var(--text-color);
}
.text-primary{
    color: var(--primary-color);
}
.text-yellow{
    color: var(--accent-color);
}
.flex1{
    flex: 1;
}
.flex2{
    flex: 2;
}
.flex3{
    flex: 3;
}
.flex4{
    flex: 4;
}

.div-row{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-items: center;
    justify-content: space-between;
    padding: 50px 5%;
    flex-wrap: wrap;
    background:  var(--background-color);
    position: relative;
}
.sec-col{
    flex: 1;
    display: flex;
    flex-direction: column;
}
/*general classes end*/
/*section 1 classes*/
#sec1-col1{
    padding: 2% 5%;
}
#sec1-div1{
    flex: 1;
}
#sec1-div2{
    flex: 2;
    margin-top: 5%;
}
/*advantages properties*/
#comp1{
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.adv-point{
    width: 30%;
}
/*stats properties*/
#comp2{
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
    margin-top: 5%;
}
.sec1-card{
    width: 30%;
    height: auto;
    background: white;
    line-height: normal;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 3px 3px rgba(0,0,0,0.08);
    padding: 5%;
}
.card-text-stats{
    padding-top: 10px;
    font-size: 1.4rem;
    color: var(--primary-color);
}

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

    .div-row{
        width: 100vw;
        flex-direction: column;
        height: fit-content;
    }


}

@media screen and (max-width : 900px) and (min-width : 450px){

    #sec1-col1{
        flex: auto;
    }
    #sec1-col1{
        flex: auto;
    }
}
@media screen and (max-width : 450px){
    #comp2{
        margin-top: 10px;
        flex-direction: column;
        text-align: center;
    }
    .sec1-card{
        width: auto;
        height: auto;
        margin-top: 10px;
        padding: 1%;
    }
    #sec1-div2{
        margin-top: 10px;
    }
    #sec1-col1 {
        padding: 0;
    }
}
#sec1-col2{
    padding: 0% 5%;
    text-align: center;
}
#sec1-div3{
    flex: 2;
}
#illus8{
    padding: 1%;
}
#illus-text{
    padding: 7% 10%;
}
#sec1-div4{
    flex: 1;
    padding: 0 6%;
}
/*section 1 end*/
/*groups section*/
#groups{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
}
.group-intro{
    border-left: 5px solid var(--primary-color);
    flex: 1;
    display: flex;
    align-items: center;
    padding: 1% 0;
}
.group-logo{
    flex: 1;
    font-size: 2.2rem;
    text-align: center;
}
.group-text{
    flex: 3;
    font-size: 1rem;
    padding: 0 10px;
}
@media screen and (max-width : 900px) and (min-width : 450px){
    .group-intro{
        width: 50%;
        flex: none;
    }
}
@media screen and (max-width : 450px){
    .group-intro{
        background: white;
        margin: 0px 10px 10px 10px;
        flex: 1;
        flex-direction: row;
        height: fit-content;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 3px 3px rgba(0,0,0,0.08);
    }
    #groups{
        display: block;
        padding: 10px;
        background: var(--background-color);
    }
    .group-text{
        text-align: left;
        font-size: 1.4rem;
        padding: 0 14px 0 0;
    }
    .group-logo{
        font-size: 2.5rem;
    }
}
/*groups section end*/
/*section 2*/
#section2{
    padding: 0;
    height: fit-content;
    overflow: hidden;
    position: relative;
    background:  var(--background-color);
}
#sec2-col1{
    flex: 1;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    display: flex;
    flex-direction: row;
}
#sec2-div1{
    width: 52%;
}
#sec2-div2{
    width: 48%;
    padding: 1% 5%;
    padding-right: 0%;
}
#sec2-div2 h2{
    line-height: 112%;
    font-size: 3.6rem;
    color: var(--primary-color);
    letter-spacing: 12px;
}
/*#sec2-div2 h2 b{
    letter-spacing: 1px;
    font-size: 1rem;
    font-weight: 100;
}*/
.vedic-intro{
    font-size: 1.275rem;
}
@media screen and (max-width : 900px) and (min-width : 450px){
    #sec2-col1{
        flex-direction: column;
    }
    #sec2-div1{
        width: 100%;
        order: 2;
    }
    #sec2-div2{
        width: 100%;
        order: 1;
        padding: 1% 5%;
    }
    #illus-text{
        padding: 2% 6%;
    }
}
@media screen and (max-width : 450px){
    #sec2-col1{
        padding-top: 2%;
        flex-direction: column;
    }
    #sec2-div1{
        width: 100%;
        order: 2;
    }
    #sec2-div2{
        width: 100%;
        order: 1;
        padding: 1% 5%;
    }
    #sec2-div2 h2{
        font-size: 2.2rem;
        letter-spacing: 0;
    }
    #illus2{
        width: 150%;
        margin-left: -35px;
    }
    /*#sec2-div2 h2 b{
        font-size: 2.2rem;
        font-weight: 100;
    }*/
}
#sec2-col2{
    flex: 1;
    flex-direction: row;
    flex-wrap: wrap;
    /*background: ;*/
}
#sec2-div3{
    width: 52%;
    display: flex;
    justify-content: left;
    align-items: center;
    flex-direction: row;
    position: relative;
}
#sec2-div3-comp-text{
    width: 90%;
    background: white;
    text-align: center;
    border-top: 3px solid var(--primary-color);
    border-bottom: 3px solid var(--primary-color);
    max-height: fit-content;
    padding: 2% 15% 2% 2%;
    font-size: 1.2rem;
}
#clock-div{
    z-index: 5;
    position: absolute;
    right: 0;
}
#sec2-div4{
    width: 48%;
    padding-top: 0;
    align-items: center;
}
.workshop-card{
    width: 30%;
    height: 184px;
    background: white;
    line-height: normal;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 3px 3px rgba(0,0,0,0.08);
    padding: 3%;
}
.workshop-no-card{
    width: 20%;
    height: auto;
    padding: 0%;
    text-align: center;
}
.workshop-btn{
    width: 30%;
}
@media screen and (max-width : 900px){
    #sec2-col2 {
        flex-direction: column;
    }
    #sec2-div3{
        width: 100%;
    }
    #sec2-div4{
        width: 100%;
        padding-top: 25px;
        flex-direction: row;
    }
    .workshop-btn {
        width: auto;
    }
    #sec2-div3-comp-text{
        width: 100%;
        padding: 2% 13% 2% 2%;
    }
    #clock-div{
        z-index: 5;
        position: sticky;
        right: 40px;
    }
}
@media screen and (max-width : 450px){
    #sec2-div4{
        flex-direction: column;
    }
    .workshop-card{
        width: 100%;
        height: auto;
        padding: 3%;
    }
    .workshop-no-card{
        width: 100%;
        height: auto;
        padding: 10%;
    }
}
/*section 2 end*/
/*section 3*/
#section3{
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    background: var(--accent-color);
    background-image:radial-gradient(#FFD847 30%, transparent 0%);
    background-size: 80px 80px;
    background-position: 0px 80px, 100px 100px;
    /*background-attachment: fixed;*/
    padding-bottom: 50px;
}
.div-bubble{
    border-radius: 158px;
    background: white;
    border: 3px solid var(--primary-color);
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 40px;
}
.div-heading{
    text-align: center;
    letter-spacing: 0.4rem;
    font-weight: bold;
    font-size: 2.5rem;
}
#sec3-row2{
    display: flex;
    flex-direction: row;
}
#boy-size{
    width:80%;
}
#sum{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
#sum-col1{
    width: 40%;
}
#answer{
    text-align: center;
    box-shadow: none;
    border-bottom: none;
    font-size: 1rem;
    background: var(--text_grey_light_color);
    box-shadow: 0px 0px 20px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.08);
    border-radius: 30px;
}
#answer::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color: var(--text_grey_dark_color);
    opacity: 1; /* Firefox */
}
#timer{
    background: var(--primary-color);
    box-shadow: 0px 0px 20px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.08);
    border-radius: 30px;
    padding: 5%;
}
#sum-col2{
    width: 40%;
}
/*#solve-intro{
    position: relative;
}*/
#circle{
    display: flex;
    top: 150px;
    flex-direction: column;
}

#circle-col2{
    top: 80px;
}

.circle-col{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    flex-wrap: nowrap;
}
.rotate-left{
    transform: rotate(20deg);
}
.rotate-right{
    transform: rotate(-20deg);
}
.circle-small{
    height: 50px;
    width: 50px;
    border-radius: 50%;
    padding: 9px;
}
.circle-medium{
    height: 65px;
    width: 65px;
    border-radius: 50%;
    padding: 9px;
}
.circle-big{
    height: 80px;
    width: 80px;
    border-radius: 50%;
    padding: 12px;
}
@media screen and (max-width : 900px){
    #sec3-row2{
        flex-direction: column;
        width: -webkit-fill-available;
    }
    #solve{
        order: 1;
        flex: none;
    }
    #solve-intro{
        order: 2;
        flex: none;
        margin-top: 40px;
        padding: 0px 10px;
    }
    #solve-intro p{
        padding-top: 48px;
    }
    #boy{
        margin-top: 25px;
        order: 3;
    }
    #boy-size{
        width:auto;
        height: 50vh;
    }
}

@media screen and (max-width : 368px){
    .circle-col{
        flex-wrap: wrap;
        justify-content: space-around;
    }
}
/*section 3 end*/
/*section 4*/
/*section 4 end*/
/*section 5*/
.div6{
    /*background: var(--accent-color);*/
    padding-top: 30px;
    padding-bottom: 30px;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}

@media (max-width : 1025px){
    .div6{
        display: flex;
        flex-direction: column;
    }
}
/*section 5 end*/