html, body {
  margin: 0;
  padding: 0;
}

#map {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
}

#selectContainer {
  position: fixed;
  top: 0;
  z-index: 1000;
  width: 100%;
  padding: 11px 0;
}

#countrySelect {
  width: 200px;
  margin: 0 auto;
}

#location-pop{
  height: 40px !important;
  width: 50px !important;
}

.modal-content {
    border-radius: 18px;
}

.modal-header {
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}

#forecastContainer .card {
    border-radius: 14px;
}



.leaflet-bar.easy-button-container .easy-button-button {

    width: 42px !important;

    height: 42px !important;

    line-height: 42px !important;

   background: rgba(25,135,84,0.9) !important;

    backdrop-filter: blur(8px);

    color: white !important;

    border-radius: 10px !important;

    border: none !important;

    box-shadow: 0 2px 8px rgba(0,0,0,0.25);

    transition: all 0.3s ease;

}

/* ICONS */

.leaflet-bar.easy-button-container .easy-button-button i {

    font-size: 18px !important;

    color: white !important;

}


.leaflet-bar.easy-button-container .easy-button-button:hover {

    background-color: #157347 !important;

    transform: scale(1.05);

}

#weatherModal .table td {

    padding: 14px;

    vertical-align: middle;

}

#weatherModal i {

    width: 24px;

    margin-right: 8px;

}

#weatherIcon {

    filter: drop-shadow(
        0 4px 8px rgba(0,0,0,0.2)
    );

}

.weather-top-container {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 20px;

    margin-bottom: 30px;

}

.weather-location {

    flex: 1;

}

.weather-location h3 {

    font-weight: 700;

    font-size: 28px;

}

.weather-main-icon img {

    width: 100px;

}

.weather-temp-container {

    text-align: center;

}

.weather-temp-container h1 {

    font-size: 90px;

    font-weight: 700;

    line-height: 1;

    margin: 0;

}

.weather-temp-container span {

    font-size: 30px;

    font-weight: 600;

}

.weather-temp-container p {

    color: #666;

    font-size: 18px;

    margin-top: 10px;

    text-transform: capitalize;

}

.weather-extra {

    display: flex;

    flex-direction: column;

    gap: 15px;

    font-size: 18px;

}

.weather-extra i {

    width: 24px;

    color: #0d6efd;

}

.forecast-wrapper {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 15px;

}

.forecast-card {

    background: #f8f9fa;

    border-radius: 18px;

    padding: 20px;

    text-align: center;

    transition: all 0.3s ease;

    box-shadow: 0 2px 8px rgba(0,0,0,0.08);

}

.forecast-card:hover {

    transform: translateY(-5px);

}

.forecast-card h5 {

    font-weight: 700;

    margin-bottom: 20px;

}

.forecast-card i {

    margin-bottom: 15px;

    color: #0d6efd;

}

.forecast-card h4 {

    font-size: 28px;

    font-weight: 700;

}

.forecast-card p {

    color: #666;

}

@media(max-width:768px){

    .forecast-wrapper {

        grid-template-columns: 1fr;

    }

    .weather-top-container {

        flex-direction: column;

        text-align: center;

    }

}
.card-body.img{
    color:blue;
}
#preloader{
    position:fixed;
    inset:0;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:999999;
}

.loader{
    position:relative;
    width:180px;
    height:180px;
}

.globe{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:90px;
    color:#29b6f6;
    animation:spinGlobe 6s linear infinite;
}

.plane{
    position:absolute;
    inset:0;
    animation:orbit 2.5s linear infinite;
}

.plane i{
    position:absolute;
    top:-12px;
    left:50%;
    transform:translateX(-50%);
    font-size:28px;
    color:#ffc107;
}

@keyframes orbit{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes spinGlobe{

    from{
        transform:rotateY(0deg);
    }

    to{
        transform:rotateY(360deg);
    }

}