body {
           font-family: 'Noto Sans', sans-serif;
           margin: 0;
           padding: 0;
           background-color: #EFF2F9;
       }
       
       #front-preview, #back-preview {
           position: relative;
           background-size: cover;
           background-position: center;
           display: flex;
           flex-direction: column;
           justify-content: center;
           align-items: center;
       }
       .card-content {
           position: absolute;
           width: 100%;
           height: 100%;
           padding: 15px;
           box-sizing: border-box;
           color: #000;
       }
       
       #front-preview {
           background-image: url('https://oneclickpvccard.com/ashim/media/dl_front3.png');
       }
       
       #back-preview {
           background-image: url('https://oneclickpvccard.com/ashim/media/dl_back.png');
       }
       
       .preview-container {
           display: flex;
           gap: 20px;
           margin: 20px 0;
       }
       
       .preview-content {
           position: absolute;
           color: #000;
           text-align: center;
           font-size: 14px;
       }
       
       .container {
           max-width: 1200px;
           margin: 0 auto;
           padding: 20px;
       }
       
       h1, h2 {
           text-align: center;
           margin-bottom: 20px;
           color: #1e2532;
       }
       
       h2 {
           font-size: 1.5rem;
           margin-top: 40px;
       }
       #union{position: absolute;
           font-size: 1.2rem;
           margin-top: -5px;
           font-weight: 700;
           left: 120px;
       
       }
       #union2{position: absolute;
           font-size: 1.2rem;
           margin-top: 15px;
           font-weight: 700;
           left: 120px;
       
       }
       /* Navbar Styles */
       .navbar {
           background-color: #fff;
           padding: 20px;
           box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       }
       
       .navbar-brand-text {
           font-size: 1.8rem;
           font-weight: bold;
           color: #1A91F0;
           text-decoration: none;
       }
       
       .navbar-brand-text span {
           color: #1e2532;
       }
       
       /* Form Styles */
       form {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
           gap: 20px;
           margin-top: 20px;
       }
       
       .form-group {
           display: flex;
           flex-direction: column;
       }
       
       label {
           font-weight: 500;
           margin-bottom: 8px;
           color: #1e2532;
       }
       
       input, textarea, select {
           padding: 12px;
           border: 1px solid #ccc;
           border-radius: 6px;
           font-size: 1rem;
           font-family: inherit;
           background-color: #fff;
           transition: all 0.3s ease;
       }
       
       input:focus, textarea:focus, select:focus {
           border-color: #1A91F0;
           box-shadow: 0 0 5px rgba(26, 145, 240, 0.3);
           outline: none;
       }
       
       textarea {
           resize: none;
       }
       
       .form-text {
           color: #ca0b00;
           font-size: 0.875rem;
           margin-top: 5px;
       }
       
       /* Preview Container */
       .preview-container {
           display: flex;
           flex-direction: column;
           align-items: center;
           gap: 30px;
           margin-top: 40px;
       }
       
       .card-preview {
           width: 100%;
           max-width: 500px;
           aspect-ratio: 3.375 / 2.125; /* CR80 card ratio */
           
           background-color: #fff;
           position: relative;
           overflow: hidden;
           background-size: cover;
           background-position: center;
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
       }
       
       .card-content {
           position: absolute;
           width: 100%;
           height: 100%;
           padding: 15px;
           box-sizing: border-box;
           color: #000;
       }
       
       .card-content img.photo {
           width: 76px;
           height: 80px;
           border-radius: 0;
           object-fit: cover;
           position: absolute;
           top: 63px;
           right: 34px;
           border: 2px solid #fff;
           box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
       }
       
       .card-content img.signature {
           width: 80px;
           height: 25px;
           object-fit: contain;
           position: absolute;
           bottom: 138px;
           right: 34px;
       }
       .vehicle-image {
       width: 30px; /* Adjust size as needed */
       height: auto; /* Maintain aspect ratio */
       position: absolute; /* Allows precise positioning */
       display: none; /* Hidden by default */
       }
       
       #motorcycle-image {
       top: 160px; /* Adjust position */
       left: 11px; /* Adjust position */
       }
       
       #car-image {
       top: 187px; /* Adjust position */
       left: 11px; /* Adjust position */
       }
       
       #truck-image {
       top: 209px; /* Adjust position */
       left: 11px; /* Adjust position */
       }
       .vehicle-text {
           font-size: 0.8rem; /* Adjust font size */
           font-weight: 600; /* Bold text */
           color: #000; /* Text color */
           position: absolute; /* Allows precise positioning */
           display: none; /* Hidden by default */
       }
       
       #mcwg-text {
           top: 153px; /* Adjust position */
           left: 73px; /* Adjust position */
       }
       
       #lmv-text {
           top: 176px; /* Adjust position */
           left: 73px; /* Adjust position */
       }
       
       #trns-text {
           top: 200px; /* Adjust position */
           left: 73px; /* Adjust position */
       }
       
       #e-rickshaw-text {
           top: 202px; /* Adjust position */
           left: 73px; /* Adjust position */
       }
       
       
       /* Default Preview Text Styles */
       #state-preview,
       #state2-preview,
       #DL-preview,
       #issue-date-preview,
       #issue-date2-preview,
       #validity-nt-preview,
       #validity-tr-preview,
       #name-preview,
       #dob-preview,
       #father-name-preview,
       #address-preview,
       #blood-group-preview,
       #organ-donor-preview,
       #dl-no-back-preview,
       #issued-by-preview,
       #issued-by2-preview,
       #issued-by3-preview,
       #rto-preview,
       #v-category-nt-1-preview,
       #v-category-nt-2-preview,
       #v-category-TR-preview,
       #issue-date-mcwg-preview,
       #issue-date-lmv-preview,
       #issue-date-tr-preview,
       #emergency-number-preview {
           font-size: 0.8rem; /* Larger font size for emphasis */
           font-weight: 200; /* Make it bold */
           position: absolute;
           color: #000; /* Text color */
           font-weight: 600;
       }
       
       
       #f-issue-date-preview,
       #f-issue-first-preview,
       #f-validity-nt-preview,
       #f-validity-tr-preview,
       #f-name-preview,
       #f-dob-preview,
       #f-father-name-preview,
       #f-address-preview,
       #f-blood-group-preview,
       #f-signature-preview
       {
           font-size: 0.8rem; /* Larger font size for emphasis */
           font-weight: 200; /* Make it bold */
           position: absolute;
           color: #000000; /* Text color */
           font-weight: 600;
       }
       
       #back-dl-no-back-preview,
       #back-issued-by-preview,
       #back-vehicle-code-preview,
       #back-vehicle-class-preview,
       #back-rto-preview,
       #back-issue-date-mcwg-preview,
       #back-Vehicle-category, 
       #back-b-no, 
       #back-b-no-date,
       #back-b-no-issue,
       #back-adp-number-preview,
        #back-Haza-preview,
        #back-Hill-preview,
         #back-Form-7-preview,
       #back-emergency-number-preview {
           font-size: 0.6rem; /* Larger font size for emphasis */
           font-weight: 200; /* Make it bold */
           position: absolute;
           color: #000000; /* Text color */
           font-weight: 600;
       }
       
       /* Positioning for Front Side Preview */
       #state-preview { top: 12px; left: 215px;
           font-size: 1.2rem;
           font-weight: 700; }
           #state2-preview {font-size: 1rem; /* Adjust font size */
               font-weight: bold; /* Bold text */
               color: #000; /* Text color */
               position: absolute; /* Allows precise positioning */
               top: 7px; /* Adjust position */
               right: 20px; /* Adjust position */
               z-index: 2;}
       #DL-preview { top: 55px; left: 110px; 
           font-size: 1.0rem;
           font-weight: 700;}
       #issue-date-preview { top: 109px; left: 112px; }
       #issue-date2-preview { top: 95px; right: -20px; transform: rotate(-90deg); }
       #validity-nt-preview { top: 109px; left: 200px; }
       #validity-tr-preview { top:109px; left: 290px; }
       #name-preview { top: 158px; left: 53px; }
       #dob-preview { top: 188px; left: 97px; }
       #father-name-preview { top: 209px; left: 155px; }
       #address-preview { top: 252px;
       left: 9px;
       white-space: pre-wrap;
       word-wrap: break-word;
       max-width: 256px;
       LINE-HEIGHT: 15PX;
       }
       #blood-group-preview { top: 188px; left: 257px; }
       #organ-donor-preview { top: 188px; left: 320px; }
       
       
       /*Back ground text font side*/
       #f-issue-date-preview { top: 86px; left: 112px; }
       #f-issue-first-preview{ top: 190px; right: -43px; transform: rotate(-90deg); }
       #f-validity-nt-preview { top: 86px; left: 200px; }
       #f-validity-tr-preview { top:86px; left: 290px; }
       #f-name-preview { top: 158px; left: 9px; }
       #f-dob-preview { top: 188px; left: 9px; }
       #f-father-name-preview { top: 209px; left: 9px; }
       #f-address-preview { top: 235px; left: 9px; }
       #f-blood-group-preview { top: 188px; left: 173px; }
       #f-organ-donor-preview { top: 188px; left: 323px; }
       #f-signature-preview { top: 170px; left: 368px; }
       
       
       
       
       /* Positioning for Back Side Preview */
       #dl-no-back-preview { top: -1px; left: 60px; 
           font-size: 1.0rem;
           font-weight: 700;}
           #issued-by-preview {top: 159px; left: 140px; font-size: 0.7rem;}
           #issued-by2-preview {top: 180px; left: 140px; font-size: 0.7rem;}
           #issued-by3-preview {top: 200px; left: 140px; font-size: 0.7rem;}
       #rto-preview { top: 279px; left: 351px; font-size: 0.7rem;}
       #v-category-nt-1-preview { top: 157px; left: 267px; font-size: 0.7rem;}
       #v-category-nt-2-preview{ top: 180px; left: 267px; font-size: 0.7rem;}
       #v-category-TR-preview { top: 200px; left: 267px; font-size: 0.7rem;}
       #issue-date-mcwg-preview { top: 160px;left: 192px; font-size: 0.7rem;}
       #issue-date-lmv-preview { top: 182px;left: 192px; font-size: 0.7rem;}
       #issue-date-tr-preview { top: 203px; left: 192px; font-size: 0.7rem;}
       #emergency-number-preview {top: 280px;left: 20px; font-size: 0.7rem;}
       #WARRNING{  font-size: 0.5rem; /* Larger font size for emphasis */
           font-weight: 200; /* Make it bold */
           position: absolute;
           color: #000; /* Text color */
           font-weight: 600;
           top: 260px; left: 85px;
       
       } 
       #back-dl-no-back-preview { top: 5px; left: 11px; font-size: 0.8rem;font-weight: 700;}
         
       #back-vehicle-class-preview { top: 124px; left: 14px; 
           white-space: pre-wrap;
       word-wrap: break-word;
       max-width: 50px;
       LINE-HEIGHT: 11PX;
       
       } 
       #back-rto-preview { top: 269px; left: 351px; font-size: 0.7rem;}
       #back-issued-by-preview {top: 124px; left: 135px; }
       #back-vehicle-code-preview { top: 124px; left: 77px;  }
       #back-issue-date-mcwg-preview { top: 124px;left: 195px;
           white-space: pre-wrap;
       word-wrap: break-word;
       max-width: 50px;
       LINE-HEIGHT: 11PX;
       
       }
       
       
       #back-Vehicle-category { top: 124px;left: 255px; 
           white-space: pre-wrap;
       word-wrap: break-word;
       max-width: 50px;
       LINE-HEIGHT: 11PX;
       
       }
                     #back-b-no { top: 124px;left: 310px; 
           white-space: pre-wrap;
       word-wrap: break-word;
       max-width: 50px;
       LINE-HEIGHT: 11PX;
       
       }
                       #back-b-no-date { top: 122px;left: 368px; 
           white-space: pre-wrap;
       word-wrap: break-word;
       max-width: 50px;
       LINE-HEIGHT: 9PX;
       
       }
                     #back-b-no-issue { top: 124px;left: 426px;
           white-space: pre-wrap;
       word-wrap: break-word;
       max-width: 50px;
       LINE-HEIGHT: 11PX;
       
       }
       
       
       #back-emergency-number-preview {top: 267px;left: 20px; font-size: 0.7rem;}
       #back-WARRNING{  font-size: 0.5rem; /* Larger font size for emphasis */
           font-weight: 200; /* Make it bold */
           position: absolute;
           color: #000; /* Text color */
           font-weight: 600;
           top: 260px; left: 85px;
       
       } 

       #back-adp-number-preview { top: 55px;left: 125px; }
#back-Haza-preview { top: 82px;left: 125px; }
#back-Hill-preview { top: 82px;left: 240px; }
#back-Form-7-preview { top: 118px; right: -31px; transform: rotate(-90deg); }
       #qrcode {
           position: absolute;
           top: 56px;
           left: 12px;
           width: 150px;
           height: 150px;
       }
       
       #logo-preview {
    width: 50px;
    height: 75px;
    border-radius: 0;
    object-fit: contain;
    position: absolute;
    top: 9px;
    left: 11px;
}
#states-preview {
    width: 37px;
    height: 37px;
    border-radius: 0;
    object-fit: contain;
    position: absolute;
    top: 15px;
    left: 452px;
    z-index: 1;
}
       
       /* Download Button */
       #download-pdf {
           display: block;
           margin: 30px auto;
           padding: 12px 25px;
           font-size: 1rem;
           background-color: #1A91F0;
           color: #fff;
           border: none;
           border-radius: 6px;
           cursor: pointer;
           transition: all 0.3s ease;
       }
       
       #download-pdf:hover {
           background-color: #1170CD;
       }
       
       /* Responsive Design */
       @media (max-width: 767px) {
           form {
               grid-template-columns: 1fr;
           }
       
           .card-preview {
               width: 100%;
           }
       }