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

body{

    font-family:'Poppins',sans-serif;

    background:#f3f5fb;

    display:flex;

    justify-content:center;

    padding:30px;

}

/* Container */

.container{

    width:100%;

    max-width:1350px;

    background:#fff;

    border-radius:25px;

    padding:30px;

    box-shadow:
        0 10px 35px rgba(0,0,0,.08);

}

/* Header */

.header{

    display:flex;

    justify-content:center;

    margin-bottom:35px;

}

.logo{

    width:420px;

    max-width:100%;

    height:auto;

    transition:.3s;

    user-select:none;

}

.logo:hover{

    transform:scale(1.03);

}

/* Grid */

.grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:25px;

}

/* Cards */

.card{

    background:#fff;

    border-radius:20px;

    padding:40px;

    text-align:center;

    border:1px solid #ececec;

    cursor:pointer;

    transition:.30s;

    box-shadow:
        0 5px 15px rgba(0,0,0,.08);

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:
        0 20px 35px rgba(0,0,0,.15);

}

.card i{

    font-size:95px;

    color:#28278d;

    margin-bottom:25px;

}

.card h2{

    color:#28278d;

    font-size:34px;

    font-weight:600;

}

/* Sync */

.sync{

    margin-top:30px;

    background:#fff;

    border-radius:20px;

    padding:30px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:25px;

    box-shadow:
        0 5px 15px rgba(0,0,0,.08);

}

.sync i{

    font-size:70px;

    color:#28278d;

}

.sync span{

    font-size:36px;

    color:#28278d;

    font-weight:600;

}

.sync small{

    font-size:24px;

}

/* Tablet */

@media(max-width:1024px){

.grid{

    grid-template-columns:repeat(2,1fr);

}

.logo{

    width:340px;

}

.card h2{

    font-size:26px;

}

.card i{

    font-size:80px;

}

.sync span{

    font-size:28px;

}

}

/* Mobile */

@media(max-width:768px){

.grid{

    grid-template-columns:1fr;

}

.logo{

    width:240px;

}

.card{

    padding:35px;

}

.card h2{

    font-size:22px;

}

.sync{

    flex-direction:column;

    text-align:center;

}

.sync span{

    font-size:22px;

}

.sync i{

    font-size:55px;

}

}