.tool-section{
    background-color: #fff;
    z-index:10;
    position: relative;
    overflow:hidden;
    max-width: 1200px;
    margin:10px auto 50px auto;
    text-align:center;
    padding:50px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border-radius:15px;
}
    /* Tabbed Section */
    .tabbed-section {
      padding: 40px 30px;
      background-color: #fff;
      text-align: center;
      border: 1px dashed #2e83fb;
    box-shadow: 0 4px 10px 0 rgba(0, 0, 0, .3);
    border-radius:15px;
    width:97%;
    margin-left:auto;
    margin-right:auto;
    margin-top:-85px;
    margin-bottom:70px;
    position:relative;
    z-index:1;
      font-family: "Noto Sans", serif;

    }

    .tabbed-section h2 {
      font-size: 36px;
      font-weight: 800;
      color: #1a202c;
      margin-bottom: 20px;
    }

    .tabbed-section p.subtitle {
      font-size: 18px;
      color: #4a5568;
      margin-bottom: 40px;
      font-weight: 500;
    }

    .tabs {
      display: flex;
      justify-content: center;
      margin-bottom: 40px;
      flex-wrap: wrap;
    }

    .tab {
      padding: 12px 24px;
      font-size: 16px;
      font-weight: 600;
      color: #4a5568;
      cursor: pointer;
      display: flex;
      align-items: center;
      margin: 5px;
      border-radius: 50px;
      transition: all 0.3s ease;
      border: 2px solid #e2e8f0;
    }

    .tab i {
      margin-right: 10px;
      font-size: 18px;
    }

    .tab.active {
      background-color: #4F46E5;
      color: #fff;
      border-color: #4F46E5;
    }

    .tab-content {
      display: none;
    }

    .tab-content.active {
      display: block;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
      .tabs {
        flex-direction: column;
      }

      .tab {
        width: 100%;
        justify-content: center;
      }
    }

    .counter-area {
      position: relative;
      background: #fff;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      padding: 0;
      border-radius:15px;
      width:100%;
      margin:0 auto;
    }

    .containert {
      max-width: 100%;
      margin: auto;
    }

    .counter-area2 {
      position: relative;
      background: #fff;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      padding: 0;
      border-radius:15px;
      width:100%;
      margin:0 auto;
    }

    .container2 {
      max-width: 100%;
      margin: auto;
    }
    
    .counter-area3 {
      position: relative;
      background: #fff;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      padding: 0;
      border-radius:15px;
      width:100%;
      margin:0 auto;
    }

    .container3 {
      max-width: 100%;
      margin: auto;
    }

    /* RESPONSIVE GRID LAYOUT - 5 COLUMNS ON DESKTOP */
    .row2 {
      display: grid;
      grid-template-columns: repeat(5, 1fr); /* Changed from 4 to 5 columns */
      gap: 18px; /* Slightly reduced gap for 5 columns */
      justify-content: center;
      padding: 0 15px;
    }

    /* IMPROVED CARD DESIGN WITH EXTRA LARGE ICONS AND GREY BORDER */
    .counter-box {
      display: flex;
      flex-direction: column;
      background: #ffffff;
      padding: 24px 18px; /* Slightly reduced padding for 5 columns */
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
      text-decoration: none;
      border: 2px solid #e5e7eb; /* Added grey border */
      height: 100%;
      min-height: 220px; /* Increased to accommodate extra large icons */
      text-align: center;
    }

    .counter-box:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
      border-color: #d1d5db; /* Slightly darker grey on hover */
    }

    /* Icon Container - EXTRA LARGE SIZE */
    .counter-box .icon {
      width: 100px; /* Increased from 80px */
      height: 100px; /* Increased from 80px */
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 20px; /* Larger radius */
      background: #f8f9ff;
      margin: 0 auto 20px auto;
      transition: all 0.3s ease;
      border: 1px solid #f0f2f5;
    }

    .counter-box:hover .icon {
      background: #ffffff;
      border-color: #4F46E5;
      transform: scale(1.05);
    }

    .counter-box .icon img {
      width: 50px; /* Increased from 40px */
      height: 50px; /* Increased from 40px */
      object-fit: contain;
    }

    /* Content Styling - IMPROVED CONTRAST */
    .counter-content {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .counter-content .title {
      font-size: 17px; /* Slightly adjusted for 5 columns */
      font-weight: 700;
      margin-bottom: 10px;
      text-transform: capitalize;
      font-family: "Noto Sans", serif;
      color: #1a202c;
      line-height: 1.4;
    }

    .counter-content .description {
      font-size: 14px; /* Slightly adjusted for 5 columns */
      color: #4a5568;
      margin-bottom: 16px;
      line-height: 1.5;
      font-family: "Noto Sans", serif;
      flex: 1;
      font-weight: 500;
    }

    .counter-content .arrow-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 13px; /* Slightly adjusted for 5 columns */
      font-weight: 600;
      color: #4F46E5;
      text-decoration: none;
      transition: all 0.3s ease;
      font-family: "Noto Sans", serif;
      margin-top: auto;
      padding: 7px 14px;
      border-radius: 6px;
      background: #f8f9ff;
      border: 1px solid #e2e8f0;
    }

    .counter-content .arrow-link::after {
      content: "→";
      font-size: 15px;
      margin-left: 6px;
      transition: transform 0.3s ease;
      font-weight: bold;
    }

    .counter-box:hover .arrow-link {
      color: #ffffff;
      background: #4F46E5;
      border-color: #4F46E5;
    }

    .counter-box:hover .arrow-link::after {
      transform: translateX(3px);
    }

    .view-counter-container {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      align-items: center;
      gap: 4px;
      background: #f8f9fa;
      color: #4b5563;
      padding: 6px 10px;
      border-bottom-left-radius: 8px;
      font-size: 11px;
      font-weight: 600;
      z-index: 10;
      pointer-events: none;
      border-left: 1px solid #e5e7eb;
      border-bottom: 1px solid #e5e7eb;
    }

    .view-counter {
      font-size: 11px;
      font-weight: 700;
      font-family: "Noto Sans", serif;
      color: #374151;
    }

    .views-text {
      font-size: 10px;
      font-weight: 500;
      color: #6b7280;
    }

    /* Tablet View - 4 columns - UPDATED WITH EXTRA LARGE ICONS */
    @media (max-width: 1200px) {
      .row2 {
        grid-template-columns: repeat(4, 1fr); /* 4 columns on larger tablets */
        gap: 18px;
        padding: 0 12px;
      }
      
      .counter-box {
        padding: 20px 16px;
        min-height: 210px;
      }
      
      .counter-box .icon {
        width: 90px; /* Increased from 72px */
        height: 90px; /* Increased from 72px */
        margin-bottom: 18px;
      }
      
      .counter-box .icon img {
        width: 45px; /* Increased from 36px */
        height: 45px; /* Increased from 36px */
      }
      
      .counter-content .title {
        font-size: 17px;
        font-weight: 700;
      }
      
      .counter-content .description {
        font-size: 14px;
        font-weight: 500;
        color: #4a5568;
      }
    }

    /* Tablet View - 3 columns - UPDATED WITH EXTRA LARGE ICONS */
    @media (max-width: 1024px) {
      .row2 {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
        padding: 0 12px;
      }
      
      .counter-box {
        padding: 20px 16px;
        min-height: 200px;
      }
      
      .counter-box .icon {
        width: 85px; /* Increased from 72px */
        height: 85px; /* Increased from 72px */
        margin-bottom: 16px;
      }
      
      .counter-box .icon img {
        width: 42px; /* Increased from 36px */
        height: 42px; /* Increased from 36px */
      }
      
      .counter-content .title {
        font-size: 17px;
        font-weight: 700;
      }
      
      .counter-content .description {
        font-size: 14px;
        font-weight: 500;
        color: #4a5568;
      }
      
      .counter-content .arrow-link {
        font-size: 13px;
        padding: 7px 14px;
      }
    }

    /* Mobile Portrait View - 2 columns - UPDATED WITH EXTRA LARGE ICONS */
    @media (max-width: 768px) {
      .row2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0 8px;
      }
      
      .counter-box {
        padding: 18px 14px;
        min-height: 180px;
      }
      
      .counter-box .icon {
        width: 75px; /* Increased from 64px */
        height: 75px; /* Increased from 64px */
        margin-bottom: 14px;
      }
      
      .counter-box .icon img {
        width: 38px; /* Increased from 32px */
        height: 38px; /* Increased from 32px */
      }
      
      .counter-content .title {
        font-size: 16px;
        margin-bottom: 8px;
        font-weight: 700;
        color: #1a202c;
      }
      
      .counter-content .description {
        font-size: 13px;
        margin-bottom: 14px;
        line-height: 1.4;
        font-weight: 500;
        color: #4a5568;
      }
      
      .counter-content .arrow-link {
        font-size: 13px;
        padding: 6px 12px;
        font-weight: 600;
      }
    }

    /* Small Mobile - 1 column - UPDATED WITH EXTRA LARGE ICONS */
    @media (max-width: 480px) {
      .row2 {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 0 8px;
      }
      
      .counter-box {
        padding: 20px 16px;
        min-height: 170px;
      }
      
      .counter-box .icon {
        width: 70px; /* Increased */
        height: 70px; /* Increased */
        margin-bottom: 12px;
      }
      
      .counter-box .icon img {
        width: 35px; /* Increased */
        height: 35px; /* Increased */
      }
      
      .counter-content .title {
        font-size: 17px;
      }
      
      .counter-content .description {
        font-size: 14px;
      }
    }

    .section-title {
      text-align: center;
      font-size: 28px;
      font-weight: 800;
      color: #1a202c;
      margin-bottom: 10px;
      font-family: "Noto Sans", serif;
    }

    .section-description {
      text-align: center;
      font-size: 17px;
      color: #4a5568;
      margin-bottom: 40px;
      font-family: "Noto Sans", serif;
      font-weight: 500;
      line-height: 1.5;
    }
    
    .counter-area5 {
      position: relative;
      background: #fff;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      padding: 30px 50px 80px 50px;
      width:100%;
      margin:0 auto;
    }

    .containertt {
      max-width: 100%;
      margin: auto;
    }
   
    /* 5 COLUMNS FOR ROW22 AS WELL */
    .row22 {
      display: grid;
      grid-template-columns: repeat(5, 1fr); /* Changed from 4 to 5 columns */
      gap: 18px;
      justify-content: center;
      padding: 0 15px;
    }

    /* Apply same improved styles with extra large icons and grey border to row22 */
    @media (max-width: 1200px) {
      .row22 {
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
        padding: 0 12px;
      }
      
      .row22 .counter-box .icon {
        width: 90px;
        height: 90px;
      }
      
      .row22 .counter-box .icon img {
        width: 45px;
        height: 45px;
      }
      
      .row22 .counter-content .title {
        font-size: 17px;
        font-weight: 700;
      }
      
      .row22 .counter-content .description {
        font-size: 14px;
        font-weight: 500;
        color: #4a5568;
      }
    }

    @media (max-width: 1024px) {
      .row22 {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
        padding: 0 12px;
      }
      
      .row22 .counter-box .icon {
        width: 85px;
        height: 85px;
      }
      
      .row22 .counter-box .icon img {
        width: 42px;
        height: 42px;
      }
      
      .row22 .counter-content .title {
        font-size: 17px;
        font-weight: 700;
      }
      
      .row22 .counter-content .description {
        font-size: 14px;
        font-weight: 500;
        color: #4a5568;
      }
    }

    @media (max-width: 768px) {
      .row22 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        padding: 0 8px;
      }
      
      .row22 .counter-box .icon {
        width: 75px;
        height: 75px;
      }
      
      .row22 .counter-box .icon img {
        width: 38px;
        height: 38px;
      }
      
      .row22 .counter-content .title {
        font-size: 16px;
        font-weight: 700;
        color: #1a202c;
      }
      
      .row22 .counter-content .description {
        font-size: 13px;
        font-weight: 500;
        color: #4a5568;
      }
    }

    @media (max-width: 480px) {
      .row22 {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 0 8px;
      }
      
      .row22 .counter-box .icon {
        width: 70px;
        height: 70px;
      }
      
      .row22 .counter-box .icon img {
        width: 35px;
        height: 35px;
      }
      
      .row22 .counter-content .title {
        font-size: 17px;
      }
      
      .row22 .counter-content .description {
        font-size: 14px;
      }
    }

    .section-title1 {
      text-align: center;
      font-size: 28px;
      font-weight: 800;
      color: #1a202c;
      padding:20px 0 40px 0;
      font-family: "Noto Sans", serif;
    }

    /* Back to Top Button */
    .back-to-top {
        position: fixed;
        bottom: 0;
        right: 20px;
        width: 50px;
        height: 50px;
        background: transparent;
        color: #FACC15;
        font-size: 14px;
        font-weight: bold;
        border: none;
        border-radius: 0;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* Show button when scrolling */
    .back-to-top.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0px);
    }

    /* Hover Effect */
    .back-to-top:hover {
        background: linear-gradient(45deg, #E30D35, #ff9966);
        transform: scale(1.1);
    }

    /* Scroll Progress Bar */
    #progressBar {
        position: fixed;
        top: 0;
        left: 0;
        width: 0%;
        height: 0;
        background: #FACC15;
        z-index: 9999;
        transition: width 0.2s ease;
    }

    /* General Styles */
    .content-section {
        padding: 50px;
        max-width: 100%;
        margin: 0 auto;
        font-family: "Noto Sans", serif;
    }

    /* Heading Styles */
    .content-section h2 {
        font-size: 28px;
        font-weight: 800;
        text-align: center;
        margin-bottom: 20px;
        color: #1a202c;
    }

    .content-section h3 {
        font-size: 24px;
        font-weight: 700;
        margin-top: 30px;
        color: #1a202c;
    }

    /* Paragraph Background and Text Colors */
    .content-section p:nth-child(odd) {
        background-color: #f8f9fa;
        color: #1a202c;
        padding: 15px;
        border-radius: 5px;
        font-weight: 500;
    }

    .content-section p:nth-child(even) {
        background-color: #e3f2fd;
        color: #1a202c;
        padding: 15px;
        border-radius: 5px;
        font-weight: 500;
    }

    /* FAQ Section */
    .qaq-section {
        margin-top: 50px;
        padding: 20px;
        background-color: #f1f1f1;
        border-radius: 5px;
    }

    .qaq-section h2 {
        text-align: center;
        margin-bottom: 40px;
        font-size: 26px;
        color: #1a202c;
        font-weight: 800;
    }

    .qaq-item {
        margin-bottom: 35px;
        padding: 10px;
        background-color: #fff;
        border-left: 5px solid #007bff;
        border-radius: 5px;
    }

    .qaq-item h3 {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 15px;
        color: #007bff;
    }

    .qaq-item p {
        font-size: 16px;
        color: #1a202c;
        font-weight: 500;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .content-section {
            padding: 30px 10px;
        }

        .content-section h2 {
            font-size: 24px;
        }

        .qaq-item h3 {
            font-size: 18px;
        }

        .qaq-item p {
            font-size: 14px;
        }
    }

    #ads{
        text-align:center;
        padding:20px;
        background: white;
    }

    .toolarea-pdf {
        max-width: 96%;
        margin: 10px auto;
        background: linear-gradient(135deg, #fff 50%, #fff 50%);
        border-radius: 5px;
        border: 1px solid #B3DBF2;
        overflow: hidden;
        padding: 40px;
        align-items: center;
        text-align: center;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 
                    0 1px 3px rgba(0, 0, 0, 0.06);
    }

    .bg-tool{
        background: linear-gradient(135deg, #FFFACD 50%, #D3D3D3 50%); 
        text-align:center;
        color:#1a202c;
        padding:10px;
    }

    .bg-tool h1{color:#E5322D;}

    #content {
        background: linear-gradient(130deg, #FCFDFD 50%, #F6FDF5 50%); 
        padding: 50px 30px;
        border-radius: 0;
        width: 100%;
        margin: 0 auto;
    }

    .styled-section2 {
        background: #F3F4F6; 
        padding: 50px 30px;
        max-width: 100%;
        margin: 0 auto;
        text-align: left;
    }

    .styled-section2 h2 {
        font-size: 28px;
        font-weight: 800;
        margin: 20px 0 20px 0;
        font-family: "Noto Sans", serif;
        color: #1a202c;
    }

    /* STYLISH PARAGRAPH */
    .styled-section2 p {
        font-size: 18px;
        color: #1a202c;
        line-height: 1.6;
        text-align:left;
        font-weight: 600;
        font-family: "Noto Sans", serif;
    }

    .styled-section h3 {
        color: #1a202c;
        font-size: 24px;
        margin-bottom: 20px;
        font-weight: 700;
    }

    /* Responsive Adjustments */
    @media (max-width: 768px) {
        .styled-section2 {
            padding: 30px 15px;
        }

        .styled-section2 h2 {
            font-size: 20px;
        }

        .styled-section2 p {
            font-size: 15px;
        }
    }

    @media (max-width: 480px) {
        .styled-section2 {
            padding: 20px 10px;
        }

        .styled-section2 h2 {
            font-size: 18px;
        }

        .styled-section2 p {
            font-size: 14px;
        }
    }

    .input{
        width: 80%;
        height: 100%;
        padding: 5px;
        font-size: 16px;
        font-family: Arial, sans-serif;
        border: 2px solid;
        border-image: linear-gradient(to right, #06c, #f90) 1;
        border-radius: 5px;
        box-shadow: 2px 2px 5px #ccc;
        transition: all 0.2s ease-in-out;
        margin-top:10px;
        margin-bottom:10px;
        margin:0 auto;
    }

    #upload-button:hover {
        background-image: linear-gradient(to left, #FF3D47, #DC1113);
    }

    #upload-button, .upload-button{
        display: inline-block;
        padding: 20px 40px;
        font-size: 16px;
        font-weight: 700;
        text-align: center;
        text-transform:uppercase;
        background-image: linear-gradient(45deg, #FC4B4B 50%, #283448 50%);
        border-radius: 50px;
        cursor: pointer;
        transition: background-color 0.2s ease-in-out;
        margin-bottom:25px;
        color:white;
        max-width:100%;
    }

    .upload-button:hover, #upload-button:hover {
        background-image: linear-gradient(145deg, #FC4B4B 50%, #283448 50%);
        border-radius: 12px;
        border:12px double #fff;
        color:white;
    }

    #uploadBtn{
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 24px;
        border-radius: 8px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        border: none;
        outline: none;
        font-size: 15px;
        gap: 8px;
    }

    input[type="file"]::file-selector-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 15px 4px;
        border-radius: 8px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s ease;
        border: none;
        outline: none;
        font-size: 16px;
        gap: 8px;
        width: 100%;
        background:#4F46E5;
        color:#fff;
    }

    input[type="file"]::file-selector-button:hover {
        background-color: #4338CA;
        color:#fff;
    }

    input[type=file]::file-selector-button:active {
        background-color: #3730A3;
    }

    input[type=file]::file-selector-button:focus {
        outline: none;
        box-shadow: 0 0 0 2px #fff, 0 0 0 4px #4F46E5;
    }

    input[type=file]::file-selector-button::before {
        content: "Select File";
    }

    input[type=file]::file-selector-button::before,
    input[type=file]::file-selector-button::before {
        content: "\2193 Browse Files";
    }

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

    /* General Styling for Inputs */
    input[type="text"], input[type="url"], #url-input {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        font-family: Arial, sans-serif;
        background: #fff;
        border-radius: 5px;
        border: 2px solid #1A8FE3;
        transition: all 0.3s ease-in-out;
        margin: 10px auto;
        display: block;
        outline: none;
        text-align: center;
        font-weight: 500;
    }

    /* Hover Effect */
    input[type="text"]:hover, input[type="url"]:hover, #url-input:hover {
        border-color: #007BFF;
    }

    /* Focus Effect */
    input[type="text"]:focus, input[type="url"]:focus, #url-input:focus {
        border-color: #0056b3;
        box-shadow: 0 0 8px rgba(26, 143, 227, 0.5);
    }

    /* Responsive Design */
    @media (max-width: 1024px) {
        input[type="text"], input[type="url"], #url-input {
            width: 70%;
        }
    }

    @media (max-width: 768px) {
        input[type="text"], input[type="url"], #url-input {
            width: 80%;
            font-size: 15px;
            height: 42px;
        }
    }

    @media (max-width: 480px) {
        input[type="text"], input[type="url"], #url-input {
            width: 90%;
            font-size: 14px;
            height: 40px;
            padding: 8px;
        }
    }

    input[type="number"]{
        height: 45px;
        padding: 5px 15px;
        font-size: 16px;
        font-family: Arial, sans-serif;
        background:#fff;
        border-radius: 5px;
        border:2px solid #ddd;
        transition: all 0.2s ease-in-out;
        margin:10px auto;
        font-weight: 500;
    }

    select {
        height: 45px;
        padding: 5px 15px; 
        font-size: 16px;
        margin-left:11px;
        background:#fff;
        border-radius: 7px;
        border:2px solid #ddd;
        transition: all 0.2s ease-in-out;
        margin:10px auto; 
        font-weight: 500;
    }

    textarea, #base64Input {
        width: 90%;
        height: 250px;
        padding: 10px;
        font-size: 16px;
        font-family: Arial, sans-serif;
        background: snow;
        border-radius: 5px;
        border:1px solid #ddd;
        transition: all 0.2s ease-in-out;
        margin-top:10px;
        margin-bottom:15px;
        margin:10px auto;
        font-weight: 500;
    }

    textarea:hover {
        border-color: #06c;
        box-shadow: none;
    }

    textarea:focus {
        outline: none;
        border-color: #55555e;
        box-shadow: none;
    }

    #success-message{
        font-size:22px;
        color:green;
        font-weight:700;
        margin:30px auto;
    }

    canvas, #image-container, .img, #img, image, .image, #image, #convertedImage, #preview-image, #image-canvas {
        border: 5px solid white;
        box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
        width:40%;
        margin:20px auto;
        padding:15px;
        background:white;
    }

    #image-container img {
        max-width: 100%;
    }

    pre, #result, output, #output, .output,#output-text, #speechOutput {
        font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
        font-size: 14px;
        color: #1a202c;
        background-color: #fff;
        padding: 0.2em 0.4em;
        border-radius: 5px;
        border:2px solid #ccc; 
        transition: all 0.2s ease-in-out;
        white-space: pre-wrap;
        text-align:left;
        width:90%;
        padding:15px;
        margin:20px auto;
        font-weight: 500;
    }

    input[type="range"] {
        -webkit-appearance: none;
        width: 80%;
        background: transparent;
        height: 10px;
        border-radius: 5px;
        outline: none;
        padding: 0;
        margin: 0;
        box-shadow: inset 0 0 5px #333;
        transition: box-shadow 0.2s;
        margin-top:10px;
    }

    input[type="range"]:focus {
        box-shadow: inset 0 0 5px #888;
    }

    input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: #CA0505;
        cursor: pointer;
        transition: background 0.2s;
        margin-top:-5px;
    }

    input[type="range"]::-webkit-slider-thumb:hover {
        background: #3e8e41;
    }

    input[type="range"]::-webkit-slider-runnable-track {
        height: 10px;
        background: #ddd;
        border-radius: 5px;
        border: none;
    }

    label {
        display: block;
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 5px;
        color:#1a202c;
        margin-top:11px;
    }

    /* Styling for input[type="color"] */
    input[type="color"] {
        padding: 4px;
        border: 1px solid #ccc;
        border-radius: 4px;
        cursor: pointer;
        outline: none;
    }

    /* Style the color preview box */
    input[type="color"]::-webkit-color-swatch-wrapper {
        padding: 0;
    }

    input[type="color"]::-webkit-color-swatch {
        border: none;
        border-radius: 4px;
        padding: 0;
    }

    .form-control {
        display: block;
        margin:0 auto;
        max-width: 100%;
        padding: 0.375rem 0.75rem;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.5;
        color: #1a202c;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 0.25rem;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }

    input[type="file"] {
        margin-top: 20px;
    }

    #options-row {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
    }

    #orientation-options,
    #padding-options {
        margin: 10px;
    }

    #orientation-label,
    #padding-label {
        margin-right: 10px;
        font-weight: 700;
    }

    #progress-bar {
        width: 90%;
        margin: 20px auto;
        background-color: transparent;
        border-radius: 5px;
        overflow: hidden;
    }

    #progress-fill {
        height: 30px;
        background-color: #3F5EF9;
        text-align: center;
        line-height: 30px;
        color: white;
        width: 0;
        border-radius:50px;
    }

    #success-message {
        display: none;
        margin-top: 20px;
    }

    .page-container {
        position: relative;
        display: inline-block;
        margin: 10px;
        width:350px;
        background:white;
        padding:11px;
        border:2px solid #1A8FE3;
    }

    .page{
        width:300px;
    }

    #conversion-message {
        display: block;
        margin-top: 10px;
        font-size: 16px;
        color: #1a202c;
        font-weight: 500;
    }

    #conversion-progress {
        display: block;
        margin-top: 10px;
        width: 100%;
        height: 20px;
        border-radius: 10px;
        background-color: #f0f0f0;
    }

    #conversion-progress::-webkit-progress-bar {
        background-color: #f0f0f0;
        border-radius: 10px;
    }

    #conversion-progress::-webkit-progress-value {
        background-color: #3F5EF9;
        border-radius: 10px;
    }

    #conversion-progress::-moz-progress-bar {
        background-color: #3F5EF9;
        border-radius: 10px; 
    }

    #imgsec{
        padding:20px;
        max-width:100%;
        margin:11px auto;
        border:1px solid #3F5EF9;
        background:#fff;
        box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
        border-radius:12px;
    }

    #orientation, #padding{
        width:50%;
    }

    .upload-icon {
        display: block;
        margin: 25px auto;
        font-size: 50px;
        color: #007bff;
    }

    @keyframes moving-border {
        0% {
            border-color: red;
            outline-color: blue;
        }
        50% {
            border-color: blue;
            outline-color: #55DA71;
        }
        100% {
            border-color: #55DA71;
            outline-color: red;
        }
    }

    .drag-drop, #drag-drop-area, #dragDropArea, #uploadSection, #dragArea {
        border: 2px dashed #E5E7EB;
        padding: 50px 0;
        margin: 10px;
        cursor: pointer;
        border-radius: 8px;
        max-width: 100%;
        background: #F9FAFB;
    }

    #fileNameDisplay, #fileName, #fileInfo{
        padding:20px;
        border:0px solid #ddd;
        border-radius:5px;
        background:#f5f5fa;
        color:navy;
        font-size:14px;
        font-weight:700;
        margin:10px auto;
        max-width:100%;
    }

    #drag-drop-area:hover {
        border-color: #0056b3;
    }

    :root {
        --primary: #4F46E5;
        --primary-hover: #4338CA;
        --text: #1a202c;
        --text-light: #4a5568;
        --border: #e5e7eb;
        --bg-light: #f9fafb;
        --error: #ef4444;
        --success: #10b981;
    }

    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    .containert {
        max-width: 94%;
        margin: 100px auto 50px auto;
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        overflow: hidden;
        padding: 24px 5px 24px 5px;
    }

    /* Header */
    .header-t {
        padding: 24px;
        border-bottom: 1px solid var(--border);
        text-align: center;
    }

    .header-t h1 {
        font-size: 38px;
        margin-bottom: 12px;
        color: var(--primary);
        font-weight:800;
    }

    .header-t p {
        color: var(--text-light);
        font-size: 15px;
        font-weight: 500;
    }

    /* Main Content */
    .main-content {
        display: flex;
        flex-direction: column;
        padding: 24px;
    }

    /* Upload Section */
    .upload-section {
        text-align: center;
        padding: 40px;
        border: 2px dashed var(--border);
        border-radius: 12px;
        background-color: var(--bg-light);
        transition: all 0.3s ease;
        margin-bottom: 24px;
    }

    .upload-section.active {
        border-color: var(--primary);
        background-color: rgba(79, 70, 229, 0.05);
    }

    .upload-icon {
        font-size: 48px;
        color: var(--primary);
        margin-bottom: 16px;
    }

    .upload-text {
        font-size: 18px;
        color: var(--text);
        margin-bottom: 8px;
        font-weight: 600;
    }

    .upload-hint {
        font-size: 14px;
        color: var(--text-light);
        margin-bottom: 20px;
        font-weight: 500;
    }

    /* File List */
    .file-list {
        display: none;
        margin-bottom: 24px;
        border: 1px solid var(--border);
        border-radius: 8px;
        overflow: hidden;
        animation: fadeIn 0.3s ease;
    }

    .file-list-header {
        display: flex;
        justify-content: space-between;
        padding: 12px 16px;
        background-color: var(--bg-light);
        border-bottom: 1px solid var(--border);
    }

    .file-list-title {
        font-weight: 700;
        color: var(--text);
    }

    .file-list-items {
        max-height: 300px;
        overflow-y: auto;
    }

    .file-item {
        display: flex;
        align-items: center;
        padding: 12px 16px;
        border-bottom: 1px solid var(--border);
    }

    .file-item:last-child {
        border-bottom: none;
    }

    .file-icon {
        font-size: 24px;
        margin-right: 12px;
        color: var(--primary);
    }

    .file-item-info {
        flex: 1;
        min-width: 0;
    }

    .file-item-name {
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--text);
    }

    .file-item-size {
        font-size: 12px;
        color: var(--text-light);
        font-weight: 500;
    }

    .file-item-actions {
        display: flex;
        gap: 8px;
    }

    .file-item-btn {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--text-light);
        transition: color 0.2s;
    }

    .file-item-btn:hover {
        color: var(--primary);
    }

    /* Options Section */
    .options-section {
        display: none;
        margin-bottom: 24px;
        animation: fadeIn 0.3s ease;
    }

    .options-title {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 16px;
        color: var(--text);
    }

    .option-group {
        margin-bottom: 20px;
    }

    .option-label {
        display: block;
        font-weight: 600;
        margin-bottom: 8px;
        color: var(--text);
    }

    .radio-group {
        display: flex;
        gap: 24px;
        margin-bottom: 12px;
    }

    .radio-option {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
    }

    .radio-option input {
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

    /* Action Buttons */
    .action-buttons {
        display: none;
        justify-content: flex-end;
        gap: 12px;
        margin-top: 24px;
        animation: fadeIn 0.3s ease;
    }

    /* Loading indicator */
    .loading {
        display: none;
        margin: 20px 0;
        text-align: center;
        color: var(--primary);
    }

    .loading i {
        animation: spin 1s linear infinite;
    }

    /* Drag Overlay */
    .drag-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(79, 70, 229, 0.2);
        z-index: 1000;
        display: none;
        justify-content: center;
        align-items: center;
        pointer-events: none;
    }

    .drag-message {
        background-color: white;
        padding: 24px 48px;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        font-size: 18px;
        color: var(--primary);
        font-weight: 700;
    }

    /* Animations */
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Responsive */
    @media (max-width: 768px) {
        .header-t h1 {
            font-size: 24px;
        }

        .upload-section {
            padding: 30px 20px;
        }

        .file-item {
            flex-direction: column;
            align-items: flex-start;
        }

        .file-item-actions {
            margin-top: 8px;
            align-self: flex-end;
        }
    }

    /* Additional mobile improvements for very small screens */
    @media (max-width: 360px) {
        .counter-content .title {
            font-size: 16px;
        }
        
        .counter-content .description {
            font-size: 13px;
        }
        
        .section-title,
        .section-title1 {
            font-size: 24px;
        }
        
        .section-description {
            font-size: 15px;
        }
    }
    
    /* ===============================
   PROFESSIONAL CLEAN OVERRIDES
   (SAFE – DOES NOT BREAK DESIGN)
   =============================== */

/* Main sections – softer, premium shadow */
.tool-section,
.tabbed-section,
.counter-area,
.counter-area2,
.counter-area3,
.counter-area5,
.containert {
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08) !important;
  border-radius: 16px !important;
}

/* Remove harsh dashed border – make it Google-friendly */
.tabbed-section {
  border: 1px solid #e5e7eb !important;
}

/* Tabs – cleaner modern look */
.tab {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
}

.tab:hover {
  background: #f8fafc !important;
}

.tab.active {
  background: #4F46E5 !important;
  color: #ffffff !important;
  border-color: #4F46E5 !important;
}

/* Tool cards – professional elevation */
.counter-box {
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}

.counter-box:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12) !important;
}

/* Icon container – softer background */
.counter-box .icon {
  background: #f1f5f9 !important;
  border: 1px solid #e5e7eb !important;
}

.counter-box:hover .icon {
  background: #ffffff !important;
}

/* CTA link – stronger but clean */
.counter-content .arrow-link {
  background: #f8fafc !important;
  border: 1px solid #e5e7eb !important;
}

.counter-box:hover .arrow-link {
  background: #4F46E5 !important;
  color: #ffffff !important;
  border-color: #4F46E5 !important;
}

/* Upload section – modern SaaS feel */
.upload-section {
  background: #f8fafc !important;
  border: 2px dashed #e5e7eb !important;
}

.upload-section.active {
  background: rgba(79, 70, 229, 0.06) !important;
  border-color: #4F46E5 !important;
}

/* Remove visual clutter on mobile */
@media (max-width: 768px) {
  .tool-section {
    padding: 30px 18px !important;
  }

  .tabbed-section {
    margin-top: -40px !important;
  }
}