/* Set height to 100% for both html and body, remove default margin, and set background color */
html, body { 
    height: 100%; /* Ensure the page takes up full height */
    margin: 0; /* Remove default margin */
    background-color: blanchedalmond; /* Set background color to blanchedalmond */
    font-family: Palatino, URW Palladio L, serif; /* Set the font family */
}

/* Define .content class to create a flex container with column direction */
.content {
    display: flex; /* Use flexbox layout */
    flex-direction: column; /* Arrange children in a column */
    min-height: 100vh; /* Ensure the content takes at least the full height of the viewport */
}

/* Define the .main class for a flexible layout with wrapping content and centered alignment */
.main {
    flex: 1; /* Allow .main to grow and fill available space */
    display: flex; /* Use flexbox layout */
    flex-wrap: wrap; /* Allow items to wrap to new lines */
    justify-content: center; /* Center content horizontally */
    gap: 1.5rem; /* Add space between items */
    padding: 1rem; /* Add padding around the content */
}

/* Style the .menu class with a background color and text color */
.menu {
    background-color: sienna; /* Set background color to sienna */
    color: blanchedalmond; /* Set text color to blanchedalmond */
}

/* Duplicate styles for .bodi class (seems to be a mistake, same as html, body styles) */
.bodi {
    height: 100%; /* Set height to 100% */
    margin: 0; /* Remove margin */
    background-color: blanchedalmond; /* Set background color */
    font-family: Palatino, URW Palladio L, serif; /* Set font family */
}

/* Same as .content, but likely redundant */
.content {
    display: flex; /* Use flexbox layout */
    flex-direction: column; /* Arrange children in a column */
    min-height: 100vh; /* Ensure content takes at least the full viewport height */
}

/* Same as .main, but likely redundant */
.main {
    flex: 1; /* Allow to grow and fill available space */
    display: flex; /* Use flexbox layout */
    flex-wrap: wrap; /* Allow items to wrap */
    justify-content: center; /* Center content horizontally */
    gap: 1.5rem; /* Add space between items */
    padding: 1rem; /* Add padding */
}

/* Same as .menu, but likely redundant */
.menu {
    background-color: sienna; /* Set background color */
    color: blanchedalmond; /* Set text color */
}

/* Reset some properties for body and html */
body,
html {
    height: 100%; /* Ensure full height */
    font-family: Palatino, URW Palladio L, serif; /* Set font family */
}

/* Utility class for flexbox display */
.d-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; /* Use flexbox layout */
}

/* Align items to the center */
.align-center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; /* Align items vertically to the center */
}

/* Center content both vertically and horizontally */
.flex-centerY-centerX {
    justify-content: center; /* Center horizontally */
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center; /* Center horizontally */
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center; /* Center vertically */
}

/* Set background color of the body */
body {
    background-color: #f7f7f7; /* Set background color */
}

/* Define a page-wrapper that takes up full height */
.page-wrapper {
    height: 100%; /* Take full height */
    display: table; /* Use table display mode */
}

/* Set inner content of the page to align vertically in the middle */
.page-wrapper .page-inner {
    display: table-cell; /* Set inner content to table-cell */
    vertical-align: middle; /* Vertically align content */
}

/* Style for .el-wrapper element with width, padding, and background */
.el-wrapper {
    width: 360px; /* Set width to 360px */
    padding: 15px; /* Add padding */
    margin: 15px auto; /* Center with margin */
    background-color: #fff; /* Set background to white */
}

/* On hover, adjust .h-bg position */
.el-wrapper:hover .h-bg {
    left: 0px; /* Set left position to 0px */
}

/* On hover, adjust the price element */
.el-wrapper:hover .price {
    left: 20px; /* Move the price element */
    -webkit-transform: translateY(-50%); /* Apply vertical transform */
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%); /* Move element vertically by 50% */
    color: #818181; /* Change color */
}

/* On hover, adjust add-to-cart element */
.el-wrapper:hover .add-to-cart {
    left: 50%; /* Position to center horizontally */
}


/* On hover, apply a blur effect to the image and reduce its opacity */
.el-wrapper:hover .img {
    -webkit-filter: blur(7px); /* Apply blur filter for WebKit browsers */
    -o-filter: blur(7px); /* Apply blur filter for older Opera browsers */
    -ms-filter: blur(7px); /* Apply blur filter for Internet Explorer */
    filter: blur(7px); /* Apply blur filter for modern browsers */
    filter: progid:DXImageTransform.Microsoft.Blur(pixelradius='7', shadowopacity='0.0'); /* IE-specific filter for blur */
    opacity: 0.4; /* Reduce image opacity */
}

/* On hover, adjust the position of the .info-inner element */
.el-wrapper:hover .info-inner {
    bottom: 155px; /* Move the element up */
}

/* On hover, delay the transition for .a-size and adjust its position */
.el-wrapper:hover .a-size {
    -webkit-transition-delay: 300ms; /* Set delay for WebKit browsers */
    -o-transition-delay: 300ms; /* Set delay for Opera browsers */
    transition-delay: 300ms; /* Set delay for modern browsers */
    bottom: 50px; /* Move the element upwards */
    opacity: 1; /* Make the element fully opaque */
}

/* Define a box container at the bottom with a fixed height and overflow hidden */
.el-wrapper .box-down {
    width: 100%; /* Full width */
    height: 60px; /* Fixed height */
    position: relative; /* Positioning context for child elements */
    overflow: hidden; /* Hide overflowing content */
}

/* Define a box container at the top with a fixed height and overflow hidden */
.el-wrapper .box-up {
    width: 100%; /* Full width */
    height: 300px; /* Fixed height */
    position: relative; /* Positioning context for child elements */
    overflow: hidden; /* Hide overflowing content */
    text-align: center; /* Center text */
}

/* Style for the image inside the .el-wrapper */
.el-wrapper .img {
    padding: 20px 0; /* Add vertical padding */
    -webkit-transition: all 800ms cubic-bezier(0, 0, 0.18, 1); /* Apply transition with custom cubic-bezier timing for WebKit */
    -moz-transition: all 800ms cubic-bezier(0, 0, 0.18, 1); /* Apply transition with custom cubic-bezier timing for Firefox */
    -o-transition: all 800ms cubic-bezier(0, 0, 0.18, 1); /* Apply transition with custom cubic-bezier timing for Opera */
    transition: all 800ms cubic-bezier(0, 0, 0.18, 1); /* Apply transition with custom cubic-bezier timing */
    /* ease-out effect */
    -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); /* Set custom cubic-bezier timing function for WebKit */
    -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); /* Set custom cubic-bezier timing function for Firefox */
    -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); /* Set custom cubic-bezier timing function for Opera */
    transition-timing-function: cubic-bezier(0, 0, 0.18, 1); /* Set custom cubic-bezier timing function */
}

/* Style for background element with transitions */
.h-bg {
    -webkit-transition: all 800ms cubic-bezier(0, 0, 0.18, 1); /* Apply transition for WebKit */
    -moz-transition: all 800ms cubic-bezier(0, 0, 0.18, 1); /* Apply transition for Firefox */
    -o-transition: all 800ms cubic-bezier(0, 0, 0.18, 1); /* Apply transition for Opera */
    transition: all 800ms cubic-bezier(0, 0, 0.18, 1); /* Apply transition for modern browsers */
    /* ease-out effect */
    -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); /* Set custom cubic-bezier timing function for WebKit */
    -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); /* Set custom cubic-bezier timing function for Firefox */
    -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); /* Set custom cubic-bezier timing function for Opera */
    transition-timing-function: cubic-bezier(0, 0, 0.18, 1); /* Set custom cubic-bezier timing function */
    width: 660px; /* Set width */
    height: 100%; /* Set height to full container height */
    background-color: #3f96cd; /* Set background color */
    position: absolute; /* Position it absolutely */
    left: -659px; /* Place it off-screen initially */
}

/* Style for inner background element */
.h-bg .h-bg-inner {
    width: 50%; /* Set width to 50% */
    height: 100%; /* Set height to full container height */
    background-color: #464646; /* Set background color */
}

/* Style for info-inner with transitions */
.info-inner {
    -webkit-transition: all 400ms cubic-bezier(0, 0, 0.18, 1); /* Apply transition for WebKit */
    -moz-transition: all 400ms cubic-bezier(0, 0, 0.18, 1); /* Apply transition for Firefox */
    -o-transition: all 400ms cubic-bezier(0, 0, 0.18, 1); /* Apply transition for Opera */
    transition: all 400ms cubic-bezier(0, 0, 0.18, 1); /* Apply transition for modern browsers */
    /* ease-out effect */
    -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); /* Set custom cubic-bezier timing function for WebKit */
    -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); /* Set custom cubic-bezier timing function for Firefox */
    -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); /* Set custom cubic-bezier timing function for Opera */
    transition-timing-function: cubic-bezier(0, 0, 0.18, 1); /* Set custom cubic-bezier timing function */
    position: absolute; /* Position it absolutely */
    width: 100%; /* Set full width */
    bottom: 25px; /* Position it slightly above the bottom */
}

/* Style for product name and company name */
.info-inner .p-name,
.info-inner .p-company {
    display: block; /* Display as block elements */
}

/* Style for product name */
.info-inner .p-name {
    font-family: Palatino, URW Palladio L, serif; /* Set font family */
    font-size: 18px; /* Set font size */
    color: #252525; /* Set text color */
}

/* Style for company name */
.info-inner .p-company {
    font-family: Palatino, URW Palladio L, serif; /* Set font family */
    font-size: 12px; /* Set font size */
    text-transform: uppercase; /* Transform text to uppercase */
    color: #8c8c8c; /* Set text color */
}

/* Style for the a-size element */
.a-size {
    -webkit-transition: all 300ms cubic-bezier(0, 0, 0.18, 1); /* Apply transition for WebKit */
    -moz-transition: all 300ms cubic-bezier(0, 0, 0.18, 1); /* Apply transition for Firefox */
    -o-transition: all 300ms cubic-bezier(0, 0, 0.18, 1); /* Apply transition for Opera */
    transition: all 300ms cubic-bezier(0, 0, 0.18, 1); /* Apply transition for modern browsers */
    /* ease-out effect */
    -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); /* Set custom cubic-bezier timing function for WebKit */
    -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); /* Set custom cubic-bezier timing function for Firefox */
    -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); /* Set custom cubic-bezier timing function for Opera */
    transition-timing-function: cubic-bezier(0, 0, 0.18, 1); /* Set custom cubic-bezier timing function */
    position: absolute; /* Position it absolutely */
    width: 100%; /* Set full width */
    bottom: -20px; /* Place it slightly below its original position */
    font-family: Palatino, URW Palladio L, serif; /* Set font family */
    color: #828282; /* Set text color */
    opacity: 0; /* Initially hidden */
}

/* Style for the size text inside .a-size */
.a-size .size {
    color: #252525; /* Set text color */
}

/* Style for cart icon */
.cart {
    display: block; /* Display as block element */
    position: absolute; /* Position it absolutely */
    width: 100%; /* Set full width */
    height: 100%; /* Set full height */
    top: 0; /* Align to the top */
    left: 0; /* Align to the left */
    font-family: Palatino, URW Palladio L, serif;/* Set font family */
    font-weight: 700; /* Set font weight */
}


/* Price inside the cart: Apply transitions, transformations, and positioning */
.cart .price {
    -webkit-transition: all 600ms cubic-bezier(0, 0, 0.18, 1); /* Apply transition for WebKit browsers */
    -moz-transition: all 600ms cubic-bezier(0, 0, 0.18, 1); /* Apply transition for Firefox */
    -o-transition: all 600ms cubic-bezier(0, 0, 0.18, 1); /* Apply transition for Opera */
    transition: all 600ms cubic-bezier(0, 0, 0.18, 1); /* Apply transition for modern browsers */
    /* ease-out transition */
    -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); /* Set timing function for WebKit browsers */
    -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); /* Set timing function for Firefox */
    -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); /* Set timing function for Opera */
    transition-timing-function: cubic-bezier(0, 0, 0.18, 1); /* Set timing function for modern browsers */
    -webkit-transition-delay: 100ms; /* Delay the transition for WebKit browsers */
    -o-transition-delay: 100ms; /* Delay the transition for Opera */
    transition-delay: 100ms; /* Delay the transition for modern browsers */
    display: block; /* Make it a block-level element */
    position: absolute; /* Position the price absolutely */
    top: 50%; /* Align vertically in the center */
    left: 50%; /* Align horizontally in the center */
    -webkit-transform: translate(-50%, -50%); /* Center the element with WebKit transform */
    -ms-transform: translate(-50%, -50%); /* Center the element with Microsoft transform */
    -o-transform: translate(-50%, -50%); /* Center the element with Opera transform */
    transform: translate(-50%, -50%); /* Center the element with standard transform */
    font-size: 16px; /* Set the font size */
    color: #252525; /* Set the font color */
}

/* Add-to-cart button inside the cart: Apply transitions, transformations, and positioning */
.cart .add-to-cart {
    -webkit-transition: all 600ms cubic-bezier(0, 0, 0.18, 1); /* Apply transition for WebKit browsers */
    -moz-transition: all 600ms cubic-bezier(0, 0, 0.18, 1); /* Apply transition for Firefox */
    -o-transition: all 600ms cubic-bezier(0, 0, 0.18, 1); /* Apply transition for Opera */
    transition: all 600ms cubic-bezier(0, 0, 0.18, 1); /* Apply transition for modern browsers */
    /* ease-out transition */
    -webkit-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); /* Set timing function for WebKit browsers */
    -moz-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); /* Set timing function for Firefox */
    -o-transition-timing-function: cubic-bezier(0, 0, 0.18, 1); /* Set timing function for Opera */
    transition-timing-function: cubic-bezier(0, 0, 0.18, 1); /* Set timing function for modern browsers */
    -webkit-transition-delay: 100ms; /* Delay the transition for WebKit browsers */
    -o-transition-delay: 100ms; /* Delay the transition for Opera */
    transition-delay: 100ms; /* Delay the transition for modern browsers */
    display: block; /* Make it a block-level element */
    position: absolute; /* Position the button absolutely */
    top: 50%; /* Align vertically in the center */
    left: 110%; /* Initially position the button outside of view */
    -webkit-transform: translate(-50%, -50%); /* Center the button with WebKit transform */
    -ms-transform: translate(-50%, -50%); /* Center the button with Microsoft transform */
    -o-transform: translate(-50%, -50%); /* Center the button with Opera transform */
    transform: translate(-50%, -50%); /* Center the button with standard transform */
}

/* Style for the text inside the "Add to Cart" button */
.cart .add-to-cart .txt {
    font-size: 12px; /* Set font size */
    color: #fff; /* Set font color to white */
    letter-spacing: 0.045em; /* Add spacing between letters */
    text-transform: uppercase; /* Transform text to uppercase */
    white-space: nowrap; /* Prevent the text from wrapping to the next line */
}

/* Style for the bottom section */
.bottom {
    background-color: sienna; /* Set background color */
    color: blanchedalmond; /* Set text color */
    text-align: center; /* Center align the text */
    padding: 10px 0; /* Add padding to the top and bottom */
}

/* PAGE STRUCTURE */

/* Main content wrapper: Flex layout with column direction */
.content {
    display: flex; /* Use flexbox layout */
    flex-direction: column; /* Align items vertically */
    min-height: 100vh; /* Ensure full viewport height */
}

/* Main section layout: Flexbox with wrapping, centered items */
.main {
    display: flex; /* Use flexbox layout */
    flex-wrap: wrap; /* Allow items to wrap */
    justify-content: center; /* Align elements centrally */
    gap: 1rem; /* Add consistent spacing between items */
    padding: 1rem; /* Add padding around the container */
    max-width: 1200px; /* Set maximum width to prevent excessive stretching */
    margin: 0 auto; /* Center the container */
}

/* Style for each element wrapper in the grid */
.el-wrapper {
    box-sizing: border-box; /* Include padding in the element's width */
    width: 100%; /* Default to full width on small screens */
    max-width: 360px; /* Set maximum width for each item */
    padding: 15px; /* Add padding inside the wrapper */
    margin: 10px auto; /* Center align the wrapper with margins */
    background-color: #fff; /* Set background color to white */
    transition: all 0.3s ease-in-out; /* Smooth transition for element interactions */
}

/* Media Queries */

/* When screen width is at least 768px (tablet and above): Increase font size, spacing, and item sizes */
@media (min-width: 768px) {
    body {
        font-size: 1.2rem; /* Increase body font size */
    }

    .main {
        gap: 2rem; /* Increase spacing between items */
        padding: 2rem; /* Increase padding around the container */
    }

    .el-wrapper {
        width: calc(50% - 2rem); /* Set element width to 50% minus spacing */
        max-width: 400px; /* Increase the maximum width */
        padding: 20px; /* Increase padding */
    }

    .navbar-brand {
        font-size: 2rem; /* Increase navbar brand text size */
    }

    .nav-link {
        font-size: 1.3rem; /* Increase font size of navigation links */
    }

    .info-inner .p-name {
        font-size: 22px; /* Increase product name font size */
    }

    .cart .price {
        font-size: 20px; /* Enlarge price font size */
    }

    .cart .add-to-cart .txt {
        font-size: 14px; /* Enlarge text in the add-to-cart button */
    }
}

/* When screen width is at least 1024px (desktop and above): Adjust wrapper width for larger screens */
@media (min-width: 1024px) {
    .el-wrapper {
        width: calc(33.333% - 1rem); /* Set element width to 33.33% per row */
    }
}

/* When screen width is at least 1441px (large desktop and above): Adjust wrapper width for very large screens */
@media (min-width: 1441px) {
    .el-wrapper {
        width: calc(25% - 1rem); /* Set element width to 25% per row */
    }
}