.topbar{color:#fff;background:#b5121b;width:100%;font-family:Arial,sans-serif}.topbar-container{white-space:nowrap;scrollbar-width:none;justify-content:center;align-items:center;max-width:1400px;min-height:42px;margin:0 auto;padding:0 20px;display:flex;overflow-x:auto}.topbar-container::-webkit-scrollbar{display:none}.topbar-link{color:#fff;align-items:center;gap:6px;padding:10px 12px;font-size:13px;font-weight:600;text-decoration:none;transition:all .2s;display:flex}.topbar-link:hover{color:gold;background:#ffffff14}.topbar-icon{color:gold;flex-shrink:0;width:16px;height:16px}.topbar-separator{color:#ffffff80}@media (width<=992px){.topbar-container{justify-content:flex-start;padding:0 10px}.topbar-link{padding:10px;font-size:12px}}@media (width<=768px){.topbar-container{justify-content:flex-start;min-height:40px;padding:0 6px}.topbar-link{padding:9px 8px;font-size:11px}.topbar-icon{width:14px;height:14px}}:root{--primary:#ed1c24;--primary-dark:#c81018;--primary-light:#fff1f2;--accent:#ffd400;--accent-dark:#e7bd00;--dark:#111827;--text:#252b35;--muted:#6b7280;--border:#e5e7eb;--white:#fff;--surface:#f8fafc;--shadow-sm:0 2px 8px #0f172a0f;--shadow-md:0 12px 30px #0f172a1f;--shadow-lg:0 20px 50px #0f172a29}html,body{width:100%;max-width:100%;overflow-x:hidden}*,:before,:after{box-sizing:border-box}img,svg,video,iframe{max-width:100%;height:auto}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.navbar{z-index:9999;-webkit-backdrop-filter:blur(18px);background:#fffffff5;border-bottom:1px solid #e5e7ebe6;width:100%;font-family:Inter,Segoe UI,Arial,sans-serif;position:sticky;top:0}.navbar-container{align-items:center;gap:24px;width:100%;max-width:1600px;min-height:82px;margin:0 auto;padding:0 34px;display:flex}.navbar-logo{flex-direction:column;flex-shrink:0;width:clamp(150px,20vw,220px);min-width:0;padding-left:16px;line-height:1;text-decoration:none;display:flex;position:relative}.navbar-logo:before{content:"";background:linear-gradient(180deg, var(--primary), var(--accent));border-radius:20px;width:4px;height:42px;position:absolute;top:2px;left:0}.logo-main{color:var(--primary);letter-spacing:-1px;white-space:nowrap;text-overflow:ellipsis;font-size:clamp(18px,2.2vw,28px);font-weight:900;overflow:hidden}.logo-sub{color:var(--dark);letter-spacing:2px;white-space:nowrap;text-overflow:ellipsis;margin-top:7px;font-size:clamp(7px,.75vw,10px);font-weight:800;overflow:hidden}.navbar-content{flex:1;justify-content:flex-end;align-items:center;gap:12px;min-width:0;display:flex;position:relative}.location-wrapper{flex-shrink:0;position:relative}.location-button{border:1px solid var(--border);background:var(--surface);min-width:142px;height:44px;color:var(--text);cursor:pointer;white-space:nowrap;border-radius:10px;justify-content:center;align-items:center;gap:8px;padding:0 13px;font-size:13px;font-weight:650;transition:border-color .25s,background .25s,color .25s,box-shadow .25s;display:flex}.location-button:hover{background:var(--white);color:var(--primary);box-shadow:var(--shadow-sm);border-color:#ed1c2459}.location-button:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.location-button svg:first-child{color:var(--primary);flex-shrink:0}.location-dropdown{border:1px solid var(--border);width:245px;max-width:calc(100vw - 24px);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform-origin:100% 0;z-index:10000;background:#fffffffa;border-radius:14px;padding:8px;transition:opacity .22s,visibility .22s,transform .22s;position:absolute;top:calc(100% + 12px);right:0;transform:translateY(-8px)scale(.98)}.location-dropdown.show{opacity:1;visibility:visible;transform:translateY(0)scale(1)}.location-dropdown:before{content:"";background:var(--white);border-left:1px solid var(--border);border-top:1px solid var(--border);width:11px;height:11px;position:absolute;top:-6px;right:28px;transform:rotate(45deg)}.location-item{width:100%;min-height:42px;color:var(--text);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:8px;align-items:center;gap:10px;padding:0 12px;font-size:13px;font-weight:550;transition:background .2s,color .2s,transform .2s;display:flex}.location-item:hover{background:var(--primary-light);color:var(--primary);transform:translate(3px)}.location-item:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}.location-item svg{color:var(--primary);flex-shrink:0}.location-item.selected{background:var(--primary);color:var(--white);font-weight:700}.location-item.selected svg{color:var(--white)}.nav-menu{align-items:center;gap:3px;min-width:0;display:flex}.nav-item{min-width:0;position:relative}.nav-link{min-height:45px;color:var(--text);white-space:nowrap;cursor:pointer;background:0 0;border:0;border-radius:8px;justify-content:center;align-items:center;gap:5px;padding:0 11px;font-size:13px;font-weight:700;text-decoration:none;transition:color .25s,background .25s;display:flex;position:relative}.nav-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.nav-link:after{content:"";background:var(--primary);transform-origin:50%;border-radius:10px;height:2px;transition:transform .25s;position:absolute;bottom:4px;left:12px;right:12px;transform:scaleX(0)}.nav-link:hover{color:var(--primary);background:var(--primary-light)}.nav-link:hover:after{transform:scaleX(1)}.dropdown-button{font-family:inherit}.dropdown-menu{border:1px solid var(--border);border-top:3px solid var(--primary);width:285px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform-origin:0 0;z-index:10000;background:#fffffffa;border-radius:0 0 14px 14px;padding:8px;transition:opacity .22s,visibility .22s,transform .22s;position:absolute;top:calc(100% + 13px);left:0;transform:translateY(-9px)scale(.98)}.dropdown-menu:before{content:"";background:var(--white);border-left:1px solid var(--border);border-top:1px solid var(--border);width:11px;height:11px;position:absolute;top:-7px;left:27px;transform:rotate(45deg)}.nav-item:hover>.dropdown-menu,.nav-item.active-dropdown>.dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)scale(1)}.dropdown-link{min-height:45px;color:var(--text);border-radius:8px;justify-content:space-between;align-items:center;gap:15px;padding:0 13px;font-size:13px;font-weight:550;text-decoration:none;transition:background .2s,color .2s,padding-left .2s;display:flex}.dropdown-link:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}.dropdown-link:hover{background:var(--primary-light);color:var(--primary);padding-left:18px}.dropdown-link svg{color:#9ca3af;flex-shrink:0;transition:color .2s,transform .2s}.dropdown-link:hover svg{color:var(--primary);transform:translate(3px)}.login-link{border:1px solid var(--primary);color:var(--primary);margin-left:5px;padding:0 15px}.login-link:hover{background:var(--primary);color:var(--white)}.login-link:hover:after{display:none}.register-link{background:var(--primary);color:var(--white);padding:0 16px;box-shadow:0 5px 14px #ed1c242e}.register-link:hover{background:var(--primary-dark);color:var(--white);box-shadow:0 7px 18px #ed1c2440}.register-link:hover:after{display:none}.admin-link{background:var(--dark);color:var(--white);margin-left:2px;padding:0 15px}.admin-link:hover{color:var(--white);background:#000}.admin-link:hover:after{display:none}.quote-button{background:linear-gradient(135deg, var(--accent), #f5c800);color:#171717;white-space:nowrap;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;min-height:46px;padding:0 21px;font-size:13px;font-weight:800;text-decoration:none;transition:transform .25s,box-shadow .25s,background .25s;display:flex;position:relative;overflow:hidden;box-shadow:0 7px 18px #ffd40033}.quote-button:focus-visible{outline:2px solid var(--dark);outline-offset:2px}.quote-button:before{content:"";background:linear-gradient(110deg,#0000 30%,#ffffff73,#0000 70%);transition:transform .55s;position:absolute;inset:0;transform:translate(-120%)}.quote-button:hover:before{transform:translate(120%)}.quote-button:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:0 10px 24px #ffd40047}.mobile-toggle{border:1px solid var(--border);background:var(--white);width:44px;height:44px;color:var(--dark);cursor:pointer;border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;transition:background .25s,color .25s,border-color .25s;display:none}.mobile-toggle:hover{background:var(--primary);border-color:var(--primary);color:var(--white)}.mobile-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:2px}@media (width>=1600px){.navbar-container{gap:28px;padding:0 48px}.logo-main{font-size:28px}.nav-link{padding:0 13px;font-size:13.5px}}@media (width>=1920px){.navbar-container{max-width:1800px;padding:0 60px}}@media (width>=2560px){.navbar-container{gap:36px;max-width:2200px;min-height:96px;padding:0 80px}.logo-main{font-size:34px}.logo-sub{letter-spacing:3px;font-size:12px}.nav-link{min-height:52px;padding:0 16px;font-size:15px}.location-button{min-width:160px;height:50px;font-size:14px}.quote-button{min-height:52px;padding:0 28px;font-size:15px}.mobile-toggle{width:52px;height:52px}.dropdown-menu{width:320px;font-size:14px}}@media (width<=1350px){.navbar-container{gap:14px;padding:0 22px}.navbar-logo{width:clamp(140px,16vw,190px);padding-left:14px}.logo-main{font-size:clamp(18px,2vw,25px)}.nav-link{padding:0 8px;font-size:12px}.location-button{min-width:120px;font-size:12px}.quote-button{padding:0 16px;font-size:12px}}@media (width<=1120px){.navbar-container{gap:12px;min-height:72px;padding:0 18px}.navbar-logo{width:auto;min-width:0;padding-left:13px}.navbar-logo:before{height:38px}.logo-main{font-size:22px}.logo-sub{font-size:9px}.location-wrapper,.nav-menu{display:none}.mobile-toggle{display:flex}.navbar-content{position:relative;overflow:visible}.quote-button{margin-left:auto}.nav-menu.open{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;border-top:3px solid var(--primary);border-bottom:1px solid var(--border);width:100%;max-height:calc(100dvh - 72px);box-shadow:var(--shadow-lg);z-index:9998;background:#fffffffc;flex-direction:column;padding:9px 12px;display:flex;position:fixed;top:72px;left:0;right:0;overflow:hidden auto}.nav-menu.open .nav-item{border-bottom:1px solid #f0f0f0;width:100%;min-width:0}.nav-menu.open .nav-item:last-child{border-bottom:0}.nav-menu.open .nav-link{border-radius:8px;justify-content:space-between;width:100%;min-height:52px;padding:0 16px;font-size:15px}.nav-menu.open .nav-link:after{display:none}.nav-menu.open .dropdown-menu{width:100%;box-shadow:none;background:var(--surface);opacity:1;visibility:visible;border:0;border-radius:8px;padding:5px 0;display:none;position:static;transform:none}.nav-menu.open .nav-item.active-dropdown .dropdown-menu{display:block}.nav-menu.open .dropdown-menu:before{display:none}.nav-menu.open .dropdown-link{min-height:46px;padding-left:24px;font-size:14px}.nav-menu.open .login-link,.nav-menu.open .register-link,.nav-menu.open .admin-link{border-radius:10px;justify-content:center;margin:6px 0}}@media (width<=900px){.navbar-container{gap:10px;min-height:68px;padding:0 16px}.logo-main{font-size:20px}.logo-sub{letter-spacing:1.5px;font-size:8px}.nav-menu.open{max-height:calc(100dvh - 68px);top:68px}}@media (width<=600px){.navbar-container{gap:9px;min-height:62px;padding:0 12px}.navbar-logo{padding-left:11px}.navbar-logo:before{width:3px;height:32px;top:1px}.logo-main{letter-spacing:-.5px;font-size:19px}.logo-sub{letter-spacing:1px;margin-top:5px;font-size:7px}.quote-button{border-radius:8px;min-height:40px;padding:0 12px;font-size:11px}.mobile-toggle{width:41px;height:41px}.nav-menu.open{max-height:calc(100dvh - 62px);padding:8px 10px;top:62px}}@media (width<=430px){.navbar-container{gap:8px;padding:0 10px}.navbar-logo:before{height:30px}.logo-main{font-size:18px}.logo-sub{font-size:6px}.quote-button{display:none}.mobile-toggle{width:40px;height:40px}.nav-menu.open{padding:8px}}@media (width<=360px){.navbar-container{gap:6px;min-height:58px;padding:0 8px}.navbar-logo{padding-left:9px}.navbar-logo:before{width:3px;height:28px}.logo-main{font-size:16px}.logo-sub{letter-spacing:.8px;font-size:5.5px}.mobile-toggle{width:38px;height:38px}.nav-menu.open{max-height:calc(100dvh - 58px);padding:6px 8px;top:58px}}@media (width<=320px){.navbar-container{gap:5px;min-height:54px;padding:0 6px}.logo-main{font-size:15px}.logo-sub{display:none}.navbar-logo:before{height:26px}.mobile-toggle{width:36px;height:36px}.nav-menu.open{max-height:calc(100dvh - 54px);padding:6px;top:54px}}@media (height<=500px) and (orientation:landscape){.navbar-container{min-height:56px}.nav-menu.open{max-height:calc(100dvh - 56px);top:56px}.logo-main{font-size:17px}.logo-sub{display:none}}@supports (padding:env(safe-area-inset-left)){.navbar-container{padding-left:max(34px, env(safe-area-inset-left));padding-right:max(34px, env(safe-area-inset-right))}@media (width<=1120px){.navbar-container{padding-left:max(18px, env(safe-area-inset-left));padding-right:max(18px, env(safe-area-inset-right))}.nav-menu.open{padding-left:max(12px, env(safe-area-inset-left));padding-right:max(12px, env(safe-area-inset-right));padding-bottom:max(12px, env(safe-area-inset-bottom))}}@media (width<=600px){.navbar-container{padding-left:max(12px, env(safe-area-inset-left));padding-right:max(12px, env(safe-area-inset-right))}}@media (width<=430px){.navbar-container{padding-left:max(10px, env(safe-area-inset-left));padding-right:max(10px, env(safe-area-inset-right))}}}@media (-webkit-device-pixel-ratio>=2),(resolution>=192dpi){.navbar-logo:before{border-radius:20px}}.home{width:100%;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow-x:hidden}.hero{background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);align-items:center;min-height:100vh;padding:80px 20px;display:flex;position:relative;overflow:hidden}.hero:before{content:"";background:radial-gradient(circle,#ff6b351a 0%,#0000 70%);width:100%;height:100%;animation:8s ease-in-out infinite pulseGlow;position:absolute;top:-50%;right:-50%}@keyframes pulseGlow{0%,to{box-shadow:0 10px 40px #ff6b354d}50%{box-shadow:0 10px 60px #ff6b3580}}.hero-container{z-index:2;grid-template-columns:1fr 1fr;align-items:center;gap:60px;width:100%;max-width:1300px;margin:0 auto;animation:1s ease-out fadeInUp;display:grid;position:relative}@keyframes fadeInUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.hero-content{color:#fff}.hero-tag{color:#ff6b35;letter-spacing:2px;background:#ff6b3533;border:1px solid #ff6b354d;border-radius:50px;margin-bottom:20px;padding:8px 20px;font-size:13px;font-weight:600;animation:3s ease-in-out infinite shimmer;display:inline-block}@keyframes shimmer{0%,to{box-shadow:0 0 20px #ff6b351a}50%{box-shadow:0 0 40px #ff6b354d}}.hero-content h1{margin-bottom:20px;font-size:58px;font-weight:800;line-height:1.1}.hero-content h1 span{background:linear-gradient(135deg,#ff6b35,#ff8a5c);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;position:relative}.hero-content h1 span:after{content:"";background:linear-gradient(135deg,#ff6b35,#ff8a5c);border-radius:2px;width:100%;height:4px;animation:2s ease-in-out infinite expandLine;position:absolute;bottom:-5px;left:0}@keyframes expandLine{0%,to{opacity:0;width:0}50%{opacity:1;width:100%}}.hero-content p{color:#fffc;max-width:500px;margin-bottom:30px;font-size:18px;line-height:1.8}.hero-actions{flex-wrap:wrap;gap:15px;margin-bottom:30px;display:flex}.primary-button{color:#fff;background:linear-gradient(135deg,#ff6b35,#e55a2b);border-radius:50px;align-items:center;gap:10px;padding:15px 35px;font-size:16px;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex;position:relative;overflow:hidden;box-shadow:0 4px 20px #ff6b3566}.primary-button:before{content:"";background:linear-gradient(90deg,#0000,#fff3,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.primary-button:hover:before{left:100%}.primary-button:hover{transform:translateY(-3px)scale(1.03);box-shadow:0 8px 30px #ff6b3599}.secondary-button{color:#fff;background:0 0;border:2px solid #ffffff4d;border-radius:50px;align-items:center;gap:10px;padding:15px 30px;font-size:16px;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex}.secondary-button:hover{background:#ff6b351a;border-color:#ff6b35;transform:translateY(-3px)}.hero-features{flex-wrap:wrap;gap:25px;display:flex}.hero-features div{color:#fffc;align-items:center;gap:8px;font-size:14px;display:flex}.hero-features div svg{color:#ff6b35}.quote-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:20px;padding:40px;animation:1s ease-out .3s both slideUp;box-shadow:0 20px 60px #0000004d}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.quote-header span{color:#ff6b35;letter-spacing:2px;font-size:12px;font-weight:700}.quote-header h2{color:#fff;margin:8px 0 5px;font-size:28px}.quote-header h2 strong{color:#ff6b35}.quote-header p{color:#fff9;margin-bottom:25px;font-size:14px}.quote-card form{flex-direction:column;gap:15px;display:flex}.form-group{position:relative}.form-group input{color:#fff;background:#ffffff14;border:1px solid #ffffff1a;border-radius:12px;outline:none;width:100%;padding:14px 18px;font-size:15px;transition:all .3s}.form-group input::placeholder{color:#fff6}.form-group input:focus{background:#ff6b350d;border-color:#ff6b35;transform:scale(1.02);box-shadow:0 0 25px #ff6b351a}.form-row{grid-template-columns:1fr 1fr;gap:15px;display:grid}.form-row .form-group{background:#ffffff14;border:1px solid #ffffff1a;border-radius:12px;align-items:center;transition:all .3s;display:flex}.form-row .form-group:focus-within{background:#ff6b350d;border-color:#ff6b35;box-shadow:0 0 25px #ff6b351a}.form-row .form-group svg{color:#fff6;flex-shrink:0;margin-left:15px}.form-row .form-group input{background:0 0;border:none;padding:14px 15px 14px 10px}.form-row .form-group input:focus{box-shadow:none;transform:none}.quote-submit{color:#fff;cursor:pointer;background:linear-gradient(135deg,#ff6b35,#e55a2b);border:none;border-radius:12px;justify-content:center;align-items:center;gap:10px;margin-top:5px;padding:16px;font-size:16px;font-weight:700;transition:all .3s;display:inline-flex;position:relative;overflow:hidden}.quote-submit:before{content:"";background:linear-gradient(90deg,#0000,#fff3,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.quote-submit:hover:before{left:100%}.quote-submit:hover{transform:translateY(-2px)scale(1.02);box-shadow:0 8px 30px #ff6b3566}.stats-section{background:linear-gradient(135deg,#1a1a2e,#16213e);border-top:1px solid #ffffff0d;border-bottom:1px solid #ffffff0d;padding:80px 20px}.stats-container{grid-template-columns:repeat(4,1fr);gap:30px;max-width:1200px;margin:0 auto;display:grid}.stat-item{background:#ffffff08;border:1px solid #ffffff0d;border-radius:16px;align-items:center;gap:18px;padding:25px;transition:all .4s;display:flex}.stat-item:hover{background:#ff6b350d;border-color:#ff6b3533;transform:translateY(-8px)scale(1.02);box-shadow:0 10px 40px #ff6b351a}.stat-item svg{color:#ff6b35;flex-shrink:0;animation:3s ease-in-out infinite float}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.stat-item div{flex-direction:column;display:flex}.stat-item strong{color:#fff;background:linear-gradient(135deg,#ff6b35,#ff8a5c);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:32px;font-weight:800}.stat-item span{color:#fff9;font-size:14px}.services-section{background:#0f0c29;padding:100px 20px}.section-heading span{color:#ff6b35;letter-spacing:3px;margin-bottom:10px;font-size:13px;font-weight:700;display:block}.section-heading h2{color:#fff;margin-bottom:15px;font-size:42px;font-weight:800}.section-heading p{color:#fff9;font-size:17px;line-height:1.7}.services-grid{grid-template-columns:repeat(3,1fr);gap:30px;max-width:1200px;margin:0 auto;display:grid}.service-card{background:#ffffff08;border:1px solid #ffffff0d;border-radius:20px;padding:40px 30px;transition:all .4s;position:relative;overflow:hidden}.service-card:before{content:"";transform-origin:0;background:linear-gradient(90deg,#ff6b35,#ff8a5c);width:100%;height:4px;transition:transform .4s;position:absolute;top:0;left:0;transform:scaleX(0)}.service-card:hover:before{transform:scaleX(1)}.service-card:hover{background:#ff6b350d;border-color:#ff6b3526;transform:translateY(-10px);box-shadow:0 20px 60px #ff6b351a}.service-icon{background:#ff6b351a;border-radius:16px;justify-content:center;align-items:center;width:65px;height:65px;margin-bottom:20px;transition:all .4s;display:flex}.service-card:hover .service-icon{background:#ff6b3533;transform:rotateY(180deg)}.service-icon svg{color:#ff6b35}.service-card h3{color:#fff;margin-bottom:12px;font-size:20px;font-weight:700}.service-card p{color:#fff9;margin-bottom:18px;font-size:15px;line-height:1.7}.service-card a{color:#ff6b35;align-items:center;gap:6px;font-size:14px;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex}.service-card a:hover{color:#ff8a5c;gap:12px}.about-section{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:100px 20px}.about-container{grid-template-columns:1fr 1fr;align-items:center;gap:60px;max-width:1200px;margin:0 auto;display:grid}.about-visual{justify-content:center;align-items:center;display:flex;position:relative}.about-box-main{text-align:center;background:linear-gradient(135deg,#ff6b3526,#ff8a5c0d);border:1px solid #ff6b351a;border-radius:30px;padding:50px;transition:all .4s;animation:4s ease-in-out infinite float}.about-box-main svg{color:#ff6b35;margin-bottom:15px}.about-box-main strong{color:#fff;margin-bottom:5px;font-size:24px;display:block}.about-box-main span{color:#ffffff80;font-size:14px}.about-experience{text-align:center;background:linear-gradient(135deg,#ff6b35,#e55a2b);border-radius:20px;padding:25px 30px;animation:2s ease-in-out infinite pulseGlow;position:absolute;bottom:-20px;right:-20px;box-shadow:0 10px 40px #ff6b354d}.about-experience strong{color:#fff;font-size:36px;font-weight:800;display:block}.about-experience span{color:#fffc;font-size:14px;line-height:1.3}.about-content .section-label{color:#ff6b35;letter-spacing:3px;margin-bottom:10px;font-size:13px;font-weight:700;display:block}.about-content h2{color:#fff;margin-bottom:18px;font-size:40px;font-weight:800}.about-content h2 span{background:linear-gradient(135deg,#ff6b35,#ff8a5c);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.about-content p{color:#fff9;margin-bottom:15px;font-size:16px;line-height:1.8}.about-list{grid-template-columns:1fr 1fr;gap:12px;margin:25px 0 30px;display:grid}.about-list div{color:#fffc;align-items:center;gap:10px;font-size:14px;display:flex}.about-list div svg{color:#ff6b35;flex-shrink:0}.about-button{color:#fff;background:linear-gradient(135deg,#ff6b35,#e55a2b);border-radius:50px;align-items:center;gap:10px;padding:14px 35px;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex;box-shadow:0 4px 20px #ff6b354d}.about-button:hover{transform:translateY(-3px);box-shadow:0 8px 30px #ff6b3580}.process-section{background:#0f0c29;padding:100px 20px}.process-grid{grid-template-columns:repeat(4,1fr);gap:30px;max-width:1200px;margin:0 auto;display:grid}.process-card{text-align:center;background:#ffffff08;border:1px solid #ffffff0d;border-radius:20px;padding:35px 25px;transition:all .4s;position:relative}.process-card:hover{background:#ff6b350d;border-color:#ff6b3526;transform:translateY(-10px)scale(1.02);box-shadow:0 20px 60px #ff6b351a}.process-number{background:linear-gradient(135deg,#ff6b35,#ff8a5c);-webkit-text-fill-color:transparent;opacity:.2;-webkit-background-clip:text;background-clip:text;margin-bottom:10px;font-size:48px;font-weight:900;transition:all .4s;display:inline-block}.process-card:hover .process-number{opacity:1;transform:scale(1.1)}.process-icon{background:#ff6b351a;border-radius:50%;justify-content:center;align-items:center;width:60px;height:60px;margin:10px auto 18px;transition:all .4s;display:flex}.process-card:hover .process-icon{background:#ff6b3533;transform:rotateY(180deg)}.process-icon svg{color:#ff6b35}.process-card h3{color:#fff;margin-bottom:10px;font-size:18px;font-weight:700}.process-card p{color:#ffffff80;font-size:14px;line-height:1.6}.locations-section{text-align:center;background:linear-gradient(135deg,#1a1a2e,#16213e);padding:100px 20px}.locations-grid{grid-template-columns:repeat(4,1fr);gap:15px;max-width:1000px;margin:0 auto 40px;display:grid}.locations-grid a{color:#ffffffb3;background:#ffffff08;border:1px solid #ffffff0d;border-radius:12px;align-items:center;gap:10px;padding:15px 20px;font-size:14px;font-weight:500;text-decoration:none;transition:all .3s;display:flex}.locations-grid a:hover{color:#fff;background:#ff6b351a;border-color:#ff6b3533;transform:translateY(-3px);box-shadow:0 10px 30px #ff6b351a}.locations-grid a svg:first-child{color:#ff6b35;flex-shrink:0}.locations-grid a svg:last-child{opacity:0;margin-left:auto;transition:all .3s}.locations-grid a:hover svg:last-child{opacity:1;transform:translate(3px)}.locations-button{color:#ff6b35;background:0 0;border:2px solid #ff6b3533;border-radius:50px;align-items:center;gap:10px;padding:14px 35px;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex}.locations-button:hover{background:#ff6b351a;border-color:#ff6b35;transform:translateY(-3px);box-shadow:0 10px 30px #ff6b351a}.map-section{background:#0f0c29;padding:100px 20px}.map-container{border:1px solid #ffffff0d;border-radius:24px;max-width:1200px;margin:0 auto;transition:all .4s;overflow:hidden;box-shadow:0 20px 60px #0000004d}.map-container:hover{transform:scale(1.01);box-shadow:0 30px 80px #ff6b351a}.map-container iframe{display:block}.cta-section{background:linear-gradient(135deg,#ff6b35,#e55a2b);padding:80px 20px;position:relative;overflow:hidden}.cta-section:before{content:"";background:#ffffff08;width:60%;height:200%;position:absolute;top:-50%;right:-20%;transform:rotate(15deg)}.cta-container{z-index:2;justify-content:space-between;align-items:center;gap:40px;max-width:1100px;margin:0 auto;display:flex;position:relative}.cta-container div span{letter-spacing:3px;color:#ffffffb3;margin-bottom:8px;font-size:13px;font-weight:700;display:block}.cta-container div h2{color:#fff;margin-bottom:10px;font-size:38px;font-weight:800}.cta-container div p{color:#fffc;max-width:450px;font-size:16px;line-height:1.6}.cta-actions{flex-wrap:wrap;gap:15px;display:flex}.cta-primary{color:#ff6b35;background:#fff;border-radius:50px;align-items:center;gap:10px;padding:16px 35px;font-weight:700;text-decoration:none;transition:all .3s;display:inline-flex;box-shadow:0 4px 20px #0003}.cta-primary:hover{transform:translateY(-3px)scale(1.03);box-shadow:0 8px 40px #0000004d}.cta-phone{color:#fff;background:#ffffff1a;border:2px solid #fff3;border-radius:50px;align-items:center;gap:10px;padding:16px 30px;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex}.cta-phone:hover{background:#fff3;transform:translateY(-3px)}@media (width<=1024px){.hero-container{grid-template-columns:1fr;gap:40px}.hero-content h1{font-size:44px}.services-grid,.process-grid{grid-template-columns:repeat(2,1fr)}.locations-grid{grid-template-columns:repeat(3,1fr)}.about-container{grid-template-columns:1fr;gap:40px}.about-visual{order:-1}}@media (width<=768px){.hero{padding:60px 15px}.hero-content h1{font-size:34px}.quote-card{padding:25px}.form-row{grid-template-columns:1fr}.stats-container{grid-template-columns:repeat(2,1fr);gap:15px}.stat-item{padding:18px}.stat-item strong{font-size:24px}.services-grid,.process-grid{grid-template-columns:1fr;gap:20px}.locations-grid{grid-template-columns:repeat(2,1fr)}.section-heading h2,.about-content h2{font-size:30px}.about-list{grid-template-columns:1fr}.cta-container{text-align:center;flex-direction:column}.cta-container div p{max-width:100%}.cta-actions,.hero-actions,.hero-features{justify-content:center}}@media (width<=480px){.hero-content h1{font-size:28px}.hero-tag{padding:6px 15px;font-size:11px}.primary-button,.secondary-button{padding:12px 25px;font-size:14px}.stats-container{grid-template-columns:1fr 1fr;gap:10px}.stat-item{padding:15px}.stat-item strong{font-size:20px}.locations-grid{grid-template-columns:1fr 1fr;gap:10px}.locations-grid a{padding:12px 15px;font-size:13px}.cta-container div h2{font-size:28px}.about-box-main{padding:30px}.about-experience{padding:15px 20px;bottom:-10px;right:-10px}.about-experience strong{font-size:28px}}.about-page{background:#0f0c29;width:100%;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow-x:hidden}.about-container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}.about-hero{background-position:50%;background-repeat:no-repeat;background-size:cover;align-items:center;min-height:85vh;padding:80px 0;display:flex;position:relative;overflow:hidden}.hero-overlay{z-index:1;background:linear-gradient(135deg,#050f1ef7,#050f1ed1,#050f1e59);width:100%;height:100%;position:absolute;top:0;left:0}.hero-particles{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden}.hero-particles:before{content:"";background:radial-gradient(circle at 20% 30%,#ff6b350f 0%,#0000 40%),radial-gradient(circle at 80% 70%,#ff6b350a 0%,#0000 35%),radial-gradient(circle,#ff6b3505 0%,#0000 60%);width:200%;height:200%;animation:25s ease-in-out infinite floatParticles;position:absolute}@keyframes floatParticles{0%,to{transform:translate(0)rotate(0)}33%{transform:translate(-30px,15px)rotate(120deg)}66%{transform:translate(30px,-15px)rotate(240deg)}}.about-hero:before{content:"";z-index:1;background:radial-gradient(circle,#ff6b3514 0%,#0000 70%);width:60%;height:150%;animation:20s linear infinite rotateGlow;position:absolute;top:-30%;right:-10%}@keyframes rotateGlow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.about-hero:after{content:"";z-index:1;background:radial-gradient(circle,#ff6b350d 0%,#0000 60%);width:50%;height:100%;animation:8s ease-in-out infinite glowPulse;position:absolute;bottom:-20%;left:-10%}@keyframes glowPulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}.about-hero-content{z-index:2;max-width:720px;animation:1.2s ease-out fadeInUp;position:relative}.about-tag{color:#ff6b35;letter-spacing:2.5px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ff6b3526;border:1px solid #ff6b3540;border-radius:50px;align-items:center;gap:8px;margin-bottom:25px;padding:10px 24px;font-size:13px;font-weight:700;animation:3s ease-in-out infinite shimmer;display:inline-flex}.about-hero-content h1{color:#fff;margin-bottom:22px;font-size:56px;font-weight:800;line-height:1.08}.about-hero-content h1 strong{background:linear-gradient(135deg,#ff6b35,#ff8a5c,#ffb088);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;position:relative}.about-hero-content h1 strong:before{content:"";background:radial-gradient(circle,#ff6b3533,#0000);border-radius:50%;width:40px;height:40px;animation:3s ease-in-out infinite sparkle;position:absolute;top:-10px;right:-15px}@keyframes sparkle{0%,to{opacity:0;transform:scale(.5)rotate(0)}50%{opacity:1;transform:scale(1.5)rotate(180deg)}}.about-hero-content h1 strong:after{content:"";background:linear-gradient(135deg,#ff6b35,#ff8a5c);border-radius:2px;width:100%;height:4px;animation:3s ease-in-out infinite expandLine;position:absolute;bottom:-8px;left:0}.about-hero-content p{color:#ffffffbf;letter-spacing:.3px;max-width:520px;margin-bottom:35px;font-size:18px;line-height:1.9}.about-actions{flex-wrap:wrap;gap:18px;display:flex}.btn{cursor:pointer;letter-spacing:.5px;border:none;border-radius:50px;align-items:center;gap:10px;padding:17px 38px;font-size:16px;font-weight:700;text-decoration:none;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:inline-flex;position:relative;overflow:hidden}.btn:after{content:"";background:#fff3;border-radius:50%;width:0;height:0;transition:width .6s,height .6s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.btn:active:after{width:300px;height:300px}.btn-primary{color:#fff;background:linear-gradient(135deg,#ff6b35,#e55a2b);box-shadow:0 6px 30px #ff6b3566}.btn-primary:before{content:"";background:linear-gradient(90deg,#0000,#ffffff26,#0000);width:100%;height:100%;transition:left .6s;position:absolute;top:0;left:-100%}.btn-primary:hover:before{left:100%}.btn-primary:hover{transform:translateY(-4px)scale(1.04);box-shadow:0 10px 45px #ff6b3599}.btn-whatsapp{color:#fff;background:linear-gradient(135deg,#25d366,#128c7e);box-shadow:0 6px 30px #25d36666}.btn-whatsapp:before{content:"";background:linear-gradient(90deg,#0000,#ffffff26,#0000);width:100%;height:100%;transition:left .6s;position:absolute;top:0;left:-100%}.btn-whatsapp:hover:before{left:100%}.btn-whatsapp:hover{transform:translateY(-4px)scale(1.04);box-shadow:0 10px 45px #25d36699}.btn-whatsapp-small{color:#fff;cursor:pointer;background:linear-gradient(135deg,#25d366,#128c7e);border:none;border-radius:50px;align-items:center;gap:8px;margin-top:18px;padding:12px 28px;font-size:14px;font-weight:600;text-decoration:none;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:inline-flex;box-shadow:0 4px 20px #25d3664d}.btn-whatsapp-small:hover{transform:translateY(-4px)scale(1.05);box-shadow:0 8px 35px #25d36680}.about-stats{z-index:3;margin-top:-50px;padding:0 20px;position:relative}.stats-grid{-webkit-backdrop-filter:blur(25px);background:#ffffff0a;border:1px solid #ffffff14;border-radius:24px;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1100px;margin:0 auto;padding:35px 30px;animation:1s ease-out .3s both slideUp;display:grid;box-shadow:0 25px 80px #0006}.stat-card{text-align:center;border-radius:16px;padding:18px;transition:all .4s cubic-bezier(.175,.885,.32,1.275);position:relative}.stat-card:before{content:"";opacity:0;background:radial-gradient(circle,#ff6b350d,#0000);border-radius:16px;width:100%;height:100%;transition:opacity .4s;position:absolute;top:0;left:0}.stat-card:hover:before{opacity:1}.stat-card strong{background:linear-gradient(135deg,#ff6b35,#ff8a5c,#ffb088);-webkit-text-fill-color:transparent;letter-spacing:1px;-webkit-background-clip:text;background-clip:text;font-size:40px;font-weight:900;display:block;position:relative}.stat-card strong:after{content:"+";-webkit-text-fill-color:#ff6b35;opacity:.6;font-size:28px}.stat-card span{color:#fff9;letter-spacing:.5px;font-size:14px;font-weight:500}.about-section{background:#0f0c29;padding:100px 0;position:relative}.about-section:before{content:"";background:linear-gradient(90deg,#0000,#ff6b351a,#0000);width:100%;height:1px;position:absolute;top:0;left:0}.section-light{background:linear-gradient(135deg,#1a1a2e,#16213e);position:relative}.section-light:after{content:"";background:linear-gradient(90deg,#0000,#ff6b3514,#0000);width:100%;height:1px;position:absolute;bottom:0;left:0}.company-grid,.split-grid{grid-template-columns:1fr 1fr;align-items:center;gap:70px;display:grid}.image-card{border-radius:28px;transition:all .5s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden;box-shadow:0 25px 70px #0006}.image-card:before{content:"";opacity:0;z-index:1;background:linear-gradient(135deg,#ff6b351a,#0000);width:100%;height:100%;transition:opacity .5s;position:absolute;top:0;left:0}.image-card:hover:before{opacity:1}.image-card:hover{transform:scale(1.03)translateY(-5px);box-shadow:0 35px 90px #ff6b3526}.image-card img{object-fit:cover;width:100%;height:420px;transition:all .6s cubic-bezier(.175,.885,.32,1.275);display:block}.image-card:hover img{transform:scale(1.08)}.image-badge{-webkit-backdrop-filter:blur(15px);z-index:2;background:#0f0c29eb;border:1px solid #ffffff0f;border-radius:18px;align-items:center;gap:18px;padding:20px 25px;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:flex;position:absolute;bottom:25px;left:25px;right:25px}.image-card:hover .image-badge{background:#ff6b3526;border-color:#ff6b3533;transform:translateY(-5px)}.badge-icon{color:#ff6b35;background:#ff6b3526;border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:55px;height:55px;transition:all .4s;display:flex}.image-card:hover .badge-icon{background:#ff6b3540;transform:rotate(10deg)scale(1.05)}.image-badge strong{color:#fff;font-size:17px;font-weight:700;display:block}.image-badge span{color:#ffffff80;font-size:13px}.content-block{animation:1s ease-out fadeInRight}@keyframes fadeInRight{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}.section-label{color:#ff6b35;letter-spacing:3.5px;text-transform:uppercase;margin-bottom:12px;padding-left:20px;font-size:13px;font-weight:700;display:block;position:relative}.section-label:before{content:"";background:linear-gradient(135deg,#ff6b35,#ff8a5c);border-radius:2px;width:3px;height:20px;position:absolute;top:50%;left:0;transform:translateY(-50%)}.section-title{color:#fff;margin-bottom:20px;font-size:42px;font-weight:800;line-height:1.15}.section-title strong{background:linear-gradient(135deg,#ff6b35,#ff8a5c,#ffb088);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;position:relative}.content-block p{color:#fff9;margin-bottom:16px;font-size:16px;line-height:1.9}.check-list{grid-template-columns:1fr 1fr;gap:14px;margin-top:25px;display:grid}.check-list div{color:#ffffffbf;background:#ffffff05;border:1px solid #ffffff08;border-radius:12px;align-items:center;gap:12px;padding:10px 14px;font-size:14px;transition:all .3s;display:flex}.check-list div:hover{background:#ff6b350d;border-color:#ff6b351a;transform:translate(5px)}.check-list div svg{color:#ff6b35;flex-shrink:0}.section-heading{text-align:center;max-width:780px;margin:0 auto 60px}.section-heading .section-label{text-align:center;padding-left:0}.section-heading .section-label:before{display:none}.section-heading .section-title{margin-bottom:15px}.section-heading p{color:#ffffff8c;max-width:600px;margin:0 auto;font-size:17px;line-height:1.8}.reason-grid{grid-template-columns:repeat(4,1fr);gap:30px;display:grid}.reason-card{text-align:center;background:#ffffff08;border:1px solid #ffffff0d;border-radius:22px;padding:40px 25px 30px;transition:all .5s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden}.reason-card:before{content:"";transform-origin:0;background:linear-gradient(90deg,#ff6b35,#ff8a5c);width:100%;height:4px;transition:transform .5s;position:absolute;top:0;left:0;transform:scaleX(0)}.reason-card:after{content:"";background:radial-gradient(circle at 100% 100%,#ff6b3508,#0000);border-radius:50%;width:100px;height:100px;transition:all .5s;position:absolute;bottom:0;right:0}.reason-card:hover:before{transform:scaleX(1)}.reason-card:hover:after{transform:scale(2)}.reason-card:hover{background:#ff6b350d;border-color:#ff6b3526;transform:translateY(-12px);box-shadow:0 25px 70px #ff6b3514}.reason-icon{background:#ff6b351a;border-radius:18px;justify-content:center;align-items:center;width:65px;height:65px;margin:0 auto 18px;transition:all .5s cubic-bezier(.175,.885,.32,1.275);display:flex}.reason-card:hover .reason-icon{background:#ff6b3533;transform:rotateY(180deg)scale(1.05)}.reason-icon svg{color:#ff6b35}.reason-check{color:#ff6b35;margin-bottom:12px;animation:2s ease-in-out infinite checkPulse}@keyframes checkPulse{0%,to{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.2)}}.reason-card h3{color:#fff;margin-bottom:10px;font-size:19px;font-weight:700}.reason-card p{color:#ffffff80;font-size:14px;line-height:1.7}.services-grid{grid-template-columns:repeat(3,1fr);gap:28px;display:grid}.service-card{cursor:pointer;background:#ffffff08;border:1px solid #ffffff0d;border-radius:22px;transition:all .5s cubic-bezier(.175,.885,.32,1.275);position:relative;overflow:hidden}.service-card:before{content:"";opacity:0;z-index:0;background:linear-gradient(135deg,#ff6b3508,#0000);width:100%;height:100%;transition:opacity .5s;position:absolute;top:0;left:0}.service-card:hover:before{opacity:1}.service-card:hover{border-color:#ff6b3533;transform:translateY(-10px);box-shadow:0 25px 70px #ff6b3514}.service-image{height:210px;position:relative;overflow:hidden}.service-image img{object-fit:cover;width:100%;height:100%;transition:all .6s cubic-bezier(.175,.885,.32,1.275)}.service-card:hover .service-image img{transform:scale(1.12)}.service-overlay{opacity:0;background:#0006;justify-content:center;align-items:center;width:100%;height:100%;transition:all .4s;display:flex;position:absolute;top:0;left:0}.service-card:hover .service-overlay{opacity:1}.service-whatsapp{color:#fff;background:linear-gradient(135deg,#25d366,#128c7e);border-radius:50%;justify-content:center;align-items:center;width:55px;height:55px;text-decoration:none;transition:all .5s cubic-bezier(.175,.885,.32,1.275);display:flex;transform:scale(0)rotate(-45deg);box-shadow:0 5px 25px #25d36666}.service-card:hover .service-whatsapp{transform:scale(1)rotate(0)}.service-whatsapp:hover{box-shadow:0 8px 35px #25d36699;transform:scale(1.15)!important}.service-content{z-index:1;padding:22px 25px;position:relative}.service-title{color:#fff;align-items:center;gap:12px;margin-bottom:4px;font-size:16px;font-weight:600;display:flex}.service-title svg{color:#ff6b35;flex-shrink:0}.service-desc{color:#fff6;margin-left:32px;font-size:13px}.service-content>svg:last-child{color:#ff6b35;opacity:0;float:right;margin-top:-22px;transition:all .4s cubic-bezier(.175,.885,.32,1.275)}.service-card:hover .service-content>svg:last-child{opacity:1;transform:translate(8px)}.icon-list{grid-template-columns:1fr 1fr;gap:14px;margin-top:25px;display:grid}.icon-list div{color:#ffffffb3;background:#ffffff05;border:1px solid #ffffff08;border-radius:12px;align-items:center;gap:12px;padding:10px 14px;font-size:14px;transition:all .3s;display:flex}.icon-list div:hover{background:#ff6b350d;border-color:#ff6b351a;transform:translate(5px)}.icon-list div svg{color:#ff6b35;flex-shrink:0}.testimonials-section{background:linear-gradient(135deg,#0f0c29,#1a1a2e);padding:100px 0;position:relative}.testimonials-section:before{content:"";background:linear-gradient(90deg,#0000,#ff6b3514,#0000);width:100%;height:1px;position:absolute;top:0;left:0}.testimonials-grid{grid-template-columns:repeat(3,1fr);gap:30px;display:grid}.testimonial-stars svg{animation:2s ease-in-out infinite starPulse}.testimonial-stars svg:nth-child(2){animation-delay:.2s}.testimonial-stars svg:nth-child(3){animation-delay:.4s}.testimonial-stars svg:nth-child(4){animation-delay:.6s}.testimonial-stars svg:nth-child(5){animation-delay:.8s}@keyframes starPulse{0%,to{transform:scale(1)}50%{transform:scale(1.15)}}.testimonial-card p{color:#ffffffb3;margin-bottom:20px;font-size:15px;font-style:italic;line-height:1.8}.author-avatar{color:#fff;background:linear-gradient(135deg,#ff6b35,#e55a2b);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:18px;font-weight:700;display:flex}.testimonial-author strong{color:#fff;font-size:16px;font-weight:700;display:block}.testimonial-author span{color:#fff6;font-size:13px}.about-cta{background:linear-gradient(135deg,#ff6b35,#e55a2b,#c44a1f);padding:90px 0;position:relative;overflow:hidden}.about-cta:before{content:"";background:#ffffff08;width:50%;height:200%;position:absolute;top:-60%;right:-10%;transform:rotate(20deg)}.about-cta:after{content:"";background:#ffffff05;width:40%;height:150%;position:absolute;bottom:-40%;left:-5%;transform:rotate(-15deg)}.cta-inner{z-index:2;justify-content:space-between;align-items:center;gap:50px;display:flex;position:relative}.cta-content{align-items:center;gap:30px;display:flex}.cta-icon{color:#fff;background:#ffffff26;border:1px solid #ffffff1a;border-radius:20px;flex-shrink:0;justify-content:center;align-items:center;width:70px;height:70px;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:flex}.cta-content:hover .cta-icon{background:#fff3;transform:rotate(15deg)scale(1.05)}.cta-content div span{letter-spacing:3.5px;color:#ffffffb3;margin-bottom:6px;font-size:13px;font-weight:700;display:block}.cta-content div h2{color:#fff;margin-bottom:6px;font-size:34px;font-weight:800;line-height:1.2}.cta-content div h2 strong{color:#fff;text-underline-offset:8px;-webkit-text-decoration:underline #ffffff4d;text-decoration:underline #ffffff4d;text-decoration-thickness:2px}.cta-content div p{color:#fffc;font-size:16px}.cta-actions{flex-wrap:wrap;flex-shrink:0;gap:18px;display:flex}.cta-actions .btn-primary{color:#ff6b35;background:#fff;box-shadow:0 6px 30px #0003}.cta-actions .btn-primary:hover{transform:translateY(-4px)scale(1.04);box-shadow:0 10px 45px #00000059}.cta-actions .btn-whatsapp{background:#ffffff26;border:2px solid #fff3}.cta-actions .btn-whatsapp:hover{background:#25d366;border-color:#25d366;box-shadow:0 8px 35px #25d36680}@media (width<=1024px){.about-hero-content h1{font-size:42px}.company-grid,.split-grid{grid-template-columns:1fr;gap:50px}.reason-grid,.services-grid,.testimonials-grid{grid-template-columns:repeat(2,1fr)}.split-grid .image-card:last-child{order:-1}.stats-grid{grid-template-columns:repeat(2,1fr)}.cta-inner,.cta-content{text-align:center;flex-direction:column}.cta-actions{justify-content:center}}@media (width<=768px){.about-hero{min-height:70vh;padding:60px 0}.about-hero-content h1{font-size:34px}.about-hero-content p{font-size:16px}.section-title{font-size:32px}.reason-grid{grid-template-columns:1fr 1fr;gap:20px}.services-grid{grid-template-columns:1fr;gap:20px}.testimonials-grid,.check-list,.icon-list{grid-template-columns:1fr}.image-card img{height:280px}.stats-grid{grid-template-columns:1fr 1fr;gap:15px;padding:25px}.stat-card strong{font-size:30px}.cta-content div h2{font-size:28px}.about-actions{justify-content:center}.btn{padding:14px 28px;font-size:14px}.section-heading .section-title{font-size:30px}}@media (width<=480px){.about-hero-content h1{font-size:28px}.about-tag{padding:8px 16px;font-size:11px}.btn{padding:12px 22px;font-size:13px}.reason-grid{grid-template-columns:1fr}.section-title{font-size:26px}.stats-grid{grid-template-columns:1fr 1fr;gap:10px;padding:18px}.stat-card strong{font-size:24px}.stat-card span{font-size:12px}.image-card img{height:220px}.image-badge{gap:12px;padding:14px 18px}.badge-icon{width:40px;height:40px}.image-badge strong{font-size:14px}.image-badge span{font-size:12px}.cta-content div h2{font-size:24px}.about-actions{flex-direction:column;align-items:center}.btn{justify-content:center;width:100%}.cta-actions{flex-direction:column;width:100%}.cta-actions .btn{justify-content:center;width:100%}.section-heading .section-title{font-size:26px}.section-heading p{font-size:15px}.service-image{height:180px}.testimonial-card{padding:25px 20px}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.about-section{animation:.8s ease-out fadeInScale}.image-card,.content-block,.reason-card,.service-card,.testimonial-card{animation:.6s ease-out fadeInScale}.reason-card:nth-child(2){animation-delay:.1s}.reason-card:nth-child(3){animation-delay:.2s}.reason-card:nth-child(4){animation-delay:.3s}.service-card:nth-child(2){animation-delay:.1s}.service-card:nth-child(3){animation-delay:.2s}.service-card:nth-child(4){animation-delay:.3s}.service-card:nth-child(5){animation-delay:.4s}.service-card:nth-child(6){animation-delay:.5s}.testimonial-card:nth-child(2){animation-delay:.2s}.testimonial-card:nth-child(3){animation-delay:.4s}*{box-sizing:border-box;margin:0;padding:0}.why-pashupati-page{width:100%;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;overflow-x:hidden}.why-hero{background-position:50%;background-repeat:no-repeat;background-size:cover;align-items:center;min-height:80vh;padding:80px 20px;display:flex;position:relative;overflow:hidden}.hero-background-overlay{z-index:1;background:#0f0c29e0;width:100%;height:100%;animation:10s ease-in-out infinite pulseBg;position:absolute;top:0;left:0}@keyframes pulseBg{0%,to{opacity:.88}50%{opacity:.75}}.why-hero:before{content:"";z-index:1;background:radial-gradient(circle,#ff6b3514 0%,#0000 70%);width:60%;height:150%;animation:25s linear infinite rotateGlow;position:absolute;top:-30%;right:-20%}.why-container{z-index:2;width:100%;max-width:1200px;margin:0 auto;position:relative}.why-hero-content{max-width:700px;animation:1s ease-out fadeInUp}.why-label{color:#ff6b35;letter-spacing:2px;background:#ff6b3526;border:1px solid #ff6b3533;border-radius:50px;align-items:center;gap:8px;margin-bottom:20px;padding:8px 20px;font-size:13px;font-weight:700;animation:3s ease-in-out infinite shimmer;display:inline-flex}.why-hero-content h1{color:#fff;margin-bottom:20px;font-size:58px;font-weight:800;line-height:1.1}.why-hero-content h1 strong{background:linear-gradient(135deg,#ff6b35,#ff8a5c);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;position:relative}.why-hero-content h1 strong:after{content:"";background:linear-gradient(135deg,#ff6b35,#ff8a5c);border-radius:2px;width:100%;height:3px;animation:3s ease-in-out infinite expandLine;position:absolute;bottom:-5px;left:0}.why-hero-content p{color:#ffffffb3;max-width:500px;margin-bottom:30px;font-size:18px;line-height:1.8}.hero-buttons{flex-wrap:wrap;gap:15px;display:flex}.why-hero-button{color:#fff;background:linear-gradient(135deg,#ff6b35,#e55a2b);border-radius:50px;align-items:center;gap:10px;padding:16px 35px;font-weight:700;text-decoration:none;transition:all .3s;display:inline-flex;position:relative;overflow:hidden;box-shadow:0 4px 25px #ff6b3566}.why-hero-button:before{content:"";background:linear-gradient(90deg,#0000,#fff3,#0000);width:100%;height:100%;transition:left .5s;position:absolute;top:0;left:-100%}.why-hero-button:hover:before{left:100%}.why-hero-button:hover{transform:translateY(-3px)scale(1.03);box-shadow:0 8px 35px #ff6b3599}.why-hero-button-secondary{color:#fff;background:#ffffff14;border:2px solid #ffffff26;border-radius:50px;align-items:center;gap:10px;padding:16px 30px;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex}.why-hero-button-secondary:hover{background:#ffffff26;border-color:#ff6b35;transform:translateY(-3px)}.why-stats{z-index:3;margin-top:-40px;padding:0 20px;position:relative}.stats-grid{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#ffffff0d;border:1px solid #ffffff14;border-radius:20px;grid-template-columns:repeat(4,1fr);gap:20px;max-width:1100px;margin:0 auto;padding:30px;animation:1s ease-out .3s both slideUp;display:grid;box-shadow:0 20px 60px #0000004d}.stat-card{text-align:center;padding:15px;transition:all .3s}.stat-card:hover{transform:scale(1.05)}.stat-card strong{background:linear-gradient(135deg,#ff6b35,#ff8a5c);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:36px;font-weight:800;display:block}.stat-card span{color:#fff9;font-size:14px;font-weight:500}.why-intro{background:#0f0c29;padding:100px 20px}.why-heading{text-align:center;max-width:750px;margin:0 auto 60px}.why-heading span{color:#ff6b35;letter-spacing:3px;margin-bottom:10px;font-size:13px;font-weight:700;display:block}.why-heading h2{color:#fff;margin-bottom:15px;font-size:42px;font-weight:800}.why-heading h2 strong{background:linear-gradient(135deg,#ff6b35,#ff8a5c);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.why-heading p{color:#fff9;font-size:17px;line-height:1.8}.why-reasons-grid{grid-template-columns:repeat(3,1fr);gap:30px;max-width:1200px;margin:0 auto;display:grid}.why-reason-card{background:#ffffff08;border:1px solid #ffffff0d;border-radius:20px;padding:35px 30px;transition:all .4s;position:relative;overflow:hidden}.why-reason-card:before{content:"";transform-origin:0;background:linear-gradient(90deg,#ff6b35,#ff8a5c);width:100%;height:4px;transition:transform .4s;position:absolute;top:0;left:0;transform:scaleX(0)}.why-reason-card:hover:before{transform:scaleX(1)}.why-reason-card:hover{background:#ff6b350d;border-color:#ff6b3526;transform:translateY(-10px);box-shadow:0 20px 60px #ff6b3514}.why-reason-icon{background:#ff6b351a;border-radius:16px;justify-content:center;align-items:center;width:60px;height:60px;margin-bottom:18px;transition:all .4s;display:flex}.why-reason-card:hover .why-reason-icon{background:#ff6b3533;transform:rotateY(180deg)}.why-reason-icon svg{color:#ff6b35}.why-reason-card h3{color:#fff;margin-bottom:10px;font-size:20px;font-weight:700}.why-reason-card p{color:#ffffff80;margin-bottom:18px;font-size:15px;line-height:1.7}.why-card-bottom{color:#ff6b35;align-items:center;gap:8px;font-size:14px;font-weight:600;display:flex}.why-card-bottom svg{color:#ff6b35}.why-image-showcase{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:80px 20px}.section-header{text-align:center;margin-bottom:50px}.section-header span{color:#ff6b35;letter-spacing:3px;margin-bottom:8px;font-size:13px;font-weight:700;display:block}.section-header h2{color:#fff;font-size:38px;font-weight:800}.image-showcase-grid{grid-template-rows:auto auto;grid-template-columns:2fr 1fr 1fr;gap:20px;max-width:1200px;margin:0 auto;display:grid}.showcase-item{text-align:center;background-position:50%;background-repeat:no-repeat;background-size:cover;border:1px solid #ffffff0d;border-radius:20px;justify-content:center;align-items:center;min-height:200px;padding:40px 30px;transition:all .4s;display:flex;position:relative;overflow:hidden}.showcase-overlay{z-index:1;background:linear-gradient(135deg,#0f0c29d9,#1e1b4be6);width:100%;height:100%;transition:all .4s;position:absolute;top:0;left:0}.showcase-item:hover .showcase-overlay{background:linear-gradient(135deg,#ff6b354d,#0f0c29d9)}.showcase-item:before{content:"";z-index:1;background:radial-gradient(circle,#ff6b351a,#0000);width:100%;height:100%;transition:all .5s;position:absolute;top:-50%;right:-50%}.showcase-item:hover:before{transform:scale(1.5)}.showcase-item:hover{border-color:#ff6b354d;transform:translateY(-5px)scale(1.02);box-shadow:0 15px 50px #ff6b3526}.showcase-large{grid-row:span 2;min-height:420px}.showcase-content{z-index:2;position:relative}.showcase-content svg{color:#ff6b35;margin-bottom:15px;transition:all .4s}.showcase-item:hover .showcase-content svg{transform:scale(1.2)rotate(10deg)}.showcase-content h3{color:#fff;margin-bottom:5px;font-size:22px;font-weight:700}.showcase-content p{color:#fff9;font-size:14px}.why-process{background:#0f0c29;padding:100px 20px}.why-process-box{background:#ffffff05;border:1px solid #ffffff0d;border-radius:30px;grid-template-columns:1fr 1fr;align-items:center;gap:60px;max-width:1100px;margin:0 auto;padding:60px;transition:all .4s;display:grid}.why-process-box:hover{border-color:#ff6b351a;box-shadow:0 20px 60px #ff6b350d}.why-process-content span{color:#ff6b35;letter-spacing:3px;margin-bottom:10px;font-size:13px;font-weight:700;display:block}.why-process-content h2{color:#fff;margin-bottom:15px;font-size:38px;font-weight:800}.why-process-content h2 strong{background:linear-gradient(135deg,#ff6b35,#ff8a5c);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.why-process-content>p{color:#ffffff80;margin-bottom:25px;font-size:16px;line-height:1.8}.why-promise-list{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:25px;display:grid}.why-promise-list div{color:#ffffffb3;align-items:center;gap:10px;font-size:14px;display:flex}.why-promise-list div svg{color:#ff6b35;flex-shrink:0}.why-process-button{color:#fff;background:linear-gradient(135deg,#ff6b35,#e55a2b);border-radius:50px;align-items:center;gap:10px;padding:14px 35px;font-weight:600;text-decoration:none;transition:all .3s;display:inline-flex;box-shadow:0 4px 20px #ff6b354d}.why-process-button:hover{transform:translateY(-3px);box-shadow:0 8px 30px #ff6b3580}.why-process-icon{background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:20px;justify-content:center;align-items:center;min-height:350px;padding:40px;display:flex;position:relative;overflow:hidden}.process-icon-overlay{z-index:1;background:#0f0c29b3;width:100%;height:100%;position:absolute;top:0;left:0}.why-process-icon svg{color:#ff6b35;z-index:2;animation:4s ease-in-out infinite float;position:relative}.process-badge{text-align:center;z-index:2;background:linear-gradient(135deg,#ff6b35,#e55a2b);border-radius:20px;padding:20px 25px;animation:2s ease-in-out infinite pulseGlow;position:absolute;bottom:20px;right:20px;box-shadow:0 10px 40px #ff6b354d}.process-badge span{color:#fff;font-size:32px;font-weight:800;display:block}.process-badge small{color:#fffc;font-size:12px}.why-testimonials{background:linear-gradient(135deg,#1a1a2e,#16213e);padding:100px 20px}.testimonial-header{text-align:center;max-width:700px;margin:0 auto 50px}.testimonial-header span{color:#ff6b35;letter-spacing:3px;margin-bottom:10px;font-size:13px;font-weight:700;display:block}.testimonial-header h2{color:#fff;font-size:38px;font-weight:800}.testimonial-grid{grid-template-columns:repeat(3,1fr);gap:30px;max-width:1100px;margin:0 auto;display:grid}.testimonial-card{background:#ffffff08;border:1px solid #ffffff0d;border-radius:20px;padding:35px;transition:all .4s}.testimonial-card:hover{background:#ff6b350d;border-color:#ff6b3526;transform:translateY(-8px);box-shadow:0 20px 60px #ff6b350d}.testimonial-stars{gap:4px;margin-bottom:15px;display:flex}.testimonial-card p{color:#ffffffb3;margin-bottom:18px;font-size:15px;line-height:1.7}.testimonial-author{align-items:center;gap:12px;display:flex}.testimonial-author img{object-fit:cover;border:2px solid rgba(255, * { margin: 0; padding: 0; box-sizing: border-box; } .mission-page { width: 100%; overflow-x: hidden; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; background: #0f0c29; } .mission-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; width: 100%; }  .mission-hero { position: relative; min-height: 80vh; display: flex; align-items: center; background-size: cover; background-position: center; background-repeat: no-repeat; padding: 80px 0; overflow: hidden; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #050f1ef2, #050f1ecc, #050f1e4d); z-index: 1; } .hero-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; } .hero-particles::before { content: ""; position: absolute; width: 200%; height: 200%; background: radial-gradient(circle at 20% 30%, #ff6b350d 0%, transparent 40%), radial-gradient(circle at 80% 70%, #ff6b3508 0%, transparent 35%); animation: floatParticles 20s ease-in-out infinite; } @keyframes floatParticles { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(-20px, 10px) rotate(120deg); } 66% { transform: translate(20px, -10px) rotate(240deg); } } .mission-hero::before { content: ""; position: absolute; top: -30%; right: -10%; width: 50%; height: 150%; background: radial-gradient(circle, #ff6b350f 0%, transparent 70%); animation: rotateGlow 20s linear infinite; z-index: 1; } @keyframes rotateGlow { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } } .mission-hero-content { position: relative; z-index: 2; max-width: 700px; animation: fadeInUp 1.2s ease-out; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .mission-tag { display: inline-flex; align-items: center; gap: 8px; background: #ff6b3526; color: #ff6b35; padding: 10px 24px; border-radius: 50px; font-size: 13px; font-weight: 700; letter-spacing: 2.5px; margin-bottom: 25px; border: 1px solid #ff6b3540; animation: shimmer 3s ease-in-out infinite; backdrop-filter: blur(10px); } @keyframes shimmer { 0%, 100% { box-shadow: 0 0 20px #ff6b351a; } 50% { box-shadow: 0 0 50px #ff6b3533; } } .mission-hero-content h1 { font-size: 56px; font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 20px; } .mission-hero-content h1 strong { background: linear-gradient(135deg, #ff6b35, #ff8a5c, #ffb088); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; } .mission-hero-content h1 strong::after { content: ""; position: absolute; bottom: -8px; left: 0; width: 100%; height: 4px; background: linear-gradient(135deg, #ff6b35, #ff8a5c); border-radius: 2px; animation: expandLine 3s ease-in-out infinite; } @keyframes expandLine { 0%, 100% { width: 0; opacity: 0; } 50% { width: 100%; opacity: 1; } } .mission-hero-content p { font-size: 18px; color: #ffffffbf; line-height: 1.8; margin-bottom: 35px; max-width: 520px; } .mission-actions { display: flex; gap: 18px; flex-wrap: wrap; }  .btn { display: inline-flex; align-items: center; gap: 10px; padding: 17px 38px; border-radius: 50px; font-weight: 700; font-size: 16px; text-decoration: none; transition: all .4s cubic-bezier(.175, .885, .32, 1.275); position: relative; overflow: hidden; cursor: pointer; border: none; } .btn::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: #fff3; transform: translate(-50%, -50%); transition: width .6s ease, height .6s ease; } .btn:active::after { width: 300px; height: 300px; } .btn-primary { background: linear-gradient(135deg, #ff6b35, #e55a2b); color: #fff; box-shadow: 0 6px 30px #ff6b3566; } .btn-primary::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, #ffffff26, transparent); transition: left .6s ease; } .btn-primary:hover::before { left: 100%; } .btn-primary:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 10px 45px #ff6b3599; } .btn-whatsapp { background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; box-shadow: 0 6px 30px #25d36666; } .btn-whatsapp::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, #ffffff26, transparent); transition: left .6s ease; } .btn-whatsapp:hover::before { left: 100%; } .btn-whatsapp:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 10px 45px #25d36699; } .btn-whatsapp-small { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; border-radius: 50px; font-weight: 600; font-size: 14px; text-decoration: none; margin-top: 20px; transition: all .4s cubic-bezier(.175, .885, .32, 1.275); box-shadow: 0 4px 20px #25d3664d; border: none; cursor: pointer; } .btn-whatsapp-small:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 8px 35px #25d36680; }  .mission-stats { padding: 0 20px; margin-top: -50px; position: relative; z-index: 3; } .stats-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; background: #ffffff0a; backdrop-filter: blur(25px); border-radius: 24px; padding: 35px 30px; border: 1px solid #ffffff14; box-shadow: 0 25px 80px #0006; animation: slideUp 1s ease-out .3s both; } @keyframes slideUp { from { opacity: 0; transform: translateY(40px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .stat-card { text-align: center; padding: 18px; transition: all .4s cubic-bezier(.175, .885, .32, 1.275); border-radius: 16px; } .stat-card:hover { transform: translateY(-8px) scale(1.03); } .stat-card strong { display: block; font-size: 40px; font-weight: 900; background: linear-gradient(135deg, #ff6b35, #ff8a5c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 1px; } .stat-card strong::after { content: "+"; font-size: 28px; -webkit-text-fill-color: #ff6b35; opacity: .6; } .stat-card span { color: #fff9; font-size: 14px; font-weight: 500; }  .mission-main { padding: 100px 0; background: #0f0c29; position: relative; } .mission-main::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #ff6b351a, transparent); } .mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .mission-symbol { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; background: #ffffff08; border-radius: 30px; border: 1px solid #ffffff0d; position: relative; transition: all .4s ease; min-height: 450px; } .mission-symbol:hover { border-color: #ff6b3533; box-shadow: 0 20px 60px #ff6b350d; } .symbol-icon { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; background: #ff6b351a; border-radius: 50%; margin-bottom: 20px; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .mission-symbol:hover .symbol-icon { background: #ff6b3533; transform: scale(1.05) rotate(10deg); } .symbol-icon svg { color: #ff6b35; } .mission-symbol > span { color: #ff6b35; font-size: 14px; font-weight: 700; letter-spacing: 3px; } .symbol-badge { position: absolute; bottom: -20px; right: -20px; display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #ff6b35, #e55a2b); padding: 15px 25px; border-radius: 16px; color: #fff; font-weight: 700; box-shadow: 0 10px 40px #ff6b354d; animation: pulseBadge 2s ease-in-out infinite; } @keyframes pulseBadge { 0%, 100% { box-shadow: 0 10px 40px #ff6b354d; } 50% { box-shadow: 0 10px 60px #ff6b3580; } } .mission-content { animation: fadeInRight 1s ease-out; } @keyframes fadeInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } .mission-label { color: #ff6b35; font-size: 13px; font-weight: 700; letter-spacing: 3.5px; display: block; margin-bottom: 12px; text-transform: uppercase; position: relative; padding-left: 20px; } .mission-label::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(135deg, #ff6b35, #ff8a5c); border-radius: 2px; } .mission-content h2 { font-size: 42px; font-weight: 800; color: #fff; margin-bottom: 20px; line-height: 1.15; } .mission-content h2 strong { background: linear-gradient(135deg, #ff6b35, #ff8a5c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .mission-content p { color: #fff9; font-size: 16px; line-height: 1.9; margin-bottom: 16px; } .mission-points { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 25px; } .mission-points div { display: flex; align-items: center; gap: 12px; color: #ffffffbf; font-size: 14px; padding: 12px 16px; background: #ffffff05; border-radius: 12px; border: 1px solid #ffffff08; transition: all .3s ease; } .mission-points div:hover { background: #ff6b350d; border-color: #ff6b351a; transform: translateX(5px); } .mission-points div svg { color: #ff6b35; flex-shrink: 0; }  .mission-values { padding: 100px 0; background: linear-gradient(135deg, #1a1a2e, #16213e); position: relative; } .mission-values::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #ff6b3514, transparent); } .mission-heading { text-align: center; max-width: 700px; margin: 0 auto 60px; } .mission-heading span { color: #ff6b35; font-size: 13px; font-weight: 700; letter-spacing: 3.5px; display: block; margin-bottom: 10px; text-transform: uppercase; } .mission-heading h2 { font-size: 42px; font-weight: 800; color: #fff; margin-bottom: 15px; } .mission-heading h2 strong { background: linear-gradient(135deg, #ff6b35, #ff8a5c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .mission-heading p { color: #ffffff8c; font-size: 17px; line-height: 1.8; } .mission-value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .mission-value-card { background: #ffffff08; padding: 40px 25px 30px; border-radius: 22px; border: 1px solid #ffffff0d; text-align: center; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); position: relative; overflow: hidden; } .mission-value-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #ff6b35, #ff8a5c); transform: scaleX(0); transform-origin: left; transition: transform .5s ease; } .mission-value-card:hover::before { transform: scaleX(1); } .mission-value-card:hover { transform: translateY(-12px); background: #ff6b350d; border-color: #ff6b3526; box-shadow: 0 25px 70px #ff6b3514; } .value-icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; background: #ff6b351a; border-radius: 50%; margin: 0 auto 18px; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .mission-value-card:hover .value-icon { background: #ff6b3533; transform: rotateY(180deg); } .value-icon svg { color: #ff6b35; } .mission-value-card h3 { color: #fff; font-size: 20px; font-weight: 700; margin-bottom: 10px; } .mission-value-card p { color: #ffffff80; font-size: 14px; line-height: 1.7; margin-bottom: 18px; } .value-check { display: flex; align-items: center; justify-content: center; gap: 8px; color: #ff6b35; font-size: 13px; font-weight: 600; opacity: 0; transition: all .4s ease; } .mission-value-card:hover .value-check { opacity: 1; } .value-check svg { color: #ff6b35; }  .mission-image-showcase { padding: 80px 0; background: #0f0c29; } .showcase-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 20px; } .showcase-item { position: relative; border-radius: 24px; overflow: hidden; min-height: 300px; background-size: cover; background-position: center; background-repeat: no-repeat; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); cursor: pointer; } .showcase-item:hover { transform: scale(1.02); box-shadow: 0 20px 60px #ff6b351a; } .showcase-large { min-height: 620px; } .showcase-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #0f0c29d9, #0f0c2999); transition: all .5s ease; } .showcase-item:hover .showcase-overlay { background: linear-gradient(135deg, #ff6b354d, #0f0c29cc); } .showcase-content { position: absolute; bottom: 30px; left: 30px; right: 30px; z-index: 2; color: #fff; } .showcase-content svg { color: #ff6b35; margin-bottom: 12px; transition: all .4s ease; } .showcase-item:hover .showcase-content svg { transform: scale(1.1) rotate(10deg); } .showcase-content h3 { font-size: 22px; font-weight: 700; margin-bottom: 4px; } .showcase-content p { color: #fff9; font-size: 14px; }  .mission-cta { padding: 90px 0; background: linear-gradient(135deg, #ff6b35, #e55a2b, #c44a1f); position: relative; overflow: hidden; } .mission-cta::before { content: ""; position: absolute; top: -50%; right: -10%; width: 50%; height: 200%; background: #ffffff08; transform: rotate(20deg); } .mission-cta::after { content: ""; position: absolute; bottom: -40%; left: -5%; width: 40%; height: 150%; background: #ffffff05; transform: rotate(-15deg); } .mission-cta .mission-container { display: flex; justify-content: space-between; align-items: center; gap: 50px; position: relative; z-index: 2; } .cta-content-wrapper { display: flex; align-items: center; gap: 30px; } .cta-icon-wrapper { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; background: #ffffff26; border-radius: 20px; color: #fff; flex-shrink: 0; border: 1px solid #ffffff1a; transition: all .4s ease; } .cta-content-wrapper:hover .cta-icon-wrapper { transform: rotate(15deg) scale(1.05); background: #fff3; } .cta-content-wrapper div span { display: block; font-size: 13px; font-weight: 700; letter-spacing: 3.5px; color: #ffffffb3; margin-bottom: 6px; } .cta-content-wrapper div h2 { font-size: 34px; font-weight: 800; color: #fff; margin-bottom: 6px; } .cta-content-wrapper div h2 strong { color: #fff; text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; text-decoration-color: #ffffff4d; } .cta-content-wrapper div p { color: #fffc; font-size: 16px; } .cta-actions-wrapper { display: flex; gap: 18px; flex-wrap: wrap; flex-shrink: 0; } .cta-actions-wrapper .btn-primary { background: #fff; color: #ff6b35; box-shadow: 0 6px 30px #0003; } .cta-actions-wrapper .btn-primary:hover { box-shadow: 0 10px 45px #00000059; } .cta-actions-wrapper .btn-whatsapp { background: #ffffff26; border: 2px solid #fff3; } .cta-actions-wrapper .btn-whatsapp:hover { background: #25d366; border-color: #25d366; box-shadow: 0 8px 35px #25d36680; }  @media (max-width: 1024px) { .mission-hero-content h1 { font-size: 42px; } .mission-grid { grid-template-columns: 1fr; gap: 50px; } .mission-value-grid { grid-template-columns: repeat(2, 1fr); } .showcase-grid { grid-template-columns: 1fr 1fr; } .showcase-large { grid-column: span 2; min-height: 400px; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .mission-cta .mission-container { flex-direction: column; text-align: center; } .cta-content-wrapper { flex-direction: column; text-align: center; } .cta-actions-wrapper { justify-content: center; } } @media (max-width: 768px) { .mission-hero { min-height: 70vh; padding: 60px 0; } .mission-hero-content h1 { font-size: 34px; } .mission-hero-content p { font-size: 16px; } .mission-content h2 { font-size: 32px; } .mission-heading h2 { font-size: 32px; } .mission-value-grid { grid-template-columns: 1fr 1fr; gap: 20px; } .mission-points { grid-template-columns: 1fr; } .showcase-grid { grid-template-columns: 1fr; } .showcase-large { grid-column: span 1; min-height: 300px; } .stats-grid { grid-template-columns: 1fr 1fr; gap: 15px; padding: 25px; } .stat-card strong { font-size: 30px; } .cta-content-wrapper div h2 { font-size: 28px; } .mission-actions { justify-content: center; } .btn { padding: 14px 28px; font-size: 14px; } .mission-symbol { min-height: 300px; padding: 30px; } .symbol-icon { width: 90px; height: 90px; } .symbol-icon svg { width: 50px; height: 50px; } } @media (max-width: 480px) { .mission-hero-content h1 { font-size: 28px; } .mission-tag { font-size: 11px; padding: 8px 16px; } .btn { padding: 12px 22px; font-size: 13px; } .mission-value-grid { grid-template-columns: 1fr; } .mission-content h2 { font-size: 26px; } .mission-heading h2 { font-size: 26px; } .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px; } .stat-card strong { font-size: 24px; } .stat-card span { font-size: 12px; } .cta-content-wrapper div h2 { font-size: 24px; } .mission-actions { flex-direction: column; align-items: center; } .btn { width: 100%; justify-content: center; } .cta-actions-wrapper { flex-direction: column; width: 100%; } .cta-actions-wrapper .btn { width: 100%; justify-content: center; } .mission-cta .mission-container { padding: 0 15px; } .symbol-badge { padding: 10px 18px; font-size: 12px; bottom: -15px; right: -10px; } .showcase-content h3 { font-size: 18px; } }.vision-page { width: 100%; background: #fff; color: #222; font-family: Arial, Helvetica, sans-serif; } .vision-container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; } .vision-hero { min-height: 420px; display: flex; align-items: center; background: linear-gradient(115deg, #ffd21c, #ffe36d); } .vision-hero-content { max-width: 720px; padding: 80px 0; } .vision-hero-content > span, .vision-content > span, .vision-heading > span, .vision-future-box span { color: #ed2933; font-size: 11px; font-weight: 800; letter-spacing: 1.8px; } .vision-hero h1 { margin: 15px 0 20px; color: #181b24; font-size: clamp(42px, 5vw, 62px); line-height: 1.1; } .vision-hero h1 strong, .vision-content h2 strong, .vision-heading h2 strong, .vision-future-box h2 strong { color: #ed2933; } .vision-hero p { max-width: 650px; margin: 0; color: #444; font-size: 16px; line-height: 1.8; } .vision-hero a { margin-top: 28px; min-height: 48px; padding: 0 21px; display: inline-flex; align-items: center; gap: 8px; border-radius: 5px; background: #ed2933; color: #fff; text-decoration: none; font-size: 14px; font-weight: 700; } .vision-main { padding: 100px 0; } .vision-grid { display: grid; grid-template-columns: 1fr 350px; align-items: center; gap: 75px; } .vision-content h2 { margin: 10px 0 20px; color: #181b24; font-size: 43px; line-height: 1.2; } .vision-content p { margin: 0 0 15px; color: #707070; font-size: 15px; line-height: 1.85; } .vision-points { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .vision-points div { display: flex; align-items: center; gap: 9px; color: #333; font-size: 14px; font-weight: 600; } .vision-points svg { color: #ed2933; flex-shrink: 0; } .vision-symbol { width: 300px; height: 300px; margin-left: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: #ffd21c; color: #ed2933; box-shadow: 0 20px 45px #ffd21c40; } .vision-symbol span { margin-top: 18px; color: #222; font-size: 12px; font-weight: 800; letter-spacing: 2px; } .vision-pillars { padding: 90px 0; background: #f7f8fa; } .vision-heading { margin-bottom: 45px; text-align: center; } .vision-heading h2 { margin: 10px 0 0; color: #181b24; font-size: 42px; } .vision-pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .vision-card { padding: 35px 25px; text-align: center; background: #fff; border: 1px solid #e5e5e5; border-radius: 10px; transition: .25s ease; } .vision-card:hover { border-color: #ed2933; transform: translateY(-5px); box-shadow: 0 15px 35px #00000012; } .vision-card > svg { color: #ed2933; } .vision-card h3 { margin: 17px 0 10px; font-size: 18px; } .vision-card p { margin: 0; color: #707070; font-size: 14px; line-height: 1.7; } .vision-future { padding: 80px 0; background: #fff; } .vision-future-box { padding: 50px; display: flex; align-items: center; justify-content: space-between; gap: 30px; border-radius: 14px; background: #ed2933; } .vision-future-box span { color: #ffd21c; } .vision-future-box h2 { margin: 10px 0; color: #fff; font-size: 36px; } .vision-future-box p { margin: 0; color: #ffffffd9; font-size: 14px; } .vision-future-box a { min-height: 48px; padding: 0 22px; display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; border-radius: 5px; background: #ffd21c; color: #222; text-decoration: none; font-size: 14px; font-weight: 700; } @media (max-width: 850px) { .vision-grid { grid-template-columns: 1fr; text-align: center; } .vision-symbol { margin: 20px auto 0; } .vision-pillar-grid { grid-template-columns: 1fr; } .vision-future-box { flex-direction: column; text-align: center; } } @media (max-width: 600px) { .vision-container { padding: 0 18px; } .vision-hero-content { padding: 65px 0; text-align: center; } .vision-hero h1 { font-size: 40px; } .vision-main, .vision-pillars, .vision-future { padding: 70px 0; } .vision-content h2, .vision-heading h2 { font-size: 32px; } .vision-points { grid-template-columns: 1fr; text-align: left; } .vision-symbol { width: 220px; height: 220px; } .vision-future-box { padding: 35px 25px; } .vision-future-box h2 { font-size: 30px; } .vision-future-box a { width: 100%; justify-content: center; } } * { margin: 0; padding: 0; box-sizing: border-box; } .service-page { width: 100%; overflow-x: hidden; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; background: #0f0c29; } .service-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; width: 100%; } .service-hero { position: relative; min-height: 80vh; display: flex; align-items: center; background-size: cover; background-position: center; background-repeat: no-repeat; padding: 80px 0; overflow: hidden; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #050f1ef2, #050f1ecc, #050f1e4d); z-index: 1; } .hero-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; } .hero-particles::before { content: ""; position: absolute; width: 200%; height: 200%; background: radial-gradient(circle at 20% 30%, #ff6b350d 0%, transparent 40%), radial-gradient(circle at 80% 70%, #ff6b3508 0%, transparent 35%); animation: floatParticles 20s ease-in-out infinite; } @keyframes floatParticles { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(-20px, 10px) rotate(120deg); } 66% { transform: translate(20px, -10px) rotate(240deg); } } .service-hero::before { content: ""; position: absolute; top: -30%; right: -10%; width: 50%; height: 150%; background: radial-gradient(circle, #ff6b350f 0%, transparent 70%); animation: rotateGlow 20s linear infinite; z-index: 1; } @keyframes rotateGlow { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } } .service-hero-content { position: relative; z-index: 2; max-width: 700px; animation: fadeInUp 1.2s ease-out; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .service-tag { display: inline-flex; align-items: center; gap: 8px; background: #ff6b3526; color: #ff6b35; padding: 10px 24px; border-radius: 50px; font-size: 13px; font-weight: 700; letter-spacing: 2.5px; margin-bottom: 25px; border: 1px solid #ff6b3540; animation: shimmer 3s ease-in-out infinite; backdrop-filter: blur(10px); } @keyframes shimmer { 0%, 100% { box-shadow: 0 0 20px #ff6b351a; } 50% { box-shadow: 0 0 50px #ff6b3533; } } .service-hero-content h1 { font-size: 56px; font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 20px; } .service-hero-content h1 span { background: linear-gradient(135deg, #ff6b35, #ff8a5c, #ffb088); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; } .service-hero-content h1 span::after { content: ""; position: absolute; bottom: -8px; left: 0; width: 100%; height: 4px; background: linear-gradient(135deg, #ff6b35, #ff8a5c); border-radius: 2px; animation: expandLine 3s ease-in-out infinite; } @keyframes expandLine { 0%, 100% { width: 0; opacity: 0; } 50% { width: 100%; opacity: 1; } } .service-hero-content p { font-size: 18px; color: #ffffffbf; line-height: 1.8; margin-bottom: 35px; max-width: 520px; } .service-actions { display: flex; gap: 18px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 17px 38px; border-radius: 50px; font-weight: 700; font-size: 16px; text-decoration: none; transition: all .4s cubic-bezier(.175, .885, .32, 1.275); position: relative; overflow: hidden; cursor: pointer; border: none; } .btn::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: #fff3; transform: translate(-50%, -50%); transition: width .6s ease, height .6s ease; } .btn:active::after { width: 300px; height: 300px; } .btn-primary { background: linear-gradient(135deg, #ff6b35, #e55a2b); color: #fff; box-shadow: 0 6px 30px #ff6b3566; } .btn-primary::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, #ffffff26, transparent); transition: left .6s ease; } .btn-primary:hover::before { left: 100%; } .btn-primary:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 10px 45px #ff6b3599; } .btn-whatsapp { background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; box-shadow: 0 6px 30px #25d36666; } .btn-whatsapp::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, #ffffff26, transparent); transition: left .6s ease; } .btn-whatsapp:hover::before { left: 100%; } .btn-whatsapp:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 10px 45px #25d36699; } .btn-whatsapp-small { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; border-radius: 50px; font-weight: 600; font-size: 14px; text-decoration: none; margin-top: 20px; transition: all .4s cubic-bezier(.175, .885, .32, 1.275); box-shadow: 0 4px 20px #25d3664d; border: none; cursor: pointer; } .btn-whatsapp-small:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 8px 35px #25d36680; } .service-stats { padding: 0 20px; margin-top: -50px; position: relative; z-index: 3; } .stats-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; background: #ffffff0a; backdrop-filter: blur(25px); border-radius: 24px; padding: 35px 30px; border: 1px solid #ffffff14; box-shadow: 0 25px 80px #0006; animation: slideUp 1s ease-out .3s both; } @keyframes slideUp { from { opacity: 0; transform: translateY(40px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .stat-card { text-align: center; padding: 18px; transition: all .4s cubic-bezier(.175, .885, .32, 1.275); border-radius: 16px; } .stat-card:hover { transform: translateY(-8px) scale(1.03); } .stat-card strong { display: block; font-size: 40px; font-weight: 900; background: linear-gradient(135deg, #ff6b35, #ff8a5c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 1px; } .stat-card span { color: #fff9; font-size: 14px; font-weight: 500; } .service-about { padding: 100px 0; background: #0f0c29; position: relative; } .service-about::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #ff6b351a, transparent); } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .about-image { position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 25px 70px #0006; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .about-image:hover { transform: scale(1.03); box-shadow: 0 35px 90px #ff6b3526; } .about-image img { width: 100%; height: 450px; object-fit: cover; display: block; transition: all .6s cubic-bezier(.175, .885, .32, 1.275); } .about-image:hover img { transform: scale(1.08); } .about-badge { position: absolute; bottom: 25px; right: 25px; display: flex; align-items: center; gap: 15px; background: #0f0c29eb; backdrop-filter: blur(15px); padding: 20px 25px; border-radius: 18px; border: 1px solid #ffffff0f; color: #fff; transition: all .4s ease; } .about-image:hover .about-badge { background: #ff6b3526; border-color: #ff6b3533; } .about-badge svg { color: #ff6b35; } .about-badge strong { display: block; font-size: 18px; } .about-badge span { color: #ffffff80; font-size: 13px; } .about-content { animation: fadeInRight 1s ease-out; } @keyframes fadeInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } .section-label { color: #ff6b35; font-size: 13px; font-weight: 700; letter-spacing: 3.5px; display: block; margin-bottom: 12px; text-transform: uppercase; position: relative; padding-left: 20px; } .section-label::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(135deg, #ff6b35, #ff8a5c); border-radius: 2px; } .about-content h2 { font-size: 40px; font-weight: 800; color: #fff; margin-bottom: 20px; line-height: 1.15; } .about-content h2 strong { background: linear-gradient(135deg, #ff6b35, #ff8a5c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .about-content p { color: #fff9; font-size: 16px; line-height: 1.9; margin-bottom: 16px; } .benefits-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; } .benefits-list div { display: flex; align-items: center; gap: 10px; color: #ffffffbf; font-size: 14px; padding: 10px 14px; background: #ffffff05; border-radius: 12px; border: 1px solid #ffffff08; transition: all .3s ease; } .benefits-list div:hover { background: #ff6b350d; border-color: #ff6b351a; transform: translateX(5px); } .benefits-list div svg { color: #ff6b35; flex-shrink: 0; } .service-features-section { padding: 100px 0; background: linear-gradient(135deg, #1a1a2e, #16213e); position: relative; } .service-features-section::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #ff6b3514, transparent); } .section-heading { text-align: center; max-width: 750px; margin: 0 auto 60px; } .section-heading span { color: #ff6b35; font-size: 13px; font-weight: 700; letter-spacing: 3.5px; display: block; margin-bottom: 10px; text-transform: uppercase; } .section-heading h2 { font-size: 42px; font-weight: 800; color: #fff; margin-bottom: 15px; } .section-heading h2 strong { background: linear-gradient(135deg, #ff6b35, #ff8a5c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .section-heading p { color: #ffffff8c; font-size: 17px; line-height: 1.8; } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .feature-card { background: #ffffff08; padding: 35px 25px; border-radius: 22px; border: 1px solid #ffffff0d; text-align: center; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); position: relative; overflow: hidden; } .feature-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #ff6b35, #ff8a5c); transform: scaleX(0); transform-origin: left; transition: transform .5s ease; } .feature-card:hover::before { transform: scaleX(1); } .feature-card:hover { transform: translateY(-12px); background: #ff6b350d; border-color: #ff6b3526; box-shadow: 0 25px 70px #ff6b3514; } .feature-icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin: 0 auto 18px; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .feature-card:hover .feature-icon { transform: rotateY(180deg); } .feature-card h3 { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 10px; } .feature-card p { color: #ffffff80; font-size: 14px; line-height: 1.7; margin-bottom: 15px; } .feature-check { display: flex; align-items: center; justify-content: center; gap: 6px; color: #25d366; font-size: 13px; font-weight: 600; } .feature-check svg { color: #25d366; } .service-gallery { padding: 100px 0; background: #0f0c29; } .gallery-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; gap: 20px; } .gallery-item { position: relative; border-radius: 22px; overflow: hidden; min-height: 260px; background-size: cover; background-position: center; background-repeat: no-repeat; cursor: pointer; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .gallery-item:hover { transform: scale(1.03); box-shadow: 0 20px 60px #ff6b351a; } .gallery-large { grid-row: span 2; min-height: 540px; } .gallery-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #0f0c29d9, #0f0c2999); transition: all .5s ease; display: flex; align-items: center; justify-content: center; opacity: .8; } .gallery-item:hover .gallery-overlay { background: linear-gradient(135deg, #ff6b354d, #0f0c29cc); opacity: 1; } .gallery-content { text-align: center; color: #fff; transform: scale(.9); transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .gallery-item:hover .gallery-content { transform: scale(1); } .gallery-content svg { color: #ff6b35; margin-bottom: 12px; } .gallery-content h3 { font-size: 20px; font-weight: 700; margin-bottom: 4px; } .gallery-content p { color: #fff9; font-size: 14px; } .service-process { padding: 100px 0; background: linear-gradient(135deg, #1a1a2e, #16213e); position: relative; } .service-process::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #ff6b3514, transparent); } .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .process-card { background: #ffffff08; padding: 35px 25px; border-radius: 22px; border: 1px solid #ffffff0d; text-align: center; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); position: relative; } .process-card:hover { transform: translateY(-12px); background: #ff6b350d; border-color: #ff6b3526; box-shadow: 0 25px 70px #ff6b3514; } .process-number { display: inline-block; font-size: 48px; font-weight: 900; background: linear-gradient(135deg, #ff6b35, #ff8a5c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; opacity: .15; margin-bottom: 10px; transition: all .4s ease; } .process-card:hover .process-number { opacity: .4; transform: scale(1.1); } .process-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: #ff6b351a; border-radius: 50%; margin: 0 auto 15px; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .process-card:hover .process-icon { background: #ff6b3533; transform: rotateY(180deg); } .process-icon svg { color: #ff6b35; } .process-card h3 { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 8px; } .process-card p { color: #ffffff80; font-size: 14px; line-height: 1.6; } .process-arrow { position: absolute; right: -15px; top: 50%; transform: translateY(-50%); color: #ff6b35; opacity: .3; } .process-card:last-child .process-arrow { display: none; } .service-cta { padding: 90px 0; background: linear-gradient(135deg, #ff6b35, #e55a2b, #c44a1f); position: relative; overflow: hidden; } .service-cta::before { content: ""; position: absolute; top: -50%; right: -10%; width: 50%; height: 200%; background: #ffffff08; transform: rotate(20deg); } .service-cta::after { content: ""; position: absolute; bottom: -40%; left: -5%; width: 40%; height: 150%; background: #ffffff05; transform: rotate(-15deg); } .cta-wrapper { display: flex; justify-content: space-between; align-items: center; gap: 50px; position: relative; z-index: 2; } .cta-content { display: flex; align-items: center; gap: 30px; } .cta-icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; background: #ffffff26; border-radius: 20px; color: #fff; flex-shrink: 0; border: 1px solid #ffffff1a; transition: all .4s ease; } .cta-content:hover .cta-icon { transform: rotate(15deg) scale(1.05); background: #fff3; } .cta-content div span { display: block; font-size: 13px; font-weight: 700; letter-spacing: 3.5px; color: #ffffffb3; margin-bottom: 6px; } .cta-content div h2 { font-size: 32px; font-weight: 800; color: #fff; margin-bottom: 6px; } .cta-content div h2 strong { color: #fff; text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; text-decoration-color: #ffffff4d; } .cta-content div p { color: #fffc; font-size: 16px; } .cta-actions { display: flex; gap: 18px; flex-wrap: wrap; flex-shrink: 0; } .cta-actions .btn-primary { background: #fff; color: #ff6b35; box-shadow: 0 6px 30px #0003; } .cta-actions .btn-primary:hover { box-shadow: 0 10px 45px #00000059; } .cta-actions .btn-whatsapp { background: #ffffff26; border: 2px solid #fff3; } .cta-actions .btn-whatsapp:hover { background: #25d366; border-color: #25d366; box-shadow: 0 8px 35px #25d36680; } @media (max-width: 1024px) { .service-hero-content h1 { font-size: 42px; } .about-grid { grid-template-columns: 1fr; gap: 50px; } .features-grid { grid-template-columns: repeat(2, 1fr); } .process-grid { grid-template-columns: repeat(2, 1fr); } .gallery-grid { grid-template-columns: 1fr 1fr; } .gallery-large { grid-column: span 2; min-height: 400px; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .cta-wrapper { flex-direction: column; text-align: center; } .cta-content { flex-direction: column; text-align: center; } .cta-actions { justify-content: center; } } @media (max-width: 768px) { .service-hero { min-height: 70vh; padding: 60px 0; } .service-hero-content h1 { font-size: 34px; } .service-hero-content p { font-size: 16px; } .about-content h2 { font-size: 32px; } .section-heading h2 { font-size: 32px; } .features-grid { grid-template-columns: 1fr; } .process-grid { grid-template-columns: 1fr 1fr; } .gallery-grid { grid-template-columns: 1fr; } .gallery-large { grid-column: span 1; min-height: 300px; } .benefits-list { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr 1fr; gap: 15px; padding: 25px; } .stat-card strong { font-size: 30px; } .cta-content div h2 { font-size: 28px; } .service-actions { justify-content: center; } .btn { padding: 14px 28px; font-size: 14px; } .process-arrow { display: none; } } @media (max-width: 480px) { .service-hero-content h1 { font-size: 28px; } .service-tag { font-size: 11px; padding: 8px 16px; } .btn { padding: 12px 22px; font-size: 13px; } .features-grid { grid-template-columns: 1fr; } .process-grid { grid-template-columns: 1fr; } .about-content h2 { font-size: 26px; } .section-heading h2 { font-size: 26px; } .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px; } .stat-card strong { font-size: 24px; } .stat-card span { font-size: 12px; } .cta-content div h2 { font-size: 24px; } .service-actions { flex-direction: column; align-items: center; } .btn { width: 100%; justify-content: center; } .cta-actions { flex-direction: column; width: 100%; } .cta-actions .btn { width: 100%; justify-content: center; } .about-badge { padding: 12px 18px; right: 15px; bottom: 15px; } .about-badge strong { font-size: 14px; } .gallery-content h3 { font-size: 16px; } } * { margin: 0; padding: 0; box-sizing: border-box; } .office-page { width: 100%; overflow-x: hidden; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; background: #0f0c29; } .office-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; width: 100%; } .office-hero { position: relative; min-height: 80vh; display: flex; align-items: center; background-size: cover; background-position: center; background-repeat: no-repeat; padding: 80px 0; overflow: hidden; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #050f1ef2, #050f1ecc, #050f1e4d); z-index: 1; } .hero-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; } .hero-particles::before { content: ""; position: absolute; width: 200%; height: 200%; background: radial-gradient(circle at 20% 30%, #ff6b350d 0%, transparent 40%), radial-gradient(circle at 80% 70%, #ff6b3508 0%, transparent 35%); animation: floatParticles 20s ease-in-out infinite; } @keyframes floatParticles { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(-20px, 10px) rotate(120deg); } 66% { transform: translate(20px, -10px) rotate(240deg); } } .office-hero::before { content: ""; position: absolute; top: -30%; right: -10%; width: 50%; height: 150%; background: radial-gradient(circle, #ff6b350f 0%, transparent 70%); animation: rotateGlow 20s linear infinite; z-index: 1; } @keyframes rotateGlow { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } } .office-hero-content { position: relative; z-index: 2; max-width: 700px; animation: fadeInUp 1.2s ease-out; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .office-tag { display: inline-flex; align-items: center; gap: 8px; background: #ff6b3526; color: #ff6b35; padding: 10px 24px; border-radius: 50px; font-size: 13px; font-weight: 700; letter-spacing: 2.5px; margin-bottom: 25px; border: 1px solid #ff6b3540; animation: shimmer 3s ease-in-out infinite; backdrop-filter: blur(10px); } @keyframes shimmer { 0%, 100% { box-shadow: 0 0 20px #ff6b351a; } 50% { box-shadow: 0 0 50px #ff6b3533; } } .office-hero-content h1 { font-size: 56px; font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 20px; } .office-hero-content h1 span { background: linear-gradient(135deg, #ff6b35, #ff8a5c, #ffb088); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; } .office-hero-content h1 span::after { content: ""; position: absolute; bottom: -8px; left: 0; width: 100%; height: 4px; background: linear-gradient(135deg, #ff6b35, #ff8a5c); border-radius: 2px; animation: expandLine 3s ease-in-out infinite; } @keyframes expandLine { 0%, 100% { width: 0; opacity: 0; } 50% { width: 100%; opacity: 1; } } .office-hero-content p { font-size: 18px; color: #ffffffbf; line-height: 1.8; margin-bottom: 35px; max-width: 520px; } .office-actions { display: flex; gap: 18px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 17px 38px; border-radius: 50px; font-weight: 700; font-size: 16px; text-decoration: none; transition: all .4s cubic-bezier(.175, .885, .32, 1.275); position: relative; overflow: hidden; cursor: pointer; border: none; } .btn::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: #fff3; transform: translate(-50%, -50%); transition: width .6s ease, height .6s ease; } .btn:active::after { width: 300px; height: 300px; } .btn-primary { background: linear-gradient(135deg, #ff6b35, #e55a2b); color: #fff; box-shadow: 0 6px 30px #ff6b3566; } .btn-primary::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, #ffffff26, transparent); transition: left .6s ease; } .btn-primary:hover::before { left: 100%; } .btn-primary:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 10px 45px #ff6b3599; } .btn-whatsapp { background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; box-shadow: 0 6px 30px #25d36666; } .btn-whatsapp::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, #ffffff26, transparent); transition: left .6s ease; } .btn-whatsapp:hover::before { left: 100%; } .btn-whatsapp:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 10px 45px #25d36699; } .btn-whatsapp-small { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; border-radius: 50px; font-weight: 600; font-size: 14px; text-decoration: none; margin-top: 20px; transition: all .4s cubic-bezier(.175, .885, .32, 1.275); box-shadow: 0 4px 20px #25d3664d; border: none; cursor: pointer; } .btn-whatsapp-small:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 8px 35px #25d36680; } .office-stats { padding: 0 20px; margin-top: -50px; position: relative; z-index: 3; } .stats-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; background: #ffffff0a; backdrop-filter: blur(25px); border-radius: 24px; padding: 35px 30px; border: 1px solid #ffffff14; box-shadow: 0 25px 80px #0006; animation: slideUp 1s ease-out .3s both; } @keyframes slideUp { from { opacity: 0; transform: translateY(40px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .stat-card { text-align: center; padding: 18px; transition: all .4s cubic-bezier(.175, .885, .32, 1.275); border-radius: 16px; } .stat-card:hover { transform: translateY(-8px) scale(1.03); } .stat-card strong { display: block; font-size: 40px; font-weight: 900; background: linear-gradient(135deg, #ff6b35, #ff8a5c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 1px; } .stat-card span { color: #fff9; font-size: 14px; font-weight: 500; } .office-about { padding: 100px 0; background: #0f0c29; position: relative; } .office-about::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #ff6b351a, transparent); } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .about-image { position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 25px 70px #0006; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .about-image:hover { transform: scale(1.03); box-shadow: 0 35px 90px #ff6b3526; } .about-image img { width: 100%; height: 450px; object-fit: cover; display: block; transition: all .6s cubic-bezier(.175, .885, .32, 1.275); } .about-image:hover img { transform: scale(1.08); } .about-badge { position: absolute; bottom: 25px; right: 25px; display: flex; align-items: center; gap: 15px; background: #0f0c29eb; backdrop-filter: blur(15px); padding: 20px 25px; border-radius: 18px; border: 1px solid #ffffff0f; color: #fff; transition: all .4s ease; } .about-image:hover .about-badge { background: #ff6b3526; border-color: #ff6b3533; } .about-badge svg { color: #ff6b35; } .about-badge strong { display: block; font-size: 18px; } .about-badge span { color: #ffffff80; font-size: 13px; } .about-content { animation: fadeInRight 1s ease-out; } @keyframes fadeInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } .section-label { color: #ff6b35; font-size: 13px; font-weight: 700; letter-spacing: 3.5px; display: block; margin-bottom: 12px; text-transform: uppercase; position: relative; padding-left: 20px; } .section-label::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(135deg, #ff6b35, #ff8a5c); border-radius: 2px; } .about-content h2 { font-size: 40px; font-weight: 800; color: #fff; margin-bottom: 20px; line-height: 1.15; } .about-content h2 strong { background: linear-gradient(135deg, #ff6b35, #ff8a5c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .about-content p { color: #fff9; font-size: 16px; line-height: 1.9; margin-bottom: 16px; } .benefits-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; } .benefits-list div { display: flex; align-items: center; gap: 10px; color: #ffffffbf; font-size: 14px; padding: 10px 14px; background: #ffffff05; border-radius: 12px; border: 1px solid #ffffff08; transition: all .3s ease; } .benefits-list div:hover { background: #ff6b350d; border-color: #ff6b351a; transform: translateX(5px); } .benefits-list div svg { color: #ff6b35; flex-shrink: 0; } .office-features-section { padding: 100px 0; background: linear-gradient(135deg, #1a1a2e, #16213e); position: relative; } .office-features-section::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #ff6b3514, transparent); } .section-heading { text-align: center; max-width: 750px; margin: 0 auto 60px; } .section-heading span { color: #ff6b35; font-size: 13px; font-weight: 700; letter-spacing: 3.5px; display: block; margin-bottom: 10px; text-transform: uppercase; } .section-heading h2 { font-size: 42px; font-weight: 800; color: #fff; margin-bottom: 15px; } .section-heading h2 strong { background: linear-gradient(135deg, #ff6b35, #ff8a5c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .section-heading p { color: #ffffff8c; font-size: 17px; line-height: 1.8; } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .feature-card { background: #ffffff08; padding: 35px 25px; border-radius: 22px; border: 1px solid #ffffff0d; text-align: center; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); position: relative; overflow: hidden; } .feature-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #ff6b35, #ff8a5c); transform: scaleX(0); transform-origin: left; transition: transform .5s ease; } .feature-card:hover::before { transform: scaleX(1); } .feature-card:hover { transform: translateY(-12px); background: #ff6b350d; border-color: #ff6b3526; box-shadow: 0 25px 70px #ff6b3514; } .feature-icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin: 0 auto 18px; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .feature-card:hover .feature-icon { transform: rotateY(180deg); } .feature-card h3 { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 10px; } .feature-card p { color: #ffffff80; font-size: 14px; line-height: 1.7; margin-bottom: 15px; } .feature-check { display: flex; align-items: center; justify-content: center; gap: 6px; color: #25d366; font-size: 13px; font-weight: 600; } .feature-check svg { color: #25d366; } .office-gallery { padding: 100px 0; background: #0f0c29; } .gallery-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; gap: 20px; } .gallery-item { position: relative; border-radius: 22px; overflow: hidden; min-height: 260px; background-size: cover; background-position: center; background-repeat: no-repeat; cursor: pointer; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .gallery-item:hover { transform: scale(1.03); box-shadow: 0 20px 60px #ff6b351a; } .gallery-large { grid-row: span 2; min-height: 540px; } .gallery-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #0f0c29d9, #0f0c2999); transition: all .5s ease; display: flex; align-items: center; justify-content: center; opacity: .8; } .gallery-item:hover .gallery-overlay { background: linear-gradient(135deg, #ff6b354d, #0f0c29cc); opacity: 1; } .gallery-content { text-align: center; color: #fff; transform: scale(.9); transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .gallery-item:hover .gallery-content { transform: scale(1); } .gallery-content svg { color: #ff6b35; margin-bottom: 12px; } .gallery-content h3 { font-size: 20px; font-weight: 700; margin-bottom: 4px; } .gallery-content p { color: #fff9; font-size: 14px; } .office-process { padding: 100px 0; background: linear-gradient(135deg, #1a1a2e, #16213e); position: relative; } .office-process::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #ff6b3514, transparent); } .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .process-card { background: #ffffff08; padding: 35px 25px; border-radius: 22px; border: 1px solid #ffffff0d; text-align: center; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); position: relative; } .process-card:hover { transform: translateY(-12px); background: #ff6b350d; border-color: #ff6b3526; box-shadow: 0 25px 70px #ff6b3514; } .process-number { display: inline-block; font-size: 48px; font-weight: 900; background: linear-gradient(135deg, #ff6b35, #ff8a5c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; opacity: .15; margin-bottom: 10px; transition: all .4s ease; } .process-card:hover .process-number { opacity: .4; transform: scale(1.1); } .process-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: #ff6b351a; border-radius: 50%; margin: 0 auto 15px; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .process-card:hover .process-icon { background: #ff6b3533; transform: rotateY(180deg); } .process-icon svg { color: #ff6b35; } .process-card h3 { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 8px; } .process-card p { color: #ffffff80; font-size: 14px; line-height: 1.6; } .process-arrow { position: absolute; right: -15px; top: 50%; transform: translateY(-50%); color: #ff6b35; opacity: .3; } .process-card:last-child .process-arrow { display: none; } .office-cta { padding: 90px 0; background: linear-gradient(135deg, #ff6b35, #e55a2b, #c44a1f); position: relative; overflow: hidden; } .office-cta::before { content: ""; position: absolute; top: -50%; right: -10%; width: 50%; height: 200%; background: #ffffff08; transform: rotate(20deg); } .office-cta::after { content: ""; position: absolute; bottom: -40%; left: -5%; width: 40%; height: 150%; background: #ffffff05; transform: rotate(-15deg); } .cta-wrapper { display: flex; justify-content: space-between; align-items: center; gap: 50px; position: relative; z-index: 2; } .cta-content { display: flex; align-items: center; gap: 30px; } .cta-icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; background: #ffffff26; border-radius: 20px; color: #fff; flex-shrink: 0; border: 1px solid #ffffff1a; transition: all .4s ease; } .cta-content:hover .cta-icon { transform: rotate(15deg) scale(1.05); background: #fff3; } .cta-content div span { display: block; font-size: 13px; font-weight: 700; letter-spacing: 3.5px; color: #ffffffb3; margin-bottom: 6px; } .cta-content div h2 { font-size: 32px; font-weight: 800; color: #fff; margin-bottom: 6px; } .cta-content div h2 strong { color: #fff; text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; text-decoration-color: #ffffff4d; } .cta-content div p { color: #fffc; font-size: 16px; } .cta-actions { display: flex; gap: 18px; flex-wrap: wrap; flex-shrink: 0; } .cta-actions .btn-primary { background: #fff; color: #ff6b35; box-shadow: 0 6px 30px #0003; } .cta-actions .btn-primary:hover { box-shadow: 0 10px 45px #00000059; } .cta-actions .btn-whatsapp { background: #ffffff26; border: 2px solid #fff3; } .cta-actions .btn-whatsapp:hover { background: #25d366; border-color: #25d366; box-shadow: 0 8px 35px #25d36680; } @media (max-width: 1024px) { .office-hero-content h1 { font-size: 42px; } .about-grid { grid-template-columns: 1fr; gap: 50px; } .features-grid { grid-template-columns: repeat(2, 1fr); } .process-grid { grid-template-columns: repeat(2, 1fr); } .gallery-grid { grid-template-columns: 1fr 1fr; } .gallery-large { grid-column: span 2; min-height: 400px; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .cta-wrapper { flex-direction: column; text-align: center; } .cta-content { flex-direction: column; text-align: center; } .cta-actions { justify-content: center; } } @media (max-width: 768px) { .office-hero { min-height: 70vh; padding: 60px 0; } .office-hero-content h1 { font-size: 34px; } .office-hero-content p { font-size: 16px; } .about-content h2 { font-size: 32px; } .section-heading h2 { font-size: 32px; } .features-grid { grid-template-columns: 1fr; } .process-grid { grid-template-columns: 1fr 1fr; } .gallery-grid { grid-template-columns: 1fr; } .gallery-large { grid-column: span 1; min-height: 300px; } .benefits-list { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr 1fr; gap: 15px; padding: 25px; } .stat-card strong { font-size: 30px; } .cta-content div h2 { font-size: 28px; } .office-actions { justify-content: center; } .btn { padding: 14px 28px; font-size: 14px; } .process-arrow { display: none; } } @media (max-width: 480px) { .office-hero-content h1 { font-size: 28px; } .office-tag { font-size: 11px; padding: 8px 16px; } .btn { padding: 12px 22px; font-size: 13px; } .features-grid { grid-template-columns: 1fr; } .process-grid { grid-template-columns: 1fr; } .about-content h2 { font-size: 26px; } .section-heading h2 { font-size: 26px; } .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px; } .stat-card strong { font-size: 24px; } .stat-card span { font-size: 12px; } .cta-content div h2 { font-size: 24px; } .office-actions { flex-direction: column; align-items: center; } .btn { width: 100%; justify-content: center; } .cta-actions { flex-direction: column; width: 100%; } .cta-actions .btn { width: 100%; justify-content: center; } .about-badge { padding: 12px 18px; right: 15px; bottom: 15px; } .about-badge strong { font-size: 14px; } .gallery-content h3 { font-size: 16px; } } * { margin: 0; padding: 0; box-sizing: border-box; } .vehicle-page { width: 100%; overflow-x: hidden; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; background: #0f0c29; } .vehicle-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; width: 100%; } .vehicle-hero { position: relative; min-height: 80vh; display: flex; align-items: center; background-size: cover; background-position: center; background-repeat: no-repeat; padding: 80px 0; overflow: hidden; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #050f1ef2, #050f1ecc, #050f1e4d); z-index: 1; } .hero-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; } .hero-particles::before { content: ""; position: absolute; width: 200%; height: 200%; background: radial-gradient(circle at 20% 30%, #ff6b350d 0%, transparent 40%), radial-gradient(circle at 80% 70%, #ff6b3508 0%, transparent 35%); animation: floatParticles 20s ease-in-out infinite; } @keyframes floatParticles { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(-20px, 10px) rotate(120deg); } 66% { transform: translate(20px, -10px) rotate(240deg); } } .vehicle-hero::before { content: ""; position: absolute; top: -30%; right: -10%; width: 50%; height: 150%; background: radial-gradient(circle, #ff6b350f 0%, transparent 70%); animation: rotateGlow 20s linear infinite; z-index: 1; } @keyframes rotateGlow { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } } .vehicle-hero-content { position: relative; z-index: 2; max-width: 700px; animation: fadeInUp 1.2s ease-out; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .vehicle-tag { display: inline-flex; align-items: center; gap: 8px; background: #ff6b3526; color: #ff6b35; padding: 10px 24px; border-radius: 50px; font-size: 13px; font-weight: 700; letter-spacing: 2.5px; margin-bottom: 25px; border: 1px solid #ff6b3540; animation: shimmer 3s ease-in-out infinite; backdrop-filter: blur(10px); } @keyframes shimmer { 0%, 100% { box-shadow: 0 0 20px #ff6b351a; } 50% { box-shadow: 0 0 50px #ff6b3533; } } .vehicle-hero-content h1 { font-size: 56px; font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 20px; } .vehicle-hero-content h1 span { background: linear-gradient(135deg, #ff6b35, #ff8a5c, #ffb088); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; } .vehicle-hero-content h1 span::after { content: ""; position: absolute; bottom: -8px; left: 0; width: 100%; height: 4px; background: linear-gradient(135deg, #ff6b35, #ff8a5c); border-radius: 2px; animation: expandLine 3s ease-in-out infinite; } @keyframes expandLine { 0%, 100% { width: 0; opacity: 0; } 50% { width: 100%; opacity: 1; } } .vehicle-hero-content p { font-size: 18px; color: #ffffffbf; line-height: 1.8; margin-bottom: 35px; max-width: 520px; } .vehicle-actions { display: flex; gap: 18px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 17px 38px; border-radius: 50px; font-weight: 700; font-size: 16px; text-decoration: none; transition: all .4s cubic-bezier(.175, .885, .32, 1.275); position: relative; overflow: hidden; cursor: pointer; border: none; } .btn::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: #fff3; transform: translate(-50%, -50%); transition: width .6s ease, height .6s ease; } .btn:active::after { width: 300px; height: 300px; } .btn-primary { background: linear-gradient(135deg, #ff6b35, #e55a2b); color: #fff; box-shadow: 0 6px 30px #ff6b3566; } .btn-primary::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, #ffffff26, transparent); transition: left .6s ease; } .btn-primary:hover::before { left: 100%; } .btn-primary:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 10px 45px #ff6b3599; } .btn-whatsapp { background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; box-shadow: 0 6px 30px #25d36666; } .btn-whatsapp::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, #ffffff26, transparent); transition: left .6s ease; } .btn-whatsapp:hover::before { left: 100%; } .btn-whatsapp:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 10px 45px #25d36699; } .btn-whatsapp-small { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; border-radius: 50px; font-weight: 600; font-size: 14px; text-decoration: none; margin-top: 20px; transition: all .4s cubic-bezier(.175, .885, .32, 1.275); box-shadow: 0 4px 20px #25d3664d; border: none; cursor: pointer; } .btn-whatsapp-small:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 8px 35px #25d36680; } .vehicle-stats { padding: 0 20px; margin-top: -50px; position: relative; z-index: 3; } .stats-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; background: #ffffff0a; backdrop-filter: blur(25px); border-radius: 24px; padding: 35px 30px; border: 1px solid #ffffff14; box-shadow: 0 25px 80px #0006; animation: slideUp 1s ease-out .3s both; } @keyframes slideUp { from { opacity: 0; transform: translateY(40px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .stat-card { text-align: center; padding: 18px; transition: all .4s cubic-bezier(.175, .885, .32, 1.275); border-radius: 16px; } .stat-card:hover { transform: translateY(-8px) scale(1.03); } .stat-card strong { display: block; font-size: 40px; font-weight: 900; background: linear-gradient(135deg, #ff6b35, #ff8a5c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 1px; } .stat-card span { color: #fff9; font-size: 14px; font-weight: 500; } .vehicle-about { padding: 100px 0; background: #0f0c29; position: relative; } .vehicle-about::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #ff6b351a, transparent); } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .about-image { position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 25px 70px #0006; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .about-image:hover { transform: scale(1.03); box-shadow: 0 35px 90px #ff6b3526; } .about-image img { width: 100%; height: 450px; object-fit: cover; display: block; transition: all .6s cubic-bezier(.175, .885, .32, 1.275); } .about-image:hover img { transform: scale(1.08); } .about-badge { position: absolute; bottom: 25px; right: 25px; display: flex; align-items: center; gap: 15px; background: #0f0c29eb; backdrop-filter: blur(15px); padding: 20px 25px; border-radius: 18px; border: 1px solid #ffffff0f; color: #fff; transition: all .4s ease; } .about-image:hover .about-badge { background: #ff6b3526; border-color: #ff6b3533; } .about-badge svg { color: #ff6b35; } .about-badge strong { display: block; font-size: 18px; } .about-badge span { color: #ffffff80; font-size: 13px; } .about-content { animation: fadeInRight 1s ease-out; } @keyframes fadeInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } .section-label { color: #ff6b35; font-size: 13px; font-weight: 700; letter-spacing: 3.5px; display: block; margin-bottom: 12px; text-transform: uppercase; position: relative; padding-left: 20px; } .section-label::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(135deg, #ff6b35, #ff8a5c); border-radius: 2px; } .about-content h2 { font-size: 40px; font-weight: 800; color: #fff; margin-bottom: 20px; line-height: 1.15; } .about-content h2 strong { background: linear-gradient(135deg, #ff6b35, #ff8a5c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .about-content p { color: #fff9; font-size: 16px; line-height: 1.9; margin-bottom: 16px; } .benefits-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; } .benefits-list div { display: flex; align-items: center; gap: 10px; color: #ffffffbf; font-size: 14px; padding: 10px 14px; background: #ffffff05; border-radius: 12px; border: 1px solid #ffffff08; transition: all .3s ease; } .benefits-list div:hover { background: #ff6b350d; border-color: #ff6b351a; transform: translateX(5px); } .benefits-list div svg { color: #ff6b35; flex-shrink: 0; } .vehicle-features-section { padding: 100px 0; background: linear-gradient(135deg, #1a1a2e, #16213e); position: relative; } .vehicle-features-section::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #ff6b3514, transparent); } .section-heading { text-align: center; max-width: 750px; margin: 0 auto 60px; } .section-heading span { color: #ff6b35; font-size: 13px; font-weight: 700; letter-spacing: 3.5px; display: block; margin-bottom: 10px; text-transform: uppercase; } .section-heading h2 { font-size: 42px; font-weight: 800; color: #fff; margin-bottom: 15px; } .section-heading h2 strong { background: linear-gradient(135deg, #ff6b35, #ff8a5c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .section-heading p { color: #ffffff8c; font-size: 17px; line-height: 1.8; } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .feature-card { background: #ffffff08; padding: 35px 25px; border-radius: 22px; border: 1px solid #ffffff0d; text-align: center; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); position: relative; overflow: hidden; } .feature-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #ff6b35, #ff8a5c); transform: scaleX(0); transform-origin: left; transition: transform .5s ease; } .feature-card:hover::before { transform: scaleX(1); } .feature-card:hover { transform: translateY(-12px); background: #ff6b350d; border-color: #ff6b3526; box-shadow: 0 25px 70px #ff6b3514; } .feature-icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin: 0 auto 18px; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .feature-card:hover .feature-icon { transform: rotateY(180deg); } .feature-card h3 { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 10px; } .feature-card p { color: #ffffff80; font-size: 14px; line-height: 1.7; margin-bottom: 15px; } .feature-check { display: flex; align-items: center; justify-content: center; gap: 6px; color: #25d366; font-size: 13px; font-weight: 600; } .feature-check svg { color: #25d366; } .vehicle-gallery { padding: 100px 0; background: #0f0c29; } .gallery-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; gap: 20px; } .gallery-item { position: relative; border-radius: 22px; overflow: hidden; min-height: 260px; background-size: cover; background-position: center; background-repeat: no-repeat; cursor: pointer; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .gallery-item:hover { transform: scale(1.03); box-shadow: 0 20px 60px #ff6b351a; } .gallery-large { grid-row: span 2; min-height: 540px; } .gallery-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #0f0c29d9, #0f0c2999); transition: all .5s ease; display: flex; align-items: center; justify-content: center; opacity: .8; } .gallery-item:hover .gallery-overlay { background: linear-gradient(135deg, #ff6b354d, #0f0c29cc); opacity: 1; } .gallery-content { text-align: center; color: #fff; transform: scale(.9); transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .gallery-item:hover .gallery-content { transform: scale(1); } .gallery-content svg { color: #ff6b35; margin-bottom: 12px; } .gallery-content h3 { font-size: 20px; font-weight: 700; margin-bottom: 4px; } .gallery-content p { color: #fff9; font-size: 14px; } .vehicle-process { padding: 100px 0; background: linear-gradient(135deg, #1a1a2e, #16213e); position: relative; } .vehicle-process::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #ff6b3514, transparent); } .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .process-card { background: #ffffff08; padding: 35px 25px; border-radius: 22px; border: 1px solid #ffffff0d; text-align: center; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); position: relative; } .process-card:hover { transform: translateY(-12px); background: #ff6b350d; border-color: #ff6b3526; box-shadow: 0 25px 70px #ff6b3514; } .process-number { display: inline-block; font-size: 48px; font-weight: 900; background: linear-gradient(135deg, #ff6b35, #ff8a5c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; opacity: .15; margin-bottom: 10px; transition: all .4s ease; } .process-card:hover .process-number { opacity: .4; transform: scale(1.1); } .process-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: #ff6b351a; border-radius: 50%; margin: 0 auto 15px; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .process-card:hover .process-icon { background: #ff6b3533; transform: rotateY(180deg); } .process-icon svg { color: #ff6b35; } .process-card h3 { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 8px; } .process-card p { color: #ffffff80; font-size: 14px; line-height: 1.6; } .process-arrow { position: absolute; right: -15px; top: 50%; transform: translateY(-50%); color: #ff6b35; opacity: .3; } .process-card:last-child .process-arrow { display: none; } .vehicle-cta { padding: 90px 0; background: linear-gradient(135deg, #ff6b35, #e55a2b, #c44a1f); position: relative; overflow: hidden; } .vehicle-cta::before { content: ""; position: absolute; top: -50%; right: -10%; width: 50%; height: 200%; background: #ffffff08; transform: rotate(20deg); } .vehicle-cta::after { content: ""; position: absolute; bottom: -40%; left: -5%; width: 40%; height: 150%; background: #ffffff05; transform: rotate(-15deg); } .cta-wrapper { display: flex; justify-content: space-between; align-items: center; gap: 50px; position: relative; z-index: 2; } .cta-content { display: flex; align-items: center; gap: 30px; } .cta-icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; background: #ffffff26; border-radius: 20px; color: #fff; flex-shrink: 0; border: 1px solid #ffffff1a; transition: all .4s ease; } .cta-content:hover .cta-icon { transform: rotate(15deg) scale(1.05); background: #fff3; } .cta-content div span { display: block; font-size: 13px; font-weight: 700; letter-spacing: 3.5px; color: #ffffffb3; margin-bottom: 6px; } .cta-content div h2 { font-size: 32px; font-weight: 800; color: #fff; margin-bottom: 6px; } .cta-content div h2 strong { color: #fff; text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; text-decoration-color: #ffffff4d; } .cta-content div p { color: #fffc; font-size: 16px; } .cta-actions { display: flex; gap: 18px; flex-wrap: wrap; flex-shrink: 0; } .cta-actions .btn-primary { background: #fff; color: #ff6b35; box-shadow: 0 6px 30px #0003; } .cta-actions .btn-primary:hover { box-shadow: 0 10px 45px #00000059; } .cta-actions .btn-whatsapp { background: #ffffff26; border: 2px solid #fff3; } .cta-actions .btn-whatsapp:hover { background: #25d366; border-color: #25d366; box-shadow: 0 8px 35px #25d36680; } @media (max-width: 1024px) { .vehicle-hero-content h1 { font-size: 42px; } .about-grid { grid-template-columns: 1fr; gap: 50px; } .features-grid { grid-template-columns: repeat(2, 1fr); } .process-grid { grid-template-columns: repeat(2, 1fr); } .gallery-grid { grid-template-columns: 1fr 1fr; } .gallery-large { grid-column: span 2; min-height: 400px; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .cta-wrapper { flex-direction: column; text-align: center; } .cta-content { flex-direction: column; text-align: center; } .cta-actions { justify-content: center; } } @media (max-width: 768px) { .vehicle-hero { min-height: 70vh; padding: 60px 0; } .vehicle-hero-content h1 { font-size: 34px; } .vehicle-hero-content p { font-size: 16px; } .about-content h2 { font-size: 32px; } .section-heading h2 { font-size: 32px; } .features-grid { grid-template-columns: 1fr; } .process-grid { grid-template-columns: 1fr 1fr; } .gallery-grid { grid-template-columns: 1fr; } .gallery-large { grid-column: span 1; min-height: 300px; } .benefits-list { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr 1fr; gap: 15px; padding: 25px; } .stat-card strong { font-size: 30px; } .cta-content div h2 { font-size: 28px; } .vehicle-actions { justify-content: center; } .btn { padding: 14px 28px; font-size: 14px; } .process-arrow { display: none; } } @media (max-width: 480px) { .vehicle-hero-content h1 { font-size: 28px; } .vehicle-tag { font-size: 11px; padding: 8px 16px; } .btn { padding: 12px 22px; font-size: 13px; } .features-grid { grid-template-columns: 1fr; } .process-grid { grid-template-columns: 1fr; } .about-content h2 { font-size: 26px; } .section-heading h2 { font-size: 26px; } .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px; } .stat-card strong { font-size: 24px; } .stat-card span { font-size: 12px; } .cta-content div h2 { font-size: 24px; } .vehicle-actions { flex-direction: column; align-items: center; } .btn { width: 100%; justify-content: center; } .cta-actions { flex-direction: column; width: 100%; } .cta-actions .btn { width: 100%; justify-content: center; } .about-badge { padding: 12px 18px; right: 15px; bottom: 15px; } .about-badge strong { font-size: 14px; } .gallery-content h3 { font-size: 16px; } } * { margin: 0; padding: 0; box-sizing: border-box; } .packing-page { width: 100%; overflow-x: hidden; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; background: #0f0c29; } .packing-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; width: 100%; } .packing-hero { position: relative; min-height: 80vh; display: flex; align-items: center; background-size: cover; background-position: center; background-repeat: no-repeat; padding: 80px 0; overflow: hidden; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #050f1ef2, #050f1ecc, #050f1e4d); z-index: 1; } .hero-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; } .hero-particles::before { content: ""; position: absolute; width: 200%; height: 200%; background: radial-gradient(circle at 20% 30%, #ff6b350d 0%, transparent 40%), radial-gradient(circle at 80% 70%, #ff6b3508 0%, transparent 35%); animation: floatParticles 20s ease-in-out infinite; } @keyframes floatParticles { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(-20px, 10px) rotate(120deg); } 66% { transform: translate(20px, -10px) rotate(240deg); } } .packing-hero::before { content: ""; position: absolute; top: -30%; right: -10%; width: 50%; height: 150%; background: radial-gradient(circle, #ff6b350f 0%, transparent 70%); animation: rotateGlow 20s linear infinite; z-index: 1; } @keyframes rotateGlow { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } } .packing-hero-content { position: relative; z-index: 2; max-width: 700px; animation: fadeInUp 1.2s ease-out; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .packing-tag { display: inline-flex; align-items: center; gap: 8px; background: #ff6b3526; color: #ff6b35; padding: 10px 24px; border-radius: 50px; font-size: 13px; font-weight: 700; letter-spacing: 2.5px; margin-bottom: 25px; border: 1px solid #ff6b3540; animation: shimmer 3s ease-in-out infinite; backdrop-filter: blur(10px); } @keyframes shimmer { 0%, 100% { box-shadow: 0 0 20px #ff6b351a; } 50% { box-shadow: 0 0 50px #ff6b3533; } } .packing-hero-content h1 { font-size: 56px; font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 20px; } .packing-hero-content h1 span { background: linear-gradient(135deg, #ff6b35, #ff8a5c, #ffb088); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; } .packing-hero-content h1 span::after { content: ""; position: absolute; bottom: -8px; left: 0; width: 100%; height: 4px; background: linear-gradient(135deg, #ff6b35, #ff8a5c); border-radius: 2px; animation: expandLine 3s ease-in-out infinite; } @keyframes expandLine { 0%, 100% { width: 0; opacity: 0; } 50% { width: 100%; opacity: 1; } } .packing-hero-content p { font-size: 18px; color: #ffffffbf; line-height: 1.8; margin-bottom: 35px; max-width: 520px; } .packing-actions { display: flex; gap: 18px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 17px 38px; border-radius: 50px; font-weight: 700; font-size: 16px; text-decoration: none; transition: all .4s cubic-bezier(.175, .885, .32, 1.275); position: relative; overflow: hidden; cursor: pointer; border: none; } .btn::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: #fff3; transform: translate(-50%, -50%); transition: width .6s ease, height .6s ease; } .btn:active::after { width: 300px; height: 300px; } .btn-primary { background: linear-gradient(135deg, #ff6b35, #e55a2b); color: #fff; box-shadow: 0 6px 30px #ff6b3566; } .btn-primary::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, #ffffff26, transparent); transition: left .6s ease; } .btn-primary:hover::before { left: 100%; } .btn-primary:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 10px 45px #ff6b3599; } .btn-whatsapp { background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; box-shadow: 0 6px 30px #25d36666; } .btn-whatsapp::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, #ffffff26, transparent); transition: left .6s ease; } .btn-whatsapp:hover::before { left: 100%; } .btn-whatsapp:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 10px 45px #25d36699; } .btn-whatsapp-small { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; border-radius: 50px; font-weight: 600; font-size: 14px; text-decoration: none; margin-top: 20px; transition: all .4s cubic-bezier(.175, .885, .32, 1.275); box-shadow: 0 4px 20px #25d3664d; border: none; cursor: pointer; } .btn-whatsapp-small:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 8px 35px #25d36680; } .packing-stats { padding: 0 20px; margin-top: -50px; position: relative; z-index: 3; } .stats-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; background: #ffffff0a; backdrop-filter: blur(25px); border-radius: 24px; padding: 35px 30px; border: 1px solid #ffffff14; box-shadow: 0 25px 80px #0006; animation: slideUp 1s ease-out .3s both; } @keyframes slideUp { from { opacity: 0; transform: translateY(40px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .stat-card { text-align: center; padding: 18px; transition: all .4s cubic-bezier(.175, .885, .32, 1.275); border-radius: 16px; } .stat-card:hover { transform: translateY(-8px) scale(1.03); } .stat-card strong { display: block; font-size: 40px; font-weight: 900; background: linear-gradient(135deg, #ff6b35, #ff8a5c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 1px; } .stat-card span { color: #fff9; font-size: 14px; font-weight: 500; } .packing-about { padding: 100px 0; background: #0f0c29; position: relative; } .packing-about::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #ff6b351a, transparent); } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .about-image { position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 25px 70px #0006; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .about-image:hover { transform: scale(1.03); box-shadow: 0 35px 90px #ff6b3526; } .about-image img { width: 100%; height: 450px; object-fit: cover; display: block; transition: all .6s cubic-bezier(.175, .885, .32, 1.275); } .about-image:hover img { transform: scale(1.08); } .about-badge { position: absolute; bottom: 25px; right: 25px; display: flex; align-items: center; gap: 15px; background: #0f0c29eb; backdrop-filter: blur(15px); padding: 20px 25px; border-radius: 18px; border: 1px solid #ffffff0f; color: #fff; transition: all .4s ease; } .about-image:hover .about-badge { background: #ff6b3526; border-color: #ff6b3533; } .about-badge svg { color: #ff6b35; } .about-badge strong { display: block; font-size: 18px; } .about-badge span { color: #ffffff80; font-size: 13px; } .about-content { animation: fadeInRight 1s ease-out; } @keyframes fadeInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } .section-label { color: #ff6b35; font-size: 13px; font-weight: 700; letter-spacing: 3.5px; display: block; margin-bottom: 12px; text-transform: uppercase; position: relative; padding-left: 20px; } .section-label::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(135deg, #ff6b35, #ff8a5c); border-radius: 2px; } .about-content h2 { font-size: 40px; font-weight: 800; color: #fff; margin-bottom: 20px; line-height: 1.15; } .about-content h2 strong { background: linear-gradient(135deg, #ff6b35, #ff8a5c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .about-content p { color: #fff9; font-size: 16px; line-height: 1.9; margin-bottom: 16px; } .benefits-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; } .benefits-list div { display: flex; align-items: center; gap: 10px; color: #ffffffbf; font-size: 14px; padding: 10px 14px; background: #ffffff05; border-radius: 12px; border: 1px solid #ffffff08; transition: all .3s ease; } .benefits-list div:hover { background: #ff6b350d; border-color: #ff6b351a; transform: translateX(5px); } .benefits-list div svg { color: #ff6b35; flex-shrink: 0; } .packing-types { padding: 100px 0; background: linear-gradient(135deg, #1a1a2e, #16213e); position: relative; } .packing-types::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #ff6b3514, transparent); } .section-heading { text-align: center; max-width: 750px; margin: 0 auto 60px; } .section-heading span { color: #ff6b35; font-size: 13px; font-weight: 700; letter-spacing: 3.5px; display: block; margin-bottom: 10px; text-transform: uppercase; } .section-heading h2 { font-size: 42px; font-weight: 800; color: #fff; margin-bottom: 15px; } .section-heading h2 strong { background: linear-gradient(135deg, #ff6b35, #ff8a5c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .section-heading p { color: #ffffff8c; font-size: 17px; line-height: 1.8; } .types-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .type-card { background: #ffffff08; padding: 35px 25px; border-radius: 22px; border: 1px solid #ffffff0d; text-align: center; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .type-card:hover { transform: translateY(-12px); background: #ff6b350d; border-color: #ff6b3526; box-shadow: 0 25px 70px #ff6b3514; } .type-icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; background: #ff6b351a; border-radius: 50%; margin: 0 auto 18px; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .type-card:hover .type-icon { background: #ff6b3533; transform: rotateY(180deg); } .type-icon svg { color: #ff6b35; } .type-card h3 { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 10px; } .type-card p { color: #ffffff80; font-size: 14px; line-height: 1.7; } .packing-features-section { padding: 100px 0; background: #0f0c29; } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .feature-card { background: #ffffff08; padding: 35px 25px; border-radius: 22px; border: 1px solid #ffffff0d; text-align: center; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); position: relative; overflow: hidden; } .feature-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #ff6b35, #ff8a5c); transform: scaleX(0); transform-origin: left; transition: transform .5s ease; } .feature-card:hover::before { transform: scaleX(1); } .feature-card:hover { transform: translateY(-12px); background: #ff6b350d; border-color: #ff6b3526; box-shadow: 0 25px 70px #ff6b3514; } .feature-icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin: 0 auto 18px; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .feature-card:hover .feature-icon { transform: rotateY(180deg); } .feature-card h3 { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 10px; } .feature-card p { color: #ffffff80; font-size: 14px; line-height: 1.7; margin-bottom: 15px; } .feature-check { display: flex; align-items: center; justify-content: center; gap: 6px; color: #25d366; font-size: 13px; font-weight: 600; } .feature-check svg { color: #25d366; } .packing-gallery { padding: 100px 0; background: linear-gradient(135deg, #1a1a2e, #16213e); } .gallery-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; gap: 20px; } .gallery-item { position: relative; border-radius: 22px; overflow: hidden; min-height: 260px; background-size: cover; background-position: center; background-repeat: no-repeat; cursor: pointer; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .gallery-item:hover { transform: scale(1.03); box-shadow: 0 20px 60px #ff6b351a; } .gallery-large { grid-row: span 2; min-height: 540px; } .gallery-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #0f0c29d9, #0f0c2999); transition: all .5s ease; display: flex; align-items: center; justify-content: center; opacity: .8; } .gallery-item:hover .gallery-overlay { background: linear-gradient(135deg, #ff6b354d, #0f0c29cc); opacity: 1; } .gallery-content { text-align: center; color: #fff; transform: scale(.9); transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .gallery-item:hover .gallery-content { transform: scale(1); } .gallery-content svg { color: #ff6b35; margin-bottom: 12px; } .gallery-content h3 { font-size: 20px; font-weight: 700; margin-bottom: 4px; } .gallery-content p { color: #fff9; font-size: 14px; } .packing-process { padding: 100px 0; background: #0f0c29; } .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .process-card { background: #ffffff08; padding: 35px 25px; border-radius: 22px; border: 1px solid #ffffff0d; text-align: center; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); position: relative; } .process-card:hover { transform: translateY(-12px); background: #ff6b350d; border-color: #ff6b3526; box-shadow: 0 25px 70px #ff6b3514; } .process-number { display: inline-block; font-size: 48px; font-weight: 900; background: linear-gradient(135deg, #ff6b35, #ff8a5c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; opacity: .15; margin-bottom: 10px; transition: all .4s ease; } .process-card:hover .process-number { opacity: .4; transform: scale(1.1); } .process-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: #ff6b351a; border-radius: 50%; margin: 0 auto 15px; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .process-card:hover .process-icon { background: #ff6b3533; transform: rotateY(180deg); } .process-icon svg { color: #ff6b35; } .process-card h3 { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 8px; } .process-card p { color: #ffffff80; font-size: 14px; line-height: 1.6; } .process-arrow { position: absolute; right: -15px; top: 50%; transform: translateY(-50%); color: #ff6b35; opacity: .3; } .process-card:last-child .process-arrow { display: none; } .packing-cta { padding: 90px 0; background: linear-gradient(135deg, #ff6b35, #e55a2b, #c44a1f); position: relative; overflow: hidden; } .packing-cta::before { content: ""; position: absolute; top: -50%; right: -10%; width: 50%; height: 200%; background: #ffffff08; transform: rotate(20deg); } .packing-cta::after { content: ""; position: absolute; bottom: -40%; left: -5%; width: 40%; height: 150%; background: #ffffff05; transform: rotate(-15deg); } .cta-wrapper { display: flex; justify-content: space-between; align-items: center; gap: 50px; position: relative; z-index: 2; } .cta-content { display: flex; align-items: center; gap: 30px; } .cta-icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; background: #ffffff26; border-radius: 20px; color: #fff; flex-shrink: 0; border: 1px solid #ffffff1a; transition: all .4s ease; } .cta-content:hover .cta-icon { transform: rotate(15deg) scale(1.05); background: #fff3; } .cta-content div span { display: block; font-size: 13px; font-weight: 700; letter-spacing: 3.5px; color: #ffffffb3; margin-bottom: 6px; } .cta-content div h2 { font-size: 32px; font-weight: 800; color: #fff; margin-bottom: 6px; } .cta-content div h2 strong { color: #fff; text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; text-decoration-color: #ffffff4d; } .cta-content div p { color: #fffc; font-size: 16px; } .cta-actions { display: flex; gap: 18px; flex-wrap: wrap; flex-shrink: 0; } .cta-actions .btn-primary { background: #fff; color: #ff6b35; box-shadow: 0 6px 30px #0003; } .cta-actions .btn-primary:hover { box-shadow: 0 10px 45px #00000059; } .cta-actions .btn-whatsapp { background: #ffffff26; border: 2px solid #fff3; } .cta-actions .btn-whatsapp:hover { background: #25d366; border-color: #25d366; box-shadow: 0 8px 35px #25d36680; } @media (max-width: 1024px) { .packing-hero-content h1 { font-size: 42px; } .about-grid { grid-template-columns: 1fr; gap: 50px; } .types-grid { grid-template-columns: repeat(2, 1fr); } .features-grid { grid-template-columns: repeat(2, 1fr); } .process-grid { grid-template-columns: repeat(2, 1fr); } .gallery-grid { grid-template-columns: 1fr 1fr; } .gallery-large { grid-column: span 2; min-height: 400px; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .cta-wrapper { flex-direction: column; text-align: center; } .cta-content { flex-direction: column; text-align: center; } .cta-actions { justify-content: center; } } @media (max-width: 768px) { .packing-hero { min-height: 70vh; padding: 60px 0; } .packing-hero-content h1 { font-size: 34px; } .packing-hero-content p { font-size: 16px; } .about-content h2 { font-size: 32px; } .section-heading h2 { font-size: 32px; } .types-grid { grid-template-columns: 1fr 1fr; } .features-grid { grid-template-columns: 1fr; } .process-grid { grid-template-columns: 1fr 1fr; } .gallery-grid { grid-template-columns: 1fr; } .gallery-large { grid-column: span 1; min-height: 300px; } .benefits-list { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr 1fr; gap: 15px; padding: 25px; } .stat-card strong { font-size: 30px; } .cta-content div h2 { font-size: 28px; } .packing-actions { justify-content: center; } .btn { padding: 14px 28px; font-size: 14px; } .process-arrow { display: none; } } @media (max-width: 480px) { .packing-hero-content h1 { font-size: 28px; } .packing-tag { font-size: 11px; padding: 8px 16px; } .btn { padding: 12px 22px; font-size: 13px; } .types-grid { grid-template-columns: 1fr; } .features-grid { grid-template-columns: 1fr; } .process-grid { grid-template-columns: 1fr; } .about-content h2 { font-size: 26px; } .section-heading h2 { font-size: 26px; } .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px; } .stat-card strong { font-size: 24px; } .stat-card span { font-size: 12px; } .cta-content div h2 { font-size: 24px; } .packing-actions { flex-direction: column; align-items: center; } .btn { width: 100%; justify-content: center; } .cta-actions { flex-direction: column; width: 100%; } .cta-actions .btn { width: 100%; justify-content: center; } .about-badge { padding: 12px 18px; right: 15px; bottom: 15px; } .about-badge strong { font-size: 14px; } .gallery-content h3 { font-size: 16px; } } * { margin: 0; padding: 0; box-sizing: border-box; } .loading-page { width: 100%; overflow-x: hidden; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; background: #0f0c29; } .loading-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; width: 100%; } .loading-hero { position: relative; min-height: 80vh; display: flex; align-items: center; background-size: cover; background-position: center; background-repeat: no-repeat; padding: 80px 0; overflow: hidden; } .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #050f1ef2, #050f1ecc, #050f1e4d); z-index: 1; } .hero-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; } .hero-particles::before { content: ""; position: absolute; width: 200%; height: 200%; background: radial-gradient(circle at 20% 30%, #ff6b350d 0%, transparent 40%), radial-gradient(circle at 80% 70%, #ff6b3508 0%, transparent 35%); animation: floatParticles 20s ease-in-out infinite; } @keyframes floatParticles { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(-20px, 10px) rotate(120deg); } 66% { transform: translate(20px, -10px) rotate(240deg); } } .loading-hero::before { content: ""; position: absolute; top: -30%; right: -10%; width: 50%; height: 150%; background: radial-gradient(circle, #ff6b350f 0%, transparent 70%); animation: rotateGlow 20s linear infinite; z-index: 1; } @keyframes rotateGlow { 0% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } } .loading-hero-content { position: relative; z-index: 2; max-width: 700px; animation: fadeInUp 1.2s ease-out; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(50px); } to { opacity: 1; transform: translateY(0); } } .loading-tag { display: inline-flex; align-items: center; gap: 8px; background: #ff6b3526; color: #ff6b35; padding: 10px 24px; border-radius: 50px; font-size: 13px; font-weight: 700; letter-spacing: 2.5px; margin-bottom: 25px; border: 1px solid #ff6b3540; animation: shimmer 3s ease-in-out infinite; backdrop-filter: blur(10px); } @keyframes shimmer { 0%, 100% { box-shadow: 0 0 20px #ff6b351a; } 50% { box-shadow: 0 0 50px #ff6b3533; } } .loading-hero-content h1 { font-size: 56px; font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 20px; } .loading-hero-content h1 span { background: linear-gradient(135deg, #ff6b35, #ff8a5c, #ffb088); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; position: relative; } .loading-hero-content h1 span::after { content: ""; position: absolute; bottom: -8px; left: 0; width: 100%; height: 4px; background: linear-gradient(135deg, #ff6b35, #ff8a5c); border-radius: 2px; animation: expandLine 3s ease-in-out infinite; } @keyframes expandLine { 0%, 100% { width: 0; opacity: 0; } 50% { width: 100%; opacity: 1; } } .loading-hero-content p { font-size: 18px; color: #ffffffbf; line-height: 1.8; margin-bottom: 35px; max-width: 520px; } .loading-actions { display: flex; gap: 18px; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 10px; padding: 17px 38px; border-radius: 50px; font-weight: 700; font-size: 16px; text-decoration: none; transition: all .4s cubic-bezier(.175, .885, .32, 1.275); position: relative; overflow: hidden; cursor: pointer; border: none; } .btn::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: #fff3; transform: translate(-50%, -50%); transition: width .6s ease, height .6s ease; } .btn:active::after { width: 300px; height: 300px; } .btn-primary { background: linear-gradient(135deg, #ff6b35, #e55a2b); color: #fff; box-shadow: 0 6px 30px #ff6b3566; } .btn-primary::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, #ffffff26, transparent); transition: left .6s ease; } .btn-primary:hover::before { left: 100%; } .btn-primary:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 10px 45px #ff6b3599; } .btn-whatsapp { background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; box-shadow: 0 6px 30px #25d36666; } .btn-whatsapp::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, #ffffff26, transparent); transition: left .6s ease; } .btn-whatsapp:hover::before { left: 100%; } .btn-whatsapp:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 10px 45px #25d36699; } .btn-whatsapp-small { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff; border-radius: 50px; font-weight: 600; font-size: 14px; text-decoration: none; margin-top: 20px; transition: all .4s cubic-bezier(.175, .885, .32, 1.275); box-shadow: 0 4px 20px #25d3664d; border: none; cursor: pointer; } .btn-whatsapp-small:hover { transform: translateY(-4px) scale(1.05); box-shadow: 0 8px 35px #25d36680; } .loading-stats { padding: 0 20px; margin-top: -50px; position: relative; z-index: 3; } .stats-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; background: #ffffff0a; backdrop-filter: blur(25px); border-radius: 24px; padding: 35px 30px; border: 1px solid #ffffff14; box-shadow: 0 25px 80px #0006; animation: slideUp 1s ease-out .3s both; } @keyframes slideUp { from { opacity: 0; transform: translateY(40px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .stat-card { text-align: center; padding: 18px; transition: all .4s cubic-bezier(.175, .885, .32, 1.275); border-radius: 16px; } .stat-card:hover { transform: translateY(-8px) scale(1.03); } .stat-card strong { display: block; font-size: 40px; font-weight: 900; background: linear-gradient(135deg, #ff6b35, #ff8a5c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; letter-spacing: 1px; } .stat-card span { color: #fff9; font-size: 14px; font-weight: 500; } .loading-about { padding: 100px 0; background: #0f0c29; position: relative; } .loading-about::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #ff6b351a, transparent); } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; } .about-image { position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 25px 70px #0006; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .about-image:hover { transform: scale(1.03); box-shadow: 0 35px 90px #ff6b3526; } .about-image img { width: 100%; height: 450px; object-fit: cover; display: block; transition: all .6s cubic-bezier(.175, .885, .32, 1.275); } .about-image:hover img { transform: scale(1.08); } .about-badge { position: absolute; bottom: 25px; right: 25px; display: flex; align-items: center; gap: 15px; background: #0f0c29eb; backdrop-filter: blur(15px); padding: 20px 25px; border-radius: 18px; border: 1px solid #ffffff0f; color: #fff; transition: all .4s ease; } .about-image:hover .about-badge { background: #ff6b3526; border-color: #ff6b3533; } .about-badge svg { color: #ff6b35; } .about-badge strong { display: block; font-size: 18px; } .about-badge span { color: #ffffff80; font-size: 13px; } .about-content { animation: fadeInRight 1s ease-out; } @keyframes fadeInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } .section-label { color: #ff6b35; font-size: 13px; font-weight: 700; letter-spacing: 3.5px; display: block; margin-bottom: 12px; text-transform: uppercase; position: relative; padding-left: 20px; } .section-label::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(135deg, #ff6b35, #ff8a5c); border-radius: 2px; } .about-content h2 { font-size: 40px; font-weight: 800; color: #fff; margin-bottom: 20px; line-height: 1.15; } .about-content h2 strong { background: linear-gradient(135deg, #ff6b35, #ff8a5c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .about-content p { color: #fff9; font-size: 16px; line-height: 1.9; margin-bottom: 16px; } .benefits-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; } .benefits-list div { display: flex; align-items: center; gap: 10px; color: #ffffffbf; font-size: 14px; padding: 10px 14px; background: #ffffff05; border-radius: 12px; border: 1px solid #ffffff08; transition: all .3s ease; } .benefits-list div:hover { background: #ff6b350d; border-color: #ff6b351a; transform: translateX(5px); } .benefits-list div svg { color: #ff6b35; flex-shrink: 0; } .loading-features-section { padding: 100px 0; background: linear-gradient(135deg, #1a1a2e, #16213e); position: relative; } .loading-features-section::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #ff6b3514, transparent); } .section-heading { text-align: center; max-width: 750px; margin: 0 auto 60px; } .section-heading span { color: #ff6b35; font-size: 13px; font-weight: 700; letter-spacing: 3.5px; display: block; margin-bottom: 10px; text-transform: uppercase; } .section-heading h2 { font-size: 42px; font-weight: 800; color: #fff; margin-bottom: 15px; } .section-heading h2 strong { background: linear-gradient(135deg, #ff6b35, #ff8a5c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .section-heading p { color: #ffffff8c; font-size: 17px; line-height: 1.8; } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .feature-card { background: #ffffff08; padding: 35px 25px; border-radius: 22px; border: 1px solid #ffffff0d; text-align: center; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); position: relative; overflow: hidden; } .feature-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #ff6b35, #ff8a5c); transform: scaleX(0); transform-origin: left; transition: transform .5s ease; } .feature-card:hover::before { transform: scaleX(1); } .feature-card:hover { transform: translateY(-12px); background: #ff6b350d; border-color: #ff6b3526; box-shadow: 0 25px 70px #ff6b3514; } .feature-icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin: 0 auto 18px; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .feature-card:hover .feature-icon { transform: rotateY(180deg); } .feature-card h3 { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 10px; } .feature-card p { color: #ffffff80; font-size: 14px; line-height: 1.7; margin-bottom: 15px; } .feature-check { display: flex; align-items: center; justify-content: center; gap: 6px; color: #25d366; font-size: 13px; font-weight: 600; } .feature-check svg { color: #25d366; } .loading-gallery { padding: 100px 0; background: #0f0c29; } .gallery-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; gap: 20px; } .gallery-item { position: relative; border-radius: 22px; overflow: hidden; min-height: 260px; background-size: cover; background-position: center; background-repeat: no-repeat; cursor: pointer; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .gallery-item:hover { transform: scale(1.03); box-shadow: 0 20px 60px #ff6b351a; } .gallery-large { grid-row: span 2; min-height: 540px; } .gallery-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, #0f0c29d9, #0f0c2999); transition: all .5s ease; display: flex; align-items: center; justify-content: center; opacity: .8; } .gallery-item:hover .gallery-overlay { background: linear-gradient(135deg, #ff6b354d, #0f0c29cc); opacity: 1; } .gallery-content { text-align: center; color: #fff; transform: scale(.9); transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .gallery-item:hover .gallery-content { transform: scale(1); } .gallery-content svg { color: #ff6b35; margin-bottom: 12px; } .gallery-content h3 { font-size: 20px; font-weight: 700; margin-bottom: 4px; } .gallery-content p { color: #fff9; font-size: 14px; } .loading-process { padding: 100px 0; background: linear-gradient(135deg, #1a1a2e, #16213e); position: relative; } .loading-process::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 1px; background: linear-gradient(90deg, transparent, #ff6b3514, transparent); } .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .process-card { background: #ffffff08; padding: 35px 25px; border-radius: 22px; border: 1px solid #ffffff0d; text-align: center; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); position: relative; } .process-card:hover { transform: translateY(-12px); background: #ff6b350d; border-color: #ff6b3526; box-shadow: 0 25px 70px #ff6b3514; } .process-number { display: inline-block; font-size: 48px; font-weight: 900; background: linear-gradient(135deg, #ff6b35, #ff8a5c); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; opacity: .15; margin-bottom: 10px; transition: all .4s ease; } .process-card:hover .process-number { opacity: .4; transform: scale(1.1); } .process-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: #ff6b351a; border-radius: 50%; margin: 0 auto 15px; transition: all .5s cubic-bezier(.175, .885, .32, 1.275); } .process-card:hover .process-icon { background: #ff6b3533; transform: rotateY(180deg); } .process-icon svg { color: #ff6b35; } .process-card h3 { color: #fff; font-size: 18px; font-weight: 700; margin-bottom: 8px; } .process-card p { color: #ffffff80; font-size: 14px; line-height: 1.6; } .process-arrow { position: absolute; right: -15px; top: 50%; transform: translateY(-50%); color: #ff6b35; opacity: .3; } .process-card:last-child .process-arrow { display: none; } .loading-cta { padding: 90px 0; background: linear-gradient(135deg, #ff6b35, #e55a2b, #c44a1f); position: relative; overflow: hidden; } .loading-cta::before { content: ""; position: absolute; top: -50%; right: -10%; width: 50%; height: 200%; background: #ffffff08; transform: rotate(20deg); } .loading-cta::after { content: ""; position: absolute; bottom: -40%; left: -5%; width: 40%; height: 150%; background: #ffffff05; transform: rotate(-15deg); } .cta-wrapper { display: flex; justify-content: space-between; align-items: center; gap: 50px; position: relative; z-index: 2; } .cta-content { display: flex; align-items: center; gap: 30px; } .cta-icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; background: #ffffff26; border-radius: 20px; color: #fff; flex-shrink: 0; border: 1px solid #ffffff1a; transition: all .4s ease; } .cta-content:hover .cta-icon { transform: rotate(15deg) scale(1.05); background: #fff3; } .cta-content div span { display: block; font-size: 13px; font-weight: 700; letter-spacing: 3.5px; color: #ffffffb3; margin-bottom: 6px; } .cta-content div h2 { font-size: 32px; font-weight: 800; color: #fff; margin-bottom: 6px; } .cta-content div h2 strong { color: #fff; text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 2px; text-decoration-color: #ffffff4d; } .cta-content div p { color: #fffc; font-size: 16px; } .cta-actions { display: flex; gap: 18px; flex-wrap: wrap; flex-shrink: 0; } .cta-actions .btn-primary { background: #fff; color: #ff6b35; box-shadow: 0 6px 30px #0003; } .cta-actions .btn-primary:hover { box-shadow: 0 10px 45px #00000059; } .cta-actions .btn-whatsapp { background: #ffffff26; border: 2px solid #fff3; } .cta-actions .btn-whatsapp:hover { background: #25d366; border-color: #25d366; box-shadow: 0 8px 35px #25d36680; } @media (max-width: 1024px) { .loading-hero-content h1 { font-size: 42px; } .about-grid { grid-template-columns: 1fr; gap: 50px; } .features-grid { grid-template-columns: repeat(2, 1fr); } .process-grid { grid-template-columns: repeat(2, 1fr); } .gallery-grid { grid-template-columns: 1fr 1fr; } .gallery-large { grid-column: span 2; min-height: 400px; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .cta-wrapper { flex-direction: column; text-align: center; } .cta-content { flex-direction: column; text-align: center; } .cta-actions { justify-content: center; } } @media (max-width: 768px) { .loading-hero { min-height: 70vh; padding: 60px 0; } .loading-hero-content h1 { font-size: 34px; } .loading-hero-content p { font-size: 16px; } .about-content h2 { font-size: 32px; } .section-heading h2 { font-size: 32px; } .features-grid { grid-template-columns: 1fr; } .process-grid { grid-template-columns: 1fr 1fr; } .gallery-grid { grid-template-columns: 1fr; } .gallery-large { grid-column: span 1; min-height: 300px; } .benefits-list { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr 1fr; gap: 15px; padding: 25px; } .stat-card strong { font-size: 30px; } .cta-content div h2 { font-size: 28px; } .loading-actions { justify-content: center; } .btn { padding: 14px 28px; font-size: 14px; } .process-arrow { display: none; } } @media (max-width: 480px) { .loading-hero-content h1 { font-size: 28px; } .loading-tag { font-size: 11px; padding: 8px 16px; } .btn { padding: 12px 22px; font-size: 13px; } .features-grid { grid-template-columns: 1fr; } .process-grid { grid-template-columns: 1fr; } .about-content h2 { font-size: 26px; } .section-heading h2 { font-size: 26px; } .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px; } .stat-card strong { font-size: 24px; } .stat-card span { font-size: 12px; } .cta-content div h2 { font-size: 24px; } .loading-actions { flex-direction: column; align-items: center; } .btn { width: 100%; justify-content: center; } .cta-actions { flex-direction: column; width: 100%; } .cta-actions .btn { width: 100%; justify-content: center; } .about-badge { padding: 12px 18px; right: 15px; bottom: 15px; } .about-badge strong { font-size: 14px; } .gallery-content h3 { font-size: 16px; } } :root { --storage-primary: #ff6b35; --storage-primary-dark: #e85a27; --storage-secondary: #25d366; --storage-dark: #111827; --storage-dark-2: #1f2937; --storage-text: #374151; --storage-muted: #6b7280; --storage-light: #f8fafc; --storage-white: #fff; --storage-border: #e5e7eb; --storage-shadow: 0 15px 40px #0f172a14; --storage-shadow-lg: 0 25px 60px #0f172a24; --storage-radius: 18px; --storage-container: 1200px; } .storage-page, .storage-page * { box-sizing: border-box; } .storage-page { width: 100%; overflow: hidden; color: var(--storage-text); background: var(--storage-white); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .storage-page img { display: block; max-width: 100%; } .storage-page a { text-decoration: none; } .storage-container { width: min(100% - 40px, var(--storage-container)); margin: 0 auto; } .storage-hero { position: relative; min-height: 680px; display: flex; align-items: center; background-position: center; background-size: cover; background-repeat: no-repeat; isolation: isolate; } .hero-overlay { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg, #050a12f0 0%, #050a12d1 42%, #050a1273 75%, #050a1240 100%); } .hero-particles { position: absolute; inset: 0; z-index: -1; opacity: .35; background-image: radial-gradient(circle at 15% 25%, #ff6b3559 0 2px, transparent 3px), radial-gradient(circle at 75% 30%, #fff3 0 2px, transparent 3px), radial-gradient(circle at 50% 80%, #25d36633 0 2px, transparent 3px); background-size: 130px 130px, 180px 180px, 220px 220px; } .storage-hero-content { max-width: 720px; padding: 100px 0; color: var(--storage-white); animation: storageHeroFade .8s ease both; } @keyframes storageHeroFade { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .storage-tag { width: fit-content; display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; margin-bottom: 24px; border: 1px solid #ff6b3559; border-radius: 999px; color: #ffd9ca; background: #ff6b351f; backdrop-filter: blur(10px); font-size: 14px; font-weight: 700; letter-spacing: .3px; } .storage-tag svg { color: var(--storage-primary); } .storage-hero h1 { margin: 0 0 22px; color: var(--storage-white); font-size: clamp(48px, 7vw, 82px); line-height: .98; letter-spacing: -3px; font-weight: 800; } .storage-hero h1 span { color: var(--storage-primary); } .storage-hero p { max-width: 650px; margin: 0; color: #ffffffd1; font-size: 19px; line-height: 1.75; } .storage-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 35px; } .btn { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 24px; border-radius: 10px; border: 1px solid transparent; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } .btn:hover { transform: translateY(-3px); } .btn-primary { color: var(--storage-white); background: var(--storage-primary); box-shadow: 0 12px 30px #ff6b3547; } .btn-primary:hover { background: var(--storage-primary-dark); box-shadow: 0 16px 35px #ff6b3559; } .btn-whatsapp { color: var(--storage-white); background: var(--storage-secondary); box-shadow: 0 12px 30px #25d36638; } .btn-whatsapp:hover { background: #1fbd5b; box-shadow: 0 16px 35px #25d3664d; } .storage-stats { position: relative; z-index: 5; margin-top: -55px; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--storage-border); border-radius: 18px; background: var(--storage-border); box-shadow: var(--storage-shadow-lg); } .stat-card { min-height: 145px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px 20px; text-align: center; background: var(--storage-white); transition: background .25s ease; } .stat-card:hover { background: #fffaf7; } .stat-card strong { display: block; margin-bottom: 7px; color: var(--storage-primary); font-size: 34px; line-height: 1; font-weight: 800; } .stat-card span { color: var(--storage-muted); font-size: 14px; font-weight: 600; } .storage-about { padding: 120px 0 110px; background: var(--storage-white); } .about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 85px; } .about-image { position: relative; min-height: 560px; } .about-image::before { content: ""; position: absolute; top: -18px; left: -18px; width: 160px; height: 160px; border-radius: 18px; background: #ff6b351f; } .about-image::after { content: ""; position: absolute; right: -18px; bottom: -18px; width: 190px; height: 190px; border-radius: 50%; border: 2px dashed #ff6b3559; } .about-image img { position: relative; z-index: 2; width: 100%; height: 560px; object-fit: cover; border-radius: 24px; box-shadow: var(--storage-shadow-lg); } .about-badge { position: absolute; z-index: 4; right: -35px; bottom: 35px; display: flex; align-items: center; gap: 14px; max-width: 260px; padding: 18px 20px; border-radius: 15px; color: var(--storage-white); background: var(--storage-dark); box-shadow: var(--storage-shadow-lg); } .about-badge svg { flex-shrink: 0; color: var(--storage-primary); } .about-badge strong, .about-badge span { display: block; } .about-badge strong { margin-bottom: 4px; font-size: 14px; } .about-badge span { color: #ffffffa6; font-size: 12px; } .about-content { max-width: 590px; } .section-label { display: inline-block; margin-bottom: 14px; color: var(--storage-primary); font-size: 13px; font-weight: 800; letter-spacing: 1.5px; } .about-content h2 { margin: 0 0 22px; color: var(--storage-dark); font-size: clamp(34px, 4vw, 52px); line-height: 1.12; letter-spacing: -1.5px; } .about-content h2 strong { color: var(--storage-primary); } .about-content p { margin: 0 0 16px; color: var(--storage-muted); font-size: 16px; line-height: 1.8; } .benefits-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 18px; margin: 30px 0; } .benefits-list > div { display: flex; align-items: center; gap: 9px; color: var(--storage-text); font-size: 14px; font-weight: 600; } .benefits-list svg { flex-shrink: 0; color: var(--storage-secondary); } .btn-whatsapp-small { display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 19px; border-radius: 9px; color: var(--storage-white); background: var(--storage-secondary); font-size: 14px; font-weight: 700; transition: .25s ease; } .btn-whatsapp-small:hover { transform: translateY(-2px); background: #1fbd5b; } .section-heading { max-width: 720px; margin: 0 auto 55px; text-align: center; } .section-heading > span { display: inline-block; margin-bottom: 12px; color: var(--storage-primary); font-size: 13px; font-weight: 800; letter-spacing: 1.5px; } .section-heading h2 { margin: 0 0 16px; color: var(--storage-dark); font-size: clamp(32px, 4vw, 50px); line-height: 1.12; letter-spacing: -1.5px; } .section-heading h2 strong { color: var(--storage-primary); } .section-heading p { margin: 0; color: var(--storage-muted); font-size: 16px; line-height: 1.75; } .storage-types { padding: 110px 0; background: var(--storage-light); } .types-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .type-card { position: relative; min-height: 270px; padding: 32px 26px; border: 1px solid var(--storage-border); border-radius: var(--storage-radius); background: var(--storage-white); box-shadow: 0 8px 25px #0f172a0a; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .type-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: var(--storage-primary); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; } .type-card:hover { transform: translateY(-8px); border-color: #ff6b3540; box-shadow: var(--storage-shadow); } .type-card:hover::before { transform: scaleX(1); } .type-icon { width: 65px; height: 65px; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; border-radius: 16px; color: var(--storage-primary); background: #ff6b351a; transition: .3s ease; } .type-card:hover .type-icon { color: var(--storage-white); background: var(--storage-primary); transform: rotate(-5deg); } .type-card h3 { margin: 0 0 12px; color: var(--storage-dark); font-size: 19px; line-height: 1.3; } .type-card p { margin: 0; color: var(--storage-muted); font-size: 14px; line-height: 1.75; } .storage-features-section { padding: 115px 0; background: var(--storage-white); } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .feature-card { position: relative; padding: 34px 30px; border: 1px solid var(--storage-border); border-radius: var(--storage-radius); background: var(--storage-white); box-shadow: 0 7px 25px #0f172a09; transition: transform .3s ease, box-shadow .3s ease; } .feature-card:hover { transform: translateY(-7px); box-shadow: var(--storage-shadow); } .feature-icon { width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; margin-bottom: 23px; border-radius: 17px; transition: transform .3s ease; } .feature-card:hover .feature-icon { transform: scale(1.08); } .feature-card h3 { margin: 0 0 12px; color: var(--storage-dark); font-size: 20px; } .feature-card p { min-height: 72px; margin: 0; color: var(--storage-muted); font-size: 14px; line-height: 1.75; } .feature-check { display: flex; align-items: center; gap: 7px; margin-top: 22px; padding-top: 17px; border-top: 1px solid var(--storage-border); color: var(--storage-secondary); font-size: 13px; font-weight: 700; } .storage-gallery { padding: 110px 0; background: var(--storage-dark); } .storage-gallery .section-heading h2 { color: var(--storage-white); } .storage-gallery .section-heading p { color: #ffffff9e; } .gallery-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; grid-template-rows: 260px 260px; gap: 18px; } .gallery-item { position: relative; min-height: 260px; overflow: hidden; border-radius: 16px; background-position: center; background-size: cover; background-repeat: no-repeat; } .gallery-large { grid-row: span 2; } .gallery-item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0000000d 25%, #000000bf 100%); transition: background .35s ease; } .gallery-item:hover::before { background: linear-gradient(180deg, #ff6b351f, #000000d1); } .gallery-overlay { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 28px; } .gallery-content { color: var(--storage-white); transform: translateY(10px); transition: transform .35s ease; } .gallery-item:hover .gallery-content { transform: translateY(0); } .gallery-content svg { margin-bottom: 14px; color: var(--storage-primary); } .gallery-content h3 { margin: 0 0 5px; font-size: 21px; } .gallery-content p { margin: 0; color: #ffffffb8; font-size: 13px; } .storage-process { padding: 115px 0; background: var(--storage-light); } .process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .process-card { position: relative; padding: 32px 25px 28px; border: 1px solid var(--storage-border); border-radius: var(--storage-radius); background: var(--storage-white); text-align: center; box-shadow: 0 7px 25px #0f172a0a; transition: .3s ease; } .process-card:hover { transform: translateY(-8px); box-shadow: var(--storage-shadow); } .process-number { position: absolute; top: 17px; right: 18px; color: #ff6b3529; font-size: 38px; line-height: 1; font-weight: 900; } .process-icon { width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; margin: 5px auto 22px; border-radius: 50%; color: var(--storage-primary); background: #ff6b351a; transition: .3s ease; } .process-card:hover .process-icon { color: var(--storage-white); background: var(--storage-primary); transform: scale(1.08); } .process-card h3 { margin: 0 0 10px; color: var(--storage-dark); font-size: 18px; } .process-card p { margin: 0; color: var(--storage-muted); font-size: 14px; line-height: 1.7; } .process-arrow { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; margin: 23px auto 0; border-radius: 50%; color: var(--storage-primary); background: #ff6b3514; } .storage-cta { padding: 90px 0; background: linear-gradient(135deg, #161b24 0%, #111827 50%, #1d242e 100%); } .cta-wrapper { display: flex; align-items: center; justify-content: space-between; gap: 40px; } .cta-content { display: flex; align-items: center; gap: 25px; } .cta-icon { width: 78px; height: 78px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 20px; color: var(--storage-primary); background: #ff6b351a; border: 1px solid #ff6b3533; } .cta-content > div:last-child > span { display: inline-block; margin-bottom: 8px; color: var(--storage-primary); font-size: 12px; font-weight: 800; letter-spacing: 1.5px; } .cta-content h2 { max-width: 650px; margin: 0 0 12px; color: var(--storage-white); font-size: clamp(28px, 4vw, 43px); line-height: 1.15; letter-spacing: -1px; } .cta-content h2 strong { color: var(--storage-primary); } .cta-content p { max-width: 650px; margin: 0; color: #ffffffa6; font-size: 15px; line-height: 1.7; } .cta-actions { display: flex; align-items: center; flex-shrink: 0; gap: 12px; } @media (max-width: 1100px) { .storage-container { width: min(100% - 32px, 1000px); } .storage-hero { min-height: 620px; } .about-grid { gap: 55px; } .about-image, .about-image img { height: 500px; min-height: 500px; } .types-grid { grid-template-columns: repeat(2, 1fr); } .process-grid { grid-template-columns: repeat(2, 1fr); } .cta-wrapper { align-items: flex-start; flex-direction: column; } .cta-actions { width: 100%; } } @media (max-width: 850px) { .storage-hero { min-height: 580px; } .storage-hero-content { padding: 80px 0; } .stats-grid { grid-template-columns: repeat(2, 1fr); } .about-grid { grid-template-columns: 1fr; } .about-content { max-width: 100%; } .about-image { max-width: 700px; margin: 0 auto; width: 100%; } .features-grid { grid-template-columns: repeat(2, 1fr); } .gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 300px 250px 250px; } .gallery-large { grid-column: span 2; grid-row: auto; } .cta-content { align-items: flex-start; } } @media (max-width: 600px) { .storage-container { width: min(100% - 24px, 100%); } .storage-hero { min-height: 600px; } .hero-overlay { background: linear-gradient(180deg, #050a12c7, #050a12eb); } .storage-hero-content { padding: 70px 0; } .storage-tag { margin-bottom: 18px; padding: 8px 13px; font-size: 12px; } .storage-hero h1 { margin-bottom: 18px; font-size: clamp(42px, 14vw, 58px); letter-spacing: -2px; } .storage-hero p { font-size: 15px; line-height: 1.7; } .storage-actions { align-items: stretch; flex-direction: column; margin-top: 27px; } .btn { width: 100%; min-height: 52px; } .storage-stats { margin-top: -35px; } .stats-grid { grid-template-columns: repeat(2, 1fr); border-radius: 14px; } .stat-card { min-height: 120px; padding: 18px 10px; } .stat-card strong { font-size: 27px; } .stat-card span { font-size: 12px; } .storage-about, .storage-types, .storage-features-section, .storage-gallery, .storage-process { padding: 75px 0; } .about-image { min-height: 380px; } .about-image img { height: 380px; min-height: 380px; border-radius: 18px; } .about-image::before { top: -10px; left: -10px; width: 100px; height: 100px; } .about-image::after { right: -10px; bottom: -10px; width: 100px; height: 100px; } .about-badge { right: 12px; bottom: 20px; max-width: 220px; padding: 13px 15px; } .about-badge svg { width: 24px; height: 24px; } .about-content h2 { font-size: 34px; } .about-content p { font-size: 14px; } .benefits-list { grid-template-columns: 1fr; gap: 11px; } .section-heading { margin-bottom: 38px; } .section-heading h2 { font-size: 32px; } .section-heading p { font-size: 14px; } .types-grid, .features-grid, .process-grid { grid-template-columns: 1fr; } .type-card { min-height: auto; } .feature-card p { min-height: auto; } .gallery-grid { display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(4, 250px); } .gallery-large { grid-column: auto; grid-row: auto; } .gallery-item { min-height: 250px; } .gallery-overlay { padding: 20px; } .cta-wrapper { gap: 30px; } .cta-content { flex-direction: column; gap: 18px; } .cta-icon { width: 65px; height: 65px; } .cta-content h2 { font-size: 31px; } .cta-content p { font-size: 14px; } .cta-actions { align-items: stretch; flex-direction: column; } } @media (max-width: 380px) { .storage-container { width: min(100% - 18px, 100%); } .storage-hero { min-height: 570px; } .storage-hero h1 { font-size: 40px; } .stats-grid { grid-template-columns: 1fr; } .stat-card { min-height: 100px; } .about-image, .about-image img { height: 320px; min-height: 320px; } .about-badge { position: relative; right: auto; bottom: auto; width: calc(100% - 20px); max-width: none; margin: -40px auto 0; } .about-content h2 { font-size: 30px; } .section-heading h2 { font-size: 29px; } .cta-content h2 { font-size: 28px; } } .storage-page a:focus-visible, .storage-page button:focus-visible { outline: 3px solid #ff6b3566; outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { .storage-page *, .storage-page *::before, .storage-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } }.service-page { width: 100%; min-height: 100vh; background: #fff; color: #222; } .service-hero { min-height: 650px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; background: #f7f7f7; } .service-hero-content { padding: 80px; } .service-tag { display: inline-block; color: #e63946; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 20px; } .service-hero-content h1 { font-size: 58px; line-height: 1.08; margin: 0 0 25px; color: #151515; } .service-hero-content p { max-width: 580px; font-size: 18px; line-height: 1.8; color: #666; margin-bottom: 35px; } .service-btn { border: none; background: #e63946; color: white; padding: 15px 30px; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; transition: .3s; } .service-btn:hover { background: #bd2633; transform: translateY(-2px); } .service-hero-image { height: 650px; overflow: hidden; } .service-hero-image img { width: 100%; height: 100%; object-fit: cover; } .service-content { max-width: 1200px; margin: auto; padding: 100px 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .content-image img { width: 100%; height: 480px; object-fit: cover; border-radius: 12px; } .small-title { color: #e63946; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } .content-text h2 { font-size: 42px; margin: 15px 0 25px; } .content-text p { color: #666; line-height: 1.8; font-size: 16px; } .service-features { margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .service-features div { font-weight: 600; color: #333; } .service-features span { color: #e63946; margin-right: 8px; } @media (max-width: 900px) { .service-hero { grid-template-columns: 1fr; } .service-hero-content { padding: 60px 30px; } .service-hero-content h1 { font-size: 42px; } .service-hero-image { height: 450px; } .service-content { grid-template-columns: 1fr; gap: 40px; padding: 70px 25px; } } @media (max-width: 600px) { .service-hero-content h1 { font-size: 35px; } .service-features { grid-template-columns: 1fr; } } .loading-page { background: #fff; } .loading-page .service-hero { background: #fff5f5; } .loading-page .service-hero-image img { object-position: center; } .loading-page .content-image img { box-shadow: 0 20px 50px #0000001f; } .loading-page .service-btn { background: #e63946; } .loading-page .service-btn:hover { background: #b92734; } .transportation-page { background: #fff; } .transportation-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 650px; background: #111827; color: white; } .transportation-content { display: flex; justify-content: center; flex-direction: column; padding: 80px; } .transportation-tag { color: #f43f4f; font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 20px; } .transportation-content h1 { max-width: 650px; font-size: 55px; line-height: 1.1; margin: 0 0 25px; } .transportation-content p { max-width: 570px; color: #d1d5db; font-size: 18px; line-height: 1.8; margin-bottom: 30px; } .transportation-btn { width: fit-content; border: none; background: #e63946; color: white; padding: 15px 28px; border-radius: 6px; font-weight: 600; cursor: pointer; } .transportation-btn:hover { background: #c72b38; } .transportation-image { min-height: 650px; } .transportation-image img { width: 100%; height: 100%; object-fit: cover; } .transportation-info { max-width: 1200px; margin: auto; padding: 100px 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .transportation-info-image img { width: 100%; height: 500px; object-fit: cover; border-radius: 12px; } .transportation-info-text > span { color: #e63946; font-size: 14px; font-weight: 700; } .transportation-info-text h2 { font-size: 42px; margin: 15px 0 25px; } .transportation-info-text > p { color: #666; line-height: 1.8; } .transportation-list { display: grid; grid-template-columns: 1fr 1fr; margin-top: 35px; gap: 20px; } .transportation-list div { display: flex; align-items: center; gap: 15px; } .transportation-list strong { color: #e63946; font-size: 22px; } .transportation-list p { color: #333; font-weight: 600; margin: 0; } @media (max-width: 900px) { .transportation-hero { grid-template-columns: 1fr; } .transportation-content { padding: 60px 30px; } .transportation-content h1 { font-size: 42px; } .transportation-image { min-height: 400px; } .transportation-info { grid-template-columns: 1fr; } } @media (max-width: 600px) { .transportation-content h1 { font-size: 34px; } .transportation-list { grid-template-columns: 1fr; } } .unloading-page { background: #f8fafc; } .unloading-hero { min-height: 650px; display: grid; grid-template-columns: 1fr 1fr; } .unloading-image { min-height: 650px; } .unloading-image img { width: 100%; height: 100%; object-fit: cover; } .unloading-content { padding: 80px; display: flex; flex-direction: column; justify-content: center; background: #fff; } .unloading-content > span { color: #e63946; font-size: 14px; font-weight: 700; letter-spacing: 1px; } .unloading-content h1 { font-size: 52px; line-height: 1.1; margin: 20px 0; color: #111827; } .unloading-content p { color: #6b7280; line-height: 1.8; font-size: 18px; max-width: 560px; } .unloading-content button { width: fit-content; margin-top: 25px; border: none; background: #e63946; color: white; padding: 15px 28px; border-radius: 6px; cursor: pointer; font-weight: 600; } .unloading-details { max-width: 1200px; margin: auto; text-align: center; padding: 100px 30px; } .unloading-details > span { color: #e63946; font-weight: 700; font-size: 14px; text-transform: uppercase; } .unloading-details h2 { font-size: 42px; margin: 15px auto 20px; max-width: 700px; } .unloading-details > p { max-width: 750px; margin: auto; color: #6b7280; line-height: 1.8; } .unloading-cards { margin-top: 60px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } .unloading-card { background: white; padding: 35px 25px; text-align: left; border-radius: 10px; box-shadow: 0 10px 35px #00000012; } .unloading-card > div { color: #e63946; font-size: 22px; font-weight: 700; } .unloading-card h3 { margin: 15px 0 10px; } .unloading-card p { color: #6b7280; line-height: 1.7; } @media (max-width: 900px) { .unloading-hero { grid-template-columns: 1fr; } .unloading-image { min-height: 450px; } .unloading-content { padding: 60px 30px; } .unloading-content h1 { font-size: 40px; } .unloading-cards { grid-template-columns: 1fr; } } .delivery-page { background: #fff; } .delivery-hero { min-height: 650px; display: grid; grid-template-columns: 1fr 1fr; background: #fef2f2; } .delivery-content { display: flex; flex-direction: column; justify-content: center; padding: 80px; } .delivery-content > span { color: #e63946; font-size: 14px; font-weight: 700; letter-spacing: 1px; } .delivery-content h1 { font-size: 55px; line-height: 1.1; color: #111827; margin: 20px 0; } .delivery-content p { max-width: 570px; color: #6b7280; font-size: 18px; line-height: 1.8; } .delivery-content button { width: fit-content; margin-top: 25px; border: none; padding: 15px 30px; background: #e63946; color: white; border-radius: 6px; font-weight: 600; cursor: pointer; } .delivery-image { min-height: 650px; } .delivery-image img { width: 100%; height: 100%; object-fit: cover; } .delivery-section { max-width: 1200px; margin: auto; padding: 100px 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .delivery-main-image img { width: 100%; height: 500px; object-fit: cover; border-radius: 12px; } .delivery-text > span { color: #e63946; font-size: 14px; font-weight: 700; text-transform: uppercase; } .delivery-text h2 { font-size: 42px; line-height: 1.2; margin: 15px 0 25px; } .delivery-text > p { color: #6b7280; line-height: 1.8; } .delivery-features { margin-top: 35px; } .delivery-features > div { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid #eee; } .delivery-features strong { color: #e63946; font-size: 20px; } .delivery-features h3 { margin: 0 0 5px; } .delivery-features p { margin: 0; color: #6b7280; } @media (max-width: 900px) { .delivery-hero { grid-template-columns: 1fr; } .delivery-content { padding: 60px 30px; } .delivery-content h1 { font-size: 42px; } .delivery-image { min-height: 450px; } .delivery-section { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 600px) { .delivery-content h1 { font-size: 35px; } } .blogs-page { width: 100%; min-height: 100vh; background: #fff; color: #171717; overflow: hidden; } .blogs-hero { position: relative; min-height: 650px; display: flex; align-items: center; background-image: url(https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?auto=format&fit=crop&w=2000&q=90); background-size: cover; background-position: center; } .blogs-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, #080c14eb 0%, #080c14b8 45%, #080c1440 100%); } .blogs-hero-content { position: relative; z-index: 2; width: 100%; max-width: 1250px; margin: 0 auto; padding: 100px 30px; } .blogs-eyebrow { display: inline-block; margin-bottom: 24px; color: #f04452; font-size: 14px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; } .blogs-hero h1 { max-width: 750px; margin: 0 0 28px; color: #fff; font-size: clamp(45px, 6vw, 78px); line-height: 1.02; font-weight: 800; letter-spacing: -2px; } .blogs-hero p { max-width: 650px; margin: 0; color: #e5e7eb; font-size: 18px; line-height: 1.8; } .blogs-intro { padding: 100px 30px 50px; background: #fff; } .blogs-intro-container { max-width: 1250px; margin: auto; display: grid; grid-template-columns: 230px 1fr; gap: 70px; } .blogs-intro-label { display: flex; align-items: center; gap: 15px; padding-top: 10px; color: #e63946; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; } .intro-line { width: 35px; height: 2px; background: #e63946; } .blogs-intro-content { max-width: 850px; } .blogs-intro-content h2 { margin: 0 0 25px; color: #111827; font-size: clamp(35px, 4vw, 55px); line-height: 1.1; letter-spacing: -1.5px; } .blogs-intro-content h2 span { color: #e63946; } .blogs-intro-content p { max-width: 780px; margin: 0; color: #6b7280; font-size: 17px; line-height: 1.9; } .blog-categories { padding: 30px; background: #fff; } .blog-categories-container { max-width: 1250px; margin: auto; display: flex; align-items: center; gap: 12px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; } .blog-categories-container::-webkit-scrollbar { display: none; } .category-button { flex-shrink: 0; border: 1px solid #e5e7eb; background: #fff; color: #555; padding: 12px 21px; border-radius: 50px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; } .category-button:hover { border-color: #e63946; color: #e63946; transform: translateY(-2px); } .category-button.active { border-color: #e63946; background: #e63946; color: #fff; } .blogs-list { padding: 60px 30px 120px; background: #f8fafc; } .blogs-container { max-width: 1250px; margin: auto; } .blogs-section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 45px; } .blogs-section-heading > div > span { display: block; margin-bottom: 10px; color: #e63946; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; } .blogs-section-heading h2 { margin: 0; color: #111827; font-size: 43px; line-height: 1.1; } .blogs-section-heading > p { max-width: 450px; margin: 0; color: #6b7280; font-size: 15px; line-height: 1.8; } .blogs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .blog-card { overflow: hidden; background: #fff; border: 1px solid #edf0f3; border-radius: 12px; transition: transform .3s ease, box-shadow .3s ease; } .blog-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px #00000017; } .blog-card-image { position: relative; height: 270px; overflow: hidden; } .blog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .blog-card:hover .blog-card-image img { transform: scale(1.07); } .blog-category { position: absolute; top: 18px; left: 18px; padding: 8px 13px; background: #e63946; color: #fff; border-radius: 4px; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; } .blog-card-content { padding: 28px 27px 30px; } .blog-date { margin-bottom: 13px; color: #9ca3af; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .7px; } .blog-card-content h3 { min-height: 65px; margin: 0 0 15px; color: #111827; font-size: 21px; line-height: 1.35; transition: color .25s ease; } .blog-card:hover .blog-card-content h3 { color: #e63946; } .blog-card-content > p { min-height: 95px; margin: 0 0 23px; color: #6b7280; font-size: 14px; line-height: 1.8; } .read-more { display: inline-flex; align-items: center; gap: 10px; color: #e63946; font-size: 14px; font-weight: 800; text-decoration: none; transition: gap .25s ease; } .read-more span { font-size: 20px; line-height: 1; } .read-more:hover { gap: 16px; } .blogs-cta { position: relative; min-height: 570px; display: flex; align-items: center; overflow: hidden; } .blogs-cta-image { position: absolute; inset: 0; } .blogs-cta-image img { width: 100%; height: 100%; object-fit: cover; } .blogs-cta-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, #090c12f0 0%, #090c12cc 45%, #090c1240 100%); } .blogs-cta-content { position: relative; z-index: 2; max-width: 1250px; width: 100%; margin: auto; padding: 90px 30px; } .blogs-cta-content > span { display: block; margin-bottom: 20px; color: #f04452; font-size: 13px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; } .blogs-cta-content h2 { margin: 0 0 25px; color: #fff; font-size: clamp(42px, 5vw, 65px); line-height: 1.05; letter-spacing: -1px; } .blogs-cta-content p { max-width: 550px; margin: 0 0 32px; color: #d1d5db; font-size: 16px; line-height: 1.8; } .blogs-cta-button { display: inline-flex; align-items: center; gap: 14px; padding: 15px 25px; border-radius: 5px; background: #e63946; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; transition: background .25s ease, transform .25s ease; } .blogs-cta-button span { font-size: 20px; } .blogs-cta-button:hover { background: #c92e3b; transform: translateY(-3px); } @media (max-width: 1000px) { .blogs-intro-container { grid-template-columns: 1fr; gap: 20px; } .blogs-intro-label { padding-top: 0; } .blogs-grid { grid-template-columns: repeat(2, 1fr); } .blogs-section-heading { align-items: flex-start; flex-direction: column; } } @media (max-width: 700px) { .blogs-hero { min-height: 570px; background-position: 60% center; } .blogs-hero-content { padding: 70px 25px; } .blogs-hero h1 { font-size: 43px; letter-spacing: -1px; } .blogs-hero p { font-size: 15px; } .blogs-intro { padding: 70px 25px 30px; } .blogs-intro-content h2 { font-size: 35px; } .blog-categories { padding: 20px 25px; } .blogs-list { padding: 50px 20px 80px; } .blogs-section-heading h2 { font-size: 34px; } .blogs-grid { grid-template-columns: 1fr; gap: 22px; } .blog-card-image { height: 250px; } .blog-card-content h3 { min-height: auto; } .blog-card-content > p { min-height: auto; } .blogs-cta { min-height: 550px; } .blogs-cta-content { padding: 70px 25px; } .blogs-cta-content h2 { font-size: 43px; } } @media (max-width: 420px) { .blogs-hero h1 { font-size: 36px; } .blogs-hero p { font-size: 14px; } .blogs-intro-content h2 { font-size: 30px; } .blogs-section-heading h2 { font-size: 29px; } .blog-card-image { height: 220px; } .blogs-cta-content h2 { font-size: 37px; } } .contact-page { min-height: 100vh; background: #fff; color: #111827; }  .contact-hero { position: relative; min-height: 500px; display: flex; align-items: center; background-image: url(https://images.unsplash.com/photo-1600518464441-9154a4dea21b?auto=format&fit=crop&w=2000&q=85); background-size: cover; background-position: center; } .contact-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, #0a0e16e6, #0a0e168c); } .contact-hero-content { position: relative; z-index: 2; width: 100%; max-width: 1250px; margin: auto; padding: 80px 30px; } .contact-hero-content > span { color: #f04452; font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; } .contact-hero-content h1 { margin: 20px 0; color: #fff; font-size: clamp(48px, 6vw, 75px); line-height: 1; } .contact-hero-content p { max-width: 600px; margin: 0; color: #e5e7eb; font-size: 17px; line-height: 1.8; }  .contact-section { padding: 110px 30px; background: #fff; } .contact-container { max-width: 1250px; margin: auto; display: grid; grid-template-columns: .9fr 1.1fr; gap: 90px; align-items: start; }  .section-label { display: inline-block; color: #e63946; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; } .contact-information h2 { max-width: 500px; margin: 18px 0 25px; font-size: 48px; line-height: 1.1; } .contact-information h2 span { color: #e63946; } .contact-intro { max-width: 540px; color: #6b7280; font-size: 16px; line-height: 1.9; }  .contact-details { margin-top: 40px; display: flex; flex-direction: column; gap: 25px; } .contact-detail { display: flex; align-items: center; gap: 18px; } .contact-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; background: #fff1f2; color: #e63946; font-size: 20px; } .contact-detail small { display: block; margin-bottom: 5px; color: #9ca3af; font-size: 12px; font-weight: 700; text-transform: uppercase; } .contact-detail a, .contact-detail p { margin: 0; color: #222; font-size: 15px; font-weight: 600; text-decoration: none; } .contact-detail a:hover { color: #e63946; }  .contact-quick-links { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 40px; } .contact-quick-links a { color: #e63946; font-size: 14px; font-weight: 800; text-decoration: none; } .contact-quick-links a span { margin-left: 7px; font-size: 18px; }  .contact-form-wrapper { padding: 45px; background: #f8fafc; border: 1px solid #edf0f3; border-radius: 12px; } .contact-form-heading > span { color: #e63946; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; } .contact-form-heading h3 { margin: 10px 0 30px; font-size: 32px; }  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .form-group { margin-bottom: 22px; } .form-group label { display: block; margin-bottom: 9px; color: #374151; font-size: 13px; font-weight: 700; } .form-group input, .form-group textarea { width: 100%; padding: 14px 16px; border: 1px solid #dfe3e8; border-radius: 5px; background: #fff; color: #111827; font-size: 14px; outline: none; transition: border-color .2s ease, box-shadow .2s ease; } .form-group input { height: 52px; } .form-group textarea { min-height: 150px; resize: vertical; } .form-group input:focus, .form-group textarea:focus { border-color: #e63946; box-shadow: 0 0 0 3px #e6394614; } .form-group input::placeholder, .form-group textarea::placeholder { color: #9ca3af; }  .contact-submit { display: inline-flex; align-items: center; gap: 15px; border: 0; padding: 15px 25px; background: #e63946; color: #fff; border-radius: 5px; font-size: 14px; font-weight: 700; cursor: pointer; transition: background .25s ease, transform .25s ease; } .contact-submit:hover { background: #c92e3b; transform: translateY(-2px); } .contact-submit span { font-size: 19px; }  .success-message { margin-bottom: 25px; padding: 14px 16px; border: 1px solid #bbf7d0; border-radius: 5px; background: #f0fdf4; color: #166534; font-size: 14px; }  .contact-bottom { padding: 70px 30px; display: flex; align-items: center; justify-content: space-between; gap: 40px; background: #111827; color: #fff; } .contact-bottom > div { max-width: 700px; margin-left: max(0px, calc((100vw - 1190px) / 2)); } .contact-bottom span { color: #f04452; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; } .contact-bottom h2 { margin: 10px 0; font-size: 40px; } .contact-bottom p { margin: 0; color: #d1d5db; line-height: 1.7; } .contact-bottom > a { margin-right: max(0px, calc((100vw - 1190px) / 2)); padding: 15px 25px; background: #e63946; color: #fff; border-radius: 5px; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; } .contact-bottom > a span { margin-left: 10px; color: #fff; font-size: 18px; }  @media (max-width: 950px) { .contact-container { grid-template-columns: 1fr; gap: 60px; } .contact-information h2 { font-size: 42px; } .contact-bottom { flex-direction: column; align-items: flex-start; } .contact-bottom > div { margin-left: 0; } .contact-bottom > a { margin-right: 0; } } @media (max-width: 650px) { .contact-hero { min-height: 450px; } .contact-section { padding: 70px 20px; } .contact-container { gap: 45px; } .contact-information h2 { font-size: 36px; } .contact-form-wrapper { padding: 25px 20px; } .form-row { grid-template-columns: 1fr; gap: 0; } .contact-bottom { padding: 60px 25px; } .contact-bottom h2 { font-size: 34px; } } .quote-page { min-height: 100vh; background: #fff; color: #111827; }  .quote-hero { position: relative; min-height: 500px; display: flex; align-items: center; background-image: url(https://images.unsplash.com/photo-1603796846097-3b3e9d4d2b4d?auto=format&fit=crop&w=2000&q=85); background-size: cover; background-position: center; } .quote-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, #080c14ed, #080c148c); } .quote-hero-content { position: relative; z-index: 2; width: 100%; max-width: 1250px; margin: auto; padding: 80px 30px; } .quote-hero-content > span { color: #f04452; font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; } .quote-hero-content h1 { margin: 20px 0; color: #fff; font-size: clamp(48px, 6vw, 75px); line-height: 1; } .quote-hero-content p { max-width: 600px; margin: 0; color: #e5e7eb; font-size: 17px; line-height: 1.8; }  .quote-section { padding: 110px 30px; background: #f8fafc; } .quote-container { max-width: 1250px; margin: auto; display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; align-items: start; }  .quote-label { color: #e63946; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; } .quote-info h2 { max-width: 520px; margin: 18px 0 25px; font-size: 48px; line-height: 1.1; } .quote-info h2 span { color: #e63946; } .quote-info > p { max-width: 550px; margin: 0; color: #6b7280; font-size: 16px; line-height: 1.9; }  .quote-benefits { margin-top: 45px; display: flex; flex-direction: column; gap: 25px; } .quote-benefits > div { display: flex; gap: 20px; } .quote-benefits strong { color: #e63946; font-size: 20px; } .quote-benefits h3 { margin: 0 0 5px; font-size: 16px; } .quote-benefits p { margin: 0; color: #6b7280; font-size: 14px; }  .quote-form-wrapper { padding: 45px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 20px 50px #0000000d; } .quote-form-title { margin-bottom: 30px; } .quote-form-title span { color: #e63946; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; } .quote-form-title h3 { margin: 10px 0 0; font-size: 31px; }  .quote-success { margin-bottom: 25px; padding: 15px; border: 1px solid #bbf7d0; border-radius: 5px; background: #f0fdf4; color: #166534; font-size: 14px; }  .quote-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .quote-field { margin-bottom: 20px; } .quote-field label { display: block; margin-bottom: 8px; color: #374151; font-size: 13px; font-weight: 700; } .quote-field input, .quote-field select, .quote-field textarea { width: 100%; border: 1px solid #dfe3e8; border-radius: 5px; padding: 14px 15px; background: #fff; color: #111827; font-size: 14px; outline: none; transition: .2s ease; } .quote-field input, .quote-field select { height: 52px; } .quote-field textarea { resize: vertical; min-height: 130px; } .quote-field input:focus, .quote-field select:focus, .quote-field textarea:focus { border-color: #e63946; box-shadow: 0 0 0 3px #e6394614; } .quote-field input::placeholder, .quote-field textarea::placeholder { color: #9ca3af; }  .quote-submit { display: inline-flex; align-items: center; gap: 15px; margin-top: 5px; padding: 15px 25px; border: 0; border-radius: 5px; background: #e63946; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; transition: .25s ease; } .quote-submit:hover { background: #c92e3b; transform: translateY(-2px); } .quote-submit span { font-size: 19px; }  @media (max-width: 950px) { .quote-container { grid-template-columns: 1fr; gap: 60px; } .quote-info h2 { font-size: 42px; } } @media (max-width: 650px) { .quote-section { padding: 70px 20px; } .quote-form-wrapper { padding: 25px 20px; } .quote-form-row { grid-template-columns: 1fr; gap: 0; } .quote-info h2 { font-size: 36px; } } .enquiry-page { min-height: 100vh; background: #fff; color: #111827; }  .enquiry-hero { position: relative; min-height: 500px; display: flex; align-items: center; background-image: url(https://images.unsplash.com/photo-1556761175-b413da4baf72?auto=format&fit=crop&w=2000&q=85); background-size: cover; background-position: center; } .enquiry-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, #080c14ed, #080c148c); } .enquiry-hero-content { position: relative; z-index: 2; width: 100%; max-width: 1250px; margin: auto; padding: 80px 30px; } .enquiry-hero-content > span { color: #f04452; font-size: 13px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; } .enquiry-hero-content h1 { margin: 20px 0; color: #fff; font-size: clamp(48px, 6vw, 75px); line-height: 1; } .enquiry-hero-content p { max-width: 620px; margin: 0; color: #e5e7eb; font-size: 17px; line-height: 1.8; }  .enquiry-section { padding: 110px 30px; background: #fff; } .enquiry-container { max-width: 1250px; margin: auto; display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: start; }  .enquiry-label { color: #e63946; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; } .enquiry-info h2 { margin: 18px 0 20px; font-size: 48px; line-height: 1.1; } .enquiry-info h2 span { color: #e63946; } .enquiry-info > p { max-width: 530px; color: #6b7280; font-size: 16px; line-height: 1.9; }  .enquiry-image { height: 280px; margin-top: 35px; overflow: hidden; border-radius: 10px; } .enquiry-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .enquiry-image:hover img { transform: scale(1.04); }  .enquiry-contact-box { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 25px; padding-top: 25px; border-top: 1px solid #e5e7eb; } .enquiry-contact-box small { display: block; margin-bottom: 7px; color: #9ca3af; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; } .enquiry-contact-box a { color: #222; font-size: 14px; font-weight: 700; text-decoration: none; word-break: break-word; } .enquiry-contact-box a:hover { color: #e63946; }  .enquiry-form-wrapper { padding: 45px; background: #f8fafc; border: 1px solid #edf0f3; border-radius: 12px; } .enquiry-form-heading > span { color: #e63946; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; } .enquiry-form-heading h3 { margin: 10px 0 30px; font-size: 32px; }  .enquiry-success { margin-bottom: 25px; padding: 15px; border: 1px solid #bbf7d0; border-radius: 5px; background: #f0fdf4; color: #166534; font-size: 14px; line-height: 1.6; }  .enquiry-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .enquiry-field { margin-bottom: 22px; } .enquiry-field > label { display: block; margin-bottom: 8px; color: #374151; font-size: 13px; font-weight: 700; } .enquiry-field input[type="text"], .enquiry-field input[type="tel"], .enquiry-field input[type="email"], .enquiry-field select, .enquiry-field textarea { width: 100%; border: 1px solid #dfe3e8; border-radius: 5px; background: #fff; color: #111827; font-size: 14px; outline: none; transition: .2s ease; } .enquiry-field input[type="text"], .enquiry-field input[type="tel"], .enquiry-field input[type="email"], .enquiry-field select { height: 52px; padding: 14px 15px; } .enquiry-field textarea { min-height: 150px; padding: 14px 15px; resize: vertical; } .enquiry-field input:focus, .enquiry-field select:focus, .enquiry-field textarea:focus { border-color: #e63946; box-shadow: 0 0 0 3px #e6394614; } .enquiry-field input::placeholder, .enquiry-field textarea::placeholder { color: #9ca3af; }  .contact-methods { display: flex; flex-wrap: wrap; gap: 12px; } .contact-method { display: flex; align-items: center; gap: 8px; padding: 11px 15px; border: 1px solid #e1e5e9; border-radius: 5px; background: #fff; color: #4b5563; font-size: 13px; cursor: pointer; } .contact-method input { accent-color: #e63946; } .contact-method:has(input:checked) { border-color: #e63946; color: #e63946; background: #fff5f5; }  .enquiry-submit { display: inline-flex; align-items: center; gap: 15px; padding: 15px 26px; border: 0; border-radius: 5px; background: #e63946; color: #fff; font-size: 14px; font-weight: 700; cursor: pointer; transition: .25s ease; } .enquiry-submit:hover { background: #c92e3b; transform: translateY(-2px); } .enquiry-submit span { font-size: 19px; }  .enquiry-bottom { padding: 65px 30px; display: flex; align-items: center; justify-content: space-between; gap: 40px; background: #111827; color: #fff; } .enquiry-bottom > div { margin-left: max(0px, calc((100vw - 1190px) / 2)); } .enquiry-bottom span { color: #f04452; font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; } .enquiry-bottom h2 { margin: 10px 0 0; font-size: 38px; } .enquiry-bottom > a { margin-right: max(0px, calc((100vw - 1190px) / 2)); padding: 15px 25px; border-radius: 5px; background: #e63946; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; } .enquiry-bottom > a span { margin-left: 10px; color: #fff; font-size: 18px; }  @media (max-width: 950px) { .enquiry-container { grid-template-columns: 1fr; gap: 60px; } .enquiry-info h2 { font-size: 42px; } .enquiry-bottom { flex-direction: column; align-items: flex-start; } .enquiry-bottom > div { margin-left: 0; } .enquiry-bottom > a { margin-right: 0; } } @media (max-width: 650px) { .enquiry-section { padding: 70px 20px; } .enquiry-info h2 { font-size: 36px; } .enquiry-form-wrapper { padding: 25px 20px; } .enquiry-row { grid-template-columns: 1fr; gap: 0; } .enquiry-contact-box { grid-template-columns: 1fr; } .enquiry-image { height: 230px; } .enquiry-bottom { padding: 55px 25px; } .enquiry-bottom h2 { font-size: 32px; } } .login-page { position: relative; min-height: calc(100vh - 82px); padding: 50px 24px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(circle at 10% 10%, #ed1c2414, transparent 30%), radial-gradient(circle at 90% 90%, #ffd4001f, transparent 30%), #f8fafc; } .login-background-shape { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(1px); } .shape-one { width: 320px; height: 320px; top: -130px; left: -100px; background: #ed1c2412; } .shape-two { width: 420px; height: 420px; right: -170px; bottom: -190px; background: #ffd4001a; }  .login-container { position: relative; z-index: 2; width: 100%; max-width: 1120px; min-height: 680px; display: grid; grid-template-columns: 1fr .9fr; overflow: hidden; background: #fff; border: 1px solid #e5e7eb; border-radius: 24px; box-shadow: 0 25px 60px #0f172a1f, 0 5px 20px #0f172a0d; }  .login-info { position: relative; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: linear-gradient(145deg, #b90f18 0%, #ed1c24 48%, #c9151e 100%); color: #fff; } .login-info::before { content: ""; position: absolute; width: 300px; height: 300px; right: -140px; top: -120px; border: 60px solid #ffffff0f; border-radius: 50%; } .login-info::after { content: ""; position: absolute; width: 250px; height: 250px; left: -130px; bottom: -140px; border: 50px solid #ffd40014; border-radius: 50%; }  .login-brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 13px; } .login-brand-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 3px solid #ffd400; border-radius: 50%; background: #ffffff1f; color: #fff; font-size: 23px; font-weight: 900; } .login-brand h1 { margin: 0; font-size: 27px; font-weight: 900; letter-spacing: -.7px; } .login-brand span { display: block; margin-top: 5px; color: #ffffffd1; font-size: 9px; font-weight: 800; letter-spacing: 1.8px; }  .login-info-content { position: relative; z-index: 2; max-width: 470px; } .login-badge { width: fit-content; margin-bottom: 22px; padding: 8px 12px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #fff3; border-radius: 100px; background: #ffffff1a; color: #fff; font-size: 11px; font-weight: 700; } .login-info-content h2 { margin: 0; font-size: 42px; line-height: 1.1; letter-spacing: -1.5px; font-weight: 900; } .login-info-content h2 span { display: block; color: #ffd400; } .login-info-content > p { margin: 20px 0 30px; color: #fffc; font-size: 15px; line-height: 1.8; }  .login-features { display: flex; flex-direction: column; gap: 17px; } .login-feature { display: flex; align-items: center; gap: 13px; } .feature-icon { width: 43px; height: 43px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 11px; background: #ffffff1f; color: #ffd400; } .login-feature strong { display: block; color: #fff; font-size: 13px; font-weight: 750; } .login-feature span { display: block; margin-top: 3px; color: #ffffffa6; font-size: 11px; }  .login-info-footer { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: #ffffff8c; font-size: 10px; } .login-info-footer div { display: flex; gap: 14px; } .login-info-footer a { color: #ffffffb3; text-decoration: none; } .login-info-footer a:hover { color: #ffd400; }  .login-card { padding: 52px 55px; display: flex; flex-direction: column; justify-content: center; background: #fff; } .mobile-brand { display: none; } .login-header { margin-bottom: 30px; } .welcome-text { display: inline-block; margin-bottom: 8px; color: #ed1c24; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; } .login-header h2 { margin: 0; color: #111827; font-size: 30px; font-weight: 850; letter-spacing: -.8px; } .login-header p { margin: 9px 0 0; color: #6b7280; font-size: 13px; }  .login-form { display: flex; flex-direction: column; gap: 20px; } .form-group { display: flex; flex-direction: column; } .form-group label { margin-bottom: 8px; color: #252b35; font-size: 12px; font-weight: 750; } .input-wrapper { height: 52px; padding: 0 14px; display: flex; align-items: center; gap: 11px; border: 1px solid #dfe3e8; border-radius: 11px; background: #fafbfc; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; } .input-wrapper svg { flex-shrink: 0; color: #9ca3af; } .input-wrapper:focus-within { border-color: #ed1c24; background: #fff; box-shadow: 0 0 0 4px #ed1c2414; } .input-wrapper:focus-within > svg { color: #ed1c24; } .input-wrapper input { width: 100%; height: 100%; border: 0; outline: 0; background: transparent; color: #111827; font-size: 13px; } .input-wrapper input::placeholder { color: #a1a8b0; } .input-error { border-color: #ef4444; } .input-error:focus-within { box-shadow: 0 0 0 4px #ef444414; }  .password-label { display: flex; align-items: center; justify-content: space-between; } .password-label label { margin-bottom: 8px; } .password-label a { margin-bottom: 8px; color: #ed1c24; font-size: 11px; font-weight: 700; text-decoration: none; } .password-label a:hover { text-decoration: underline; } .password-toggle { padding: 5px; display: flex; border: 0; background: transparent; color: #9ca3af; cursor: pointer; } .password-toggle:hover { color: #ed1c24; } .error-message { margin-top: 6px; color: #dc2626; font-size: 11px; font-weight: 600; }  .login-options { display: flex; align-items: center; justify-content: space-between; } .remember-me { display: flex; align-items: center; gap: 8px; color: #6b7280; font-size: 12px; cursor: pointer; } .remember-me input { display: none; } .custom-checkbox { width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; border: 1px solid #d1d5db; border-radius: 5px; color: transparent; } .remember-me input:checked + .custom-checkbox { border-color: #ed1c24; background: #ed1c24; color: #fff; }  .login-submit { position: relative; height: 53px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 11px; background: linear-gradient(135deg, #ed1c24, #c81018); color: #fff; font-size: 14px; font-weight: 800; cursor: pointer; box-shadow: 0 9px 22px #ed1c2433; transition: transform .2s ease, box-shadow .2s ease; } .login-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 12px 28px #ed1c2445; } .login-submit:disabled { opacity: .7; cursor: not-allowed; } .loading-icon { animation: login-spin .8s linear infinite; } @keyframes login-spin { to { transform: rotate(360deg); } }  .divider { margin: 27px 0 18px; display: flex; align-items: center; gap: 12px; color: #9ca3af; font-size: 10px; } .divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: #e5e7eb; }  .social-login { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .social-login-button { height: 46px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid #e1e5e9; border-radius: 10px; background: #fff; color: #374151; font-size: 12px; font-weight: 700; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; } .social-login-button:hover { border-color: #cfd4da; background: #f9fafb; transform: translateY(-1px); } .google-icon, .facebook-icon { width: 21px; height: 21px; display: flex; align-items: center; justify-content: center; font-weight: 900; } .google-icon { color: #4285f4; } .facebook-icon { color: #1877f2; font-size: 23px; }  .register-prompt { margin-top: 27px; padding-top: 20px; display: flex; align-items: center; justify-content: center; gap: 7px; border-top: 1px solid #f0f0f0; color: #6b7280; font-size: 11px; } .register-prompt a { display: inline-flex; align-items: center; gap: 5px; color: #ed1c24; font-weight: 800; text-decoration: none; } .register-prompt a:hover { text-decoration: underline; }  @media (max-width: 900px) { .login-page { min-height: calc(100vh - 72px); padding: 35px 20px; } .login-container { max-width: 700px; grid-template-columns: 1fr; } .login-info { display: none; } .login-card { padding: 50px; } .mobile-brand { margin-bottom: 35px; display: flex; align-items: center; justify-content: center; gap: 12px; } .mobile-brand .login-brand-icon { width: 44px; height: 44px; border-color: #ed1c24; background: #ed1c24; } .mobile-brand h1 { margin: 0; color: #ed1c24; font-size: 24px; } .mobile-brand span { display: block; margin-top: 4px; color: #6b7280; font-size: 8px; font-weight: 800; letter-spacing: 1.4px; } }  @media (max-width: 600px) { .login-page { min-height: calc(100vh - 66px); padding: 20px 12px; } .login-container { min-height: auto; border-radius: 18px; } .login-card { padding: 32px 22px; } .mobile-brand { margin-bottom: 28px; } .login-header h2 { font-size: 25px; } .login-header p { font-size: 12px; } .login-form { gap: 17px; } .input-wrapper { height: 50px; } .social-login { grid-template-columns: 1fr; } .register-prompt { flex-wrap: wrap; } }  @media (max-width: 400px) { .login-page { padding: 12px 8px; } .login-card { padding: 27px 17px; } .login-header h2 { font-size: 23px; } .welcome-text { font-size: 10px; } .login-submit { height: 50px; } }.register-page { position: relative; min-height: calc(100vh - 82px); padding: 45px 24px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(circle at 8% 15%, #ed1c2414, transparent 28%), radial-gradient(circle at 92% 85%, #ffd4001f, transparent 30%), #f8fafc; } .register-shape { position: absolute; border-radius: 50%; pointer-events: none; } .register-shape-one { width: 350px; height: 350px; top: -150px; left: -120px; background: #ed1c240f; } .register-shape-two { width: 430px; height: 430px; right: -180px; bottom: -190px; background: #ffd4001a; }  .register-container { position: relative; z-index: 2; width: 100%; max-width: 1180px; min-height: 720px; display: grid; grid-template-columns: .92fr 1.08fr; overflow: hidden; background: #fff; border: 1px solid #e5e7eb; border-radius: 25px; box-shadow: 0 25px 65px #0f172a1f, 0 5px 20px #0f172a0a; }  .register-info { position: relative; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: linear-gradient(145deg, #b80f18, #ed1c24 48%, #c81018); color: #fff; } .register-info::before { content: ""; position: absolute; width: 330px; height: 330px; top: -140px; right: -140px; border: 65px solid #ffffff0f; border-radius: 50%; } .register-info::after { content: ""; position: absolute; width: 270px; height: 270px; left: -140px; bottom: -150px; border: 55px solid #ffd40014; border-radius: 50%; }  .register-brand { position: relative; z-index: 2; display: flex; align-items: center; gap: 13px; } .register-brand-icon { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 3px solid #ffd400; border-radius: 50%; background: #ffffff1a; color: #fff; font-size: 23px; font-weight: 900; } .register-brand h1 { margin: 0; font-size: 27px; font-weight: 900; } .register-brand span { display: block; margin-top: 5px; color: #fffc; font-size: 9px; font-weight: 800; letter-spacing: 1.8px; }  .register-info-content { position: relative; z-index: 2; max-width: 470px; } .register-badge { width: fit-content; margin-bottom: 22px; padding: 8px 12px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #fff3; border-radius: 100px; background: #ffffff1a; color: #fff; font-size: 11px; font-weight: 700; } .register-info-content h2 { margin: 0; font-size: 41px; line-height: 1.1; letter-spacing: -1.5px; font-weight: 900; } .register-info-content h2 span { display: block; color: #ffd400; } .register-info-content > p { margin: 20px 0 30px; color: #fffc; font-size: 14px; line-height: 1.8; }  .register-benefits { display: flex; flex-direction: column; gap: 17px; } .register-benefit { display: flex; align-items: center; gap: 13px; } .benefit-icon { width: 43px; height: 43px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 11px; background: #ffffff1f; color: #ffd400; } .register-benefit strong { display: block; color: #fff; font-size: 13px; } .register-benefit span { display: block; margin-top: 3px; color: #ffffffa1; font-size: 11px; }  .register-info-footer { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; color: #ffffff8c; font-size: 10px; } .register-info-footer div { display: flex; gap: 14px; } .register-info-footer a { color: #ffffffb8; text-decoration: none; } .register-info-footer a:hover { color: #ffd400; }  .register-card { padding: 45px 55px; display: flex; flex-direction: column; justify-content: center; background: #fff; } .mobile-register-brand { display: none; } .register-header { margin-bottom: 25px; } .register-welcome { display: inline-block; margin-bottom: 7px; color: #ed1c24; font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: 1px; } .register-header h2 { margin: 0; color: #111827; font-size: 29px; font-weight: 850; letter-spacing: -.8px; } .register-header p { margin: 8px 0 0; color: #6b7280; font-size: 12px; }  .register-alert { margin-bottom: 15px; padding: 10px 12px; border: 1px solid #fecaca; border-radius: 9px; background: #fef2f2; color: #dc2626; font-size: 11px; font-weight: 600; }  .register-form { display: flex; flex-direction: column; gap: 15px; } .register-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .register-form-group { display: flex; flex-direction: column; } .register-form-group label { margin-bottom: 7px; color: #252b35; font-size: 11px; font-weight: 750; } .register-input { height: 48px; padding: 0 13px; display: flex; align-items: center; gap: 9px; border: 1px solid #dfe3e8; border-radius: 10px; background: #fafbfc; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; } .register-input svg { flex-shrink: 0; color: #9ca3af; } .register-input:focus-within { border-color: #ed1c24; background: #fff; box-shadow: 0 0 0 4px #ed1c2412; } .register-input:focus-within > svg { color: #ed1c24; } .register-input input { width: 100%; height: 100%; border: 0; outline: 0; background: transparent; color: #111827; font-size: 12px; } .register-input input::placeholder { color: #a1a8b0; } .register-input.has-error { border-color: #ef4444; } .register-password-toggle { padding: 4px; display: flex; border: 0; background: transparent; color: #9ca3af; cursor: pointer; } .register-password-toggle:hover { color: #ed1c24; } .register-error { margin-top: 5px; color: #dc2626; font-size: 10px; font-weight: 600; }  .password-strength { margin-top: 7px; } .strength-bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; } .strength-bars span { height: 3px; border-radius: 10px; background: #e5e7eb; } .strength-bars span.filled { background: #ed1c24; } .strength-info { margin-top: 5px; display: flex; justify-content: space-between; font-size: 9px; } .strength-info span { color: #9ca3af; } .strength-info strong { color: #ed1c24; } .password-match { margin-top: 5px; display: flex; align-items: center; gap: 4px; color: #16a34a; font-size: 10px; font-weight: 700; }  .terms-section { margin-top: 2px; } .terms-checkbox { display: flex; align-items: flex-start; gap: 8px; color: #6b7280; font-size: 10px; line-height: 1.5; cursor: pointer; } .terms-checkbox input { display: none; } .terms-box { width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid #d1d5db; border-radius: 5px; color: transparent; } .terms-checkbox input:checked + .terms-box { border-color: #ed1c24; background: #ed1c24; color: #fff; } .terms-checkbox a { color: #ed1c24; font-weight: 700; text-decoration: none; }  .register-submit { height: 51px; display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; background: linear-gradient(135deg, #ed1c24, #c81018); color: #fff; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 20px #ed1c2433; transition: transform .2s ease, box-shadow .2s ease; } .register-submit:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 11px 25px #ed1c2445; } .register-submit:disabled { opacity: .7; cursor: not-allowed; } .register-loading { animation: register-spin .8s linear infinite; } @keyframes register-spin { to { transform: rotate(360deg); } }  .register-divider { margin: 20px 0 12px; display: flex; align-items: center; justify-content: center; color: #9ca3af; font-size: 10px; }  .back-login { height: 43px; display: flex; align-items: center; justify-content: center; gap: 7px; border: 1px solid #e1e5e9; border-radius: 9px; color: #374151; background: #fff; text-decoration: none; font-size: 11px; font-weight: 750; transition: background .2s ease, border-color .2s ease, color .2s ease; } .back-login:hover { border-color: #ed1c24; background: #fff7f7; color: #ed1c24; }  @media (max-width: 900px) { .register-page { min-height: calc(100vh - 72px); padding: 30px 20px; } .register-container { max-width: 720px; grid-template-columns: 1fr; } .register-info { display: none; } .register-card { padding: 45px 50px; } .mobile-register-brand { margin-bottom: 30px; display: flex; align-items: center; justify-content: center; gap: 11px; } .mobile-register-brand .register-brand-icon { width: 43px; height: 43px; border: 0; background: #ed1c24; } .mobile-register-brand h1 { margin: 0; color: #ed1c24; font-size: 23px; } .mobile-register-brand span { display: block; margin-top: 4px; color: #6b7280; font-size: 8px; font-weight: 800; letter-spacing: 1.3px; } }  @media (max-width: 600px) { .register-page { min-height: calc(100vh - 66px); padding: 15px 10px; } .register-container { min-height: auto; border-radius: 18px; } .register-card { padding: 30px 20px; } .mobile-register-brand { margin-bottom: 25px; } .register-header h2 { font-size: 24px; } .register-header p { line-height: 1.6; } .register-form { gap: 14px; } .register-form-row { grid-template-columns: 1fr; gap: 14px; } .register-input { height: 49px; } .register-submit { height: 50px; } }  @media (max-width: 400px) { .register-page { padding: 8px; } .register-card { padding: 25px 15px; } .register-header h2 { font-size: 22px; } .register-welcome { font-size: 10px; } }  :root { --bg-primary: #f5f7fc; --bg-secondary: #fff; --bg-sidebar: #0b1124; --bg-sidebar-hover: #1a2340; --bg-card: #fff; --text-primary: #0f172a; --text-secondary: #334155; --text-muted: #94a3b8; --text-sidebar: #b0c4de; --text-sidebar-active: #fff; --border-color: #e9edf4; --shadow-sm: 0 1px 2px #0000000a; --shadow-md: 0 8px 30px #0000000f; --shadow-lg: 0 20px 60px #0000001a; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --radius-full: 9999px; --transition: all .25s cubic-bezier(.4, 0, .2, 1); --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --accent: #3b82f6; --accent-hover: #2563eb; --accent-light: #eff6ff; --green: #10b981; --green-bg: #ecfdf5; --yellow: #f59e0b; --yellow-bg: #fffbeb; --red: #ef4444; --red-bg: #fef2f2; --blue: #3b82f6; --blue-bg: #eff6ff; --purple: #8b5cf6; --purple-bg: #f5f3ff; --gray: #64748b; --gray-bg: #f1f5f9; --status-dot-size: 8px; }  * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-sans); background: var(--bg-primary); color: var(--text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; } button { cursor: pointer; font-family: inherit; font-size: inherit; border: none; background: none; color: inherit; } input, select { font-family: inherit; font-size: inherit; outline: none; }  ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }  .admin-dashboard { display: flex; min-height: 100vh; background: var(--bg-primary); }  .admin-sidebar { width: 280px; background: var(--bg-sidebar); color: var(--text-sidebar); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; bottom: 0; z-index: 1000; padding: 0 16px 24px; transition: transform .3s cubic-bezier(.4, 0, .2, 1); overflow-y: auto; border-right: 1px solid #ffffff0d; } .admin-sidebar-top { display: flex; align-items: center; justify-content: space-between; padding: 24px 8px 20px; } .admin-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: white; } .admin-logo-icon { width: 40px; height: 40px; background: var(--accent); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 20px; color: white; box-shadow: 0 4px 12px #3b82f64d; } .admin-logo strong { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.5px; line-height: 1.2; } .admin-logo span { font-size: 9px; letter-spacing: 1.2px; opacity: .6; font-weight: 500; } .admin-mobile-close { display: none; color: var(--text-muted); padding: 8px; border-radius: var(--radius-sm); } .admin-mobile-close:hover { background: #ffffff0d; }  .admin-profile-mini { display: flex; align-items: center; gap: 14px; padding: 16px 12px; background: #ffffff0a; border-radius: var(--radius-md); margin-bottom: 24px; position: relative; } .admin-avatar { width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; color: white; flex-shrink: 0; } .admin-profile-mini strong { display: block; font-size: 14px; color: white; font-weight: 600; } .admin-profile-mini span { font-size: 12px; opacity: .6; } .online-dot { width: 10px; height: 10px; background: var(--green); border-radius: 50%; border: 2px solid var(--bg-sidebar); position: absolute; bottom: 12px; left: 42px; }  .navigation-title { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; opacity: .4; padding: 16px 12px 8px; font-weight: 600; } .management-title { margin-top: 12px; } .admin-nav-item { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: var(--radius-sm); width: 100%; transition: var(--transition); font-weight: 500; font-size: 14px; color: var(--text-sidebar); position: relative; margin-bottom: 2px; } .admin-nav-item:hover { background: var(--bg-sidebar-hover); color: white; } .admin-nav-item.active { background: var(--accent); color: white; box-shadow: 0 4px 12px #3b82f64d; } .admin-nav-item svg { flex-shrink: 0; opacity: .7; } .admin-nav-item.active svg { opacity: 1; } .admin-nav-item b { margin-left: auto; background: #ffffff26; padding: 0 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: 600; line-height: 20px; } .admin-nav-item.active b { background: #fff3; } .admin-nav-item svg:last-child { margin-left: auto; opacity: .5; }  .admin-sidebar-bottom { margin-top: auto; padding-top: 16px; border-top: 1px solid #ffffff0f; } .admin-security-card { display: flex; align-items: center; gap: 12px; padding: 14px 12px; background: #ffffff0a; border-radius: var(--radius-sm); margin-bottom: 16px; } .security-icon { width: 34px; height: 34px; border-radius: var(--radius-full); background: #10b98126; display: flex; align-items: center; justify-content: center; color: var(--green); } .admin-security-card strong { display: block; font-size: 13px; color: white; } .admin-security-card span { font-size: 12px; opacity: .5; } .admin-logout { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius-sm); width: 100%; color: var(--text-sidebar); font-weight: 500; transition: var(--transition); } .admin-logout:hover { background: #ef44441f; color: #f87171; }  .admin-main { flex: 1; margin-left: 280px; padding: 24px 32px 40px; min-height: 100vh; background: var(--bg-primary); }  .admin-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 0 24px; flex-wrap: wrap; gap: 16px; } .admin-header-left { display: flex; align-items: center; gap: 16px; } .admin-menu-toggle { display: none; padding: 8px; border-radius: var(--radius-sm); background: var(--bg-secondary); box-shadow: var(--shadow-sm); color: var(--text-primary); } .admin-header-label { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); font-weight: 600; } .admin-header h1 { font-size: 24px; font-weight: 700; letter-spacing: -.5px; line-height: 1.2; color: var(--text-primary); } .admin-header-right { display: flex; align-items: center; gap: 16px; } .admin-search { display: flex; align-items: center; gap: 10px; background: var(--bg-secondary); padding: 6px 16px; border-radius: var(--radius-full); border: 1px solid var(--border-color); transition: var(--transition); box-shadow: var(--shadow-sm); } .admin-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px #3b82f626; } .admin-search input { border: none; background: transparent; padding: 8px 0; width: 180px; font-size: 14px; color: var(--text-primary); } .admin-search input::placeholder { color: var(--text-muted); } .admin-search svg { color: var(--text-muted); }  .notification-wrapper { position: relative; } .admin-notification { width: 42px; height: 42px; border-radius: var(--radius-full); background: var(--bg-secondary); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; position: relative; transition: var(--transition); box-shadow: var(--shadow-sm); } .admin-notification:hover { border-color: var(--accent); } .admin-notification span { position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; background: var(--red); border-radius: 50%; border: 2px solid var(--bg-secondary); } .notification-panel { position: absolute; right: 0; top: 56px; width: 340px; background: var(--bg-secondary); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); padding: 16px 0; z-index: 100; animation: slideDown .2s ease; } @keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .notification-header { display: flex; justify-content: space-between; padding: 0 16px 12px; border-bottom: 1px solid var(--border-color); } .notification-header strong { font-size: 14px; } .notification-header span { font-size: 12px; color: var(--accent); font-weight: 600; } .notification-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; transition: var(--transition); font-size: 14px; } .notification-item:hover { background: var(--accent-light); } .notification-item > div { width: 30px; height: 30px; border-radius: var(--radius-full); background: var(--accent-light); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }  .admin-user-wrapper { position: relative; } .admin-user-button { display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: var(--radius-full); background: var(--bg-secondary); border: 1px solid var(--border-color); transition: var(--transition); box-shadow: var(--shadow-sm); } .admin-user-button:hover { border-color: var(--accent); } .admin-header-avatar { width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--accent); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; color: white; } .admin-user-info { text-align: left; line-height: 1.3; } .admin-user-info strong { display: block; font-size: 13px; font-weight: 600; } .admin-user-info span { font-size: 11px; color: var(--text-muted); } .admin-profile-menu { position: absolute; right: 0; top: 56px; width: 220px; background: var(--bg-secondary); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); border: 1px solid var(--border-color); padding: 8px 0; z-index: 100; animation: slideDown .2s ease; } .admin-profile-menu button { display: flex; align-items: center; gap: 12px; padding: 10px 16px; width: 100%; font-size: 14px; transition: var(--transition); color: var(--text-secondary); } .admin-profile-menu button:hover { background: var(--accent-light); color: var(--accent); } .admin-profile-menu button:last-child { color: var(--red); border-top: 1px solid var(--border-color); margin-top: 4px; padding-top: 12px; } .admin-profile-menu button:last-child:hover { background: var(--red-bg); }  .admin-content { padding-top: 8px; }  .admin-welcome { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; } .admin-welcome span { font-size: 13px; color: var(--text-muted); font-weight: 500; } .admin-welcome h2 { font-size: 28px; font-weight: 700; letter-spacing: -.5px; margin: 4px 0 6px; } .admin-welcome p { color: var(--text-secondary); font-size: 15px; }  .admin-primary-button { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: white; padding: 10px 20px; border-radius: var(--radius-full); font-weight: 600; font-size: 14px; transition: var(--transition); box-shadow: 0 4px 14px #3b82f640; } .admin-primary-button:hover { background: var(--accent-hover); transform: translateY(-1px); box-shadow: 0 6px 20px #3b82f659; } .admin-secondary-button { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-secondary); color: var(--text-primary); padding: 10px 20px; border-radius: var(--radius-full); font-weight: 600; font-size: 14px; border: 1px solid var(--border-color); transition: var(--transition); } .admin-secondary-button:hover { background: var(--bg-primary); border-color: var(--text-muted); } .admin-danger-button { display: inline-flex; align-items: center; gap: 8px; background: var(--red); color: white; padding: 10px 24px; border-radius: var(--radius-full); font-weight: 600; font-size: 14px; text-decoration: none; transition: var(--transition); } .admin-danger-button:hover { background: #dc2626; }  .admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 28px; } .admin-stat-card { background: var(--bg-secondary); border-radius: var(--radius-md); padding: 20px 24px; box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); transition: var(--transition); } .admin-stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .stat-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .stat-icon { width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--accent-light); display: flex; align-items: center; justify-content: center; color: var(--accent); } .stat-title { font-size: 14px; color: var(--text-secondary); font-weight: 500; display: block; margin-bottom: 8px; } .stat-bottom { display: flex; align-items: baseline; gap: 12px; } .stat-bottom strong { font-size: 26px; font-weight: 700; letter-spacing: -.5px; } .stat-positive { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--green); background: var(--green-bg); padding: 2px 10px; border-radius: var(--radius-full); } .stat-negative { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--red); background: var(--red-bg); padding: 2px 10px; border-radius: var(--radius-full); } .stat-period { font-size: 12px; color: var(--text-muted); display: block; margin-top: 8px; }  .admin-main-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; margin-bottom: 28px; } .admin-side-panels { display: flex; flex-direction: column; gap: 24px; }  .admin-panel { background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); padding: 20px 24px; transition: var(--transition); } .admin-panel:hover { box-shadow: var(--shadow-md); } .panel-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; } .panel-header h3 { font-size: 16px; font-weight: 600; } .panel-header span { font-size: 13px; color: var(--text-muted); display: block; margin-top: 2px; } .panel-action { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--accent); transition: var(--transition); white-space: nowrap; } .panel-action:hover { gap: 8px; }  .quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .quick-action-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--bg-primary); transition: var(--transition); border: 1px solid transparent; } .quick-action-row:hover { background: var(--accent-light); border-color: var(--accent); } .quick-icon { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--bg-secondary); display: flex; align-items: center; justify-content: center; color: var(--accent); } .quick-action-row span { font-weight: 500; font-size: 13px; flex: 1; } .quick-action-row svg:last-child { color: var(--text-muted); opacity: .5; }  .activity-list { display: flex; flex-direction: column; gap: 12px; } .activity-item { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--border-color); } .activity-item:last-child { border-bottom: none; } .activity-icon { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--accent-light); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; } .activity-content { flex: 1; } .activity-content strong { display: block; font-size: 14px; font-weight: 600; } .activity-content span { font-size: 13px; color: var(--text-secondary); display: block; } .activity-content small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); margin-top: 4px; }  .admin-bottom-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }  .responsive-table { overflow-x: auto; margin-top: 4px; } .advanced-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; } .advanced-table th { text-align: left; padding: 12px 12px 12px 0; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); border-bottom: 1px solid var(--border-color); } .advanced-table td { padding: 14px 12px 14px 0; border-bottom: 1px solid var(--border-color); vertical-align: middle; } .advanced-table tr:last-child td { border-bottom: none; } .advanced-table tbody tr { transition: var(--transition); } .advanced-table tbody tr:hover { background: var(--bg-primary); } .table-muted { display: block; font-size: 13px; color: var(--text-muted); } .person-cell { display: flex; align-items: center; gap: 10px; } .table-avatar { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--accent-light); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; color: var(--accent); flex-shrink: 0; } .contact-cell { display: flex; flex-direction: column; gap: 2px; } .contact-cell span { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); } .route-modern { display: flex; align-items: center; gap: 6px; font-size: 13px; } .route-modern span { color: var(--text-secondary); } .route-modern svg { color: var(--text-muted); } .date-modern { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); } .table-view-button { width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--bg-primary); display: flex; align-items: center; justify-content: center; transition: var(--transition); color: var(--text-muted); } .table-view-button:hover { background: var(--accent-light); color: var(--accent); } .table-actions { display: flex; gap: 4px; } .table-actions button { width: 30px; height: 30px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: var(--text-muted); transition: var(--transition); } .table-actions button:hover { background: var(--bg-primary); color: var(--text-primary); }  .admin-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px 4px 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: 600; text-transform: capitalize; } .admin-status i { width: var(--status-dot-size); height: var(--status-dot-size); border-radius: 50%; display: inline-block; flex-shrink: 0; }  .admin-status.confirmed i { background: var(--blue); } .admin-status.confirmed { background: var(--blue-bg); color: var(--blue); } .admin-status.in-transit i { background: var(--purple); } .admin-status.in-transit { background: var(--purple-bg); color: var(--purple); } .admin-status.completed i { background: var(--green); } .admin-status.completed { background: var(--green-bg); color: var(--green); } .admin-status.pending i { background: var(--yellow); } .admin-status.pending { background: var(--yellow-bg); color: var(--yellow); } .admin-status.active i { background: var(--green); } .admin-status.active { background: var(--green-bg); color: var(--green); } .admin-status.inactive i { background: var(--gray); } .admin-status.inactive { background: var(--gray-bg); color: var(--gray); } .admin-status.available i { background: var(--green); } .admin-status.available { background: var(--green-bg); color: var(--green); } .admin-status.on-trip i { background: var(--purple); } .admin-status.on-trip { background: var(--purple-bg); color: var(--purple); } .admin-status.maintenance i { background: var(--red); } .admin-status.maintenance { background: var(--red-bg); color: var(--red); } .admin-status.new i { background: var(--blue); } .admin-status.new { background: var(--blue-bg); color: var(--blue); } .admin-status.in-progress i { background: var(--yellow); } .admin-status.in-progress { background: var(--yellow-bg); color: var(--yellow); } .admin-status.resolved i { background: var(--green); } .admin-status.resolved { background: var(--green-bg); color: var(--green); }  .admin-page-section { margin-bottom: 32px; } .page-title-row { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; } .page-kicker { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-muted); font-weight: 600; } .page-title-row h2 { font-size: 24px; font-weight: 700; letter-spacing: -.5px; margin: 2px 0 4px; } .page-title-row p { color: var(--text-secondary); font-size: 15px; }  .management-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } .mini-stat { display: flex; align-items: center; gap: 14px; background: var(--bg-secondary); padding: 14px 20px; border-radius: var(--radius-md); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); } .mini-stat-icon { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--accent-light); display: flex; align-items: center; justify-content: center; color: var(--accent); } .mini-stat span { display: block; font-size: 13px; color: var(--text-muted); } .mini-stat strong { font-size: 18px; font-weight: 700; }  .admin-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; } .toolbar-search { display: flex; align-items: center; gap: 10px; background: var(--bg-primary); padding: 4px 14px; border-radius: var(--radius-full); border: 1px solid var(--border-color); flex: 1; min-width: 200px; } .toolbar-search input { border: none; background: transparent; padding: 8px 0; width: 100%; font-size: 14px; } .toolbar-search svg { color: var(--text-muted); } .toolbar-actions { display: flex; gap: 8px; } .toolbar-actions button { display: flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: var(--radius-full); background: var(--bg-primary); font-size: 13px; font-weight: 500; border: 1px solid var(--border-color); transition: var(--transition); color: var(--text-secondary); } .toolbar-actions button:hover { background: var(--bg-secondary); border-color: var(--text-muted); }  .service-management-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; } .service-management-card { background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); padding: 20px 22px; transition: var(--transition); box-shadow: var(--shadow-sm); } .service-management-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .service-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } .large-service-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--accent-light); display: flex; align-items: center; justify-content: center; color: var(--accent); } .service-management-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 6px; } .service-management-card p { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; } .service-card-data { display: flex; gap: 20px; padding: 12px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); margin-bottom: 16px; } .service-card-data div span { display: block; font-size: 12px; color: var(--text-muted); } .service-card-data div strong { font-size: 16px; } .service-card-footer { display: flex; justify-content: space-between; align-items: center; } .active-label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--green); } .active-label i { width: 8px; height: 8px; background: var(--green); border-radius: 50%; display: inline-block; } .service-card-footer button { display: flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--accent); }  .vehicle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; } .vehicle-card { background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); padding: 20px 22px; transition: var(--transition); box-shadow: var(--shadow-sm); } .vehicle-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .vehicle-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .vehicle-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--purple-bg); display: flex; align-items: center; justify-content: center; color: var(--purple); } .vehicle-id { font-size: 12px; color: var(--text-muted); font-weight: 500; } .vehicle-card h3 { font-size: 18px; font-weight: 700; letter-spacing: .5px; } .vehicle-card p { font-size: 14px; color: var(--text-secondary); margin: 4px 0 12px; } .vehicle-details { display: flex; gap: 16px; margin-bottom: 16px; } .vehicle-details span { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); } .vehicle-manage { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent); font-size: 14px; }  .location-overview { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; } .location-card { background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); padding: 20px 22px; transition: var(--transition); box-shadow: var(--shadow-sm); } .location-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .location-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .location-large-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--green-bg); display: flex; align-items: center; justify-content: center; color: var(--green); } .location-card h3 { font-size: 18px; font-weight: 700; } .location-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 12px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); margin: 12px 0 16px; } .location-metrics div { text-align: center; } .location-metrics strong { display: block; font-size: 18px; } .location-metrics span { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; } .location-card button { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--accent); font-size: 14px; }  .staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; } .staff-card { background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); padding: 20px 22px; transition: var(--transition); box-shadow: var(--shadow-sm); text-align: center; } .staff-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .staff-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .staff-avatar { width: 52px; height: 52px; border-radius: var(--radius-full); background: var(--accent-light); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; color: var(--accent); margin: 0 auto 8px; } .staff-card h3 { font-size: 16px; font-weight: 600; } .staff-role { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 12px; } .staff-contact { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; } .staff-contact span { display: flex; align-items: center; justify-content: center; gap: 6px; } .staff-actions { display: flex; gap: 8px; justify-content: center; } .staff-actions button { display: flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: var(--radius-full); background: var(--bg-primary); font-size: 13px; font-weight: 500; border: 1px solid var(--border-color); transition: var(--transition); } .staff-actions button:hover { background: var(--accent-light); border-color: var(--accent); color: var(--accent); }  .report-summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 24px; } .report-card { background: var(--bg-secondary); border-radius: var(--radius-md); border: 1px solid var(--border-color); padding: 20px 22px; box-shadow: var(--shadow-sm); transition: var(--transition); } .report-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .report-card-icon { width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--accent-light); display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: 12px; } .report-card span { font-size: 13px; color: var(--text-muted); display: block; } .report-card strong { font-size: 24px; font-weight: 700; display: block; margin: 4px 0; } .report-card small { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--green); font-weight: 500; } .reports-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }  .performance-chart { display: flex; gap: 12px; height: 200px; margin-top: 8px; } .chart-y-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 10px; color: var(--text-muted); padding-right: 8px; text-align: right; } .chart-area { flex: 1; position: relative; } .chart-grid-line { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border-color); } .chart-bars { display: flex; align-items: flex-end; justify-content: space-between; height: 100%; gap: 4px; } .chart-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; } .chart-bar span { width: 100%; max-width: 30px; background: var(--accent); border-radius: 4px 4px 0 0; transition: var(--transition); min-height: 4px; } .chart-bar:hover span { background: var(--accent-hover); opacity: .8; } .chart-bar small { font-size: 9px; color: var(--text-muted); }  .service-list { display: flex; flex-direction: column; gap: 14px; } .service-row { display: flex; align-items: center; gap: 14px; } .service-number { width: 28px; height: 28px; border-radius: var(--radius-full); background: var(--bg-primary); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--text-muted); flex-shrink: 0; } .service-info { flex: 1; } .service-info strong { display: block; font-size: 14px; } .service-progress { width: 100%; height: 6px; background: var(--bg-primary); border-radius: var(--radius-full); margin-top: 4px; overflow: hidden; } .service-progress span { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-full); } .service-row > strong { font-size: 14px; font-weight: 600; color: var(--text-secondary); min-width: 40px; text-align: right; }  .insight-list { display: flex; flex-direction: column; gap: 12px; } .insight-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-color); } .insight-item:last-child { border-bottom: none; } .insight-icon { width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--accent-light); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; } .insight-item strong { display: block; font-size: 14px; } .insight-item span { font-size: 13px; color: var(--text-secondary); }  .settings-layout { display: grid; grid-template-columns: 220px 1fr; gap: 24px; } .settings-nav { display: flex; flex-direction: column; gap: 4px; } .settings-nav button { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: var(--radius-sm); font-weight: 500; font-size: 14px; transition: var(--transition); color: var(--text-secondary); } .settings-nav button:hover { background: var(--bg-primary); } .settings-nav button.active { background: var(--accent-light); color: var(--accent); font-weight: 600; } .settings-panel { padding: 28px 32px; } .settings-heading { margin-bottom: 24px; } .settings-heading h3 { font-size: 18px; font-weight: 600; } .settings-heading p { font-size: 14px; color: var(--text-muted); } .settings-form { display: flex; flex-direction: column; gap: 20px; } .setting-input { display: flex; flex-direction: column; gap: 4px; } .setting-input span { font-size: 14px; font-weight: 500; } .setting-input input { padding: 10px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-primary); font-size: 14px; transition: var(--transition); } .setting-input input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #3b82f61a; } .setting-toggle { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border-color); } .setting-toggle strong { display: block; font-size: 14px; } .setting-toggle span { font-size: 13px; color: var(--text-muted); } .toggle { width: 44px; height: 24px; border-radius: var(--radius-full); background: var(--gray); transition: var(--transition); position: relative; flex-shrink: 0; } .toggle.active { background: var(--accent); } .toggle span { display: block; width: 18px; height: 18px; background: white; border-radius: 50%; position: absolute; top: 3px; left: 3px; transition: var(--transition); } .toggle.active span { left: 23px; } .settings-actions { display: flex; gap: 12px; padding-top: 16px; border-top: 1px solid var(--border-color); }  .modal-overlay { position: fixed; inset: 0; background: #0f172a99; backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 20px; } .admin-modal { background: var(--bg-secondary); border-radius: var(--radius-lg); max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: modalIn .25s ease; } @keyframes modalIn { from { opacity: 0; transform: scale(.96) translateY(16px); } to { opacity: 1; transform: scale(1) translateY(0); } } .modal-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 24px 28px 16px; border-bottom: 1px solid var(--border-color); } .modal-header h3 { font-size: 20px; font-weight: 700; } .modal-header span { display: block; font-size: 14px; color: var(--text-muted); } .modal-header button { padding: 6px; border-radius: var(--radius-sm); color: var(--text-muted); transition: var(--transition); } .modal-header button:hover { background: var(--bg-primary); } .modal-body { padding: 24px 28px 28px; } .modal-footer { display: flex; justify-content: flex-end; gap: 12px; padding-top: 20px; border-top: 1px solid var(--border-color); margin-top: 20px; }  .admin-form { display: flex; flex-direction: column; gap: 16px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-field { display: flex; flex-direction: column; gap: 4px; } .form-field span { font-size: 13px; font-weight: 500; color: var(--text-secondary); } .form-field input, .form-field select { padding: 10px 14px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-primary); font-size: 14px; transition: var(--transition); } .form-field input:focus, .form-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #3b82f61a; }  .booking-detail-modal .detail-status { margin-bottom: 20px; } .booking-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .detail-box { background: var(--bg-primary); border-radius: var(--radius-sm); padding: 14px 18px; } .detail-box span { display: block; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .3px; } .detail-box strong { font-size: 16px; font-weight: 600; display: block; margin-top: 2px; }  .logout-confirm { text-align: center; padding: 12px 0; } .logout-warning { width: 64px; height: 64px; border-radius: var(--radius-full); background: var(--red-bg); display: flex; align-items: center; justify-content: center; color: var(--red); margin: 0 auto 16px; } .logout-confirm p { font-size: 15px; color: var(--text-secondary); margin-bottom: 24px; } .logout-confirm .modal-footer { justify-content: center; border-top: none; margin-top: 0; padding-top: 0; }  .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px; color: var(--text-muted); } .empty-state svg { margin-bottom: 12px; opacity: .5; } .empty-state strong { font-size: 16px; color: var(--text-secondary); }  .admin-overlay { position: fixed; inset: 0; background: #00000080; z-index: 999; display: none; }  @media (max-width: 1200px) { .admin-stats { grid-template-columns: repeat(2, 1fr); } .admin-main-grid { grid-template-columns: 1fr; } .admin-bottom-grid { grid-template-columns: 1fr; } .report-summary-grid { grid-template-columns: repeat(2, 1fr); } .reports-grid { grid-template-columns: 1fr; } .settings-layout { grid-template-columns: 1fr; } } @media (max-width: 992px) { .admin-sidebar { transform: translateX(-100%); } .admin-sidebar.sidebar-open { transform: translateX(0); } .admin-overlay { display: block; } .admin-mobile-close { display: block; } .admin-main { margin-left: 0; padding: 16px 20px 32px; } .admin-menu-toggle { display: flex; } .admin-search input { width: 120px; } } @media (max-width: 768px) { .admin-stats { grid-template-columns: 1fr 1fr; } .management-stats { grid-template-columns: 1fr 1fr; } .admin-header-right { width: 100%; justify-content: flex-start; } .admin-search { flex: 1; } .admin-search input { width: 100%; } .admin-user-info { display: none; } .admin-user-button { padding: 4px; } .form-row { grid-template-columns: 1fr; } .booking-detail-grid { grid-template-columns: 1fr; } .page-title-row { flex-direction: column; } .admin-welcome { flex-direction: column; } .admin-welcome button { align-self: flex-start; } .report-summary-grid { grid-template-columns: 1fr 1fr; } .notification-panel { width: 300px; right: -40px; } .admin-profile-menu { right: -20px; } } @media (max-width: 480px) { .admin-stats { grid-template-columns: 1fr; } .management-stats { grid-template-columns: 1fr; } .report-summary-grid { grid-template-columns: 1fr; } .quick-actions { grid-template-columns: 1fr; } .admin-modal { margin: 10px; max-height: 95vh; } .modal-body { padding: 16px; } .modal-header { padding: 16px; } }.footer { position: relative; width: 100%; background: #151515; color: #fff; overflow: hidden; } .footer-main { position: relative; padding: 75px 0 60px; } .footer-main::before { content: ""; position: absolute; top: -220px; left: -180px; width: 450px; height: 450px; border-radius: 50%; background: #c6282814; pointer-events: none; } .footer-main::after { content: ""; position: absolute; right: -220px; bottom: -250px; width: 500px; height: 500px; border-radius: 50%; background: #c628280f; pointer-events: none; } .footer-container { position: relative; z-index: 2; width: min(1200px, 92%); margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1.3fr; gap: 55px; } .footer-column { min-width: 0; } .footer-brand { max-width: 360px; } .footer-logo { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1; } .footer-logo-main { color: #fff; font-size: 32px; font-weight: 800; letter-spacing: -1px; } .footer-logo-sub { margin-top: 7px; color: #c62828; font-size: 9px; font-weight: 800; letter-spacing: 2.4px; } .footer-description { margin: 22px 0 24px; color: #a9a9a9; font-size: 13px; line-height: 1.8; } .footer-location { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; transition: .25s ease; } .footer-location:hover { color: #e34b4b; } .footer-contact-icon { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: #c6282821; color: #e33a3a; } .footer-location span:last-child { display: flex; flex-direction: column; gap: 3px; } .footer-location strong { font-size: 12px; font-weight: 700; } .footer-location small { color: #929292; font-size: 11px; } .footer-social { margin-top: 28px; } .footer-social h3 { margin: 0 0 13px; color: #fff; font-size: 13px; font-weight: 700; } .social-icons { display: flex; align-items: center; gap: 9px; } .social-icons button { width: 37px; height: 37px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid #343434; border-radius: 8px; background: #202020; color: #b7b7b7; cursor: pointer; transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease; } .social-icons button:hover { transform: translateY(-4px); background: #c62828; border-color: #c62828; color: #fff; } .footer-heading { position: relative; margin: 0 0 23px; padding-bottom: 13px; color: #fff; font-size: 15px; font-weight: 750; } .footer-heading::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 2px; border-radius: 10px; background: #c62828; } .footer-links { display: flex; flex-direction: column; gap: 13px; margin: 0; padding: 0; list-style: none; } .footer-links li { margin: 0; } .footer-links a { display: inline-flex; align-items: center; gap: 7px; color: #9d9d9d; text-decoration: none; font-size: 12px; transition: .22s ease; } .footer-links a svg { width: 10px; height: 10px; color: #c62828; opacity: 0; transform: translateX(-5px); transition: .22s ease; } .footer-links a:hover { color: #fff; transform: translateX(3px); } .footer-links a:hover svg { opacity: 1; transform: translateX(0); } .footer-contact { display: flex; flex-direction: column; } .contact-item { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; color: #fff; text-decoration: none; } .contact-icon { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid #333; border-radius: 8px; background: #202020; color: #d63a3a; transition: .25s ease; } .contact-item:hover .contact-icon { background: #c62828; border-color: #c62828; color: #fff; } .contact-item span:last-child { display: flex; flex-direction: column; gap: 3px; } .contact-item small { color: #777; font-size: 10px; } .contact-item strong { color: #d0d0d0; font-size: 12px; font-weight: 600; } .footer-quote-box { margin-top: 7px; padding: 19px; border: 1px solid #303030; border-radius: 11px; background: #1c1c1c; } .footer-quote-box h4 { margin: 0 0 7px; color: #fff; font-size: 14px; } .footer-quote-box p { margin: 0 0 14px; color: #8f8f8f; font-size: 11px; line-height: 1.6; } .footer-quote-button { height: 38px; padding: 0 13px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 7px; background: #c62828; color: #fff; text-decoration: none; font-size: 11px; font-weight: 700; transition: .25s ease; } .footer-quote-button:hover { background: #e03a3a; transform: translateY(-1px); } .footer-quote-button svg { font-size: 10px; } .footer-bottom { position: relative; z-index: 3; border-top: 1px solid #2d2d2d; background: #111; } .footer-bottom-container { width: min(1200px, 92%); min-height: 67px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .footer-bottom p { margin: 0; color: #777; font-size: 11px; } .footer-bottom p strong { color: #a9a9a9; } .footer-bottom-links { display: flex; align-items: center; gap: 10px; } .footer-bottom-links a { color: #777; text-decoration: none; font-size: 11px; transition: .2s ease; } .footer-bottom-links a:hover { color: #d63a3a; } .footer-bottom-links span { color: #444; font-size: 10px; } @media (max-width: 1100px) { .footer-container { grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; } .footer-contact { grid-column: span 1; } } @media (max-width: 850px) { .footer-main { padding: 60px 0 50px; } .footer-container { grid-template-columns: 1fr 1fr; gap: 45px 35px; } .footer-brand { max-width: 100%; grid-column: span 2; } .footer-contact { grid-column: span 1; } } @media (max-width: 600px) { .footer-main { padding: 50px 0 40px; } .footer-container { width: 90%; grid-template-columns: 1fr; gap: 38px; } .footer-brand, .footer-contact { grid-column: auto; } .footer-logo-main { font-size: 29px; } .footer-bottom-container { width: 90%; min-height: auto; padding: 20px 0; flex-direction: column; justify-content: center; text-align: center; gap: 12px; } .footer-bottom-links { justify-content: center; flex-wrap: wrap; } } @media (max-width: 380px) { .footer-main { padding: 45px 0 35px; } .footer-container { width: 88%; } .social-icons { gap: 7px; } .social-icons button { width: 35px; height: 35px; } .footer-bottom p { line-height: 1.6; } }* { box-sizing: border-box; margin: 0; padding: 0; } body { margin: 0; padding: 0; background-color: #f8fafc; color: #111; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; });border-radius:50%;width:45px;height:45px}