.upload-content-section {

     padding: 50px 0;

 }



 .upload-content .headingbig {

     text-align: center;

 }



 .upload-content .headingbig::after {

     left: 50%;

     transform: translate(-50%, 0);

 }



 .upload-content .main-content {

     display: grid;

     grid-template-columns: 1fr 2fr;

     gap: 30px;

     padding: 30px;

 }



 .upload-content .sidebar {

     display: flex;

     flex-direction: column;

     gap: 25px;

 }



 .upload-content .upload-section {



     background: #301f613b;

     border: 2px dashed #7658cc;

     padding: 25px;

     border-radius: 15px;

     transition: all 0.3s ease;

 }



 .upload-content .upload-section:hover {

     border-color: #667eea;

     background: #2f1f6180;

 }



 .upload-content .upload-section h3 {

     color: #fff;

     margin-bottom: 15px;

     font-size: 25px;

     display: flex;

     align-items: center;

     gap: 10px;

 }



 .upload-content .file-input-wrapper {

     position: relative;

     overflow: hidden;

     display: inline-block;

     width: 100%;

 }



 .upload-content .file-input {

     position: absolute;

     left: -9999px;

 }



 .upload-content .file-input-label {

     background: linear-gradient(45deg, #667eea, #764ba2);

     color: white;

     padding: 12px 20px;

     border-radius: 10px;

     cursor: pointer;

     display: flex;

     align-items: center;

     justify-content: center;

     gap: 10px;

     transition: all 0.3s ease;

     font-weight: 500;

 }



 .upload-content .file-input-label:hover {

     transform: translateY(-2px);

     box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);

 }



 .upload-content .accessories-section h3 {

     color: #fff;

     margin-bottom: 15px;

     font-size: 25px;

     display: flex;

     align-items: center;

     gap: 10px;

 }



 .upload-content .accessories-grid {

     display: grid;

     grid-template-columns: repeat(4, 1fr);

     gap: 15px;

 }



 .upload-content .accessory-item {

     position: relative;

     border-radius: 8px;

     overflow: hidden;

     cursor: grab;

     transition: all 0.3s ease;

     border: 3px solid transparent;

     background: white;

     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

     padding: 8px;

 }



 .upload-content .accessory-item:hover {

     transform: translateY(-5px);

     border-color: #667eea;

     box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);

 }



 .upload-content .accessory-item img {

     width: 100%;

     /* height: 80px; */

     object-fit: contain;

     display: block;

 }



 .upload-content .accessory-item::after {

     content: '';

     position: absolute;

     top: 0;

     left: 0;

     right: 0;

     bottom: 0;

     background: linear-gradient(45deg, rgba(102, 126, 234, 0.8), rgba(118, 75, 162, 0.8));

     opacity: 0;

     transition: opacity 0.3s ease;

 }



 .upload-content .accessory-item:hover::after {

     opacity: 1;

 }



 .upload-content .canvas-section {

     display: flex;

     flex-direction: column;

     gap: 20px;

     overflow: hidden;

 }



 .upload-content .canvas-wrapper {

     position: relative;

     background: #301f613b;

     border: 1px solid #7658cc;

     border-radius: 15px;

     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

     overflow: hidden;

 }

 .upload-content #mainCanvas {

     display: block;

     max-width: 600px;

     width: 100%;

     height: auto;

     border: none;

     cursor: crosshair;

     margin: 0 auto;

 }



 .upload-content .canvas-overlay {

     position: absolute;

     top: 15px;

     right: 15px;

     background: rgba(0, 0, 0, 0.7);

     color: white;

     padding: 8px 12px;

     border-radius: 8px;

     font-size: 0.9rem;

     display: none;

 }



 .upload-content .canvas-overlay.show {

     display: block;

 }



 .upload-content .controls {

     display: flex;

     gap: 15px;

     flex-wrap: wrap;

 }



 .upload-content .btn {

     padding: 12px 24px;

     border: none;

     border-radius: 10px;

     cursor: pointer;

     font-weight: 500;

     transition: all 0.3s ease;

     display: flex;

     align-items: center;

     gap: 8px;

     font-size: 1rem;

 }



 .upload-content .btn-primary {

     background: linear-gradient(45deg, #667eea, #764ba2);

     color: white;

 }



 .upload-content .btn-secondary {

     background: #6c757d;

     color: white;

 }



 .upload-content .btn-danger {

     background: #dc3545;

     color: white;

 }



 .upload-content .btn:hover {

     transform: translateY(-2px);

     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

 }



 .upload-content .slider-group,

 .accessories-section {

     background: #301f613b;

     border: 1px solid #7658cc;

     padding: 20px;

     border-radius: 12px;

     margin-bottom: 20px;

 }



 .upload-content .slider-group h4 {

     margin-bottom: 15px;

     color: #fff;

     font-size: 1.1rem;

 }



 .upload-content .slider-container {

     display: flex;

     align-items: center;

     gap: 15px;

     margin-bottom: 10px;

 }



 .upload-content .slider-container label {

     min-width: 80px;

     font-weight: 500;

     color: #fff;

 }



 .upload-content .slider {

     flex: 1;

     height: 6px;

     border-radius: 3px;

     background: #ddd;

     outline: none;

     appearance: none;

 }



 .upload-content .slider::-webkit-slider-thumb {

     appearance: none;

     width: 20px;

     height: 20px;

     border-radius: 50%;

     background: #667eea;

     cursor: pointer;

     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);

 }



 .upload-content .slider::-moz-range-thumb {

     width: 20px;

     height: 20px;

     border-radius: 50%;

     background: #667eea;

     cursor: pointer;

     border: none;

     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);

 }



 .upload-content .value-display {

     min-width: 40px;

     text-align: center;

     font-weight: bold;

     color: #667eea;

 }



 .toast {

     position: fixed;

     top: 20px;

     right: 20px;

     background: #28a745;

     color: white;

     padding: 15px 20px;

     border-radius: 10px;

     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);

     z-index: 1000;

     opacity: 0;

     transform: translateX(100%);

     transition: all 0.3s ease;

 }



 .toast.show {

     opacity: 1;

     transform: translateX(0);

 }





 .upload-content .placeholder-text {

     position: absolute;

     top: 50%;

     left: 50%;

     transform: translate(-50%, -50%);

     text-align: center;

     color: #fff;

     font-size: 25px;

     pointer-events: none;

 }



 .upload-content .placeholder-text i {

     font-size: 3rem;

     margin-bottom: 15px;

     opacity: 0.5;

 }



 .modal-fullscreen .modal-content {

     background: url(../images/fair-launch-bg.png);

     background-size: 100% 100%;

     background-repeat: no-repeat;

     background-color: #080c1d;

 }



 .modal-fullscreen .modal-body {

     display: flex;

     align-items: center;

 }



 .modal-fullscreen .modal-body .upload-content {

     flex: 1;

 }



 @media (max-width: 1669px) {



     .upload-content .upload-section h3,

     .upload-content .accessories-section h3,

     .upload-content .placeholder-text {

         font-size: 20px;

     }

 }



 @media screen and (max-width: 1399px) {

     .upload-content .accessories-grid {

         grid-template-columns: repeat(2, 1fr);

     }



     .upload-content .upload-section h3,

     .upload-content .accessories-section h3,

     .upload-content .placeholder-text {

         font-size: 18px;

     }

 }



 @media screen and (max-width: 1199px) {



     .upload-content .upload-section h3,

     .upload-content .accessories-section h3,

     .upload-content .placeholder-text,

     .upload-content .file-input-label {

         font-size: 15px;

     }

 }



 @media screen and (max-width: 991px) {



     .upload-content .main-content {

         gap: 20px;

         padding: 0px;

     }



     .upload-content .upload-section,

     .accessories-section {

         padding: 15px 12px;

         border-radius: 8px;

     }

 }



 @media (max-width: 768px) {

     .upload-content .main-content {

         grid-template-columns: 1fr;

         padding: 0;

     }



     .upload-content .header h1 {

         font-size: 2rem;

     }



     .upload-content .controls {

         justify-content: center;

     }



     .modal-fullscreen .modal-body {

         flex-direction: column;

         padding: 0;

     }



     .upload-content .slider-group {

         display: block !important;

     }



     .upload-content .controls {

         display: flex;

         gap: 10px;

     }



     .upload-content .btn {

         padding: 8px 12px;

         border-radius: 4px;

         display: flex;

         align-items: center;

         font-size: 14px;

     }



     /* .upload-content #mainCanvas {

         height: 355px;

     } */



     .upload-content .canvas-overlay.show {

         display: none !important;

     }



     .upload-content .accessories-grid {

         grid-template-columns: repeat(4, 1fr);

         gap: 8px;

     }

 }

 .upload-content #cameraContainer {

    background: #301f613b;

    border: 2px solid #7658cc;

    padding: 15px;

    border-radius: 10px;

    margin-top: 15px;

    position: relative;

}



.upload-content #cameraVideo {

    width: 100%;

    border-radius: 8px;

    background: #1a1a1a;

}



.upload-content .camera-label {

    background: linear-gradient(45deg, #764ba2, #667eea) !important;

}



.upload-content .mt-3 {

    margin-top: 1rem;

}



.upload-content .w-100 {

    width: 100%;

}