/* Global Classes */ 

.title-text{
    font: normal bold 50px/ 72px var(--domine);
}

.text-uppercase{
    text-transform: uppercase;
}

/* Buttons */ 

.button{
    padding: .8rem 2.2rem;
    font: normal 500 16px/20px var(--domine);
    position: relative;
    border: 3px rgba(20, 30, 254, 0.1);
    border-radius: 25px;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
    width: 200px;
    padding: 15px 0;
    text-align: center;
    margin: 20px 10px;
    color: #fff;
}

.button.primary-button{
    width: 200px;
    padding: 15px 0;
    text-align: center;
    margin: 20px 10px;
    border-radius: 25px;
    border: 3px #854fee;
    background: rgba(20, 30, 254, 0.2);
    color: black;
    cursor: pointer;
    overflow: hidden;
    box-shadow: inset 0 0 0 0 rgba(20, 30, 254, 0.1);
    transition: ease-out 0.3s;

}

.button.primary-button:hover{
    box-shadow: inset 200px 0 0 0 #854fee;
    cursor: pointer;
    color: white;
}

.button.secondary-button{
    width: 200px;
    padding: 15px 0;
    text-align: center;
    margin: 20px 10px;
    border-radius: 25px;
    border: 3px #854fee;
    background: rgba(20, 30, 254, 0.2);
    color: black;
    cursor: pointer;
    overflow: hidden;
    box-shadow: inset 0 0 0 0 rgba(20, 30, 254, 0.1);
    transition: ease-out 0.3s;

}

.button.secondary-button:hover{
    box-shadow: inset 200px 0 0 0 #854fee;
    cursor: pointer;
    color: white;
}

/* About Area */

.para{
    font: 20px/ 22px var(--domine);
}

.About-area-heading{
    font: normal bold 40px/ 32px var(--domine);
}