.headerWrapper{ margin-top: 65px; width: 100%; padding: 0 16px; box-sizing: border-box; } .wrapper { height: 105px; background: rgba(176, 228, 255, 0.8); border-radius: 50px 13px 13px 13px; border: 1px solid #ffffff; position: relative; z-index: 0; margin-bottom: -54px; } .img { width: 120px; height: 123px; object-fit: contain; position: absolute; bottom: 35px; } .wrapper::before{ content: ''; position: absolute; width: 133px; height: 32px; bottom: 23px; left: 6px; background: radial-gradient(ellipse at top, #1580FF, #fff); z-index: 2; border-radius: 20px; filter: blur(10px); } .text { font-weight: 500; font-size: 16px; color: #000000; text-align: end; margin-top: 15px; margin-right: 35px; } .main-wrapper { background: rgba(255, 255, 255, 0.7); border-radius: 13px 13px 13px 13px; border: 1px solid #ffffff; padding:16px 17px 18px 17px; position: relative; z-index: 1; backdrop-filter:blur(10px); min-height: 213px; box-sizing: border-box; } .main { display: flex; justify-content: space-between; } .thing { object-fit: contain; position: relative; } .circle { display: flex; align-items: center; justify-content: center; gap: 2px; } .tip { display: flex; align-items: center; justify-content: space-between; font-weight: 400; font-size: 14px; color: #000000; margin-top: 18px; } .rotating { animation: rotate360 1s linear; } @keyframes rotate360 { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }