/* General Styles */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  color: #333;
}

#visitor-info {
color: whitesmoke;
margin: auto;
text-align: center;
justify-content: center;
width: 100%;
font-size: 0.7rem; /* Scalable unit */
}

.about {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
padding: 10px 0;
}

.span-card-wrapper {
display: flex;
width: 85%;
justify-content: center;
align-items: center;
min-height: 150px;
padding: 30px 0 40px;
}

.span-card {
width: 100%;
border-radius: 50%;
padding: 10px;
min-height: 150px;
}

.orange-bg {
width: 80%;
background-color: #ff8800de;
background-image: radial-gradient(#f38609 2px, transparent 2px);
background-size: 20px 20px;
text-align: center;
}

.orange-bg img {
width: 65%;
}

/* Card Styles */
.card {
height: 190px;
width: auto;
min-width: 295px;
border-radius: 25px;
margin: 10px;
text-align: center;
box-shadow: 10px 5px 5px #1b2549;
}

.shadow {
box-shadow: 5px 8px 10px #1b2549;
}

.name {
background-image: url("../img/about/name.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}

.card:hover {
background-color: #f38609;
}

.signs {
background-image: url("../img/about/signs.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}

.birthday {
background-image: url("../img/about/birthday.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}

.age {
background-image: url("../img/about/age.png");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
font-size: larger;
}

.age p {
padding-top: 68px;
font-weight: bolder;
}

/* World Map Section */
#map-container {
width: 85%;
height: 100vh;
max-height: 700px;
position: relative;
margin: 0 auto; /* Center horizontally */
display: flex;
justify-content: center;
align-items: center; /* Center vertically */
padding-top: 50px;
padding-bottom: 40px;
}

#map {
width: 100%;
height: 100%; /* Ensure the map takes up space */
border-radius: 15px;
display: block; /* Ensure it takes up space */
}

/* Responsive Layouts */
@media screen and (max-width: 1324px) {
.card {
    width: 35%;
}

.span-card-wrapper {
    width: 95%;
}
}

@media screen and (max-width: 1040px) {
.span-card-wrapper .span-card img {
    width: 90%;
}
}

@media screen and (max-width: 995px) {
#map-container {
  width: 70%;
  max-height: 500px;
}
}

@media screen and (max-width: 800px) {
.span-card-wrapper .span-card {
    width: 100%;
}
.span-card-wrapper .span-card img {
    width: 100%;
}
}

@media screen and (max-width: 700px) {
.about {
    padding: 5px 2px;
}

.card {
    width: 65%;
    padding: 15px 0;
}

.orange-bg {
    width: 100%;
    padding: 10px 0px;
}

.span-card-wrapper {
    width: 95%;
    padding-left: 8px;
    padding-right: 8px;
}

#map-container {
  width: 80%;
  max-height: 300px;
}
}

@media screen and (max-width: 600px) {
.span-card-wrapper {
    width: 100%;
}

.span-card-wrapper .span-card {
    width: 100%;
}

.span-card-wrapper .span-card img {
    width: 100%;
}
#map-container {
  height: 80vh; /* Adjust height for small screens */
}
}

@media screen and (max-width: 400px) {
.span-card-wrapper .span-card .world-map table {
    font-size: 8px;
}
}