*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Arial,sans-serif;background:#fff;color:#222}
.header{
     background:#fff;
    height:90px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:0 40px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.hero{
     width:100%;
    background:#fff;
}

.hero-image{
    width:100%;
    height:auto;
    display:block;
}
.lookup-section{
    width:100%;
    background:#fff;
    padding:60px 20px;
}
.lookup-card{
    width:100%;
    max-width:500px;
    margin:0 auto;
    background:#fff;
    border-radius:18px;
    padding:35px;
    box-shadow:0 8px 30px rgba(0,0,0,.12);
}
.lookup-card h2{text-align:center;margin-bottom:10px;color:#003a8c}
.lookup-card p{text-align:center;color:#666;margin-bottom:20px}
.input-group{display:flex;border:1px solid #ccc;border-radius:10px;overflow:hidden}
.country-code{background:#f1f1f1;padding:14px 16px;font-weight:bold}
.input-group input{flex:1;border:none;padding:14px;font-size:16px;outline:none}
#fieldError{display:block;color:#d32f2f;height:20px;margin:8px 0}
.submit-btn{width:100%;padding:15px;background:#0056b3;color:#fff;border:none;border-radius:10px;font-weight:bold;font-size:16px;cursor:pointer}
.submit-btn:hover{background:#003f87}
.overlay{display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.5);
    justify-content:center;
    align-items:center;
    z-index:9999;}
.overlay.show{display:flex}
.logo{
    height:55px;
    width:auto;
}
.popup{background:#fff;border-radius:16px;padding:24px;max-width:380px;width:100%}
.popup-content{background:#e8f5e9;border-radius:12px;padding:18px;display:flex;gap:12px}
.popup-content.error{background:#ffebee}
.icon{width:34px;height:34px;border-radius:50%;background:#2e7d32;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:bold}
.popup-content.error .icon{background:#c62828}
.popup-text{line-height:1.6}
.close-btn{margin-top:18px;border:none;background:#0056b3;color:#fff;padding:10px 18px;border-radius:8px;float:right}
.loader{display:none;
    position:fixed;
    inset:0;
    background:rgba(255,255,255,.5);
    justify-content:center;
    align-items:center;
    z-index:9999;}
.loader.active{display:flex}
.spinner{width:48px;height:48px;border:5px solid #ddd;border-top-color:#0056b3;border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:768px){
.logo{
    height:40px;
}

.hero{
    height:60vh;
}

.lookup-section{
    padding:40px 15px;
}

.lookup-card{
    padding:25px;
}
.header{
    height:40px;}
}