/* =====================================================
GLOBAL
===================================================== */

body{
font-family: Arial, Helvetica, sans-serif;
background:#f7f9fc;
margin:0;
padding:0;
color:#333;
}

a{
color:#0a58ca;
text-decoration:none;
}

a:hover{
text-decoration:underline;
}

/* =====================================================
HEADER
===================================================== */

header{
background:#0a58ca;
color:#fff;
padding:25px 15px;
text-align:center;
}

header h1{
margin:0;
font-size:28px;
}

header p{
margin:5px 0 0;
font-size:16px;
}

/* =====================================================
LAYOUT
===================================================== */

.container{
max-width:1100px;
margin:auto;
padding:20px;
}

/* =====================================================
HERO SECTION
===================================================== */

.hero{
position:relative;
text-align:center;
padding:80px 20px;
min-height:400px;
border-radius:16px;
background:#e6f0ff url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/World_map_blank_without_borders.svg/1200px-World_map_blank_without_borders.svg.png') center center no-repeat;
background-size:cover;
margin-bottom:30px;
}

.hero-content{
position:relative;
z-index:1;
color:#333;
}

.hero-content h2{
font-size:28px;
color:#0a58ca;
margin:0 0 12px;
}

.hero-content p{
font-size:16px;
margin:0 0 20px;
color:#555;
}

/* =====================================================
COUNTRY DOTS ANIMATION
===================================================== */

.country-dots span{
position:absolute;
width:12px;
height:12px;
border-radius:50%;
background:#0a58ca;
opacity:.8;
animation:pulseDot 4s infinite;
}

@keyframes pulseDot{

0%{transform:scale(.8);opacity:.4}
50%{transform:scale(1.4);opacity:.9}
100%{transform:scale(.8);opacity:.4}

}

.india{top:56%;left:63%}
.usa{top:40%;left:30%}
.uk{top:35%;left:48%}
.canada{top:30%;left:28%}
.australia{top:73%;left:78%}

/* =====================================================
BUTTONS
===================================================== */

.hero-buttons a{
display:inline-block;
margin:6px 8px 0;
padding:14px 22px;
background:#0d6efd;
color:#fff;
border-radius:10px;
font-weight:600;
transition:.3s;
}

.hero-buttons a:hover{
opacity:.9;
}

/* =====================================================
CARDS
===================================================== */

.card{
background:#fff;
padding:20px;
margin-bottom:20px;
border-radius:12px;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

h2{
color:#0a58ca;
margin-top:0;
}

/* =====================================================
GRID SYSTEM
===================================================== */

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:10px;
}

.grid a{
display:block;
padding:10px;
background:#f1f4ff;
border-radius:6px;
text-align:center;
font-weight:600;
}

/* =====================================================
CITY DIRECTORY
===================================================== */

.city-directory{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
gap:8px;
list-style:none;
padding:0;
margin:0;
}

.city-directory li a{
display:block;
padding:8px;
background:#f4f6fb;
border-radius:6px;
text-align:center;
font-weight:600;
}

/* =====================================================
TRENDING LINKS
===================================================== */

.trending li{
margin-bottom:8px;
}

/* =====================================================
FOOTER
===================================================== */

footer{
text-align:center;
font-size:14px;
padding:20px;
background:#eef2f7;
margin-top:40px;
}

/* =====================================================
RESPONSIVE
===================================================== */

@media(max-width:768px){

.hero{
padding:50px 20px;
min-height:300px;
}

.hero-content h2{
font-size:22px;
}

.container{
padding:15px;
}

}

/* =====================================================
DARK MODE
===================================================== */

@media (prefers-color-scheme: dark){

body{
background:#121212;
color:#e5e5e5;
}

.card{
background:#1c1c1c;
}

.hero-content p,
.card p{
color:#cfcfcf;
}

.country-dots span{
background:#7db4ff;
}

footer{
background:#1c1c1c;
color:#ccc;
}

}