<div class="right-content">
    <div class="col-md-8 col-lg-6 col-xl-4">
        <div class=" card justify-content-center" style="border-radius: 35px;">
            <div class="card-body p-4">

                <div class="d-flex">
                    <h6 class="flex-grow-1">
                        <%= weatherInfo.location %>
                    </h6>
                </div>

                <div class="d-flex flex-column text-center mt-5 mb-4">
                    <h6 class="display-4 mb-0 font-weight-bold" style="color: #1C2331;">
                        <%= weatherInfo.temperature %>Â°C
                    </h6>
                    <span class="small" style="color: #868B94">
                        <%= weatherInfo.description %>
                    </span>
                </div>
                <i class="bi bi-wind"></i>

                <div class="d-flex align-items-center">
                    <div class="flex-grow-1" style="font-size: 1rem;">
                        <div>
                            <img src="https://img.icons8.com/color/48/000000/wind.png" width="20px" /> <span
                                class="ms-1">
                                Wind Speed: <%= weatherInfo.wind %> km/h
                            </span>
                        </div>
                        <div><img
                                src="https://img.icons8.com/external-justicon-flat-justicon/64/000000/external-humidity-weather-justicon-flat-justicon-1.png"
                                width="20px" /> <span class="ms-1">
                                Humidity: <%= weatherInfo.humidity %>% </span>
                        </div>
                    </div>
                    <div>
                        <img src="<%= weatherInfo.image %>" width="90px">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>