body 
{
    font-family: "Open Sans", sans-serif;
    background: var(--p-violet);
}

h1 
{
    font-family: "Poppins", sans-serif;
    font-size: 1.56rem;
    color: white;
}


p
{
    font-size: 1.050rem;
    color: #fff;
}

.container,
.main,
.header,
.middle-section,
.info-section,
.footer,
.icon
{
    display: flex;
}

.container,
.main
.footer,
.icon
{
    align-items: center;
    justify-content: center;
}


.container
{
    background:var(--p-violet) url('../bg-mobile.svg');
    background-repeat: no-repeat;
    background-size: contain;
    padding: 45px 30px; 
    height: 100%;
}

.container
.main
{
    gap: 40px;
    flex-flow: column wrap;
    width: 100%;
}


.main
.header
{
    justify-content: flex-start;
}

.main
.header
img
{
    width: 120px;
}


.main
.middle-section
{
    flex-flow: column wrap;
    justify-content: center;
    gap: 20px;
    text-align: center; 
}


.main
.middle-section
img
{
    width: 98%;

}


.main
.middle-section
.info-section
{
    flex-flow: column wrap;
    margin-top: 40px;
    gap: 30px;
    align-items: center;
}

.main
.middle-section
.info-section
.btn
{
    width: 200px;
    padding: .6rem;
    border-radius: 1rem;
    background: white;
    border: 1px solid white;
    cursor: pointer;
    color: var(--p-violet);
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.274);
}

.main
.middle-section
.info-section
.btn:hover
{
    background: var(--s-magenta);
    border: 1px solid var(--s-magenta);
    color: white;
    transition: 0.3s ease-in-out;
}

.main
.footer
{
    padding: 1rem;
    gap: 15px;
    justify-content: center;
}

.main
.footer
.icon
{
    border: 1px solid white;
    color: white;
    width: 35px;
    height: 35px;
    border-radius: 1rem;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.main
.footer
.icon:hover
{
    color:var(--s-magenta);
    border: 1px solid var(--s-magenta);
}