Spaces:
Running
Running
| :root { | |
| /* Updated colors based on hqe.png */ | |
| --primary-color: #040504; | |
| /* Dark background */ | |
| --secondary-color: #F8E061; | |
| /* Yellow */ | |
| --accent-color: #FFFFFF; | |
| /* White */ | |
| --text-color: #FFFFFF; | |
| /* White */ | |
| --background-color: #040504; | |
| /* Dark background */ | |
| --card-background: rgba(248, 224, 97, 0.1); | |
| /* Yellow with transparency */ | |
| --button-hover: #FFF; | |
| /* White hover */ | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| line-height: 1.6; | |
| color: var(--text-color); | |
| background-color: var(--background-color); | |
| transition: background-color 0.3s, color 0.3s; | |
| } | |
| body.dark-mode { | |
| --text-color: #040504; | |
| /* Dark background */ | |
| --background-color: #FFFFFF; | |
| /* White */ | |
| } | |
| header { | |
| background-color: var(--primary-color); | |
| padding: 1rem 2rem; | |
| position: fixed; | |
| width: 100%; | |
| top: 0; | |
| z-index: 1000; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); | |
| } | |
| nav { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| color: var(--text-color); | |
| } | |
| .nav-links { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .nav-links a { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| margin-left: 1rem; | |
| transition: all 0.3s ease; | |
| padding: 0.75rem 1.5rem; | |
| border-radius: 1.5rem; | |
| background-color: var(--secondary-color); | |
| font-size: 0.875rem; | |
| font-weight: 500; | |
| box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); | |
| white-space: nowrap; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .nav-links a:hover { | |
| background-color: var(--button-hover); | |
| color: var(--primary-color); | |
| transform: translateY(-3px); | |
| box-shadow: 0 5px 8px rgba(0, 0, 0, 0.3); | |
| } | |
| main { | |
| padding-top: 4rem; | |
| } | |
| .hero { | |
| text-align: center; | |
| padding: 6rem 2rem; | |
| background: var(--primary-color); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| pointer-events: none; | |
| } | |
| .hero h1 { | |
| font-size: 3rem; | |
| margin-bottom: 1.5rem; | |
| text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); | |
| color: var(--secondary-color); | |
| } | |
| .hero p { | |
| font-size: 1.25rem; | |
| color: var(--accent-color); | |
| margin-bottom: 2rem; | |
| } | |
| .video-container { | |
| max-width: 800px; | |
| margin: 2rem auto; | |
| border-radius: 0.5rem; | |
| overflow: hidden; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); | |
| border: 2px solid var(--secondary-color); | |
| /* Add border */ | |
| } | |
| video { | |
| width: 100%; | |
| height: auto; | |
| } | |
| .services { | |
| padding: 4rem 2rem; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| .services h2 { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| font-size: 2.5rem; | |
| color: var(--secondary-color); | |
| text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); | |
| } | |
| .services-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 2rem; | |
| } | |
| .service-card { | |
| background-color: var(--card-background); | |
| padding: 2rem; | |
| border-radius: 0.75rem; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); | |
| } | |
| .service-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); | |
| border-color: var(--accent-color); | |
| } | |
| .service-icon { | |
| margin-bottom: 1.5rem; | |
| color: var(--secondary-color); | |
| } | |
| .service-card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| .service-card p { | |
| font-size: 1rem; | |
| color: #cbd5e1; | |
| } | |
| .contact { | |
| padding: 4rem 2rem; | |
| background: var(--primary-color); | |
| } | |
| .contact h2 { | |
| text-align: center; | |
| margin-bottom: 3rem; | |
| font-size: 2.5rem; | |
| color: var(--secondary-color); | |
| text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2); | |
| } | |
| .contact-info { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| gap: 2rem; | |
| background-color: var(--card-background); | |
| padding: 2rem; | |
| border-radius: 0.75rem; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); | |
| } | |
| .contact-details { | |
| text-align: center; | |
| } | |
| .contact-details p { | |
| font-size: 1.125rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .social-links a { | |
| background-color: var(--secondary-color); | |
| padding: 0.8rem; | |
| border-radius: 50%; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.3s ease; | |
| color: var(--primary-color); | |
| } | |
| .social-links a:hover { | |
| background-color: var(--button-hover); | |
| transform: translateY(-3px); | |
| color: var(--primary-color); | |
| } | |
| footer { | |
| background-color: var(--primary-color); | |
| color: var(--accent-color); | |
| padding: 2rem; | |
| text-align: center; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| position: relative; | |
| } | |
| .footer-stats { | |
| display: flex; | |
| justify-content: space-around; | |
| margin-bottom: 1rem; | |
| padding-bottom: 1rem; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .footer-stats div { | |
| text-align: center; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .stat-number { | |
| font-size: 1.5rem; | |
| font-weight: bold; | |
| color: var(--secondary-color); | |
| display: block; | |
| } | |
| .stat-label { | |
| font-size: 0.875rem; | |
| } | |
| .footer-faq { | |
| margin-bottom: 1rem; | |
| } | |
| .footer-faq details { | |
| background-color: var(--card-background); | |
| padding: 1rem; | |
| border-radius: 0.5rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .footer-faq summary { | |
| font-weight: bold; | |
| cursor: pointer; | |
| color: var(--secondary-color); | |
| } | |
| .footer-bottom p { | |
| font-size: 0.875rem; | |
| color: #94a3b8; | |
| } | |
| .chat-icon { | |
| position: absolute; | |
| bottom: 1rem; | |
| right: 1rem; | |
| background-color: var(--secondary-color); | |
| color: var(--primary-color); | |
| padding: 0.75rem; | |
| border-radius: 50%; | |
| text-decoration: none; | |
| font-size: 1.25rem; | |
| transition: background-color 0.3s ease; | |
| } | |
| .chat-icon:hover { | |
| background-color: var(--button-hover); | |
| color: var(--primary-color); | |
| } | |
| @media (max-width: 768px) { | |
| .nav-links { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| .nav-links a { | |
| margin: 0.5rem 0; | |
| width: 100%; | |
| text-align: center; | |
| } | |
| .hero h1 { | |
| font-size: 2.2rem; | |
| } | |
| .hero p { | |
| font-size: 1rem; | |
| } | |
| .services-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .contact-info { | |
| text-align: center; | |
| padding: 1.5rem; | |
| } | |
| .contact-details p { | |
| font-size: 1rem; | |
| } | |
| .footer-stats { | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| } | |
| /* Carousel Styles */ | |
| .image-carousel { | |
| padding: 2rem; | |
| background-color: var(--primary-color); | |
| } | |
| .image-carousel h2 { | |
| text-align: center; | |
| color: var(--secondary-color); | |
| margin-bottom: 1rem; | |
| } | |
| .carousel-container { | |
| position: relative; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| overflow: hidden; | |
| border: 2px solid var(--secondary-color); | |
| border-radius: 0.5rem; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); | |
| } | |
| .carousel-slide { | |
| display: flex; | |
| transition: transform 0.5s ease-in-out; | |
| } | |
| .carousel-slide img { | |
| width: 100%; | |
| height: auto; | |
| cursor: pointer; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | |
| } | |
| .carousel-button { | |
| position: absolute; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| background-color: rgba(0, 0, 0, 0.5); | |
| color: var(--accent-color); | |
| border: none; | |
| padding: 0.5rem 1rem; | |
| border-radius: 0.25rem; | |
| cursor: pointer; | |
| font-size: 1.5rem; | |
| z-index: 10; | |
| transition: background-color 0.3s ease; | |
| } | |
| .carousel-button:hover { | |
| background-color: rgba(0, 0, 0, 0.8); | |
| } | |
| .carousel-button.prev { | |
| left: 0.5rem; | |
| } | |
| .carousel-button.next { | |
| right: 0.5rem; | |
| } | |
| /* Fullscreen Image Styles */ | |
| #fullscreen-image { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.9); | |
| display: none; | |
| justify-content: center; | |
| align-items: center; | |
| z-index: 1000; | |
| } | |
| #fullscreen-image img { | |
| max-width: 90%; | |
| max-height: 90%; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); | |
| } | |
| /* Updated Dropdown Styles */ | |
| .dropdown { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .dropdown a { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .dropdown-content { | |
| display: none; | |
| position: absolute; | |
| background: linear-gradient(135deg, rgba(4, 5, 4, 0.95) 0%, rgba(4, 5, 4, 0.98) 100%); | |
| min-width: 280px; | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); | |
| z-index: 1; | |
| border-radius: 12px; | |
| padding: 1rem; | |
| margin-top: 0.5rem; | |
| border: 1px solid rgba(248, 224, 97, 0.2); | |
| backdrop-filter: blur(10px); | |
| transform: translateY(10px); | |
| opacity: 0; | |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| color: #040504; | |
| } | |
| body.dark-mode .dropdown-content { | |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%); | |
| } | |
| body.dark-mode .dropdown-content::before { | |
| background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%); | |
| } | |
| body.dark-mode .dropdown-content a, | |
| body.dark-mode .dropdown-content p { | |
| color: #040504; | |
| } | |
| body.dark-mode .dropdown-content a:hover { | |
| background: rgba(4, 5, 4, 0.1); | |
| color: #040504; | |
| } | |
| .dropdown-content a, | |
| .dropdown-content p { | |
| color: #040504; | |
| padding: 0.75rem 1rem; | |
| text-decoration: none; | |
| display: block; | |
| border-radius: 8px; | |
| margin: 0.25rem 0; | |
| font-size: 0.95rem; | |
| transition: all 0.2s ease; | |
| } | |
| .dropdown-content a:hover { | |
| background: rgba(248, 224, 97, 0.1); | |
| transform: translateX(5px); | |
| color: #040504; | |
| } | |
| .dropdown-content hr { | |
| border: none; | |
| border-top: 1px solid rgba(248, 224, 97, 0.1); | |
| margin: 0.75rem 0; | |
| } | |
| .dropdown-content::before { | |
| content: ''; | |
| position: absolute; | |
| top: -6px; | |
| left: 20px; | |
| width: 12px; | |
| height: 12px; | |
| background: linear-gradient(135deg, rgba(4, 5, 4, 0.95) 0%, rgba(4, 5, 4, 0.98) 100%); | |
| transform: rotate(45deg); | |
| border-left: 1px solid rgba(248, 224, 97, 0.2); | |
| border-top: 1px solid rgba(248, 224, 97, 0.2); | |
| } | |
| .dropdown:hover .dropdown-content { | |
| display: block; | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| /* Social Menu Specific Styles */ | |
| .social-menu a { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .social-menu i { | |
| font-size: 1.1rem; | |
| width: 24px; | |
| height: 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| background: rgba(248, 224, 97, 0.1); | |
| transition: all 0.2s ease; | |
| } | |
| .social-menu a:hover i { | |
| background: var(--secondary-color); | |
| color: var(--primary-color); | |
| transform: scale(1.1); | |
| } | |
| /* Contact Menu Specific Styles */ | |
| .contact-menu p { | |
| color: rgba(255, 255, 255, 0.7); | |
| font-size: 0.9rem; | |
| padding: 0.5rem 1rem; | |
| } | |
| .contact-menu a { | |
| color: var(--secondary-color); | |
| } |