*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{

    background:#ffffff;
    color:#222;
}



.logo img{

    width:110px;
}



.card-principal{

    width:92%;

    margin:20px auto;

    background:#F7F7FD;

    border-radius:28px;

    padding:55px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

.lado-esquerdo{

    width:48%;
}

.lado-direito{

    width:42%;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;
}

h1{

    font-size:58px;

    line-height:72px;

    font-weight:700;

    margin-bottom:12px;
}

span{

    color:#FDBA12;
}

.linha{

    width:80px;

    height:5px;

    background:#6C46E9;

    border-radius:30px;

    margin-bottom:45px;
}

.apps{

    display:flex;

    flex-direction:column;

    gap:30px;
}

.app{

    background:white;

    height:78px;

    border:2px solid #8A63FF;

    border-radius:15px;

    display:flex;

    align-items:center;

    gap:20px;

    padding-left:35px;

    text-decoration:none;

    color:#222;

    font-size:24px;

    font-weight:600;

    transition:.25s;

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

.app:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(0,0,0,.15);
}

.app img{

    width:42px;
}

.circulo{

    width:260px;

    height:260px;

    border-radius:50%;

    background:#E9DDFD;

    position:absolute;

    z-index:0;
}

.img99{

    width:135px;

    position:absolute;

    right:70px;

    top:-10px;

    z-index:2;

    filter:drop-shadow(8px 8px 0 #6C46E9);
}

.imgUber{

    width:150px;

    position:absolute;

    left:40px;

    top:120px;

    z-index:2;

    filter:drop-shadow(8px 8px 0 #6C46E9);
}

.dica{

    position:absolute;

    bottom:-35px;

    width:360px;

    background:#F5F1FF;

    border:2px solid #B69CFF;

    border-radius:18px;

    padding:18px;

    display:flex;

    gap:15px;
}

.icone{

    width:55px;

    height:55px;

    border-radius:12px;

    background:#6C46E9;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:24px;
}

.dica h4{

    color:#6C46E9;

    margin-bottom:8px;
}

.dica p{

    font-size:14px;

    line-height:22px;
}

/* ---------- UBER ---------- */

.lado-esquerdo p{

    font-size:21px;

    color:#555;

    line-height:34px;

    margin-bottom:35px;
}

.vantagens{

    display:flex;

    gap:35px;

    margin-bottom:40px;
}

.vantagens div{

    font-size:16px;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:10px;
}

.vantagens i{

    color:#6C46E9;

    font-size:24px;
}

.btn-comecar{

    width:420px;

    height:75px;

    background:#6C46E9;

    color:white;

    text-decoration:none;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    border-radius:15px;

    font-size:24px;

    font-weight:600;

    box-shadow:0 12px 30px rgba(108,70,233,.35);

    transition:.25s;
}

.btn-comecar:hover{

    transform:translateY(-3px);
}

.btn-comecar i{

    width:45px;

    height:45px;

    background:white;

    color:#6C46E9;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;
}

.celular{

    width:260px;

    z-index:2;
}