diff --git a/style.css b/style.css index 9b8e1c36..f38793c7 100644 --- a/style.css +++ b/style.css @@ -1201,7 +1201,7 @@ justify-content: center; .popup-content { background-color: #fff; margin: 15% auto; - padding: 20px; + padding: 30px; border: 1px solid #888; border-radius: 10px; width: 100%; @@ -1209,7 +1209,6 @@ justify-content: center; position: relative; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } - /* Close Button */ .close-btn { position: absolute; @@ -1235,6 +1234,52 @@ justify-content: center; text-decoration: none; } +.popup { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.7); /* Background overlay */ + display: flex; + justify-content: center; + align-items: center; +} + +.popup-content { + position: relative; + background: white; + padding: 40px; /* Increased padding around content */ + padding-top: 60px; /* Extra top padding to account for close button */ + border-radius: 10px; + max-width: 500px; + text-align: center; +} + +.close-btn { + position: absolute; + top: 15px; + right: 15px; + width: 30px; + height: 30px; + font-size: 2rem; + cursor: pointer; + background-color: #ff4c4c; + color: #fff; + border-radius: 50%; + border: none; + display: flex; + justify-content: center; + align-items: center; + z-index: 1; +} + +.close-btn:hover { + background-color: #ff0000; + transform: scale(1.1); +} + + /* Button to check deals */ .popup-content button { background-color: #007bff;