:root{ --bg-color:#0B0B0B; --text-color:#E0E0E0; --text-light:#ffffff; --primary-gold:#D4AF37; --gradient-purple:#8E2DE2; --gradient-pink:#F000B8; --surface-color:#121212; --surface-light:#1A1A1A; --border-color:rgba(255, 255, 255, 0.1); --font-h1:'Playfair Display', serif; --font-h2:'Montserrat', sans-serif; --font-body:'Inter', sans-serif; } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ background-color:var(--bg-color); color:var(--text-color); font-family:var(--font-body); font-size:18px; font-weight:300; line-height:1.6; overflow-x:hidden; } h1, h2, h3, h4, h5, h6{ color:var(--text-light); margin-bottom:1rem; } h1{ font-family:var(--font-h1); font-size:64px; font-weight:700; line-height:1.1; text-shadow:0px 2px 10px rgba(212, 175, 55, 0.5); } h2{ font-family:var(--font-h2); font-size:36px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; } h3{ font-family:var(--font-h2); font-size:24px; font-weight:600; } a{ text-decoration:none; color:inherit; } img{ max-width:100%; height:auto; display:block; } .container{ max-width:1280px; margin:0 auto; padding:0 2rem; } .section{ padding:6rem 0; position:relative; } .text-center{ text-align:center; } .mb-2{ margin-bottom:0.5rem; } .mb-4{ margin-bottom:1rem; } .mb-8{ margin-bottom:2rem; } .mt-4{ margin-top:1rem; } .mt-8{ margin-top:2rem; } .text-gold{ color:var(--primary-gold); } .text-purple{ color:var(--gradient-purple); } .text-pink{ color:var(--gradient-pink); } .text-white{ color:var(--text-light); } .bg-surface{ background-color:var(--surface-color); } .gradient-text{ background:linear-gradient(135deg, var(--gradient-pink) 0%, var(--gradient-purple) 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; } .gold-gradient-text{ background:linear-gradient(135deg, #FDD835 0%, #FFF59D 50%, var(--primary-gold) 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; } .neon-glow{ box-shadow:0 0 15px rgba(240, 0, 184, 0.3); transition:transform 0.3s ease; } .neon-glow:hover{ transform:translateY(-5px); } .btn{ display:inline-flex; align-items:center; justify-content:center; padding:1rem 2rem; font-family:var(--font-h2); font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; border-radius:4px; cursor:pointer; transition:transform 0.3s ease, opacity 0.3s ease; border:none; } .btn-primary{ background-color:var(--primary-gold); color:var(--bg-color); box-shadow:0 0 20px rgba(212, 175, 55, 0.4); } .btn-primary:hover{ background-color:#e6c555; box-shadow:0 0 30px rgba(212, 175, 55, 0.6); transform:translateY(-2px); } .btn-outline{ background-color:transparent; color:var(--primary-gold); border:1px solid var(--primary-gold); } .btn-outline:hover{ background-color:var(--primary-gold); color:var(--bg-color); } .navbar{ position:fixed; top:0; width:100%; z-index:1000; background-color:rgba(11, 11, 11, 0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--border-color); transition:transform 0.3s ease, background-color 0.3s ease; } .navbar.scrolled{ background-color:rgba(11, 11, 11, 0.95); } .navbar .container{ display:flex; justify-content:space-between; align-items:center; height:80px; } .logo{ display:flex; align-items:center; } .logo-img{ height:90px; width:auto; object-fit:contain; margin-top:-10px; border-radius:4px; } .nav-links{ display:flex; gap:2rem; align-items:center; } .nav-links a{ font-family:var(--font-h2); font-size:14px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; color:var(--text-color); } .nav-links a:hover, .nav-links a.active{ color:var(--primary-gold); } .hero{ min-height:100vh; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; text-align:center; padding-top:80px; } .hero-bg{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:-2; } .hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center; -webkit-mask-image:radial-gradient(circle at 60% 40%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 70%); mask-image:radial-gradient(circle at 60% 40%, rgba(0, 0, 0, 1) 30%, rgba(0, 0, 0, 0) 70%); } .hero-overlay{ position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(to right, rgba(11, 11, 11, 1) 0%, rgba(11, 11, 11, 0.8) 15%, rgba(11, 11, 11, 0) 40%), linear-gradient(to bottom, rgba(11, 11, 11, 0.6), rgba(11, 11, 11, 0.95)); z-index:-1; } .hero-glow-1{ position:absolute; top:0; right:0; width:50%; height:100%; background:linear-gradient(to left, rgba(142, 45, 226, 0.3), transparent); z-index:-1; } .hero-glow-2{ position:absolute; bottom:0; left:0; width:30%; height:60%; background:linear-gradient(to top, rgba(240, 0, 184, 0.2), transparent); z-index:-1; } .hero-content{ max-width:800px; margin:0 auto; position:relative; z-index:10; min-height:280px; } .hero-side-image{ position:absolute; top:45%; width:180px; height:180px; z-index:2; border-radius:50%; padding:4px; background:linear-gradient(135deg, var(--primary-gold), var(--gradient-pink), var(--gradient-purple)); box-shadow:0 0 40px rgba(240, 0, 184, 0.5); animation:float 4s ease-in-out infinite; display:flex; align-items:center; justify-content:center; overflow:hidden; opacity:0.95; transition:opacity 0.4s ease; cursor:pointer; will-change:transform; } .hero-side-image:hover{ opacity:1; } .hero-side-image img{ width:100%; height:100%; object-fit:cover; border-radius:50%; } .hero-left{ left:8%; transform:translate(-50%, -50%) rotate(-12deg); } .hero-right{ left:auto; right:8%; transform:translate(50%, -50%) rotate(12deg); animation:float-right 4s ease-in-out infinite; } .hero-mic{ position:absolute; top:72%; left:12%; width:140px; height:140px; z-index:2; border-radius:50%; padding:3px; background:linear-gradient(135deg, var(--gradient-purple), var(--gradient-pink)); box-shadow:0 0 30px rgba(142, 45, 226, 0.4); animation:float 5s ease-in-out infinite; animation-delay:1s; display:flex; align-items:center; justify-content:center; overflow:hidden; opacity:0.9; transition:transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease; cursor:pointer; } .hero-mic:hover{ transform:scale(1.2) rotate(5deg) !important; opacity:1; } .hero-mic img{ width:100%; height:100%; object-fit:cover; border-radius:50%; } @keyframes float{ 0%, 100%{ transform:translate3d(-50%, -50%, 0) rotate(-12deg); } 50%{ transform:translate3d(-50%, calc(-50% - 15px), 0) rotate(-10deg); } } @keyframes float-right{ 0%, 100%{ transform:translate3d(50%, -50%, 0) rotate(12deg); } 50%{ transform:translate3d(50%, calc(-50% - 15px), 0) rotate(10deg); } } .gradient-text{ background:linear-gradient(135deg, var(--gradient-pink) 0%, var(--gradient-purple) 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; } .gold-gradient-text{ background:linear-gradient(135deg, #FDD835 0%, #FFF59D 50%, var(--primary-gold) 100%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; } @media (max-width:1024px){ .hero-side-image{ width:100px; height:100px; top:35%; } .hero-left{ left:15%; } .hero-right{ right:15%; } .hero-mic{ width:80px; height:80px; top:75%; left:20%; } } @media (max-width:768px){ .hero-side-image{ width:80px; height:80px; top:30%; opacity:0.7; } .hero-left{ left:12%; } .hero-right{ right:12%; } .hero-mic{ width:70px; height:70px; top:80%; left:15%; } } @media (max-width:480px){ .hero-side-image{ width:60px; height:60px; top:25%; } .hero-mic{ width:50px; height:50px; top:85%; } } .hero-subtitle{ color:var(--primary-gold); font-family:var(--font-h2); font-size:14px; text-transform:uppercase; letter-spacing:0.3em; margin-bottom:1.5rem; display:block; } .hero-description{ font-size:20px; margin-bottom:3rem; color:#ccc; } .hero-buttons{ display:flex; gap:1rem; justify-content:center; } @keyframes fadeInUp{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:translateY(0); } } .section-subtitle{ color:var(--gradient-pink); font-family:var(--font-h2); font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:0.2em; display:block; margin-bottom:0.5rem; } .section-title{ display:inline-block; position:relative; margin-bottom:3rem; } .section-title::after{ content:''; position:absolute; bottom:-15px; left:50%; transform:translateX(-50%); width:80px; height:3px; background:linear-gradient(90deg, var(--gradient-pink), var(--gradient-purple)); border-radius:3px; } .testimonials-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:2rem; margin-top:3rem; } @media (max-width:1100px){ .testimonials-grid{ grid-template-columns:repeat(2, 1fr); } } @media (max-width:768px){ .testimonials-grid{ grid-template-columns:1fr; } } .grid-2{ display:grid; grid-template-columns:repeat(auto-fit, minmax(400px, 1fr)); gap:3rem; align-items:center; } .grid-4{ display:grid; grid-template-columns:repeat(4, 1fr); gap:2rem; } @media (max-width:1200px){ .grid-4{ grid-template-columns:repeat(2, 1fr); } } @media (max-width:600px){ .grid-4{ grid-template-columns:1fr; } } .card{ background-color:var(--surface-light); border:1px solid var(--border-color); border-radius:12px; padding:2.5rem 2rem; text-align:center; position:relative; overflow:hidden; z-index:1; } .card::before{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:radial-gradient(circle at top right, rgba(240, 0, 184, 0.1), transparent 70%); opacity:0; transition:opacity 0.3s ease; z-index:-1; } .card:hover::before{ opacity:1; } .card-icon{ width:70px; height:70px; margin:0 auto 1.5rem; background:linear-gradient(135deg, var(--surface-color), #222); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 5px 15px rgba(0, 0, 0, 0.5); transition:transform 0.3s ease; } .card:hover .card-icon{ transform:scale(1.1); } .card-icon i{ font-size:32px; color:var(--primary-gold); } .process-step{ display:flex; align-items:center; margin-bottom:4rem; position:relative; } .process-step:last-child{ margin-bottom:0; } .process-content{ width:45%; padding-right:3rem; text-align:right; } .process-step:nth-child(even) .process-content{ margin-left:auto; padding-right:0; padding-left:3rem; text-align:left; } .process-number{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:50px; height:50px; background:var(--gradient-pink); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-h2); font-weight:700; font-size:20px; color:var(--text-light); z-index:2; box-shadow:0 0 20px rgba(240, 0, 184, 0.4); border:4px solid var(--bg-color); } .process-image{ width:45%; height:250px; border-radius:12px; overflow:hidden; } .process-step:nth-child(even) .process-image{ margin-right:auto; } .process-image img{ width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; } .process-step:hover .process-image img{ transform:scale(1.05); } .process-line{ position:absolute; left:50%; top:0; bottom:0; width:2px; background:linear-gradient(to bottom, var(--gradient-pink), var(--gradient-purple), transparent); transform:translateX(-50%); z-index:1; } .gallery-grid{ display:grid; grid-template-columns:repeat(3, 1fr); grid-auto-rows:250px; gap:1.5rem; } .gallery-item{ position:relative; border-radius:12px; overflow:hidden; cursor:pointer; } .gallery-item.large{ grid-row:span 2; } .gallery-img{ width:100%; height:100%; object-fit:cover; transition:transform 0.7s ease; } .gallery-item:hover .gallery-img{ transform:scale(1.1); } .gallery-overlay{ position:absolute; bottom:0; left:0; width:100%; padding:2rem 1.5rem 1.5rem; background:linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent); opacity:0; transition:opacity 0.3s ease; display:flex; flex-direction:column; justify-content:flex-end; } .gallery-item:hover .gallery-overlay{ opacity:1; } .gallery-tag{ color:var(--primary-gold); font-family:var(--font-h2); font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:0.5rem; } .testimonial-card{ background:rgba(25, 25, 25, 0.5); backdrop-filter:blur(10px); padding:2.5rem; border-radius:20px; border:1px solid rgba(255, 255, 255, 0.05); position:relative; transition:transform 0.3s ease, opacity 0.3s ease; height:100%; display:flex; flex-direction:column; } .testimonial-card:hover{ transform:translateY(-10px); } .testimonial-header{ display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; } .testimonial-avatar{ width:64px; height:64px; border-radius:50%; padding:2px; background:linear-gradient(to top right, var(--gradient-pink), var(--gradient-purple)); } .testimonial-avatar img{ width:100%; height:100%; border-radius:50%; object-fit:cover; border:2px solid var(--bg-color); } .testimonial-info h4{ font-family:var(--font-h1); font-size:20px; margin-bottom:0; } .testimonial-info p{ color:var(--primary-gold); font-family:var(--font-h2); font-size:12px; text-transform:uppercase; } .testimonial-stars{ color:var(--primary-gold); font-size:16px; margin-top:5px; } .testimonial-text{ font-style:italic; font-weight:300; color:#ccc; } .quote-icon{ position:absolute; top:1.5rem; right:1.5rem; font-size:60px; color:rgba(212, 175, 55, 0.1); transform:translateZ(50px); } .slider-controls{ display:none; } .form-group{ margin-bottom:1.5rem; } .form-group label{ display:block; font-family:var(--font-h2); font-size:14px; font-weight:500; margin-bottom:0.5rem; color:#bbb; } .form-control{ width:100%; background-color:var(--surface-light); border:1px solid var(--border-color); color:var(--text-light); padding:1rem; border-radius:8px; font-family:var(--font-body); font-size:16px; transition:box-shadow 0.3s; } .form-control:focus{ outline:none; border-color:var(--gradient-pink); box-shadow:0 0 10px rgba(240, 0, 184, 0.2); } textarea.form-control{ resize:vertical; min-height:120px; } .faq-item{ background-color:var(--surface-light); border:1px solid var(--border-color); border-radius:12px; margin-bottom:1rem; overflow:hidden; } .faq-summary{ padding:1.5rem; display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-family:var(--font-h2); font-weight:600; color:var(--text-light); font-size:16px; } .faq-summary::-webkit-details-marker{ display:none; } .faq-icon{ color:var(--primary-gold); transition:transform 0.3s; } .faq-item[open]{ border-color:rgba(212, 175, 55, 0.5); } .faq-item[open] .faq-icon{ transform:rotate(45deg); } .faq-content{ padding:0 1.5rem 1.5rem; color:#aaa; font-size:16px; } .footer{ background-color:#050505; padding:4rem 0 2rem; border-top:1px solid var(--border-color); } .footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; margin-bottom:3rem; } .footer-title{ color:var(--text-light); font-family:var(--font-h2); font-size:16px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:1.5rem; } .footer-links{ list-style:none; } .footer-links li{ margin-bottom:1rem; } .footer-links a{ color:#888; } .footer-links a:hover{ color:var(--primary-gold); } .footer-contact li{ display:flex; align-items:flex-start; gap:0.75rem; margin-bottom:1rem; color:#888; } .footer-contact i{ color:var(--gradient-pink); font-size:20px; } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:2rem; border-top:1px solid rgba(255, 255, 255, 0.05); font-size:14px; color:#666; } .social-links{ display:flex; gap:1rem; } .social-links a{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background-color:var(--surface-light); color:#888; transition:all 0.3s; } .social-links a:hover{ background-color:var(--gradient-purple); color:white; } @media (max-width:992px){ h1{ font-size:48px; } h2{ font-size:28px; } .process-content, .process-image{ width:100%; padding:0 !important; margin-bottom:2rem; } .process-step{ flex-direction:column !important; text-align:center !important; } .process-number{ position:relative; left:auto; top:auto; transform:none; margin:0 auto 1.5rem; } .process-line{ display:none; } .gallery-grid{ grid-template-columns:repeat(2, 1fr); } .footer-grid{ grid-template-columns:1fr; } } @media (max-width:768px){ h1{ font-size:36px; } .nav-links{ display:none; } .btn-primary{ padding:0.75rem 1.5rem; } .gallery-grid{ grid-template-columns:1fr; } .gallery-item.large{ grid-row:span 1; } .footer-bottom{ flex-direction:column; gap:1rem; text-align:center; } }