body {
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
    padding: 0;
    background: #f4f4f4;
    color: #333;
}

header {
    background-color: #0077cc;
    color: white;
    padding: 20px;
    text-align: center;
}

nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}

nav li {
    margin: 0 15px;
}

nav a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

main {
    padding: 20px;
}

section {
    margin-bottom: 40px;
    background: white;
    padding: 20px;
    border-radius: 8px;
}

button {
    background-color: #0077cc;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #005fa3;
}

footer {
    background-color: #e4e1e1;
     font-size: xx-large;
    text-align: center;
    padding: 15px;
    position: fixed;
    width: 100%;
    bottom: 0;
}
           .product-detail {
                max-width: 930px;
                margin: 40px auto;
                padding: 20px;

                border-radius: 8px;
                box-shadow: 0 0 20px rgba(0,0,0,0.1);

                gap: 20px;
            }

            .product-detail img {
                width: -webkit-fill-available;
                height: auto;
                border-radius: 8px;
            }

            .product-info h2 {
                margin-top: 0;
            }

            .product-info p.price {
                font-size: 20px;
                color: #0072ff;
                font-weight: bold;
            }

            .btn-back {
                margin-top: 20px;
                display: inline-block;
                background: #0072ff;
                color: white;
                padding: 10px 105px;
                border-radius: 5px;
                text-decoration: none;
            }

            .img-1 {
                max-width: 800px;
                margin: 40px auto;
                background: #fff;
                padding: 20px;
                box-shadow: 0 0 20px rgba(0,0,0,0.1);
            }
            .img-1 img {
                width: -webkit-fill-available;
                height: auto;
                margin: 40px auto;
                background: #fff;
            }

            .footer-block {
                position: fixed;
                bottom: 1em;
                width: 100%;
                display: flex;
                left: 50%;
                transform: translateX(-50%);
                justify-content: center;
                height: 3.2em;
                bottom: 0;
                max-width: none;
                border-radius: 1em;
                transition: all 0.3s ease;
                z-index: 100;
            }
            .footer-box {
                /* outline: solid 2px; */
                flex: 1;
                height: 3.8em;
                border-radius: 1em;
                position: relative;
                overflow: hidden;
                z-index: 2;
            }

            .footer-box.left {
                border-radius: 1em 1em 0 1em;
                width: 51%;
                transform: translateX(1px);
                filter: drop-shadow(0px 4px 6px #000000ad);
            }
            .footer-box.right {
                border-radius: 1em 1em 1em 0;
                width: 51%;
                transform: translateX(-1px);
                filter: drop-shadow(9px 0px 6px #000000b9);
            }
            .footer-box.left::before {
                position: absolute;
                padding: 3em;
                content: '';
                margin:-3.3em;
                border-radius: 50%;
                right: 0;
                box-shadow: 0 0 0 500px var(--gm88_footer_bg);
                overflow: hidden;

            }
            .footer-box.left > .corner {
                width: 0.8em;
                height: 3em;
                background: var(--gm88_footer_bg);
                z-index: 2;
                border-radius: 1px 259px 233px 0px;
                right: 3em;
                position: absolute;
                top: -8%;
                transform: rotate(-5deg);

            }
            .footer-box.right > .corner {
                width: 0.8em;
                height: 3em;
                background:  var(--gm88_footer_bg);
                z-index: 2;
                border-radius: 259px 233px 0px 233px;
                left: 2.95em;
                position: absolute;
                top: -1%;
                transform: rotate(5deg);
            }
            .footer-box.right::before {
                position: absolute;
                padding: 3em;
                content: '';
                margin:-3.3em;
                border-radius: 50%;
                box-shadow: 0 0 0 500px  var(--gm88_footer_bg);
                overflow: hidden;
                left: 0;
            }
            hr{
                border-width: 1px 1px 0;
           border-style: solid;
           border-color: palevioletred; 
           width: 70%;
           margin-left: auto;
           margin-right: auto;
           margin:20px;
            }