/* Basic Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } body, html { height: 100%; width: 100%; overflow-x: hidden; font-family: 'Montserrat', sans-serif; background-color: #333; /* Removed background-image since video is primary background */ } /* Import Montserrat from Google Fonts */ /* Note: For better performance, move this to in HTML as: */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap'); /* Typography */ h1, h2, .btn, .tagline { font-family: 'Montserrat', sans-serif; font-weight: 700; } /* Main Content */ .content { position: relative; z-index: 1; text-align: center; padding: 20px 0; /* Adjusted to remove horizontal padding */ color: #fff; background: rgba(0, 0, 0, 0.5); min-height: 100vh; } /* Header Section */ .header { margin-bottom: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .logo { width: 220px; max-width: 80%; height: auto; margin-bottom: 20px; } h1 { font-size: 32px; margin-bottom: 10px; } .tagline { font-size: 20px; color: #ffd700; } /* Flex Container */ .flex-container { width: 100%; max-width: 800px; margin: 0 auto; } /* Buttons Section - Enhanced for Larger Buttons */ .buttons-flex { display: flex; justify-content: center; margin: 30px 0; padding: 0; /* Remove padding to maximize width */ } .button-box { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; /* Increased gap for larger buttons */ max-width: 900px; /* Increased max-width for larger buttons */ width: 100%; } .btn-item { flex: 1 0 calc(33.333% - 20px); /* Adjusted for increased gap */ max-width: calc(33.333% - 20px); min-width: 250px; /* Increased minimum width for larger buttons */ margin-bottom: 20px; /* Increased margin */ } .button-box .btn { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100px; /* Increased height from 80px to 100px */ gap: 10px; /* Increased gap between icon and text */ text-decoration: none; background: #ffd700; color: #000; padding: 15px 20px; /* Increased padding */ border-radius: 35px; /* Increased border radius */ font-size: 18px; /* Increased font size from 16px to 18px */ font-weight: bold; transition: background 0.3s ease, transform 0.3s ease; box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Enhanced shadow */ text-align: center; } .button-box .btn i { font-size: 22px; /* Increased icon size from 18px to 22px */ margin-bottom: 5px; } .button-box .btn:hover { background: #ffcc00; transform: scale(1.08); /* Increased hover scale */ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); /* Enhanced hover shadow */ } .button-box .btn:focus { outline: 3px solid #ffd700; /* Thicker focus outline */ outline-offset: 3px; } /* Fallback for older browsers that don't support gap in flexbox */ @supports not (gap: 20px) { .btn-item { margin-right: 20px; margin-bottom: 20px; } .btn-item:nth-child(3n) { margin-right: 0; } } /* Responsive adjustments for buttons */ @media (max-width: 767px) { .button-box { gap: 15px; max-width: 700px; } .btn-item { flex: 1 0 calc(33.333% - 15px); max-width: calc(33.333% - 15px); min-width: 180px; /* Increased for larger mobile buttons */ } .button-box .btn { font-size: 16px; /* Increased mobile font size */ height: 85px; /* Increased mobile height */ padding: 12px 8px; } .button-box .btn i { font-size: 20px; /* Increased mobile icon size */ } } @media (max-width: 480px) { .button-box { gap: 12px; } .btn-item { flex: 1 0 calc(33.333% - 12px); max-width: calc(33.333% - 12px); min-width: 140px; /* Increased for better touch targets */ } .button-box .btn { font-size: 14px; /* Increased small screen font size */ height: 75px; /* Increased small screen height */ padding: 10px 6px; border-radius: 25px; } .button-box .btn i { font-size: 18px; /* Increased small screen icon size */ margin-bottom: 3px; } } /* Optional: Switch to 2 buttons per row on very small screens for better touch targets */ /* @media (max-width: 400px) { .btn-item { flex: 1 0 calc(50% - 12px); max-width: calc(50% - 12px); min-width: 160px; } } */ /* Make sure the button element looks the same as anchor buttons */ button.btn { font-family: inherit; cursor: pointer; border: none; width: 100%; } /* Gallery Section */ .gallery { margin: 50px 0; text-align: center; } .gallery h2 { font-size: 28px; color: #ffd700; margin-bottom: 20px; } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; padding: 0 20px; } .gallery-grid img { width: 100%; border-radius: 10px; border: 2px solid #fff; transition: transform 0.3s; } .gallery-grid img:hover { transform: scale(1.05); } /* Reels Section */ .reels { margin: 50px 0; text-align: center; } .reels h2 { font-size: 28px; color: #ffd700; margin-bottom: 20px; } .reels-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; padding: 0 20px; } .reels-grid iframe { width: 100%; aspect-ratio: 9 / 16; /* Responsive height for Instagram reels */ max-height: 450px; border-radius: 10px; } /* Background Video Styling with Blur */ .video-background { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; z-index: -1; } #bgVideo { width: 100%; height: 100%; object-fit: cover; filter: blur(4px); transform: scale(1.1); } .video-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); } /* Footer */ .footer { margin-top: 40px; font-size: 14px; color: #ddd; }