/* --- FONTS & ANIMATIONS --- */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Montserrat:wght@400;700&display=swap'); @keyframes goldShine { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } /* --- VARIABLES --- */ :root { --gold-lux: #D4AF37; --gold-grad: linear-gradient(90deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c); --dark-overlay: rgba(0,0,0,0.65); } /* --- 1. HERO SECTION --- */ .custom-hero-wrapper { position: relative; width: 100%; height: 70vh; /* Taller for impact */ min-height: 600px; overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; background: #000; border-bottom: 5px solid var(--gold-lux); } .hero-video-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--dark-overlay); /* Darkens video so gold text pops */ z-index: 2; } .hero-content { position: relative; z-index: 3; padding: 0 20px; max-width: 1100px; animation: fadeInUp 1.2s ease-out; } /* --- THE BLING TITLE --- */ .hero-title { font-family: 'Playfair Display', serif; /* Luxury Font */ font-size: 60px; line-height: 1.1; font-weight: 900; text-transform: uppercase; margin-bottom: 20px; /* Gold Gradient Text */ background: linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: goldShine 4s linear infinite; /* Glow Shadow */ filter: drop-shadow(0px 0px 15px rgba(212, 175, 55, 0.3)); } .hero-subtitle { color: #ffffff; font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; margin-top: 15px; border-top: 1px solid var(--gold-lux); border-bottom: 1px solid var(--gold-lux); display: inline-block; padding: 10px 30px; background: rgba(0,0,0,0.5); } /* --- 2. MAIN LAYOUT --- */ .recruit-main-layout { display: flex; flex-wrap: wrap; gap: 50px; max-width: 1300px; margin: -80px auto 60px auto; /* Overlap effect */ position: relative; z-index: 10; padding: 0 20px; } .col-agency-boxes { flex: 1; min-width: 300px; } .col-gravity-form { flex: 1.5; min-width: 350px; } /* --- 3. FLIP BOXES (Consolidated Style) --- */ .agency-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .flip-box { background-color: transparent; height: 170px; perspective: 1000px; } .flip-box-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1); transform-style: preserve-3d; } .flip-box:hover .flip-box-inner { transform: rotateY(180deg); } .flip-front, .flip-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 8px; padding: 10px; border: 2px solid var(--gold-lux); box-shadow: 0 5px 15px rgba(0,0,0,0.2); } .flip-front { background: #fff; } .flip-back { background: var(--gold-grad); color: #222; transform: rotateY(180deg); border: none; } .gold-icon { font-size: 38px; margin-bottom: 12px; color: var(--gold-lux); } .box-head { font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase; font-size: 14px; margin: 0; color: #000; } .box-text { font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 14px; line-height: 1.4; margin: 0; } /* --- 4. GRAVITY FORM STYLING --- */ .gform_wrapper { background: #fff; padding: 40px; border: 2px solid var(--gold-lux); border-radius: 12px; box-shadow: 0 30px 60px rgba(0,0,0,0.3); } .gform_wrapper::before { content: "VIP APPLICATION"; display: block; text-align: center; color: var(--gold-lux); font-weight: 900; font-size: 24px; margin-bottom: 20px; font-family: 'Playfair Display', serif; letter-spacing: 1px; } /* Inputs */ .gform_wrapper input:not([type=submit]), .gform_wrapper textarea, .gform_wrapper select { border: 1px solid #ddd !important; border-left: 5px solid var(--gold-lux) !important; background: #fdfdfd; padding: 15px !important; border-radius: 4px; transition: 0.3s; font-family: 'Montserrat', sans-serif; } /* Submit Button */ .gform_wrapper input[type="submit"] { background: var(--gold-grad) !important; color: #000 !important; font-family: 'Montserrat', sans-serif; font-weight: 900 !important; text-transform: uppercase; border: none !important; padding: 18px !important; width: 100%; font-size: 18px !important; border-radius: 6px; cursor: pointer; margin-top: 15px; transition: transform 0.2s; } .gform_wrapper input[type="submit"]:hover { transform: scale(1.02); box-shadow: 0 0 20px rgba(212, 175, 55, 0.6); } /* Responsive */ @media (max-width: 768px) { .hero-title { font-size: 36px; line-height: 1.2; } .hero-subtitle { font-size: 14px; padding: 8px 15px; } .recruit-main-layout { flex-direction: column; margin-top: 0; gap: 40px; } .custom-hero-wrapper { height: 60vh; } .agency-grid { grid-template-columns: 1fr; } /* Stack boxes on mobile */ }