@charset "UTF-8";
 
@media (min-width: 992px) {
        .product-section .col-xl-2 ,.product-section .col-1g-2{
            width: 20%;
        }
    }
    /* Modal Styles */
    .modal1 {
        display: none; /* Hidden by default */
        position: fixed; 
        z-index: 1000; 
        left: 0;
        top: 0;
        width: 100%; 
        height: 100%; 
        overflow: auto; 
        background-color: rgba(0, 0, 0, 0.7); /* Darker background */
        transition: opacity 0.3s ease; /* Smooth transition */
        opacity: 0; /* Start with full transparency */
    }

    /* Show class to make modal visible */
    .modal1.show {
        display: block;
        opacity: 1; /* Fully opaque when shown */
    }

    .modal-content1 {
        background-color: #fff;
        margin: 10% auto; 
        padding: 50px;
        border: none;
        width: 85%; 
        max-width: 500px;
        text-align: center;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        transform: translateY(-20px); /* Start slightly above */
        transition: transform 0.3s ease; /* Smoothly slide in */
    }

    .modal1.show .modal-content1 {
        transform: translateY(0); /* Slide into place */
        background: #3f2954;
    }

    .close {
        color: #888;
        float: right;
        margin-left: 90%;
        font-size: 24px;
        font-weight: bold;
        cursor: pointer;
        background: none;
        border: none;
    }

    .close:hover,
    .close:focus {
        color: #efe9e9;
        text-decoration: none;
        cursor: pointer;
    }

    .lbtn {
        margin: 10px 5px;
        padding: 10px 10px;
        cursor: pointer;
        border: none;
        background-color: #007bff;

        border-radius: 5px;
        transition: background-color 0.2s;
    }

    button:hover {
        background-color: #0056b3;
    }

    
    
   @media only screen and (max-width: 767px) { /* Targets devices with width less than or equal to 767px */
        
    /* Modal Styles */
    .modal1 {
        display: none; /* Hidden by default */
        position: fixed; 
        z-index: 1000; 
        left: 0;
        top: 0;
        width: 100%; 
        height: 100%; 
        overflow: auto; 
        background-color: rgba(0, 0, 0, 0.7); /* Darker background */
        transition: opacity 0.3s ease; /* Smooth transition */
        opacity: 0; /* Start with full transparency */
    }

    /* Show class to make modal visible */
    .modal1.show {
        display: block;
        opacity: 1; /* Fully opaque when shown */
    }

    .modal-content1 {
        background-color: #fff;
        margin: 10% auto; 
        padding: 50px;
        border: none;
        width: 85%; 
        max-width: 500px;
        text-align: center;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
        transform: translateY(-20px); /* Start slightly above */
        transition: transform 0.3s ease; /* Smoothly slide in */
    }

    .modal1.show .modal-content1 {
        transform: translateY(0); /* Slide into place */
        background: #3f2954;
    }

    .close {
        color: #888;
        float: right;
        margin-left: 90%;
        font-size: 24px;
        font-weight: bold;
        cursor: pointer;
        background: none;
        border: none;
    }

    .close:hover,
    .close:focus {
        color: #efe9e9;
        text-decoration: none;
        cursor: pointer;
    }

    .lbtn {
        margin: 10px 5px;
        padding: 10px 10px;
        cursor: pointer;
        border: none;
        background-color: #007bff;

        border-radius: 5px;
        transition: background-color 0.2s;
    }

    button:hover {
        background-color: #0056b3;
    }