fixed currency box going under div below when reisizing window

css/App.css

@@ -36,6 +36,7 @@ body {
 .navbar-nav .nav-link {
     text-transform: uppercase;
     letter-spacing: 0.085em;
+    font-size: larger;
     color: #999999;
     padding-top: 37px;
     padding-bottom: 37px;
@@ -132,15 +133,29 @@ body {
 .currency-expert-box {
     position: absolute;
     top: 30%;
-    left: 20%;
-    transform: translateX(-50%);
+    left: 10%;
+    transform: translateX(-50%, -50%);
     background-color: rgba(246, 246, 246, 0.9);
     padding: 20px;
     width: 30%;
+    max-width: 400px;
     z-index: 2;
     border-radius: 10px;
 }
 
+@media (max-width: 768px) {
+    .currency-expert-box {
+        width: 80%; /* Adjust width for smaller screens */
+    }
+}
+
+@media (max-width: 576px) {
+    .currency-expert-box {
+        width: 90%; /* Adjust width for even smaller screens */
+        padding: 15px; /* Adjust padding for smaller screens */
+    }
+}
+
 /* Content Section Styling */
 .content-section {
     position: relative;