:root {
   --primary-color: #00BFFF;
   --secondary-color: #0000FF;
   --secondary-color-light: #0485CB;
   --background-light: #E8F8FF;
   --background-border: #B4AEAE;
   --text-dark: #1b1b1b;
   --text-muted: #4b4b4b;
   --button-color: linear-gradient(90deg, #00BFFF, #4dd2fe);
 }

  .bg-image-d{
    right: 7%; top: 54%;
  }
  .bg-image-e{
     right: 7%; top: 50%;
  }
  .bg-image-f{
    right: 10%; top: 50%;
  }

 .heder-background {
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding-top: 20px;
   padding-bottom: 20px;
   background: var(--background-main);
 }


 .heder-background h1 {
   z-index: 10px;
   text-align: center;
   margin-bottom: 10px;

 }

 .heder-background .subtitle {
   width: 60%;
   color: var(--primary-color);
   font-size: large;
   text-align: center;
   z-index: 10px;
   margin-bottom: 10px;
 }

 .container {
   width: 95%;
   max-width: 850px;
   height: 300px;
   background: #fff;
   border-radius: 16px;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
   padding: 40px;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-top: 10px;

 }


 .subtitle {
   color: var(--text-muted);
   text-align: center;
   margin-bottom: 25px;
 }

 .drop-area {
   width: 100%;
   height: 100%;
   border: 2px dashed var(--background-border);
   border-radius: 12px;
   text-align: center;
   cursor: pointer;
   transition: 0.3s;
   margin-left: 0px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;

 }
 .drop-area i{
  margin-bottom: 30px;
  font-size: 40px;
  color: var(--primary-color);
 }


 .drop-area:hover,
 .drop-area.drag {
   background: #DFF4FF;
   border-color: var(--primary-color);
 }

 .drop-area p {
   font-size: 16px;
   color: var(--text-muted);
 }



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

 #mainArea {
   display: none;
 }

 .main-area {
   width: 100%;
   height: 100%;
   display: none;
   gap: 20px;
   display: flex;
 }

 .left-box,
 .right-box {
   flex: 1;
   border-radius: 12px;

 }

 .left-box img {
   width: 100%;
   max-height: 100%;
   object-fit: contain;
   border-radius: 10px;
   border: 1px solid var(--background-border);
 }

 .right-box .btn-group {
   display: flex;
   justify-content: space-between;
   gap: 10px;
   margin-bottom: 15px;
 }

 button {
   flex: 1;
   border: none;
   padding: 12px;
   font-size: 15px;
   border-radius: 8px;
   cursor: pointer;
   transition: 0.2s;
 }

 .upload-file-details {
   width: 100%;
   height: 60%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }

 .upload-file-details input {
   width: 80%;
   height: 30px;
   padding: 5px;
   border-radius: 10px;
   border: 1px solid var(--background-border);
   text-align: center;
   margin-top: 20px;
   margin-bottom: 20px;
 }

 #convertBtn {
   background: var(--button-color);
   color: #fff;
 }

 #resetBtn,
 #resetAfterConvert {
   border: 1px solid var(--primary-color);
   color: var(--primary-color);
   background: #fff;
 }


 .download-btn {
   background: var(--button-color);
   color: #fff;
   border: none;
   padding: 12px;
   border-radius: 8px;
   flex: 1;
   cursor: pointer;
 }

 button:hover {
   transform: scale(1.04);
 }

 .download-section {
   height: 100%;
   display: none;
   text-align: center;
   margin-top: 10px;
 }


 .file-info {
   margin-top: 10px;
   display: none;
   flex-direction: column;
   align-items: center;
   gap: 5px;
 }

 .file-info input {
   padding: 5px 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
   width: 220px;
   text-align: center;
 }

 .hidden {
   display: none;
 }

 .download-reset {
   display: flex;
   gap: 10px;
   justify-content: center;
   margin-top: 15px;
 }

 @media(max-width: 768px) {
   .heder-background {
     height: auto;
   }

   .bg-image-d{
    right: 7%; top: 30%;
  }
  .bg-image-e{
     right: 7%; top: 27%;
  }
  .bg-image-f{
    right: 10%; top: 27%;
  }
   .container {

    height: auto;
    padding: 2px;

   }

   .drop-area {
     min-height: 250px;
     width: 100%;
   }

   .main-area {
     width: 90%;
     padding-top: 30px;
     padding-bottom: 30px;
     flex-direction: column;
   }
   .btn-group{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
   }
   #format {
    width: 40%;
    padding: 2px;
    border-radius: 5px;
    border: 1px solid var(--background-border);
   }
   .btn-group button{
    margin-left: 0px;
   }

 }

  @media(max-width: 1200px) {
 .container {
      width: 70%;  
     padding:20px;

   }
  }