@import url(https://fonts.googleapis.com/css?family=Lato);

*{
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}
body{
    font-family: 'DM Sans', sans-serif;
    
}
#container{
    min-height: 100%;
    
   
}


/* CSS for top part or header part */
.top{
    height: 50%;
    background: linear-gradient(123.75deg, #F5821F 1.87%, #FF5C00 120.46%);
    width: 100%;
    
    
    
    /* background-color: rgb(221, 91, 15); */
    /* background-image: linear-gradient(to right, rgb(47, 137, 255),rgb(6, 6, 31)); */
}
.chat{
    animation: chat 2s;
}
.body-header{
    color: white;
    margin-left: 15%;
    padding: 20px;
}
.body-header h5{
    margin: 1vh;
    font-size: x-large;
    padding: auto;
    
}
.body-header h6{
    margin: 1vh;
    font-size: x-large;
    padding: auto;
   
    
    
}
.body-header p{
    margin: 1vh;
    font-size: large;
    padding: auto;
    
}


#my-img{
    height: 12rem;
    width: 12rem;
    margin: auto;
    
    margin-left: 10vh;

}
#my-img img{
    height: 40%;
    width: 40%;
    border-radius: 50%;
    margin-top: -3vh;
    animation: try 4s;
}

/* 
2nd part that is the faq parts */
.bottom{
    margin-top: -30vh;
    margin-left: 5vh;
    margin-right: 5vh;
    height: 50%;
    background-color: white;
    
}

.heading h6{
    font-size: x-large;
}

.bottom .content{
    text-align: center;
    border: 1px solid #E4E4E4;
    box-sizing: border-box;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
} 

.content{
    
    border: 1px solid #E4E4E4;
    box-sizing: border-box;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    height: 100%;
    animation: content 6s;
    
}


.heading{
    margin-top: 4vh;
    /* margin-right: 45vh; */
    animation: heading 8s;
}

.content .ques1{
    margin-left: 15%;
    margin-right: 15%;
    font-size: small;
    margin-top: 4vh;
    align-items: center;
    border-radius: 10px 10px 10px 10px;
    padding: 8px;
    background: #FFFFFF;
    border: 1px solid #E1E1E1;
    box-sizing: border-box;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    animation: ques1 10s;
    
    
}

.content .ques2{
    margin-left: 15%;
    margin-right: 15%;
    font-size: small;
    margin-top: 4vh;
    background-color: whitesmoke;
    border-radius: 10px 10px 10px 10px;
    padding: 8px;
    background: #FFFFFF;
    border: 1px solid #E1E1E1;
    box-sizing: border-box;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    align-items: center;
    animation: ques2 11s;
}

.content .ques3{
    margin-top: 4vh;
    margin-left: 15%;
    margin-right: 15%;
    font-size: small;
    background-color: whitesmoke;
    align-items: center;
    border-radius: 10px 10px 10px 10px;
    padding: 8px;
    background: #FFFFFF;
    border: 1px solid #E1E1E1;
    box-sizing: border-box;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    animation: ques3 12s;

}

.content .ques4{
    margin-top: 4vh;
    margin-left: 15%;
    margin-right: 15%;
    font-size: small;
    background-color: whitesmoke;
    align-items: center;
    border-radius: 10px 10px 10px 10px;
    padding: 8px;
    background: #FFFFFF;
    border: 1px solid #E1E1E1;
    box-sizing: border-box;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    animation: ques4 13s;
    
}
.dot{
    height: 13px;
    width: 13px;
    background-color: orangered;
    border-radius: 50%;
    display: inline-block;
    padding: 6px;
    margin-right:10px;
}

.button{
    margin-top: 4vh;
    margin-left: 20%;
    margin-right: 20%;
    font-size: small;
    height: 50px;
    width: 40%;
    cursor: pointer;
    border-radius: 20px 20px 20px 20px;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #D1D1D1;
    box-sizing: border-box;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    margin-bottom: 5vh;
    animation: button 15s;
    
}

@keyframes try{
    from{
        margin-top:100%;
    }
    to{
        margin-top:-3vh;
    }
}

@keyframes ques1{
    from{
        margin-top:100%;
    }
    to{
        margin-top:4vh;
    }
}

@keyframes ques2{
    from{
        margin-top:100%;
    }
    to{
        margin-top:4vh;
    }
}

@keyframes ques3{
    from{
        margin-top:100%;
    }
    to{
        margin-top:4vh;
    }
}

@keyframes ques4{
    from{
        margin-top:100%;
    }
    to{
        margin-top:4vh;
    }
    
}
@keyframes button{
    from{
        margin-top:100%;
    }
    to{
        margin-top:4vh;
    }
}

@keyframes heading{
    from{
        margin-top:100%;
    }
    to{
        margin-top:4vh;
    }
}
@keyframes content{
    from{
        margin-top:100%;
    }
    to{
        margin-top:0%;
    }
}


@keyframes chat{
    from{
        margin-top:100%;
    }
    to{
        margin-top:0%;
    }
} 
@keyframes header{
    from{
        margin-top:100%;
    }
    to{
        margin-top:0%;
    }
} 


 @media only screen and (max-width:568px){
    .heading{
        font-size: small;
        margin-top: 20%;
        animation: heading1 8s;
     }
     @keyframes try1{
        from{
            margin-top:100%;
        }
        to{
            margin-top:20%;
        }
    }
    

    #my-img img{
        margin-top: -2vh;
        margin-left: -4vh;
        animation:try1 4s;    
     }

    @keyframes try1{
        from{
            margin-top:100%;
        }
        to{
            margin-top:10vh;
        }
    }
    

    .bottom{
        margin-top: -10vh;
    }
    
    header{
         padding-top: 300px;
    }
   

 }