.section{margin-top:20px;margin-bottom:20px}.color-combination{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:20px}.color-box{width:220px;height:150px;margin:10px;box-shadow:0 4px 8px rgba(0,0,0,.2);transition:transform .3s;cursor:pointer;position:relative}.color-box:hover{transform:scale(1.05)}.color-box p{padding:1px;color:#fff;text-align:center;font-weight:700}.text-color-box p{color:inherit}.gradient-box{background:linear-gradient(90deg,#6a11cb,#2575fc)}.combination-1{background-color:#1f1f1f;color:#fff}.combination-2{background-color:#ff6f61;color:#fff}.combination-3{background-color:#2d4059;color:#fff}.combination-4{background-color:#c9d6ff;color:#2d4059}.combination-5{background-color:#ffcccb;color:#ff6f61}.combination-6{background-color:#222831;color:#f2a365}.combination-7{background-color:#eeeeee;color:#393e46}.gradient-section .color-box{height:200px}.gradient-1{background:linear-gradient(90deg,#ff512f,#dd2476)}.gradient-2{background:linear-gradient(45deg,#ff7e5f,#feb47b)}.gradient-3{background:linear-gradient(135deg,#6a11cb,#2575fc)}.gradient-4{background:linear-gradient(120deg,#f64f59,#c471ed,#12c2e9)}.gradient-5{background:linear-gradient(135deg,#009FFF,#ec2F4B)}.gradient-6{background:linear-gradient(90deg,#00c6ff,#0072ff)}.gradient-7{background:linear-gradient(120deg,#FF5F6D,#FFC371)}.color-picker-section{margin-top:40px;text-align:center}.color-box-container{flex-wrap:wrap;margin-top:20px}.color-box-container,.color-shade{display:flex;justify-content:center}.color-shade{width:100px;height:100px;margin:10px;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.1);align-items:center;color:white;font-weight:700;position:relative}input[type=color]{padding:1px;border:1px solid #ddd;border-radius:8px;cursor:pointer}.shade-title{text-align:center;margin-top:20px;font-size:1.2rem;color:#444}.copy-button{position:absolute;bottom:10px;right:10px;padding:5px 10px;background:rgba(255,255,255,.8);border:none;border-radius:5px;cursor:pointer;font-weight:700}.gradient-picker{display:flex;margin-top:20px}.gradient-picker input[type=color]{margin:0 10px}.gradient-result{margin-top:20px;height:150px;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.2)}.btn-copy{background-color:#4CAF50;color:white;border:none;padding:5px 10px;border-radius:5px;cursor:pointer}.btn-copy:hover{background-color:#45a049}.scroll-container{display:flex;overflow-x:auto;padding:1rem}.color-box-first{min-width:140px}.color-box,.color-box-first{max-width:250px;height:200px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:#fff;font-weight:700;font-size:16px}.color-box{min-width:200px}.section{background:rgb(221,221,211);border-radius:20px;padding-top:20px;padding-bottom:20px}