@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=SUSE:wght@100..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sofadi+One&display=swap');


.carousel {
    width: 100%;
    max-width: 400px; /* Adjust max-width to the largest expected image width */
}

.carousel-item {
    text-align: center;
    padding: 20px;
}

.product-card {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%; /* Set the card width to 100% */
}

.product-image {
    width: 100%;
    height: auto; /* Allow the height to adjust based on image aspect ratio */
    object-fit: contain; /* Ensure the image fits within the box without being cropped */
    border-radius: 10px;
    background-color: #e0e0e0; /* Optional: gray background for better contrast */
}

.carousel-inner {
    display: flex;
}

/* Custom design for slide buttons */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: black; /* Black background */
    border-radius: 30%; /* Rounded shape */
    padding: 10px; /* Padding for a larger button */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Shadow effect */
}

.product_name {
    font-family: "Arvo", serif;
    font-weight: 600;
    font-style: normal;
    font-size: 20px;
    letter-spacing: 2px;
}

.title_header {
    font-family: "SUSE", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 40px;
    background: linear-gradient(to right, #3865c6, #00fff3); /* Gradient color */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Product Features */

.product_description {
    border-radius: 15px;
    padding: 20px;
    background: radial-gradient(circle, rgba(5, 106, 210, 0.1), rgba(5, 106, 210, 0.2)),
                linear-gradient(180deg, rgba(5, 106, 210, 0.1) 0%, rgba(5, 106, 210, 0) 100%);
}


.product_description_header {
    font-family: "SUSE", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 40px;
    padding: 5px;
    text-align: center;
    border-radius: 15px;
    background: linear-gradient(45deg, #2b4764, #002750); /* Gradient colors */
    -webkit-background-clip: text; /* Clips the background to the text */
    -webkit-text-fill-color: transparent; /* Makes the text color transparent so gradient shows through */
    background-clip: text; /* Standard syntax for background clipping */
    text-fill-color: transparent;
}

.listed_features {
    font-family: "Kanit", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 25px;
    color: #003b78;
}

.underline_header {
    border: none;
    border-radius: 15px;
    height: 5px; /* Adjust the height as needed */
    background: linear-gradient(45deg, #2b4764, #002750);
}

/* Color Options */

/* Style for the color options section */
.color_options {
    padding: 20px 0; /* Adjust padding as needed */
    border-radius: 15px;
    padding: 20px;
    background: radial-gradient(circle, rgba(251, 251, 255, 0.9), rgba(251, 251, 255, 0.9)),
                linear-gradient(180deg, rgba(251, 251, 255, 0.9) 0%, rgba(251, 251, 255, 0) 100%);
}

/* Style for the horizontal list */
.horizontal-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Adjust the gap between items as needed */
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Style for each list item */
.list-item {
    font-family: "SUSE", sans-serif;
    flex: 1 1 150px; /* Grow and shrink, with a base width of 150px */
    background: #007bff; /* Example background color */
    color: #fff; /* Text color */
    text-align: center;
    padding: 10px;
    font-weight: 500;
    font-size: 20px;
    border-radius: 4px;
    box-sizing: border-box; /* Include padding and border in element's total width and height */
}

/* Optional: Adjust styles for smaller screens */
@media (max-width: 600px) {
    .list-item {
        font-size: 14px; /* Adjust font size */
        padding: 8px; /* Adjust padding */
    }
}

/* Color CSS */
.chrome {
    background: linear-gradient(135deg, #e0e0e0, #ffffff, #e0e0e0, #c0c0c0);
    color: #000;
}

.black-matt {
    background-color: #333;
    color: #fff;
}

.black-chrome {
    background: linear-gradient(135deg, #1a1a1a, #919191, #1a1a1a);
    color: #fff;
}

.white-matt {
    background-color: #fbfbfb;
    color: #000;
    border: 2px solid black;
}

.brass {
    background: linear-gradient(45deg, #b08d57, #e3c29f, #c4a87e, #b08d57);
}

.copper {
    background: linear-gradient(135deg, #7c4d28 25%, #9c6d40 50%, #7c4d28 75%);
}

.gold {
    background: linear-gradient(135deg, #f7e1b5 25%, #f5c71a 50%, #f7e1b5 75%);
    color: #000;
}

.gold-dust {
    background: linear-gradient(135deg, #f5c71a, #d4a100, #f5c71a);
    color: #000;
}
.steel {
    background: linear-gradient(135deg, #c0c0c0, #e0e0e0, #c0c0c0);
    color: #000;
}

.graphite {
    background: linear-gradient(135deg, #646464, #878b87, #646464);
}

.white {
    background: linear-gradient(135deg, #ffffff, #f0f0f0);
    color: #000;
    border: 2px solid black;
}

.marble {
    background: linear-gradient(45deg, #fdfdfd 25%, #f5f5f5 25%, #ffd117 50%, #5a5a5a 50%, #fdfdfd 75%, #ffd117 75%, #f5f5f5 100%);
    color: #000;
}

.gray {
    background: linear-gradient(135deg, #e0e0e0, #c0c0c0);
    color: #000;
}


/* Table in Water Heater */
.custom-table td, .custom-table th {
    vertical-align: middle; /* Vertically centers the content */
    text-align: center; /* Horizontally centers the content */
    font-family: "SUSE", sans-serif;
}

/* Custom styles for the table */
.custom-table thead {
    background-color: #343a40;
    color: white;
}

.custom-table tbody tr:nth-child(odd) {
    background-color: #f2f2f2;
}

.custom-table2 td {
    vertical-align: middle; /* Vertically centers the content */
    text-align: center; /* Horizontally centers the content */
}

.custom-table2 {
    width: 25%; /* Adjusts the table width */
    margin: 0 auto; /* Centers the table within the container */
}

.icon {
    font-size: 30px;
}

.header-text-notify {
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-style: italic;
    text-align: center;
    font-size: 25px;
}

.header-text {
    text-align: center;
}


/* Horizontal listing container */
.horizontal-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.list-item-tiles {
    font-family: "SUSE", sans-serif;
    flex: 1 1 calc(20% - 10px); /* 5 items per row, adjustable */
    max-width: calc(20% - 10px);
    background-color: #fff;
    color: #000;
    padding: 20px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid black;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out;
}

.list-item-tiles:hover {
    transform: scale(1.05);
}

@media (max-width: 1024px) {
    .list-item-tiles {
        flex: 1 1 calc(33.33% - 10px); /* 3 items per row on medium screens */
        max-width: calc(33.33% - 10px);
    }
}

@media (max-width: 768px) {
    .list-item-tiles {
        flex: 1 1 calc(50% - 10px); /* 2 items per row on small screens */
        max-width: calc(50% - 10px);
    }
}

@media (max-width: 480px) {
    .list-item-tiles {
        flex: 1 1 100%; /* 1 item per row on extra small screens */
        max-width: 100%;
    }
}

/* Tile Surface Example */

.hdpolished {
    position: relative;
    background-image: url('/static/images/tiles/surface/hd_polished.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1); /* Polished effect */
}

.higloss {
    position: relative;
    background-image: url('/static/images/tiles/surface/hi_gloss.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: #fff;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1); /* Polished effect */
}

.super {
    position: relative;
    background-image: url('/static/images/tiles/surface/super_polished.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1); /* Polished effect */
}
.baby {
    position: relative;
    background-image: url('/static/images/tiles/surface/baby_polished.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1); /* Polished effect */
}

.metallic {
    position: relative;
    background-image: url('/static/images/tiles/surface/metallic.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: #fff;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1); /* Polished effect */
}

.matt{
    position: relative;
    background-image: url('/static/images/tiles/surface/matt.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1); /* Polished effect */
}

.hdmatt {
    position: relative;
    background-image: url('/static/images/tiles/surface/hd_matt.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: #fff;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1); /* Polished effect */
}

.reactive {
    position: relative;
    background-image: url('/static/images/tiles/surface/reactive.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1); /* Polished effect */
}

.sugar {
    position: relative;
    background-image: url('/static/images/tiles/surface/sugar.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1); /* Polished effect */
}

.wood {
    position: relative;
    background-image: url('/static/images/tiles/surface/wood.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1); /* Polished effect */
}
.satin{
    position: relative;
    background-image: url('/static/images/tiles/surface/satin.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1); /* Polished effect */
}

.stone{
    position: relative;
    background-image: url('/static/images/tiles/surface/stone.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1); /* Polished effect */
}

.anti_skid {
    position: relative;
    background-image: url('/static/images/tiles/surface/anti_skid.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1); /* Polished effect */
}

/*Lights COLOR*/
.warm_white {
    position: relative;
    background-color: #fcf08e;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1); /* Polished effect */
}

.neutral_white {
    position: relative;
    background-color #fffff0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1); /* Polished effect */
}

.cool_white {
    position: relative;
    background-color: #f7ffff;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1); /* Polished effect */
}

.rgb {
    position: relative;
    background: linear-gradient(to right, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255));
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1); /* Polished effect */
}

.text-lines {
    font-family: "Sofadi One", system-ui;
    font-weight: 700;
    font-style: normal;
    font-style: normal;
    font-size: 30px;
    letter-spacing: 2px;
    justify-content: center;
    text-align: center;
    color: #538a88;
}

/* Sink Color Options and Surfaces */
.glossy-sink {
    position: relative;
    background: linear-gradient(to right, rgb(231, 231, 231), rgb(255, 255, 255), rgb(235, 235, 255));
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1); /* Polished effect */
}

.matt-sink {
    position: relative;
    background-color: #cacaca;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1); /* Polished effect */
}

.satin-sink {
    position: relative;
    background-color: #eaeaea;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1); /* Polished effect */
}

.quartz-sink {
    position: relative;
    background: linear-gradient(135deg, #3e2723, #6d4c41 25%, #4e342e 50%, #8d6e63 75%, #3e2723),
                radial-gradient(circle, rgba(255,255,255,0.2) 20%, transparent 20%),
                radial-gradient(circle, rgba(255,255,255,0.1) 10%, transparent 10%),
                radial-gradient(circle, rgba(0, 0, 0, 0.5) 1px, transparent 2px); /* small black dots */
    background-size: 300px 300px, 100px 100px, 150px 150px, 10px 10px; /* adjust for black dots */
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: #fff;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1); /* Polished effect */
}

.metallic-sink {
    position: relative;
    background: linear-gradient(135deg, #000, #333 25%, #111 50%, #666 75%, #000),
                radial-gradient(circle, rgba(255,255,255,0.2) 20%, transparent 20%),
                radial-gradient(circle, rgba(255,255,255,0.1) 10%, transparent 10%),
                radial-gradient(circle, rgba(255, 255, 255, 0.8) 1px, transparent 2px); /* small white dots */
    background-size: 300px 300px, 100px 100px, 150px 150px, 10px 10px; /* adjust for white dots */
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    color: #fff;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.3); /* Polished effect */
}

.stone-sink{
    position: relative;
    background: linear-gradient(135deg, #d6c8b8, #f4e5d1 25%, #c8b99c 50%, #e9d8c8 75%, #d6c8b8), /* Sandstone color gradient */
                radial-gradient(circle, rgba(255,255,255,0.2) 20%, transparent 20%), /* Light spots */
                radial-gradient(circle, rgba(0,0,0,0.05) 10%, transparent 10%); /* Dark speckles */
    background-size: 200px 200px, 100px 100px, 150px 150px; /* Adjust size for textures */
    background-blend-mode: multiply;
    background-repeat: repeat;
    background-position: center;
    color: #333; /* Text color to contrast with the sandstone background */
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.1); /* Polished effect */
}