

#main{
    width:100%;
    overflow:hidden;
    height:auto;
    
    
}

/*********************************/
#section1{
    width:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    
}
#imageContainer{
    width:100%;
    
    display:flex;
    justify-content:center;
    padding-bottom:4%;
}

#vuca{
    width:50%;
    margin-top:4%;
}


/*********************************/

#section2{
    width:100%;
   
    padding-top:1%;
    display:flex;
    flex-direction:column;
}

#motto1{
    color:#6bd3e6;
    font-size:40px;
    
}

#motto2{
    color:#3399ff;
    font-size:40px;
   
}

/****/
#section3{
    width:100%;
    padding-top:1%;
    padding-bottom:2%;
    display:flex;
    flex-direction:column;
}

#equationContainer{
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content:left;
    align-items:center;
    text-align:left;
    height:auto;
    margin:auto;
}

.brackets {
    
    color: #3399ff;
    
    font-size: 160px;
    
}

.mathSymbols {
    color: #3399ff;
    font-size: 100px;
    font-weight:500;
    margin-top:25px;
    padding-left:1%;
    padding-right:1%;
    
}

.equationText {
    font-size: 40px;
    margin-top:30px;
    font-weight:400;
    color:white;

}


h2{
    color:#3399ff;
   
}

#aiIcon{
    width:5%;
    z-index:9;
}

/******RESONSIVE EQUATION ******************/

@media screen and (max-width: 1700px) and (min-width: 1300px) {

.brackets {
    color: #3399ff;
    font-size: 110px;
    
}

.mathSymbols {
    
    font-size: 70px;
    font-weight:500;
    margin-top:25px;
    padding-left:1%;
    padding-right:1%;
    
}

.equationText {
    font-size: 30px;
    margin-top:30px;
    font-weight:300;
}
}
@media screen and (max-width: 1300px) and (min-width: 1000px) {

.brackets {
    font-size: 90px;
    
}

.mathSymbols {
    
    font-size: 50px;
    font-weight:500;
    margin-top:22px;
    padding-left:1%;
    padding-right:1%;
    
}

.equationText {
    font-size: 24px;
    margin-top:30px;
    font-weight:300;
}
}


@media screen and (max-width: 1000px) and (min-width: 750px) {



.brackets {
    font-size: 65px;
    
}

.mathSymbols {
    
    font-size: 48px;
    font-weight:500;
    margin-top:14px;
    padding-left:1%;
    padding-right:1%;
    
}

.equationText {
    font-size: 22px;
    margin-top:15px;
}
}



@media screen and (max-width: 750px) and (min-width: 650px) {


.brackets {
    font-size: 48px;
    
}

.mathSymbols {
    
    font-size: 28px;
    font-weight:500;
    margin-top:14px;
    padding-left:1%;
    padding-right:1%;
    
}

.equationText {
    font-size: 20px;
    margin-top:18px;
    font-weight:300;
}
}

@media screen and (max-width: 650px) and (min-width: 540px) {



.brackets {
    font-size: 44px;
    
}

.mathSymbols {
    
    font-size: 27px;
    font-weight:500;
    margin-top:14px;
    padding-left:1%;
    padding-right:1%;
    
}

.equationText {
    font-size: 17px;
    margin-top:13px;
    font-weight:200;
}
}

@media screen and (max-width: 540px) and (min-width: 490px) {


.brackets {
    font-size: 42px;
    
}

.mathSymbols {
    
    font-size: 25px;
    font-weight:500;
    margin-top:14px;
    padding-left:1%;
    padding-right:1%;
    
}

.equationText {
    font-size: 15px;
    margin-top:13px;
    font-weight:200;
}
}

@media screen and (max-width: 490px) and (min-width: 350px) {



.brackets {
    font-size: 40px;
    
}

.mathSymbols {
    
    font-size: 23px;
    font-weight:500;
    margin-top:14px;
    padding-left:1%;
    padding-right:1%;
    
}

.equationText {
    font-size: 12px;
    margin-top:13px;
    font-weight:200;
}
}



/*******RESPONSIVE VUCA*****************/

@media screen and (max-width: 1400px) and (min-width: 1000px) {

#vuca{
    width:90%;
    margin-top:4%;
}

}

@media screen and (max-width: 1000px) and (min-width: 300px) {

#vuca{
    width:100%;
    margin-top:2%;
}

}

/**********RESPONSIVE MOTTOS**************/ 
@media screen and (max-width: 1000px) and (min-width: 300px) {
#motto1{
    color:#6bd3e6;
    font-size:30px;
   
}

#motto2{
    color:#3399ff;
    font-size:30px;
    
}

#motto3{
    color:#3399ff;
    font-size:30px;
    
}


}