/* Custom font import and styling */
        @import url('https://fonts.fonts.google.com/specimen/Inter');
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
        
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f7f7f7;
        }

        /* Custom styles for the business card dimensions and shadow */
        .business-card {
            width: 500px; /* Wider card to fit the 1050x600 ratio */
            height: 286px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            position: relative; 
            border: 2px solid #ddd; /* Light border around the card */
            transform: scale(0.75); /* ADJUSTED: Scale down more to fit viewport */
            transform-origin: top center;
            padding: 24px; /* Ensure overall padding */
        }
        
        /* Ensures the QR code is positioned correctly within the card */
        .qr-card-position {
            position: absolute;
            top: 25px; /* Adjusted to fit the new padding */
            left: 25px; /* Adjusted to fit the new padding */
            width: 150px; /* Larger size */
            height: 150px; /* Larger size */
            background-color: white;
            padding: 2px;
            border-radius: 4px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Container for the logo/photo */
        .logo-container {
            position: absolute;
            top: 25px; /* Adjusted to fit the new padding */
            right: 25px; /* Adjusted to fit the new padding */
            width: 150px; /* Larger size */
            height: 150px; /* Larger size */
            background-color: white;
            border: 1px dashed #ccc;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            font-size: 10px;
            color: #ccc;
        }

        /* Styling for the QR code image itself */
        #qrcode > canvas {
            max-width: 100% !important;
            height: auto !important;
            display: block;
        }

        /* Style for the Accent Color block */
        .accent-color-preview {
            height: 40px;
            width: 100%;
            border: 1px solid #ccc;
            border-radius: 0.5rem;
        }
        
        /* Hide the default file input text */
        .file-input-wrapper input[type=file] {
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        /* UPDATED CSS: New layout for text block (Centered at the bottom) */
        .card-text-block {
            position: absolute;
            top: 185px; /* ADJUSTED: Raised 5px from 190px to 185px */
            bottom: 20px;
            left: 24px;
            right: 24px;
            height: auto; /* Let content dictate height */
            overflow: hidden;
            text-align: center; /* Center text within the block */
        }

        /* Custom style for the card logo */
        .cardstoweb-logo {
            width: 100px; 
            height: auto;
            margin-right: 12px;
            vertical-align: middle;
        }

        /* Flex container for the header to align logo and title */
        .header-content {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
    body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
}