.color-palate{position:relative}.color-palate .color-palate-inner{position:fixed;right:-280px;top:50%;transform:translateY(-50%);z-index:999;width:280px;background-color:var(--black);text-align:center;padding:60px 30px;box-shadow:0px 0px 2px var(--primary-color);transition:var(--transition)}.color-palate .color-icon{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:9999;transition:var(--transition)}.color-palate .color-icon button{width:50px;height:50px;display:inline-flex;align-items:center;justify-content:center;font-size:26px;background-color:var(--primary-color);color:var(--octonary-color)}.color-palate .color-icon .close-color{display:none}.color-palate .color-icon i{margin-top:0 !important}.color-palate .open-color i{animation:rotation 5s infinite linear}.color-palate h6{font-weight:600;color:var(--white);text-transform:uppercase;font-size:16px;letter-spacing:2px}.color-palate ul{display:flex;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:10px}.color-palate ul li{cursor:pointer;padding:12px 0 10px;background-color:var(--primary-color);color:var(--octonary-color);font-weight:600;letter-spacing:1px;width:calc(50% - 8px);text-align:center;transition:var(--transition)}.color-palate ul li:hover{background-color:var(--secondary-color)}.color-palate ul .active{background-color:var(--secondary-color)}.color-palate ul .active:hover{background-color:var(--primary-color)}.color-palate .group{margin-bottom:40px}.color-palate .group:nth-last-of-type(1){margin-bottom:0}@keyframes rotation{from{transform:rotate(0deg)}to{transform:rotate(359deg)}}