@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');

            :root {
                --main-color: #d3ad7f;
                --black: #13131a;
                --bg: #010103;
                --border: .1rem solid rgba(255, 255, 255, .3);

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

            }

            * {
                font-family: 'Roboto', sans-serif;
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                outline: none;
                border: none;
                text-decoration: none;
                transition: 1s linear;
            }

            body {
                background: var(--bg);
            }

            section {
                padding: 2rem 7%;

            }

            .btn {
                margin-top: 1rem;
                display: inline-block;
                padding: .7rem 3rem;
                font-size: 1.7rem;
                color: #fff;
                background: var(--main-color);
                cursor: pointer;
                text-transform: capitalize;
            }
            

            .btn:hover {
                letter-spacing: .2rem;
            } 

            .header {
                background: var(--bg);
                height: 90px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 1.5rem 7%;
                border-bottom: var(--border);
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                z-index: 1000;
            }

            .header .logo img {
                height: 8rem;
                width: 8rem;
                border-radius: 50%;
            }

            .header .navbar a {
                margin: 0 1rem;
                font-size: 1.6rem;
                color: #fff;
            }

            .header .navbar a:hover {
                color: var(--main-color);
                border-bottom: .1rem solid var(--main-color);
                padding-bottom: .5rem;
            }

            .header .icons div {
                color: #fff;
                cursor: pointer;
                font-size: 2.5rem;
                margin-left: 2rem;
            }

            .header .icons div:hover {
                color: var(--main-color);
            }

            #menu-btn {
                display: none;
            }

            .header .search-form {

                position: absolute;
                top: 115%;
                right: 7%;
                background: #fff;
                width: 50rem;
                height: 3rem;
                display: flex;
                align-items: center;
                transform: scaleY(0);
                transform-origin: top;
            }

            .header .search-form.active {
                transform: scaleY(1);
            }

            .header .search-form input {
                height: 100%;
                width: 100%;
                font-size: 1.6rem;
                color: var(--black);
                padding: 1rem;
                text-transform: none;
            }

            .header .search-form label {
                cursor: pointer;
                font-size: 2.2rem;
                margin-right: 1.5rem;
                color: var(--black);
            }

            .header .search-form label:hover {
                color: var(--main-color);
            }

            .header .cart-items-container {
                position: absolute;
                top: 100%;
                right: -100%;
                height: calc(100vh - 9.5rem);
                width: 35rem;
                background: #fff;
                padding: 0 1.5rem;
            }

            .header .cart-items-container.active {
                right: 0;
            }

            .header .cart-items-container .cart-item {
                position: relative;
                margin: 2rem 0;
                display: flex;
                align-items: center;
                gap: 1.5rem;
            }

            .header .cart-items-container .cart-item .fa-times {
                position: relative;
                top: 1rem;
                right: 1rem;
                font-size: 2rem;
                cursor: pointer;
                color: var(--black);
            }

            .header .cart-items-container .cart-item .fa-times:hover {
                color: var(--main-color);
            }

            .header .cart-items-container .cart-item img {
                height: 7rem;

            }

            .header .cart-items-container .cart-item .content h3 {
                font-size: 2rem;
                color: var(--black);
                padding-bottom: .5rem;
            }

            .header .cart-items-container .cart-item .content .price {
                font-size: 1.5rem;
                color: var(--main-color);
            }

            .header .cart-items-container .cart-item .content .btn {
                width: 100%;
                text-align: center;
            }

            .home {
                min-height: 100vh;
                display: flex;
                align-items: center;
                background: url(Homepage.jpg) no-repeat;
                background-size: cover;
                background-position: center;
            }

            .home .content {

                max-width: 60rem;
            }

            .home .content h3 {
                font-size: 6rem;
                text-transform: uppercase;
                color: #fff;
            }

            .home .content p {
                font-size: 2rem;
                font-weight: lighter;
                line-height: 1.8;
                padding: 1rem 0;
                color: #eee;
            }

            .heading {
                text-align: center;
                color: #fff;
                text-transform: uppercase;
                padding-bottom: 3.5rem;
                font-size: 4rem;
            }

            .heading span {
                color: var(--main-color);
                text-transform: uppercase;
            }

            .about .row {
                display: flex;
                align-items: center;
                background: var(--black);
                flex-wrap: wrap;
            }

            .about .row .image {
                flex: 1 1 45rem;
            }

            .about .row .image img {
                width: 100%;
            }

            .about .row .content{
                flex: 1 1 45rem;
                padding: 2rem;
            }
            .about .row .content h3 {
                font-size: 3rem;
                color: #fff;
            }

            .about .row .content p {
                font-size: 1.6rem;
                color: #ccc;
                padding: 1rem 0;
                line-height: 1.8;

            }

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

            .menu .box-container .box {
                padding: 5rem;
                text-align: center;
                border: var(--border);
            }

            .menu .box-container .box img {
                height: 10rem;
                width: 10rem;
                border-radius: 50%;
            }

            .menu .box-container .box h3 {
                color: #fff;
                font-size: 2rem;
                padding: 1rem 0;

            }

            .menu .box-container .box .price {
                color: #fff;
                font-size: 2.5rem;
                padding: .5rem 0;

            }

            .menu .box-container .box .price span {
                color: #fff;
                font-size: 1.5rem;
                text-decoration: line-through;
                font-weight: lighter;
            }

            .menu .box-container .box:hover {
                background: #ccc;
            }

            .menu .box-container .box:hover >* {
                color: var(--black);
            }

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

            .products .box-container .box {
                text-align: center;
                border: var(--border);
                padding: 2rem;
            }

            .products .box-container .box .icons a {
                height: 5rem;
                width: 5rem;
                line-height: 5rem;
                font-size: 2rem;
                border: var(--border);
                color: #fff;
                margin: .3rem;
            }

            .products .box-container .box .icons a:hover {
                background: var(--main-color);
            }

            .products .box-container .box .image img {
                height: 25rem;
                padding: 2.5rem 0;

            }

            .products .box-container .box .content h3 {
                color: #fff;
                font-size: 2.5rem;

            }

            .products .box-container .box .content .stars {
                padding: 1.5rem;

            }

            .products .box-container .box .content .stars i {
                font-size: 1.7rem;
                color: var(--main-color);
            }

            .products .box-container .box .content .price {
                color: #fff;
                font-size: 2.5rem;
            }

            .products .box-container .box .content .price span {
                color: #fff;
                font-size: 1.5rem;
                font-weight: lighter;
                text-decoration: line-through;
            }

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

            .review .box-container .box {
                border: var(--border);
                align-items: center;
                padding: 3rem 2rem;
            }

            .review .box-container .box p {
                font-size: 1.6rem;
                line-height: 2.8rem;
                color: #ccc;
                padding: 2rem 0;

            }

            .review .box-container .box .user {
                height: 7rem;
                width: 7rem;
                border-radius: 50%;
                object-fit: cover;
            }

            .review .box-container .box h3 {
                padding: 1rem 0;
                font-size: 2rem;
                color: #fff;
            }

            .review .box-container .box .stars i {
                font-size: 1.5rem;
                color: var(--main-color);
            }

            .contact .row {
                display: flex;
                background: var(--black);
                flex-wrap: wrap;
                gap: 1rem;
            }

            .contact .row .map {
                flex: 1 1 45rem;
                width: 100%;
                object-fit: cover;
            }

            .contact .row form {
                flex: 1 1 45rem;
                padding: 5rem 2rem;
                text-align: center;
            }

            .contact .row form h3 {
                text-transform: uppercase;
                font-size: 3.5rem;
                color: #fff;
            }

            .contact .row form .inputbox {
                display: flex;
                align-items: center;
                margin-top: 2rem;
                margin-bottom: 2rem;
                background: var(--bg);
                border: var(--border);
            }

            .contact .row form .inputbox span {
                color: #fff;
                font-size: 2rem;
                padding-left: 2rem;
            }

            .contact .row form .inputbox input {
                width: 100%;
                padding: 2rem;
                font-size: 1.7rem;
                color: #fff;
                text-transform: none;
                background: none;
            }

            .contact .row form .inputbox textarea {
                width: 100%;
                padding: 2rem;
                font-size: 1.7rem;
                color: #fff;
                text-transform: none;
                background: none;
            }

            /* .blogs .box-container {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
                gap: 1.5rem;
                justify-content: center;
            } */

            .blogs .box-container .box {
                border: var(--border);

            }

            .blogs .box-container .box .image {
                height: 40rem;
                overflow: hidden;
                width: 100%;
            }

            .blogs .box-container .box .image img {
                height: 100%;
                object-fit: cover;
                width: 100%;
            }

            .blogs .box-container .box:hover .image img {
                transform: scale(1.2);

            }

            .blogs .box-container .box .content {
                padding: 2rem;
            }

            .blogs .box-container .box .content .title {
                font-size: 2.5rem;
                line-height: 1.5;
                color: #fff;
            }

            .blogs .box-container .box .content .title:hover {
                color: var(--main-color);
            }

            .blogs .box-container .box .content span {
                color: var(--main-color);
                display: block;
                padding-top: 1rem;
                font-size: 2rem;
            }

            .blogs .box-container .box .content p {
                font-size: 1.6rem;
                line-height: 1.8;
                color: #ccc;
                padding: 1rem 0;
            }
            #more {
                display: none;
            }
            #more1 {
                display: none;
            }
            #more2 {
                display: none;
            }
            #more3 {
                display: none;
            }
            .blogs .box-container .box .content .p {
                display: inline;
                font-size: 1.6rem;
                line-height: 1.8;
                color: #ccc;
                padding: 1rem 0;
            }
            .footer{
                background: var(--black);
                text-align: center;
            }
            .footer .share{
                padding: 1rem 0;
            }
            .footer .share a{
                height: 5rem;
                width: 5rem;
                line-height: 5rem;
                font-size: 2rem;
                color: #fff;
                border: var(--border);
                margin: .3rem;
                border-radius: 50%;
            }
            .footer .share a:hover{
                background-color: var(--main-color);
            }
            .footer .links{
                display: flex;
                justify-content: center;
                flex-wrap: wrap;
                padding: 2rem 0;
                gap: 1rem;

            }
            .footer .credit{
                font-size: 2rem;
                color: #fff;
                font-weight: lighter;
                padding: 1.5rem;
            }
            .footer .credit span{
                color: var(--main-color);
            }
/* media queries  */
@media(max-width:991px){
    html{
        font-size: 55%;
    }
    .header{
        padding: 1.5rem 2rem;
    }
}
@media(max-width:768px){
  
    .home {
        min-height: 100vh;
        display: flex;
        align-items: center;
        background: url(Homepage.jpg) no-repeat;
        background-size: cover;
        background-position: center;
    }
    #menu-btn{
        display: inline-block;
    }
    .header .navbar{
        position: absolute;
        top: 100%;
        right: -100%;
        background: #fff;
        width: 30rem;
        height: calc(100vh - 9.5rem);
    }
    .header .navbar.active{
        right: 0;
    }
    .header .navbar a{
        color: var(--black);
        display: block;
        margin: 1.5rem;
        padding: .5rem;
        font-size: 2rem;
    }
    .header .search-form{
        width: 90%;
        right: 2rem;

    }
}
@media(max-width:450px){
   
    html{
        font-size: 55%;
    }
    .header{
        padding: 1.5rem 2rem;
    }
    .home{
        min-height: 100vh;
        display: flex;
        align-items: center;
        background: url(Homepage.jpg) no-repeat;
        background-size: cover;
        background-position: center;
        background-position: left;
        justify-content: center;
        text-align: center;
    }
    .home .content p{
        font-size: 1.5rem;
    }


}
@media(max-width:350px){
   
    html{
        font-size: 40%;
    }
    .header{
        padding: 1.5rem 2rem;
    }
    .home{
        min-height: 100vh;
        display: flex;
        align-items: center;
        background: url(Homepage.jpg) no-repeat;
        background-size: cover;
        background-position: center;
        background-position: left;
        justify-content: center;
        text-align: center;
    }
    .home .content p{
        font-size: 1rem;
    }


}