@import"https://fonts.googleapis.com/css2?family=Delius&display=swap";:root{font-size:62.5%;--red: #FF2929;--grey: #5b5e59;--white: #EFEEEA;--black: #000000}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Delius,cursive;font-weight:400;font-style:normal;background-color:var(--white)}.container{max-width:1280px;margin:0 auto}nav{display:flex;justify-content:space-between;height:7.2rem;align-items:center;cursor:pointer}nav ul{display:flex;list-style:none;gap:4.4rem;font-size:2rem}nav ul li a{text-decoration:none;color:var(--black);position:relative;padding:.2rem 0}nav ul li a:after{content:"";position:absolute;bottom:0;left:0;height:2px;width:100%;background-color:red;transform:scaleX(0);transform-origin:center;transition:transform .3s ease}nav ul li a:hover:after{transform:scaleX(1)}button{all:unset;padding:.6rem 1.6rem;background:red;font-weight:500;font-size:1.8rem;color:#fff;border-radius:8%;transition:all .5s ease-in}button:hover{color:var(--black);box-shadow:0 4px 4px 0 var(--black)}.hero{display:flex;align-items:center;height:calc(100vh - 7.2rem)}.hero-content{display:flex;flex-direction:column;gap:3rem}.hero h1{font-weight:800;font-size:10.8rem;text-transform:capitalize}.hero p{font-weight:800;color:var(--grey);font-size:1.6rem;max-width:84%}.hero-btn{display:flex;gap:4rem;margin:1rem 0}.secondary-btn{background-color:transparent;color:var(--grey);border:1px solid var(--grey)}.shopping p{margin-bottom:1rem;font-size:1.5rem}.brand-icons{display:flex;gap:2rem}@media screen and (max-width: 1024px){.container{max-width:900px;margin:0 auto}.hero h1{font-size:6.8rem}}@media screen and (max-width: 820px){.container{max-width:700px;margin:0 auto}.hero h1{font-size:4.8rem}.hero-image img{width:100%;height:auto}}@media screen and (max-width: 432px){.container{max-width:350px;margin:0 auto}nav ul{display:none}.hero-content{display:flex;flex-direction:column;gap:1rem}.hero h1{font-size:2.8rem}.hero p{font-size:1rem}.hero-image img{width:100%;height:auto;margin-top:-2rem}button{font-size:1rem}}