@font-face {
    font-family: 'signika';
    src: url('/static/fonts/signika-variablefont_wght-webfont.woff2') format('woff2'),
         url('/static/fonts/signika-variablefont_wght-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
hr {
    background-color: #202020
}
body {
    margin: 0;
    padding: 0;
    min-height: 100vh;

}

footer{
    background-color: #202020;
    font-family: 'signika';
    padding: 20px;
    align-items: center;
    flex: 0 0 auto; /* Do not grow or shrink */
    display: flex;
    text-align: center;
    margin-top: auto;
    color: white;
   overflow-x: hidden;
}


a {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit text color */
    background-color: transparent; /* Remove background color */
    cursor: auto; /* Remove pointer cursor */
}
    /* Style the table */
    table {
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
    }

    /* Style the table header */
    th {
        background-color: #f2f2f2;
    }

    /* Style table cells */
    th, td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
    }

    /* Highlight the header row */
    th:first-child, td:first-child {
        background-color: #e0e0e0;
    }

    /* Style even and odd rows differently for better readability */
    tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    tr:nth-child(odd) {
        background-color: #ffffff;
    }

.product_grid {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-gap: 15px;
}

.personalization-dropdown {
 background-color: #8dd2f9ff;
 border: none;
 border-radius: 6px;
 padding: 10px;
 margin-bottom: 10px;
}

.personalization-dropdown:hover {
    background-color: #00b7ff;
    cursor: pointer;
}
.social {
    font-size: 20px;
    cursor: pointer;
    color: #8dd2f9ff
    
}
.social:hover {
    color: #00b7ff;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-gap: 10px;
    padding: 10px;
    margin: 10px;
    margin-top: 0;
    margin-bottom: 0;
    font-family: 'signika';
    font-size: 16px;
    font-weight: bold;
    color: #202020;
    text-align: center;

}



.dropdown {
    position: relative;
    display: inline-block;
}

.base-container {
    padding-left: 3%;
    padding-top: 1%; 
    padding-right: 3%;
    padding-bottom: 1%;

    min-height: 100vh;
}
.navbar {
    background-color: #202020;
    overflow: hidden;
    font-family: 'signika';
    padding: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
    display: flex; /* Use flexbox */
    justify-content: space-between; /* Horizontally align items */
    align-items: center; /* Vertically align items */
}

.lastbtnsstay {
    display: flex;
    float: right;
    align-items: center; /* Vertically center items */
}

/* add another navbar a just for logo*/
.lastbtns {
    display: flex;
    float: right;
    align-items: center; /* Vertically center items */
}

.navbar a.n {
    font-size: 20px;
    color: white;
    text-align: center;
    padding-left: 16px;
    padding-right: 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.navbar a.n:hover {
    /* background-color: #ddd; */
    /* color: black; */
    box-shadow:0px 0px 0px 2px #8dd2f9ff inset;
    padding: 10px 16px;
    border-radius: 4px;
}

.navbar a.un {
    font-size: 16px;
    color: white;
    text-align: center;
    padding-left: 16px;
    padding-right: 16px;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.navbar a.un:hover {
    box-shadow:0px 0px 0px 2px #8dd2f9ff inset;

    border-radius: 4px;
}

.navbar a.un:hover img {
    filter: grayscale(0%); /* This will remove the grayscale effect on hover */
}

.navbar a.logo {
    padding-left: 10px;
    background-color: initial;
    color: initial;
}
/* Add styles for the logo */
.navbar a.logo:hover {
    background-color: initial;
    color: initial;
}

.product-card {
    max-width: 300px;
    border: 1px solid #ccc;
    border-radius: 8px;
    margin: 10px;
    padding: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    font-family: signika;
    color: #202020;
    background-color: #fff;
}

.product-card:hover {
    box-shadow: 0 8px 16px 0 #8dd2f9ff;
}
.product-card h3 {
    font-size: 20px;
    font-weight: bold;
    margin: 10px;
    font-family: 'signika';
    color: #202020;
}

.product-card p {
    font-size: 16px;
    margin-bottom: 10px;
    font-family: 'signika';
    color: #202020;
}


.product-card h3:hover {
    text-decoration: none;
    cursor: default;
    
}
.product-card p:hover {
    text-decoration: none;
    cursor: default;
    
}
.product-image {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}


/* Style for the quantity selector container */
.quantity-selector {
    display: inline-block;
    margin-right: 10px; /* Add some spacing between the label and the select */
}

/* Style for the label */
.quantity-selector label {
    font-weight: bold;
    margin-right: 5px;
}

/* Style for the select element */
.quantity-selector select {
    padding: 5px;
    font-size: 14px;
    border: 1px solid #8dd2f9ff;
    border-radius: 4px;
    background-color: #fff;
    /* Add more styles as needed */
}




        /* Basic styling for the product details page */

.product-details {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
    width: 100%;
}



.product-gallery {
    flex: 1; /* Allow the gallery to grow and take available space */
    /* display: flex; Use Flexbox to arrange gallery images horizontally */
    overflow-x: auto; /* Add horizontal scrollbar if needed */
    padding-top: 10px; /* Add padding for spacing */
}



.gallery-image {
    max-width: 80px; /* Adjust the width of the gallery thumbnails */
    height: auto;
    margin-bottom: 10px;
    cursor: pointer;
    transition: opacity 0.3s;
    /* border: #8dd2f9ff solid 3px; */
}
        /* Adjust image sizes */

.gallery-image:hover {
    opacity: 0.7;
}

.right-div {
    flex: 1; 
    min-width: 0;
}

.main-image-container {
    flex: 1; /* Allow the main image container to grow and take available space */
    display: flex; /* Use Flexbox to center the main image vertically */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    padding-right: 10px; /* Add padding for spacing */
    position: relative;
    margin-top: 10px;
}


.toggle-description {
    display: none;
}




.main-image {
    max-width: 100%; /* Ensure the main image resizes within its container */
    max-height: 100%; /* Ensure the main image doesn't exceed its container's height */
}
.product-description {
    font-size: 16px;
    flex: 2;
    /* padding: 0 20px; */
    /* padding-left: 20px;
    padding-right: 100px; */
    font-family: 'signika';
}

.product-title {
    font-size: 24px;
    font-weight: bold;
    font-family: 'signika';
    margin: 10px 0;
}

.product-price {
    font-size: 24px;
    font-weight: normal;
    font-family: 'signika';
    margin: 10px 0;

}

/* CSS for product buttons */
.product-buttons {
    display: grid; 
    grid-template-columns: 50% 50%; 
    column-gap: 15px;
}

.product-button {
    /* width: 49%; */
    background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
    color: white;
    padding: 10px 0; /* Adjust vertical padding */
    text-align: center;
    text-decoration: none;
    font-family: 'signika';
    font-size: 19px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    /* margin: 5px; */
    /* margin-bottom: 10px;  Add margin between buttons */
}

.checkout-button {
    width: 100%;
    background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
    color: white;
    padding: 10px 0; /* Adjust vertical padding */
    text-align: center;
    text-decoration: none;
    font-family: 'signika';
    font-size: 19px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin: auto;
}

.product-button:hover {
    background-image: linear-gradient(-144deg,#AF40FF, #5B42F3 50%,#00DDEB);
}
.product-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.checkout-button:hover {
    background-image: linear-gradient(-144deg,#AF40FF, #5B42F3 50%,#00DDEB);
}
.checkout-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}


.customization-options {
    font-family: 'signika';
    margin-top: 20px;
    overflow: hidden; /* Add this property to hide content that overflows */
}

.customization-options h5 {
    /* Style for the header elements */
    font-size: 16px;
    margin-bottom: 10px;
    font-weight: bold;

}

.customization-options input[type="radio"],
.customization-options label {
    /* Style for radio buttons and labels */
    margin-right: 10px; /* Add spacing between radio buttons and labels */
}

.customization-options input[type="text"] {
    /* Style for text input fields */
    width: 100%; /* Make the text input fields expand to the full width of their container */
    box-sizing: border-box; /* Include padding and border in the width calculation */
    margin-top: 5px; /* Add spacing between text input fields */
}

/* CSS for popout */
.image-popout {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 2;
    text-align: center;
}

.popout-image {
    max-width: 90%;
    max-height: 90%;
    margin-top: 5%;
}

.popout-button {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 24px;
    color: white;
    background: none;
    border: none;
    cursor: pointer;
}
.nav-button {
    position: absolute;
    top: 50%;
    font-size: 24px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 12.5%;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-left: 8px;
    padding-right: 8px;
    cursor: pointer;
    z-index: 1;
}
.nav-button:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* CSS for Material and Dimensions section */
.product-specs {
    font-family: 'signika';
    background-color: #fff; /* Change background color to white or your preferred color */
    padding: 10px;
    border: 3px solid #8dd2f9ff; /* Add border for separation */
    border-radius: 8px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* Apply box shadow for depth */
    margin-bottom: 15px;
}

.product-specs h2 {
    font-size: 20px; /* Increase font size */
    margin-bottom: 10px;
    font-weight: bold; /* Add font weight */
    font-family: 'signika';
    margin-top: 0;

}

.product-specs p {
    font-size: 18px; /* Increase font size */
    margin-bottom: 10px; /* Increase margin for spacing */
    font-family: 'signika';
}


/* Style for radio inputs */
input[type="radio"] {
    /* Remove the default radio button appearance */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Set a custom size for the radio button */
    width: 20px;
    height: 20px;
    /* Create a circular radio button */
    border-radius: 50%;
    border: 2px solid #8dd2f9ff; /* Border color */
    background-color: transparent; /* Unchecked background color */
    cursor: pointer;
    outline: none; /* Remove outline on focus */
    /* Add a hover effect */
    transition: background-color 0.3s, border-color 0.3s;
  }
  
  /* Style for radio inputs when checked */
  input[type="radio"]:checked {
    background-color: #8dd2f9ff; /* Checked background color */
    border-color: #8dd2f9ff; /* Checked border color */
  }
  
  /* Style for disabled radio inputs */
  input[type="radio"]:disabled {
    cursor: not-allowed;
    opacity: 0.2; /* Reduce opacity for disabled state */
    
  }

/* Styling for text inputs */
input[type="text"] {
    width: 100%; /* Make text inputs fill their container's width */
    padding: 10px; /* Add padding for better visual appearance */
    border: 1px solid #ccc; /* Add a border to text inputs */
    border-radius: 4px; /* Round the corners of text inputs */
    font-size: 16px; /* Set font size */
    margin-top: 15px;
}

/* Optional: Style for focused text input */
input[type="text"]:focus {
    font-family: 'signika';
    border-color: #8dd2f9ff; /* Change border color when input is focused */
    outline: none; /* Remove the default browser outline */
}

.dropdown-mobile {
    display: none;
}

.lower-div {
    display: grid; 
    grid-template-columns: 30% 70%; 
    grid-gap: 15px;
}


@media (max-width: 768px) {
    .right-div {
        margin: 10px;
    }
    .product-card {
        width: 90%;
        margin: auto;
    }

    .product-details {
        display: initial;
        flex-wrap: wrap; 
        justify-content: space-between;
        width: 100%;
        overflow: hidden;
    }
    .base-container {
        padding-left: 15px;
        padding-top: 1%; 
        padding-right: 15px;
        padding-bottom: 1%;
    }
    .product-gallery {
        flex: 1; /* Allow the gallery to grow and take available space */
        /* display: flex; Use Flexbox to arrange gallery images horizontally */
        overflow-x: auto; /* Add horizontal scrollbar if needed */
        /*padding-left: 10px; /* Add padding for spacing */
        /* padding-right: 10px; */
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .main-image-container {
        flex: 1; /* Allow the main image container to grow and take available space */
        display: flex; /* Use Flexbox to center the main image vertically */
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically */
        /*padding-left: 10px; /* Add padding for spacing */
        /* padding-right: 10px; */
        padding-top: 10px;
        padding-bottom: 10px;        
        position: relative;
    
    }

    .toggle-description {
        display: initial;
        background-color: #8dd2f9ff;
        color: black;
        border-radius: 6px;
        padding: 10px;
        width: 100%;
        
    }


       
    .navbar {

        display: block; 
        text-align: center;

    }

    .lastbtns {
        /* shrink div to show all buttons */
        display: none;
        
        }

        .navbar a.logo {
            padding-left: 0px;
            background-color: initial;
            color: initial;
            display: initial;
            
        }

    footer {
        display: none;
    }

    .lastbtnsstay {
        display: flex;
        float: none;
        align-items: center; /* Vertically center items */
    }

    .dropdown-mobile {
        display: block;
    }
    .product-button {
        width: 100%;
        margin: 0px;
        margin-bottom: 10px;
    }


    .product_grid {
        grid-template-columns: auto;
        
    }
    .product-buttons {
        grid-template-columns: 100%; 
    }
    
.lower-div {
    grid-template-columns: 100%; 
}

.center {
    text-align: center;
}


}