/* ! 🔥 💪🏻 Bn Ramadan fullstack MERN project 2 ( E-commerce fullstack app ) */
/* ! " The end of this project is the completing of future successes and creativity , Just strive, be patient, commit and keep going. " */
/* ! 🔥 💪🏻 Always forward ! 💪🏻 🔥 */*,body{margin:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-family:Poppins}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}

/* ! 🔥 💪🏻 Bn Ramadan fullstack MERN project 2 ( E-commerce fullstack app ) */
/* ! " The end of this project is the completing of future successes and creativity , Just strive, be patient, commit and keep going. " */
/* ! 🔥 💪🏻 Always forward ! 💪🏻 🔥 */.App{align-items:center;background:linear-gradient(135deg,#1e1e2c,#282c34,#1e1e2c);color:#fff;display:flex;flex-direction:column;justify-content:center;min-height:100vh;overflow:hidden;position:relative;text-align:center}.App-logo{animation:App-logo-bounce 3s ease-in-out infinite;height:35vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 10s linear infinite,App-logo-bounce 3s ease-in-out infinite}}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes App-logo-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}.App-header{align-items:center;background:radial-gradient(circle,#282c34cc,#1e1e2ccc);border-radius:20px;box-shadow:0 5px 15px #0000004d;color:#fff;display:flex;flex-direction:column;font-size:calc(12px + 2vmin);gap:20px;justify-content:center;margin:auto;max-width:90%;padding:20px}.App-link{background:#20232a;border-radius:10px;box-shadow:0 5px 10px #0003;color:#61dafb;font-size:calc(12px + 1vmin);padding:10px 20px;text-decoration:none;transition:all .3s ease}.App-link:hover{background:#61dafb;box-shadow:0 8px 15px #0000004d;color:#fff;transform:translateY(-3px)}

/* ! 🔥 💪🏻 Bn Ramadan fullstack MERN project 2 ( E-commerce fullstack app ) */
/* ! " The end of this project is the completing of future successes and creativity , Just strive, be patient, commit and keep going. " */
/* ! 🔥 💪🏻 Always forward ! 💪🏻 🔥 */.nav{align-items:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2;border-bottom:1px solid #7a7a7a1a;box-shadow:0 4px 20px #00000014;display:flex;justify-content:space-around;padding:16px;position:sticky;top:0;transition:all .4s ease;z-index:1000}.nav:hover{background:#fff}.nav-logo{align-items:center;display:flex;gap:10px;transition:all .3s cubic-bezier(.4,0,.2,1)}.nav-logo:hover{filter:drop-shadow(0 4px 6px rgba(0,0,0,.1));transform:scale(1.03) translateY(-2px)}.nav-logo p{-webkit-text-fill-color:#0000;background:linear-gradient(135deg,#ff4141,#ff7070);-webkit-background-clip:text;color:#171717;font-size:38px;font-weight:600;letter-spacing:-.5px;text-shadow:2px 2px 4px #0000001a}.nav-menu{color:#626262;font-size:20px;font-weight:500;gap:50px;list-style:none;padding:0}.nav-menu,.nav-menu li{align-items:center;display:flex}.nav-menu li{border-radius:8px;cursor:pointer;flex-direction:column;gap:3px;justify-content:center;padding:5px 10px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.nav-menu li:hover{background:#ff41410d;color:#ff4141;transform:translateY(-3px)}.nav-menu li:before{background:linear-gradient(90deg,#ff4141,#ff7070);border-radius:4px;bottom:-2px;content:"";height:2px;position:absolute;transition:width .3s ease-in-out;width:0}.nav-menu li:hover:before{width:80%}.nav-menu hr{display:none}.nav-login-cart{align-items:center;display:flex;gap:45px;position:relative}.nav-login-cart button{background:#fff;border:2px solid #0000;border-radius:75px;box-shadow:0 2px 10px #0000001a;color:#515151;cursor:pointer;font-size:20px;font-weight:500;height:58px;outline:none;overflow:hidden;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);width:157px}.nav-login-cart button:before{background:linear-gradient(135deg,#ff4141,#ff7070);border-radius:50%;content:"";height:150%;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:transform .6s ease;width:150%;z-index:-1}.nav-login-cart button:hover{border-color:#ff41414d;box-shadow:0 6px 15px #ff414140;color:#fff;transform:translateY(-3px)}.nav-login-cart button:hover:before{transform:translate(-50%,-50%) scale(1)}.nav-login-cart button:active{box-shadow:0 3px 8px #ff414133;transform:translateY(-1px)}.nav-cart-count{align-items:center;animation:pulse 2s infinite;background:linear-gradient(135deg,#ff4141,#ff7070);border-radius:12px;box-shadow:0 2px 8px #ff41414d;color:#fff;display:flex;font-size:14px;height:24px;justify-content:center;margin-left:-55px;margin-top:-35px;width:24px}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.nav-cart-count:hover{animation:shake .5s ease-in-out}@keyframes shake{0%,to{transform:rotate(0deg)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}.nav-dropdown{display:none;transition:all .5s cubic-bezier(.4,0,.2,1)}@media(max-width:1280px){.navbar{background:#fffffffa;padding:12px 50px}.nav-logo img{transition:all .3s ease;width:40px}.nav-logo p{font-size:25px}.nav-menu{font-size:16px;gap:30px}.nav-login-cart{gap:30px}.nav-login-cart button{font-size:16px;height:45px;width:120px}.nav-cart-count{font-size:12px;margin-left:-40px}}@media(max-width:1024px){.navbar{padding:12px 30px}.nav-menu{font-size:14px;gap:25px}.nav-login-cart button{font-size:14px;height:35px;width:80px}.nav-login-cart img{transition:transform .3s ease;width:30px}.nav-login-cart img:hover{transform:scale(1.1)}.nav-cart-count{height:18px;width:18px}}@media(max-width:800px){.navbar{padding:10px 0}.nav-dropdown{cursor:pointer;display:block;opacity:.8;rotate:-90deg;transition:all .5s cubic-bezier(.4,0,.2,1);width:30px}.nav-dropdown:hover{opacity:1;transform:scale(1.1) rotate(-90deg)}.nav-menu{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffffa;border-bottom:1px solid #7a7a7a1a;box-shadow:0 4px 20px #0000001a;display:none;height:80px;justify-content:center;position:absolute;top:50px;width:100%}.nav-menu-visible{animation:slideDown .4s cubic-bezier(.4,0,.2,1);display:flex}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.nav-dropdown.open{transform:rotate(90deg)}}@media(max-width:500px){.navbar{gap:0;padding:8px 0}.nav-logo{transform:scale(.8)}.nav-menu{height:70px;top:50px}.nav-login-cart{transform:scale(.8)}}

/* ! 🔥 💪🏻 Bn Ramadan fullstack MERN project 2 ( E-commerce fullstack app ) */
/* ! " The end of this project is the completing of future successes and creativity , Just strive, be patient, commit and keep going. " */
/* ! 🔥 💪🏻 Always forward ! 💪🏻 🔥 */.hero{background:linear-gradient(135deg,#fde1ff,#e1ffea22 60%,#ff41410d);display:flex;min-height:100vh;overflow:hidden;position:relative}.hero:before{animation:gradient-shift 15s linear infinite;background:radial-gradient(circle,#fde1ff4d 0,#0000 70%);content:"";height:150%;left:-25%;position:absolute;top:-25%;width:150%}@keyframes gradient-shift{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.hero-left{display:flex;flex:1 1;flex-direction:column;gap:40px;justify-content:center;line-height:1.1;padding-left:100px;position:relative;z-index:1}.hero-left h2{animation:slideUp .8s ease-out forwards;color:#090909;font-size:26px;font-weight:600;text-shadow:0 2px 4px #0000001a}.hero-left h2,.hero-left p{opacity:0;transform:translateY(20px)}.hero-left p{-webkit-text-fill-color:#0000;animation:slideUp .8s ease-out .2s forwards;background:linear-gradient(135deg,#171717,#ff4141);-webkit-background-clip:text;color:#171717;font-size:60px;font-weight:700;letter-spacing:-1px;text-shadow:2px 2px 4px #0000001a}@keyframes slideUp{to{opacity:1;transform:translateY(0)}}.hero-hand-icon{align-items:center;animation:slideUp .8s ease-out .4s forwards;display:flex;gap:20px;opacity:0;transform:translateY(20px)}.hero-hand-icon img{transition:transform .3s ease;width:80px}.hero-hand-icon img:hover{transform:rotate(15deg) scale(1.1)}.hero-latest-btn{align-items:center;animation:slideUp .8s ease-out .6s forwards;background:linear-gradient(135deg,#ff4141,#ff7070);border:none;border-radius:50px;box-shadow:0 4px 15px #ff414133;color:#fff;cursor:pointer;display:flex;font-size:20px;font-weight:500;gap:10px;height:60px;justify-content:center;margin-top:20px;opacity:0;overflow:hidden;position:relative;transform:translateY(20px);transition:all .3s cubic-bezier(.4,0,.2,1);width:260px}.hero-latest-btn:before{background:linear-gradient(135deg,#ff7070,#ff4141);content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .3s ease;width:100%}.hero-latest-btn:hover{box-shadow:0 6px 20px #ff41414d;transform:translateY(-3px)}.hero-latest-btn:hover:before{opacity:1}.hero-latest-btn:active{box-shadow:0 3px 10px #ff414140;transform:translateY(-1px)}.hero-right{align-items:center;display:flex;flex:1 1;justify-content:center;position:relative}.hero-right img{animation:slideIn 1s ease-out .8s forwards;filter:drop-shadow(0 10px 20px rgba(0,0,0,.15));opacity:0;transform:translateX(50px);transition:transform .5s cubic-bezier(.4,0,.2,1);width:65%}.hero-right img:hover{transform:scale(1.02) translateY(-5px)}@media(max-width:1280px){.hero-left{padding-left:100px}.hero-left h2{font-size:22px}.hero-left p{font-size:60px}.hero-hand-icon img{width:80px}.hero-latest-btn{font-size:18px;gap:10px;height:60px;margin-top:20px;width:250px}.hero-right img{width:500px}}@media(max-width:1024px){.hero-left{padding-left:80px}.hero-left h2{font-size:20px}.hero-left p{font-size:50px}.hero-hand-icon img{width:65px}.hero-latest-btn{font-size:16px;height:50px;width:220px}.hero-right img{width:400px}}@media(max-width:800px){.hero-left{padding-left:30px}.hero-left h2{font-size:16px}.hero-left p{font-size:40px}.hero-hand-icon img{width:50px}.hero-latest-btn{font-size:13px;height:40px;width:175px}.hero-right img{width:300px}}@media(max-width:500px){.hero{flex-direction:column;text-align:center}.hero-right{display:none}.hero-left{align-items:center;padding:0 20px}.hero-left h2{font-size:18px}.hero-left p{font-size:50px}.hero-hand-icon img{width:55px}.hero-latest-btn{font-size:14px;height:45px;width:200px}}

/* ! 🔥 💪🏻 Bn Ramadan fullstack MERN project 2 ( E-commerce fullstack app ) */
/* ! " The end of this project is the completing of future successes and creativity , Just strive, be patient, commit and keep going. " */
/* ! 🔥 💪🏻 Always forward ! 💪🏻 🔥 */.popular{align-items:center;background:linear-gradient(135deg,#f6f6f6,#fff,#f6f6f6);display:flex;flex-direction:column;gap:10px;height:100vh;overflow:hidden;padding:20px;position:relative}.popular:before{animation:rotateBackground 15s linear infinite;background:radial-gradient(circle,#fffc 0,#fff0 70%);content:"";height:200%;left:-50%;position:absolute;top:-50%;width:200%;z-index:1}.popular h1{color:#171717;font-size:50px;font-weight:600;padding-bottom:10px;position:relative;text-shadow:2px 2px 4px #0000001a;transition:all .4s cubic-bezier(.175,.885,.32,1.275);z-index:2}.popular h1:hover{color:#000;transform:translateY(-5px)}.popular h1:after{background:linear-gradient(90deg,#252525,#4a4a4a);border-radius:5px;bottom:0;content:"";height:3px;left:50%;position:absolute;transform:translateX(-50%);transition:width .4s ease;width:0}.popular h1:hover:after{width:100%}.popular hr{background:linear-gradient(90deg,#252525,#4a4a4a);border-radius:10px;box-shadow:0 2px 4px #0000001a;height:6px;transition:all .4s ease;width:200px;z-index:2}.popular hr:hover{box-shadow:0 4px 8px #00000026;transform:translateY(-2px);width:250px}.popular-item{display:flex;gap:30px;margin-top:20px;perspective:1000px;transition:all .4s ease;z-index:2}.popular-item>*{border-radius:15px;box-shadow:0 5px 15px #0000001a;overflow:hidden;position:relative;transform:scale(1) rotateY(0);transition:all .5s cubic-bezier(.175,.885,.32,1.275)}.popular-item>:before{background:linear-gradient(45deg,#ffffff1a,#fff0);content:"";height:100%;left:0;position:absolute;top:0;transition:all .4s ease;width:100%}.popular-item>:hover{box-shadow:0 8px 25px #00000026;transform:scale(1.05) rotateY(10deg)}.popular-item>:hover:before{transform:translateX(100%);transition:all .7s ease}@media(max-width:1280px){.popular{height:70vh}.popular h1{font-size:40px}.popular hr{height:4px;width:160px}.popular hr:hover{width:200px}.popular-item{gap:20px;margin-top:30px}}@media(max-width:1024px){.popular{height:60vh}.popular h1{font-size:30px}.popular hr{height:3px;width:120px}.popular hr:hover{width:150px}.popular-item{gap:15px;margin-top:20px}.popular-item>:hover{transform:scale(1.03) rotateY(5deg)}}@media(max-width:800px){.popular{gap:6px;height:50vh}.popular h1{font-size:20px}.popular hr{width:100px}.popular hr:hover{width:120px}.popular-item{gap:5px}}@media(max-width:500px){.popular{height:90vh}.popular-item{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr}.popular-item>:hover{transform:scale(1.02)}}

/* ! 🔥 💪🏻 Bn Ramadan fullstack MERN project 2 ( E-commerce fullstack app ) */
/* ! " The end of this project is the completing of future successes and creativity , Just strive, be patient, commit and keep going. " */
/* ! 🔥 💪🏻 Always forward ! 💪🏻 🔥 */.item{width:300px}.item p{margin:6px 0}.item_prices{display:flex;gap:20px}.item-price-new{color:#374151;font-size:18px;font-weight:600}.item-price-old{color:#8c8c8c;font-size:18px;font-weight:500;text-decoration:line-through}.item:hover{cursor:pointer;transform:scale(1.06);transition:.6s ease-in-out}.item img{width:100%}@media(max-width:1280px){.item{font-size:14px}.item,.item img{width:220px}.item-price-old{font-size:14px}}@media(max-width:1024px){.item{font-size:13px}.item,.item img{width:170px}.item-price-old{font-size:13px}}@media(max-width:800px){.item{font-size:12px}.item,.item img{width:120px}.item-price-old{font-size:12px}}@media(max-width:500px){.item,.item img{width:160px}}

/* ! 🔥 💪🏻 Bn Ramadan fullstack MERN project 2 ( E-commerce fullstack app ) */
/* ! " The end of this project is the completing of future successes and creativity , Just strive, be patient, commit and keep going. " */
/* ! 🔥 💪🏻 Always forward ! 💪🏻 🔥 */.offers{background:linear-gradient(180deg,#fde1ff,#e1ffea22 60%);border-radius:30px;box-shadow:0 10px 30px #fde1ff4d;display:flex;height:100vh;margin:100px auto;overflow:hidden;padding:40px 140px;position:relative;transition:all .3s ease;width:65%}.offers:before{animation:lightMove 8s linear infinite;background:radial-gradient(circle at 50% 50%,#fffc,#0000 60%);content:"";height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}@keyframes lightMove{0%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(0) scale(1.2)}to{transform:translate(-50%,-50%) scale(1)}}.offers-left{display:flex;flex:1 1;flex-direction:column;justify-content:center;position:relative;z-index:2}.offers-left h1{animation:slideIn .8s ease forwards;color:#171717;font-size:80px;font-weight:600;opacity:0;text-shadow:2px 2px 4px #0000001a;transform:translateX(-20px)}@keyframes slideIn{to{opacity:1;transform:translateX(0)}}.offers-left p{animation:slideIn .8s ease .2s forwards;color:#171717;margin:20px 0;transform:translateX(-20px)}.offers-left button,.offers-left p{font-size:22px;font-weight:500;opacity:0}.offers-left button{animation:buttonAppear .8s ease .4s forwards;background:linear-gradient(45deg,#ff4141,#ff6b6b);border:none;border-radius:34.5px;color:#fff;cursor:pointer;height:69px;margin-top:30px;overflow:hidden;position:relative;transform:translateY(20px);transition:all .3s ease;width:282px}@keyframes buttonAppear{to{opacity:1;transform:translateY(0)}}.offers-left button:before{background:linear-gradient(90deg,#0000,#fff3,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:.5s;width:100%}.offers-left button:hover{box-shadow:0 10px 20px #ff41414d;transform:translateY(-3px)}.offers-left button:hover:before{left:100%}.offers-right{align-items:center;display:flex;flex:1 1;justify-content:flex-end;padding-top:50px;position:relative;z-index:2}.offers-right img{animation:float 3s ease-in-out infinite;transform:translateY(0);transition:all .3s ease}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@media(max-width:1280px){.offers{height:40vh;margin-bottom:80px;padding:20px 60px}.offers-left h1{font-size:30px}.offers-left p{font-size:16px}.offers-right img{width:200px}.offers-left button{font-size:16px;height:40px;width:160px}.offers-right{padding-top:10px}}@media(max-width:800px){.offers{border-radius:20px;margin-bottom:60px}.offers-left h1{font-size:22px}.offers-left p{font-size:13px;margin:10px 0}.offers-right img{width:180px}.offers-left button{font-size:12px;height:30px;margin-top:15px;width:140px}}@media(max-width:500px){.offers{height:25vh;margin-bottom:50px;padding:15px 30px}.offers-left h1{font-size:16px}.offers-left p{font-size:10px}.offers-right img{width:120px}.offers-left button{font-size:10px;height:25px;margin-top:12px;width:120px}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}}

/* ! 🔥 💪🏻 Bn Ramadan fullstack MERN project 2 ( E-commerce fullstack app ) */
/* ! " The end of this project is the completing of future successes and creativity , Just strive, be patient, commit and keep going. " */
/* ! 🔥 💪🏻 Always forward ! 💪🏻 🔥 */.new-collections{align-items:center;display:flex;flex-direction:column;gap:10px;margin-bottom:100px;padding:20px 0;position:relative;z-index:2}.new-collections h1{color:#171717;font-size:50px;font-weight:600;padding-bottom:10px;position:relative;text-shadow:2px 2px 4px #0000001a;transition:all .4s cubic-bezier(.175,.885,.32,1.275);z-index:2}.new-collections h1:hover{color:#000;transform:translateY(-5px)}.new-collections h1:after{background:linear-gradient(90deg,#252525,#4a4a4a);border-radius:5px;bottom:0;content:"";height:3px;left:50%;position:absolute;transform:translateX(-50%);transition:width .4s ease;width:0}.new-collections h1:hover:after{width:100%}.new-collections hr{background:linear-gradient(90deg,#252525,#4a4a4a);border-radius:10px;box-shadow:0 2px 4px #0000001a;height:6px;transition:all .4s ease;width:200px;z-index:2}.new-collections hr:hover{box-shadow:0 4px 8px #00000026;transform:translateY(-2px);width:250px}.collections{grid-gap:30px;display:grid;gap:30px;grid-template-columns:1fr 1fr 1fr 1fr;margin:50px;perspective:1000px}.collections>*{border-radius:15px;box-shadow:0 5px 15px #0000001a;overflow:hidden;position:relative;transform:scale(1) rotateY(0);transition:all .5s cubic-bezier(.175,.885,.32,1.275)}.collections>:before{background:linear-gradient(45deg,#ffffff1a,#fff0);content:"";height:100%;left:0;position:absolute;top:0;transition:all .4s ease;width:100%}.collections>:hover{box-shadow:0 8px 25px #00000026;transform:scale(1.05) rotateY(10deg)}.collections>:hover:before{transform:translateX(100%);transition:all .7s ease}@media(max-width:1280px){.new-collections h1{font-size:40px}.new-collections hr{height:4px;width:160px}.new-collections hr:hover{width:200px}.collections{gap:20px;margin-top:30px}}@media(max-width:1024px){.new-collections{margin-bottom:60px}.new-collections h1{font-size:30px}.new-collections hr{height:3px;width:120px}.new-collections hr:hover{width:150px}.collections{gap:15px;margin-top:20px}.collections>:hover{transform:scale(1.03) rotateY(5deg)}}@media(max-width:800px){.new-collections{gap:6px}.new-collections h1{font-size:20px}.new-collections hr{width:100px}.new-collections hr:hover{width:120px}.collections{gap:5px}}@media(max-width:500px){.collections{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr;margin:30px 15px}.collections>:hover{transform:scale(1.02)}}

/* ! 🔥 💪🏻 Bn Ramadan fullstack MERN project 2 ( E-commerce fullstack app ) */
/* ! " The end of this project is the completing of future successes and creativity , Just strive, be patient, commit and keep going. " */
/* ! 🔥 💪🏻 Always forward ! 💪🏻 🔥 */.newsletter{align-items:center;background:linear-gradient(180deg,#fde1ff,#e1ffea22 60%);border-radius:20px;box-shadow:0 8px 20px #0000000d;display:flex;flex-direction:column;gap:20px;height:60vh;justify-content:center;margin:auto auto 100px;padding:0 80px;transition:transform .3s ease-in-out;width:70%}.newsletter:hover{transform:translateY(-5px)}.newsletter h1{color:#454545;font-size:45px;font-weight:600;text-align:center;transition:color .3s ease}.newsletter h1:hover{color:#333}.newsletter p{color:#454545;font-size:18px;line-height:1.6;max-width:800px;text-align:center}.newsletter div{align-items:center;background:#fff;border:1px solid #e3e3e3;border-radius:50px;box-shadow:0 2px 10px #00000005;display:flex;height:60px;justify-content:space-between;max-width:730px;transition:all .3s ease;width:100%}.newsletter div:focus-within{border-color:#000;box-shadow:0 4px 15px #0000001a}.newsletter input{border:none;color:#616161;font-family:Poppins,sans-serif;font-size:16px;margin-left:20px;outline:none;transition:color .3s ease;width:70%}.newsletter div button{background:#000;border:none;border-radius:50px;color:#fff;cursor:pointer;font-size:16px;height:60px;overflow:hidden;position:relative;transition:all .3s ease;width:150px}.newsletter div button:hover{background:#333;box-shadow:0 5px 15px #0003;transform:translateY(-2px)}.newsletter div button:active{transform:translateY(0)}@media(max-width:1280px){.newsletter{gap:20px;margin-bottom:120px;padding:0 80px}.newsletter h1{font-size:36px}.newsletter p{font-size:16px}.newsletter div{height:60px;width:600px}.newsletter div input{width:400px}.newsletter div button{height:60px;width:160px}}@media(max-width:1024px){.newsletter{border-radius:15px;margin-bottom:60px}.newsletter h1{font-size:30px}.newsletter p{font-size:14px}.newsletter div{height:50px;width:500px}.newsletter div input{font-size:14px;width:300px}.newsletter div button{font-size:14px;height:50px;width:120px}}@media(max-width:800px){.newsletter{border-radius:12px;height:35vh;margin-bottom:30px}.newsletter h1{font-size:18px}.newsletter p{font-size:12px}.newsletter div{height:40px;width:400px}.newsletter div input{font-size:13px;width:200px}.newsletter div button{font-size:13px;height:40px;width:100px}}@media(max-width:500px){.newsletter{border-radius:10px;gap:15px;height:25vh;padding:0;width:100%}.newsletter h1{font-size:16px}.newsletter p{font-size:13px;max-width:200px;text-align:center}.newsletter div{width:290px}.newsletter div input{width:130px}}

/* ! 🔥 💪🏻 Bn Ramadan fullstack MERN project 2 ( E-commerce fullstack app ) */
/* ! " The end of this project is the completing of future successes and creativity , Just strive, be patient, commit and keep going. " */
/* ! 🔥 💪🏻 Always forward ! 💪🏻 🔥 */.shopcategory-banner{border-radius:16px;box-shadow:0 4px 15px #0000001a;cursor:pointer;display:block;margin:20px auto;overflow:hidden;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1);width:90%}.shopcategory-banner:hover{box-shadow:0 8px 25px #00000026;transform:scale(1.02) translateY(-5px)}.shopcategory-banner:after{background:linear-gradient(45deg,#ffffff1a,#fff0);content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity .3s ease;width:100%}.shopcategory-banner:hover:after{opacity:1}.shopcategory-indexSort{align-items:center;cursor:pointer;display:flex;justify-content:space-between;margin:0 70px;padding:20px 0;position:relative}.shopcategory-sort{background-color:#fff;border:2px solid #e0e0e0;border-radius:40px;font-weight:500;overflow:hidden;padding:12px 25px;position:relative;transition:all .3s ease}.shopcategory-sort:hover{background-color:#f8f8f8;border-color:#d4c4c4;box-shadow:0 4px 12px #00000014;transform:translateY(-2px)}.shopcategory-indexSort p span{color:#333;font-weight:600;padding-bottom:2px;position:relative}.shopcategory-indexSort p span:after{background-color:#d4c4c4;bottom:0;content:"";height:2px;left:0;position:absolute;transition:width .3s ease;width:0}.shopcategory-indexSort p span:hover:after{width:100%}.shopcategory-products{grid-gap:25px;display:grid;gap:25px;grid-template-columns:repeat(4,1fr);margin:30px 67px;perspective:1000px}.shopcategory-products .item{background:#fff;border-radius:12px;box-shadow:0 4px 15px #0000000f;overflow:hidden;transform-style:preserve-3d;transition:all .4s cubic-bezier(.4,0,.2,1)}.shopcategory-products .item:hover{box-shadow:0 8px 25px #0000001a;transform:translateY(-8px) scale(1.02)}.shopcategory-loadmore{align-items:center;background:linear-gradient(135deg,#e0d3d3,#d4c4c4);border-radius:75px;box-shadow:0 4px 15px #0000001a;color:#666;cursor:pointer;display:flex;font-size:20px;font-weight:500;height:69px;justify-content:center;margin:150px auto;overflow:hidden;position:relative;transition:all .4s cubic-bezier(.4,0,.2,1);width:233px}.shopcategory-loadmore:hover{background:linear-gradient(135deg,#d4c4c4,#c8b6b6);box-shadow:0 8px 20px #00000026;color:#444;transform:translateY(-5px)}.shopcategory-loadmore:before{background:#ffffff1a;content:"";height:200%;left:-50%;position:absolute;top:-50%;transform:rotate(45deg);transition:transform .6s;width:200%}.shopcategory-loadmore:hover:before{transform:rotate(45deg) translate(50%,50%)}@media(max-width:1280px){.shopcategory-banner{margin:20px auto;width:90%}.shopcategory-indexSort{margin:auto;padding:15px 0;width:90%}.shopcategory-sort{font-size:12px;padding:8px 15px}.shopcategory-indexSort p{font-size:12px}.shopcategory-products{margin:15px auto;row-gap:40px;width:90%}.shopcategory-products .item{margin:auto}.shopcategory-loadmore{font-size:16px;height:60px;margin:100px auto;width:200px}}@media(max-width:800px){.shopcategory-banner{width:95%}.shopcategory-products{gap:20px;width:95%}.shopcategory-loadmore{font-size:13px;height:40px;margin:60px auto;width:150px}}@media(max-width:500px){.shopcategory-products{gap:15px;grid-template-columns:1fr 1fr}.shopcategory-products .item:hover{transform:translateY(-4px) scale(1.01)}}

/* ! 🔥 💪🏻 Bn Ramadan fullstack MERN project 2 ( E-commerce fullstack app ) */
/* ! " The end of this project is the completing of future successes and creativity , Just strive, be patient, commit and keep going. " */
/* ! 🔥 💪🏻 Always forward ! 💪🏻 🔥 */.breadcrum{align-items:center;background-color:#fffc;border-radius:8px;box-shadow:0 2px 5px #0000001a;color:#5e5e5e;cursor:pointer;display:flex;font-size:16px;font-weight:600;gap:8px;margin:60px 170px;padding:10px 15px;text-transform:capitalize;transition:background-color .3s ease,transform .3s ease}.breadcrum:hover{background-color:#fff;transform:translateY(-2px)}@media(max-width:1280px){.breadcrum{font-size:14px;margin:30px 50px}}@media(max-width:1024px){.breadcrum{font-size:13px;margin:30px}}@media(max-width:800px){.breadcrum{font-size:12px;margin:30px 10px}}@media(max-width:500px){.breadcrum{font-size:10px}}

/* ! 🔥 💪🏻 Bn Ramadan fullstack MERN project 2 ( E-commerce fullstack app ) */
/* ! " The end of this project is the completing of future successes and creativity , Just strive, be patient, commit and keep going. " */
/* ! 🔥 💪🏻 Always forward ! 💪🏻 🔥 */.productdisplay{display:flex;gap:20px;margin:0 0 50px 70px}.productdisplay-left{display:flex;gap:17px}.productdisplay-img-list{display:flex;flex-direction:column;gap:16px}.productdisplay-img-list img{border-radius:8px;cursor:pointer;display:block;height:163px;object-fit:contain;transition:transform .3s ease,box-shadow .3s ease}.productdisplay-img-list img:hover{box-shadow:0 4px 8px #0003;transform:scale(1.05)}.productdisplay-main-img{border-radius:12px;display:block;height:700px;object-fit:cover;transition:transform .3s ease,box-shadow .3s ease;width:586px}.productdisplay-main-img:hover{box-shadow:0 6px 12px #0000004d;transform:scale(1.02)}.productdisplay-right{display:flex;flex-direction:column;margin:0 70px}.productdisplay-right h1{border-bottom:2px solid #ff4141;color:#3d3d3d;font-size:30px;font-weight:700;margin-bottom:10px;padding-bottom:5px}.productdisplay-right-stars{align-items:center;color:#1c1c1c;display:flex;font-size:16px;gap:5px;margin-top:13px}.productdisplay-right-prices{display:flex;font-size:24px;font-weight:700;gap:30px;margin:40px 0}.productdisplay-right-price-old{color:#818181;text-decoration:line-through}.productdisplay-right-price-new{color:#ff4141}.productdisplay-right-size h1{color:#656565;font-size:20px;font-weight:600;margin-top:55px}.productdisplay-right-sizes{display:flex;gap:20px;margin:30px 0}.productdisplay-right-sizes div{background-color:#fbfbfb;border:1px solid #ebebeb;border-radius:8px;cursor:pointer;padding:18px 24px;transition:background-color .3s ease,transform .3s ease}.productdisplay-right-sizes div:hover{background-color:#f0f0f0;transform:translateY(-3px)}.productdisplay-right button{background:#ff4141;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:16px;font-weight:600;margin-bottom:40px;outline:none;padding:20px 40px;transition:background-color .3s ease,box-shadow .3s ease;width:200px}.productdisplay-right button:hover{background-color:#e63939;box-shadow:0 4px 10px #0003}.productdisplay-right-category{margin-top:10px}.productdisplay-right-category span{font-weight:600}@media(max-width:1280px){.productdisplay{margin:0 60px}.productdisplay-img-list,.productdisplay-left{gap:10px}.productdisplay-img-list img{height:120px}.productdisplay-main-img{height:510px;width:auto}.productdisplay-right{margin:0 30px}.productdisplay-right h1{font-size:22px}.productdisplay-right-stars{font-size:13px;gap:3px}.productdisplay-right-prices{font-size:18px;margin:10px 0}.productdisplay-right-description{font-size:13px}.productdisplay-right-size h1{font-size:20px;margin-top:20px}.productdisplay-right-sizes div{padding:14px 20px}.productdisplay-right button{margin-bottom:20px;padding:15px 0;width:150px}.productdisplay-right-category{font-size:14px;margin-top:5px}}@media(max-width:1024px){.productdisplay{margin:0 30px}.productdisplay-left{gap:5px}.productdisplay-img-list img{height:80px}.productdisplay-main-img{height:350px}.productdisplay-right h1{font-size:18px}.productdisplay-right-stars img{width:15px}.productdisplay-right-description{font-size:12px}.productdisplay-right-sizes{margin-top:10px}.productdisplay-right-sizes div{font-size:12px;padding:10px 16px}.productdisplay-right button{font-size:14px;margin-bottom:10px;padding:10px 0;width:120px}.productdisplay-right-category{font-size:12px}}@media(max-width:800px){.productdisplay{margin:0 10px}.productdisplay-left{align-items:center;flex-direction:column-reverse;gap:0}.productdisplay-img-list{flex-direction:row;gap:6px}.productdisplay-img-list img{height:70px}.productdisplay-main-img{height:300px}.productdisplay-right h1{font-size:14px}.productdisplay-right-stars img{width:13px}.productdisplay-right-description{font-size:10px}.productdisplay-right-size h1{margin-top:10px}.productdisplay-right-sizes{gap:5px;margin-top:10px}.productdisplay-right-sizes div{padding:4px 11px}.productdisplay-right button{font-size:12px;width:100px}.productdisplay-right-category{font-size:10px}}@media(max-width:500px){.productdisplay{flex-direction:column}.productdisplay-left{flex-direction:row;gap:10px;margin:auto}.productdisplay-img-list{flex-direction:column;gap:8px}.productdisplay-img-list img{height:75px}.productdisplay-main-img{height:330px}.productdisplay-right{margin:5px}.productdisplay-right h1{font-size:20px;font-weight:500;margin-top:15px}.productdisplay-right-stars img{width:15px}.productdisplay-right-sizes{gap:10px;margin:20px 0}.productdisplay-right-sizes div{font-size:14px;padding:10px 16px}.productdisplay-right button{font-size:15px;padding:12px 0;width:130px}.productdisplay-right-category{font-size:16px}}

/* ! 🔥 💪🏻 Bn Ramadan fullstack MERN project 2 ( E-commerce fullstack app ) */
/* ! " The end of this project is the completing of future successes and creativity , Just strive, be patient, commit and keep going. " */
/* ! 🔥 💪🏻 Always forward ! 💪🏻 🔥 */.descriptionbox{animation:fadeIn .5s ease-in;margin:120px 170px;transition:all .3s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.descriptionbox-navigator{border-radius:8px 8px 0 0;box-shadow:0 2px 10px #0000000d;display:flex;overflow:hidden}.descriptionbox-nav-box{align-items:center;border:1px solid #d0d0d0;cursor:pointer;display:flex;font-size:16px;font-weight:600;height:70px;justify-content:center;overflow:hidden;position:relative;transition:all .3s ease;width:171px}.descriptionbox-nav-box:hover{background:#f5f5f5;transform:translateY(-2px)}.descriptionbox-nav-box:after{background:#ff5a5a;bottom:0;content:"";height:3px;left:0;position:absolute;transition:width .3s ease;width:0}.descriptionbox-nav-box:hover:after{width:100%}.descriptionbox-nav-box.fade{background:#fbfbfb;color:#555;transition:all .3s ease}.descriptionbox-nav-box.fade:hover{background:#f0f0f0;color:#333}.descriptionbox-description{background:#fff;border:1px solid #d0d0d0;border-radius:0 0 8px 8px;box-shadow:0 4px 15px #0000000d;display:flex;flex-direction:column;gap:25px;padding:48px 48px 70px;transition:all .3s ease}.descriptionbox-description:hover{box-shadow:0 6px 20px #00000014;transform:translateY(-2px)}.descriptionbox-description p{color:#444;line-height:1.6;transition:all .3s ease}.descriptionbox-description p:hover{color:#222}@media(max-width:1280px){.descriptionbox{margin:60px}.descriptionbox-nav-box{font-size:15px;height:60px;width:150px}}@media(max-width:800px){.descriptionbox{margin:60px 20px}.descriptionbox-description{font-size:14px;padding:30px}.descriptionbox-nav-box{font-size:14px;height:50px;width:120px}}

/* ! 🔥 💪🏻 Bn Ramadan fullstack MERN project 2 ( E-commerce fullstack app ) */
/* ! " The end of this project is the completing of future successes and creativity , Just strive, be patient, commit and keep going. " */
/* ! 🔥 💪🏻 Always forward ! 💪🏻 🔥 */.relatedproducts{align-items:center;background:linear-gradient(135deg,#f6f6f6,#fff,#f6f6f6);display:flex;flex-direction:column;gap:10px;height:100vh;overflow:hidden;padding:20px;position:relative}.relatedproducts:before{animation:rotateBackground 15s linear infinite;background:radial-gradient(circle,#fffc 0,#fff0 70%);content:"";height:200%;left:-50%;position:absolute;top:-50%;width:200%;z-index:1}.relatedproducts h1{color:#171717;font-size:50px;font-weight:600;padding-bottom:10px;position:relative;text-shadow:2px 2px 4px #0000001a;transition:all .4s cubic-bezier(.175,.885,.32,1.275);z-index:2}.relatedproducts h1:hover{color:#000;transform:translateY(-5px)}.relatedproducts h1:after{background:linear-gradient(90deg,#252525,#4a4a4a);border-radius:5px;bottom:0;content:"";height:3px;left:50%;position:absolute;transform:translateX(-50%);transition:width .4s ease;width:0}.relatedproducts h1:hover:after{width:100%}.relatedproducts hr{background:linear-gradient(90deg,#252525,#4a4a4a);border-radius:10px;box-shadow:0 2px 4px #0000001a;height:6px;transition:all .4s ease;width:200px;z-index:2}.relatedproducts hr:hover{box-shadow:0 4px 8px #00000026;transform:translateY(-2px);width:250px}.relatedproducts-item{display:flex;gap:30px;margin-top:20px;perspective:1000px;transition:all .4s ease;z-index:2}.relatedproducts-item>*{border-radius:15px;box-shadow:0 5px 15px #0000001a;overflow:hidden;position:relative;transform:scale(1) rotateY(0);transition:all .5s cubic-bezier(.175,.885,.32,1.275)}.relatedproducts-item>:before{background:linear-gradient(45deg,#ffffff1a,#fff0);content:"";height:100%;left:0;position:absolute;top:0;transition:all .4s ease;width:100%}.relatedproducts-item>:hover{box-shadow:0 8px 25px #00000026;transform:scale(1.05) rotateY(10deg)}.relatedproducts-item>:hover:before{transform:translateX(100%);transition:all .7s ease}@media (max-width:1280px){.relatedproducts{height:70vh}.relatedproducts h1{font-size:40px}.relatedproducts hr{height:4px;width:160px}.relatedproducts hr:hover{width:200px}.relatedproducts-item{gap:20px;margin-top:30px}}@media (max-width:1024px){.relatedproducts{height:60vh}.relatedproducts h1{font-size:30px}.relatedproducts hr{height:3px;width:120px}.relatedproducts hr:hover{width:150px}.relatedproducts-item{gap:15px;margin-top:20px}.relatedproducts-item>:hover{transform:scale(1.03) rotateY(5deg)}}@media (max-width:800px){.relatedproducts{gap:6px;height:50vh}.relatedproducts h1{font-size:20px}.relatedproducts hr{width:100px}.relatedproducts hr:hover{width:120px}.relatedproducts-item{gap:5px}}@media (max-width:500px){.relatedproducts{height:90vh}.relatedproducts-item{grid-gap:20px;display:grid;gap:20px;grid-template-columns:1fr 1fr}.relatedproducts-item>:hover{transform:scale(1.02)}}

/* ! 🔥 💪🏻 Bn Ramadan fullstack MERN project 2 ( E-commerce fullstack app ) */
/* ! " The end of this project is the completing of future successes and creativity , Just strive, be patient, commit and keep going. " */
/* ! 🔥 💪🏻 Always forward ! 💪🏻 🔥 */.cartitems{margin:100px 170px;transition:all .3s ease}.cartitems hr{background:#e2e2e2;border:0;height:3px;transition:all .3s ease}.cartitems hr:hover{background:#ff5a5a;transform:scaleX(1.02)}.cartitems-format-main{grid-gap:75px;align-items:center;color:#454545;display:grid;font-size:18px;font-weight:600;gap:75px;grid-template-columns:.5fr 2fr 1fr 1fr 1fr 1fr;padding:20px 0;transition:all .3s ease}.cartitems-format{font-size:17px;font-weight:500;transition:transform .2s ease}.cartitems-format:hover{transform:translateY(-2px)}.carticon-product-icon{display:block;object-fit:contain;transition:transform .3s ease;width:100px}.carticon-product-icon:hover{transform:scale(1.05)}.cartitems-remove-icon{cursor:pointer;margin:0 40px;transition:all .3s ease;width:15px}.cartitems-remove-icon:hover{filter:brightness(.8);transform:scale(1.1)}.cartitems-quantity{background:#fff;border:2px solid #ebebeb;border-radius:8px;cursor:pointer;height:50px;transition:all .3s ease;width:64px}.cartitems-quantity:hover{border-color:#ff5a5a;box-shadow:0 0 10px #ff5a5a1a}.cartitems-down{display:flex;margin:100px 0}.cartitems-total{display:flex;flex:1 1;flex-direction:column;gap:40px;margin-right:200px}.cartitems-total-item{display:flex;justify-content:space-between;padding:15px 0;transition:all .3s ease}.cartitems-total-item:hover{color:#ff5a5a;transform:translateX(5px)}.cartitems-total button{background:#ff5a5a;border:none;border-radius:8px;box-shadow:0 4px 6px #0000001a;color:#fff;cursor:pointer;font-size:16px;font-weight:600;height:58px;outline:none;transition:all .3s ease;width:262px}.cartitems-total button:hover{background:#ff4141;box-shadow:0 6px 12px #00000026;transform:translateY(-2px)}.cartitems-promocode{flex:1 1;font-size:16px;font-weight:500}.cartitems-promocode p{color:#555;transition:color .3s ease}.cartitems-promocode p:hover{color:#ff5a5a}.cartitems-promobox{background:#eaeaea;border-radius:8px;box-shadow:0 2px 4px #0000000d;height:58px;margin-top:15px;padding-left:20px;transition:all .3s ease;width:504px}.cartitems-promobox:focus-within{background:#f0f0f0;box-shadow:0 4px 8px #0000001a}.cartitems-promobox input{background:#0000;border:none;font-size:16px;height:50px;outline:none;transition:all .3s ease;width:330px}.cartitems-promobox input:focus{transform:translateX(5px)}.cartitems-promobox button{background:#000;border:none;border-radius:8px;color:#fff;cursor:pointer;font-size:16px;height:58px;outline:none;transition:all .3s ease;width:170px}.cartitems-promobox button:hover{background:#333;box-shadow:0 4px 8px #0003;transform:translateY(-1px)}@media(max-width:1280px){.cartitems{margin:60px 50px}.cartitems-format-main{font-size:15px;gap:20px;grid-template-columns:.5fr 3fr .5fr .5fr .5fr .5fr;padding:15px 0}.carticon-product-icon{height:50px}.cartitems-remove-icon{margin:auto}.cartitems-quantity{height:30px;width:40px}.cartitems-down{flex-direction:column;gap:80px;margin:80px 0}.cartitems-total{margin:0}.cartitems-total button{font-size:13px;height:45px;max-width:200px}.cartitems-promobox{max-width:500px;width:auto}.cartitems-promobox input{width:100%}.cartitems-promobox button{margin-left:-125px;width:120px}}@media(max-width:500px){.cartitems-format-main{display:none;gap:10px;grid-template-columns:.5fr 3fr .5fr}.cartitems-format{display:grid}.cartitems-promobox button{font-size:14px;margin-left:-105px;width:100px}.cartitems-total button{max-width:none;width:100%}}

/* ! 🔥 💪🏻 Bn Ramadan fullstack MERN project 2 ( E-commerce fullstack app ) */
/* ! " The end of this project is the completing of future successes and creativity , Just strive, be patient, commit and keep going. " */
/* ! 🔥 💪🏻 Always forward ! 💪🏻 🔥 */.loginsignup{background:linear-gradient(135deg,#f8e2fc,#fff,#f8e2fc);height:100vh;overflow:hidden;padding-bottom:300px;padding-top:100px;position:relative;width:100%}.loginsignup:before{animation:rotateBackground 20s linear infinite;background:radial-gradient(circle,#fffc 0,#fff0 70%);content:"";height:200%;left:-50%;position:absolute;top:-50%;width:200%;z-index:1}@keyframes rotateBackground{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.loginsignup-container{background:#fff;border-radius:20px;box-shadow:0 10px 30px #0000001a;height:600px;margin:auto;max-width:90%;padding:40px 60px;position:relative;width:580px;z-index:2}.loginsignup-container h1{color:#171717;font-size:36px;margin:20px 0;text-align:center;text-shadow:1px 1px 3px #0000001a;transition:all .4s ease}.loginsignup-container h1:hover{color:#ff4141;transform:translateY(-5px)}.loginsignup-fields{display:flex;flex-direction:column;gap:20px;margin-top:30px}.loginsignup-fields input{border:1px solid #c9c9c9;border-radius:10px;color:#5c5c5c;font-size:18px;height:60px;outline:none;padding-left:20px;transition:border .3s ease;width:100%}.loginsignup-fields input:focus{border:1px solid #ff4141}.loginsignup-container button{background:#ff4141;border:none;border-radius:40px;box-shadow:0 5px 15px #0000001a;color:#fff;cursor:pointer;font-size:24px;font-weight:500;height:72px;margin-top:30px;transition:all .4s ease;width:100%}.loginsignup-container button:hover{background:#d93737;box-shadow:0 8px 25px #00000026;transform:translateY(-3px)}.loginsignup-login{color:#5c5c5c;font-size:18px;font-weight:500;margin-top:20px;text-align:center}.loginsignup-login span{color:#ff4141;cursor:pointer;font-weight:600;transition:color .3s ease}.loginsignup-login span:hover{color:#d93737}.loginsignup-agree{align-items:center;color:#5c5c5c;display:flex;font-size:16px;font-weight:500;gap:20px;margin-top:25px}@media(max-width:1280px){.loginsignup{padding-top:50px}.loginsignup-container{max-height:500px;max-width:500px;width:auto}.loginsignup-container h1{margin:10px 0}.loginsignup-fields{gap:20px;margin-top:20px}.loginsignup-fields input{height:65px;width:93%}.loginsignup-container button{width:100%}.loginsignup-login{font-size:16px}.loginsignup-agree{font-size:14px;gap:10px}}@media(max-width:800px){.loginsignup-container{padding:20px 30px}.loginsignup-container h1{font-size:24px}.loginsignup-fields{margin-top:20px}.loginsignup-fields input{height:50px}.loginsignup-container button{font-size:16px;height:50px}}

/* ! 🔥 💪🏻 Bn Ramadan fullstack MERN project 2 ( E-commerce fullstack app ) */
/* ! " The end of this project is the completing of future successes and creativity , Just strive, be patient, commit and keep going. " */
/* ! 🔥 💪🏻 Always forward ! 💪🏻 🔥 */.footer{align-items:center;background:linear-gradient(180deg,#0000,#fbfbfbcc);display:flex;flex-direction:column;gap:50px;justify-content:center;margin-top:150px;padding:40px 20px;position:relative}.footer:before{background:linear-gradient(90deg,#0000,#ebebeb,#0000);content:"";height:1px;left:0;position:absolute;top:0;width:100%}.footer-logo{align-items:center;animation-delay:.1s;cursor:pointer;display:flex;gap:20px;transition:all .4s cubic-bezier(.175,.885,.32,1.275)}.footer-logo:hover{transform:translateY(-5px)}.footer-logo img{transition:transform .4s ease}.footer-logo:hover img{transform:rotate(10deg)}.footer-logo p{-webkit-text-fill-color:#0000;background:linear-gradient(45deg,#383838,#666);-webkit-background-clip:text;color:#383838;cursor:pointer;font-size:56px;font-weight:700;text-shadow:2px 2px 4px #0000001a;transition:all .3s ease}.footer-logo p:hover{text-shadow:3px 3px 6px #00000026}.footer-links{animation-delay:.2s;color:#252525;display:flex;font-size:20px;gap:50px;list-style:none}.footer-links li{cursor:pointer;padding:5px 0;position:relative;transition:all .3s ease}.footer-links li:after{background:linear-gradient(90deg,#252525,#4a4a4a);border-radius:5px;bottom:0;content:"";height:2px;left:0;position:absolute;transition:width .3s ease;width:0}.footer-links li:hover{color:#000;transform:translateY(-2px)}.footer-links li:hover:after{width:100%}.footer-social-icon{animation-delay:.3s;display:flex;gap:20px}.footer-icons-container{background:#fbfbfb;border:1px solid #ebebeb;border-radius:8px;cursor:pointer;overflow:hidden;padding:10px 10px 6px;position:relative;transition:all .3s cubic-bezier(.175,.885,.32,1.275)}.footer-icons-container:before{background:linear-gradient(90deg,#0000,#fff6,#0000);content:"";height:100%;left:-100%;position:absolute;top:0;transition:.5s;width:100%}.footer-icons-container:hover{border-color:#d1d1d1;box-shadow:0 5px 15px #0000001a;transform:translateY(-5px)}.footer-icons-container:hover:before{left:100%}.footer-copyright{align-items:center;animation-delay:.4s;color:#1a1a1a;display:flex;flex-direction:column;font-size:20px;gap:30px;margin-bottom:30px;text-align:center;width:100%}.footer-copyright hr{background:linear-gradient(90deg,#0000,#c7c7c7,#0000);border:none;border-radius:10px;height:3px;transition:all .3s ease;width:80%}.footer-copyright:hover hr{background:linear-gradient(90deg,#0000,#a0a0a0,#0000);box-shadow:0 2px 4px #0000000d}@media(max-width:800px){.footer{gap:20px;padding:20px 10px}.footer-logo{align-items:end;gap:10px}.footer-logo img{width:40px}.footer-logo p{font-size:25px}.footer-links{flex-wrap:wrap;font-size:14px;gap:10px;justify-content:center}.footer-social-icon img{width:22px}.footer-copyright{font-size:13px}.footer-icons-container:hover{transform:translateY(-2px)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.footer>*{animation:fadeInUp .5s ease forwards;opacity:0}
/*# sourceMappingURL=main.3524d284.css.map*/