Issues:
1
2 * {
3 margin: 0;
4 padding: 0;
5 box-sizing: border-box;
6
7 }
8 body {
9 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
10 background: linear-gradient(to right, #f9f9f9, #eef1f5);
11 color: #333;
12 line-height: 1.6;
13 }
14
15
16
17 .notification {
18 position: fixed;
19 bottom: 20px;
20 left: 50%;
21 transform: translateX(-50%);
22 background-color: #222;
23 color: #fff;
24 padding: 12px 24px;
25 border-radius: 8px;
26 font-size: 15px;
27 display: none;
28 z-index: 999;
29 }
30
31 #backToTopBtn {
32 position: fixed;
33 bottom: 30px;
34 right: 30px;
35 width: 50px;
36 height: 50px;
37 background-color: #333;
38 color: #fff;
39 border: none;
40 border-radius: 50%;
41 font-size: 20px;
42 cursor: pointer;
43 display: none;
44 align-items: center;
45 justify-content: center;
46 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
47 transition: transform 0.3s ease;
48 }
49
50 #backToTopBtn:hover {
51 background-color: #555;
52 transform: scale(1.1);
53 }
54
55 #backToTopBtn::after {
56 content: "Top";
57 position: absolute;
58 right: 60px;
59 background-color: #333;
60 color: white;
61 padding: 5px 10px;
62 border-radius: 6px;
63 opacity: 0;
64 white-space: nowrap;
65 pointer-events: none;
66 transition: opacity 0.2s;
67 font-size: 14px;
68 }
69
70 #backToTopBtn:hover::after {
71 opacity: 1;
72 }
73
74
75
76
77
78
79 @media (max-width: 768px) {
80
81 .back-btn {
82 display: block;
83 margin-bottom: 12px;
84 color: #0077ff;
85 background: #f9fafb;
86 border: none;
87 font-size: 1.08em;
88 cursor: pointer;
89 padding: 16px 32px;
90 text-align: left;
91 font-weight: bold;
92 border-radius: 0;
93 border-bottom: 1px solid #f0f0f0;
94 }
95 #submenu-toggle:checked ~ .submenu-slide {
96 transform: translateX(0);
97 }
98 #submenu-toggle:checked ~ .nav-links {
99 visibility: hidden;
100 pointer-events: none;
101 }
102
103 }
104
105
106
107
108 .navbar {
109 height: 60px;
110 display: flex;
111 align-items: center;
112 justify-content: flex-start;
113 background: #fff;
114 color: #000;
115 padding: 0 1rem;
116 position: relative;
117 z-index: 1002;
118 }
119 .navbar .menu-toggle {
120 background: none;
121 border: none;
122 cursor: pointer;
123 padding: 0.5rem;
124 margin-right: 1rem;
125 z-index: 1100;
126 display: none;
127 color:black
128 }
129 .menu-toggle svg {
130 display: block;
131 color: #000;
132 }
133 .menu-toggle .icon-close { display: none; }
134 .menu-toggle.open .icon-hamburger { display: none; }
135 .menu-toggle.open .icon-close { display: block; }
136 .navbar .logo {
137 display: flex;
138 align-items: center;
139 gap: 18px;
140 font-size: 1.5rem;
141 text-decoration: none;
142 color: inherit;
143 color: #000;
144 }
145 .navbar .logo img {
146 width: 100%;
147 max-width: 210px;
148 max-height: 60px;
149 height: auto;
150 object-fit: contain;
151 display: block;
152
153 }
154 .nav-overlay {
155 display: none;
156 position: fixed;
157 top: 0;
158 left: 0;
159 height: 100vh;
160 width: 100vw;
161 background: rgba(0,0,0,0.5);
162 z-index: 1001;
163 }
164 .nav-menu {
165 position: fixed;
166 top: 0;
167 left: 0;
168 height: 100vh;
169 width: 350px;
170 max-width: 90vw;
171 background: #fff;
172 color: #000;
173 transform: translateX(-100%);
174 transition: transform 0.3s;
175 z-index: 1002;
176 display: flex;
177 flex-direction: column;
178 padding-top: 60px;
179 box-sizing: border-box;
180 }
181 .nav-menu.open { transform: translateX(0); }
182 .nav-menu ul {
183 list-style: none;
184 padding: 0;
185 margin: 0;
186 flex: 1;
187 overflow-y: auto;
188 }
189 .nav-menu li { position: relative; }
190 .nav-menu a,
191 .nav-menu .dropdown-toggle {
192 display: flex;
193 align-items: center;
194 gap: 12px;
195 padding: 16px 24px;
196 color: inherit;
197 text-decoration: none;
198 font-size: 1.1rem;
199 transition: background 0.2s;
200 background: none;
201 border: none;
202 cursor: pointer;
203 width: 100%;
204 text-align: left;
205 }
206 .nav-menu a:hover,
207 .nav-menu .dropdown-toggle:hover {
208 background: #e0e0e0;
209 color: #222;
210 }
211 .dropdown .dropdown-toggle svg { margin-left: auto; }
212 .dropdown-content {
213 display: none;
214 position: static;
215 background: #949393;
216 margin-left: 0;
217 margin-right: 0;
218 border-left: 3px solid #007bff;
219 }
220 .dropdown.open > .dropdown-content { display: block; }
221 .dropdown-content a {
222 padding-left: 36px;
223 font-size: 1rem;
224 background: #333;
225 color: #fff;
226 }
227
228 @media (min-width: 900px) {
229 .navbar {
230 padding: 0 2rem;
231 justify-content: flex-start;
232 }
233 .navbar .menu-toggle { display: none; }
234 .nav-overlay { display: none !important; }
235 .nav-menu {
236 position: static;
237 height: auto;
238 width: auto;
239 max-width: none;
240 background: none;
241 flex-direction: row;
242 transform: none;
243 padding-top: 0;
244 box-shadow: none;
245 display: flex;
246 align-items: center;
247 background: #fff;
248 color: #000;
249 }
250 .nav-menu ul {
251 display: flex;
252 flex-direction: row;
253 overflow: visible;
254 }
255 .nav-menu li { position: relative; }
256 .nav-menu a,
257 .nav-menu .dropdown-toggle {
258 padding: 0 18px;
259 height: 60px;
260 font-size: 1.1rem;
261 }
262 .dropdown-content {
263 display: none;
264 position: absolute;
265 left: 0;
266 top: 100%;
267 background: #949393;
268 min-width: 180px;
269 box-shadow: 0 8px 16px rgba(0,0,0,0.2);
270 border-left: none;
271 z-index: 1003;
272 }
273 .dropdown.open > .dropdown-content { display: block; }
274 .dropdown-content a {
275 padding-left: 24px;
276 background: #333;
277 color: #fff;
278 }
279 .sticky-input-wrapper { top: 60px; }
280 }
281 @media (max-width: 899px) {
282 .navbar { justify-content: flex-start; }
283 .navbar .menu-toggle { display: block; }
284 .nav-overlay { display: none; }
285 .nav-overlay.active { display: block; }
286 .nav-menu {
287 width: 70vw;
288 min-width: 210px;
289 }
290 .navbar .logo { margin-left: 0; }
291 }
292
293
294.site-footer {
295 background-color: #222;
296 color: #fff;
297 padding: 15px 20px;
298 font-size: 14px;
299}
300
301.footer-container {
302 max-width: 1200px;
303 margin: 0 auto;
304 padding: 0 20px;
305 display: flex;
306 justify-content: space-between;
307 align-items: center;
308 flex-wrap: wrap;
309}
310
311.footer-left {
312 margin-bottom: 10px;
313}
314
315.footer-right {
316 flex-wrap: wrap;
317 display: flex;
318 gap: 10px;
319}
320
321.footer-right a {
322 color: #ccc;
323 text-decoration: none;
324 white-space: nowrap;
325}
326
327.footer-right a:hover {
328 color: #fff;
329 text-decoration: underline;
330}
331
332/* Responsive layout */
333@media (max-width: 600px) {
334 .footer-container {
335 flex-direction: column;
336 align-items: flex-start;
337 }
338
339 .footer-right {
340 margin-top: 5px;
341 flex-wrap: wrap;
342 gap: 8px;
343 }
344
345 .footer-right a {
346 display: inline;
347 }
348}
349
350
351