@@ -284,6 +284,147 @@ nav li:first-child {
284284 font-family : "Montserrat" , serif;
285285}
286286
287+ .view-schedule-btn {
288+ background : linear-gradient (90deg , # ff6b35 0% , # f7931e 100% );
289+ border : none;
290+ color : white;
291+ padding : 12px 30px ;
292+ font-size : 16px ;
293+ font-weight : 600 ;
294+ font-family : "Montserrat" , sans-serif;
295+ border-radius : 25px ;
296+ cursor : pointer;
297+ margin-top : 20px ;
298+ transition : all 0.3s ease;
299+ box-shadow : 0 4px 15px rgba (255 , 107 , 53 , 0.3 );
300+ }
301+
302+ .view-schedule-btn : hover {
303+ transform : translateY (-2px );
304+ box-shadow : 0 6px 20px rgba (255 , 107 , 53 , 0.4 );
305+ background : linear-gradient (90deg , # f7931e 0% , # ff6b35 100% );
306+ }
307+
308+ .view-schedule-btn : active {
309+ transform : translateY (0 );
310+ box-shadow : 0 2px 10px rgba (255 , 107 , 53 , 0.3 );
311+ }
312+
313+ /* Modal Styles */
314+ .modal {
315+ display : none;
316+ position : fixed;
317+ z-index : 1000 ;
318+ left : 0 ;
319+ top : 0 ;
320+ width : 100% ;
321+ height : 100% ;
322+ overflow : auto;
323+ background-color : rgba (0 , 0 , 0 , 0.8 );
324+ }
325+
326+ .modal-content {
327+ background-color : # 1a1a1a ;
328+ margin : 1% auto;
329+ padding : 0 ;
330+ border : none;
331+ width : 90% ;
332+ max-width : 1000px ;
333+ height : 95vh ;
334+ border-radius : 10px ;
335+ box-shadow : 0 4px 20px rgba (0 , 0 , 0 , 0.5 );
336+ display : flex;
337+ flex-direction : column;
338+ }
339+
340+ .modal-header {
341+ padding : 20px ;
342+ background : linear-gradient (90deg , # ff6b35 0% , # f7931e 100% );
343+ color : white;
344+ border-radius : 10px 10px 0 0 ;
345+ display : flex;
346+ justify-content : space-between;
347+ align-items : center;
348+ }
349+
350+ .modal-header h2 {
351+ margin : 0 ;
352+ font-family : "Montserrat" , sans-serif;
353+ font-size : 24px ;
354+ font-weight : 600 ;
355+ }
356+
357+ .close {
358+ color : white;
359+ font-size : 28px ;
360+ font-weight : bold;
361+ cursor : pointer;
362+ line-height : 1 ;
363+ }
364+
365+ .close : hover ,
366+ .close : focus {
367+ color : # ccc ;
368+ text-decoration : none;
369+ }
370+
371+ .modal-body {
372+ padding : 20px ;
373+ background-color : # 1a1a1a ;
374+ border-radius : 0 0 10px 10px ;
375+ flex : 1 ;
376+ display : flex;
377+ flex-direction : column;
378+ }
379+
380+ .modal-body embed {
381+ border-radius : 5px ;
382+ background-color : white;
383+ flex : 1 ;
384+ min-height : 0 ;
385+ }
386+
387+ /* Modal responsive styles */
388+ @media (max-width : 768px ) {
389+ .modal-content {
390+ width : 95% ;
391+ margin : 1% auto;
392+ height : 97vh ;
393+ }
394+
395+ .modal-header {
396+ padding : 15px ;
397+ }
398+
399+ .modal-header h2 {
400+ font-size : 20px ;
401+ }
402+
403+ .modal-body {
404+ padding : 15px ;
405+ }
406+ }
407+
408+ @media (max-width : 480px ) {
409+ .modal-content {
410+ width : 98% ;
411+ margin : 0.5% auto;
412+ height : 98vh ;
413+ }
414+
415+ .modal-header {
416+ padding : 12px ;
417+ }
418+
419+ .modal-header h2 {
420+ font-size : 18px ;
421+ }
422+
423+ .modal-body {
424+ padding : 12px ;
425+ }
426+ }
427+
287428.hero-text h1 {
288429 font-size : 35px ;
289430 font-weight : 700 ;
@@ -330,6 +471,11 @@ nav li:first-child {
330471 font-size : 12px ;
331472 margin-bottom : 10px ;
332473 }
474+ .view-schedule-btn {
475+ padding : 10px 25px ;
476+ font-size : 14px ;
477+ margin-top : 15px ;
478+ }
333479 .date ,
334480 .location {
335481 font-size : 10px ;
0 commit comments