body {
            background-color: #f0f0f0;
            font-family: 'Arial', sans-serif;
            text-align: center;
            direction: rtl;
            max-width: 600px;
            border: solid 1px #982f28;
            margin: 0 auto;
        }

        #container {
            position: relative;
            max-width: 300px;
            height: 300px;
            border: 1px solid #000;
            overflow: hidden; 
            margin: 20px auto;
        }

        #userImage {
            position: absolute;
    width: auto;
    height: 300px;
            cursor: move;
            z-index: -1; 
        }

        #savedImage {
            max-width: 300px;
            max-height: 300px;
            margin-top: 20px;
        }

        input[type="file"] {
            display: none;
        }

        label {
            background-color: #3498db;
            color: #fff;
            padding: 10px 20px;
            cursor: pointer;
            border-radius: 5px;
        }

        #saveButton {

              margin: 0 auto;
             margin-top: 22px;
        }
        
        label, #saveButton, button {
            display: inline-block; 
            background-color: #9b362d;
            font-weight: 700;
            color: #ffffff; 
            padding: 10px 25px;
            font-size: 16px; 
            border: none; 
            cursor: pointer;  
            border-radius: 5px; 
            text-align: center; 

        #zoomControls {
            margin-top: 20px; 
        }