@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500&family=Rubik&display=swap');

    * {
        font-family: 'Rubik', sans-serif;
        font-family: 'Rajdhani', sans-serif;
        margin: 0;
        padding: 0;
        user-select: none;
        scroll-behavior: smooth;
        box-sizing: border-box;
        outline: none;
        border: none;
        text-decoration: none;
        transition: all 0.2s linear;
        text-transform: capitalize;
    }

    ::-webkit-scrollbar {
        width: 0;
    }

    html {
        font-size: 62.5%;
        overflow-x: hidden;
    }

    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 3rem 2rem;
    }

    .container .title {
        font-size: 3.5rem;
        color: #444;
        margin-bottom: 3rem;
        text-transform: uppercase;
        text-align: center;
    }

    .container .products-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
        gap: 2rem;
    }

    .container .products-container .product {
        text-align: center;
        background: #fff;
        box-shadow: 0px 10px 30px rgb(0 33 71 / 35%);
        cursor: pointer;
    }

    .pimg {
        overflow: hidden;
    }

    .container .products-container .product:hover {
        outline-offset: 0;
    }

    .container .products-container .product img {
        height: 25rem;
    }

    .container .products-container .product img:hover {
        transform: scale(1.1);
    }

    .container .products-container .product h3 {
        /* padding: 1.5rem 0; */
        padding-top: 16px;
        font-size: 2.8rem;
        color: #fff;
    }

    .container .products-container .product .price {
        font-size: 2rem;
        color: #444;
    }

    .space {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .centralize {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 20px;
    }

    .product img {
        object-fit: cover;
        /* width: 100%; */
    }

    .product .buttons {
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap;
        margin-top: 1rem;
    }

    .product .buttons a {
        flex: 1 1 16rem;
        padding: 0rem 11.6rem;
        font-size: 1.8rem;
        color: #444;
        border: 0.1rem solid #444;
        text-decoration: none;
    }

    .product.buttons a.view {
        background: #444;
        color: #fff;
    }

    .div {
        padding: 10px 12px;
        border-bottom: 1px solid black;
    }

    .buttons {
        margin-bottom: 20px;
    }

    /* footer */

    .folinks,
    .contacts {
        font-size: 1.5em;
    }

    .btn {
        cursor: pointer;
        /* background-color: #1c1c1c; */
        background-color: #242424;
        width: 247px !important;
        height: 43px;
        line-height: 64px;
        left: 70%;
        top: 50%;
        z-index: 0;
        /* border-radius: 12px; */
        border-radius: 20px;
        /* box-shadow: 0px 0px 17px 1px rgba(0, 0, 0, 0.34); */
    }

    .btn span {
        color: #fff;
        display: block;
        transform: translate(-11px, -11px);
        /* padding-left: 35px; */
        text-transform: uppercase;
        font-weight: 600;
        font-size: 16px;
        /* transform: scaleX(0.6); */
        /* letter-spacing: 3px; */
        transform-origin: center left;
        transition: color 0.3s ease;
        position: relative;
        z-index: 1;
    }

    .btn em {
        position: absolute;
        height: 1px;
        background: #fff;
        /* width: 47%; */
        right: 23px;
        top: 50%;
        transform: scaleX(0.25);
        transform-origin: center right;
        transition: all 0.3s ease;
        z-index: 1;
    }

    .btn:before,
    .btn:after {
        content: "";
        background: #fff;
        border-radius: 20px;
        transform: translate(0%, 0%);
        position: absolute;
        height: 50%;
        width: 0;
        transition: 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86);
    }

    .btn:before {
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        top: 0;
        left: 0;
        right: auto;
    }

    .btn:after {
        border-top-left-radius: 0px;
        border-top-right-radius: 0px;
        bottom: 0;
        right: 0;
        left: auto;
    }

    .btn:hover:before {
        width: 100%;
        right: 0;
        left: auto;
    }

    .btn:hover:after {
        /* background-color: rgb(21, 118, 197); */
        width: 100%;
        left: 0;
        right: auto;
    }

    .btn:hover span {
        /* color: black; */
        color: #055db0;
    }

    .btn:hover em {
        background: #000;
        transform: scaleX(0.7);
    }

    .bkcolor {
        background-color: #055db0;
    }