:root{--primary-color: #8263ff;--secondary-color: #6c5ce7;--background-color: #ffffff;--background-color-scroll: #333;--text-color: #333;--font-family: sans-serif;--border-radius: 50px;--color-switch: #ccc;--link-bg-color: #d9d8df;--link-hover-bg-color: #c4c3cc;--background-red: #dc3545;--background-gray: #6c757d;--background-blue: #007bff;--background-avatar: #ccc}:root{--color-primary: #8263ff;--color-secondary: #6c5ce7;--color-background: #ffffff;--color-text: #333;--color-toast-bg: bisque;--color-button-bg: var(--color-primary);--color-button-text: #fff;--spacing-padding: 10px;--border-radius: 12px;--border-radius-toast: 2px}:root{--tooltip-bg-color: black;--tooltip-text-color: #fff;--tooltip-border-radius: 6px;--tooltip-padding: 20px;--tooltip-arrow-size: 20px;--active-border-color: red;--gap: 25px}*{margin:0;padding:0;box-sizing:border-box}body{width:100%;height:105vh;font-family:var(--font-family);font-size:18px;background:linear-gradient(135deg,#8263ff,#6c5ce7);color:var(--text-color)}.links{text-align:center;display:grid;align-items:center;justify-content:center;height:100vh}.links>a{margin-top:20px;font-size:20px;text-decoration:none;color:var(--primary-color);background-color:var(--link-bg-color);padding:10px 20px;border-radius:var(--border-radius);transition:background-color .3s,color .3s}.links>a:hover{background-color:var(--link-hover-bg-color);color:var(--secondary-color)}body{direction:rtl;display:flex;align-items:center;justify-content:center;height:100vh}.slider{width:900px;margin:50 auto;border-radius:12px;position:relative;overflow:hidden}.slider .item{width:100%;height:100%;display:none}.slider .item img{width:100%;animation:zoom 1s ease}@keyframes zoom{0%{transform:scale(1.5);opacity:0}to{transform:scale(1);opacity:1}}.slider .item.active{display:block}.slider .item .caption{position:absolute;background-color:rgba(0,0,0,var(--text-color));width:100%;bottom:0;display:flex;justify-content:center;align-items:center;color:#fff;height:60px;font-size:25px}.slider .controler{position:absolute;top:50%;right:5%;left:5%;width:90%;display:flex;align-items:center;justify-content:space-between}.slider .controler .next,.slider .controler .preveious{background-color:var(--primary-color);width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:25px;color:var(--background-color);font-weight:700;cursor:pointer}@media screen and (max-width:600px){body{width:100%}.slider{width:90%;border:10px solid var(--primary-color);margin:50 auto;position:relative;overflow:hidden}}