 :root {--c-bg-deep:#050B17;--c-bg-dark:#060C14;--c-bg-card:#0A1630;--c-bg-panel:#0D1E3A;--c-blue-900:#0D47A1;--c-blue-800:#1565C0;--c-blue-600:#1E88E5;--c-blue-400:#42A5F5;--c-blue-200:#90CAF9;--c-blue-100:#BBDEFB;--c-blue-50:#E3F2FD;--c-text:#BBD9F5;--c-text-muted:rgba(179, 219, 255, 0.55);--c-text-dim:rgba(100, 181, 246, 0.45);--c-border:rgba(30, 136, 229, 0.12);--c-border-glow:rgba(66, 165, 245, 0.4);--font-display:'Playfair Display', Georgia, serif;--font-body:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:'Courier New', Courier, monospace;--section-pad:6rem 0;--max-w:1280px;--gutter:2rem;--r-sm:4px;--r-md:10px;--r-lg:16px;--r-xl:24px;--r-pill:9999px;--ease-out:cubic-bezier(0.16, 1, 0.3, 1);--ease-in:cubic-bezier(0.4, 0, 1, 1);--ease:cubic-bezier(0.4, 0, 0.2, 1);} *, *::before, *::after {box-sizing:border-box;margin:0;padding:0;} html {scroll-behavior:smooth;font-size:16px;width:100%;overflow-x:hidden;} body {font-family:var(--font-body);background-color:var(--c-bg-deep);color:var(--c-text);line-height:1.6;width:100%;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} ::selection {background:rgba(30, 136, 229, 0.35);color:#E3F2FD;} ::-webkit-scrollbar {width:6px;} ::-webkit-scrollbar-track {background:var(--c-bg-deep);} ::-webkit-scrollbar-thumb {background:rgba(30, 136, 229, 0.3);border-radius:3px;} ::-webkit-scrollbar-thumb:hover {background:rgba(30, 136, 229, 0.55);} a {color:inherit;text-decoration:none;} img {display:block;max-width:100%;} button {font-family:inherit;} .display-xl {font-family:var(--font-display);font-size:clamp(3.5rem, 9vw, 7.5rem);font-weight:700;letter-spacing:-0.03em;line-height:0.95;} .display-lg {font-family:var(--font-display);font-size:clamp(2.5rem, 6vw, 5rem);font-weight:700;letter-spacing:-0.025em;line-height:1.05;} .display-md {font-family:var(--font-display);font-size:clamp(1.8rem, 4vw, 3rem);font-weight:700;letter-spacing:-0.02em;line-height:1.15;} .heading-lg {font-family:var(--font-display);font-size:clamp(1.4rem, 3vw, 2.2rem);font-weight:600;letter-spacing:-0.015em;line-height:1.25;} .heading-md {font-family:var(--font-body);font-size:clamp(1.1rem, 2vw, 1.5rem);font-weight:600;letter-spacing:-0.01em;line-height:1.35;} .body-lg {font-size:1.125rem;line-height:1.75;} .body-md {font-size:1rem;line-height:1.7;} .body-sm {font-size:0.875rem;line-height:1.65;} .caption {font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:0.16em;font-family:var(--font-mono);} .italic-serif {font-family:var(--font-display);font-style:italic;font-weight:400;} .text-primary {color:var(--c-blue-50);} .text-muted {color:var(--c-text-muted);} .highlight-word {color:rgba(179, 219, 255, 0.85);font-weight:500;text-shadow:0 0 15px rgba(179, 219, 255, 0.15);letter-spacing:0.02em;} .text-accent {color:var(--c-blue-400);} .text-dim {color:var(--c-text-dim);} .text-gradient {background:linear-gradient(135deg, #90CAF9 0%, #42A5F5 40%, #E3F2FD 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} .container {max-width:var(--max-w);margin:0 auto;padding:0 var(--gutter);} .section {padding:var(--section-pad);} .grid-2 {display:grid;grid-template-columns:repeat(2, 1fr);gap:2rem;} .grid-3 {display:grid;grid-template-columns:repeat(3, 1fr);gap:1.75rem;} .grid-4 {display:grid;grid-template-columns:repeat(4, 1fr);gap:1.5rem;} @media (max-width:1024px) {.grid-4 {grid-template-columns:repeat(2, 1fr);} .grid-3 {grid-template-columns:repeat(2, 1fr);}} @media (max-width:640px) {:root {--gutter:1.25rem;--section-pad:4rem 0;} .grid-4, .grid-3, .grid-2 {grid-template-columns:1fr;}} .flex-center {display:flex;align-items:center;justify-content:center;} .flex-between {display:flex;align-items:center;justify-content:space-between;} .gap-sm {gap:0.75rem;} .gap-md {gap:1.5rem;} .gap-lg {gap:3rem;} @media (max-width:768px) {html {font-size:13.5px !important;} .scroll-indicator-mobile-hide {display:none !important;}} @keyframes fadeInUp {0% {opacity:0;transform:translateY(32px);filter:blur(8px);} 100% {opacity:1;transform:translateY(0);filter:blur(0);}} @keyframes fadeInDown {0% {opacity:0;transform:translateY(-24px);} 100% {opacity:1;transform:translateY(0);}} @keyframes fadeInLeft {0% {opacity:0;transform:translateX(-32px);} 100% {opacity:1;transform:translateX(0);}} @keyframes fadeInRight {0% {opacity:0;transform:translateX(32px);} 100% {opacity:1;transform:translateX(0);}} @keyframes scaleIn {0% {opacity:0;transform:scale(0.93);} 100% {opacity:1;transform:scale(1);}} @keyframes textReveal {0% {transform:translateY(110%);opacity:0;} 100% {transform:translateY(0);opacity:1;}} @keyframes charReveal {0% {opacity:0;transform:translateY(100%);-webkit-clip-path:polygon(0 0, 100% 0, 100% 0, 0 0);clip-path:polygon(0 0, 100% 0, 100% 0, 0 0);} 100% {opacity:1;transform:translateY(0);-webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);}} @keyframes loaderBar {0% {width:0%;opacity:1;} 80% {width:100%;opacity:1;} 100% {width:100%;opacity:0;}} @keyframes loaderFadeOut {0% {opacity:1;} 100% {opacity:0;pointer-events:none;}} @keyframes ambientPulse {0%, 100% {transform:translate(0, 0) scale(1);opacity:0.18;} 50% {transform:translate(80px, -50px) scale(1.12);opacity:0.28;}} @keyframes ambientPulse2 {0%, 100% {transform:translate(0, 0) scale(1);opacity:0.12;} 50% {transform:translate(-60px, 70px) scale(0.88);opacity:0.20;}} @keyframes gridFloat {0%, 100% {transform:translateY(0);} 50% {transform:translateY(-8px);}} @keyframes cursorPing {0% {transform:translate(-50%, -50%) scale(1);opacity:0.6;} 100% {transform:translate(-50%, -50%) scale(2.5);opacity:0;}} @keyframes marqueeLeft {0% {transform:translateX(0);} 100% {transform:translateX(-50%);}} @keyframes marqueeRight {0% {transform:translateX(-50%);} 100% {transform:translateX(0);}} @keyframes glowPulse {0%, 100% {box-shadow:0 0 18px rgba(30, 136, 229, 0.3), 0 0 40px rgba(30, 136, 229, 0.1);} 50% {box-shadow:0 0 32px rgba(30, 136, 229, 0.55), 0 0 70px rgba(30, 136, 229, 0.25);}} @keyframes textGlowPulse {0%, 100% {text-shadow:0 0 18px rgba(100, 181, 246, 0.4);} 50% {text-shadow:0 0 40px rgba(100, 181, 246, 0.8), 0 0 80px rgba(30, 136, 229, 0.4);}} @keyframes borderBeam {0% {background-position:0% 50%;} 50% {background-position:100% 50%;} 100% {background-position:0% 50%;}} @keyframes shimmer {from {transform:translateX(-100%) skewX(-15deg);} to {transform:translateX(200%) skewX(-15deg);}} @keyframes scanLine {0% {transform:translateX(-100%);} 100% {transform:translateX(300%);}} @keyframes timelineDotPing {0% {transform:scale(1);opacity:0.8;} 60% {transform:scale(2);opacity:0;} 100% {transform:scale(1);opacity:0;}} @keyframes floatY {0%, 100% {transform:translateY(0);} 50% {transform:translateY(-10px);}} .sr {opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), filter 0.9s ease;} .sr.sr--left {transform:translateX(-28px);} .sr.sr--right {transform:translateX(28px);} .sr.sr--scale {transform:scale(0.93);} .sr.in-view {opacity:1;transform:none;filter:blur(0);} .sr-d1 {transition-delay:0.05s;} .sr-d2 {transition-delay:0.12s;} .sr-d3 {transition-delay:0.20s;} .sr-d4 {transition-delay:0.30s;} .sr-d5 {transition-delay:0.42s;} .sr-d6 {transition-delay:0.56s;} .sr-d7 {transition-delay:0.72s;} .sr-d8 {transition-delay:0.90s;} .tr-wrap {display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:0.06em;} .tr-inner {display:inline-block;transform:translateY(110%);opacity:0;transition:transform 1.1s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.1s ease;} .tr-wrap.revealed .tr-inner {transform:translateY(0);opacity:1;} .char {display:inline-block;opacity:0;transform:translateY(100%);-webkit-clip-path:polygon(0 0, 100% 0, 100% 0, 0 0);clip-path:polygon(0 0, 100% 0, 100% 0, 0 0);transition:all 0.7s cubic-bezier(0.16, 1, 0.3, 1);} .char.revealed {opacity:1;transform:translateY(0);-webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);} @media (max-width:768px) {.sr {filter:none !important;transition:opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;}} .cursor-ring {position:fixed;top:0;left:0;width:30px;height:30px;border:1.5px solid rgba(66, 165, 245, 0.85);border-radius:9999px;pointer-events:none;z-index:9999;transform:translate(-50%, -50%) scale(1);transition:width 0.18s, height 0.18s, border-color 0.18s, opacity 0.18s;box-shadow:0 0 0 2px rgba(13, 71, 161, 0.15), 0 0 28px rgba(30, 136, 229, 0.2);-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);display:none;} .cursor-dot {position:fixed;top:0;left:0;width:6px;height:6px;background:rgba(100, 181, 246, 0.95);border-radius:9999px;pointer-events:none;z-index:9999;transform:translate(-50%, -50%);transition:transform 0.06s;box-shadow:0 0 10px rgba(100, 181, 246, 0.6);display:none;} @media (min-width:768px) {body {cursor:none;} .cursor-ring, .cursor-dot {display:block;}} .cursor-ring.hover-active {width:50px;height:50px;border-color:rgba(66, 165, 245, 0.5);background:rgba(30, 136, 229, 0.06);} .ambient-blob {position:fixed;border-radius:50%;filter:blur(80px);pointer-events:none;z-index:0;} .ambient-blob--1 {width:380px;height:380px;top:10%;left:5%;background:radial-gradient(circle, rgba(30, 136, 229, 0.12) 0%, transparent 70%);animation:ambientPulse 9s ease-in-out infinite alternate;} .ambient-blob--2 {width:480px;height:480px;bottom:12%;right:4%;background:radial-gradient(circle, rgba(13, 71, 161, 0.10) 0%, transparent 70%);animation:ambientPulse2 12s ease-in-out infinite alternate;} .scroll-progress {position:fixed;top:0;left:0;height:2px;width:100%;z-index:200;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg, #1565C0, #42A5F5, #1565C0);transition:transform 80ms linear;} .nav {position:fixed;top:0;left:0;right:0;z-index:100;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);background:rgba(5, 11, 23, 0.82);border-bottom:1px solid rgba(30, 136, 229, 0.12);transition:all 0.4s ease;} .nav.scrolled {background:rgba(4, 8, 18, 0.95);border-bottom-color:rgba(30, 136, 229, 0.22);} .nav-inner {max-width:1320px;margin:0 auto;padding:0 2rem;height:72px;display:flex;align-items:center;justify-content:space-between;} .nav-logo {font-family:'Playfair Display', serif;font-size:1.5rem;font-weight:700;color:#E3F2FD;letter-spacing:-0.02em;text-decoration:none;display:flex;align-items:center;gap:0.5rem;} .nav-logo span {color:#42A5F5;} .nav-links {display:none;gap:2.5rem;list-style:none;margin:0;padding:0;} @media (min-width:768px) {.nav-links {display:flex;}} .nav-links a {font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:0.14em;color:rgba(179, 219, 255, 0.65);text-decoration:none;position:relative;transition:color 0.3s ease;} .nav-links a::after {content:'';position:absolute;bottom:-4px;left:0;height:1px;width:0;background:#42A5F5;transition:width 0.35s cubic-bezier(0.16, 1, 0.3, 1);} .nav-links a:hover {color:#90CAF9;} .nav-links a:hover::after {width:100%;} .btn {display:inline-flex;align-items:center;justify-content:center;gap:0.8rem;padding:0.8rem 2rem;border-radius:4px;font-weight:600;text-transform:uppercase;letter-spacing:1px;transition:all 0.3s ease;text-decoration:none;cursor:pointer;border:none;position:relative;overflow:hidden;} .btn svg {transition:transform 0.3s ease;} .btn:hover svg {transform:translateX(5px);} .btn::before {content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);transition:left 0.5s ease;} .btn:hover::before {left:100%;} .btn-primary {background:linear-gradient(135deg, #1565C0 0%, #1E88E5 100%);color:#fff;box-shadow:0 0 20px rgba(21, 101, 192, 0.4), 0 4px 16px rgba(0, 0, 0, 0.3);} .btn-primary:hover {transform:translateY(-2px) scale(1.02);box-shadow:0 0 36px rgba(21, 101, 192, 0.6), 0 8px 24px rgba(0, 0, 0, 0.4);} .btn-outline {background:transparent;color:#90CAF9;border:1px solid rgba(66, 165, 245, 0.4);} .btn-outline:hover {background:rgba(30, 136, 229, 0.1);border-color:rgba(66, 165, 245, 0.8);transform:translateY(-2px);box-shadow:0 0 20px rgba(30, 136, 229, 0.2);} .badge {display:inline-flex;align-items:center;padding:0.25rem 0.75rem;border-radius:9999px;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;border:1px solid rgba(66, 165, 245, 0.3);background:rgba(30, 136, 229, 0.08);color:#90CAF9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all 0.3s ease;} .badge:hover {border-color:rgba(66, 165, 245, 0.7);background:rgba(30, 136, 229, 0.18);transform:translateY(-2px);box-shadow:0 6px 20px rgba(30, 136, 229, 0.2);} .badge--tech {padding:0.2rem 0.6rem;font-size:0.65rem;border-color:rgba(100, 181, 246, 0.25);background:rgba(21, 101, 192, 0.12);color:#64B5F6;} .section-label {display:flex;align-items:center;gap:0.75rem;font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.22em;color:#42A5F5;margin-bottom:1.5rem;} .section-label::before, .section-label::after {content:'';display:block;height:1px;width:2rem;background:rgba(66, 165, 245, 0.5);} .proj-card {position:relative;background:rgba(10, 22, 44, 0.7);border:1px solid rgba(30, 136, 229, 0.12);border-radius:12px;overflow:hidden;transition:all 0.45s cubic-bezier(0.4, 0, 0.2, 1);display:flex;flex-direction:column;} .proj-card::before {content:'';position:absolute;inset:0;padding:1px;border-radius:inherit;background:linear-gradient(135deg, rgba(66, 165, 245, 0.5), rgba(13, 71, 161, 0.2), rgba(66, 165, 245, 0.5));-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);mask-composite:exclude;opacity:0;transition:opacity 0.3s ease;} .proj-card:hover {transform:translateY(-8px) rotateX(1.5deg);border-color:rgba(30, 136, 229, 0.3);box-shadow:0 24px 60px rgba(0, 0, 0, 0.5), 0 0 50px rgba(30, 136, 229, 0.15);} .proj-card:hover::before {opacity:1;} .proj-card:hover .proj-card__img {transform:scale(1.06);} .proj-card__img-wrap {height:220px;overflow:hidden;position:relative;} .proj-card__img {width:100%;height:100%;object-fit:cover;transition:transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);} .proj-card__img-overlay {position:absolute;inset:0;background:linear-gradient(to top, rgba(5, 11, 23, 0.85) 0%, transparent 60%);} .proj-card__scan {position:absolute;top:0;left:0;width:100%;height:2px;overflow:hidden;opacity:0;transition:opacity 0.3s ease;} .proj-card:hover .proj-card__scan {opacity:1;} .proj-card__scan-beam {position:absolute;top:0;left:0;height:100%;width:33%;background:#42A5F5;box-shadow:0 0 8px rgba(66, 165, 245, 0.8);animation:scanLine 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;} .proj-card__body {padding:1.5rem;display:flex;flex-direction:column;flex:1;} .proj-card__num {font-size:0.65rem;font-weight:600;letter-spacing:0.2em;color:#42A5F5;font-family:'Courier New', monospace;margin-bottom:0.75rem;} .proj-card__title {font-family:'Playfair Display', serif;font-size:1.35rem;font-weight:700;color:#E3F2FD;margin:0 0 0.6rem;line-height:1.25;transition:color 0.3s ease;} .proj-card:hover .proj-card__title {color:#90CAF9;} .proj-card__desc {font-size:0.875rem;color:rgba(179, 219, 255, 0.65);line-height:1.65;margin-bottom:1.25rem;} .proj-card__tags {display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:1.25rem;} .proj-card__link {display:inline-flex;align-items:center;gap:0.4rem;font-size:0.72rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:#42A5F5;text-decoration:none;transition:gap 0.3s ease, color 0.3s ease;margin-top:auto;} .proj-card__link:hover {gap:0.7rem;color:#90CAF9;} .proj-card.flashlight::before {background:radial-gradient(700px circle at var(--mx) var(--my), rgba(66, 165, 245, 0.07), transparent 40%);opacity:0;-webkit-mask:none;mask:none;z-index:5;pointer-events:none;transition:opacity 0.4s ease;} .proj-card.flashlight:hover::before {opacity:1;} .skill-card {background:rgba(10, 22, 44, 0.7);border:1px solid rgba(30, 136, 229, 0.1);border-radius:10px;padding:1.25rem 1.5rem;transition:all 0.35s cubic-bezier(0.4, 0, 0.2, 1);} .skill-card:hover {border-color:rgba(30, 136, 229, 0.35);background:rgba(14, 30, 60, 0.8);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(30, 136, 229, 0.1);} .skill-card__icon {width:40px;height:40px;border-radius:8px;background:rgba(21, 101, 192, 0.15);border:1px solid rgba(66, 165, 245, 0.2);display:flex;align-items:center;justify-content:center;margin-bottom:0.85rem;font-size:1.2rem;transition:all 0.3s ease;} .skill-card:hover .skill-card__icon {background:rgba(21, 101, 192, 0.25);border-color:rgba(66, 165, 245, 0.5);box-shadow:0 0 16px rgba(30, 136, 229, 0.3);} .skill-card__name {font-size:0.875rem;font-weight:600;color:#BBD9F5;margin-bottom:0.5rem;} .skill-card__bar-bg {height:4px;background:rgba(30, 136, 229, 0.15);border-radius:9999px;overflow:hidden;margin-top:0.5rem;} .skill-card__bar {height:100%;border-radius:9999px;background:linear-gradient(90deg, #1565C0, #42A5F5);box-shadow:0 0 8px rgba(66, 165, 245, 0.5);width:0;transition:width 1.2s cubic-bezier(0.16, 1, 0.3, 1);} .skill-card__level {font-size:0.65rem;color:rgba(100, 181, 246, 0.6);font-family:'Courier New', monospace;margin-top:0.3rem;text-align:right;letter-spacing:0.05em;} .timeline {position:relative;padding:1em 0 2rem;overflow:hidden;} .timeline::before {content:'';position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:1px;background:linear-gradient(to bottom, transparent, rgba(66, 165, 245, 0.4) 10%, rgba(66, 165, 245, 0.4) 90%, transparent);} .timeline::after {content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;height:120px;background:linear-gradient(to bottom, transparent, #42A5F5, transparent);box-shadow:0 0 10px rgba(66, 165, 245, 0.8);border-radius:99px;animation:timelineDrop 8s ease-in-out infinite;z-index:1;} @keyframes timelineDrop {0% {top:-150px;opacity:0;} 5% {opacity:1;} 45% {opacity:1;} 50% {top:100%;opacity:0;} 100% {top:100%;opacity:0;}} @media (max-width:768px) {.timeline::before {left:20px;} .timeline::after {display:none;}} .timeline-item {display:flex;gap:2.5rem;margin-bottom:3rem;position:relative;} .timeline-item:nth-child(odd) {flex-direction:row;padding-right:calc(50% + 1.5rem);} .timeline-item:nth-child(even) {flex-direction:row-reverse;padding-left:calc(50% + 1.5rem);} @media (max-width:768px) {.timeline-item:nth-child(odd), .timeline-item:nth-child(even) {flex-direction:row;padding-right:0;padding-left:3.5rem;}} .timeline-dot {position:absolute;left:50%;top:1.25rem;transform:translateX(-50%);width:14px;height:14px;border-radius:50%;background:#1E88E5;border:2px solid rgba(66, 165, 245, 0.5);box-shadow:0 0 16px rgba(30, 136, 229, 0.6);z-index:2;} .timeline-dot::before {content:'';position:absolute;inset:-5px;border-radius:50%;background:rgba(66, 165, 245, 0.2);animation:timelineDotPing 2s ease-out infinite;} @media (max-width:768px) {.timeline-dot {left:20px;top:1.25rem;}} .timeline-card {background:rgba(10, 22, 44, 0.75);border:1px solid rgba(30, 136, 229, 0.12);border-radius:10px;padding:1.5rem;width:100%;transition:all 0.35s ease;} .timeline-card:hover {border-color:rgba(30, 136, 229, 0.3);box-shadow:0 8px 32px rgba(0, 0, 0, 0.3), 0 0 24px rgba(30, 136, 229, 0.1);transform:translateY(-3px);} .timeline-period {font-size:0.68rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:#42A5F5;font-family:'Courier New', monospace;margin-bottom:0.4rem;} .timeline-role {font-family:'Playfair Display', serif;font-size:1.1rem;font-weight:700;color:#E3F2FD;margin-bottom:0.2rem;} .timeline-company {font-size:0.8rem;color:rgba(179, 219, 255, 0.6);margin-bottom:0.75rem;} .timeline-desc {font-size:0.85rem;color:rgba(179, 219, 255, 0.55);line-height:1.6;} .stats-bar {display:flex;gap:0;border:1px solid rgba(30, 136, 229, 0.12);border-radius:12px;overflow:hidden;background:rgba(10, 22, 44, 0.6);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);} .stat-item {flex:1;padding:2rem 1.5rem;text-align:center;border-right:1px solid rgba(30, 136, 229, 0.08);transition:background 0.3s ease;} .stat-item:last-child {border-right:none;} .stat-item:hover {background:rgba(21, 101, 192, 0.08);} .stat-num {font-family:'Playfair Display', serif;font-size:2.8rem;font-weight:700;color:#E3F2FD;line-height:1;margin-bottom:0.4rem;} .stat-num em {font-style:normal;font-size:1.4rem;color:#42A5F5;vertical-align:super;} .stat-label {font-size:0.68rem;font-weight:600;text-transform:uppercase;letter-spacing:0.16em;color:rgba(100, 181, 246, 0.55);} .about-photo-wrap {position:relative;display:inline-block;} .about-photo {width:100%;max-width:340px;height:auto;aspect-ratio:3 / 4;object-fit:cover;border-radius:12px;filter:grayscale(0.2);transition:filter 0.4s ease;} .about-photo:hover {filter:grayscale(0);} .about-photo-border {position:absolute;inset:-6px;border-radius:16px;border:1px solid rgba(66, 165, 245, 0.25);pointer-events:none;} .about-photo-border::before {content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg, rgba(66, 165, 245, 0.4) 0%, transparent 50%);mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px;animation:borderBeam 4s linear infinite;} .form-group {display:flex;flex-direction:column;gap:0.4rem;margin-bottom:1.25rem;} .form-label {font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.12em;color:rgba(100, 181, 246, 0.6);} .form-input, .form-textarea {background:rgba(10, 22, 44, 0.7);border:1px solid rgba(30, 136, 229, 0.15);border-radius:6px;padding:0.85rem 1rem;color:#E3F2FD;font-size:0.9rem;font-family:'Inter', sans-serif;transition:all 0.3s ease;outline:none;resize:none;} .form-input:focus, .form-textarea:focus {border-color:rgba(66, 165, 245, 0.6);background:rgba(14, 30, 60, 0.8);box-shadow:0 0 0 3px rgba(30, 136, 229, 0.12), 0 0 20px rgba(30, 136, 229, 0.15);} .form-input::placeholder, .form-textarea::placeholder {color:rgba(100, 181, 246, 0.3);} .footer {border-top:1px solid rgba(30, 136, 229, 0.1);padding:3rem 2rem;text-align:center;} .footer-text {font-size:0.78rem;color:rgba(100, 181, 246, 0.35);letter-spacing:0.08em;} .marquee-mask {-webkit-mask-image:linear-gradient(to right, transparent, black 25%, black 75%, transparent);mask-image:linear-gradient(to right, transparent, black 25%, black 75%, transparent);overflow:hidden;} .marquee-track {display:flex;width:max-content;} .marquee-track--left {animation:marqueeLeft 100s linear infinite;} .marquee-track--right {animation:marqueeRight 100s linear infinite;} .marquee-tag {display:inline-flex;align-items:center;justify-content:center;padding:0.5rem 1.5rem;border-radius:9999px;border:1px solid rgba(66, 165, 245, 0.25);background:rgba(10, 22, 44, 0.3);color:rgba(144, 202, 249, 0.85);font-family:'Courier New', monospace;font-size:0.85rem;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;margin:0 1rem;transition:all 0.8s cubic-bezier(0.16, 1, 0.3, 1);cursor:none;} .marquee-tag:hover {transform:perspective(1000px) rotateX(7deg) rotateY(-7deg) scale(1.1) translateY(-3px);border-color:rgba(215, 181, 109, 1);box-shadow:-8px 8px 21px rgba(0, 0, 0, 0.7), 0 0 20px rgba(215, 181, 109, 0.4), inset 0 0 13px rgba(215, 181, 109, 0.2);background:rgba(215, 181, 109, 0.12);color:#ffffff;z-index:10;} .glass {-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);background:rgba(10, 22, 44, 0.55);border:1px solid rgba(30, 136, 229, 0.12);} @media (max-width:768px) {.glass {-webkit-backdrop-filter:blur(6px) saturate(140%) !important;backdrop-filter:blur(6px) saturate(140%) !important;-webkit-backdrop-filter:blur(6px) saturate(140%) !important;}} .neon-text {animation:textGlowPulse 3.5s ease-in-out infinite;} .data-grid {background-image:linear-gradient(rgba(30, 136, 229, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(30, 136, 229, 0.06) 1px, transparent 1px);background-size:48px 48px;} .premium-icon {transition:all 0.8s cubic-bezier(0.4, 0, 0.2, 1);filter:drop-shadow(0 0 0 rgba(215, 181, 109, 0));} .contact-info-item:hover .premium-icon {filter:drop-shadow(0 0 8px rgba(215, 181, 109, 0.6));} .main-wrapper {position:relative;z-index:10;margin-bottom:100vh;margin-bottom:100svh;box-shadow:0 30px 80px rgba(0, 0, 0, 0.9);} .main-wrapper::before {content:"";position:absolute;inset:0;z-index:-3;background-color:var(--c-bg-deep);pointer-events:none;} .footer-sticky {position:fixed;bottom:0;left:0;width:100%;height:100vh;height:100svh;z-index:1;background:var(--c-bg-deep);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:hidden;} .footer-overlay {position:absolute;inset:0;background:linear-gradient(to top, rgba(5, 11, 23, 0.98) 0%, rgba(10, 22, 44, 0.65) 100%);z-index:1;} .footer-bg-img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0.85;} .footer-sticky-content {position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center;height:100%;width:100%;} .footer-phrase {font-family:var(--font-display);font-size:clamp(2.5rem, 6vw, 4.5rem);font-weight:700;color:#E3F2FD;margin-bottom:0.5rem;letter-spacing:-0.02em;text-shadow:0 4px 20px rgba(0, 0, 0, 0.8);} .footer-author {font-family:var(--font-body);letter-spacing:0.25em;text-transform:uppercase;color:#D7B56D;font-size:0.9rem;font-weight:600;text-shadow:0 2px 10px rgba(0, 0, 0, 0.6);} .footer-bottom-info {position:absolute;bottom:2rem;width:100%;padding:0 2rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.5rem;max-width:1320px;} .footer-bottom-info a.nav-logo {font-size:1.25rem;color:#fff;z-index:10;} .footer-text {color:rgba(255, 255, 255, 0.6);font-size:0.85rem;z-index:10;} .footer-socials {display:flex;gap:1.5rem;z-index:10;} .footer-socials a {transition:color 0.3s;} .footer-socials a:hover {color:#D7B56D !important;} @media (max-width:768px) {.footer-phrase {font-size:2.2rem;} .footer-author {font-size:0.75rem;} .footer-sticky-content {justify-content:space-between;padding-top:30vh;} .footer-bottom-info {position:relative;bottom:auto;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:2rem;padding-bottom:2rem;}} .certificate-card {position:relative;background:linear-gradient(135deg, rgba(6, 13, 26, 0.8) 0%, rgba(10, 20, 40, 0.95) 100%);border:1px solid rgba(215, 181, 109, 0.25);border-radius:16px;padding:4rem 3rem 4rem 3rem;min-height:520px;box-shadow:0 20px 50px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(215, 181, 109, 0.1);text-align:center;transition:transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);} .certificate-card:hover {transform:translateY(-8px) scale(1.01);box-shadow:0 30px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(215, 181, 109, 0.15), inset 0 0 0 1px rgba(215, 181, 109, 0.3);} .certificate-card::before {content:"";position:absolute;inset:0;border-radius:16px;background-image:url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 15 L15 15 L15 30 M15 0 L30 0 L30 15' fill='none' stroke='rgba(215, 181, 109, 0.05)' stroke-width='1.5'/%3E%3C/svg%3E");background-size:15px 15px;opacity:0.5;pointer-events:none;} .cert-shine-container {position:absolute;inset:0;border-radius:16px;pointer-events:none;z-index:4;-webkit-clip-path:inset(0 round 16px);clip-path:inset(0 round 16px);-webkit-clip-path:inset(0 round 16px);} .cert-shine-container::after {content:"";position:absolute;top:0;left:0;width:80%;height:100%;background:linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.025) 50%, rgba(255, 255, 255, 0) 100%);transform:translateX(-150%) skewX(-50deg);animation:certSweepShine 10s infinite ease-in-out;pointer-events:none;} @keyframes certSweepShine {0% {transform:translateX(-150%) skewX(-50deg);} 15% {transform:translateX(250%) skewX(-50deg);} 100% {transform:translateX(250%) skewX(-50deg);}} @keyframes premiumEmerge {0% {opacity:0;transform:translateY(15px) scale(0.98);filter:blur(8px);} 100% {opacity:1;transform:none;filter:blur(0px);}} .cert-emerge-2 {position:absolute;bottom:0.15rem;left:0;right:0;margin:0 auto;width:80px;display:flex;justify-content:center;align-items:center;z-index:10;pointer-events:none;} .cert-emerge-3 {position:absolute;bottom:2rem;right:2.5rem;z-index:10;} .cert-border {position:absolute;inset:12px;border:4px solid rgba(215, 181, 109, 0.4);border-radius:2px;z-index:1;pointer-events:none;clip-path:polygon(0% 0%, 100% 0%, 100% 100%, calc(50% + 42px) 100%, calc(50% + 42px) calc(100% - 25px), calc(50% - 42px) calc(100% - 25px), calc(50% - 42px) 100%, 0% 100%);} .cert-border::before {content:"";position:absolute;inset:4px;border:1px solid rgba(215, 181, 109, 0.3);} .cert-border::after {content:"";position:absolute;inset:-12px;border:1px solid rgba(215, 181, 109, 0.15);border-radius:6px;} .cert-qr-img {width:70px;height:70px;background:#F7F7F7;border:2px solid #D7B56D;border-radius:6px;padding:3px;box-shadow:0 0 10px rgba(215, 181, 109, 0.3);transition:transform 0.3s ease, box-shadow 0.3s ease;} .cert-qr-img:hover {transform:scale(1.05);box-shadow:0 0 15px rgba(215, 181, 109, 0.5);} .cert-seal {width:110px;opacity:0.9;filter:drop-shadow(0 0 15px rgba(215, 181, 109, 0.4));animation:floatY 6s ease-in-out infinite;} .cert-title {font-family:var(--font-display);font-size:clamp(2rem, 4vw, 3.5rem);color:#D7B56D;margin-bottom:0.5rem;letter-spacing:-0.01em;} .cert-name {font-family:var(--font-body);font-size:1.5rem;font-weight:600;color:#fff;letter-spacing:0.1em;text-transform:uppercase;margin:1.5rem 0;} .cert-text {font-family:var(--font-body);color:var(--c-text-muted);font-size:0.9rem;line-height:1.4;max-width:600px;margin:0 auto;} .cert-date {font-family:'Courier New', monospace;font-size:0.9rem;color:rgba(215, 181, 109, 0.7);margin-top:2.5rem;letter-spacing:0.05em;} @media (max-width:768px) {.certificate-card {padding:3rem 1.5rem;} .cert-seal {width:80px;bottom:1.5rem;right:1.5rem;}} .cert-watermark-text {position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none;z-index:1;opacity:0.03;} .watermark-line {font-family:var(--font-display), 'Playfair Display', serif;font-size:clamp(2.5rem, 6vw, 6rem);font-weight:700;color:#D7B56D;line-height:0.9;letter-spacing:-0.02em;text-transform:uppercase;} .cert-seal-bottom {width:65px;height:auto;opacity:0.95;filter:invert(79%) sepia(26%) saturate(666%) hue-rotate(352deg) brightness(91%) contrast(85%) drop-shadow(0 0 10px rgba(215, 181, 109, 0.4));} @media (max-width:768px) {.cert-logo-top {position:relative;top:0;left:0;margin:0 auto 1.5rem auto;width:120px;} .cert-seal-wrapper {bottom:-1.5rem;} .cert-seal-bottom {width:65px;}} .cert-qr-container {position:absolute;bottom:2.5rem;left:2.5rem;z-index:10;display:flex;flex-direction:column;align-items:center;gap:0.4rem;opacity:0;} .cert-qr-img {width:70px;height:70px;background:#F7F7F7;border:2px solid #D7B56D;border-radius:6px;padding:3px;box-shadow:0 0 10px rgba(215, 181, 109, 0.3);transition:transform 0.3s ease, box-shadow 0.3s ease;} .cert-qr-img:hover {transform:scale(1.05);box-shadow:0 0 15px rgba(215, 181, 109, 0.5);} .cert-qr-text {font-family:var(--font-mono);font-size:0.55rem;color:rgba(215, 181, 109, 0.5);letter-spacing:0.15em;text-transform:uppercase;text-align:center;line-height:1.4;} .about-grid {display:grid;grid-template-columns:1fr 1.1fr;gap:5rem;align-items:center;} @media (max-width:768px) {.about-grid {display:flex;flex-direction:column;gap:3rem;} .about-portrait {display:block !important;visibility:visible !important;opacity:1 !important;transform:none !important;width:100% !important;} .hero-btn-group {flex-direction:column;width:100%;} .hero-btn-group .btn {width:100%;justify-content:center;} .stats-bar {flex-wrap:wrap;} .stat-item {flex:0 0 50%;width:50%;padding:1.5rem 1rem;border-bottom:1px solid rgba(30, 136, 229, 0.08);} .stat-item:nth-child(2), .stat-item:nth-child(4) {border-right:none;} .stat-item:nth-child(3), .stat-item:nth-child(4) {border-bottom:none;} #experiencia h2 {margin-bottom:2rem !important;} #cert-container {width:100%;display:flex;justify-content:center;overflow:visible;height:190px !important;} .certificate-card {position:relative !important;width:900px !important;min-width:900px !important;max-width:900px !important;height:480px !important;min-height:480px !important;transform:scale(0.38) !important;transform-origin:top center !important;padding:3rem 3rem 2.5rem 3rem !important;display:block !important;} .certificate-card>div:nth-child(3)>div:first-child {flex-direction:row !important;align-items:flex-start !important;text-align:right !important;gap:0 !important;} .certificate-card>div:nth-child(3)>div:first-child>div {text-align:right !important;} .cert-text, .cert-name, .cert-date {text-align:center !important;margin:auto !important;} .cert-name {margin:1.5rem 0 !important;} .cert-qr-container {bottom:2.5rem !important;left:2.5rem !important;} .about-btn-group {flex-wrap:nowrap !important;gap:0.5rem !important;} .about-btn-group .btn {padding:0.6rem 0.5rem !important;font-size:0.75rem !important;flex:1;justify-content:center;white-space:nowrap;} .article-header h1 {font-size:2.2rem !important;} .article-header h2, .article-header h3 {font-size:1.5rem !important;} .article-img-wrap iframe {position:relative !important;top:0 !important;left:auto !important;width:800px !important;min-width:800px !important;max-width:800px !important;height:var(--mob-iframe-h, 650px) !important;transform:scale(var(--mob-scale, 0.48)) translateX(var(--mob-tx, 0%)) translateY(var(--mob-ty, 0%)) !important;transform-origin:top center !important;margin:0 !important;border:none !important;} .nav a {font-size:0.75rem !important;letter-spacing:0px !important;} #contato .sr--right {display:none !important;} .footer-phrase {font-size:1.64rem !important;white-space:nowrap;} .swipe-plot {overflow-x:auto !important;overflow-y:hidden !important;justify-content:flex-start !important;-webkit-overflow-scrolling:touch;align-items:flex-start !important;} .swipe-plot iframe {transform:none !important;zoom:var(--mob-swipe-zoom, 0.75) !important;width:var(--mob-swipe-w, 1200px) !important;min-width:var(--mob-swipe-w, 1200px) !important;max-width:none !important;height:calc(100% / var(--mob-swipe-zoom, 0.75) - 20px) !important;pointer-events:auto !important;}} a.glass:hover {transform:translateY(-5px);background:rgba(255, 255, 255, 0.06);box-shadow:0 10px 20px rgba(0, 0, 0, 0.2);} @media (max-width:768px) {.desktop-only {display:none !important;}} @media (min-width:769px) {.mobile-only {display:none !important;}} .contact-grid {display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;} @media (max-width:768px) {.article-img-wrap {height:var(--mob-wrap-h, 220px) !important;position:relative !important;overflow:hidden !important;display:flex !important;justify-content:center !important;margin-bottom:2rem !important;} .plotly-iframe {transform:scale(0.49) translate(3%, -3%) !important;transform-origin:top left !important;width:200% !important;height:200% !important;position:absolute !important;top:0 !important;left:0 !important;}} .indicator-pc {display:block;} .indicator-mobile {display:none;} @media (max-width:768px) {.indicator-pc {display:none !important;} .indicator-mobile {display:flex !important;flex-direction:column;align-items:center;}} .floating-dot {width:4px;height:4px;background-color:rgba(215, 181, 109, 0.9);border-radius:50%;animation:dropFade 2s infinite ease-in-out;box-shadow:0 0 6px rgba(215, 181, 109, 0.6);} @keyframes dropFade {0% {transform:translateY(-5px);opacity:0;} 30% {opacity:1;} 80% {transform:translateY(20px);opacity:0;} 100% {transform:translateY(20px);opacity:0;}} @media (max-width:1100px) {#sobre {padding-top:8rem !important;padding-bottom:4rem !important;} .sobre-grid {grid-template-columns:1fr !important;gap:2rem !important;} #sobre .sr--right {margin-top:2rem;}} .quick-facts-grid {display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:2rem;} @media (max-width:1100px) {.quick-facts-grid {grid-template-columns:1fr;}} .cert-section-title {display:flex;align-items:center;gap:0.8rem;font-size:1.5rem;color:var(--c-primary);margin-bottom:2rem;border-bottom:1px solid rgba(215, 181, 109, 0.15);padding-bottom:1rem;} .cert-item-card {position:relative;background:rgba(10, 22, 44, 0.5);border-radius:12px;border:1px solid rgba(215, 181, 109, 0.15);border-left:3px solid #D7B56D;padding:1.5rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:transform 0.3s ease, box-shadow 0.3s ease, filter 0.5s ease, opacity 0.5s ease;display:flex;flex-direction:column;height:100%;} .cert-item-card:hover {transform:translateY(-5px);box-shadow:0 10px 25px rgba(0, 0, 0, 0.5);} .cert-item-meta {font-family:var(--font-body);font-size:0.75rem;color:rgba(215, 181, 109, 0.8);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:0.8rem;} .cert-item-title {color:#fff;font-family:var(--font-display);font-size:1.25rem;margin-bottom:0.5rem;line-height:1.3;} .cert-item-desc {color:rgba(255, 255, 255, 0.6);font-size:0.85rem;line-height:1.5;margin-bottom:1.5rem;flex-grow:1;} .cert-item-link {color:#42A5F5;font-size:0.85rem;text-decoration:none;display:inline-flex;align-items:center;gap:0.4rem;font-weight:500;transition:color 0.2s ease;} .cert-item-link:hover {color:#D7B56D;} .cert-carousel-wrapper {position:relative;width:100%;max-width:1000px;margin:0 auto;perspective:1200px;height:320px;} .cert-carousel-track {position:relative;width:100%;height:100%;display:flex;justify-content:center;align-items:center;} .cert-carousel-slide {position:absolute;width:100%;max-width:400px;height:100%;transition:transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s cubic-bezier(0.25, 1, 0.5, 1), z-index 0.6s;will-change:transform, opacity, filter;opacity:0;visibility:hidden;} .cert-carousel-slide.active {transform:translateX(0) scale(1) translateZ(0);opacity:1;z-index:10;visibility:visible;filter:blur(0);} .cert-carousel-slide.prev {transform:translateX(-65%) scale(0.85) translateZ(-100px);opacity:0.5;z-index:5;visibility:visible;filter:blur(3px);pointer-events:none;} .cert-carousel-slide.next {transform:translateX(65%) scale(0.85) translateZ(-100px);opacity:0.5;z-index:5;visibility:visible;filter:blur(3px);pointer-events:none;} .cert-carousel-slide.hidden-left {transform:translateX(-100%) scale(0.7) translateZ(-200px);opacity:0;z-index:1;} .cert-carousel-slide.hidden-right {transform:translateX(100%) scale(0.7) translateZ(-200px);opacity:0;z-index:1;} .cert-carousel-controls {display:flex;justify-content:center;align-items:center;gap:1.5rem;margin-top:1rem;} @media (max-width:768px) {.cert-shine-container {display:none !important;} .proj-card__scan-beam {display:none !important;animation:none !important;}} .cert-carousel-btn {background:rgba(10, 22, 44, 0.6);border:1px solid rgba(215, 181, 109, 0.3);color:#D7B56D;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s ease;} .cert-carousel-btn:hover {background:rgba(215, 181, 109, 0.2);transform:scale(1.1);} .cert-grid {display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:2rem;} @media (max-width:768px) {* {-webkit-backdrop-filter:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;} .noise, .ambient-blob {display:none !important;} .sr, .tr-wrap {transition-duration:0.3s !important;} .sr-d1, .sr-d2, .sr-d3, .sr-d4, .sr-d5 {transition-delay:0s !important;animation-delay:0s !important;}} .h-full {height:100%;} .w-full {width:100%;} .object-cover {object-fit:cover;} .hidden {display:none;} .text-center {text-align:center;} .p-2 {padding:0.5rem;} .px-6 {padding-left:2rem !important;padding-right:2rem !important;} .text-blue-200 {color:#bfdbfe;} #menu-toggle {background:transparent;border:none;outline:none;cursor:pointer;display:flex;align-items:center;justify-content:center;} #menu-toggle svg {width:28px;height:28px;stroke-width:1.5;} @media (min-width:768px) {.md\:hidden {display:none !important;} .md\:inline-flex {display:inline-flex !important;} .md\:px-12 {padding-left:3rem !important;padding-right:3rem !important;}} @media (min-width:1024px) {.lg\:px-20 {padding-left:5rem !important;padding-right:5rem !important;}} 