/* ============================================================ GLOBAL RESET & BASE STYLES (Matches and all global HTML elements) ============================================================ */ /* =============================== SAFE ACQUISITION.COM FONT (FV) Only sets the font-family safely =============================== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700;800&display=swap'); html, body { font-family: "Poppins", sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: "Poppins", sans-serif; color: #131628; line-height: 1.6; background: #fff; } img { max-width: 100%; display: block; } .container { width: min(90%, 1200px); margin: auto; } .section { padding: 80px 0; } h1, h2, h3 { text-align: center; } /*========= WhatUps ============*/ .what img{ position: fixed; bottom: 2%; border-radius: 12px; width:8%; left: 90%; z-index: 999; } .what .call_me{ position: fixed; bottom: 2%; border-radius: 12px; left: 1%;; z-index: 999; animation: jumpy 1s infinite ease-in-out; /* Animation for continuous jumping */ } @keyframes jumpy { 0%, 100% { transform: translateY(0); /* At the start and end, the image is in its normal position */ } 50% { transform: translateY(-10px); /* In the middle of the animation, the image jumps up */ } } @media (max-width : 767px) { .what img { position: fixed; left: 30.5rem; bottom: 2%; border-radius: 12px; width: 15%; } } /* ============================ CTA HEADER BASE ============================ */ .cta-header { background: #0F1224; color: #fff; text-align: center; padding: 14px; /* even padding desktop + mobile */ font-weight: 700; } .cta-header p { margin: 0; padding: 10px 16px; /* padding inside the p box */ display: inline-flex; align-items: center; gap: 8px; /* spacing between elements */ background: rgba(255,255,255,0.1); border-radius: 6px; } .cta-header span { width: 10px; height: 10px; background: #ee2f2f; border-radius: 50%; display: inline-block; } /* Make phone number clickable visible */ .cta-header a strong { color: #fff; text-decoration:none; } /* ============================ RESPONSIVE (Phones) ============================ */ @media (max-width: 600px) { .cta-header { padding: 12px; } .cta-header p { padding: 8px 14px; gap: 6px; font-size: 14px; } .cta-header span { width: 8px; height: 8px; } } /* Ultra-small screens (iPhone SE / 320px width) */ @media (max-width: 360px) { .cta-header p { padding: 6px 12px; font-size: 13px; gap: 5px; } .cta-header span { width: 7px; height: 7px; } } .top-header { background: #6F00FF; padding: 1rem; position: relative; text-align: center; } .top-header p { background: #fff; color: #000; font-weight: 800; text-transform: uppercase; padding: 0.625rem 1rem; border-radius: 0.25rem; display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.7rem; letter-spacing: 0.05rem; text-decoration: none; } .top-header p span { width: 0.5rem; height: 0.5rem; background: #ee2f2f; border-radius: 50%; display: inline-block; } .logo { width: 2.5rem; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); } @media (max-width: 600px) { .logo { width: 32px; /* smaller logo */ left: 0.75rem; /* keep left but closer to edge */ top: 0.7rem; /* move it higher so it doesn't overlap */ transform: none; /* remove vertical centering */ } .top-header { padding: 0.75rem 1rem 0.75rem 3rem; /* left padding so text doesn't collide with logo */ } .top-header p { padding: 0.5rem 1rem; border-radius: 0.25rem; display: inline-flex; align-items: center; gap: 1rem; font-size: 0.8rem; letter-spacing: 0.01rem; } } /* ============================================================ HERO SECTION (Matches:
) ============================================================ */ .hero { background: #efefef; text-align: center; padding: 100px 0; } .hero-images { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: nowrap; position: relative; } /* Side hero statues (desktop only) */ .hero-left, .hero-right { width: 280px; height: auto; transition: opacity 0.3s ease; } /* Center hero text */ .hero-text { max-width: 600px; } .hero h1 { font-size: 48px; font-weight: 800; text-transform: uppercase; margin-bottom: 20px; } .hero h2 { font-weight: 600; font-size: 30px; margin-bottom: 30px; color: #302f2f; } /* Highlight Colors */ .highlight-red { color: #ff1e00; /* same red as CTA button */ font-weight: 800; } .highlight-purple { color: #5800cc; font-weight: 800; } /* Main CTA Button */ .cta_btn { display: inline-block; background: #ff1e00; color: #fff; padding: 15px 40px; font-weight: 700; border-radius: 8px; text-transform: uppercase; border: none; cursor: pointer; text-decoration: none; font-size: 20px; transition: 0.3s; } .cta_btn:hover { background: #5800cc; } /* Mobile-only hero image */ .hero-mobile { display: none; width: 260px; height: auto; margin-top: 20px; transition: opacity 0.4s ease; } /* ============================================================ HERO — MOBILE RESPONSIVE BEHAVIOR ============================================================ */ @media (max-width: 900px) { .hero-images { flex-direction: column; } .hero-left, .hero-right { display: none; } .hero-text { order: 1; } .hero-mobile { display: block; order: 2; width: 350px; height: auto; margin-top: 40px; } } /* ============================================================ SERVICIOS (FREE TRAINING STYLE GRID) Matches:
============================================================ */ .free-training h2 { font-size: 36px; margin-bottom: 10px; } .free-training .purple { color: #6f00ff; } .free-training p { text-align: center; margin-bottom: 40px; font-weight: 600; font-size: 20px; margin-bottom: 30px; color: #302f2f; } .training-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; text-align: center; } .training-item h3 { margin: 15px 0; font-size: 18px; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .badge { background: #f1283a; color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 900; } /* ========================================================== CTA BANNER (Dark) ========================================================== */ .cta-banner-dark { background: #5800cc; color: #fff; text-align: center; padding: 4rem 1.25rem; border-top: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255,255,255,0.05); } .cta-container { max-width: 56rem; margin: 0 auto; } .cta-banner-dark h3 { font-size: 2.5rem; font-weight: 800; text-transform: uppercase; margin-bottom: 0.8rem; } .cta-banner-dark p { font-size: 1.5rem; color: #dcdcdc; line-height: 1.6; margin-bottom: 1.8rem; } .cta-banner-dark strong { color: #00ff2a; } .cta-btn { background: #f80303; color: #fff; border: none; padding: 1rem 2rem; font-size: 1.25rem; font-weight: 700; border-radius: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-block; } .cta-btn:hover { background: #5800cc; } /* ========================================================== AMARRES DE AMOR (ABOUT SECTION) ========================================================== */ .about { background: #fff; padding: 6.25rem 1.25rem; } .about__container { display: grid; align-items: center; gap: 3rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); } @media (min-width: 62rem) { .about__container { grid-template-columns: 1.1fr 0.9fr; } .about__data { order: 1; } .about__images { order: 2; } } .section__subtitle { color: #6f00ff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.625rem; display: block; font-size: 1.2rem; } .section__title { font-size: 2.rem; font-weight: 800; line-height: 1.3; color: #1f223c; margin-bottom: 1.25rem; } .about__description { color: #333; font-size: 1.5rem; line-height: 1.7; margin-bottom: 1.875rem; } .about__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(13.75rem, 1fr)); gap: 1rem; margin-bottom: 1.875rem; } .about__list-item { display: flex; align-items: center; gap: 0.625rem; color: #222; font-weight: 500; } .about__list-item i { color: #6f00ff; font-size: 1.4rem; } .button { background: #f80303; color: #fff; border: none; padding: 1rem 2rem; font-size: 1.25rem; font-weight: 700; border-radius: 0.5rem; text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-block; } .button:hover { background: #5800cc; } .about__images { position: relative; display: grid; justify-items: center; align-items: center; gap: 1rem; } .about__img-1 { width: 100%; max-width: 26rem; border-radius: 0.75rem; box-shadow: 0 0.625rem 1.875rem rgba(0,0,0,0.15); } .about__img-2 { width: 70%; max-width: 17.5rem; position: absolute; bottom: -1.875rem; right: -1.25rem; border-radius: 0.75rem; box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.1); } /* ========================================================== FAQ SECTION ========================================================== */ .faq-section { background: linear-gradient(rgba(145, 0, 255, 0.95), rgba(57, 0, 144, 0.95)), center/cover no-repeat; color: #fff; padding: 6.25rem 1.25rem; text-align: center; } .faq-title { font-size: 2.875rem; font-weight: 800; text-transform: uppercase; margin-bottom: 3rem; } .faq-item { background: rgba(255, 254, 254, 0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 0.625rem; margin: 0 auto 1.25rem; max-width: 50rem; overflow: hidden; text-align: left; transition: all 0.3s ease; } .faq-item.open { background: rgba(253, 253, 253, 0.15); box-shadow: 0 0.25rem 1.25rem rgba(111,0,255,0.25); } .faq-question { width: 100%; background: none; border: none; color: #fff; text-align: left; padding: 1.25rem 1.5rem; font-size: 1.2rem; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; align-items: center; } .faq-question:hover { color: #03fd1c; } .faq-icon { font-size: 1.6rem; transition: transform 0.3s ease; } .faq-item.open .faq-icon { transform: rotate(45deg); color: #ff4aff; } .faq-answer { max-height: 0; overflow: hidden; background: rgba(0,0,0,0.25); transition: max-height 0.4s ease, padding 0.4s ease; } .faq-item.open .faq-answer { max-height: 18.75rem; padding: 0 1.5rem 1.25rem; } .faq-answer p { color: #dcdcdc; line-height: 1.6; font-size: 1rem; margin-top: 0.75rem; } .faq-link { color: #ff4aff; font-weight: 600; text-decoration: none; } .faq-link:hover { color: #d244ff; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 48rem) { .hero h1 { font-size: 2rem; } .hero h2 { font-size: 1.25rem; } .services h2, .faq-title { font-size: 1.8rem; } .cta-banner-dark h3 { font-size: 1.3rem; } } /* ============================================================ FOOTER (Matches your new footer structure) ============================================================ */ .site-footer { background: #131628; color: #fff; padding: 40px 20px; } /* Desktop row: horizontal layout */ .footer-row { display: flex; align-items: center; justify-content: center; position: relative; white-space: nowrap; overflow-x: auto; padding-bottom: 10px; gap: 25px; scrollbar-width: none; /* Firefox */ } .footer-row::-webkit-scrollbar { display: none; /* Chrome */ } /* Footer logo stays left on desktop */ .footer-logo { width: 45px; height: auto; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } /* Footer navigation centered */ .footer-links { display: flex; gap: 24px; margin: 0 auto; } .footer-links a { color: #fff; font-size: 14px; text-decoration: none; opacity: 0.9; } .footer-links a:hover { opacity: 0.7; } /* Copyright */ .footer-copy { text-align: center; margin-top: 20px; font-size: 13px; opacity: 0.7; } /* ============================================================ MOBILE RESPONSIVE (vertical layout) ============================================================ */ @media (max-width: 768px) { .footer-row { flex-direction: column; /* vertical */ align-items: center; justify-content: center; white-space: normal; /* allow wrapping */ gap: 18px; padding-bottom: 0; } /* Move logo from absolute to normal flow */ .footer-logo { position: relative; left: unset; top: unset; transform: none; margin-bottom: 10px; } /* Stack links vertically on mobile */ .footer-links { flex-direction: column; gap: 12px; text-align: center; } }