.hero-flags { display:flex; flex-direction:column; align-items:flex-end; gap:18px; }
.flag-row { display:flex; gap:18px; align-items:center; }
/* rectangular flags: remove circular box and show flags full-size */
.flag-badge { width:160px; height:100px; border-radius:6px; background:transparent; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px rgba(15,23,42,0.08); transition:transform .28s ease, box-shadow .28s ease; overflow:hidden; }
.flag-badge:hover{ transform:translateY(-6px) scale(1.02); box-shadow:0 20px 36px rgba(15,23,42,0.12); }
.flag-badge[title]{cursor:pointer}
.flag-img{ width:100%; height:100%; display:block; object-fit:cover; }
.flag-caption { color:#0f172a; font-weight:700; margin-top:8px; text-align:right; }
.header-text h2, .header-text h6, .header-text p { color:#0f172a !important; }
/* remove heavy tilts for rectangular flags, keep subtle stagger */
.flag-row .flag-badge:nth-child(1){ transform:translateY(-6px); }
.flag-row .flag-badge:nth-child(2){ transform:translateY(-2px); }
.flag-row .flag-badge:nth-child(3){ transform:translateY(2px); }
.flag-row .flag-badge:nth-child(4){ transform:translateY(6px); }
/* lift the banner content a bit to avoid the calculator image overlap */
.main-banner { padding-top:340px !important; }
@media (max-width:991px){ .hero-flags{flex-direction:row; justify-content:center;} .flag-badge{width:120px;height:72px} .flag-img{width:100%;height:100%} .flag-caption{font-size:13px} .main-banner{padding-top:260px !important} }