/** Shopify CDN: Minification failed

Line 38:49 Expected identifier but found "*"
Line 147:1 Expected "}" to go with "{"

**/
/* assets/custom-styles.css */
 html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    font-family: Arial, sans-serif;
    overflow-x: hidden; /* To prevent horizontal scroll */
}

.hero-section {
  
   min-height: 100vh; /* Full viewport height */
                    width: 100%;
                    padding-top:20px;
}


.hero-content {
     display: flex;
                    justify-content: space-between;
                    text-align: left;

                    width: 100%;
                    max-width: 1200px;
}

.hero-text {
    /* flex: 1;
    text-align: left;
    color: #fff;
    padding: 20px; /* Add padding for spacing */ */
}

.hero-text h1 {
    /* font-size: 3em;
  font-weight:bold; */
  
}

.hero-text p {
    /* font-size: 2.5em; */
    font-family: "Great Vibes";
}

.hero-image {
    flex: 1;
    text-align: right;
    padding: 20px; /* Add padding for spacing */
}

.hero-image img {
    max-width: 100%;
    height: auto;
    display: block; /* Ensure it behaves as a block element */
}

 #canvas {
        width: 350px; /* A4 width */
        height: 495px; /* A4 height */
        background-color: #ffffff;
    }
    #canvasForPrint {
        width: 210mm; /* A4 width */
        height: 297mm; /* A4 height */
        background-color: #ffffff;
        display: none;
    }
    #download-button {
        padding: 8px 16px;
        font-size: 16px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
    }

   .image-upload {
        display: inline-block;
        width: 50px; /* Adjust width as needed */
        height: 50px; /* Square button */
        background-color: transparent; /* Transparent background */
        color: #007bff; /* Text color */
        border: 2px solid #007bff; /* Blue outline */
        border-radius: 5px; /* Rounded corners */
        cursor: pointer; /* Cursor on hover */
        font-size: 16px; /* Font size */
        line-height: 50px; /* Vertical centering */
        text-align: center; /* Center text */
        transition: background-color 0.3s ease; /* Smooth transition */
    }

    /* When button is hovered, change background color */
    .image-upload:hover {
        background-color: #007bff; /* Blue background on hover */
        color: #fff; /* Text color on hover */
    }
    /* When button is clicked, change background color */

    .file-input {
        display: none;
    }

.product__quantity.product__quantity--dropdown {
    display: none;
}

  .custom-grid {
            display: flex;
            flex-wrap: nowrap; /* Prevent items from wrapping */
        }

        .custom-grid .grid__item {
            flex: 1; /* Ensure both sections take up equal space */
        }

        /* Mobile view */
        @media screen and (max-width: 767px) {
            .custom-grid {
                flex-direction: column; /* Stack items vertically */
            }

            .custom-grid .first-section,
            .custom-grid .second-section {
                width: 100%; /* Ensure sections take full width */
            }

            .custom-grid .second-section {
                order: -1; /* Ensure the second section appears first */
                text-align: center; /* Center align text */
            }

      .second-section {
          width: 100%; /* Ensure the section takes full width */
          box-sizing: border-box; /* Include padding and border in the element's total width and height */
          margin: 0; /* Remove margin if needed */

        }

/*This section covers the CSS of Frame 1 Design*/