/** style.css - OGS vCard **/
:root{
  --blue:#1E2A78;
  --orange:#F58220;
  --white:#ffffff;
}

*{box-sizing:border-box}

body.ogs-bg{
  background:#ffffff;
  color:var(--white);
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

/* Card */
.ogs-card{
  width:100%;
  max-width:100%;
  background:transparent;
}

/* Banner */
.banner-wrap{position:relative;overflow:visible}
.banner-img{
  width:100%;height:350px;object-fit:cover;border-bottom-left-radius:0px;border-bottom-right-radius:0px;display:block;filter:brightness(0.85);
}
.logo-top{position:absolute;left:20px;top:20px;opacity:0.9;max-width:45%;height:auto}

/* Profile circle - half on banner, half below */
.profile-wrap{position:absolute;left:50%;transform:translateX(-50%);bottom:-90px;width:100%;display:flex;justify-content:center;pointer-events:none}
.profile-circle{width:180px;height:180px;border-radius:50%;background:#fff;padding:0px;box-shadow:0 10px 30px rgba(0,0,0,0.35);overflow:hidden;border:3px solid #000}
.profile-img{width:100%;height:100%;object-fit:cover;display:block}

/* Text */
.name{font-size:22px;font-weight:700;color:#000;margin-top:90px}
.position{font-size:14px;color:#000;letter-spacing:1px}

/* Socials */
.socials{display:flex;justify-content:center;gap:18px;margin-top:6px}
.social{width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.06);color:var(--white);text-decoration:none;box-shadow:0 6px 18px rgba(0,0,0,0.2);transition:transform .25s, box-shadow .25s}
.social i{font-size:18px}
.social:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,0.35)}

/* wobble animation for icons - gentle vacillement */
@keyframes wobble {
  0% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(-2deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-3px) rotate(2deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
.social{animation: wobble 3.6s ease-in-out infinite; transform-origin:center bottom;}

/* Visit button */
.visit-btn{display:inline-flex;align-items:center;gap:8px;background:var(--orange);color:var(--white);border-radius:30px;padding:10px 18px;font-weight:600;box-shadow:0 8px 22px rgba(0,0,0,0.25);text-decoration:none}
.visit-btn i{transform:translateY(1px)}

/* Info card */
.info-card{background:#143970;border-radius:16px;padding:18px;margin-top:18px}
.info-row{display:flex;align-items:center;gap:12px;padding:8px 0;color:var(--white);font-size:14px}
.info-row i{width:28px;text-align:center;background:rgba(255,255,255,0.06);padding:8px;border-radius:8px}

/* Floating contact button */
.contact-btn{
  position:fixed;right:18px;bottom:18px;width:64px;height:64px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;color:#fff;font-size:22px;box-shadow:0 12px 30px rgba(0,0,0,0.35);z-index:9999;text-decoration:none
}
.contact-btn:active{transform:scale(.98)}

/* Page show animation */
.ogs-card{opacity:0;transform:translateY(18px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.9,.3,1)}
.ogs-card.ogs-show{opacity:1;transform:translateY(0)}

/* Responsive tweaks */
@media (max-width:480px){
  .banner-img{height:250px;border-bottom-left-radius:30px;border-bottom-right-radius:30px}
  .profile-circle{width:140px;height:140px;border:3px solid #000}
  .name{font-size:20px;margin-top:95px}
}
i.fab.fa-facebook-f {color: blue;}
i.fab.fa-whatsapp {color: green;}
i.fab.fa-instagram {color: #ff6700;}
i.fab.fa-linkedin-in {color: #57a2ff;}