*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#fafafa;
    color:#22246d;
    line-height:1.8;
}

img{
    display:block;
    width:100%;
    height:auto;
}

.site-header{
    background:#ffffff;
    border-bottom:1px solid #dddddd;
    padding:25px 40px;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo-area{
    display:flex;
    align-items:center;
    gap:20px;
}

.logo-area img{
    width:120px;
}

.brand h1{
    font-size:2rem;
    color:#1c1f6d;
    margin-bottom:5px;
}

.brand p{
    font-size:0.9rem;
    color:#d05a8d;
}

.main-nav{
    display:flex;
    gap:35px;
}

.main-nav a{
    text-decoration:none;
    color:#1c1f6d;
    font-size:1.15rem;
    transition:.2s;
}

.main-nav a:hover{
    color:#e87f52;
}

.main-nav .active{
    color:#e87f52;
}

.page-title{
    max-width:1200px;
    margin:50px auto 30px auto;
    padding:0 20px;

    display:flex;
    justify-content:space-between;
    align-items:center;
}

.page-title h2{
    font-size:3rem;
    color:#d53ba4;
}

.circle{
    width:60px;
    height:60px;
    border-radius:50%;
    background:#d53ba4;
}

.row{
    max-width:1200px;
    margin:30px auto;
    padding:0 20px;

    display:grid;
    grid-template-columns:30% 70%;
    gap:25px;
    align-items:center;
}

.row.reverse{
    grid-template-columns:70% 30%;
}

.image img{
    border-radius:22px;
}

.box{
    background:#ffffff;
    padding:26px;
    border-radius:25px;
}

.box p{
    margin-bottom:20px;
    font-size:1.25rem;
}

.box p:last-child{
    margin-bottom:0;
}

.pink{
    border:2px solid #eb69c4;
}

.orange{
    border:2px solid #f0804c;
}

.purple{
    border:2px solid #8a63d2;
}

.full{
    max-width:1200px;
    margin:30px auto;
}

.site-footer{
    text-align:center;
    padding:30px;
    margin-top:50px;
    color:#ffffff;
    background:#22246d;
}

@media (max-width:900px){

    .site-header{
        flex-direction:column;
        gap:25px;
        text-align:center;
    }

    .main-nav{
        flex-wrap:wrap;
        justify-content:center;
        gap:18px;
    }

    .row,
    .row.reverse{
        grid-template-columns:1fr;
    }

    .page-title{
        flex-direction:column;
        gap:20px;
    }

    .page-title h2{
        font-size:2.3rem;
    }

    .box p{
        font-size:1rem;
    }
}