@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {

    --primary: #F0A500;

    --primary-dark: #C88800;

    --primary-glow: rgba(240,165,0,0.18);

    --primary-soft: rgba(240,165,0,0.08);

    --dark-bg: #070B14;

    --dark-card: #0F1520;

    --dark-card2: #152030;

    --dark-border: rgba(240,165,0,0.12);

    --text-white:    #ffffff;

    --text-muted: #8A9BB5;

    --text-light: #B8C9DE;

    --radius-card:   14px;

    --radius-btn:    50px;

    --transition:    0.35s cubic-bezier(.4,0,.2,1);

}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body { font-family: 'Inter', sans-serif; background: var(--dark-bg); color: var(--text-light); overflow-x: clip !important; width: 100%; max-width: 100%; position: relative; }

::-webkit-scrollbar { width: 6px; }

::-webkit-scrollbar-track { background: var(--dark-bg); }

::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }

#top-bar {

    background: #040710;

    border-bottom: 1px solid var(--dark-border);

    padding: 9px 0;

    font-size: 0.82rem;

    position: relative;

    z-index: 1100;

}

#top-bar a { color: var(--text-muted); text-decoration: none; transition: color var(--transition); }

#top-bar a:hover { color: var(--primary); }

#top-bar .top-bar-item { display: flex; align-items: center; gap: 6px; }

.btn-whatsapp {

    background: #25D366;

    color: #fff !important;

    padding: 5px 16px;

    border-radius: var(--radius-btn);

    font-weight: 600;

    font-size: 0.78rem;

    transition: all var(--transition);

    white-space: nowrap;

}

.btn-whatsapp:hover { background: #1ebe5e; transform: translateY(-1px); }

#mainNav {

    background: rgba(7,11,20,0.96);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

    border-bottom: 1px solid var(--dark-border);

    padding: 14px 0;

    transition: all 0.3s ease;

    z-index: 1030;

}

#mainNav.scrolled {

    background: rgba(4,7,16,0.98);

    box-shadow: 0 4px 24px rgba(0,0,0,0.5);

    padding: 10px 0;

}

#mainNav .navbar-brand img { height: 38px; }

#mainNav .navbar-nav {

    position: relative;

}

@keyframes underline-shimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}
@keyframes nav-text-sweep {

    0%   { background-position: 200% center; }

    20%  { background-position: -200% center; }

    100% { background-position: -200% center; }

}

.nav-link-lp {

    font-weight: 500;

    font-size: 0.95rem;

    padding: 6px 14px !important;

    transition: all 0.3s ease;

    text-decoration: none !important;

    position: relative;

    background: transparent;

    border: none !important;

    box-shadow: none !important;

    background: linear-gradient(90deg,
        #8A9BB5 0%,
        #8A9BB5 35%,
        #ffffff 50%,
        #8A9BB5 65%,
        #8A9BB5 100%
    );
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
    animation: nav-text-sweep 10s ease-in-out infinite;

}
















.nav-item:nth-child(1) .nav-link-lp { animation-delay: 0.0s; }
.nav-item:nth-child(2) .nav-link-lp { animation-delay: 0.3s; }
.nav-item:nth-child(3) .nav-link-lp { animation-delay: 0.6s; }
.nav-item:nth-child(4) .nav-link-lp { animation-delay: 0.9s; }
.nav-item:nth-child(5) .nav-link-lp { animation-delay: 1.2s; }
.nav-item:nth-child(6) .nav-link-lp { animation-delay: 1.5s; }
.nav-item:nth-child(7) .nav-link-lp { animation-delay: 1.8s; }

.nav-link-lp::after {

    content: '';

    position: absolute;

    bottom: -2px; left: 50%;

    width: 0; height: 2px;

    background: linear-gradient(90deg, transparent 0%, #F0A500 40%, #FFD060 50%, #F0A500 60%, transparent 100%);

    background-size: 200% auto;

    border-radius: 2px;

    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;

    transform: translateX(-50%);

    box-shadow: 0 0 8px rgba(240,165,0,0.4);

    animation: underline-shimmer 2.5s ease-in-out infinite;

    animation-play-state: paused;

}

.nav-link-lp:hover, .nav-link-lp.active {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #F0A500 !important;
    color: #F0A500 !important;
    text-shadow: 0 0 8px rgba(240,165,0,0.4);
    filter: none;
}

.nav-link-lp:hover::after, .nav-link-lp.active::after {

    width: 70%;

    box-shadow: 0 0 10px rgba(240,165,0,0.7);

    animation-play-state: running;

}


.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link:active,
.nav-link-lp:focus {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}


.btn-nav-whatsapp { white-space: nowrap;
    border: 1px solid #25D366;
    color: #25D366 !important;
    padding: 7px 18px !important;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 0.85rem;
    transition: all var(--transition);
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}
.btn-nav-whatsapp:hover {
    background: rgba(37,211,102, 0.1);
    color: #1ebe5e !important;
    border-color: #1ebe5e;
    transform: translateY(-2px);
}
.btn-nav-order { white-space: nowrap;

    background: var(--primary);

    color: #fff !important;

    padding: 8px 22px !important;

    border-radius: var(--radius-btn);

    font-weight: 700;

    font-size: 0.85rem;

    transition: all var(--transition);

    box-shadow: 0 0 20px var(--primary-glow);

}

.btn-nav-order:hover {

    background: var(--primary-dark);

    transform: translateY(-2px);

    box-shadow: 0 4px 28px rgba(240,165,0,0.4);

}

.btn-nav-order::after { display: none !important; }

#hero {

    min-height: 100vh;

    background: linear-gradient(135deg, rgba(7,11,20,0.80) 0%, rgba(10,16,30,0.65) 50%, rgba(7,11,20,0.88) 100%),

                url('../../assets/img/lp_hero.jpg?v=1788435594') center/cover no-repeat;

    display: flex;

    align-items: center;

    position: relative;

    overflow: hidden;

    padding-top: 80px;    

    padding-bottom: 40px;

}

#hero::before {

    content: '';

    position: absolute;

    top: -50%; left: -50%;

    width: 200%; height: 200%;

    background: radial-gradient(ellipse at 70% 50%, rgba(240,165,0,0.08) 0%, transparent 60%);

    pointer-events: none;

}

.hero-badge {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    background: var(--primary-soft);

    border: 1px solid rgba(240,165,0,0.3);

    color: var(--primary);

    padding: 6px 18px;

    border-radius: 50px;

    font-size: 0.8rem;

    font-weight: 600;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    margin-bottom: 1.5rem;

}

.hero-title {

    font-size: clamp(1.8rem, 4.5vw, 4rem);

    font-weight: 900;

    line-height: 1.1;

    letter-spacing: -0.02em;

    margin-bottom: 1.5rem;

}

.hero-title .accent { color: var(--primary); }

.hero-subtitle {

    font-size: 1.1rem;

    color: var(--text-muted);

    max-width: 540px;

    margin-bottom: 2.5rem;

    line-height: 1.8;

}

.btn-hero-primary {

    background: var(--primary);

    color: #fff;

    padding: 15px 36px;

    border-radius: var(--radius-btn);

    font-weight: 700;

    font-size: 1rem;

    text-decoration: none;

    display: inline-flex; align-items: center; gap: 8px;

    transition: all var(--transition);

    box-shadow: 0 0 30px rgba(240,165,0,0.35);

    border: none;

}

.btn-hero-primary:hover {

    background: var(--primary-dark);

    color: #fff;

    transform: translateY(-3px);

    box-shadow: 0 8px 40px rgba(240,165,0,0.5);

}

.btn-hero-outline {

    background: transparent;

    color: #fff;

    padding: 15px 36px;

    border-radius: var(--radius-btn);

    font-weight: 600;

    font-size: 1rem;

    text-decoration: none;

    display: inline-flex; align-items: center; gap: 8px;

    transition: all var(--transition);

    border: 1.5px solid rgba(255,255,255,0.25);

}

.btn-hero-outline:hover {

    border-color: var(--primary);

    color: var(--primary);

    transform: translateY(-3px);

}

.hero-scroll-indicator {

    position: absolute;

    bottom: 30px;

    left: 50%;

    transform: translateX(-50%);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;

    color: var(--text-muted);

    font-size: 0.75rem;

    animation: bounce 2s infinite;

}

@keyframes bounce {

    0%, 100% { transform: translateX(-50%) translateY(0); }

    50%       { transform: translateX(-50%) translateY(8px); }

}

#stats-bar {

    background: var(--dark-card);

    border-top: 1px solid var(--dark-border);

    border-bottom: 1px solid var(--dark-border);

    padding: 40px 0;

}

.stat-item { text-align: center; position: relative; }

.stat-item:not(:last-child)::after {

    content: '';

    position: absolute;

    right: 0; top: 20%;

    height: 60%; width: 1px;

    background: var(--dark-border);

}

.stat-number {

    font-size: 2.8rem;

    font-weight: 900;

    color: var(--primary);

    line-height: 1;

    display: block;

    letter-spacing: -0.02em;

}

.stat-suffix { font-size: 1.6rem; }

.stat-label {

    font-size: 0.82rem;

    color: var(--text-muted);

    text-transform: uppercase;

    letter-spacing: 0.08em;

    margin-top: 6px;

    font-weight: 500;

}

section { padding: 90px 0; }

.section-tag {

    font-size: 0.75rem;

    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 0.12em;

    color: var(--primary);

    display: block;

    margin-bottom: 12px;

}

.section-title {

    font-size: clamp(1.8rem, 3.5vw, 2.8rem);

    font-weight: 800;

    letter-spacing: -0.02em;

    line-height: 1.2;

    margin-bottom: 1rem;

}

.section-desc {

    color: var(--text-muted);

    font-size: 1rem;

    max-width: 520px;

    line-height: 1.8;

}

.section-divider {

    width: 48px;

    height: 3px;

    background: var(--primary);

    border-radius: 2px;

    margin: 16px 0 24px;

}

.sport-card {

    background: var(--dark-card);

    border: 1px solid var(--dark-border);

    border-radius: var(--radius-card);

    overflow: hidden;

    transition: all var(--transition);

    position: relative;

    cursor: pointer;

    height: 100%;

}

.sport-card:hover {

    transform: translateY(-8px);

    border-color: rgba(240,165,0,0.35);

    box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 0 1px rgba(240,165,0,0.1);

}

.sport-card-img-wrap {

    overflow: hidden;

    height: 220px;

    position: relative;

}

.sport-card-img-wrap img {

    width: 100%; height: 100%;

    object-fit: cover;

    transition: transform 0.6s ease;

}

.sport-card:hover .sport-card-img-wrap img { transform: scale(1.08); }

.sport-card-overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);

    opacity: 0;

    transition: opacity var(--transition);

    display: flex;

    align-items: flex-end;

    justify-content: center;

    padding-bottom: 20px;

}

.sport-card:hover .sport-card-overlay { opacity: 1; }

.sport-card-body { padding: 20px; }

.sport-card-title {

    font-size: 1.1rem;

    font-weight: 700;

    margin-bottom: 6px;

}

.sport-card-text {

    font-size: 0.85rem;

    color: var(--text-muted);

    margin: 0;

}

.sport-badge {

    position: absolute;

    top: 14px; left: 14px;

    background: var(--primary);

    color: #fff;

    font-size: 0.7rem;

    font-weight: 700;

    padding: 4px 12px;

    border-radius: 50px;

    text-transform: uppercase;

    letter-spacing: 0.06em;

}

.btn-order-sport {

    background: var(--primary);

    color: #fff;

    border: none;

    padding: 8px 22px;

    border-radius: 50px;

    font-weight: 600;

    font-size: 0.85rem;

    text-decoration: none;

    display: inline-flex; align-items: center; gap: 6px;

    transition: all var(--transition);

}

.btn-order-sport:hover { background: var(--primary-dark); color: #fff; }

#process { background: var(--dark-card); }

.process-card {

    background: var(--dark-bg);

    border: 1px solid var(--dark-border);

    border-radius: var(--radius-card);

    overflow: hidden;

    transition: all var(--transition);

    height: 100%;

}

.process-card:hover {

    transform: translateY(-6px);

    border-color: rgba(240,165,0,0.3);

    box-shadow: 0 16px 40px rgba(0,0,0,0.5);

}

.process-card-img-wrap {

    position: relative;

    height: 200px;

    overflow: hidden;

}

.process-card-img-wrap img {

    width: 100%; height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;

}

.process-card:hover .process-card-img-wrap img { transform: scale(1.07); }

.process-card-num {

    position: absolute;

    top: 14px; left: 14px;

    width: 32px; height: 32px;

    background: var(--primary);

    color: #fff;

    border-radius: 50%;

    font-size: 0.85rem;

    font-weight: 800;

    display: flex; align-items: center; justify-content: center;

    box-shadow: 0 0 14px rgba(240,165,0,0.5);

}

.process-card-body {

    padding: 22px 22px 24px;

}

.process-card-icon {

    width: 52px; height: 52px;

    border-radius: 12px;

    background: var(--primary-soft);

    border: 1px solid rgba(240,165,0,0.25);

    display: flex; align-items: center; justify-content: center;

    font-size: 1.3rem;

    color: var(--primary);

    margin-bottom: 14px;

    transition: all var(--transition);

}

.process-card:hover .process-card-icon {

    background: var(--primary);

    color: #fff;

    border-color: var(--primary);

    box-shadow: 0 0 20px var(--primary-glow);

}

.process-card-title {

    font-size: 1.05rem;

    font-weight: 700;

    margin-bottom: 8px;

}

.process-card-desc {

    font-size: 0.84rem;

    color: var(--text-muted);

    line-height: 1.7;

    margin: 0;

}

.why-card {

    background: var(--dark-card);

    border: 1px solid var(--dark-border);

    border-radius: var(--radius-card);

    padding: 32px 28px;

    transition: all var(--transition);

    height: 100%;

    position: relative;

    overflow: hidden;

}

.why-card::before {

    content: '';

    position: absolute;

    top: 0; left: 0;

    width: 3px; height: 0;

    background: var(--primary);

    transition: height 0.4s ease;

    border-radius: 0 0 3px 0;

}

.why-card:hover::before { height: 100%; }

.why-card:hover {

    border-color: rgba(240,165,0,0.2);

    transform: translateY(-6px);

    box-shadow: 0 16px 40px rgba(0,0,0,0.4);

}

.why-icon {

    width: 56px; height: 56px;

    border-radius: 12px;

    background: var(--primary-soft);

    border: 1px solid rgba(240,165,0,0.2);

    display: flex; align-items: center; justify-content: center;

    font-size: 1.4rem;

    margin-bottom: 20px;

    transition: all var(--transition);

}

.why-card:hover .why-icon {

    background: var(--primary);

    border-color: var(--primary);

}

.why-title {

    font-size: 1rem;

    font-weight: 700;

    margin-bottom: 10px;

}

.why-text {

    font-size: 0.85rem;

    color: var(--text-muted);

    line-height: 1.7;

    margin: 0;

}

#quote { background: #040710; position: relative; overflow: hidden; }

#quote::before {

    content: '';

    position: absolute;

    top: -100px; right: -100px;

    width: 500px; height: 500px;

    border-radius: 50%;

    background: radial-gradient(circle, rgba(240,165,0,0.06) 0%, transparent 70%);

    pointer-events: none;

}

.quote-form-wrap {

    background: var(--dark-card);

    border: 1px solid var(--dark-border);

    border-radius: 20px;

    padding: 40px;

}

.form-label-lp {

    font-size: 0.82rem;

    font-weight: 600;

    color: var(--text-muted);

    text-transform: uppercase;

    letter-spacing: 0.06em;

    margin-bottom: 6px;

}

.form-control-lp, .form-select-lp {

    background: #111;

    border: 1px solid var(--dark-border);

    color: var(--text-white);

    border-radius: 10px;

    padding: 12px 16px;

    font-size: 0.92rem;

    transition: all var(--transition);

    width: 100%;

    font-family: 'Inter', sans-serif;

}

.form-control-lp:focus, .form-select-lp:focus, .form-select-lp:active {

    outline: none;

    border-color: var(--primary);

    background: #151515;

    box-shadow: 0 0 0 3px rgba(240,165,0,0.1);

}

.form-control-lp::placeholder { color: #555; }

.form-select-lp option {
    background: #111;
    color: #B8C9DE;
}
.form-select-lp option:checked {
    background: linear-gradient(#1a2535, #1a2535);
    color: #F0A500;
}
.form-select-lp option:hover {
    background: linear-gradient(#1a2535, #1a2535) !important;
    color: #F0A500;
}
.form-select-lp option[value=''] {
    color: #555;
}

textarea.form-control-lp { resize: vertical; min-height: 110px; }

.btn-submit-quote {

    background: var(--primary);

    color: #fff;

    border: none;

    padding: 15px 40px;

    border-radius: var(--radius-btn);

    font-weight: 700;

    font-size: 1rem;

    cursor: pointer;

    transition: all var(--transition);

    box-shadow: 0 0 30px var(--primary-glow);

    width: 100%;

    display: flex; align-items: center; justify-content: center; gap: 8px;

    font-family: 'Inter', sans-serif;

}

.btn-submit-quote:hover {

    background: var(--primary-dark);

    transform: translateY(-2px);

    box-shadow: 0 6px 36px rgba(240,165,0,0.5);

}

.form-info-card {

    background: var(--primary-soft);

    border: 1px solid rgba(240,165,0,0.2);

    border-radius: 12px;

    padding: 20px;

    display: flex; align-items: flex-start; gap: 14px;

    margin-bottom: 20px;

}

.form-info-icon { font-size: 1.4rem; flex-shrink: 0; }

.form-info-title { font-size: 0.88rem; font-weight: 700; margin-bottom: 4px; }

.form-info-text { font-size: 0.8rem; color: var(--text-muted); margin: 0; }

#delivery {

    background: linear-gradient(135deg, rgba(240,165,0,0.04) 0%, var(--dark-card) 100%);

    border-top: 1px solid var(--dark-border);

    border-bottom: 1px solid var(--dark-border);

}

.delivery-img {

    border-radius: var(--radius-card);

    width: 100%;

    height: 400px;

    object-fit: cover;

    box-shadow: 0 20px 60px rgba(0,0,0,0.5);

}

.delivery-feature {

    display: flex;

    align-items: flex-start;

    gap: 14px;

    margin-bottom: 20px;

}

.delivery-feature-icon {

    width: 42px; height: 42px;

    border-radius: 10px;

    background: var(--primary-soft);

    border: 1px solid rgba(240,165,0,0.2);

    display: flex; align-items: center; justify-content: center;

    font-size: 1.1rem;

    flex-shrink: 0;

}

.delivery-feature-title { font-size: 0.92rem; font-weight: 700; margin-bottom: 3px; }

.delivery-feature-text { font-size: 0.82rem; color: var(--text-muted); margin: 0; }

#testimonials { background: var(--dark-bg); }

.testimonial-card-lp {

    background: var(--dark-card);

    border: 1px solid var(--dark-border);

    border-radius: var(--radius-card);

    padding: 32px;

    transition: all var(--transition);

    height: 100%;

    position: relative;

}

.testimonial-card-lp::before {

    content: '"';

    position: absolute;

    top: 20px; right: 24px;

    font-size: 5rem;

    color: var(--primary);

    opacity: 0.15;

    line-height: 1;

    font-family: Georgia, serif;

}

.testimonial-card-lp:hover {

    border-color: rgba(240,165,0,0.2);

    transform: translateY(-6px);

    box-shadow: 0 16px 40px rgba(0,0,0,0.4);

}

.testimonial-stars { color: #ffd700; font-size: 0.9rem; margin-bottom: 14px; }

.testimonial-text-lp { font-size: 0.92rem; color: var(--text-light); line-height: 1.8; margin-bottom: 24px; font-style: italic; }

.testimonial-author { display: flex; align-items: center; gap: 14px; }

.testimonial-avatar-lp {

    width: 50px; height: 50px;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid var(--primary);

}

.testimonial-name-lp { font-size: 0.92rem; font-weight: 700; margin-bottom: 2px; }

.testimonial-company-lp { font-size: 0.78rem; color: var(--text-muted); }

#footer {

    background: #080808;

    border-top: 1px solid var(--dark-border);

    padding: 60px 0 30px;

}

.footer-logo img { height: 36px; margin-bottom: 14px; }

.footer-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.8; max-width: 280px; }

.footer-heading { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary); margin-bottom: 18px; }

.footer-link { display: block; color: var(--text-muted); text-decoration: none; font-size: 0.85rem; margin-bottom: 10px; transition: color var(--transition); }

.footer-link:hover { color: var(--primary); padding-left: 4px; }

.footer-contact-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 0.85rem; color: var(--text-muted); }

.footer-contact-item i { color: var(--primary); margin-top: 3px; flex-shrink: 0; }

.footer-divider { border-color: var(--dark-border); margin: 30px 0 24px; }

.footer-copy { font-size: 0.8rem; color: #555; }

.social-link {

    width: 36px; height: 36px;

    border-radius: 8px;

    background: var(--dark-card2);

    border: 1px solid var(--dark-border);

    display: inline-flex; align-items: center; justify-content: center;

    color: var(--text-muted);

    text-decoration: none;

    transition: all var(--transition);

    font-size: 0.9rem;

}

.social-link:hover { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-3px); }

.reveal {

    opacity: 0;

    transform: translateY(30px);

    transition: opacity 0.6s ease, transform 0.6s ease;

}

.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left { opacity: 0; transform: translateX(-30px); transition: opacity 0.6s ease, transform 0.6s ease; }

.reveal-right { opacity: 0; transform: translateX(30px); transition: opacity 0.6s ease, transform 0.6s ease; }

.reveal-left.visible, .reveal-right.visible { opacity: 1; transform: translate(0); }

.delay-1 { transition-delay: 0.1s !important; }

.delay-2 { transition-delay: 0.2s !important; }

.delay-3 { transition-delay: 0.3s !important; }

.delay-4 { transition-delay: 0.4s !important; }

.delay-5 { transition-delay: 0.5s !important; }

#floatingCTA {

    position: fixed;

    bottom: 28px;

    right: 28px;

    z-index: 9999;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 10px;

}

.floating-btn {

    width: 54px; height: 54px;

    border-radius: 50%;

    display: flex; align-items: center; justify-content: center;

    font-size: 1.2rem;

    text-decoration: none;

    transition: all var(--transition);

    box-shadow: 0 4px 20px rgba(0,0,0,0.4);

    border: none;

    cursor: pointer;

}

.floating-wa { 

    background: #25D366; 

    color: #fff; 

    animation: glow-pulse-green 2.5s ease-in-out infinite;

}

.floating-wa:hover { 

    background: #1ebe5e; 

    color: #fff; 

    transform: scale(1.1); 

    animation: none;

    box-shadow: 0 8px 30px rgba(37,211,102,0.6);

}

@keyframes glow-pulse-green {

    0%, 100% { box-shadow: 0 0 15px rgba(37,211,102,0.4); }

    50%       { box-shadow: 0 0 35px rgba(37,211,102,0.8), 0 0 60px rgba(37,211,102,0.3); }

}

.floating-top { background: var(--dark-card); border: 1px solid var(--dark-border); color: var(--text-muted); }

.floating-top:hover { background: var(--primary); color: #fff; transform: scale(1.1); }

@keyframes float {

    0%, 100% { transform: translateY(0px); }

    50%       { transform: translateY(-14px); }

}

@keyframes spin-slow {

    from { transform: rotate(0deg); }

    to   { transform: rotate(360deg); }

}

@keyframes glow-pulse {

    0%, 100% { box-shadow: 0 0 20px rgba(240,165,0,0.3); }

    50%       { box-shadow: 0 0 45px rgba(240,165,0,0.7), 0 0 80px rgba(240,165,0,0.2); }

}

@keyframes shimmer {

    0%   { background-position: -200% center; }

    100% { background-position: 200% center; }

}

@keyframes fadeUp {

    from { opacity: 0; transform: translateY(40px); }

    to   { opacity: 1; transform: translateY(0); }

}

@keyframes scalePop {

    0%   { opacity: 0; transform: scale(0.85); }

    70%  { transform: scale(1.04); }

    100% { opacity: 1; transform: scale(1); }

}

@keyframes drift {

    0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0.6; }

    33%  { transform: translateY(-30px) translateX(15px) scale(1.1); opacity: 0.9; }

    66%  { transform: translateY(-10px) translateX(-10px) scale(0.9); opacity: 0.5; }

    100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.6; }

}

@keyframes text-shimmer {

    0%   { background-position: -400px 0; }

    100% { background-position: 400px 0; }

}

@keyframes slideInLeft {

    from { opacity: 0; transform: translateX(-50px); }

    to   { opacity: 1; transform: translateX(0); }

}

@keyframes border-glow {

    0%, 100% { border-color: rgba(240,165,0,0.2); }

    50%       { border-color: rgba(240,165,0,0.6); }

}

@keyframes count-flash {

    0%   { color: #fff; }

    50%  { color: var(--primary); text-shadow: 0 0 20px rgba(240,165,0,0.8); }

    100% { color: var(--primary); }

}

.hero-img-float {

    animation: float 5s ease-in-out infinite;

    border-radius: 20px;

    box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 40px rgba(240,165,0,0.1);

}

#hero-particles {

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 0;

}

#hero .container { position: relative; z-index: 1; }

.typewriter-text::after {

    content: '|';

    color: var(--primary);

    animation: blink-caret 0.85s step-end infinite;

    font-weight: 300;

    margin-left: 2px;

}

@keyframes blink-caret {

    from, to { opacity: 1; }

    50%       { opacity: 0; }

}

.btn-hero-primary, .glow-active {

    animation: glow-pulse 2.8s ease-in-out infinite;

}

.btn-hero-primary:hover, .glow-active:hover {

    animation: none;

    box-shadow: 0 8px 40px rgba(240,165,0,0.5);

}

.stat-number.counted {

    animation: count-flash 0.4s ease forwards;

}

.stat-item {

    animation: fadeUp 0.6s ease both;

}

.section-title-shine {

    display: inline-block;

    position: relative;

    color: #fff; 

}

@supports (-webkit-background-clip: text) {

    .section-title-shine {

        background: linear-gradient(

            90deg,

            #ffffff 0%, #ffffff 35%,

            #F0A500 50%,

            #ffffff 65%, #ffffff 100%

        );

        background-size: 400px auto;

        -webkit-background-clip: text;

        -webkit-text-fill-color: transparent;

        background-clip: text;

        animation: text-shimmer 5s linear infinite;

    }

}

.sport-card.animate-in {

    animation: scalePop 0.5s cubic-bezier(.4,0,.2,1) both;

}

.process-card.animate-in {

    animation: fadeUp 0.5s ease both;

}

.process-card {

    border-animation: border-glow 3s ease-in-out infinite;

}

.why-card.animate-in {

    animation: scalePop 0.5s ease both;

}

.hero-dot {

    position: absolute;

    border-radius: 50%;

    background: var(--primary);

    opacity: 0.18;

    pointer-events: none;

}

.hero-dot:nth-child(1) { width:6px; height:6px; top:20%; left:10%; animation: drift 6s ease-in-out infinite; }

.hero-dot:nth-child(2) { width:4px; height:4px; top:60%; left:5%;  animation: drift 8s ease-in-out infinite 1s; }

.hero-dot:nth-child(3) { width:8px; height:8px; top:30%; left:90%; animation: drift 7s ease-in-out infinite 2s; }

.hero-dot:nth-child(4) { width:5px; height:5px; top:70%; left:85%; animation: drift 9s ease-in-out infinite 0.5s; }

.hero-dot:nth-child(5) { width:3px; height:3px; top:15%; left:50%; animation: drift 5s ease-in-out infinite 3s; }

.hero-dot:nth-child(6) { width:7px; height:7px; top:80%; left:40%; animation: drift 11s ease-in-out infinite 1.5s; }

.hero-dot:nth-child(7) { width:4px; height:4px; top:45%; left:75%; animation: drift 7s ease-in-out infinite 2.5s; }

.hero-dot:nth-child(8) { width:6px; height:6px; top:55%; left:25%; animation: drift 9s ease-in-out infinite 4s; }

#scroll-progress {

    position: fixed;

    top: 0; left: 0;

    height: 3px;

    background: linear-gradient(to right, var(--primary), #F0A500);

    z-index: 9999;

    width: 0%;

    transition: width 0.1s linear;

    box-shadow: 0 0 8px rgba(240,165,0,0.5);

}

@media (max-width: 1199px) {

    .hero-title { font-size: clamp(1.6rem, 4vw, 3.2rem); }
}

@media (max-width: 991px) {

    section { padding: 60px 0; }

    #hero { padding-top: 80px; padding-bottom: 40px; }

    .hero-title { font-size: clamp(1.5rem, 4.5vw, 2.5rem); }

    .hero-subtitle { font-size: 0.95rem; }

    .stat-item:not(:last-child)::after { display: none; }

    .delivery-img { height: 280px; }

    .quote-form-wrap { padding: 28px 22px; }

}

@media (max-width: 767px) {

    .container {

        padding-left: 18px !important;

        padding-right: 18px !important;

    }

    #top-bar .top-bar-hide { display: none !important; }

    #top-bar { padding: 8px 0; }

    #top-bar .container { justify-content: center !important; }

    #hero {

        min-height: unset;

        padding-top: 50px;

        padding-bottom: 30px;

        text-align: center;

    }

    #hero .row {

        min-height: auto !important;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        padding: 0 !important;

    }

    #hero .col-lg-6 {

        width: 100% !important;

        max-width: 100% !important;

    }

    .hero-badge {
        font-size: 0.75rem;
        padding: 6px 16px;
        letter-spacing: 0.03em;
        display: inline-flex;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 24px;
    }
    .hero-title {
        font-size: 1.75rem;
        margin-bottom: 1.25rem;
        line-height: 1.2;
    }
    .hero-subtitle {
        font-size: 0.95rem;
        max-width: 100%;
        margin: 0 0 2rem 0;
        min-height: 50px; 
        line-height: 1.5;
    }

    #hero .d-flex.gap-3 {

        flex-direction: column;

        align-items: stretch;

        gap: 12px !important;

    }

    .btn-hero-primary, .btn-hero-outline {

        width: 100%;

        justify-content: center;

        padding: 13px 20px;

        font-size: 0.92rem;

        border-radius: 50px;

    }

    #hero .d-flex.gap-4,
    #hero .d-flex.gap-3.mt-4 {
        justify-content: center;
        flex-wrap: wrap;
        gap: 16px !important;
        margin-top: 28px !important;
    }
    #hero .d-flex.gap-3.mt-4 span { margin-bottom: 4px; }

    .hero-scroll-indicator { display: none; }

    #stats-bar { padding: 28px 0; }

    .stat-number { font-size: 2rem; }

    .stat-label  { font-size: 0.75rem; }

    .sport-card-img-wrap { height: 175px; }

    .sport-card-body { padding: 16px; }

    .sport-card-title { font-size: 1rem; }

    .process-card-img-wrap { height: 155px; }

    .process-card-body { padding: 18px; }

    .process-card-title { font-size: 0.95rem; }

    .why-card { padding: 24px 20px; }

    .quote-form-wrap { padding: 20px 16px; }

    .form-control-lp, .form-select-lp {

        padding: 11px 14px;

        font-size: 0.9rem;

    }

    .btn-submit-quote { padding: 14px 20px; font-size: 0.95rem; }

    .delivery-img { height: 210px; }

    .delivery-feature { margin-bottom: 14px; }

    .testimonial-card-lp { padding: 24px 20px; }

    .testimonial-text-lp { font-size: 0.88rem; }

    #about .col-lg-5 img {

        height: 240px !important;

    }

    #footer { padding: 40px 0 24px; }

    .footer-desc { max-width: 100%; }

    .footer-logo img { height: 30px; }

    .footer-contact-item { font-size: 0.82rem; }

    #floatingCTA { bottom: 20px; right: 20px; gap: 12px; z-index: 999999; }

    .floating-btn { width: 48px; height: 48px; font-size: 1.05rem; }

    .section-title { font-size: 1.65rem; }

    .section-desc  { font-size: 0.9rem; }

}

@media (max-width: 420px) {

    .container {

        padding-left: 14px !important;

        padding-right: 14px !important;

    }

    .hero-title    { font-size: 1.5rem; }

    .stat-number   { font-size: 1.75rem; }

    .section-title { font-size: 1.45rem; }

    .sport-card-img-wrap { height: 155px; }

    .process-card-img-wrap { height: 135px; }

    .quote-form-wrap { padding: 16px 12px; }

    .form-info-card { padding: 14px; flex-direction: column; gap: 8px; }

    #footer .col-sm-6 { margin-bottom: 16px; }

}


.quote-form-wrap .row > [class*='col'] {
    display: flex;
    flex-direction: column;
}
.quote-form-wrap .row > [class*='col'] .form-control-lp,
.quote-form-wrap .row > [class*='col'] .form-select-lp,
.quote-form-wrap .row > [class*='col'] .select2-container {
    flex: 1;
}
.quote-form-wrap .row > [class*='col'] .select2-container .select2-selection--single {
    height: 100% !important;
    min-height: 47px !important;
}

@media (max-width: 991px) {
    .offcanvas {
        background-color: var(--dark-bg) !important;
        width: 300px !important;
        
    }
    .offcanvas .nav-link-lp {
        background-image: none !important;
        -webkit-text-fill-color: var(--text-light) !important;
        color: var(--text-light) !important;
        animation: none !important;
        padding: 14px 20px !important;
        font-size: 1.1rem !important;
        
    }
    .offcanvas .nav-link-lp:hover, .offcanvas .nav-link-lp.active {
        -webkit-text-fill-color: #F0A500 !important;
        color: #F0A500 !important;
        background-color: rgba(240,165,0,0.05) !important;
    }
    .offcanvas .nav-item { width: 100%; }
    .offcanvas .navbar-nav { width: 100%; align-items: flex-start; }
    .offcanvas .offcanvas-header { padding: 20px; }
    .offcanvas .offcanvas-body { padding: 0 0 20px 0; display: flex; flex-direction: column; }
    .offcanvas .d-flex.align-items-center.gap-3 { padding: 20px; margin-top: auto; }
}

.offcanvas-backdrop.show {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-color: rgba(0,0,0,0.6);
}

    .offcanvas .nav-link-lp::after {
        display: none !important;
    }
    .offcanvas .nav-link-lp {
        padding: 10px 20px !important;
    }

/* Hero Row - responsive height */
.hero-row {
    min-height: calc(100vh - 120px);
    padding-bottom: 120px;
}
@media (max-width: 991px) {
    .hero-row {
        min-height: unset;
        padding-bottom: 40px;
        padding-top: 20px;
    }
}

/* Laptop navbar fix */
@media (min-width: 992px) and (max-width: 1199px) {
    .nav-link-lp { font-size: 0.8rem !important; padding: 6px 8px !important; }
    #mainNav .navbar-brand img { height: 32px !important; }
}

/* Fix Why Us wrapping and underline */
.nav-link-lp { white-space: nowrap !important; }

@media (min-width: 992px) and (max-width: 1250px) {
    #navMenuDesktop .navbar-nav { gap: 0 !important; }
    #navMenuDesktop .nav-link-lp { padding: 6px 8px !important; font-size: 0.85rem !important; }
    #mainNav .navbar-brand img { height: 32px !important; }
    #navMenuDesktop .gap-3 { gap: 0.5rem !important; }
}