├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    └── index.html
├── assets
    └── Thunder.jpg
├── .gitignore
├── src
    ├── index.css
    ├── index.js
    ├── components
    │   ├── MovieModal.js
    │   └── MovieList.js
    ├── App.js
    └── App.css
├── package.json
└── README.md


/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/assets/Thunder.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SrikanthMoreboina/Thunder-Executor/HEAD/assets/Thunder.jpg


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SrikanthMoreboina/Thunder-Executor/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SrikanthMoreboina/Thunder-Executor/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/SrikanthMoreboina/Thunder-Executor/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | 
 6 | const root = ReactDOM.createRoot(document.getElementById('root'));
 7 | root.render(
 8 |   <React.StrictMode>
 9 |     <App />
10 |   </React.StrictMode>
11 | );
12 | 
13 | // If you want to start measuring performance in your app, pass a function
14 | // to log results (for example: reportWebVitals(console.log))
15 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
16 | 
17 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.17.0",
 7 |     "@testing-library/react": "^13.4.0",
 8 |     "@testing-library/user-event": "^13.5.0",
 9 |     "axios": "^1.7.7",
10 |     "react": "^18.3.1",
11 |     "react-dom": "^18.3.1",
12 |     "react-scripts": "5.0.1",
13 |     "web-vitals": "^2.1.4"
14 |   },
15 |   "scripts": {
16 |     "start": "react-scripts start",
17 |     "build": "react-scripts build",
18 |     "test": "react-scripts test",
19 |     "eject": "react-scripts eject"
20 |   },
21 |   "eslintConfig": {
22 |     "extends": [
23 |       "react-app",
24 |       "react-app/jest"
25 |     ]
26 |   },
27 |   "browserslist": {
28 |     "production": [
29 |       ">0.2%",
30 |       "not dead",
31 |       "not op_mini all"
32 |     ],
33 |     "development": [
34 |       "last 1 chrome version",
35 |       "last 1 firefox version",
36 |       "last 1 safari version"
37 |     ]
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/src/components/MovieModal.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | import axios from "axios";
 3 | 
 4 | const API_URL = "https://www.omdbapi.com/?i=tt3896198&apikey=b30b71d4";
 5 | 
 6 | 
 7 | const MovieModal = ({ movie, onClose }) => {
 8 |   const [details, setDetails] = useState(null);
 9 | 
10 |   useEffect(() => {
11 |     const fetchDetails = async () => {
12 |       try {
13 |         const response = await axios.get(`${API_URL}&i=${movie.imdbID}`);
14 |         setDetails(response.data);
15 |       } catch (error) {
16 |         console.error("Error fetching movie details:", error);
17 |       }
18 |     };
19 | 
20 |     fetchDetails();
21 |   }, [movie]);
22 | 
23 |   if (!details) return null;
24 | 
25 |   return (
26 |     <div className="modal-backdrop" onClick={onClose}>
27 |       <div className="modal-content" onClick={(e) => e.stopPropagation()}>
28 |         <h2>{details.Title}</h2>
29 |         <p><strong>Genre:</strong> {details.Genre}</p>
30 |         <p><strong>Plot:</strong> {details.Plot}</p>
31 |         <p><strong>Rating:</strong> {details.imdbRating}</p>
32 |         <button onClick={onClose}>Close</button>
33 |       </div>
34 |     </div>
35 |   );
36 | };
37 | 
38 | export default MovieModal;
39 | 


--------------------------------------------------------------------------------
/src/components/MovieList.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from "react";
 2 | 
 3 | const MovieList = ({ movies }) => {
 4 |   const [selectedMovie, setSelectedMovie] = useState(null);
 5 | 
 6 |   const handleCardClick = (movie) => {
 7 |     setSelectedMovie(movie); // Set the clicked movie
 8 |   };
 9 | 
10 |   const handleClose = () => {
11 |     setSelectedMovie(null); // Clear the selection when closing
12 |   };
13 | 
14 |   return (
15 |     <div className="movie-list">
16 |       {movies.map((movie) => (
17 |         <div
18 |           key={movie.imdbID}
19 |           className="movie-item"
20 |           onClick={() => handleCardClick(movie)}
21 |         >
22 |           <img src={movie.Poster} alt={movie.Title} />
23 |           <div>
24 |             <h3>{movie.Title}</h3>
25 |             <p>{movie.Year}</p>
26 |           </div>
27 |         </div>
28 |       ))}
29 | 
30 |       {/* Highlighted details */}
31 |       {selectedMovie && (
32 |         <div className="highlighted-details">
33 |           <button className="close-btn" onClick={handleClose}>
34 |             ✖
35 |           </button>
36 |           <img src={selectedMovie.Poster} alt={selectedMovie.Title} />
37 |           <h2>{selectedMovie.Title}</h2>
38 |           <p><strong>Genre:</strong> {selectedMovie.Genre}</p>
39 |           <p><strong>Plot:</strong> {selectedMovie.Plot}</p>
40 |           <p><strong>Rating:</strong> {selectedMovie.imdbRating}</p>
41 |           <p><strong>Cast:</strong> {selectedMovie.Actors}</p>
42 |         </div>
43 |       )}
44 |     </div>
45 |   );
46 | };
47 | 
48 | export default MovieList;
49 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>React App</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 🚀 Thunder Executor - Free Roblox Script Executor  
 2 | **[![Download Thunder Executor](https://img.shields.io/badge/Download-Thunder%20Executor-blueviolet)](../../releases)**  
 3 | 
 4 | ## 📥 Quick Start  
 5 | Getting started with **Thunder Executor** is fast and simple:  
 6 | 1. **[![Download Thunder Executor](https://img.shields.io/badge/Download-Thunder%20Executor-blueviolet)](../../releases)**  
 7 | 2. Extract the downloaded `.zip` file to any folder you prefer.  
 8 | 
 9 | ## 📌 About  
10 | 🚀 **Thunder Executor** is a powerful and reliable **Roblox script executor** built for top performance and ease of use. With full support for the latest Roblox updates, it’s the perfect tool for gamers, developers, and modders looking to take their experience to the next level.
11 | 
12 | ![Preview](/assets/Thunder.jpg)
13 | 
14 | ## 📑 Table of Contents  
15 | - [Introduction](#-introduction)  
16 | - [Features](#-features)  
17 | - [Quick Start](#-quick-start)  
18 | - [How to Use](#-how-to-use)  
19 | - [Contribute](#-contribute)  
20 | - [License](#license)  
21 | - [Contact](#-contact)  
22 | 
23 | ## 🎮 Introduction  
24 | Welcome to **Thunder Executor** – your ultimate solution for executing Roblox scripts effortlessly. Whether you're enhancing gameplay, testing new functions, or developing features, Thunder makes it easy and efficient.
25 | 
26 | ## ✨ Key Features  
27 | Why choose **Thunder Executor**?  
28 | - ⚙️ **Advanced Script Execution:** Supports even the most complex scripts.  
29 | - 🚀 **Optimized Performance:** Smooth, lag-free experience every time.  
30 | - 🧭 **User-Friendly Interface:** Clean and straightforward UI.  
31 | - 🛡️ **Secure & Reliable:** Built with stability and safety as priorities.  
32 | - 🔄 **Regularly Updated:** Always compatible with the latest Roblox builds.  
33 | 
34 | ## 🚀 How to Use  
35 | After installation, just follow these steps:  
36 | 1. Open **Thunder Executor** from the folder where it was extracted.  
37 | 2. **Log in (if prompted):** Enter your Roblox credentials to unlock full features.  
38 | 3. **Load a Script:** Choose an existing one or create a new custom script.  
39 | 4. **Click Execute:** Run your script and watch it in action.  
40 | 5. **Enjoy the Experience:** Customize and enhance your Roblox sessions with ease!  
41 | 
42 | ## 🤝 Contribute  
43 | We welcome contributions! Whether it’s reporting bugs, suggesting features, or submitting pull requests—your input helps make **Thunder Executor** even better.  
44 | 
45 | ## 📢 Contact  
46 | Need help or want to stay updated?  
47 | Join our **[official Discord community](https://discord.gg/Thunder)** for support, news, and discussions.
48 |     
49 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from "react";
 2 | import axios from "axios";
 3 | import MovieList from "./components/MovieList";
 4 | import MovieModal from "./components/MovieModal";
 5 | import "./App.css";
 6 | 
 7 | const API_URL = "https://www.omdbapi.com/";
 8 | const API_KEY = "b30b71d4"; // Use environment variables for security
 9 | 
10 | function App() {
11 |   const [movies, setMovies] = useState([]);
12 |   const [searchTerm, setSearchTerm] = useState("");
13 |   const [selectedMovie, setSelectedMovie] = useState(null);
14 |   const [errorMessage, setErrorMessage] = useState("");
15 | 
16 |   useEffect(() => {
17 |     // Fetch popular movies by default
18 |     fetchMovies("popular");
19 |   }, []);
20 | 
21 |   const fetchMovies = async (query) => {
22 |     try {
23 |       const response = await axios.get(`${API_URL}?apikey=${API_KEY}&s=${query}`);
24 |       if (response.data.Search) {
25 |         // Option 1: Fetch detailed info for each movie (not recommended for large searches)
26 |         const moviesWithDetails = await Promise.all(
27 |           response.data.Search.map(async (movie) => {
28 |             const detailsResponse = await axios.get(`${API_URL}?apikey=${API_KEY}&i=${movie.imdbID}`);
29 |             return { ...movie, ...detailsResponse.data };
30 |           })
31 |         );
32 |         setMovies(moviesWithDetails);
33 |         setErrorMessage("");
34 |       } else {
35 |         setMovies([]);
36 |         setErrorMessage("No such movie found.");
37 |       }
38 |     } catch (error) {
39 |       console.error("Error fetching movies:", error);
40 |       setErrorMessage("Failed to fetch movies. Please try again.");
41 |     }
42 |   };
43 | 
44 |   const handleSearch = (e) => {
45 |     e.preventDefault();
46 |     if (searchTerm) fetchMovies(searchTerm);
47 |   };
48 | 
49 |   return (
50 |     <div className="App">
51 |       <header>
52 |         <h1>Movie Search App</h1>
53 |         <form onSubmit={handleSearch} className="search-form">
54 |           <div className="search-bar">
55 |             <button type="submit" className="search-icon">
56 |               <span role="img" aria-label="search">
57 |                 🔍
58 |               </span>
59 |             </button>
60 |             <input
61 |               type="text"
62 |               placeholder="Search for movies by title or years..."
63 |               value={searchTerm}
64 |               onChange={(e) => setSearchTerm(e.target.value)}
65 |             />
66 |           </div>
67 |         </form>
68 |       </header>
69 |       {errorMessage && <p className="error-message">{errorMessage}</p>}
70 |       <MovieList movies={movies} onSelectMovie={setSelectedMovie} />
71 |       {selectedMovie && (
72 |         <MovieModal movie={selectedMovie} onClose={() => setSelectedMovie(null)} />
73 |       )}
74 |     </div>
75 |   );
76 | }
77 | 
78 | export default App;
79 | 


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
  1 | body {
  2 |   font-family: 'Roboto', sans-serif;
  3 |   margin: 0;
  4 |   padding: 0;
  5 |   background: black; /* Black background */
  6 |   color: white;
  7 | }
  8 | 
  9 | .App {
 10 |   text-align: center;
 11 | }
 12 | 
 13 | header {
 14 |   background: linear-gradient(to right, #222, #444); /* Dark gradient for header */
 15 |   color: white;
 16 |   padding: 1rem 1rem; /* Reduced padding for smaller navbar */
 17 |   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
 18 | }
 19 | 
 20 | header h1 {
 21 |   margin: 0;
 22 |   font-size: 1.5rem; /* Reduced font size */
 23 |   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
 24 | }
 25 | 
 26 | form {
 27 |   margin-top: 1.5rem;
 28 |   display: flex;
 29 |   justify-content: center;
 30 | }
 31 | 
 32 | form input {
 33 |   padding: 0.6rem; /* Reduced padding */
 34 |   width: 250px; /* Reduced input width */
 35 |   border: none;
 36 |   border-radius: 8px;
 37 |   margin-right: 0.5rem;
 38 |   font-size: 1rem;
 39 |   box-shadow: 0 4px 6px rgba(255, 255, 255, 0.2);
 40 | }
 41 | 
 42 | form button {
 43 |   padding: 0.6rem 1.2rem; /* Reduced button padding */
 44 |   border: none;
 45 |   border-radius: 8px;
 46 |   background: #ff3333; /* Red button */
 47 |   color: white;
 48 |   font-size: 1rem; /* Reduced font size */
 49 |   cursor: pointer;
 50 |   transition: transform 0.2s ease, background 0.2s ease;
 51 | }
 52 | 
 53 | form button:hover {
 54 |   background: #e60000; /* Darker red on hover */
 55 |   transform: scale(1.05);
 56 | }
 57 | 
 58 | .movie-list {
 59 |   display: flex;
 60 |   flex-wrap: wrap;
 61 |   justify-content: center;
 62 |   gap: 1.5rem;
 63 |   margin-top: 2rem;
 64 |   position: relative; /* Ensure positioning for overlay */
 65 | }
 66 | 
 67 | .movie-item {
 68 |   background: #222; /* Dark background for cards */
 69 |   color: white;
 70 |   width: 300px;
 71 |   border-radius: 12px;
 72 |   box-shadow: 0 6px 10px rgba(0, 0, 0, 0.8);
 73 |   overflow: hidden;
 74 |   cursor: pointer;
 75 |   transition: transform 0.2s ease, box-shadow 0.2s ease;
 76 | }
 77 | 
 78 | 
 79 | .movie-item:hover {
 80 |   transform: translateY(-10px);
 81 |   box-shadow: 0 10px 15px rgba(0, 0, 0, 1);
 82 | }
 83 | 
 84 | .movie-item img {
 85 |   width: 100%;
 86 |   height: 300px;
 87 |   object-fit: cover;
 88 |   border-bottom: 2px solid #ff6b6b; /* Highlight line below image */
 89 | }
 90 | 
 91 | .movie-item h3 {
 92 |   font-size: 1.2rem;
 93 |   margin: 0.5rem 0;
 94 |   color: #ff9900; /* Highlighted text color */
 95 | }
 96 | 
 97 | .movie-item p {
 98 |   margin: 0.5rem 0;
 99 |   color: #ccc;
100 | }
101 | 
102 | .modal-backdrop {
103 |   position: fixed;
104 |   top: 0;
105 |   left: 0;
106 |   width: 100%;
107 |   height: 100%;
108 |   background: rgba(0, 0, 0, 0.9);
109 |   display: flex;
110 |   align-items: center;
111 |   justify-content: center;
112 |   z-index: 10;
113 | }
114 | 
115 | .modal-content {
116 |   background: #333; /* Dark modal background */
117 |   padding: 2rem;
118 |   border-radius: 12px;
119 |   max-width: 600px;
120 |   width: 80%;
121 |   text-align: left;
122 |   box-shadow: 0 8px 20px rgba(0, 0, 0, 1);
123 |   color: white;
124 | }
125 | 
126 | .modal-content h2 {
127 |   color: #ff3333; /* Red highlight for modal title */
128 | }
129 | 
130 | .modal-content p {
131 |   margin-bottom: 0.5rem;
132 | }
133 | 
134 | .modal-content button {
135 |   background: #ff4d4d;
136 |   color: white;
137 |   padding: 0.8rem 1.5rem;
138 |   border: none;
139 |   border-radius: 8px;
140 |   cursor: pointer;
141 |   font-size: 1rem;
142 |   margin-top: 1rem;
143 |   transition: background 0.2s ease;
144 | }
145 | 
146 | .modal-content button:hover {
147 |   background: #e63946;
148 | }
149 | 
150 | .error-message {
151 |   color: red; /* Highlight error in red */
152 |   font-size: 1.2rem;
153 |   margin: 1.5rem;
154 | }
155 | 
156 | .search-form {
157 |   margin-top: 1.5rem;
158 |   display: flex;
159 |   justify-content: center;
160 | }
161 | 
162 | .search-bar {
163 |   display: flex;
164 |   align-items: center;
165 |   background: linear-gradient(to right, #ff6b6b, #f86d7d); /* Gradient background */
166 |   border-radius: 25px;
167 |   padding: 0.5rem;
168 |   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
169 |   width: 400px; /* Adjust width for the entire search bar */
170 | }
171 | 
172 | .search-bar input {
173 |   flex: 1; /* Let the input take the remaining space */
174 |   border: none;
175 |   border-radius: 25px;
176 |   padding: 0.8rem;
177 |   font-size: 1rem;
178 |   outline: none;
179 |   color: #333;
180 | }
181 | 
182 | .search-icon {
183 |   background: none;
184 |   border: none;
185 |   font-size: 1.2rem; /* Size for the search icon */
186 |   cursor: pointer;
187 |   color: white;
188 |   width: 40px; /* Fixed width to fit neatly */
189 |   height: 40px; /* Fixed height to match input */
190 |   display: flex;
191 |   align-items: center;
192 |   justify-content: center;
193 |   margin-right: 0.5rem;
194 |   border-radius: 50%; /* Make the button circular */
195 |   transition: background 0.3s ease, transform 0.2s ease;
196 | }
197 | 
198 | .search-icon:hover {
199 |   background: rgba(255, 255, 255, 0.2); /* Subtle hover effect */
200 |   transform: scale(1.1); /* Slight scaling on hover */
201 | }
202 | 
203 | .highlighted-details {
204 |   position: fixed; /* Fixed position */
205 |   top: 10%; /* Space from the top */
206 |   left: 50%; /* Center horizontally */
207 |   transform: translateX(-50%); /* Center exactly */
208 |   background: rgba(0, 0, 0, 0.95);
209 |   color: white;
210 |   padding: 1rem; /* Padding around the content */
211 |   border-radius: 12px;
212 |   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8);
213 |   z-index: 10;
214 |   width: 70%; /* Adjust width */
215 |   max-width: 500px; /* Max width */
216 |   height: 80vh; /* Reduce height to 80% of the viewport height */
217 |   overflow: hidden; /* Hide any overflow */
218 |   display: flex;
219 |   flex-direction: column; /* Stack elements vertically */
220 | }
221 | 
222 | .highlighted-details img {
223 |   width: 100%; /* Make the image fill the width */
224 |   height: 40%; /* Limit image height to 40% of the overlay */
225 |   object-fit: contain; /* Ensure image is not cropped */
226 |   border-radius: 8px;
227 |   margin-bottom: 1rem; /* Space between image and text */
228 | }
229 | 
230 | .highlighted-details h2 {
231 |   color: #ff6b6b; /* Highlight title */
232 |   margin-bottom: 1rem;
233 | }
234 | 
235 | .highlighted-details p {
236 |   margin-bottom: 0.5rem;
237 |   line-height: 1.5;
238 |   flex-grow: 1; /* Let text content take up remaining space */
239 |   overflow-y: auto; /* Allow scrolling if text exceeds space */
240 | }
241 | 
242 | .close-btn {
243 |   position: absolute;
244 |   top: 10px;
245 |   right: 10px;
246 |   background: none;
247 |   border: none;
248 |   color: white;
249 |   font-size: 1.5rem;
250 |   cursor: pointer;
251 |   transition: transform 0.2s ease;
252 | }
253 | 
254 | .close-btn:hover {
255 |   transform: scale(1.2);
256 | }
257 | 


--------------------------------------------------------------------------------